@charset "utf-8";

.starrail_entry{background: url(../images/check_bg.webp) top center; background-size: clamp(25px, 2.5vw, 80px); padding-bottom: 120px;}
.starrail_entry img{width: 100%;}
.starrail_entry .mo{display: none;}
.starrail_entry input{border: none; background: none;}
.starrail_entry .top_logo{width: 80%; max-width: 460px; margin:auto; padding: 30px 0;}
.starrail_entry .event_wrap{width: 92%; max-width: 900px; margin: auto; background: url(../images/entry_bg.webp) top center; background-size: 100% auto;}
.starrail_entry .code_con{position: relative;}
.starrail_entry .code_con .code_input{position: absolute; top:20%; left: 42.037%; width: 44.4444%; height: 20%; text-align: center; font-size: clamp(14px, 4vw, 24px);}
.starrail_entry .code_con .entry_btn{position: absolute; top: 55%; left: 31.4815%; width: 37.037%; height: 20%; font-size: 0;}
.starrail_entry .code_con .g-recaptcha{position: absolute;}
.starrail_entry .recaptcha_con{background:url(../images/entry_line.webp) repeat-y; background-size: 100% auto; padding-bottom:80px;}
.starrail_entry .recaptcha_con .g-recaptcha{width: 94%; max-width: 304px; margin: auto;}
.starrail_entry .recaptcha_con .g-recaptcha > div{width: 100% !important; height: auto !important;}
.starrail_entry .recaptcha_con .g-recaptcha iframe{width: 100% !important;}
.starrail_entry .winner_con{position: relative;}
.starrail_entry .info_input input{padding-left: 20px; font-size: 20px; box-sizing: border-box; font-size: clamp(13px, 3vw, 18px);}
.starrail_entry .info_input .code_input{position: absolute; top: 13.0113%; left: 39.2592%; width: 45.3703%; height: 3.4499%;}
.starrail_entry .info_input .name_input{position: absolute; top: 17.447%; left: 39.2592%; width: 45.3703%; height: 3.4499%;}
.starrail_entry .info_input .phone_input{position: absolute; display: flex; justify-content: space-between; top: 21.8827%; left: 39.2592%; width: 45.3703%; height: 3.4499%;}
.starrail_entry .info_input .phone_input input{width: 30.6122%; height: 100%; text-align: center;}
.starrail_entry .info_input .adrs_input{position: absolute; top: 26.3183%; left: 39.2592%; display: flex; flex-direction: column; justify-content: space-between; width: 45.3703%; height: 11.3356%;}
.starrail_entry .info_input .adrs_input .adrs_num{width: 100%; height: 30.4347%;}
.starrail_entry .info_input .adrs_input .adrs_num input{width: 65.3061%; height: 100%;}
.starrail_entry .info_input .adrs_input .adrs_num .find_btn{width: 30.6122%; height: 100%;}
.starrail_entry .info_input .adrs_input > input{width: 100%; height: 30.4347%;}
.starrail_entry .input_btn{position: absolute; top: 91.1286%; left: 31.4815%; width: 37.037%; height: 3.9428%;}
.starrail_entry .agreement_con{position: absolute; left: 23.6111%; width: 52.7777%; height: 12.8141%; box-sizing: border-box; padding-right: 30px; overflow-x: hidden; overflow-y: auto;}
.starrail_entry .agreement_con h3{font-size: clamp(13px, 3vw, 20px); font-weight: 800;}
.starrail_entry .agreement_con li{font-size: clamp(13px, 3vw, 18px); line-height: 1.4;}
.starrail_entry .agree_con01{top: 52.4889%;}
.starrail_entry .agree_con02{top: 71.2173%;}
.starrail_entry .collect_agree{position: absolute; top: 87.1858%; right: 20%; width: 31.2037%; height: 0.9857%; font-size:0;}
.starrail_entry .collect_agree input{width: 5.9347%; height: 100%; margin-right: 2.9673%; background-color: #fcf7f1; border: 2px solid #aca9a4; box-sizing: border-box;}
.starrail_entry .collect_agree label{display: inline-block; height: 100%;}
.starrail_entry .collect_agree .agree_txt{width: 27.2997%; margin-right: 10.9794%;}
.starrail_entry .collect_agree .disagree_txt{width: 43.9169%;}
.starrail_entry .popup_wrapper{position:fixed; top:0; left: 0; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; z-index: 1;}
.starrail_entry .popup_wrapper::before{content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 1;}
.starrail_entry .popup_wrapper .pop_con{position: absolute; transition: top 0.4s ease, left 0.4s ease; width: 660px; z-index: 2;}
.starrail_entry .popup_wrapper .pop_con a{position: absolute; top: 62.7272%; left: 31.8182%; width: 36.3636%; height: 18.1818%;}
.starrail_entry .popup_wrapper .try_popup a{}
.starrail_entry .popup_wrapper .done_popup a{top: 62.7272%;}
.starrail_event section{background: url(../images/check_bg.webp) top center; background-size: clamp(25px, 2.5vw, 80px); padding-bottom: 120px;}
.starrail_event img{width: 100%;}
.starrail_event .mo{display: none;}
.starrail_event .top_logo{width: 80%; max-width: 460px; margin:auto; padding: 30px 0;}
.starrail_con{position: relative; width: 92%; max-width: 900px; margin: auto;}
.starrail_con.main_con a{position: absolute; left: 25.9259%; width: 48.1481%; height: 8.374%;}
.starrail_con.main_con a.page_btn01{top: 39.4975%;}
.starrail_con.main_con a.page_btn02{top: 57.8506%; width: 23.1481%;}
.starrail_con.main_con a.page_btn03{top: 57.8506%; left: auto; right: 25.9259%; width: 23.1481%;}
.starrail_con.main_con a.page_btn04{top: 69.7138%;}
.starrail_con.collabo_con a.guide_btn{position: absolute; top: 31.3844%; left: 38.8889%; width: 22.2222%; height: 0.9853%;}
.starrail_event .back_btn{width: clamp(150px, 40%, 220px); margin: 60px auto 0;}
.starrail_event .starrail_pop{position: absolute; width: 100vw; z-index: 1;}
.starrail_event .starrail_pop::before{content: ''; position: fixed; display: block; width: 100vw; height: 100vh; background-color: #000; opacity: 0.7;}
.starrail_event .starrail_pop .starrail_pop_con{position: relative; top: 200px; width: 92%; max-width: 660px; padding: 50px 0 20px; margin: auto; background-color: #f8efe1; border-radius: 50px; z-index: 1;}
.starrail_event .starrail_pop .close_pop{position: absolute; top: -80px; right: 0; display: block; width: 50px; height: 50px; background:url(../images/pop_close_btn.webp) no-repeat center; background-size: 100% auto;}
.starrail_event .starrail_pop .guide_pop_con{max-width: 800px; padding: 30px 0 50px;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li{padding: 0 80px;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li dt{cursor: pointer; background: url(../images/collabo_set_pop_open_btn.webp) no-repeat center right; background-size: 25px;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li dd{display:none;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li.on dt{background: url(../images/collabo_set_pop_close_btn.webp) no-repeat center right; background-size: 25px;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li.on dd{display:block;}
.starrail_con.goods01_con a.goods_btn{position: absolute; top: 21.9673%; left: 60.7407%; width: 4.1666%; height: 1.4142%;}
.starrail_con.goods01_con a.apply_btn{position: absolute; top: 27.9384%; left: 38.8889%; width: 22.2222%; height: 1.8856%;}
.starrail_con.goods02_con a.goods_btn{position: absolute; top: 25.0447%; left: 63.0555%; width: 4.1666%; height: 1.6123%;}
.starrail_con.goods02_con a.apply_btn{position: absolute; top: 30.4192%; left: 38.8889%; width: 22.2222%; height: 2.1497%;}
.starrail_con.tum_event_con a.goods_btn{position: absolute; top: 18.6296%; left: 72.5%; width: 4.1666%; height: 1.1252%;}
.starrail_con.tum_event_con a.tum_event_btn{position: absolute; left: 38.8889%; width: 22.2222%; height: 1.5003%;}
.starrail_con.tum_event_con a.tum_event_btn.btn01{top: 60.9902%;}
.starrail_con.tum_event_con a.tum_event_btn.btn02{top: 76.8192%;}
.starrail_con.tum_event_con a.tum_event_btn.btn03{top: 89.9974%;}
.starrail_event .tum_event_pop .starrail_con{max-width: 560px;}

@media screen and (max-width:719px){
.starrail_entry{padding-bottom: 60px;}
.starrail_entry .mo{display: block;}
.starrail_entry .pc{display: none;}
.starrail_entry .top_logo{padding: 20px 0;}
.starrail_entry .code_con .code_input{top: 31.4159%; left: 12.5%; width: 75%; height: 17.6991%;}
.starrail_entry .code_con .entry_btn{top: 62.3893%; left: 22.2222%; width: 55.5555%; height: 19.9115%;}
.starrail_entry .recaptcha_con{background: url(../images/entry_line_mo.webp) repeat-y; background-size: 100% auto; padding-bottom: 50px;}
.starrail_entry .info_input input{padding-left: 3vw;}
.starrail_entry .info_input .code_input{top: 14.14%; left: 12.5%; width: 75%; height: 3.1028%;}
.starrail_entry .info_input .name_input{top: 21.1436%; left: 12.5%; width: 75%; height: 3.1028%;}
.starrail_entry .info_input .phone_input{top: 28.1914%; left: 12.5%; width: 75%; height: 3.1028%;}
.starrail_entry .info_input .phone_input input{width: 29.6296%;}
.starrail_entry .info_input .adrs_input{top: 35.195%; left: 12.5%; width: 75%; height: 10.195%;}
.starrail_entry .agreement_con{left: 5.5556%; width: 88.8888%; height: 15.07%; padding: 2vh 5vw;}
.starrail_entry .agree_con01{top: 56.8262%;}
.starrail_entry .agree_con02{top: 73.6702%;}
.starrail_entry .collect_agree{top: 89.5833%; right: 5.5555%; width: 63.8888%; height: 1.1081%;}
.starrail_entry .collect_agree input{width: 5.4347%; margin-right: 0;}
.starrail_entry .collect_agree .agree_txt{width: 29.1304%; margin-right: 13.6956%;}
.starrail_entry .collect_agree .disagree_txt{width: 46.3046%;}
.starrail_entry .input_btn{top: 92.4645%; left: 22.2222%; width: 55.5555%; height: 3.9893%;}
.starrail_entry .popup_wrapper .pop_con{width: 90%;}
.starrail_event section{padding-bottom: 60px;}
.starrail_event .mo{display: block;}
.starrail_event .pc{display: none;}
.starrail_con.main_con a{left: 13.8889%; width: 72.2222%; height: 9.3095%;}
.starrail_con.main_con a.page_btn01{top: 33.3591%;}
.starrail_con.main_con a.page_btn02{top: 53.7626%; width: 34.7222%;}
.starrail_con.main_con a.page_btn03{top: 53.7626%; right: 13.8889%; width: 34.7222%;}
.starrail_con.main_con a.page_btn04{top: 66.9511%;}
.starrail_con.collabo_con a.guide_btn{top: 22.2746%; left: 33.3333%; width: 33.3333%; height: 0.6153%;}
.starrail_event .back_btn{margin: 40px auto 0;}
.starrail_event .starrail_pop .starrail_pop_con{padding:30px 0 15px; border-radius: 30px;}
.starrail_event .starrail_pop .close_pop{top: -50px; width: 30px; height: 30px;}
.starrail_event .starrail_pop .guide_pop_con{padding: 20px 0 35px;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li{padding: 0 8%;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li dt{background-size: 5vw auto;}
.starrail_event .starrail_pop .starrail_pop_con .guide_li.on dt{background-size: 5vw auto;}
.starrail_con.goods01_con a.goods_btn{top: 15.7441%; left: 66.1111%; width: 6.25%; height: 1.1749%;}
.starrail_con.goods01_con a.apply_btn{top: 20.7571%; left: 33.3333%; width: 33.3333%; height: 1.5665%;}
.starrail_con.goods02_con a.goods_btn{top: 15.5773%; left: 68.8888%; width: 6.25%; height: 1.162%;}
.starrail_con.goods02_con a.apply_btn{top: 19.4523%; left: 33.3333%; width: 33.3333%; height: 1.5499%;}
.starrail_con.tum_event_con a.tum_event_btn{left: 33.3333%; width: 33.3333%; height: 1.4081%;}
.starrail_con.tum_event_con a.tum_event_btn.btn01{top: 57.7798%;}
.starrail_con.tum_event_con a.tum_event_btn.btn02{top: 76.719%;}
.starrail_con.tum_event_con a.tum_event_btn.btn03{top: 90.4247%;}
.starrail_con.tum_event_con a.goods_btn{position: absolute; top: 18.125%; left: 83.6111%; width: 6.25%; height: 1.125%;}
}