@charset 'utf-8';

/* °øÅë */
.container {
	max-width:1080px;
	margin:0 auto;
}

.w1220{
	max-width:1220px;
	margin:0 auto;
}

@media (max-width: 1640px) {
	.container,
	.w1220 {
		padding-left:20px;
		padding-right:20px;
	}
}

.font-light{
	font-weight:300;
}
.font-regular{
	font-weight:400;
}
.font-medium{
	font-weight:500;
}
.font-bold{
	font-weight:700;
}

.font-15{
	font-size:15px;
}
.font-16{
	font-size:16px;
}
.font-17{
	font-size:17px;
}
.font-18{
	font-size:18px;
}

.pl-5{
	padding-left:5px;
}
.pr-5{
	padding-right:5px;
}
.pl-40{
	padding-left:40px;
}
.pr-40{
	padding-right:40px;
}
.pr-70{
	padding-right:70px;
}
.pt-25{
	padding-top:25px;
}
.pt-50{
	padding-top:50px;
}
.m-50{
	margin:50px 0;
}
.pt-40{
	padding-top:40px;
}
.pt-60{
	padding-top:60px;
}
.pt-70{
	padding-top:70px;
}
.pt-100{
	padding-top:100px;
}
.pb-10{
	padding-bottom:10px;
}
.pb-100{
	padding-bottom:100px;
}
.pb-150{
	padding-bottom:150px;
}
.pb-180{
	padding-bottom:180px;
}
.mt-30{
	margin-top:30px;
}
.mt-40{
	margin-top:40px;
}
.mt-50{
	margin-top:50px;
}
.mt-100{
	margin-top:100px;
}
.mb-10{
	margin-bottom:10px;
}


@media (max-width:1650px){
	.pl-40{
		padding-left:30px;
	}
	.pr-40{
		padding-right:30px;
	}
	.pr-70{
		padding-right:50px;
	}
}
@media (max-width:1024px){
	.pl-40{
		padding-left:25px;
	}
	.pr-40{
		padding-right:25px;
	}
	.pr-70{
		padding-right:10px;
	}
	.mt-50{
		margin-top:20px;
	}
	.mt-100 {
        margin-top: 80px;
    }
	.pb-150{
		padding-bottom:100px;
	}
	.pb-180{
		padding-bottom:150px;
	}
	.pt-100{
		padding-top:80px;
	}
}
@media (max-width:768px){
	.pl-40{
		padding-left:20px;
	}
	.pr-40{
		padding-right:10px;
	}
	.mt-30{
		margin-top:20px;
	}
	.pt-50{
		padding-top:30px;
	}
	.mt-100 {
        margin-top: 50px;
    }
	.pb-100{
		padding-bottom:80px;
	}
	.pb-180{
		padding-bottom:100px;
	}
	.pt-25{
		padding-top:20px;
	}
	.m-50{
		margin:30px 0;
	}
	.pt-70{
		padding-top:50px;
	}

}
@media (max-width:576px){
	.pt-100{
		padding-top:50px;
	}
	.pb-100{
		padding-bottom:50px;
	}
	.pl-40{
		padding-left:10px;
	}
	.mt-30{
		margin-top:15px;
	}
}
.border-gray{
	border: 1px solid #e9e9e9;
}
.w-100{
	width:100%;
}
/* header */
.header{
	position:relative;
}
.header .logo img{
	max-width:243px;
	width:100%;
}
.top-banner{
	width:100%;
	height:5px;
	display: block;
	background: var(--color-Blue);
	margin-bottom:30px;
}
.header .inner{
    height: fit-content;
	font-family: "Roboto Condensed";
}
.header .logo-area,
.header .inner,
.header .inner .social-media ul,
.header .inner .menu ul,
.header .inner .util ul {
	display: flex;
	gap:15px;
	align-items: center;
}

