@charset "UTF-8";

@import url("https://love.seoul.go.kr/css/common.css");

/* font */
@font-face {
    font-family: 'CookieRun';
    src: url('/fonts/CookieRun-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'CookieRun';
    src: url('/fonts/CookieRunOTF-Bold00.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'CookieRun';
    src: url('/fonts/CookieRunOTF-Black00.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url("/fonts/PretendardVariable.woff2") format('woff2'),
		url("/fonts/PretendardVariable.woff2") format('woff2-variations');
}

/* common */
.font_cookie{
    font-family: 'CookieRun';
}
body *{
    font-family: 'Pretendard';
    font-weight: 400;
}
.hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.inner{
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1000px;
    width: 100%;
    box-sizing: border-box;
    z-index: 3;
}
.notScroll { 
    overflow: hidden !important; 
    touch-action:none; 
}

/* �듬컮 */
.layer_popup_wrap{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    z-index: 998;
}
.layer_popup_wrap .popup_inner{
    position: absolute;
    left: 50%;
    top: calc( 50% + 30px );
    transform: translate(-50%,-50%);
    padding: 40px 0 40px 40px;
    max-width: 554px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 999;
}
.layer_popup_wrap .popup_inner .btn_close{
    position: absolute;
    right: 0;
    top: -70px;
    width: 60px;
    height: 60px;
    background: #fff url("/images/evt/25end/ico_btn_close.png") no-repeat center/14px;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
}
.layer_popup_wrap .popup_inner .popup_contents{
    position: relative;
    padding-right: 20px;
}
.layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner{
    overflow-y: auto;
    padding-right: 20px;
    height: 680px;
}
.layer_popup_wrap .form_tit{
    padding: 0 0 20px;
}
.layer_popup_wrap .form_tit h3{
    padding: 0 0 10px;
    font-weight: 700;
    font-size: 30px;
    color: #000;
}
.layer_popup_wrap .form_tit p{
    padding-right: 40px;
    line-height: 1.4;
    font-weight: 400;
    font-size: 15px;
    color: #878b9d;
    word-break: keep-all;
}
.layer_popup_wrap .form_table input[type="checkbox"]{
    display: inline-block;
    width: 17px;
    height: 17px;
    background:url("/images/evt/25end/ico_chk.png") no-repeat center/cover;
    cursor: pointer;
}
.layer_popup_wrap .form_table input[type="checkbox"]:checked{
    background:url("/images/evt/25end/ico_chk_on.png") no-repeat center/cover;
}
.layer_popup_wrap .form_table input[type="checkbox"] + label{
    cursor: pointer;
}
.layer_popup_wrap .form_table input.basic{
    padding:10px 20px;
    width: 100%;
    height: 50px;
    font-size: 18px;
    background:#fff;
    border:1px solid #868f96;
    border-radius: 5px;
    box-sizing: border-box;
}
.layer_popup_wrap .form_table input.basic::placeholder{
    color:#cccfd2;
}
.layer_popup_wrap .form_table input.basic.disabled{
    border: none;
    color:#495058;
    background:#e8ecef;
}
.layer_popup_wrap .form_table .addr_box > p{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.layer_popup_wrap .form_table input.postcode{
    width: calc( 100% - 122px);
}
.layer_popup_wrap .form_table input.address{
    margin-top: 8px;
    max-width: 100%;
}
.layer_popup_wrap .form_table .btn_address{
    margin-left: 10px;
    width: 108px;
    height: 50px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: #495058;
    border-radius: 6px;
    box-sizing: border-box;
}
.layer_popup_wrap .form_table input + label{
    padding-left: 10px;
}
.layer_popup_wrap .form_table dl + dl{
    padding: 18px 0 0;
}
.layer_popup_wrap .form_table dl dt{
    padding: 0 0 8px;
    font-weight: 700;
    font-size: 18px;
    color: #000;
}
.layer_popup_wrap .form_table dl dt em{
    vertical-align: top;
    font-weight: 500;
}
.layer_popup_wrap .form_table .must_box{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 34px 0 18px;
    padding: 20px;
    background-color: #fff2f2;
    border-radius: 6px;
    box-sizing: border-box;
}
.layer_popup_wrap .form_table .must_box strong{
    display: inline-block;
    padding: 5px 0;
    width: 62px;
    line-height: 1;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    color: #df3939;
    border: 1px solid #df3939;
    border-radius: 30px;
    box-sizing: border-box;
}
.layer_popup_wrap .form_table .must_box p{
    width: calc( 100% - 82px);
    line-height: 1.5;
    font-weight: 500;
    font-size:16px;
    word-break: keep-all;
}
.layer_popup_wrap .form_table .personal_box{
    padding: 30px 0 0;
}
.layer_popup_wrap .form_table .personal_box .tit{
    padding: 0 0 10px;
    font-weight: 700;
    font-size: 18px;
    color: #000;
    word-break: keep-all;
}
.layer_popup_wrap .form_table .personal_box .txt{
    border: 1px solid #e8ecef;
    border-radius: 6px;
    box-sizing: border-box;
}
.layer_popup_wrap .form_table .personal_box .txt .txt_inner{
    padding: 18px 20px;
    border-bottom: 1px solid #e8ecef;
    box-sizing: border-box;
}
.layer_popup_wrap .form_table .personal_box .txt .txt_inner .tit{
    padding: 0 0 6px;
    font-weight: 700;
    font-size: 14px;
}
.layer_popup_wrap .form_table .personal_box .txt .txt_inner ul li{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1.3;
    font-weight: 400;
    font-size: 14px;
    color: #495058;
    word-break: keep-all;
}
.layer_popup_wrap .form_table .personal_box .txt .txt_inner ul li + li{
    padding: 2px 0 0;
}
.layer_popup_wrap .form_table .personal_box .txt .txt_inner ul li em{
    display: inline-block;
    width: 16px;
}
.layer_popup_wrap .form_table .personal_box .txt .txt_inner ul li p{
    width: calc( 100% - 16px);
    letter-spacing: -0.4px;
    font-weight: 400;
}
.layer_popup_wrap .form_table .personal_box .txt .chk_line{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 20px;
    box-sizing: border-box;
}
.layer_popup_wrap .form_table .personal_box .txt .chk_line label{
    display: inline-block;
    width: auto;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    word-break: keep-all;
    cursor: pointer;
}
.layer_popup_wrap .form_table .personal_box .txt .chck_line input{
    margin: 0px 0 0 7px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    border-radius: 2px;
}
.layer_popup_wrap .form_table .btn_box{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding:20px 0 0;
}
.layer_popup_wrap .form_table .btn_box .btn{
    width:135px;
    height: 50px;
    font-size: 18px;
    background-color:#000e2a;
    border: 1px solid #000e2a;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
}
.layer_popup_wrap .form_table .btn_box .btn.btn_confirm{
    margin-left: 10px;
    color:#fff;
}
.layer_popup_wrap .form_table .btn_box .btn.btn_cancel{
    width: 96px;
    color: #6a6b80;
    background:#fff;
}



/* �듬컮 */
.scroll_box { 
    display: none; 
    position: fixed; 
    right: 20px; 
    bottom: 80px;
    z-index: 60;
}
.scroll_box .btn_box {
    margin-top: -5px;
    width: 35px; 
    height: auto;
}
.sns_share { 
    width:auto; 
    text-align: center;
    z-index:995;
    overflow:visible; 
}
.sns_share h3 {
    display: none;
}
.sns_share.on {
    display: block;
}
.sns_share ul { 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 80px; 
    padding: 10px 0;
}
.sns_share li { 
    margin: 0 auto 5px;  
    border: none; 
    background: #fff; 
    border-radius: 50%; 
}
#toggle_share {
    position: relative; 
    width: 60px; 
    height: 60px; 
    text-align: center;
    line-height: 1; 
    background: #f2f3f5; 
    border: 2px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    }
#toggle_share span {
    display: block; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 50%; 
    font-size: 24px; 
    font-weight: 500;
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
    }
#toggle_share span:before { 
    content: '';
    display: block; 
    width: 44px; 
    height: 47px; 
    margin: 0 auto 5px; 
    background: url("https://love.seoul.go.kr/images/icon_share_off.png"); 
}
#toggle_share.on, #toggle_like.on { 
    color:#fff; 
    background:#000; 
}
#toggle_share.on span:before { 
    background-image: url("https://love.seoul.go.kr/images/icon_share.png");  
}
#toggle_share span, #toggle_like span { 
    font-size: 0; 
    line-height: 0; 
    text-indent: -5000px; 
    text-align: left; 
}
#toggle_share span:before, #toggle_like span:before { 
    width: 100%; 
    height: 50px;
    margin: 0; 
    background-size: 20px auto; 
    background-repeat: no-repeat; 
    background-position: center;
}
.sns_share li:first-child { 
    border-top: none; 
}
.sns_share li a { 
    display: block; 
    height: 60px; 
    background: center no-repeat; 
    background-size: 100%; 
    text-indent: -5000px; 
    overflow: hidden; 
    text-align: left; 
    border: 2px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
}
.sns_share .share_l { 
    background-image: url("https://love.seoul.go.kr/images/share_l.png"); 
}
.sns_share .share_k { 
    background-image:url("https://love.seoul.go.kr/images/share_k.png"); 
}
.sns_share .share_ks { 
    background-image:url("https://love.seoul.go.kr/images/share_ks.png"); 
}
.sns_share .share_f { 
    background-image:url("https://love.seoul.go.kr/images/share_f.png"); 
}
.sns_share .share_t { 
    background-image:url("https://love.seoul.go.kr/images/share_t.png"); 
}


