/*font.css 已經引入思源黑體*/

* {
    box-sizing: border-box;
}

html,
body {
    font-family: 'Noto Sans TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    font-size: 16px;
    background:#fff;

}

.wrapper {
    overflow: hidden;
    width: 100%; max-width: 750px; min-width: 320px;
    margin: 0 auto;
    background-color: #fff;


    background-image:url(../images/body-bg.jpg);
    background-repeat: no-repeat;


}


/* ----------------------------------------------------
	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;
    font-family: 'Noto Sans TC', '微軟正黑體';
}







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

           menu

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

/*-------------------------
          漢堡icon
-------------------------*/
#trigger-overlay {
    position: fixed; right: 0px; top:0px; z-index: 100;
    width: 90px; height: 90px;
    /* border-radius: 50px; */
    /* background-color:black; */
}

.burger {
    position: relative;
    margin: 0 auto; padding: 20px;
    background-color: #fff;
    
/*    border-radius: 100px;*/
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transition: ease-in-out .5s;
    -o-transition: ease-in-out .5s;
    -webkit-transition: ease-in-out .5s;
    transition: ease-in-out .5s;

    cursor: pointer;

}

.burger span {
    position: absolute;  left: 8px;
    display: block;

    width: 60%; height: 4px;
    margin: 0 10%;
    background: #000;
    border-radius: 4px;
    opacity: 1;


    transform: rotate(0deg);
    transition: ease-in-out .25s;
}

.burger span:nth-child(1) { top: 29px}
.burger span:nth-child(2) { top: 42px;}
.burger span:nth-child(3) { top: 57px}


.burger.open span:nth-child(1) {
    top: 50%;
    transform: rotate(135deg)
}

.burger.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.burger.open span:nth-child(3) {
    top: 50%;
    transform: rotate(-135deg)
}



/*-------------------------
          選 單
-------------------------*/

.overlay {
    z-index: 99;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.94);
}

