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

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500&display=swap');

* {
    box-sizing: border-box;
}

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

@media screen and (max-width:750px){
    .wrapper {
        overflow: hidden;
        width: 750px; max-width: 750px; min-width: 320px;
    }
}




/* ----------------------------------------------------
	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{
    display:block; 
    padding:0; 
    border-radius:0;
    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;
    font-family: 'Noto Sans TC', '微軟正黑體';
    position: absolute;
    content: "";
    outline: none;
    text-decoration: none;
    cursor: pointer;
}

.btn_arr{
    position: absolute;
    display: block;
    width: 14px;
    height: 16px;
    top: 30px;
    right: 55px;
    background: url(../images/arr.png) center top no-repeat;
    z-index: 99;
    animation: arr 2s linear infinite alternate;
}
@keyframes arr {
	0%{opacity: 10;}
	50% {opacity: 10;right: 40px;}
	100% {opacity: 10;}
}


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

         按鈕  btn

-------------------------*/
.btn{
    display:block; padding:0; border-radius:0;
    font-family: 'Noto Sans TC', '微軟正黑體';
}


/*按鈕*/
.btn:before,
.btn:after{
    position: absolute;
    display: block;
    content: "";
}


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


          內  容


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

}




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

             kv

-------------------------*/
.kv{
    position: relative;
    width: 100%;
    height: 1300px;
    margin: 0 auto;
}
.kv .inner{
    position: relative;
    width: 750px; 
    height: 100%;
    margin: 0 auto;
}
.kv .paper{
    position: relative;
    margin: 0 auto;
    width: 1157px; 
    height: 1185px;
    left: -200px;
    top: 50px;
    background: url(../images/kv/paper.png) center no-repeat;
    z-index: 2;
}
.kv .title_area{
    position: relative;
    margin: 0 auto;
    width: 695px;
    height: 555px;
    top: 230px;
    background: url(../images/kv/title_bg.png) center no-repeat;
    z-index: 1;
}
.kv .title{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 695px;
    height: 137px;
    top: 55px;
    background: url(../images/kv/title.png) center no-repeat;
}
.kv .h1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 695px;
    height: 82px;
    top: 205px;
    background: url(../images/kv/h1.png) center no-repeat;
}
.kv .guide{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 695px;
    height: 82px;
    top: 282px;
    background: url(../images/kv/guide.png) center no-repeat;
    animation: kv_guide 2s linear infinite alternate;
}
@keyframes kv_guide {
	0%{transform:rotate(0deg);}
	33% {transform:rotate(50deg);} 
    66% {transform:rotate(-50deg);} 
	100% {transform:rotate(0deg);}
}
        
.kv .h2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 695px;
    height: 57px;
    top: 370px;
    background: url(../images/kv/h2.png) center no-repeat;
}
.kv .shine1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 48px;
    height: 71px;
    top: 250px;
    left: 110px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine1 2s linear infinite alternate;
}
@keyframes shine1 {
	0%{opacity: 10;}
    50% {opacity: 0; transform: scale(.7);} 
	100% {opacity: 10;}
}
.kv .shine2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 28px;
    height: 51px;
    top: 230px;
    left: 80px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine2 2s linear infinite alternate;
}
@keyframes shine2 {
	0%{opacity: 0;}
    50% {opacity: 10; transform: scale(.7);} 
	100% {opacity: 0;}
}
.kv .shine3{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 48px;
    height: 71px;
    top: 250px;
    right: 110px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine1 2s linear infinite alternate;
}
.kv .shine4{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 28px;
    height: 51px;
    top: 230px;
    right: 80px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine2 2s linear infinite alternate;
}

