@charset "utf-8";
/* CSS Document */
*{ padding:0; margin:0; font-family:"微軟正黑體", "新細明體"; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.scope{ max-width:1280px; margin:0 auto; }

.title{ background:#83afdc; text-align:center; padding:50px 10px; }
.title img{ max-width:100%; margin:0 auto; }

/*input,button,select{ appearance: none; -moz-appearance: none; -webkit-appearance: none; }*/

/**/
.mobimg{ display:none !important; }

/*浮動按鈕*/
.pageTop { position: fixed; cursor: pointer; z-index: 20; left: 50%; margin-left:640px; top:0px; bottom:0px; margin-top:auto; margin-bottom:auto; text-align: right; height:328px; width:44px; }
.pageTop a{ display:block; margin:0 0 10px 0; }
.pageTop img{ width:100%; }
	
.pageTop .webdis01{ display:none; }

/*block01*/
.block01{ font-size:0; }
.block01 .grids{ width:50%; display:inline-block; vertical-align:top; }
.block01 .grids img{ width:100%; }
.block01 .obox{ position:relative; display:flex; padding:40px 0; }
.block01 .obox .o1{ display:block; background:#fdf7f9; width:50%; position:absolute; top:0; bottom:0; left:0; margin:auto; }
.block01 .obox .o2{ display:block; background:#f6fbff; width:50%; position:absolute; top:0; bottom:0; right:0; margin:auto }
.block01 .obox .obtn{ width:100%; text-align:center; position:relative; z-index:1;  }
.block01 .obox .obtn img{ max-width:100%; }

/*block02*/
.block02{ padding:50px 10px; font-size:0;
background: rgb(252,252,252);
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(236,232,229,1) 100%);
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(236,232,229,1) 100%);
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(236,232,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ece8e5',GradientType=0 ); }
.block02 .banner{ text-align:center; }
.block02 .banner img{ max-width:100%; }
.block02 .grangs{ width:92%; margin:0 auto; }
.block02 .grids{ display:inline-block; vertical-align:bottom; width:50%; }
.block02 .grids img{ max-width:100%; }
.block02 .btns{ text-align:center; padding:40px 0 0 0; }
.block02 .btns img{ width:50%; max-width:333px; }
.block02 .titles{ text-align:center; margin: 0 0 20px 0; }
.block02 .titles img{ max-width:100%; }
.block02 .bsbox{ text-align:center; }
.block02 .bsbox .bsgrids{ display:inline-block; vertical-align:bottom; width:33.3334%; padding:0 15px; }
.block02 .bsbox .bsgrids img{ max-width:100%; }
.block02 .bsbox .bsgrids .dis01{ display:block; }
.block02 .bsbox .bsgrids .dis02{ display:none; }
.block02 .bsbox .bsgrids:hover .dis01{ display:none; }
.block02 .bsbox .bsgrids:hover .dis02{ display:block; }

/*Version.2*/
.block02 .bsbox .bsgridsV2{ position: relative; display:inline-block; vertical-align:bottom; width:33.3334%; padding:0 15px; }
.block02 .bsbox .bsgridsV2 img{ max-width:100%; }
.block02 .bsbox .bsgridsV2 .dis01,
.block03 .links.bsgridsV2{ position: relative; }
.block02 .bsbox .bsgridsV2 .dis02,
.block03 .links.bsgridsV2 .dis02{ position: absolute; top: 0px; left: calc( 50% ); padding: 0 15px;
    transform: scale(1) translateX(-50%); 
    -moz-transform: scale(1) translateX(-50%); 
    -webkit-transform: scale(1) translateX(-50%); 
    -ms-transform: scale(1) translateX(-50%);  }
.block02 .bsbox .bsgridsV2 .dis03,
.block03 .links.bsgridsV2 .dis03{ position: absolute; top: 0px; left: calc( 50% ); padding: 0 15px;
    transform: scale(1) translateX(-50%); 
    -moz-transform: scale(1) translateX(-50%); 
    -webkit-transform: scale(1) translateX(-50%); 
    -ms-transform: scale(1) translateX(-50%); 
    animation-duration: 1s; animation-iteration-count: infinite; animation-name: iconHand;
    -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -moz-animation-name: iconHand;
    -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: iconHand;
    -ms-animation-duration: 1s; -ms-animation-iteration-count: infinite; -ms-animation-name: iconHand; }
    /*.block02 .bsbox .bsgridsV2:hover .dis01{ top }*/
.block02 .bsbox .bsgridsV2:hover .dis02,
.block03 .links.bsgridsV2:hover .dis02{ transform: scale(1.1) translateX(-50%); top: -5px; left: calc( 50% + 15px ); }
.block02 .bsbox .bsgridsV2:hover .dis03,
.block03 .links.bsgridsV2:hover .dis03{ transform: scale(1.1) translateX(-50%); top: 25px; left: calc( 50% + 15px ); }

.block03 .links.bsgridsV2 .dis02,
.block03 .links.bsgridsV2 .dis03 { display: block; }
.block03 .links.bsgridsV2:hover .dis01 { display: block; }
.block03 .links.bsgridsV2:hover .dis02 { top: 7.5px; }
.block03 .links.bsgridsV2:hover .dis02,
.block03 .links.bsgridsV2:hover .dis03{ left: calc( 50% + 20px ); }

@keyframes iconHand{
    0%{ top: 0px; }
    50%{ top: 6px; }
    100%{ top: 0px; }
}
@-moz-keyframes iconHand{
    0%{ top: 0px; }
    50%{ top: 6px; }
    100%{ top: 0px; }
}
@-webkit-keyframes iconHand{
    0%{ top: 0px; }
    50%{ top: 6px; }
    100%{ top: 0px; }
}
@-ms-keyframes iconHand{
    0%{ top: 0px; }
    50%{ top: 6px; }
    100%{ top: 0px; }
}

@media screen and (max-width:767px){
    .block02 .bsbox .bsgridsV2{ width:100%; }
    .block02 .bsbox .bsgridsV2:hover .dis02{ transform: scale(1) translateX(-50%); top: 0; left: calc( 50% ); }
    .block02 .bsbox .bsgridsV2:hover .dis03{ transform: scale(1) translateX(-50%); top: 0; left: calc( 50% ); }
}


/*block03*/
.block03{ background:#dbe5ee; padding:50px 10px; text-align:center; }
.block03 .titles{ text-align:center; }
.block03 .titles img{ max-width:100%; }
.block03 .gbox{ display:inline-block; font-size:0; }
.block03 .grids{ display:inline-block; vertical-align:top; padding:0 10px; max-width:50%; }
.block03 .grids img{ max-width:100%; }
.block03 .grids:nth-child(2){ margin:55px 0 0 0; }
.block03 .grids:nth-child(4){ margin:50px 0 0 0; }

.block03 .imgs{ text-align:center; }
.block03 .imgs img{ max-width:100%; }
.block03 .imgs .dismob{ display:none; }
.block03 .links{ display:inline-block; max-width:588px; margin-top:40px; }
.block03 .links img{ width:100%; }
.block03 .links .dis01{ display:block; }
.block03 .links .dis02{ display:none; }
.block03 .links:hover .dis01{ display:none; }
.block03 .links:hover .dis02{ display:block; }

/*block04*/
.block04{
position:relative;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(209,209,211,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(209,209,211,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(209,209,211,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d1d3',GradientType=0 );}

.block04 .ranges{ padding:50px 0; }
.block04 .btnleft{ position:absolute; left:10px; border-style:solid; border-color:transparent #fff transparent transparent; border-width:72px 32px 72px 0; top:50%; margin-top:-36px; cursor:pointer; z-index:99; }
.block04 .btnright{ position:absolute; right:10px; border-style:solid; border-color:transparent transparent transparent #fff; border-width:72px 0 72px 32px; top:50%; margin-top:-36px; cursor:pointer; z-index:99; }
.block04 .grids .mtitles{ padding:0 35%; text-align:center; position:relative; margin: 0 0 30px 0; }
.block04 .grids .mtitles img{ max-width:100%; }
.block04 .grids .mtitles .icon{ position:absolute; right:26%; top:20px; width:8%; }
.block04 .grids .b4box{ text-align:center; width:65%; margin:auto; }
.block04 .grids .b4box .b4img{ display:inline-block; vertical-align:top; width:44%; max-width:559px; }
.block04 .grids .b4box .b4img img{ max-width:100%; }
.block04 .grids .b4box .b4mv{ display:inline-block; vertical-align:top; width:40%; max-width:481px; }
.block04 .grids .b4box .b4mv .mvbox{ margin:0 0 20px 0; }
.block04 .grids .b4box .b4mv .mvbox .mvtitle img{ max-width:100%; }
.block04 .grids .b4box .b4mv .mvbox .mars{ margin:5px 0 0 50px; }
.block04 .grids .b4box .b4mv .mvbox .videos{ border:5px solid #05498f; width:100%; }
.block04 .grids .b4box .b4mv .mvbox .videos .vs{ position:relative; padding-bottom:56%; width:100%; height:0; }
.block04 .grids .b4box .b4mv .mvbox .videos .vs iframe{ position:absolute; width:100%; height:100%; left:0; top:0; }
.block04 .grids .b4box .b4mv .bsimg{ display:block; }
.block04 .grids .b4box .b4mv .bsimg img{ max-width:100%; }
.block04 .grids .b4box .b4fea{ text-align:center; font-size:0; }
.block04 .grids .b4box .b4fea .bgrids{ display:inline-block; vertical-align:middle; margin:0 20px; width:14%; max-width:175px; }
.block04 .grids .b4box .b4fea .bgrids img{ max-width:100%; }
.block04 .grids .b4box .bmore{ text-align:center; padding:30px 0 0 0; }
.block04 .grids .b4box .bmore img{ max-width:262px; width:22%; margin:0 auto; }
.block04 .grids .b4box .b6fea{ text-align:center; padding:0 50px; }
.block04 .grids .b4box .b6fea img{ max-width:100%; }
.block04 .grids .b4box .b6fea_feat{ text-align:center; padding:40px 50px 20px 50px; }
.block04 .grids .b4box .b6fea_feat img{ max-width:100%; margin:0 auto; }
.block04 .grids .b4box .b6fea_feat_1{ text-align:center; padding:40px 50px 20px 50px; }
.block04 .grids .b4box .b6fea_feat_1 img{ max-width:100%; margin:0 auto; }

/*block05*/
.block05{ background:#adc7e8; padding:60px 20px; }
.block05 .titles{ text-align:center; }
.block05 .titles img{ max-width:100%; }
.block05 .mvbox{ border:7px solid #fff; max-width:900px; margin:30px auto 0 auto; }
.block05 .mvbox .mvs{ width:100%; height:0; position:relative; padding-bottom:56%; }
.block05 .mvbox .mvs iframe{ position:absolute; width:100%; height:100%; left:0; top:0; }
.block05 .textbox{ text-align:center; padding:20px 0 0 0; }
.block05 .textbox img{ max-width:100%; margin:0 auto; }

/*block06*/
.block06{ background:#fff; padding:50px 0 60px 0; }
.block06 .banner{ display:block; width:100%; max-width:1000px; margin:auto; }
.block06 .banner img{ width:100%; }
.block06 .mar{ max-width:1130px; margin:0 auto; }
.block06 .titles{ text-align:center; margin:0 0 45px 0; }
.block06 .titles img{ max-width:100%; }
.block06 .bTable{ display:table; width:100%; }
.block06 .bTable .trs{ display:table-row; }
.block06 .bTable .ths{ display:table-cell; background:#c1e0fb; vertical-align:top; font-size:28px; color:#333; padding:20px; width:260px; border-bottom:4px solid #fff; }
.block06 .bTable .ths .re{ color: #e53081; }
.block06 .bTable .tds{ display:table-cell; background:#e9f2f7; vertical-align:top; font-size:28px; color:#333; padding:20px; border-bottom:4px solid #fff; }
.block06 .bTable .grids{ display:inline-block; vertical-align:top; padding:5px 0; }
.block06 .bTable .grids.maright{ margin:0 20px 10px 0; }
.block06 .bTable .grids .input,.block06 .bTable .grids .select{ border:1px solid #ccc; font-size:26px; width:100%; padding:0 10px; }
.block06 .bTable .grids.wh0{ width:100%; }
.block06 .bTable .grids.wh1{ width:50%; }
.block06 .bTable .grids.wh2{ width:30%; }
.block06 .bTable .grids.wh4{ width:45%; }
.block06 .bTable .grids .txt{ font-size:18px; padding:10px 0 0 0; }
.block06 .bTable .imgbox img{ max-width:100%; }
.block06 .bTable .ops{ font-size:24px; }
.block06 .bTable .ops .radio { display: inline-block;  padding-right: 20px; font-size: 23px; line-height: 49px; cursor: pointer;  color: #363535;  white-space: nowrap;}
.block06 .bTable .ops input { display:none; }
.block06 .bTable .ops input[type="radio"] { display: none; }
.block06 .bTable .ops .outer { height: 20px; width: 20px; display: inline-block; vertical-align: middle; border: 2px solid #333; border-radius: 50%; }
.block06 .bTable .ops .inner { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; height: 12px; width: 12px; -webkit-transform: scale(0); transform: scale(0); display: block; margin: 2px; border-radius: 50%; background-color: #36a1ff; }
.block06 .bTable .ops input:checked + .outer { border: 2px solid #36a1ff; }
.block06 .bTable .ops input:checked + .outer .inner { -webkit-transform: scale(1); transform: scale(1); opacity: 1;}
.block06 .bTable .ops .texts{ display:inline-block; vertical-align:middle; }

.block06 .codes{ padding:40px 0 0 0; text-align:center; }
.block06 .codes .t1{ display:inline-block; vertical-align:middle; font-size:24px; }
.block06 .codes .t2{ display:inline-block; vertical-align:middle; }
.block06 .codes .t2 input{ border: 1px solid #ccc; font-size: 30px; }
.block06 .codes .t3{ display:inline-block; vertical-align:middle; }
.block06 .codes .t4{ display:inline-block; vertical-align:middle; }

.block06 .dtxts{ font-size:24px; text-align:center; padding:40px 0 0 0; }
.block06 .dtxts a{ color: #003399; }
.block06 .btn{ text-align:center; padding:40px 0 0 0; }
.block06 .btn button{ background-color: #42569f; text-decoration: none; padding: 10px 30px; color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; border: none; font-size:28px; cursor: pointer; }
.block06 .ptxt{ background:#fadbea; font-size:24px; color:#333; padding:5px 10px; margin:70px 0 0 0; }
.block06 .buybtn{ text-align:center; padding:40px 0 0 0; }
.block06 .buybtn .btns{ display:inline-block; }
.block06 .buybtn .btns img{ max-width:560px; }


/*block07*/
.block07{ background:#abc5e6; }
.block07 .titles{ display:block; padding:40px 10px 0 10px; text-align:center; }
.block07 .titles img{ max-width:100%; }
.block07 .imgs{ padding:40px; }
.block07 .imgs img{ max-width:100%; }

/*光箱*/
.lightbox{ position:fixed; z-index:999999; top:0; left:0; bottom:0; right:0; margin:auto;  }
.lightbox .mar{ position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; }
.offblack{ background:rgba(0,0,0,0.8); position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; z-index:1; }
.lightbox .bgs{ position:absolute; z-index:10; padding:60px 40px; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; border:4px solid #fff; max-width:900px; width:100%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);
background: rgb(252,252,252); 
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(236,232,229,1) 100%);
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(236,232,229,1) 100%);
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(236,232,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ece8e5',GradientType=0 ); }
.lightbox .proimg{ position:absolute; transform:translateY(-95%); -webkit-transform:translateY(-95%); -moz-transform:translateY(-95%); left:0; width:160px; }
.lightbox .proimg.wh1{ width:140px; }
.lightbox .proimg img{ width:100%; }
.lightbox .close{ width:195px; position:absolute; bottom:-90px; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); }
.lightbox .close img{ cursor:pointer; width:100%; }

.lightbox .pro_1{ font-size:0; margin-left:-35px; }
.lightbox .pro_1 .progrids{ display:inline-block; vertical-align: middle; width:50%; padding-left:35px; }
.lightbox .pro_1 .progrids img{ width:100%; }
.lightbox .pro_1 .mov{ width:100%; height:0; padding-bottom:56%; position:relative; margin-top:15px; }
.lightbox .pro_1 .mov iframe{ position:absolute; top:0; left:0; margin:auto; width:100%; height:100%; }

.lightbox .title-mv{ margin-bottom:20px; text-align:center; background: #83afdc; padding:15px 0; font-size:0; }
.lightbox .promv{ width:100%; padding-bottom:40%; position:relative; }
.lightbox .promv iframe{ position:absolute; top:0; left:0; margin:auto; width:100%; height:100%; }

/*================================●●●●●●●●●●●●電腦●●●●●●●●●●●●================================*/
@media screen and (max-width:1400px){
.pageTop{ left:auto; margin-left:auto; right:0px; }
}
/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
/*block04*/
.block04 .grids .mtitles{ padding:0 25%; }
.block04 .grids .mtitles .icon{ right:12%; width:10%; }
.block04 .grids .b4box{ width:80%; }

/*block06*/
.block06 .bTable .grids.wh1{ width:100%; }
.block06 .bTable .grids.wh4{ width:100%; }
.block06 .bTable .grids .txt{ padding:0; }
}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
/**/
.pcimg{ display:none !important; }
.mobimg{ display:block !important; }

.title{ padding:20px 10px; }
.title img{ width:70%; min-width:225px; }

/*浮動按鈕*/
.pageTop { position: fixed; cursor: pointer; z-index:20; left:auto; right:0; margin: 0px; bottom:0px; top:auto; height:30px; text-align: right; width:auto; z-index:99999; }
.pageTop .webdis01{ display:inline-block; }
.pageTop .webdis02{ display:none; }
.pageTop .webdis01 img{ width:136px; }

/*block01*/
.block01{ position:relative; z-index:999; }
.block01 .grids{ display:block; width:auto; }

.block01 .obox .o1{ display:none; }
.block01 .obox .o2{ display:none; }
.block01 .obox .obtn img{ width:80%; }

/*block02*/
.block02{ position:relative; z-index:999; }
.block02 .grids{ display:block; width:100%; padding:30px 0 0 0; }
.block02 .bsbox .bsgrids{ display:block; width:100%; margin-bottom: 40px; }
.block02 .bsbox .bsgrids:last-child{ margin:0; }

/*block03*/
.block03{ position:relative; z-index:999; }
.block03 .titles img{ margin:0 auto; }
.block03 .grids{ width:100%; max-width:483px; margin:0 0 15px 0; }
.block03 .grids:nth-child(2){ margin:0 0 15px 0; }
.block03 .grids:nth-child(4){ margin:0 0 15px 0; }

.block03 .imgs .dismob{ display:block; margin:auto; }
.block03 .imgs .dispc{ display:none; }

/*block04*/
.block04 .ranges{ padding:25px 0; }
.block04 .grids{ padding:10% 0 0 0; }
.block04 .grids .mtitles{ padding:0 15px 15px 15px; }
.block04 .grids .mtitles .icon{ right:5px; top:-40%; width:20%; }
.block04 .grids .b4box .b4img{ width:80%; }
.block04 .grids .b4box .b4mv{ width:75%; }
.block04 .btnright{ border-width: 36px 0 36px 20px; }
.block04 .btnleft{ border-width: 36px 20px 36px 0; }
.block04 .grids .b4box{ width:auto; }
.block04 .grids .b4box .b4fea .bgrids{ width: 30%; margin: 0 5px; }
.block04 .grids .b4box .bmore img{ width:50%; }
.block04 .grids .b4box .b6fea_feat_1{ padding: 40px 0px 20px 0px; }

/*block05*/
.block05{ position:relative; z-index:999; }

/*block06*/
.block06{ padding:40px 15px; position:relative; z-index:999; }
.block06 .bTable{ display:block; }
.block06 .bTable .trs{ display:block; }
.block06 .bTable .ths{ display: block; width: auto; background-color: #eef7fd; padding: 10px 10px 0 10px; border-bottom: none; color: #42569f; font-weight: bold; font-size:20px; }
.block06 .bTable .tds{ display: block; padding:0 10px 10px 10px; background-color: #eef7fd; border-bottom: 2px solid #fff; font-size:0; }
.block06 .bTable .grids .input, .block11 .bTable .grids .select{ font-size:18px; }
.block06 .bTable .grids.wh1{ width:100%; }
.block06 .bTable .grids.wh3{ width:50%; padding-right:10px; }
.block06 .bTable .grids.wh4{ width:100%; }
.block06 .bTable .grids .txt{ padding:0; font-size:14px; }
.block06 .bTable .grids .input, .block06 .bTable .grids .select{ font-size:18px; }
.block06 .bTable .ops{ font-size:16px; }
.block06 .bTable .ops .radio{ font-size:16px; line-height: 30px; }
.block06 .bTable .ops .outer{ border:1px solid #333; width:16px; height:16px; }
.block06 .bTable .ops .inner{ width:8px; height:8px; }

.block06 .codes .t1{ font-size:16px; display:block; text-align:center; padding:0 0 5px 0; }
.block06 .codes .t2 input{ font-size:18px; width:150px; }
.block06 .dtxts{ font-size:16px; text-align:left; padding: 20px 0 0 0; }
.block06 .bTable .imgbox{ width:160px; }
.block06 .btn{ padding:20px 0 0 0; }
.block06 .btn button{ font-size:18px; }
.block06 .ptxt{ margin:40px 0 0 0; font-size:18px; }
.block06 .buybtn{ padding:40px 0 0 0; }
.block06 .buybtn .btns img{ max-width:320px; width:100%; }

/*光箱*/
.lightbox{ display:block; overflow: auto; }
.lightbox .mar{ display:block; overflow: auto; height: 100vh; }
.lightbox .bgs{ margin:0; width:auto; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; padding: 20px; transform:none; -webkit-transform:none; -moz-transform:none; top:15px; left:15px; right:15px; }
.lightbox .proimg{ transform: none; -webkit-transform: none; -moz-transform:none; width:100px; position:static; margin:auto; width:160px; }
.lightbox .pro_1 .progrids{ display:block; width:auto; margin: 0 0 40px 0; }
.lightbox .pro_1 .progrids:last-child{ margin:0; }
.lightbox .close{ width:120px; bottom: -70px; }

.offblack{ position:fixed; }

}