/* ------------------------------------------------------------- */
/* ------------------- 공통으로 들어가는 부분  ------------------- */
/* ------------------------------------------------------------- */

/* 상세페이지 잘리는 부분 수정 */


.view-detail-wrap.align-center p{line-height: 0;}

*:not(.nocss b){font-family: 'SUIT';;  font-weight: normal;}
html {/* overflow-y:scroll; */  font-size: 16px; scroll-behavior: smooth;height: 100%; }
body{height: 100%;font-weight: 500;	color:#000;   width:100%;	line-height: 1.6;font-size:1rem ;/*overflow-x: hidden; */ }
.wrap{width: 100%; min-height: 100%; position: relative; overflow: hidden;}


/* clearfix */
.cf::before, .cf::after{display:block; content:''; clear: both;}


/* blind */
.blind{position: absolute; top: -9999999px; text-indent: -9999px; font-size: 0!important;}
.hidden{opacity: 0; visibility: hidden;}
.hide{position: absolute; width: 1px; height: 1px; margin:-1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

/* boundary */
[class*='bd']{width: 100%; margin-left:auto; margin-right:auto; position: relative;}
.bd-xss{max-width: 450px;}  .bd-xs{max-width: 640px;} .bd-sm{max-width: 1100px;} .bd-md{max-width: 1200px;} .bd-lg{max-width: 1400px;} .bd-xl{max-width: 1500px;}

/* responsive */
.mo_ver{display: none;}

/* font-size */
.xsmall{font-size:0.9em;}
.medium{font-size:1.225em;}

textarea{width: 100%;height: 150px;overflow-y: scroll;resize: none;border-radius: 4px;border:1px solid #ddd;padding:10px;outline: none;}


/* --------------------------------------------------
-------------------------filebox --------------------- */
.filebox .upload-name {  display: inline-block; height: 40px; padding: 0 10px; vertical-align: middle; border: 1px solid #dddddd; width: 78%; color: #999999;}
.filebox label { display: inline-block; padding: 10px 20px; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 40px; margin-left: 10px;    border-radius: 4px;}
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}

/*이미지*/
.filebox .upload-display { margin-bottom: 5px; }
.filebox .upload-thumb-wrap {  display: inline-block;   width: 54px;   padding: 2px;   vertical-align: middle;   border: 1px solid #ddd;   border-radius: 5px;   background-color: #fff; }
.filebox .upload-display img {display: block; max-width: 100%; width: 100% \9; height: auto;}
/* --------------------------------------------------
-------------------------check-label --------------------- */
/* 체크 */
.check{position: relative;}
.check-label { display: inline-block; position: relative;  font-size:1em; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;color:#666;
    text-align: left; padding-left:1.8em; vertical-align: middle;}
.check-label input {position: absolute;opacity: 0;cursor: pointer; visibility: hidden;}


/* 체크 크기 */
.check-label .checkmark {position: absolute; top:50%; -ms-transform:translateY(-50%); transform:translateY(-50%);
    left: 0; width: 1.2em; height: 1.2em; background-color: #fff; border-radius:.2em; border:1px solid #d1d1d1;}

.check-label:hover input ~ .checkmark { background-color: #fff;}
.check-label input:checked ~ .checkmark {border:1px solid #fdd001; background-color: #fdd001;}
.check-label .checkmark:after { content: ""; position: absolute; display: none;}
.check-label input:checked ~ .checkmark:after {display: block;}

/* 체크박스 */
.check-label .checkmark:after {left: .425em; top:.175em; width: .3em; height: 0.55em; border: solid #fff; border-width: 0 .2em .2em 0;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
/* 라디오 */
.check-label .checkmark.radio:after{ top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: #121212;}


/* --------------------------------------------------
-------------------------radio--------------------- */
/*radio_style*/
.radio_style{display: flex;    margin-left: 1px;}
.radio_style label {width: 20%;    display: block;position: relative;    box-sizing: border-box;    margin-left: -1px;}
.radio_style label:first-child [type="radio"] {border-radius: 4px 0 0 4px;}
.radio_style label:last-child [type="radio"] {border-radius:  0  4px 4px 0;}
.radio_style span {vertical-align: middle;position: absolute;left:50%;top:54%;transform: translate(-50%,-50%);display: block;color: #666;width: max-content;font-size: 0.9rem;    width: 90%;
    padding: 12px;  text-align: center;  word-break: break-all; line-height: 1.3;}
.radio_style [type="radio"] {vertical-align: middle;  appearance: none;  border: 1px solid #ddd;;  ;background: #fff;margin:0;border-radius: 0;padding: 24px;;}
.radio_style [type="radio"]:checked {border: 1px solid #71BF44;;background: #71BF44;}
.radio_style [type="radio"]:checked + span {color:#fff;font-weight: 600;}
.radio_style [type="radio"]:disabled {background-color: lightgray;  box-shadow: none;   cursor: not-allowed;}
.radio_style [type="radio"]:disabled + span {color:#fff;}

.radio_style .select_con{position:absolute;bottom:0; left:0;background: #fff;width: 100%;}


.double_check{font-size: 14px;color: #888; line-height: 1.3;}
.double_check p + p{margin-top: 4px;}

/* --------------------------------------------------
-------------------------text--------------------- */
/* 제품 수량 */
.count-container .num {width: 35px;color: #999;display: block; border: 1px solid #ddd;height: 35px;border-radius: 50%;text-align: center;cursor: pointer;position: relative;}
.count-container .num i{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);font-weight: 300; font-family: 'Pretendard'; font-size: 22px; }
.count-container  input {width:40px;border:none;font-weight: 600;text-align: center;}
.count-container {    display: flex;  align-items: center;}


/* --------------------------------------------------
-------------------------text--------------------- */
.text-left{text-align: left !important;}
.text-right{text-align: right !important;}
.text-center{text-align: center !important;}



/* --------------------------------------------------
-------------------------ellipsis--------------------- */
.ellipsis{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ellipsis2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
    -webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap:break-word; line-height:1.7;}
.ellipsis3{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
    -webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap:break-word; line-height:1.7;}


/* --------------------------------------------------
------------------------display------------------- */
.dis-block{display: block;}
.dis-in-block{display: inline-block;}
.dis-none{display: none;}

.fl-left{float:left;}
.fl-right{float: right;}



/* --------------------------------------------------
------------------------margin-------------------- */
.mt-0{margin-top:0 !important;} .mt-05{margin-top:5px;} .mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px !important;} .mt-4{margin-top:32px;} .mt-5{margin-top:40px;} .mt-6{margin-top:48px;} .mt-7{margin-top:56px;} .mt-8{margin-top:64px;} .mt-9{margin-top:72px;} .mt-10{margin-top:80px;}
.mb-0{margin-bottom:0 !important;} .mb-1{margin-bottom:8px !important;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;} .mb-4{margin-bottom:32px;} .mb-5{margin-bottom:40px;} .mb-6{margin-bottom:48px;} .mb-7{margin-bottom:56px;} .mb-8{margin-bottom:64px;} .mb-9{margin-bottom:72px;} .mb-10{margin-bottom:80px;}
.mr-0{margin-right:0;} .mr-1{margin-right:8px;} .mr-2{margin-right:16px;} .mr-3{margin-right:24px;} .mr-4{margin-right:32px;} .mr-5{margin-right:40px;} .mr-6{margin-right:48px;} .mr-7{margin-right:56px;} .mr-8{margin-right:64px;} .mr-9{margin-right:72px;} .mr-10{margin-right:80px;}
.ml-0{margin-left:0;} .ml-1{margin-left:8px;} .ml-2{margin-left:16px;} .ml-3{margin-left:24px;} .ml-4{margin-left:32px;} .ml-5{margin-left:40px;} .ml-6{margin-left:48px;} .ml-7{margin-left:56px;} .ml-8{margin-left:64px;} .ml-9{margin-left:72px;} .ml-10{margin-left:80px;}



/* --------------------------------------------------
------------------------padding------------------- */
.pt-0{padding-top:0;} .pt-1{padding-top:8px;} .pt-2{padding-top:16px;} .pt-3{padding-top:24px;} .pt-4{padding-top:32px;} .pt-5{padding-top:40px;} .pt-6{padding-top:48px;} .pt-7{padding-top:56px;} .pt-8{padding-top:64px;} .pt-9{padding-top:72px;} .pt-10{padding-top:120px;}
.pb-0{padding-bottom:0 !important;} .pb-1{padding-bottom:8px;} .pb-2{padding-bottom:16px;} .pb-3{padding-bottom:24px;} .pb-4{padding-bottom:32px;} .pb-5{padding-bottom:40px;} .pb-6{padding-bottom:48px;} .pb-7{padding-bottom:56px;} .pb-8{padding-bottom:64px;} .pb-9{padding-bottom:72px;} .pb-10{padding-bottom:120px;}
.pr-0{padding-right:0;} .pr-1{padding-right:8px;} .pr-2{padding-right:16px;} .pr-3{padding-right:24px;} .pr-4{padding-right:32px;} .pr-5{padding-right:40px;} .pr-6{padding-right:48px;} .pr-7{padding-right:56px;} .pr-8{padding-right:64px;} .pr-9{padding-right:72px;} .pr-10{padding-right:80px;}
.pl-0{padding-left:0;} .pl-1{padding-left:8px;} .pl-2{padding-left:16px;} .pl-3{padding-left:24px;} .pl-4{padding-left:32px;} .pl-5{padding-left:40px;} .pl-6{padding-left:48px;} .pl-7{padding-left:56px;} .pl-8{padding-left:64px;} .pl-9{padding-left:72px;} .pl-10{padding-left:80px;}


/* --------------------------------------------------
------------------------revers------------------- */
.revers{flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;}



/* --------------------------------------------------
------------------------button------------------ */

.button{position: relative;}
.button button{ -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}



/* --------------------------------------------------
------------------------checkbox------------------ */
.check-mark{cursor: pointer;}
.check-mark > input{position: absolute; box-sizing: border-box; width: 20px; height: 20px; vertical-align: top; border:0;-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    opacity: 0; }
.check-mark em{display: inline-block; position: relative; font-size: 14px; padding-left: 30px; text-align: left; box-sizing: border-box;vertical-align: top; line-height: 19px;}
.check-mark em::before{border: 1px solid #ddd; background-color:#fff; content: ""; display: block; left: 0; position: absolute; width: 20px; height: 20px;}
.check-mark em::after{content: ""; display: block; position: absolute;}
.check-mark input:checked + em::before{background-color: #E2C344; border-color: #E2C344}
.check-mark input:checked + em::after{width: 11px; height: 6px; top: 5px; left: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}


/* --------------------------------------------------
------------------------radiobox------------------ */
.check-mark em.radio::before{border-radius: 50%;}
.check-mark input:checked + em.radio::before{background-color: #18b0e2; border-color: #18b0e2}
.check-mark input:checked + em.radio::after{width: 10px;height: 10px; left: 5px; top: 5px; border-radius: 50%;background: #fff; }




/* 페이지네이션 */
.pagination{text-align: center; margin-top: 60px; width: auto; font-size: 0;}
.pagination .page a{display: inline-block; height: 34px; font-weight: bold; font-size: 15px; line-height: 34px; cursor:pointer;
    box-sizing: border-box; /* border: 1px solid #ddd; */ vertical-align: top; text-align: center; margin: 0 7px;  }
.pagination .page a + a{margin-left: 20px;}
.pagination .page a.active, .pagination .page a:hover{color:#E2C344; border-bottom: 2px solid;}

/* loading */
.loading{width:100%;height:100%;position:fixed;left:0px;top:0px;background:#fff;opacity:0.5;z-index:9999;display:none; /* 이 값으로 레이어의 위치를 조정합니다. */}
.loading_img{position:absolute; left: 50%; top: 50%; width: 200px; height: 200px; transform: translateX(); transform: translate(-50%,-50%)}


#content img{display: inline-block;}

/* 돋보기 */
.img-magnifier-glass {
    position: absolute;
    border: 3px solid #000;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 300px;
    height: 300px;
}


/* --------------------------------------------------
------------------------inputbox------------------ */
/* form input{width: 100%;} */
/* form input[type=text],form input[type=password]{border: none; outline: none;background-color: #fff; border: 1px solid #ddd; padding: 2px 8px; width: 100%; height: 50px; line-height: 50px; border-radius: 3px; } */
/* form input{ height:40px;} */
form input[type=text]:disabled{background-color:#dcdee1; color:#939496;}
form input[type=text], .form input[type=password]{background-color:#fff;border:1px solid #ddd; width: 100%;padding:15px}
form input[type=button]{font-weight:700; outline: none; border:0; border-radius: 4px; cursor: pointer; padding-left:24px; padding-right:24px;}
form input.btn-default{background-color: #fff;  border: 1px solid #ddd;}

input.input-min{max-width: 48px;}
input.input-xs{max-width: 128px;}
input.input-sm{max-width: 360px}
input.input-md{max-width: 480px;}
input.input-lg{max-width: 100%;}



/* --------------------------------------------------
---------------------grid system------------------ */
.row {margin-left:-16px; margin-right:-16px;}
.row-too-short{margin-left:-2px; margin-right:-2px;}
.row-short{margin-left:-8px; margin-right:-8px;}
.row-wide{margin-left:-32px; margin-right:-32px;}
.row-too-wide{margin-left:-48px; margin-right:-48px;}

[class*='row']:before, [class*='row']:after{display: table; content: " "; clear: both;}

.row > [class*='col']{padding-right: 16px; padding-left: 16px;}
.row-too-short > [class*='col']{padding-right: 2px; padding-left: 2px;}
.row-short > [class*='col']{padding-right: 8px; padding-left: 8px;}
.row-wide > [class*='col']{padding-right: 32px; padding-left: 32px;}
.row-too-wide > [class*='col']{padding-right:48px; padding-left:48px;}

.col-xs-1, .col-sm-1, .col-md-1, .col-xs-2, .col-sm-2, .col-md-2, .col-xs-3, .col-sm-3, .col-md-3, .col-xs-4, .col-sm-4, .col-md-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-xs-6, .col-sm-6, .col-md-6, .col-xs-7, .col-sm-7, .col-md-7, .col-xs-8, .col-sm-8, .col-md-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-xs-10, .col-sm-10, .col-md-10, .col-xs-11, .col-sm-11, .col-md-11, .col-xs-12, .col-sm-12, .col-md-12 {
    position:relative;
    min-height:1px;
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left;}

.col-xs-12 {width:100%;}
.col-xs-11 {width:91.66666667%;}
.col-xs-10 {width:83.33333333%;}
.col-xs-9 {width:75%;}
.col-xs-8 {width:66.66666667%;}
.col-xs-7 {width:58.33333333%;}
.col-xs-6 {width:50%;}
.col-xs-5 {width: 41.66666667%;}
.col-xs-4 {width: 33.33333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66666667%;}
.col-xs-1 {width: 8.33333333%;}



.col-sm-12 {width: 100%;}
.col-sm-11 {width: 91.66666667%;}
.col-sm-10 {width: 83.33333333%;}
.col-sm-9 {width: 75%;}
.col-sm-8 {width: 66.66666667%;}
.col-sm-7 {width: 58.33333333%;}
.col-sm-6 {width: 50%;}
.col-sm-5 {width: 41.66666667%;}
.col-sm-4 {width: 33.33333333%;}
.col-sm-3 {width: 25%;}
.col-sm-2 {width: 16.66666667%;}
.col-sm-1 {width: 8.33333333%;}



.col-md-12 {width: 100%;}
.col-md-11 {width: 91.66666667%;}
.col-md-10 {width: 83.33333333%;}
.col-md-9 {width: 75%;}
.col-md-8 {width: 66.66666667%;}
.col-md-7 {width: 58.33333333%;}
.col-md-6 {width: 50%;}
.col-md-5 {width: 41.66666667%;}
.col-md-4 {width: 33.33333333%;}
.col-md-3 {width: 25%;}
.col-md-2 {width: 20%;}
.col-md-1 {width: 8.33333333%;}




/* ********************************************* *
 * 1500px max
 * ********************************************* */
@media (max-width:1500px){




}

/* ********************************************* *
 * 1440px max
 * ********************************************* */
@media (max-width:1440px){

    [class*='bd']{padding-left: 16px; padding-right:16px;}



}
/* ********************************************* *
* 1024px max
* ********************************************* */
@media (max-width:1200px){



    .row-wide > [class*='col'] {padding-right: 15px; padding-left: 15px;}
}


/* ********************************************* *
* 1024px max
* ********************************************* */
@media (max-width:1024px){

    html{font-size: 16px;}

    /* responsive */
    .shopping_tabSet .mo_ver{display: block;}
    .shopping_tabSet .pc_ver{display: block;}




}


@media (max-width:960px)
{
    .row > [class*='col'] {
        padding-right: 8px;
        padding-left: 8px;
    }
    .row {  margin-left: -8px; margin-right: -8px;}


    .col-sm-12 {width:100%;}
    .col-sm-11 {width:91.66666667%;}
    .col-sm-10 {width:83.33333333%;}
    .col-sm-9 {width:75%;}
    .col-sm-8 {width:66.66666667%;}
    .col-sm-7 {width:58.33333333%;}
    .col-sm-6 {width:50%}
    .col-sm-5 {width: 41.66666667%;}
    .col-sm-4 {width: 33.33333333%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.66666667%;}
    .col-sm-1 {width: 8.33333333%;}

}
/* ********************************************* *
* 789px max
* ********************************************* */

@media (max-width:789px)
{


    .col-xs-12 {width:100%;}
    .col-xs-11 {width:91.66666667%;}
    .col-xs-10 {width:83.33333333%;}
    .col-xs-9 {width:75%;}
    .col-xs-8 {width:66.66666667%;}
    .col-xs-7 {width:58.33333333%;}
    .col-xs-6 {width:50%;}
    .col-xs-5 {width: 41.66666667%;}
    .col-xs-4 {width: 33.33333333%;}
    .col-xs-3 {width: 25%;}
    .col-xs-2 {width: 16.66666667%;}
    .col-xs-1 {width: 8.33333333%;}

}
/* ********************************************* *
* 500px max
* ********************************************* */

@media (max-width:550px)
{
}

/* ********************************************* *
* 400px max
* ********************************************* */

@media (max-width:400px)
{

    .mt-5 {margin-top: 20px;}

    .row > [class*='col'] {
        padding-right: 8px;
        padding-left: 8px;
    }
    .row {  margin-left: -8px; margin-right: -8px;}

    html {
        font-size: 15px;
    }

}