.header .inner .menu,
.header .inner .util{
    display: flex;
    align-items: center;
}
.header .inner .social-media ul li{
	width:32px;
	height: 32px;
	background: #989898;
	border-radius:50%;
	transition:0.3s;
}
.header .inner .social-media ul li:hover{
	background: var(--color-Blue);
}
.header .inner .social-media ul li a{
	display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.header .inner .menu ul,
.header .inner .util ul{
	font-size: 18px;
}
.header .inner .menu .mobile{
	display: none;
}
.header .inner .menu ul li a{
	color:#333;
	font-weight: 300;
	transition:0.3s;
	cursor:pointer;
}
.header .inner .menu li a:hover{
	color: var(--color-Orange);
}
.header .inner .util ul{
	font-weight: 400;
}
.header .inner .util{
	color:#262626;
}
.header .inner .util ul li a:first-child{
	cursor:pointer;
}
.header .inner .util ul li:last-child{
    display: flex;
    justify-content: center;
    align-items: center;
	gap:5px;
}
.header .inner .icon-bottom{
    display: flex;
    justify-content: center;
    align-items: center;
}
.header .inner .util .mobile__menu{
	cursor:pointer;
	margin-left: 10px;
	display:none;
}
.header-menu-active{
	background: #fff;
	z-index: 999;
	height: 100vh;
	position: fixed;
	top: 0;
	right: -100%;
	overflow: scroll;
	overflow-x: hidden;
	/*overflow-y: hidden;*/
	transition: all 0.7s ease;
	width:80%;
	height: 100dvh; /* »çÆĸ®¿¡¼­ Çϴܹ٠Àß·Áº¸ÀÌ´Â Çö»ó ÇØ°á */
}
.header-menu-active.on{
	right: 0;
}
.header-menu-active .header-menu-inner,
.header-menu-active .depth-wrap {
	padding: 20px;
}

.header-menu-active .header-menu-inner{
    text-align: right;
}

.header-menu-active .header-menu-hide{
	cursor:pointer;
	display: inline-block;
}

.header-menu-active .depth01{
	font-size:16px;
	position:relative;
	display:block;
	transition:0.5s;
}
.header-menu-active .depth01 > li{
	position:relative;
	padding:10px 20px;
}

.header-menu-active .depth01 > li > a{
	color:#262626;
}
.header-menu-active .depth01 > li.on > a,
.header-menu-active .depth01 > li.on {
	color:var(--color-Orange);
}
.header-menu-active .depth01 li.on:before{
	transform: translateY(-50%) rotate(180deg);
}
.header-menu-active .depth01 > li:before{
	content: "\e941";
	font-family: xeicon;
	position:absolute;
	top: 50%;
    right: 20px;
    transform: translateY(-50%);
	transition:0.5s;
}
.header-menu-active .header-gnb-item:nth-child(2) .depth01 li:before,
.header-menu-active .header-gnb-item:nth-child(3) .depth01 li:before,
.header-menu-active .header-gnb-item:nth-child(5) .depth01 li:before,
.header-menu-active .header-gnb-item:nth-child(6) .depth01 li:before,
.header-menu-active .header-gnb-item:nth-child(7) .depth01 li:before{
	display:none;
}

.header-menu-active .depth-wrap{
	display:none;
	position:relative;
	background-color: #F3F3F3;
}
.header-menu-active .depth-wrap:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	border-bottom: 4px solid var(--color-Orange);
}
.header-menu-active .depth02 > li > a{
	color:#333;
	font-size: 15px;
	font-weight: 400;
	padding: 5px 0;
	display:block;
}
.header-menu-active .header-gnb-item:first-child .depth02,
.header-menu-active .header-gnb-item:nth-child(2) .depth02 {
	margin-bottom:10px;
}
.header-menu-active .header-gnb-item:first-child .depth02:last-child,
.header-menu-active .header-gnb-item:nth-child(2) .depth02:last-child {
	margin-bottom:0;
}
.header-menu-active .depth03 > li > a{
	color:#777;
	font-size: 14px;
	font-weight: 400;
	padding: 5px 0;
	display:block;
}
.header-menu-active .depth04,
.header-menu-active .depth05{
	display:none;
}

.side-deimmed{
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0,0,0,0.65);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.side-deimmed.show{
	opacity: 1;
	z-index: 600;
	visibility:visible;
}

.header .logo-area{
    justify-content: space-between;
	align-items: center;
}

.search-bx{
    text-align: right;
	position:relative;
	margin-top:20px;
	margin-bottom:34px;
}
#search{
	border-radius: 5px;
	border: 1px solid #BBB;
	background: #FFF;
	width:225px;
	height:40px;
	padding:10px;
}
.search-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
	padding-right: 10px;
}
.icon-search{
	display:block;
}