.overlay nav {
    text-align: center;
    position: relative;
    width: 100%;  height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay ul {
    position: relative;
    width: 80%;
    list-style: none;
    padding: 0; margin: 0;
    display: inline-block;
    
}
.overlay ul li {
    display: block;
    min-height: 120px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-bottom: 1px solid rgba(144, 134, 130, 0.3);
    
}

.overlay ul li .icon-bazaar-logo{
    color: #fff;
    font-size: 100px;
}
.overlay ul li:first-child,
.overlay ul li:last-child {
    border-bottom: 1px solid transparent;
    
}

.overlay ul li .navItem {
    width: 100%; height: 100%;

    font-family: "Noto Sans TC", sans-serif;
    font-size: 2.75rem; font-weight: 400;
    line-height: 120px;
    display: block;
    color: #fff;

    -webkit-transition: color .2s;
    transition: color .2s;
    background-color: transparent;

    transition: background-color .2s ease-in-out;
}

/* logo */
.overlay  .logo{
    position: relative;
    display: block;
    width: 450px; height: 220px;
    background: url(../images/kv/) center bottom no-repeat;
    margin: 0 auto;
    
}


/**/

.overlay nav ul li:nth-child(2) p{
    display: inline-block;
    width: 100px; height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    background-color: #c63601;
    font-size: 30px;
    margin-right: 10px;

}




.overlay ul li:hover,
.overlay ul li:focus,
.overlay ul li:active {
    background-color: transparent;
}

.overlay ul li:hover:last-child,
.overlay ul li:focus:last-child,
.overlay ul li:active:last-child {
    background-color: transparent;
}


.overlay-scale {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    -webkit-transition: -webkit-transform .2s, opacity .2s, visibility 0s .2s;
    transition: transform .2s, opacity .2s, visibility 0s .2s;
}

.overlay-scale.open {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform .4s, opacity .4s;
    transition: transform .4s, opacity .4s;
}

.menuActive{
    color: #fff786;
}





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


          內  容


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

/* 共用框 */
.inner{
	position: relative;
    width:100%; min-width: 750px; max-width: none !important;
    margin: 0 auto;
    padding: 0;
}



.kv .kv-bg{
    position: absolute; top: 0; z-index: 0;
    width: 100%; height: 1158px;
    background: url(../images/kv/kv-bg.jpg) center top no-repeat;
}

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

           kv

-------------------------*/
.kv{
    position: relative; top: 0;
    width: 100%;
    height: 1158px;
    overflow: hidden;

}
/**/
.kv .title{
    position: relative; z-index: 10; top: 535px; right: 24px;
    width: 100%; height: 225px;
    text-align: center;
}
.kv .logo{
    position: absolute; left: 84px; top:20px; z-index: 10;
    
}

.kv .title h1{
    width: 100%; height: 113px;
    background: url(../images/kv/kv-h1.png) top right  no-repeat;
    text-indent: -9999px; 
    margin-bottom: 145px;
}
.kv .title p{
    width: 100%; height: 33px;
    background: url(../images/kv/kv-p.png) top right no-repeat;
    text-indent: -9999px;
    margin-bottom: 20px;
}

.kv .title h3{
    position: relative; 
    width: 100%; height: 115px;
    background: url(../images/kv/kv-h3.png) top right no-repeat;
    text-indent: -9999px;
}
.kv .title h3:before{
    position: absolute; right: 0; top: -60px;
    content: "";
    display: block;
    width: 97px; height: 45px;
    background: url(../images/kv/kv-h3-small.png) top right no-repeat;
}





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

           data

-------------------------*/
.data{
    position: relative; top: 0px; z-index: 2;
    width: 100%;
    background: url(../images/data/game-bg.png) center top no-repeat;

}
.data  .title{
    position: relative;
    width: 100%;
    margin-bottom:70px;
}
.data .title h1{
    position: absolute; top: 190px; left: 5px;
    width: 100%; height: 119px;
    background: url(../images/data/game-h1.png) center top no-repeat;
    text-indent: -9999px;
    margin-left: 5px;
}
.data .title p{
    font-size: 30px; line-height: 1.4em;
    font-weight: 400;
    text-align: justify;
    padding: 43.5% 6.6% 0;
    font-family: "cwtexming";
    letter-spacing: 0.04em;
    text-align: center;
}

/*-------------------------
        game
-------------------------*/
.game button p{
    color: #fff;
    font-size: 30px; line-height: 1.4em;
    font-weight: 400;
    letter-spacing: 0.043em;
    font-family: 'Noto Sans TC';
    width: 240px;
    margin: 0 auto 10px auto;
    padding: 0;
    filter: drop-shadow( 1px 1px 3px #333);
    text-align: center;
}
/*問題一 字型大小*/
.step1 button p{
    font-size: 36px;
}

.game{
    display: flex;
    min-height: 560px;
}
.game button{

}
.game button:hover{
    cursor: pointer;
}
/*樣式1*/
.game .style-1{
    position: relative;
    width: 400px; height: 417px;
    background: url(../images/data/game-btn-1.png) center top no-repeat;
    animation: 2s style infinite ease-in-out;
}
@keyframes style{
    100%{
        background: url(../images/data/game-btn-1.png) center top no-repeat;
    }
    50%{
        background: url(../images/data/game-btn-1_hover.png) center top no-repeat;
    }
    0% {
        background: url(../images/data/game-btn-1.png) center top no-repeat;
    }
}
.game .style-1:hover{
    width: 400px; height: 417px;
    background: url(../images/data/game-btn-1_hover.png) center top no-repeat;
    animation: none;
}
/*樣式2*/
.game .style-2{
    position: relative;
    width: 400px; height: 417px;
    background: url(../images/data/game-btn-2.png) center top no-repeat;
    animation: 2s 1s style2 infinite ease-in-out;
}
@keyframes style2{
    100%{
        background: url(../images/data/game-btn-2.png) center top no-repeat;
    }
    50%{
        background: url(../images/data/game-btn-2_hover.png) center top no-repeat;
    }
    0% {
        background: url(../images/data/game-btn-2.png) center top no-repeat;
    }
}
.game .style-2:hover{
    width: 400px; height: 417px;
    background: url(../images/data/game-btn-2_hover.png) center top no-repeat;
    animation: none;
}

/*abcdef*/
.game .tab-a:before{
    position: absolute; top: 0; left: 80px;
    content: "";
    width: 71px; height: 103px;
    background: url(../images/data/game-a.jpg) center top no-repeat;
}
.game .tab-b:before{
    position: absolute; top: 0; left: 75px;
    content: "";
    width: 71px; height: 103px;
    background: url(../images/data/game-b.jpg) center top no-repeat;
}
.game .tab-c:before{
    position: absolute; top: 0; left: 80px;
    content: "";
    width: 71px; height: 103px;
    background: url(../images/data/game-c.jpg) center top no-repeat;
}
.game .tab-d:before{
    position: absolute; top: 0; left: 75px;
    content: "";
    width: 71px; height: 103px;
    background: url(../images/data/game-d.jpg) center top no-repeat;
}
.game .tab-e:before{
    position: absolute; top: 0; left: 80px;
    content: "";
    width: 71px; height: 103px;
    background: url(../images/data/game-e.jpg) center top no-repeat;
}
.game .tab-f:before{
    position: absolute; top: 0; left: 75px;
    content: "";
    width: 71px; height: 103px;
    background: url(../images/data/game-f.jpg) center top no-repeat;
}



/*-------------------------
        game 結果
-------------------------*/

.result{
    width: 750px; min-height: 600px;
/*    background: url(../images/data/result-mirror.png) center left no-repeat;*/
}


.result .retest{
    position: absolute; z-index: 10; right: 6.4%; bottom: 0px;
    display: block;
    width: 320px; height: 77px;
    margin: 0 auto;
    color: #fff;
    font-size: 32px; line-height: 1.5em;
    letter-spacing: 0.1em;
    font-weight: 400;
    background: #000;
}
.result .retest:hover{
    background: #111;
}

/*-------------------------
          slides
-------------------------*/
#game{
    position: relative; top:-30px;
    width: 750px; min-height: 630px;
    margin-bottom: 40px;

}
#game .slider_wrap{
    position: relative;
    width: 750px; height: 620px;
    background: url(../images/data/result-mirror.png) top left no-repeat;
}

