/*font.css 已經引入思源黑體*/
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC:400,500,600&display=swap');

* {
    box-sizing: border-box;
}

html,
body {
    font-family: 'Noto Serif TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', '微軟正黑體', 'Microsoft JhengHei', sans-serif;

    font-size: 16px;
    position: relative;
    background-color: #333;
    
}
.wrapper {
    position: relative; z-index: 2;
    overflow: hidden;
    width: 100%;
    background-color: transparent;
    /* width: 750px; max-width: 750px; min-width: 320px;  */
    margin: 0 auto;
}
.bg{
    position: fixed; top:0; left:0;
    width: 100%; height: 100vh;
    background-image:url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}


/* ----------------------------------------------------
	initial html5 reset
---------------------------------------------------- */
html,body,div,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;margin:0;padding:0;vertical-align:middle;}
body{line-height:1;}
article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}
nav ul{list-style:none;}
ol{list-style:none;}
ul{list-style:none;}
ul ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:none;}del{text-decoration:line-through;}
mark{background:none;}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}
table{border-collapse:collapse;
border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input[type=submit],input[type=button],button{margin:0;padding:0; border:none;vertical-align:middle;}
input,select,a img{vertical-align:middle;}






/*-------------------------

           a

-------------------------*/
a,
button {
    text-decoration:none;

	-webkit-transition:all ease-in-out 0.2s;
	-moz-transition:all ease-in-out 0.2s;
	-ms-transition:all ease-in-out 0.2s;
	-o-transition:all ease-in-out 0.2s;
	transition:all ease-in-out 0.2s;
}
a:focus,
button:focus{
    outline: none;
    text-decoration: none;
}


/*-------------------------

         按鈕  btn

-------------------------*/
.btn{
    display:block;
    padding:0; border-radius:0;
   
}

/*-------------------------


          內  容


-------------------------*/
/* 共用框 */
.inner{
	position: relative;
    width: 750px; max-width: 750px; min-width: 320px;
    margin: 0 auto;
    padding: 0;

}


/*-------------------------

        fix
        social

-------------------------*/
.fix{
    position: fixed; z-index: 110;
    width: 80px;
}


/*社群icon*/
.social{
    position: fixed; 
    top:20px; right: 0px;
}
.social a{
    position: relative;
    display: block;
    width: 62px; height: 62px;
    text-indent: -9999px;
    margin-bottom: 10px;
}
.social a:hover:after{
    background-color: #cab297;
}
.social a:after{
    position: absolute; top: 0; left: 0; z-index: -1;
    content: "";
    display: block;
    width: 62px; height: 62px;
    background-color: rgba(180, 159, 136, 0.86);
    border-radius: 50px;
    animation-fill-mode:backwards;
    
}
.social a:nth-child(1){
    background: url(../images/social/icon-web.png) center no-repeat;
}
.social a:nth-child(2){
    background: url(../images/social/icon-fb.png) center no-repeat;
}
.social a:nth-child(3){
    background: url(../images/social/icon-ig.png) center no-repeat;
}
.social a:nth-child(4){
    background: url(../images/social/icon-line.png) center no-repeat;
}
/*
@media screen and (min-width: 751px) {
    .social{
        transform: scale(.8);
        transform-origin: right top;
    }
    .fix-index{
        bottom: 0%;
        transform: scale(.8);
        transform-origin: right bottom;
    }
}
*/



/*-------------------------

           kv

-------------------------*/
.kv{
    position: relative; z-index: 2;
    background:url(../images/kv/kv_bg.jpg) center top no-repeat;
    width: 100%; height: 1078px;
}



/*-------------------------
        slides
-------------------------*/
.kv #star-slides{
    position: absolute;
    left: -124px;
    width: 953px;  height: 953px;
    background:url(../images/kv/kv_pic_box.png) center top no-repeat;
    margin: 0 auto;
}
.kv #star-slides .slider_wrap{
	position: absolute;
    
}




/*title*/
.kv .title{
	position: relative;
    top: 810px;
    width: 460px;
    margin: 0 auto;
}