.nav{
	display: flex;
    justify-content: center;
    align-items: center;
	height:37px;
	margin-bottom: 12px;
}
.nav .nav--inner,
.nav .nav--inner > li {
	height:100%;
}
.nav .nav--inner{
	display:flex;
	gap: 50px;
	align-items: center;
	position:relative;
}
.nav .nav--inner > li{
    display: flex;
    align-items: center;
}
.nav .depth01{
	font-size: 18px;
	font-weight: 400;
	color: #262626;
    width: 65px;
	height: 100%;
    text-align: center;
	transition:0.5s;
	position: relative;
	display: flex;
    align-items: center;
	justify-content: center;
	letter-spacing: -0.72px;
}
.nav .depth01:hover {
	color: var(--color-Orange);
}
.nav .depth01:hover:after,
.nav .depth01.active:after {
	content:"";
	position: absolute;
    bottom: 0;
    left: 50%;
    width: 65px;
	transform: translateX(-50%);
    border-bottom: 3px solid var(--color-Orange);
	z-index:4;
}
.nav .depth01.active{
	color: var(--color-Orange);
	position:relative;
}

.nav .depth02{
	color: #333;
	font-size: 18px;
	font-weight: 400;
	display:block;
	padding-bottom:20px;
	padding-right: 60px;
	width: max-content;
	transition:0.5s;
}
.nav .depth02--1{
	width:215px;
}
.nav .depth03{
	color: #777;
	font-size: 16px;
	font-weight: 400;
	width: max-content;
	display: block;
	padding-bottom:10px;
	transition:0.5s;
}

.nav .depth02:hover,
.nav .depth03:hover {
	color: var(--color-Orange2);
}
.nav .nav--inner > li .depth-1{
	color:#262626;
}

.nav .sub-menu--wrapper{
	position: absolute;
    top: 100%;
    left: 0;
	display:none;
	z-index: 4;
	padding-top:35px;
	padding-bottom:44px;
	transition:0.5s;
}
.nav .sub-menu--wrapper:before,
.menu--toggle-inner:before{
	content:"";
    position: absolute;
    top: 0;
    width: 150vw;
    left: 50%;
	background-color: #fff;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	height: 100%;
	transform: translateX(-50%);
}
.nav .sub-menu--wrapper:before{
    z-index: -1;
}
.nav .sub-menu--wrapper.on{
	display:flex;
	flex-wrap: wrap;
}
.nav .sub-menu{
	position:relative;
}
.nav .nav--inner li:first-child .sub-menu{
	width:300px;
}
.nav .nav--inner li:first-child .sub-menu:first-child{
	padding-right:20px;
}
.nav .nav--inner li:first-child .sub-menu:last-child{
	padding-left:50px;
}

.nav .nav--inner li:first-child .sub-menu:first-child:after{
	content: "";
	border-right: 1px dashed #999;
	position:absolute;
	right:0;
	top:50%;
	transform: translateY(-50%);
	width: 1px;
    height: 100%;
}
.nav .nav--inner li:first-child .sub-menu:first-child ul li{
	width:calc(50% - 10px);
}
.nav .nav--inner li:first-child .sub-menu:last-child ul{
	flex-direction: column;
}
.nav .nav--inner li:first-child .sub-menu:first-child ul li:last-child ul li{
    width: max-content;
}
.nav .nav--inner li:first-child .sub-menu:last-child ul li:last-child .depth03{
	padding-bottom:0;
}

.nav .sub-menu ul{
	display:flex;
	flex-wrap: wrap;
}


.menu--toggle .btn{
	display: flex;
	align-items: center;
	border: none;
    background: transparent;
	padding: 0;
	gap: 10px;
	transition:0.3s;
	cursor: pointer;
}

.menu--toggle .btn span{
	color: #262626;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 18px;
	font-weight: 300;
}
.menu--toggle-inner{
    position: absolute;
    z-index: 3;
	top: 100%;
    right: 0;
	display:none;
}
.menu--toggle-inner.on{
	display:block;
}
.menu--toggle .icon-bars,
.menu--toggle .icon-close{
    display: block;
}
.menu--toggle .icon-bars {
    background: url("/img/common/icon-bars.svg") no-repeat;
	width: 37px;
    height: 37px;
	transition:0.5s;
}
.menu--toggle .icon-bars.on {
    background: url("/img/common/icon-close.svg") no-repeat;
}
.menu--toggle-inner .sub-menu{
	display: flex;
	padding: 25px 0;
	column-gap: 60px;
}
.toggle-link{
	color: #333;
	font-size: 18px;
	font-weight: 400;
	display: block;
    width: max-content;
}
.menu--toggle-inner .sub-menu li:nth-child(2) .toggle-link{
	font-family: "Roboto Condensed", sans-serif;
}

