@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/*type*/
div,h1,h2,h3,h4,h5,h6{background-position:center center;position: relative; background-repeat: no-repeat;}
em{font-style: normal;}
/*layout*/
*{font-family: 'Noto Sans TC',Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";background-repeat:no-repeat;}
body,html{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; width:100%; min-width:1366px; height:auto; background-size:1920px; margin:0 auto;}
html{color:#666;overflow-x:hidden;}
body{width:100%; overflow:hidden; background-position:center 376px; background-size:1920px;}
.outer{width:1366px;margin:0 auto;}
section{margin-top:-16px;}
@media (max-width:1366px){html{ overflow-x:scroll; } }
@media (max-width:765px){
body,html{ overflow-x:hidden; min-width:100%;}
.outer{width:100%;overflow:visible;}
section{width:100%;}
}

/*header*/
header{width:95px; font-size:0; z-index:999; position:fixed; right:15px; top:50px;}
header .bar a{display:block; font-size:14px; height:35px; border-radius:8px; line-height:35px; color:#fff; width:100%; background-color:#544c80;text-align:center;margin-bottom:5px;}
header .bar a:hover{filter:brightness(1.1);}
header .bar a:nth-child(1){background-color:#c13d52;}
header .bar a:nth-child(5),header .bar a:nth-child(6){background-position:center; display:inline-block; width:45px; height:45px; overflow:hidden;line-height:600px;}
header .bar a:nth-child(5){margin-right:4px;background-color:#3a589b; background-image:url(../img/icon_fb.png);}
header .bar a:nth-child(6){background-color:#117e96; background-image:url(../img/icon_baha.png);}
#hamburger,#dark,#dark.nono{ display:none;}
@media (max-width:765px){
#dark{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:block;z-index:99;}
header{width:4rem; height:100vh; border:none; top:0; right:-4rem; background-color:rgba(255,240,230,0.9);-webkit-transition:all 0.3s ease;transition:all 0.3s ease;  }
header.open{right:0rem;}
#hamburger{display:block; position:absolute; width:1rem; height:1rem; left:-1.3rem; margin-left: 0; top:0.2rem; cursor:pointer;}
#hamburger span{ display:inline-block; width:100%; height:0.12rem;position:absolute;border-radius:0.1rem; left:0; background-color:#fff; filter:drop-shadow( 0px 0.04rem 0px #666 ); transition:all 0.3s; -webkit-transition:all 0.3s;}
#hamburger span:nth-child(1){top:0;}
#hamburger span:nth-child(2){top:0.4rem;}
#hamburger span:nth-child(3){top:0.8rem;}
#hamburger.move{left:50%; margin-left:-0.5rem;}
#hamburger.move span{background-color:#8d324d;filter:drop-shadow( 0px 0.04rem 0px #fff );}
#hamburger.move span:nth-child(1){ top:0.5rem;  -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg);transform: rotate(45deg);}
#hamburger.move span:nth-child(2){ width:0;}
#hamburger.move span:nth-child(3){ top: 0.5rem; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.bar{width:100%; height:100%; margin:0 auto; font-size:0.4rem; border:1px solid rgba(255,240,230,0.80);}
.bar > a{ width:0.8rem; height:0.8rem; top:7.5rem; background-size:100%; }
.link{margin-top:1.8rem;}
header .bar a:nth-child(1),header .bar a{background-color:rgba(0,0,0,0);color:#8d324d;font-size:0.4rem;margin-bottom:0.2rem;}
header .bar a:nth-child(5),header .bar a:nth-child(6){ display:block; width:100%; height:0.8rem; line-height:0.8rem;}
header .bar a:nth-child(5),header .bar a:nth-child(6){background:none;}
#goTop{position:fixed;width:40px;height:40px;line-height:40px;border-radius:30px;color:#8d324d;background-color:#fff;font-size:14px; font-weight:800;bottom:10px;right:10px;z-index:9999;border:4px solid #8d324d;filter:opacity(0.9);display:none;}
#goTop.fade{display:block;}
}

/*content_01*/
#content_01{ position:relative; width:100%; height:957px; text-align:center; background-image:url('../img/top.jpg'); background-position: center top; margin-top:0; padding:50px 0 0 0;}
#content_01 h1{width:100%;overflow:hidden;text-indent:-9999px;}
.logo{ display:block; width:204px; margin:0 auto -25px auto; height:155px;background-image:url('../img/ros_logo.png');background-repeat:no-repeat;background-size:204;overflow:hidden; text-indent:-999px;}
.logo::after{content:'回官網'; font-size:14px; width:100%;display:block;padding-top:115px; color:rgba(225,225,225,0.8); text-indent:0;}
.time{ color:#fff; font-weight:400; margin:150px 0 60px 0; font-size:17px; letter-spacing:1px;}
.time br{display:none;}
.time em{color:#8d324d; font-size:16px; font-weight:600; background-color:#fff; border-radius:20px; padding:5px 15px; margin-right:10px;}
#content_01 p{ width:400px; height:216px; font-size:16px; color:#ffd4de;margin:0 auto;line-height:1.8; letter-spacing:0.1em;}
#content_01 .btn{width:900px;margin:85px auto 0 auto;}
#content_01 .btn a{display:inline-block;width:395px;height:133px;background-size:100%;filter:brightness(1.0);overflow:hidden;line-height:600px;	transition:all 0.3s ease; -webkit-transition:all 0.3s ease}
#content_01 .btn a:hover{filter:brightness(1.1);margin-bottom:-3px;}
.btn_01{background-image:url(../img/btn_01.png);}
.btn_02{background-image:url(../img/btn_02.png);}
@media (max-width:765px){
#content_01,#content_02,#content_03,#bounsBox{width:100%;background-size:100%;}
#content_01{ background-image:url('../img/top_m.jpg'); background-color:#914647; padding-top:1%;height:19rem;}
.logo{background-image:url(../img/ros_logo_m.png); width:26%; height:0; padding-bottom:22%; background-size:100%; background-position:center 12%; margin:0 auto;}
.logo::after{padding-top:22%; font-size:0.25rem;}
.time{margin:0.3rem auto;line-height:2; font-size:0.32rem; font-weight:600;letter-spacing: 0;-webkit-transform:scale(0.85);transform:scale(0.85);}
.time br{display:block;}
.time em{font-size:0.3rem; padding:0.03rem 0.25rem; margin-right:auto;display:inline-block;-webkit-transform:scale(0.8);transform:scale(0.8);}
#content_01 p{width:100%; height:auto; font-weight:500; font-size:0.4rem;line-height:1.5; position:absolute; top:15.3rem;}
#content_01 .btn{width:100%; margin:0 auto 0 auto; position:absolute; top:13rem;}
#content_01 .btn a{width:48%; height:0; padding-bottom:15%; }
.btn_01{margin-right:-2%;}
}

/*content_02*/
#content_02{ background-image:url(../img/bg_02.jpg); background-size:1920px; background-color:#914647; background-repeat:no-repeat; background-position:center top;text-align:center; margin-top:-66px; padding-top:80px; }
#content_02 h3,#content_03 h3,#bounsBox h3,#content_02 h4,#content_03 h4,#bounsBox h4{ width:100%;overflow:hidden;text-indent:-9999px;}
#content_02 h4{background-image:url(../img/t1.png);width:622px; height:81px; position:relative;margin:0 auto;}
.event_txt{display:block; width:900px; height:288px; background-image:url('../img/event_text.png'); background-size:100%; margin: 0 auto 180px auto; overflow:hidden; box-sizing:border-box; color: #fff; text-align:justify;}
.event_txt p{position:absolute; width:600px; left:60px; top:108px; font-size:20px;line-height:1.8;}
@media (max-width:765px){
#content_02{background-image:none;padding-bottom:2rem;}
.event_txt{width:94%; height:0; padding-bottom:48%; background-image:url('../img/event_text_m.png'); margin: 0 auto; box-sizing:content-box;}
.event_txt p{position:absolute; width:66%; left:7.5%; top:28%; font-size:0.323rem;}
#content_02 h4{background-size:100%; width:80%; height:0; padding-bottom:10%; margin:20% auto;}
}

/*step*/
.step{width:900px;height:241px; margin:180px auto 230px auto; font-size:0; position: relative; }
#content_02 > div > p,#content_03 > div > p{width:100%;text-align:center;margin-bottom:60px; color:#fff;}
#content_02 > div > p > a,#content_03 > div > p > a{color:#ffcc5b;}
.step > div{display:block; position:absolute; z-index: 0; border:8px solid #76393a; border-radius:30px; background-color:#fff; color:#666;width:309px;height:421px;box-sizing:border-box;font-size:17px;font-weight:400;line-height:1.5;text-align:justify;padding:124px 40px 40px 40px;top:0;}
.step .ch_p{width:182px;height:182px;display: block; position:absolute;left:50%;margin-left:-91px;top: -92px;}
.step h5{margin:-15px auto 25px auto;background-position:center top;overflow:hidden;text-indent:-999px;}
.step em{background-color:#FFE964; color:#750C0E;padding:0 5px; font-size:0.9em;border-radius:10px;margin:0 2px;}
.step_01{left:0;z-index:1;}
.step_01 .ch_p{background-image:url(../img/p_01.png);}
.step_01 h5{background-image:url(../img/t1_step_01.png);width:145px;height:76px;}
.step_02{left:297px;z-index:4;}
.step_02 .ch_p{background-image:url(../img/p_02.png);}
.step_02 h5{background-image:url(../img/t1_step_02.png);width:145px;height:76px;}
.step_03{right:0;z-index:1;}
.step_03 .ch_p{background-image:url(../img/p_03.png);}
.step_03 h5{background-image:url(../img/t1_step_03.png);width:181px;height:76px;}
.step_03 .p_angle{background-image:url(../img/p_angle.png);width:112px;height:105px;margin:-10px auto 10px auto;}
.step > div .ch_p{transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;}
.step > div:hover .ch_p{transform: rotate(360deg)}
#content_02 .btn a,#content_03 .btn a{display:inline-block;background-image: -moz-linear-gradient( -90deg, rgb(255,233,163) 0%, rgb(255,197,73) 100%);background-image: -webkit-linear-gradient( -90deg, rgb(255,233,163) 0%, rgb(255,197,73) 100%);background-image: -ms-linear-gradient( -90deg, rgb(255,233,163) 0%, rgb(255,197,73) 100%);box-shadow: 0px 12px 15.52px 0.48px rgba(4, 0, 0, 0.16),inset 2px 3.464px 0px 0px rgba(255, 255, 255, 0.004);width:424px;height:104px;border-radius:50px;line-height:104px; font-size:30px;font-weight:600;color:#732845;margin-bottom:120px; text-align: center; position:relative; z-index:0;}
#content_02 .btn a:nth-child(2),#content_03 .btn a:nth-child(2){margin-left:45px;}
#content_02 .btn a:hover,#content_03 .btn a:hover{font-size:2em;filter:brightness(1.1);}
.ch_01,.ch_02,.ch_03,.ch_04{position:absolute;z-index:0;}
.ch_01{ background-image:url(../img/ch_01.png); width:436px;height:543px;left:-290px; top:840px; }
.ch_02{ background-image:url(../img/ch_02.png); width:494px;height:774px;right:-355px; top:620px; }
@media (max-width:765px){
.step{width:95%; height:11.8rem; margin:-1rem auto 0.999rem auto;}
#content_02 > div > p,#content_03 > div > p{width:85%; font-size:0.35rem; text-align:justify; margin-left:7.5%; margin-bottom:1.2rem; line-height:1.8;}
.step > div{ display:block; overflow:hidden; border:0.15rem solid #76393a; border-radius:0.5rem; width:95%; left:2.5%; height:4rem; font-size:0.34rem; padding:3.2% 5% 0 33%; box-sizing:border-box; position:relative; }
.step .ch_p{width:1.8rem; height:1.8rem; background-size:100%; top:40%; left:0; margin-left:5%; z-index:10;}
.step h5{margin:0; background-size:auto 100%; position:absolute; left:5%; top:10%;z-index: 10;}
.step_01 h5,.step_02 h5{width:20%; height:0.9rem;}
.step_03 h5{width:30%;height:0.9rem; left:2%;}
.step > div.step_02{margin:-0.15rem 0; padding:8.5% 5% 0 33%; }
.step > div.step_03{margin:-0.15rem 0; padding:15% 5% 0 33%; }
.step_03 .p_angle{display:none;}
.box{background-color:#fdffec;position:absolute;display:block;width:32%; height:100%; left:0; top:0; z-index: 0;}
#content_02 .btn{width:95%; height:2rem; margin-left:2%;}
#content_02 .btn a,#content_03 .btn a{width:45%;font-size:0.54rem;height:1.5rem; line-height:1.5rem;margin-bottom:2rem;}
#content_02 .btn a:hover,#content_03 .btn a:hover{font-size:0.6rem;filter:brightness(1.1);}
#content_02 .btn a:nth-child(2),#content_03 .btn a:nth-child(2){margin-left:0.2rem;}
.ch_01,.ch_02{display:none;}
}
/*content_03*/
#content_03{background-image:url(../img/bg_03.jpg);background-size:1920px;background-position:center top;margin-top:0px; padding-top:100px;text-align: center;}
#content_03 h4{background-image:url(../img/t2.png);width:545px;height:81px; position:relative;margin:0 auto 80px auto;}
#content_03 .step_01{word-break: keep-all; white-space: nowrap;}
#content_03 .step_01 h5{background-image:url(../img/t2_step_01.png);}
#content_03 .step_01 .monkey{background-image:url(../img/yoyomokey.png);width:106px;height:110px;margin:5px auto 10px auto;}
#content_03 .step_02 h5{background-image:url(../img/t2_step_02.png);}
#content_03 .btn{margin:auto auto 55px auto;}
@media (max-width:765px){
#content_03{background-image:none; background-color:#722745;padding-top:1%;margin-bottom:0rem;}
#content_03 h4{background-size:auto 100%; width:80%; height:0; padding-bottom:10%; margin:15% auto 20% auto;}
#content_03 .step_01{text-align:center;}
#content_03 .step_01 .monkey{width:35%;height:2.2rem; background-size:100%;}
#content_03 .step_02 em{word-break: keep-all;}
}
/*content_04*/
#bounsBox{background-image:url(../img/bg_04.jpg);background-size:1920px;background-position:center top; margin-top:-90px; padding:100px;text-align: center;}
@media (max-width:765px){
#bounsBox{ background-size:cover; background-position:center bottom; margin-top:-1.5rem; padding:4.5rem 0 20% 0;}
}

/*bouns*/
.bouns{ width:900px;height:376px;border:8px solid #76393a; background-color:#fff; overflow:hidden; border-radius:30px; margin: 0 auto ; position:relative; z-index:0;}
.bouns h5{width:100%;background-color:#722745; height:80px; line-height:80px; color:#fff; margin:0 auto; font-size:32px;}
.bouns ul{ display:table; color:#3f3f3f; text-align: center; margin-top:4px;}
.bouns > ul > li{ display: table-cell; vertical-align: middle;}
.bouns > ul > li > em{display:block;font-size:14px;margin-top:10px;color:#76393a; font-weight:600;}
.bouns > ul > li:nth-child(1){width:146px; border-right:4px solid #fff; border-left:4px solid #fff;}
.bouns > ul > li:nth-child(2){width:338px; border-right:4px solid #fff;}
.bouns > ul > li:nth-child(3){width:400px;}
.bouns > ul.f1 > li{background-color:#d3d3d3;height:72px; font-size:18px; font-weight:800;}
.bouns > ul.f2{margin-top:0px;}
.bouns > ul.f2 > li{background-color:#E9E9E9; height:216px; font-size:18px;}
.bouns > ul.f2 > li:nth-child(1){border-radius:0 0 0 22px;}
.bouns > ul.f2 > li:nth-child(3){border-radius:0 0 22px 0 ; text-align:left;box-sizing: border-box; padding:20px; line-height: 1.5; font-size:15px;}
.bouns > ul.f2 b{ color:#76393a; font-size:16px;}
.ch_03{background-image:url(../img/ch_03.png); width:520px; height:916px;top:-355px;left:-330px;}
.ch_04{background-image:url(../img/ch_04.png);width:586px;height:765px; top:-258px; right:-325px;}
footer{margin:-24px 0 0 0;z-index:0;background-color:#fff;}
@media (max-width:765px){
.bouns{width:90%; height:10.3rem; border:0.15rem solid #76393a; border-radius:0.5rem;z-index: 10;}
.bouns h5{height:1.4rem; line-height:1.4rem; font-size:0.6rem;letter-spacing:0.08rem;}
.bouns ul{ margin-top:0.04rem;}
.bouns > ul > li > em{font-size:0.3rem;margin-top:0.2rem;}
.bouns > ul > li:nth-child(1){width:18%; border-right:0.04rem solid #fff; border-left:0.04rem solid #fff;box-sizing:border-box;padding:0 0.2rem;}
.bouns > ul > li:nth-child(2){width:30%; box-sizing: border-box; padding:0 0.4rem; border-right:0.04rem solid #fff;}
.bouns > ul.f1 > li{height:3rem; font-size:0.4rem; font-weight:600;}
.bouns > ul.f2 > li{height:5.84rem; font-size:0.45rem;border-bottom:0.05rem solid #fff;}
.bouns > ul.f2 > li:nth-child(1){border-radius:0 0 0 0.3rem;}
.bouns > ul.f2 > li:nth-child(3){border-radius:0 0 0.3rem 0 ; padding:20px; line-height: 1.5; font-size:0.4rem;}
.bouns > ul.f2 b{ color:#76393a; font-size:0.4rem;}
.ch_03{width:7.5rem;height:13rem; background-size:100%; -webkit-transform:rotateY(180deg);transform:rotateY(180deg);left:12%;top:-6.5rem;}
.ch_04{display:none;}
}
@media (max-width:375px){
.bouns{height:auto;}
}