@charset "UTF-8";

/*** CSS Style 사용자 전용                                                    ***/
/*** 디자인통에서 제공하는 스킨 패치시 임의 파일에 기술한 내용은 삭제 되며,   ***/
/*** 해당 문서의 내용은 삭제 되지 않습니다.                                   ***/




/** 레이아웃 **/
#wrap #header_wrap .headerBanner, #wrap #header_wrap .category, #wrap #header_wrap .headerContents ul .type { display: none; }
#wrap #header_wrap, #wrap #header_wrap .headerContents { background-color: transparent; }
#wrap #contents { padding: 0 !important; }
#wrap #container #contents .sub_content { max-width: 100%; padding: 0; }
#footer_wrap { font-size: 0; }


/** 로그인 **/
.backgroundBanner { display: flex; justify-content: center; width: 50%; overflow: hidden; }
.backgroundBanner img { min-width: 750px; }
.member_wrap { position: absolute; left: calc(50% + 300px); top: 50%; transform: translate(-50%, -50%); max-width: 300px; transition-duration: 0.5s; }
.member_wrap .member_tit h2 { padding: 0; font-size: 0; line-height: 0; }
.member_wrap .member_tit h2 a { pointer-events: none; }
.member_wrap .member_tit h2 img { max-width: 120px;  }
.member_cont { padding: 0; border: none; }
.member_cont .member_login_box { margin-top: 30px; }
.member_cont .member_login_box h3 { display: none; }
.member_cont .member_login_box .login_input_sec input { border-color: #f5f4f4; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; }
.member_cont .member_login_box .login_input_sec div:nth-child(2) { margin-top: 5px; text-align: right; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; }
.member_cont .member_login_box .login_input_sec div:nth-child(2) .form_element label { background-size: 15px; background-position: 1px 1.5px; padding: 0 0 0 20px; cursor: pointer; transition-duration: 0.5s; }
.member_cont .member_login_box .login_input_sec div:nth-child(2) .form_element label:hover { color: #777; }
.member_cont .member_login_box .login_input_sec div #loginId { border-radius: 5px 5px 0 0; }
.member_cont .member_login_box .login_input_sec div #loginPwd { border-radius: 0 0 5px 5px; }
.member_cont .member_login_box .login_input_sec button { margin-top: 20px; border-radius: 5px; background-color: #84388e !important; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #fff; letter-spacing: 0em; }
.member_cont .member_login_box .login_input_sec button:hover { background-color: #722b7b !important; }
.member_cont .member_login_box .id_chk { display: none; }
.member_menu { display: inline-block; width: 100%; margin-top: 10px; }
.member_menu .left { float: left; }
.member_menu .right { float: right; }
.member_menu button { width: auto; height: auto; font-weight: normal; background-color: transparent; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; border: none; }
.member_menu button:hover { background-color: transparent; border: none; color: #777; }
.member_sns_login { clear: both; margin-top: 40px; background-color: transparent; }
.member_sns_login .title { font-size: 0; margin: 0; }
.member_sns_login .title::after { content: 'SNS계정 간편 로그인/회원가입 '; display: inline-block; width: 100%; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; text-align: center; }
.member_cont .nonmember_order_box h3 { font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; text-align: center; }
.member_cont .nonmember_order_box p { font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; }
.member_cont .nonmember_order_box .order_input_sec input { border-color: #f5f4f4; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; }
.member_cont .nonmember_order_box .order_input_sec input[name=orderNm] { border-radius: 5px 5px 0 0; }
.member_cont .nonmember_order_box .order_input_sec input[name=orderNo] { border-radius: 0 0 5px 5px; }
.member_cont .nonmember_order_box .order_input_sec button { margin-top: 20px; border-radius: 5px; background-color: #fff !important; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; }
.member_cont .nonmember_order_box .order_input_sec button:hover { background-color: #722b7b !important; color: #fff !important; }
@media screen and (max-width: 1500px) {
    .member_wrap { left: calc(50% + 250px); }
}


/** 모바일 로그인 **/
.mobile #wrap #header_wrap { display: none; }
.mobile .backgroundBanner { display: none; }
.mobile #footer_wrap { display: none; }
.mobile .location_wrap { display: none; }
.mobile .member_wrap .member_tit { display: inline-block; width: 100%; text-align: center; }
.mobile .member_wrap .member_tit h2 img { max-width: 85px; }
.mobile .member_wrap .member_cont { padding: 0; }
.mobile .member_wrap { position: fixed; left: 50%; }
.mobile .member_cont .member_login_box .login_input_sec input { font-size: 11px; height: 40px !important; }
.mobile .member_cont .member_login_box .login_input_sec button { height: 40px; margin-top: 15px; }
.mobile .member_menu button { font-size: 11px; }
.mobile .member_sns_login .title::after { font-size: 11px; }
.mobile .member_cont .nonmember_order_box { margin: 30px 0 0 0; }
.mobile .member_cont .nonmember_order_box .order_input_sec input { font-size: 11px; height: 40px; }
.mobile .member_cont .nonmember_order_box .order_input_sec button { margin-top: 15px; }
.mobile .member_cont .nonmember_order_box p { font-size: 11px; }
@media screen and (max-width: 1000px) {
    .mobile .member_cont .member_login_box h3 { display: block; font-family: 'NanumBarunGothic'; font-size: 13.33px; color: #333; letter-spacing: 0em; text-align: center; }
    .mobile .member_wrap { max-width: 630px; }
    .mobile #formLogin { float: left; width: 100%; max-width: 300px; }
    .mobile #formOrderLogin { float: right; width: 100%; max-width: 300px; }
}
@media screen and (max-width: 414px) {
    .mobile .member_cont .member_login_box h3 { display: none; }
    .mobile .member_wrap { max-width: 300px; }
    .mobile #formLogin { float: none; }
    .mobile #formOrderLogin { float: none; }
}
