@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*      
 * SUMMARY:
 * 0) ROOT
 * 1) WRAP
 * 2) SITE CUSTOM 
    - 사이트 전반적으로 함께 쓰이는 속성
	- 메인, 서브 함께 쓰이는 속성
*/

/* **************************************** *
 * font set
 * **************************************** */
body,p{font-size:17rem; line-height: 1.588; color:#111;}
body,input,textarea,button,select{font-family:"SUIT", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}

#content{padding-top: 97rem;}
@media (max-width:1023px){
    body,p{font-size:16rem;}
}
@media (max-width:860px){
	body{font-size:15rem;}
	body,
	p,
	li,
	a{font-family:-apple-system, BlinkMacSystemFont, Sans-serif;font-size: 16rem;}
    #content{padding-top: 90rem;}
}

@media (max-width:540px){
	body{letter-spacing: -0.1rem; font-size:15rem;}
	p {line-height: 1.6; font-size:15rem;}
    #content{padding-top: 76rem;}
}

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #248AC0;
	--c-02: #2848a6;
	--b-01: #111;
	--b-02: #333;
	--b-03: #6d6d6d;
	--b-04: #a1a1a1;
	--g-01: #bcbcbc;
	--f-01: #fff;
	--bg-01: #f4f4f4;
	--bg-02: #e7e7e7;
	--bd-01: #dadada;
	--bd-02: rgba(255,255,255,0.1);
	--bd-03: #E7E7E7;
	--bd-04: #EEEEEE;
	--br-01:max(0.5208vw, 5rem);
	--br-02:max(1.0417vw, 10rem);
    /* 오른쪽이 최소값 */
	--br-03:max(1.5625vw, 10rem);

	/* 게시판용 root */
	--border-01: #eee;
	--trans-01:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-02:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-03:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 0.5s ease;
	--lang-en:'Fahkwang';
	--lang-ko:"SUIT";
	--font-110:110rem;
	--font-36: 55rem;
	--font-20:20rem;
	--font-23: 29rem;
	--font-17: 17rem;
	--font-16:16rem;
	--font-15:15rem;
	--font-14:14rem;
	--font-12: 14rem;
	--font-11:11rem;
	--en-font-49:55rem;
	--sec-gap01:130rem;
	--sec-gap04:120rem;
	--sec-gap02:86rem;
	--sec-gap03:54rem;
}

.font-h1{font-size:var(--font-110); line-height: 3.57; font-weight: 800;}
.font-h3--en{font-size:var(--en-font-49); line-height: 1.3; font-weight: 800; font-family: var(--lang-en) !important}
.font-h3{font-size:var(--font-36);line-height: 1.3;font-weight: 800;}
[lang="en-US"] .font-h3{font-weight: 800;}
.font-h4,h4{font-size:var(--font-23); line-height: 1.37;font-weight: 800; }
.font-h5{font-size:var(--font-20); line-height: 1.55;font-weight: 500; }
.font-h5--b{font-size:var(--font-20); line-height: 1.55;font-weight:700; }
.font-01{font-size:var(--font-17); line-height: 1.5; font-weight: 700;}
.font-02{font-size:var(--font-16); line-height: 1.5; font-weight:500 ;}
.font-02--b{font-size:var(--font-16); line-height: 1.5;  font-weight: 700;}
.font-small{font-size: 11rem; font-weight: 800;}
.point-title, .font-small--b{ font-size: var(--font-12); font-weight: 600;}

[class$="--en"]{font-family: var(--lang-en);}

 /* 컬러 기본 셋 */
 [data-color="c1"]{color:var(--c-01) !important;}
 [data-color="c2"]{color:var(--c-02) !important;}
 [data-color="b1"]{color:var(--b-01) !important;}
 [data-color="b2"]{color:var(--b-02) !important;}

 [data-color="w"],
 [data-color="w"] *{color: var(--f-01);} /* 영역만 글자 흰색 */

 [data-bg="1"]{background-color: var(--bg-01) !important;}
 [data-bg="2"]{background-color: var(--bg-02) !important;}

 [data-font="1"]{font-family: var(--lang-en);}
 
 /* boarder 값 기본 셋 */
 [data-border]{border:1px solid;}
 [data-radius]{overflow:hidden;}
 [data-radius="10"]{border-radius:max(0.5208vw, 5rem);}
 [data-radius="20"]{border-radius:max(1.0417vw, 10rem);}