#game .result-title{
    position: relative; top:175px; left: 15px;
    width: 290px; height: 280px;
}
/*
#game .result-title h2{
    color: #fff;
    font-size: 43px; line-height: 1.25em;
    font-weight: 400;
    text-align: justify
    letter-spacing: 0.0543em;
    font-family: 'Noto Sans TC';
    filter: drop-shadow( 1px 1px 3px #333);
    margin-bottom: 43px;
}
#game .result-title p{
    color: #fff;
    font-size: 32px; line-height: 1.5em;
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.04em;
    font-family: 'Noto Sans TC';
    margin: 0 auto;
    padding: 0 20px 0 0;
    filter: drop-shadow( 1px 1px 3px #333);
}
*/
#game .result-title p{
    color: #fff;
    font-size: 47px; line-height: 1.25em;
    font-weight: 400;
    letter-spacing: 0.03em;
    font-family: 'Noto Sans TC';
    filter: drop-shadow( 1px 1px 3px #333);
    margin-bottom: 10px;
}
#game .js-quiz-box-a .result-title  p:nth-child(even){
    margin-left: 30px;
}
#game .js-quiz-box-c .result-title  p:nth-child(even){
    margin-left: 0px;
    font-size: 40px;
}

#game .slider_wrap img{
    position: absolute; top:0;
    width: 750px; 
}


/*左右按鍵*/
/*
#game .slick-prev{
    position: absolute; top: 410px; left: 0; z-index: 10;
    width: 10%; height: 62px;
    background: url(../images/editor/arrow.png) no-repeat right top;
    transform: rotateY(180deg);
}
*/
#game .slick-next{
    position: absolute; top: 20px; right: 30px; z-index: 10;
    width: 51px; height: 62px;
    background: url(../images/data/arrow2.png) no-repeat right top;
}
#game .slick-next:before{
    color: transparent;
}
#game .slick-next:hover{
    cursor: pointer;
    position: absolute; top: 20px; right: 30px; z-index: 10;
    width: 51px; height: 62px;
    background: url(../images/data/arrow2.png) no-repeat right top;

}