.kv .littlegirl{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 391px;
    height: 339px;
    top: -10px;
    left: 210px;
    background: url(../images/kv/littlegirl.png) center no-repeat;
     z-index: 2;
}
.kv .signpost{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 311px;
    height: 403px;
    top: -35px;
    right: 250px;
    background: url(../images/kv/signpost.gif) center no-repeat;
}
.kv .girl{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 623px;
    height: 536px;
    bottom: -5px;
    right: 120px;
    background: url(../images/kv/girl.png) center no-repeat;
    z-index: 2;
}
.kv .dec01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 112px;
    height: 153px;
    top: 600px;
    left: 280px;
    background: url(../images/kv/dec01.png) center no-repeat;
    z-index: 2;
}
.kv .dec02{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 91px;
    height: 179px;
    bottom: 150px;
    left: 320px;
    background: url(../images/kv/dec02.png) center no-repeat;
    z-index: 2;
}
.kv .dec03{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 147px;
    height: 166px;
    bottom: 250px;
    left: 220px;
    background: url(../images/kv/dec03.png) center no-repeat;
    z-index: 2;
}
.kv .kv_dot_w01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 373px;
    height: 382px;
    top: -170px;
    left: 40px;
    background: url(../images/dot_w01.png) center no-repeat;
    animation: kv_dot_w01 140s linear infinite alternate;
}

@keyframes kv_dot_w01 {
	0%{transform:rotate(0deg);}
	50% {transform:rotate(180deg);} 
	100% {transform:rotate(0deg);}
}
.kv .kv_dot_g01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 373px;
    height: 382px;
    top: 410px;
    right: -20px;
    background: url(../images/dot_g01.png) center no-repeat;
    animation: kv_dot_g01 120s linear infinite alternate;
}

@keyframes kv_dot_g01 {
	0%{transform:rotate(0deg);}
	50% {transform:rotate(-180deg);} 
	100% {transform:rotate(0deg);}
}
.kv .kv_dot_g02{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 574px;
    height: 574px;
    bottom: 0px;
    left: -280px;
    background: url(../images/dot_g02.png) center no-repeat;
    animation: kv_dot_g02 120s linear infinite alternate;
    z-index: 1;
}

@keyframes kv_dot_g02 {
	0%{transform:rotate(0deg);}
	50% {transform:rotate(-180deg);} 
	100% {transform:rotate(0deg);}
}
.kv .kv_yellowblock01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 734px;
    height: 456px;
    bottom: -220px;
    left: -50px;
    background: url(../images/yellowblock01.png) center no-repeat;
}


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

          video

-------------------------*/
.video{
    position: relative;
    width: 100%;
    height: 1900px;
    margin: 0 auto;
}
.video .inner{
    position: relative;
    width: 750px; 
    height: 100%;
    margin: 0 auto;
}
.video .title_area{
    position: relative;
    margin: 0 auto;
    width: 750px;
    height: 350px;
    top: 60px;
    z-index: 2;
}
.video .title{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 527px;
    height: 69px;
    top: 55px;
    right: 30px;
    background: url(../images/video/title.png) center no-repeat;
}
.video .h1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 308px;
    height: 125px;
    top: 155px;
    right: 130px;
    background: url(../images/video/h1.png) center no-repeat;
}
.video .underline{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 240px;
    height: 13px;
    top: 310px;
    right: 156px;
    background: url(../images/video/underline.png) center no-repeat;
}
.video .kart{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 273px;
    height: 332px;
    top: 10px;
    left: 6px;
    background: url(../images/video/kart.png) center no-repeat;
}
.video .followup{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 229px;
    height: 140px;
    top: -140px;
    left: 30px;
    background: url(../images/video/followup.png) center no-repeat;
}

.video .shine1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 48px;
    height: 71px;
    top: 210px;
    right: 40px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine1 2s linear infinite alternate;
}

.video .shine2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 28px;
    height: 51px;
    top: 270px;
    right: 90px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine2 2s linear infinite alternate;
}

.video .video_dot_w02{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 373px;
    height: 382px;
    top: -100px;
    right: -220px;
    background: url(../images/dot_w02.png) center no-repeat;
    animation: kv_dot_g01 120s linear infinite alternate;
}

@keyframes kv_dot_g01 {
	0%{transform:rotate(0deg);}
	50% {transform:rotate(180deg);} 
	100% {transform:rotate(0deg);}
}

.video .way_area{
    position: relative;
    margin: 0 auto;
    width: 750px;
    height: 660px;
    top: 80px;
    margin-bottom: 50px; 
    z-index: 2;
}
.video .way_name{
    position: relative;
    margin: 0 auto;
    width: 685px;
    height: 208px;
    top: 0px;
}
.video .way_name p{
    position: absolute;
    text-align: center;
    margin: 0 auto;
    width: 685px;
    height: 29px;
    top: 160px;
}
.video .video_area{
    position: relative;
    margin: 0 auto;
    width: 711px;
    height: 409px;
    top: 22px;
    background-color: #ffd400;
    border-radius: 10px;
}




