@charset "utf-8";

/* **************************************** *
 * root
 * **************************************** */
 :root {
    --height-full: 100vh;
 }

 @media all and (max-width:1023px){
	 :root {
            --height-full:calc(var(--vh, 1vh) * 100);
    }
}

 /* **************************************** *
 * often class
 *********************************************
 *
 * discription: 자주 쓰는 class 선언
 * 
  * **************************************** */
 
/* 숨김처리 */
.none{display: none !important;}
.mob-block{display: none !important;} /* 모바일에서만 나타날때 */
.tablet-block{display: none !important;} /* 테블릿에서부터 나타날때 */

/* 정렬 */
[data-align="left"]{text-align:left;}
[data-align="center"]{text-align:center;}
[data-align="right"]{text-align:right;}

/* 이미지 기본 셋 */
[data-img-set]{width:100%; display:block; margin:0 auto;} /* max-width만 커스텀으로 따로 지정 */

@media (max-width: 1023px){
	.tablet-none{display: none !important;} /* 테블릿부터 가릴때 */
	.tablet-block{display: block !important;}
}

@media (max-width: 540px){
	.mob-none{display: none !important;} /* 모바일에서만 가릴때 */
	.mob-block{display: block !important;} 
}

/* 백그라운드 세팅 */
[data-bg-set]{background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}

