@media only screen and (min-width: 990px) {

     html,
     body {
         width: 100%;
         height: auto;
     }
 }

 img.img-fluid {
     width: 100%;
 }

 .coupon-box {
     margin-top: 20vh;
 }

 .button_box,
 .icon_box {
     margin: 20px auto;
     text-align: center;
     width: 800px;
 }

 .coupon-box h2 {
     margin: 25px auto;
     line-height: 1.75;
     font-size: 38px;
     font-weight: 600;
 }

 .coupon-box h5 {
     color: red;
     font-weight: 600;
     text-align: left;

     max-width: 640px;
     margin: 1em auto;
 }

 .cp_form {
     letter-spacing: 2px;
     font-size: 20px;
     line-height: 1.45;

     display: -webkit-box;

     display: -webkit-flex;

     display: -moz-box;

     display: -ms-flexbox;

     display: flex;
     margin: 1em auto 0;
     max-width: 640px;
 }

 .cp_input {
     width: 70%;
     height: 70px;
     padding: 6px 10px;
     /* border-radius: 0; */
 }

 .cp_btn {
     width: 30%;
     height: 70px;
     background: #00479d;
     color: white;
     text-align: center;
     padding: 8px 20px;
     border: none;
 }

 .icon_box {
     color: #00479d;
 }

 .icon_box h3 {
     letter-spacing: 1px;
     font-weight: 700;
 }

 .icon_box img {
     width: 100%;
     max-width: 160px;
 }

 .col-4:after {
     position: absolute;
     right: -10px;
     top: 30%;

     font-family: "Font Awesome 5 Free";
     font-weight: 700;
     content: "\f0da";
     font-size: 3em;
 }

 .col-4.noAfter:after {
     content: none;
 }

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

     .button_box,
     .icon_box {
         width: 100%;
     }

     .cp_form,
     .coupon-box h5 {
         max-width: 100%;
     }
 }


 @media only screen and (max-width: 568px) {
     .cp_form {
         -webkit-flex-wrap: wrap;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         justify-content: center;

     }

     .cp_input,
     .cp_btn {
         width: 80%;
         text-align: center;
         margin: 0 auto;
         height: 36px;
         font-size: 1rem;
     }

     .code-wrap h3 {
         font-size: 1.5rem;
     }
 }

 /*PLUS 通用序號*/

 .code-wrap h2 {
     letter-spacing: 4px;
     /* font-weight: 600; */
     font-size: 3rem;
     margin-bottom: 1.2rem;
 }

 .coupon-wrap {
     color: #7a663c;
     font-weight: bold;

     /* max-width: 800px; */
     max-width: 600px;
     margin: 40px auto 80px;
 }

 .p-a {
     position: relative;
 }

 .cp_area {
     width: 100%;
     letter-spacing: 2px;
     font-weight: 800;
     font-size: 1.8rem;
     border: solid 2px #7a663c;
     color: #7a663c;
     font-family: Arial;
     /* text-align: center;  */
     background: transparent;
     height: 52px;
     padding-left: 10px;
 }

 .cp_copy {
     position: absolute;
     bottom: 10px;
     right: 3px;
     padding: 10px;
     width: 100px;
     height: auto;
     color: white;
     border: 1px solid #7a663c;
     background: #7a663c;
 }

 main {
     background: rgb(255, 255, 255);
     background: -moz-linear-gradient(185deg, rgba(255, 255, 255, 0.8) 50%, rgba(216, 216, 216, 1) 100%);
     background: -moz-linear-gradient(265deg, rgba(255, 255, 255, 0.8) 50%, rgba(216, 216, 216, 1) 100%);
     background: -o-linear-gradient(265deg, rgba(255, 255, 255, 0.8) 50%, rgba(216, 216, 216, 1) 100%);
     background: linear-gradient(185deg, rgba(255, 255, 255, 0.8) 50%, rgba(216, 216, 216, 1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#d8d8d8", GradientType=1);
 }

 #cannes2021,
 .films-card,
 .icon_box {
     color: #7a663c;
 }

 #cannes2021 {
     border-top: 1px solid #3e3e3e;
     margin-top: 4em;
     padding-bottom: 6em;
 }

 #cannes2021 h5 {
     color: #c9a460;
 }

 .films-card {
     background-color: #3e3e3e;
     text-align: center;
     padding: 0.5em 1em;
     font-size: 23px;
 }

 .films-card p {
     color: #7a663c;
 }

 .cp_btn {
     background: #7a663c;
 }

 .film_media {
     padding: 1em 0 1.8em;
     position: relative;
 }

 .cannesAwards {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 3em;
     transform: translate(30%, -140%);
 }

 @media only screen and (max-width: 768px) {
     .coupon-wrap {
         margin: 40px auto 0px;
     }

     .col-4:after,
     .code-wrap h2 {
         font-size: 2rem;
     }

     .col-4 img {
         max-width: 100px;
         margin-bottom: 10px;
     }


     .icon_box h3 {
         font-size: 1em;
     }

     .film_media {
         padding: 1em 15px;
     }
 }

 @media only screen and (max-width: 400px) {
     .p-a {
         margin-bottom: 60px;
     }

     .cp_area {
         text-align: center;
     }

     .cp_copy {
         bottom: -40px;
         width: 100%;
         right: 0;
     }
 }

 /*GP+ 鬼月特輯*/

 .bg-black {
     background-color: #000;
     color: white;
 }

 .bg-black footer {
     color: #000;
 }

 .bg-black .coupon-wrap {
     color: white;
 }

 .bg-black .coupon-wrap img {
     display: inline;
     vertical-align: baseline;
     margin-left: 10px;
 }

 .bg-black .cp_btn {
     background: #B40000;
 }

 .bg-black main {
     background: black;
 }

 .lunal {
     width: 100%;
     height: fit-content;
     min-height: 90vh;
     background: url(/images/plus_sp/lgf/cover.png);
 }

 .lunal .infor {
     text-align: left;
     font-size: 14px;
     color: #950b09;
 }

 @media only screen and (max-width: 768px) {
     .lunal {
         min-height: 100vh;
         background: url(/images/plus_sp/lgf/cover_2.png);
     }
 }

 .bg-black .col-4 h3 {
     margin-top: 1rem;
 }

 .bg-black .col-4:after {
     color: white;
 }

 .bg-black .films-card {
     background: #B40000;
 }

 .bg-black .films-card,
 .bg-black .icon_box {
     color: white;
 }

 .bg-black section:nth-child(odd) {
     outline: 1px solid #B40000;
 }

 /*1111*/
 .sup1bank {
     color: #65ACFE;
     background: url(/images/plus_sp/1111/Q3/bg.jpg);
 }

 .sup1bank .button_box,
 .sup1bank .icon_box {
     width: 100%;
     color: #65ACFE;
 }

 .sup1bank .col-4:after {
     color: #65ACFE;
 }

 .sup1bank .cp_input {
     border: 1px solid #65ACFE;
 }

 .sup1bank .cp_btn {
     background-color: #65ACFE;
 }

 .sup1bank .coupon-wrap {
     text-align: center;
     color: #65ACFE;
 }

 .coupon-wrap img {
     vertical-align: baseline;
 }

 .bg-white .primary-border {
     padding-bottom: 2em;
     border-bottom: 1px solid #65ACFE;
 }

 .sup1bank .scrollup {
     opacity: .5;
     position: fixed;
     bottom: 20px;
     right: 20px;
     display: none;
     z-index: 999;
     color: #65ACFE;
     font-size: 2.5em;
 }

 .event .title {
     margin: 10px auto;
     text-align: center;
 }

 #event-inf .inf-content {
     background-color: white;
     max-width: 700px;
     margin: 0 auto;
     padding: 1em;
     line-height: 1.8;
     color: #656565;
 }

 #event-inf .pink-padding {
     border: 15px solid #FADEED;
     border-radius: 2em;
 }

 .inf-content h4 {
     margin-top: 1.25rem;
 }

 .inf-content .gpp {
     width: 52px;
     margin: 0 0.5rem;
     vertical-align: baseline;
 }

 .inf-content a {
     display: block;
     background-color: #65ACFE;
 }

 .inf-content a:hover img {
     opacity: 0.5;
 }

 .media-wrap {
     padding-bottom: 5em;
 }

 .article_wrap>.primary-border {
     padding: 1.2em;
     border: 1px solid #65ACFE;
 }

 .article_wrap>div {
     margin: 1em auto;
 }

 .media-body p {
     justify-content: flex-start;
     text-align: left;
     color: gray;
     line-height: 1.8;
     margin-bottom: 0;
 }

 .media-body h5 {
     color: #65ACFE;
 }

 .media-body a {
     display: flex;
     justify-content: flex-end;
     align-items: center;
 }

 .media .over-hidden {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;
 }

 @media only screen and (min-width: 991px) {
     .article_wrap>div {
         max-width: 65%;
         margin: 40px;
     }

     .article_wrap>div:nth-child(odd) {
         margin-right: auto;
     }

     .article_wrap>div:nth-child(even) {
         margin-left: auto;
     }

     .media .over-hidden {
         -webkit-line-clamp: 8;
         line-height: 2;
     }
 }

 @media only screen and (max-width: 768px) {
     .media {
         flex-wrap: wrap
     }

     .media>a {
         flex: 1 0 100%;
         margin-bottom: 10px;
     }

     .media .over-hidden {
         -webkit-line-clamp: 4;
     }

     #sup1111 .title img {
         max-width: 100%;
         height: auto;
     }
 }

 @media only screen and (min-width: 767px) {
     #sup1111 .spacing {
         min-height: 70vh;
         padding: 0 0 2em;
     }
 }

 #sup1111 .row {
     z-index: 10;
     margin-top: -2.5em;
 }

 #sup1111 .title {
     margin: -20px auto;
     text-align: center;
 }

 #sup1111 .films-card {
     border: 1px solid #65ACFE;
     color: #65ACFE;
     font-weight: bolder;
     background-color: transparent;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin-top: -1px;
 }

 #sup1111 footer {
     color: #656565;
 }

 /*七夕情人節*/
 .val {
     color: #910091;
     width: 100%;
     height: fit-content;
     min-height: 90vh;
     background: url(/images/plus_sp/lcv/web_BG.jpg);
 }
 @media only screen and (max-width: 768px) {
    .val {
        min-height: 100vh;
        background: url(/images/plus_sp/lcv/mobile_BG.jpg);
    }
}
.val .cp_btn {
     background: #910091;
 }
