@charset 'utf-8';
/* common */
.w1700{ max-width:1700px; margin: 0 auto;}
.w1500{ max-width:1500px; margin: 0 auto;}
:root{
	--baseFont: 'Pretendard', 'Noto Sans KR', 'verdana', sans-serif;
	--Quan: 'Quantico', sans-serif;
	--Mont: 'Montserrat', sans-serif;
	--Red: 'Red Hat Display', sans-serif;
	--Score: 'SCoreDream', sans-serif;
	--mainColor: #0B318F;
	--subColor: #2558D8;
}

#dimmed{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 100001; display:none; }
#topBtn{ position: fixed; bottom: 30px; right: 125px; width: 65px; height: 65px; background: rgba(39,39,39,0.6); border-radius:50%; display:flex; justify-content:center; align-items: center; z-index: 100;
 cursor:pointer; }
#btnBox{ position: relative; display: flex; align-items: center; margin-left: 80px;}
#btnBox .txt{ color:#111; font-family:var(--Mont); position: absolute; transform: translateY(-50%); top: 50%; left: -79px; font-weight: bold; transition:all 0.5s; }
#btnBox .circle{ position: relative; width: 95px; height: 95px; border-radius:50%; background: #eee; overflow: hidden; display:flex; justify-content:center; align-items:center; transition:all 0.5s;  }
#btnBox:hover .circle{ background: #213F99; }
#btnBox:hover .circle .txt{ color:#fff; }
#btnBox:hover .circle img{ filter:invert(1)}

/* header */
header{ position: relative; position: fixed; top:0; left: 0; z-index: 100000; width: 100%; transition:all 0.5s; height: 110px; }
header .headerBox,header .headerBox nav{ height: 100%; }
header .headerBox > div{ display:flex; justify-content:space-between; align-items: center; height: 100%; }
header .headerBox .logo a{ display:flex; }
header .headerBox #gnb{ display:flex; height: 100%; }
header .headerBox #gnb > li { position: relative; height: 100%; font-family:var(--Red);}
header .headerBox #gnb > li > a{ padding: 0 50px; height: 100%; display:flex; justify-content:center; align-items: center; font-size:18px; color:#fff; font-weight: bold; }
header .headerBox #gnb > li:before{ position: absolute; transform:translateX(-50%); left: 50%; top: 0; content:''; display:block; width: 207px; height: 100%; background: #111; z-index: -1; transition:all 0.5s; opacity: 0; pointer-events: none; }
header .headerBox #gnb > li.H:before{ height: 300px; }
header .headerBox #gnb > li:hover:before{ opacity: 1; }
header .headerBox #gnb .depth2{ position: absolute; transform:translateX(-50%); left: 50%; top: 80%; text-align: center; font-size:16px; display:none; width: 80%;}
header .headerBox #gnb .depth2 li{ padding: 10px 0;}
header .headerBox #gnb .depth2 li:first-child a{ line-height: 1.7;}
header .headerBox #gnb .depth2 li a{ position: relative;  display: inline-block; line-height: 1.4; color:#fff; transition:all 0.3s; }
header .headerBox #gnb .depth2 li a:after{ position: absolute; content:''; display:block; width: 100%; height: 1px; background: #fff; bottom: -4px; opacity: 0; transition:all 0.3s; }
header .headerBox #gnb .depth2 li a span{ display:none; }
header .headerBox #gnb .depth2 li:first-child a:after{ bottom: 0;}
header .headerBox #gnb .depth2 li a:hover{ color:#5E7EDF; font-weight: 500; }
header .headerBox #gnb .depth2 li a:hover:after{ opacity: 1; background: #5E7EDF;}
header .headerBox #side{ display:flex; align-items: center; gap:70px; }
header .headerBox #side #lang{ position: relative; display:flex; gap:17px; justify-content:center; align-items: center; padding: 0 12px; height: 25px; border-radius:50px; border:1px solid rgba(255,255,255,0.3); }
header .headerBox #side #lang li a{ position: relative; color:#ddd; font-size:13px; font-weight: bold; }
header .headerBox #side #lang li.on a{ position: relative; color:#111; }
header .headerBox #side #lang li.on a:before{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 49.63%; left: 49.63%; width: 35px; height: 20px; background: #fff; border-radius:50px; 
z-index: -1; }
header .headerBox #menuBar{ position: relative; width: 30px; height: 25px; display:flex; justify-content:center; align-items:center; flex-direction: column; gap:6px 0; cursor:pointer;  }
header .headerBox #menuBar p{ position: relative; width: 100%; height: 100%; display: flex;  align-items: center;  justify-content: flex-end;}
header .headerBox #menuBar span{ display:block; right: 0; width: 100%; height: 4px; background-color: #fff; transition:all 0.2s; }
header .headerBox #menuBar p:after{ content: ""; display: block;  width: 10px; height:4px;  background-color: #fff; position: absolute; transition: transform 0.5s; top: 0; right: 0;}
header .headerBox #menuBar p:before{ content: ""; display: block;  width: 20px; height: 4px;  background-color: #fff; position: absolute; transition: transform 0.5s; bottom: 0; right: 0;}
header .headerBox #menuBar p:before{ bottom: 0; }

