@charset "UTF-8";
/*

        기본 공통 CSS

*/


@import url(layout.css);
@import url(modal.css);
/* 폰트 */

:root {
    --primary-font-color : #171717;
    --primary-blue-color : #1D7FF9;
    /* --primary-font-color : red; */
}

body,html {height:100%;}
body.hidden {overflow:hidden;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;word-break:keep-all;} body{position:relative;color:#333} html {-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;} img,fieldset{border:0} table{border-collapse:collapse} img {vertical-align:top;max-width:100%;} address{font-style:normal} a {color:inherit;text-decoration:none;} strong {font-weight:inherit;} .tac {text-align:center;} .tal {text-align:left} .tar {text-align:right;}

/* 스크롤바 설정*/
body {
    background-color: white;
    overflow-y: scroll;
    box-sizing: border-box;
    -ms-overflow-style: none;  /* IE and Edge */
}
body::-webkit-scrollbar{
    /* display: none; */
    width: 5px;
    height: 5px;
}

/* 스크롤바 막대 설정*/
body::-webkit-scrollbar-thumb{
    height: 5%;
    background-color: rgba(0, 0, 0, 0.4);
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;
}

/* 스크롤바 뒷 배경 설정*/
body::-webkit-scrollbar-track{
    background-color: transparent
}

html {font-size:10px;}
#WRAP {height:100%;font-family:"Pretendard","Malgun Gothic","AppleSDGothcNeo","AppleGothic", sans-serif;font-weight:400;font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* SKIP */
#SKIP {position:relative;z-index:99999999999;}
#SKIP a {display:block;overflow:hidden;width:1px;height:1px;margin-bottom:-1px;background:#151c2d;font-weight:500;font-size:16px;color:#fff;white-space:nowrap;text-align:center;}
#SKIP a:focus,
#SKIP a:active {position:absolute;width:100%;height:auto;margin-bottom:10px;padding:5px;left:0;top:0;box-sizing:border-box;}



/* layout common */
.maxWidth {margin:0 auto;max-width:1200px;width: 100%;}
.clear {clear:both;}
.blind {visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
@media screen and (max-width: 1445px){
    .maxWidth {margin:0 auto;}
}

.common__body { width: 1200px; }




/* FORM */
input[type=text],
input[type=password],
select,
textarea {font-family:"Pretendard","Malgun Gothic","AppleSDGothcNeo","AppleGothic", sans-serif;transition:all .3s ease-out;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;-webkit-border-radius:0;border-radius:0;-moz-border-radius:0;resize:none;}

button,
input[type=button],
input[type=submit] {font-family:"Pretendard","Malgun Gothic","AppleSDGothcNeo","AppleGothic", sans-serif;cursor: pointer; vertical-align: middle;appearance:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-webkit-border-radius:0;border-radius:0;-moz-border-radius:0;}

input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {border-color:#0d71d3 !important;}

input[type=text],
input[type=password],
select,
textarea {font-family:"Pretendard","Malgun Gothic","AppleSDGothcNeo","AppleGothic", sans-serif;}

input[type="radio"] {display:none !important;}
input[type="radio"] + label {display:inline-block !important;font-weight:700;font-size:12px;color:#333;cursor:pointer;}
input[type="radio"] + label > span {display:inline-block;width:15px;height:15px;margin:-2px 4px 0 0;vertical-align:middle;background-image:url(../../images/common/radio_n.png);background-position:center;cursor:pointer;}
input[type="radio"]:checked + label > span {background-image:url(../../images/common/radio_s.png);background-size:100%;}


input[type="checkbox"] {display:none;}
input[type="checkbox"] + label {position:relative;padding-left:25px;font-weight:400;font-size:14px;color:#7c7c7c;}
input[type="checkbox"] + label.aifeedback_label {all: unset; display: flex; align-items: center;}
input[type="checkbox"] + label > span {position:absolute;top:3px;left:0;width:18px;height:18px;margin:-2px 4px 0 0;vertical-align:middle;background-image:url(../../images/common/checkbox_n.png);background-position:center;cursor:pointer;}
input[type="checkbox"] + label > span.sm_check {all: unset;width:16px;height:16px;margin:0 4px 0 0;vertical-align:middle;background-image:url(../../images/common/sm_checkbox_n_241122.svg);background-position:center;cursor:pointer;}
input[type="checkbox"]:checked + label > span {background-image:url(../../images/common/checkbox_s.png);}
input[type="checkbox"]:checked + label > span.sm_check {background-image:url(../../images/common/sm_checkbox_y_241122.svg);}


select {appearance:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-webkit-border-radius:1px;border-radius:1px;-moz-border-radius:1px;}
select::-ms-expand { display: none; }
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }


/*추천이미지*/
#modal_suggestion {}
#modal_suggestion .modal_area {padding:48px !important;}
#modal_suggestion .modal_body {height:597px;padding:48px 50px;box-sizing:border-box;}
#modal_suggestion .modal_title {color:#fff}
#modal_suggestion .right__pos {display:flex;align-items:center;justify-content: flex-end;margin:-35px 0 10px 0;height:18px;}

.modal__flex {display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;}
.modal__flex .custom_select {z-index:1;display:flex;align-items:center;position:relative;;width:83px;height:26px;padding:0 10px;box-sizing:border-box;border-radius:6px;border:1px solid #dadada;}
.modal__flex .custom_select a.current {flex:1 1 100%;}
.modal__flex .custom_select a.current span {display:block;font-size:12px;line-height:1;color:#666;font-weight:500;}
.modal__flex .custom_select ul {display:none;position:absolute;top:-1px;left:-1px;right:-1px;padding:1px;border:1px solid #dadada;border-radius:6px;background:#fff;}
.modal__flex .custom_select ul li {list-style:none;}
.modal__flex .custom_select ul li a {display:flex;height:22px;padding:0 8px;align-items:center;font-size:12px;color:#666;font-weight:400;}
.modal__flex .custom_select ul li a:hover {border-radius:4px;color:#fff;background:#666}

.suggestion_images {display:flex;justify-content:space-between;flex-wrap:wrap;overflow-y:auto;height:368px;margin-bottom:-11px;}
.suggestion_images > a {position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;width:132px;height:73px;margin-bottom:11px;border-radius:6px;border:1px solid #fff;box-sizing:border-box;}
.suggestion_images > a.on {border-color:#0B62CF}
.suggestion_images > a:before {content:'';position:absolute;top:9px;right:9px;width:18px;height:18px;background-repeat:no-repeat;background-position:center;background-image:url(../../images/common/i_checkbox.svg);z-index:2;opacity:0;}
.suggestion_images > a.on:before {opacity:1;}
.suggestion_images > a img {position:absolute;top:0;left:0;width:100%;height:100%;}
#modal_suggestion .nopost__box {height:0px;padding-top:84.4%;background-color:#FAFAFA;}
#modal_suggestion .nopost__box p {line-height:16px;text-align:center;}
#modal_suggestion .nopost__box .ico_impor_big {display:flex;width:73px;height:73px;background-repeat:no-repeat;background-position:center;background-image:url(../../images/common/ico_impor_big2.svg);}


/* 유의사항 모달 */
#modal_policy {}
#modal_policy .modal_area {padding:0px !important;}
#modal_policy .modal_body {height:597px;padding:48px 50px;box-sizing:border-box;}
#modal_policy .office_desc {font-size:16px;line-height:1.5;}
#modal_policy .office_desc a {color:#1d7ff9;}
#modal_policy .offic_btns {margin-top:5rem;}
@media screen and (max-height: 670px){
    #modal_policy.l__modal_v2 .modal_wrap {align-items:flex-start;}
    #modal_policy .modal_wrap {overflow-y:auto;}
}
@media screen and (max-width: 610px){
    #modal_policy .office_desc {font-size:14px}
}


/* 연동 오픈 모달*/
#modal_polaris.l__modal_v2 .modal_area {width:400px;}
.office_image {text-align:center;margin-top:20px;}


/*오피스 모달*/
#modal_office .modal_area {width:450px;}
#modal_office .modal_body {padding:5rem 2.5rem 3rem;}
.office_logo {text-align:center;}
.office_title {text-align:center;margin:3rem 0;font-weight:500;font-size:20px;color:#1a1a1a;line-height:1.3;}
.office_desc {font-size:14px;color:#555;line-height:1.4;}
.office_desc p {position:relative;margin:.2rem 0;padding-left:10px;}
.office_desc p:before {content:'-';position:absolute;top:0;left:0;}
.office_terms {margin:1.5rem 0;}
.offic_btns {text-align:center;margin-top:3rem;}
.offic_btns .int__btn {display:block;width:230px;line-height:50px;margin:0 auto;background-color:#1d7ff9;border-radius:2px;font-size:17px;color:#fff;text-align:center;}
.offic_btns .btn_offic_new {margin-top:2rem;display:block;font-size:15px;color:#1d7ff9;text-decoration:underline;}
.offic_btns .btn_offic_link {margin-top:2rem;display:block;font-size:15px;color:#444;}
@media screen and (min-width: 1025px){
    .offic_btns .int__btn:hover {background-color:#0046b9;}
    .offic_btns .btn_offic_new:hover {color:#0046b9;}
}
@media screen and (max-width: 610px){
    .office_logo img {height:30px;}
    .office_title {font-size:18px;}
    .office_desc {font-size:13px;}
    .offic_btns .int__btn {line-height:45px;}
}


/*Top 10 모달*/
#modal_top10.l__modal_v2 .modal_area {width:520px;}
#modal_top10 .office_title {margin:1.5rem 0;color:#1d7ff9;}
#modal_top10 .office_desc.top {font-size:15px;}
#modal_top10 .office_desc.bot {font-size:13px;}
.office_top10 {margin:2.5rem 0;}
.office_top10_inner {display:flex;justify-content:center;padding:0 2rem;font-size:14px;text-align:center;}
.office_top10_inner > div {margin:0.5rem 0;padding:0 .5rem;box-sizing:border-box;word-break:break-all;line-height:1.1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.office_top10_inner > div.office_top10_number {width:6.5%;}
.office_top10_inner > div.office_top10_id {width:20%;padding-right:10px;text-align:left;}
.office_top10_inner > div.office_top10_email {width:57%;font-size:14px;text-align:left;}
.office_top10_inner > div.office_top10_score {width:15%;text-align:right;}
#modal_top10 .offic_btns {position:relative;margin-top:4rem;}
#modal_top10 .offic_btns a {font-size:14px;}
#modal_top10 .offic_btns .btn_right_line {position:absolute;right:0;bottom:0;}
.offic_btns .btn_right_line {display:block;width:160px;line-height:40px;margin:0 auto;border:1px solid #1d7ff9;border-radius:2px;font-size:15px;color:#1d7ff9;text-align:center;}
#modal_top10 .offic_btns .btn_offic_link {display:inline-block;margin-top:0;line-height:40px;}
@media screen and (max-width: 610px){
    #modal_top10 .office_logo {padding-top:1rem;}
    #modal_top10 .office_logo img {height:auto;}
    .office_top10_inner {padding:0;}
    .office_top10 {height:228px;overflow-y:auto;}
    #modal_top10 .offic_btns .btn_right_line {position:static;}
    #modal_top10 .offic_btns {margin-top:2rem;}
    .office_top10_inner > div {font-size:13px;}
    .office_top10_inner > div.office_top10_email {font-size:12px;}
    .office_top10_inner > div.office_top10_score {width:17%;}
    .office_top10_inner > div.office_top10_id {padding-right:0;}
}

.product__area {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

#COMMON__CONTENT {
    margin-top: 100px;
}

.common__top {
    margin-bottom: 16px;
}

.common__head {
    display: flex;
    align-items: center;
    min-height: 42px;
}

.common__title {
    font-weight: 700;
    font-size: 28px;
    color: #333;
    line-height: 34px;
}

.common__tags {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0;
    gap: 16px
}

.common__tags a {
    display: inline-block;
    padding: 15px 13px;
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid #e5e5e5;
    font-weight: 500;
    font-size: 20px;
    color: #c8c8c8;
    letter-spacing: -0.5px;
    line-height: 12px;
}

.common__tags a.on {
    background-color: #999999;
    color: #fff;
}

.product__details {
    width: 282px;
    height: 396px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow : 0px 4px 16px rgba(0,0,0,0.12);
    border-radius: 8px;
}

.product__details:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: none;
    transition: all 0.1s linear;
    content: '';
    background: #fff;
}

.product__details .details--thumb a:after {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: 0;
    left: -1px;
    border: 0;
    transition: all 0.1s linear;
    content: '';
}

.details--thumb {
    z-index: 1;
    box-sizing: border-box;
    position: relative;
    height: 188px;
    border: none;
    border-bottom: 1px solid #e5e5e5;
}

.details--thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.details--infos {
    box-sizing: border-box;
    position: relative;
    padding: 16px 16px;
    background-color: #fff;
    height: 176px;
}

.details--title a {
    z-index: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 100%;
    height: 75px;
    line-height: 25px;
    font-weight: 700;
    font-size: 20px;
    color: #171717;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-box-align: unset;
    box-sizing: border-box;
}

.details--items {
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    font-size: 12px;
    color: #5e6266
}

.details--name {
    width: 65%;
}

.tooltip_parent {
    position: relative;
}