* { box-sizing: border-box;}
#mktContent{overflow: visible;}
a{text-decoration: none;}
/*版頭*/
header.header{height: 685px; background: url(../images/header.png) top center no-repeat;}
header.header h1{display: none;}
header.header::before{content: url(../images/header-girl.png); position: relative; top: 23px; left: 56%;}
/*進度條*/
.frame{width: 100%;}
.progress-bar{position: sticky; position: -webkit-sticky;display: block; text-align: center; top: 0px; z-index: 20; background: #ffffffa4; margin-top: 40px;overflow: hidden;}
.progress-bar ul{ position:relative; display:inline-flex;max-width: 1000px; width: 100%; justify-content: center; align-items: baseline; padding:12px 0; margin: 0 auto;} 
.progress-bar ul li{position: relative;display: inline-block;width: 20%; }
.progress-bar ul li::before{position: absolute; content: ""; width: 100%; height: 2px; left: 50%; top: 3px; background: #000000;}
.progress-bar ul li.d::before{content: none;}
.progress-bar ul li .point{display: block; width: 8px; height: 8px; background: #000000;border-radius: 99em;  transition: 0.4s; margin: 0 auto;}
.progress-bar ul li.here .point{ background: #000000; margin: 0 auto; transition: 0.4s; transform: scale(1.2);}
.progress-bar ul li .point-title{display: block; font: 400 18px/1 '思源黑體','微軟正黑體'; color: #0000008e; margin-top: 16px; cursor: pointer; transition: 0.4s;}
.progress-bar ul li.here .point-title{ color: #000000; transition: 0.4s; transform: scale(1.2);}


.page-all{width: 100%; overflow: hidden;}
/*page1*/
.page1{position: relative; width: 100%; background: url(../images/page1-bg.png) top center no-repeat; text-align: center; padding: 0 0 100px 0;}
.page1::before{content:"" ; background: url(../images/page1-fin.png) top center no-repeat;width: 100%;height:143px; bottom: -143px;left: 0; position: absolute; z-index: 5;}
.page1 .page1-content{max-width: 1200px; width: 100%; text-align: center; margin: 80px auto;} 
.page1 h2{margin-bottom: 60px;}
.page1 .item-all{ display: inline-flex; flex-direction: row; justify-content: space-between; align-items: stretch; width: 100%;}
.page1 .item-single{display: inline-block; width: 30%; margin: 20px 0;}
.page1 .item-single-title{margin: 20px 0;}
.page1 .item-single-title img{width: 50%; vertical-align: middle;}
.page1 .item-single-title p{display: inline-block; width: 48%; font: 400 32px/1.2 '思源黑體','微軟正黑體'; color: #403d33; text-align: left; padding: 0 0 0 16px; vertical-align: middle;} 
.page1 .item-single-image{width: 100%;}
.page1 .item-single-image img{width: 100%;}
.page1 .item-single-content{position: relative; width: 100%; font: 500 18px/1.5 '思源黑體','微軟正黑體';color: #403d33; text-align: center;  white-space: wrap; padding: 26px 10px; margin: 20px 0;}
.page1 .item-single-content::before{position: absolute; content: url(../images/page1-deco1.png); top: 0; left: 0;}
.page1 .item-single-content::after{position: absolute; content: url(../images/page1-deco2.png); bottom: 0; right: 0;}
.page1 .item-single-button{text-align: right; overflow: hidden;}

.page1 .item-single-button a{position: relative; display: inline-block; text-align: center; font: 400 20px/1 '思源黑體','微軟正黑體'; color: #ffffff; background: #95d3ca; padding: 10px 20px;}
.page1 .item-single-button a::before{content: "";position: absolute; height: 1px; width: 160%; left: -170%; top: 50%; z-index: -1; background: #403d33;}
/*page2*/
.page2{position: relative; width: 100%; background: url(../images/page2-bg.png) top center no-repeat,#00a0e9; padding: 180px 0 80px 0; text-align: center;}
.page2::before{content:""; position: absolute; background: url(../images/page2-fin.png) top center no-repeat;width: 100%;height:190px; bottom: -190px;left: 0; z-index: 5;}
.page2 .page2-content{max-width: 1200px; width: 100%; text-align: center; margin: 0 auto;}
.page2 .warning{width: 100%; display: inline-flex; flex-direction: row; justify-content: space-between; margin: 80px 0;}
.page2 .warning-single{display: inline-block; width: 23%; text-align: center;}
.page2 .warning-single h3{font: 500 30px/1 '思源黑體','微軟正黑體'; color: #ffffff; margin: 16px 0;}
.page2 .warning-single p{font: 300 18px/1.5 '思源黑體','微軟正黑體'; color: #ffffff;}

.page2 .item-all{display: inline-flex; width: 100%; flex-direction: row; flex-wrap: wrap;}
.page2 .item-single{display: inline-block; margin: 40px 0; text-align: left; width: 100%;
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    *word-spacing: -0.43em; 
    text-rendering: optimizespeed; }
.page2 .item-single-image{position: relative; display: inline-block; width: 290px; background: #95d3ca;}
.page2 .item-single-image img{width: 100%;}
.page2 .item-single-image .category{position: absolute; width: 65px; height: 65px; top:10px; left: 10px; background: #ffffff96; font: 300 20px/1.2 '思源黑體','微軟正黑體'; color: #403d33; text-align: center; border-radius: 99rem; letter-spacing: normal; padding: 8px;}
.page2 .item-single-image .category.ex{padding: 20px 0;}
.page2 .item-single-content{display: inline-block; width: 385px; background: #ffffff; letter-spacing: normal; padding: 24px 0; text-align: center;}
.page2 .item-single-content .famous{font: 400 18px/1 '思源黑體','微軟正黑體'; color: #403d33; margin: 10px 0 14px 0;}
.page2 .item-single-content .name{position: relative;}
.page2 .item-single-content .says{position: relative; font: 300 22px/1 '思源黑體','微軟正黑體'; color: #403d33; background: #b3efff; padding: 26px 0; margin: 16px 0 0 0;}
.page2 .item-single-content .says.ex{background: #b3fff3;}
.page2 .item-single-content .says::before{position: absolute; content: url(../images/page2-deco1.png); top: -10px; left: 18px;}
.page2 .item-single-content .says::after{position: absolute; content: url(../images/page2-deco2.png); bottom: -10px; right: 18px;}
.page2 .item-single.ex{text-align: right;}

.page2 .item-all h2{display: block; margin: 40px auto 30px auto;}
.page2 .item-single.tt{position: relative;}
.page2 .item-single.tt::before{content:url(../images/per4.png); position: absolute; right: 145px; top: 12px;}
.page2 .item-single.per1{position: relative;}
.page2 .item-single.per1::before{content:url(../images/per1.png); position: absolute; left: 140px; top: 12px;}
.page2 .item-single.per2{position: relative;}
.page2 .item-single.per2::before{content:url(../images/per2.png); position: absolute; right: 130px; top: 20px;}
.page2 .item-single.per3{position: relative;}
.page2 .item-single.per3::before{content:url(../images/per3.png); position: absolute; left: 44px; top: 20px;}

/*page3*/
.page3{position:relative; background: linear-gradient(#285c9d,#112058); padding: 280px 0 160px 0; text-align: center; }
.page3 .page3-content{ max-width: 1200px; width: 100%; margin: 0 auto;}
.page3 .page3-content::before{position: absolute; content:url(../images/bubbles.png); width: 100%; left: -60px; bottom: 60px;}
.page3 .warning{width: 100%; display: inline-flex; flex-direction: row; justify-content: space-between; margin: 80px 0;}
.page3 .warning-single{display: inline-block; width: 23%; text-align: center;}
.page3 .warning-single p{font: 300 18px/1.5 '思源黑體','微軟正黑體'; color: #ffffff; margin-top: 12px;}

.page3 .okok{position:relative; margin: 100px 0 20px 0;}
.page3 .okok::before,
.page3 .okok::after
{display: none; position: absolute; content: ""; background: url(../images/page3-item-shadow.png) bottom center no-repeat; bottom: 0; width: 67px; height: 100%; z-index: 5;}
.page3 .okok::before{left: 0;}
.page3 .okok::after{transform: rotate(180deg); right: 0;}
.page3 .item{display: inline-flex; flex-direction: row; justify-content: space-between; min-width: 1200px; width: 100%;}
/*白字*/
.page3 .item-single{position: relative;overflow: hidden; transition: 0.6s;}
.page3 .item-single::after{position: absolute; width: 100%; left: 0; top: 0; opacity: 1; transition: 0.6s;}
.page3 .item-single:nth-child(1)::after{content: url(../images/surf.png); }
.page3 .item-single:nth-child(2)::after{content: url(../images/scuba.png); }
.page3 .item-single:nth-child(3)::after{content: url(../images/sup.png);}
.page3 .item-single:hover::after{opacity: 0; transition: 0.6s;}
/*白色擋板*/
.page3 .item-single::before{position: absolute; content: ""; width: 100%; height: 185px; left: -92%; top: calc(50% - 92.5px); background: rgba(255,255,255,0.6); transition: 0.6s; z-index: 1;}
.page3 .item-single:hover::before{ left: 0; transition: 0.6s;}
/*圖片的hover*/
.page3 .item-single-img{position: relative; overflow: hidden; transition: 0.6s;}
.page3 .touch.item-single-img{-webkit-filter: blur(1.8px); transition: 0.7s;}
.page3 .item-single-img img{transition: 3s}
.page3 .touch.item-single-img img{transform: scale(1.15); transition: 7s;}
/*藍字*/
.page3 .item-single-text{position: absolute; width: 100%; left: 0; top: 0; transition: 0.6s; z-index:5; opacity:0;}
.page3 .item-single-text:hover{opacity: 1; transition: 0.6s; }


/*手機板*/
@media screen and (max-width:1400px){
    header.header::before{left: 60%;}
}
@media screen and (max-width:1200px){
    .page3{padding: 260px 15px 140px 15px;}
    .page3 .scroll{overflow: scroll;}
    .page3 .okok::before,
    .page3 .okok::after{display: block;}
}
@media screen and (max-width:1160px){
    .page1 .item-single{width: 28%;}
    .page1 .item-all{justify-content: space-around;}
    .page1 .item-single-title p{font-size: 27px;}
    .page1 .item-single-content{font-size: 16px;}
}
@media screen and (max-width:1024px){
    .page1 .item-single-title img{width: 45%;}
    h2{width: 100%;}
    h2 img{width: 470px;}
    .page1{padding: 0 0 5px 0;}
    .page2 .item-single,
    .page2 .item-single.ex{text-align: center;}
    .page2 .item-single.per1::before{left: -14px;}
    .page2 .warning-single img{width: 55%;}
    .page2 .warning-single h3{font-size: 28px; margin: 10px 0;}
    .page2 .warning-single p,
    .page3 .warning-single p{font-size: 15px;}
    .page2{padding: 160px 15px 5px 15px;}
    .page2 .item-single.tt::before{display: none;}
    .page2 .item-single.per2::before{top: 272px; right: -22px;}
    .page2 .item-single.per3::before{display: none;}
    .page3{padding: 240px 15px 120px 15px;}
    .page3 .warning-single img{width: 55%;}
    .page3 .warning{margin: 80px 0 55px 0;}
    
}
@media screen and (max-width:850px){
    header.header{height: auto; background: none;}
    header.header::before{display: none;}
    header.header h1{display: block;}
    header.header h1 img{width: 100%;}
}
@media screen and (max-width:768px){
    .page1 .item-all{flex-wrap: wrap;}
    .page1 .item-single{width: 420px;}
    .page1 .item-single-title p{font-size: 36px;}
    .page1 h2{margin-bottom: 20px;}
    .page2 .warning-single h3{font-size: 23px;}
    .page2 .warning{flex-wrap: wrap; margin: 50px 0 0 0;}
    .page2 .warning-single{width: 50%; margin-bottom: 30px;}
    .page2 .warning-single img{width: 40%;}
    .page3 .warning{flex-wrap: wrap;}
    .page3 .warning-single{width: 50%; margin-bottom: 50px;}
    .page3 .warning-single img{width: 40%;}
    .page3 .warning{margin: 60px 0 0 0;}
    .page3 .okok{margin: 70px 0 20px 0;}
    .page1 .item-single-button a{padding: 12px 32px;}
    .page2 .item-single-content{width: 350px;}
    .page2 .item-single.per2::before{display: none;}

    .page1::before{background: url(../images/page1-fin-m.png) top center no-repeat; background-size: 100% auto;}
    .page2::before{background: url(../images/page2-fin-m.png) top center no-repeat; background-size: 100% auto;}

}
@media screen and (max-width:670px){
    .page2 .item-single-image{width: 100%;}
    .page2 .item-single-content{width: 100%;}
    .page2 .item-all{text-align: center; margin: 0 auto;}
    .page2 .item-single{width: 66%; margin: 20px auto;}
    .page2 .item-single-image{height: 300px; overflow: hidden;}
    .page3{padding: 160px 15px 120px 15px;}
    .page2{padding: 160px 15px 60px 15px;}
}
@media screen and (max-width:550px){
    .progress-bar ul li{width: 24%;}
    .progress-bar ul li .point-title{font-size: 16px; margin-top: 10px;}
    h2 img {width: 420px;}
    .page1 h2{margin-bottom: 10px;}
    .page2 .warning-single p, .page3 .warning-single p{font-size: 13px;}
    .page2 .item-single{width: 80%;}
    .page1 .item-single{width: 80%;}
}
@media screen and (max-width:425px){
    h2 img{width: 90%;}
    .page2{padding: 100px 15px 60px 15px;}
    .page2 .item-single{width: 90%;}
    .page2 .item-single-image{height: 276px;}
    .page3{padding: 85px 15px 100px 15px;}
    .page3 .okok{margin: 50px 20px 0px 20px;}
    .page1 .item-single-title p{font-size: 32px;}
    .page3 .warning-single img{width: 58%;}
}
@media screen and (max-width:375px){
    .progress-bar ul li .point-title{font-size: 14px;}
    .page1{padding: 0 20px 5px 20px;}
    .page2{padding: 90px 20px 60px 20px;}
    .page3{padding: 85px 15px 80px 15px;}
    .page1 .item-single{width: 100%;}
    .page1 .page1-content{margin: 40px auto;}
    .page1 .item-single-title p{font-size: 30px;}
    .page1 .item-single-button a::before{width: 165%;}
    .page2 .item-single{width: 100%;}
    .page2 .item-all h2{margin: 25px auto;}
    .page2 .item-single-content .says{margin-top: 3px;}
    .page2 .item-single-content{ padding: 14px 0 18px 0;}
    .page2 .warning-single p{display: none;}
    .page3 .okok{margin: 70px 0px 20px 0px;}
    .page3 .item-single-img img{width: 100%;}
    .page3 .item-single{width: 345px;}
    .page3 .warning{margin-top: 40px;}
    .page3 .okok{margin: 40px 0 20px 0;}
    h2 img{width: 100%;}
  
}
@media screen and (max-width:320px){
    .page1 .item-single{width: 300px;}
    .page3 .item-single{width: 290px;}
    .page3 .item-single::after,
    .page3 .item-single-text{left: -31px; top:-26px;}
    .page3{padding: 70px 15px 40px 15px;}
    .page1 .item-single-content{font-size: 15px;}
    .page1 .item-single-title p{font-size: 28px;}
    .page2{padding: 68px 20px 60px 20px;}
    .page2 .warning{margin: 36px 0 0 0;}
    .page2 .item-single-image{height: 235px;}
    .page2 .item-single-content .says{font-size: 19px; padding: 18px 0;}
    .page2 .item-single-content .name img{width: 60%;}
    
}