.kv .sum37_logo{
    margin: 0;
}
.kv h1{
    display: block;
    position: relative;
    top: -15px;
    text-indent: -9999px;
    width: 460px; height: 127px;
    margin: 0 auto;
    background: url(../images/kv/kv_h1.png) center/contain no-repeat;
    -webkit-mask-image: url(../images/kv/kv_h1_mask.png) ;
}

.kv h1:after{
    position: absolute;
    content: "";
    display: block;
    width: 460px; height: 127px;
    background: url(../images/kv/mask-line2.png) center  no-repeat;
    overflow: hidden;
    animation: 5s txt_shine infinite ease-in-out;
    animation-delay: .8s;
    opacity: 0;
}
@keyframes txt_shine {
    0% {
        transform: translateX(-300px);
        opacity: 1;
    }
    40% {
        transform: translateX(400px);
        opacity: 1;
    }
    100% {
        transform: translateX(400px);
        opacity: 1;
    }
}




/*-------------------------
        scroll-down
-------------------------*/
.kv .scroll-down {
    position: absolute; z-index: 10;
    top: 1050px;
    left: 49%;
    padding-top: 42px;
    display: block;
    text-align:center;
}
/*向下箭頭*/
.kv .arrow-down {
    display: block;
    margin: 0 auto;
    width: 15px; height: 20px;
}

/*線*/
.kv .scroll-down::before {
    content: " ";
    position: absolute;
    top: 0%; left: 50%;
    width: 1px; height: 50px;
    background: #fff;
    margin-left: -1px;
    animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes elasticus {
  0% {
    transform-origin: 0% 0%;
    transform: scale(1, 0);
  }
  50% {
    transform-origin: 0% 0%;
    transform: scale(1, 1);
  }
  50.1% {
    transform-origin: 0% 100%;
    transform: scale(1, 1);
  }
  100% {
    transform-origin: 0% 100%;
    transform: scale(1, 0);
  }
}







/*-------------------------

        video

-------------------------*/
.video{
    position: relative;
    width: 100%; height: 1707px;
    background: url(../images/video/video_bg.jpg) center top  no-repeat;
}
.video .video_box{
    width: 100%; height: 461px;
    background: url(../images/video/video_box.png) center top  no-repeat;
}

/* video mp4 */
.video video{
    position: relative;
    left: 15px; top: 27px;
    width: 720px; height:405px;
}

.pd-day{
    position: relative;
    top:100px;
    width: 100%; height: 800px
}
.pd-day .pd_img{
    position: absolute ;
    top: 0; right: -5px;
}
.pd_line{
    position: absolute ;
    top: 310px; left: 250px; 
}
.pd-day .day_1{
    position: absolute ;
    top: 300px; left: 30px; 
}
.pd-day .day_3{
    position: absolute ;
    top: 510px; left: 52px; 
}
.pd-day .day_7{
    position: absolute ;
    bottom:0; left: 110px; 
}


/*-------------------------

        pd

-------------------------*/
.pd{
    position: relative;
    width: 100%; height: 1192px;
	padding-top: 76px;
    background: url(../images/pd/pd_bg.jpg) center top no-repeat;
}
.pd .title{
    width: 417px;
    margin: 0 auto 32px;
}
.pd h2{
    display: block;
    position: relative;
    text-indent: -9999px;
    width:100%; height: 66px;
    background: url(../images/pd/pd_h2.png) center no-repeat;
    -webkit-mask-image: url(../images/pd/pd_h2.png) ;
}
.pd h2:before{
    position: absolute;
    content: "";
    display: block;
    width:100%; height: 66px;
    background: url(../images/kv/mask-line2.png) center  no-repeat;
    overflow: hidden;
    animation: 5s txt_shine infinite ease-in-out;
    animation-delay: .8s;
    opacity: 0;
}

.pd p{
    display: block;
    position: relative;
    text-indent: -9999px;
    width:100%; height: 55px;
    background: url(../images/pd/pd_p.png) center no-repeat;
}




/*-------------------------
        slides
-------------------------*/
.pd #tips_slides{
    position: relative;
    width: 646px;  min-height: 500px;
    text-align: center;
    padding-top: 100px;
    margin: 0 auto;
    
}
.pd #tips_slides .slider_wrap{
	width: 100%;
}

