@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Roboto", "Pretendard GOV", sans-serif; -webkit-text-size-adjust: none; line-height: 1; font-weight: 400; letter-spacing: -0.5px; color: #000;}
select::-ms-expand{ display: none;}
html{}
body{ -webkit-text-size-adjust: none; word-break: keep-all;}

.popup_login_btn{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 200; top: 30px; right: 50px; height: 45px; border-radius: 30px; box-shadow: 0 10px 50px 0 rgba(0 0 0/30%); cursor: pointer;}
.popup_login_btn:after{ content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; border-radius: 30px; background: #e97ea0;}
.popup_login_btn p{ position: relative; z-index: 3; padding: 0 30px; font-size: 16px; font-weight: 600; color: #FFF; text-shadow: 0 0 5px rgba(0 0 0/20%);}

.popup_login{ display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: 0; left: 100%; padding: 30px; width: 100%; height: 100%; background: rgba(0 0 0/70%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all .5s; transition: left 0s;}
.popup_login .row{ position: relative; z-index: 2; padding: 40px; width: 400px; border-radius: 20px; background: #FFF; transform: scale(.1); opacity: 0; transition: all .5s;}
.popup_login .row > i{ display: block; position: absolute; top: 15px; right: 15px; font-size: 18px; color: #999; cursor: pointer;}
.popup_login .row .title{ margin: 0 0 40px 0; text-align: center; font-size: 26px; font-weight: 700; color: #000;}
.popup_login .row input{ display: flex; align-items: center; margin: 0 0 10px 0; padding: 0 40px 0 20px; width: 100%; height: 45px; border-radius: 40px; border: 1px solid #e5e5e5; background: #f5f5f5; font-size: 15px; font-weight: 400; color: #333; outline:none; -webkit-appearance:none;}
.popup_login .row .pw{ position: relative;}
.popup_login .row .pw i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 1; top: 0; right: 0; width: 45px; height: 45px; font-size: 24px; color: #999; cursor: pointer;}
.popup_login .row .pw i.on{ color: #F00;}
.popup_login .row .btn{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; margin: 20px 0 0 0; width: 100%; height: 50px; border-radius: 30px; cursor: pointer;}
.popup_login .row .btn:after{ content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; border-radius: 30px; background: linear-gradient(90deg, #7fea6b, #e97ea0);}
.popup_login .row .btn p{ position: relative; z-index: 3; font-size: 18px; font-weight: 600; color: #FFF; text-shadow: 0 0 5px rgba(0 0 0/20%);}
.popup_login .close{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0 0 0/0.00000001%);}
.popup_login.on{ left: 0; opacity: 1;}
.popup_login.on .row{ transform: scale(1); opacity: 1;}

.main{ position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.main .wrap{ overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; z-index: 20; top: 100px; left: 50%; bottom: 150px; margin-left: -600px; width: 400px;}
.main .wrap .ft{ display: flex; flex-direction: column; align-items: center;}
.main .wrap .ft .t1{ padding: 10px 20px; background: #b8c900; font-size: 18px; font-weight: 600; color: #FFF;}
.main .wrap .ft .t2{ margin-top: 20px; font-size: 40px; font-weight: 700; color: #000;}
.main .wrap .ft .setp{ display: flex; justify-content: center; align-items: center; grid-gap: 0 5px; margin-top: 30px;}
.main .wrap .ft .setp span{ display: block; width: 20px; height: 3px; border-radius: 10px; background: #b8c900;}
.main .wrap .ft .setp span.on{ width: 20px; height: 20px; background: url(/images/on.png) center/cover;}

.main .wrap .fb{ position: relative; width: 100%; height: 400px;}
.main .wrap .fb .row{ display: flex; flex-direction: column; align-items: center; position: absolute; bottom: 0; left: 100%; width: 100%; opacity: 0; transform: scale(.5); transition: all .5s;}
.main .wrap .fb .row .t1{ padding: 8px 15px; border-radius: 20px; background: #df939a; font-size: 12px; font-weight: 500; color: #FFF;}
.main .wrap .fb .row .t2{ margin: 10px 0 0 0; font-size: 30px; font-style: italic; color: #FFF;}
.main .wrap .fb .row .in{ margin: 20px 0 0 0; width: 100%;}
.main .wrap .fb .row .in select{ display: flex; align-items: center; margin: 10px 0 0 0; padding: 0 50px 0 20px; width: 100%; height: 50px; border-radius: 25px; border: 0; background:url(/images/icon_select.png) no-repeat center right 20px #FFF; background-size: 12px auto; font-size: 16px; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.main .wrap .fb .row .in input{ display: flex; align-items: center; margin: 10px 0 0 0; padding: 0 50px 0 20px; width: 100%; height: 50px; border-radius: 40px; border: 1px solid #f5f5f5; background: #f5f5f5; font-size: 16px; font-weight: 400; color: #333; outline:none; -webkit-appearance:none;}
.main .wrap .fb .row .in .pw{ position: relative;}
.main .wrap .fb .row .in .pw i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 1; top: 0; right: 0; width: 50px; height: 50px; font-size: 24px; color: #999; cursor: pointer;}
.main .wrap .fb .row .in .pw i.on{ color: #F00;}
.main .wrap .fb .row .in .tip{ margin: 10px 0 0 0; line-height: 1.2; text-align: center; font-size: 14px; color: #ffc5d7;}
.main .wrap .fb .row .btn{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; margin: 20px 0 0 0; width: 100%; height: 60px; border-radius: 30px; cursor: pointer;}
.main .wrap .fb .row .btn:before{ content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; border-radius: 30px; border: 2px solid rgba(255 255 255/50%);}
.main .wrap .fb .row .btn:after{ content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; border-radius: 30px; background: linear-gradient(90deg, #7fea6b, #e97ea0);}
.main .wrap .fb .row .btn p{ position: relative; z-index: 3; font-size: 18px; font-weight: 600; color: #FFF; text-shadow: 0 0 5px rgba(0 0 0/20%);}
.main .wrap .fb .row.on{ left: 0; opacity: 1; transform: scale(1);}
.main .wrap .fb .row.on.off{ left: -100%; opacity: 0;}

.main .bg{ position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.main .bg:before{ content: ""; position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0 0 0/0), rgba(0 0 0/0), rgba(0 0 0/50%));}
.main .bg .row{ overflow: hidden; position: absolute; top: 0; left: 100%; width: 100%; height: 100%; transition: all .2s;}
.main .bg .row .bt{ display: flex; justify-content: center; align-items: flex-end; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.main .bg .row .bt img{ display: block; margin-right: -600px; height: 90vh; transform: scale(1.3); opacity: 0; transition: all 1s;}
.main .bg .row .bb{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.5); opacity: 0; transition: all 3s;}
.main .bg .row.on{ left: 0; transition: all .5s;}
.main .bg .row.on .bt img{ transform: scale(1); opacity: 1;}
.main .bg .row.on .bb{ transform: scale(1); opacity: 1;}
.main .bg .row.on.off{ left: -100%; transition: all .5s;}
.main .copy{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; right: 0; bottom: 0; left: 0; height: 60px; background: #798284; text-align: center; line-height: 1.2; font-size: 12px; color: rgba(255 255 255/50%);}

@media(max-width: 1601px){
    .main .wrap{ margin-left: -450px;}
    .main .bg .row .bt img{ margin-right: -450px;}
}
@media(max-width: 1025px){
    .main .wrap{ justify-content: space-between; margin-left: 0; transform: translate(-50%,0);}
    .main .bg .row .bt img{ margin-right: 0; transform: translate(-50%,0);}
}
@media(max-width: 769px){
    .popup_login_btn{ top: 20px; right: 20px; height: 25px;}
    .popup_login_btn p{ padding: 0 15px; font-size: 10px;}

    .popup_login .row{ padding: 30px; width: 100%;}

    .main .wrap{ top: 50px; bottom: 60px; width: 320px;}
    .main .wrap .ft{ display: flex; flex-direction: column; align-items: center;}
    .main .wrap .ft .t1{ padding: 8px 15px; font-size: 14px;}
    .main .wrap .ft .t2{ margin-top: 15px; font-size: 30px;}
    .main .wrap .ft .setp{ margin-top: 20px;}

    .main .wrap .fb{ height: 320px;}
    .main .wrap .fb .row .t1{ padding: 6px 12px; font-size: 10px;}
    .main .wrap .fb .row .t2{ font-size: 20px;}
    .main .wrap .fb .row .in{ margin: 10px 0 0 0;}
    .main .wrap .fb .row .in select{ height: 45px;}
    .main .wrap .fb .row .in input{ height: 45px;}
    .main .wrap .fb .row .in .pw{ position: relative;}
    .main .wrap .fb .row .in .pw i{ width: 45px; height: 45px;}
    .main .wrap .fb .row .in .tip{ margin: 5px 0 0 0; font-size: 12px;}
    .main .wrap .fb .row .btn{ margin: 15px 0 0 0; height: 45px;}
    .main .wrap .fb .row .btn p{ font-size: 16px;}

    .main .bg{ bottom: 40px;}
    .main .bg .row .bt img{ height: 80vh;}
    .main .copy{ height: 40px; font-size: 10px;}

}