@charset "UTF-8";


.main-visual {position:relative; height:100vh; overflow:hidden;}
.main-visual  #myVideo{position: absolute;bottom: 0;top:0;right:0;width: 100%;height: 100%;background-size: 100% 100%;background-color: black;object-fit: cover;z-index:3;}
.main-visual .content {position:absolute; top:50%; left:0; width:100%;  z-index:10; color:#fff; transform: translateY(-50%);}
.main-visual .content .tit {font-size:104px; line-height:1.4em; font-weight: 700; margin-bottom:20px;}
.main-visual .content .txt {font-size:36px; line-height:1.5em; opacity:.80;}
.top-scroll {position:absolute; bottom:75px; left:50px;  z-index:10;}
.top-scroll .circle {position:relative; width:141px; height:141px; background:url('../img/main/scroll.png') 50% 50% no-repeat; background-size:contain; animation: mainRotate 7s infinite linear; border-radius: 100%; display: flex;align-items: center; justify-content: center;}
.top-scroll .down {position:absolute; top:50%; left:50%; width:15px; height:31px; background:url('../img/main/scroll_arrow.png') 50% 50% no-repeat; background-size:contain;  transform:translate(-50%,-50%); animation: mainDown.9s linear infinite alternate;}

@keyframes mainRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes mainDown {
	from {
		top:45%;
	}
	to{
		top:55%;
	}
}



.main-weare {background:url('../img/main/weare_bg.jpg') 50% 50% no-repeat; background-size:cover; padding:220px 0 510px;}
.main-weare .title {display:flex; align-items: center; margin-bottom:165px;}
.main-weare .title h2 {font-size:88px; line-height:1.4em; font-weight: 700; color:#151515; margin-right:120px;}
.main-weare .title p {font-size:28px; line-height:1.43em;}
.main-weare .title p strong {font-weight: 700;}
.main-weare ul {display:flex;}
.main-weare ul li {width:25%; position: relative; padding:0 10px; text-align: center;}
.main-weare ul li:after {content:""; position: absolute; top:50%; left:0; width:1px; height:88px; background:#ccc; margin-top:-44px; z-index:3;}
.main-weare ul li:first-child:after {display:none;}
.main-weare ul li .count {font-size:90px; line-height:1.3em; font-weight: 700; margin-bottom:30px;}
.main-weare ul li p {font-size:26px; line-height:1.4em; font-weight: 700;}

.main-title {margin-bottom: 60px;}
.main-title h2 {font-size:60px; line-height:1.4em; font-weight: 700; margin-bottom:16px;}
.main-title p {font-size:26px; line-height:1.4em;}

.main-what {margin-bottom: 200px;}
.main-what .slick-list {overflow: visible; margin:0 -50px;}
.main-what li {margin:0 50px; opacity:.50;}
.main-what li a {position: relative;}
.main-what li.slick-current {opacity:1;}
.main-what li.slick-current .content {opacity:1;}
.main-what .thumb {position:relative; height:0; padding-bottom:33%; border-radius: 40px; overflow:hidden;}
.main-what .thumb img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.main-what .content {opacity:0;position:absolute; top:50%; left:0; color:#fff; width:100%; transform:translateY(-50%); padding-left:110px; z-index:2; }
.main-what .content h3 {opacity: 0; font-size:40px; line-height:1.4em; font-weight: 700; margin-bottom:12px; transform: translateX(-100px); transition: all .6s ease .1s; }
.main-what .content p {opacity: 0; font-size:22px ;line-height:1.36em; opacity:.80; margin-bottom:20px; transform: translateX(-100px); transition: all .6s ease .3s;}
.main-what .content .more {transition: all .6s ease .5s; opacity: 0; transform: translateX(-100px); width:175px; height:50px; position: relative; border:1px solid rgba(255,255,255,.70); display:flex; align-items: center; padding:0 24px; font-size:14px; line-height:1.4em; font-weight: 300;}
.main-what .content .more:after {content:""; position: absolute; top:0; right:24px; width:42px; height: 100%; background:url('../img/main/more.png') 50% 50% no-repeat; background-size:contain;}
.main-what .slick-arrow {position: absolute; top:50%; transform:translateY(-50%); width:78px; height:78px; border-radius: 100%; background-color:#1b1b1b; background-position: 50% 50%; background-repeat: no-repeat; z-index:10; transition: .3s;}
.main-what .slick-arrow:before {display:none;}
.main-what .slick-arrow.slick-prev {left:-37px; background-image:url('../img/main/slide_prev.png');} 
.main-what .slick-arrow.slick-next {right:-37px; background-image:url('../img/main/slide_next.png');} 
.main-what .slick-arrow:hover {background-color:#437abe;}
.main-what .slick-dots {bottom:auto; top:-140px; right:0; display:flex; width:auto;}
.main-what .slick-dots li {width:auto; height: auto; margin:0 8px;}
.main-what .slick-dots li button {width:11px; height:11px; background:#e5e8ee; border-radius: 100%;}
.main-what .slick-dots li.slick-active button {background:#034ea2}
.main-what li.slick-current .content h3,
.main-what li.slick-current .content p,
.main-what li.slick-current .content .more {opacity:1; transform: translateX(0);}



.main-core {margin-bottom: 180px;}
.main-core .inner {position: relative;}
.main-core .more {position: absolute; top:70px; right: 20px; width:175px; height:50px; color:#151515; border:1px solid rgba(21,21,21,.70); display:flex; align-items: center; padding:0 24px; font-size:14px; line-height:1.4em; font-weight: 300;}
.main-core .more:after {content:""; position: absolute; top:0; right:24px; width:42px; height: 100%; background:url('../img/main/more_b.png') 50% 50% no-repeat; background-size:contain;}
.main-core ul {display:flex; margin-left:-50px;}
.main-core ul li {position: relative; width:calc(50% - 50px); margin-left:50px; border-radius: 40px; height: 512px; display:flex; align-items: flex-end; padding: 96px 88px; overflow:hidden; background-size:cover; background-position:0 0; background-repeat: no-repeat;}
.main-core ul li:nth-child(1) {background-image:url('../img/main/core1_bg.jpg');}
.main-core ul li:nth-child(2) {background-image:url('../img/main/core2_bg.jpg');}
.main-core ul li dl {color:#fff;}
.main-core ul li dl dt {font-size:42px; line-height:1.4em; font-weight: 700; margin-bottom:20px;}
.main-core ul li dl dd {position: relative; padding-left: 28px; font-size:20px; line-height:1.8em; font-weight: 700;}
.main-core ul li dl dd::before {content:""; position: absolute; top:13px; left:0; width:8px; height: 8px; border-radius: 100%; background:#fff;}
.main-core ul li .ico {position: absolute; top:60px; right:60px;}

.main-networks {text-align: center; background:url('../img/main/net_bg.jpg') 100% 50% no-repeat; background-size:cover; padding:150px 0 180px;}
.main-networks .group {margin-bottom: 230px;}
.main-networks .group:last-child {margin-bottom:0;}
.main-networks .title {margin-bottom: 50px;}
.main-networks .title h2 {font-size:26px; line-height:1.4em; font-weight: 700; color:#a2cbfd;  margin-bottom:30px;}
.main-networks .title p {font-size:43px; line-height:1.4em; font-weight: 700;color:#fff;}
.main-networks ul {display:flex; justify-content: center; margin:0 -60px;}
.main-networks ul li {position: relative; padding:0 60px;}
.main-networks ul li:after {content:""; position: absolute; top:50%; left:0; width:1px; height:88px; margin-top:-44px; background:#fff; opacity:.36;}
.main-networks ul li:first-child:after {display:none;}
.main-networks ul li .ico {margin-bottom:20px;}
.main-networks ul li p {font-size:24px; line-height:1.4em; font-weight: 700; color:#fff;}
.main-networks .box {background:rgba(67,122,190,.6); border-radius:30px; padding: 185px 50px; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);}
.main-networks .box .title h2 {color:#fff;}
.main-networks .box .more {display:inline-flex; align-items: center; height:60px; padding:0 106px; background:#1b1b1b; border-radius: 10px; color:#fff; font-size:18px; line-height:1.4em;}
.main-networks .box .more:hover {background:#034ea2;}