header.bg{ background: rgba(0,0,0,0.7); height: 80px;}
header.bg .headerBox #gnb > li.H:before{ height: 280px;}
header.bg .headerBox #gnb .depth2{ top: 90%}
header.all{ background: transparent;}
header.all .headerBox .logo,header.all .headerBox #gnb,header.all .headerBox #side #lang{ display:none; }
header .headerBox #menuBar.on span{ width: 0; }
header .headerBox #menuBar.on p:after{ width: 100%; transform: translateY(-50%) rotate(45deg); top: 50%; }
header .headerBox #menuBar.on p:before{ width: 100%; transform: translateY(-50%) rotate(-45deg); top: 50%; }


/* allMenu */
#allMenu{ position: relative; position: fixed; width: 100%; height: 100%; background: #111; padding-top: 150px; display:none; z-index: 100;}
#allMenu .gnbWrap #gnb > li > a{ font-size: 90px; font-family:var(--Quan); font-weight: bold; -webkit-text-stroke: 6px #fff; color:#fff; line-height: 1.5; opacity: 0.1; transition:all 0.5s; }
#allMenu .gnbWrap #gnb > li:hover > a{ opacity: 1;  }
#allMenu .gnbWrap #gnb .depth2{ display:flex; gap: 120px; margin-left: 8px; transition:all 0.5s; font-size:20px; font-weight: bold; font-family:var(--Mont); height: 0; overflow: hidden;}
#allMenu .gnbWrap #gnb .depth2 a br{ display:none; }
#allMenu .gnbWrap #gnb .depth2 a{ color:#fff; }
#allMenu .gnbWrap #gnb > li:hover .depth2{ padding-top: 35px; padding-bottom: 65px;	 height: 20px; }
#allMenu p{ position: absolute; bottom: 50px; right: 110px; font-family:var(--Mont); color:#fff; font-size:14px; }

