@charset 'utf-8';


html.hidden,
body.hidden {width: 100%; height: 100vh; position: fixed; top: 0; left: 0; overflow: hidden; }

body {height: auto !important;}


/* °ψΕλ */
.inner1720 {max-width: 1720px; width: 100%; position: relative; margin: 0 auto;}
.inner1500 {max-width: 1500px; width: 100%; position: relative; margin: 0 auto;}

button {background: none; border: none; cursor: pointer; }

:root {
	--color-blue: #1560ae;
}

/* input form */
.form-control {display: inline-block; width: 200px; height: 45px; font-size: 1.5rem; border: none; background-color: rgba(255, 255, 255, 0.1); padding: 0 15px; border-radius: 0; box-sizing: border-box; font-family: 'Pretendard'; font-weight: 300;}
.form-control:focus {border-color: #66afe9;  outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)} 
select {-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none; background-image: url('/img/sub/down-arrow.png'); background-repeat: no-repeat; background-position: 94% center;}
select::-ms-expand{display:none;/*for IE10,11*/}
select option {color: #333; font-weight: 500;}
input::placeholder {color: #fff; font-family: 'Pretendard'; font-weight: 300;}
select option:disabled { color: #aaa; }

.ch-box {margin:32px 0 0 0; }
.ch-box .sbox {display:inline-block; }
.ch-box input[type="radio"],
.ch-box input[type="checkbox"] {display:none}
.ch-box input[type="radio"] + label,
.ch-box input[type="checkbox"] + label { position:relative; padding:0 0 0 25px; font-size:1.6rem; font-weight: 300; color: #fff; display: inline-block; vertical-align: middle; line-height: 1.2; }
.ch-box input[type="radio"] + label:after,
.ch-box input[type="checkbox"] + label:after { content:''; display:block; margin:0; width: 13px; height:13px; vertical-align:middle; background:url(/img/common/btn_ch1_off.png) center center no-repeat; position:absolute; left:0; top:50%; transform:translateY(calc(-50% + 0.5px)); }
.ch-box input[type="radio"]:checked + label:after,
.ch-box input[type="checkbox"]:checked + label:after { background:url(/img/common/btn_ch1_on.png) center center no-repeat; }


/* ==================
			HEADER
================== */
header {width: 100%; height: 149px; position: absolute; top: 0; left: 0; z-index: 100;}
header.on {opacity: 0;}
.menuBox {width: 100%; height: 100%;}
.menuBox > .inner1720 {width: 100%; height: 100%;display: flex; justify-content: space-between;}
.menuBox .logo {margin-top: 60px; z-index: 101; width: 137px;}
.menuBox .logo > a {}
.menuBox .logo .cls-1{fill: #fff;}
.menuBox nav {/* padding-left: 40.98%;  */box-sizing: border-box; height: 100px; width: calc(100% - 271px);}
.menuBox .gnb {height: 100%; display: flex; align-items: flex-end; justify-content: end;}
.menuBox .gnb > li {position: relative; height: 100%;}
.menuBox .gnb > li > a {font-size: 1.7rem; color: #fff; font-weight: 500; padding: 0 37.5px; position: relative; height: 100%; display: flex; align-items: flex-end;}
.menuBox .gnb > li > a span {display: inline-block; position: relative; z-index: 1;}
.menuBox .gnb > li > a span:after {content: ''; width: 0; height: 1px; background: #fff; position: absolute; bottom: -10px; left: 0; }
.menuBox .gnb .depth2 {padding: 45px 0 10px 37.5px; box-sizing: border-box; position: absolute; top: 100px; left: 10px; display: none; }
.menuBox .gnb .depth2 > li {display: inline-block; }
.menuBox .gnb .depth2 > li:not(:last-child) {margin-right: 32px;}
.menuBox .gnb .depth2 > li > a {font-size: 1.6rem; color: #fff; font-family: 'Pretendard'; font-weight: 300;}
.menuBox .gnb .depth2.left {left: initial; right: 0; width: 580px; padding-left: 0; padding-right: 37.5px;}
.menuBox .util {height: 100px; display: flex; align-items: flex-end; margin-left: 47px; z-index: 101;}  
.menuBox .util .lang {color: #fff; box-sizing: border-box; position: relative;}
.menuBox .util .lang > a {font-size: 1.5rem; color: #fff; }
.menuBox .util .lang > a i {font-size: 10px;margin-left: 7px;}
.menuBox .util .lang ul {position: absolute; top: 24px; background: rgba(255,255,255, 0.3); width: 145%; left: 50%; transform: translateX(-50%); text-align: center; border-radius: 5px; padding: 10px 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px 0; display: none;}
.menuBox .util .lang ul > li {}
.menuBox .util .lang ul > li > a {color: #fff; font-size: 1.4rem;}
.menuBox .util .search {padding-left: 22px; box-sizing: border-box; position: relative;}
.menuBox .util .search button {}
.menuBox .util .search .formBox {position: absolute; right: 0; top: 32px; width: 0;  transition: 0.6s; display: flex; align-items: flex-end; justify-content: space-between;}
.menuBox .util .search .formBox > form {width: 100%;}
.menuBox .util .search .formBox input {background: padding-box; border-bottom: 1px solid #fff; width: calc(100% - 20px); height: 35px; color: #fff; padding: 0;}
.menuBox .util .search .formBox input::placeholder {font-size: 1.4rem;}
.menuBox .util .search .formBox input:focus {border-top: none; border-left: none; border-right: none; outline: 0; box-shadow: initial; }
.menuBox .util .search .formBox .search_close_btn {color: #fff; font-size: 17px; width: 20px; opacity: 0;}
.menuBox .util .menu-btn {width: 22px; height: 9px; /* display: flex; flex-direction: column; gap: 5px; */ margin-left: 33px; box-sizing: border-box; display: none; cursor: pointer;  position: relative;}
.menuBox .util .menu-btn span {display: block; width: 100%; height: 2px; background: #fff; position: absolute; top: 0; transition: 0.5s;}
.menuBox .util .menu-btn span:nth-child(2) {top: 9px;}

.menuBox .util .search .formBox.on {width: 250px;}
.menuBox .util .search .formBox.on .search_close_btn {opacity: 1;}
.menuBox .util .menu-btn.on span:nth-child(1) {top: 50%; transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.menuBox .util .menu-btn.on span:nth-child(2) {top: 50%; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }


#Wrap.search .menuBox .logo .cls-1{fill: #003da6;}
#Wrap.search .menuBox .gnb > li > a,
#Wrap.search .menuBox .gnb .depth2 > li > a,
#Wrap.search .menuBox .util .lang > a,
#Wrap.search .menuBox .util .lang ul > li > a,
#Wrap.search .menuBox .util .search .formBox input,
#Wrap.search .menuBox .util .search .formBox .search_close_btn {color: #111;}
#Wrap.search .menuBox .util .search .formBox input {border-bottom: 1px solid #111;}
#Wrap.search .menuBox .util .menu-btn span { background: #111; }
#Wrap.search .menuBox .gnb > li > a span:after {background: #111;}
#Wrap.search .menuBox .util .lang ul { background: rgba(0,0,0, 0.05); }
#Wrap.search .menuBox .util .search .formBox input::placeholder { color: #111;}


header.all {position: fixed; top: 0;}

/* hover */
.menuBox .gnb > li:hover > a span:after {width: 100%; transition: 0.4s;}
.menuBox .gnb .depth2 > li:hover > a {font-weight: 500;}

/* mobileMenu */
#Wrap .allMenu_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99; backdrop-filter: blur(3px); display: none;} 
.m-menu {position: fixed; top: 0; right: -60%; width: 60%; height: 100vh; z-index: 100; background: #1e1e1e; }
.m-menu .gnb {position: absolute; margin: 120px 0 0 0; width: 100%; text-align: center;  display: flex; flex-direction: column; gap: 40px 0;}
.m-menu .gnb > li {}
.m-menu .gnb > li > a {display: block; font-size: 3.5rem; font-weight: bold; color: #fff; font-family: 'Pretendard';} 
.m-menu .gnb > li > a span {display: inline-block; position: relative;}
.m-menu .gnb > li > a span:before {content: ''; width: 0; height: 1px; background: #fff; position: absolute; bottom: -8px; left: 15px; }
.m-menu .gnb .depth2 {display: flex; align-items: center; flex-direction: column; gap: 15px 0; margin-top: 30px; display: none;}
.m-menu .gnb .depth2 > li {}
.m-menu .gnb .depth2 > li > a {font-size: 1.8rem; color: rgba(255, 255, 255, 0.7);  padding: 0 18px; box-sizing: border-box;} 


/* .m-menu .gnb > li:hover > a,
.m-menu .gnb > li.on > a {color: var(--color-blue);}*/
.m-menu .gnb > li:hover > a span:before, 
.m-menu .gnb > li.on > a span:before {width: 100%; transition: 0.4s;}
/* .m-menu .gnb .depth2 > li:hover > a {color: var(--color-blue);} */





/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; 	/* line-height: 140%; */ word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; /* line-height:140%; */}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{/*  line-height:120%; */ margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; /* line-height: 140%;  */}
.privacy .sTxt {margin: 15px 0; }
.privacy .sTxt h3 { margin-left: 8px; font-size:16px; margin-bottom: 5px; }
.privacy .sTxt p { margin-top: 10px; }
.privacy .sTxt dt { margin-top: 10px; }
.privacy .sTxt dd { margin:0 8px; display: flex; gap: 5px 20px; flex-wrap: wrap; }
.privacy .sTxt dd > span {width: 140px;}

.privacy-cnt .privacy > * {line-height: 1.8; font-family: 'Pretendard';}
.privacy-cnt .privacy .txtBox {margin: 15px 0; }

/* ==================
			footer
================== */
footer {background: #1e1e1e; z-index: 5; position: relative;}
footer .banner {padding: 62px 0 60px; box-sizing: border-box; border-bottom: 1px solid rgba(222, 222, 222, 0.06);}
footer .banner .list {display: flex;  justify-content: space-between; align-items: center; opacity: 0.4;}
footer .info {padding: 100px 0 120px;}
footer .info .cnt {display: flex; justify-content: space-between;}
footer .info .txtBox {}
footer .info .txtBox > div {display: flex; gap: 0 28px;}
footer .info .txtBox > div  > * {font-size: 1.7rem; color: #fff;}
footer .info .txtBox > div .name {}
footer .info .txtBox > div a {}
footer .info .txtBox > p {font-size: 1.6rem; color: rgba(255, 255, 255, 0.5); font-weight: 300; margin: 25px 0; line-height: 1.9; font-family: 'Pretendard'; }
footer .info .txtBox > p > span:not(list-child) { display:inline-block; margin-right:15px; }
footer .info .txtBox .copyright {font-size: 1.4rem; color: rgba(255, 255, 255, 0.2); font-weight: 300;}
footer .info .link {text-align: right;}
footer .info .link .family-site {position: relative;}
footer .info .link .family-site button {font-size: 1.6rem; font-weight: 500; color: #fff; position: relative; font-family: 'Urbanist'; padding-top: 5px; padding-bottom: 5px; }
footer .info .link .family-site button:after {content: ''; position: absolute; bottom: 0; right: 0;  width: 100%; height: 1px; background: #fff; transition:all 0.4s; ease-in-out; }
footer .info .link .family-site.on button:after { width:0; right: 0;}
footer .info .link .family-site .site-link {display: none; position: absolute; bottom: 30px; right: 0; background-color:#fff; width: 160px; text-align: left;padding: 15px 20px;}
footer .info .link .family-site .site-link li:not(:last-child) {margin-bottom:10px;}
footer .info .link .family-site .site-link li a { font-size: 14px; }
footer .info .link .family-site.on .site-link {display: block;}
footer .info .link .a_link {display: flex; align-items: center; gap: 0 20px; margin: 30px 0;}
footer .info .link .a_link a {font-size: 1.4rem; color: rgba(255, 255, 255, 0.5);}
footer .info .link .top_btn {width: 43px; height: 43px; background: #2f2f2f; font-size: 1.1rem; color: rgba(255, 255, 255, 0.5); font-weight: 500;}