@charset "utf-8";

/********** 변수 **********/
:root {
    --primary:#4472c4; /* 메인 컬러 */
	--primary2:#037aba; /* 서브 컬러 */
	--black:#000; /* 타이틀 컬러 */
    --white:#fff; /* 흰색고정 컬러 */
	--text-main:#606060; /* 기본 텍스트 컬러 */
	--border:#ddd; /* 기본 border 컬러 */


    /* White mix */
    --wm5:color-mix(in srgb, var(--primary) 5%, #fff);
    --wm10:color-mix(in srgb, var(--primary) 10%, #fff);
    --wm20:color-mix(in srgb, var(--primary) 20%, #fff);
    --wm30:color-mix(in srgb, var(--primary) 30%, #fff);
    --wm40:color-mix(in srgb, var(--primary) 40%, #fff);
    --wm50:color-mix(in srgb, var(--primary) 50%, #fff);
    --wm60:color-mix(in srgb, var(--primary) 60%, #fff);
    --wm70:color-mix(in srgb, var(--primary) 70%, #fff);
    --wm80:color-mix(in srgb, var(--primary) 80%, #fff);
    --wm90:color-mix(in srgb, var(--primary) 90%, #fff);
    --wm95:color-mix(in srgb, var(--primary) 95%, #fff);

    /* Black mix */
    --bm5:color-mix(in srgb, var(--primary) 5%, #000);
    --bm10:color-mix(in srgb, var(--primary) 10%, #000);
    --bm20:color-mix(in srgb, var(--primary) 20%, #000);
    --bm30:color-mix(in srgb, var(--primary) 30%, #000);
    --bm40:color-mix(in srgb, var(--primary) 40%, #000);
    --bm50:color-mix(in srgb, var(--primary) 50%, #000);
    --bm60:color-mix(in srgb, var(--primary) 60%, #000);
    --bm70:color-mix(in srgb, var(--primary) 70%, #000);
    --bm80:color-mix(in srgb, var(--primary) 80%, #000);
    --bm90:color-mix(in srgb, var(--primary) 90%, #000);
    --bm95:color-mix(in srgb, var(--primary) 95%, #000);
}

/********** skip_nav **********/
.skip_nav {display:block;overflow:hidden;position:absolute;left:0;right:0;top:0;z-index:1000;height:0;background:#000;text-align:center;}
.skip_nav:focus {overflow:auto;height:auto;padding:5px 0;color:#fff;}


/********** 숨김 **********/
.hide {overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);}


/********** 말줄임(사용시 클래스가 맨앞에 위치해야함) **********/
[class^="ellipsis"] {display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
.ellipsis1 {-webkit-line-clamp:1;}/* 1줄 */
.ellipsis2 {-webkit-line-clamp:2;}/* 4줄 */


/********** 타이틀 **********/
.h4 {font-size:5rem;font-weight:800;color:var(--black);line-height:1.4;margin:0.8rem 0 0.4rem;}
.h5 {font-size:4.2rem;font-weight:700;color:var(--primary);line-height:1;margin-bottom:2rem;text-align:center;}

/********** 리스트(사용시 클래스가 맨앞에 위치해야함) **********/
[class^="list"] > li {position:relative;padding-left:1rem;margin-top:.5rem;}
[class^="list"] > li:first-child {margin-top:0;}
[class^="list"] > li:after {content:"";position:absolute;left:0;top:.9rem;}
    @media only screen and (max-width:1023px){
    }
@media only screen and (max-width:1023px){
}
@media only screen and (max-width:767px){
}
    @media only screen and (max-width:1499px){
    }
    @media only screen and (max-width:1199px){
    }
    @media only screen and (max-width:1023px){
    }
    @media only screen and (max-width:398px){
    }

    /* 반응형테이블 */
    @media only screen and (max-width:1023px){
    }
    @media only screen and (max-width:575px){
    }


/********** 버튼 **********/
button {background:transparent;}
.btn_bace:is(:hover,:focus:active) {background:var(--bm50);color:#fff;text-decoration:none;}
    @media only screen and (max-width:767px){
    }
.btn_line:is(:hover,:focus:active) {border-color:var(--bm50);}
    @media only screen and (max-width:560px){
    }


/********** 체크버튼(라디오, 체크) **********/
.checks {position:relative;display:flex;flex-wrap:wrap;gap:1.5rem;}
.checks input {overflow:hidden;position:absolute;width:1px;height:1px;padding:0;margin-left:1px;clip:rect(0,0,0,0);border:0;}
.checks input + label {display:inline-block;position:relative;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;cursor:pointer;}
.checks input:is(:hover,:focus,:active) + label:before {outline:1px dotted #000;}
.checks input:disabled:is(:hover,:focus,:active) + label:before {outline:0;}
.checks input[type="radio"] + label {padding-left:30px;}
.checks input[type="radio"] + label:before {content:'';position:absolute;left:1px;top:0;width:22px;height:22px;background:#fff;border:1px solid #ddd;border-radius:100%;text-align:center;}
.checks input[type="radio"]:checked + label:after {content:'';position:absolute;top:4px;left:5px;width:14px;height:14px;background:var(--primary);border-radius:100%;}
.checks input[type="radio"]:checked + label:before {border:1px solid var(--primary);}
.checks input[type="radio"]:disabled + label:before {background:#eee;}
.checks input[type="checkbox"] + label:before {content:'';display:inline-block;width:22px;height:22px;margin:0 .8rem 0 0;border:1px solid #ddd;border-radius:3px;text-align:center;vertical-align:middle;background:#fff;}
.checks input[type="checkbox"]:checked + label:before {content:'';text-shadow:1px 1px #fff;background:url("../../images/fs/common/check.png") no-repeat center var(--primary);border:0;font-size:14px;}
.checks input[type="checkbox"]:disabled + label:before {background:#eee;}


/********** 인풋스타일 **********/
input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],input[type="file"],input[type="date"],input[type="datetime-local"],input[type="month"],input[type="week"],input[type="time"],input[type="number"] {height:4.5rem;width:100%;padding:0 2rem;border:1px solid #ddd;background:#fff;font-size:1.6rem;border-radius:1rem;}
input[name="captchaWord"] {width:auto;margin-top:3px;}
input[type="date"]{position:relative;}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button {display:none;}
input[type="date"]::-webkit-calendar-picker-indicator {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background:transparent;z-index:1;cursor:pointer;}
input[type="date"]:after {content:'';position:absolute;top:50%;right:20px;z-index:0;width:17px;height:15px;background:#fff;margin-top:-9px;}
input:focus,select:focus,textarea:focus {border:1px solid var(--primary);}
input:disabled,input[readonly],select:disabled,select[readonly],textarea:disabled,textarea[readonly] {background:#f2f2f2;}
input::placeholder {color:#666;}
input.error {border-color:#de3412;}
select {padding:10px 6rem 10px 2rem;background:url("../../images/fs/common/arrow_down.svg") no-repeat right 10px center #fff;cursor:pointer;border:1px solid #ddd;font-size:1.6rem;}
textarea {width:100%;padding:1.5rem;border:1px solid #ddd;background:#fff;font-size:1.6rem;border-radius:1rem;resize:none;min-height:5rem;}
textarea.resize {resize:vertical;}
button {vertical-align:middle;}

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

}
.ta-c {text-align:center;}
.block {display:block;}
.overflow {overflow:hidden;}
.clear:after {content:"";display:block;clear:both;}
.flex {display:flex;}


/********** 참고텍스트(사용시 클래스가 맨앞에 위치해야함) **********/
[class^="point"] {display:block;padding-left:22px;font-size:1.7rem;}
    @media only screen and (max-width:1023px){
    }
    @media only screen and (max-width:767px){
    }
    @media screen and (max-width:767px) {
    }


/**/


/********** 가장자리_외부(margin) **********/
/* 위 */
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}.mt35 {margin-top:35px;}
.mt40 {margin-top:40px;}.mt45 {margin-top:45px;}
.mt50 {margin-top:50px;}.mt55 {margin-top:55px;}
.mt60 {margin-top:60px;}.mt65 {margin-top:65px;}
.mt70 {margin-top:70px;}.mt75 {margin-top:75px;}
.mt80 {margin-top:80px;}
.mt100 {margin-top:100px;}
.mt120 {margin-top:120px;}
@media only screen and (max-width:1023px){
	.mt15 {margin-top:5px;}
	.mt20 {margin-top:10px;}.mt25 {margin-top:15px;}
	.mt30 {margin-top:20px;}.mt35 {margin-top:25px;}
	.mt40 {margin-top:30px;}.mt45 {margin-top:35px;}
	.mt50 {margin-top:40px;}.mt55 {margin-top:45px;}
	.mt60 {margin-top:50px;}.mt65 {margin-top:55px;}
	.mt70 {margin-top:60px;}.mt75 {margin-top:65px;}
	.mt80 {margin-top:70px;}
	.mt100 {margin-top:90px;}
	.mt120 {margin-top:110px;}
}
@media only screen and (max-width:767px){
	.mt30 {margin-top:10px;}.mt35 {margin-top:15px;}
	.mt40 {margin-top:20px;}.mt45 {margin-top:25px;}
	.mt50 {margin-top:30px;}.mt55 {margin-top:35px;}
	.mt60 {margin-top:40px;}.mt65 {margin-top:45px;}
	.mt70 {margin-top:50px;}.mt75 {margin-top:55px;}
	.mt80 {margin-top:60px;}
	.mt100 {margin-top:80px;}
	.mt120 {margin-top:100px;}
}
/* 우측 */
.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
/* 좌측 */
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}

/********** 버튼 **********/
/* 기본 */
.btn_bace {display:inline-flex;align-items:center;gap:0.6rem;padding:0 3rem;height:5rem;line-height:1;border:1px solid #1d1d1d;color:#fff;background-color:#1d1d1d;border-radius:4px;transition: 0.4s;font-size:1.6rem;}
.btn_bace i {margin-top:4px;}
.btn_bace:hover,.btn_bace:focus,.btn_bace:active {background-color:#444;border-color:#444;color:#fff;}

/* 선버튼 */
.btn_line {display:inline-flex;align-items:center;height:5rem;line-height:1;padding:0 3rem;background:#fff;border-radius:4px;border:1px solid #041632;text-align:center;color:#1d1d1d;cursor:pointer;font-size:1.6rem;transition: 0.4s;}
.btn_line:hover,.btn_line:focus,.btn_line:active {background-color:#444;border-color:#1d1d1d;text-decoration:none;color:#fff;}
/* 다운로드 */
.btn_down {display:inline-flex;align-items:center;gap:1rem;line-height:1;}
.btn_down img {transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);}
.btn_down:is(:hover,:focus,:active) img {filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7456%) hue-rotate(38deg) brightness(103%) contrast(102%);}
@media only screen and (max-width:767px){
	.btn_bace {height:4.5rem;}
	.btn_line {height:4.5rem;}

	/* 다운로드 */
	.btn_down img {height:14px;}
}

/* 색상 */
.btn_red {background:#e8440a;color:#fff;border:1px solid #e8440a;}
.btn_red:hover,.btn_red:focus,.btn_red:active {background:#1d1d1d;color:#fff;border:1px solid #1d1d1d;}
.btn_blue {background:#28348d;color:#fff;border:1px solid #28348d;}
.btn_blue:hover,.btn_blue:focus,.btn_blue:active {background:#1d1d1d;color:#fff;border:1px solid #1d1d1d;}
/*여기에 추가 */


.gallery_box .g_list > li a{position:relative;}

.prod_wrap .cate{display:flex; justify-content:center; position: absolute; top:10px; left:10px;}
.prod_wrap .cate span{padding:.5rem 1.5rem; background:var(--primary); color:#fff; font-size:1.2rem; font-weight:500; border-radius:3rem;}

.product_view .flexbox .txtbox .product_ul > li{align-items:center;}
.product_view .flexbox .txtbox .product_ul > li .mark img{height:40px;}
.product_view .flexbox .txtbox .product_ul > li .mark img + img{margin-left:10px;}
.product_view .board_cont .stit span{color:#000; font-weight:600;}


.product_view .btn_bace + .btn_bace{margin-left:10px;}


/* 3차메뉴가 탭메뉴 일떄 */
.sch_menu + .sch_category{margin-top:30px;}
/*.sch_menu [class^="menu_box"] {display:grid;grid-template-columns:repeat(auto-fill, minmax(calc(20% - 1.6rem), 1fr));gap:1.6rem;}*/
.sch_menu [class^="menu_box"] {display:flex; flex-flow:wrap row; justify-content:center; gap:1.6rem;}
.sch_menu [class^="menu_box"] li{width:calc(20% - 1.6rem);}
.sch_menu [class^="menu_box"] li a{display:flex;align-items:center;justify-content:center;position:relative;height:55px;padding:2px 30px 0 20px;text-decoration:none;border:1px solid var(--border);border-radius:50px;transition:.1s;}
.sch_menu [class^="menu_box"] li:is(.on,:hover,:focus,:active) a {font-weight:500;font-size:1.9rem;padding:4px 30px 0 20px;background-color:var(--primary);border-color:var(--primary);color:#fff;}
.sch_menu [class^="menu_box"] li:is(.on,:hover,:focus,:active) a:after {right:12px;width:1rem;height:1rem;border-radius:100%;background:var(--primary);}
.sch_menu [class^="menu_box"] li a span {text-overflow:ellipsis;}
@media only screen and (max-width:1023px){
    .sch_menu {margin-bottom:3rem;}
    .sch_menu [class^="menu_box"] li{width:calc(33.33% - 1.6rem);}
}
@media only screen and (max-width:767px){
    .sch_menu [class^="menu_box"] li{width:calc(50% - 1.6rem);}
    .sch_menu [class^="menu_box"] li a {height:50px;}
}


/* 제품 상세 */
.product_view .product_tit {border-bottom:1px solid #ddd;border-top:2px solid #111;}
.product_view .product_tit em{border-bottom:1px solid #ddd;text-align:center;display:flex;flex-direction:column;padding:2rem;line-height:normal;font-weight:700;font-size:3.3rem;color:#111;}
.product_view .product_tit em span{margin-bottom:1rem;font-size:1.8rem;text-align:center;color:var(--primary);}

.product_view .product_tit em span:empty {display:none;}
.product_view .flexbox {display:flex;margin-top:6.0rem;gap:5rem;}
.product_view .flexbox .img_box {flex-shrink:0;width:35%;display:flex;justify-content:center;align-items:center;aspect-ratio:1/1;border:1px solid #ddd;border-radius:3rem;overflow:hidden;}
.product_view .flexbox .img_box img {height:100%;max-width:100%;}
.product_view .flexbox .txtbox {flex-grow:1;line-height:1.5;display:flex;flex-direction:column;/*justify-content:space-between;*/padding-left:0;}
.product_view .flexbox .txtbox .product_ul {width:100%;}
.product_view .flexbox .txtbox .product_ul > li {display:flex;flex-wrap:wrap;width:100%;padding:1.5rem 0;border-bottom:1px dotted #ddd;}
.product_view .flexbox .txtbox .product_ul > li:last-child {border-bottom:0;}
.product_view .flexbox .txtbox .product_ul > li .stit {position:relative;width:18rem;color:#222;font-size:1.8rem;font-weight:800;line-height:1.7;}
.product_view .flexbox .txtbox .product_ul > li .stit:before {content:"";position:absolute;right:0;top:.8rem;width:1px;height:1.4rem;background:#999;}
.product_view .flexbox .txtbox .product_ul > li .stit:after {content:"";clear:both;display:block;}
.product_view .flexbox .txtbox .product_ul > li span {width:calc(100% - 18rem - 150px);overflow:hidden;padding-left:3.5rem;}
.product_view .board_cont {border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:4rem 2rem;}
.product_view .board_cont:empty {display:none;}
    @media only screen and (max-width:1399px){
        .product_view .flexbox .txtbox {width:auto;}
    }
    @media only screen and (max-width:1199px){
        .product_view .product_tit em {padding:4rem 3rem;}
        .product_view .flexbox {margin-top:4.0rem;}
    }
    @media only screen and (max-width:1023px){
        .product_view .flexbox .txtbox .product_ul > li span {width:calc(100% - 18rem);padding-left:2.5rem;}
        .product_view .flexbox .txtbox .product_ul > li .size_img {flex-direction:row;margin-top:2rem;margin-left:13.5rem;}
    }
    @media only screen and (max-width:767px){
        .product_view .product_tit em {padding:3rem 1.5rem;}
        .product_view .flexbox {flex-direction:column;flex-wrap:wrap;}
        .product_view .flexbox .img_box {width:100%;}
        .product_view .flexbox .img_box .mainSwiper .swiper-slide {max-width:100%;height:auto;background:none;}
        .product_view .flexbox .img_box .thumbSwiper .swiper-slide {height:auto;}
        .product_view .flexbox .img_box .thumbSwiper .swiper-slide:after {display:none;}
        .product_view .flexbox .txtbox {width:100%;margin-top:0;}
        .product_view .flexbox .txtbox .product_ul > li .size_img {position:relative;}
        .product_view .flexbox .txtbox .product_ul > li .size_img a {display:flex;justify-content:center;align-items:center;position:absolute;bottom:0;right:0;background:var(--primary);width:5rem;height:5rem;background:var(--primary);color:#fff;font-size:2.8rem;}
    }
    @media only screen and (max-width:425px){
        .product_view .flexbox .txtbox .product_ul > li .stit {width:auto;padding-right:1rem;}
        .product_view .flexbox .txtbox .product_ul > li span {width:100%;padding-left:0;}
    }