@charset "utf-8";
/* skipnavi */
#skipnavi { position:absolute; top:-100px; z-index:10000; width:100%; }
#skipnavi li { float:left; width:100%; position:absolute; top:0; left:0; }
#skipnavi a { overflow:hidden; text-align:center; background:#1f3a4f; color:#fff; }
#skipnavi a:focus,
#skipnavi a:active { position:absolute; top:100px; left:0; height:auto; width:100%; margin-bottom:10px; padding:10px; font-weight:bold; }


/**** layout ****/
#wrap { position:relative; }
.inner { position:relative; width:1410px; margin:0 auto; }
.clearfix { display:block; clear:both; content:''; }

/* integrated_login */
.integrated_login { position:relative; }
.integrated_login:before { content:''; position:absolute; top:0; left:50%; width:100%; height:499px; transform:translateX(-50%); background:url(../images/login/bg_login.png) 50% no-repeat; background-size:cover; }
.integrated_login .inner { padding:30px 0; }

.integrated_login .content_top { position:relative; height:56px }
.integrated_login .content_top .logo { position:absolute; left:0; }
.integrated_login .content_top .logo a { display:block; width:215px; height:56px; background:url(/yeosu/images/main/logo_black.png) 50% no-repeat; }
.integrated_login .content_top .btn_type { position:absolute; right:0; top:calc(50% - 22px); width:185px; border-radius:50px; background:url(../images/login/icon_arr_more.png) 87% 50% no-repeat var(--main-color); }
.integrated_login .content_top .btn_type a { display:block; height:44px; line-height:44px; color:#fff; font-size:16px; padding:0 25px; }

.integrated_login .content_info { text-align:center; padding:60px 0 40px; }
.integrated_login .content_info h2 { font-family: 'Jalnan'; font-size:50px; line-height:1.2; }
.integrated_login .content_info h2 em { color:var(--main-color); }
.integrated_login .content_info p { font-size:18px; line-height:1.5; color:#666; margin-top:20px; word-break:keep-all; }

.integrated_login .content_auth { background-color:#fff; border-radius:15px; box-shadow:0px 10px 20px 2px #e8e8ec; }
.integrated_login .content_auth > ul { display:flex; }
.integrated_login .content_auth > ul > li { width: 100%; border-left:1px solid #ebebeb; box-sizing: border-box; }
.integrated_login .content_auth > ul > li:first-child { border-left:unset; }
.integrated_login .content_auth .auth_wrap { text-align:center; padding: 50px 15px; }
.integrated_login .content_auth .auth_wrap p { word-break:keep-all; font-weight:700; line-height:1.5; }
.integrated_login .content_auth .auth_wrap .auth_tit { font-size:25px; color:#222; }
.integrated_login .content_auth .auth01 .auth_wrap .auth_tit { text-align:left; margin-left:45px; }
.integrated_login .content_auth .auth01 .auth_wrap .auth_tit span { color:#475acf; }
.integrated_login .content_auth .auth02 .auth_wrap .auth_tit span { color:#1EC800; }
.integrated_login .content_auth .auth03 .auth_wrap .auth_tit span { color:#3A1D1D }
.integrated_login .content_auth .auth04 .auth_wrap .auth_tit span { color:#1c2674; }
.integrated_login .content_auth .auth_wrap .auth_info { font-weight:500; font-size:16px; color:#666; margin-top:20px; }
.integrated_login .content_auth .auth_wrap .input_area { margin-left:45px; margin-right:45px; }
.integrated_login .content_auth .auth_wrap .input_area > input { margin-top: 5px; width:calc(100% - 30px); padding-left:30px; background:15px 50% no-repeat; height:44px; border-radius:10px; }
.integrated_login .content_auth .auth_wrap .input_area > input::placeholder { color:#666; font-size:15px; }
.integrated_login .content_auth .auth_wrap .input_area .id_input { background-image:url(../images/login/id_bg.png); }
.integrated_login .content_auth .auth_wrap .input_area .pw_input { background-image:url(../images/login/pw_bg.png); }
.integrated_login .content_auth .auth_wrap .auth_footer { font-size:16px; color:#666; }
.integrated_login .content_auth .auth_wrap .auth_footer span { font-weight:400; display:block; }
.integrated_login .content_auth .auth_wrap .auth_other { margin:0 45px; }
.integrated_login .content_auth .auth_wrap .auth_other li { float:left; width:30%; position:relative; }
.integrated_login .content_auth .auth_wrap .auth_other li:after { position:absolute; content:''; display:block; width:1px; height:80%; background:#ccc; right:-3px; top:10%; }
.integrated_login .content_auth .auth_wrap .auth_other li:last-child { width:40%; }
.integrated_login .content_auth .auth_wrap .auth_other li:first-child:after { right:3px; }
.integrated_login .content_auth .auth_wrap .auth_other li:last-child:after { content:unset; }
.integrated_login .content_auth .auth_wrap .auth_other li a { color:#555; font-size:15px; font-weight:600; }
.integrated_login .content_auth .auth_wrap > a { color:#fff; display:block; margin:30px 45px; height:50px; line-height:50px; font-size:18px; border-radius:10px; padding-right:20px; background:url(../images/login/icon_arr_more.png) 87% 50% no-repeat; font-weight:500; }
.integrated_login .content_auth .auth_wrap > a.onepass { background:url(../images/login/onepass_logo.png) 15% 50% no-repeat; padding-right:0; padding-left:40px }
.integrated_login .content_auth .auth01 .auth_wrap > a { background:#475acf; padding-right:0; margin-top: 11px; }
.integrated_login .content_auth .auth02 .auth_wrap > a { background-color:#1EC800 }
.integrated_login .content_auth .auth03 .auth_wrap > a { background-color: #F7E600; color: #3A1D1D; }
.integrated_login .content_auth .auth04 .auth_wrap > a { background-color:#1c2674; }

.integrated_login .content_sns { margin-top:30px; }
.integrated_login .content_sns li { float:left; width:calc((100% - 78px) / 2); margin-left:26px; }
.integrated_login .content_sns li:first-child { margin-left:0; }
.integrated_login .content_sns li > a { border:1px solid #bbb; box-sizing:border-box; display:block; border-radius:8px; height:50px; line-height:50px; }
.integrated_login .content_sns li > a span { display:inline-block; width:calc(100% - 50px); position:relative; top:-1px; text-align:center; font-size:18px; color:#666; }
.integrated_login .content_sns li .icon_area { font-size:0; display:inline-block; vertical-align:middle; width:50px; height:50px; border-right:1px solid #bbb; box-sizing:border-box; position:relative; top:-2px; }
.integrated_login .content_sns .sns01 .icon_area { background:url(../images/login/icon_sns_naver.png) 50% no-repeat; }
.integrated_login .content_sns .sns02 .icon_area { background:url(../images/login/icon_sns_google.png) 50% no-repeat; }
.integrated_login .content_sns .sns03 .icon_area { background:url(../images/login/icon_sns_facebook.png) 50% no-repeat; }
.integrated_login .content_sns .sns04 .icon_area { background:url(../images/login/icon_sns_kakao.png) 50% no-repeat; }

.integrated_login.staff .content_auth { max-width:500px; margin:0 auto; }

@media (min-width: 1520px) {
 .integrated_login .inner { width:1520px; }
}

@media (max-width: 1419px) {
 .integrated_login .inner { width:95%; margin:0 auto; }
}

@media (min-width: 1201px) and (max-width: 1420px) {
 .integrated_login .content_auth .auth_wrap .auth_info { font-size:13px; }
 .integrated_login .content_auth .auth_wrap .auth_other { margin:0; }
}


@media (min-width: 641px) and (max-width: 1200px) {
 .integrated_login .content_auth > ul > li { /* width: 33%; *//* border-top:1px solid #ebebeb; *//* height:363px; */ }
 .integrated_login .content_auth > ul > li:first-child, .integrated_login .content_auth > ul > li:nth-child(2n + 1) { /* border-left:unset; */ }
 .integrated_login .content_auth > ul > li:first-child, .integrated_login .content_auth > ul > li:nth-child(2) { border-top:unset; }

 .integrated_login .content_sns li { width:calc((100% - 26px) / 2); margin-left:26px; }
 .integrated_login .content_sns li:first-child, .integrated_login .content_sns li:nth-child(2) { margin-bottom:26px }
 .integrated_login .content_sns li:nth-child(2n + 1) { margin-left:0; }
}
@media (max-width: 1100px){
 .integrated_login .content_auth .auth_wrap { padding: 50px 0; }
 .integrated_login .content_auth .auth_wrap .auth_other { margin: 0 10px; }
 }

@media (min-width: 641px) and (max-width: 730px) {
 .integrated_login .content_auth .auth_wrap .auth_info { font-size:14px; }
 .integrated_login .content_auth .auth_wrap .auth_other { margin:0 20px; }
 .integrated_login .content_auth .auth_wrap .auth_other li { float: none; width: auto; margin: 3px 0; }
 .integrated_login .content_auth .auth_wrap .auth_other li:after { display:none; }
 .integrated_login .content_auth .auth_wrap .auth_other li:last-child { width: auto; }
}


@media (max-width: 640px) {
 .integrated_login .content_info h2 { font-size:35px; }

 .integrated_login .content_auth > ul > li { float:unset; width:100%; border-left:unset; border-top:1px solid #ebebeb; }
 .integrated_login .content_auth > ul > li:first-child { border-top:unset; }

 .integrated_login .content_sns li { float:unset; width:100%; margin:10px 0 0; }
 .integrated_login .content_sns li:first-child { margin-top:0; }
 .integrated_login .content_auth > ul { flex-wrap:wrap; }
}

.popup_wrap { position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.5); z-index:1000; display:none; }
.popup_wrap.active { display:block; }
.popup_inner .mg05 { margin-bottom:5px; }
.popup_inner .important { position:relative; display: inline-block; padding-left: 15px; }
.popup_inner .important:before { position:absolute; display:block; content: '*'; color:var(--main-color); font-weight:600; font-size:13px; left: 0; top: 1px; }
.popup_inner .point_color { display:block; color:var(--main-color); font-weight: 500; word-break: keep-all; }
.popup_inner { padding:25px 5px; background-color:#fff; }
/*.popup_inner { position:absolute; width: 950px; left:50%; top:50%; padding:25px 5px; background-color:#fff; transform:translate(-50%, -50%); border-radius:20px; display:none; max-height:780px; } */
.popup_inner.active { display:block; }
.popup_inner .close_btn { width:30px; height:30px; background:url(../images/login/btn_close.png) 50% no-repeat; font-size:0; position:absolute; left: calc(50% + 490px); top:0; }
.popup_inner .popup_con { overflow-x:hidden; overflow-y:scroll; padding: 35px 45px 15px; /*max-height:730px; */ }
.popup_inner .popup_con::-webkit-scrollbar { width:6px; border-radius:10px; }
.popup_inner .popup_con::-webkit-scrollbar-track { background-color:transparent; }
.popup_inner .popup_con::-webkit-scrollbar-thumb { background-color:#888; border-radius:20px; }
.popup_inner .tab_wrap li { float:left; width:calc((100% - 6px) / 3); height: 35px; border-bottom:2px solid #888; margin-left:3px; box-sizing: border-box; }
.popup_inner .tab_wrap li:first-child { margin-left:0; }
.popup_inner .tab_wrap li a { display:block; color:#888; font-size:20px; text-align:center; height: 100%; font-weight: 400; }
.popup_inner .tab_wrap li.active { border-color:var(--main-color); }
.popup_inner .tab_wrap li.active a { color:var(--main-color); font-weight: 700; }
.popup_inner .con_inner { margin-top:40px; position: relative; }
.popup_inner .con_inner .login_h4 { position:relative; padding-left:15px; font-weight:700; font-size:20px; color:#222; line-height: 1.5; word-break: keep-all; }
.popup_inner .con_inner .login_h4:before { position:absolute; content:''; width:8px; height:8px; border-radius:50%; left:0; top: 10px; background:var(--main-color); }
.popup_inner .con_inner .login_h4 span { font-size:14px; color:#666; font-weight:400; word-break: keep-all; }
.popup_inner .con_inner .login_h4 span.txt_right { position:absolute; right:0; bottom:0; }
.popup_inner .con_inner .login_h4 span.sub_tit { display:block; }
.popup_inner .btn_area > a { display:block; width: 250px; line-height: 40px; border-radius:30px; background-color:#222; color:#fff; padding: 0 10px 0 15px; margin: 10px auto; font-size: 18px; text-align: center; }
.popup_inner .btn_area > a .icon_wrap { width: 8px; height: 10px; background:url(../images/login/icon_more.png) 50% no-repeat; background-size: cover; display: inline-block; margin-bottom: 2px; margin-left: 5px; }
.popup_inner .con_inner .login_terms_box textarea { width:100%; margin:10px 0; border-radius:unset; border-color:#e3e3e3; resize:none; font-size: 14px; color: #666; font-weight: 400; }
.popup_inner .con_inner .check_join { color:#222; font-size:15px; font-weight:400; }
.popup_inner .con_inner .auth_type { margin-top:20px; }
.popup_inner .con_inner .auth_type li { float:left; width:calc((100% - 20px) / 2); border-radius:20px; box-shadow: 4px 4px 13px 0px rgb(0 23 57 / 14%); overflow: hidden; padding: 110px 0 30px; text-align:center; background:50% 28px no-repeat; height: 120px; }
.popup_inner .con_inner .auth_type li.auth_self { margin-right: 20px; background-image:url(../images/login/icon_self.png); }
.popup_inner .con_inner .auth_type li.auth_ipin { background-image:url(../images/login/icon_ipin.png); }
.popup_inner .con_inner .auth_type li p { word-break:keep-all; }
.popup_inner .con_inner .auth_type li .tit { color:#222; font-size:17px; font-weight:600; }
.popup_inner .con_inner .auth_type li .sub_tit { color:#666; font-size:13px; font-weight:400; padding:15px 0 20px; }
.popup_inner .con_inner .auth_type li a { display:block; width:100px; line-height:30px; font-size:14px; color:#fff; font-weight:500; border-radius:20px; background-color:#222; margin:0 auto; }
.popup_inner .con_inner .auth_type li a:hover { background-color:var(--main-color); }
.popup_inner .con_inner .join_form { border-top:1px solid #888; border-bottom:1px solid #888; box-sizing:border-box; margin-top:10px; }
.popup_inner .con_inner .join_form dl { padding:0 4px; min-height:56px; box-sizing:border-box; border-bottom:1px solid #ececec; }
.popup_inner .con_inner .join_form dl:last-child { border-bottom:unset; }
.popup_inner .con_inner .join_form dl:after { display:block; content:''; clear:both; }
.popup_inner .con_inner .join_form dt, .popup_inner .con_inner .join_form dd { float:left; }
.popup_inner .con_inner .join_form dt { font-size:16px; color:#222; font-weight:600; width:130px; line-height:56px; }
.popup_inner .con_inner .join_form dt span { padding-left:15px; }
.popup_inner .con_inner .join_form dt .important:before { font-size:16px; }
.popup_inner .con_inner .join_form dd { width:calc(100% - 130px); padding: 11px 0; }
.popup_inner .con_inner .join_form dd input[type=text], .popup_inner .con_inner .join_form dd input[type=password] { border-radius:0; border-color:#e9e9e9; height:26px; }
.popup_inner .con_inner .join_form dd input:-moz-read-only { background-color:#f4f4f4; }
.popup_inner .con_inner .join_form dd input:read-only { background-color:#f4f4f4; }
.popup_inner .con_inner .join_form dd.phone_num input[type=text] { width: 60px; }
.popup_inner .con_inner .join_form dd.full_input input[type=text] { width:90%; }
.popup_inner .con_inner .join_form dd.full_input > div input[type=text] { width:100px; }
.popup_inner .con_inner .join_form dd.full_input > div button { width:104px; line-height: 30px; color:#fff; font-size:12px; font-weight:500; background: #222; text-align:center; }

@media all and (max-width: 1200px) {
 .popup_inner { padding-top:45px; margin:20px auto; max-height:650px; overflow:hidden; }
 .popup_inner .close_btn { background-image:url(../images/login/btn_close_bk.png); position:absolute; right:10px; top:10px; left:unset; }
 .popup_inner .popup_con { max-height:600px; }
}

@media all and (max-width: 1000px) {
 .popup_inner { margin:20px auto; width:95%; }
}

@media all and (max-width: 940px) {
 .popup_inner .con_inner .auth_type li { float:unset; width:100%; }
 .popup_inner .con_inner .auth_type li.auth_self { margin:0 0 20px; }
}

@media all and (max-width: 650px) {
 .popup_inner .popup_con { padding-left:20px; padding-right:30px; }
 .popup_inner .con_inner .join_form dd input[type=text], .popup_inner .con_inner .join_form dd input[type=password], .popup_inner .con_inner .join_form dd.full_input input[type=text], .popup_inner .con_inner .join_form dd.full_input input[type=text] { width:100%; }
}

@media all and (max-width: 600px) {
 .popup_inner .important:before { left:110%; }
 .popup_inner .important.txt_right { padding-right:10px; }
 .popup_inner .important.txt_right:before { left:unset; right:0; }
 .popup_inner .point_color { margin-top:5px; line-height:1.2; }

 .popup_inner .con_inner .join_form { margin-left:15px; }
 .popup_inner .con_inner .join_form dt, .popup_inner .con_inner .join_form dd { float:unset; display:block; width:100%; line-height:1.2; padding-top:10px; }
 .popup_inner .con_inner .join_form dt span { padding-left:0; }
}

@media all and (max-width: 470px) {
 .popup_inner .tab_wrap li a { font-size:16px; }
 .popup_inner .con_inner .auth_type li { padding-left:10px; padding-right:10px; }
 .popup_inner .con_inner .auth_type li.auth_self { height:unset; }
 .popup_inner .con_inner .auth_type li.auth_ipin { margin-bottom:20px; }

 .popup_inner .con_inner .login_h4 span.txt_right { position:relative; right:unset; bottom:unset; text-align:right; display:block; }
}

@media all and (max-width: 330px) {
 .popup_inner .tab_wrap li a { font-size:14px; }
 .popup_inner .btn_area > a { width:100%; padding:0; }
 .popup_inner .con_inner .join_form dd.full_input > div input[type=text], .popup_inner .con_inner .join_form dd.phone_num input[type=text] { width:100%; }
 .popup_inner .con_inner .join_form dd.phone_num > span { display:block; text-align:center; }
 .popup_inner .con_inner .join_form dd.full_input > div button { width: 101%; box-sizing: border-box; margin-top: 5px; }
}