@charset "utf-8";

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

/* **************************************** *
 * font set
 * **************************************** */
body{font-size:var(--default); line-height:var(--lh-default); color:var(--b-default); font-weight:300; word-break:keep-all;}
body, input, textarea, button, select{font-family:"Pretendard", '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
p, li{font-family: var(--lang-ko);}

@media (max-width:860px){
	body, p, li, a{font-family:-apple-system, BlinkMacSystemFont, Sans-serif; text-wrap:balance;}
}

@media (max-width:540px){
	body{letter-spacing:-0.1rem;}

	p{line-height:1.6;}
}

/* **************************************** *
 * global root
 * **************************************** */

 :root {
    /* 포인트 */
	--c-primary: #AE0000;
	--c-secondary: #D1AA98;
	--c-gold: #B47B54;

    /* title / body */
	--b-title:#010101;
	--b-default:#555555;

	/* 게시판 세팅용 */
	--b-01:var(--b-title);
	--border-01: #eee;

	--w: #fff;

	/* background-color */
	--bg-default: #F6F6F6;
	--bg-light: #FBF3E6;
	--bg-dark: #271811;
	--bg-secondary-dark: #472F24;

	/* border 안쓰면 빼세요*/
	--br-default: #E1E1E1;

	 /* 폰트 사용 */
	--lang-en:'Work Sans';
	--lang-ko:"Pretendard";
    --caption:'Orbitron';

	/* 폰트사이즈 */
	--default:17rem;
	--lh-default:1.4118;

	--font-55:55rem;
    --font-37:37rem;
    --font-27:27rem;
    --font-22:22rem;
    --font-19:19rem;
    --font-16:16rem;
    --font-15:15rem;
    --font-14:14rem;

    /* 폰트 weight */
    --weight-100:100;
    --weight-200:200;
    --weight-300:300;
    --weight-400:400;
    --weight-500:500;
    --weight-600:600;
    --weight-700:700;
    --weight-800:800;
    --weight-900:900;

	/* 간격 */    
    --space150:150rem;
    --space140:140rem;
    --space130:130rem;
    --space120:120rem;
    --space110:110rem;
    --space100:100rem;
    --space80:80rem;

	/* 투명도 블랙 */
    --op-b05:rgba(0,0,0,.05);
    --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-w05:rgba(255,255,255,.05);
    --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);
	
	/* 트렌지션 */
	--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;
}

/* 폰트 시스템 */
[data-heading]{font-family:var(--lang-ko); color:var(--b-title);}
[data-heading="3xl"]{font-size:var(--font-55); line-height:1.2727; font-weight:700;}
[data-heading="2xl"]{font-size:var(--font-37); line-height:1.4054; font-weight:700;}
[data-heading="xl"]{font-size:var(--font-27); line-height:1.2593; font-weight:700;}
[data-heading="lg"]{font-size:var(--font-22); line-height:1.4545; font-weight:700;}
[data-heading="md"]{font-size:var(--font-19); line-height:1.4737; font-weight:700;}

[data-body="sm"]{font-size:var(--font-16); line-height:1.375;}
[data-body="xsm"]{font-size:var(--font-15); line-height:1.3333;}
[data-body="xxsm"]{font-size:var(--font-14); line-height:1.2857;}

/* font-weight 시스템 */
.fw-100{font-weight:var(--weight-100);}
.fw-200{font-weight:var(--weight-200);}
.fw-300{font-weight:var(--weight-300);}
.fw-400{font-weight:var(--weight-400);}
.fw-500{font-weight:var(--weight-500);}
.fw-600{font-weight:var(--weight-600);}
.fw-700{font-weight:var(--weight-700);}
.fw-800{font-weight:var(--weight-800);}
.fw-900{font-weight:var(--weight-900);}

/* 컬러 시스템 */
.c-primary{color:var(--c-primary);}
.c-secondary{color:var(--c-secondary);}
.b-title{color:var(--b-title);}
.b-default{color:var(--b-default);}
.bg-default{background-color:var(--bg-default);}
.bg-light{background-color:var(--bg-light);}
.bg-dark{background-color:var(--bg-dark);}
.bg-secondary-dark{background-color:var(--bg-secondary-dark);}

/* boarder 값 기본 셋 */
[data-radius]{overflow:hidden;}
[data-radius="20"]{border-radius:max(1.0417vw, 10rem);}
[data-radius="30"]{border-radius:max(1.5625vw, 15rem);}

[data-border]{border:1px solid;}
[data-border="default"]{border-color:var(--br-default);}

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

    }
}

@media (max-width:1480px){
	:root{
    --font-55:51rem;
    --font-37:36rem;
    --font-27:26rem;
    --font-22:21rem;
    --font-19:18rem;
    --font-16:16rem;
    --font-15:15rem;
    --font-14:14rem;
    --space150:122rem;
    --space140:114rem;
    --space130:106rem;
    --space120:98rem;
    --space110:89rem;
    --space100:81rem;
    --space80:65rem;
    }
}