@media (max-width:1024px){
	.header .logo-area{
		flex-direction: column;
		align-items: flex-start;
	}
	.header .content{
		width: 100%;
	}
	.header .inner{
		justify-content: space-between;
		gap:0;
	}
	.header .inner .menu .pc{
		display: none;
	}
	.header .inner .menu .mobile{
		display: flex;
	}
	.social-media{
		display:none;
	}
	.search-bx{
		text-align: left;
	}
	#search{
		width:100%;
	}
	.nav{
		display:none;
	}
	.header .inner .util .mobile__menu{
		display:flex;
	}
}
@media (max-width:576px){
	.header .inner .menu ul,
	.header .inner .util ul{
		font-size: 16px;
		gap: 10px;
	}
	#wrap .icon-bars img,
	#wrap .icon-close img{
		width: 28px;
		height: 28px;
	}
}
/* footer */
.footer{
	background: var(--bg-Blue);
	font-weight: 400;
}
.footer-logo img{
	max-width:215px;
	width: 100%;
}
.t-box,
.b-box ul{
	display:flex;
}
.t-box{
    justify-content: space-between;
	padding-top:40px;
	padding-bottom:60px;
}
.l-box{
	display:flex;
	gap: 120px;
}
.l-box .util-list{
    display: flex;
    flex-wrap: wrap;
    row-gap: 15px;
	font-size:16px;
}
.l-box .util-list li{
	max-width:145px;
	width:50%;
}
.l-box .util-list li a,
.b-box ul li a {
	cursor:pointer;
	color:#fff;
}
.l-box .util-list li a:hover,
.b-box ul li a:hover {
	color:var(--color-Orange);
}
.r-box ul{
	display:flex;
    gap: 15px;
}

.r-box ul li a{
    width: 36px;
    height: 36px;
    display: block;
	transition:0.3s;
}
.r-box ul li:first-child a{
    background: url(/img/common/icon-youtube_f.svg) no-repeat;
	background-size: contain;
}
.r-box ul li:last-child a{
    background: url(/img/common/icon-blog_f.svg) no-repeat;
	background-size: contain;
}
.r-box ul li:first-child a:hover{
    background: url(/img/common/icon-youtube_f_hover.svg) no-repeat;
	background-size: contain;
}
.r-box ul li:last-child a:hover{
    background: url(/img/common/icon-blog_f_hover.svg) no-repeat;
	background-size: contain;
}

.b-box{
	padding:20px 0;
	border-top: 1px solid #fff;
}
.b-box ul{
    gap: 40px;
	font-size:14px;
}
.btn-top{
	width:60px;
	height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
	background: var(--color-Orange);
	border-radius:50%;
	position: fixed;
    right: 100px;
    bottom: 100px;
	cursor: pointer;
    z-index: 5;
}
.btn-top .xi-angle-up{
	color:#fff;
	font-size: 25px;
    font-weight: 600;
}
@media (max-width:1024px){
	.l-box{
		gap: 80px;
	}
	.btn-top{
		right: 5%;
		width: 50px;
		height: 50px;
	}
	.btn-top .xi-angle-up{
	    font-size: 20px;
	}
}
@media (max-width:768px){
	.t-box{
		flex-direction: column;
	}
	.btn-top{
		width: 40px;
		height: 40px;
	}
	.btn-top .xi-angle-up{
	    font-size: 15px;
	}
	.l-box .util-list li{
		max-width: 50%;
		width:50%;
	}
	.r-box ul{
	    gap: 10px;
	}
}
@media (max-width:576px){
	.t-box{
		padding:40px 0;
	}
	.l-box{
		gap: 0;
		flex-direction: column;
	}
	.l-box .util-list{
		padding-top:30px;
		padding-bottom:20px;
		row-gap: 10px;
		font-size: 15px;
	}
}