/*-------------------------
        main_video
-------------------------*/
.video .main_videobox{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 675px; 
    height: 380px;
    top: 15px;
    left: 20px;
    z-index: 3;
    overflow: hidden;
}


/*-------------------------
        video內容  
-------------------------*/
.video .videobox{
    position: relative; 
    display: block;
    width: 675px; height: 380px;
    margin: 0 auto;
    top: 0px;
    z-index: 2;
/*    cursor: pointer;*/
}
.video .videobox:before{
    position: absolute; z-index: 4;
    top: 0px; left: -2px;
    content: "";
    display: block;
    width: 668px; height: 368px;
    border: solid 6px #fff;
    pointer-events: none;
    
}
.video .videobox:hover{
    cursor: pointer;
}
.videobox .video-poster{
    position: relative; top: 0; 
    z-index: 3;
    overflow: hidden;
    width: 675px; height: 380px;
}
.videobox .video-poster:before{
    
/*    box-shadow: inset 0 0 0 8px #fff;*/
}
.videobox .video-poster .video-poster-pic{
    position: relative;
    width: 675px; height: 380px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition:all ease-in-out 0.8s;
}


/*-------------------------
        video內容  
-------------------------*/
.video .videobox{
    position: relative; 
    display: block;
    width: 675px; height: 380px;
    margin: 0 auto;
    top: 0px;
    z-index: 2;
/*    cursor: pointer;*/
}
.video .videobox:before{
    position: absolute; z-index: 4;
    top: 0px; left: -2px;
    content: "";
    display: block;
    width: 668px; height: 368px;
    border: solid 6px #fff;
    pointer-events: none;
    
}
.video .videobox:hover{
    cursor: pointer;
}
.videobox .video-poster{
    position: relative; top: 0; 
    z-index: 3;
    overflow: hidden;
    width: 675px; height: 380px;
}
.videobox .video-poster:before{
    
/*    box-shadow: inset 0 0 0 8px #fff;*/
}
.videobox .video-poster .video-poster-pic{
    position: relative;
    width: 675px; height: 380px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition:all ease-in-out 0.8s;
}


.video .video_1_bg{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 836px;
    height: 666px;
    background: url(../images/video/video_cover_1.png) center no-repeat;
}
.video .video_2_bg{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 836px;
    height: 666px;
    background: url(../images/video/video_cover_2.png) center no-repeat;
}

/* video預覽圖片 */
.videobox .video-poster .pic00{
    background-image: url(../images/video/video_cover_1.png);
}
.videobox .video-poster .pic01{
    background-image: url(../images/video/video_cover_2.png);
}

.videobox:hover .video-poster .video-poster-pic{
    transform: scale(1.04);
    transition:all ease-in-out 0.8s;
    cursor: pointer;
}
/*箭頭*/
.videobox .play-btn{
    position: absolute; 
    top: 29%; right: 50%; z-index: 5;
    width: 53px; height: 61px;
    transition: all ease-in-out 0.3s;
    
}
.videobox .play-btn .play{
    width: 122px; height: 184px;
    background: url(../images/video/video_play.png) center no-repeat;
    animation: play-btn 2s linear infinite alternate;
}

@keyframes play-btn {
	0%{opacity: 10;}
	50% {opacity: 10; transform: scale(1.1);} 
	100% {opacity: 10;}
}








.video .video_arrow{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 94px;
    height: 461px;
    top: 800px;
    right: 50px;
    background: url(../images/arrow.png) center no-repeat;
    animation: pink_arrow 2s linear infinite alternate;
}

@keyframes pink_arrow{
	0%{opacity: 10;}
	50% {opacity: 10; transform: scale(1.1);} 
	100% {opacity: 10;}
}

