@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.m-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1620px) {	
}
@media all and (max-width:1420px) {	
    .m-inner {width:94%;}
.inner {width:94%;}
.s-inner {width:94%;}
}


#header{width: 100%; height: 100px; top: 0; left: 0; position: fixed; z-index: 99; background-color: transparent;border-bottom:1px solid rgba(255,255,255,0.1);}
#header.scroll{background-color: #fff;border-bottom:1px solid rgba(0,0,0,0.1);}
#header.ons{background-color: #fff;border-bottom:1px solid rgba(0,0,0,0.1)}
#header.onss{background-color: #fff;border-bottom:1px solid rgba(0,0,0,0.1)}
#header #logo{position: absolute; left: 50px; top: 50%; transform: translateY(-50%); z-index: 2;}
#header #logo .on{display: block;}
#header #logo .off{display: none;}
#header.ons #logo .on{display: none;}
#header.onss #logo .on{display: none;}
#header.scroll #logo .on{display: none;}
#header.ons #logo .off{display: block;}
#header.onss #logo .off{display: block;}
#header.scroll #logo .off{display: block;}
#header #logo a{}
#header #logo a img{}
#header .pcGnb{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;}
#header .pcGnb > ul{display: flex; justify-content: center;}
#header .pcGnb > ul::after{content: ''; width: 100%; height: 0; background-color: rgba(255,255,255, 1); position: absolute; top: 100px; left: 0; z-index: -1;  transition: height 0.1s ease;}
#header .pcGnb > ul:hover::after{height: 330px;}
#header .pcGnb > ul > li{position: relative;}
#header .pcGnb > ul > li > div{}
#header .pcGnb > ul > li > div > a{font-size: 19px; font-weight: 600; color: #fff; display: block; line-height: 100px; padding: 0 85px;}
#header.ons .pcGnb > ul > li > div > a{color: #222;}
#header.scroll .pcGnb > ul > li > div > a{color: #222;}
#header .pcGnb > ul > li > ul{display: none; position: absolute; text-align: center; padding:  30px 0; top: 100px; left: 50%; transform: translateX(-50%); width: 100%;}
#header .pcGnb > ul > li > ul > li{}
#header .pcGnb > ul > li > ul > li + li{margin-top: 18px;}
#header .pcGnb > ul > li > ul > li > a{font-size: 17px; font-weight: 500; color: #444;}
#header .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline;}
#header .lang_box{position: absolute; right: 70px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap:8px; z-index: 2;}
#header .lang_box .icon{}
#header .lang_box .icon img{max-width: 17px;}
#header .lang_box .list{display: flex;}
#header .lang_box .list li{font-family: 'Play', serif; font-weight: 700; font-size: 15px; line-height: 1em; color: #000;}
#header .lang_box .list li:nth-child(2){padding-left: 12px; margin-left: 12px; border-left: 1px solid #cfcfcf;}
#header .lang_box .list li a{opacity: 0.3; transition: .4s; color: #000;}
#header .lang_box .list li a:hover{opacity: 1;}
#header .lang_box .list li.on{}
#header .menuToggle{cursor: pointer; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); z-index: 2; display: none;}
#header .menuToggle i{font-size: 24px; color: #fff;}
#header .menuToggle i::before{color: #fff;}
#header.scroll .menuToggle i::before{color: #222;}
#header.ons .menuToggle i::before{color: #222;}
#header.onss .menuToggle i::before{color: #222;}

@media all and (max-width:1600px){
	#header #logo{left: 3%;}
	#header #logo a img{max-width: 212px;}
	#header .lang_box{right: 3%;}
	#header .pcGnb > ul > li > div > a{padding: 0 70px;}
}
@media all and (max-width:1280px){
	#header{height: 64px;}
	#header #logo a img{max-width: 176px;}
	#header .pcGnb{display: none;}
	#header .menuToggle{display: block;}
	#header .lang_box{right: calc(3% + 40px);}
	#header .lang_box .list li:nth-child(2){padding-left: 8px; margin-left: 8px;}
/*	#header .lang_box .icon{display: none;}*/
}
@media all and (max-width:768px){
	#header #logo a img{max-width: 160px;}
}

