@charset "utf-8";


/* ===================================
	layout
 =================================== */

/* 공통 */
body{background:url(../images/common/body_bg.jpg);}
.fx{display: flex !important; display: -ms-flex !important; display: -webkit-flex !important;}
.grid{max-width:1440px; width:100%; margin:0 auto;}
.wrap{max-width:2560px ; width:100%; margin:0 auto; position: relative;padding-top:85px; z-index: 0;}
@media(max-width:1440px){
 .grid{padding:0 20px;}
 .wrap{padding-top:70px;}
}
@media(max-width:1024px){
	.wrap{padding-top:60px;}
}
@media(max-width:768px){

}
@media(max-width:425px){
	.wrap{padding-top:50px;}
}

/* header */
header{ position: fixed; width:100%; height:85px; background:#fff; font-size:0; left:50%; top:0; transform: translate(-50%,0); z-index: 10000; transition: all .3s ease;}
header > .container{width:100%; height:100%; vertical-align: middle; border-bottom:1px solid #e1e1e1;  position: relative;}
header > .container::before{display: inline-block; content:''; height:100%; vertical-align: middle;}
header > .container .logo{margin-left:40px; display: inline-block;}
header > .container .logo a{display: block; width:100%;}
header > .container .logo a img{width:100%;}
header > .container .menu__1 {position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%); height:100%; width:50%; max-width:800px;}
header > .container .menu__1 > ul{height:100%; position: relative;}
header > .container .menu__1 > ul > li{display: inline-block; margin:0; padding:0; border:0; height:100%; width:20%;}
header > .container .menu__1 > ul > li > a{font-size:16px; padding:33px 0; color:#222; display: block; position: relative; text-align: center;}
header > .container .menu__1 > ul > li:last-child > a{color:#1b3f31; font-weight: 700; pointer-events: none;}
header > .container .menu__1 > ul > li > a::after{position: absolute; content:''; left:50%; top:100%; transform: translate(-50%,0); width:0; height:3px; background:#222; transition: all .5s ease;}
header > .container .menu__1 > ul > li:hover > a::after{width:100%;}
header > .container .menu__1 > ul > li > .menu__2{position: absolute; content:''; left:50%; top:100%; transform: translate(-50%,0);  width:100vw; height:0; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all .5s ease; opacity: 0; background:#fff;}
header > .container .menu__1 > ul > li > .menu__2 > ul{position: relative; text-align: center; height:100%; }
header > .container .menu__1 > ul > li > .menu__2 > ul::before{content:''; display: inline-block; vertical-align: middle; height:100%;}
header > .container .menu__1 > ul > li > .menu__2 > ul > li{display: inline-block; vertical-align: middle;  height:100%;}
header > .container .menu__1 > ul > li > .menu__2 > ul > li > a{font-size:14px; display: block; padding:30px 40px;}
header > .container .menu__1 > ul > li:nth-child(2) > .menu__2{display: none;}
header > .container .menu__1 > ul > li:hover > .menu__2{height:90%; opacity: 1;}
header > .container .menu__1 > ul > li:nth-child(1) > .menu__2 > ul{left:-50px;}
header > .container .menu__1 > ul > li:nth-child(4) > .menu__2 > ul{left:160px;}
header > .container .menu__1 > ul > li:nth-child(5) > .menu__2 > ul{left:300px;}
header > .container .uitil{position: absolute; content:''; right:40px; top:50%; transform: translate(0,-50%); z-index: 20000;}
header > .container .uitil > div{display: inline-block;}
header > .container .uitil .lang{margin-right:30px; transition: all .3s ease;}
header > .container .uitil .lang a{margin-right:20px; font-size:14px; opacity: .5;}
header > .container .uitil .lang a.on {opacity: 1;}
header > .container .uitil .lang a.on span{position: relative;}
header > .container.on .uitil .lang a{opacity: 0; pointer-events: none; cursor: default;}
header > .container .uitil .lang a.on span::before{position: absolute; content:''; left:50%; top:100%; transform: translate(-50%,0); width:100%; height:2px; background:#222;}
header > .container .uitil .btn_site_map{width:30px; height:30px; position: relative; cursor: pointer; transition: all .3s ease;}
header > .container .uitil .btn_site_map span{transition: all .3s ease; z-index: 99999;}
header > .container .uitil .btn_site_map span:nth-child(1){position: absolute; content:''; left:50%; top:20%; transform: translate(-50%,0); width:100%; height:2px; background:#222;}
header > .container .uitil .btn_site_map span:nth-child(2){position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%); width:100%; height:2px; background:#222;}
header > .container .uitil .btn_site_map span:nth-child(3){position: absolute; content:''; left:0; top:80%; transform: translate(0,-100%); width:60%; height:2px; background:#222;}
header > .container .uitil .btn_site_map:hover span:nth-child(3){position: absolute; content:''; left:0; top:80%; transform: translate(0,-100%); width:100%; height:2px; background:#222;}
header > .container.on .uitil .btn_site_map{transform: scale(150%); transform-origin: right top;}
header > .container.on .uitil .btn_site_map span:nth-child(1){position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotateZ(45deg); width:100%; height:2px; background:#fff;}
header > .container.on .uitil .btn_site_map span:nth-child(2){position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%); width:0; height:2px; background:#fff;}
header > .container.on .uitil .btn_site_map span:nth-child(3){position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotateZ(-45deg); width:100%; height:2px; background:#fff;}
/* header__site_map */
header .site_map{position: absolute; left:0; top:0; width:100%; height:100vh; z-index: 10000; font-size:0; display: none;}
header .site_map .container{position: absolute; width:100%; height:100%;}
header .site_map .content{display: inline-block; }
header .site_map .content_left{width:65%; height:100%; background:url(../images/common/sub_bg1.jpg)no-repeat center / cover; transition: all .5s ease;}
header .site_map .content_left.bg1{background:url(../images/common/sub_bg1.jpg)no-repeat center / cover;}
header .site_map .content_left.bg2{background:url(../images/common/sub_bg2.jpg)no-repeat center / cover;}
header .site_map .content_left.bg3{background:url(../images/common/sub_bg3.jpg)no-repeat center / cover;}
header .site_map .content_left.bg4{background:url(../images/common/sub_bg4.jpg)no-repeat center / cover;}
header .site_map .content_left.bg5{background:url(../images/common/sub_bg5.jpg)no-repeat center / cover;}
header .site_map .content_right{position: relative; width:35%; height:100%; background:url(../images/common/site_map_right_bg.png); overflow: hidden;}
header .site_map .content_right::before{position: absolute; top:0; left:0; content:''; height:80px; width:100%; background:url(../images/common/site_map_right_bg1.png)no-repeat center top; transform: rotateX(180deg);}
header .site_map .content_right::after{position: absolute; bottom:0; left:0; content:''; height:80px; width:100%; background:url(../images/common/site_map_right_bg1.png)no-repeat center top;}
header .site_map .lang{font-size:20px;}
header .site_map .lang a{color:#fff; opacity: .5; vertical-align: baseline; margin-right:20px; position: relative;}
header .site_map .lang a.on{color:#fff; opacity: 1; }
header .site_map .lang a:last-child{margin:0;}
header .site_map .lang a.on::after{position: absolute; top:100%; left:0; width:100%; height:3px; background:#fff; content:''; margin-top:5px;}
header .site_map .item_box{padding:60px;height:100%; position: relative;}
header .site_map .item_box::before{position: absolute; content:''; left:50%; bottom:60px; transform: translate(-50%,0); width:90%; height:250px; background:url(../images/common/site_map_right_bg2.png)no-repeat center / 100%;}
header .site_map .item{max-width:450px; width:100%; margin: 0 auto 60px; display: block;}
header .site_map .item:last-child{margin:0 auto;}
header .site_map .item > ul{margin-top:120px;}
header .site_map .item > ul > li{font-size:30px; margin-bottom:30px; position: relative; }
header .site_map .item > ul > li > a{color:#fff; position: relative; width:100%; display: block; border-bottom:1px solid rgba(255, 255, 255, 0.2); padding-bottom:15px;}
header .site_map .item > ul > li > a span{vertical-align: baseline;}
header .site_map .item > ul > li > a i{position: absolute; right:0; bottom:15px; width:30px; height:30px; transition: all .3s ease;}
header .site_map .item > ul > li > a i.on{transform: rotateZ(180deg);}
header .site_map .item > ul > li > a i img{width:100%; vertical-align: baseline;}
/* header .site_map .item > ul > li:nth-child(2) > a i{display: none;}
header .site_map .item > ul > li:nth-child(2) > ul{display: none !important;} */
header .site_map .item > ul > li > ul{display: none; margin-top:20px;}
header .site_map .item > ul > li > ul > li{font-size:18px; line-height: 1.8;}
header .site_map .item > ul > li > ul > li > a{position: relative; padding-left:15px; color:#fff; opacity: .6; font-weight: 400; vertical-align: baseline;}
header .site_map .item > ul > li > ul > li:hover > a{opacity: 1;}
header .site_map .item > ul > li > ul > li > a::before{position: absolute; content:''; left:0; top:50%; transform: translate(0,-50%); width:5px; height:1px; background:#fff;}

@media(max-width:1440px){
	header{height:70px;}
	header .container .menu__1 > ul > li > a{padding:26px 0; font-size:14px;}
	header .container .logo{width:10%;}
	header .site_map .content_left{width:55%;}
	header .site_map .content_right{width:45%;}
	header .site_map .item > ul > li{font-size:26px;}
	header .site_map .lang{font-size:18px;}
	header > .container .menu__1 > ul > li > .menu__2 > ul > li > a{padding: 24px 40px;}
}

@media(max-width:1024px){
	header{height:60px;}
	header .container .logo{margin-left:20px; max-width:187px; width:15%;}
	header .container .menu__1 > ul > li > a{padding:21px 0; font-size:14px;}
	header .container .uitil{right: 20px;}
	header > .container .menu__1 > ul > li > .menu__2 > ul > li > a{padding: 20px;}
	header .container .menu__1{display: none !important;}

}

@media(max-width:768px){
	header .container .menu__1{display: none !important;}
	header .container .uitil .btn_site_map{width:25px; height:25px;}
	header .container .uitil .lang{margin-right:10px;}
	header .container .logo a{width:100%;}
	header .site_map .item_box{padding:60px 40px;}
	header .site_map .content_left{width:40%; background:rgba(0, 0, 0, 0.8) !important;}
	header .site_map .content_right{width:60%;}
	header .site_map .item > ul{margin-top:80px;}
	header .site_map .item > ul > li{font-size:24px;}
	header .site_map .lang{font-size:16px;}
	header .site_map .item > ul > li > ul > li > a{font-size:14px;}
}

@media(max-width:425px){
	header{height:50px;}
	header .container .logo{width:25%; }
	header .site_map .content_left{width:0;}
	header .site_map .content_right{width:100%;}
	header .site_map .item > ul > li{font-size:20px;}
}


/* footer */
footer{width:100%; height:100%; position: relative; font-size:0; background:#222; padding-bottom:40px;}
footer .container{max-width:1680px; width:100%; margin:0 auto;}
footer .menu{width:100%; border-bottom:1px solid rgba(255, 255, 255, 0.2);}
footer .menu ul{text-align: center; max-width:768px; width:100%; margin:0 auto;}
footer .menu ul li{display: inline-block; width:20%;}
footer .menu ul li a{font-size:14px; padding:30px 40px; display: block;  color:rgba(255, 255, 255, 0.5); font-weight: 400;}
footer .menu .top{position: fixed; content:''; right:0; bottom:0; transform: translate(-50%,-50%); width:60px; height:60px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); background:#fff; z-index: 5000; cursor: pointer;}
footer .info_box{padding:30px; width:100%; height:100%;}
footer .info_box .f_logo{margin:0 auto 40px; max-width:231px; width:100%; display: block;}
footer .info_box .f_logo img{width:100%;}
footer .info_box p{line-height: 1.4;}
footer .info_box .info{font-size:14px; color:rgba(255, 255, 255, 0.5); text-align: center; line-height: 1.6; font-weight: 300; max-width:768px; width:100%; margin:0 auto;}
footer .info_box .info span{margin:0 10px;}
footer .info_box .cype{font-size:12px; color:rgba(255, 255, 255, 0.3); text-align: center; margin-top:20px; font-weight: 300; letter-spacing: 2px; max-width:768px; width:100%; margin:0 auto;}
@media(max-width:680px){
	footer .menu ul li a{padding:20px 10px;}
	footer .info_box .info{display: flex; display: -ms-flex; display: -webkit-flex; flex-direction: column; margin-bottom:20px;}
	footer .info_box .info br{display: none;}
}

@media(max-width:425px){
	footer .menu ul{display: flex; display: -ms-flex; display: -webkit-flex; flex-wrap: wrap;}
	footer .menu ul li{width:50%;}
	footer .menu ul li a{font-size:12px;}
	footer .info_box{padding: 20px;}
	footer .info_box .info span{margin:0 0 10px; width:100%;}
}


/* snb */
.subContents .sub_visual{width:100%; height:350px; position: relative; z-index: 100; transition: all .3s ease; background:#fff;}
.subContents .sub_visual::before{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%); width:100%; height:100%; background:#222; opacity: .2;}
.subContents .sub_visual.nth-1{background:url(../images/common/sub_bg1.jpg)no-repeat center / 100%;}
.subContents .sub_visual.nth-2{background:url(../images/common/sub_bg2.jpg)no-repeat center / 100%;}
.subContents .sub_visual.nth-3{background:url(../images/common/sub_bg3.jpg)no-repeat center / 100%;}
.subContents .sub_visual.nth-4{background:url(../images/common/sub_bg4.jpg)no-repeat center / 100%;}
.subContents .sub_visual.nth-5{background:url(../images/common/sub_bg5.jpg)no-repeat center / 100%;}
.subContents .sub_visual{animation: bgsize 10s linear forwards; animation-timing-function:ease;}
@keyframes bgsize {
from{background-size: 100%;}
to{background-size: 120%;}
}
.subContents .sub_visual .container{width:100%; height:100%; font-size:0;}
.subContents .sub_visual .title_box{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%);}
.subContents .sub_visual .title_box h2{color:#fff; text-align: center;}
.subContents .sub_visual .title_box h2 span{display: block;}
.subContents .sub_visual .title_box h2 span:nth-child(1){font-size:46px; font-family:'sol_m'; /*font-weight: 700;*/ margin-bottom:10px; transform: translateY(20px); animation: fadeup 1s linear forwards; animation-delay: .3s;  animation-timing-function:ease; opacity: 0;}
@keyframes fadeup {
	from{transform: translateY(20px); opacity: 0;}
	to{transform: translateY(0); opacity: 1;}
}
.subContents .sub_visual .title_box h2 span:nth-child(2){font-size:18px; font-weight: 500; transform: translateY(20px); animation: fadeup2 1s linear forwards; animation-delay: .6s; animation-timing-function:ease; opacity: 0;}
@keyframes fadeup2 {
	from{transform: translateY(20px); opacity: 0;}
	to{transform: translateY(0); opacity: .5;}
}
.subContents .snb{ max-width:1440px; width:100%; margin:0 auto; height:60px; background:#fff; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); display: block; margin-top:-30px; z-index: 101; position: relative; font-size:0; transition: all .3s ease;}
.subContents > h3{max-width:1440px; width:100%; margin:80px auto; text-align: center; font-size:30px; font-weight: 700; line-height: 1.4;}
.subContents .snb .home{width:60px; height:60px; background:#61453e url(../images/common/snb_home.png)no-repeat center / 100%; display: inline-block;}
.subContents .snb > ul{display: inline-block; position: relative; z-index: 100;}
.subContents .snb > ul > li{border-right:1px solid #e1e1e1; display: inline-block; position: relative; z-index: 10;}
.subContents .snb > ul > li > a{font-size:14px; padding:20px; display: block;  cursor: pointer; background:#fff; pointer-events: none;}
.subContents .snb > ul > li > a > span{margin-right:120px;}
.subContents .snb > ul > li > ul{ position: absolute; content:''; left:0; top:100%; width:100%; background:#fff; box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);  opacity: 1; transition: all .3s ease; display: none; opacity: 0; transform: translateY(-50%); height:0;}
.subContents .snb > ul > li:hover > ul{animation: hover .5s ease ; display: flex; flex-direction: column; opacity: 1; transform: translateY(0); height:auto;}
@keyframes hover { from{ opacity: 0; transform: translateY(-10px);} to{opacity: 1; transform: translateY(0);} }
.subContents .snb > ul > li > ul > li > a{font-size:14px; color:#222; padding:17px 20px; display: block; line-height: 1.4;}

@media(max-width:1440px){
	.subContents .sub_visual .title_box h2 span:nth-child(1){font-size:36px;}
	.subContents > h3{font-size:26px;}
	.subContents .sub_visual{height:400px;}
	
}

@media(max-width:1024px){
	.subContents .sub_visual .title_box h2 span:nth-child(1){font-size:32px;}
	.subContents > h3{font-size:24px;}
	.subContents .sub_visual{height:350px;}
}

@media(max-width:768px){
	.subContents .sub_visual .title_box h2 span:nth-child(1){font-size:28px;}
	.subContents > h3{font-size:21px;}
	.subContents .snb{height:50px;}
	.subContents .snb .home{height:50px; width:50px;}
	.subContents .snb > ul > li > a{padding:16px;}
	.subContents .snb > ul > li > a > span{margin-right:40px;}
	.subContents .sub_visual{height:300px;}
}

@media (max-width:540px) {
	.subContents .snb{height:auto;}
	.subContents .snb .home{width:100%; background-size:auto;}
	.subContents .snb > ul{display: flex; display: -ms-flex; display: -webkit-flex; width:100%; flex-wrap: wrap;}
	.subContents .snb > ul > li{width:100%; transition: all .3s ease; border-bottom:1px solid #e1e1e1;}
	.subContents .snb > ul > li > a{display: flex; display: -ms-flex; display: -webkit-flex; justify-content: space-between;}
	.subContents .snb > ul > li:hover > ul{position: relative; top:0;}
}

@media(max-width:425px){
	.subContents .sub_visual{height:250px;}
	.subContents .sub_visual .title_box h2 span:nth-child(1){font-size:26px;}
	.subContents > h3{font-size:18px;}
	.subContents .snb > ul > li > a{font-size:12px;}
	.subContents .snb > ul > li > ul > li > a{font-size:12px;}
	.subContents .snb > ul > li > a > span{margin-right:20px;}
}

/* @media (max-width:375px) {
	.subContents .snb{height:auto;}
	.subContents .snb .home{width:100%; background-size:auto;}
	.subContents .snb > ul{display: flex; display: -ms-flex; display: -webkit-flex; width:100%; flex-wrap: wrap;}
	.subContents .snb > ul > li{width:100%; transition: all .3s ease; border-bottom:1px solid #e1e1e1;}
	.subContents .snb > ul > li > a{display: flex; display: -ms-flex; display: -webkit-flex; justify-content: space-between;}
	.subContents .snb > ul > li:hover > ul{position: relative; top:0;}
} */