/* @media (max-width: 40rem) {
    #bodyContent {padding-top: 55px;}
} */

#headerLogin, #headerTnc{position: absolute; top: 1.5rem; z-index: 100; width: 8rem;}
#headerLogin {right: 14rem;}
.loginBtn, .logOutBtn {width: 80%; cursor: pointer; position: relative; border-radius: 4rem; background-color: #fff; padding-left: 3rem; color: #4e3c2e; border: 1px solid; box-shadow: 2px 3px 0 0 #4e3c2e; transition: all .15s ease-in-out;}
.loginBtn:before, .logOutBtn:before {content: ''; display: block; position: absolute; left: .5rem; width: 2rem; top: 0; bottom: 0; margin: auto; background: url(../images/icon-login@2x.png) no-repeat center / contain;}
.loginBtn > span, .logOutBtn > span {display: block; font-size: 1rem; line-height: 2.5rem;}



#headerTnc {right: 7rem;}
#headerTnc > a {display: block; width: 90%; border-radius: 4rem; background-color: #fff; text-align: center; font-size: .9rem; font-weight: 700; line-height: 2.5rem; color: #4e3d2c; border: 1px solid; box-shadow: 2px 3px 0 0 rgba(78, 61, 44, 1); transition: all .15s ease-in-out;}
@media (min-width: 48rem) {
    .loginBtn:hover, .logOutBtn:hover, #headerTnc > a:hover {transform: translate(2px, 3px);}
    .loginBtn:hover, .logOutBtn:hover {box-shadow: 0 0 0 0 rgba(244, 87, 84, 1);}
    #headerTnc > a:hover {box-shadow: 0 0 0 0 rgba(78, 61, 44, 1);}
}
@media (max-width: 48rem) {
    #headerLogin {right: 10rem; top: 1rem; width: 5rem;}
    .loginBtn, .logOutBtn {width: 100%;padding-left: 2rem;}
    .loginBtn:before, .logOutBtn:before {left: .25rem; width: 1.25rem;}
    .loginBtn > span, .logOutBtn > span {font-size: .9rem; line-height: 1.5rem;}
    #headerTnc {right: 4.25rem; width: 5rem; top: 1.125rem;}
    #headerTnc > a {font-size: .625rem; line-height: 2.2;}
}

#topHalf {background: url(../images/pattern.png) left bottom; position: relative;}
#topSection {position: relative;}
@media (max-width: 48rem) {
    #topSection {padding-bottom: 80%;}
}

#KV {position: relative;}
#KV .container {position: relative; padding-bottom: 55%;}
#KV .container:before {content: ''; display: block; position: absolute; width: 100%; padding-bottom: 21%; background: url(../images/KV/sky-pattern.png) center;}
#KV .deco {position: absolute; display: block;}
#KV .deco object, #KV .deco img {max-width: 100%; width: 100%;}
#KV .deco1 {left: 8%; bottom: 0%; width: 12%; z-index: 5;}
#KV .deco2 {left: 68%; bottom: 4%; width: 30%; z-index: 5;}
#KV .deco3 {left: 29%; bottom: 6%; width: 31%; z-index: 5;}
#KV .deco4 {left: 46%; bottom: 32%; width: 32%; z-index: 4;}
#KV .deco5 {left: 4%; bottom: 24%; width: 34%; z-index: 4;}
#KV .deco6 {left: -6%; top: 34.25%; width: 5%; z-index: 2; animation: kvDecoAnim1 60s linear infinite;}
#KV .deco7 {left: 0%; top: 6.5%; width: 58%; z-index: 1;filter: opacity(0.4);}
#KV .deco8 {right: 0; top: 14%; width: 6%; z-index: 2;animation: kvDecoAnim4 80s linear infinite;}
#KV .deco8 img {animation: float1 4s .5s ease-in-out infinite alternate;}
#KV .deco9 {left: 23%; top: 1%; width: 14%; z-index: 2;animation: kvDecoAnim1 90s linear infinite;}
#KV .deco9 img {animation: float1 4s ease-in-out infinite alternate;}
#KV .deco10 {left: 46%; top: 0%; width: 36%; z-index: 2;animation: blink 2s linear infinite;}
#KV .deco11 {left: 58%; top: 1%; width: 10%; z-index: 2;}
#KV .deco11 img {animation: kvDecoAnim2 5s linear infinite;}
#KV .deco12 {left: 23%; bottom: 0%; width: 67%;}
#KV .deco12.ppl{ z-index: 5;}
#KV .deco13 {left: 73%; top: 9%; width: 21%; z-index: 6;animation: glow 2s linear infinite;}
#KV .deco14 {left: 29%; top: 31%; width: 17%; z-index: 3;}
#KV .deco15 {left: 57.85%; top: 44.5%; width: 24.5%; z-index: 4;}
#KV .deco16 {left: 1%; top: 35%; width: 11%; z-index: 3;}
#KV .deco17 {right: -6%; top: 32%; width: 10.5%; z-index: 3;}
#KV .deco18 {right: -28%; top: 7%; width: 20%; z-index: 6; animation: kvDecoAnim3 30s linear infinite;}
#KV .deco18 img {animation: float1 2s ease-in-out infinite alternate;}
#KV .deco19 {right: 49%; top: 29%; width: 10.5%;z-index:13;}
#KV .deco19 a{display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#KV .scroll-down{z-index: 5; position: absolute; display: block; top: 83%; left:69%; transform: translate(-83%, -69%); }

@keyframes kvDecoAnim1 {0% {left: -6%;} 100% {left: 106%;}}
@keyframes kvDecoAnim2 {0%, 18%, 40% {opacity: 0;} 15%, 36%, 65%, 100% {opacity: 1;}}
@keyframes kvDecoAnim3 {0% {left: -28%;} 100% {left: 105%;}}
@keyframes kvDecoAnim4 {0% {right: -6%;} 100% {right: 106%;}}
@keyframes float { 0%, 100% { transform: translateY(0);} 50% { transform: translateY(-20px); } }
@keyframes glow {0%, 100% {filter: drop-shadow(5px 5px 5px rgb(255, 183, 183));} 50%{filter: drop-shadow(5px 5px 5px red);}}
@keyframes blink{0%, 100% {filter: opacity(1);} 50%{filter: opacity(0);}}


@media (max-width: 48rem) {
    #KV {position: initial;}
    #KV .container {padding-bottom: 175%; position: initial;}
    #KV .container:before {padding-bottom: 72%;}
    #KV .deco1 {left: 5%; bottom: auto; top: 20%; width: 33%;}
    #KV .deco2 {left: 48%; bottom: 8%; width: 71%;}
    #KV .deco3 {left: -18%; bottom: auto; top: 34%; width: 72%;}
    #KV .deco4 {left: 29%; bottom: auto; top: 16%; width: 78%;}
    #KV .deco5 {left: -12%; bottom: 1%; width: 83%; z-index: 5;}
    #KV .deco6 {left: -14%; top:20.25%; width: 13%;}
    @keyframes kvDecoAnim1 {0% {left: -14%;} 100% {left: 106%;}}
    #KV .deco7 {left: -13%; top: 6%; width: 170%;}
    #KV .deco9 {left: 46%; top: 3%; width: 39%;}
    #KV .deco11 {left: -15%; top: 14%; width: 43%;}
    #KV .deco12 {left: 74%; bottom: auto; top: 40%; width: 130%; }
    #KV .deco12 img {transform: rotate(3deg);}
    #KV .deco13 {left: 40%; top: 5%; width: 54%;}
    #KV .deco14 {left: 22%; top: 29%; width: 37%; z-index: 4;}
    #KV .deco15 {left: 45%; top: 33%;width: 55%;}
    #KV .deco16 {top: 31%; width: 15%; left: 4%; z-index: 5;}
    #KV .deco17 {top: 48%; width: 13%;z-index: 10;}
    #KV .deco18 {right: -57%; top: 6%; width: 55%; z-index: 6;}
    #KV .deco19{right: 1%; top: 38%; width: 28.5%; z-index: 13;}
    @keyframes kvDecoAnim3 {0% {left: -57%;} 100% {left: 105%;}}
    #KV .scroll-down{top: 47%; left: 68%; width: 4rem; transform: translate(-47%, -68%);}
}



#loginBtn2 {position: absolute; z-index: 8; display: block; left: 10%; bottom: 14%;animation: float 2s ease-in-out infinite;}
#loginBtn2 .loginBtn {color: #f45754; border-radius: 50%; text-align: center; padding-top: 2.3rem; width: 8rem; height: 8rem; padding-left: 0; box-shadow: 2px 3px 0 0 #f45754;}
#loginBtn2 .loginBtn:before {background: url(../images/map-login@2x.png)no-repeat center / contain;width: 3rem; height: 3rem; left: 0; right: 0; top: -1rem; bottom: auto; background-color: #fff; border-radius: 50%;}
#loginBtn2 .loginBtn > span {line-height: .5; font-size: 2.5rem; color: #f45754; font-weight: bolder;}
#loginBtn2 .loginBtn > span small {display: block; font-size: .65em;}
#loginBtn2 .userInfoBox {border-radius: 50%; text-align: center; position: relative; width: 8rem; height: 8rem; font-family: "Lato", sans-serif; background-color: #fff; color: #4e3d2c; border: 1px solid #f45754; box-shadow: 2px 3px 0 0 rgba(244, 87, 84, 1); padding-top: 2.5rem;}
#loginBtn2 .userInfoBox .userImg {width: 2.25rem; height: 2.7rem; margin: 0 auto; background: url(../images/Section2/2x/loginGenders@2x.png) no-repeat; background-size: 340% auto; background-position: 3% center; border-radius: 3rem; border: 1px solid #f45754; position: absolute; left: 0; right: 0; top: -1rem;}
#loginBtn2 .userInfoBox .userImg.gender1 {background-position: 97% center;}
#loginBtn2 .userInfoBox .userImg.gender2 {background-position: 50% center;}
#loginBtn2 .userInfoBox .userDiamond {display: block; position: absolute; right: 0.4rem; top: 0.4rem; width: 2.25rem; height: 1.85rem; border-radius: 0 0 0 2rem; background: url(../images/Section2/2x/diamonds@2x.png) no-repeat; background-size: 170% auto; background-position: center 5.5%;}
#loginBtn2 .userInfoBox .userDiamond.collected {background-position: center 29%;}
#loginBtn2 .userInfoBox .userDiamond span {position: absolute; right: -0.3rem; top: -0.75rem; display: block; color: #fff; font-size: .9rem; text-align: center; border-radius: 50%; background-color: #bbc9c2; width: 1.35rem; height: 1.35rem; line-height: 1.35rem;}
#loginBtn2 .userInfoBox .userDiamond.collected span {background-color: #f45754;}
#loginBtn2 .userInfoBox .userName {font-size: 1.2rem; font-weight: 600; text-align: center; line-height: 1; color: #4e3d2c; font-style: italic; padding-bottom: .5rem; margin-bottom: .05rem; max-width: 100%; display: block; display: -webkit-box; -webkit-box-orient : vertical; position: relative; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp : 1; max-width: 92%; margin: auto;}
#loginBtn2 .userInfoBox .userName:after {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; width: 88%; border-top: 1px dotted #f76847; }
#loginBtn2 .userInfoBox .anchorLink {line-height: 1.5;}
#loginBtn2 .userInfoBox .anchorLink a {color: #f76847; font-size: 1.3rem; display: inline-block; letter-spacing: -.5px; font-weight: 700;}
#loginBtn2 .userInfoBox .anchorLink a:after {content: '\276F'; display: inline-block; vertical-align: middle; width: .85rem; height: .8rem; border-radius: 50%; background-color: #f76847; color: #fff; margin: -.1rem 0 0 .1rem; line-height: .8rem; font-size: .65rem;}


@media (max-width: 48rem) {
    #loginBtn2 {left: 5%; bottom: auto; top: 67vw; }
    #loginBtn2 .loginBtn {padding-top: 2.3rem; padding-left: 2px; width: 6rem; height: 6rem;}
    #loginBtn2 .loginBtn > span {line-height: .5;font-size: 1.8rem;}
    #loginBtn2 .userInfoBox{width: 7rem; height: 7rem; }
    #loginBtn2 .userInfoBox .anchorLink a {font-size: 1rem;}
    
}



#infoMessageBox {position: relative;}
#infoMessageBox:before {content: ''; display: block; position: absolute; z-index: 1; top: 0%; left: 0%; width: 1rem; height: 1rem; border-radius: 50%; background-color: #f45754;}
#infoMessageBox .inner {position: relative; display: block; border-radius: 2rem; background-color: #fff7ee; padding: 0 0 0 4.15rem;}
#infoMessageBox .inner:before, #infoMessageBox .inner:after {content: ''; display: block; position: absolute;}
#infoMessageBox .inner:before { left: 0.75rem; top: 0.225rem; width: 2.8rem; height: 3.4rem; background: url(../images/Section1/icon-or.png) no-repeat center / contain; }
#infoMessageBox .inner:after {left: calc(4.15rem - 1px); height: 3.8rem; top: .225rem; width: 0; border-right: 1px solid #d2c3b5;}
#infoMessageBox .msg {display: block; position: relative; overflow: hidden; padding: 0; border-radius: 0 2rem 2rem 0;}
#infoMessageBox .msg ul {padding: 0; list-style: none; display: block;}
#infoMessageBox .msg li {color: #ff0020;; font-size: 1.3rem; font-weight: 700;}
@keyframes scrolling {to {transform: translateX(-50%);}}

@media (min-width: 48rem) {
    #infoMessageBox {--outer-width: 30rem; left: 54%; bottom: 6%; position: absolute; z-index: 7;}
    #infoMessageBox .msg {--scroll-width: calc(var(--outer-width) - 1.15rem); --scroll-height: 4rem; width: var(--scroll-width); height: var(--scroll-height);}
    #infoMessageBox .msg ul {display: inline-block; white-space: nowrap; animation: scrolling 60s linear infinite;}
    #infoMessageBox .msg li {display: inline-block; vertical-align: middle; line-height: var(--scroll-height); white-space: nowrap;}
}

@media (max-width: 48rem) {
    #infoMessageBox {max-width: 90%; margin: .5rem auto 0.3rem;}
    #infoMessageBox:before {width: 1rem; height: 1rem; right: 0; margin: auto; transform: translate(-1.65rem, -2.15rem);}
    #infoMessageBox .inner {padding: 2.8rem 1.25rem 1.25rem; border-radius: 1.35rem;}
    #infoMessageBox .inner:before {top: -2.4rem; left: 0; right: 0; margin: auto; width: 4rem; height: 4rem;}
    #infoMessageBox .inner:after {top: 2.15rem; height: 0; width: calc(100% - 3rem); left: 1.5rem; border-right: none; border-bottom: 1px solid #d2c3b5;}
    #infoMessageBox .msg {border-radius: 0;}
    #infoMessageBox .msg li:not(:first-child) {display: none;}
    #infoMessageBox .msg li {line-height: 1.45; text-align: center;font-size: 0.9rem;color: #4f3c2d;}
}

#infotext {position: relative; width: 100%; text-align: center; margin: 0 auto;padding: 2% 0; }
#infotext .inner{ position: relative; width:55%; display: block; background-color: #fff7f0; padding: 2%; margin: auto; border-radius: 28px; }
#infotext .inner:before{display: block; position: absolute; content: ''; left: 50%; top: -4%; width: 3.8rem; height: 4.4rem; background: url(../images/Section1/icon-or.png) no-repeat center / contain; transform: translate(-50%, -50%);}
#infotext .inner p{font-size: 0.9rem; font-weight: 700; color: #4e3d2c;}
#infotext .inner p span:nth-child(2){color:rgb(0 147 71)}
#infotext .inner p span:nth-child(3){color:red}
#infotext .inner p span:nth-child(4){color:rgb(80 191 125)}
#infotext .inner p span:nth-child(5){color:rgb(255 118 80);}
@media (min-width: 48rem) {
  
}
@media (max-width: 48rem){
    #infotext .inner {width:90%;padding: 6%;}
    #infotext .inner p{font-size: 0.8rem;line-height: 1.3; padding-top: 2%; }
    #infotext .inner p br{display: none;}
    #infotext .inner:before{width: 3.8rem; height: 3.4rem;}

}

#anchorNavGroupSection {position: relative; margin-top: 1rem;}
#anchorNavGroupSection .container:before, #anchorNavGroupSection .container:after {content: ''; display: block; position: absolute;}
#anchorNavGroupSection .anchorNavGroup .container .anchorNav.mis span.top {background: url(../images/Section1/sec-mis-tt.png) no-repeat center / contain;}
#anchorNavGroupSection .anchorNavGroup .container .anchorNav.com span.top {background: url(../images/Section1/sec-com-tt.png) no-repeat center / contain;}
#anchorNavGroupSection .anchorNavGroup .container .anchorNav.gift span.top {background: url(../images/Section1/sec-gift-tt.png) no-repeat center / contain;}

@media (min-width: 48rem) {
    #anchorNavGroupSection .container:before {bottom: -25%; right: 80%; width: 31vw; padding-bottom: 32%; background: url(../images/Section1/deco-sec2-left.png) no-repeat center / contain;}
    #anchorNavGroupSection .container:after {bottom: 22%; left: 84%; width: 31vw; padding-bottom: 32%; background: url(../images/Section1/deco-sec2-right.png) no-repeat center / contain;}
    #anchorNavGroupSection .deco1 {position: absolute; top: 14%; left: 0; right: 0; margin: auto; width: 11%; }
    #anchorNavGroupSection .deco1 span {display: block; width: 100%; padding-bottom: 80%; background: url(../images/Section1/ppl-dog.svg) no-repeat center / contain; transform: translateX(calc(-31vw - 50%));}
}

@media (max-width: 48rem) {
    #anchorNavGroupSection .container:before, #anchorNavGroupSection .container:after {background: url(../images/Section1/deco-path-m.png) no-repeat center / contain; width: 25%; padding-bottom: 15%;}
    #anchorNavGroupSection .container:before {bottom: 14%; right: 89%;}
    #anchorNavGroupSection .container:after {bottom: 24%; left: 93%; transform: rotate(180deg);}
}





#missionSection {position: relative;}
#missionSection > .container {position: relative; margin: auto; max-width: 50rem;}
#missionSection .deco {position: absolute; display: block;}
#missionSection .deco object, #missionSection .deco img {max-width: 100%; width: 100%;}
#missionSection .deco1 {right: 103%; bottom: 5%; width: 10vw;}
#missionSection .deco2 {left: 142%; bottom: -45%; width: 17vw;}
#missionSection .deco3 {left: 87%; bottom: -7%; width: 36vw;}
#missionSection .ttImg {max-width: 25rem; width: 100%; margin: 0 auto 1rem;}
#missionSection p {font-size: 1.5rem; font-weight: 600; color: #4e3d2c; text-align: center; line-height: 1.45;}
#missionSection p span.hl {color: #f76847;}
#missionSection p span.lg {font-size: 1.085em;}
#missionSection p span.sm {display: inline-block; font-size: .915em; width: 68%;}

#userMissionInfoBlock {min-height: 36rem; position: relative; margin: 3rem auto 0; max-width: 65rem;}
#userInfoBlock {margin: auto; max-width: 30rem;}
#userInfoBlock .userInfoBox {text-align: center; position: relative; font-family: "Lato", sans-serif;}
#userInfoBlock .userInfoBox .userImg {width: 8rem; height: 9rem; margin: 0 auto .5rem; background: url(../images/Section2/2x/loginGenders@2x.png) no-repeat; background-size: 300% auto; background-position: 0% center;}
#userInfoBlock .userInfoBox .userImg.gender1 {background-position: 100% center;}
#userInfoBlock .userInfoBox .userImg.gender2 {background-position: 50% center;}
#userInfoBlock .userInfoBox .userName {font-weight: 600; line-height: 1; color: #f76847; font-style: italic; display: inline-block; padding-bottom: .5rem; border-bottom: 1px solid; margin-bottom: .5rem;}
#userInfoBlock .userInfoBox .userRD {font-size: 4.85rem; font-weight: 900; line-height: 1; color: #4e3d2c; display: inline-block; position: relative; padding-left: 5.5rem;}
#userInfoBlock .userInfoBox .userRD:before {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 5rem; height: 4rem; background: url(../images/Section2/RDicon.png) no-repeat center / contain;}
#userInfoBlock .loginBtn {max-width: 20rem; margin: 3rem auto; padding-left: 7.5rem;}
#userInfoBlock .loginBtn:before {width: 5rem;}
#userInfoBlock .loginBtn > span {font-size: 4rem; line-height: 1.6;}
#missionSection #userInfoBlock .loginBtn{max-width: 10rem; margin: 2rem auto; padding-left: 4.5rem; color: #f66845; box-shadow: 2px 3px 0 0 #f66845;}
#missionSection #userInfoBlock .loginBtn > span{font-size: 2rem; line-height: 2;color: #f66845}
#missionSection .loginBtn:before{ width: 3rem; background: url(../images/map-login@2x.png) no-repeat center / contain; }

#missionStatusBlock {margin-top: -7.5rem;}
#missionStatusBlock .panelsGroup {display: flex; flex-flow: row nowrap; justify-content: space-between;}
#missionStatusBlock .panelsGroup > div {display: block; -ms-flex: 0 0 46%; -webkit-flex: 0 0 46%;flex: 0 0 46%; max-width: 46%;}
#missionStatusBlock .statusBoard {width: 100%; padding-bottom: 100%; position: relative; transform: translateY(-3%);}
#missionStatusBlock .statusBoard .panel {position: absolute; width: 45%; height: 45%; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
#missionStatusBlock .statusBoard .panel.bu > div {position: relative; width: 100%; height: 100%; background: url(../images/Section2/mission-grid.png) no-repeat center / contain;}
#missionStatusBlock .statusBoard .panel.bu.booking > div {transform: translateY(-59%);}
#missionStatusBlock .statusBoard .panel.bu.orpay > div {transform: translateX(59%);}
#missionStatusBlock .statusBoard .panel.bu.tas > div {transform: translateX(-59%);}
#missionStatusBlock .statusBoard .panel.bu.voucher > div {transform: translateY(59%);}
#missionStatusBlock .statusBoard .panel.bu .iconBU {position: absolute; width: 35%; padding-bottom: 30%; top: -7%; left: 0; right: 0; margin: auto; background: url(../images/Section2/2x/bu-icons.png) no-repeat; background-size: 400%;animation: float 2s ease-in-out infinite;}
#missionStatusBlock .statusBoard .panel.bu.booking .iconBU {background-position: 0% center;}
#missionStatusBlock .statusBoard .panel.bu.orpay .iconBU {background-position: 33.334% center;}
#missionStatusBlock .statusBoard .panel.bu.tas .iconBU {background-position: 66.668% center;}
#missionStatusBlock .statusBoard .panel.bu.voucher .iconBU {background-position: 100% center;}
#missionStatusBlock .statusBoard .panel.bu .iconDiamond {position: absolute; width: 60%; padding-bottom: 47%; top: 23%; left: 0; right: 0; margin: auto; background: url(../images/Section2/2x/diamonds@2x.png) no-repeat; background-size: auto 500%; background-position: center 0%;} 
#missionStatusBlock .statusBoard .panel.bu.booking .iconDiamond.collected {background-position: center 25%;}
#missionStatusBlock .statusBoard .panel.bu.orpay .iconDiamond.collected {background-position: center 50%;}
#missionStatusBlock .statusBoard .panel.bu.tas .iconDiamond.collected {background-position: center 75%;}
#missionStatusBlock .statusBoard .panel.bu.voucher .iconDiamond.collected {background-position: center 100%;}
#missionStatusBlock .statusBoard .panel.bu .iconDiamond.collected:after {content: '已獲得'; display: block; position: absolute; top: 100%; left: 0; width: 100%; font-size: 1.2rem; letter-spacing: .5px; font-weight: 600; line-height: 1; text-align: center;}
#missionStatusBlock .statusBoard .panel.bu.booking .iconDiamond.collected:after {color: #50b887;}
#missionStatusBlock .statusBoard .panel.bu.tas .iconDiamond.collected:after {color: #eacf7f;}
#missionStatusBlock .statusBoard .panel.bu.orpay .iconDiamond.collected:after {color: #ffa357;}
#missionStatusBlock .statusBoard .panel.bu.voucher .iconDiamond.collected:after {color: #4eccee;}
#missionStatusBlock .panel.missionInfoImg {background: url(../images/Section2/mis-info.png) no-repeat center / contain; width: 100%; padding-bottom: 100%;}
#missionStatusBlock .statusTextInfo {max-width: 40rem; margin: -12rem auto 0;}
#missionStatusBlock .statusTextInfo .tickIcon {display: block; width: 8.5rem; height: 8.5rem; margin: 0 auto .15rem; background: url(../images/Section2/2x/tickIcons@2x.png) no-repeat; background-size: 200%; background-position: 0% center;}
#missionStatusBlock .statusTextInfo .tickIcon.checked {background-position: 100% center;}

#missionSection .reminderBox {margin: .85rem auto 0; max-width: 31.5rem; width: 90%; position: relative; padding: .75rem 0rem .75rem 3.5rem; font-size: 1rem; line-height: 1; color: #4e3d2c; background-color: #fff; border-radius: 4rem;}
#missionSection .reminderBox:before {content: ''; display: block; position: absolute; left: .75rem; top: 0; bottom: 0; margin: auto; width: 2rem; height: 2rem; background: url(../images/Section2/tipsIcon.png) no-repeat center / contain; animation: lightbulbAnim 3s ease-in-out infinite;}
@keyframes lightbulbAnim {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}

@media (min-width: 48rem) {
    #userInfoBlock {min-height: 10rem;}
}

@media (max-width: 48rem) {
    #missionSection {padding-bottom: 106%; margin-top: -2rem;}
    #missionSection > .container {position: static;}
    #missionSection .deco1 {right: 80%; width: 25%; bottom: auto; top: 13%;}
    #missionSection .deco2 {left: 83%; width: 25%; bottom: auto; top: 8%;}
    #missionSection .deco3 {width: 100%; bottom: -2%; left: 0; right: 0; margin: auto;}
    #missionSection .ttImg {width: 68%;}
    #missionSection p {font-size: 1.25rem;}
    #missionSection > .container p {max-width: 21rem; margin: auto; line-height: 1.2;}

    #userMissionInfoBlock {margin-top: 2rem; min-height: 0;}
    #userInfoBlock .loginBtn {max-width: 14rem; padding-left: 6rem; margin: 2rem auto;}
    #userInfoBlock .loginBtn:before {width: 3.5rem;}
    #userInfoBlock .loginBtn > span {font-size: 2.5rem; line-height: 1.8;}
    #userInfoBlock .userInfoBox .userImg {width: 6rem; height: 7rem;}
    #userInfoBlock .userInfoBox .userName {font-size: 2rem; padding-bottom: .25rem;}
    #userInfoBlock .userInfoBox .userRD {font-size: 2.8rem; padding-left: 3.2rem;}
    #userInfoBlock .userInfoBox .userRD:before {width: 3rem; height: 2rem; bottom: .15rem;}

    #missionStatusBlock {margin-top: 1.5rem;}
    #missionStatusBlock .panelsGroup > div:last-child {display: none;}
    #missionStatusBlock .panelsGroup > div {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    #missionStatusBlock .statusBoard .panel {width: 40%; height: 40%;}
    #missionStatusBlock .statusBoard .panel.bu.booking > div {transform: translate(-65%, -70%);}
    #missionStatusBlock .statusBoard .panel.bu.tas > div {transform: translate(65%, -70%);}
    #missionStatusBlock .statusBoard .panel.bu.orpay > div {transform: translate(-65%, 65%);}
    #missionStatusBlock .statusBoard .panel.bu.voucher > div {transform: translate(65%, 65%);}
    #missionStatusBlock .statusBoard .panel.missionInfoImg {position: absolute; width: 50%; height: 50%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding-bottom: 0;}
    #missionStatusBlock .statusTextInfo {margin: -20% auto 0;}
    #missionStatusBlock .statusTextInfo .tickIcon {width: 23%; height: auto; padding-bottom: 21%;}
    #missionStatusBlock .statusTextInfo p {font-size: 1.15rem;}
    #missionSection .reminderBox {max-width: 22rem; padding: .5rem .5rem .5rem 2.5rem;}
    #missionSection .reminderBox:before {width: 1.15rem; height: 1.15rem;}
    #missionSection .reminderBox small {font-size: .65rem; display: block; line-height: 1.2;}
}



#separationLine {padding-bottom: 22%;  position: relative;}
#separationLine:before, #separationLine:after {content: ''; display: block; position: absolute; left: 0; width: 100%; height: 100%; }
#separationLine:before {clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 93% 42%, 88% 42%, 73% 80%, 68% 80%, 52% 42%, 47% 42%, 32% 80%, 28% 80%, 11% 42%, 7% 42%, 0% 60%); background: url(../images/pattern.png) left top; top: 0; }
#separationLine:after {background: url(../images/Section2/sec-line.png) no-repeat center center / 108% auto; top: -15%; }

@media (max-width: 48rem) {
    #separationLine {padding-bottom: 22%;}
    #separationLine:before {clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 85% 75%, 80% 75%, 52% 12%, 48% 12%, 20% 75%, 15% 75%, 0% 50%);}
    #separationLine:after {background-position: center 115%; background-size: 180% auto; top: 3%;}
}




#competitionSection {margin-top: -16rem;}
#competitionSection .container {max-width: 63rem; margin: auto; padding: 0 1.5rem;}
#competitionSection .ttImgWrap {max-width: 25rem; margin: auto; position: relative;}
#competitionSection .ttImgWrap:before, #competitionSection .ttImgWrap:after {content: ''; display: block; position: absolute; }
#competitionSection .ttImgWrap:before {background: url(../images/Section3/2x/deco-rice@2x.png) no-repeat center / contain; width: 18rem; height: 15rem; right: 102%; bottom: 3%;}
#competitionSection .ttImgWrap:after {background: url(../images/Section3/2x/deco-green@2x.png) no-repeat center / contain; width: 22rem; height: 15rem; left: 110%; bottom: 0%;}
#competitionSection .ttImgWrap .ttImg {width: 100%;}
#competitionSection .ttImgWrap .weeklyRankBtn {width: 13rem; height: 13rem; position: absolute; left: 105%; top: 29%; border-radius: 50%; background: url(../images/Section3/2x/btn-ranking@2x.png) no-repeat center / contain; z-index: 1; -webkit-animation: goBtn 2s ease-in-out infinite both; animation: goBtn 2s ease-in-out infinite both}
#competitionSection .top3prizeWrap {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
#competitionSection .top3prizeWrap .topPrize {display: block; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; position: relative;}
#competitionSection .top3prizeWrap .topPrize a {display: block; perspective: 100rem;}
@keyframes topPrizeHover {
    0%{transform:rotateY(0deg)}
    50%{transform:rotateY(-10deg)}
    100%{transform:rotateY(10deg)}
}
#competitionSection .buPrizeWrap {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; margin-top: 3rem;}
#competitionSection .buPrizeWrap .buPrize {display: block; -ms-flex: 0 0 18.5%; -webkit-flex: 0 0 18.5%;flex: 0 0 18.5%; max-width: 18.5%;}


@media (min-width: 48rem) {
    #competitionSection .ttImgWrap .weeklyRankBtn:hover {transform: scale(1.035);}
    #competitionSection .top3prizeWrap .topPrize img:hover {animation: topPrizeHover .8s cubic-bezier(.62,.28,.23,.99) infinite alternate; backface-visibility: hidden;}
    #competitionSection .top3prizeWrap .topPrize.top1 {-ms-flex: 0 0 38%; -webkit-flex: 0 0 38%;flex: 0 0 38%; max-width: 38%; }
    #competitionSection .top3prizeWrap .topPrize.top2, #competitionSection .top3prizeWrap .topPrize.top3 {display: block; -ms-flex: 0 0 29%; -webkit-flex: 0 0 29%; flex: 0 0 29%; max-width: 29%; }
    #competitionSection .top3prizeWrap .topPrize.top1:before, #competitionSection .top3prizeWrap .topPrize.top3:before {content: ''; display: block; position: absolute; z-index: 1;}
    /* #competitionSection .top3prizeWrap .topPrize.top1:before {width: 7rem; height: 11rem; right: 93%; bottom: -1%; background: #000;}
    #competitionSection .top3prizeWrap .topPrize.top3:before {width: 7rem; height: 12rem; left: 80%; bottom: -17%; background: #000;} */
}

@media (max-width: 48rem) {
    #competitionSection {margin-top: -4rem;}
    #competitionSection .container {padding: 0 .5rem;}
    #competitionSection .ttImgWrap {width: 70%; padding-bottom: 38%;}
    #competitionSection .ttImgWrap:before {width: 52%; height: auto; padding-bottom: 43%; right: 81%; bottom: 21%;}
    #competitionSection .ttImgWrap:after {width: 51%; height: auto; padding-bottom: 34%; left: 65%; bottom: 0%;}
    #competitionSection .ttImgWrap .ttImg {margin-left: 7%;}
    #competitionSection .ttImgWrap .weeklyRankBtn {width: 48%; height: auto; padding-bottom: 48%; left: 43%; bottom: 7%; top: auto;-webkit-animation: goBtn 2s ease-in-out infinite both;animation: goBtn 2s ease-in-out infinite both;}
    #competitionSection .top3prizeWrap .topPrize.top1 {order: 1; padding: .5rem .5rem 2rem;}
    #competitionSection .top3prizeWrap .topPrize.top2 {order: 2; padding: .75rem 2.5rem;}
    #competitionSection .top3prizeWrap .topPrize.top3 {order: 3; padding: .75rem 2.5rem;}
    #competitionSection .buPrizeWrap {margin-top: 0; justify-content: center;}
    #competitionSection .buPrizeWrap .buPrize {-ms-flex: 0 0 46%; -webkit-flex: 0 0 46%; flex: 0 0 46%; max-width: 46%; margin: .25rem 2%;}
}


#giftSection {margin-top: 4.5rem;}
#giftSection .container {max-width: 70rem; margin: auto; position: relative;}
#giftSection .container:before, #giftSection .container:after {content: ''; display: block; position: absolute; }
#giftSection .container:before {background: url(../images/Section3/deco-green1.png) no-repeat center / contain; width: 15rem; height: 20rem; right: 108%; top: -25%;}
#giftSection .container:after {background: url(../images/Section3/deco-green2.png) no-repeat center / contain; width: 17rem; height: 14rem; left: 106%; top: -23%;}
#giftSection .ttImgWrap {width: 100%; max-width: 50rem; margin: auto; position: relative;}
#giftSection .ttImgWrap .ttImg {width: 100%;}
#giftSection .ttImgWrap .goBtn {position: absolute; background: url(../images/Section3/btn-go.svg) no-repeat center / contain; width: 78%; padding-bottom: 32%; left: 25%; bottom: -4%; -webkit-animation: goBtn 2s ease-in-out infinite both; animation: goBtn 2s ease-in-out infinite both; transform-origin: center center;}
@keyframes goBtn {
    from {transform: scale(1);}
    10% {transform: scale(0.96);}
    17% {transform: scale(1.3);}
    33% {transform: scale(0.92);}
    45% {transform: scale(1);}
}

@media (max-width: 48rem) {
    #giftSection {margin-top: 3rem;}
    #giftSection .container:before {width: 39%; height: auto; padding-bottom: 53%; right: 76%; top: -103%}
    #giftSection .container:after {width: 48%; height: auto; padding-bottom: 50%; left: 73%; top: -130%}
    #giftSection .ttImgWrap {max-width: 20rem;}
    #giftSection .ttImgWrap .goBtn {background-position: -40% -200%; background-size: 130%; width: 100%; padding-bottom: 50%; left: 0%; bottom: -2%;}
}


#seperationLine2 {padding-bottom: 20%; background: url(../images/Section3/deco-line.png) no-repeat center center / 108% auto; position: relative; margin-top: -4%;}

@media (max-width: 48rem) {
    #seperationLine2 {background: url(../images/Section3/deco-line-m.png) no-repeat center center / 100% auto; padding-bottom: 89%; margin-top: 4%;}
}



#monopoly {margin-top: -5rem;}
#monopoly .container {max-width: 54rem; margin: auto; position: relative; padding: 0 1.5rem}

@media (max-width: 48rem) {
    #monopoly {margin-top: -7rem;}
    #monopoly .container {padding: 0 2.25rem;}
}



#videoSection {margin-top: 4rem;}
#videoSection .container {max-width: 54rem; margin: auto; position: relative; padding: 0 1.5rem 12rem;}
#videoPlayer {position: relative; width: 100%;}
#videoPlayer .videoFrame {position: relative; width: 100%; padding-bottom: 56.25%;
}
#videoPlayer .videoFrame:before {content: ''; display: block; position: absolute; top: -9%; left: -5%; width: 110%; height: 117%; z-index: 1; background: url(../images/Section4/video-frame.png) no-repeat center / 100% 100%;}
#videoPlayer .videoFrame:after {content: ''; display: block; position: absolute; top: 102%; left: 0; right: 0; margin: auto; width: 70%; padding-bottom: 10%; z-index: 0; background: url(../images/Section4/deco-billboard.png) no-repeat center / contain;}
#videoPlayer .videoFrame iframe {position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2.5rem;}
#videoSection .deco {position: absolute; display: block;}
#videoSection .deco span {display: block;}
#videoSection .deco1 {right: 103%; bottom: 3%;}
#videoSection .deco2 {right: 130%; bottom: -10%;}
#videoSection .deco3 {left: 97%; top: -1%;}
#videoSection .deco4 {left: 105%; bottom: 2%;}
#videoSection .deco1 span {width: 23rem; padding-bottom: 75%; background: url(../images/Section4/ppl-watch.gif) no-repeat center / contain;}
#videoSection .deco2 span {width: 10rem; padding-bottom: 140%; background: url(../images/Section4/deco-balloon.png) no-repeat center / contain;}
#videoSection .deco3 span {width: 20rem; padding-bottom: 85%; background: url(../images/Section4/deco-popcorn.png) no-repeat center / contain;}
#videoSection .deco4 span {width: 23rem; padding-bottom: 80%; background: url(../images/Section4/ppl-watch.gif) no-repeat center / contain;transform: scaleX(-1);}

