@charset "UTF-8";

:root {
	--color-white: #fff;
	--color-black: #000;
	--color-point01: #0063EA;
	--color-point02: #00E5FF;
	--color-text-primary: #000;
	--color-text-secondary: #666;
	--color-text-tertiary: #111;
}

.pc { display: block;}
.tab { display:none;}
.mob { display: none;}

@media all and (max-width: 1024px){
	.tab { display: block;}
	.mob { display: none;}
}

@media all and (max-width: 768px){
	.pc { display: none;}
	.mob { display: block;}
}

.en p {word-break:keep-all;}

header{position:fixed;left:0;top:0;width:100%;height: 90px;z-index:999;padding: 0 132px;transition:0.4s; max-width: 100vw;}
/* .open header { top:0;} */
header .head_in{position:relative;height: 100%;display:flex;align-items:center;justify-content:space-between;}
header h1{width:200px;height:30px;}
header h1 a{display:block;background:url(../images/logo.svg) no-repeat left center / contain; height:100%;}
header .gnb_dim{display:none;background-color:rgba(0,0,0,0.5);position:fixed;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:0.6s;}
header .head_rig { display: flex; align-items: center; gap:0 30px;}
header .info { display: flex; align-items: center; gap:0 30px; position:relative; padding-left: 30px;}
header .info::before {content:''; position:absolute; left:0; top:50%; transform: translateY(-50%); width:1px; height:14px; background-color: #d9d9d9;}
header .info .lang_box { position:relative;}
header .info .lang_box button { padding-right: 18px; background:url(../images/arrow01.svg) right center no-repeat;}
header .info .lang_box button.on {background-image: url(../images/arrow01_on.svg);}
header .info .lang_box button .bl { display: none;}
header .info .lang_box ul { display: none; position:absolute; left:50%; top:calc(100% + 8px); transform: translateX(-50%); border: 1px solid #DDD; background: #FFF; box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.10); padding:20px; min-width: 68px; text-align: center;}
header .info .lang_box ul li ~ li {margin-top: 16px;}
header .info .lang_box ul li a{ font-size: clamp(12px,0.7292vw,14px); color:var(--color-text-tertiary);}
header .gnb{display:flex; align-items: center; gap:0 47px; height: 100%;}
header .gnb > li{position:relative;}
header .gnb > li > a{display:block;}
header .gnb > li > a span{display:flex;align-items:center;position:relative;color:var(--color-white);font-size:clamp(16px,1.0416vw,20px);line-height:2em; font-weight: 600;}
header .gnb > li:hover > a span,
header .gnb > li.active > a span,
header.on .gnb > li:hover > a span,
header.on .gnb > li.active > a span { color:var(--color-point01);}
header .gnb_btn{display:none;width:25px; height:16px;}
header .gnb_btn span{display:block; background-color:#fff;width:20px;height:2px;transition:0.4s;}
header .gnb_btn span:nth-child(2) { width:25px;}
header .gnb_btn span ~ span{margin-top:7px;}
.sub header{background-color:var(--color-white);}
.sub header .head_in::after{opacity:1;}
header .nav_logo { display: none;}

header.no_bg.on,
header.on { background-color: rgba(255, 255, 255, 1);}
header.no_bg { background-color:transparent;}
header.no_bg h1 a,
header.on h1 a { background-image: url(../images/logo_bl.svg);}
header.no_bg .gnb > li > a span,
header.on .gnb > li > a span {color:var(--color-text-tertiary);}
header.no_bg .info .lang_box button,
header.on .info .lang_box button { background:url(../images/arrow01_bl.svg) right center no-repeat;}
header.no_bg .info .lang_box button.on,
header.on .info .lang_box button.on {background-image: url(../images/arrow01_bl_on.svg);}
header.no_bg .info .lang_box button .wh,
header.on .info .lang_box button .wh { display: none;}
header.no_bg .info .lang_box button .bl,
header.on .info .lang_box button .bl { display: block;}
header.no_bg .gnb_btn span,
header.on .gnb_btn span { background-color: var(--color-text-tertiary);}

header.no_bg .gnb > li:hover > a span,
header.no_bg .gnb > li.active > a span { color:var(--color-point01);}


@media all and (max-width: 1600px){
	header{padding:0 40px;}
}

@media all and (max-width: 1024px){
	header{overflow: visible; padding:0 24px; height:70px;}
	header h1{width:133px;height:20px;}
	header .gnb_dim{display:block; min-height:100vh;}
	header .gnb_wrap{position:fixed;top:0;right:0; z-index: 999;background-color:var(--color-white);width:100%;height:100%; min-height:100vh; transform:translate(0,-100%);transition:0.5s;}
	header .nav_logo { display: block; position:absolute; left:20px; top:25px; height:20px;}
	header .gnb{display:block;padding: 100px 20px 0;}
    header .info { display: flex;}
	header .gnb_btn{display:block; cursor: pointer; position: relative; z-index: 1000;}
	header .gnb_btn span:not(:nth-child(2)) { position:relative; left:5px;}
	header .gnb > li { height:auto; padding:23px 0;border-bottom: 1px solid #DDD; background:url(../images/mobile/nav_arrow.svg) right center no-repeat;}
	header .gnb > li > a{padding:0;display: flex;}
	header .gnb > li > a span{line-height:1.3em;padding:0;font-size: 20px; color:var(--color-text-tertiary);}
	header.gnb_on .head_in::after{opacity:0;}
	header.gnb_on .gnb_dim{opacity:1;pointer-events:auto;}
	header.gnb_on .gnb_btn span:nth-child(1){transform: translateY(9px) rotate(45deg);transform-origin: center center;}
	header.gnb_on .gnb_btn span:nth-child(2){opacity: 0;}
	header.gnb_on .gnb_btn span:nth-child(3){transform: translateY(-9px) rotate(-45deg);transform-origin: center center;}
	header.gnb_on .gnb_btn span { background-color:var(--color-text-tertiary);}
	header.gnb_on .gnb_wrap{transform:none;}
	header .depth01.on > li > a span::before{transform:none;}
	header .info::before { display: none;}
}

@media all and (max-width:768px){
	header .info .lang_box ul { padding:12px;}
}

footer {overflow: hidden; position: relative; padding:100px; background: var(--color-text-tertiary);}
footer::after { content: ''; position: absolute; right:-150px; top:208px; width:1109px; height:759px; border-radius: 1109px; opacity: 0.8; background: #004098; filter: blur(250px);}
footer h1{width:265px;height:40px;background:url(../images/footer_logo.svg) no-repeat left center / cover;}
footer .info {margin:40px 0 50px; font-size: clamp(14px,0.8333vw,16px); color: var(--color-white); line-height:24px;}
footer .info p { display: flex; align-items: center; gap:0 15px;}
footer .info p ~ p { margin-top: 8px;}
footer .info span ~ span { display: inline-flex; gap:0 15px; align-items: center;}
footer .info span ~ span::before { content:''; display: block; width:1px; height:18px; background-color: rgba(255, 255, 255, 0.29);}
footer .bot { display: flex; justify-content: space-between; align-items: center;}
footer .copy { font-size: clamp(12px,0.9375vw,18px); color:rgba(255,255,255,.5);}
footer .btn_top { position: relative; z-index: 10; padding-right: 30px; background:url(../images/arrow_top01.svg) no-repeat right center / contain; font-size: clamp(10px,0.9375vw,18px); color:rgba(255,255,255,.5);}

@media all and (max-width:1024px){
	footer {padding:40px;}
	footer h1 {width:160px; height:24px;}
}
@media all and (max-width:768px){
	footer {padding:80px 20px;position:relative;}
	footer::after {width:296px; height:345px; right:-70px; top:auto; bottom:-35px; border-radius: 345px; opacity: 0.8; background: #004098; filter: blur(135px);}
	footer .info {margin:40px 0 24px;}
	footer .info p { display: block;}
	footer .info p span { display: block;}
	footer .info span ~ span { margin-top: 5px;}
	footer .info span ~ span::before { display: none;}
	footer .copy { max-width: 60%;}
}

/* ::-webkit-scrollbar {width: 4px;height: 4px;}
::-webkit-scrollbar-track {background: rgba(255,255,255,0.3);}
::-webkit-scrollbar-thumb {background: rgba(125, 76, 252,1);border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: rgba(125, 76, 252,.8);} */