@charset "utf-8";

h2 { font-family:'GmarketSans', sans-serif; font-size:7rem; color:#254a9f; margin:17rem 0 0; }
.subTitle {font-size:1.9rem; margin:0 0 5rem; }
@media all and (max-width:1200px){
  h2 {margin:5rem 0 0; }
}
@media all and (max-width:480px){
  h2 {font-size:5rem;}
  .subTitle {display:none;}
}

.visual {position:relative; height:110rem;}
.visual .video { position:relative !important; width:calc(103% - 14rem) !important; height:90rem; overflow:hidden;left: -50px;}
.visual .video video {position:absolute; left:0; top:-5rem; width:100%; }
.visual .txt { position:absolute; right:0; bottom:0; width:60%; min-height:53rem; background:#254a9f; color:#fff; padding:10rem 14rem 0; overflow:hidden;}
.visual .txt .txt1 {font-size:3rem;}
.visual .txt .txt2 { font-family:'GmarketSans', sans-serif; font-size:5rem; font-weight:600; line-height:1.2; margin:3rem 0; }
.visual .txt .txt2 span { color:#ffc600; }
.visual .txt dd { font-weight:200; }
.visual .txt strong {position:absolute; font-family:'GmarketSans', sans-serif; bottom:-13rem; left:6rem; font-size:18rem; font-weight:600; opacity:0.05; white-space:nowrap; text-transform:uppercase; }
@media all and (max-width:1900px){
	
	
	
}
@media all and (max-width:1600px){
  .visual .video {height:85rem; width: calc(115%) !important; left:0}
  .visual .video video {width:120%; height:auto; left:-7rem}
  .visual .txt {padding:8rem 10rem; min-height:auto;}
}
@media all and (max-width:1400px){
  .visual .video video {width:130%; height:100%; position:relative}
}
@media all and (max-width:1200px){
  .visual {height:90rem;}
  .visual .video {height:70rem; width: calc(150% - 14rem) !important;
    left: -5rem;}
  .visual .video img { max-width:111%}
  .visual .txt {padding:5rem; width:90%; right:5%; }
  .visual .txt dt {text-align:center;}
}
@media all and (max-width:480px){
  .visual {height:48rem;}
  .visual .video {height:45rem; width: calc(120%) !important;}  
  .visual .video img { max-width:120%}
  .visual .txt {padding:3rem;}
  .visual .txt .txt1 {font-size:2rem; }
  .visual .txt .txt2 {margin:3rem 0 0; font-size:3rem ;}
  .visual .txt dd {position:absolute; left:-99999px;}
}

.Business {overflow:hidden; }
.Business .imgSlide { float:left; width:30%; overflow:hidden; }
.Business .imgSlide li { float:left; height:75rem; }
.Business .imgSlide li.bg1 {background:url('../img/main/Business_img.jpg') no-repeat center/cover; }
.Business .imgSlide li.bg2 {background:url('../img/main/Business_img2.jpg') no-repeat center/cover; }
.Business .imgSlide li.bg3 {background:url('../img/main/Business_img3.jpg') no-repeat center/cover; }
.Business .imgSlide li.bg4 {background:url('../img/main/Business_img4.jpg') no-repeat center/cover; }
.Business > div {float:right; width:65%; padding:0 14rem 0 0; overflow: hidden;}
.Business .btnSlide {position:relative;}
.Business .btnSlide li { float:left; }
.Business .btnSlide a { position:relative; display:block; padding:17rem 5rem 0; background:linear-gradient(45deg, transparent 70%, #f5f5f5 100%); }
.Business .btnSlide a::before {content:''; position:absolute; left:5rem; top:3rem; width:12rem; height:12rem; background:url('../img/main/Business_icon.jpg') no-repeat 0 0/200% auto; }
.Business .btnSlide a.icon2::before {background-position:100% 0;}
.Business .btnSlide a.icon3::before {background-position:0 100%;}
.Business .btnSlide a.icon4::before {background-position:100% 100%;}
.Business .btnSlide a dt {font-size:2.5rem; font-weight:600; margin:0 0 1rem; }
.Business .btnSlide a dd {color:#777; }
.Business .slick-arrow { position:absolute; right:-3.5rem; top:50%; transform:translate(0,-50%); width:7rem; height:7rem; background:#fff url('../img/main/arrow.png') no-repeat center; border:1px solid #ddd; text-indent:-9999px; border-radius:50%; cursor:pointer; }
.Business .slick-prev {display:none !important;}
@media all and (max-width:1600px){
  .Business > div {padding:0;}
  .Business .slick-arrow {right:3rem; top:0; }
}
@media all and (max-width:1200px){
  .Business .imgSlide {display:none;}
  .Business > div {width:100%;}
  .Business h2, .Business .subTitle { padding:0 0 0 3rem; }
}

.News { position:relative; float:left; padding:0 0 0 14rem; width:65%;}

.News h2 { margin-top:2rem}
.News::before {content:''; position:absolute; left:0; bottom:0; width:115%; height:34rem; background:#f5f5f5; z-index:-1; }
.News a { position:relative; display:block; float:left; width:47%; margin:5rem 0 5rem 6%; }
.News a:nth-of-type(1) {margin:5rem 0 ;}
.News a::before {content:''; position:absolute; right:3rem; top:-1rem; width:6rem; height:6rem; background:#fff url('../img/main/arrow.png') no-repeat center; border-radius:50%; opacity:0; transition:0.4s; }
.News a:hover::before {right:0; opacity:1; }
.News dt { font-size:3rem; font-weight:600; margin:0 0 3rem; }
.News dd.txt { line-height:3.5rem; max-height:10.5rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; overflow:hidden; }
.News dd.date {font-size:2rem; color:#555; font-family:'GmarketSans', sans-serif; font-weight:200; margin:2rem 0 0; }
@media all and (max-width:1600px){
  .News {padding:0 0 0 3rem;}
}
@media all and (max-width:1200px){
  .News {width:50%;}
  .News::before {height:47rem; }
  .News a {width:100%; margin:2rem 0 !important; }
  .News dt {margin:0 0 2rem; }
  .News dd.txt { line-height:3.5rem; max-height:7rem; -webkit-line-clamp: 2;}
}
@media all and (max-width:768px){
  .News {width:100%; padding: 0 3rem; }
}

.online { position:relative; float:left; width:calc(30% - 14rem); height:49rem; margin:8rem 14rem 0 5%; background:#ffc600 url('../img/main/Request_illu.png') no-repeat 95% 95%; padding:6rem 5rem; }
.online dt {font-family:'GmarketSans', sans-serif; font-size:2rem; line-height:1.5; margin:0 0 2rem; }
.online dt strong {display:block; font-size:4.5rem; }
.online a { position:absolute; left:5rem; bottom:6rem; font-size:2.5rem; padding:1.5rem 8.5rem 1.5rem 0; }
.online a::before {content:''; position:absolute; right:0; top:0; width:7rem; height:7rem; background:#fff url('../img/main/arrow.png') no-repeat center; border:1px solid #ddd; border-radius:50%; }
@media all and (max-width:1600px){
  .online {width:30%; margin:8rem 0 0 5%; }
}
@media all and (max-width:1200px){
  .online {width:45%;}
}
@media all and (max-width:768px){
  .online {width:100%; height:auto; min-height:35rem; margin:0; padding:4rem; background-size:20rem auto; }
  .online dl { margin:0 20rem 0 0;}
  .online dt strong {font-size:4rem;}
  .online a { left:4rem; bottom:4rem; padding:0.5rem 7rem 0.5rem 0; }
  .online a::before {width:5rem; height:5rem; }
}
@media all and (max-width:480px){
  .online { background:#ffc600; }
  .online dl {margin:0;}
}

.product { position:relative; clear:both; padding:10rem 0 0; height:93rem; overflow:hidden; }
.product h2, .product .subTitle {margin:0 0 0 14rem; }
.product > a { display:block; position:absolute; right:14rem; top:10rem; width:25rem; text-align:center; font-size:2rem; padding:15rem 0 0; border-left:1px dashed #e5e5e5; }
.product > a.on,
.product > a:hover {font-weight:600;}
.product > a:nth-of-type(1) {right:89rem; border-left:0;}
.product > a:nth-of-type(2) {right:64rem;}
.product > a:nth-of-type(3) {right:39rem;}
.product > a::before {content:''; position:absolute; left:50%; top:0; width:13rem; height:13rem; background:url('../img/main/product_icon.png') no-repeat 100% 0/400% auto; transform:translate(-50%, 0); }
.product > a.on::before,
.product > a:hover::before { background-color:#254a9f; border-radius:50%; transition:all 0.5s; }
.product > a:nth-of-type(1)::before { background-position:0 0;}
.product > a:nth-of-type(2)::before { background-position:33.33% 0;}
.product > a:nth-of-type(3)::before { background-position:66.66% 0;}
.product > a.on:nth-of-type(1)::before,
.product > a:hover:nth-of-type(1)::before { background-position:0 100%;}
.product > a.on:nth-of-type(2)::before,
.product > a:hover:nth-of-type(2)::before { background-position:33.33% 100%;}
.product > a.on:nth-of-type(3)::before,
.product > a:hover:nth-of-type(3)::before { background-position:66.66% 100%;}
.product > a.on:nth-of-type(4)::before,
.product > a:hover:nth-of-type(4)::before { background-position:100% 100%;}
.product ul { position:absolute; left:0; top:40rem; width:100%; transition:all 0.5s; opacity:0; z-index:-1; }
.product a.on + ul { height:100%; top:36rem; opacity:1; z-index:10; }
.product ul li {text-align:center;}
.product ul li a { position:relative; display:inline-block; transform:scale(0.7); border:1px solid #eee; border-radius:50%;  }
.product ul li a span.img { display:flex; align-items:center; width:48rem; height:48rem; border-radius:50%; background:#fff; overflow:hidden; box-shadow:2px 2px 10px rgba(0,0,0,0.1); }
.product ul li a span.img img {opacity:0.3; width:100%;}
.product ul li a span.btn { display:none; position:absolute; right:-4rem; bottom:3rem; font-size:2rem; font-weight:600; color:#254a9f; padding:1.3rem 0 1.3rem 7rem; }
.product ul li a span.btn::before {content:''; position:absolute; left:0; top:0; width:6rem; height:6rem; background:#254a9f url('../img/main/arrow2.png') no-repeat center; border-radius:50%;}
.product ul li p {display:none;font-size:2.5rem; margin:3rem 0 1rem; }

.product .slick-current p {display:block; display:none}
.product .slick-current a {transform:scale(1);}
.product .slick-current span.img img {opacity:1;}
.product .slick-current span.btn {display:block;}

.product .slick-arrow { position:absolute; right:14rem; top:20%; width:7rem; height:7rem; background:#fff url('../img/main/arrow.png') no-repeat center; border:1px solid #ddd; border-radius:50%; text-indent:-9999px; z-index:10; cursor:pointer; overflow:hidden; }
.product .slick-prev { right:auto; left:14rem; transform:rotate(180deg); }

@media all and (max-width:1600px){
  .product {height:94rem;}
  .product h2, .product .subTitle {margin:0 0 0 3rem;}
  .product > a {right:3rem; width:20rem;}
  .product > a:nth-of-type(1) {right:63rem;}
  .product > a:nth-of-type(2) {right:43rem;}
  .product > a:nth-of-type(3) {right:23rem;}
  .product ul li a span.img { width:40rem; height:40rem; }
  .product .slick-arrow {right:3rem;}
  .product .slick-prev {left:3rem;}
}
@media all and (max-width:1200px){
  .product {padding:5rem 0 0; height:87rem;}
  .product > a {top:5rem;}
  .product ul li a span.img { width:35rem; height:35rem; }
  .product ul li a span.btn {right:-9rem;}
}
@media all and (max-width:1023px){
  .product > a {width:50%; right:0; top:23rem; padding:0 0 0 11rem; line-height:8rem; height:8rem; text-align:left; border-top:1px dashed #ddd; border-left:1px dashed #ddd; }
  .product > a:nth-of-type(1) { right:50%; border-top:0; border-left:0;}
  .product > a:nth-of-type(2) { right:0; border-top:0; line-height: 1.5; padding-top: 1rem;}
  .product > a:nth-of-type(3) { top:31rem; right:50%; border-left:0;}
  .product > a:nth-of-type(4) { top:31rem; }
  .product > a::before { width:7rem; height:7rem; top:0.5rem; left:2rem; transform:none; }
  .product a + ul {top:50rem;}
  .product a.on + ul {top:46rem;}
  .product ul li a span.img {width:25rem; height:25rem;}
  .product .slick-current span.btn { right:-2rem; text-indent:-9999px;}
  .product .slick-arrow { top:12%; right:2rem}
  .product .slick-prev { right:auto; left:2rem; transform:rotate(180deg); }

}
@media all and (max-width:480px){
  .product {height:62rem;}
  .product > a {padding:0 0 0 6.5rem; top:15rem; }
  .product > a:nth-of-type(3) { top:23rem; }
  .product > a:nth-of-type(4) { top:23rem; }
  .product > a::before {width:4rem; height:4rem; left:1rem; top:2rem; }
  .product ul li a span.btn {display:none !important;}
  .product a + ul {top:38rem;}
  .product a.on + ul {top:34rem;}
}