@charset "UTF-8";
/*
xs
<576px	sm
≥576px	md
≥768px	lg
≥992px	xl
≥1200px	xxl
≥1400px
*/

/*화이트 그린 버튼*/
.wh-gr-btns{		
	position: relative;
	float:right;
	display: inline-block;	
	min-width:150px;
	height:3rem;
	z-index:3;	
	overflow:hidden;
	background:rgba(255,255,255,0.2);
	border-radius: 0.3rem;
}
.wh-gr-btns a{	
	display: inline-block;
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	color:#fff;
	font-size:1.2rem;
	line-height:3rem;
	text-align:center;
	z-index:2;	
}
.wh-gr-btns a .arrow{	
	display: inline-block;	
	position: relative;
	width:25px;
	height:12px;
	border-bottom:1px solid #fff;
}
.wh-gr-btns a .arrow:after{
	content:'';
	position: absolute;
	top:4px;
	right:2px;
	display: inline-block;	
	width:16px;
	height:16px;	
	border-right:1px solid #fff;
	transform: rotate(-45deg);
}

.wh-gr-btns:hover{	
	background:#192B2B;
}

.wh-gr-btns:hover  a{	
	color:#fff;
}

.wh-gr-btns:hover .arrow, .wh-gr-btns:hover .arrow:after{	
	border-color:#fff;
}





/*반투명 회색 화이트폰트 버튼*/
.gr-bk-wf-50-btns{		
	position: relative;
	display: inline-block;	
	width:180px;
	height:3rem;
	overflow:hidden;
	border: none;
	border-radius: 1.5rem;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}
.gr-bk-wf-50-btns a{	
	display: inline-block;
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:3rem;
	color:#fff;
	font-size:1.2rem;
	font-weight: 600;
	line-height:3rem;
	text-align:center;
	z-index:2;	
}
.gr-bk-wf-50-btns a .arrow{	
	display: inline-block;	
	position: relative;
	width:26px;
	height:10px;
	border-bottom:1px solid #fff;
}
.gr-bk-wf-50-btns a .arrow:after{
	content:'';
	position: absolute;
	top:3px;
	right:2px;
	display: inline-block;	
	width:12px;
	height:12px;	
	border-right:1px solid #fff;
	transform: rotate(-45deg);
}
.gr-bk-wf-50-btns .btns-bg{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff;
	opacity: 0.3;
	z-index:1;
}

.gr-bk-wf-50-btns:hover  a{	
	color:#000;
}
.gr-bk-wf-50-btns:hover  .btns-bg{	
	opacity: 0.8;
}

.gr-bk-wf-50-btns:hover  a{	
	color:#000;
}

.gr-bk-wf-50-btns:hover .arrow, .gr-bk-wf-50-btns:hover .arrow:after{	
	border-color:#000;
}