@media (max-width: 48rem) {
    #videoSection {margin-top: 2rem;}
    #videoSection .container {padding: 0 2.25rem 10rem;}
    #videoPlayer .videoFrame iframe {border-radius: .75rem;}
    #videoSection .deco {z-index: 3;}
    #videoSection .deco1 {left: 6%; top: auto; width: 36%; right: auto; bottom: 1%;}
    #videoSection .deco1 span {width: 100%;}
    #videoSection .deco3 {left: 94%; top: 41%; width: 34%;}
    #videoSection .deco3 span {width: 100%;}
    #videoSection .deco4 {right: 9%; top: auto; width: 35%; left: auto; bottom: 1%;}
    #videoSection .deco4 span {width: 100%;}
}



#adBanners {position: relative;}
#adBanners .container {max-width: 94rem; width: 100%; margin: auto; display: flex; flex-flow: row wrap; justify-content: space-between; padding: 1rem 1rem 3rem;}
#adBanners a {display: block; -ms-flex: 0 0 49.25%; -webkit-flex: 0 0 49.25%;flex: 0 0 49.25%; max-width: 49.25%; position: relative;}
#adBanners a:after {content: ''; display: block; position: absolute; top: 85%; left: 0; right: 0; margin: auto; width: 75%; padding-bottom: 10%; z-index: 0; background: url(../images/Section4/deco-billboard.png) no-repeat center / contain;}
#adBanners img {width: 100%; position: relative; border: 3px solid #f8a60c; border-radius: 1rem; z-index: 1;}

@media (max-width: 48rem) {
    #adBanners .container {padding: 2rem 1rem 3rem;}
    #adBanners a {-ms-flex: 0 0 100%; -webkit-flex: 0 0 100%;flex: 0 0 100%; max-width: 100%; margin-bottom: 2rem;}
}


#sponsorLogos {position: relative;}
#sponsorLogos .container {max-width: 78rem; width: 100%; margin: auto; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; padding: 3rem 1rem;}
#sponsorLogos .sponsorLogo {background-color: #fff; border-radius: .5rem; margin: .5rem; padding: .75rem; width: 7rem; height: 7rem;}
#sponsorLogos .sponsorLogo img {width: 100%; height: 100%; object-fit: contain;}

@media (max-width: 48rem) {
    #sponsorLogos .container {padding: 0 0 3rem; font-size: 0; white-space: nowrap; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; display: block;}
    #sponsorLogos .container::-webkit-scrollbar {display: none;}
    #sponsorLogos .sponsorLogo {display: inline-block; vertical-align: middle; margin: 0 .75rem;}
}