/* header */
#header{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    transition:all 0.3s;
}
#header .inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 50px 20px;
    max-width: 1920px;
    width: 100%;
    box-sizing: border-box;
}
#header .inner a{
    display: inline-block;
}
#header .inner .left_logo{
    width: 140px;
    height: 37px;
    background:url("/images/evt/25end/ico_logo_left.png") no-repeat center/cover;
}
#header .inner .right_logo{
    width: 177px;
    height: 31px;
    background:url("/images/evt/25end/ico_logo_right.png") no-repeat center/cover;
}
.btn-top{
    bottom: 25px;
}


/* footer */
footer .inner{
    padding: 0;
    max-width: initial;
}


/* contents */
/* visual_section */
.visual_section{
    position: relative;
    background: url("/images/evt/25end/st01_bg.png") no-repeat bottom center/cover;
}
.visual_section .center_box{
    position: relative;
    padding: 10% 0 5.5%;
    text-align: center;
    z-index: 99;
}
.visual_section .sub_tit_box{
    display: inline-block;
    position: relative;
    padding: 0 0 3.5%;
}
.visual_section .sub_tit_box img.ic_snow{
    position: absolute;
    top: 28%;
}
.visual_section .sub_tit_box img.ic_snow.lt{
    left: -60%;
    animation: rotate_lt 3.2s ease-in-out infinite;
}
.visual_section .sub_tit_box img.ic_snow.rt{
    right: -60%;
    animation: rotate_rt 3.4s ease-in-out infinite;
}
@keyframes rotate_lt{
    0%{
        transform: rotate(0);
    }
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes rotate_rt{
    0%{
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
.visual_section .main_tit_box{
    position: relative;
}
.visual_section .main_tit_box .last{
    margin: -3% -6% 0 0;
}
.visual_section .main_tit_box .txt01{
    animation: opacity 1s ease-in-out infinite alternate;
}
@keyframes opacity {
	0% {
        opacity: 1;
    }
	100% {
        opacity: 0.8;
    }
}
.visual_section .main_tit_box .txt02{
    margin: 5% 0 0 -3%;
}
.visual_section .main_tit_box .txt03 {
    margin: -4% -2% 0px 0;
}
.visual_section .main_tit_box .txt04 {
    animation: opacity 0.7s 0.3s ease-in-out infinite alternate;
}
.visual_section .main_tit_box .txt04_box{
    display: inline-block;
    position: relative;
}
.visual_section .main_tit_box .txt04_box .txt04_deco{
    position: absolute;
    right: -10px;
    top: 35px;
    animation: rotate_tag 1.4s ease-in-out infinite alternate;
}
@keyframes rotate_tag{
    0%{
        transform: rotate(-2deg);
    }
    100% {
        transform:rotate(2deg);
    }
}
.visual_section .refer_box{
    padding:3% 0 15%;
    line-height: 1.7;
    font-size: 25px;
    color: #000e2a;
}
.visual_section .info_list{
    margin: 0 auto;
    max-width: 780px;
    width: 100%;
}
.visual_section .info_list .line{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}
.visual_section .info_list .line p{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 18px;
    color: #000e2a;
}
.visual_section .info_list .line p + p{
    padding: 10px 0 0;
}
.visual_section .info_list strong{
    position: relative;
    display: inline-block;
    padding-left: 25px;
    width: 160px;
    text-align: left;
    font-weight: 700;
    font-size: 20px;
    box-sizing: border-box;
}
.visual_section .info_list strong::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 18px;
    height: 17px;
    background: url("/images/evt/25end/st01_ico_txt_before.png") no-repeat center/cover;
}
.visual_section .info_list span{
    display: inline-block;
    margin-top: 3px;
    width: calc( 100% - 160px );
    text-align: left;
    font-size: 18px;
    word-break: keep-all;
}
.visual_section .info_list span br{
    display: none;
}
.deco_snow{
    position: absolute;
    z-index: 1;
}
.deco_snow.lt{
    left: 5%;
    top: 22%;
    animation: sparkle 1.2s linear infinite alternate;
}
.deco_snow.rt{
    right: 13%;
    top: 35%;
    animation: sparkle 1.1s 0.6s linear infinite alternate;
}
@keyframes sparkle {
	0% {
        opacity: 1;
    }
	100% {
        opacity: 0.4;
    }
}
.snows {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 86%;
    filter: drop-shadow(0 0 10px white);
    
}
.snow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
}
.snow:nth-child(1) {
    opacity: 0.8939;
    transform: translate(41.6832vw, -10px) scale(0.4131);
    animation: fall-1 27s -29s linear infinite;
}
@keyframes fall-1 {
    56.93% {
        transform: translate(48.6131vw, 56.93vh) scale(0.4131);
    }
    to {
        transform: translate(45.14815vw, 100vh) scale(0.4131);
    }
}
.snow:nth-child(2) {
    opacity: 0.7074;
    transform: translate(46.4254vw, -10px) scale(0.3317);
    animation: fall-2 21s -12s linear infinite;
}
@keyframes fall-2 {
    68.502% {
        transform: translate(45.9618vw, 68.502vh) scale(0.3317);
    }
    to {
        transform: translate(46.1936vw, 100vh) scale(0.3317);
    }
}
.snow:nth-child(3) {
    opacity: 0.6493;
    transform: translate(80.2888vw, -10px) scale(0.4487);
    animation: fall-3 24s -5s linear infinite;
}
@keyframes fall-3 {
    53.242% {
        transform: translate(83.296vw, 53.242vh) scale(0.4487);
    }
    to {
        transform: translate(81.7924vw, 100vh) scale(0.4487);
    }
}
.snow:nth-child(4) {
    opacity: 0.777;
    transform: translate(38.3581vw, -10px) scale(0.8338);
    animation: fall-4 16s -20s linear infinite;
}
@keyframes fall-4 {
    55.732% {
        transform: translate(33.9374vw, 55.732vh) scale(0.8338);
    }
    to {
        transform: translate(36.14775vw, 100vh) scale(0.8338);
    }
}
.snow:nth-child(5) {
    opacity: 0.9493;
    transform: translate(23.9548vw, -10px) scale(0.6379);
    animation: fall-5 21s -26s linear infinite;
}
@keyframes fall-5 {
    39.854% {
        transform: translate(27.2943vw, 39.854vh) scale(0.6379);
    }
    to {
        transform: translate(25.62455vw, 100vh) scale(0.6379);
    }
}
.snow:nth-child(6) {
    opacity: 0.4705;
    transform: translate(45.1283vw, -10px) scale(0.0368);
    animation: fall-6 14s -15s linear infinite;
}
@keyframes fall-6 {
    47.943% {
        transform: translate(51.9938vw, 47.943vh) scale(0.0368);
    }
    to {
        transform: translate(48.56105vw, 100vh) scale(0.0368);
    }
}
.snow:nth-child(7) {
    opacity: 0.8538;
    transform: translate(78.2277vw, -10px) scale(0.7737);
    animation: fall-7 23s -30s linear infinite;
}
@keyframes fall-7 {
    70.174% {
        transform: translate(83.7706vw, 70.174vh) scale(0.7737);
    }
    to {
        transform: translate(80.99915vw, 100vh) scale(0.7737);
    }
}
.snow:nth-child(8) {
    opacity: 0.7824;
    transform: translate(80.8888vw, -10px) scale(0.1848);
    animation: fall-8 12s -27s linear infinite;
}
@keyframes fall-8 {
    52.451% {
        transform: translate(85.0184vw, 52.451vh) scale(0.1848);
    }
    to {
        transform: translate(82.9536vw, 100vh) scale(0.1848);
    }
}
.snow:nth-child(9) {
    opacity: 0.8953;
    transform: translate(59.6979vw, -10px) scale(0.3575);
    animation: fall-9 12s -27s linear infinite;
}
@keyframes fall-9 {
    51.56% {
        transform: translate(62.3848vw, 51.56vh) scale(0.3575);
    }
    to {
        transform: translate(61.04135vw, 100vh) scale(0.3575);
    }
}
.snow:nth-child(10) {
    opacity: 0.845;
    transform: translate(68.2828vw, -10px) scale(0.7361);
    animation: fall-10 14s -5s linear infinite;
}
@keyframes fall-10 {
    61.324% {
        transform: translate(72.0905vw, 61.324vh) scale(0.7361);
    }
    to {
        transform: translate(70.18665vw, 100vh) scale(0.7361);
    }
}
.snow:nth-child(11) {
    opacity: 0.0596;
    transform: translate(57.1473vw, -10px) scale(0.5169);
    animation: fall-11 21s -7s linear infinite;
}
@keyframes fall-11 {
    49.872% {
        transform: translate(47.5521vw, 49.872vh) scale(0.5169);
    }
    to {
        transform: translate(52.3497vw, 100vh) scale(0.5169);
    }
}
.snow:nth-child(12) {
    opacity: 0.3752;
    transform: translate(36.9428vw, -10px) scale(0.6911);
    animation: fall-12 24s -25s linear infinite;
}
@keyframes fall-12 {
    57.207% {
        transform: translate(27.8465vw, 57.207vh) scale(0.6911);
    }
    to {
        transform: translate(32.39465vw, 100vh) scale(0.6911);
    }
}
.snow:nth-child(13) {
    opacity: 0.3257;
    transform: translate(79.141vw, -10px) scale(0.5333);
    animation: fall-13 23s -16s linear infinite;
}
@keyframes fall-13 {
    58.36% {
        transform: translate(76.8368vw, 58.36vh) scale(0.5333);
    }
    to {
        transform: translate(77.9889vw, 100vh) scale(0.5333);
    }
}
.snow:nth-child(14) {
    opacity: 0.9821;
    transform: translate(4.6988vw, -10px) scale(0.897);
    animation: fall-14 17s -20s linear infinite;
}
@keyframes fall-14 {
    33.389% {
        transform: translate(3.6161vw, 33.389vh) scale(0.897);
    }
    to {
        transform: translate(4.15745vw, 100vh) scale(0.897);
    }
}
.snow:nth-child(15) {
    opacity: 0.2641;
    transform: translate(9.5103vw, -10px) scale(0.2272);
    animation: fall-15 16s -16s linear infinite;
}
@keyframes fall-15 {
    31.26% {
        transform: translate(9.6668vw, 31.26vh) scale(0.2272);
    }
    to {
        transform: translate(9.58855vw, 100vh) scale(0.2272);
    }
}
.snow:nth-child(16) {
    opacity: 0.7504;
    transform: translate(29.1028vw, -10px) scale(0.3206);
    animation: fall-16 24s -8s linear infinite;
}
@keyframes fall-16 {
    44.587% {
        transform: translate(22.921vw, 44.587vh) scale(0.3206);
    }
    to {
        transform: translate(26.0119vw, 100vh) scale(0.3206);
    }
}
.snow:nth-child(17) {
    opacity: 0.4845;
    transform: translate(20.372vw, -10px) scale(0.8819);
    animation: fall-17 30s -8s linear infinite;
}
@keyframes fall-17 {
    44.93% {
        transform: translate(28.4396vw, 44.93vh) scale(0.8819);
    }
    to {
        transform: translate(24.4058vw, 100vh) scale(0.8819);
    }
}
.snow:nth-child(18) {
    opacity: 0.1923;
    transform: translate(42.6317vw, -10px) scale(0.4973);
    animation: fall-18 27s -29s linear infinite;
}
@keyframes fall-18 {
    50.183% {
        transform: translate(34.2543vw, 50.183vh) scale(0.4973);
    }
    to {
        transform: translate(38.443vw, 100vh) scale(0.4973);
    }
}
.snow:nth-child(19) {
    opacity: 0.3819;
    transform: translate(35.8687vw, -10px) scale(0.9295);
    animation: fall-19 22s -1s linear infinite;
}
@keyframes fall-19 {
    42.899% {
        transform: translate(41.1867vw, 42.899vh) scale(0.9295);
    }
    to {
        transform: translate(38.5277vw, 100vh) scale(0.9295);
    }
}
.snow:nth-child(20) {
    opacity: 0.8696;
    transform: translate(2.4149vw, -10px) scale(0.7463);
    animation: fall-20 15s -24s linear infinite;
}
@keyframes fall-20 {
    38.291% {
        transform: translate(-4.4604vw, 38.291vh) scale(0.7463);
    }
    to {
        transform: translate(-1.02275vw, 100vh) scale(0.7463);
    }
}
.snow:nth-child(21) {
    opacity: 0.7185;
    transform: translate(58.5553vw, -10px) scale(0.9858);
    animation: fall-21 13s -11s linear infinite;
}
@keyframes fall-21 {
    48.226% {
        transform: translate(49.5529vw, 48.226vh) scale(0.9858);
    }
    to {
        transform: translate(54.0541vw, 100vh) scale(0.9858);
    }
}
.snow:nth-child(22) {
    opacity: 0.8941;
    transform: translate(50.2811vw, -10px) scale(0.5195);
    animation: fall-22 28s -8s linear infinite;
}
@keyframes fall-22 {
    67.768% {
        transform: translate(41.3104vw, 67.768vh) scale(0.5195);
    }
    to {
        transform: translate(45.79575vw, 100vh) scale(0.5195);
    }
}
.snow:nth-child(23) {
    opacity: 0.2374;
    transform: translate(54.936vw, -10px) scale(0.4266);
    animation: fall-23 29s -12s linear infinite;
}
@keyframes fall-23 {
    68.757% {
        transform: translate(51.9338vw, 68.757vh) scale(0.4266);
    }
    to {
        transform: translate(53.4349vw, 100vh) scale(0.4266);
    }
}
.snow:nth-child(24) {
    opacity: 0.439;
    transform: translate(75.2143vw, -10px) scale(0.7608);
    animation: fall-24 12s -13s linear infinite;
}
@keyframes fall-24 {
    51.145% {
        transform: translate(77.6825vw, 51.145vh) scale(0.7608);
    }
    to {
        transform: translate(76.4484vw, 100vh) scale(0.7608);
    }
}
.snow:nth-child(25) {
    opacity: 0.8811;
    transform: translate(96.8413vw, -10px) scale(0.7733);
    animation: fall-25 24s -13s linear infinite;
}
@keyframes fall-25 {
    41.598% {
        transform: translate(96.773vw, 41.598vh) scale(0.7733);
    }
    to {
        transform: translate(96.80715vw, 100vh) scale(0.7733);
    }
}
.snow:nth-child(26) {
    opacity: 0.2871;
    transform: translate(76.5558vw, -10px) scale(0.9881);
    animation: fall-26 20s -29s linear infinite;
}
@keyframes fall-26 {
    41.625% {
        transform: translate(72.4603vw, 41.625vh) scale(0.9881);
    }
    to {
        transform: translate(74.50805vw, 100vh) scale(0.9881);
    }
}
.snow:nth-child(27) {
    opacity: 0.5113;
    transform: translate(13.6396vw, -10px) scale(0.1823);
    animation: fall-27 30s -21s linear infinite;
}
@keyframes fall-27 {
    68.763% {
        transform: translate(12.8746vw, 68.763vh) scale(0.4823);
    }
    to {
        transform: translate(13.2571vw, 100vh) scale(0.1823);
    }
}
.snow:nth-child(28) {
    opacity: 0.7102;
    transform: translate(67.0573vw, -10px) scale(0.8077);
    animation: fall-28 20s -17s linear infinite;
}
@keyframes fall-28 {
    46.489% {
        transform: translate(71.657vw, 46.489vh) scale(0.8077);
    }
    to {
        transform: translate(69.35715vw, 100vh) scale(0.8077);
    }
}
.snow:nth-child(29) {
    opacity: 0.5403;
    transform: translate(11.5694vw, -10px) scale(0.6326);
    animation: fall-29 16s -27s linear infinite;
}
@keyframes fall-29 {
    32.494% {
        transform: translate(9.0564vw, 32.494vh) scale(0.6326);
    }
    to {
        transform: translate(10.3129vw, 100vh) scale(0.6326);
    }
}
.snow:nth-child(30) {
    opacity: 0.1501;
    transform: translate(50.0107vw, -10px) scale(0.9929);
    animation: fall-30 25s -19s linear infinite;
}
@keyframes fall-30 {
    60.444% {
        transform: translate(40.6444vw, 60.444vh) scale(0.7029);
    }
    to {
        transform: translate(45.32755vw, 100vh) scale(0.7029);
    }
}




section .inner{
    text-align: center;
}

section .label_box{
    display: flex;
    align-items: center;
    justify-content: center;
}

section .label_box strong{
    display: inline-block;
    width: 98px;
    padding: 6px 0;
    text-align: center;
    font-size: 18px;
    color: #2a6ced;
    border: 2px solid #2a6ced;
    border-radius: 40px;
    box-sizing: border-box;
}
section .label_box strong.pink{
    color: #ff229a;
    border: 2px solid #ff229a;
}
section .label_box span{
    margin-left: 12px;
    font-weight: 400;
    font-size: 26px;
    color: #000e2a;
}
section h2{
    padding: 15px 0 30px;
    font-weight: 700;
    font-size: 40px;
    color: #2b5ef2;
}
section h2.pink{
    color: #ff229a;
}
section .summary_box{
    line-height: 1.4;
    font-weight: 400;
    font-size: 24px;
    color: #000e2a;
    word-break: keep-all;
}
section .summary_box strong{
    vertical-align: top;
    font-weight: 700;
}
section .summary_box .refer{
    display: block;
    padding: 14px 0 0;
    font-weight: 400;
    font-size: 16px;
    color: #6a6b80;
    word-break: keep-all;
}
section .st_cont_box{
    display: flex;
    align-items: center;
    justify-content: center;
}
section .btn{
    max-width: 360px;
    width: 100%;
    height: 60px;
    font-size: 20px;
    border-radius: 40px;
    color: #fff;
    background-color: #000;
}

section .btn.involve span{
    position: relative;
    padding-right: 22px;
}
section .btn.involve span::after{
    content: ">";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
section .btn.complete{
    background-color: #6a6b80;
}
section .btn.close{
    color: #878b9d;
    background-color: #fff7fb;
}



/* tetrastich_section */
.tetrastich_section{
    padding: 80px 0;
    background: url("/images/evt/25end/st02_bg.png") no-repeat top center/cover;
}
.tetrastich_section .st_cont_box{
    flex-direction: column;
    padding: 30px 0;
}
.tetrastich_section .st_cont_box .txt_box{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 50px;
}
.tetrastich_section .st_cont_box .txt_box img{
    margin: 0 4px;
}
.tetrastich_section .comment_box_outer{
    text-align: left;
}
.tetrastich_section .comment_box_outer .comment_box{
    margin: 0 0 20px;
}
.tetrastich_section .comment_box_outer .comment_box .refer{
    padding: 0 0 8px;
    font-size: 16px;
    color:#6a6b80;
}
.tetrastich_section .comment_box_outer .comment_box .txt_box{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    z-index: 1;
}
.tetrastich_section .comment_box_outer .comment_box .txt_box textarea{
    resize: none;
    padding:20px;
    width: calc(100% - 138px);
    height: 120px;
    font-weight: 400;
    font-size: 18px;
    color:#333;
    border:1px solid #a0a0a0;
    border-radius: 10px;
    box-sizing: border-box;
}
.tetrastich_section .comment_box_outer .comment_box .txt_box textarea::placeholder{
    color:#b4b4b4;
}
.tetrastich_section .comment_box_outer .comment_box .txt_box .btn_write{
    width: 132px;
    height: 120px;
    letter-spacing: -0.5px;
    font-size: 18px;
    color:#fff;
    background:#313131;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;
} 
.tetrastich_section .comment_box_outer .list_box{
    text-align: center;
}
.tetrastich_section .comment_box_outer .list_box .btn_comment{
    display: inline-block;
    padding: 12px 20px;
    width: 100%;
    max-width: 280px;
    text-align: left;
    border: 1px solid #000e2a;
    border-radius: 30px;
    box-sizing: border-box;
    cursor: pointer;
}
.tetrastich_section .comment_box_outer .list_box .btn_comment em{
    position: relative;
    font-style: normal;
    display: block;
}
.tetrastich_section .comment_box_outer .list_box .btn_comment em::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 15px;
    height: 10px;
    background:url("/images/evt/25end/ico_comment_arw.png") no-repeat center/cover;
    transition: all 0.3s;
}
.tetrastich_section .comment_box_outer .list_box .btn_comment.on em::after{
    transform: translateY(-50%) rotate(0);
}
.tetrastich_section .comment_box_outer .list_box .btn_comment.on::after{
    transform: translateX(-75%) rotate(-180deg);
}
.tetrastich_section .comment_box_outer .list_box .list{
    display: none;
    margin: 10px 0 0;
    padding: 20px 40px;
    text-align: left;
    background:#fff;
    border-radius: 10px;
    box-sizing: border-box;
}
.tetrastich_section .comment_box_outer .list_box .list ul{
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding:28px 0;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li.no_comment{
    padding: 100px 0;
    justify-content: center;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li + li{
    border-top: 1px solid #d2d2d2;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li strong{
    display: inline-block;
    width: 100px;
    font-weight: 700;
    color: #000e2a;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width:calc(100% - 100px);
    box-sizing: border-box;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box .txt{
    width: calc( 100% - 110px);
    min-height: 44px;
    line-height: 1.2;
    color: #000e2a;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box .txt pre{
    line-height: 1.4;
    white-space: pre-wrap;
}
.tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box .date{
    width: 110px;
    text-align: right;
    font-size: 14px;
    color: #a0a0a0;
}
.tetrastich_section .comment_box_outer .list_box .page_box{
    display: flex;
    align-self: center;
    justify-content: center;
    padding:10px 0 20px;
}
.tetrastich_section .comment_box_outer .list_box .page_box a{
    display: inline-block;
    position:relative;
    margin:0 4px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
}
.tetrastich_section .comment_box_outer .list_box .page_box a.on{
    font-weight: 700;
    background:#eee;
}
.tetrastich_section .deco{
    position: absolute;
    z-index: 0;
}
.tetrastich_section .deco.left{
    top: 10%;
    left: 5%;
    animation: tet_bubble_motion1 1.8s ease-in-out infinite alternate;
}
.tetrastich_section .deco.right {
    top: 50%;
    right: -14%;
    animation: tet_bubble_motion2 1.8s ease-in-out infinite alternate;
}
@keyframes tet_bubble_motion1 {
    0%{
        top: 10%;
    }
    100% {
        top: 12%;
    }
}
@keyframes tet_bubble_motion2 {
    0%{
        top: 50%;
    }
    100% {
        top: 48%;
    }
}

/* quiz_section */
.quiz_section{
    padding: 80px 0;
    background: url("/images/evt/25end/st03_bg.png") no-repeat top center/cover;
}
.quiz_section .st_cont_box{
    flex-direction: column;
    padding: 40px 0;
}
.quiz_section .st_cont_box img:first-child{
    padding: 0 0 40px;
}
.quiz_section .deco{
    position: absolute;
    z-index: 0;
}
.quiz_section .deco.left{
    top: 15%;
    left: 16%;
    animation: qz_bubble_motion1 1.6s ease-in-out infinite alternate;
}
.quiz_section .deco.right {
    top: 40%;
    right: 22%;
    animation: qz_bubble_motion2 1.6s 0.3s ease-in-out infinite alternate;
}
@keyframes qz_bubble_motion1 {
    0%{
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(3deg);
    }
}
@keyframes qz_bubble_motion2 {
    0%{
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(-3deg);
    }
}


/* photo_section */
.photo_section{
    padding: 80px 0;
    background: url("/images/evt/25end/st04_bg.png") no-repeat top center/cover;
}
.photo_section .inner{
    max-width: 1450px;
}
.photo_section .st_cont_box{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 40px 0 60px;
}
.photo_section .st_cont_box .img_photo{
    margin-left:-40px;
}
.photo_section .photo_choice_box{
    width: 100%;
    max-width: 1450px;
}
.photo_section .photo_choice_box ul{
    flex-wrap: wrap;
    width: 1450px;
}
.photo_section .photo_choice_box ul li.swiper-slide{
    margin: 0 10px 0 0;
    width: 232px;
}
.photo_section .photo_choice_box ul li.swiper-slide p:first-child{
    margin-bottom: 10px;
}
.photo_section .photo_choice_box ul li:last-child{
    margin-right: 0;
}
.photo_section .photo_choice_box ul li .click_img{
    overflow: hidden;
    position: relative;
    width: 232px;
    height: 245px;
    border-radius: 10px;
    border: 5px solid hsl(0, 0%, 100%);
    box-sizing: border-box;
    transition: all 0.3s;
    cursor: pointer;
    scroll-snap-align: start;
}
.photo_section .photo_choice_box ul li .click_img.on{
    border-color: #184be0;
}
.photo_section .photo_choice_box ul li .click_img.on .chk{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: url("/images/evt/25end/ico_img_chk.png") no-repeat center/cover;
}
.photo_section .photo_choice_box ul li .click_img img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.photo_section .photo_my_box_outer{
    position: relative;
    width: 100%;
}
.photo_section .photo_my_box_outer .photo_my_box_inner{
    margin: 50px auto;
    max-width: 690px;
    width: 100%;
    box-shadow: 16px 5px 40px rgba(20,67,104,0.2);
    border-radius: 10px;
    box-sizing: border-box;
}
/* .photo_section .photo_my_box_export{
    position: absolute;
    top: -9999px;
    left: -9999px;
} */
.photo_section .photo_my_box_outer .photo_my_box{
    position: relative;
    padding: 0 30px 30px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #c4c8d7;
    border-radius: 10px;
    box-sizing: border-box;
}
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line1,
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line4{
    position: absolute;
    width: 15px;
    height: 108px;
    background: url("/images/evt/25end/st04_photo_deco2.png") no-repeat center/cover;
    transform: rotate(0);
}
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line2,
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line3{
    position: absolute;
    width: 11px;
    height: 98px;
    background: url("/images/evt/25end/st04_photo_deco.png") no-repeat center/cover;
    transform: rotate(0);
}
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line1{
    right: 2%;
    top: 13%;
}
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line2{
    left: 2%;
    top: 40%;
}
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line3{
    right: 2%;
    top: 55.5%;
}
.photo_section .photo_my_box_outer .photo_my_box .deco_txt.line4{
    left: 2%;
    top: 81%;
}
.photo_section .photo_my_box_outer .photo_my_box .tit{
    padding: 30px 0;
    font-weight: 700;
    font-size: 26px;
    color: #000e2a;
}
.photo_section .photo_my_box_outer .photo_my_box ul{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.photo_section .photo_my_box_outer .photo_my_box ul li{
    overflow: hidden;
    position: relative;
    margin: 0 0 10px;
    max-width: 300px;
    width: 50%;
    height: 316px;
    background-color: #dcdcdc;
    border-radius: 8px;
    border: 4px solid #000e2a;
    box-sizing: border-box;
    transition: all 0.3s;
}
.photo_section .photo_my_box_outer .photo_my_box ul li:nth-child(1),
.photo_section .photo_my_box_outer .photo_my_box ul li:nth-child(3){
    margin-right: 10px;
}

.photo_section .photo_my_box_outer .photo_my_box ul li img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    height: 102%;
}

.photo_section .photo_my_box_outer .photo_my_box ul li .btn_close{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    background: url("/images/evt/25end/ico_img_del.png") no-repeat center/cover;
    cursor: pointer;
    z-index: 9;
}

.photo_section .photo_save_txt{
    padding: 40px 0;
    text-align: center;
    color: #000e2a;
}
.photo_section .photo_save_txt strong{
    position: relative;
    font-size: 24px;
}
.photo_section .photo_save_txt strong::before{
    content: "";
    position: absolute;
    left: -52px;
    top: 35%;
    transform: translateY(-50%);
    width: 39px;
    height: 32px;
    background: url("/images/evt/25end/ico_save_info_before.png") no-repeat center/cover;
}
.photo_section .photo_save_txt strong::after{
    content: "";
    position: absolute;
    right: -52px;
    top: 35%;
    transform: translateY(-50%);
    width: 39px;
    height: 32px;
    background: url("/images/evt/25end/ico_save_info_after.png") no-repeat center/cover;
}
.photo_section .photo_save_txt p{
    margin: 15px 0 0;
    line-height: 1.4;
    font-size: 24px;
    word-break: keep-all;
}

.photo_section .photo_my_box_export{
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.photo_section .photo_save_txt{
    padding: 40px 0;
    text-align: center;
}
.photo_section .photo_save_txt strong{
    font-size: 26px;
    color: #000e2a;
}
.photo_section .photo_save_txt p{}




#btn_photo_save{
    display: none;
}
.photo_section .photo_my_box_outer .emoji{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.photo_section .photo_my_box_outer .emoji.smile{
    left: calc(50% - 400px);
    top: 22%;
    animation: emoji01 2.4s ease-in-out infinite;
}
.photo_section .photo_my_box_outer .emoji.txt{
    left: calc(50% - 630px);
    top: 48%;
    animation: emoji02 1.6s ease-in-out infinite alternate;
}
.photo_section .photo_my_box_outer .emoji.num{
    left: calc(50% + 560px);
    top: 40%;
    animation: emoji03 1.6s ease-in-out infinite alternate;
}
.photo_section .photo_my_box_outer .emoji.heart{
    left: calc(50% + 330px);
    top: 70%;
    animation: emoji04 2.8s ease-in-out infinite;
}
@keyframes emoji01 {
    0%{
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
@keyframes emoji02 {
    0%{
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(2deg);
    }
}
@keyframes emoji03 {
    0%{
        top: 40%;
    }
    100% {
        top: 42%;
    }
}
@keyframes emoji04 {
    0%{
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-360deg);
    }
}
.photo_section .deco{
    position: absolute;
    z-index: 0;
}
.photo_section .deco.hat{
    top: 10%;
    right: 10%;
    animation: ph_bubble_motion1 1.2s ease-in-out infinite alternate;
}
.photo_section .deco.giftbox{
    bottom: 18%;
    left: 6%;
    animation: ph_bubble_motion2 1.6s 0.3s ease-in-out infinite alternate;
}
@keyframes ph_bubble_motion1 {
    0%{
        top: 10%;
    }
    100% {
        top: 9%;
    }
}
@keyframes ph_bubble_motion2 {
    0%{
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(-3deg);
    }
}

/* mocktest_section */
.mocktest_section{
    padding: 80px 0;
    background: url("/images/evt/25end/st05_bg.png") no-repeat top center/cover;
}
.mocktest_section .st_cont_box{
    flex-direction: column;
    padding: 40px 0 60px;
}
.mocktest_section .st_cont_box .btn_test_go{
    display: inline-block;
    margin: 20px 0;
    padding: 11px 0;
    max-width: 438px;
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    color: #000e2a;
    background-color: #fff;
    border: 1px solid #000e2a;
    border-radius: 10px;
    box-sizing: border-box;
}
.mocktest_section .st_cont_box .btn_test_go span{
    position: relative;
    padding-right: 20px;
}
.mocktest_section .st_cont_box .btn_test_go span::after{
    content: ">";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.mocktest_section .upload_box_outer .upload_box{
    margin: 0 0 40px;
    padding: 40px;
    width: 100%;
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}
.mocktest_section .upload_box_outer .upload_box .tit{
    line-height: 1.4;
    font-weight: 400;
    font-size: 20px;
    color: #000e2a;
    word-break: keep-all;
}
.mocktest_section .upload_box_outer .upload_box ul{
    padding: 10px 0 20px;
}
.mocktest_section .upload_box_outer .upload_box ul li{
    position: relative;
    padding-left: 20px;
    line-height: 1.5;
    font-weight: 400;
    font-size: 16px;
    color: #000e2a;
    word-break: keep-all;
}
.mocktest_section .upload_box_outer .upload_box ul li::before{
    content: "※";
    position: absolute;
    left: 0;
    top: 0;
}
.mocktest_section .upload_box_outer .upload_box .filebox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.mocktest_section .upload_box_outer .upload_box .filebox label {
	display: inline-block;
    margin-right: 6px;
    width: 160px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: 400;
    font-size: 18px;
	color: #fff;
	background-color: #313131;
    border-radius: 10px;
    box-sizing: border-box;
	cursor: pointer;
}
.mocktest_section .upload_box_outer .upload_box .filebox .upload_name {
	display: inline-block;
    padding: 10px 50px 10px 20px;
    width: calc(100% - 166px);
    height: 50px;
    font-weight: 400;
    font-size: 18px;
    color: #000e2a;
	background-color: #f0f3f8;
    border-radius: 10px;
    box-sizing: border-box;
}
.mocktest_section .upload_box_outer .upload_box .filebox .btn_file_del{
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: url("/images/evt/25end/ico_file_del.png") no-repeat center/26px;
}
.mocktest_section .deco{
    position: absolute;
    top: 39%;
    right: 2%;
    z-index: 0;
    animation: moc_bubble_motion 1.2s 0.3s ease-in-out infinite alternate;
}
@keyframes moc_bubble_motion {
    0%{
        transform: rotate(0);
    }
    100% {
        transform: rotate(3deg);
    }
}


/* bonus_section */
.bonus_section{
    padding: 80px 0 160px;
    background:url("/images/evt/25end/st06_bg.png") no-repeat bottom center/cover;
}
.bonus_section .st_cont_box{
    padding: 30px 0 0;
}
.bonus_section .st_cont_box .txt{
    margin: -50px 0 0 20px;
    line-height: 1.7;
    text-align: center;
    font-weight: 400;
    font-size: 26px;
    color: #000e2a;
}
.bonus_section .deco{
    position: absolute;
    top: 39%;
    left: 8%;
    z-index: 0;
    animation: bo_bubble_motion 1.4s 0.3s ease-in-out infinite alternate;
}
@keyframes bo_bubble_motion {
    0%{
        transform: rotate(0);
    }
    100% {
        transform: rotate(4deg);
    }
}






































































@media screen and (max-width: 1280px) {

    #header .inner {
        padding: 15px 30px;
    }
    #header .inner .left_logo {
        width: 106px;
        height: 28px;
    }
    #header .inner .right_logo {
        width: 160px;
        height: 28px;
    }
























}

@media screen and (max-width: 1024px) {



    .deco_snow.lt {
        left: 4%;
        top: 32%;
        width: 8%;
    }
    .deco_snow.rt {
        right: 7%;
        top: 43%;
        width: 5%;
    }
    .visual_section .refer_box {
        padding: 3% 0 14%;
        font-size: 22px;
    }

    .visual_section .info_list {
        margin: 0 auto;
        width: 60%;
    }
    .visual_section .info_list .line{
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    .visual_section .info_list .line{
        padding: 0;
    }
    .visual_section .info_list .line p{
        align-items: flex-start;
        padding-bottom: 4px;
    }
    .visual_section .info_list strong {
        width: 130px;
        font-size: 18px;
    }
    .visual_section .info_list strong::before {
        top: 7px;
    }
    .visual_section .info_list span{
        margin-top: 6px;
        width: calc( 100% - 130px );
        font-size: 16px;
    }
    section .label_box strong {
        width: 94px;
        padding: 4px 0;
        font-size: 16px;
    }
    section .label_box span {
        margin-left: 8px;
        font-size: 22px;
    }
    section h2 {
        padding: 12px 0 26px;
        font-size: 36px;
    }
    section .summary_box {
        font-size: 22px;
    }
    .tetrastich_section {
        padding: 60px 0;
    }
    .tetrastich_section .st_cont_box {
        flex-direction: column;
    }
    .tetrastich_section .st_cont_box .txt_box {
        padding: 0 0 40px;
    }
    .tetrastich_section .deco.left{
        width: 12%;
    }
    .tetrastich_section .deco.right{
        width: 20%;
        right: -7%;
    }
    .quiz_section {
        padding: 60px 0;
    }
    .quiz_section .deco.left {
        top: 20%;
        left: 10%;
        width: 12%;
    }
    .quiz_section .deco.right {
        width: 10%;
        top: 35%;
        right: 12%;
    }
    .photo_section {
        padding: 60px 0;
    }
    .photo_section .photo_my_box_outer .photo_my_box {
        padding: 0 30px 35px;
    }
    .photo_section .photo_my_box_outer .photo_my_box .tit {
        padding: 25px 0;
        font-size: 24px;
    }
    .photo_section .deco.hat{
        width: 18%;
        right: 3%;
    }
    .photo_section .deco.giftbox{
        bottom: 10%;
        left: 6%;
        width: 17%;
    }
    .photo_section .photo_my_box_outer .emoji.smile{
        width: 6%;
    }
    .photo_section .photo_my_box_outer .emoji.txt{
        width: 15%;
        top: 64%;
        left: calc(50% - 520px);
    }
    .photo_section .photo_my_box_outer .emoji.num{
        width: 15%;
            left: calc(50% + 460px);
    }
    .photo_section .photo_my_box_outer .emoji.heart{
        width: 6%;
    }
    .mocktest_section {
        padding: 60px 0;
    }
    .mocktest_section .deco{
        width: 15%;
    }
    .bonus_section {
        padding: 60px 0 120px;
    }

    .bonus_section .st_cont_box .txt{
        font-size: 22px;
    }





}




@media screen and (max-width: 768px) {
    


    #header .inner {
        padding: 12px;
    }
    .inner {
        padding: 0 12px;
    }
    #header .inner .left_logo {
        width: 76px;
        height: 20px;
    }
    #header .inner .right_logo {
        width: 114px;
        height: 20px;
    }
    .visual_section{
        background-position: 70% 0;
    }
    .visual_section .center_box {
        padding: 70px 0 40px;
    }
    .visual_section .sub_tit_box .year{
        width: 100px;
    }
    .visual_section .sub_tit_box img.ic_snow{
        width: 20%;
    }
    .visual_section .sub_tit_box img.ic_snow.lt {
        left: -32%;
    }
    .visual_section .sub_tit_box img.ic_snow.rt{
        right: -32%
    }
    .visual_section .sub_tit_box{
        padding: 0 0 18px;
    }
    .visual_section .main_tit_box .txt01{
        width: 230px;
    }
    .visual_section .main_tit_box .txt02{
        margin: 18px 0 0 -15px;
        width: 110px;
    }
    .visual_section .main_tit_box .txt03{
        margin: -18px -12px 0 0;
        width: 200px;
    }
    .visual_section .main_tit_box .txt04{
        width: 140px;
    }
    .visual_section .main_tit_box .txt04_box .txt04_deco{
        right: -6px;
        top: 19px;
        width: 50px;
    }
    .visual_section .refer_box {
        padding: 25px 0 60px;
        font-size: 16px;
        line-height: 1.4;
    }
    .visual_section .info_list{
        width: 100%;
    }
    .visual_section .info_list strong {
        margin-left: 0;
        padding-left: 16px;
        padding-right: 0;
        width: auto;
        font-size: 15px;
    }
    .visual_section .info_list .line p{
        flex-direction: column;
        align-items: center;
    }

    .visual_section .info_list .line p + p {
        padding: 4px 0 0;
    }
    .visual_section .info_list .line p {
        padding-bottom: 6px;
    }
    .visual_section .info_list .line p.last{
        width: 100%;
    }
    .visual_section .info_list span {
        margin-top: 0;
        text-align: center;
        font-size: 14px;
        text-shadow: 1px 1px 1px #cecece;
    }
    .visual_section .info_list span br{
        display: none;
    }
    .visual_section .info_list strong::before{
        top: 8px;
        width: 11px;
        height: 10px;
    }
    section .label_box strong {
        width: 70px;
        padding: 3px 0 2px;
        font-size: 12px;
        border-width: 1px;
    }
    section .label_box span {
        margin-left: 4px;
        font-size: 15px;
    }
    section h2 {
        padding: 5px 0 15px;
        font-size: 20px;
        word-break: keep-all;
    }
    section .summary_box {
        font-size: 14px;
    }
    section .summary_box br{
        display: none;
    }
    section .summary_box strong{
        font-weight: 500;
    }
    section .summary_box .refer {
        padding: 10px 0 0;
        font-size: 13px;
    }
    section .st_cont_box .img_giveaway{
        max-width: 300px;
        width: 70%;
    }
    section .btn{
        max-width: 300px;
        height: 50px;
        font-size: 15px;
    }
    .tetrastich_section {
        padding: 40px 0;
    }
    .tetrastich_section .st_cont_box .txt_box{
        padding: 0 0 20px;
    }
    .tetrastich_section .st_cont_box .txt_box img{
        margin: 0 2px;
        width: 70px;
    }
    .tetrastich_section .st_cont_box {
        padding: 15px 0;
    }
    .tetrastich_section .comment_box_outer .comment_box {
        margin: 0 0 12px;
    }
    .tetrastich_section .comment_box_outer .comment_box .refer{
        padding: 0 0 6px;
        font-size: 12px;
    }
    .tetrastich_section .comment_box_outer .comment_box .txt_box{
        flex-direction: column;
    }
    .tetrastich_section .comment_box_outer .comment_box .txt_box textarea{
        padding: 12px 15px;
        width: 100%;
        height: 80px;
        font-size: 14px;
        border-radius: 6px;
    }
    .tetrastich_section .comment_box_outer .comment_box .txt_box .btn_write{
        margin: 6px 0 0;
        padding: 10px 0;
        width: 100%;
        height: auto;
        font-size: 13px;
        border-radius: 6px;
    }
    .tetrastich_section .comment_box_outer .list_box .btn_comment{
        padding: 10px 15px;
        max-width: 140px;
        font-size: 13px;
        border-radius: 6px;
    }
    .tetrastich_section .comment_box_outer .list_box .btn_comment em::after{
        width: 10px;
        height: 5px;
    }
    .tetrastich_section .comment_box_outer .list_box .list{
        padding: 12px 20px;
    }
    .tetrastich_section .comment_box_outer .list_box .list ul > li{
        flex-direction: column;
        padding: 15px 0;
    }
    .tetrastich_section .comment_box_outer .list_box .list ul > li strong{
        width: 100%;
    }
    .tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box{
        flex-direction: column;
        width: 100%;
    }
    .tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box .txt{
        padding: 8px 0;
        width: 100%;
    }
    .tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box .txt pre{
        font-size: 13px;
    }
    .tetrastich_section .comment_box_outer .list_box .list ul > li .txt_box .date{
        width: 100%;
        text-align: left;
        font-size: 12px;
    }
    .tetrastich_section .comment_box_outer .list_box .page_box a {
        margin: 0;
        width: 22px;
        height: 22px;
        line-height: 22px;
        font-size: 10px;
    }
    .quiz_section {
        padding: 40px 0;
    }
    .quiz_section .st_cont_box {
        padding: 20px 0;
    }
    .quiz_section .st_cont_box img:first-child{
        padding: 0 0 10px;
        width: 80%;
    }
    .photo_section{
        padding: 40px 0;
    }
    .photo_section .st_cont_box {
        padding: 20px 0 30px;
    }
    .photo_section .photo_choice_box ul li.swiper-slide{
        margin: 0 4px 0 0;
        width: 130px;
    }
    .photo_section .photo_choice_box ul li.swiper-slide p:first-child{
        margin-bottom: 6px;
    }
    .photo_section .photo_choice_box ul li .click_img{
        width: 130px;
        height: 130px;
        border-radius: 6px;
        border-width: 3px;
    }
    .photo_section .photo_choice_box ul li .click_img.on .chk{
        position: absolute;
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
    }
    .photo_section .photo_my_box_outer .photo_my_box_inner{
        margin: 30px auto;
        width: 92%;
    }
    .photo_section .photo_my_box_outer .photo_my_box{
        padding:0 12px 20px;
        
    }
    .photo_section .photo_my_box_outer .photo_my_box .tit {
        padding: 20px 0;
        font-weight: 500;
        font-size: 18px;
    }
    .photo_section .photo_my_box_outer .photo_my_box ul li {
        /* max-width: 280px;*/
        max-width: calc( ( 100% - 20px ) / 2 );
        margin-bottom: 4px;
        height: 130px; 
        border-width: 2px;
        border-radius: 6px;
    }
    .photo_section .photo_my_box_outer .photo_my_box ul li:nth-child(1),
    .photo_section .photo_my_box_outer .photo_my_box ul li:nth-child(3){
        margin-right:4px;
    }
    .photo_section .photo_my_box_outer .photo_my_box ul li img{
        width: 100%;
        height: auto;
    }
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line1,
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line4{
        width: 9px;
        height: 65px;
    }
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line2,
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line3{
        width: 7px;
        height: 58px;
    }
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line1 {
        right: 2%;
        top: 19%;
    }
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line2 {
        left: 2%;
        top: 37%;
    }
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line3 {
        right: 2%;
        top: 56.5%;
    }
    .photo_section .photo_my_box_outer .photo_my_box .deco_txt.line4 {
        left: 2%;
        top: 73%;
    }
    .photo_section .photo_my_box_outer .photo_my_box ul li .btn_close {
        right: 3px;
        top: 3px;
        width: 20px;
        height: 20px;
    }

    .photo_section .photo_save_txt{
        padding: 20px 0;
    }
    .photo_section .photo_save_txt strong{
        font-size: 16px;
    }
    .photo_section .photo_save_txt strong::before{
        left: -36px;
        width: 24px;
        height: 20px;
    }
    .photo_section .photo_save_txt strong::after{
        right: -34px;
        width: 24px;
        height: 20px;
    }
    .photo_section .photo_save_txt p{
        margin: 10px 0 0;
        font-size: 14px;
    }
    
    .photo_section .photo_my_box_outer .emoji.heart {
        left: calc(50% + 150px);
        width: 10%;
    }
    .photo_section .photo_my_box_outer .emoji.smile{
        left: calc(50% - 184px);
        width: 10%;
    }
    .mocktest_section {
        padding: 40px 0;
    }
    .mocktest_section .st_cont_box{
        padding: 20px 0 30px;
    }
    .mocktest_section .st_cont_box img:first-child{
        width: 100%;
    }
    .mocktest_section .st_cont_box .btn_test_go {
        padding: 10px 0;
        font-size: 16px;
        border-radius: 6px;
    }
    .mocktest_section .upload_box_outer .upload_box {
        margin: 0 0 20px;
        padding: 20px;
        border-radius: 6px;
    }
    .mocktest_section .upload_box_outer .upload_box .tit {
        font-size: 14px;
    }
    .mocktest_section .upload_box_outer .upload_box ul {
        padding: 8px 0 12px;
    }
    .mocktest_section .upload_box_outer .upload_box ul li {
        padding-left: 15px;
        line-height: 1.4;
        font-size: 14px;
    }
    .mocktest_section .upload_box_outer .upload_box .filebox label {
        margin-right: 2px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-radius: 6px;
    }
    .mocktest_section .upload_box_outer .upload_box .filebox .upload_name {
        padding: 10px 40px 10px 12px;
        width: calc(100% - 102px);
        height: 40px;
        font-weight: 400;
        font-size: 14px;
        border-radius: 6px;
    }
    .bonus_section {
        padding: 30px 0 60px;
        background-position: 96% 100%;
    }
    .bonus_section .st_cont_box{
        padding: 20px 0;
    }
    .bonus_section .st_cont_box img{
        width: 40%;
    }
    .bonus_section .st_cont_box .txt {
        margin: -20px 0 0 0;
        font-size: 14px;
    }
    .bonus_section .deco {
        top: 4%;
        left: 4%;
        width: 20%;
    }
    .scroll_box {
        right: 15px;
        bottom: 65px;
    }
    .sns_share ul {
        bottom: 80px;
    }
    .layer_popup_wrap .popup_inner{
        top: 50%;
        padding:20px 10px 20px 20px;
        width: 92%;
    }
    .layer_popup_wrap .popup_inner .btn_close{
        top: -46px;
        width: 36px;
        height: 36px;
        background-size: 12px;
    }
    .layer_popup_wrap .popup_inner .popup_contents {
        padding-right: 0;
    }
    .layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner{
        overflow-y: auto;
        height: 78vh;
        padding-right: 10px;
    }
    .layer_popup_wrap .form_tit h3 {
        padding: 0 0 10px;
        font-size: 20px;
    }
    .layer_popup_wrap .form_tit p {
        padding-right: 20px;
        line-height: 1.3;
        font-size: 14px;
    }
    .layer_popup_wrap .form_table dl dt {
        padding: 0 0 6px;
        font-size: 15px;
    }
    .layer_popup_wrap .form_table input.basic {
        padding: 5px 15px;
        height: 40px;
        font-size: 14px;
        border-radius: 4px;
    }
    .layer_popup_wrap .form_table .must_box {
        margin: 12px 0;
        padding: 15px 10px;
        border-radius: 4px;
    }
    .layer_popup_wrap .form_table .must_box strong {
        padding: 4px 0;
        width: 50px;
        font-size: 14px;
    }
    .layer_popup_wrap .form_table .must_box p {
        width: calc(100% - 60px);
        line-height: 1.3;
        font-size: 13px;
    }
    .layer_popup_wrap .form_table input.postcode {
        width: calc(100% - 98px);
    }
    .layer_popup_wrap .form_table .btn_address {
        margin-left: 4px;
        width: 90px;
        height: 40px;
        font-size: 15px;
        border-radius: 4px;
    }
    .layer_popup_wrap .form_table input.address {
        margin-top: 4px;
    }
    .layer_popup_wrap .form_table .personal_box {
        padding: 20px 0 0;
    }
    .layer_popup_wrap .form_table .personal_box .tit {
        padding: 0 0 6px;
        font-size: 16px;
    }
    .layer_popup_wrap .form_table .personal_box .txt {
        border-radius: 4px;
    }
    .layer_popup_wrap .form_table .personal_box .txt .txt_inner {
        padding: 15px;
    }
    .layer_popup_wrap .form_table .personal_box .txt .txt_inner ul li {
        font-size: 12px;
    }
    .layer_popup_wrap .form_table .personal_box .txt .chk_line {
        padding: 15px;
    }
    .layer_popup_wrap .form_table .personal_box .txt .chk_line label {
        font-size: 15px;
    }
    .layer_popup_wrap .form_table input + label {
        padding-left: 6px;
    }
    .layer_popup_wrap .form_table .btn_box {
        padding: 12px 0 0;
    }
    .layer_popup_wrap .form_table .btn_box .btn.btn_confirm {
        margin-left: 4px;
    }
    .layer_popup_wrap .form_table .btn_box .btn {
        width: 100px;
        height: 40px;
        font-size: 15px;
        border-radius: 4px;
    }
    .layer_popup_wrap .form_table .btn_box .btn.btn_cancel {
        width: 72px;
    }



}

@media screen and (max-height: 800px) {
    
    
    .layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner{
        height: 540px;
    }
    .layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner::-webkit-scrollbar {
        width: 6px;
    }
    .layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner::-webkit-scrollbar-track {
        background-color: #D9DBE3;
        border-radius: 12px;
    }
    .layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner::-webkit-scrollbar-thumb:vertical {
        background-color: #8187A2;
        border-radius: 12px;
    }
    .layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner::-webkit-scrollbar-thumb {
        border-left: 1px solid rgb(255 255 255);;
    } 


}

@media screen and (max-height: 620px) {
    
    
    .layer_popup_wrap .popup_inner .popup_contents .popup_contents_inner{
        height: 300px;
    }


}