/*--- Dots ---*/
.pd  .slick-dotted.slick-slider {
    margin-bottom: 0px;
}
.pd  .slick-dots {
    position: absolute; z-index: 3;
    top: 0px;
    display: flex;
    justify-content: center;
    width: 100%; height: 123px;
    background: url(../images/pd/tab_bar.png) center no-repeat;
    
    padding: 0;
    list-style: none;
    text-align:center;
}
.pd  .slick-dots li {
    justify-content: center;
    position: relative;
    display: inline-block;
    width: 225px; height: 123px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.pd .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 225px; height: 123px;
    
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
}

.pd .slick-dots li:nth-child(1) button {
    display: block;
    width: 225px; height: 123px;
    background: url(../images/pd/pd_step1.png) center no-repeat;
}
.pd .slick-dots li:nth-child(2) button {
    display: block;
    width: 225px; height: 123px;
    background: url(../images/pd/pd_step2.png) center no-repeat;
}
.pd .slick-dots li:nth-child(3) button {
    display: block;
    width: 225px; height: 123px;
    background: url(../images/pd/pd_step3.png) center no-repeat;
}

.pd .slick-dots li button:hover,
.pd .slick-dots li button:focus {
    outline: none;
}

.pd .slick-dots li button:hover:before,
.pd .slick-dots li button:focus:before {
    opacity: 1;
}
.pd .slick-dots li button:before {
    content: "";
    position: absolute;
    top: 0px; left: 0; 
    width: 225px; height: 123px;
}
/*
.tips .slick-dots li.slick-active button:before {
    border: solid 1px transparent;
    
}
*/
.pd .slick-dots li:nth-child(1).slick-active button {
    width: 225px; height: 123px;
    background: url(../images/pd/pd_step1_active.png) center no-repeat;
}
.pd .slick-dots li:nth-child(2).slick-active button {
    width: 225px; height: 123px;
    background: url(../images/pd/pd_step2_active.png) center no-repeat;
}
.pd .slick-dots li:nth-child(3).slick-active button {
    width: 225px; height: 123px;
    background: url(../images/pd/pd_step3_active.png) center no-repeat;
}


/*--- 左右按鍵 ---*/
.slides .slick-prev,
.slides .slick-next{
	position: absolute;
    z-index: 40;
    transform: scale(1);
	background-color: transparent;
	font-size: 0;
	cursor: pointer;
}
#tips_slides .slick-prev{
    left: -10px; top: 360px;
}
#tips_slides .slick-next{
    right: -10px; top: 360px;
}

.slides .slick-prev:before{
    display: block;
    content: "";
    color: transparent;
    width: 51px; height: 124px;
    background: url(../images/pd/arrow.png) no-repeat center;
    transform: rotate(-180deg);
}
.slides .slick-next:before{
    display: block;
    content: "";
    color: transparent;
    width: 51px; height: 124px;
    background: url(../images/pd/arrow.png) no-repeat center;
    
}



/*-------------------------

        kol

-------------------------*/
.kol{
    position: relative;
    width: 100%; min-height: 2818px;
	padding-top: 76px;
    background: url(../images/kol/kol_bg.jpg) center top no-repeat;
}
.kol .title{
    width: 455px;
    margin: 0 auto 38px;
}
.kol .title h2{
    display: block;
    position: relative;
    text-indent: -9999px;
    width:100%; height: 57px;
    background: url(../images/kol/kol_h2.png) center no-repeat;
    -webkit-mask-image: url(../images/kol/kol_h2.png) ;
}
.kol .title h2:before{
    position: absolute;
    content: "";
    display: block;
    width:100%; height: 66px;
    background: url(../images/kv/mask-line2.png) center  no-repeat;
    overflow: hidden;
    animation: 5s txt_shine infinite ease-in-out;
    animation-delay: .8s;
    opacity: 0;
}
.kol .title p{
    display: block;
    position: relative;
    text-indent: -9999px;
    width:100%; height: 55px;
    background: url(../images/kol/kol_p.png) center no-repeat;
}