/* Dots */
#game .slick-dotted.slick-slider{
    margin-bottom: 0;
}
#game .slick-dots {
    position: absolute; top: 5.5%; right: 10%; z-index: 10;
    display: block;
    width: 30%; height: 35px;
    padding: 0; margin: 0;
    list-style: none; text-align: center;
}
#game .slick-dots li{
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 30px; height: 30px;
    margin: 0 8px; padding: 0;
}

#game .slick-dots li button{
    font-size: 0;
    line-height: 0;

    display: block;

    /* width: 22px;
    height: 22px; */
    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
#game .slick-dots li button:hover,
#game .slick-dots li button:focus{
    outline: none;
}
#game .slick-dots li button:hover:before{
    opacity: 1;
    background-color: #908682;
}
#game .slick-dots li button:before{
    /* font-family: 'slick';
    font-size: 20px;
    line-height: 20px; */
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: 0;

    width: 30px; height: 30px;
    content: '';
    text-align: center;
    background-color: rgba(144, 134, 130, 0.3);
    opacity: 1;
    /* color: #fff; */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#game .slick-dots li.slick-active button:before{
    opacity: 1;
    background-color: #908682;
}



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

        video

-------------------------*/
.video{
    position: relative; 
    height: 748px;
}
.video h1{
    width: 100%; height: 147px;
    background: url(../images/video/video-h1.png) center top no-repeat;
    text-indent: -9999px;
}


