@charset 'utf-8';

/* 공통 */
body,html {min-height: 100%;}

.inner1710 {width: 100%; max-width: 1710px; margin: 0 auto; position: relative;}
.inner1720 {width: 100%; max-width: 1720px; margin: 0 auto; position: relative;}
.inner1500 {max-width: 1500px; margin: 0 auto; position: relative;}
@media screen and (max-width: 1720px) {
	.inner1720 {padding: 0 6%;}
}
@media screen and (max-width: 1500px) {
	.inner1500 { padding: 0 2%;}
}

@media screen and (max-width: 640px) {
	.inner1500 {padding: 0 4%;}
}
button {background: none; display: block; padding: 0; border: none; cursor: pointer;}

/*header*/
#header {width: 100%; height: 150px; background: transparent; position: absolute; left: 0; top: 0; z-index: 30; transition: all .3s;}
#header .logo { width: 252px; height: 40px;  position: absolute; left: 100px; top: 80px; }
#header .logo a { text-indent:-999em; overflow:hidden; background: url(/img/main/logo_w.svg) no-repeat; width: 100%; height: 100%; display: block; background-size: cover;}
#header .logo a.chg {background: url(/img/main/logo_b.svg) no-repeat; width: 100%; height: 100%; display: block; background-size: cover;}
#header .menu-group { position: relative; text-align:center; width:100%; }
@media screen and (max-width: 1400px) {
	#header .logo { left: 20px; top: 50px; }
}
@media screen and (max-width: 1024px) {
	#header .logo { top: 30px; }
}
@media screen and (max-width: 767px) {
	#header .logo {width: 226px;height: 36px;}
}

