@charset "UTF-8";

:root {
  --colorWhite:#fff;
  --colorBlack:#000;
  --colorBlack2:#424242;
  --colorFontBlack:#222222;
  --colorDarkGray:#616161;
  --colorFontGray:#767676;
  --colorGray:#ccc;
  --colorLightGray:#E0E0E0;
  --colorBgGray:#f5f5f5;
  --colorDarkNavy:#0e1047;
  --colorNavy:#083789;
  --colorBlue:#005dab;
  --colorLightBlue:#43d4e7;
  --colorDarkGreen:#256300;
  --colorGreen:#86b81b;
  --colorLightGreen:#ABCC69;
  --colorOrange:#f39800;
  --colorYellow:#fcc800;
  --colorLightYellow:#fff8e0;
 /* --colorRedOrange:#ef4125;
  --colorLightBrown:#876c00;*/
  --colorRed:#EF2B2A;
}
/********* common_layout *********/
html, body {height:100%;}
body {line-height: 1.5; color: #333333; font-family: 'Pretendard', 'sans-serif'; font-size: 16px; min-width: 280px; transition: 0.3s ease-in-out;}
.hide {position: absolute; left: -9999px; overflow: hidden; width: 1px; height: 1px; line-height: 1px; font-size: 1px;}
.wrapper {position: relative; z-index: 1; min-height: 100%;}
#real_contents {width: 100%;}
.container {position: relative; max-width: 1600px; margin: 0 auto;}

.ft_gmarket {font-family: 'GmarketSans','sans-serif';}
.ft_Pretendar {font-family: 'Pretendard','sans-serif';}

/* skip navi */
.skip_navi {position:absolute; z-index:999999; width:100%; left:0; top:0; text-align:center;}
.skip_navi a {display:block; position:absolute; left:0; top:-9999px; z-index:1; width:100%; height:40px; line-height:40px; background-color: #333; color:#fff; font-size:20px; font-weight:700;}
.skip_navi a:hover, .skip_navi a:focus {top:0;}

.tab_cont {display: none;}
.tab_cont.on {display: block;}

/* select 기본 화살표 없애기 */
select {
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance:none; /* 화살표 없애기 for chrome*/
    -moz-appearance:none; /* 화살표 없애기 for firefox*/
    appearance:none /* 화살표 없애기 공통*/
}

select::-ms-expand{
    display:none /* 화살표 없애기 for IE10, 11*/
}

/* 기본 */
.dis_bl {display:block !important}
.dis_inb {display:inline-block !important}
.dis_in {display:inline !important}
.flex {display:flex !important}
.inflex {display:inline-flex !important}
.fwrap {flex-wrap:wrap}
.ag_t {align-items:flex-start}
.ag_c {align-items:center}
.ag_b {align-items:flex-end}
.jc_b {justify-content:space-between}
.jc_c {justify-content:center}

/* 폰트색상, 굵기, 정렬, 스크롤영역 및 스크롤바 */
.s_txt {font-size:0.86em}
.c_black {color:var(--colorFontBlack) !important}
.c_gray {color:var(--colorFontGray) !important}
.c_dnavy {color:var(--colorFontNavy) !important}
.c_navy {color:var(--colorNavy) !important}
.c_blue {color:var(--colorBlue) !important}
.c_green {color:var(--colorGreen) !important}
.c_red {color:var(--colorRed) !important}
.fw700 {font-weight:700 !important}
.fw500 {font-weight:500 !important}
.fw400 {font-weight:400 !important}
.tl {text-align:left !important}
.tc {text-align:center !important}
.tr {text-align:right !important}
.sup, .sub {font-size:11px}
.scroll_y {height:331px;overflow-y:auto}
.custom_bar::-webkit-scrollbar {width:6px;height:6px}
.custom_bar::-webkit-scrollbar-track {background-color:var(--colorBgGray);border-radius:6px}
.custom_bar::-webkit-scrollbar-thumb {background-color:var(--colorNavy);border-radius:6px}
.custom_bar::-webkit-scrollbar-thumb:hover {background-color:var(--colorBlue)}
i.icon {vertical-align:middle;transform:translateY(-1px)}
.g-bg { background: #fafafa; }

/* 간격 */
.mt0 {margin-top:0 !important}
.mt5 {margin-top:5px}
.mt10 {margin-top:10px}
.mt15 {margin-top:15px}
.mt20 {margin-top:20px}
.mt25 {margin-top:25px}
.mt30 {margin-top:30px}
.ml0 {margin-left:0 !important}
.ml5 {margin-left:5px}
.ml10 {margin-left:10px}
.ml15 {margin-left:15px}
.ml20 {margin-left:20px}
.ml25 {margin-left:25px}
.ml30 {margin-left:30px}
.mr0 {margin-right:0 !important}
.mr5 {margin-right:5px}
.mr10 {margin-right:10px}
.mr15 {margin-right:15px}
.mr20 {margin-right:20px}
.mr25 {margin-right:25px}
.mr30 {margin-right:30px}
.mb0 {margin-bottom:0 !important}
.mb5 {margin-bottom:5px}
.mb10 {margin-bottom:10px}
.mb15 {margin-bottom:15px}
.mb20 {margin-bottom:20px}
.mb25 {margin-bottom:25px}
.mb30 {margin-bottom:30px}

/* ========== 메인 레이어 팝업 ========== */
.pop_layer {position: fixed; z-index: 9999; top: 0; left: 0;}
.pop_layer .pop_box {width: 100%; height: 100%; background-color: #ffffff;}
.pop_layer .pop_box img {border: none;}
.pop_layer .pop_box p {font-weight: 400; font-size: 18px; line-height: 27px; color: #333333;}
.pop_layer .pop_btn_area {position: relative; overflow: hidden; padding: 8px 10px; background-color: #aaaaaa;}
.pop_layer .pop_btn_area .chk_each {vertical-align: middle;}
.pop_layer .pop_btn_area .chk_each label {display: inline-block; position: relative; font-family: 'CoreDream'; font-weight: 400; font-size: 14px; line-height: 24px; color: #ffffff; z-index: 1; padding-left: 20px; cursor:pointer; vertical-align: middle;}
.pop_layer .pop_btn_area .chk_each .vchkbox {display: block; position: absolute; left: 0; top: 50%; z-index: 1; width: 15px; height: 15px; margin: -7px 0 0; border: 1px solid #cacaca; background-color: #fff;}
.pop_layer .pop_btn_area .chk_each .vchkbox > i {display: none; color: #0562a9; margin-top: 1px; margin-left: 1px; font-size: 12px; font-weight: 700; text-align: center;}
.pop_layer .pop_btn_area .close {position: absolute; top: 50%; right: 8px; margin: -11px 0 0;}
.pop_layer .pop_btn_area .chk_each input:checked + label .vchkbox > i {display: block;}
.pop_layer .pop_btn_area .chk_each input:focus + label .vchkbox {outline:1px dotted #000; outline:-webkit-focus-ring-color auto 5px;}
/* ========== 메인 레이어 팝업 ========== */

/* ================== 로그인 ================== */
.login_cont_arae {}
.login_cont_arae .inner_box {width: 100%; max-width: 680px; background-color:#fafafa; margin: 50px auto; text-align: center; padding: 40px 80px; border-radius:8px; border: 1px solid var(--colorLightGray); }
.login_cont_arae .inner_box .title_area {margin: 0 0 30px 0;}
.login_cont_arae .inner_box .title_area .title {font-weight: 700; font-size: 32px; line-height: 44px; color:var(--colorBlack2)}
.login_cont_arae .inner_box .login_input_list_area {}
.login_cont_arae .inner_box .login_input_list_area .input_box {margin: 0 0 15px;}
.login_cont_arae .inner_box .login_input_list_area .input_box .inp_txt {height: 55px; border: 1px solid var(--colorLightGray); padding: 0 10px 0 53px; background-color:var(--colorWhite); background-position: left 23px center; background-repeat: no-repeat; font-weight: 400; font-size: 18px; line-height: 55px; border-radius: 5px;}
.login_cont_arae .inner_box .login_input_list_area .input_box .inp_txt::placeholder {color: var(--colorLightGray);}
.login_cont_arae .inner_box .login_input_list_area .input_box .inp_txt.id {margin: 0 0 10px; background-image: url('/images/common/id_icon.png');}
.login_cont_arae .inner_box .login_input_list_area .input_box .inp_txt.pas {background-image: url('/images/common/pas_icon.png');}
.login_cont_arae .inner_box .login_input_list_area .btn_default {display:block;width:100%}
.login_cont_arae .inner_box .login_input_list_area .btn_login {padding-top:20px;padding-bottom:20px}
.login_cont_arae .inner_box .login_input_list_area .login_etc_area { margin: 50px 0 0 0;}
.login_cont_arae .inner_box .login_input_list_area .login_etc_area .list {display: flex; justify-content: space-between; align-items: stretch;}
.login_cont_arae .inner_box .login_input_list_area .login_etc_area .list li { flex: 1; margin: 0 10px 0 0;}
.login_cont_arae .inner_box .login_input_list_area .login_etc_area .list li:last-child { margin: 0;}
.login_cont_arae .inner_box .login_input_list_area .login_etc_area .list .txt {margin-bottom:10px;font-weight: 400; font-size: 15px; line-height: 24px}
/* ================== 로그인 ================== */

/* ================== 아이디/비밀번호 찾기 ================== */
.id_pass_find_area {}
.id_pass_find_area > .list {}
.id_pass_find_area > .list > li {}
.id_pass_find_area > .list > li .box { border: 1px solid var(--colorLightGray); padding: 60px 15px; border-radius: 20px;}
.id_pass_find_area > .list > li .box_noline { padding: 60px 0;}
.id_pass_find_area .inner_box {width: 100%; max-width: 600px; margin: 0 auto; text-align: center; background: var(--colorWhite); border: 1px solid var(--colorLightGray); border-radius: 8px; padding: 40px; }
.id_pass_find_area .inner_box .title_area {margin: 0 0 24px 0;background-position: top center; background-repeat: no-repeat;}
/*.id_pass_find_area .inner_box .title_area.id {background-image: url('/images/common/find_id_icon.png');}
.id_pass_find_area .inner_box .title_area.pass {background-image: url('/images/common/find_pass_icon.png');}*/
.id_pass_find_area .inner_box .title_area .title {font-weight: 700; font-size: 24px; line-height: 36px; color:var(--colorBlack2);}
.id_pass_find_area .inner_box .text_area {font-size: 0;}
.id_pass_find_area .inner_box .text_area.mt { margin: 25px 0 0 0;}
.id_pass_find_area .inner_box .text_area.mb {margin-bottom:20px}
.id_pass_find_area .inner_box .text_area .text {font-weight: 400; font-size: 16px; line-height: 24px; color: var(--colorBlack2);}
.id_pass_find_area .inner_box .id_txt {display: inline-block; min-width: 300px; margin: 22px 0 0 0; border-top: 2px solid var(--colorBlack2); border-bottom: 1px solid var(--colorLightGray); padding: 0 10px; font-weight: 700; line-height: 77px;}
.id_pass_find_area .inner_box .table {border-top:2px solid var(--colorBlack2)}
.id_pass_find_area .inner_box .cont_btn_list_area {margin: 45px 0 0 0;}
.id_pass_find_area .inner_box .com_input_form_area {margin: 25px 0 0 0;}
.id_pass_find_area .inner_box .com_input_cont .input_table_cont .table_inner_box .table_area tbody tr th,
.id_pass_find_area .inner_box .com_input_cont .input_table_cont .table_inner_box .table_area tbody tr td {text-align: left;}

.id_pass_find_area p.text { font-weight: 500;font-size: 18px;line-height: 30px; }
.id_pass_find_area .text2 {font-weight: 400; font-size: 14px; line-height: 24px; color: #929292;}
/* ================== 아이디/비밀번호 찾기 ================== */

/* 회원가입 */
.join_form .table {border-top:2px solid var(--colorBlack2)}
.join_form .box { border: 1px solid var(--colorLightGray); padding: 60px 15px; border-radius: 20px;}
.mambership_app_list {}
.mambership_app_list .app_list_box {}
.mambership_app_list .app_list_box .text_box {height:250px;padding:20px;border:1px solid var(--colorLightGray);border-radius:10px 10px 0 0;overflow-y:auto}
.mambership_app_list .app_list_box .text_box .list_tit {margin-bottom:10px;font-weight:600}
.membership_agree_box {display:flex;align-items:center;justify-content:space-between;padding:20px 30px;border-radius:0 0 10px 10px;background-color:var(--colorBgGray);border:1px solid var(--colorLightGray);border-top:0}
.membership_agree_box .agree_txt {font-weight:700}
.membership_agree_box .radio_area {}
.membership_agree_box .radio_area .text {}
.membership_agree_box.all {padding:25px 30px;border:1px solid var(--colorLightGray);border-radius:10px;background-color:var(--colorWhite)}
.membership_agree_box.all .agree_txt {font-weight:700;font-size:17px}
.membership_agree_box.all .radio_list_area {}
.membership_agree_box.all .radio_area {}
.membership_agree_box.all .radio_area .text {}
.safety_area {padding-left:10px;position:absolute;left:375px;top:50%;transform:translateY(-50%)}
.safety_area:before {content: ''; position: absolute; top: 50%; left: 0; width: 12px; height: 10px; background-image: url('/images/common/safety_arr.png'); background-position: left center; background-size: cover; background-repeat: no-repeat; transform: translateY(-50%);}
.safety_area .inner_box {min-width:310px;border: 1px solid var(--colorLightGray); padding: 18px 25px; background-color:var(--colorWhite); border-radius: 10px;box-shadow:0 2px 11px rgba(0,0,0,0.1)}
.safety_area .inner_box .data_area {margin-bottom:2px;font-size: 0;}
.safety_area .inner_box .data_area .tit {display: inline-block; position: relative;  margin: 0 6px 0 0; padding: 0 7px 0 0; font-weight: 600; font-size: 0.9375rem; vertical-align: middle;}
.safety_area .inner_box .data_area .tit:after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 12px; background-color: #e1e1e1; transform: translateY(-50%);}
.safety_area .inner_box .data_area .txt {display: inline-block; padding: 0 56px 0 0; background-position: right center; background-repeat: no-repeat; font-weight: 700; font-size: 0.9375rem; vertical-align: middle;}
.safety_area .inner_box .data_area .txt.icon01 {color: #ed4040; background-image: url('/images/common/safety_icon01.png');}
.safety_area .inner_box .data_area .txt.icon02 {color: #3c79d5; background-image: url('/images/common/safety_icon02.png');}
.safety_area .inner_box .data_area .txt.icon03 {color: #48a644; background-image: url('/images/common/safety_icon03.png');}
.safety_area .inner_box .txt {font-weight: 400; font-size:14px; color: var(--colorFontGray);}

/* 레이어 팝업 */
.layer_pop {display:none;width:100%;height:100%;font-weight:400;color:var(--colorBlack2);background-color:rgba(0,0,0,0.5);position:fixed;left:0;top:0;z-index:10000}
.layer_pop .pop_position {display:flex;align-items:center;justify-content:center;height:100%}
.layer_pop .pop_wrap {width:100%;max-width:640px;border-radius:8px;overflow:hidden}
.layer_pop .pop_wrap.s1 {max-width:420px}
.layer_pop .pop_wrap.s2 {max-width:700px}
.layer_pop .pop_wrap.s3 {max-width:960px}
.layer_pop .pop_wrap.s4 {max-width:1200px}
.layer_pop .pop_wrap.s45 {max-width:1400px}
.layer_pop .pop_wrap.s5 {max-width:96%}
.layer_pop .pop_head {display:flex;justify-content:space-between;padding:15px 22px;color:var(--colorDarkGreen);background-color:#f1f6e5}
.layer_pop .pop_head .head_tit {font-size:20px;line-height:1.1;font-weight:700}
.layer_pop .pop_head .btn_pop_close {width:20px;height:20px;color:var(--colorDarkGreen);font-size:20px}
.layer_pop .pop_body {max-height:76vh;min-height:100px;background-color:var(--colorWhite);overflow-y:auto}
.layer_pop .pop_body .pop_cont {padding:22px}
.layer_pop .pop_body .pop_cont .cont_Btit {margin-bottom:15px;font-size:32px}
.layer_pop .pop_body .pop_cont .cont_sbtit {margin:30px 0 15px;font-size:24px}
.layer_pop .pop_body .pop_cont .cont_tit {margin-bottom:15px;font-size:18px}
.layer_pop .pop_body .pop_cont .text {margin-top:20px}
.layer_pop .pop_body .pop_cont .text.mt0 {margin-top:0}
/*.layer_pop .pop_body .table th {font-weight:400}
.layer_pop .pop_body .table td {}*/
.layer_pop .pop_tail {padding:15px 10px;background-color:var(--colorWhite)}
.layer_pop .pop_tail .cont_btn_list_area, 
.layer_pop .pop_tail .cont_btn_list_area > .list {margin-top:0}
.layer_pop .pop_tail .cont_btn_list_area .btn_default {max-width:205px;margin:0 auto}