.video .video_arrow2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 94px;
    height: 461px;
    top: 1700px;
    left: 40px;
    background: url(../images/arrow.png) center no-repeat;
    animation: pink_arrow 2s linear infinite alternate;
}
.video .cosmomap{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 152px;
    height: 655px;
    top: 200px;
    left: -200px;
    background: url(../images/video/cosmomap.png) center no-repeat;
}
.video .beautyway1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 62px;
    height: 326px;
    top: 700px;
    right: -115px;
    background: url(../images/video/beautyway.png) center no-repeat;
}
.video .beautyway2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 62px;
    height: 326px;
    top: 1420px;
    left: -115px;
    background: url(../images/video/beautyway.png) center no-repeat;
    transform:rotate(180deg);
}
.video .video_yellowblock01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 734px;
    height: 456px;
    bottom: -20px;
    right: -200px;
    background: url(../images/yellowblock01.png) center no-repeat;
    transform:rotate(10deg);
}
.video .video_dot_g01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 373px;
    height: 382px;
    bottom: 50px;
    right: -120px;
    background: url(../images/dot_g01.png) center no-repeat;
    animation: kv_dot_g01 120s linear infinite alternate;
    z-index: 1;
}


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

            pd

-------------------------*/
.pd{
    position: relative;
    width: 100%;
    height: 2380px;
    margin: 0 auto;
}
.pd .inner{
    position: relative;
    width: 750px; 
    height: 100%;
    margin: 0 auto;
}
.pd .title_area{
    position: relative;
    margin: 0 auto;
    width: 750px;
    height: 235px;
    z-index: 2;
}
.pd .title{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 596px;
    height: 85px;
    top: 0px;
    background: url(../images/pd/title.png) center no-repeat;
}
.pd .h1{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 510px;
    height: 75px;
    top: 25px;
    background: url(../images/pd/h1.png) center no-repeat;
}
.pd .underline{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 240px;
    height: 13px;
    top: 50px;
    background: url(../images/video/underline.png) center no-repeat;
}
.pd .shine1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 48px;
    height: 71px;
    top: 180px;
    right: 70px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine1 2s linear infinite alternate;
}
.pd .shine2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 28px;
    height: 51px;
    top: 140px;
    right: 40px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine2 2s linear infinite alternate;
}
.pd .train1_bg{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 1186px;
    height: 851px;
    left: -214px;
    top: 170px;
    background: url(../images/pd/train_bg.png) center no-repeat;
    z-index: 2;
}
.pd .train1_h1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 374px;
    height:131px;
    left: 150px;
    top: 290px;
    background: url(../images/pd/train1_h1.png) center no-repeat;
    z-index: 4;
}
.pd .train2_bg{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 1186px;
    height: 877px;
    left: -214px;
    top: 1220px;
    background: url(../images/pd/train_bg.png) center no-repeat;
    z-index: 2;
}
.pd .train2_h1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 374px;
    height:131px;
    left: 150px;
    top: 1350px;
    background: url(../images/pd/train2_h1.png) center no-repeat;
    z-index: 4;
}
.pd .pd_dot_w01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 373px;
    height: 382px;
    left: -250px;
    top: 750px;
    background: url(../images/dot_w01.png) center no-repeat;
    z-index: 3;
    animation: kv_dot_w01 240s linear infinite alternate;
}
.pd .pd_dot_g01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 373px;
    height: 382px;
    right: -280px;
    top: 1800px;
    background: url(../images/dot_g01.png) center no-repeat;
    z-index: 3;
    animation: kv_dot_g01 200s linear infinite alternate;
}

.pd .pd_slider_area{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 750px;
    min-height: 990px;
    top: 50px;
    margin-bottom: 70px;
}

.pd .pd_pic_area{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 550px;
    min-height: 980px;
    top: 50px;
}
.pd .pd_pic{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 520px;
    height: 550px;
    top: 0px;
}
.pd .pd_slider_area h1{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 550px;
    min-height: 50px;
    top: 45px;
    font-size: 34px;
    color: #ff007c;
/*
    border-bottom: 3px #ff007c solid;
    padding-bottom: 15px;
*/
    z-index: 2;
}
.pd .pd_slider_area p{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 610px;
/*    height: 120px;*/
    min-height: 120px;
    top: 40px;
    font-size: 28px;
    line-height: 40px;
    z-index: 2;
}
.pd .pd_slider_area span{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 590px;
    min-height: 150px;
    top: 0px;
    font-size: 23px;
    line-height: 22px;
    z-index: 2;
    color: #7b7b7b;
    margin-bottom: 130px;
}
.pd .pd_slider_area s{
    position: relative;
    top: -5px;
}
.pd .btn_more{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 314px;
    height: 69px;
    margin-top: 35px;
    font-size: 32px;
    line-height: 65px;
    font-weight: 500;
    color: #fff;
    text-indent: -30px;
    background: url(../images/pd/btn.png) center no-repeat;
    cursor: pointer;
    z-index: 5;
}
.pd .btn_more:hover{
    background: url(../images/pd/btn_more_h.png) center no-repeat;
}

