@charset "UTF-8";
/*  CSS Document  */

html, body{margin: 0; padding: 0; width:100%; height: 100%; font-family:"new-order", sans-serif, "Lantinghei TC Demibold"; color: #333; font-size: 16px;}
li, ul, ol{padding: 0; margin: 0; list-style: none;}
a{color: #000; text-decoration: none; cursor: pointer;}


/*  通用規則  */
.commonContainer{width:calc(100% - 40px); max-width: 1600px; margin: 0 auto;}

:root{
    --colorY:#FFF20F;
    --colorB:#01548D;
}

.forMobile{display: none;}


#pageTop{width: 100%; height: 100vh; background: var(--colorB); position: relative;}
#pageTop::before{content: ""; width: 100%; height: 85%; background: url("../images/pageTop_BG_PC.jpg") no-repeat center; background-size: cover; position: absolute; top:0; left: 0; z-index: 0;}
#pageTop .title{width: 100%; height: 175px; background: url("../images/web_logo_PC.png") no-repeat center left; position: relative; z-index: 1;}
#pageTop .mainContent{height: calc(100vh - 175px); display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 1;}
#pageTop .textBlock{color: #fff; display: flex; flex-direction: column; align-items: flex-end;}
#pageTop .textBlock h1{font-weight: 900; font-size: 58px; line-height: 58px;}
#pageTop .textBlock h2{font-family: "Impact"; color: var(--colorY); text-transform: uppercase; text-align: right; font-size: 64px; line-height: 68px;}
#pageTop .textBlock h2 span{display: block;}
#pageTop .textBlock h3{font-weight: 300; font-size: 36px; line-height: 36px;}
.deco{width:100%; height: 45%; display: flex; align-items: flex-end;}
.scrollDown{color: #fff; display: flex; align-items: center; padding: 10px 0; white-space: nowrap; column-gap: 5px;}
.scrollDown::before{content: ""; display: block; width: 24px; height: 24px; background: url("../images/icon_scrolldown.svg") no-repeat center; background-size: contain;}
.scrollDown::after{content: "....";}
.deco .blocks{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-end;}
.deco .singleOne{border-left: 17px solid #ccc; height: 25%;}
.deco .singleOne.s1{width: 0;}
.deco .singleOne.s2{width: 33%;}
.deco .singleOne.s3{width: 66%;}
.deco .singleOne.s4{width: 99%;}

.equipments{background: #002844; position: relative; padding-top: 200px;}
.equipments::before{width: 100%; height: 150px; content: ""; display: block; background: #ccc; position: absolute; top:0; left: 0; z-index: 0;}
.singleEQ{position: relative; z-index: 2; width:100%; height: 500px; display: flex;}
.singleEQ .BG{width:calc(1040px + ( 100vw - 1600px ) / 2); height: 100%; background: var(--colorB);}
.singleEQ .content{width:40%; max-width: 560px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1;}
.singleEQ .BG::before{content:""; display: inline-block; width: calc(100% - 80px); height: 100%; background: no-repeat center left; background-size: cover;}
.EQWeightTraining{margin: -180px 0 20px; padding-right: 20px;}
.EQAerobicExercise{flex-direction: row-reverse; margin: 20px 0 -100px; padding-left: 20px;}
.EQWeightTraining .BG::before{background-image: url("../images/dumbbells.jpg");}
.EQAerobicExercise .BG::before{background-image: url("../images/aerobic_exercise.jpg");}
.EQAerobicExercise .BG{text-align: right;}
.singleEQ .title{color: #fff; display: flex; align-items: flex-end; position: relative; margin-bottom: 15px; border-bottom:5px solid var(--colorY);}
.singleEQ h2{font-size: 16px; line-height: 16px; font-weight: 500;}
.singleEQ ul{display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; grid-row-gap: 10px;}
.singleEQ li{display: block; border: 1px solid #fff; border-radius: 12px;}
.singleEQ li a:not([href]):not([class]){display: block; padding: 10px 0; text-align: center; color: #fff; font-size: 18px; line-height: 18px;}
.EQWeightTraining .content{margin-left: -40px;}
.EQAerobicExercise .content{margin-right: -40px;}
.EQWeightTraining .title{margin-left: -300px; padding-left: 300px;}
.EQWeightTraining .title h2{position: absolute; left: 0; bottom:4px;}
.EQWeightTraining .title h2::after{content: " ///";}
.EQAerobicExercise .title{margin-right: -300px;}
.EQAerobicExercise .title h2{position: absolute; right: 0; bottom:4px;}
.EQAerobicExercise .title h2::before{content: "/// ";}

.centerText{position: absolute; top:calc(50% - 75px); left: 0; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; z-index: 3;}
.centerText span{font-size: 100px; line-height: 100px; color:var(--colorY); font-weight: 200;}
.centerText span.text{font-weight: 600; font-size: 150px; line-height: 150px;}

.facilityPlanning{width:100%; height: 1000px; background:url("../images/gym-design.jpg") no-repeat center; background-size: cover; display: flex; align-items: center; justify-content: center; border-top:20px solid #fff; position: relative; z-index: 1; margin-top: -100px;}
.facilityPlanning .content{padding: 50px 20px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; background: #0009;}
.facilityPlanning h1.titleEn{color: var(--colorY); font-size: 64px; line-height: 64px; font-weight: 900; display: flex; flex-direction: column; align-items: flex-end; font-family: "verdana"; border:none; margin-bottom: 10px; margin: 0;}
.facilityPlanning h1.titleEn span{display: block;}
.facilityPlanning h1{color: #fff; font-size: 48px; line-height: 48px; padding-bottom: 10px; border-bottom: 5px solid var(--colorY); margin-bottom: 5px; text-transform: uppercase; font-weight: 200; margin-right: -20px;}
.facilityPlanning p{width: 60%; display: block; text-align: justify; color: #fff; font-size: 20px; line-height: 32px;}

.products{position: relative;}
.products .title{height: 250px; background: var(--colorB); position: relative;}
.products .title::after{width: 29%; height: 100%; background: var(--colorY); content: ""; display: block; position: absolute; right:0; top: 0; z-index: 0;}
.products .title .commonContainer{display: flex; height: 100%; align-items:flex-end; justify-content: space-between; position: relative; z-index: 1;}
.products .title h1.titleCn{display: flex; column-gap: 10px; align-items: center; color: #fff; font-size: 48px; line-height: 48px; padding: 30px 0; white-space: nowrap; width: 100%;}
.products .title h1.titleCn::after{content: ""; display: block; width: 100%; height: 5px; background: var(--colorY);}
.products .title h1.titleEn{white-space: nowrap; color: #fff; font-size: 64px; line-height: 64px; font-weight: 200; padding: 10px 0;}
.products .title h1.titleEn small{display: block; font-size: 20px; line-height: 20px; font-weight: 700;}

.products .content{position: relative;}
.products .content::after{content: ""; width: 896px; height:100%; display: block; background: url("../images/productBG.png") repeat-y left top; position: absolute; top:0; right:0; z-index: 1; opacity: 0.3;}
.singlePro{position: relative;}
.singlePro:nth-child(odd){background: linear-gradient(to bottom, #d9d9d9, #efefef);}
.singlePro:nth-child(even){background: linear-gradient(to bottom, #3e3e3e, #737373);}
.singlePro .commonContainer{position: relative; z-index: 2; display: grid; grid-template-columns: 200px auto;}

.singlePro .infos{width:100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.proTitle{width: 100%;}
.proTitle .series{display: flex; padding: 10px; background: #000; color: #fff; align-items: flex-end; width:100%; height: 100px;}
.proTitle .eqName{font-size: 24px; line-height: 24px; padding: 10px; color: var(--colorB); font-weight: 300;}
.viewBtn{width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; column-gap: 5px; background: #000; color: #fff;}
.viewBtn::before{content: ""; display: block; width: 24px; height: 24px; background: url("../images/icon_viewBtn_W.svg") no-repeat center; background-size: contain;}

.proGroup{display: grid; grid-template-columns: repeat(3, 1fr);}
.singlePro:nth-child(even) .proTitle .series{background: #fff; color: var(--colorB);}
.singlePro:nth-child(even) .proTitle .eqName{color: #fff;}
.singlePro:nth-child(even) .viewBtn{background: #fff; color:var(--colorB);}
.singlePro:nth-child(even) .viewBtn::before{background-image: url("../images/icon_viewBtn_B.svg");}

.proBlock{display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 0; transition: all 0.3s;}
.laptop .proBlock:hover{background: var(--colorY);}
.proIMG, .proSeries, .proEQ, .proBtn{width: 90%; max-width: 320px;}
.proIMG{margin-bottom: 10px;}
.proSeries{font-weight: 900;}
.proEQ{font-weight: 500;}
.proBtn{text-align: right; padding: 15px; font-size: 18px; line-height: 18px; color: #fff; margin-top: 20px; background: var(--colorB); border-left: 40px solid #000;}

.singlePro:nth-child(even) .proSeries, .singlePro:nth-child(even) .proEQ{color: #fff;}
.laptop .singlePro:nth-child(even) .proBlock:hover .proSeries, .laptop .singlePro:nth-child(even) .proBlock:hover .proEQ{color: #000;}

.IMGBlock{padding: 80px 30px; display: flex; align-items: center; justify-content: center; background: url("../images/AD_BG.png") #333; position: relative;}
.IMGBlock a{display: block; margin: 0 auto;}
.IMGBlock a img{width: 100%; height: auto;}
.IMGBlock .tips{padding: 5px; border:1px solid #ccc; color:#ccc; position: absolute; right:10px; bottom:10px;}

.installment{display: flex; align-items: center; justify-content: center; background: #d7d7d7; position: relative;}
.installment a{display: block;}
.installment img{width: 100%; max-width: 1200px; height: auto;}
.installment::before{content:""; display: block; width: 40px; height: 35%; position: absolute; left: 46%; bottom:-80px; background: var(--colorY); z-index: 3;}

.process{background: #000; position: relative;}
.process .blockTitle{position: absolute; top:10px; left: 10px;}
.process .blockTitle .en{color: var(--colorY); font-size: 5vw; line-height: 5vw; font-weight: 900;}
.process .blockTitle .t1{display: block;}
.process .blockTitle .cn{font-size:32px; line-height: 32px; color: #fff;}
.processBlock{display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 10px;}
.processBlock li{background: var(--colorB); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; color: #fff; padding: 11vw 0 80px;; grid-row-gap: 50px;}
.processBlock .num{font-size: 6vw; line-height: 8vw; font-family:"impact";}
.processBlock .icon{width: 4vw; height: 4vw; background: no-repeat center; background-size: contain;}
.processBlock .icon.mail{background-image: url("../images/icon_mail.svg");}
.processBlock .icon.dialogue{background-image: url("../images/icon_dialogue.svg");}
.processBlock .icon.quotation{background-image: url("../images/icon_quotation.svg");}
.processBlock .icon.contract{background-image: url("../images/icon_contract.svg");}
.processBlock .icon.payment{background-image: url("../images/icon_payment.svg");}
.processBlock .icon.installation{background-image: url("../images/icon_installation.svg");}
.processBlock .title{font-size: 32px; line-height: 36px; text-align: center;}
.processBlock .title small{font-size: 16px; line-height: 18px; color: var(--colorY); display: block; margin-top: 5px; font-weight: 500;}
.processBlock .content{width: 80%; text-align: justify;}

.footerInfos{background: #000; display: grid; grid-template-columns: auto 200px 500px; color: var(--colorB);}
.title1 img{width: 100%; height: auto;}
.title2{font-size: 28px; line-height: 28px; font-weight: 900; border-left: 30px solid var(--colorY); display: flex; justify-content: center; align-items: center;}
.contactContent li{display: grid; width:100%; grid-template-columns: 180px auto; height:300px; font-size: 24px; line-height: 24px;}
.contactContent li .title{background: var(--colorY);}
.contactContent li.phone span{display: flex; flex-direction: column; justify-content: flex-end; padding:0 10px 30px;}
.contactContent li.mail span{display: flex; flex-direction: column; justify-content: flex-start; padding:30px 10px 0;}
.contactContent li.phone span.content{padding-bottom: 40px;}
.contactContent li.mail span.content{padding-top: 40px;}
.contactContent li a{color: var(--colorB);}

.copyright{padding: 20px; display: flex; align-items: center; justify-content: space-between; background: #eee; color: #000; font-size: 14px; line-height: 14px;}
.copyright a{text-decoration: underline;}


@media screen and (max-width: 1024px) {
    .centerText span.text{font-size: 120px; line-height: 120px;}
    .centerText span{font-size: 100px; line-height: 100px;}
    .singleEQ{height: 400px;}
    .processBlock{grid-template-columns: repeat(3, 1fr); grid-row-gap: 10px;}
    .process .blockTitle .en{font-size: 8vw; line-height: 8vw;}
    .processBlock li{padding: 20vw 0 30px;}
    .processBlock li:nth-child(n+4){padding-top:30px;}
    .processBlock .num{font-size: 10vw; line-height: 10vw;}
    .processBlock .icon{width:6vw; height: 6vw;}
    .EQWeightTraining .title{padding-left: 200px; margin-left: -200px;}
    .EQAerobicExercise .title{margin-right: -200px;}
    .installment::before{bottom:-20px; width: 20px;}
}

@media screen and (max-width: 820px) {
    .centerText{top:calc(50% - 30px);}
    .centerText span.text{font-size: 80px; line-height: 80px;}
    .centerText span{font-size: 60px; line-height: 60px;}
    .facilityPlanning p{width:80%;}
    .products .title::after{width:40%;}
    .singlePro .commonContainer{grid-template-columns: 150px auto;}
    .proTitle .eqName{font-size: 18px; line-height: 18px;}
    .proTitle .series{height: 80px;}
    .viewBtn{height: 100px;}
}

@media screen and (max-width: 768px) {
    .forPC{display: none;}
    .forMobile{display: block;}
    #pageTop{display: flex; flex-direction: column; justify-content: space-between;}
    #pageTop .title{width:100%; height: 20vh; background: url("../images/mobile_top.jpg") no-repeat center bottom; background-size: cover;}
    #pageTop::before{margin-top: 19%; height: 76%;}
    .webName{color: var(--colorY);}
    #pageTop .webName .title{font-size: 32px; line-height: 32px; background:none;}
    .webName .subtitle{display: flex; align-items: center; column-gap: 10px; white-space: nowrap;}
    .webName .subtitle::after{content: ""; display: block; width: 100%; height: 5px; background: var(--colorY);}
    
    #pageTop .mainContent{height: 78vh;}
    .deco{height: 100%;}
    #pageTop .textBlock h2{font-size: 32px; line-height: 32px; margin-top: 30px;}
    #pageTop .textBlock h2 span{display: inline-block; margin-left: 10px;}
    #pageTop .textBlock h1{font-size: 42px; line-height: 42px;}
    #pageTop .textBlock h3{font-size: 24px; line-height: 24px;}
    .deco .singleOne{border-color: #fff;}
    .equipments::before{display: none;}
    .equipments{background:none; padding-top: 20px;}
    .singleEQ{flex-direction: column; grid-row-gap: 10px; height: auto; align-items: center;}
    .EQWeightTraining, .EQAerobicExercise{margin: 0 0 80px; padding: 0;}
    .singleEQ .BG{width: 95%; height: 30vh; border-radius: 20px; overflow: hidden;}
    .singleEQ .BG::before{width:100%;}
    .EQWeightTraining .content, .EQAerobicExercise .content{margin: 0; padding: 0; width: 95%; max-width: none;}
    .EQWeightTraining .title, .EQAerobicExercise .title{margin:0 0 10px; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; color: var(--colorB); border-color: var(--colorB);}
    .centerText{display: none;}
    .EQWeightTraining .title h2, .EQAerobicExercise .title h2{position: static;}
    .EQWeightTraining .title h2::after{display: none;}
    .EQWeightTraining .title h2::before{content: "/// ";}
    .singleEQ li a:not([href]):not([class]){color: var(--colorB);}
    .singleEQ li{border-color:var(--colorB);}
    
    .facilityPlanning{margin-top: 0; flex-direction: column; align-items: center; justify-content: flex-start; height: 90vh;}
    .facilityPlanning .content{display: flex; flex-direction: column; align-content: center; justify-content:center; background: none; width: auto; padding: 0;}
    .facilityPlanning h1.titleEn{align-items: center; margin-top: 50px; font-size: 8vw; line-height: 8vw;}
    .facilityPlanning .content{width:80%;}
    .facilityPlanning h1{text-align: center; font-size: 10vw; line-height: 10vw; margin:0 0 10px; padding-bottom: 20px;}
    .facilityPlanning p{width: 100%; text-align: justify;}
    
    .products .title::after{width: 80px; height: 80px; top:-40px; right:20px; z-index: 3;}
    .products .title h1.titleEn{position: absolute; font-size: 12px; line-height: 12px; top:42px; right:0px; text-align: right; padding: 0;}
    .products .title h1.titleEn small{font-size: 12px; line-height: 12px; font-family:"new-order", sans-serif, "Lantinghei TC Demibold"; font-weight: 200;}
    .products .title{height: 150px;}
    .products .title h1.titleCn{padding: 20px 0; font-size: 32px; line-height: 32px; width: auto;}
    .products .title h1.titleCn::after{display: none;}
    .products .content{background:var(--colorB); padding-bottom: 1px;}
    .products .content::after{display: none;}
    #pageContainer .singlePro{background: none;}
    
    .singlePro .commonContainer{display: block; position: relative; padding-bottom: 80px; margin-bottom: 100px;}
    
    .proTitle{display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 20px; padding: 0 20px; height: 80px;}
    #pageContainer .proTitle .series, #pageContainer .proTitle .eqName{width: auto; height: auto; background: none; color:var(--colorB); font-size: 18px; line-height: 18px; font-weight: 300; margin: 0; padding: 0;}
    #pageContainer .proTitle .series{font-weight: 900;}
    #pageContainer .viewBtn{width: 100%; height: 80px; background: var(--colorY); color: var(--colorB); border-radius: 20px; position: absolute; left: 0; bottom: 0; font-size: 24px; line-height: 24px;}
    #pageContainer .viewBtn::before{width:28px; height: 28px; background-image: url("../images/icon_viewBtn_B.svg");}
    
    .proGroup{margin: 20px 0; column-gap: 3%;}
    .proBlock, .laptop .proBlock:hover{padding: 0; border-radius: 20px; overflow: hidden; background: #fff;}
    .proBtn{width:100%; border: none; background: var(--colorY); color: var(--colorB); text-align: center;}
    #pageContainer .proSeries, #pageContainer .proEQ, .laptop .proEQ, .laptop .proSeries{color: #000;}
    
    .installment::before{display: none;}
    
    .footerInfos{display: flex; flex-direction: column; grid-row-gap: 50px; padding-bottom: 50px;}
    .footerInfos .title2{ border: none; font-size: 10vw; line-height: 10vw;}
    .contactContent{display: flex; flex-direction: column; grid-row-gap: 50px;}
    .contactContent li.phone, .contactContent li.mail{height: auto; display: flex; align-items: center; justify-content: center; column-gap: 10px; flex-direction: column; grid-row-gap: 10px;}
    #pageContainer .contactContent li span{padding: 0; margin: 0; background: none; flex-direction: row; column-gap: 10px;}
    #pageContainer .contactContent li span small::before{content: "/ "}
    #pageContainer .contactContent li span.content{font-size: 32px; line-height: 32px; color: #fff;}
    
    .products .title .commonContainer{max-width: none;}
    
    .copyright{flex-direction: column; grid-row-gap: 20px; align-items: center; justify-content: center;}
}

@media screen and (max-width: 768px) and (orientation:portrait) {
    #pageTop::before{background-image: url("../images/main2_Mobile.jpg"); background-position: bottom center;}   
}

@media screen and (max-width: 520px) {
    #pageTop::before{height: 82%;}
    #pageTop .webName .title{font-size: 18px; line-height: 18px;}
    .webName .subtitle{font-size: 12px; line-height: 12px;}
    #pageTop .textBlock h2{font-size: 5vw; line-height: 5vw;}
    #pageTop .textBlock h1{font-size: 8vw; line-height: 8vw;}
    #pageTop .textBlock h3{font-size: 6vw; line-height: 6vw;}
    .deco .singleOne{border-width: 5px;}
    .singleEQ .BG{height: 25vh;}
    .proGroup{margin: 20px -20px; padding: 0 20px; display: block; overflow: scroll; white-space: nowrap;}
    .proGroup::-webkit-scrollbar{display: none;}
    .proBlock{display: inline-flex; width: 240px; margin-right: 20px;}
    .proBlock:last-child{margin-right: 0;}
    
    .process{background: var(--colorB); padding-bottom: 1px;}
    .processBlock{display: block; width:80%; margin: 0 auto;}
    .processBlock .num{font-size:30vw; line-height: 30vw;}
    .process .blockTitle .en{font-size:13vw; line-height: 13vw;}
    .process .blockTitle .cn{font-size: 16px;}
    .processBlock li{padding:0 0 30px; grid-row-gap: 20px; flex-direction: row; align-items:center; justify-content: center; flex-wrap: wrap; column-gap: 10px; margin-bottom: 30px; border-bottom: 5px solid #000;}
    .processBlock li:first-child{padding-top: 40vw;}
    .processBlock .icon{width: 20vw; height: 20vw;}
    .processBlock .title{width: 100%;}
    .processBlock li:nth-child(n+4){padding-top: 0;}
    .processBlock .content{width: auto;}
}