@charset 'utf-8';

/* °øÅë */
:root {
	--mainC: #E10012;
	--baseFont: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	--enF : "Orbitron", sans-serif;
	--Poppins: "Poppins", sans-serif;
	--redHat: "Red Hat Display", sans-serif;;
	--mt: 224px;
	--headerH: 85px;
}

figure{margin: 0;}
*{line-height: 1.3em; box-sizing:border-box; word-break:keep-all;}
.fbox{display:flex;}
.fbox_ac{align-items:center;}
.fbox_jcs{justify-content:space-between;}
.fbox_jcc{justify-content:center;}
.fbox_jcfe{justify-content:flex-end;}
.w1600{margin: 0 auto; max-width: 1600px; width: 100%;}
.w1700{margin: 0 auto; max-width: 1700px; width: 100%;}
.w1920{margin: 0 auto; max-width: 1920px; width: 100%;}

/* ½ºÅ©·Ñ */
.os-theme-dark>.os-scrollbar>.os-scrollbar-track, .os-theme-light>.os-scrollbar>.os-scrollbar-track{background: #FAFAFA; width: 2px;}
.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{width: 2px ; background: #D9D9D9; height: 100px !important;}

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:15px;	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{ font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; 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%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }

/* header
------------------------------------------------------ */
.header{position:fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: #fff;}
.header .top{position:relative; padding: 25px 60px 13px}
.header .top::after{content:""; position:absolute; bottom: 0; left: 50%; width: 100vw; height: 1px; background: #E6E6E6; transform:translateX(-50%);}
.header .top .logo a{display:inline-block; vertical-align: top;}
.header .top .h_banner{width: calc(100% - 86px); padding-left: 35px;}
.header .top .h_banner figure{position:relative; background: var(--mainC); height: 40px; padding: 0 35px;}
.header .top .h_banner figure::after{content:""; position:absolute; left: 0; bottom: -8px; height: 8px; width: 100%; background: #C9C9CA;}
.header .top .h_banner .box{margin-top: 21px;}
.header .top .h_banner .box h1{font-weight:bold; font-size:24px; color: #000;}
.header .top .h_banner .box .fbox{gap:25px}
.header .top .h_banner .box .fbox .lang{display:flex; align-items:center; gap:10px}
.header .top .h_banner .box .fbox .lang a{position:relative; font-size:15px; color: #B8B8B8;}
.header .top .h_banner .box .fbox .lang a::after{content:""; position:absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #000; transition:0.3s}
.header .top .h_banner .box .fbox .lang .icon_box{display:flex; align-items:center; width: 40px; height: 20px; border-radius:10px; background: #F3F3F3;padding: 0 5px;}
.header .top .h_banner .box .fbox .lang .icon_box span{display:inline-block; width: 10px; height: 10px; background: var(--mainC); border-radius:50%; transition:0.6s; position:relative; left: 0;}
.header .top .h_banner .box .fbox .btn a{display:inline-block; vertical-align: top; width: 120px; line-height: 40px; font-weight:600; background: #F3F3F3; text-align: center; border-radius:5px; transition:0.3s}
.header .top .h_banner .box .fbox .btn a i{font-size:11px; transform:translateY(-4px); transition:0.3s}
.header .top .h_banner .box .fbox .lang a:hover{color: #000;}
.header .top .h_banner .box .fbox .lang a.on{font-weight:600; color: #000; }
.header .top .h_banner .box .fbox .lang a:hover::after,
.header .top .h_banner .box .fbox .lang a.on::after{width: 100%;}
.header .top .h_banner .box .fbox .lang .icon_box span.on{left: 20px;}
.header .nav{position:relative; height: 85px; background: #fff; padding: 0 52px 0 60px; border-bottom: 1px solid #E6E6E6; box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.05);}
.header .nav .bg{display:none; position:absolute; top: 84px; left: 0; width: 100%; height: 335px; background: #fff; border-bottom: 1px solid #E6E6E6; box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.05); }
.header .nav .logo{}
.header .nav .logo a{display:none;  vertical-align: top;}
.header .nav .gnb{position:absolute; top: 0; left: 50%; text-align: center; transform:translateX(-50%);}
.header .nav .gnb > ul{display:flex; font-size:0;}
.header .nav .gnb > ul > li{position:relative; }
.header .nav .gnb > ul > li > a{display:inline-block; vertical-align: top; padding: 0 60px; font-weight:500; font-size:19px; color: #000; line-height: 85px; transition:0.6s}
.header .nav .gnb > ul > li > ul{display:none; position:absolute; top: 85px; left: 0; width: 100%; height: 333px; padding: 20px 0; border-right: 1px solid #E6E6E6;}
.header .nav .gnb > ul > li > ul::before{content:""; position:absolute; top: 0; left: 50%; width: 0; height: 3px; background: var(--mainC); transition:0.3s; transform:translateX(-50%);}
.header .nav .gnb > ul > li > ul::after{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; transition:0.3s}
.header .nav .gnb > ul > li:first-of-type > ul{border-left: 1px solid #E6E6E6;}
.header .nav .gnb > ul > li > ul > li{}
.header .nav .gnb > ul > li > ul > li > a{display:inline-block; width: 100%; vertical-align: top; font-weight:300; font-size:17px; color: #666; padding: 10px 0; transition:0.3s}
.header .nav .gnb > ul > li > ul > li > a span{position:relative; color: #666; transition:0.3s}
.header .nav .gnb > ul > li > ul > li > a span br{display:none; }
.header .nav .gnb > ul > li > ul > li > a i{font-size:11px; transform:translateY(-4px);}
.header .nav .gnb > ul > li > ul > li > a span i{position:absolute; right: -13px; top:4px;}
.header .nav .gnb > ul > li > ul > li > ul{display:none; }
.header .nav .m_btn{width: 41px; height: 41px; cursor: pointer; text-align: center;}
.header .nav .m_btn span{position:relative; display:inline-block; vertical-align: top; width: 25px; height: 2px; background: transparent; margin-top: 20px;}
.header .nav .m_btn span::before{content:""; position:absolute; top: -5px;left: 0; width: 100%; height: 100%; background: #333;}
.header .nav .m_btn span::after{content:""; position:absolute; top: 5px;left: 0; width: 100%; height: 100%; background: #333;}

.header .all{position:fixed; top: 0; right: -100%; width: 100%; height: 100vh; z-index: 100; background: #fff; opacity: 0; transition:1s}
.header .all.on{right: 0; opacity: 1;}
.header .all .all_ui{position:absolute; top: 0; left: 0; width: 100%; display:flex; justify-content:space-between; padding: 0 52px 0 60px; margin-top: 35px;}
.header .all .all_ui .logo{margin-top: 5px;}
.header .all .all_ui .close{width: 40px; height: 40px; text-align: center; cursor: pointer;}
.header .all .all_ui .close span{position:relative; display:inline-block; vertical-align: top; width: 25px; height: 2px; background: transparent; margin-top: 19px;}
.header .all .all_ui .close span::before{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #333; transform:rotate(45deg);}
.header .all .all_ui .close span::after{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #333; transform:rotate(-45deg);}
.header .all .all_gnb{width: calc(100% - 560px); padding-left: 100px; padding-right: 62px;}
.header .all .all_gnb > ul{height: calc(100vh - 200px); margin: 100px 0; overflow-y: scroll;}
.header .all .all_gnb .os-content > li{position:relative; display:flex; padding:60px 0 40px; border-bottom: 1px solid #E2E2E2; margin-right: 30px;}
.header .all .all_gnb .os-content > li::after{content:""; position:absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--mainC); transition:0.6s}
.header .all .all_gnb .os-content > li:first-of-type{padding-top: 0;}
.header .all .all_gnb .os-content > li > a{display:inline-block; vertical-align: top; font-weight:600; font-size:30px; color: #000; width: 200px; transition:0.3s}
.header .all .all_gnb .os-content > li > ul{width: calc(100% - 200px);display:flex; flex-wrap:wrap; gap:40px 0}
.header .all .all_gnb .os-content > li > ul > li{}
.header .all .all_gnb .os-content > li > ul > li > a{display:inline-block; vertical-align: top;font-size:18px; color: #222; padding: 6px 0; width: 187px;}
.header .all .all_gnb .os-content > li > ul > li > a span{display:flex; gap:0 4px}
.header .all .all_gnb .os-content > li > ul > li > a span br{display:none; }
.header .all .all_gnb .os-content > li > ul > li > a i{font-size:11px;}
.header .all .all_gnb .os-content > li > ul > li > a > i{transform:translateY(-5px);}
.header .all .all_gnb .os-content > li > ul > li > ul{}
.header .all .all_gnb .os-content > li > ul > li > ul > li{padding-top: 10px;}
.header .all .all_gnb .os-content > li > ul > li > ul > li > a{position:relative; font-size:18px; color: #777; display:inline-block; transition:0.3s; padding: 5px 0;}
.header .all .all_gnb .os-content > li > ul > li > ul > li > a::after{content:""; position:absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #444; transition:0.3s}
.header .all .all_gnb .os-content > li > ul.sub_depth05 > li:last-of-type a{width: auto;}



.header .all .left{position:relative; display:flex; justify-content:flex-end; flex-direction:column; width: 560px; background:url(/img/common/all_bg.png) 50% 50% /cover no-repeat; order:-1; padding: 0 60px 54px;}
.header .all .left .txt{position:relative;}
.header .all .left .txt::after{content:""; position:absolute; bottom: -28px; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.4);}
.header .all .left .txt > ul{}
.header .all .left .txt > ul > li{margin-bottom:40px;}
.header .all .left .txt > ul > li:last-of-type{margin-bottom:0;}
.header .all .left .txt > ul > li > span{font-weight:700; font-size:18px; color: #fff; letter-spacing:-0.02em;}
.header .all .left .txt > ul > li > ul{display:flex; margin-top: 15px; gap:0 20px}
.header .all .left .txt > ul > li > ul > li{font-weight:400; font-size:16px; color: #fff;}
.header .all .left .copy{font-family:var(--enF); font-weight:500; font-size:13px; color: #fff; letter-spacing:-0.03em; opacity: 0.7; margin-top: 60px;}

.header.on .top{display:none; }
.header.on .nav .logo a{display:inline-block; }
.header .nav.on .bg{ border-top: 1px solid #E6E6E6;}
.header .nav.on .gnb > ul > li > a{padding: 0 100px;}

.footer{position:relative; background: #121212; padding: 80px 160px 0; overflow: hidden;}
.footer .top_btn{position:absolute; text-align: center; top: 360px; right: 60px; cursor: pointer;}
.footer .top_btn .icon{display:inline-block; vertical-align: top; width: 11px; height: 11px; background:url(/img/common/icon_top.png) 50% 50% no-repeat; transition:0.3s}
.footer .top_btn p{font-family: var(--enF); font-size:15px; color: #fff; transition:0.3s}
.footer .fbox{}
.footer .fbox .box{width: 35%;}
.footer .fbox .box:last-of-type{width: 65%;}
.footer .fbox .box .f_logo{margin-bottom:60px;}
.footer .fbox .box dl{display:flex; margin-bottom:30px;}
.footer .fbox .box dl:last-of-type{margin-bottom:0;}
.footer .fbox .box dl dt{width: 130px; font-weight:700; font-size:18px; letter-spacing:-0.02em; color: #ffff;}
.footer .fbox .box dl dd{margin-top: 3px;}
.footer .fbox .box dl dd address{font-size:14px; letter-spacing:-0.02em; color: #888; margin-bottom:10px;}
.footer .fbox .box dl dd ul{display:flex; gap:0 15px}
.footer .fbox .box dl dd ul li{font-size:14px; letter-spacing:-0.02em; color: #888;}
.footer .fbox .box nav{}
.footer .fbox .box nav > ul{display:flex;}
.footer .fbox .box nav > ul > li{text-align: center; padding: 0 2.23vw; border-right: 1px solid #1A1A1A;}
.footer .fbox .box nav > ul > li.w98 span{width: 98px;}
.footer .fbox .box nav > ul > li:first-of-type{border-left: 1px solid #1a1a1a;}
.footer .fbox .box nav > ul > li > span{display:block; width: 82px; font-weight:700; font-size:18px; letter-spacing:-0.02em; color: #fff; text-align: center;}
.footer .fbox .box nav > ul > li > ul{padding-top: 20px;}
.footer .fbox .box nav > ul > li > ul > li{}
.footer .fbox .box nav > ul > li > ul > li > a{display:inline-block; vertical-align: top; font-size:16px; letter-spacing:-0.02em; color: #888; padding: 10px 0;}
.footer .fbox .box nav > ul > li > ul > li > a.nowrap{white-space: nowrap}
.footer .fbox .box nav > ul > li > ul > li > a i{font-size:12px; color: #888; transform:translateY(-3px);}
.footer .bot{position:relative; margin-top: 75px; justify-content:space-between; align-items:center; padding: 25px 0;}
.footer .bot::before{content:""; position:absolute; top: 0; left: 50%; width: 100vw; height: 1px; background: rgba(255, 255, 255, 0.1); transform:translateX(-50%);}
.footer .bot .copy{font-size:15px; color: #888;}
.footer .bot .family{position:relative; }
.footer .bot .family p{display:flex; justify-content:center; align-items:center; font-family: var(--enF); font-size:16px; color: rgba(255, 255, 255, 0.8); border:1px solid rgba(255, 255, 255, 0.10); height: 60px; padding: 0 30px; cursor: pointer;}
.footer .bot .family p i{margin-left: 82px; color: rgba(255, 255, 255, 0.8); transition:0.3s}
.footer .bot .family ul{display:none; position:absolute; bottom: 60px; left: 0; width: 100%; max-height: 400px; overflow-y: scroll;}
.footer .bot .family ul {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.footer .bot .family ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.footer .bot .family ul li{}
.footer .bot .family ul li a{font-family: var(--enF); display:flex; align-items:center; width: 100%; height: 60px; padding: 0 30px; font-size:16px; color: rgba(142, 142, 142, 1); background: #121212; border:1px solid rgba(255, 255, 255, 0.10); border-bottom: none;}

.footer .bot .family p.on i{transform:rotate(180deg);}

@media (hover: hover){
	.header .top .h_banner .box .fbox .btn a:hover i{color: #fff;}
	.header .top .h_banner .box .fbox .btn a:hover{color: #fff; background: var(--mainC);}

	.header .nav .gnb > ul > li > ul > li > a:hover i,
	.header .nav .gnb > ul > li > ul > li > a:hover span,
	.header .nav .gnb > ul > li > ul > li > a:hover{color: #000;}
	.header .nav .gnb > ul > li:hover > a{color: var(--mainC);}
	.header .nav .gnb > ul > li:hover > ul::before{width: 100%;}
	.header .nav .gnb > ul > li:hover > ul::after{background: #F8F8F8;}

	.header .all .all_gnb .os-content > li:hover::after{width: 100%;}
	.header .all .all_gnb .os-content > li:hover > a{color: var(--mainC);}
	.header .all .all_gnb .os-content > li > ul > li:hover > a{font-weight:700; }
	.header .all .all_gnb .os-content > li > ul > li > ul > li > a:hover{color: #444;}
	.header .all .all_gnb .os-content > li > ul > li > ul > li > a:hover::after{width: 100%;}

	.footer .bot .family ul li a:hover{background: #222222; color: #fff;}
	.footer .top_btn:hover p{color: var(--mainC);}
	.footer .top_btn:hover .icon{background:url(/img/common/icon_topH.png) 50% 50% no-repeat;}
}

@media (max-width: 1800px){
	.header .nav.on .gnb > ul > li > a{padding: 0 80px;}

	.footer{padding: 80px 60px 0;}
	.footer .fbox .box nav > ul > li{padding: 0; width: 16.6667%; text-align: center;}
	.footer .fbox .box nav > ul > li.w98 span,
	.footer .fbox .box nav > ul > li > span{width: 100%;}

	.footer .top_btn{top: 20px; right: 20px;}


}

@media (max-width: 1740px){
	.w1700{ padding: 0 40px; }
}

@media (max-width: 1660px){
	.header .top{ padding: 25px 30px 13px}

	.header .nav{padding: 0 22px 0 30px;}
	.header .nav .gnb > ul > li > a{padding: 0 50px;}
	.header .nav.on .gnb > ul > li > a{padding: 0 60px;}
	.header .nav .gnb > ul > li > ul > li > a span br{display:block; }
	.header .nav .gnb > ul > li > ul > li > a span i{top: 24px;}
	
	.header .all .left{width: 420px; padding: 0 20px 50px;}
	.header .all .all_gnb{padding: 0 50px; width: calc(100% - 420px);}
	.header .all .all_ui{padding:  0 30px;}
	.header .all .left .txt > ul > li{margin-bottom:20px;}
	.header .all .left .txt > ul > li > ul{margin-top: 8px;}
	.header .all .left .txt::after{bottom: -19px;}
	.header .all .left .copy{margin-top: 40px; font-size:11px;}

	.footer{padding: 80px 40px 0;}
	.footer .fbox .box .f_logo{margin-bottom:30px;}
	.footer .fbox .box dl{flex-wrap:wrap;}
	.footer .fbox .box dl dt{width: 100%; margin-bottom:10px;}
	.footer .fbox .box{width: 27%;}
	.footer .fbox .box:last-of-type{width: 73%;}
}

@media (max-width: 1600px){
	.w1600{padding: 0 40px;}
}

@media (max-width: 1400px){
	.header .nav .gnb{margin-left: 60px;}
	
	.header .nav .gnb > ul > li > a,
	.header .nav.on .gnb > ul > li > a{padding: 0 50px;}

	.header .all .all_gnb{padding: 0 20px;}
	.header .all .all_gnb .os-content > li{padding: 30px 0;}
	.header .all .all_gnb .os-content > li > ul{gap:20px 0}
	
}

@media (max-width: 1200px){

	:root{
		--mt: 175px
	}
	.w1600{padding: 0 16px;}
	.w1700{ padding: 0 16px; }

	.header .top{ padding: 0 0 8px}
	.header .top .logo {display:none; }
	.header .top .h_banner{padding-left: 0; width: 100%;}
	.header .top .h_banner .box{margin-top: 13px; padding: 0 16px;}
	.header .top .h_banner figure{height: 30px; padding:0 16px;}

	.header .nav{padding: 0 8px 0 16px;}
	.header .nav .logo a{display:inline-block;}
	.header .nav .bg,
	.header .nav .gnb{display:none; }
	
	.header .all .all_ui{padding: 10px 16px; margin-top: 0; align-items:center;}
	.header .all .all_gnb{width: 100%; padding: 0 16px;}
	.header .all .left{position:static; width: 0; background: transparent; padding: 0;}
	.header .all .left .txt{display:none; }
	.header .all .left .copy{position:absolute; bottom: 0; left: 0; width: 100%; font-size:15px; color: #222; text-align: center; padding: 20px 0;}
	
	.footer{padding: 40px 0 0; overflow: visible;}
	.footer .fbox {padding: 15px 16px;}
	.footer .fbox .box{width: 100%; display:flex; flex-wrap:wrap;}
	.footer .fbox .box:last-of-type{display:none; }
	.footer .fbox .box .f_logo{width: 100%;}
	.footer .fbox .box .f_logo img{max-width: 140px;}
	.footer .fbox .box dl{margin-bottom:0px;}
	.footer .bot{margin-top: 40px;}
	.footer .bot::before{width: 100%;}
}

@media (max-width: 1000px){
	.header .all .all_gnb > ul{margin: 80px 0; height: calc(100vh - 160px);}
	.header .all .all_gnb .os-content > li{display:block; text-align: right; padding: 0; border-bottom: none; margin-right: 0;}
	.header .all .all_gnb .os-content > li::after{display:none; }
	.header .all .all_gnb .os-content > li > a{font-weight:700; width: 100%; padding: 10px 0;}
	.header .all .all_gnb .os-content > li > ul{display:none; width: 100%;}
	.header .all .all_gnb .os-content > li > ul > li > a{width: 100%; font-weight:500; display:block; font-size:22px;}
	.header .all .all_gnb .os-content > li > ul > li > a span{font-size:22px; display:flex; justify-content:flex-end; color: #222;}
	.header .all .all_gnb .os-content > li > ul > li > ul{display:none; padding-bottom:10px;}
	.header .all .all_gnb .os-content > li > ul > li > ul > li{padding: 0;}
	.header .all .all_gnb .os-content > li > ul > li > ul > li > a{font-size:20px;}

	.header .all .all_gnb .os-content > li > a.on{color: var(--mainC);}
	.header .all .all_gnb .os-content > li > ul > li > a.on{font-weight:700; }
}

@media screen and (max-width: 900px){
	.footer .bot{ flex-direction: column-reverse; }
	.footer .bot .copy{ margin-top: 15px; }
}

@media screen and (max-width: 750px){
	.footer .fbox .box dl{ margin-bottom: 20px; }
}


G16
@media screen and (max-width: 800px){
	:root{
		--mt: 145px
	}
	.header .nav{height: 60px;}
	.header .nav .logo a img{max-width: 80%;}
	
	.header .top .h_banner figure::after{height: 4px; bottom: -4px;}
	.header .top .h_banner .box h1{font-size:20px;}
	.header .top .h_banner .box .fbox{gap:10px}
	.header .top .h_banner .box .fbox .lang{gap:5px}
	.header .top .h_banner .box .fbox .btn a{height: 35px; line-height: 35px;}

	.header .all .left .copy{font-size:13px;}
	
	.footer .bot{flex-wrap:wrap; margin-top: 30px;}
	.footer .bot::before{top: -10px;}
	.footer .bot .copy{order:3; width: 100%; margin-top: 20px;}
	.footer .fbox .box dl{width: 100%; margin-bottom:20px;}
	.footer .fbox .box dl:last-of-type{margin-bottom:0;}

}