﻿

.wrap{text-align:center;}
.section{text-align:center; } 
.txt{margin-top:-100px;}
.none{display:none;}
  
/* 메인 아이콘 */
.section .main-icon{
	position:relative;
	z-index:1;  
	text-align:center;
}
.section .main-icon a{
	display:inline-block;
	color:#fff; 
	font-size:1.2rem;
	margin:0 40px;
	font-weight:300;
	text-align:center;
}
.section .main-icon a span{margin-top: -80px; position: relative; z-index:1; font-size: 1.1rem;}
.section .main-icon img{
	display:block;
	margin:0 auto 20px;
	opacity:1;
	transition:all .6s;
}
.section .main-icon img:hover{opacity:0.8;}


.section .main-icon2{
	position:relative;
	z-index:1;  
	text-align:left;
}
.section .main-icon2 a{
	display:inline-block;
	color:#fff; 
	font-size:1.2rem;
	margin-right:40px;
	font-weight:300;
	text-align:center;
}
.section .main-icon2 img{
	display:block;
	margin:0 auto 20px;
}


.video-bg:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.2);
}

/* scroll mouse */
#mouse-scroll {
  style: block; 
}
#mouse-scroll p{color:#fff; font-size:14px; text-align:center; letter-spacing:1px; margin-left: -18px;}
#mouse-scroll {
  position: absolute;
  margin: auto;
  left: 50%; 
  bottom: 50px;
  -webkit-transform: translateX(-50%);
  z-index: 9999;
}
#mouse-scroll span{
  display: block;
  width: 10px; 
  height: 10px;
  -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
       transform: rotate(45deg);
       transform: rotate(45deg);
  border-right: 2px solid #fff; 
  border-bottom: 2px solid #fff;
  margin: 0 0 0 7px;
}
#mouse-scroll .mouse {
  height: 41px;
  width: 24px;
  border-radius: 10px;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  border: 2px solid #ffffff;
  top: 170px; 
}
#mouse-scroll .down-arrow-1 {
  margin-top: 6px;
}
#mouse-scroll .down-arrow-1, #mouse-scroll .down-arrow-2, #mouse-scroll .down-arrow-3 {
  -webkit-animation: mouse-scroll 1s infinite; 
    -moz-animation: mouse-scroll 1s infinite:
}
#mouse-croll .down-arrow-1 {
   -webkit-animation-delay: .1s; 
   -moz-animation-delay: .1s;
   -webkit-animation-direction: alternate;
}
#mouse-scroll .down-arrow-2 {
  -webkit-animation-delay: .2s; 
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
}
#mouse-scroll .down-arrow-3 {
   -webkit-animation-delay: .3s;
   -moz-animation-dekay: .3s;
   -webkit-animation-direction: alternate;
}
#mouse-scroll .mouse-in {
  height: 7px;
  width: 2px;
  display: block; 
  margin: 5px auto;
  background: #ffffff;
  position: relative;
}
#mouse-scroll .mouse-in {
 -webkit-animation: animated-mouse 1.2s ease infinite;
  moz-animation: mouse-animated 1.2s ease infinite;
}

@-webkit-keyframes animated-mouse {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
     opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-webkit-keyframes mouse-scroll {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  } 
}
@keyframes mouse-scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}


/* animation 효과 */
.frame { 
  position:relative; 
  text-align:center;
}
.frame .item { 
  position:absolute;
  top:0;
  left:0;
  width:100%;
  text-align:center; 
  z-index: 5;
  transition:.5s;
  opacity:0;
}
.frame .item.init {
  opacity:1;
  z-index:10;
}
#frame1{
	height:80px;
}
#frame2{
	height:60px;
	margin-top: 120px;
}
#frame1 .item.on {
  opacity:1;
  z-index:10;
  animation:fadeInUp .5s linear;
}

