/* ===============================================================
    * header style only for index
=============================================================== */
@media (max-width: 820px){
    .cm-header {height: 60px; background:rgba(17,17,17,.8);}
    .header-logo .logo-normal {display: block;}
    .header-logo .logo-fixed {display: none;}
    .header-icon span {background: #fff;}
}


/* ===============================================================
    * full-slide-section
=============================================================== */
.full-slide {width: 100%; height: auto; position: relative;}
.full-slide__wrapper {position: relative;}
.full-slide__wrapper > .width-max {z-index: 10; position: absolute; left: 50%; top: 60%; transform: translateX(-50%);}
.full-slide__tit {color: #fff; position: relative; padding: 50px 0 0 50px;}
.full-slide__tit:after {content: ''; position: absolute; width: 120px; height: 120px; left: 0; top: 0; background: url(/assets/web/img/index/main-deco.png) no-repeat center / cover;}
.full-slide__tit p {font-size: 26px; letter-spacing: -0.01em;}
.full-slide__tit h2 {font-size: 60px; font-weight: 600; margin-top: 20px;}
.full-container {width: 100%; height: 100vh; overflow: hidden; position: relative;}
.full-container .swiper-slide {width: 100%; height: 100%; overflow: hidden; position: relative;}
.full-container .swiper-slide:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(16,16,16,.2);}
.full-container .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.full-container .width-max {z-index: 10; position: absolute; left: 50%; top: initial; transform: translateX(-50%); bottom: 100px;}
.full-ctrl {display: flex; justify-content: flex-end; align-items: center;}
.play-ctrl {position: relative; font-size: 12px; color: #fff; cursor: pointer; margin-right: 20px;}
.play-btn {display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.play-btn.js-active {display: block;}
.nav-btn {font-size: 17px; position: static; color: #fff; margin: 0;}
.full-ctrl span {font-size: 16px; color: #fff;}
.swiper-pagination {width: 80px; margin: 0 20px; height: 1px; position: static; background: rgba(255,255,255,.3);}
.swiper-pagination .swiper-pagination-progressbar-fill {background: #fff;}
@media (max-width: 820px){
    .full-slide__tit {padding: 25px 0 0 25px;}
    .full-slide__tit:after {width: 65px; height: 65px;}
    .full-slide__tit p {font-size: 15px;}
    .full-slide__tit h2 {font-size: 33px; margin-top: 10px;}
    .full-ctrl {justify-content: flex-start; padding-left: 20px;}
    .play-ctrl {font-size: 10px; margin-right: 15px;}
    .nav-btn {font-size: 14px;}
    .full-ctrl span {font-size: 13px;}
    .swiper-pagination {width: 50px; margin: 0 10px;}
    .contact-icon {z-index: 100; position: absolute; right: 15px; bottom: 30px;}
    .contact-icon p {display: block; margin-top: 10px; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; text-align: center; background: rgba(255,255,255,.8);}
    .contact-icon p i {font-size: 16px; color: #416067;}
}


/* ===============================================================
    * products
=============================================================== */
.products {position: relative; padding: 120px 0 100px; background: linear-gradient(to bottom, #fff 0%, #fff 60%, rgba(197,209,217,.4) 60%, rgba(197,209,217,.4) 100%);}
.products:before {content: ''; position: absolute; left: 30px; bottom: 40px; width: 120px; height: 120px; background: url(/assets/web/img/index/prod-2.png) no-repeat center / cover;}
.products:after {content: ''; position: absolute; top: 30px; right: 30px; width: 460px; height: 460px; background: url(/assets/web/img/index/intro-rotate.png) no-repeat center / cover; animation: rotation 40s linear infinite;}
@keyframes rotation {
    100% {transform: rotate(360deg);}
}
.prod-list {display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: -12.5px; margin-right: -12.5px;}
.prod-item {z-index: 1; width: calc(100% / 3 - 25px); margin: 0 12.5px 25px; border: 1px solid #e0e0e0; background: #fff; box-shadow: 0px 2px 6px 0px rgba(34, 34, 34, 0.2);}
.prod-item > a {display: block;}

.prod-tit__box {position: relative; border: none; box-shadow: none;}
.prod-tit__box:after {content: ''; position: absolute; width: 220px; height: 220px; right: -30px; bottom: -30px; background: url(/assets/web/img/index/prod-1.png) no-repeat center / cover;}
.prod-tit {position: relative; z-index: 1; padding-top: 10px;}
.prod-tit span {font-size: 18px; font-weight: bold;}
.prod-tit h2 {font-size: 40px; margin-top: 10px;}
.prod-tit p {font-size: 18px; line-height: 28px; margin: 40px 0 50px; width: 80%;}
.prod-tit a {display: inline-block; width: 240px; height: 58px; line-height: 56px; border: 1px solid #222; background: #fff; font-size: 16px; text-align: center;}
.prod-tit a span {display: inline-block; margin-left: 10px;}

.prod-box__img {position: relative; background: #fff; height: 260px; text-align: center; margin: 5px 5px 0; display: flex; align-items: center; overflow: hidden;}
.prod-box__img img {height: 70%; max-width: 80%; object-fit: cover; margin: 0 auto;}
.prod-link {display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 240px; height: 58px; line-height: 56px;}
.prod-link i {display: inline-block; margin-left: 10px;}
.prod-item:hover .prod-link {display: block;}
.prod-item:hover .prod-box__tit {border-top-color: #61848c;}
.prod-box__tit {height: 60px; line-height: 56px; text-align: center; border-top: 1px solid #e0e0e0; border-bottom: 2px solid #61848c;}
.prod-box__tit h3.font1 {font-size: 22px;}
.prod-box__tit h3 {font-size: 18px;}
@media (max-width: 820px){
    .products {padding: 50px 0;}
    .products:before, .products:after {display: none;}
    .prod-list {margin-left: -5px; margin-right: -5px;}
    .prod-item {width: calc(50% - 10px); margin: 0 5px 10px;}
    .prod-item:last-of-type {width: 100%;}
    .prod-tit__box {width: 100%; text-align: center; margin: 0 0 20px;}
    .prod-tit__box:after {display: none;}
    .prod-tit span {font-size: 13px;}
    .prod-tit h2 {font-size: 30px;}
    .prod-tit p {font-size: 12px; letter-spacing: -0.025em; margin: 15px 0 0; width: 100%;}
    .prod-tit a {display: none;}

    .prod-box__img {height: 130px;}
    .prod-link {display: none;}
    .prod-item:hover .prod-link {display: none;}
    .prod-box__tit {height: 35px; line-height: 30px;}
    .prod-box__tit h3.font1 {font-size: 16px;}
    .prod-box__tit h3 {font-size: 13px;}
}


/* ===============================================================
    * info
=============================================================== */
.info {padding: 100px 0 120px;}
.info-wrap {position: relative; height: 520px;}
.info-wrap:after {content: ''; position: absolute; width: 50%; height: 480px; left: 0; top: 0; background: url(/assets/web/img/index/info-bg1.jpg) no-repeat center / cover;}
.info-wrap:before {content: ''; position: absolute; width: 50%; height: 480px; right: 0; top: 40px; background: url(/assets/web/img/index/info-bg2.jpg) no-repeat center / cover;}
.info-wrap .width-max {display: flex; justify-content: space-between; flex-wrap: wrap;}
.info-box {width: 50%;}

.info-tit {position: relative; z-index: 1; padding-top: 120px;}
.info-tit span {font-size: 18px; font-weight: bold;}
.info-tit h2 {font-size: 40px; margin-top: 10px;}
.info-tit p {font-size: 18px; line-height: 28px; margin: 40px 0 50px;}
.info-tit a {display: inline-block; width: 240px; height: 58px; line-height: 56px; border: 1px solid #222; font-size: 16px; text-align: center;}
.info-tit a span {display: inline-block; margin-left: 10px;}

.info-councel .info-tit {padding-left: 80px; color: #fff;}
.info-councel .info-tit span {color: #c5d1d9;}
.info-councel .info-tit a {border: 1px solid #fff; background: none;}

@media (max-width: 820px){
    .info {padding: 0 0 50px;}
    .info-wrap {height: auto;}
    .info-wrap:after, .info-wrap:before {display: none;}
    .info-wrap .width-max {padding: 0;}
    .info-box {width: 100%;}
    .info-location {background: url(/assets/web/img/index/info-bg1.jpg) no-repeat center / cover;}
    .info-councel {background: url(/assets/web/img/index/info-bg2.jpg) no-repeat center / cover;}

    .info-tit {padding: 60px 0; text-align: center;}
    .info-tit span {font-size: 13px;}
    .info-tit h2 {font-size: 30px;}
    .info-tit p {font-size: 12px; line-height: 18px; margin: 20px auto 20px; width: 90%;}
    .info-tit p br {display: none;}
    .info-tit a {width: 190px; height: 40px; line-height: 36px; font-size: 12px;}

    .info-councel .info-tit {padding-left: 0;}
}