/* 글자수 자르기 */
*[data-txt-overflow]{display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}
[data-txt-overflow="2"]{-webkit-line-clamp:2;}
[data-txt-overflow="3"]{-webkit-line-clamp:3;}
 
 
 /* **************************************** *
 * flex set
 *********************************************
 *
 * data-grid="정렬"
 * discription: 정렬값 따라 변경
 * 
 * @example
 * <ul data-flex>
 * <ul data-flex="center between">
 * <ul data-flex="center">
 * **************************************** */
  [data-flex]{display:flex;}
  [data-flex="center"]{align-items: center;}
  [data-flex="center center"]{align-items: center; justify-content: center;}
  [data-flex="column"]{flex-direction:column; justify-content: center;}
  [data-flex="center between"]{align-items: center; justify-content: space-between;}
  [data-flex="between"]{justify-content: space-between;}
  [data-flex-wrap]{flex-wrap: wrap;}

 /* **************************************** *
 * grid set
 *********************************************
 *
 * data-grid="컬럼수"
 * discription: 데이터 값에 따라 컬럼 수 변경
 * 
 * @example
 * <ul data-grid="4">
  * **************************************** */
 [data-grid]{display:grid;}
 [data-grid="2"]{grid-template-columns:1fr 1fr;gap: 18rem;}
 [data-grid="3"]{grid-template-columns:1fr 1fr 1fr;gap: 34rem;}
 [data-grid="4"]{grid-template-columns:1fr 1fr 1fr 1fr;gap: 47rem;}
 [data-grid="5"]{grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap: 37rem;}
 
 @media (max-width: 1023px){
     [data-grid="3"]{gap: 18rem;}
     [data-grid="4"]{grid-template-columns:1fr 1fr 1fr; gap:20rem;}
     [data-grid="5"]{grid-template-columns:1fr 1fr 1fr; gap:28rem;}
 }
 
 @media (max-width:860px){
 }
 
 @media (max-width: 540px){
     [data-grid="3"]{grid-template-columns:1fr; gap:18rem;}    
     [data-grid="4"]{gap:25rem 15rem; grid-template-columns:1fr 1fr;}
     [data-grid="5"]{grid-template-columns:1fr 1fr; gap:30rem 18rem;}
 }

 /* *****************************************
 * list set
 *********************************************
 *
 * data-list="리스트속성"
 * 
 * @example - dot, line, 추가예정, 추가예정
 * <ul data-list="dot">
  * **************************************** */
  
  [data-list] > *{position:relative; margin-bottom:11rem;}
  [data-list] > *::before{content:""; position:absolute; left:0; background-color:var(--b-01);}
  [data-list] > *:last-child{margin:0;}
  [data-list="dot"] > *{padding-left:10rem;}
  [data-list="dot"] > *::before{top:8rem; width:4rem; height:4rem; border-radius:10rem; background-color: #bbb;}
  [data-list="line"] > *{padding-left: 13rem;}
  [data-list="line"] > *::before{top: 10rem;width:6rem;height:1rem;}    
  [data-list="square"] > *{padding-left: 10rem;}
  [data-list="square"] > *::before{top:7rem; width:4rem; height:4rem;}
  [data-list="num"] > *{display:flex;align-items:center;margin-bottom: 5rem;}
  [data-list="num"] > * > i{display:flex;justify-content:center;align-items:center;width: 23rem;height: 23rem;margin-right: 10rem;background: var(--b-01);color: var(--f-01);border-radius:30rem;font-size: 13rem;}
  [data-list="check"] > li{display:flex; position:relative; padding-left:34rem;}
  [data-list="check"] > li::before{width:20rem; height:20rem; background:var(--c-01); border-radius:100%;}
  [data-list="check"] > li::after{content:""; position:absolute; top:4rem; left:7rem; width:6rem; height:9rem; box-sizing:border-box; border-right:2rem solid var(--f-01); border-bottom:2rem solid var(--f-01); transition:all .2s; transform:rotate(37deg); -webkit-transform:rotate(37deg); -webkit-transition:all .2s;}
  [data-list="icon"] > *{padding-left:20rem; margin-bottom: 30rem;}
  [data-list="icon"] > *::before{top:9rem; width:8rem; height:8rem; border-radius: 2rem; background: var(--c-01); transform: rotate(45deg);}
  [data-list="icon"] > * strong {display: block; margin-bottom: 10rem; line-height: 1.5; font-size: var(--font-size-18); font-weight: 600;}
    
  @media (max-width:860px){

  }
  
  @media (max-width: 540px){		
		[data-list] > *{position:relative; margin-bottom:8rem;}
		[data-list="check"] > li::before{width:18rem; height:18rem;}
		[data-list="check"] > li{padding:16rem 0rem; padding-left:27rem !important;}
		[data-list="check"] > li::after{top:19rem; left:6rem;}
		[data-list="dot"] > *::before {top: 6rem;}
		[data-list="icon"] > * {padding-left: 16rem; margin-bottom: 20rem;}
		[data-list="icon"] > *::before {top: 6rem; width: 6rem; height: 6rem; border-radius: 1px;}
  }

 /* *****************************************
 * list set
 *********************************************
 *
 * data-between="속성"
 * 
 * @discription - line, 추가예정, 추가예정
							<ul data-between="line">
 *
 * @example - 내용 ㅣ 내용 ㅣ 내용
 * 
  * **************************************** */

[data-between]{display:flex;align-items: center;flex-wrap: wrap;}
[data-between] > *{position:relative;}
[data-between] > *:last-child::after{opacity:0; margin: 0;}
[data-between] > *::after{content:""; display:inline-block; position:relative;}
[data-between="line"] > *::after{top:2rem; width:1px; height:16rem; margin:0 10rem; background:#cbcbcb;}
[data-between="dot"] > *::after{width: 4rem;height: 4rem;margin:0 10rem;background: #a5a5a5;border-radius: 100%;}
[data-between="dot"] > li{display: flex; align-items: center;}

@media (max-width:860px){

}

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

  /* **************************************** *
 * scroll animation
 * **************************************** */
 /* 
 * discription: 애니메이션 세팅
 */

[data-ani]{opacity:0;transition:transform 1.6s ease, opacity 1.3s ease;transform-style:preserve-3d;will-change:transform;display: block;}
[data-ani].is_moved{opacity:1; transform:none;}
[data-ani="img"]{transform:translate(0%, 40%) matrix3d(1, 0, 0, 0, 0, 0.997564, 0.0697565, -0.00028, 0, -0.0697565, 0.997564, -0.00249391, 0, 0, 40, 0.9);}
[data-ani="bottom"]{transform:translateY(-60rem);}
[data-ani="top"]{transform:translateY(60rem);}
[data-ani="right"]{transform:translateX(60rem);}
[data-ani="left"]{transform:translateX(-60rem);}
[data-ani="rotate"]{transform:rotate(5deg);}
[data-ani="scale"]{animation: motion-scale 10s forwards cubic-bezier(0.12, 0.4, 0.41, 0.86);}
[data-ani="preserveTop"]{transform:translateY(100%) rotateX(-80deg); transform-style:preserve-3d; transform-origin:center bottom;}
[data-ani="hidden"]{transform:translateY(60rem);}
[data-ani="skew"]{transform: translateY(60rem) skew(0deg, 7deg) rotate(.001deg);}
[data-ani-wrap]{overflow: hidden;display: block;}

/*  keyframe */
@keyframes motion-scale{
	0%{transform: scale(1.1);}
	100%{transform: scale(1);}
}

@media (max-width: 540px){
	[data-ani]{transition: transform 0.9s ease, opacity 1s ease;}	
    [data-ani="top"]{transform:translateY(30rem);}
	[data-ani="bottom"]{transform:translateY(-30rem);}
	[data-ani="right"]{transform: translateY(-30rem);}
	[data-ani="left"]{transform:translateY(-30rem);}
	[data-ani="hidden"]{transform:translateY(30rem);}
	[data-ani="skew"]{transform: translateY(30rem) skew(0deg, 7deg) rotate(.001deg);}

	[data-ani].table-scroll{opacity: 1 !important; transform: none !important;}
}

  /* **************************************** *
 * delay set
 * **************************************** */
 /* 
 * discription:딜레이 세팅
 */
[data-delay="100"]{transition-delay:100ms !important;}
[data-delay="150"]{transition-delay:150ms !important;}
[data-delay="200"]{transition-delay:200ms !important;}
[data-delay="250"]{transition-delay:250ms !important;}
[data-delay="300"]{transition-delay:300ms !important;}
[data-delay="350"]{transition-delay:350ms !important;}
[data-delay="400"]{transition-delay:400ms !important;}
[data-delay="450"]{transition-delay:450ms !important;}
[data-delay="500"]{transition-delay:500ms !important;}
[data-delay="550"]{transition-delay:550ms !important;}
[data-delay="600"]{transition-delay:600ms !important;}
[data-delay="650"]{transition-delay:650ms !important;}

/* animation delay */
[data-ani-delay="100"]{animation-delay:100ms !important;}
[data-ani-delay="150"]{animation-delay:150ms !important;}
[data-ani-delay="200"]{animation-delay:200ms !important;}
[data-ani-delay="250"]{animation-delay:250ms !important;}
[data-ani-delay="300"]{animation-delay:300ms !important;}
[data-ani-delay="350"]{animation-delay:350ms !important;}
[data-ani-delay="400"]{animation-delay:400ms !important;}
[data-ani-delay="450"]{animation-delay:450ms !important;}
[data-ani-delay="500"]{animation-delay:500ms !important;}
[data-ani-delay="550"]{animation-delay:550ms !important;}
[data-ani-delay="600"]{animation-delay:600ms !important;}
[data-ani-delay="650"]{animation-delay:650ms !important;}

/* **************************************** *
 * fullpage animation set
 * **************************************** */
 [fullpage-ani]{opacity:0;transition:all 1.3s ease;transition-delay: 0.2s;}
 [fullpage-ani="left"]{transform:translateX(-70rem);}
 [fullpage-ani="right"]{transform:translateX(70rem);}
 [fullpage-ani="top"]{transform:translateY(-70rem);}
 [fullpage-ani="bottom"]{transform:translateY(70rem);}
 [fullpage-ani="scale"]{transform:scale(1.05);}
 #fullpage .section.active [fullpage-ani]{opacity:1; transform:none; transition-delay:0.4s;}


 /* **************************************** *
 * rolling contents
 * **************************************** */
 /* 
 * discription: 이미지 롤링
 */

.rolling-img__box{display:inline-block;white-space:nowrap;animation:rolling_img 80s linear infinite;animation-play-state:running;display: inline-flex;align-items: center;}
.rolling-img:hover .rolling-img__box{animation-play-state: paused;}
.rolling-img img{margin:0 13rem;border-radius:20rem;display: block;}
.rolling-img{white-space:nowrap;overflow: hidden;}

@keyframes rolling_img {
    0%{transform:translateX(0%);}
    100%{transform:translateX(-100%);}    
}

 /* **************************************** *
 * animation background position
 * **************************************** */
 /* 
 * discription: 백그라운드 포지션 모션
 */

[data-parallax]{display:block; background-position:50% 50%; background-repeat:no-repeat;}


/* **************************************** *
* svg action
* **************************************** */
@keyframes offset {
	to{stroke-dashoffset:0px;}
}

/* **************************************** *
* select 
* *****************************************
* @exgample 
	<div class="select-link">
		<span class="select-link__btn">링크 셀렉트</span>
		<ul class="depth2" data-flex="center">
			<li><a href="">옵션1</a></li>
			<li><a href="">옵션2</a></li>
		</ul>
	</div>
*
* **************************************** */
.select-link__btn{display:flex; align-items:center; position:relative; font-weight:600; font-size:17rem; cursor:pointer;}
.select-link__btn::after{content:""; position:absolute; right:0; width:40rem; height:40rem; background-size:13rem; background-position:50% 50%; background-image:url(../img/common/arrow-basic.svg); background-repeat:no-repeat; border-radius:100%;}
.select-link > ul{display:flex; align-items:flex-start; position:absolute; opacity:0; visibility:hidden; width:100%; box-sizing:border-box; margin-top:10rem; padding:11rem 0rem; background:var(--b-01); transition:var(--trans-01); flex-direction:column; border-radius:5rem;}
.select-link{position:relative;width:160rem;z-index: 5;}
.select-link > ul.on{opacity:1; visibility:visible;}
.select-link > ul a{display:block;opacity:1;box-sizing:border-box;padding:6rem 15rem;font-size:16rem;color:#fff;transition:var(--trans-01);/* white-space: nowrap; */}
.select-link > ul li{width:100%;}
.select-link > ul a:hover{opacity:0.5;}
.select-link__btn.on::after{transform:rotate(180deg);}

/* **************************************** *
* tab basic transition 
* **************************************** */
.tabs li{color: #c6c6c6; cursor: pointer;}
.tabs li.active{font-weight:800;color:var(--c-01);}

/* **************************************** *
* anchor set
* **************************************** */ 
/**
* 페이지 엥커별 on처리 
* 
* @author B-WORKER
* @requires common.js
* 
*
*/

.tab-anchor{display:inline-flex; justify-content:center; align-items:center; padding:8rem 8rem; background:#fff; box-shadow:0px 4px 20px 0px rgba(17, 114, 210, 0.11); border-radius:5rem;}
.tab-anchor-wrap{position:fixed;bottom:40rem;left:0;z-index: 2;width:100%;text-align:center;}
.tab-anchor li a{display:block; position:relative; padding:17rem 30rem; font-weight:600; font-size:15rem; color:#1c3f62; border-radius:5rem;}
.tab-anchor li a.on{background:#f3f8fd; color:var(--c-01);}
.tab-anchor li a::before{content:""; position:absolute; opacity:0; top:-23rem; left:50%; width:6rem; height:6rem; margin-left:-3rem; background:var(--c-01); border-radius:100%;}
.tab-anchor li a.on::before{opacity:1;}

@media all and (max-width:1023px){
	.tab-anchor li a{padding:11rem 20rem; font-size:14rem;}
}

@media (max-width: 540px){
	.tab-anchor-wrap{display:none;}
}

/* **************************************** *
 * check & radio custom
 * *****************************************/
 /* @exgample 
  *
	<span class="check-box">
		<label class="check-con" for="privacy-check">
			<input type="checkbox" name="privacy-check" id="privacy-check" class="agree" value="Y" title="개인정보 수집 및 이용 동의">
			<span class="checkmark"></span>
			<em class="">개인정보필수항목의 수집 및 이용에 동의합니다.</em>				
		</label>
	</span>	
 *
 * **************************************** */ 
 .check-box{display: inline-flex;cursor: pointer;}
 .check-box + .check-box{margin-left: 18rem;}
 .check-box label{padding-left: 36rem;box-sizing: border-box;cursor: pointer;position: relative;}
 .check-box label + label{margin-left: 12rem;}
 .check-box em{font-family: var(--lang-ko);}

 .check-box [type="checkbox"]:not(:checked), .check-box [type="checkbox"]:checked {position: absolute;left: 0;opacity: 0.01;cursor: pointer;}
 .check-box [type="checkbox"]:not(:checked) + .checkmark,
 .check-box [type="checkbox"]:checked + .checkmark {position:absolute;cursor: pointer;border:1px solid #ccc;width: 23rem;height: 23rem;left: 0;top: -1rem;background: transparent;-webkit-transition: all .275s;transition: all .275s;}
 .check-box [type="checkbox"]:not(:checked) + .checkmark:after, .check-box [type="checkbox"]:checked + .checkmark:after {content: '';width: 7rem;height: 11rem;box-sizing: border-box;border-bottom: 2rem solid var(--b-01);border-right: 2rem solid var(--b-01);position: absolute;top: 3rem;left: 7rem;-webkit-transition: all .2s;transition: all .2s;-webkit-transform: rotate(37deg);transform: rotate(37deg);opacity: 0;}
 .check-box [type="checkbox"]:not(:checked) + .checkmark:after {opacity: 0;-webkit-transform: scale(0) rotate(0);transform: scale(0) rotate(0);}
 .check-box [type="checkbox"]:checked + .checkmark:after {opacity: 1;}
 .check-box [type="checkbox"]:checked + .checkmark + em{font-weight: 600;}
 .check-box [type="checkbox"]:disabled:not(:checked) + .checkmark:before,.check-box [type="checkbox"]:disabled:checked + .checkmark:before {box-shadow: none;border-color: #bbb;background-color: #e9e9e9;}
 .check-box [type="checkbox"]:disabled:checked + .checkmark:after {color: #777;}
 .check-box [type="checkbox"]:disabled + .checkmark {color: #aaa;}

 /* radio */
 .check-box [type="radio"]:not(:checked), .check-box [type="radio"]:checked {position: absolute;left: 0;opacity: 0.01;}
 .check-box [type="radio"]:not(:checked) + .checkmark,
 .check-box [type="radio"]:checked + .checkmark {position:absolute;cursor: pointer;width: 24rem;height: 24rem;border-radius: 80rem;border:1px solid #ccc;left: 0;top: -1rem;background: transparent;-webkit-transition: all .275s;transition: all .275s;}
 .check-box [type="radio"]:not(:checked) + .checkmark:after, .check-box [type="radio"]:checked + .checkmark:after {content: '';width: 10rem;height: 7rem;border-radius: 100%;box-sizing: border-box;background: url(../img/board/arrow-check_w.svg) no-repeat;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transition: all .2s;transition: all .2s;opacity: 0;}
 .check-box [type="radio"]:not(:checked) + .checkmark:after {/* opacity: 0 */ transform: translate(-50%,-50%)/*  scale(0.7) */;}
 .check-box [type="radio"]:checked + .checkmark{background-color: var(--b-01);border-color: var(--b-01);}
 .check-box [type="radio"]:checked + .checkmark:after {opacity: 1;transform: translate(-49%,-50%);}
 .check-box [type="radio"]:disabled:not(:checked) + .checkmark:before,[type="radio"]:disabled:checked + .checkmark:before {box-shadow: none;border-color: #bbb;background-color: #e9e9e9;}
 .check-box [type="radio"]:disabled:checked + .checkmark:after {color: #777;}
 .check-box [type="radio"]:disabled + .checkmark {color: #aaa;}
 .check-box [type="checkbox"]:checked + .checkmark{border-color: var(--b-01);}
 
 .check-box[data-check="round"] [type="radio"]:not(:checked) + .checkmark:after,
 .check-box[data-check="round"] [type="radio"]:checked + .checkmark:after{width:12rem;height:12rem;transition:all .3s;-webkit-transition:all .3s;transform: translate(-50%,-50%) scale(0.5);}
 .check-box[data-check="round"] [type="radio"]:checked + .checkmark:after{background: var(--b-01);transform: translate(-50%,-50%) scale(1);}
 .check-box[data-check] [type="radio"]:checked + .checkmark{background:none;border-color: var(--b-01);}
 .check-box[data-check="round"] [type="radio"] + .checkmark:after{ background-image: none;}

.check-box[data-check="border"] [type="radio"] + .checkmark{display:none;}
.check-box[data-check="border"] label{padding-left:0;}
.check-box[data-check="border"] .check-con{padding:10rem 20rem;border:1px solid var(--g-02);border-radius:40rem;transition: var(--trans-01);}
.check-box[data-check="border"]:has([type="radio"]:checked){}
.check-box[data-check="border"]:has([type="radio"]:checked) .check-con{border:1px solid var(--b-01);}
.check-box[data-check="border"]:has([type="radio"]:checked) .radio-label{color:var(--b-01);}
.check-box[data-check="border"] .radio-label{font-weight:500;color:var(--g-02);transition: var(--trans-01);}

 /* Accessibility */
 .check-box [type="checkbox"]:checked:focus + label:before, .check-box [type="checkbox"]:not(:checked):focus + label:before {box-shadow: inset 0 1rem 3rem rgba(0,0,0, .1), 0 0 0 6px rgba(100, 164, 247, 0.2);}
 
@media all and (max-width: 1023px){
	.check-box label{padding-left: 33rem;}
}

@media all and (max-width: 540px){
	.check-box + .check-box{margin-left: 7rem;}
	.check-box label{padding-left: 24rem;}
	.check-box em{font-size: 14rem;line-height: 1.4;}
	.check-box [type="radio"]:not(:checked) + .checkmark,
	.check-box [type="radio"]:checked + .checkmark{top: 1rem;width: 18rem;height: 18rem;}
	.check-box [type="radio"]:not(:checked) + .checkmark:after,
	.check-box [type="radio"]:checked + .checkmark:after{width:10rem; height:7rem;}
	.check-box [type="checkbox"]:not(:checked) + .checkmark,
	.check-box [type="checkbox"]:checked + .checkmark{width:20rem;height:20rem;top: 0rem;}
	.check-box [type="checkbox"]:not(:checked) + .checkmark:after,
	.check-box [type="checkbox"]:checked + .checkmark:after{top: 3rem;left: 6rem;width: 6rem;height: 9rem;}

	.check-box[data-check="round"] [type="radio"]:not(:checked) + .checkmark:after,
	.check-box[data-check="round"] [type="radio"]:checked + .checkmark:after{width: 17rem;height: 17rem;transition:all .3s;transform:translate(-50%,-50%) scale(0.5);-webkit-transition:all .3s;}
}

 /* **************************************** *
 * gsap animation
 * **************************************** */
/* img position ani */
.animation-img{overflow:hidden;will-change: transform;}
.animation-img img{display:block; width:100%; height:100%; object-fit:cover;}

/* rolling text with scroll */
.text-roll-motion{display:flex; align-items:center; white-space:nowrap;}
.text-roll-motion-wrap{overflow:hidden;}
.text-roll-motion > *{margin:0 20rem;font-weight:900;font-size: 96rem;color:var(--b-03);letter-spacing:-2rem;}

 /* **************************************** *
 * table set
 * **************************************** */
 /*
 * @exgample <table class="table">
 */
table.table{border-top: 2px solid var(--b-01);width: 100%;}
table.table thead th{border-bottom: 1px solid var(--br-01);}
table.table thead tr:last-child th{border-bottom: 1px solid var(--g-02);}
table.table thead th[rowspan]{border-bottom:1px solid var(--br-01); border-right:1px solid var(--g-01);}
table.table tbody th{background:#f5f5f5; border:1px solid #e0e0e0; border-right-color:var(--br-01);}
table.table thead + tbody th{background:transparent; border-right-color:#e0e0e0;}
table.table th,
table.table td{padding: 10rem;letter-spacing:-0.5rem;word-break:keep-all;}
table.table th{text-align:center; font-weight:500;}
table.table tbody td{border: 1px solid var(--g-01);text-align:left;}
table.table tbody tr td:last-child{border-right-width:0px;}
table.table tbody tr td:first-child,
table.table tbody tr th:first-child{border-left-width:0px;}
table.table thead + tbody tr td{text-align:center;}
table.table .tal{text-align:left !important;}
table.table .tar{text-align:right !important;}
table.table .list{margin-top:0px;}

.table-scroll-swiper__inner > em{display:none;}

@media (max-width:1023px){
	table.table th,
	table.table td{padding:13rem 10rem; font-size:14rem;}	
}

@media (max-width:540px){
	table.table th,
	table.table td{padding: 11rem 7rem;font-size: 13rem;}	

	.table-scroll-cover{overflow-x:scroll;}
	.table-scroll-wrap{position:relative;}
	.table.table-scroll{width:600rem; transition:var(--trans-01); min-width:100%;}
	.table.table-scroll.blur{filter: blur(8px);}
	.table-scroll-swiper{display:flex;justify-content:center;position:absolute;opacity:1;visibility:visible;top:0;left:0;z-index:9;width:100%;height:100%;transition:var(--trans-01);align-items: flex-start;}
	.table-scroll-swiper.hide{opacity:0; visibility:hidden;}
	.table-scroll-swiper__bar{display:flex; align-items:center; position:relative; overflow:hidden; width:65rem; height:15rem; background:#FFF; box-shadow:3px 4px 7px 0px rgba(0, 0, 0, 0.15); border-radius:15rem;}
	.table-scroll-swiper__bar > i{display:block; position:absolute; left:5rem; width:27rem; height:9rem; background:#dfdfdf; animation:table_scroll_motion 1.2s ease-in-out 0s infinite; border-radius:10rem;}
	.table-scroll-swiper__bar em{display:block; position:absolute; bottom:-21rem; width:100%; font-weight:500; font-size:12rem; text-align:center; text-transform:capitalize;}
	.table-scroll-swiper__inner{display:flex;flex-direction:column;align-content: center;align-items: center;position: sticky;top: 0;padding-top: 40rem;}
	.table-scroll-swiper__inner > em{display:block;margin-top: 8rem;font-weight:600;font-size:11rem;text-align:center;text-transform:capitalize;}

	@keyframes table_scroll_motion {
		0%{opacity:1; left:5rem;}
		40%{opacity:1; left:35%;}
		100%{opacity:0; left:100%;}
	}
}

 /* **************************************** *
 * layer popup basic
 * **************************************** */
.popup-layer{position:fixed; top:0rem; left:0rem; z-index:1000; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.popup-layer-inner{position:absolute;top:50%;left:50%;box-sizing:border-box;background: #fff;box-shadow:3rem 15rem 20rem rgba(0,0,0,0.15);min-width:660rem;min-height:430rem;}
.popup-layer-inner h2{height:67rem; padding:0 20rem !important; border-bottom:1rem solid #eee; font-weight:500; font-size:25rem !important; letter-spacing:-1rem;}
.popup-layer-inner h2:after{content:''; display:inline-block; height:100%; vertical-align:middle;}
.popup-layer-inner h2 span{display:inline-block; width:99%; vertical-align:middle;}
.popup-layer-close{display:flex; justify-content:center; align-items:center; position:absolute; top:-20rem; right:-70rem; width:70rem; height:68rem; line-height:68rem; background:none; border:none;}
.popup-layer-close span{display:flex; position:relative; overflow:hidden; margin:0; font-size:0; text-indent:100%; vertical-align:middle;}
.popup-layer-close:focus{outline:none;}
.popup-layer-close::after{width:30rem; height:2rem;}
.popup-layer-close::after,
.popup-layer-close::before{content:""; display:block; position:absolute; background:#fff; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.popup-layer-close::before{width:2rem; height:30rem;}

@media (max-width: 540px){
	.popup-layer-inner{top:0; left:0; width:100%; height:100%; margin:0 !important; min-width:auto; min-height:auto;}
	.popup-layer-close{top:auto; right:0rem; bottom:0; width:100%; height:auto; line-height:normal; padding:18rem 0rem; background:var(--b-01);border: 0;}
	.popup-layer-close span{display:block; width:100%; font-size:15rem; color:#fff; text-align:center; text-indent:0;}
	.popup-layer-close::after,
	.popup-layer-close::before{display:none;}
}

 /* **************************************** *
 * youtube custom
 * **************************************** */
.youtube-custom{width:100%;}
.youtube-custom-cover{display:flex;justify-content:center;align-items:center;position:relative;opacity:1;z-index: 1;width:100%;height:100%;background:#000;transition:var(--trans-01);cursor:pointer;}
.youtube-custom-wrap{display:block; position:relative; overflow:hidden; width:100%; height:500rem; margin:0 auto; padding:8rem; background:var(--b-01); border:1px solid var(--g-05); max-width:960rem; border-radius:10rem;}
.youtube-custom-video{display:none;}
.youtube-custom.on .youtube-custom-cover{opacity:0;visibility: hidden;}
.youtube-custom.on .youtube-custom-video{display:block;}
.youtube-custom-cover__bg{position:absolute; opacity:0.7; width:100%; height:100%; object-fit:cover;}
.youtube-custom-cover__btn{position:relative;}
#youtube-custom-iframe{position:absolute; top:0; left:0; z-index:1; width:100%; height:100%;}

/* **************************************** *
 * accordion custom
 * **************************************** */
.accordion-custom__tit{display:flex; align-items:center; position:relative; font-size:24rem; cursor:pointer;}
.accordion-custom__cont{display:none;}
.accordion-custom__list > li{padding:40rem; background:#fff; border-radius:20rem;}
.accordion-custom__list{display:grid; gap:15rem;}
.accordion-custom__cont{margin-top:28rem;}
.accordion-custom__tit::after{content:""; position:absolute; right:0; width:13rem; height:13rem; background:url(../img/common/arrow-basic.svg) no-repeat 50% 50%;}
.accordion-custom__list > li.on .accordion-custom__tit::after{transform:rotate(180deg);}