#frame2 .item.on {
  opacity:1;
  z-index:10;
  animation:fadeInUp 1s linear;
}

 
@keyframes fadeInUp {
  0% {
	 top:20px;
  }
  100% {
	 top:0px;
  }
}

.four .main-more{margin:0 0 40px;}
.four .main-more a{color:#fff; font-size:1.1rem;} 

.box-outer{position: relative; display: inline-block; width: 100px; height: 100px;  bottom: -43px;
    left: -60px;}
.box-outer .square{position:absolute;top: 0; left: 0; opacity: 0.5; display:inline-block;width:100px;height:100px; z-index: 100}
.line-right,.line-left{display: inline-block; width:8px;height:0;background:#fff;position:absolute;z-index:1}
.line-top,.line-bottom{display: inline-block;height:8px;width:0;background:#fff;position:absolute;z-index:1}
.line-top{left:0;top:0}
.line-right{top:0;right:0}
.line-bottom{right:0;bottom:0}
.line-left{bottom:0;left:0} 
.active .line-top {transition:width 0.3s ease-out 1s;width:100%}
.active .line-right{transition:height 0.3s ease-out 1.3s;height:100%}
.active .line-bottom{transition:width 0.3s ease-out 1.6s;width:100%}
.active .line-left{transition:height 0.3s ease-out 1.9s;height:30%}

/* title 효과 */
.section .title{
	position:relative;
	z-index:2;  
	margin-top:50px;
}
.section .title h1 {  
  font-size: 68px;
  height: 80px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing:-0.3rem;
  overflow: hidden;
  line-height: 4;
  -webkit-transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  text-align: center;
  color:#fff;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
  padding-top: 5px;
  margin: 0 0 0.67em 0;
}
.section .title h2 { 
  font-size: 22px;
  height: 70px;
  overflow: hidden;
  line-height: 7.5;
  -webkit-transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  margin-bottom:50px;
  transition: line-height 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  text-align: center;
  color:#fff;
  font-weight:200;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
}
.section .title h2.sn { 
  margin-bottom:0px;
}

.section .title h1 {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.section .title h2 {
  margin-top: -6px;
  font-weight: 300;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
		  opacity:0;
		  letter-spacing: -0.05rem;
}
 
.section.active h1 {
  line-height: 1;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}
.section.active h2 {
  line-height: 1.4;
  -webkit-transition-delay: .8s;
          transition-delay: .8s; 
		  opacity:1;
}
 

/* video */
#video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  max-width:none;
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: 0;
  background-size:cover;
}
@media (max-width:1000px){
	.g10025{ margin-left:-50% !important;
	top:15% !important;}

	.section .title h2{line-height:1.4;}
}
.trans_back{width:100%; height:100%; position: fixed; top:0; left:0; background:url('/resource/user/ko/img/frame1_bg.jpg') no-repeat center center;  animation : ImgScale 10s ease /*infinite 무한반복 */; transform:scale(1) }
.two{background:url('/resource/user/ko/img/frame2_bg.jpg') no-repeat center center; background-size:cover;}
.three{background:url('/resource/user/ko/img/frame3_bg.jpg') no-repeat center center; background-size:cover;}
.four{background:url('/resource/user/ko/img/3b_c.jpg') no-repeat center top; background-size:cover;} 
 
@keyframes ImgScale {
    0% {
         transform:scale(1.1)
       }
	   /*
   50% { 
         transform:scale(1.1)
       }
	   */
  100% {
         transform:scale(1)
      }
} 
 
   
.ctype-2 .title-bg{background:rgba(106, 188, 59, 0.88); height:100%; width:730px; position:relative; left: 50%; margin-left: -485px;}
.ctype-2 .title{margin-top:0;  position: absolute; top:50%; left: 40px; width:100%;   -webkit-transform: translateY(-50%);  transform: translateY(-50%);   -webkit-box-sizing: border-box;   box-sizing: border-box; }
.ctype-2 .title .counter{font-size:2.4em; letter-spacing:0; font-weight:400; vertical-align:baseline;}


.ctype-2 .title,
.ctype-2 .title h1,
.ctype-2 .title h2{text-align:left !important;  }
.ctype-2 .title h2{height:100px; line-height:1.4; opacity:1;}

.ctype-2 .title h1{height:150px !important; margin: 0.67em 0 0; line-height: 1;}
.ctype-2 .title h1 .sm{font-size:.7em; vertical-align:bottom;}
.ctype-2 .title h1 .md{font-size:.8em; vertical-align:bottom;}

.type_wrap a{font-family:'Roboto','Noto Sans KR', sans-serif}

.mt50{margin-top:50px;}

.main-copy{color:rgba(255,255,255,0.8); position:absolute;  left:50px; bottom:10px; font-size:.8rem; font-weight:200; text-align:left; letter-spacing:0;}

 

.main-news {position:relative; width:1280px; margin:0 auto; overflow:hidden;padding-top: 60px;}
.main-news .sn_bx {background:#fff; border-radius:5px; overflow:hidden; cursor: pointer;}
.main-news .sn_bx .sn_img {width:100%; height:200px; overflow:hidden;}
.main-news .sn_bx .sn_img img {width:100%; height:200px;transform:scale(1); transition:.3s ease-in-out;}
.main-news .sn_bx:hover .sn_img img {width:100%; height:200px;-webkit-transform:scale(1.1); transform:scale(1.1);}
.main-news .sn_bx .sn_tt { padding:10px 15px; width:100%; height:100px; text-align:left;}
.main-news .sn_bx .sn_tt p.sn_tit {font-size:17px; color:#151515; font-weight:500; line-height:20px; letter-spacing:-1px;min-height:65px;}
.main-news .sn_bx .sn_tt p.sn_tit span {display:inline-block; width:6px; height:6px; background:#71bf44; border-radius:3px;vertical-align: super; margin: 3px;}
.main-news .sn_bx .sn_tt p.sn_txt {font-size:14px; color:#555555; margin-top:0px;}
.main-news .swiper-buttons { position: absolute; right: 0; top: 25px;}
.main-news .swiper-buttons .swiper-button-prev, .main-news .swiper-buttons  .swiper-button-next {width:45px; height:45px; color:rgba(255,255,255,0);}
.main-news .swiper-buttons .swiper-button-prev {right:auto; left:-100px; background: url('/resource/user/ko/img/snbtn_prev.png') no-repeat center;}
.main-news .swiper-buttons .swiper-button-next {right:auto; left:-45px; background: url('/resource/user/ko/img/snbtn_next.png') no-repeat center;}
.main-news .swiper-buttons .swiper-button-prev:hover, .main-news .swiper-buttons  .swiper-button-next:hover {opacity:0.5;}

.sn_pop {display:none; position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.4); z-index:102;}
.sn_pop .snp_box {position:absolute; left:50%; top:50%; width:660px; height:660px; margin-left:-330px; margin-top:-330px; background:#fff; padding:20px; border-radius:5px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}
.sn_pop .snp_box .snp_close { cursor: pointer; width:50px; height:50px; background:url('/resource/user/ko/img/snp_close.png') no-repeat center #71bf44; border-radius:5px;    position: absolute; right: -15px; top: -15px;}
.sn_pop .snp_box .snp_content {padding:10px 0 10px 10px;}
.sn_pop .snp_box .snp_content .snp_tit {font-size:24px; font-weight:500; letter-spacing:-1px; color:#151515; line-height:34px; border-bottom:2px solid #151515; margin-bottom:15px; padding-bottom:10px;}
.sn_pop .snp_box .snp_content .snp_txt {height:540px;overflow-y: scroll; font-size:16px; font-weight:300; line-height:28px; letter-spacing:-1px; color:#151515;text-align: justify;white-space: pre-line; padding-right: 5px;}


