@charset "utf-8";
*{ box-sizing: border-box; list-style: none; margin: 0; padding: 0; border: 0; text-decoration: none; font-family: "NanumSquareNeo", 맑은 고딕, 微软雅黑, sans-serif;}
html{ width: 100%; height: 100%;}
body{ overflow: hidden; -webkit-text-size-adjust: none; word-break: keep-all; font-weight: 300; letter-spacing: 0; color: #000;}


.popup_login{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 200; top: 100%; right: 0; bottom: -100%; left: 0; background: rgba(255 255 204/80%); transition: opacity .5s;}
.popup_login .row{ position: relative; z-index: 2; margin: 50px 0 0 0; padding: 40px; max-width: 400px; width: 100%; background: #FFF; box-shadow: 0 0 8px 0 rgba(0,0,0,.1), 0 8px 8px 0 rgba(0,0,0,.2); opacity: 0; transition: all .5s;}
.popup_login .xi-close{ position: absolute; top: 20px; right: 20px; font-size: 20px; color: rgba(0 0 0/50%); cursor: pointer;}
.popup_login .tit{ font-size: 25px; font-weight: 400; color: #000;}
.popup_login .in{}
.popup_login .in .tit{ padding: 25px 0 0 0; font-size: 14px; font-weight: 300; color: #333;}
.popup_login .in input{ display: flex; align-items: center; margin: 10px 0 0 0; padding: 0 15px; width: 100%; height: 50px; border-radius: 0; border: 1px solid rgba(0 0 0/10%); background: #FFF; font-size: 16px; font-weight: 300; color: #000; outline: none; -webkit-appearance: none;}
.popup_login .in .pw{ position: relative;}
.popup_login .in .pw i{ position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; width: 50px; display: flex; justify-content: center; align-items: center; font-size: 25px; color: #666; cursor: pointer;}
.popup_login .login_check{ display: flex; justify-content: space-between; align-items: center; padding: 20px 0 0 0;}
.popup_login .login_check a{ display: flex; align-items: center;}
.popup_login .login_check a p{ border-bottom: 1px solid #000; line-height: 1.2; font-size: 14px; color: #000;}
.popup_login .btn{ display: flex; justify-content: center; align-items: center; margin: 20px 0 0 0; height: 50px; border-radius: 30px; background: #d31f70; font-size: 18px; font-weight: 300; color: #FFF; cursor: pointer;}
.popup_login .close{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0 0 0/0.0000001%);}
.popup_login.on{ top: 0; bottom: 0; opacity: 1;}
.popup_login.on .row{ margin: 0; opacity: 1;}
@media(max-width: 767px){
    .popup_login .row{ padding: 30px; max-width: 300px;}
    .popup_login .xi-close{ top: 10px; right: 10px;}
    .popup_login .tit{ font-size: 20px;}
    .popup_login .in .tit{ padding: 20px 0 0 0; font-size: 12px;}
    .popup_login .in input{ padding: 0 10px; width: 100%; height: 40px; font-size: 14px;}
    .popup_login .in .pw i{ width: 40px; font-size: 20px;}
    .popup_login .login_check{ padding: 15px 0 0 0;}
    .popup_login .login_check a p{ font-size: 12px;}
    .popup_login .btn{ margin: 15px 0 0 0; height: 40px; font-size: 16px;}
}


.container{ display: flex; justify-content: center; align-items: center; position: relative; min-height: 850px; background: radial-gradient(circle at 15% -35%,#e2d428,transparent,transparent,transparent),radial-gradient(circle at 90% 60%,#d4c61d,transparent,transparent,transparent),radial-gradient(circle at 5% 110%,#e5d93f,#eee682,#eee682,#eee682);}
.container .contents{ display: flex; flex-direction: column; align-items: center;}
@media(max-width: 767px){
    .container{ height: auto;}
}

.container .login_btn{ position: fixed; top: 20px; right: 50%; margin: 0 -500px 0 0; width: 100px; height: 40px; border: 1px solid #d31f70; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .3s;}
.container .login_btn p{ font-size: 15px; font-weight: 300; color: #d31f70; transition: all .3s;}
.container .login_btn:hover{ background: #d31f70;}
.container .login_btn:hover p{ color: #FFF;}
@media(max-width: 1300px){
    .container .login_btn{ right: 50px; margin: 0;}
}
@media(max-width: 767px){
    .container .login_btn{ top: 15px; right: 15px; width: 60px; height: 30px;}
    .container .login_btn p{ font-size: 13px;}
}


.container .user{ position: relative; width: 340px;}
.container .user:before{ content: ""; display: block; position: absolute; top: -30px; left: -30px; width: 340px; height: 340px; border-radius: 50%; background: #ffff99; transition: all .3s;}
.container .user:after{ content: ""; display: block; position: absolute; right: -30px; bottom: -30px; width: 340px; height: 340px; border-radius: 50%; background: #ffff99; transition: all .3s;}
.container .user .img{ position: relative; z-index: 10; width: 340px; height: 340px; border-radius: 50%; border: 10px solid #eee682;}
.container .user .img img{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 95%; border-radius: 50%; opacity: 0; transition: all .3s;}
.container .c02 .user:before{ left: 30px;}
.container .c02 .user:after{ right: 30px;}
.container .c04 .user:before{ left: 30px;}
.container .c04 .user:after{ right: 30px;}
.container .c01 .user .img img:nth-child(1){ opacity: 1;}
.container .c02 .user .img img:nth-child(2){ opacity: 1;}
.container .c03 .user .img img:nth-child(3){ opacity: 1;}
.container .c04 .user .img img:nth-child(4){ opacity: 1;}
.container .c05 .user .img img:nth-child(5){ opacity: 1;}
@media(max-width: 767px){
    .container .user{ width: 220px;}
    .container .user:before{ top: -15px; left: -15px; width: 220px; height: 220px;}
    .container .user:after{ right: -15px; bottom: -15px; width: 220px; height: 220px;}
    .container .user .img{ width: 220px; height: 220px; border: 5px solid #eee682;}
    .container .c02 .user:before{ left: 15px;}
    .container .c02 .user:after{ right: 15px;}
    .container .c04 .user:before{ left: 15px;}
    .container .c04 .user:after{ right: 15px;}
}


.container .title{ margin: 40px 0 0 0; text-align: center; line-height: 1.4; font-size: 25px; font-weight: 400; color: #d31f70;}
@media(max-width: 767px){
    .container .title{ margin: 20px 0 0 0; font-size: 18px;}
}


.container .in{ margin: 40px 0 0 0;}
.container .in .in_row{ display: none;}
.container .in .tit{ line-height: 1; font-size: 16px; font-weight: 300; color: #000;}
.container .in .txt{ padding: 10px 0 0 0; line-height: 1.2; font-size: 12px; font-weight: 200; color: rgba(0 0 0/70%);}
.container .in .txt.red{ color: #F00;}
.container .in select{ display: flex; align-items: center; margin: 10px 0 0 0; padding: 0 30px 0 15px; width: 370px; height: 45px; border-radius: 0; border: 1px solid rgba(0 0 0/20%); background: url(/images/select_icon.png) no-repeat center right 15px #FFF; background-size: 15px auto; font-size: 14px; font-weight: 300; color: #000; outline: none; -webkit-appearance: none;}
.container .in input{ display: flex; align-items: center; margin: 10px 0 0 0; padding: 0 15px; width: 370px; height: 45px; border-radius: 0; border: 1px solid rgba(0 0 0/20%); background: #FFF; font-size: 14px; font-weight: 300; color: #000; outline: none; -webkit-appearance: none;}
.container .in .address{ position: relative; z-index: 5;}
.container .in .address .list{ display: none; position: absolute; z-index: 6; top: 45px; right: 0; left: 0;}
.container .in .address .list ul{ overflow: auto; max-height: 200px; background: #FFF;}
.container .in .address .list ul li:nth-of-type(odd){ background: #ececec;}
.container .in .address .list ul li p{ padding: 10px 15px; line-height: 1.2; font-size: 14px; color: #333;}
.container .in .address .list ul li:hover{ background: #0A246A;}
.container .in .address .list ul li:hover p{ color: #FFF;}
.container .in .address.on .list{ display: block;}
.container .in .pw{ position: relative;}
.container .in .pw i{ position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; width: 50px; display: flex; justify-content: center; align-items: center; font-size: 25px; color: #666; cursor: pointer;}
.container .c01 .in_01{ display: block;}
.container .c02 .in_02{ display: block;}
.container .c03 .in_03{ display: block;}
.container .c04 .in_04{ display: block;}
.container .c05 .in_05{ display: block;}
@media(max-width: 767px){
    .container .in{ margin: 20px 0 0 0;}
    .container .in .tit{ font-size: 13px;}
    .container .in .txt{ font-size: 11px;}
    .container .in select{ width: 300px; height: 40px; background-size: 12px auto; font-size: 13px;}
    .container .in input{ width: 300px; height: 40px; font-size: 13px;}
    .container .in .address .list{ top: 40px;}
    .container .in .address .list ul{ max-height: 150px;}
    .container .in .address .list ul li p{ font-size: 12px;}
    .container .in .pw i{ width: 40px; font-size: 20px;}
}


.container .btn{ position: relative; margin: 40px 0 0 0; width: 370px;}
.container .btn .bt{ display: none; width: 100%; height: 50px; border-radius: 30px; background: #d31f70; justify-content: center; align-items: center; cursor: pointer;}
.container .btn .bt p{ font-size: 20px; font-weight: 600; color: #FFF;}
.container .btn .terms{ display: none; margin: 20px 0 0 0; text-align: center; line-height: 1.4; font-size: 12px; font-weight: 200; color: rgba(0 0 0/90%);}
.container .btn .terms a{ border-bottom: 1px solid rgba(0 0 0/50%); color: #000;}
.container .c01 .btn_c01{ display: flex;}
.container .c02 .btn_c02{ display: flex;}
.container .c03 .btn_c03{ display: flex;}
.container .c04 .btn_c04{ display: flex;}
.container .c05 .btn_c05{ display: flex;}
.container .c05 .terms{ display: block;}
@media(max-width: 767px){
    .container .btn{ margin: 20px 0 0 0; width: 300px;}
    .container .btn .bt{ height: 45px;}
    .container .btn .bt p{ font-size: 18px;}
    .container .btn .terms{ font-size: 11px;}
}


.container .step{ margin: 30px 0 0 0; display: flex; justify-content: center; align-items: center;}
.container .step li{ margin: 0 10px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0 0 0/50%); transition: all .3s;}
.container .c01 .step li:nth-child(1){ border-color: #d31f70; background: #d31f70;}
.container .c02 .step li:nth-child(2){ border-color: #d31f70; background: #d31f70;}
.container .c03 .step li:nth-child(3){ border-color: #d31f70; background: #d31f70;}
.container .c04 .step li:nth-child(4){ border-color: #d31f70; background: #d31f70;}
.container .c05 .step li:nth-child(5){ border-color: #d31f70; background: #d31f70;}
@media(max-width: 767px){
    .container .step{ margin: 20px 0 0 0;}
    .container .step li{ margin: 0 8px;}
}


.container .copy{ position: absolute; right: 0; bottom: 10px; left: 0; text-align: center; line-height: 1; font-size: 12px; color: rgba(0 0 0/70%);}
@media(max-width: 767px){
    .container .copy{ font-size: 10px;}
}