/*
@font-face{
    font-family:"NotoSansKR";
    src: url(/include/fonts/NotoSansKR-Bold.woff2) format("woff2");
    font-weight: bold;
}
@font-face{
    font-family:"NotoSansKR";
    src: url(/include/fonts/NotoSansKR-Medium.woff2) format("woff2");
    font-weight: 500;
}
@font-face{
    font-family:"NotoSansKR";
    src: url(/include/fonts/NotoSansKR-Regular.woff2) format("woff2");
    font-weight: normal;
}
@font-face{
    font-family:"NotoSansKR";
    src: url(/include/fonts/NotoSansKR-Light.woff2) format("woff2");
    font-weight: 300;
}
*/

@font-face{
    font-family:"NotoSansKR";
    src: url(/include/fonts/NotoSans-Regular.woff2) format("woff2");
    font-weight: normal;
}

@font-face{
    font-family:"Inter";
    src: url(/include/fonts/Inter-Regular.woff2) format("woff2");
    font-weight: normal;
}

@font-face{
    font-family:"JetBrainsMono";
    src: url(/include/fonts/JetBrainsMono-Regular.woff2) format("woff2");
    font-weight: normal;
}

*{box-sizing:border-box;}

:root{
    --error-color:#e32d1d;
    --black-color:#191919;
}

html,body{
    margin:0 auto; width:100%; height:100%; padding:0; background-color:#ffffff;box-sizing:border-box;
    letter-spacing:-0.5px; font-size:13px; color:#111111; font-family:NotoSansKR;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,figcaption,span {
    margin:0; padding:0; letter-spacing:-0.5px;
}
body,html,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,p hr,button,input,form,fieldset,table,caption,th,td,header,nav,section,article,aside,footer,textarea {
    margin:0; padding:0;
}

input:focus{ outline-offset:0px; outline:none; }