@media all and (max-width:1200px){
	:root {
		
	}
}

@media all and (max-width:1023px){
	:root {
       
        --font-36:32rem;
        --font-23:20rem;
        --font-20:18rem;
        --font-17:15rem;
        --font-16:15rem;
        --en-font-49:44rem;

        --sec-gap01:80rem;
        --sec-gap04:80rem;
        --sec-gap02:66rem;
        --sec-gap03:44rem;
	}
}

@media (max-width:860px){
	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
        --font-36:28rem;
        --font-20:16rem;
        --en-font-49:32rem;
	}
}

@media (max-width: 540px){
	:root {
        --en-font-49:26rem;
        --font-23: 21rem;
        --font-36:24rem;
        --font-17:14rem;
        --sec-gap01:60rem;
        --sec-gap02:46rem;
        --sec-gap04:48rem;
 }
}

/* **************************************** *
 * wrapper
 * **************************************** */
 *[class^="wrap"]{position:relative;margin:0 auto;}

 .wrap{/* max-width:1520rem; */ margin: 0 156rem; }
 .wrap-wide{/* max-width:1831rem; */ margin: 0 36rem;}
 .wrap-narrow{max-width:1206rem;}
 
 @media all and (max-width:1919px){
	 /* .wrap-wide{margin: 0 60rem;	 max-width: none;} */
 }
 
 @media all and (max-width:1680px){
	 .wrap{margin:0 60rem;max-width:none;}
 }
 
 @media all and (max-width:1023px){
	 *[class^="wrap"]{margin:0 30rem;max-width:none;width: auto;}
 }
 @media all and (max-width:860px){
    *[class^="wrap"]{margin:0 24rem;}
}
 @media all and (max-width:540px){
	 *[class^="wrap"]{margin:0 20rem;}
 }

 /* **************************************** *
 * swiper set
 * 
 * 사이트 기본 슬라이드 스타일에 맞게 마음껏 수정하면 됩니다.
 * 특정 페이지에서만 다른 스타일 슬라이드를 사용한다면 부모 클레스 상쇄하여 사용 
 * **************************************** */
 .swiper-controls .wrap *{cursor:pointer;}
 .swiper-container img{width:100%;}
 .swiper-controls > div{cursor: pointer;}
 .button-next.swiper-button-disabled,
 .button-prev.swiper-button-disabled{opacity:0.5;}
 
 .swiper-controls{display:flex; justify-content:center; align-items:center;}
 .swiper-controls *[class^="swiper-btn--"]{position:relative;width:30rem;height:30rem;cursor:pointer;display: flex;align-items: center;margin: 0 25rem;font-size: 16rem; font-weight: 600;}
 .swiper-controls *[class^="swiper-btn--"]::after{content:"";display:block;min-width: 30rem;height: 30rem;background:url(/theme/basic/img/common/arrow-basic.svg) no-repeat 50% 50%;background-size: 8rem;}
 .swiper-controls .swiper-btn--prev{flex-direction: row-reverse;}
 
 .swiper-controls .swiper-btn--next::after{/* transform:rotate(-90deg); */}
 .swiper-controls .swiper-btn--prev::after{transform: rotate(180deg);}
 .swiper-controls .swiper-button-disabled{opacity: 0.5;}
 
 .swiper-pagination-bullet{width:10rem; height:10rem; background:#fff; border-radius:100%;}
 .swiper-pagination{display:flex; gap:15rem;}


/* **************************************** *
 * site custom
 * **************************************** */
/* tag common */
p{line-height:1.6; font-weight:300;}

/* button common */
*.btn-basic{display:inline-flex;justify-content:space-between;align-items:center;position:relative;box-sizing:border-box;line-height: 1;padding: 24rem 49rem;font-weight:800;font-size: 15rem;transition: var(--trans-01);border-radius: 100rem;}
*.btn-basic.dark{background-color: var(--b-01); color: var(--f-01); border:1px solid var(--b-01)}
*.btn-basic.white{background-color: var(--f-01); color: var(--b-01); border:1px solid var(--f-01)}
*.btn-basic.border{border: 1px solid var(--b-01); background-color: transparent; color: var(--b-01);}
*.btn-basic.border-w{border: 1px solid var(--f-01);background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(4px); color: var(--f-01);}


/* *.btn-basic::after{content:"";display:block;height:11rem;margin-left:20rem;background-position:50% 50%;min-width:11rem;background-image:url(../img/common/arrow-basic_w.svg);background-repeat:no-repeat;} */

/* product box */
.cmn-box{border-radius: var(--br-02); position: relative; background-color: var(--bg-01); display: block; padding: 30rem 18rem 18rem;}
.cmn-box em{text-indent: 2rem;max-width: 90%;color: var(--b-01);margin-bottom: 23rem;display: block;-webkit-box-orient: vertical;-webkit-line-clamp: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;font-size: 18rem;letter-spacing: -0.2rem;font-weight: 800;}
.cmn-box figure{width: 100%; background-color: var(--f-01); aspect-ratio:1/.9001 auto; position: relative; border-radius: var(--br-02); overflow: hidden; display: flex; align-items: center; justify-content: center;}
.cmn-box figure img{ object-fit: contain; }
.cmn-box .btn-round{right: 18rem; top: 20rem;}

.btn-round{width: 44rem; height: 44rem; border-radius: 100%;  display: flex; align-items: center; justify-content: center;  position: absolute; opacity: 0; visibility: hidden; transition: var(--trans-03);}
.btn-round svg{}
.btn-round.dark{background-color: var(--b-01);}
.btn-round.white{background-color: var(--f-01);}

.link-blur{ padding: 54rem 35rem 44rem;  border-radius: var(--br-02);  background: rgba(228, 228, 228, 0.29); backdrop-filter: blur(12px);}
.link-blur span{display: block; color: var(--b-01); margin-bottom: 21rem;}
.link-blur em{color: var(--b-01); display: block;}
.link-blur .btn-round{position: absolute; right: 22rem; top: 22rem;}
.link-blur .btn-basic{margin-top: 70rem;}

.reveiw-stars{display: flex;align-items: center; gap: 3rem;}
.reveiw-stars path{fill:transparent; stroke:#c2c2c2;}
.reveiw-stars[data-star="1"] > svg:nth-child(-n + 1) path{fill: var(--b-01); stroke: var(--b-01);}
.reveiw-stars[data-star="2"] > svg:nth-child(-n + 2) path{fill: var(--b-01); stroke: var(--b-01);}
.reveiw-stars[data-star="3"] > svg:nth-child(-n + 3) path{fill: var(--b-01); stroke: var(--b-01);}
.reveiw-stars[data-star="4"] > svg:nth-child(-n + 4) path{fill: var(--b-01); stroke: var(--b-01);}
.reveiw-stars[data-star="5"] > svg:nth-child(-n + 5) path{fill: var(--b-01); stroke: var(--b-01);}

.reveiw-stars.view-ver{justify-content: center; margin-bottom: 20rem;}

@media (min-width:1024px){

}


@media (hover: hover) and (pointer: fine){
	*.btn-basic.dark:hover{background: var(--f-01); color:var(--b-01) !important;}
    *.btn-basic.border:hover{background-color: var(--b-01); color: var(--f-01);}
    .cmn-box:hover .btn-round,
    .link-blur:hover .btn-round{opacity: 1; visibility: visible;}
}

@media all and (max-width:1023px){
	/* .btn-round{display: none;} */
    .btn-round{opacity: 1; visibility: visible; width: 34rem; height: 34rem; }

    .cmn-box{padding: 20rem 14rem 14rem;}
    .cmn-box .btn-round{height: auto; width: auto; right: 18rem; top: 25rem;}
    .cmn-box .btn-round svg{width: 10rem; height: 10rem;}
    .cmn-box .btn-round.dark{background-color: transparent;}
    .cmn-box .btn-round.dark path{stroke: var(--b-01);}
    .cmn-box em{margin-bottom: 10rem;}

    *.btn-basic{padding: 22rem 44rem; font-weight: 700; }

    .reveiw-stars svg{width: 13rem; height: 14rem;}

    .link-blur{padding: 28rem;}

}
@media all and (max-width:860px){
    *.btn-basic{padding: 17rem 30rem; font-size: 13rem; }
}

@media (max-width: 540px){
   
    .cmn-box{padding: 16rem 14rem 14rem;}
    .cmn-box em{margin-bottom: 12rem;}
    .cmn-box .btn-round{right: 16rem;top: 22rem;}
    /* .cmn-box .btn-round svg{width: 7rem; height: 8rem;} */
    *.btn-basic{justify-content: center; width: 100%; border-radius: 8rem;}
}