/*VIDEO*/
.video .videobox{
    position: relative; top: 20px; left: 0%;  z-index: 2;
    display: block;
    width: 750px; height:437px;
    overflow: hidden;
    filter: drop-shadow(0 6px 6px #817962);
}
.videobox:hover{
    cursor: pointer;
}
.videobox .video-poster{
    position: absolute; top: 0; z-index: 3;
    overflow: hidden;
    display: block;
}
.videobox .video-poster .video-poster-pic{
    position: relative;
    width: 750px; height:437px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition:all ease-in-out 0.8s;
}


/* video預覽圖片 */
.video-v .video-poster .video-poster-pic{
    background-image: url(../images/video/video1-poster.jpg);
}
.video-e .video-poster .video-poster-pic{
    background-image: url(../images/video/video2-poster.jpg);
}

.videobox:hover .video-poster .video-poster-pic{
    transform: scale(1.05);
    transition:all ease-in-out 0.8s;
}
.videobox:hover .video-poster .video-poster-pic:before{
    background: rgba(0, 0, 0, 0);
}


/*箭頭*/
.videobox .play-btn{
    position: absolute; top: 44%; left: 47%; z-index: 2;
    width: 70px; height: 65px;
    transition:all ease-in-out 0.3s;
}
.videobox .play-btn:before{
    position: absolute; top: 0; left: 0%; z-index: 3;
    content: "";
    display: block;
    width: 70px; height: 65px;
    -webkit-clip-path: polygon(0 0, 0% 100%, 77% 50%);
    clip-path: polygon(0 0, 0% 100%, 77% 50%);
    background-color: #fff;
    transition:all ease-in-out 0.3s;
}

.videobox .coming{
    position: absolute; top: 47%; left: 0; z-index: 2;
    width: 100%; height: 31px;
    background: url(../images/video/comimgsoon.png) center no-repeat;
    
}
/*
.videobox .play-btn:after{
    position: absolute; top: 0; left: 0; z-index: 3;
    content: "";
    display: block;
    width: 120px; height: 120px;
    border-radius: 150px;
    box-shadow: inset 0 0 0 1px #c20a2c;
    transition:all ease-in-out 0.3s;
}
*/

.videobox:hover .play-btn{

}
.videobox:hover .play-btn:before{
    transition:all ease-in-out 1s;
    background-color: #fff;
    transform:scale(1.2);
}







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

           edtior

-------------------------*/
.edtior1{
    position: relative;
    height: 600px;
}
/*
.edtior1:before{
    position: absolute; top: 20px; right: 80px; z-index: 4;
    content: "";
    width: 200px; height: 1px;
    background-color: #000;
}
.edtior1:after{
    position: absolute; top: 20px; right: 80px;
    content: "";
    width: 1px; height: 140px;
    background-color: #000;
}
*/
.edtior1 .txt{
    position: absolute; right: 0px; top: 120px; z-index: 3;
    width: 52%;
}
.edtior1 .txt h1{
    width: 100%; height: 132px;
    background: url(../images/editor/editor1-h1.png) center left no-repeat;
    background-size: contain;
    text-indent: -999px;
    margin-bottom: 20px;
}
.edtior1 .txt p{
    color: #000;
    font-family: "cwtexming";
    font-size: 28px; letter-spacing: 0em;
    font-weight: 400; line-height: 1.5em;
    padding-right: 30px;
    text-align: justify;
    margin-bottom: 20px;
}
.edtior1 .txt a{
    display: block;
    width: 320px; height: 77px;
    background: url(../images/editor/btn-more.png) center no-repeat #000;
    text-indent: -999px;
}
.edtior1 .txt a:hover{
    background: url(../images/editor/btn-more.png) center no-repeat #111;
}

.edtior1 .pic{
    position: relative; z-index: 2;
    width: 610px; height: 563px;
    background: url(../images/editor/editor1-pic.jpg) center left no-repeat #fff;
}
.edtior1 .pic:after{
    position: absolute; top:-20px;
    content: "";
    display: block;
    width: 620px; height: 593px;
    border: solid 6px #fff;
}


.edtior1 .videobox{
    position: absolute; top:560px; left: 0%;  z-index: 3;
}
.edtior1 .bg{
    position: absolute; top:560px; z-index: 1;
    display: block;
    content: "";
    width: 750px; height:437px;
    background-color: rgba(179, 169, 167, 0.6);
    transform: rotate(-7deg);
}





/**/
.edtior2{
    position: relative;
    min-height: 500px;
    margin: 120px 0 180px 0;
}

.edtior2 h1{
    width: 750px; height: 124px;
    background: url(../images/editor/editor2-h1.png) center no-repeat;
    background-size: contain;
    text-indent: -999px;
}




/*-------------------------
          slides
-------------------------*/
#edtior{
    position: relative; top: 65px;
    width: 650px;
    margin: 0 auto; height: 700px;

}
/*裝飾
.edtior2 .slides:before{
    position:absolute; top: -230px; left: -68px; z-index: 5;
    content: "";
    display: block;
    width: 226px; height: 184px;
    background: url(../images/editor/editor2-de2.png) center top no-repeat;
}*/
/*
.edtior2 .slides:after{
    position:absolute; bottom: 10px; right: -40px; z-index: 5;
    content: "";
    display: block;
    width: 226px; height: 184px;
    background: url(../images/editor/editor2-de.png) center top no-repeat;
    transform: rotate(180deg);
}
*/
#edtior .slider_wrap{
    position: relative;

}

#edtior .slider_wrap p{
    color: #000;
    font-family: "cwtexming";
    font-size: 28px; letter-spacing: 0.075em;
    font-weight: 400; line-height: 1.5em;
    padding-right: 30px;
    text-align:center;
    margin-bottom: 33px;
    padding: 4% 10% 0 10%;
}
#edtior .slider_wrap .btn{
    display: block;
    width: 320px; height: 77px;
    background: url(../images/editor/btn-more.png) center no-repeat #000;
    text-indent: -9999px;
    margin: 0 auto;
    transition:all ease-in-out 0.2s;
}
#edtior .slider_wrap:hover .btn{
    transition:all ease-in-out 0.2s;
    background: url(../images/editor/btn-more.png) center no-repeat #111;
}