.pd .btn_more2{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 314px;
    height: 69px;
    margin-top: 60px;
    font-size: 32px;
    line-height: 65px;
    font-weight: 500;
    color: #fff;
    text-indent: -30px;
    background: url(../images/pd/btn.png) center no-repeat;
    cursor: pointer;
    z-index: 2;
}
.pd .btn_more2:hover{
    background: url(../images/pd/btn_more_h.png) center no-repeat;
}

.pd .btn_more .btn_arr{
    position: absolute;
    margin: 0 auto;
    width: 27px;
    height: 69px;
    top: 0px;
    text-indent: -10px;
    background: url(../images/pd/arr.png) center no-repeat;
}

.pd .pd_arrow{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 94px;
    height: 461px;
    top: 800px;
    right: 30px;
    background: url(../images/arrow.png) center no-repeat;
    animation: pink_arrow 2s linear infinite alternate;
}
.pd .pd_arrow2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 94px;
    height: 461px;
    top: 1950px;
    left: 0px;
    background: url(../images/arrow.png) center no-repeat;
    animation: pink_arrow 2s linear infinite alternate;
}

/* Dots */
.pd_slider_area .slick-dots {
	position: absolute;
	display: block;
	width: 100%;
    height: 50px;
	padding: 0;
	margin: 0;
    top: 560px;
	list-style: none;
	text-align: center;
    z-index: 2;
}
.pd_slider_area .slick-dots li {
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 6px;
	padding: 0;
	cursor: pointer;
}

.pd_slider_area .slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 11px;
	height: 11px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
    background: transparent;
}

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

}

.pd_slider_area .slick-dots li button:focus {
	background: transparent;
}

.pd_slider_area .slick-dots li button:hover:before,
.pd_slider_area .slick-dots li button:focus:before {
	opacity: 1;
    background: transparent;
}

.pd_slider_area .slick-dots li button:before {
	font-family: 'slick';
	font-size: 40px;
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
    content: '•';
	text-align: center;
	color: #ff007c;
    
}

.pd_slider_area .slick-dots li.slick-active button:before {
	color: #ff007c;
}

.pd_slider_area .slick-dots li.slick-active button {
    color: #ff007c;
}

/*--- Arrows ---*/
.pd_slider_area .slick-prev,
.pd_slider_area .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 35%;
	display: block;
	width: 76px;
	height: 76px;
	padding: 0;
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	z-index: 9;
}

.pd_slider_area .slick-prev {
	left: 100px;
	z-index: 9;
	background: url(../images/arr_l.png)no-repeat;
}

[dir='rtl'] .pd_slider_area .slick-prev {
	left: auto;
}

.pd_slider_area .slick-prev:before {
	content: '';
}

[dir='rtl'] .pd_slider_area .slick-prev:before {
	content: '';
}
.pd_slider_area .slick-next {
	right: 100px;
	background: url(../images/arr_r.png)no-repeat;
}
[dir='rtl'] .pd_slider_area .slick-next {
	right: auto;
	left: 0;
}
.pd_slider_area .slick-next:before {
	content: '';
}
[dir='rtl'] .pd_slider_area .slick-next:before {
	content: '';
}




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

          edit