/*---- 裝飾 ----*/
.kol .de {
    position: absolute; 
    top:0;
    width: 100%;
}
.kol .de .de_bubble{
    position: absolute;
    background: url(../images/kol/img_bubble.png) center no-repeat;
    background-size: cover;
}
.kol .de .de_bubble.i1{
    top: -100px; right: 18px;
    width:157px; height: 152px;
    animation: 2s bubble2 infinite ease-in-out;
}
.kol .de .de_bubble.i2{
    top: 600px; left: -60px;
    width:187px; height: 182px;
    animation: 2.3s bubble2 infinite ease-in-out;
}
.kol .de .de_bubble.i2-2{
    z-index: 7;
    top: 590px; left: 80px;
    width:107px; height: 104px;
    animation: 2s bubble2 infinite ease;
    opacity: 0.9;
}
.kol .de .de_bubble.i3{
    z-index: 6;
    top: 1100px; right: -90px;
    width:187px; height: 182px;
    animation: 1.8s bubble2 infinite ease-in;
}
.kol .de .de_bubble.i4{
    z-index: 6;
    top: 1890px; right: 60px;
    width:137px; height: 134px;
    animation: 2.6s bubble2 infinite ease-in;
}
@keyframes bubble1 {
    0% {
        top: -100px;
    }
    50% {
        top: -108px;
    }
    100% {
        top: -100px;
    }
}
@keyframes bubble2 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
    100% {
        
    }
}

/*---- mv ----*/
.kol .mv{
    position: relative;
    width:100%; height: 460px;
    background: url(../images/kol/mv_box.png) center no-repeat;
}

.kol .mv .videobox{
    position: absolute;
    top: 3px; left: 28px;
}
.kol .mv .videobox .video-poster{
    position: relative;z-index: 3;
    overflow: hidden;
    width: 694px; height: 389px;
}
.kol .mv .videobox .video-poster:hover{
    cursor: pointer;
}
.kol .mv .videobox .video-poster:hover .play-btn{
    transform: scale(1.2);
    transition:all ease-in-out 0.2s;
}

/* video預覽圖片 */
.kol .videobox .video-poster .video-poster-pic{
    position: relative;
    width: 694px; height: 389px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition:all ease-in-out 0.8s;
    background-image: url(https://i.ytimg.com/vi/SO4g35Ky_mM/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCz0WALEHdp5uZpxVnu5DsAk3yQmA);
}

/*箭頭*/
.kol .videobox .video-poster .play-btn{
    position: absolute; top: 35%; left: 40%; z-index: 5;
    width: 138px; height: 138px;
    transition: all ease-in-out 0.3s;
}
.kol .videobox .video-poster .play-btn .play{
    width: 138px; height: 138px;
    background: url(../images/kol/playbtn.png) center no-repeat;
    
}

/*yt影片*/
.kol .videobox #video_kv{
    position: absolute; top: 0px; left: 0px;
    width: 694px; height: 389px;
}

/*---- kol ----*/
.item{
    position: relative;
}
.item.item1{
    
    
}
.item .txt{
    position: absolute; 
    top: 0;
}
.item:nth-child(odd) .txt{
    left: 0;
}
.item:nth-child(even) .txt{
    right: 0;
}

.item.item1 .txt{
    z-index: 3;
}
.item.item2 .txt{
    z-index: 2;
    width:432px;
    display: flex;
    justify-content:right;
    flex-wrap: wrap;
}
.item.item3 .txt{
    z-index: 2;
}

/*kol 標題*/
.item .txt h3{
    text-indent: -9999px;
}
.item.item1 .txt h3{
    width:462px; height: 237px;
    background: url(../images/kol/item1_h3.png) center no-repeat;
}
.item.item2 .txt h3{
    width:432px; height: 202px;
    background: url(../images/kol/item2_h3.png) center no-repeat;
}
.item.item3 .txt h3{
    width:592px; height: 227px;
    background: url(../images/kol/item3_h3.png) center no-repeat;
}