.val .btn.cp_btn:hover {
    color:white;
 }
.val section:nth-child(odd) {
    outline: none;
}
.val .films-card {
    background: black;
}
.val .infor {
    color: white;
}





/* passion 情慾 */

.event .title .recommand{
    margin: 100px auto;
    text-align: center;
    color: white;
}


.cover{
    background: url(/images/plus_sp/passion/web_BG.jpg) TOP CENTER NO-REPEAT #200d3b;
    /* padding-top: 40px; */
}
   
.cover img.passionCover{
    width:45%;
}
    
#must {
    color: white;
  
}

.coupon-wrap .coverbg{
   
    margin: px auto 80px;
}


.media-body.recommand h4{
    display:flex;
}
.media-body.recommand p {
    justify-content: flex-start;
    text-align: left;
    color: white;
    line-height: 1.8;
    margin-bottom: 0;
}


.media-body .more{
    color: white;
    display: flex;
    justify-content: flex-end;
    margin: 20px 0px;
}

.media {
    max-width: 1400px;
}



.line{
    border: 1px solid white;
    width: 100%;
    margin-top:10px;
}




@media only screen and (min-width: 991px) {
    .recommand>div {
        max-width: 100%;
    }

}

@media only screen and (max-width: 768px) {
    .cover {
        min-height: 100vh;
        background: url(/images/plus_sp/passion/mobile_BG);
        /* padding-top: 40px; */
    }
    .cover img.passionCover{
        width:100%;
    }
    .line{
        color: none;
    }
    
   .media-body .more{
    display: flex;
    justify-content: center;

    }
    .media-wrap {
        padding-bottom: 0rem;
    }
}


