@charset "utf-8";

:root{
    --point-color:#3154e8;
    --point-color-dark:#2443d8;
    --point-bg:#f5f7ff;
}

@import url('//fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap');



html{ margin:0px; padding:0px; overflow-x: hidden;  } 
body {font-family:'Noto Sans KR',Dotum, AppleGothic, Sans-serif; border-collapse:collapse; margin:0px; padding:0px; width:100%; -webkit-text-size-adjust:none; zoom:1;}
h1, h2, h3, h4, h5, h6 { margin:0px; padding:0px;}
img { border:none; margin:0px; padding:0px; vertical-align:top;}
ol, ul {margin:0px; padding:0px; list-style:none;}
div, li, dl, dt, dd, form, iframe, p, a, span{margin:0px; padding:0px; list-style:none; vertical-align:top;}
label {vertical-align: middle;}
table, th, td {margin:0px; padding:0px; border-collapse:collapse;}
input, textarea {margin:0px; padding:0px; font-family:'Noto Sans KR',Dotum, "굴림", Gulim, Tahoma, Verdana, AppleGothic, sans-serif;}

.wrap{width:515px; height:330px; float:left; height:auto; margin-bottom:20px;}
.wrap ul.id_tit{width:515px; height:53px; float:left; border-bottom:2px solid #1e1e1e;}
.wrap ul.id_tit li{width:100%; height:45px; padding-top:8px; float:left; text-align:center;  font-size:24px; color:#555555;}
.wrap ul.jung_buk{width:455px; height:129px; float:left; margin:30px; border-top:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1; background-color:#eeeeee;}
.wrap ul.jung_buk li.id_chck{width:100%; float:left; text-align:center; color:#000; font-size:14px; padding:40px 0 10px 0;}
.wrap ul.jung_buk li.id_chck2{width:100%; float:left; text-align:center; margin-top:10px;}
.wrap ul.jung_buk li.id_chck3{width:100%; float:left; text-align:center; color:#000; font-size:14px; padding:60px 0 10px 0;}
.wrap ul.jung_buk li.id_chck4{width:100%; float:left; text-align:center; color:#000; font-size:14px; padding:30px 0 10px 0;}
.wrap ul.jung_buk li.id_chck5{width:100%; float:left; text-align:center; color:#000; font-size:14px; padding:20px 0 10px 0;}


.id_bon{font-weight:bold; text-decoration:underline;}
.id_sa_ok{width:142px; height:40px; background-color:#3b3b3b; border:0; color:#fff; font-weight:bold; cursor:pointer;}
.id_sa_ok2{width:142px; height:30px; float:left; font-size:12px; text-decoration:none; line-height:30px; margin-left:10px; background-color:#3b3b3b; border:0; color:#fff; font-weight:bold; cursor:pointer;}


.wrap ul.chan_id{width:440px; height:51px; float:left; margin:0 30px 0 30px; border-top:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1;}
.wrap ul.chan_id li{width:440px; height:51px; float:left;}
.id_text_sty1{height:51px; line-height:51px; font-size:12px; color:#000; float:left; padding-left:10px;}
.id_text_sty2{width:228px; height:26px;line-height:26px; float:left; border:1px solid #b2b2b2; margin:12px 0 0 10px;}
.id_text_sty3{width:62px; height:26px;line-height:26px; font-size:12px; text-decoration:none; float:right; border:0; background-color:#3b3b3b; color:#fff; text-align:center; cursor:pointer; margin:12px 0 0 10px;}
.id_text_sty4{width:87px; height:26px;line-height:26px; float:left; border:1px solid #b2b2b2; margin:12px 0 0 5px;}
.id_text_sty5{width:370px; height:70px; padding:5px; float:left; border:1px solid #b2b2b2; margin:12px 0 0 10px;}
.id_text_sty6{height:51px; line-height:49px; font-size:12px; color:#000; float:left; padding-left:10px; font-weight:bold;}
.id_text_sty7{width:40px; height:26px;line-height:26px; border:0; background-color:#3b3b3b; color:#fff; text-align:center; cursor:pointer; margin:12px 0 0 10px;}
.id_text_sty8{width:100px; height:51px; line-height:51px; font-size:12px; color:#000; float:left; padding-left:10px;}

.wrap ul.chan_id4{width:440px; height:auto; float:left; margin:0 30px 0 30px;}
.wrap ul.chan_id4 li{width:380px; height:auto; float:left; padding:10px 0 0 60px;}

.dab_u{width:370px; height:auto; float:left; font-size:12px; padding:17px 0 10px 10px;}

/*우편번호찾기*/
.wrap ul.juso_top_btn{width:440px; height:41px; float:left; margin:30px 30px 0 30px;}
.wrap ul.juso_top_btn li{float:left; font-size:12px;}
.wrap ul.juso_top_btn li.gu_juso{width:218px; height:39px; cursor:pointer; line-height:39px; font-weight:bold; text-align:center; font-size:12px; color:#000; border-top:2px solid #777777; border-left:2px solid #777777; border-right:2px solid #777777;}
.wrap ul.juso_top_btn li.sin_juso{width:217px; height:38px; cursor:pointer; line-height:38px; text-align:center; color:#$747474; border-top:1px solid #c4c4c4; border-right:1px solid #c4c4c4; border-bottom:2px solid #777777;}
.wrap ul.juso_top_btn li.sin_juso2{width:217px; height:38px; cursor:pointer; line-height:38px; text-align:center; color:#$747474; border-top:1px solid #c4c4c4; border-left:1px solid #c4c4c4; border-bottom:2px solid #777777;}

.wrap ul.indu_juso{width:440px; height:auto; float:left; margin:10px 30px 10px 30px; line-height:15px; font-size:12px;}
.wrap ul.u_adre{width:440px; height:40px; float:left; margin:20px 30px 0 30px; background-color:#f2f2f2; border-bottom:1px solid #e5e5e5; border-top:1px solid #666666;}
.wrap ul.u_adre li{float:left; height:40px; font-size:12px; text-align:center; line-height:40px; color:#000; font-weight:bold;}
.wrap ul.u_adre li.u_num{width:94px;}
.wrap ul.u_adre li.adres_num{width:346px;}
.wrap ul.u_adre2{width:440px; height:40px; float:left; margin:0 30px 0 30px; border-bottom:1px solid #e5e5e5;}
.wrap ul.u_adre2 li{float:left; height:40px; font-size:12px; line-height:40px; text-align:center;}
.wrap ul.u_adre2 li.u_num2{color:#666666; width:94px;}
.wrap ul.u_adre2 li.u_num3{color:#666666; width:100%;}
.wrap ul.u_adre2 li.adres_num2{color:#999999; width:346px; text-align:left;}
.wrap ul.u_adre2 li.adres_num3{color:#999999; width:346px; text-align:left; line-height:15px; padding-top:5px;}

.sel_cho{width:80px; height:26px; line-height:26px; border:1px solid #b2b2b2; margin:12px 0 0 5px; float:left;}
.sel_cho2{width:90px; height:26px; line-height:26px; border:1px solid #b2b2b2; margin:12px 0 0 5px; float:left;}

/*상품질문*/
.wrap ul.chan_id2{width:480px; height:51px; float:left; margin:30px 10px 0 10px; border-top:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1;}
.wrap ul.chan_id2 li{width:480px; height:51px; float:left;}
.wrap ul.chan_id3{width:480px; height:100px; float:left; margin:0 10px 0 10px; border-bottom:1px solid #d1d1d1;}
.wrap ul.chan_id3 li{width:480px; height:100px; float:left;}
.wrap ul.write_btns{width:480px; height:auto; float:left; margin:0 10px 0 10px;}
.wrap ul.write_btns li{width:100%; float:left; text-align:center;}

.wrap ul.u_adre3{width:480px; height:30px; float:left; margin:0 10px 0 10px; background-color:#f2f2f2; border-bottom:1px solid #e5e5e5; border-top:1px solid #666666;}
.wrap ul.u_adre3 li{float:left; height:30px; font-size:12px; text-align:center; line-height:30px; color:#000; font-weight:bold;}
.dap_text{width:480px; height:auto; float:left; font-size:12px; margin:20px 10px 0 10px; font-weight:bold;}

.wrap ul.u_adre4{width:480px; height:30px; float:left; margin:0 10px 0 10px; border-bottom:1px solid #e5e5e5; }
.wrap ul.u_adre4 li{float:left; height:40px; text-align:center; line-height:30px; color:#000;}

.wrap ul.u_adre5{width:480px; height:auto; float:left; margin:0 10px 0 10px; padding-bottom:10px;}
.wrap ul.u_adre5 li{float:left; width:100%;}

.pop_ne_sty1{width:130px; height:25px; float:left; border:1px solid #6F6F6F;}
.pop_ne_sty2{float:left; padding-right:10px; height:25px; line-height:25px;}
.pop_ne_sty3{float:left; padding:0 10px 0 20px; height:25px; line-height:25px;}
.pop_ne_sty4{width:100%; height:70px; float:left; border:1px solid #6F6F6F;}

.id_text_sty100{width:62px; height:25px;line-height:25px; font-size:12px; text-decoration:none; float:right; border:0; background-color:#3b3b3b; color:#fff; text-align:center; cursor:pointer;}



/*메인팝업*/
.main_popup{width:100%; height:auto; float:left;}
.main_popup ul.top_tit{width:100%; float:left; height:30px; border-bottom:2px solid #1e1e1e;}
.main_popup ul.top_tit li.pop_tit_top{float:left; padding-left:10px; height:30px; line-height:30px; font-size:12px; font-weight:bold;}
.main_popup ul.top_tit li.pop_tit_top2{float:right; padding-right:10px; height:30px; line-height:30px; font-size:12px; color:#767676;}
.main_popup ul.popup_con{width:96%; height:auto; float:left; padding:2%;}
.main_popup ul.popup_con li{font-size:12px;}
.main_popup ul.popup_con li img{width:100%; float:left;}
.main_popup ul.popup_close{width:100%; height:30px; float:left; background-color:#f2f2f2;}
.main_popup ul.popup_close li{float:right; font-size:12px; height:30px; line-height:30px;}
.close_btn{font-weight:bold; color:blue; text-decoration:none; padding:0 10px 0 10px;}





/*샘플디자인*/

/* =========================================================
   전체 바깥 카드
   ========================================================= */

body > table{
    width:100% !important;
}

body > table > tbody > tr > td{
    padding:20px 0 !important;
}

body > table > tbody > tr > td > table{
    width:96% !important;
    max-width:1400px;
    border:1px solid #e5e9f0;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 4px 20px rgba(20,40,80,.05);
}


/* =========================================================
   상단 영역
   ========================================================= */

.huu_view_title{
    display:block;
    width:auto !important;
    height:auto !important;
    float:none !important;

    margin:0 !important;
    padding:0 0 12px !important;

    font-size:28px !important;
    line-height:40px !important;
    font-weight:800;
    color:#111827;
    letter-spacing:-1.5px;
}

.huu_view_title span{
    display:block;
    margin-top:3px;
    font-size:13px !important;
    line-height:20px;
    color:#8a94a6;
    font-weight:400;
}


/* 상단 헤더 테이블 */
.huu_view_title + span{
    color:#8a94a6;
}


/* =========================================================
   검색창
   ========================================================= */

#searchForm{
    display:inline-flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:8px;

    width:auto !important;
    margin:0 !important;
}

#searchForm input[type="text"]{
    width:220px !important;
    height:42px !important;

    padding:0 15px !important;

    border:1px solid #dfe5ee !important;
    border-radius:10px !important;

    background:#fff;
    color:#333;

    font-size:13px;
    outline:none !important;
}

#searchForm input[type="text"]:focus{
    border-color:var(--point-color) !important;
}

#searchForm input[type="button"]{
    width:65px !important;
    height:42px !important;

    border:0 !important;
    border-radius:10px !important;

    background:var(--point-color);
    color:#fff;

    font-size:13px;
    font-weight:bold;

    cursor:pointer;
}

#searchForm input[type="button"]:hover{
    background:var(--point-color);
}


/* =========================================================
   좌측 메뉴
   ========================================================= */

.goods_li_top2{
    width:180px !important;
    height:auto !important;
    float:none !important;
}

.goods_li_top2 ul{
    width:100% !important;
    height:auto !important;
    float:none !important;

    margin:0 !important;
    padding:0 !important;
}

.goods_li_top2 ul li{
    width:100% !important;
    height:52px !important;
    float:none !important;

    margin:0 !important;
    padding:0 !important;

    border-bottom:1px solid #edf0f5;
}



/* =========================================================
   좌측 메뉴 / 우측 콘텐츠 구분선
   ========================================================= */

.con_viw_ty{
    width:100% !important;
    height:auto !important;
    float:none !important;
}

.con_viw_ty ul{
    width:100% !important;
    height:auto !important;
    float:none !important;

    margin:0 !important;
    padding:0 !important;
}


/* =========================================================
   샘플 카드
   ========================================================= */

.con_viw_ty ul li{
    float:left;

    box-sizing:border-box;

    margin:0 !important;

    padding:12px !important;

    border:0px solid #e4e8ef;

    border-radius:12px;

    background:#fff;

    transition:all .2s ease;
}

.con_viw_ty ul li:hover{
    border-color:#cbd5ff;
    
    transform:translateY(-2px);
}


/* =========================================================
   샘플 이미지
   ========================================================= */

.con_viw_ty ul li table{
    width:100% !important;
}

.con_viw_ty ul li table td{
    border:0;
}

.con_viw_ty ul li img{
    display:block;

    max-width:100% !important;
    height:auto !important;

    margin:0 auto;

    border-radius:7px;

    object-fit:contain;
}


/* =========================================================
   샘플 제목
   ========================================================= */

.con_viw_ty ul li table tr:nth-child(2) td{
    height:auto !important;

    padding:12px 3px 8px !important;

    color:#111827 !important;

    font-size:13px !important;
    font-weight:bold;

    line-height:20px !important;
}


/* =========================================================
   선택하기
   ========================================================= */

.con_viw_ty ul li table tr:nth-child(3) td{
    height:38px !important;

    padding:0 !important;

    border:1px solid var(--point-color) !important;
    border-radius:20px;

    color:var(--point-color) !important;

    font-size:12px !important;
    font-weight:bold;

    line-height:36px !important;

    transition:all .2s;
}

.con_viw_ty ul li table tr:nth-child(3) td:hover{
    background:var(--point-color);
    color:#fff !important;
}


/* =========================================================
   우측 콘텐츠 제목
   ========================================================= */

.con_viw_ty_title{
    width:100% !important;
    height:auto !important;

    margin:0 0 20px !important;
    padding:0 0 15px !important;

    border-bottom:1px solid #e8ebf0 !important;

    font-size:22px !important;
    line-height:30px !important;
    font-weight:700;

    color:#111827;
}



/* =========================================================
   페이징
   ========================================================= */

.con_viw_ty + *{
    box-sizing:border-box;
}


/* =========================================================
   빈 목록
   ========================================================= */

.con_viw_ty + div{
    color:#6b7280;
}





.ok_btn_sty3{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:100px;
    height:40px;
    box-sizing:border-box;

    border:1px solid #d9dee8;
    border-radius:8px;

    background:#fff;
    color:#374151;

    font-size:13px;
    font-weight:600;
    text-decoration:none;

    cursor:pointer;
    transition:all .2s ease;
}

.ok_btn_sty3:hover{
    border-color:var(--point-color);
    background:var(--point-bg);
    color:var(--point-color);
}


/* =========================================================
   샘플디자인 없음
   ========================================================= */

.sample_empty{
    width:98%;
    height:200px;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    margin:0 auto; 
    padding:30px;

    border:1px dashed #d5dce8;
    border-radius:18px;

    background:#fafbfd;

    text-align:center;
}

.sample_empty strong{
    display:block;

    margin:0 0 8px;

    color:#1f2937;

    font-size:16px;
    font-weight:700;
    line-height:24px;
    letter-spacing:-0.5px;
}

.sample_empty p{
    margin:0;

    color:#8a94a6;

    font-size:13px;
    font-weight:400;
    line-height:22px;
    letter-spacing:-0.3px;
}


.sg-toolbar-title {
    margin: 0 0 0px 20px;
    color: #1f2937;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;

}





/* 왼쪽 메뉴 */
.two_link_stl{
    display:flex;
    align-items:center;

    width:100%;
    height:42px;

    padding:0 15px;

    box-sizing:border-box;

    border-radius:10px;

    color:#374151;
    font-size:15px;
    font-weight:600;

    line-height:normal;
    text-decoration:none;

    letter-spacing:0px;
}

.two_link_stl:hover{
    background:var(--point-color);
    color:#fff !important;
}

/* 선택된 메뉴 */
.two_link_stl.active{
    background:var(--point-color);
    color:#fff !important;
    font-weight:600;
}


.s_lin_k{
    display:flex;
    align-items:center;

    width:100% !important;
    height:42px !important;

    padding:0 15px;

    border:0 !important;

	box-sizing:border-box;

    border-radius:10px;

    color:#374151;
    font-size:15px;
    font-weight:600;

    line-height:normal !important;
    text-decoration:none;
}

.s_lin_k:hover{
    background:var(--point-bg);
    color:var(--point-color);
	border-radius:10px;
}
.s_lin_k.on{
    background:var(--point-color);
    color:#fff !important;
    font-weight:600;
    border-radius:10px;
}


.s_lin_ks{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto !important;
    min-width:120px;
    height:38px;

    padding:0 25px;

    box-sizing:border-box;
    border-radius:8px;

    color:#374151;
    font-size:13px;
    font-weight:500;

    text-decoration:none;
    letter-spacing:-1px;
}

.s_lin_ks:hover{
    background:var(--point-color);
    color:var(--point-color) !important;
}

.s_lin_ks.active{
    background:var(--point-color);
    color:#fff !important;
    font-weight:600;
}




/* =========================================================
   2차 메뉴 영역
   ========================================================= */

.goods_li_top3{
    width:1030px;
    height:auto;
    margin:0 0 20px 25px;
}

.goods_li_top3 ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    width:100%;
    margin:0;
    padding:0;
}

.goods_li_top3 ul li{
    width:calc(25% - 6px);
    height:auto;

    margin:0;
    padding:0;

    box-sizing:border-box;
}

.goods_li_top3 ul li a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:42px;

    box-sizing:border-box;

    border:1px solid #e1e5ed;
    border-radius:8px;

    background:#f8f9fb;

    color:#222;
    font-size:13px;
    font-weight:600;

    text-decoration:none;
    letter-spacing:-0.5px;
}

.goods_li_top3 ul li a:hover{
    border-color:var(--point-color);
    background:#eef1ff;
    color:var(--point-color);
}

.goods_li_top3 ul li a.active{
    background:var(--point-color);
    border-color:var(--point-color);
    color:#fff !important;
}

.sample_list{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}
/* =========================================================
   모바일 전용
   ========================================================= */

@media screen and (max-width:767px){

    .goods_li_top2{
        width:100% !important;
        float:none !important;
    }

    .goods_li_top2 ul{
        width:100% !important;
        margin-top:10px !important;
    }

    .goods_li_top2 ul li{
        width:50% !important;
        height:45px !important;
        float:left !important;
    }


    .con_viw_ty{
        width:100% !important;
        float:none !important;
    }

    .con_viw_ty ul{
        width:100% !important;
        float:none !important;
    }

    .con_viw_ty ul li{
        width:100% !important;
        float:none !important;
        height:auto !important;
    }

}


@media screen and (max-width:767px){

    .sample_list{
        grid-template-columns:1fr;
        gap:20px;
    }

    .sample_item{
        width:100%;
    }

    .sample_image img{
        width:100%;
        height:auto;
    }

}


/* =========================================================
   샘플디자인 목록
   ========================================================= */

.sample_list{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.sample_item{
    width:100% !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box;
    text-align:center;
}

.sample_image{
    display:block;
    width:100%;
}

.sample_image img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    border-radius:8px;
}

.sample_title{
    display:block;
    margin-top:10px;
    color:#111827;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.sample_select{
    display:block;
    width:100%;
    height:38px;
    margin-top:10px;
    border:1px solid var(--point-color, #3154e8);
    border-radius:20px;
    background:#fff;
    color:var(--point-color, #3154e8);
    cursor:pointer;
}

.sample_select:hover{
    background:var(--point-color, #3154e8);
    color:#fff;
}


/* 모바일 */
@media screen and (max-width:767px){

    .sample_list{
        grid-template-columns:1fr !important;
        gap:20px !important;
    }

    .sample_item{
        width:100% !important;
    }

    .sample_image img{
        width:100% !important;
        max-width:100% !important;
    }

}

@media screen and (max-width:767px){

    /* 1차 메뉴 전체 */
    .sample_menu{
        width:100% !important;
        margin:15px 0 20px !important;
        float:none !important;
    }

    /* 메뉴 가로 배치 */
    .sample_menu ul{
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(2, 1fr) !important;
        gap:8px !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
    }

    /* 메뉴 하나 */
    .sample_menu ul li{
        width:auto !important;
        height:42px !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
        border:0 !important;
    }

    /* 메뉴 버튼 */
    .sample_menu ul li a{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        width:100% !important;
        height:42px !important;
        box-sizing:border-box !important;

        padding:0 14px !important;

        background:#f8f9fb !important;
        border:1px solid #e1e5ed !important;
        border-radius:8px !important;

        color:#374151 !important;
        font-size:13px !important;
        font-weight:600 !important;

        text-decoration:none !important;
    }

    /* 마우스 오버 */
    .sample_menu ul li a:hover{
        background:#eef1ff !important;
        border-color:#3154e8 !important;
        color:#3154e8 !important;
    }

}



/*구매하기버튼*/
/* 선택하기 / 구매하기 공통 버튼 */
.sample_action_btn { 
    display: inline-flex !important; 
    align-items: center; 
    justify-content: center; 
 
    width: 82px !important; 
    height: 30px !important; 
    box-sizing: border-box !important; 
 
    border: 1px solid #4a6ff3 !important; 
    border-radius: 20px !important; 
 
    background: transparent !important; 
    color: #3155e8 !important; 
 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    line-height: 28px !important; 
    text-decoration: none !important; 
 
    cursor: pointer; 
    transition: all .2s ease; 
} 
 
.sample_action_btn:hover { 
    background: #4a6ff3 !important; 
    border-color: #4a6ff3 !important; 
    color: #fff !important; 
    box-shadow: 0 3px 8px rgba(74,111,243,.25); 
    transform: translateY(-1px); 
} 
 
.sample_action_btn:active { 
    transform: translateY(0); 
} 

/* 선택하기 / 구매하기 영역 바깥 테두리 제거 */
.con_viw_ty ul li table tr:nth-child(3) td { 
    border: 0 !important; 
    outline: 0 !important; 
    box-shadow: none !important; 
    background: transparent !important; 
}