/* img_borad_list */
.img_borad_list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.img_borad_list .item{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	position: relative;
}

.main-btn{
	background: var(--color-Orange);
	color: #FFF;
	font-size: 16px;
	font-weight: 400;
	width: 130px;
	height: 42px;
	border-radius: 5px;
	display: flex;
    justify-content: center;
    align-items: center;
	border:1px solid var(--color-Orange);
	transition:0.3s;
}
.main-btn.en{
	font-family: "Roboto Condensed", sans-serif;
}
@media (max-width:1024px){
	.main-btn{
	    font-size: 15px;
        width: 115px;
        height: 37px;
	}
}
@media (max-width:576px){
	.main-btn{
        font-size: 14px;
		width: 102px;
        height: 33px;
	}
}
/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding-top:50px; padding-bottom:150px; 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; color: #262626; font-size: 16px; font-weight: 300;line-height: 160%;}
.privacy > p.lh-130{line-height: 130%;}
.privacy > p.m-0{margin:0;}
.privacy > p+dl { margin-top: 40px; }
.privacy > dl { padding-bottom:40px;}
.privacy > dl.pb-0 { padding-bottom:0;}
.privacy > dl > dt{ font-size:17px;color:var(--color-Blue);font-weight:500;padding-bottom:15px;}
.privacy > dl > dd{ font-size:16px;color:#262626;font-weight: 300;}
.privacy > dl > dd ul{ padding-top:15px;}
.privacy > dl > dd ul.pt-0{ padding-top:0;}
.privacy > dl > dd ul.pt-40{padding-top:40px;}
.privacy > dl > dd ul li{ margin-top: 10px;position:relative;padding-left:10px;}
.privacy > dl > dd ul li.mt-0{ margin-top:0;}
.privacy > dl > dd ul.sTxt--2 li{ padding-left:0;}
.privacy-list p{position:relative; padding-left:10px;}
.privacy > dl > dd ul li:before, .privacy-list p:before { content:""; width:3px; height:3px; background:var(--color-Blue);position: absolute;left: 0;top: 50%;transform: translateY(-50%);border-radius:50%;}
.privacy > dl > dd ul.sTxt--2 li:before{ display:none;}
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 160%; }
.privacy > dl > dd ul li p.sTxt--4{ margin: 0 0 40px 0;}
.privacy > dl > dd ul li p.sTxt--5{margin: 0 0 5px 0;}
.privacy > dl > dd ul li p.sTxt--6{margin: 0 0 10px 0;}
.privacy > dl > dd ul li p.sTxt--7{margin: 0;}
.privacy > dl > dd ul li p.m-0 { margin:0;}
.sTxt h3 { font-size:16px; color: #262626; font-weight: 500; margin: 40px 0 15px; }
.sTxt p { margin-top: 10px;line-height: 160%;}
.sTxt dt, .sTxt--2 span { color: #262626;font-size: 16px;font-weight: 500; position:relative;padding-left:10px;display:block;}
.sTxt dt:before, .sTxt--2 span:before { content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:2px; height:10px; background:var(--color-Blue);}
.sTxt dd {color: #262626;font-size: 16px;font-weight: 300; margin-top:10px;}
.sTxt--3 h3 { margin-bottom: 5px; font-weight: 400;}
.sTxt--3 dd { margin-top: 5px; font-weight: 400;}
.sTxt--3 h3.mb-0 { margin-bottom: 0;}
.sTxt--3 dd.mt-0 { margin-top: 0;}
.lh-160{line-height: 160%;}


/* icon-video */

.icon-video{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	background: url("/img/main/icon-play.svg") no-repeat;
	width:70px;
	height:70px;
	background-size: cover;
	transition:0.3s;
}

@media (max-width:1200px){
	.icon-video{
		width: 65px;
		height: 65px;
	}
}
@media (max-width:1024px){
	.icon-video{
		width: 60px;
		height: 60px;
	}
}
@media (max-width:768px){
	.icon-video{
		width: 50px;
		height: 50px;
	}
}
@media (max-width:576px){
	.icon-video{
		width: 60px;
		height: 60px;
	}
}

/* lightbox ¶óÀ̺귯¸® */
.lb-nav a.lb-prev,
.lb-nav a.lb-next{
    opacity: 1 !important;
}