/*kol 內文*/
.item .txt>p{
    width: 340px;
    font-size: 28px;
    color: #684c2b;
    line-height: 1.4em;
    letter-spacing: 0.04em;
    text-align: justify;
    margin-bottom: 20px;
}
.item:nth-child(odd) .txt>p{
    padding-left: 40px;
}
.item:nth-child(even) .txt>p{
    padding-right: 36px;
}


/*kol 按鈕*/
.item .txt .btn{
    position: relative;
    width: 333px; height:65px;
    background-color: #91221e;
    text-align: center;
    padding-right: 14px;
    transition:all ease-in-out 0.2s;
}
.item .txt .btn:after{/*箭頭*/
    position: absolute; z-index:2;
    content: " ";
    pointer-events: none;
    height: 0; width: 0;
	top:42%; right:17%;
    border: solid transparent;
    border-left-color:#d9c59d;
    border-width: 7px;
    animation: 1s btn_arrow infinite ease-in-out;
}
.item:hover .txt .btn:after{
    animation:paused;
}
@keyframes btn_arrow {
    0% {
        right:17%;
    }
    50% {
        right:15%;
    }
}

.item:hover .txt .btn{
    transition:all ease-in-out 0.2s;
    background-color: #000;
}
.item .txt .btn p{
    font-size: 26px;
    color: #d9c59d;
    line-height: 65px;
    font-weight: 500;

}
.item:nth-child(odd) .txt .btn{
    border-radius: 0 50px 50px 0;
}
.item:nth-child(even) .txt .btn{
    border-radius: 50px 0 0 50px;
}
.item.item3 .txt .btn{
    left: 200px;
    width: 377px; height:75px;
    border-radius: 50px;
    padding-right: 20px;
}
.item.item3 .txt .btn p{
    color: #fff;
    font-size: 28px;
    line-height: 73px;
    letter-spacing: 0.05em;
}

/*kol 圖片*/
.item.item1 .pic{
    width:100%; height: 601px;
    background: url(../images/kol/item1_pic.png) center no-repeat;
}
.item.item2 .pic{
    width:100%; height: 680px;
    background: url(../images/kol/item2_pic.png) center no-repeat;
}
.item.item3 .pic{
    width:100%; height: 741px;
    background: url(../images/kol/item3_pic.png) 1px center no-repeat;
}





/*-------------------------

        featured

-------------------------*/
.featured{
    position: relative;
    width: 100%;/* min-height: 2363px;*/
    
}
.featured .inner{
    background: url(../images/featured/featured_bg.jpg) center top no-repeat #eadcd3;
    padding: 120px 0 80px;
}

/*---title---*/
.featured .title{
    position: relative;
    z-index: 3;
    width: 100%;
}
.featured .title h2{
    text-indent: -9999px;
    width: 357px; height: 46px;
    background: url(../images/featured/featured_h2.png) center no-repeat;
    margin: 0 0 28px 175px;
    -webkit-mask-image: url(../images/featured/featured_h2.png) ;
}
.featured .title h2:before{
    position: absolute;
    content: "";
    display: block;
    width: 357px; height: 46px;
    background: url(../images/kv/mask-line2.png) center  no-repeat;
    overflow: hidden;
    animation: 5s txt_shine infinite ease-in-out;
    animation-delay: .8s;
    opacity: 0;
}
.featured .title .ig_tips{
    position: relative;
    left: 110px;
}
/*認證*/
.featured .title .certification{
    position: absolute;
    top: -57px; right: 20px;
    display: block;
    text-indent: -9999px;
    width: 212px; height: 212px;
    background: url(../images/featured/certification.png) center  no-repeat;
    background-image: url(../images/featured/certification.png) ;
}


