@charset "UTF-8";

.main-visual {position:relative; overflow:hidden;}
.main-visual .item {height:100vh; position: relative;}
.main-visual .item .background-image {position:absolute;  top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity: 1 !important; animation-duration: 3s; transition: all 1s ease;}
.main-visual .content {position:absolute; top:50%; left:0; transform:translateY(-80%); width:100%; color:#fff;  z-index:50;}
.main-visual .content p {font-size:24px; line-height:1.3em; opacity:.80;}
.main-visual .content .txt {font-size:33px;line-height:1.3em; font-weight:600; padding:10px 0;}
.main-visual .content h2 {font-size:70px; line-height:1.3em; font-weight:700; margin-bottom:10px;}
.main-visual .slick-dots {position:absolute; bottom:20rem; display:flex; left:50%; margin-left:-700px; width:1400px; z-index:10}
.main-visual .slick-dots li {width:10px; height:10px; margin-right:10px; }
.main-visual .slick-dots li button {background:#fff; border:0; width:10px; height:10px; font-size:0; opacity:.46; border-radius:100%;}
.main-visual .slick-dots li.slick-active button {opacity:1;}
.animated {transition: all .5s ease;}
.main-visual [data-animation-in] {opacity: 0;animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;transition:1s;}


 /* intro 영상 */
 .main-visual .item.video:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    -moz-transition: ease 0.2s;
    -o-transition: ease 0.2s;
    -webkit-transition: ease 0.2s;
    transition: ease 0.2s;
    z-index: 2;
}

.main-visual .item.video.ready:before {
    /*opacity: 1;*/
}

/*  video */
.ready .main_video_area {
    opacity: 0;
}

.main_video_area {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.main_video_area video {
    position: absolute;
    /* 화면을 다 채울때 //짤립주의 */
    width: 100%;
    height: 100vh;
    object-fit: cover; 
    /*
    height: 100%;
    width: 100%;*/
    /*opacity: 0; */
    pointer-events: none;
}

.main-visual .item.video.slick-current .main_video_area video {
    opacity: 1 !important;
    -moz-transition: opacity 0.3s 1s;
    -o-transition: opacity 0.3s 1s;
    -webkit-transition: opacity 0.3s 1s;
    transition: opacity 0.3s 1s;
}
.main-visual .item.video {
    background-color: #000;
} 


@keyframes zoomInImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
  to {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
}
.zoomInImage {animation-name: zoomInImage;}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
}
.zoomOutImage {animation-name: zoomOutImage;transition:1s;}



.scroll {
	position:absolute; 
	bottom:50px; 
	left:60px;  
	width:8px; 
	height:86px;
	text-indent:-9999em;
	text-align:center;
	background:url('/html/_skin/img/main/scroll.png') 50% 100% no-repeat;
	background-size:contain;
	z-index:10;
	-webkit-animation: mainScroll .9s linear infinite alternate;
    -moz-animation: mainScroll .9s linear infinite alternate;
    -o-animation: mainScroll .9s linear infinite alternate;
    -ms-animation: mainScroll .9s linear infinite alternate;
    animation: mainScroll .9s linear infinite alternate;
	 
}

@keyframes mainScroll {from{bottom:50px;}to{bottom:55px;}}


#seciton1 {background:#3b86ab;}
#seciton1.active .main-business .left-slider ul li {animation: imagemove 22s linear infinite;}
#seciton1.active .main-business .right-slider ul li {animation: imagemove2 22s linear infinite;}

.main-business {display:flex; height:100vh}
.main-business .inner {flex:1 1 auto; min-width:0; width:1%; color:#fff; display:flex; height:100vh; align-items:center;}
.main-business .text-box {position:relative; max-width:680px; width:100%; margin:0 auto;}
.main-business .emblem {position:absolute; top:-3rem; opacity:0; right:-20rem; z-index:1; transition: all 0.7s ease-out;}
.main-business .emblem img {opacity:.5; transition: all 2s ease-out; transform: scale(1.4,1.4);}
.main-business .more {position:absolute; bottom:-7rem; left:-7.5rem; width:188px; height:188px; border-radius:100%; border:1px solid rgba(255,255,255,.30); transition: all 0.3s ease-out; z-index:0;}
.main-business .more span {position:absolute; top:50%; left:50%; width:25px; height:25px; transform:translate(-50%,-50%);}
.main-business .more span:before,
.main-business .more span:after {content:""; position:absolute; background:#fff; transition: all 0.3s ease-out;}
.main-business .more span:before {top:0; left:50%; width:2px; height:100%; margin-left:-1px;}
.main-business .more span:after {top:50%; left:0; width:100%; height:2px; margin-top:-1px;}
.main-business .more:hover {border-color:rgba(255,255,255,.80);}
.main-business .more:hover span:before,
.main-business .more:hover span:after {transform:rotate(180deg);}
.main-business .slider {width:407px; position:relative; overflow:hidden;}
.main-business .slider ul {position:absolute; top:0; left:0; width:100%; height:4000px;}
.main-business .slider ul li {margin-bottom:35px;}
.main-business .slider ul li img {opacity:.90;}
.section.active .main-business .emblem {opacity:1;right:-1.4rem;}
.section.active .main-business .emblem img {transform: scale(1.0,1.0);}




@keyframes imagemove {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(-550%);
  }
}

@keyframes imagemove2 {
  0% {
      transform: translateY(-550%);
  }
  100% {
      transform: translateY(0);
  }
}

.main-title {position:relative; z-index:10;}
.main-title em {font-style:normal; font-size:14px; line-height:1.4em; margin-bottom:40px;}
.main-title em span {color:#74cee2}
.main-title h2 {font-size:70px; line-height:1.14em; font-weight:800; font-family: "Wanted Sans", sans-serif; margin-bottom:40px; letter-spacing:-.05em;}
.main-title .cnt {font-size:20px; line-height:1.7em;}

.main-trade {position:relative; height:100vh; text-align:center; padding-top:250px;}
.main-trade .main-title {padding:0 20px;}
.main-trade .main-title .tit {display:inline-block; text-align:left;}
.main-trade .main-title em {color:#74cee2; text-align:left; padding-left:11rem;}
.main-trade .main-title em span {color:#1b1b1b}
.main-trade .main-title h2 {color:#1b1b1b; text-align:center;}
.main-trade .main-title img {display:inline-block; vertical-align:middle; margin:0 10px;}
.main-trade .main-title .cnt {color:#1b1b1b; opacity:.70; display:inline-block; text-align:left;}
.main-trade .image {position:absolute; bottom:0; left:0; width:100%; height:480px; background:url('../img/main/ex_bg.jpg') 50% 50% no-repeat; background-size:cover;}



.scrolldown {position:absolute; top:-10rem; right:20rem; width:188px; height:188px; box-shadow:10px 10px 10px rgba(0,0,0,.10); border-radius:100%; border:1px solid #74cee2; transition: all 0.3s ease-out; z-index:-9999; opacity:0;}
.scrolldown span {position:absolute; top:50%; left:50%; width:25px; height:25px; transform:translate(-50%,-50%);}
.scrolldown span:before,
.scrolldown span:after {content:""; position:absolute; background:#74cee2; transition: all 0.3s ease-out;}
.scrolldown span:before {top:0; left:50%; width:2px; height:100%; margin-left:-1px;}
.scrolldown span:after {top:50%; left:0; width:100%; height:2px; margin-top:-1px;}
.scrolldown:before {content:"";position:absolute; top:0; left:0; width:100%; height:100%;  border-radius:100%; backdrop-filter: blur(2px); z-index:0}  
.scrolldown:hover span:before,
.scrolldown:hover span:after {transform:rotate(180deg);}


@media (max-width: 1920px) {
	
	.main-trade {padding-top:150px;}
	.main-trade .image {height:335px;}
	.scrolldown {right:10rem;}
}

.fp-viewing-Trade .sitelogo a {background-image:url('../img/common/logo.png') !important;}
.fp-viewing-Trade .btn-m-menu span {background:#1b1b1b;}
.fp-viewing-Trade .btn-m-menu span:before,
.fp-viewing-Trade .btn-m-menu span:after {background:#1b1b1b;}
.fp-viewing-Trade .scrolldown {opacity:1; z-index:10;}

#fp-nav.right {right:60px;}
#fp-nav ul li, .fp-slidesNav ul li {width:6px; height:6px;  margin:20px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {width:6px; height:6px; background:#bfbfbf; margin:-3px 0 0 -3px;}
#fp-nav ul li:last-child {display:none;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {width:15px; height:15px; background:url('../img/main/menu_on.png') 50% 50% no-repeat; border-radius:auto; margin:-7.5px 0 0 -7.5px;}