-------------------------*/
.edit{
    position: relative;
    width: 100%;
    height: 1990px;
    margin: 0 auto;
    background: url(../images/edit/bg.png) bottom center no-repeat;
}
.edit .inner{
    position: relative;
    width: 750px; 
    height: 100%;
    margin: 0 auto;
}
.edit .title_area{
    position: relative;
    margin: 0 auto;
    width: 750px;
    height: 530px;
    z-index: 2;
    top: 80px;
}
.edit .streetsign{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 186px;
    height: 249px;
    top: 0px;
    background: url(../images/edit/streetsign.png) center no-repeat;
}
.edit .title{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 394px;
    height: 85px;
    top: -20px;
    background: url(../images/edit/title.png) center no-repeat;
}
.edit .h1{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 642px;
    height: 118px;
    top: 15px;
    background: url(../images/edit/h1.png) center no-repeat;
}
.edit .underline{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 240px;
    height: 13px;
    top: 40px;
    background: url(../images/edit/underline.png) center no-repeat;
}
.edit .shine1{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 48px;
    height: 71px;
    top: 150px;
    right: 140px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine1 2s linear infinite alternate;
}
.edit .shine2{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 28px;
    height: 51px;
    top: 200px;
    right: 110px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine2 2s linear infinite alternate;
}

.edit .edit_slider_area{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 750px;
    height: 878px;
    top: 90px;
    z-index: 2;
}
.edit .edit_pic_area{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 640px;
    height: 878px;
    top: 0px;
}
.edit .edit_pic{
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 640px;
    height: 787px;
    top: 0px;
}
.edit .edit_slider_area p{
    position: absolute;
    margin: 0 auto;
    text-align: justify;
    width: 490px;
    height: 130px;
    top: 540px;
    left: 128px;
    font-size: 28px;
    letter-spacing: .5px;
    line-height: 40px;
    color: #fff;
    z-index: 2;
}
.edit .btn_more{
    position: absolute;
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 500px;
    height: 120px;
    top: 630px;
    left: 130px;
    background-color: transparent;
    cursor: pointer;
    z-index: 2;
}

.edit .cosmomap{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 152px;
    height: 655px;
    top: 690px;
    right: -210px;
    background: url(../images/edit/cosmomap.png) center no-repeat;
}

.edit .girl{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 502px;
    height: 347px;
    bottom: 0px;
    left: 30px;
    overflow: hidden;
    background: url(../images/footer/girl.png) top center no-repeat;
    z-index: 2;
}
.edit .become{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 502px;
    height: 347px;
    bottom: 160px;
    left: -96px;
    overflow: hidden;
    background: url(../images/footer/become.png) top center no-repeat;
}
.edit .signpost{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 276px;
    height: 378px;
    bottom: 0px;
    right: 26px;
    overflow: hidden;
    background: url(../images/footer/signpost.gif) top center no-repeat;
    z-index: 1;
}
.edit .shine3{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 48px;
    height: 71px;
    bottom: 300px;
    right: 370px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine1 2s linear infinite alternate;
}
.edit .shine4{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 28px;
    height: 51px;
    bottom: 340px;
    right: 330px;
    background: url(../images/shine.png) center no-repeat;
    background-size: contain;
    animation: shine2 2s linear infinite alternate;
}
.edit .edit_yellowblock01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 734px;
    height: 230px;
    bottom: 0px;
    right: -230px;
    background: url(../images/yellowblock01.png) top center no-repeat;
}
.edit .edit_dot_g01{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 373px;
    height: 200px;
    bottom: 0px;
    left: -170px;
    background: url(../images/dot_w01.png) top center no-repeat;
}


/* Dots */
.edit_slider_area .slick-dots {
	position: absolute;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
    top: 830px;
	list-style: none;
	text-align: center;
}
.edit_slider_area .slick-dots li {
	position: relative;
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 6px;
	padding: 0;
	cursor: pointer;
}

.edit_slider_area .slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 11px;
	height: 11px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
    background: transparent;
}

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

}

.edit_slider_area .slick-dots li button:focus {
	background: transparent;
}

.edit_slider_area .slick-dots li button:hover:before,
.edit_slider_area .slick-dots li button:focus:before {
	opacity: 1;
    background: transparent;
}

.edit_slider_area .slick-dots li button:before {
	font-family: 'slick';
	font-size: 40px;
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
    content: '•';
	text-align: center;
	color: #ff007c;
    
}

.edit_slider_area .slick-dots li.slick-active button:before {
	color: #ff007c;
}

.edit_slider_area .slick-dots li.slick-active button {
    color: #ff007c;
}

