@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* 서브 :: 공통 텍스트 */
.cm-sub-tit-box{position: relative; text-align:center;}
.cm-tit{font-size:4rem; line-height:1.5; letter-spacing:-0.04em; color:#fff; font-weight:700;}
.cm-txt{font-size:1.8rem; line-height:1.88; letter-spacing:-0.04em; color:#fff; /* color:rgba(255,255,255,0.4); */}
.cm-tit + .cm-txt{/* margin-top:3.5rem; */ margin-top:1.2rem;}

/* 서브 :: 공통 버튼 */
.cm-btn{display: flex; align-items:center; justify-content:space-between; width:20rem; height:6rem; background:rgba(255,255,255,0.05); padding:0 3rem; box-sizing:border-box; border-radius:3rem; margin:auto; color:#fff;}
.cm-btn span{position: relative; font-size:1.8rem; letter-spacing:-0.04em;}
.cm-btn i{position: relative; font-size:2rem;}
.cm-sub-tit-box .cm-btn{margin-top:3rem;}

/* 서브 :: 공통 버튼 효과 */
.cm-fill-btn{position: relative; overflow:hidden;}
.cm-fill-btn .cm-fill{ position: absolute; display: block; width: 0px; height: 0px; transform: translate(-50%,-50%); border-radius: 50%; opacity: 0.95; background: var(--main-color); transition: width 1s, height 1s; }
@media all and (min-width:801px){
	.cm-fill-btn:hover .cm-fill{ width: 70vw; height: 70vw; }
}

/* 서브 :: 공통 원형 */
.cm-circle{position: absolute; inset:0; border:1px solid transparent; border-radius:50%; box-sizing:border-box; background-image:linear-gradient(#0e1014, #0e1014), linear-gradient(135deg, rgba(243,111,33,0) 35%,rgba(243,111,33,1) 100%); background-origin:border-box; background-clip:padding-box, border-box; animation:circleRotate 10s linear infinite;}
.cm-circle.reverse{transform:rotate(180deg); animation:circleRotateReverse 10s linear infinite;}

@keyframes circleRotate{
	from { transform:rotate(0deg);}
	to { transform:rotate(360deg);}
}
@keyframes circleRotateReverse{
	from { transform:rotate(180deg);}
	to { transform:rotate(540deg);}
}

@media all and (max-width: 800px) {
	.cm-circle {top: 14rem; left: 50%; width: 22rem; height: 22rem; margin-left: -11rem;}
}

@media all and (max-width: 480px) {
	.cm-circle {top: 0;}
	.cm-top-intro .intro-scroll-down {bottom: 2rem;}
}