/*左右按鍵*/
.edtior2 .slick-prev{
    position: absolute; top: 410px; left: 0; z-index: 10;
    width: 10%; height: 62px;
    background: url(../images/editor/arrow.png) no-repeat right top;
    transform: rotateY(180deg);
}
.edtior2 .slick-next{
    position: absolute; top: 410px; right: 0; z-index: 10;
    width: 10%; height: 62px;
    background: url(../images/editor/arrow.png) no-repeat right top;
}


.edtior2 .slick-prev:before,
.edtior2 .slick-next:before{
    color: transparent;
}
.edtior2 .slick-prev:hover{
    position: absolute; top: 410px; left: -10px; z-index: 10;
    width: 10%; height: 62px;
    background: url(../images/editor/arrow.png) no-repeat right top;
    transform: rotateY(180deg);

}
.edtior2 .slick-next:hover{
    position: absolute; top: 410px; right: -10px; z-index: 10;
    width: 10%; height: 62px;
    background: url(../images/editor/arrow.png) no-repeat right top;

}


/* Dots */
.edtior2 .slick-dotted.slick-slider{
    margin-bottom: 0;
}

.edtior2 .slick-dots {
    position: absolute; bottom: -10px; left: 0px; z-index: 10;
    display: block;
    width: 100%;
    padding: 0; margin: 0;
    list-style: none; text-align: center;
}
.edtior2 .slick-dots li{
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 13px; height: 13px;
    margin: 0 5px; padding: 0;
}

.edtior2 .slick-dots li button{
    font-size: 0;
    line-height: 0;

    display: block;

    /* width: 22px;
    height: 22px; */
    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.edtior2 .slick-dots li button:hover,
.edtior2 .slick-dots li button:focus{
    outline: none;
}
.edtior2 .slick-dots li button:hover:before{
    opacity: 1;
    background-color: #000;
}
.edtior2 .slick-dots li button:before{
    /* font-family: 'slick';
    font-size: 20px;
    line-height: 20px; */
border-radius: 50px;
    position: absolute;
    top: 0;
    left: 0;

    width: 13px;
    height: 13px;
    content: '';
    text-align: center;
    background-color: #c3c3c3;
    opacity: 1;
    /* color: #fff; */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.edtior2 .slick-dots li.slick-active button:before{
    opacity: 1;
    background-color: #000;
}




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

         lightbox

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


/*背景底色
.modal-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1040;
    background: url(../images/pattern/pattern-black.jpg) left top;
}*/
.modal-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.94);
}
.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: 1150px;
    padding: 0;
    margin: 10vh auto;
}
.style-box .modal-body{
    position: relative;
    /* padding-bottom: 42.5%;
    padding-top: 130px; */
    padding-bottom: 56.2%; /* 16:9 */
    padding-top: 0%;
    height: 0;
    box-sizing:content-box;
}
.style-box .modal-body iframe{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
@media screen and (max-width: 1150px) {
    .style-box .modal-dialog{
	    width:100%;
        padding: 0;
        margin: 25vh auto;

    }
}

/* 關閉按鈕 */
.style-box .close{
    position: absolute; right: -73px; top: 0px; z-index: 10;
	text-shadow: none;
    background-color: transparent;
    opacity: 0.5;
    cursor: pointer;
	transition:all ease-in-out 0.2s;
    height: 72px; width: 72px;
    background: url(../images/video/close-btn.png) center top no-repeat;
    outline: none;
    border: none;
}
.style-box .close:hover{
    opacity: 1;
    transform: rotate(90deg);
    transition:all ease-in-out 0.5s;
}
@media screen and (max-width: 1150px) {
    .style-box .close{
	    right: 20px;top: -93px;
        transform: scale(1.5);
    }
}




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

          footer

-------------------------*/
footer.mobile {
    position: relative;
    background-color: #000;
    height: 100px;
    line-height: 125px;
    text-align: center;
}
footer.mobile .logo{
     color: #fff;
}


/* game */

.js-quiz-box {
	display: none;
}
.js-quiz-box.active {
	display: flex;
}