.menu-group nav {  }
.menu-group nav .gnb {display: flex; justify-content: center; width: 100%; height: 100%;}
.menu-group nav .gnb > li {position: relative; height: 100%;}
.menu-group nav .gnb > li > a {display: block; color: #fff; padding: 90px 35px 0; height:60px; font-size: 18px; transition: all .3s; font-weight: 700;} 
.menu-group nav .gnb > li > a.on {color: #333;}
.menu-group nav .gnb > li:hover > a {color: #eb5405;}
.menu-group nav .gnb > li .depth2 {background: #171717; display: none; border-top: 2px solid #ef8101;  padding: 40px 0 50px 0; position: absolute; width: 200px; left: 50%; top: 150px;  transform: translateX(-50%);}
.menu-group nav .gnb > li .depth2.on {display: block;}
.menu-group nav .gnb > li .depth2 > li {text-align: center; margin-bottom: 40px;}
.menu-group nav .gnb > li .depth2 > li:last-child {margin-bottom: 0;}
.menu-group nav .gnb > li .depth2 > li > a {color: #747474; display: block; font-size: 16px; font-family: 'NanumSquareBold';}
.menu-group nav .gnb > li .depth2 > li:hover > a {color: #fff;} 
.menu-group .util { position: absolute; right: 100px; top: 90px; display: flex; gap: 55px;  }
.menu-group .util .lang {display: flex; align-items: center; margin-top:-5px;}
.menu-group .util .lang > a {position: relative; color: rgba(255,255,255,0.5); font-size: 13px; font-weight: bold;}
#header.on .menu-group .util .lang > a { color: rgba(51,51,51,0.5); }
.menu-group .util .lang > a:first-child {margin-right: 15px;}
.menu-group .util .lang > a.on {color: #fff;}
#header.on .menu-group .util .lang > a.on {color: #333;}
.menu-group .util .lang > a.on::after {content: ""; display: inline-block; background: #ef8101; width: 100%; height: 2px; position: absolute; bottom: -5px; left: 0;}
.menu-group .side-menubar {width: 34px; height: 20px; z-index: 22;}
.menu-group .side-menubar > a {display: block; position: relative; width: 100%; height: 100%;}
.menu-group .side-menubar > a > span {display: block; width: 100%; position: absolute; background: #fff;}
.menu-group .side-menubar > a > span.line {height: 2px;}
.menu-group .side-menubar > a > span.line:first-child {top: 0;}
.menu-group .side-menubar > a > span.line:nth-child(2) {top: 7px;}
.menu-group .side-menubar > a > span.line:last-child {top: 14px;}
@media screen and (max-width: 1400px) {
	.menu-group nav .gnb > li > a { padding: 60px 30px 0; }
	.menu-group .util { right: 20px;  top: 60px; }
}
@media screen and (max-width: 1024px) {
	.menu-group .util { top: 40px; }
}
@media screen and (max-width: 1200px) {
	.menu-group nav .gnb {display: none;}
	.menu-group .util {gap:50px 25px;}
}


/*all-menu*/
.all-menu {position: fixed; top: 0; width: 100%; height: 100vh; display: none; background: rgba(0, 0, 0, 0.6); z-index: 60;}
#snb {position: absolute; right: -600px; width: 100%; min-width: 340px; max-width: 600px; height: 100vh; background: #171717; padding: 75px 0 0 75px; transition: all 0.2s;}
#snb .menu-box > ul > li {box-sizing: border-box;}
#snb .menu-box > ul > li > a { display: block; width: 100%; height: 70px; line-height: 70px; font-size: 34px; font-weight: 700; color: #ffffff; font-family: 'Play', sans-serif;}
#snb .depth2 { text-indent: 20px; transform: translateY(-10px); display: none;}
#snb .depth2 > li > a { display: block; font-weight: 400; padding: 15px 0; color: rgba(255, 255, 255, 0.5); font-size: 18px; font-family: 'NanumSquareBold';}
#snb .depth2 > li:hover > a { font-weight: 600; color: #ffffff;}
.menu-close { position: absolute; top: 32px; right: 38px;}
.menu-close i { font-size: 26px; color: #fff;}
#snb.on {right: 0; z-index: 10;}
@media screen and (max-width: 640px) {
    #snb {min-width: 100%; padding:75px 20px 0;}
    #snb .menu-box > ul > li > a {  font-size: 30px; }
}


/*footer*/
#footer {padding: 70px 0; background: #222; position: relative;}
#footer .info {display: flex; justify-content: space-between;}
#footer .add {display: flex; gap: 200px;}
#footer .add .office > li h4 {font-size: 16px; color: #fff; margin-bottom: 18px;}
#footer .add .office > li p {font-size: 15px; color: rgba(255,255,255,0.4); margin-bottom: 16px; font-weight:400; }
#footer .add .office > li:last-child p {margin-bottom: 0;}
#footer .top_btn { display:flex; flex-direction: column; align-items: flex-end; }
#footer .top_btn span {color: #fff; font-size: 16px; font-weight: 600; margin-right: 13px;}
#footer .top_btn i {border-radius: 50%; background: #eb5405; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;}
#footer .top_btn button {display: flex; align-items: center;}
#footer .top_btn .f_menu { margin-top:30px; text-align:right; }
#footer .top_btn .f_menu li { margin-top:10px; color:#fff; font-size:14px; } 
#footer .top_btn .f_menu li a { color:rgba(255,255,255,0.5); } 
#footer .copyright {margin-top: 50px; font-size: 16px; color: rgba(255,255,255,0.1); font-weight: 500;}
@media screen and (max-width: 1200px) {
	#footer .add {gap: 100px;}
}
@media screen and (max-width: 960px) {
	#footer .info {align-items: center;justify-content: center;flex-direction: column;gap: 50px;}
	#footer .add {gap: 50px;}
	#footer .add .office > li h4 {font-size: 15px;}
	#footer .add .office > li p {font-size: 14px;margin-bottom: 12px;line-height: 1.4;word-break: keep-all;}
	#footer .copyright {font-size: 15px;line-height: 1.4;word-break: keep-all;text-align: center;}
  #footer .top_btn .f_menu { margin-top:30px; text-align:center; }
}
@media screen and (max-width: 767px) {
	#footer .add {flex-direction: column;text-align: center;}
}

/* privacy */
.privacy { margin-top:50px; 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:#222;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%; }
.privacy table { margin-top:10px; border:1px solid #ddd; border-width:0 1px 1px 0; }
.privacy table thead th { border:1px solid #ddd; border-width:1px 0 0 1px; font-size:15px; height:45px; background-color:#f5f5f5; text-align:center; }
.privacy table tbody th { border:1px solid #ddd; border-width:1px 0 0 1px; font-size:15px; height:45px; background-color:#f5f5f5; text-align:center; }
.privacy table tbody td { border:1px solid #ddd; border-width:1px 0 0 1px; font-size:15px; height:45px; background-color:#fff; text-align:left; padding-left:20px; }
.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; }



/* animation */
@keyframes blur_txt {
	0% { filter:blur(10px); opacity:0; }
	100% { filter:blur(0); opacity:1; }
}
@keyframes bgs{
	0%{transform:scale(1.15); opacity:0;}
	100%{transform:scale(1.00); opacity:1;}
}
@keyframes bgs1{
	0%{transform:scale(1.25);}
	100%{transform:scale(1.00);}
}
@keyframes bgs2{
	0%{transform:scale(1.00); }
	100%{transform:scale(1.15); }
}
@keyframes bgs3{
	0%{transform:scale(0.9); opacity:0;}
	100%{transform:scale(1.00); opacity:1;}
}
@keyframes bgs4{
	0%{transform:scale(0); opacity:0;}
	100%{transform:scale(1.00); opacity:1;}
}
@keyframes bgs4_b {
	0%{transform:scale(1.00); opacity:1;}
	100%{transform:scale(0.9); opacity:0;}
}
@keyframes bgs5{
	0%{transform:scale(1.15);}
	100%{transform:scale(1.00);}
}

@keyframes vsImg {
	0% { -webkit-transform:scale(1.15); -ms-transform:scale(1.15); transform:scale(1.15); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}
@keyframes scaleY_bar {
	0% { -webkit-transform:scaleY(0); -ms-transform:scaleY(0); transform:scaleY(0); opacity:0; }
	100% { -webkit-transform:scaleY(1); -ms-transform:scaleY(1); transform:scaleY(1); opacity:1; }
}

@keyframes ani_1 {
	0% { -webkit-transform:translateX(-100px); -ms-transform:translateX(-100px); transform:translateX(-100px); opacity:0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
}

@keyframes ani_2 {
	0% { -webkit-transform:translateX(100px); -ms-transform:translateX(100px); transform:translateX(100px); opacity:0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1;}
}

@keyframes ani_3 {
	0% { -webkit-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px); opacity:0;}
	100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:1;}
}

@keyframes ani_3_1 {
	0% { -webkit-transform:translate(-50%, 50px); -ms-transform:translate(-50%, 50px); transform:translate(-50%, 50px); opacity:0;}
	100% { -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); opacity:1;}
}

@keyframes ani_4 {
	0% { -webkit-transform:translateY(-50px); -ms-transform:translateY(-50px); transform:translateY(-50px); opacity:0;}
	100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity:1;}
}
@keyframes ani_5 {
	0% {opacity:0;}
	100% {opacity:1;}
}