.wrapper {
    position: relative;
    width: 100%;
    text-align: left;
    font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    transition: all 0.2s; overflow: hidden; 
}

.wrapper img {
    border: 0;
    vertical-align: top; width: 100%;
}
.wrapper .mainArea{width: 100%; max-width: 1220px; margin: 0 auto;  position: relative;}


/*.bg{position: absolute; top: 0; background: url(../images/xx.jpg) center top no-repeat; width: 100%; height: 4015px;}*/



.main h1{background: url(../images/bgMain.jpg) center top no-repeat; height: 744px; text-indent: -9999px;}
.main p{position: absolute; left: 50%;}
.main p.p1{top: 552px;
    margin-left: -580px;}
.main p.p2{top: 586px;
    margin-left: -486px; text-align: right;}
.main p.p3{top: 603px;
    margin-left: 317px;}



.btnArea{height: 195px; background-color: #fff;}

.btnArea .btnCover{width: 108%; position: absolute;
    margin: 117px 0 0 -3.4%;}
.btnArea .btnCover .dd{position: absolute; width: 100px; z-index: 99;}
.btnArea .btnCover .d1{ left: 0;     top: -32px;}
.btnArea .btnCover .d2{ right: 0;     top: -14px;}
.btnArea .tabs-nav{position: absolute;     top: 65px;
    left: 35px;}
.btnArea .tabs-nav li{float: left; position: relative;
    margin: 0 0 0 40px; transition: all 0.2s; cursor: pointer;}
.btnArea .tabs-nav li:hover{transform: translateY(-15%);}

.btnArea .tabs-nav li:after{content: "";  position: absolute; left: 0; top: 0;  background: rgba(0,0,0,0.4); width: 100%; height: 100%;}
.btnArea .tabs-nav li:hover:after{display: none;}

.btnArea .tabs-nav li.active{transform: translateY(-15%);}
.btnArea .tabs-nav li.active:after{display: none;}

.btnArea.fixed{position: fixed; top: 0; z-index: 99;     height: 72px; /*box-shadow: 0px 3px 3px rgba(0,0,0,0.2);*/ border-bottom: 2px dashed;}
.btnArea.fixed .tabs-nav{top: 24px;     margin-left: 115px;}
.btnArea.fixed .btnCover{margin: 55px 0 0 -3.4%; display: none;}
.btnArea.fixed  .tabs-nav li {width: 200px;}






.contentArea{ background: url(../images/bgBottom.jpg) no-repeat; background-position: center 640px ;}
.contentArea .area{    margin-bottom: 55px;}

.contentArea .mainArea{overflow: hidden;}
.contentArea .mainArea .intro{float: left;}
.contentArea .mainArea .carrier{float: left;}
.contentArea .mainArea .pic{}
.contentArea .mainArea .more{float: left;}

.contentArea .title{height: 677px; background-position: center 8px; background-repeat: no-repeat; position: relative;}
.contentArea .titleA{background-image: url(../images/bgA.jpg);}
.contentArea .titleB{background-image: url(../images/bgB.jpg);}
.contentArea .titleC{background-image: url(../images/bgC.jpg);}
.contentArea .titleD{background-image: url(../images/bgD.jpg);}

.contentArea .title h2{display: inline-block;
    position: absolute;
    left: 50%;
    margin: 164px 0 0 217px;
    text-indent: -74px;}
.contentArea .title.titleC h2 , .contentArea .title.titleD h2{margin: 145px 0 0 217px;}

.contentArea .title p{display: inline-block;     letter-spacing: -0.05em;
    left: 50%;
    position: absolute;
    margin: 527px 0 0 -342px;}




.contentArea .intro{width: 690px;
    display: inline-block;
    margin: 58px 0 0 0;}

.contentArea .intro h5{border-bottom: solid 4px; padding: 2px 0 5px;}

.contentArea #work01 .intro h5 , .contentArea #work01 .more a , .contentArea #work01 .more:after { color: #00b589; border-color:#00b589;}
.contentArea #work02 .intro h5 , .contentArea #work02 .more a , .contentArea #work02 .more:after { color: #00b589; border-color:#00b589;}
.contentArea #work03 .intro h5 , .contentArea #work03 .more a , .contentArea #work03 .more:after { color: #00b589; border-color:#00b589;}
.contentArea #work04 .intro h5 , .contentArea #work04 .more a , .contentArea #work04 .more:after { color: #00b589; border-color:#00b589;}


.contentArea .intro p{padding: 14px 0;
    line-height: 1.2;}

.contentArea .mainArea .pic{display: inline-block; width: 470px; margin: 120px 0 0 22px; position: relative;}
.contentArea .mainArea .pic .tape{position: absolute; opacity: .7;     width: 17%; right: -4%;
    top: -6%;}
.contentArea .mainArea .pic .tape:last-child {    left: -3%;
    top: 88%;}


.contentArea .more {display: block; width: 100%;
    text-align: right;
    padding-right: 35px;
    margin: 13px 0 0 0;
    }

.contentArea .more a{background: #fff;  padding: 0 10px;     display: inline-block; transition: all 0.2s; text-decoration: underline;}
.contentArea .more a:hover{transform: translateX(5px);}

.contentArea .more:after{content: '';
    border-bottom: dotted 2px;
    width: 90%;
    display: inline-block;
    float: left;
    margin: -8px 0 0 0;}





.contentArea .decoration{position: absolute; width: 100%;}
.contentArea .decoration img{position: absolute; left: 50%; width: auto;}
.contentArea .decoration img.dA_1{
    top: 844px;
    margin-left: 608px;}
.contentArea .decoration img.dA_2{
    top: 1632px;
    margin-left: -962px;}

.contentArea .decoration img.dB_1{top: 910px; margin-left: 640px;}
.contentArea .decoration img.dB_2{top: 1294px; margin-left: -950px;}
.contentArea .decoration img.dB_3{top: 1335px; margin-left: -914px;}
.contentArea .decoration img.dB_4{top: 2523px; margin-left: 690px;}
.contentArea .decoration img.dB_5{top: 2570px; margin-left: 690px;}

.contentArea .decoration img.dC_1{top: 1093px; margin-left: 735px;}
.contentArea .decoration img.dC_2{top: 1120px; margin-left: 610px;}
.contentArea .decoration img.dC_3{top: 1240px; margin-left: -740px;}
.contentArea .decoration img.dC_4{top: 1565px; margin-left: -1025px;}
.contentArea .decoration img.dC_5{top: 1647px; margin-left: 610px;}
.contentArea .decoration img.dC_6{top: 2313px; margin-left: 634px;}
.contentArea .decoration img.dC_7{top: 3130px; margin-left: 670px;}


.contentArea .decoration img.dD_1{top: 1200px; margin-left: -1000px;}
.contentArea .decoration img.dD_2{top: 1467px; margin-left: 610px;}
.contentArea .decoration img.dD_3{top: 2107px; margin-left: -1000px;}
.contentArea .decoration img.dD_4{top: 3148px; margin-left: 554px;}



a.btnActivity{display: block; position: absolute; top: 0; left: 50%; margin: 375px 0 0 484px; 
    animation:btnActivity 0.4s linear infinite alternate; transition: all 0.1s; width: 336px;
}

a.btnActivity img.btnLarge{display: block;}
a.btnActivity img.btnSmall{display: none;}

@keyframes btnActivity {
   from {filter:  drop-shadow(5px 5px 0px rgba(0,0,0,0.3)); }
     to {filter: drop-shadow(5px 5px 0px rgba(0,0,0,0.8)); transform: scale(0.97);}
}
a.btnActivity:hover{animation: paused; }

a.btnActivity.fixed{left: inherit; animation:btnActivity2 0.4s linear infinite alternate;
    width: 15%;
    right: 0;
    position: fixed;
    z-index: 99;
    margin: 85px 0 0 0;}
a.btnActivity.fixed img.btnLarge{display: none;}
a.btnActivity.fixed img.btnSmall{display: block;}
@keyframes btnActivity2 {
   from {filter:  drop-shadow(5px 5px 0px rgba(0,0,0,0.3)); }
     to {filter: drop-shadow(5px 5px 0px rgba(0,0,0,0.8));}
}



#mdOverlay {
    top: 0;
    left: 0;
    width: 100%;
    position: fixed;
    z-index: 99;
    background: #000;
    display: none;
}


#mdWindow {
    width: 90%; max-width: 1220px; height:90%; 
    margin: 0 auto; position: fixed; left: 50%;     transform: translateY(7%) translateX(-50%); 
    z-index: 100; display: none;     
}

