@charset 'utf-8';
/* common */
:root {
    --baseFont: 'Pretendard', 'Malgun Gothic', 'verdana', sans-serif;
	--mainC: #ED6C00;
	--subC: #;
	--bRound : 100px;
}

.w1720{ max-width:1720px; margin: 0 auto; width: 100%; }
.w1600{ max-width:1600px; margin: 0 auto; width: 100%; }

.ps100{ padding: 0 100px;}
.m120{ margin: 120px 0;}
.mb120{ margin-bottom: 120px;}

.flexBox{ display:flex;}
.flexBox.center{ display:flex; justify-content:center; align-items:center; }

figure.fitBox{ position: relative; width: 100%; height: 100%; overflow: hidden;}
figure.fitBox img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width: 100%; min-height:100%; object-fit: cover;}

#dimmed{ position: fixed; top: 0; left: 0; z-index: 1001; background: rgba(0,0,0,0.7); width: 100%; height: 100%; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display:none; }

#viewBtn{ position: relative; padding: 0 20px; width: 200px; height: 50px; font-weight: 500; letter-spacing: -0.34px; color:rgba(255,255,255,0.5); border-radius:var(--bRound); overflow: hidden;}
#viewBtn span{ position: relative; z-index: 5; transition:all 0.7s; }
#viewBtn:after{ content:''; display:block; width: calc(100% + 4px); height: calc(100% + 4px); background: var(--mainC); border-radius:var(--bRound); position: absolute; top: -2px; 
left: calc(-100% - 4px); transition:all 0.7s; }
#viewBtn:before{ content:''; display:block; width:  calc(100% - 4px); height:  calc(100% - 4px); position: absolute; top: 0; left: 0; border-radius:var(--bRound); 
border:2px solid rgba(255, 255, 255, 0.20); }
#viewBtn:hover{ color:#fff; }
#viewBtn:hover:after{ left: 0;}

#slideBar{ position: relative; width: calc(100% - 100px); margin-bottom: -100px; height: 3px; background: rgba(255,255,255,0.1); border-radius:10px; }
#slideBar span{ display:block; height: 7px; border-radius:10px; background: var(--mainC); transform:translateY(-3px); transition:all 0.5s; }

#chkBox{ display:flex; justify-content:flex-end; margin: 20px 0; color:#fff; } 
#chkBox label{ display:inline-flex; align-items:center; cursor:pointer; }
#chkBox label p{ display:flex; align-items:center; }
#chkBox label span{ position: relative; display:block; width: 20px; height: 20px; border:2px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.2); border-radius:5px; 
margin-right: 15px; transition:all 0.3s; }
#chkBox label span:after{ content:''; display:block; width: 4px; height: 4px; border-radius:50%; background: rgba(255,255,255,0.2); position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; transition:all 0.3s; }
#chkBox input[type="checkbox"]:checked + label span{ border:2px solid var(--mainC) !important; background: var(--mainC) !important;}
#chkBox input[type="checkbox"]:checked + label span:after{ background: #fff !important;}
#chkBox button{ color:#aaa; letter-spacing: -0.3px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; margin-left: 15px;}

#capcha{ display:flex; align-items:center; justify-content:flex-end; height: 65px; }
#capcha input{ width: 300px; height: 100%; background: #fff; padding: 0 40px; border-radius:10px; margin: 0 10px; }
#capcha button{ width: 65px; height: 100%; display:flex; justify-content:center; align-items:center; border-radius: 10px; background: #222; }

#listBox ul,
#listBox ul li,
#listBox ul li a{ display:flex; align-items:center; justify-content:center; }
#listBox ul li:not(:last-child):after{ content:''; display:block; width: 2px; height: 25px; background: #e5e5e5;}
#listBox ul li a{ padding: 30px 40px; color: #CCC; font-weight: 500; letter-spacing: -0.42px; transition:all 0.5s; }
#listBox ul li:hover a,
#listBox ul li.on a{ color:var(--mainC); }
#listBox #searchBox{ position: relative; top: auto; left: auto; padding: 0; opacity: 1; visibility: visible; pointer-events:auto; box-shadow:none; background: transparent; margin: 60px 0 0; }
#listBox #searchBox form{ display:flex; align-items:center; width: 100%; }
#listBox #searchBox select{ border: 2px solid var(--mainC); border-radius:50px; padding: 0 60px; color:#000; width: 390px; margin-right: 10px; height: 90px; flex-shrink:0; 
background: url(/img/sub/selectArrow.png) no-repeat top 50% right 60px; outline:none; }
#listBox #searchBox select:active{ border: 2px solid var(--mainC); }
#listBox #searchBox div{ width: 100%; }
#listBox #searchBox div input{ width: 100%; }
 