/* footer */
footer{ background: #111; position: relative; z-index: 10; margin-top: -1px; padding: 130px 0 100px;}
footer #titleBox h1{ color:#fff; -webkit-text-stroke: 6px #fff; margin: 0; font-family: var(--Quan); font-weight: bold; text-transform: uppercase;  line-height: 1;}
footer .ctnBox{ display:flex; justify-content:space-between; }
footer .ctnBox .leftBox .txt a{ color:#fff; font-family:var(--Mont); font-weight: bold; line-height: 1.7; margin: 45px 0 25px; display:inline-flex; align-items:center; }
footer .ctnBox .leftBox .txt a span{ position: relative; display: flex; justify-content:center; align-items:center; width: 20px; height: 20px; border-radius:50%; background: #fff; margin-left: 10px;}
footer .ctnBox .leftBox .txt a span img{ position: relative; z-index: 5; transition:all 0.5s; }
footer .ctnBox .leftBox .txt a span:before{ content:''; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 28px; height: 28px; background: var(--subColor); border-radius:50%; 
opacity: 0; transition:all 0.5s;}
footer .ctnBox .leftBox .txt a:hover span img{ filter:invert(1); }
footer .ctnBox .leftBox .txt a:hover span:before{ opacity: 1; }
footer .ctnBox .leftBox .copy{ color:#fff; font-family:var(--Mont); text-transform: uppercase; line-height: 1.7;} 
footer .ctnBox .rightBox .tell{ line-height: 1; font-family:var(--Quan); color:#fff; font-weight:bold; }
footer .ctnBox .rightBox .tell span{ -webkit-text-stroke: 1px #fff; }
footer .ctnBox .rightBox .infoBox{ margin: 35px 0 50px; line-height: 1.5; font-family:var(--Quan); color:#fff; font-weight: 300;}
footer .ctnBox .rightBox .address{ line-height: 1.5; font-family:var(--Quan); color:rgba(255,255,255,0.5); }
footer .ctnBox .rightBox .address span{ display:block; margin-bottom: 10px; color:var(--subColor); }

/* privacy */
.policy.privacy * { line-height: 1.625; }
.policy.privacy h3 { font-weight: 700; }
.policy.privacy h4 { font-weight: 700; }
.policy.privacy .pBox,
.policy.privacy .dlBox,
.policy.privacy .subTextBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.policy.privacy .topTitle .pBox { gap: 30px 0; margin: 40px 0;}
.policy.privacy .dlBox { gap: 50px 0; }
.policy.privacy .dlBox > dl > dt { font-size: 1.8rem; font-weight: 500; }
.policy.privacy .dlBox > dl > dd > p { margin: 15px 0; }
.policy.privacy .dlBox > dl > dd > ul { padding: 0 0 0 20px;}
.policy.privacy .square {
  display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap; flex-wrap: wrap;gap: 0 5px;}
.policy.privacy .square::before { content: "■";}
.policy.privacy .square > p { width: 100%;padding: 0 0 0 13px;}
.policy.privacy .subTextBox { gap: 24px 0;}
.policy.privacy .subTextBox h6 { font-weight: 500;margin: 0 0 4px;}
.policy.privacy .subText { margin: 4px 0;}
.policy.privacy .subText dd { padding: 0 0 0 11px;}
.policy.privacy .contact { margin: 60px 0 0;}
.policy.privacy .contact ol { margin: 30px 0 0;}


/* animation */
@keyframes zoomIn {
	0% { transform:scale(0.7); opacity: 0;}
	100% { transform:scale(1); opacity: 1; }
}

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

@keyframes fadeLeft{
	0%{
		transform: translate3d(-30%, 0, 0);
		visibility: visible;
		opacity: 0;
	}
	100%{
	    transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@keyframes fadeLeft {
  from {
    -webkit-transform: translate3d(-30%, 0, 0);
    transform: translate3d(-30%, 0, 0);
    visibility: visible;
    opacity:0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes fadeLeftBack {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
  to {
    -webkit-transform: translate3d(-30%, 0, 0);
    transform: translate3d(-30%, 0, 0);
    visibility: visible;
    opacity:0;
  }
}

@keyframes fadeRight {
  from {
    -webkit-transform: translate3d(-30%, 0, 0);
    transform: translate3d(30%, 0, 0);
    visibility: visible;
    opacity:0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity:1;
  }
}

@keyframes fadeUp {
	0%{transform:  translateY(100%); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}

@keyframes fadeDown {
	0%{transform: translateY(0); opacity: 0;}
	100%{transform: translateY(100%); opacity: 1;}
}

@keyframes wide{
	0%{ width: 0;}
	100%{ width: 100%;}
}

@keyframes scrolldown {
	0%{
		top: 5px;
	}
	50%{
		top: 20px;
	}
	100%{
		top: 5px;
	}
}

@keyframes scaleCircle{
	0%{
		stroke-width: 0px;
	}	
	100%{
		stroke-width: 73px;
	}
}

@keyframes rollingleft1 {
	0% { transform: translateX(0); }
	50% { transform: translateX(-100%); }
	50.01% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}

@keyframes rollingleft2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-200%); }
}