* { box-sizing: border-box;}
#mktContent {overflow-x: hidden;}
#mktContent.htl{overflow: visible;}
a{text-decoration: none;}
/*版頭*/
header.header{height: 700px; background: url(../images/header.jpg) top center no-repeat;}
header.header h1{display: none;}
/*move-to-btn*/
.move-to-item,
.move-to-company,
.move-to-top{z-index: 10; display: inline-block; position: fixed; color: #ffffff; width: 70px; height: 70px; right: 30px; border-radius:99em; cursor: pointer;}
.move-to-item{font: 500 20px/1.1 '思源黑體','微軟正黑體';   background: #f8b551; bottom: 190px; padding:13px 15px; }
.move-to-company{font: 500 20px/1.1 '思源黑體','微軟正黑體'; background: #fd7373; bottom: 110px; padding:13px 15px;}
.move-to-top{font: 500 20px/1.1 '思源黑體','微軟正黑體'; background: #004795;bottom: 30px;padding: 24px 6px; vertical-align: middle;}
.move-to-top span{font-size: 16px; vertical-align: middle;}
/*共用*/
h2{position: relative; z-index: 1;display:inline-block; font: 700 40px/1 '思源黑體','微軟正黑體'; text-align: center;}
.btn{width: 100%;}
.btn a{display: inline-block; width: 100%; font: 500 26px/1 '思源黑體','微軟正黑體'; color: #ffffff; background: rgba(45,124,210,0.95);border-radius: 10px; padding: 16px 0; margin: 0 auto; transition: 0.3s;}
.break,
.break375,
.break320{display: none;}
#set-footer-base .set-footer-alert{display: none;}
button.tablinks a{color: #000000;}
/*page2-客製全包*/
#page2{width: 100%; padding: 80px 0; text-align:center;}
#page2 h2,
#page2 p{color: #171616;}
#page2 p{font: 200 24px/1 '思源黑體','微軟正黑體'; margin-top: 16px;}
#page2 .wrap-item{position: relative; max-width: 1200px; width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin: 48px auto 0 auto;}
#page2 .single-item{width: 24%; background: #ffffff; border-radius: 15px;}
#page2 .single-item-alert{margin: 0 auto; width: 100%;}
#page2 .item-pic img{display: block; width: 100%; height: auto;}
#page2 .item-content{width: 100%; padding: 24px 12px; text-align: center;}
#page2 h3{display:inline-block; position: relative; font: 500 28px/1 '思源黑體','微軟正黑體'; color: black;}
#page2 .item-content-txt{font: 200 18px/1.55 '思源黑體','微軟正黑體'; color: #383838; }

/*page3-企業客製*/
#page3{width: 100%; background:#eff9ff; padding: 80px 0; text-align:center;}
#page3 h2,
#page3 p{color: #2f4760;}
#page3 p{font: 200 24px/1 '思源黑體','微軟正黑體'; margin-top: 16px;}
#page3 .wrap-company{max-width: 1200px; width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin: 48px auto 20px auto;}
#page3 .single-company{width: 30.5%; background: #ffffff; border: 1px #d3e1f0 solid; border-radius: 15px; overflow: hidden; transition: 0.3s;}
#page3 .single-company:hover{transform: scale(1.02); transition: 0.4s; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);}
#page3 .company-pic{width: 100%; }
#page3 .company-pic img{width: 100%; height: 100%;}
#page3 .company-content{width: 100%; padding: 24px 22px 24px 22px; text-align: center;}
#page3 h3{display:inline-block; position: relative; font: 500 28px/1 '思源黑體','微軟正黑體'; color: #004795; margin: 0 0 24px 0;}
#page3 h3::before{content:''; position: absolute; width: 100%; height: 3px; bottom: -12px; left: 0; background: #f8b551;}
#page3 .company-content-txt{font: 200 18px/1.55 '思源黑體','微軟正黑體'; color: #383838; }

/*page4-logo*/
#page4{max-width: 1200px; width: 100%; padding: 80px 0; text-align:center; margin: 0 auto;}
#page4 h2{color: #2f4760;}
#page4 .wrap-logo{width: 100%; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 50px 0;}
#page4 .logo{display: inline-block; width: 23%;  margin-bottom: 10px;}
#page4 .logoName{font-size:18px; }
#page4 .logoPic{border: 2px #f2f2f2 solid ;border-radius: 10px; overflow: hidden; padding: 10px 15px; margin: 15px 0;}
#page4 .logo img{width: 100%;}

/*page5-好評+QA*/
#page5{position: relative; width: 100%; background: url('../images/page7-bg.jpg') no-repeat center; background-size: cover; z-index: 0;}
#page5::before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(22, 28, 35, 0.7); z-index: -1;}
#page5 h2{ color: #ffffff; margin:0px 0 48px 0; text-align: left;}
#page5 .wrap-page5{ max-width: 1200px; width: 100%; padding: 80px 0 80px 0; margin: 0 auto;
letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed;
}

#page5 .wrap-discuss{display: inline-block; width: 50%; letter-spacing: normal;}
#page5 .discuss-single{display: inline-block; width: 86%; margin-bottom: 25px; text-align: right; transition: ease 0.3s;}
#page5 .discuss-single:hover{transform: scale(1.03); transition: ease 0.3s;}

#page5 .discuss-single-person{width: 100%; text-align: left; }
#page5 .discuss-single-person-head{display: inline-block; width: 60px; height: 60px; text-align: left; vertical-align: middle;}
#page5 .discuss-single-person-head img{width: 100%;}
#page5 .discuss-single-person-name{position: relative; display: inline-block; font: 500 26px/1 '思源黑體','微軟正黑體'; color: #ffffff; text-align: left; margin-left: 12px; vertical-align: middle; transition: 0.3s;}
#page5 .discuss-single-person-name::before{content: ""; position: absolute; height: 3px; width: 0%; left: 2px; bottom: -8px; background: #f8b551; transition: 0.3s;}
#page5 .change .discuss-single-person-name::before{width: 99%;}
#page5 .discuss-single-content{display: inline-block; width:87%; text-align: left; font: 400 17px/1.5 '思源黑體','微軟正黑體'; color: #383838; background: #ffffff; border-radius: 0 15px 15px 15px; box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3); padding: 15px;}

#page5 .wrap-QA{display: inline-block; width: 50%; text-align: left; padding: 0 0 0 40px; letter-spacing: normal; }
#page5 .QA-single{ width:100%; text-align: left; background: #ffffff; padding: 0 15px; margin:0 0 24px 0; border-radius: 15px; transition: 0.4s; cursor: pointer; box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);}
#page5 .QQQ{position: relative; font: 600 24px/1.2 '思源黑體'; color: #383838; padding: 15px 0 15px 20px; transition: 0.4s;}
#page5 .QQQ.change,
#page5 .QQQ.change::before{color: #f8b551; transition: 0.4s;}
#page5 .QQQ::before{content:"▲"; position: absolute; font-size: 14px;color:#383838; left: 0px; top: calc(50% - 7px); transform: rotate(90deg); transition: 0.4s; }
#page5 .QQQ::after{content: ""; position: absolute; width: 0%; height: 2px; left: 0px; bottom: 0px; background: #f8b551; transition: 0.4s;}
#page5 .QQQ.change2,
#page5 .QQQ.change2::before{color: #f8b551; transition: 0.4s;}
#page5 .QQQ.change2::before{transform: rotate(180deg);}
#page5 .QQQ.change2::after{width: 100%; transition: 0.4s;}
#page5 .AAA{display:none; font: 400 20px/1.5 '思源黑體'; color: #383838; padding: 10px 0; }

/*手機板*/
@media screen and (max-width:1240px){
    #page1{padding: 0 30px 48px 30px;}
    #page2,
    #page3,
    #page4{padding: 80px 30px;}
    #page5{padding: 0 30px;}
}
@media screen and (max-width:1024px){
    header.header{height: auto; background: none;}
    header.header h1{display: block;}
    header.header h1 img{width: 100%;}
    h2{font-size: 38px;}

    #page1 h2{margin-bottom: 20px;}
    #page1 .special-content{padding: 3% 4% 0 4%;}
    #page1 .special-title{font-size: 28px;}
    #page1 .special-title::before{height:26px;}
    #page1 .special-txt span{font-size: 22px;}
    #page1 .special-txt{font-size: 20px;}
    #page1 .special:nth-child(2) .special-content::before{left: -48px; top: 20px; transform: scale(0.75);}
    #page1 .special:nth-child(3) .special-content::before{right: -75px; top: 18px; transform: scale(0.75);}
    #page1 .special:nth-child(4) .special-content::before{left: -90px; top: 18px; transform: scale(0.75);}

    #page2 p,
    #page3 p{font-size: 22px;}
    #page2 h3,
    #page3 h3{font-size: 26px;}
    #page2 .item-content-txt,
    #page3 .company-content-txt{font-size: 17px;}
    #page3 .single-company{width: 32%;}
    #page4 .wrap-logo{margin: 50px 0 0 0;}
    #page5 .wrap-QA{ padding: 0 0 0 20px;}
    #page5 .QQQ{font-size: 22px;}
    #page5 .wrap-page5{padding: 70px 0 60px 0;}
    #page5 .discuss-single{width: 90%;}
}
@media screen and (max-width:850px){
    #page1 .banner{padding: 18px 0 24px 0; margin: -70px 0 40px 0;}
    #page1 .banner p strong{font-size: 22px;}
    #page1 .banner p{font-size: 18px;}
    #page1 .banner::before{transform: scale(0.5);}
    #page1 .special-title{font-size: 26px;}
    #page1 .special-content{padding: 0% 3% 0 4%;}
    #page1 .special-txt{font-size: 18px;}
    #page1 .special-txt span{font-size: 20px;}
    #page1 .special:nth-child(2) .special-content::before,
    #page1 .special:nth-child(3) .special-content::before,
    #page1 .special:nth-child(4) .special-content::before{top: 0; transform: scale(0.65);}

    #page2 .wrap-item{flex-wrap: wrap;}
    #page2 .single-item{width: 48.5%; margin: 20px 0;}

    #page3 .single-company{width: 32%;}
    #page4 .logo{width: 24%;}
    #page4 .wrap-logo{margin: 32px 0 0 0;}
    #page3 .company-content{padding: 20px 12px 16px 12px;}
}
@media screen and (max-width:750px){
    h2{font-size: 35px;}
    #page1 .banner::before{transform: scale(0.4); top: -128px; left: 5px;}
    #page1 .banner p strong{font-size: 20px;}
    #page1 .banner p{font-size: 16px;}
    #page1 h2{margin-bottom: 0;}
    #page1 .special{margin: 38px 0;}
    #page1 .special-pic{width: 100%; border-radius: 15px;}
    #page1 .special-content{width: 100%; padding: 5% 4% 0 14%;}
    #page1 .special:nth-child(2) .special-content::before{left: 2px; transform: scale(0.7);}
    #page1 .special:nth-child(3) .special-content::before{left: -154px; top: -5px; transform: scale(0.7);}
    #page1 .special:nth-child(4) .special-content::before{left: -31px; transform: scale(0.7);}
    #page1 .special.reverse .special-pic{border-radius: 15px;}
    #page1 .special.reverse{display: inline-block; }
    #page1 .special.reverse .specialcontent{width: 100%; padding: 5% 4% 0 14%;}
    
    #page3 .wrap-company{flex-wrap: wrap; padding: 0 60px;}
    #page3 .single-company{width: 100%; margin: 0 0 40px 0;}
    #page4 .logo{width: 24.5%; margin: 10px 0;}
    #page2, #page3, #page4{padding: 70px 30px;}

    #page5 .wrap-page5,#page5 .wrap-QA{text-align: center;}
    #page5 .wrap-discuss,#page5 .wrap-QA{width: 100%; }
    #page5 .wrap-QA{margin-top: 60px; padding: 0}
    #page5 h2{text-align: center; margin: 0 0 24px 0;}
    #page5 .discuss-single{width: 100%;}
    #page5 .QA-single{margin: 20px 0 0 0;}
}
@media screen and (max-width:530px){
    h2{font-size: 32px;}
    #page1{padding: 0 20px 48px 20px;}
    #page2,
    #page3,
    #page4{padding: 60px 20px;}
    #page5{padding: 0 20px;}
    .break{display: block;}

    #page1 .banner{padding: 18px 10px 24px 10px; margin: -53px 0 40px 0;}
    #page1 .banner::before{transform: scale(0.3); top: -109px; left: -33px;}
    #page1 .banner p strong{font: 600 18px/1.5 '微軟正黑體'; }
    #page1 .banner p{font: 300 14px/1.5 '微軟正黑體';}
    #page1 .wrap-banner{margin-bottom: 10px;}
    #page1 .special-content{padding: 5% 0 0 20%;}
    #page1 .special:nth-child(2) .special-content::before{left: 8px;}
    #page1 .special:nth-child(3) .special-content::before{left: -104px; top: -5px;}
    #page1 .special:nth-child(4) .special-content::before{left: -19px;}

    #page2 p, #page3 p{font-size: 18px;}
    #page2 .wrap-item{margin: 24px auto 0 auto;}
    #page2 .single-item{width: 100%;}

    #page3 .wrap-company{padding: 0; margin: 0;}
    #page3 .single-company{margin: 40px 0 0 0;}

    #page4 .logo{width: 48%;}
    #page4 .logoName{font-size:15px;}
}
@media screen and (max-width:425px){
    .move-to-item,
    .move-to-company,
    .move-to-top{width: 55px; height: 55px; right: 10px; }
    .move-to-item{font: 500 18px/1.1 '思源黑體','微軟正黑體'; bottom: 140px; padding:10px 9px; }
    .move-to-company{font: 500 18px/1.1 '思源黑體','微軟正黑體'; bottom: 80px; padding:10px 9px;}
    .move-to-top{font: 500 18px/1.1 '思源黑體','微軟正黑體'; bottom: 20px; padding: 19px 2px; vertical-align: middle;}
    .move-to-top span{font-size: 12px;}

    h2::before{width: 40px; height: 40px; top: -15px; left: -20px;}
    #page1{padding: 0 0 48px 0;}
    #page1 .wrap-banner{margin-bottom: 40px;}
    #page1 .banner {margin: 0; border-radius: 0px;}
    #page1 .banner::before{top: -103px; left: -54px;}
    
    #page1 .wrap-special{padding: 0 20px;}
    #page1 .special{margin: 30px 0;}
    #page1 .special-content {padding: 20px 0 0 0;}
    #page1 .special-title{font-size: 24px;}
    #page1 .special-txt{font-size: 17px;}
    #page1 .special-txt span{font-size: 18px;}
    #page1 .special:nth-child(2) .special-content::before{left: 298px; top: -103px; transform: scale(0.6);}
    #page1 .special:nth-child(3) .special-content::before{left: 235px; top: -101px; transform: scale(0.6);}
    #page1 .special:nth-child(4) .special-content::before{left: 255px; top: -97px; transform: scale(0.6);}

    #page2 p, #page3 p{font-size: 16px; text-align: left;}

    #page5 .QQQ{font-size: 18px;}
    #page5 h2{margin-bottom: 20px;}
    #page5 .discuss-single-content{font-size: 15px;}
    #page5 .discuss-single-person-name{font-size: 24px;}
    #page5 .discuss-single-person-head{width: 50px; height: 50px;}
    #page5 .wrap-QA{margin-top: 40px;}
}
@media screen and (max-width:375px){
    h2 {font-size: 30px;}
    .btn a{width: 100%;}
    
    .nobreak{display: none;}
    .break375{display: block;}
    
    #page1 .special:nth-child(2) .special-content::before{left: 247px; top: -90px;}
    #page1 .special:nth-child(3) .special-content::before{left: 183px; top: -98px;}
    #page1 .special:nth-child(4) .special-content::before{left: 205px; top: -97px;}

    #page2 p, #page3 p{font-size: 14px;}
    #page2 .wrap-item{margin: 8px auto 0 auto;}
    #page2 .single-item{margin: 16px 0;}
    #page2 h3, #page3 h3{font-size: 24px;}
    #page2 .item-content{padding: 16px 10px;}
    #page2 .item-content-txt, #page3 .company-content-txt{font-size: 16px;}

    #page3 .company-content {padding: 16px 10px 14px 10px;}
    #page3 .single-company {margin: 28px 0 0 0;}
}
@media screen and (max-width:320px){
    .break320{display: block;}
    .break375{display: none;}
    .move-to-item,
    .move-to-company,
    .move-to-top{width: 50px; height: 50px; }
    .move-to-item{font: 500 16px/1.1 '思源黑體','微軟正黑體'; bottom: 120px; padding:9px; }
    .move-to-company{font: 500 16px/1.1 '思源黑體','微軟正黑體'; bottom: 65px; padding:9px;}
    .move-to-top{font: 500 16px/1.1 '思源黑體','微軟正黑體'; bottom: 10px; padding: 17px 2px; vertical-align: middle;}
    .move-to-top span{font-size: 12px;}

    #page1 .special:nth-child(2) .special-content::before{left: 199px;}
    #page1 .special:nth-child(3) .special-content::before{left: 140px;}
    #page1 .special:nth-child(4) .special-content::before{left: 163px;}
}

.st-alert-warning,
.st-alert-danger,
.st-alert-info,
.st-alert-success,
.st-alert-email {
  background: #FFFBEC;
  border: solid 2px #fbb949;
  padding: 8px 9px 8px 38px;
  margin: 10px 0;
  border-radius: 4px;
  line-height: 22px;
  font-size: 1.5rem;
  letter-spacing: 0.4px;
  color: #333;
  position: relative;
  text-align: left;
}

.st-alert-warning > i,
.st-alert-danger > i,
.st-alert-info > i,
.st-alert-success > i,
.st-alert-email > i {
  font-size: 2.5rem;
  color: #fbb949;
  position: absolute;
  top: 7px;
  left: 9px;
}

.st-alert-warning > span,
.st-alert-danger > span,
.st-alert-info > span,
.st-alert-success > span,
.st-alert-email > span {
  vertical-align: middle;
  font-weight: bold;
  color: #333333;
  font-size: 22px;
}