/*--- Arrows ---*/
.edit_slider_area .slick-prev,
.edit_slider_area .slick-next {
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 45%;
	display: block;
	width: 76px;
	height: 76px;
	padding: 0;
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: none;
	background: transparent;
	z-index: 9;
}

.edit_slider_area .slick-prev {
	left: 50px;
	z-index: 9;
	background: url(../images/arr_l.png)no-repeat;
}

[dir='rtl'] .edit_slider_area .slick-prev {
	left: auto;
}

.edit_slider_area .slick-prev:before {
	content: '';
}

[dir='rtl'] .edit_slider_area .slick-prev:before {
	content: '';
}
.edit_slider_area .slick-next {
	right: 50px;
	background: url(../images/arr_r.png)no-repeat;
}
[dir='rtl'] .edit_slider_area .slick-next {
	right: auto;
	left: 0;
}
.edit_slider_area .slick-next:before {
	content: '';
}
[dir='rtl'] .edit_slider_area .slick-next:before {
	content: '';
}

















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

           表 單

-------------------------*/
.form-1{
    width:100%; 
}

.form-box .form-box-list{
    width: 575px;
    margin: 0 auto;
}


.form-box-list .column{
	position: relative;
	height: 100%;   
    min-height: 65px;
    background-color: transparent;
    font-size: 28px; 
    line-height: 65px;
    color: #000; 
    font-weight: 400; 
    letter-spacing: 0px;
    display: flex;
/*    flex-wrap: wrap;*/
    margin-bottom: 15px; 
    border-bottom: 1px solid #231f20;
}

.form-box-list .column2{
    position: relative;
	height: 100%;
    width: 23%;
    min-height: 65px;
    background-color: transparent;
    font-size: 28px; 
    line-height: 65px;
    color: #000; 
    font-weight: 400; 
    letter-spacing: 0px;
    display:inline-block;
    flex-wrap: wrap;
    margin-bottom: 15px;
    border-bottom: 1px solid #231f20;
}

.form-box-list .column3{
    position: relative;
	height: 100%;
    width: 75%;
    min-height: 65px;
    background-color: transparent;
    font-size: 28px; 
    line-height: 65px;
    color: #000; 
    font-weight: 400; 
    letter-spacing: 0px;
    display:inline-block;
    flex-wrap: wrap;
    margin-bottom: 15px;
    left: 10px;
    border-bottom: 1px solid #231f20;
}

.input-txt{
    height: 65px; padding: 0 25px;
    letter-spacing: 0.1em;
    background-color: transparent;
}

.input-txt2{
    height: 65px; padding: 0 25px;
    letter-spacing: 0.1em;
    background-color: #fff;
    margin-top: 10px;
}

.input-txt3{
    height: 65px; 
    padding: 0;
    letter-spacing: 0.1em;
    background-color: #fff;
    padding-left: 20px;
}

.input-txt4{
    height: 510px; 
    padding: 25px;
    letter-spacing: 0.1em;
    background-color: #fff;
}
.style-select{
    width: 100%;    
    order:1;
    align-self:flex-end;
    justify-content: flex-end;
}

.w1{ width:84.5%;}
.w2{ width:72%;}
.w3{ width:38%;}
.w4{ width:100%;}
.w5{ width:20%;}
.w6{ width:80%;}
.w7{ width: 25%;}

/**/
input::placeholder {
    color: #b4b4b4;
    opacity: 1;
    font-weight: 300;
}


/* ---------------------
         下拉選單
---------------------- */
.style-select{
    position: relative; display: block;
    height: 65px;
    border: none; margin: 0;
	color: #0e4fa1;
    border-radius: none;
    background-color: transparent;
}


/*箭頭*/
.style-select:after{/*箭頭*/
	top:44%; right:6%;
    border: solid transparent;
    content: " ";
    height: 0; width: 0;
    position: absolute; z-index:2;
    pointer-events: none;
    border-top-color:#666;
    border-width: 8px;
}

/*內容*/
.style-select > select {
    width: 100%; 
    height: 65px; 
    line-height: 65px;
    border: 0px; 
    padding: 0 25px;
	-webkit-appearance: none; outline: inherit;
    cursor:pointer;
    background-color: transparent;
    border-radius: 0px;
    font-weight: 400;
    letter-spacing: 0.1em;
}
.style-select > select > option {   color:#0e4fa1; 
    background-color: transparent; 
    border:none; 
    border-radius: 0;}