/* CHF2021 康健 */

.chfCover img.img-fluid{
    width: 100%;
}

.chfCover{
    background: #F2E6D9;
    
}
.chf h3, .chf p, .chf h6, .chf li{
    color: black;
}

.chftilte h3{
    color:#019944;
    font-weight: 500;
}

.chfbtn img{
    width: 25%;
} 

.chfCover .chf .cp_btn{
    background-color: #019944;
}
.chftilte .films-card{
    background-color: #F2E6D9;
    color: black;
}


@media only screen and (max-width: 768px) {
    .chfbtn img{
        width: 55%;
    } 
    .chftilte .films-card{
        background-color: #F2E6D9;
        color: black;
        font-size: 20px;
    }
}


/* windfantasy 風色幻想聯合線上影展 */

.wind{
    background: url(/images/plus_sp/windfantasy/bg_web.jpg) TOP CENTER NO-REPEAT #fee9ee;
    width: 100%;
    /* height: fit-content; */
    min-height: 100vh;
    background-repeat: no-repeat;
}

.wind .coupon-wrap {
    margin: 0px auto 80px;
}
.wind .cp_btn{
    background-color: #FA2057;
}

.bg{
    color: #FA2057;
    overflow: hidden;
}
/* logo */
.spm{
     display: flex;
     align-items: center;
     justify-content: flex-start;
     transform: translate(14%,30%);
     /* border: 1px solid #000; */
}
.spm img:nth-child(1){
   width: 15%;
}
.spm img:nth-child(2){
    max-width: 12em;
    /* height: auto; */
 }