.featured .content{
    position: relative;
    top: -24px;
    background-color: #fff;
    border-radius:14px ;
    width: 706px;
    margin: 0 auto;
    padding: 60px 15px;
    text-align: center;
}

/*網友*/
.featured .content .item_group{
    display: flex;
    flex-wrap: wrap;
}
.featured .content .item_group .item{
    width: 44%;
    margin: 2% 3%;
}

.featured .content .item_group .item .pic{
    width: 222px; height: 222px;
    border-radius: 150px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
	filter: drop-shadow(7px 7px 0px rgba(51, 51, 51, 0.12));
    margin-bottom: 5px;
    background-size: cover;
    background-position: center;
}
/* .featured .content .item img{
	height:137%;
	
} */
.featured .content .item_group .item p{
	font-size: 28px;
    text-align:center;
    color: #91221e;
    margin: 12px auto;
    display:inline-block;
    font-family:'Noto Sans TC','儷黑 Pro','微軟正黑體', 'Arial', sans-serif;
}
.featured .content .item_group .item span{
    display: block;
	font-size: 22px;
    text-align:justify;
    color: #333;
    line-height: 1.35em;
    font-family:'Noto Sans TC','儷黑 Pro','微軟正黑體', 'Arial', sans-serif;
}

/*按鈕*/
.featured .btn_more{
    position: absolute;
    bottom: -30px; left: 26%;
    width: 377px; height: 74px;
    background: url(../images/featured/btn_more_bg.png) center  no-repeat;
    -webkit-mask-image: url(../images/featured/btn_more_bg.png) ;
    cursor: pointer;
}
.featured .btn_more:before{
    position: absolute;
    content: "";
    display: block;
    width: 411px; height: 411px;
    background: url(../images/featured/btn_more_bg_line.png) center  no-repeat;
    overflow: hidden;
    animation: 3s btn_shine infinite ease-in-out;
    top: -100px; left: -20px;
}
@keyframes btn_shine {
    0% {
        top: -100px;
        
    }
    50% {
        top: -180px;
    }
}
.featured .btn_more p{
    position: relative; z-index: 4;
    font-size: 26px;
    color: #fff;
    line-height: 65px;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-family: 'Noto Serif TC';
    text-shadow: 0 2px 25px rgb(122, 122, 122);
}






/*-------------------------

        other

-------------------------*/
.other{
    position: relative;
    width: 100%; height: 1138px;
	
    background: url(../images/other/ec_bg.jpg) center no-repeat;
}

/*title*/
.other .title{
    position: relative;
    width: 486px;
    margin: 0 auto;
    padding-top: 169px;
}
.other .title h2{
    text-indent: -9999px;
    width: 486px; height: 109px;
    background: url(../images/other/ec_h2.png) center no-repeat;
    margin: 0 auto;
    -webkit-mask-image: url(../images/other/ec_h2_mask.png) ;
}
.other .title h2:before{
    position: absolute;
    content: "";
    display: block;
    width: 486px; height: 109px;
    background: url(../images/kv/mask-line2.png) center  no-repeat;
    overflow: hidden;
    animation: 5s txt_shine infinite ease-in-out;
    animation-delay: .8s;
    opacity: 0;
}

.other .btn{
    position: relative; top:529px;
    width: 377px; height: 63px;
    background-color: #91221e;
    border-radius: 50px;
    text-align: center;
    margin: 0 auto;
    color: #fff;
    line-height: 63px;
    font-size: 27px;
    letter-spacing: 0.05em;
    transition:all ease-in-out 0.3s;
}
.other .btn:after{/*箭頭*/
    position: absolute; z-index:2;
    content: " ";
    pointer-events: none;
    height: 0; width: 0;
	top:42%; right:17%;
    border: solid transparent;
    border-left-color:#d9c59d;
    border-width: 7px;
    animation: 1s btn_arrow infinite ease-in-out;
}
.other .btn:hover{
    background-color: #000;
    transition:all ease-in-out 0.2s;
}







/*-------------------------

         lightbox

-------------------------*/
/* ---------------------
           共用
---------------------- */
.modal {
	background-color: transparent;
}


