@charset "UTF-8";

:root {
  --cursor-size: 10px;
  --cursor-bg: rgba(0,0,0,.50);
  --cursor-text-color: #fff;
  --cursor-font-size: 0;
}

.main-visual {position:relative; overflow:hidden;}
.main-visual .item {height:100vh; position: relative; z-index:1;}
.main-visual .item .background {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; width:100%; color:#fff; padding:0 6rem; text-align:center; transform:translateY(-50%); z-index:50;}
.main-visual .content .inner {max-width:1800px;}
.main-visual .content .tit {font-size:80px; line-height:1.3em; font-weight:800; margin-bottom:10px;}
.main-visual .content p {font-size:24px; line-height:1.6em; font-weight:500;}

.main-visual .controler-wrap {position:absolute; bottom:60px; left:0; width:100%; z-index:2; }
.main-visual .controler-wrap .inner {display:flex; align-items:center; max-width:1800px;}
.main-visual .slide-btns {width:11px;height:12px; font-size:0; line-height:0; border:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; z-index:50}
.main-visual .slide-prev {margin-right:20px;background-image:url('../img/main/slide_prev.png');}
.main-visual .slide-next {margin-left:20px;background-image:url('../img/main/slide_next.png');}
.main-visual .slide-btns:hover {opacity:1;}
.main-visual .slide-btns:focus {outline:0}
.main-visual .controler {margin-right:40px;}
.main-visual .controler {width:75px; height:75px; margin-right:40px; position:relative;}
.main-visual .controler .slick-playback {position:absolute; top:0; left:0; width:75px; height:75px;  text-indent:-9999em; border:0; border-radius:100%;  background-color:transparent; z-index:5}
.main-visual .controler .slick-playback:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; background:url('/html/_skin/img/main/bt_pause.png') 50% 50% no-repeat;}
.main-visual .controler .slick-playback.play:after {background-image:url('/html/_skin/img/main/bt_play.png')}
.main-visual .controler .slick-playback:focus {outline:0}
.main-visual .controler .slider-progress {position:absolute;}
.main-visual .controler .slider-progress:after {content:""; position:absolute; top:0; left:0; width:75px; height:75px; border:4px solid #fff; border-radius:100%; opacity:.2;}
.main-visual .controler .slick-progress circle {fill: transparent; stroke: #fff;stroke-width: 4; }
.main-visual .controler .slider-play {display:none}
.main-visual .controler .slider-pause,
.main-visual .controler .slider-play {position:relative; width:75px; height:75px;  text-indent:-9999em; border:0; border-radius:100%;  background-repeat:no-repeat; background-position:50% 50%; background-color:transparent; z-index:5}
.main-visual .controler .slider-play:after,
.main-visual .controler .slider-pause:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%;  border: 4px solid #fff; opacity:.3;}
.main-visual .controler .slider-pause .circle {position:absolute; top:0; left:0; width:100%; height:100%; stroke-dasharray: 500; stroke-dashoffset: 500; transform: rotate(-90deg); animation: ani 9s linear infinite;}
.main-visual .controler .slider-play {background-image:url('../img/main/bt_play.png')}
.main-visual .controler .slider-pause {background-image:url('../img/main/bt_pause.png')}
.main-visual .controler .slider-pause:focus,
.main-visual .controler .slider-play:focus {outline:0}
.main-visual .slick-counter {display:flex; align-items: center; color:#fff; z-index:6;}
.main-visual .slick-counter .current-wrap {font-weight:700;}
.main-visual .slick-counter .bar {padding:0 6px;}

.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;}

@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:45px; 
	left:50%;  
	width:75px; 
	height:48px;
    transform: translateX(-50%);
	text-indent:-9999em;
	text-align:center;
	background:url('../img/main/scrolldown.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:45px;}to{bottom:55px;}}


.main-title {margin-bottom: 30px;}
.main-title h2 {color:#222; font-size:60px; line-height:1.4em; font-weight: 700; margin-bottom:10px;}
.main-title .cnt {font-size:24px; line-height:1.4em; color:#222;}

.main-business {height: calc(100vh - 20px); margin-bottom:20px; display:flex; align-items: flex-end; justify-content: center;}
.main-business .wrap {width:100%;}
.main-business .inner {max-width:1800px;}
.main-business .biz-layout {display:flex; overflow:hidden; padding:0 5px;}
.main-business .biz-item {flex:1; will-change: flex; padding:0 5px; transition: all 0.6s ease;  position: relative; cursor: none;}
.main-business .biz-item .content {position:relative; border-radius: 30px; height:800px; overflow:hidden;}
.main-business .biz-item .bg-video {position:absolute; top:0; left:0; width:100%; height:100%; transition: left 0.6s ease; opacity:0;}
.main-business .biz-item .bg-video .video {position:absolute; top:50%; left:0; height:100%; transform:translate(0,-50%); object-fit: cover;}
.main-business .biz-item .bg-video:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:100%; background:linear-gradient(-180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .60) 80%); z-index:10}
.main-business .biz-item .cover {position:absolute; top:0; left:0; width:100%; height: 100%; transition: all 0.6s ease;}
.main-business .biz-item .cover img {width:100%; height:100%; object-fit: cover;}
.main-business .biz-item .text-box {position:absolute; bottom:20px; left:0; padding:0 20px 0 60px; z-index:20; transition: all 0.6s ease; }
.main-business .biz-item .text-box h3 {font-size:35px; line-height:1.4em;font-weight: 700; color:#fff; transition: all 0.6s ease; }
.main-business .biz-item .text-box ul {display:flex; transition: all 0.6s ease; opacity:0; margin-left:-10px;}
.main-business .biz-item .text-box ul li {margin-left:10px;}
.main-business .biz-item .text-box ul li a {cursor: none; position:relative; transition: all 0.6s ease; padding:0 26px; font-size:20px; line-height:1.4em; font-weight: 600; color:#fff; border:1px solid rgba(255,255,255,.90); height: 50px; border-radius: 50px; display:inline-flex; align-items: center; justify-content: center; background:rgba(0,0,0,.40);}
.main-business .biz-item .text-box ul li a:after {content:""; position:absolute; top:0; right:26px; width:14px; height:100%; background:url('../img/main/business_more.png') 50% 50% no-repeat; transition: all 0.6s ease; opacity:0;}
.main-business .biz-item .text-box ul li a:hover {padding:0 70px 0 26px; background:rgba(0,0,0,.60); border-color:#fff;}

.main-business .biz-item.hover .cover {opacity:0;}
.main-business .biz-item.hover .bg-video {opacity:1;}
.main-business .biz-item.hover .text-box {bottom:78px;}
.main-business .biz-item.hover .text-box h3 {font-size:50px; margin-bottom:20px;}
.main-business .biz-item.hover .text-box ul {opacity:1;}
.main-business .biz-item.hover .text-box ul li a:hover:after {opacity: 1;}

:lang(en) .main-business .biz-item .text-box h3 {font-size:30px;}
:lang(en) .main-business .biz-item .text-box ul li a { font-size:12px;}
:lang(en) .main-business .biz-item.hover .text-box ul li a {font-size:16px;}

@media (max-width: 1920px) {
  .main-business .biz-item .content {height: 600px;}
}

.cursor {position: fixed; top: 0; left: 0; width: 28px; height: 28px; font-size: 0; line-height: 0; display: flex; opacity: 0; align-items: center; justify-content: center; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(1); z-index: 9999; transition: background-color 0.3s, color 0.3s, font-size 0.3s, width 0.3s, height 0.3s, transform 0.15s ease-in-out; text-transform: uppercase; font-weight: bold; }
.cursor.drag {opacity: 1; background: url('../img/main/ico_plus.png') 50% 50% no-repeat; background-size:contain}

#section2 {background:url('../img/main/why_bg.jpg') 50% 50% no-repeat; background-size:cover;}

.main-why {color:#fff; height: 100vh; display:flex; align-items: center; justify-content: center;}
.main-why .main-title {text-align:center;}
.main-why .main-title h2 {font-size:80px; color:#fff;}
.main-why .main-title .cnt {color:#fff;}
.main-why .number-box {margin-bottom:60px; display:flex; justify-content: center;}
.main-why .number-box .item {position: relative; margin:0 50px; max-width:240px; width:100%; text-align:center; padding-bottom:20px;}
.main-why .number-box .item .tit {font-size:22px; line-height:1.4em; font-weight: 500; margin-bottom:16px;}
.main-why .number-box .item .num {font-size:60px; line-height:1.4em; font-weight: 800;}
.main-why .number-box .item:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#fff; opacity:.60;}
.main-why .content ul {display:flex; margin-left:-25px;}
.main-why .content ul li {position: relative; width:calc(33.333333% - 25px); margin-left:25px; background:rgba(0,0,0,.90); border-radius: 20px; padding: 40px; transition: all 0.6s ease;}
.main-why .content ul li .ico {position:absolute; top:40px; right:40px;}
.main-why .content ul li dl dt {font-size:24px; line-height:1.4em; font-weight: 700; margin-bottom: 22px;}
.main-why .content ul li dl dd {font-size:18px; line-height:1.67em; opacity:.80;}
.main-why .content ul li:hover {background:#1d2088}

#section3 {background:url('../img/main/contact_bg.jpg') 50% 50% no-repeat; background-size:cover;}
.main-contact {text-align:center; height:calc(100vh - 332px); display:flex; align-items: center; justify-content: center;}
.main-contact .main-title {text-align:center; margin-bottom:60px;}
.main-contact .main-title h2 {color:#fff;}
.main-contact .main-title .cnt {font-size:40px; color:#fff; line-height:1.2em;}
.main-contact .more {display:inline-flex; align-items: center; justify-content: center; height:60px; width:180px; background:#1d2088; border-radius: 60px; color:#fff; font-size:18px; line-height:1.4em; font-weight: 700;}
.main-contact .more:after {content:""; display:inline-flex; align-items: center; width:14px; height:100%; background:url('../img/main/more.png') 50% 50% no-repeat; margin-left:10px;}
.main-contact .more:hover {background:#000;}

#mainfooter {position: absolute; bottom: 0; left:0; width:100%;}

#fp-nav.right {right:82px}
#fp-nav ul li, .fp-slidesNav ul li {width:10px; height:10px; margin:14px 0;}
#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:10px; height: 10px; margin:0;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {width:10px; height: 10px; background:#fff; margin:0;;}