.spm img:last-child{
    width: 8%;
}

/* google apple logo */
.google_logo{
    display: flex;
    justify-content: flex-start;
    transform: translate(17%,450%);
    /* border: 1px solid red; */
    
}
.google_logo a{
    width: 15%;
    margin: 10px; 
}

.coupon_top{
    margin-top: 500px;
    color: #FA2057;
    
}

/* 推薦電影 */
.coupon_top h3,h6,p{

    color: #FA2057;
    
}

.wind .bg-black .films-card, .bg-black .icon_box {
    color: black;
}

.wind .films-card {
    background: white;
    color: black;
    font-size: 18px;
}


#wind #section_0 .create_wrap{
        position: relative;
        margin: 200px 0px 50px 200px;
}

#wind #section_1 .create_wrap{
    position: relative;
    margin: 350px 0px 180px 0px;
}

#wind #section_2 .create_wrap{
    position: relative;
    padding: 60px 200px 50px 0px;
}

#wind #section_3 .create_wrap{
    position: relative;
    padding: 200px 0px 30px 0px;
}

#wind #section_2 .swiper-button-next {
    right: 200px;

}

#wind #section_3 .swiper-button-next,#wind #section_3 .swiper-button-prev{
    top: 58%;

}

/* 活動說明 */
.wind .infor{
    position: relative;
}
.wind .infor h3,li{
    color: black;
    list-style: none;
    line-height:1.8;
}

.wind .infor .book{
    position: absolute;
    right: 10px;
    bottom: 55%;
    
}
@media only screen and (max-width: 2400px){
    .wind .films-card {
        font-size: 20px;
    }
    #wind #section_1 .create_wrap {
        position: relative;
        margin: 150px 0px 50px 0px;
    }
    #wind #section_3 .create_wrap {
        position: relative;
        padding: 120px 0px 15px 0px;
    }
    .google_logo{
        transform: translate(17%,500px);
        
    }
}
@media only screen and (max-width: 1920px){
    .wind .films-card {
        font-size: 18px;
    }
    #wind #section_1 .create_wrap {
        position: relative;
        margin: 180px 0px 50px 0px;
    }
    #wind #section_3 .create_wrap {
        position: relative;
        padding: 150px 0px 15px 0px;
    }
    .google_logo{
        transform: translate(17%,500px);
        
    }
}
@media only screen and (min-width: 1400px) {
   .bg{
        max-width:1320px;
        margin:0 auto;
   }
   .wind .films-card {
        font-size: 18px;
    }
   .coupon_top{
        margin-top: 600px;
    
    }
  .google_logo{
        transform: translate(17%,500px);
        
    }

}


