/* ================================================
Global Styles
================================================ */

@import 'reset.css';
@import 'aos.css';
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@import url('https://fonts.googleapis.com/css?family=Ropa+Sans');

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


a,
a:hover {
text-decoration: none;
 outline: none; /* for Firefox */
behavior:expression(this.onFocus=this.blur()); /* for IE */
}

body, html {
    height: 100%;/*大背景一定要設高度100%*/
    padding: 0;
    margin: 0;
    font-size: 16px;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
.clear{ clear:both} 
a, a:active, a:visited, li a:visited {text-decoration: none;}
.img-responsive{width: 100%;}
.eng{font-family: 'Playfair Display', serif; }
/*.mob{display: none;}
.pc{display: block;}*/
.blackblock{background-color:   #000; padding: 5px 8px; border: 1px solid #5f516e; margin-right: 5px;}
.ma_b{margin-bottom: 20px;}
.pink{ color:#f55f85;}
.small{font-size: 60%;}
.big{font-size: 120%; font-weight: bold}

a.butn_w{text-align: center;border: 2px solid #fff; color: #fff; display: block; font-size: 16px; line-height: 50px; width: 210px; height: 50px;font-weight: bold;margin: 20px auto;}
a.butn_w:hover{background-color: rgba(255,255,255,1); color: #000;}


a.butn{text-align: center; color: #fff; display: block; font-size: 18px; line-height: 50px; width: 310px; height: 50px;font-weight: bold;margin: 20px auto;background: #8c1c87; /* Old browsers */
background: -moz-linear-gradient(left,  #8c1c87 0%, #efa33d 84%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #8c1c87 0%,#efa33d 84%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #8c1c87 0%,#efa33d 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c1c87', endColorstr='#efa33d',GradientType=1 ); /* IE6-9 */}

a.butn_b{text-align: center;border: 2px solid #d32f79; color: #fff; display: block; font-size: 18px; line-height: 50px; width: 280px; height: 50px;font-weight: bold;margin: 20px auto;}
a.butn:hover, a.butn_b:hover{color: #fff; background: #8c1c87; /* Old browsers */
background: -moz-linear-gradient(left,  #8c1c87 0%, #8c1c87 84%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #8c1c87 0%,#8c1c87 84%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #8c1c87 0%,#8c1c87 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c1c87', endColorstr='#efa33d',GradientType=1 ); /* IE6-9 */}



@media screen and (max-width: 590px) {
a.butn{width: 100%;}
}

.gosign { position:fixed; right:-150px; bottom:-45px; width:150px; height:216px;-webkit-transform: translateZ(0);transform: translateZ(0);z-index: 50;}
.gosign p { position:absolute; top:0; left:15px; background:url(../images/signbg.png) no-repeat center top; background-size:contain; color:#FFF; width:70px; height:70px; padding-top:16px; text-align:center; line-height:1.2; font-size:15px;}

@media screen and (max-width: 991px) {
    .gosign {display: none;}
}

/* ============= share ================= */
.share {
    position: relative;
}
.share-button, .share-toggle-button {
    position: absolute;
    display: inline-block;
    right: 30px;
    top: 35px;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    line-height: 28px;
    margin-left: -25px;
    margin-top: -25px;
    background: #fff;
    text-align: center;
    color: #000;
    border: none;
    outline: none;
}
.share-button:hover, .share-toggle-button:hover {
    color: #000;
}
.share-button {
    font-size: 1.8em;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    color: #000;
    line-height: 36px;
}
a.share-button {
    color: #000;
}
a.share-button:hover, a.share-button:focus {
    color: #000;
}
.share-toggle-button {
    z-index: 9;
     color: #000;
    font-size: 20px;
}
.share-items {
    list-style-type: none;
    padding: 0;
    margin: 0;

}
.share-item {
    display: inline-block;
}
.share-item .share-button{
    background: none;
    color: #fff;
    border: solid 1px #fff;
}
.share-item .share-button:hover{
     color: #fff;
}
.share-item .share-button .fab{
    font-size: 0.75em;
}
.share-item .share-button .fas{
    font-size: 0.75em;
}


@media screen and (max-width: 590px) {
   .share-button, .share-toggle-button {
    right: 10px;
    top: 35px;} 
}
/*====================== MENU ======================*/

header{width: 100%;position: fixed; z-index: 99;}
.menu-wrap {
    background-color:rgba(0,0,0,.9);
    position: fixed;
    top: 0;
    height: 100%;
    width: 250px;
    margin-left: -280px;
    overflow: auto;
    font-weight: bold;
    transition: .25s;
    z-index: 10;
}
.menu-show {
    margin-left: 0;
}
.menu-sidebar {
    margin: 75px 0 80px 10px;
    position: relative;
    top: 70px;
}
.menu-sidebar li {
    padding: 25px 22px 0;
    line-height: 30px;
}
.menu-sidebar li > a {
    color: #f3f3f3;
    font-size: 16px;
    position: relative;
}

.menu-sidebar li > a::after {
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    background-image: linear-gradient(to right, transparent 50.3%, #e21c71 50.3%);
    transition: background-position .2s .1s ease-out;
    background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
    background-position: -100% 0;
}
.menu-sidebar .menu-item-has-children {
    position: relative;
}
.menu-sidebar .menu-item-has-children .sub-menu {
    display: none;
}
.sidebar-menu-arrow::after {
    content: "\f107";
    font-family: 'FontAwesome';
    padding: 10px;
    color: #FFFA3B;
    position: relative;
}
.sidebar-menu-arrow:hover::after {
    cursor: pointer;
    color: #fff;
}
.sidebar-menu-arrow:active::after {
    top: 2px;
}


/*Hamburger Button*/
header h1 a{display:block;width: 160px;height: 53px;background:url('../images/header_h1.png');font-size: 0;position: fixed; top: 8px; left: 85px;}
.toggle-button {
    position: fixed;
    width: 44px;
    height: 40px;
    top: 20px;
    left: 30px;
    padding: 4px;
    transition: .25s;
    z-index: 15;
}

.toggle-button:hover {
    cursor: pointer;
}
.toggle-button .menu-bar {
    position: absolute;
    border-radius: 2px;
    width: 80%;
    transition: .5s;
}
.toggle-button .menu-bar-top {
    border: 2px solid #fff;
    border-bottom: none;
    top: 0;
}
.toggle-button .menu-bar-middle {
    height: 2px;
    background-color: #fff;
    margin-top: 7px;
    margin-bottom: 7px;
    top: 4px;
}
.toggle-button .menu-bar-bottom {
    border: 2px solid #fff;
    border-top: none;
    top: 22px;
}
.button-open {
    left: 25px;
}
.button-open .menu-bar-top {
    border-color: #fff;
    transform: rotate(45deg) translate(8px, 8px);
    transition: .5s;
}
.button-open .menu-bar-middle {
    background-color: #fff;
    transform: translate(230px);
    transition: .1s ease-in;
    opacity: 0;
}
.button-open .menu-bar-bottom {
    border-color: #fff;
    transform: rotate(-45deg) translate(7px, -7px);
    transition: .5s;
}

@media screen and (max-width: 991px) {

header{ width:100%; height:65px;background-color:rgba(0,0,0,.3);}

}


@media screen and (max-width: 590px) {
.menu-sidebar {
    margin: 35px 0 80px 10px;
    position: relative;
    top: 50px;
}
.menu-sidebar li {
    padding: 20px 22px 0;
    line-height: 28px;
}
.menu-sidebar li > a {
    color: #f3f3f3;
    font-size: 15px;
    position: relative;
}

header h1 a{display:block;top: 15px; left: 65px;width: 100px;height: 33px;background-size: cover;}

.toggle-button {
    top: 20px;
    left: 10px;
}

}




/*==================== 關於 ==========================*/
#ABOUT{min-height:808px; overflow: hidden;color: #fff;}

#ABOUT .LFblock{background-color: #000;min-height:808px;background:url('../images/bg-about.jpg')center center;background-size: cover; }
#ABOUT .RTblock img.mob{display: none; }

#ABOUT .RTblock{padding:3% 4%;min-height:808px;background-color: #1e112d;}

#ABOUT .RTblock h5{font-size: 20px;  line-height: 35px;color:#9d2c81;letter-spacing: 1px;}
#ABOUT .RTblock p{line-height: 32px; font-size: 16px;padding: 0 0 10px 0; text-align: justify;}

#ABOUT #ttlHEAD h4{font-size: 30px;font-weight: 300; line-height: 60px;line-height: 80px;color: #e21e74; letter-spacing: 1px;}

@media screen and (max-width:1149px) { 
#ABOUT #ttlHEAD h4{font-size: 25px; }
#ABOUT .RTblock {padding:2% 4%;} 
}


@media screen and (max-width: 991px) {
#ABOUT .LFblock{background-size: 1100px auto;min-height:500px;display: none;} 
#ABOUT .RTblock img.mob{display: block;padding: 5% 0;} 
#ABOUT .RTblock {padding:8% 4%;min-height:auto;}  
#ABOUT #ttlHEAD h4{font-size: 22px; }
}

@media screen and (max-width: 790px) {
#ABOUT .LFblock{background-size: 800px auto;min-height:500px;display: none;}
#ABOUT .RTblock {padding:10% 4%;min-height:auto;} 

}

@media screen and (max-width: 590px) {
#ABOUT .LFblock{background-size:800px auto;min-height:500px;}
#ABOUT .RTblock{height:auto; padding:15% 4%;} 

}




/*==================== 交通資訊 =======================*/
#JOIN {min-height:830px; overflow: hidden;color: #fff;}
#JOIN .LFblock{min-height:830px;background-color: #1e112d;padding:4% 5%;}
#JOIN .LFblock h4.joinh4{font-size: 15px;font-weight: bold;background:url(../images/dot_lightgreen.png) repeat-x center bottom; background-size:3px; padding-bottom:15px;letter-spacing: 1px; width: 380px;}
#JOIN .LFblock h3.joinh3{font-size: 25px;line-height: 38px; margin-top: 15px;}
#JOIN .LFblock h3.joinh3 span{font-size: 16px; color: #9d2c81;}
#JOIN .LFblock ul{padding: 20px 0;}
#JOIN .LFblock ul li{font-size: 16px;line-height: 32px; }
#JOIN .LFblock ul.traffic li.ttl{font-size: 16px;line-height: 32px; font-weight: bold;color: #fff;}
#JOIN .LFblock ul.traffic li{font-size: 13px;line-height: 25px; }
#JOIN .RTblock{min-height:830px;}
#JOIN  #ttlHEAD h4{font-size: 30px;font-weight: 300; line-height: 60px;line-height: 80px;color: #e21e74; letter-spacing:1px;}
#JOIN #map{ width: 100%; height: 830px;}




@media screen and (max-width: 991px) {
#JOIN  #ttlHEAD h4{font-size: 22px; }   
}





/*==================== 子頁面 =======================*/
#HEADER{height:420px;width: 100%; position: relative; background-color:#1e112d;overflow: hidden;}

#HEADER h1 img{padding: 8% 6%;}
#HEADER .header_left{width: 950px;height: 563px; background:url(../images/header_left.png); background-size: cover;position: absolute; top:-38%;left: -22%;z-index: 5;}
#HEADER .header_tree{width: 150px;height: 245px; background:url(../images/header_tree.png); background-size: cover;position: absolute; bottom:-15%;left: 21%;z-index: 3;}
#HEADER .header_tree2{width: 180px;height: 179px; background:url(../images/header_tree2.png); background-size: cover;position: absolute; bottom:0%;right: 18%;z-index: 3;}
#HEADER .header_right{width: 900px;height: 348px; background:url(../images/header_right.png); background-size: cover;position: absolute; top:-38%;right: -16%;z-index: 5;}
#HEADER .header_tree2{width: 180px;height: 179px; background:url(../images/header_tree2.png); background-size: cover;position: absolute; bottom:0%;right: 18%;z-index: 3;}
#HEADER .header_camp{width: 200px;height: 63px; background:url(../images/header_camp.png); background-size: cover;position: absolute; bottom:-2%;right: 25%;z-index: 4;}

#HEADER .header_b_left{width: 380px;height: 294px; background:url(../images/bottom_left.png); background-size: cover;position: absolute; bottom:-16%;left: 1%;z-index: 2;}
#HEADER .header_b_right{width: 750px;height: 442px; background:url(../images/bottom_right.png); background-size: cover;position: absolute; bottom:-35%;right: -12%;z-index: 2;}


#HEADER .star{width: 682px;height: 123px; background:url(../images/star.png); position: absolute; top:30px;left: 5%;animation: flash 5s infinite alternate;}
#HEADER .star2{width: 682px;height: 123px; background:url(../images/star.png); position: absolute; top:0;right:5%;animation: flash 3s infinite alternate;}

#HEADER  #canvas-basic {
    position: absolute;
    display: block;
    width: 100%;
    height: 420px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@media screen and (max-width: 1600px) {
    #HEADER .header_left{top:-48%;left: -25%;z-index: 5;}
    #HEADER .header_right{top:-48%;right: -30%;z-index: 5;}
    #HEADER .header_b_left{width: 300px;height: 232px; bottom:-16%;left: 0%;z-index: 2;}
    #HEADER .header_b_right{width: 750px;height: 442px;  bottom:-35%;right: -22%;z-index: 2;}
    #HEADER .header_tree{ bottom:-15%;left: 17%;z-index: 3;}
    #HEADER .header_tree2{ bottom:0%;right: 10%;z-index: 3;}
    #HEADER .header_camp{bottom:-2%;right: 20%;z-index: 4;}

    #HEADER .star{ top:0;left: 5%;}
    #HEADER .star2{top:0;right:5%;} 
}
@media screen and (max-width: 1439px) {

      #HEADER .star{ top:0;left: -5%;}
    #HEADER .star2{top:0;right:-5%;}  

    #HEADER h1 img{padding: 6% 2%;}
    #HEADER .header_left{top:-48%;left: -35%;z-index: 5;}
    #HEADER .header_right{top:-48%;right: -36%;z-index: 5;}
    #HEADER .header_b_left{width: 300px;height: 232px; bottom:-16%;left: 0%;z-index: 2;}
    #HEADER .header_b_right{width: 750px;height: 442px;  bottom:-35%;right: -42%;z-index: 2;}
    #HEADER .header_tree{ bottom:-15%;left: 17%;z-index: 3;}
    #HEADER .header_tree2{ bottom:0%;right: 10%;z-index: 3;}
    #HEADER .header_camp{bottom:-2%;right: 20%;z-index: 4;}

}

@media screen and (max-width: 1143px) {
    #HEADER{height:280px;width: 100%;background:url(../images/header_m.jpg) center center; background-size:1300px;}
    #HEADER h1 img{padding: 10% 0%;}

    #HEADER .mob{display: none;}
    #HEADER .container{display: none;}
#HEADER  #canvas-basic {display: none;}
}

@media screen and (max-width: 991px) {

#HEADER{height:65px;width: 100%;background:url(../images/header_xs.jpg) center bottom; background-size:800px auto;}
}

@media screen and (max-width: 790px) {
#HEADER{height:65px;width: 100%;background:url(../images/header_xs.jpg) center bottom; background-size:800px auto;}
}


@media screen and (max-width: 590px) {

}


/*====================  子頁面內容 ==========================*/

#CONTENT{padding: 5% 0;background-color: #1e112d;color: #fff;}
#CONTENT h5{font-size: 30px;line-height: 55px;color: #e21e74;letter-spacing: 1px;}
#CONTENT p{line-height: 32px; font-size: 16px;padding: 5px 0;}





@media screen and (max-width: 590px) {
#CONTENT{padding: 20% 0px;}
}


/*====================  子頁面內容_風格市集 ==========================*/


#MARKET .int_map{width:100%; height:742px; padding:6px; background-color: #9d2c81;margin: 20px 0;}
#MARKET #ttlHEAD {border-bottom:1px solid #e71873; padding-bottom: 40px;}
#MARKET #ttlHEAD h4{font-size: 40px;font-weight: 300; line-height: 60px;line-height: 70px; text-align: center; letter-spacing: 2px;color: #e21e74; }
#MARKET h5{font-size: 30px;line-height: 55px;color: #e21e74;letter-spacing: 1px;}
#MARKET  #ttlHEAD h6{font-size: 25px; line-height: 40px; color: #fff; text-align: center;}
#MARKET p.sum{padding-top: 45px;text-align: center;}


#MARKET_INFO {padding: 5% 0;}

#MARKET_INFO .owl-carousel{margin-top: 20px;}
#MARKET_INFO .owl-carousel .item{min-height:500px;background-color: rgba(0,0,0,.2);border: 1px solid #342348; border-top: 6px solid #342348 ; border-bottom: 6px solid #342348; padding: 10px; margin: 0 5px;}

#MARKET_INFO .owl-carousel .item .caption h6{ font-size: 18px; line-height: 32px;background-color: #27113f; text-align: center; }
#MARKET_INFO .owl-carousel .item .caption p{ font-size: 15px; line-height: 25px;text-align:justify;padding:20px 15px 10px 15px; }




@media screen and (max-width: 991px) {
#MARKET #ttlHEAD h4{font-size: 30px; }   
}


/*====================  子頁面內容_Fashion Camping ==========================*/

#FASHION{padding-bottom:  70px ;}
#FASHION #ttlHEAD {border-bottom:1px solid #e71873; padding-bottom: 40px;}
#FASHION #ttlHEAD h4{font-size: 40px;font-weight: 300; line-height: 60px;line-height: 70px; text-align: center; letter-spacing: 2px;color: #e21e74; }
#FASHION #ttlHEAD h3{width: 380px;height: 80px;background:url(../images/mcxwwek.png); background-size: cover; font-size: 0;margin: 0 auto;}
#FASHION h5{font-size: 30px;line-height: 55px;color: #e21e74;letter-spacing: 1px;}
#FASHION  #ttlHEAD h6{font-size: 25px; line-height: 40px; color: #fff; text-align: center;}
#FASHION p.sum{padding-top: 45px;text-align: center;}
#FASHION .LFblock,#FASHION .RTblock{padding: 3% 2% 0 2%;}
#FASHION .LFblock .inner { border:1px solid #e71873;padding: 3% 5%; padding-top: 80px;min-height: 250px;position:relative;}
#FASHION .RTblock .inner{ border:1px solid #e71873;padding: 3% 5%;padding-top: 80px; min-height: 250px;position:relative;}
#FASHION .LFblock .inner h5{position: absolute;top: 20px; left: -10px;font-size: 20px; background-color:#e71873;color: #fff;line-height: 30px;padding:5px 15px; }
#FASHION .RTblock .inner h5{position: absolute;top: 20px; left: -10px;font-size: 20px; background-color:#e71873; color: #fff;line-height: 30px;padding:5px 15px;}
#FASHION .pic img{ padding: 5% 0 0 0; }

#FASHION .RTblock .inner ul li{ font-size:45px;  font-family: 'Ropa Sans', sans-serif;}
#FASHION .RTblock .inner ul li span.fa{ font-size:25px; }
#FASHION .RTblock .inner ul li .time{font-size: 16px; font-family: 'Microsoft JhengHei'; }



#FASHION .GFblock{padding: 3% 2%;}
#FASHION .GFblock .inner{border:1px solid #e71873;padding: 3% 5%;position:relative;padding-top: 80px;}
#FASHION .GFblock .inner h5{position: absolute;top: 20px; left: -10px;font-size: 20px; background-color:#e71873;color: #fff;line-height: 30px;padding:5px 15px; }
#FASHION .GFblock .inner .LFblock ul li{font-size: 15px; color: #e71873; line-height: 30px; list-style: disc;}
#FASHION .GFblock .inner .RTblock {background-color: rgba(0,0,0,.4); margin-top: 25px;}
#FASHION .GFblock .inner .RTblock .item .caption p{font-size: 14px; text-align: center;}





/*---當天活動---*/
#FASHION_EVENT{background:url(../images/bg-event.jpg) center center; background-size: cover;padding: 70px 0; background-attachment: fixed;}
#FASHION_EVENT ul li{line-height: 28px; padding: 5px 0;}
#FASHION_EVENT h5 span{letter-spacing: 0;font-size: 18px;background-color: #f55f85; color: #fff; padding: 3px 6px;}

#FASHION_EVENT .red-line{border-bottom:1px solid #e71873; padding-bottom: 5px;}

#FASHION_EVENT .film {border: 1px solid #fff; margin: 50px 0;}
#FASHION_EVENT .film .LFblock{padding: 3% 8%;}
#FASHION_EVENT .film .RTblock{color: #fff;margin-top: 30px;}
#FASHION_EVENT .film .RTblock h3{font-size: 25px;font-weight: bold;line-height:60px;font-weight: normal;}
#FASHION_EVENT .film .RTblock h5{font-size: 18px;font-weight: bold;line-height: 32px;}
#FASHION_EVENT .film .RTblock p.sum {font-size: 14px;line-height: 28px;color: #fff;text-align: justify;padding: 10px 10% 10px 0 ;}
#FASHION_EVENT .film .RTblock ul li{font-size: 14px;line-height: 28px;color: #999;}


@media screen and (max-width: 790px) {
#FASHION_EVENT .film {border:none;}  
#FASHION_EVENT .film .RTblock p.sum {font-size: 14px;line-height: 28px;color: #fff;text-align: justify;padding: 10px 0 10px 0 ;}
#FASHION_EVENT .p_play{padding: 0 0 0 0;}
}
}

@media screen and (max-width: 590px) {
#FASHION_EVENT .film {border:none;}  
#FASHION_EVENT .film .RTblock p.sum {font-size: 14px;line-height: 28px;color: #fff;text-align: justify;padding: 10px 0 10px 0 ;}
}





/*---qaBox---*/
#FASHION_QA{padding-top: 70px;}
#FASHION_QA .qaBox {margin-bottom:60px;}
#FASHION_QA .qaBox dl { background:url(../images/dot_lightgreen.png) repeat-x center bottom; background-size:3px; padding-bottom:5px; line-height:1.5;}
#FASHION_QA .qaBox dl dt { position:relative; padding:10px 50px 10px 5px; cursor:pointer;}
#FASHION_QA .qaBox dl dt:hover { color:#d82a5b;}
#FASHION_QA .qaBox dl dt:before,.qaBox dl dt:after { content:""; display:block; width:12px; height:2px; -webkit-border-radius:4px; border-radius:4px; background-color:#ea819f; -webkit-transform:rotate(45deg); transform:rotate(45deg); position:absolute; right:25px; top:26px; transition:all ease-in .1s;}
#FASHION_QA .qaBox dl dt:after { width:2px; height:12px; top:21px; right:23px;}
#FASHION_QA .qaBox dl dt:hover:before,.qaBox dl dt:hover:after {background-color:#d82a5b;}
#FASHION_QA .qaBox dl dt.reverse:before,.qaBox dl dt.reverse:after {-webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
#FASHION_QA .qaBox dl dt { display:flex;}
#FASHION_QA .qaBox dl dt span:last-child { padding-top:10px;}
#FASHION_QA .qaBox dl dt .number { font-family: 'Playfair Display', serif ; margin:0 5px; font-size:150%;}
#FASHION_QA .qaBox dl dd { padding:13px 30px 10px 30px; background-color:rgba(255,255,255,.1); line-height:1.7; display:none;color:#ccc; }
#FASHION_QA .qaBox span.fa { color:#f1953b; font-size:90%; margin:0 5px;}
#FASHION_QA .qaBox a { color:#094;}
#FASHION_QA .qaBox a:hover { color:#d82a5b;}

#FASHION_QA .sampleBox { position:relative; border:1px solid #5f516e; margin:30px 50px; color: #6f6080; }
#FASHION_QA .sampleBox > h6 {   position:absolute; top:-10px; left:50%; width:150px; margin-left: -75px;padding: 5px 5px;  border:1px solid #6f6080; background-color:#180f22; color:#fff; text-align:center;font-size: 14px; }
#FASHION_QA .sampleBox {padding: 50px;}
#FASHION_QA .sampleBox ul li{font-size: 14px; line-height: 25px;}



@media screen and (max-width: 991px) {
#FASHION #ttlHEAD h4{font-size: 30px; }   
}

@media screen and (max-width: 590px) {
    #FASHION_QA .qaBox dl dt .number { font-size:120%;}
    #FASHION_QA .sampleBox {margin:30px 0px;  }
    #FASHION_QA .sampleBox {padding: 20px;}
    #FASHION_QA .sampleBox ul li{padding-bottom: 15px;}
    #FASHION #ttlHEAD h3{width: 300px;height: 63px;}
}






/*====================  子頁面內容_PLAY ==========================*/

#PLAY #ttlHEAD { padding-bottom: 40px;}
#PLAY #ttlHEAD h4{font-size: 40px;font-weight: 300; line-height: 60px;line-height: 70px; text-align: center; letter-spacing: 2px;color: #e21e74; }
#PLAY h5{font-size: 30px;line-height: 55px;color: #e21e74;letter-spacing: 1px;}
#PLAY #ttlHEAD h6{font-size: 25px; line-height: 40px; color: #fff; text-align: center;}
#PLAY p.sum{padding-top: 45px;text-align: center; }


#PLAY_BESTIE{width: 100%;padding: 70px 0;background:url(../images/twins_bg.jpg) center top; background-size: cover; background-attachment: fixed;  }
#PLAY_BESTIE ul li{line-height: 28px; padding: 5px 0;}
#PLAY_BESTIE p{text-align: justify; padding-right: 5%;}

#PLAY_SAMUI{width: 100%;padding: 70px 0;background:url(../images/samui_bg.jpg) center center; background-size: cover; background-attachment: fixed; }
#PLAY_SAMUI ul li{line-height: 28px; padding: 5px 0;}
#PLAY_SAMUI .pic img{ padding: 0 5%; }
#PLAY_SAMUI p{text-align: justify; padding-right: 5%; }


#PLAY_EVENT{background-color: rgba(0,0,0,.4); background-size: cover;padding: 70px 0;}
#PLAY_EVENT ul li{line-height: 28px; padding: 5px 0;}
#PLAY_EVENT .p_play{padding: 0 8% 0 0; text-align: justify;}


#PLAY_MOV{width: 100%;min-height: 650px; background:url(../images/movie_bg.jpg) center bottom; background-size: cover; padding: 5% 0;}
#PLAY_MOV h4{width: 300px;height: 132px;background:url(../images/movie_kv.png); background-size: cover; font-size: 0; margin: 0 auto;}
#PLAY_MOV h5{color: #fff; font-size: 25px; text-align: center;}
#PLAY_MOV p{text-align: center;}
#PLAY_MOV  ul {border: 1px dotted #fff; padding: 20px; margin-top: 20px; }
#PLAY_MOV  ul li{line-height: 28px; padding: 5px 0;}

#tagboard{width: 100%; background-color: rgba(0,0,0,0.9);padding: 100px 0;}



@media screen and (max-width: 991px) {
#PLAY #ttlHEAD h4{font-size: 30px; }   
}









@media screen and (max-width: 1143px) {
#JOIN .RTblock{height:830px;-webkit-background-size: cover;background-size: cover;}

#JOIN #map{ width: 100%; height: 830px;}
}

@media screen and (max-width: 991px) {
#JOIN .RTblock{height:830px;}
#JOIN .LFblock{min-height:auto;padding:10% 4%;}
#JOIN #map{ width: 100%; height: 830px;}
#JOIN  #ttlHEAD h4{font-size: 25px; }
}

@media screen and (max-width: 790px) {
#JOIN .LFblock{min-height:auto;padding:10% 4%;}
#JOIN .RTblock{min-height:500px; height:500px;}  
#JOIN #map{ width: 100%; height: 500px;}  
}

@media screen and (max-width: 590px) {
#JOIN .LFblock{min-height:auto;padding:15% 4%;}
}









/*==================== SPONSER =======================*/
#SPONSER{background-color: #000;padding: 60px 0;}
#SPONSER .logoblock{margin: 2% 0;}
#SPONSER h5{font-size: 15px; text-align: center;color: #ccc;text-decoration: underline;margin-bottom: 2%;}
#SPONSER div{padding: 1% 2%;}

footer{ width:100%;background-color: #000; color: #fff; font-size: 11px;height: 50px;text-align: center;}
footer #container{width: 1200px;margin: 0 auto;}
footer img{vertical-align:middle; }

@media screen and (max-width: 1439px) {
    footer #container{width:100%;}
}

@media screen and (max-width: 790px) {
#SPONSER .logoblock{margin: 5% 0 5% 0;}
}





/*---------------------signup_fix---------------------*/
.signup_fix { position:fixed; bottom:-100px; left:0; z-index:10000; width:100%; padding: 10px 0;display: none;}

.signup_fix a:focus{text-decoration: none;}

@media screen and (max-width: 790px) {
.signup_fix {  display:block; position:fixed; bottom:-100px;  padding: 0px 0;  }
.signup_fix a { display:block; margin:auto;width:100%;padding:15px 0;  background: #8c1c87; /* Old browsers */
background: -moz-linear-gradient(left,  #8c1c87 0%, #efa33d 84%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #8c1c87 0%,#efa33d 84%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #8c1c87 0%,#efa33d 84%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color:#FFF; text-align:center; font-size:16px; letter-spacing: 1px;}


}










/*===================動畫==================*/
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}




@-ms-keyframes spin2 {
    from { -ms-transform: rotate(360deg); }
    to { -ms-transform: rotate(0deg); }
}

@-moz-keyframes spin2 {
    from { -moz-transform: rotate(360deg); }
    to { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0deg); }
}
@keyframes spin2 {
    from {
        transform:rotate(360deg);
    }
    to {
        transform:rotate(0deg);
    }
}




@keyframes fadeInLeft {
  from {
    opacity: 0;
    left:100px;
  }

  to {
    opacity: 1;
    left:-220px;
  }
}

.fadeInLeft {
  animation-duration: 5s;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}



@keyframes fadeInRight {
  from {
    opacity: 0;
    right:100px;
  }

  to {
    opacity: 1;
    right:-220px;
  }
}

.fadeInRight {
 animation-duration: 5s;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}



.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(8%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(8%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}


@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}



@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: .5;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: .2;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}