@charset "utf-8";

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

/* **************************************** *
 * font set
 * **************************************** */
body,p{font-size:var(--default); color:var(--b-02)}
body,input,textarea,button,select{font-family:'Work Sans','Pretendard', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
p{font-language-override: 1.5;}
@media (max-width:860px){
	body{font-size:16rem;}
	body,
	p,
	li,
	a{font-family:-apple-system, BlinkMacSystemFont, Sans-serif;}
}

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

/* **************************************** *
 * global root
 * **************************************** */
 :root {
	--c-01: #171A5E;
	--c-02: #2579EE;
	--b-01: #222222;
	--b-02: #666666;
	--b-03: #999999;
	--w: #fff;
	--bg-01: #212027;
	--bg-02: #F2F2F2;
	--br-01: #E1E1E1;

	/* 게시판용 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:'Work Sans';
	--lang-point:'Orbitron';
	--lang-ko:"Pretendard";
	--font-75:75rem;
	--font-56:56rem;
	--font-28:28rem;
	--font-22:22rem;
	--font-20:20rem;
	--font-17:17rem;
	--font-16:16rem;
	--font-15:15rem;
	--font-14:14rem;
	--default: 18rem;
	--small:var(--font-15);
	--regualr:var(--font-17);
	--large:var(--font-20);
	--board:var(--font-20);
	--margin:103rem;
	--sub-lnb:349rem;
	--gap150:150rem;
	--gap140:140rem;
	--gap130:130rem;
	--gap120:120rem;
	--gap110:110rem;
	--gap100:100rem;
	--gap80:80rem;
	--en-small:var(var(--font-14));
	--op-b10:rgba(0,0,0,.1);
	--op-b20:rgba(0,0,0,.2);
	--op-b30:rgba(0,0,0,.3);
	--op-b40:rgba(0,0,0,.4);
	--op-b50:rgba(0,0,0,.5);
	--op-b60:rgba(0,0,0,.6);
	--op-b70:rgba(0,0,0,.7);
	--op-b80:rgba(0,0,0,.8);
	--op-b90:rgba(0,0,0,.9);
	--op-w10:rgba(255,255,255,.1);
	--op-w20:rgba(255,255,255,.2);
	--op-w30:rgba(255,255,255,.3);
	--op-w40:rgba(255,255,255,.4);
	--op-w50:rgba(255,255,255,.5);
	--op-w60:rgba(255,255,255,.6);
	--op-w70:rgba(255,255,255,.7);
	--op-w80:rgba(255,255,255,.8);
	--op-w90:rgba(255,255,255,.9);
}

.font-h2,h2{font-size:var(--font-75); line-height: 1.2; font-weight: 700;}
.font-h3,h3{font-size:var(--font-56); line-height: 1.375; font-weight: 700;}
.font-h4,h4{font-size:var(--font-28); line-height: 1.32; font-weight: 700;}

.sm-r{font-size: var(--small); font-weight: 300; line-height: 1.5;}
.sm-b{font-size: var(--small);  font-weight: 300; line-height: 1.2;}
.df-r{}
.df-b{}
.l-r{}
.l-b{}
.en-sm-m{font-size: var(--en-small); font-weight: 400;}
.en-sm-r{font-size: var(--en-small); font-weight: 300;}

.board-title{font-size: var(--font-20); font-weight: 700; font-family: var(--lang-en); color: var(--b-01)}
.caption-b{font-size: 15rem; font-weight: 700; color: var(--c-02)!important; font-family: var(--lang-point); text-transform: uppercase; }
.caption-r{font-size: 14rem; font-weight: 300; font-family: var(--lang-en);}
.caption-button{font-size: 12rem; font-family: var(--lang-point); font-weight:300}

 /* 컬러 기본 셋 */
 [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(--w);} /* 영역만 글자 흰색 */

 [data-bg="1"]{background-color: var(--bg-01) !important;}
 [data-bg="2"]{background-color: var(--bg-02) !important;}
 
 /* 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 (max-width:1600px){

    :root{
        --sub-lnb:300rem;
        --margin:74rem;
    }
}
@media (max-width:1480px){

    :root {
        --font-56:48rem;
	}

}


@media all and (max-width:1200px){
	:root {
         --font-75:70rem;
        --font-56:40rem;
        --sub-lnb:290rem;
         --gap130:100rem;
        --gap120:90rem;
        --font-28:26rem;
	}
}

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

        --sub-lnb:220rem;
        --margin:46rem;
        --font-75:57rem;
        --font-56:36rem;
        --font-28:24rem;
        --default:16rem;
         --gap150:120rem;
        --gap130:95rem;
        --font-20:18rem;
	}
}

@media (max-width:860px){

    .caption-b{font-size: 13rem;}

	:root {
		--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
        --font-56:31rem;
        --font-75:48rem;

        --sub-lnb:0;
         --font-28:22rem;
        --margin:32rem;
        --gap120:80rem;
	}
}

@media (max-width: 540px){
	:root {

        --font-75:36rem;
        --font-56:28rem;
        --font-28:20rem;
        --default:15rem;
        --gap120:56rem;
        --gap150:80rem;
          --gap130:56rem;
        --margin:18rem;
        
	}
}

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

 .sub-inner{margin: 0 var(--margin);}
 .wrap{max-width:1520rem;}
 .wrap-wide{max-width:1700rem;}
 .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 40rem;max-width:none;width: auto;}
 }
 
 @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;}

i.corner{position: absolute; display: block;}
i.one{left: 0; top:0; border-top-left-radius: 3rem; border-top: 1px solid var(--op-w50); border-left: 1px solid var(--op-w50);}
i.two{top: 0; right: 0; border-top-right-radius: 3rem; border-top: 1px solid var(--op-w50); border-right: 1px solid var(--op-w50);}
i.three{right: 0; bottom: 0; border-bottom-right-radius: 3rem; border-right: 1px solid var(--op-w50); border-bottom: 1px solid var(--op-w50);}
i.four{left: 0; bottom: 0; border-bottom-left-radius: 3rem; border-bottom: 1px solid var(--op-w50); border-left: 1px solid var(--op-w50);}

.point-plus{width: 12rem; height: 12rem; position: absolute; z-index: 10;}
.point-plus .svg{}

/* button common */
.btn-wrap{display: flex;}
*.btn-defualt{position: relative; width: 60rem; height: 60rem; background-color: rgba(255,255,255,.02); gap: 20rem; display: flex; align-items: center; justify-content: center; }
*.btn-defualt .btn-dot{ width: 13rem; height: 13rem; position: relative;}
*.btn-defualt .btn-dot > *{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: all .2s ease-in-out;}
*.btn-defualt .plus{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
*.btn-defualt .plus svg{width: 100%; height: 100%;}
*.btn-defualt .round{opacity: 0; width: 0; height: 0; border-radius: 20rem; background-color: var(--c-02);}
*.btn-defualt em{color: var(--w);}
*.btn-defualt i.corner{width: 10rem; height: 10rem;}

.btn-defualt.long-ver{width: 200rem;}
.btn-defualt.dark .caption-button{color: var(--b-01);  }
.btn-defualt.dark path{stroke: var(--b-01);}
[lang="ko-KR"]  .btn-defualt.dark .caption-button{font-size: 16rem; font-weight: 400;}
.btn-defualt.dark i{border-color: var(--b-01);}
.product-page .btn-wrap{margin-top: 80rem; justify-content: center;}


.scroll-down{position: absolute; left: 80rem; bottom: 49rem; display: inline-flex; align-items: center; z-index: 10;}
.scroll-down i{width: 55rem;height: 55rem;border-radius: 4rem;border:1px solid var(--op-w20);backdrop-filter: blur(2px);background-color: rgba(32,32,32,.27);display: flex;align-items: center;justify-content: center;}
.scroll-down span{font-size: 11rem;font-weight: 600;color: var(--w);margin-left: 16rem;text-transform: uppercase;}


@media (hover: hover) and (pointer: fine){
	
    *.btn-defualt:hover .round{width: 10rem; height: 10rem; opacity: 1;}
    *.btn-defualt:hover .plus{width: 0; height: 0; opacity: 0;}
}

@media all and (max-width:1023px){
	.scroll-down{left: 40rem; }
    .scroll-down i{width: 50rem; height: 50rem;}

    *.btn-defualt{width: 54rem; height: 54rem;}
    *.btn-defualt i.corner{width: 8rem; height: 8rem;}
    
}

@media (max-width: 540px){

    *.btn-defualt{width: 44rem; height: 44rem;}
    *.btn-defualt .btn-dot{width: 10rem; height: 10rem;}

    .scroll-down{left: 20rem;}
    .scroll-down i{width: 30rem; height: 30rem;}
    .scroll-down span{margin-left: 10rem;}

    [lang="ko-KR"] .btn-defualt.dark .caption-button{font-size: 15rem;}
	
}