.style-select > select > option:hover { 
    color:#0e4fa1; 
    background-color: transparent; 
    border:none; 
    border-radius: 0;}



/* ---------------------
        checkbox
---------------------- */
input[type="checkbox"] {
    position: absolute;
    opacity:0;
    left: 60px;
}

label.side-label {
    position: relative;
    margin: 0 auto;
    width: 85%;
    top: 0px;
    left: 44px;
    display: block; 
    padding-left: 50px;
    margin: 15px 0 0 4px;
    cursor: pointer;
    font-size: 26px; 
    line-height: 38px;
	font-weight: 400; 
    color: #000;
    letter-spacing: .8px;
    text-align: justify;
    
}

label.side-label::before,
label.side-label::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    
}

label.side-label::before {
    display: block;
    width: 40px; height: 40px;
    background-color: transparent;
    border: 1px solid #231f20;
}

input:focus + label.side-label::before {
/*    border-color: #000;*/
}

label.side-label::after {
    display: none;
    width: 40px; height: 40px;
    background: url(../images/check.png) no-repeat;
    background-size: cover;
    
}

input:checked + label.side-label::after {
    display: block;
    
}


/*連結*/
label.side-label a{
    margin: 0 4px;
    vertical-align: bottom;
    color: #000; font-weight: 400;
    border-bottom: solid 1px #666;
    display: inline-block;
}
label.side-label a:hover{
    color: #000;
    border-bottom: solid 1px #999;
}


/*可複選*/
label.side-label2 {
    display: block; 
    position: relative;
    padding-left: 50px;
    margin: 0px 0px 0px 4px;
    padding-bottom: 10px;
    cursor: pointer;
    font-size: 32px; 
    line-height: 55px;
	font-weight: 400; color: #000;
    letter-spacing: 0em;
    text-align: justify;
    min-width: 210px;
    display:inline-block;
/*    background-color: aqua;*/

}

label.side-label2::before,
label.side-label2::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    
}

label.side-label2::before {
    display: block;
    width: 35px; height: 35px;
/*    border: 1px solid #000;*/
}

input:focus + label.side-label2::before {
    border-color: #000;
}

label.side-label2::after {
    display: none;
    width: 35px; height: 35px;
    background: url(../images/check.png) no-repeat;
    background-size: cover;
/*    border: 1px solid #000;*/
}

input:checked + label.side-label2::after {
    display: block;
    
}

/* ---------------------
        共用input
---------------------- */
input[type="text"],
input[type="tel"],
input[name="email"],
input[type="number"],
select, textarea,
.style-select>select{
    color:#000; font-size: 28px; font-weight: 400;
    border: none;
    border-radius: 0;
    font-family: 'Noto Sans TC', Helvetica, Arial, '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    vertical-align: bottom;
    background-color: transparent;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[name="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
button:focus,
input[type='radio']:focus{
    outline: none;
}





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

         lightbox

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


/*背景底色*/
.modal-backdrop {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1040;
	background: rgba(236, 210, 223, 0.9);
}
.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: block;

}

.style-box .modal-body {
    position: relative;
    width: 676px; 
	margin: 0 auto;
    padding: 15px 0 50px 0;
    display: block;
}

.gift_explan_pop{
    position: relative;
    margin: 0 auto;
    top: 100px;
    width: 676px; 
    height: 1116px;
    margin-bottom: 150px;
}


/* 關閉按鈕-X */
.style-box .close {
	position: absolute; 
    right: 90px; 
    top: 150px; 
    z-index: 10;
    width: 50px; 
    height: 50px;
	text-shadow: none;
    background-color: transparent;
    cursor: pointer;
	transition:all ease-in-out 0.5s;
}
.style-box .close:hover {
	transform: rotate(90deg);
	transition: all ease-in-out 0.5s;
}
/* 關閉按鈕-文字 */
.style-box .close2 {
	position: absolute; left: 37%; bottom: 65px; z-index: 10;
    width: 183px; height: 44px;
    cursor: pointer;
	transition:all ease-in-out 0.5s;
}
.style-box .close2:hover{
    opacity: .8;
    
}