@media all and (max-width:1200px){
	:root{
    --font-55:47rem;
    --font-37:34rem;
    --font-27:26rem;
    --font-22:20rem;
    --font-19:17rem;
    --font-16:15rem;
    --font-15:14rem;
    --font-14:13rem;
    --space150:103rem;
    --space140:96rem;
    --space130:89rem;
    --space120:83rem;
    --space110:76rem;
    --space100:69rem;
    --space80:55rem;
    }
}

@media all and (max-width:1023px){
	:root{
    --font-55:41rem;
    --font-37:33rem;
    --font-27:25rem;
    --font-22:19rem;
    --font-19:16rem;
    --font-16:15rem;
    --font-15:14rem;
    --font-14:13rem;
    --space150:88rem;
    --space140:82rem;
    --space130:76rem;
    --space120:70rem;
    --space110:64rem;
    --space100:58rem;
    --space80:47rem;
    }
}

@media (max-width:860px){
	:root{--lang-ko:-apple-system, BlinkMacSystemFont, Sans-serif;
    --default:16rem;
    --font-55:37rem;
    --font-37:31rem;
    --font-27:24rem;
    --font-22:18rem;
    --font-19:15rem;
    --font-16:14rem;
    --font-15:13rem;
    --font-14:12rem;
    --space150:72rem;
    --space140:67rem;
    --space130:62rem;
    --space120:58rem;
    --space110:53rem;
    --space100:48rem;
    --space80:38rem;
    }
}

@media (max-width: 540px){
	:root{
    --default:15rem;
    --font-55:25rem;
    --font-37:23rem;
    --font-27:21rem;
    --font-22:15rem;
    --font-19:14rem;
    --font-16:14rem;
    --font-15:13rem;
    --font-14:12rem;
    --space150:56rem;
    --space140:53rem;
    --space130:49rem;
    --space120:45rem;
    --space110:41rem;
    --space100:38rem;
    --space80:30rem;
    }
}

/* **************************************** *
 * 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;}

.wrap-mid{max-width:1280rem;}
.wrap-tight{max-width:1060rem;}

/* 게시글 전용 폭 */
.wrap-post{max-width:900rem;}

/* 게시판 새글 N 배지 */
:is(#gnb, .gnb-mobile-menu, .site-map-list, #lnb) a[data-new="1"]::after{content:"N"; position:relative; top:-8rem; margin-left:2rem; font-family:var(--lang-en); font-size:10rem; font-weight:700; line-height:1; letter-spacing:0; color:var(--c-primary);}

@media all and (max-width:1919px){
	.wrap-wide{margin:0 60rem; max-width:none;}
}

@media all and (max-width:1680px){
	.wrap{margin: 0 180rem;max-width:none;}
}

@media all and (max-width:1300px){
	.wrap-mid{margin:0 70rem; max-width:none;}
}

@media all and (max-width:1150px){
	.wrap-mid{margin:0 55rem;}
	.wrap-tight{margin:0 55rem; 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{display:flex; justify-content:center; align-items:center;}
.swiper-controls .wrap *{cursor:pointer;}
.swiper-controls > div{cursor:pointer;}
.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-container img{width:100%;}

.button-next.swiper-button-disabled, .button-prev.swiper-button-disabled{opacity:0.5;}

.swiper-pagination-bullet{width:10rem; height:10rem; background:var(--op-b30); border-radius:100%;}
.swiper-pagination{display:flex; gap:15rem;}
.swiper-pagination-bullet-active{opacity:1; background:var(--c-primary);}

/* 페이지네이션 비활성 */
.pagination__btn.is-disabled{opacity:.25; pointer-events:none;}

/* **************************************** *
 * site custom
 * **************************************** */

/* button common */
*.btn-basic{display:inline-flex; justify-content:center; align-items:center; gap:20rem; position:relative; box-sizing:border-box; padding:16rem 22rem 16rem 24rem; background:var(--c-primary); border:1px solid var(--c-primary); font-weight:500; font-size:var(--font-16); line-height:1.375; color:var(--w); transition:var(--trans-01); border-radius:100rem;}
*.btn-basic::before{content:""; position:absolute; top:50%; left:0; right:0; height:44px; transform:translateY(-50%);} /* px-keep */
*.btn-basic::after{content:""; display:block; flex-shrink:0; width:12rem; height:12rem; min-width:12rem; background-size:contain; background-position:50% 50%; background-image:url(../img/common/arrow-basic_w.svg); background-repeat:no-repeat;}
.swiper-slide a.btn-basic{display:inline-flex; width:auto;}
button.btn-basic:disabled{opacity:.6; cursor:default; pointer-events:none;}

@media (hover: hover) and (pointer: fine){
	*.btn-basic:hover{background:color-mix(in srgb, var(--c-primary), black 20%); border-color:color-mix(in srgb, var(--c-primary), black 20%);}
}

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

}

@media (max-width: 540px){
	*.btn-basic{padding:14rem 20rem; gap:16rem; min-width:160rem; display:flex;}
}