a.w320{ display:flex; justify-content:center; align-items:center; width: 320px; height: 80px; color:#fff; border-radius:10px; background: var(--mainC); font-weight: 600; letter-spacing: -0.4px; 
margin: 120px auto 0;}

.svg path,
.svg stroke{ transition:all 0.5s; }

.mobile{ display:none; }

/* header */
header{ position: fixed; position: absolute; top: 0; left: 0; width: 100%; height: 90px; z-index: 1000; transform:translateY(0); transition:all 0.7s; }
header .logo{ display:flex; justify-content:center; align-items:center; }
header .logo a,
header .logo a svg{ display:block; width: 100%; }
header .headerBox{ display:flex; width: 100%; height: 100%; padding: 0 60px; }
header .headerBox .navBox{ display:flex; justify-content:space-between; flex-grow: 1; margin: 0 20px 0 40px;}
header .headerBox .linkBox{ display:flex; }
header .headerBox .linkBox li,
header .headerBox .linkBox li a{ display:flex; justify-content:center; align-items:center; }
header .headerBox .linkBox li:not(:last-child){ margin-right: 5px;}
header .headerBox .navBox #gnb{ display:flex; height: 100%; }
header .headerBox .navBox #gnb > li{ position: relative; }
header .headerBox .navBox #gnb > li > a{ position: relative; height: 100%; display:block; display:flex; justify-content:center; align-items:center; font-size:18px; font-weight: 500; color:#fff; min-width:190px; z-index: 2; transition:all 0.5s; }
header .headerBox .navBox #gnb > li .depth2{ position: relative; position: absolute; transform:translateX(-50%); top: 100%; left: 50%; width: 100%; text-align: center; display:none; }
header .headerBox .navBox #gnb > li .depth2:before{ content:''; display:block; position: absolute; top: -90px; width: 100%; height: calc(100% + 130px); border-radius: 0px 0px 10px 10px;
background: var(--mainC); z-index: -1;}
header .headerBox .navBox #gnb > li .depth2 > li{ padding: 0 20px;}
header .headerBox .navBox #gnb > li .depth2 > li:not(:last-child){ margin-bottom: 20px; }
header .headerBox .navBox #gnb > li .depth2 li a{ font-size:18px; color:rgba(255,255,255,0.3); transition:all 0.5s; display:block; width: 100%; }
header .headerBox .navBox #gnb > li .depth3{ margin-top: 20px; }
header .headerBox .navBox #gnb > li .depth3 li:not(:last-child){ margin-bottom: 10px; }
header .headerBox .navBox #gnb > li .depth3 li a{ font-size:16px; }
header .headerBox .navBox #gnb > li .depth2 > li:hover > a,
header .headerBox .navBox #gnb > li .depth3 li:hover a{ color:#fff; }
header .headerBox .navBox #gnb > li .depth2-1 > li > a{ color:#fff; pointer-events:none; }
header .headerBox .navBox #gnb > li .depth2-2 .depth3{ display:none; }
header .headerBox .sideBox{ display:flex; align-items: center;}
header .headerBox .sideBox > *{ display:flex; justify-content:center; align-items:center; }
header .headerBox .sideBox #langBtn{ position: relative; }
header .headerBox .sideBox #langBtn ul{ position: relative; position: absolute; transform:translateX(-50%); left: 50%; top: 100%; padding: 25px 15px 15px; min-width:55px; opacity: 0; visibility:hidden; pointer-events:none; transition:all 0.7s; }
header .headerBox .sideBox #langBtn ul:before{ content:''; display:block; position: absolute; bottom: 0; transform:translateX(-50%); left: 50%; width: 100%; height: calc(100% - 10px); border-radius:10px; background: var(--mainC); z-index: -1;}
header .headerBox .sideBox #langBtn ul li:not(:last-child){ margin-bottom: 5px; }
header .headerBox .sideBox #langBtn ul li a{ color:rgba(255,255,255,0.3); font-size:14px; font-weight: 600; letter-spacing: -0.28px; transition:all 0.5s; }
header .headerBox .sideBox #langBtn ul li.on a,
header .headerBox .sideBox #langBtn ul li:hover a{ color:#fff; }
header .headerBox .sideBox #langBtn:hover ul{ opacity: 1; visibility:visible; pointer-events:auto; } 
header .headerBox .sideBox figure{ cursor:pointer; display:flex; }
header .headerBox .sideBox #searchBtn{ margin:0 20px;}
header .headerBox .sideBox #menuBtn{ width: 40px; height: 40px; background: var(--mainC); border-radius:50%; display:flex; justify-content:center; align-items:center; }