@media only screen and (max-width: 1350px) {
    .google_logo{
        transform: translate(15%,500px); 
    }
}

@media only screen and (max-width: 1200px) { 
    .spm{
        transform: translate(3%,40%);
   }
   .spm img:nth-child(1){
    width: 20%;
    }
    .spm img:nth-child(2){
        max-width: 10em;
        /* height: auto; */
    }
    .spm img:last-child{
        width: 10%;
    }
    .google_logo{
        transform: translate(10%,500px); 
    }
    .google_logo a{
        width: 20%;
        margin: 10px; 
    }
    .coupon_top{
        margin-top: 600px;
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 300px 0px 50px 0px;
    }
    
    #wind #section_2 .create_wrap{
        position: relative;
        padding: 100px 200px 50px 0px;
    }
    
    #wind #section_3 .create_wrap{
        position: relative;
        padding: 180px 0px 15px 0px;
    }

}


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

    #wind #section_0 .create_wrap{
        position: relative;
        margin: 250px 0px 50px 0px;
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 150px 0px 50px 0px;
    }
    #wind #section_2 .create_wrap{
        position: relative;
        padding: 70px 0px 50px 0px;
    }
    #wind #section_3 .create_wrap{
        position: relative;
        padding: 70px 0px 15px 0px;
    }
    #wind #section_2 .swiper-button-next {
        right: 0px;
    
    }
}


/* 手機板 */
@media only screen and (max-width: 769px) {
    .wind{
        min-height: 100vh;
        background-image: url(/images/plus_sp/windfantasy/BG_mobile.jpg);
        background-repeat: no-repeat; 
     
    }
    .spm{
        transform: translate(3%,60%);
   }
   .spm img:nth-child(1){
    width: 30%;
    }
    .spm img:nth-child(2){
        max-width: 8em;
    }
    .spm img:last-child{
        width: 15%;
    }
    .google_logo{
        transform: translate(10%,450px); 
    }
    .coupon_top{
        margin-top: 610px;
    }
    #wind #section_0 .create_wrap{
        position: relative;
        margin: 550px 0px 50px 0px;
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 350px 0px 50px 0px;
    }
    #wind #section_2 .create_wrap{
        position: relative;
        padding: 300px 0px 30px 0px;
    }
    #wind #section_3 .create_wrap{
        position: relative;
        padding: 250px 0px 15px 0px;
    }
    .wind .infor .book{
        position: absolute;
        right: 5px;
        bottom: 60%;
    }
    #wind #section_2 .swiper-button-next,#wind #section_2 .swiper-button-prev{
        top: 65%;
    
    }
}

@media only screen and (max-width: 600px) {
    .wind{
        
        background-size: contain;
    }
    #wind #section_0 .create_wrap{
        position: relative;
        margin: 80px 0px 20px 0px;
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 80px 0px 20px 0px;
    }
    #wind #section_2 .create_wrap{
        position: relative;
        padding: 50px 0px 20px 0px;
    }
    #wind #section_3 .create_wrap{
        position: relative;
        padding: 50px 0px 15px 0px;
    }
}

@media only screen and (max-width: 576px) {
    .wind{
        background-size: contain;
    }
    .google_logo{
        transform: translate(10%,320px); 
    }
    .coupon_top{
        margin-top: 400px;
    }
   
    #wind .swiper-slide a {
        width: 80%;
    }
    #wind #section_0 .create_wrap{
        position: relative;
        margin: 150px 0px 0px 0px;
        padding-bottom: 0px;
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 20px 0px 20px 0px;
        padding-bottom: 0px;

    }
    #wind #section_2 .create_wrap{
        position: relative;
        padding: 10px 0px 20px 0px;
        padding: 0px;
        
    }
    #wind #section_3 .create_wrap{
        position: relative;
        padding: 20px 0px 50px 0px;
        margin-top: 0px;
    }
  
    .wind .infor .book img{
        width: 50px;
    }
}

