﻿/* reset */
html {margin:0;padding:0;height:100%;}
body {margin:0;padding:0;width:100%; height:100%; font-family:'NanumBrGo','맑은 고딕','malgun gothic','돋움',dotum,sans-serif; font-size:16px;line-height:1.2;color:#000;}
div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset,input,table,tr,th,td,button,textarea,select {margin:0;padding:0}
h1, h2, h3, h4, h5, h6{font-size:100%;font-weight:normal}
img {border:0;vertical-align:top}
ul,ol,dl,dt,dd,li {list-style:none; word-break:break-all;}
table {width:100%; /*table-layout:fixed;*/ word-break:break-all;}
table, th, td {border-collapse:collapse ;border-spacing:0; border:0; font-weight:normal;word-wrap:break-word; /*table-layout:fixed;*/ word-break:break-all;}
col {/*display:table-column*/}
caption {overflow:hidden;width:0; height:0;font-size:0;line-height:0}
legend {overflow:hidden;width:0; height:0;font-size:0;line-height:0;}
fieldset, blockquote, iframe, button {border:none}
i, em, u, cite {font-style:normal}
strong,em, b {font-weight:normal}
a {color:#666;text-decoration:none;cursor:pointer;}
a:hover {color:#666;}
button {width:auto; border:none;cursor:pointer;vertical-align:middle;margin:0; padding:0; outline:none;*overflow:visible; background:none; letter-spacing:-1px}
button::-moz-focus-inner {margin:0;padding:0;border:0}
button > span {position:relative}
button, input[type="submit"], input[type="button"], input[type="reset"] {cursor:pointer; border:0}

input {padding:0; margin:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; padding:0; height:28px; line-height:28px; font-size:18px; font-family: 'proximanova','NanumBrGo','맑은 고딕','malgun gothic','돋움',dotum,sans-serif; border:1px solid #ccc; color:#000; box-sizing:border-box; padding:0 0.3em; letter-spacing:-1px; border:0.063em solid #eeeeee; cursor:pointer;}
input[type="file"] {display:inline-block; height:38px; border:1px solid #666; line-height:38px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;  box-sizing:border-box}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} /* input number 기본 버튼 reset*/
input[type="text"]::-ms-clear {display: none;}
input[type="text"] {cursor:text;}
input[disabled] {background:#fff}
input[type="checkbox"] {display:inline-block; width:1em; height:1em; vertical-align:middle;}

sup {position: relative; margin-top:-5px; display:inline-block; /*vertical-align:top;*/ text-indent: 0;}
select {height:30px; margin:0; padding:0; -moz-appearance: none; font-size:16px; line-height:30px; word-wrap:break-word; color:#000}
textarea, button {font-family: 'NanumBrGo','맑은 고딕','malgun gothic','돋움',dotum,sans-serif;}
textarea {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; width:100%; height:63px; padding:8px; border:1px solid #ccc;font-family: 'proximanova','NanumBrGo','맑은 고딕','malgun gothic','돋움',dotum,sans-serif; font-size:18px; line-height:18px; overflow-y:auto; resize:none; color:#000;}

/* skipnav */
#skipnav a {display:block;height:1px;width:1px;margin:0 -1px -1px 0;padding:0;overflow:hidden;font-size:1px;line-height:0}
#skipnav a:active,
#skipnav a:focus,
#skipnav a:hover {width:100%;height:auto;margin:0;padding:10px 0;text-indent:10px;font-weight:700;font-size:13px;color:#333;line-height:1;text-decoration:none;text-align:center}
.blind {overflow:hidden;display:block;width:1px;height:1px;margin:-1px 0 0 -1px;padding:0;border:0;clip:rect(0 0 0 0)}


/*공통*/
h3 {font-size:3.75em; color:#000000; font-weight:800}
h4 {font-size:1.875em; color:#000000; font-weight:300 }
h5 {font-size:1.5em; color:#000000; font-weight:400 }
p {font-size:1em; color:#1f3645; line-height:1.7em}

.wrap {min-width:1050px;}
.wrap .visualArea {position: relative; height:100%; min-height:100%; padding-top:4.75em; box-sizing:border-box;}
.wrap .textArea {position:relative; padding-top:6em; z-index:5}
.wrap .textArea p {margin-top:1.5em;}
.wrap .btnArea {position:relative; margin-top:3.5em;z-index:5}
.wrap .btnArea li {display:inline-block;}
.wrap .btnArea li a {padding:0.6em 2.3em; border-radius:0.313em; color:#000000; border:0.063em solid #000000; font-size:1em;}
.wrap .btnArea li a.btnColor {border-color:transparent; background-color:#ff9600}

.wrap .bgGray {background-color:#fafafa;}
.wrap a.btn01 {color:#000000; display:inline-block; padding:0.8em 3em; font-size: 1em; border:0.063em solid #555555; border-radius: 5px; margin-top:2em;}
.wrap a.btn02 {color:#ffffff; display:inline-block; padding:0.5em 1em; font-size: 1em; border:0.063em solid transparent; border-radius: 5px; background-color:#2c7dc5}
.wrap a.btn03 {color:#2c7dc5; display:inline-block; padding:0.5em 1em; font-size: 1em; border:1px solid #2c7dc5; border-radius:  5px; background-color:transparent;}
.wrap a.btn04 {color:#2c7dc5; text-decoration:underline;}
.wrap .SecInner {width:62.5em; margin:0 auto; text-align: center;}
.wrap .SecInner img {margin:3em 0 0; object-fit:contain; object-position:center;}
.wrap .txt_left {text-align:left}
.wrap .txt_right {text-align:right}
.wrap .txt_center {text-align:center}
.wrap .txt_right a {margin-left:0.5em;}

/*해더*/
.wrap {height:100%}
.wrap .header {position:fixed; top:0; height:6em; width:100%; min-width:1050px; background-color:#222222; text-align:center; z-index:100}
.wrap .header ul {display:inline-block; margin-top:2em;}
.wrap .header ul li {display:inline-block;}
.wrap .header ul li a {display:inline-block; color:#aaaaaa;}
.wrap .header h1 {float: left; margin-top:3em; margin-left:1em;}
.wrap .header ul.gnbMain li {position:relative;}
.wrap .header ul.gnbMain li:after {content:""; position:absolute; display: block; width:100%; height: 0.25em; background-color:transparent; bottom:0; transition:0.3s }
.wrap .header ul.gnbMain li.on:after, .wrap .header ul.gnbMain li:hover:after {background-color:#ff9c00; transition:0.3s }
.wrap .header ul.gnbMain li.on a, .wrap .header ul.gnbMain li:hover a {color:#ffffff; transition:0.3s}
.wrap .header ul.gnbMain li a {padding:1.45em 1.875em 1.45em}
.wrap .header ul.gnbSub {float:right; margin-top:3em; margin-right:1em;}
.wrap .header ul.gnbSub li a {padding:0.3em 1em; border:0.063em solid #333333; font-size:0.875em}
.wrap .header .linkToK {display:block; width:100%; position: absolute; top:0; height:2em; background-color:#000000; text-align:right;padding-top:3px;}
.wrap .header .linkToK a {color:#ffffff; font-size:12px; margin-right:1em; height:2em; border-left:1px solid #111111; box-sizing:border-box; vertical-align:sub; }
.wrap .header .linkToK img {margin:0px 5px; vertical-align:middle;}
.wrap .header .linkToK svg {width:6px; vertical-align:middle;}
.wrap span.icon_new_red {font-size:11px; background-color:red; color:#ffffff; padding:2px 5px 1px; margin-right:5px;}

/*푸터*/
.wrap .footerArea .longbanner {background-image:linear-gradient(34deg, #000 42%, #1b1d4c 58%, #000 72%); cursor: pointer;}
.wrap .footerArea .longbanner .inner {max-width:1000px; margin:0 auto; padding:20px 0; display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap-reverse;}
.wrap .footerArea .longbanner .inner p {color:#ffffff}
.wrap .footerArea .longbanner .inner div i {display: inline-block; width:5px; height:5px; border-radius:50%; background-color:#ffffff; margin: 0 10px}


.wrap .footerArea .siteMap {background-color:#f8f8f8;}
.wrap .footerArea .siteMap ul {max-width:62.500em; margin:0 auto; display:table; width:100%; padding:3em 0;}
.wrap .footerArea .siteMap ul li {display:table-cell; width:19%; width:calc(100% / 5); box-sizing:border-box;}
.wrap .footerArea .siteMap ul li dt {font-weight:800; line-height:5em}
.wrap .footerArea .siteMap ul li dd {font-weight:300; line-height:1.8em; color:#333333;}

.wrap .footerArea .footer {background-color:#111111; padding:5em 0; position:relative; z-index:100}
.wrap .footerArea .footer div {max-width:62.500em; margin:0 auto;}
.wrap .footerArea .footer div h1 img {width:10em;}
.wrap .footerArea .footer div.address ul {display:flex; flex-wrap: wrap; width:100%; justify-content: center;}
.wrap .footerArea .footer div.address li:first-child {flex:auto;}
.wrap .footerArea .footer div.address li { color:#777777; padding:2em 0;}
.wrap .footerArea .footer div.address li:last-child {display:flex; gap: 20px; flex-wrap: wrap; justify-content: center;}
.wrap .footerArea .footer div.address li dl { margin-bottom:50px;}
.wrap .footerArea .footer div.address li dt {font-size:1.375em; line-height:2em; color:#ffffff; font-weight:800}
.wrap .footerArea .footer div.address li dd {line-height:1.5em}
.wrap .footerArea .footer div.address li a {margin-top:20px; display: block;}
.wrap .footerArea .footer div.copyright { border-top:0.063em solid #222222; padding-top: 2em}
.wrap .footerArea .footer div.copyright li {display:inline-block; color:#777777; margin-right:0.5em;}
.wrap .footerArea .footer div.copyright li a:before {content:"|"; margin-right:0.5em; color:#333333;}
.wrap .footerArea .footer div.copyright li a:after {content:""; display:inline-block; width:1em; height:0.8em; background:url(/images/icon_blank.svg) no-repeat; background-size:contain; margin-left:0.3em;}


@keyframes floating {
    0% {transform: translate(0,0);}
    50% {transform: translate(0,8px);}
    100% {transform: translate(0,0);}
}

/*사파리만 적용 */
@media screen and (max-device-width: 1024px){
  body{
    -webkit-text-size-adjust: none;
  }
}

@media screen and (max-width: 1024px) {
	body .mobile {width: 100%; font-size:0.859em}
	.wrap.mobile {min-width:auto}
    .mobile h3 {font-size:3.7em;}
	.mobile h4 {font-size:1.8em;}
	.mobile h5 {font-size:1.5em;}
	.mobile p {font-size:0.95em;}
	
	/*해더*/
    .wrap.mobile .header {min-width:auto; height:105px; overflow: hidden;/* transition:0.3s; animation-fill-mode:both*/}
    .wrap.mobile .header h1 { top:1em; margin-top:2.5em; z-index:9999; transition:none}
    .wrap.mobile .header h1 img {width:8em;}
	.wrap.mobile .header ul.gnbMain {width: 100%; position:absolute; bottom:0; left:0;}
	.wrap.mobile .header ul.gnbMain li {width:calc(100% / 5);}
	.wrap.mobile .header ul.gnbMain li a {padding:10px 0em 11px; font-size:0.95em; height:38px; box-sizing:border-box; width: 100%;}
    .wrap.mobile .header ul.gnbSub {top:1.3em; margin-top:2.7em;}
	
	.wrap.mobile.login .header {position:fixed}

	/*푸터*/
	.wrap.mobile .footerArea .siteMap,
	.wrap.mobile .footerArea .footer {padding-right:0.5em; padding-left:0.5em;}

}
@media screen and (max-width: 768px) {
	.wrap.mobile .header ul.gnbMain li a {font-size:0.74rem; transition:none; }
	.wrap.mobile .header {position:absolute; top:0; height:105px;}
	.wrap.mobile .header.sticky {position:fixed; top:-65px;}
	.wrap.mobile .header.sticky + .visualArea {padding-top:2.75em;}
	.wrap.mobile .headerSub {position:absolute; top:105px;}
	.wrap.mobile .headerSub.sticky {position:fixed; top:40px;}
}

@media screen and (max-width: 700px) {
	.wrap.mobile .footerArea .longbanner .inner {text-align: center; padding:40px 20px }
	.wrap.mobile .footerArea .longbanner .inner p {text-align: center;}
	.wrap.mobile .footerArea .longbanner .inner div img {width:40%}
	.wrap.mobile .footerArea .longbanner .inner img.longbanner_img {margin:0 auto 20px}
}

@media screen and (max-width: 450px) { 
	/*header*/
	.wrap.mobile .linkToK i {display: none;}

}

@media screen and (max-width: 414px) {

	/*푸터*/
	.wrap.mobile .footerArea .siteMap ul li {display: block; width: 100%; text-align:center;}
	.wrap.mobile .footerArea .siteMap ul li dt {line-height:2em; margin-top:1em;}
	.wrap.mobile .footerArea .siteMap ul li dd {display: inline-block; margin-right:1em;}
	.wrap.mobile .footerArea .siteMap ul li dd:last-child {margin-right:0}
	
	.wrap.mobile .footerArea .footer {position: relative; text-align: center;}
	.wrap.mobile .footerArea .footer div.copyright li:first-child {display: block; margin:0 0 0.5em}
}

@media screen and (max-width: 375px) {
	h3 {font-size:3.4em;}

	}
@media screen and (max-width: 360px) {
	h3 {font-size:3.3em;}

	}

@media screen and (max-width: 320px) {
	h4 {font-size:1.6em;}
	h3 {font-size:2.4em;}

	}

@media screen and (max-width: 260px) { 
	/*header*/
	.wrap.mobile .header .linkToK img {margin:1px 0}

}


