.moGnb{display: none;}
@media all and (max-width:1280px){
	.mo_bg{}
	.moGnb{position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; padding-top: 100px; z-index: -1; background: #133f90; padding-top: 140px; opacity: 1; transition: .4s; display: block;}
	.moGnb.on{z-index: 98; right: 0;}
	.moGnb .lang{display: none;}
	.moGnb .lang li{}
	.moGnb .lang li.on{}
	.moGnb .lang li a{}
	.moGnb .lang li.on a{}
	.moGnb .gnb{display: grid; grid-template-columns: repeat(3, 1fr);}
	.moGnb .gnb > li{text-align: center; height: calc(50vh - 70px); padding: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); position: relative;}
	.moGnb .gnb > li.active > div::after{content: '↓'; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; color: #fff; font-size: 16px; font-family: 'SUIT', sans-serif;}
	.moGnb .gnb > li > div{margin-bottom: 20px; position: relative;}
	.moGnb .gnb > li > div > a{color:#fff; font-size: 24px; font-weight: 700;}
	.moGnb .gnb > li.active > div > a{pointer-events: none;}
	.moGnb .gnb > li:hover > div > a{color: #fff;}
	.moGnb .gnb > li > ul{display: block; background-color: #507bcb;}
	.moGnb .gnb > li > ul > li{}
	.moGnb .gnb > li > ul > li > a{color:#ddd; font-size: 17px; transition: .4s; font-weight: 300;}
	.moGnb .gnb > li > ul > li:hover > a{color: #fff; text-decoration: underline;}
	.moGnb .gnb > li > ul > li + li{margin-top: 15px;}
	.moGnb{overflow-y: scroll; padding-top: 100px;}
	.moGnb .gnb{grid-template-columns: repeat(1, 1fr);}
	.moGnb .gnb > li{height: auto; padding: 0px; text-align: left; cursor: pointer;}
	.moGnb .gnb > li + li{border-top: 1px solid rgba(255,255,255,0.1);}
	.moGnb .gnb > li > div{margin-bottom: 0;}
	.moGnb .gnb > li > div > a{color: #fff; font-size: 20px; width: 100%; display: block; padding: 20px;}
	.moGnb .gnb > li > ul{}
	.moGnb .gnb > li > ul > li{}
	.moGnb .gnb > li > ul > li + li{margin-top: 0;}
	.moGnb .gnb > li > ul > li > a{color: #fff; display: block; width: 100%;padding: 10px 30px;}
	.moGnb .gnb > li > ul{display: none;}

	.moGnb .lang{display: flex; align-items: center; gap:20px; justify-content: flex-end; padding: 0 20px; margin-top: 40px;}
	.moGnb .lang li{}
	.moGnb .lang li.on{}
	.moGnb .lang li a{font-family: "Montserrat", sans-serif; font-size: 16px; color: #000; font-weight: 700; opacity: 0.5; padding-bottom: 4px;}
	.moGnb .lang li.on a{opacity: 1; color: #128e39; border-bottom: 1px solid #128e39;}
}
@media all and (max-width:768px){
	.moGnb{padding-top: 70px;}
/*	.moGnb .gnb > li > div{padding: 15px;}*/
	.moGnb .gnb > li > div > a{font-size: 18px;}
	.moGnb .gnb > li > ul > li > a{padding: 10px 20px; font-size: 16px;}
}


/* #header { position:fixed; width:100%; height:100px; box-sizing:border-box; z-index:300;  margin: 0 auto; display:flex; justify-content:space-between;align-items: center; border-bottom:1px solid rgba(255,255,255,0.2)}
#header .hd_bx { line-height:100px;  }
#header .hd_mbx { display: none; }

#header #logo { font-size:0; padding-left:70px; z-index:599; position:relative}
#header #logo a { width:167px; height:53px;}
#header #logo a.logo { display: block; background:url("/images/common/logo.png") no-repeat left center; background-size:auto 100%; }

#header .loca{position: absolute;right: 130px;}
#header .loca a{padding: 5px 20px; border-radius: 100px; border: 1px solid #fff; display: flex; align-items: center; color: #fff; font-family: 'poppins'; font-size: 1.6rem; gap: 15px; }
#header .loca a:hover{background: #184ea2;border: 1px solid #184ea2;}

.menuToggle { position: absolute; right:0; top:0; width:80px; height:80px; cursor:pointer; z-index:101; }
.menuToggle span { display:block;  height:3px; border-radius:3px;   position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s; background:#FFF}
.menuToggle span.t { margin-top: -11px; width:30px;}
.menuToggle span.m { margin-top:-1px; width: 20px; }
.menuToggle span.b { margin-top: 9px; width:30px; }

#header.mo_on .menuToggle span.t {transform: rotate(45deg);  margin-top: 0;}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform: rotate(-45deg); width:30px;  margin-top: 0;} 

#header.scroll .menuToggle span { background:#222}
#header.mo_on .menuToggle span { background:#FFF} 




#gnb_pc {margin-right: 60px;}
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li > div {display:block; font-size:1.8rem; line-height:100px; position:relative; width: auto; padding: 0 40px; cursor: pointer;letter-spacing:0; }
#gnb_pc > ul > li > div  a { color:#FFF;  font-weight:600 }
#gnb_pc > ul > li > ul { display: none; width:180px; background:#184ea2; position: absolute; top: 100px; left: 50%; margin-left: -90px; padding: 20px;}
#gnb_pc > ul > li > ul > li > a {display:block; width:100%; font-size:1.7rem; color:#fff; padding:0.4em 12px; line-height: 1.4em;  box-sizing: border-box; }
#gnb_pc > ul > li > ul > li > a.justify{text-align: justify; padding: 0.8em 20px; height: 51.98px;}
#gnb_pc > ul > li > ul > li > a.justify::after{content: ''; display: inline-block; width: 100%; height: 0;}
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li > ul > li > a:hover {text-decoration: underline;}


#header.menu_on {background:#FFF}
#header.menu_on #logo a.logo { background:url("/images/common/logo_on.png") no-repeat left center; background-size:auto 100%; }
#header.menu_on #gnb_pc > ul > li > div  a,
#header.menu_on #gnb_pc .gnb_dp1>div>span{color:#222}
#header.menu_on .t_menu { background:#022a47} 

#header.scroll {background:#FFF; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
#header.scroll #logo a.logo { background:url("/images/common/logo_on.png") no-repeat left center; background-size:auto 100% }

#header.scroll #lang ul li {border:1px solid #1c2a51; }
#header.scroll #lang ul li a {color:#1c2a51; font-weight:600}
#header.scroll #lang ul li.on a {background:#1c2a51; color:#FFF; font-weight:500}

#header.scroll #gnb_pc > ul > li > div  a,
#header.scroll #gnb_pc .gnb_dp1>div>span{color:#222}

#header.scroll .t_menu { background:#1c2a51}

#header.scroll .loca a{border: 1px solid #184ea2;color: #184ea2;}
#header.scroll .loca a img{filter: invert(53%) sepia(44%) saturate(1835%) hue-rotate(189deg) brightness(51%) contrast(98%);}
#header.scroll .loca a:hover{color: #fff;}
#header.scroll .loca a:hover img{filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(109%) contrast(101%);}




#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:500px; padding: 80px 0;
    background:#184ea2; overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left;
    transition: all 0.4s ease; -webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0);
    -ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);
    transform: translateX(100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:3.5em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:1.9rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:15px 1.5em; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1.7rem; color:#4b4b4b;padding:0 1.5em; font-weight: 500; border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}
#gnb_mo > ul > li > ul > li > a br{display: none;}
#gnb_mo > ul > li > div.on { background: #002a6b; }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}
#gnb_mo.m_menuOn{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }






@media all and (max-width:1400px){
    #header #logo{padding-left: 30px;}
    #header .loca{right: 90px;}
    #gnb_pc {margin-right: 40px;}
}
@media all and (max-width:1280px){
    #header { height:80px; text-align: center; }
    #header #logo a { height:40px;width: 127px;}
    #gnb_pc {margin-right: 30px;}
    #gnb_pc > ul > li > div{padding: 0 30px; line-height: 80px;}
    #gnb_pc > ul > li > ul {top: 80px;}
}
@media all and (max-width:1080px){
    #gnb_pc > ul > li > div{font-size: 1.6rem;}
}

@media all and (max-width:980px){
    #header #lang { margin-right:80px} 
    .menuToggle { width:70px; height:80px }
    #header .hd_bx { line-height:80px; }
    #header .hd_mbx { display: block; }
    #gnb_pc {display:none;}
    #gnb_mo { text-align: left; }
    #gnb_mo { padding: 70px 0; }
    #header .loca{right: 75px;}
    #header .loca a{padding: 0; width: 40px; height: 40px; text-align: center; justify-content: center;}
    #header .loca a p{display: none;}
}

@media all and (max-width:767px) {
    #header { height:60px; }
    #header #logo { padding-left:20px }
    #header #logo a {height:35px; width: 110px;}
    #header #lang { margin-right:80px} 
    #header #lang ul li a {line-height:26px;}
    .menuToggle { width:60px; height:60px }
    #gnb_mo { max-width: 100%; padding: 60px 0; }
    #header.mo_on #logo a.logo { background:url("/images/common/logo.png") no-repeat left center; background-size:auto 100%; }
    #header .loca{right: 65px;}
}

@media all and (max-width:480px){
#header #lang { margin-right:20vw} 
#header #lang ul li a {padding:0 0.7em; }
} */




/* footer */
#footer {padding: 80px 0; background: #000;position: relative; z-index: 99;}
#footer .inner{display: flex; justify-content: space-between; flex-wrap: wrap;}
#footer .logo{width: 167px;}
#footer .logo img{width: 100%;}
#footer .info{color: #fff; font-size: 1.5rem; opacity: 0.5;display: flex; flex-wrap: wrap; flex-direction: column; text-align: right;justify-content: space-between;}
#footer .info ul{display: flex; gap: 30px;}
#footer .info ul span{display: inline-block; margin-right: 10px; font-weight: bold;}
#footer .info ul li{position: relative;}
#footer .info ul li:after{position: absolute;width: 1px; height: 11px; background: #fff; top: 50%; transform: translateY(-50%); right: -15px; content: '';}
#footer .info ul li:last-child:after{display: none;}
#footer .info p{font-size: 1.3rem;}

#footerClone {padding: 80px 0; background: #000;position: relative; z-index: 99;}
#footerClone .inner{display: flex; justify-content: space-between; flex-wrap: wrap;}
#footerClone .logo{width: 167px;}
#footerClone .logo img{width: 100%;}
#footerClone .info{color: #fff; font-size: 1.5rem; opacity: 0.5;display: flex; flex-wrap: wrap; flex-direction: column; text-align: right;justify-content: space-between;}
#footerClone .info ul{display: flex; gap: 30px;}
#footerClone .info ul span{display: inline-block; margin-right: 10px; font-weight: bold;}
#footerClone .info ul li{position: relative;}
#footerClone .info ul li:after{position: absolute;width: 1px; height: 11px; background: #fff; top: 50%; transform: translateY(-50%); right: -15px; content: '';}
#footerClone .info ul li:last-child:after{display: none;}
#footerClone .info p{font-size: 1.3rem;}


@media all and (max-width:1280px){
    #footer {padding: 60px 0;}
    #footer .logo{width: 140px;}
    #footer .info{font-size: 1.4rem;}
    #footer .info p{font-size: 1.2rem;}
    #footer .info ul{flex-wrap: wrap;}

    #footerClone {padding: 60px 0;}
    #footerClone .logo{width: 140px;}
    #footerClone .info{font-size: 1.4rem;}
    #footerClone .info p{font-size: 1.2rem;}
    #footerClone .info ul{flex-wrap: wrap;}
}
@media all and (max-width:1024px){
    #footer .inner{justify-content: center;}
    #footer .info{width: 100%;margin-top: 40px; text-align: center;}
    #footer .info ul{justify-content: center; gap: 5px 20px;}
    #footer .info ul li:after{right: -10px;}
    #footer .info p{margin-top: 20px;}

    #footerClone .inner{justify-content: center;}
    #footerClone .info{width: 100%;margin-top: 40px; text-align: center;}
    #footerClone .info ul{justify-content: center; gap: 5px 20px;}
    #footerClone .info ul li:after{right: -10px;}
    #footerClone .info p{margin-top: 20px;}
}
@media all and (max-width:560px){
    #footer .logo{width: 120px;}
    #footer .info ul li:nth-child(3):after{display: none;}

    #footerClone .logo{width: 120px;}
    #footerClone .info ul li:nth-child(3):after{display: none;}
}
@media all and (max-width:454px){
    #footer {padding: 40px 0;}
    #footer .info{margin-top: 20px;}
    #footer .info ul li:nth-child(2):after{display: none;}
    #footer .info ul li:nth-child(3):after{display: block;}
    #footer .info ul li:nth-child(4):after{display: none;}

    #footerClone {padding: 40px 0;}
    #footerClone .info{margin-top: 20px;}
    #footerClone .info ul li:nth-child(2):after{display: none;}
    #footerClone .info ul li:nth-child(3):after{display: block;}
    #footerClone .info ul li:nth-child(4):after{display: none;}
}


.go-top{position: fixed; bottom: 30px; right: 30px;background: #204a96; width: 60px; height: 60px; color: #fff;z-index: 999; border-radius: 100px;}
.go-top svg path{fill: currentColor; stroke: currentColor;  }
.go-top p{font-size:9px;font-family: 'Montserrat'; font-weight: bold;}

@media all and (max-width:980px){
    .go-top{ bottom: 20px; right: 20px; width: 50px; height: 50px;}
}
@media all and (max-width:480px){
    .go-top{ bottom: 15px; right: 15px; width: 45px; height: 45px;}
}