@media only screen and (max-width: 450px) {
    .wind{
        background-size: contain;
    }
    .spm img:nth-child(2){
        max-width: 5em;
    }
    .google_logo{
        transform: translate(10%,250px); 
    }
    .coupon_top{
        margin-top: 300px;
    }
    .wind .coupon-wrap {
        margin: 0px auto 30px;
    }
    #wind #section_0 .create_wrap{
        position: relative;
        margin: 100px 0px 0px 0px;
        padding-bottom: 0px;
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 20px 0px 20px 0px;
        padding-bottom: 0px;

    }
    #wind #section_2 .create_wrap{
        position: relative;
        padding: 10px 0px 20px 0px;
        padding: 0px;
        
    }
    #wind #section_3 .create_wrap{
        position: relative;
        padding: 10px 0px 50px 0px;
        margin-top: 0px;
    }
    .wind .infor .book{
        position: absolute;
        right: 25px;
        bottom: 66%;
    }
    .wind .infor .book img{
        width: 50px;
    }
}
@media only screen and (max-width: 391px) {
    #wind #section_0 .create_wrap{
        position: relative;
        margin: 17px 0px 0px 0px;
       
        } 
    .wind .infor .book{
        position: absolute;
        right: 10px;
        bottom: 65%;
    }
    .google_logo{
        transform: translate(3%,220px); 
    }
    .google_logo a{
        width: 28%;
    }
    #wind #section_2 .create_wrap{
        position: relative;
        margin:35px 0px;
        
    }
    #wind #section_3 .create_wrap {
        position: relative;
        padding: 10px 0px 0px 0px;
    }
    #wind #section_2 .swiper-button-next,#wind #section_2 .swiper-button-prev{
        top: 55%;
    
    }
}
@media only screen and (max-width: 376px) {
    .wind{
        background-size: contain;
    }
    .spm{
        transform: translate(3%,60%);
   }

    .spm img:nth-child(2){
        max-width: 5em;
    }
    .spm img:last-child{
        width: 15%;
    }
    .google_logo{
        transform: translate(10%,220px); 
    }
    .coupon_top{
        margin-top: 240px;
    }
    .wind .coupon-wrap {
        margin: 0px auto 0px;
    }
    
    #wind .swiper-slide a {
        width: 75%;
    }

    #wind #section_0 .create_wrap{
        margin: 80px 0px 70px 0px;
        
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 10px 0px 30px 0px;
        padding-bottom: 0px;

    }
    #wind #section_2 .create_wrap{
        margin: 40px 0px;

    }
    #wind #section_3 .create_wrap{
        position: relative;
        padding: 10px 0px 0px 0px;
        margin-top: 0px;
    }
  
    .wind .infor .book{
        position: absolute;
        right: 5px;
        bottom: 65%;
    }
    #wind #section_2 .swiper-button-next,#wind #section_2 .swiper-button-prev{
        top: 50%;
    
    }
}

@media only screen and (max-width: 321px) {
    .google_logo{
        transform: translate(10%,180px); 
    }
    .coupon_top{
        margin-top: 180px;
    }
    #wind #section_0 .create_wrap{
        margin: 10px 0px;
        
    }
    #wind #section_1 .create_wrap{
        position: relative;
        margin: 10px 0px;

    }
    #wind #section_2 .create_wrap{
        position: relative;
        margin: 10px 0px;
    }
    #wind #section_3 .create_wrap{
        position: relative;
        margin: 0px 0px;
    }
    .wind .infor .book{
        position: absolute;
        left: 90px;
        bottom: 67%;
    }
    .wind .infor .book img{
        width: 42px;
    }

}

/* carrefour 家樂福 */

#carrefour .films-card{
    background-color: white;
}