header.half .headerBox .navBox #gnb > li > a,
header.black .headerBox .navBox #gnb > li > a{ color:#111;  }
header.half .headerBox .navBox #gnb > li:hover > a,
header.black .headerBox .navBox #gnb > li:not(.home):hover > a{ color:#fff; }
header.half .headerBox .sideBox #langBtn path,
header.black .headerBox .sideBox #langBtn path{ fill:#111; }
header.half .headerBox .sideBox #searchBtn path,
header.black .headerBox .sideBox #searchBtn path{ stroke: #111; }

header.black .logo .txtBox path{ fill:#3E3A39; }
header.black .headerBox .navBox .linkBox path,
header.black .headerBox .navBox .linkBox rect{ filter: invert(0.3); transition:all 0.5s; }
header.black .headerBox .navBox .linkBox li:hover path,
header.black .headerBox .navBox .linkBox li:hover rect{ filter: invert(1);  }

header.last{ transform:translateY(-100%); }

#allMenu{ position: relative; position: fixed; top: 0; left: 0; background: #000; width: 100%; height: 100vh; z-index: 10001; display:flex; align-items:center; padding: 0 100px; display:none; }
#allMenu .closeBtn{ position: absolute; top: 35px; right: 50px; cursor:pointer; }
#allMenu .allGnb #gnb li.home{ display:none; }
#allMenu .allGnb #gnb > li{ position: relative; display:flex; }
#allMenu .allGnb #gnb > li a{ white-space:nowrap; transition:all 0.5s; }
#allMenu .allGnb #gnb > li:not(:last-child){ margin-bottom: 60px; }
#allMenu .allGnb #gnb > li > a{ font-size:54px; font-weight: 600; color:rgba(255,255,255,0.2); letter-spacing: -1.08px; min-width:400px; margin-right: 100px; }
#allMenu .allGnb #gnb > li .depth2{ position: relative; display:flex; position: absolute; top: 0; left: 100%; opacity: 0; visibility: hidden; transition:opacity 0.5s; pointer-events:none; }
#allMenu .allGnb #gnb > li.on .depth2{ opacity: 1; visibility:visible; pointer-events:auto; }
#allMenu .allGnb #gnb > li .depth2 > li:not(:last-child){ margin-right: 80px;}
#allMenu .allGnb #gnb > li .depth2 > li > a{ font-size:20px; letter-spacing: -0.4px; font-weight: 500; color:rgba(255,255,255,0.3); padding: 22px 0; display:block; }
#allMenu .allGnb #gnb > li .depth3{ margin-top: 20px; }
#allMenu .allGnb #gnb > li .depth3 li:not(:last-child){ margin-bottom: 20px; }
#allMenu .allGnb #gnb > li .depth3 li a{ letter-spacing: -0.4px; font-weight: 300; font-size:20px; color:rgba(255,255,255,0.3);}
#allMenu .allGnb #gnb > li .depth2-2 .depth3{ display:none; }

@media (hover: hover) {
#allMenu .allGnb #gnb > li:hover > a,
#allMenu .allGnb #gnb > li .depth2 > li:hover > a,
#allMenu .allGnb #gnb > li .depth3 li:hover a{ color:#fff; }
}

#allMenu .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
#allMenu .btmBox{ position: absolute; left: 0; bottom: 40px; width: 100%; display:flex; justify-content:space-between; align-items:center; letter-spacing: -0.34px; color:#fff; font-weight: 300; }
#allMenu .btmBox .linkBox{ display:flex; }
#allMenu .btmBox .linkBox li:not(:last-child){ margin-right: 5px; }

#searchBox{ position: relative; position: fixed; top: 0; left: 0; width: 100%; padding: 80px 20px; background: #fff; z-index: 10000; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25); display:flex; justify-content:center; align-items:center; opacity: 0; visibility:hidden; transition:opacity 0.7s; pointer-events:none; }
#searchBox .closeBtn{ position: absolute; top: 40px; right: 80px; cursor:pointer; }
#searchBox .closeBtn path{ fill:#000; }
#searchBox div{ display:flex; justify-content: center; }
#searchBox div input{ border-radius: 100px; border: 2px solid var(--mainC); padding: 30px 60px; color:#111; letter-spacing: -0.46px; width: 90px; height: 90px; overflow: hidden; transition:none; }
#searchBox div input::placeholder{ color:#ccc; }
#searchBox div button{ width: 90px; height: 90px; border-radius:50%; background: var(--mainC); margin-left: 10px; flex-shrink:0; }
#searchBox.on{ opacity: 1; visibility:visible; pointer-events:auto; }
#searchBox.on div input{ width: 1100px; transition:all 1s 0.3s; }

/* footer */
.footerIn{ background: #222; padding: 120px 100px 80px; display:flex; justify-content: space-between; border-top:1px solid #333; }
.footerIn > *{ width: calc((100% - 180px) / 2); }
.footerIn .leftBox .contact{ color:#fff; font-weight: 500; }
.footerIn .leftBox .contact p:last-child{ margin-top: 10px;}
.footerIn .leftBox .ctnBox{ margin: 40px 0 53px;}
.footerIn .leftBox .ctnBox dl:not(:last-child){ margin-bottom: 40px; }
.footerIn .leftBox .ctnBox dl dt{ color:#fff; font-weight: 500; letter-spacing: -0.4px; margin-bottom: 20px;}
.footerIn .leftBox .ctnBox dl dd{ color:#ccc; font-weight: 300; letter-spacing: -0.34px;}
.footerIn .leftBox .ctnBox dl dd p{ display:flex; align-items:center; }
.footerIn .leftBox .ctnBox dl dd p:not(:last-child){ margin-bottom: 10px;}
.footerIn .leftBox .ctnBox dl dd p span{ display:block; width: 1px; height: 15px; background: #ccc; margin: 0 15px;}
.footerIn .leftBox .copy{ color:#ccc; letter-spacing: -0.34px; font-weight: 300;}
.footerIn .rightBox .title{ color:#fff; margin-bottom: 20px;}
.footerIn .rightBox .ctnBox{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 10px; }
.footerIn .rightBox .ctnBox p,
.footerIn .rightBox .capcha div{ border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.20); padding: 0 20px; width: calc((100% - 10px) / 2); height: 60px; display:flex; align-items:center; }
.footerIn .rightBox .ctnBox p:last-child{ width: 100%; height: auto; padding: 20px;}
.footerIn .rightBox .ctnBox p textarea{ height: 80px; }
.footerIn .rightBox .ctnBox p input,
.footerIn .rightBox .ctnBox p textarea,
.footerIn .rightBox .capcha div input{ background: transparent; border:none; outline:none; resize:none; width: 100%; color:#aaa; letter-spacing: -0.32px;}
.footerIn .rightBox .ctnBox p input::placeholder,
.footerIn .rightBox .ctnBox p textarea::placeholder{ color:#aaa; }
.footerIn .rightBox .capcha{ display:flex; height: 80px; }
.footerIn .rightBox .capcha div{ display:flex; align-items:center; width: 100%; height: 100%;}
.footerIn .rightBox .capcha div span{ color:#aaa; }
.footerIn .rightBox .capcha div figure{ margin: 0 20px; }
.footerIn .rightBox .capcha div figure img{ max-width:none; }
.footerIn .rightBox .capcha button{ height: 100%; width: 80px; background: #555; border-radius:10px; display:flex; justify-content:center; align-items:center; margin-left: 10px; flex-shrink:0; }
.footerIn .rightBox .bBtn{ width: 100%; padding: 20px 0; border-radius:50px; background: var(--mainC); color:#fff; font-weight: 500; letter-spacing: -0.36px; }

/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:18px;	line-height: 1.5; word-break:break-all; }
.privacy h2 { font-weight:bold; color:#000; text-align: left; margin:0 0 80px; text-align: center; }
.privacy h3 { display:inline-block; vertical-align:bottom;}
.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:18px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:18px; 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:17px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }

/* paging */
.paging{ display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center; margin-top: 120px; }
.paging .arr{ display:flex; }
.paging .arr a.last,
.paging .arr a.first{ letter-spacing:-10px; }
.paging .arr a.last i,
.paging .arr a.first i {-webkit-transform:translateX(-5px);transform:translateX(-5px);}
.paging a{ display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center; font-size:18px; 
color:#ccc; }
.paging ul{ display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 25px; }
.paging ul li:not(:last-child),.paging .arr a:first-child{ margin-right: 25px;}
.paging ul li a{ position: relative; display:block; width: 15px; font-variant-numeric: lining-nums proportional-nums; font-weight: 500; text-align: center; }
.paging ul li.on a { color: var(--mainC); border-color: var(--mainC); }
.paging ul li.on a:after{ content:''; display:block; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; background: var(--mainC);  }

#policyWrap{ position: fixed; transform:translate(-50%,-50%); top: 50%; left: 50%; z-index: 1002; background: #fff; border-radius:20px; padding: 40px; max-width:1080px; width: 100%;
display:none; }
#policyWrap .titleBox{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px;}
#policyWrap .titleBox h4{ color:#111; font-weight: 500; letter-spacing: -0.78px; ;}
#policyWrap .titleBox button{ width: 45px; height: 45px; border-radius:50%; background: var(--mainC); display:flex; align-items:center; justify-content:center;  }
#policyWrap .policyBox{ border-radius: 20px; border: 2px solid #E5E5E5; background: #F8F8F8; padding: 20px; height: 400px;}
#policyWrap .policyBox .innerBox{ overflow-y: scroll; height: 100%; padding: 20px 40px; font-size:18px; }
#policyWrap .policyBox .innerBox::-webkit-scrollbar{ width: 6px; background: #EEE; border-radius: 50px;}
#policyWrap .policyBox .innerBox::-webkit-scrollbar-thumb{ background: #CCC; border-radius: 50px; }
#policyWrap .policyBox .innerBox p,
#policyWrap .policyBox .innerBox dl{ margin-bottom: 20px;}
#policyWrap .policyBox .innerBox > dl > dt{ margin-bottom: 10px; color:#111; font-weight: bold;}
#policyWrap .policyBox .innerBox dl dd ul{ margin-top: 10px;}
#policyWrap .policyBox .innerBox dl dd ul li:not(:last-child){ margin-bottom: 5px;} 

/* introBox */
#introBox{ position: relative; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10000000; display:flex; justify-content:center; align-items:center; pointer-events:none; }
#introBox .logo{ position: relative; z-index: 2; transform:scale(1); opacity: 1; transition:all 1s 0.3s;}
#introBox:before,
#introBox:after{ content:''; display:block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff; transform:translateY(0); transition:all 1s 0.6s; }
#introBox:after{ background: var(--mainC); transition:all 1s 0.5s;  }

#introBox.on{}
#introBox.on .logo{ opacity: 0; transform:scale(0.7); }
#introBox.on:before,
#introBox.on:after{ transform:translateY(-100%); }


/* animate */ 
@keyframes fadeIn{
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    50% { opacity: 1; }
	100% { opacity: 0; }
}