/*背景底色*/
.modal-backdrop {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1040;
	background: rgba(0, 0, 0, 0.88);
}
.modal-backdrop.fade {
	opacity: 0;
	filter: alpha(opacity=0);
}
.modal-backdrop.in {
	opacity: 1;
	filter: alpha(opacity=100);
}
.modal-open .modal {
	overflow-x: auto;
	overflow-y: auto;
}
.modal .modal-content {
	position: relative;
	background-color: transparent;
	border-radius: 0px;
	outline: 0;
}



/* ---------------------
        
---------------------- */
.style-box .modal-dialog {
	width: 750px;
	height: 100%;
	padding: 0;
	margin: 0 auto;
/*
	display: flex;
	justify-content: center;
	align-items: center;
*/
}

.style-box .modal-body {
	padding: 0;
	margin: 0;
	text-align: center;
}


/* ---------------------
        
---------------------- 
.style-box .modal-dialog {
	width: 750px;
	height: 100%;
	padding: 0;
	margin: 0 auto;
	display: block;

}

.style-box .modal-body {
    width: 700px; 
	padding: 90px 70px 70px;
	margin: 25px;
    background: #fff;
    display: block;
}

.style-box .modal-body h2{
	color: #5669a7;
    font-size: 50px;
    line-height: 1.3em;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 0 0 30px 0;
}
.style-box .modal-body h3{
	color: #5669a7;
    font-size: 40px;
    line-height: 1.4em;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-align: center;
}
.style-box .modal-body .box,
.style-box .modal-body .box2{
    display: block;
    margin: 0 0 30px 0;
}
.style-box .modal-body .box h4{
    position: relative;
    color: #333;
    font-size: 36px;
    line-height: 1.6em;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-align: center;
    width: 275px;
    margin: 0 auto 20px auto;
}
.style-box .modal-body .box h4:before,
.style-box .modal-body .box h4:after{
    position: absolute;
    display: block;
    content: "";
    width: 100%; height: 1px;
    background-color: #333;
}
.style-box .modal-body .box p{
    position: relative;
    color: #333;
    font-size: 32px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-align: justify;
}
*/

/*得獎名單
.style-box .modal-body .box2 h4{
    position: relative;
    color: #333;
    font-size: 34px;
    line-height: 1.6em;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-align: center;
    width: 400px;
    margin: 0 auto 20px auto;
}
.style-box .modal-body .box2 h4:before,
.style-box .modal-body .box2 h4:after{
    position: absolute;
    display: block;
    content: "";
    width: 100%; height: 1px;
    background-color: #333;
}
.style-box .modal-body .box2 p{
    position: relative;
    color: #333;
    font-size: 28px;
    line-height: 1.4em;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-align: center;
}
.style-box .modal-body .box2  span{
    display: block;
    color: #5669a7;
    font-size: 30px;
    line-height: 1.3em;
    font-weight: 400;
    letter-spacing: 0.03em;
    padding: 30px 0;
    text-align: center;
}
.style-box .modal-body .box2 ul{
    list-style:disc;
    padding: 20px 10px;
}
.style-box .modal-body .box2 ul li{
    font-size: 26px;
    line-height: 1.5em;
    text-align: justify;
    
}
*/
/* 關閉按鈕 */
.style-box .close {
	position: absolute; right: 20px; top: 0px;
	z-index: 10;
	font-size:6em;  color:#333;
	font-family:'Noto Sans TC';  font-weight:100;
	text-shadow: none;
    background-color: transparent;
    opacity: 1;
    cursor: pointer;
	transition:all ease-in-out 0.5s;
}
.style-box .close:hover {
	opacity: 1;
	transform: rotate(90deg);
	transition: all ease-in-out 0.5s;
}



/*-------------------------

          footer

-------------------------*/
footer {
	position: absolute;
    bottom: 0px; z-index: 100;
    background-color: transparent;
    height: 120px;
}
footer .logo.icon-bazaar-logo{
    color: #000;
    font-size: 55px;
    line-height: 120px;
}