#mdWindow > .mdClose {
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
    line-height: 30px;
    color: #fff;
    font-size: 1.5em;
    background: rgba(0,0,0,0.5);
    border-radius: 30px;
    position: absolute;
    z-index: 101;
    cursor: pointer;
    box-shadow: 0 0 3px 0 #000;
    text-align: center;
    font-size: 50px;
    line-height: 50px;
}
#mdWindow > .mdClose:hove{background: rgba(0,0,0,1);}





#contWrap h2 {
    margin-bottom: 20px;
    padding: 20px 0;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border-bottom: #333 1px dotted;
}

#contWrap{text-align: center; overflow-y: scroll;
    overflow-x: hidden; height: 100%;}
#contWrap p {
    padding-bottom: 2em;
    font-size: 1em;
}







#modalInclude{display: none;     overflow-y: scroll;}

.actTop{ padding-bottom: 43px; background:#ff6196 url(../images/bgActTop.jpg) center bottom no-repeat; color: #fff; border-bottom: 3px dotted; font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif;}
.actTop small{ color: #fff;     margin: 0 auto;  display: block;
     padding: 20px 0 0; }
.actTop small:before , .actTop small:after{content: ''; display: inline-block; border-bottom: 2px solid #fff; width: 20%; transform: translateY(-4px);}
.actTop small span{padding: 0 25px; }


.actTop h3{    padding: 8px 0;}
.actTop h3 b{color: #ffffa1;}

.actContent{ font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; background:#f7e0e8 url(../images/bgActivity.jpg) center top no-repeat;}

.actContent dl{    text-align: left;
    width: 90%;
    max-width: 645px;
        margin: 0 auto; padding-top: 12px;}

.actContent dl dt{color: #ff6196; text-decoration: underline;  margin-bottom: 14px;}
.actContent dl.blue dt{color: #4bb9c7;}
.actContent dl dt img{position: relative; bottom: -31px;      right: 7px;
  }
.actContent dl dd{    padding-left: 4.5em; position: relative;}
.actContent dl dd img{position: absolute;  bottom: 0px;}

.actContent ul.step{width: 100%;
    margin: 0 auto 0 2.5%; padding: 5px 0 32px 0; overflow: hidden;}
.actContent ul.step li{width: 25%; display: inline-block; margin-left: -1.5%;}
.actContent ul.step li:first-child{margin-left: 0%;}
.actContent ul.step li img{width: 100%;}


.actExplain{ background:#ff6196; color: #fff; border-top: 3px dotted; font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; }
.actExplain small{ color: #fff;     margin: 0 auto;  display: block;
     padding: 20px 0 0; }
.actExplain small:before , .actExplain small:after{content: ''; display: inline-block; border-bottom: 2px solid #fff; width: 31%; transform: translateY(-4px);}
.actExplain small span{padding: 0 25px; }

.actExplain ul {
    padding-bottom: 2em;
    width: 90%;
    margin: 0 auto;
    text-align: left;
    max-width: 870px;
}

.actExplain li {    margin: 10px 0;}
.actExplain li b{color: #ffffcc;}
.actExplain li p{margin-left: 1em;}
.actExplain li a{text-decoration: underline; transition: all 0.2s;}
.actExplain li a:hover{filter: brightness(1.2);}
.actExplain li span{color: #ffea00;}