.banner-title.bg-green{background: #009900;}
.banner-title.bg-bgreen{background: #009999;}
.banner-title.bg-blue{background: #0066cc;}
.banner-title.bg-orange{background: #ff9900;}
.banner-title{width:100%; padding:2rem 2rem;overflow:hidden;}
.banner-title > div {width:100%; max-width:1250px;margin:0 auto; }
.banner-title .tit{float:left;font-size:1.4rem;line-height:3rem; color:#fff;font-weight:500;}
.banner-title .tit span{display:block;font-size:1.4rem;line-height:1.5rem; color:#fff;font-weight:500;vertical-align:top;}
.banner-title .btns{display: flex;align-items: center; float:right;}
.banner-title .btns img{height:3rem;}


@media (max-width: 767px) {
  .banner-title{width:100%; padding:1rem 1rem;overflow:hidden;}
 .banner-title .tit{line-height:2rem; color:#fff;font-weight:500;margin-bottom:0.5rem;}
}



.pcb-box{ background:#fff;padding:4rem 0; }
.pcb-box .inner{ width:100%; max-width:1250px; border-top:1px solid #efefef; }
.pcb-box .inner:after{ content:"";display: block;clear:both; }

.pcb-box .left_info { background:#55aa55; }
.pcb-box .left_info .title-box { position: relative; height:400px;}
.pcb-box .left_info .title-box > div{ position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); font-size:1.1rem;font-weight:400;color:#fff;line-height:2rem;}
.pcb-box .left_info .title-box > div strong{display:block;font-size:1.5rem;font-weight:500;margin-bottom:1rem;}
.pcb-box .left_info .title-banner{height:400px;}
.pcb-box .left_info .title-banner > div {width:100%; height:100%;  transition: all 0.5s ease-out;}
.pcb-box .left_info  .title-banner .standard1{ background:url(/main/img/bg_tab1_n.png) 50% 50% no-repeat; }
.pcb-box .left_info  .title-banner .standard2{ background:url(/main/img/bg_tab3_n.png) 50% 50% no-repeat; }
.pcb-box .left_info  .title-banner .standard3{ background:url(/main/img/bg_tab4_n.png) 50% 50% no-repeat; }
.pcb-box .left_info  .title-banner .standard4{ background:url(/main/img/bg_tab5_n.jpg) 50% 50% no-repeat; }

.pcb-box .tabs{}
.pcb-box .tabs > div {position: relative; cursor:pointer;height:200px; z-index:1;}
.pcb-box .tabs > div:after{ content:"";display: block;position: absolute;left:0;top:0;right:0;bottom:0;  background:rgba(0,0,0,0.2);z-index:0;}
.pcb-box .tabs .thumb {position: relative;overflow: hidden;background: #fff;}
.pcb-box .tabs .thumb .bg{position: absolute;transition: all 0.3s ease-out; width:100%; height:100%; background-size:cover !important; z-index:1; }
.pcb-box .tabs .stamp{ position: absolute;left:0;right:0;top:50%;text-align:center;transform:translateY(-50%);z-index:2;}
.pcb-box .tabs .stamp strong,.pcb-box .tabs .stamp strong *{ margin-bottom:17px;font-size:1.3rem;font-weight:600; line-height: 120%;  color: #fff;display: block; }
.pcb-box .tabs .stamp img{width:50%;}
.pcb-box .tabs > div.on .stamp strong, .pcb-box .tabs > div:hover .stamp strong{ color: #121212; }
.pcb-box .tabs > div.on .thumb .bg,  .pcb-box .tabs > div:hover .thumb .bg{  opacity:0.8; transform:  scale(1.05)}
.pcb-box .tabs > div.on .thumb ,  .pcb-box .tabs > div:hover .thumb { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff , -1px 1px 2px #fff , 1px -1px 2px #fff; }
.pcb-box .tabs .tab1{ background:rgba(0,0,0,0.5); }
.pcb-box .tabs .tab2{ background:#ff7985; }
.pcb-box .tabs .tab3{ background:#798694; }
.pcb-box .tabs .tab4{ background:#5aa814; }

.pcb-box .tabs > div.on:after,
.pcb-box .tabs > div:hover:after{display: block; border:0px solid rgba(50,50,50,0.1);background:rgba(255,255,255,0);}

.pcb-box .tabs .standard_list{ text-align:left; }
.pcb-box .tabs .standard_list ul{ margin-top:0.7rem; list-style:none; }
.pcb-box .tabs .standard_list ul li{ position: relative;border:0px solid #707070;margin-top:5px;line-height:100%; padding:0.3rem 0.5rem; font-size:1rem;
background:#fff;border-radius:3px; }
.pcb-box .tabs .standard_list ul li:first-child{ margin-top:0; }

@media (max-width: 767px) {
 .pcb-box .tabs > div {min-height:180px;}
}



.d3-box{ background:#fff;padding:4rem 0; }
.d3-box .inner{ width:100%; max-width:1250px; }
.d3-box .inner:after{ content:"";display: block;clear:both; }

.d3-box .left_info { background:#55aaaa; }
.d3-box .left_info .title-box { position: relative; height:400px;}
.d3-box .left_info .title-box > div{ position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); font-size:1.1rem;font-weight:400;color:#fff;line-height:2rem;}
.d3-box .left_info .title-box > div strong{display:block;font-size:1.5rem;font-weight:500;margin-bottom:1rem;}
.d3-box .left_info .title-banner{height:400px;}
.d3-box .left_info .title-banner > div {width:100%; height:100%;  }
.d3-box .left_info .title-banner .standard{ background:url(/img/main/tab_bg_3d0.jpg) 50% 50% no-repeat; }

.d3-box .tabs{}
.d3-box .tabs > div {position: relative; cursor:pointer;height:200px; z-index:1;}
.d3-box .tabs > div:after{ content:"";display: block;position: absolute;left:0;top:0;right:0;bottom:0;  background:rgba(0,0,0,0.2);z-index:0;}
.d3-box .tabs .thumb {position: relative;overflow: hidden;background: #fff;width:100%;height:100%;}
.d3-box .tabs .thumb .bg{position: absolute;transition: all 0.3s ease-out; width:100%; height:100%; background-size:cover !important; z-index:1; }
.d3-box .tabs .stamp{ position: absolute;left:0;right:0;top:50%;padding:6rem 0;text-align:center;transform:translateY(-50%);z-index:2;background:rgba(0,0,0,0.1);transition: all 0.1s ease;}
.d3-box .tabs .stamp strong{ font-size:1.4rem;font-weight:400; line-height: 120%;  color: #fff;display: block;  }
.d3-box .tabs .stamp .inf{display:inline-block;font-size:0.975rem;font-weight:200; line-height: 150%; color: #fff;text-align:left;margin:0 auto;}
.d3-box .tabs > div.on .stamp{background:rgba(255,255,255,0.8);padding:0.5rem 0;}
.d3-box .tabs > div.on .stamp strong, .d3-box .tabs > div:hover .stamp strong{ color: #121212; font-weight:700;  }
.d3-box .tabs > div.on .stamp .inf, .d3-box .tabs > div:hover .stamp .inf{ color: #121212; font-weight:400;  }
.d3-box .tabs > div.on .thumb .bg,  .d3-box .tabs > div:hover .thumb .bg{  opacity:0.8; transform:  scale(1.05)}
.d3-box .tabs > div.on .thumb ,  .d3-box .tabs > div:hover .thumb { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff , -1px 1px 2px #fff , 1px -1px 2px #fff; }

.d3-box .tabs > div.on:after,
.d3-box .tabs > div:hover:after{display: block; border:0px solid rgba(50,50,50,0.1);background:rgba(255,255,255,0);}



.dev-box{ background:#fff;padding:4rem 0; }
.dev-box .inner{ width:100%; max-width:1250px; }
.dev-box .inner:after{ content:"";display: block;clear:both; }

.dev-box .tabs{}
.dev-box .tabs .tab {position: relative; cursor:pointer;z-index:1;border:1px solid #f7f7f7;text-align: center;}
.dev-box .tabs .tab:after{ content:"";display: block;position: absolute;left:0;top:0;right:0;bottom:0; z-index:0;}
.dev-box .tabs .thumb {position: relative;overflow: hidden;background: #fff;width:100%;height:100%;}
.dev-box .tabs .thumb .bg{position: absolute;transition: all 0.3s ease-out; width:100%; height:100%; left:0;top:0;right:0;bottom:0; background-size:cover !important; z-index:1; }
.dev-box .tabs .thumb img{width:100%;}
.dev-box .tabs .tit{ font-size:1.4rem; line-height:2.8rem; height:2.8rem; text-align:center; display: block;  }
.dev-box .tabs .inf{display:inline-block;width:auto;margin:0 auto;padding:0.5rem 0; font-size:0.975rem;font-weight:400; line-height: 150%; text-align:left;}
.dev-box .tabs > div.on .tit ,  .tabs > div:hover .tit{ color: #121212; font-weight:700;  }
.dev-box .tabs > div.on .inf, .dev-box .tabs > div:hover .inf{ color: #121212; font-weight:400;  }
.dev-box .tabs > div.on .thumb .bg,  .dev-box .tabs > div:hover .thumb .bg{  opacity:0.8; transform:  scale(1.05)}
.dev-box .tabs > div.on .thumb ,  .dev-box .tabs > div:hover .thumb { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff , -1px 1px 2px #fff , 1px -1px 2px #fff; }




.inst-box{ background:#fff;padding:4rem 0; }
.inst-box .inner{ width:100%; max-width:1250px; }
.inst-box .inner:after{ content:"";display: block;clear:both; }

.inst-box .tabs{}
.inst-box .tabs .tab {position: relative;  cursor:pointer; z-index:1; text-align: center;}
.inst-box .tabs .tab:after{ content:"";display: block;position: absolute;left:0;top:0;right:0;bottom:0; z-index:0;}
.inst-box .tabs .thumb {position: relative;overflow: hidden;background: #fff;width:100%;height:100%;}
.inst-box .tabs .thumb .bg{position: absolute;transition: all 0.3s ease-out; width:100%; height:100%; left:0;top:0;right:0;bottom:0; background-size:60% !important; z-index:1; }
.inst-box .tabs .thumb img{width:80%;}
.inst-box .tabs .tit{ font-size:1rem; line-height:2.8rem; height:2.8rem; text-align:center; display: block;background: #FFea99; border-radius: 0.5rem;  }
.inst-box .tabs > div.on .tit ,  .tabs > div:hover .tit{ color: #121212; font-weight:700;  }
.inst-box .tabs > div.on .inf, .inst-box .tabs > div:hover .inf{ color: #121212; font-weight:400;  }
.inst-box .tabs > div.on .thumb .bg,  .inst-box .tabs > div:hover .thumb .bg{  opacity:0.8; transform:  scale(1.05)}
.inst-box .tabs > div.on .thumb ,  .inst-box .tabs > div:hover .thumb { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff , -1px 1px 2px #fff , 1px -1px 2px #fff; }

.inst-box .banners .thumb {position: relative;overflow: hidden;background: #fff;width:100%;}
.inst-box .banners .thumb .bg{position: absolute;transition: all 0.3s ease-out; width:100%; left:0;top:0;right:0;bottom:0; background-size:cover !important; z-index:1; border-radius:1rem;}
.inst-box .banners .thumb img{width:100%;}
.inst-box .banners img{max-height:4rem;max-width:95%;transition: all 0.3s ease-out; }
.inst-box .banners div{}

.inst-box .banners div:hover img{transform:  scale(1.05)}



@media (min-width: 1200px) {
 .inst-box .tabs > div {width:14.2%;}
}

.inst-movie{ width:100%; max-width:1250px; padding:3rem 0; margin:0 auto; }
.inst-movie .tabs .tab {position: relative; z-index:1;border:1px solid #f7f7f7;text-align: center;}
.inst-movie .tabs .tab:after{ content:"";display: block;position: absolute;left:0;top:0;right:0;bottom:0; z-index:0;}
.inst-movie .tabs .thumb {position: relative;overflow: hidden;background: #fff;width:100%;height:100%;}
.inst-movie .tabs .thumb .bg{position: absolute;transition: all 0.3s ease-out; width:100%; height:100%; left:0;top:0;right:0;bottom:0; background-size:cover !important; z-index:1; }
.inst-movie .tabs .thumb img{width:100%;}
.inst-movie .tabs .tit{    background: #f7f7f7;font-size:1.4rem; line-height:2.8rem; height:2.8rem; text-align:center; display: block;  }
.inst-movie .tabs > div.on .tit ,  .tabs > div:hover .tit{ color: #121212; font-weight:700;  }
.inst-movie .tabs > div.on .inf, .inst-movie .tabs > div:hover .inf{ color: #121212; font-weight:400;  }
.inst-movie .tabs > div.on .thumb .bg,  .inst-movie .tabs > div:hover .thumb .bg{  opacity:0.8; transform:  scale(1.05)}
.inst-movie .tabs > div.on .thumb ,  .inst-movie .tabs > div:hover .thumb { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff , -1px 1px 2px #fff , 1px -1px 2px #fff; }
.inst-movie  .swiper-button-next, .inst-movie  .swiper-button-prev {
    width: calc(var(--swiper-navigation-size)/ 44 * 20);
    height: var(--swiper-navigation-size);
    color: #fff;
}



.benefit-box{ background:#fff;padding:3rem 0 1rem 0; }

.benefit-box .tabs{width:100%; max-width:1250px;margin:0 auto;}
.benefit-box .tabs .tab {position: relative; margin:0 auto; z-index:1; text-align: center; width:90%; border:1px solid #dfdfdf;border-radius:0.5rem;overflow:hidden;}
.benefit-box .tabs .thumb {position: relative;overflow: hidden;background: #fff;width:100%;height:100%;}
.benefit-box .tabs .thumb .bg{position: absolute;transition: all 0.3s ease-out; width:100%; height:100%; left:0;top:0;right:0;bottom:0; background-size:60% !important; z-index:1; }
.benefit-box .tabs .thumb img{width:90%;}
.benefit-box .tabs .tit{ font-size:1.4rem; line-height:2.2rem; height:2.2rem; text-align:center; display: block; border-radius: 0.5rem; }
.benefit-box .tabs .info{ font-size:1rem; line-height:2rem; height:2rem; text-align:center; display: block;  margin-bottom:2rem; }

.benefit-box .tabs > div.on .tit ,  .tabs > div:hover .tit{ color: #121212; font-weight:700;  }
.benefit-box .tabs > div.on .inf, .benefit-box .tabs > div:hover .inf{ color: #121212; font-weight:400;  }
.benefit-box .tabs > div.on .thumb .bg,  .benefit-box .tabs > div:hover .thumb .bg{  opacity:0.8; transform:  scale(1.1)}
.benefit-box .tabs > div.on .thumb ,  .benefit-box .tabs > div:hover .thumb { text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff , -1px 1px 2px #fff , 1px -1px 2px #fff; }


.maingal-box{ width:100%; max-width:1250px; padding:3rem 0; margin:0 auto; }
.maingal-box .gallery-tab{ font-size: 0;line-height:0;text-align:center; overflow:hidden;}
.maingal-box .gallery-tab li{display: inline-block; padding:0;line-height:0%; }
.maingal-box .gallery-tab li span{display: inline-block; width:60%;  border-bottom:2px solid #ffffff; height:0;line-height:0;padding:0;margin:0;}
.maingal-box .gallery-tab li a{ font-size:1.2rem; color: #565656; padding:0px 1rem 0px 1rem;font-weight:300;}
.maingal-box .gallery-tab li:hover a,
.maingal-box .gallery-tab li.on a{ color: #FF0000; font-weight:700;}
.maingal-box .gallery-tab li:hover span,
.maingal-box .gallery-tab li.on  span{border-bottom:2px solid #ff0000;}

.maingal-box .gallery-contents > div{transition: all 1s ease-out;}
.maingal-box .gallery-contents > div:not(.on){/*display:none; */}
.maingal-box .gallery-contents .cate{ font-size:1rem; line-height:2.5rem; height:2.5rem; background: #f7f7f7; text-align:center; display: block;white-space: nowrap;word-break: keep-all;overflow: hidden; text-overflow: ellipsis;}
.maingal-box .gallery-contents .tit{ font-size:1rem; line-height:2.5rem; height:2.5rem; padding:0 0.5rem; text-align:center; display: block; white-space: nowrap;word-break: keep-all;overflow: hidden; text-overflow: ellipsis;}
.maingal-box .gallery-contents .gall-img {position: relative;overflow: hidden;background: #fff;width:100%;border-radius:0rem;}
.maingal-box .gallery-contents .gall-img img{width:100%;}
.maingal-box .gallery-contents .gall-img .is-image{position: absolute;transition: all 0.3s ease-out; width:100%; left:0;top:0;right:0;bottom:0; background-size:cover !important; z-index:1; }

.maingal-box .gallery-contents .gall-con{ color: #121212; font-weight:700; border-radius: 0.5rem; overflow: hidden;}

.maingal-box .gallery-contents .gall-con:hover .tit,
.maingal-box .gallery-contents .gall-con:hover .cate{ color: #121212; font-weight:700;  }
.maingal-box .gallery-contents .gall-con:hover .inf	{ color: #121212; font-weight:400;  }
.maingal-box .gallery-contents .gall-con:hover .gall-img .is-image{  opacity:0.8; transform:  scale(1.05)}

.maingal-box .swiper-button-next,
.maingal-box .swiper-button-prev{color:#fff; text-shadow: 0 .125rem .25rem rgba(0,0,0,.085)!important;}
.maingal-box .swiper-button-next{right:20px;}
.maingal-box .swiper-button-prev{left:20px;}
.maingal-box .bg1{background:#DAAA71; font-size:1.1rem;font-weight:600;}
.maingal-box .bg2{background:#93AFD7;font-size:1.1rem;font-weight:600;}
.maingal-box .bg3{background:#91C186;font-size:1.1rem;font-weight:600;}
.maingal-box .bg4{background:#CCD5A4;font-size:1.1rem;font-weight:600;}