a{text-decoration:none;color:#333333;}

.no_select{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.btn_icon_right{ position:absolute; width:18px; height:18px; right:10px;}

.btn_df_black{ position:relative; padding:0 15px;font-size:15px; height:35px; background:var(--black-color); color:#ffffff; border:0; border-radius:5px; cursor:pointer;}
.btn_df_black > span{ margin-right:4px;}
.btn_df_black > img, span{ vertical-align:middle;}
.btn_df_black .arrow{ position:absolute; width:18px; height:18px; right:10px; display:inline-block; background:url("/images/comm/c-btn-arrow_wb.svg") no-repeat; background-size:18px 18px; }

.btn_sm_black{ position:relative; padding:2px 15px 0 15px;font-size:12px; height:20px; background:var(--black-color); color:#ffffff; border:0; cursor:pointer; border-radius:5px;}
.btn_sm_black > span{ margin-right:4px;}
.btn_sm_black > img, span{ vertical-align:middle;}
.btn_sm_black .arrow{ position:absolute; width:18px; height:18px; right:10px; display:inline-block; background:url("/images/comm/c-btn-arrow_wb.svg") no-repeat;background-size:15px 15px; }

.btn_sm_white{ position:relative; padding:2px 15px 0 15px;font-size:12px; height:20px; background:#ffffff; color:var(--black-color); border:1px solid var(--black-color); border-radius:5px; cursor:pointer;}
.btn_sm_white > span{ margin-right:4px;}
.btn_sm_white > img, span{ vertical-align:middle;}
.btn_sm_white .arrow{ position:absolute; width:18px; height:18px; right:10px; display:inline-block; background:url("/images/comm/c-btn-arrow_wb.svg") no-repeat;background-size:15px 15px; }

.btn_df_white{position:relative; padding:0 20px;font-size:15px; height:30px; background:#ffffff; color:var(--black-color); border:1px solid var(--black-color); border-radius:5px; cursor:pointer;}
.btn_df_white > span{ margin-right:4px;}
.btn_df_white > img, span{ vertical-align:middle;}
.btn_df_white .arrow{ position:absolute; width:18px; height:18px; right:10px; display:inline-block; background:url("/images/comm/c-btn-arrow.svg") no-repeat; }
.btn_df_white .icon{ position:absolute; width:30px; height:30px; left:10px; top:50%; transform: translateY(-50%); }
.btn_df_white .icon img{ width:100%; height:100%; }

.radio_style01{
    display:inline-block; position: relative; padding:1px 0 0 20px; margin:2px 10px 0 0; cursor: pointer;font-size:14px; color:#141a1f;line-height:14px; vertical-align:top;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

.radio_style01 input[type="radio"]{ position: absolute; opacity: 0;cursor: pointer; height: 0; width: 0; margin:0;padding:0; }
.radio_style01 .checkmark{
    position:absolute; width:16px; height:16px; top:0; left:0; border:1px solid #e6e6e6; box-sizing:border-box; border-radius:50%; background:url('/images/comm/c-check-gray.svg') no-repeat center;background-size:10px; 
}
.radio_style01:hover input[type="radio"] ~ .checkmark{ }
.radio_style01 input[type="radio"]:checked ~ .checkmark{ }
.radio_style01 input[type="radio"]:checked ~ .checkmark:after{ display: block; }
.radio_style01 input[type="radio"]:disabled ~ .checkmark{ background:#fafafa; }

.radio_style01 .checkmark:after {
    display:none; content: ""; position: absolute; width:16px; height:16px; border-radius:50%; border:0;
    top:-1px; left:-1px; background: url("/images/comm/c-check-wh.svg") no-repeat center #1d1b1c; background-size:10px; 
}

.radio_style02{
  display:inline-block; position: relative; padding:0 0 0 27px; margin:0; cursor: pointer;font-size:14px; color:#141a1f;line-height:20px; vertical-align:top;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.radio_style02 input[type="radio"]{ position: absolute; opacity: 0;cursor: pointer; height: 0; width: 0; margin:0;padding:0; }
.radio_style02 .checkmark{
    position:absolute; width:20px; height:20px; top:0; left:0; border:1px solid #e6e6e6; box-sizing:border-box; border-radius:50%;
}
.radio_style02:hover input[type="radio"] ~ .checkmark{ }
.radio_style02 input[type="radio"]:checked ~ .checkmark{ }
.radio_style02 input[type="radio"]:checked ~ .checkmark:after{ display: block; }

.radio_style02 .checkmark:after {
    display:none; content: ""; position: absolute; width:20px; height:20px; border-radius:50%; border:0;
    top:-1px; left:-1px; background: url("/images/comm/c-radio-bk.svg") no-repeat center #1d1b1c;
}

.check_style01{
    position:relative; display:inline-block; padding:1px 0 0 20px; margin:0 10px 0 0; cursor:pointer; font-size:12px; color:#1d1b1c; line-height:14px; vertical-align:top;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.check_style01 input{ position:absolute; opacity:0; cursor:pointer; height:0; width:0; margin:0;padding:0; }
.check_style01 .checkmark{
    position: absolute; width:16px; height:16px; border:1px solid #e6e6e6;box-sizing:border-box; border-radius:3px; top:0; left:0; background:#ffffff;
    background: url("/images/comm/c-check-gray.svg") no-repeat center;
}
.check_style01:hover input ~ .checkmark{ }
.check_style01 input:checked ~ .checkmark{ }
.check_style01 input:checked ~ .checkmark:after{ display: block; }
.check_style01 input:disabled ~ .checkmark{ background:#fafafa; }
.check_style01 .checkmark:after {
    display:none; content: ""; position: absolute; width:16px; height:16px; border-radius:3px; border:0;
    top:-1px; left:-1px; background: url("/images/comm/c-check-wh.svg") no-repeat center #1d1b1c;
}
.check_style01.disabled{color:#aaaaaa;}
.check_style01.disabled .checkmark{ background:#fafafa; }

.input_style01{
    padding:12px 15px; border:1px solid #e6e6e6; border-radius:5px; box-sizing:border-box;
    font-weight:400; font-size:15px; color:#1d1b1c; background:#ffffff; cursor:text; outline:none; 
}
.input_style01::placeholder{font-weight:300; color:#b9b9b9; font-size:14px;}
.input_style01.error_box{ border:1px solid #e32d1d; }

.select_style01{
    border-radius:0; /* 아이폰 사파리 보더 없애기 */
    -webkit-appearance:none; /* 화살표 없애기 for chrome*/
    -moz-appearance:none; /* 화살표 없애기 for firefox*/
    appearance:none; /* 화살표 없애기 공통*/
}
.select_style01::-ms-expand {
    display:none; /* 화살표 없애기 for IE10, 11*/
}

.select_style01{
    padding:7px 10px; border:1px solid #e6e6e6; background:#ffffff; border-radius:5px; outline:none; font-weight:400; font-size:12px;
    background-image: url("/images/comm/e_c-arrow_down.png"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
    appearance:none;
}
.select_style01.error_box{ border:1px solid #e32d1d; }
.select_style01 option{color:#b9b9b9;}

.select_style01:disabled{ cursor: no-drop; color:#b9b9b9; background:#fafafa; }


.btn_debug{ display:inline-block; padding:3px 10px; font-size:10px; background:#ffffff;border:1px solid #aaaaaa; }
.btn_drag{ display:inline-block; padding:5px 0; font-size:11px; background:#ffffff; color:#ffffff; width:90px; border:0; margin:0 0 2px 0; }

/* TIP */

/* MODAL */
/* display:none; visibility:hidden; opacity:0; */
.modal_bg{
    position:fixed; width:100%; height:100vh; top:0; left:0; background:rgba(0,0,0,0.1); z-index:990;
    -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; transition:all 0.4s;
    display:none;
}

.modal_df{
    position:absolute;z-index:121000;left:50%;top:50%;transform:translate(-50%, -50%);background: #ffffff; margin:auto;
    -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s;
    display:none;
}
.modal_df .close{position:absolute;right:15px;top:15px;cursor:pointer;z-index:122000;}


.modal_nor{
    position:fixed; width:100%; height:100%; left:0;top:0;z-index:90000; transition:all .3s ease-out;
    visibility:hidden; opacity:0;
}
.modal_nor .modal_nor_bg{ position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1; }
.modal_nor .modal_nor_cts{ position:relative; background:#ffffff; z-index:2; left:50%;top:50%; transform:translate(0,-50%);overflow:hidden;opacity:1; }
.modal_nor .modal_nor_cts .btn_modal_close{ position:absolute; top:20px; right:20px; z-index:3; cursor:pointer; }

.modal_nor .modal_nor_cts .btn_modal_close img { width:20px;height:20px;}

.modal_pop_inner{ position:relative; width:100%; max-height:800px; padding:40px 20px 20px 20px; background:#ffffff; }
.modal_pop_inner .modal_title{ font-weight:600; font-size:25px; text-align:center; padding-bottom:40px; }
.modal_pop_inner .modal_desc{ text-align:center; padding:0 0 30px 0;line-height:20px; font-size:14px;}


.modal_alert{width:100%; height:100%; margin:auto;}
.modal_alert .title{font-size:25px;font-weight:600;text-align:center;padding:50px 50px 20px 50px;}
.modal_alert .icon_alert{width:100%;text-align:center;}
.modal_alert .icon_alert img{width:35px;}
.modal_alert .desc{font-size:14px;text-align:center;padding:20px 30px;}
.modal_alert .desc .msg{}
.modal_alert .btns{width:100%;padding:20px 0;text-align:center;}
.modal_alert .btns button{width:100px; height:35px;}

/*
.modal_basket{}
.modal_basket > .subject{display:flex;align-items:center;justify-content:center;padding:50px 0 20px 0;}
.modal_basket > .subject .title{font-size:22px;font-weight:600;text-align:left;}
.modal_basket > .subject img{height:35px;margin-right:10px;text-align:right;vertical-align:middle;}
.modal_basket > .desc{width:90%;text-align:center;margin:auto;}
.modal_basket > .desc .desc01{font-size:15px;}
.modal_basket > .desc .desc02{font-size:13px;margin:15px 0;line-height:19px;}
.modal_basket > .desc .desc02 .mark{background:#000000;color:#ffffff;}
.modal_basket > .desc .desc02 .mark2{background:#ffa300;color:#ffffff;}

.modal_basket .input_box{width:400px;margin:auto;}
.modal_basket .basket_box{display:flex;padding-top:10px;align-items:center;border-bottom:1px solid #000000;}
.modal_basket .basket_box > .title{width:70px;text-align:center;font-weight:700;}
.modal_basket .basket_box > .desc{width:calc(100% - 75px);}
.modal_basket .basket_box > .desc input{width:100%;padding:10px 12px; background:#fff; border:0;}
.modal_basket .basket_box > .desc input::placeholder{color:#cccccc;}
.modal_basket .agree{margin:10px auto 10px auto;width:90%;text-align:center;}
.modal_basket .agree a{color:#ffa300}
.modal_basket .btns{margin:0 0 10px 0;text-align:center;}

.modal_basket .agree_box{position:absolute;background:#ffffff;top:0;left:0;width:100%;height:100%;border-radius:10px;padding:20px 40px;box-sizing:border-box;display:none;}
.modal_basket .agree_box .close{ position:absolute; top:20px; right:20px; z-index:3; cursor:pointer;}
.modal_basket .agree_box .close img { width:20px;height:20px;}
*/

.modal_loading{
    position:absolute;z-index:125000;left:0;top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);
}