@charset "utf-8";

/* a:hover{ opacity:0.9;} *//*滑鼠滑入半透明*/
/*--loading載入中--------------------------------*/
/*遮罩樣式*/
.overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /*半透明背景*/ display: flex; justify-content: center; align-items: center; z-index: 9999;/*確保遮罩層在最上層*/}

/*spinner樣式+旋轉動畫*/
.spinner{ border: 8px solid rgba(0, 0, 0, 0.1); border-left: 8px solid #fff; border-radius: 50%; width: 50px; height: 50px; margin: 0 auto; animation: spin 1s linear infinite;}
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);}}

/*loading文字*/
.loadingTxt{ margin-top: 10px; font-size: 2rem; color: #fff; font-weight: bold;}

/*--PC、M的隱藏/顯示設定--*/
.pcNo{ display: block;}
.mNo{ display: none;}
.mINBLpcNO{ display: inline-block;}
.pcINBLmNO{ display: none;}

/*--特殊色：文字、連結、heighLight--*/
.heighLightPurple{ background-color: #7e2e83; padding: 0 5px;}
.heighLightGreen{ display: inline-block; margin: 4px 0; background-color: #a7e0a6; padding: 0 5px;}
.heighLightRed{ display: inline-block; margin: 4px 0; background-color: #e7cdc9; padding: 0 5px;}
.txtPurple{ color: #c925bc;}
.txtGreen{ color: #04ac00;}
.txtRed{ color: #df3f24;}
.txtBrown{ color: #885d00;}
.txtBlue{ color: #2487e0;}
.txtYellow{ color: #f7fc30;}
.alink{ color: #0076df; text-decoration: none;}
.alink:hover{ text-decoration: underline;}

/*區塊上下間距-----------------------------------------*/
.bgPadT{ padding-top: 30px;}
.bgPadB{ padding-bottom: 30px}

.bgPadT2{ padding-top: 0;}
.bgPadB2{ padding-bottom: 0;}

.bgPadB3{ padding-bottom: 20px;}

.bgPadTm{ padding-top: 12px;}
.bgPadBm{ padding-bottom: 12px;}

.bgPadTm2{ padding-top: 15px;}
.bgPadBm2{ padding-bottom: 15px;}

/*背景圖-----------------------------------------*/
.bg1{ background-color: #bec347; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg1.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.bg2{ background-color: #4d7045; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg2.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.bg3{ padding-top: 15px; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg3.png); background-position: top center; background-size: 100%;}
.bg4{ background-color: #907648; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg4.png); background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.bg5{ background-color: #4d6966; background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg5.png); background-position: top center; background-size: 100%;}
.bg5_1{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg5_1.png); background-position: top center; background-size: 127%; background-repeat: no-repeat;}
.bg5_2{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg5_2.png); background-position: top center; background-size: 127%; background-repeat: no-repeat;}
.bg5_3{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg5_3.png); background-position: top center; background-size: 127%; background-repeat: no-repeat;}
.bg5_4{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg5_4.png); background-position: top center; background-size: 127%; background-repeat: no-repeat;}
.bg5_5{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/bg5_5.png); background-position: top center; background-size: 127%; background-repeat: no-repeat;}

/*--header-----------------------------------------*/
/* .headerW{ max-width: 800px; margin: 0 auto; border: #f2dcee 8px solid; overflow: hidden;} */
.headerBox{ overflow: hidden; position: relative;}
.headerBox img{ display: block; width: 100%;}
.headerH{ width: 100%;}

.headerPicFull{ position: absolute; top: 0; left: 0; width: 100%;}
.headerPicHalf{ position: absolute; top: 0; width: 50%;}
.headerPicHalf.left{ left: 0;}
.headerPicHalf.right{ right: 0;}

.headerPic{ position: absolute;}

/*刊頭動畫*/
.headerMain{ transform: translateY(-250px); animation: headerMain 6s forwards;}
@keyframes headerMain { 
    0%{ transform: translateY(-250px);}
    100% { transform: translateY(0);}
}

/*--contain-----------------------------------------*/
.contain{ overflow: hidden;}
/*區塊寬度*/
.areaWidth{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth2{ position: relative; width: 94%; margin: 0 auto;}
.areaWidth3{ position: relative; width: 96%; margin: 0 auto;}
.areaWidth4, .areaWidth5{ max-width: 1200px;}

/*主標寬度*/
.mainTitle{ width: 92%; margin: 0 auto 8px auto;}
.mainTitle2{ width: 100%; margin: 0 auto;}
.mainTitle3{ width: 92%; margin: 0 auto 0 auto; position: relative;}
.insideTitle{ width: 90%; margin: 0 auto;}

/*常用(定位+圖片block)*/
.posiRelative{ position: relative;}
.posiAbsolute{ position: absolute;}
.imgBlock100 img{ display: block; width: 100%;}
/*圖片滿版定位*/
.picFull{ position: absolute; top: 0; left: 0; width: 100%;}

/*PC+M同版*/
.areaWidthM{ position: relative; width: 94%; margin: 0 auto;}
.mainTitleM{ width: 100%;}
.wrapperHalf > li{ padding: 2%;}

/*--活動說明-----------------------------------------*/
.noticeStyle1{ width: 96%; margin: 0 auto; background-color: #4d7045; border: #3b5d2e 8px solid; border-radius: 15px;}
.noticeStyle1{ margin-top: 15px;}
.noticeStyle1 .noticeCon{ margin: 0 auto; padding: 20px 6% 20px 6%;}
.noticeStyle1 .noticeCon .notice2{ /*max-width: 1000px;*/ margin: 0 auto; color: #ffffff;}
.noticeStyle1 .noticeTitle{ margin-bottom: 0; margin-top: 0; padding-bottom: 10px; font-size: 1.8rem; background-color: #3b5d2e; color: #ffffff;}
.noticeStyle1 .noticeSecTitle{ color: #ffffff; font-size: 1.8rem;}
.noticeStyle1 .notice2 > li{ margin-right: 0;}
.noticeStyle1 .notice2 > li > ul > li{ list-style-type: decimal;}
.noticeStyle1 .notice2 a{ color: #82fff5;}

/*ibon點擊才展開*/
.slideNotice .noticeCon{ display: none;}
.noticeSlide{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 5px; font-size: 1.8rem; color: #000000; background-color: #b3ff59; border-radius: 3px; cursor: pointer;}
.noticeSlide .bwi-delete{ font-size: 1.6rem;}

/*--地圖錨點連結-----------------------------------------*/
.webMenuMbg{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/menu_bg_m.png); background-size: contain;}
.webMenuMbg ul{ width: 94%; margin: 0 auto;}
.webMenuMbg ul:first-child{ padding-top: 10px;}
.webMenuMbg ul:last-child{ padding-bottom: 10px;}

.webMenuBox .mNo a img{ animation: webMenuBox 1.5s infinite;}
@keyframes webMenuBox { 
    0%{ transform: scale(1);}
    50% { transform: scale(0.95);}
    100% { transform: scale(1);}
}

/*--MAU活動-----------------------------------------*/
.areaConWidth{ overflow: hidden; margin: -7% auto 0 auto; border: #34582d 8px solid; background-color: rgba(129,161,80,0.95); border-radius: 20px; box-sizing: border-box;}
.areaConWidthPadd{ padding: 3% 0 5% 0;}
.borderDeco{ margin-bottom: 15px;}
.couponBox{ padding: 0 3%;}

/*按鈕動畫*/
.specialBtn{ display: block; animation: specialBtn 2s infinite;}
.specialBtn2 #btmMsg2{ display: block; animation: specialBtn2 2s infinite;}
@keyframes specialBtn { 
    0%{ transform: scale(1) translateX(0);}
    50% { transform: scale(0.9) translateX(-10px);}
    100% { transform: scale(1) translateX(0);}
}
@keyframes specialBtn2 { 
    0%{ transform: scale(1) translateX(0);}
    50% { transform: scale(0.9) translateX(15px);}
    100% { transform: scale(1) translateX(0);}
}

/*按鈕動畫(全體會員好禮)*/
.specialAllBtn{ display: block; animation: specialAllBtn 2s infinite;}
@keyframes specialAllBtn { 
    0%{ transform: scale(1) translateX(0);}
    50% { transform: scale(0.9) translateX(10px);}
    100% { transform: scale(1) translateX(0);}
}

/*按鈕滑入*/
.specialBtn img,.specialBtn2 #btmMsg2 img{ transition: 0.4s;}
.specialBtn img:hover,.specialBtn2 #btmMsg2 img:hover{ transform: translateY(10px);}

/*按鈕已登記*/
.specialBtn2 #btmMsg2.checked{ animation: none;}
.specialBtn2 #btmMsg2.checked img:hover{ transform: translateY(0);}
.listBox li a.specialBtn2:hover{ transform: translateY(0);}

/*資格+剩餘數量*/
.giftNum{ display: inline-block; position: absolute; top: 82%; left: 9%; margin: 5% 0 0 5%; padding: 2px 10px; border: #b19552 3px solid; font-size: 1.5rem; color: #002a5b; font-weight: bold; background-color: #fff; border-radius: 100px;}
.giftNum span{ color: #c620b2;}
.giftNum b{ color: #c620b2;}

/*登記外框*/
.special3Border{ margin: -14% 2% 0 2%; padding-top: 16%; background-color: rgba(208,232,248,0.5); border-radius: 30px;}

/*--註冊贈書-----------------------------------------*/
.giveBookTxt{ margin-top: 10px; font-size: 2rem; color: #ffffff; text-align: center; font-weight: bold; line-height: 1.4;}
.giveBookTxt span{ color: #d0ec4a;}
.giveBook{ margin-top: 20px; border: #ffffff 5px solid; border-radius: 5px;}
.giveBookBtn{ display: block; max-width: 240px; width: 60%; margin: 20px auto 0 auto; animation: giveBookBtn 2s infinite;}
@keyframes giveBookBtn { 
    0%{ transform: scale(1);}
    50% { transform: scale(0.9);}
    100% { transform: scale(1);}
}

/*--測驗活動標題-----------------------------------------*/
.travelTitle{ padding-top: 15px;}
.stepBox{ width: 88%; margin: 0 auto 20px auto;}

/*--測驗-----------------------------------------*/
/*--測驗封面--*/
.gameBox{ width: 94%; margin: 0 auto;}
.game{ max-width: 800px; margin: 0 auto; padding: 5px; background-color: #9fbd11; /*border: #3235c3 1px solid;*/ border-radius: 30px;}
.gameBorder{ position: relative; /*padding: 3px;*/ border: #257c5b 1px solid; border-radius: 25px; overflow: hidden;}
.gameCon{ background-image: url(https://cp-img.bookwalker.com.tw/event/2026/20260401_seichijunrei/images/game_bg.png); background-repeat: repeat; background-size: 100%; background-position: top center; border-radius: 10px;}

/*測驗GOGO*/
.gameChoice{ position: absolute; bottom: 0; left: 0; cursor: pointer; animation: gameChoice 1.5s infinite;}
@keyframes gameChoice {
    0%{ transform: scale(1);}
    50%{ transform: scale(0.9);}
    100% { transform: scale(1);}
}
.gameChoice img{ transition: 0.4s;}
.gameChoice img:hover{ transform: rotate(5deg) translateY(-8px);}
.gameChoice img:active{ transform: translateY(30px);}
.recommBtn{ animation: gameChoice 1.5s infinite;}

/*--結果區--*/
.gameEndGift{ padding-top: 15px; font-size: 2rem; font-family: 'Noto Sans TC VF'; font-weight: 700; text-align: center;}
.gameEndGift a{ display: inline-block !important;}
/*標題*/
.resultTitle{ margin-top: 15px; font-size: 2.5rem; color: #c8ff7b;}
/*贈品*/
.resultInfo{ width: 80%; margin: 10px auto 0 auto; font-size: 2rem; color: #ffffff;}
.resultInfo p{ margin-bottom: 12px; line-height: 1.2;}
.resultInfo a{ font-size: 1.6rem; color: #6df0ff; text-decoration: none;}
.resultInfo a:hover{ text-decoration: underline;}

/*結果圖*/
.gameEndResult{ width: 94%; margin: 0 auto; padding-top: 10px;}

/*手機長按下載*/
.resultPicNote{ margin-top: 5px; font-size: 1.5rem; color: #ffffff; text-align: center;}

/*測驗推薦書籍*/
.resultBook{ position: absolute; top: 60.8%; left: 4.4%; width: 83%;}
.resultBook a{ display: block; animation: scaleInOut 1.5s infinite;}
@keyframes scaleInOut{ 
    0% { transform: scale(1);} 
    50% { transform: scale(1.03);} 
    100% { transform: scale(1);} 
}

/*測驗結果按鈕*/
.gameEndBtnBox{ width: 90%; margin: 0 auto; padding-top: 15px; padding-bottom: 30px;}
/*社群分享再抽*/
.shareNote .pcNo{ width: 84%; max-width: 360px; margin: 0 auto;}

/*社群分享鈕*/
.shareIconList{ max-width: 350px; margin: 0px auto 10px auto;}

/*按鈕*/
.gameEndBtn{ width: 70%; display: flex; gap: 10px; flex-wrap: wrap; margin: 10px auto 0 auto;}
.gameEndBtn > li{ flex: 1; cursor: pointer;}
.gameEndBtn a{ display: block;}

/*--社群分享區-----------------------------------------*/
.socialEventBox{ width: 100%; margin: 0 auto;}
.socialEventBtn{ position: absolute; bottom: 18%; right: 0; left: 0; margin: 0 auto; animation: scaleInOut2 1s infinite;}
@keyframes scaleInOut2{ 
    0% { transform: scale(1);} 
    50% { transform: scale(0.95);} 
    100% { transform: scale(1);} 
}
.socialEventBtn img{ transition: 0.4s;}
.socialEventBtn:hover img{ transform: rotate(3deg); transition: 0.4s;}

/*--旅行作品推薦(主推)-----------------------------------------*/
.recommMainTitle{ margin: 15px auto 0 auto;}
.recommMainTxt{ width: 85%; margin: 12px auto; font-size: 1.8rem; color: #ffffff; line-height: 1.7;}
.recommMainBook{ margin: 20px auto 0 auto;}
.recommMainPrice{ display: block; width: 90%; margin: 15px auto 0 auto; animation: scaleInOut2 1s infinite;}

.recommList{ width: 72%; margin: 0 auto;}
.recommMoreBtn{}
.allMoreBtn{ display: block; width: 88%; margin: 10% auto 0 auto; transform: rotate(-5deg);}

/*--fixedBtnBox側邊浮動按鈕-----------------------------------------*/
.fixedBtnBox{ position: fixed; bottom: 115px; right: 0;/*按鈕定位(靠右)*/ z-index: 101; transform: translateX(100%);/*先把按鈕向右移出畫面*/ transition: transform 0.8s;}
.fixedBtnBoxShow{ transform: translateX(0);/*show的時候再讓按鈕移入畫面*/ transition: transform 0.8s;}
.fixedBtnBox li{ overflow: hidden; margin-bottom: 5px;}

.sideBtn{ float: left; height: 122px;/*調整按鈕大小*/}
.sideBtn img{ height: 100%;}
.sideBtn{ cursor: pointer; position: relative; z-index: 1;}

/*--sweetAlert-----------------------------------------*/
/*預設按鈕文字大小*/.swal2-actions button {font-size: 1.4rem !important;}

/*--767up(Pc)------------------------*/
@media screen and (min-width:767px) {
    /*--loading載入中--------------------------------*/
    /*loading文字*/.loadingTxt{ font-size: 2.5rem; }

    /*--PC、M的隱藏開啟設定--*/
    .pcNo{ display: none;}
    .mNo{ display: block;}
    .mINBLpcNO{ display: none;}
    .pcINBLmNO{ display: inline-block;}

    /*區塊上下間距-----------------------------------------*/
    .bgPadT{ padding-top: 60px;}
    .bgPadT2{ padding-top: 15px;}

    .bgPadB{ padding-bottom: 90px;}

    .bgPadB2{ padding-bottom: 0;}
    .bgPadB3{ padding-bottom: 40px;}

    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg4, .bg5, .bg5_1, .bg5_2, .bg5_3, .bg5_4, .bg5_5{ background-attachment: fixed; background-size: 100%;}
    .bg3{ padding-top: 2%;}

    .border1, .border2, .border3{ border-width: 15px;}
    .border2{ padding: 25px;}
    .border3{ padding: 25px;}

    /*--header-----------------------------------------*/
    /* .headerW{ border-width: 15px;} */
    /*刊頭動畫*/
    .headerMain{ transform: translateY(-500px); animation: headerMain 8s forwards;}
    @keyframes headerMain { 
        0%{ transform: translateY(-500px);}
        100% { transform: translateY(0);}
    }

    /*--contain-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth{ max-width: 1200px; padding-top: 0;}
    .areaWidth2{ max-width: 1300px;}
    .areaWidth3{ max-width: 900px;}
    .areaWidth4{ position: relative; width: 96%; margin: 0 auto;}

    /*主標寬度*/
    .mainTitle{ width: 56%; max-width: 500px;}
    .mainTitle2{ width: 65%; max-width: 590px; margin: 0 auto;}
    .mainTitle3{ width: 100%; max-width: 960px;}

    .wrapper{ width: 40%; max-width: 620px; margin: 0 auto;}
    .wrapperHalf { width: 94%; margin: 0 auto;}
    .wrapperHalf > li{ padding: 2%;}

    /*--活動說明-----------------------------------------*/
    .noticeStyle1{ width: 100%; box-sizing: border-box;}

    /*--地圖錨點連結-----------------------------------------*/
    .webMenu1{ width: 20%; top: 40%; left: 4%;}
    .webMenu2{ width: 20%; top: 13%; left: 15%;}
    .webMenu3{ width: 20%; top: 19%; left: 36%;}
    .webMenu4{ width: 20%; top: 22%; left: 75%;}
    .webMenu5{ width: 24%; top: 57%; left: 64%;}

    /*--MAU活動-----------------------------------------*/
    .areaConWidth{ width: 100%; border-radius: 25px;}
    .areaConWidthPadd{ padding: 5% 5% 5% 5%;}
    .areaConWidthPadd.listBox > li:nth-child(1){ padding-top: 5%;}

    /*--測驗活動標題-----------------------------------------*/
    .travelTitle{ padding-top: 30px;}
    .stepBox{ width: 98%; padding-left: 2%; margin: 0 auto 3% auto;}

    /*--測驗-----------------------------------------*/
    /*測驗封面*/
    .gameBox{ width: 100%;}
    .game{ padding: 13px; border-radius: 40px;}
    .gameBorder{ border-radius: 30px;}

    /*--結果區--*/
    .gameEndGift{ padding-top: 20px;}
    /*贈品*/
    .resultInfo p{ margin-bottom: 0; line-height: 1.5;}
    /*結果圖*/
    .gameEndResult{ width: 80%; margin: 0 auto;}

    /*看更多作品*/
    /* .gameMoreBook{ margin: 0 3px; padding: 13px 0;} */

    /*測驗結果按鈕*/
    .gameEndBtnBox{ width: 70%; padding-top: 15px; padding-bottom: 60px;}
    /*社群分享再抽*/
    .shareNote .mNo{ width: 90%; max-width: 430px; margin: 10px auto 0 auto;}
    /*按鈕*/
    .gameEndBtn{ width: 90%; gap: 15px; margin-top: 15px;}
    .gameEndBtn > li{ transition: 0.4s;}
    .gameEndBtn a{ display: block;}
    .gameEndBtn > li:hover{ transform: translateY(6px) scale(0.95);}

    /*--社群分享區-----------------------------------------*/
    .socialEventBox{ width: 84%; margin: 10px auto;}

    /*--旅行作品推薦(主推)-----------------------------------------*/
    .recommMainTitle{ margin-top: 30px; max-width: 600px;}
    .recommMainTxt{ max-width: 600px; font-size: 2rem; text-align: center; line-height: 1.8; margin-top: 30px;  /*width: 85%; margin: 12px auto; color: #ffffff; font-weight: bold;*/}
    .recommMainBook{ max-width: 1000px; margin-top: 40px;}
    .recommMainPrice{ max-width: 500px; margin-top: 30px;}

    .recommList{ max-width: 880px; margin-top: 25px;}
    .recommMoreBtn{ max-width: 350px; margin: 0 auto;}
    .allMoreBtn{ max-width: 300px; margin: 50px auto 0 auto;}

    /*--fixedBtnBox側邊浮動按鈕-----------------------------------------*/
    .fixedBtnBox{ bottom: 110px;}
    .fixedBtnBox li{ margin-bottom: 8px;}

    .sideBtn{ height: 167px;/*調整按鈕大小*/}
    .sideBtn:hover{ transform: scale(0.98) translateX(5px);}
    

    /*--hover animate--------------------------------*/
    .recommMainPrice img, .recommMoreBtn a, .resultBook img, .giveBookBtn img, .recommMainBook a, .webMenuBox a, .allMoreBtn{ display: block; transition: 0.4s;}
    .recommMainPrice:hover img{ transform: rotate(-6deg);}
    .recommMoreBtn a:hover{ transform: rotate(4deg);}
    .resultBook img:hover{ transform: rotate(2deg);}
    .giveBookBtn img:hover{ transform: rotate(3deg);}
    .recommMainBook a:hover, .allMoreBtn:hover{ transform: scale(0.95);}
    .webMenuBox a:hover{ transform: rotate(-10deg);}
}

/*--768-1024(Pad)------------------------*/
@media screen and (min-width:768px) and (max-width:1024px) { 
    /*背景圖-----------------------------------------*/
    .bg1, .bg2, .bg3, .bg4, .bg5, .bg5_1, .bg5_2, .bg5_3, .bg5_4, .bg5_5{ background-attachment: inherit;}
    .bg5_1, .bg5_2, .bg5_3, .bg5_4, .bg5_5{ background-repeat: no-repeat; background-size: cover;}

    /*--contain-----------------------------------------*/
    /*區塊寬度*/
    .areaWidth2{ max-width: 95%;}
    /*主標寬度*/
    .mainTitle3{ width: 90%;}

    .wrapperHalf > li{ padding: 2%;}

    /*--社群分享區-----------------------------------------*/
    .socialEventBox{ width: 96%;}



}

/*--1200以下------------------------*/
@media screen and (min-width:767px)  and (max-width:1200px) { 
    /*--contain-----------------------------------------*/
    .wrapper { width: 65%; margin: 0 auto;}

    /*--header-----------------------------------------*/
    .headerPadWidth{ overflow: hidden;}
    .headerPadWidth .headerBox{ width: 166%; margin-left: -33%;}/*平板刊頭放大(讓左右背景超出可視範圍)*/
}

/*--1500以上------------------------*/
@media screen and (min-width:1500px) { 
    .wrapperHalf { max-width: 1400px; margin: 0 auto;}

}

/*--320以下小手機------------------------*/
@media screen and (max-width:320px) {
}


.webMenuMbg img{ aspect-ratio: 361/139;}
.stepBox img{ aspect-ratio: 605/302;}

.gameChoice .mNo img{ aspect-ratio: 1121/383;}
.gameChoice .pcNo img{ aspect-ratio: 1121/1020;}

.shareIconList img{ aspect-ratio: 1/1;}
.gameEndBtn img{ aspect-ratio: 750/275;}

.socialEventBox img{ aspect-ratio: 610/531;}
.socialEventBox .socialEventBtn img{ aspect-ratio: 610/105;}

.recommList img{ aspect-ratio: 750/1342;}
.recommMoreBtn img{ aspect-ratio: 983/260;}


/*--animate.css--------------------------------*/
.animate__animated.animate__delay-02s{-webkit-animation-delay:0.2s;animation-delay:0.2s;}
.animate__animated.animate__delay-03s{-webkit-animation-delay:0.3s;animation-delay:0.3s;}
.animate__animated.animate__delay-04s{-webkit-animation-delay:0.4s;animation-delay:0.4s;}
.animate__animated.animate__delay-05s{-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.animate__animated.animate__delay-06s{-webkit-animation-delay:0.6s;animation-delay:0.6s;}
.animate__animated.animate__delay-07s{-webkit-animation-delay:0.7s;animation-delay:0.7s;}
.animate__animated.animate__delay-08s{-webkit-animation-delay:0.8s;animation-delay:0.8s;}
.animate__animated.animate__delay-10s{-webkit-animation-delay:1.0s;animation-delay:1.0s;}
.animate__animated.animate__delay-12s{-webkit-animation-delay:1.2s;animation-delay:1.2s;}
.animate__animated.animate__delay-13s{-webkit-animation-delay:1.3s;animation-delay:1.3s;}
.animate__animated.animate__delay-14s{-webkit-animation-delay:1.4s;animation-delay:1.4s;}

.animate__animated.animate__delay-30s{-webkit-animation-delay:3.0s;animation-delay:3.0s;}