@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; z-index: 10;}
.sub-tab-list-style {background-color: #eee; border-radius: 6px; margin: 0 auto; }
.sub-tab-list-style.list02 {max-width: 44rem; }
.sub-tab-list-style.list03 {max-width: 66rem; }
.sub-tab-list-style.list04 {max-width: 88rem; }
.sub-tab-list-style.list05 {max-width: 110rem; }
.sub-tab-list-style ul{position: relative; display:flex; justify-content: center; width:100%; height:100%; table-layout:fixed; }
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{display:table-cell; vertical-align:middle; position:relative; width:16.66%; max-width: 22rem; transition: all 0.4s;}
.sub-tab-list-style ul li:before {position: absolute;top: 50%; margin-top: -1rem; left: 0; width: 1px; height: 2rem; background-color: rgba(0, 0, 0, 0.1); content: '';transition: var(--transition-custom);}
.sub-tab-list-style.black-ver ul li:before {background-color: rgba(255, 255, 255, 0.1); }
.sub-tab-list-style ul li:before {}
.sub-tab-list-style ul li:first-child:before {display: none;} 
.sub-tab-list-style.list02 ul li {width: 50%;}
.sub-tab-list-style.list03 ul li {width: 33.33%;}
.sub-tab-list-style.list04 ul li {width: 25%;}
.sub-tab-list-style.list05 ul li {width: 20%;}
.sub-tab-list-style.list06 ul li {width: 16.66%;}

.sub-tab-list-style ul li:first-child {border-radius: 6px 0 0 6px;}
.sub-tab-list-style ul li:last-child {border-radius: 0 6px 6px 0;}
.sub-tab-list-style ul li a{display:table; height:60px; width:100%; border-radius: 6px; transition: all 0.4s; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#000000; font-size:1.5rem; font-weight: 600; text-align:center; transition: all 0.4s; }
.sub-tab-list-style ul li.selected {z-index: 1;}
/* .sub-tab-list-style ul li.selected a {background-color:var(--main-color);} */
.sub-tab-list-style ul li.selected a em {color: #fff;}
.sub-tab-list-style.black-ver {background-color: rgba(255,255,255,0.05);}
.sub-tab-list-style.black-ver li a em {color: #fff;}

.move-line-wrap{position: absolute; max-width: var(--area-width); width: 100%; margin: 0 auto; top: 0; left: 50%; transform:translateX(-50%);}
.move-line-wrap .move-line{position: absolute; width: 100%; margin: 0 auto; top: 0; left: 0;}
.move-line-wrap .move-line span{height: 60px; width: 100%; max-width: 22rem; position: absolute; top: 0; left: 0; text-align: center; transition: background-color 0.4s; transition: left 0.4s; background:var(--main-color); border-radius:6px;}

.sub-tab-wrapper-style .move-line-wrap{max-width:none;}
.sub-tab-wrapper-style .move-line-wrap.list02 {max-width: 44rem;}
.sub-tab-wrapper-style .move-line-wrap.list03 {max-width: 66rem;}
.sub-tab-wrapper-style .move-line-wrap.list04 {max-width: 88rem;}
.sub-tab-wrapper-style .move-line-wrap.list05 {max-width: 110rem;}

.sub-tab-wrapper-style .move-line-wrap.list02 .move-line span{width:50%;}
.sub-tab-wrapper-style .move-line-wrap.list03 .move-line span{width:33.33%;}
.sub-tab-wrapper-style .move-line-wrap.list04 .move-line span{width:25%;}
.sub-tab-wrapper-style .move-line-wrap.list05 .move-line span{width:20%;}
.sub-tab-wrapper-style .move-line-wrap.list06 .move-line span{width:16.66%;}

@media all and (max-width:800px){
	.move-line-wrap {display: none !important;}
}

/* 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-blur-effect {opacity: 0; filter: blur(2rem); transition: var(--transition-custom2);}
.cm-blur-effect.animated  {opacity: 1; filter: blur(0);}

/* ****************** 공통 :: PAGING ********************** */
.paging-wrap{display: flex; justify-content:space-between; padding-top: 4rem; border-top: 1px solid #fff;}
.paging{display:flex; justify-content:flex-start; width:100%; text-align:center; flex-wrap:wrap;}
.paging a{position:relative; display:block; width:4rem; height:4rem;  line-height:4rem; margin:0 2px; border:1px solid #222222; text-align:center; font-size:1.4rem; color:#fff; letter-spacing:-0.01em; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border-radius:0.5rem;}
.paging a.cur{border-color:#000; background-color:#fff; font-weight:600; color: #000;}
.paging a.paging-arrow{background:transparent; border:none;}
.paging a.paging-arrow i{position:relative; top:-1px; vertical-align:middle; color:inherit; font-size:2rem; margin:0 -0.7rem;}

/* .paging:not(.no-margin) a.paging-prev{margin-right:15px}
.paging:not(.no-margin) a.paging-next{margin-left:15px} */ 
.paging .paging-first i,
.paging .paging-last i{transform:translateX(-8px)}
.paging .paging-first i:before,
.paging .paging-last i:before{display:block;width:7px}

.paging-select{display: flex; align-items:center;}
.paging-select .cur-num{}
.paging-select .cur-num input{display:block; width:4rem; height:4rem; line-height:4rem; border:1px solid #000; text-align:center; font-size:1.4rem; color:#000; letter-spacing:-0.01em; background-color:#fff; border-radius:0.5rem; font-weight:600;}
.paging-select .slash{font-size:1.4rem; color:#fff; margin:0 1rem}
.paging-select .total-num{font-size:1.4rem; color:#fff; font-weight:600;}

@media all and (max-width:800px){
	.paging a{width:3rem; height:3rem;  line-height:3rem;}
	.paging-select .cur-num input{width:3rem; height:3rem; line-height:3rem;}
	.paging-select .slash{font-size:1.6rem;}
}

.sub-page .paging-wrap {border-top: 1px solid #000;}
.sub-page .paging a {background-color: #F5F5F5; color: #AAAAAA; border-color: #F5F5F5;     backdrop-filter: blur(0);}
.sub-page .paging a.cur {background-color: #fff; color: #000; border-color: #000; }
.sub-page .paging-select .slash ,
.sub-page .paging-select .total-num {color: #000;}

/* ****************** 공통 :: 게시판 상단 TOTAL 및 카테고리 검색 ********************** */
.bbs-top-list-box{position: relative; z-index: 1; display:flex; align-items:center; justify-content:space-between; flex-direction:row-reverse; flex-wrap:wrap; margin-bottom:2rem}
/* -------- 리스트 Total 갯수 -------- */
.total-list-con{color:#000; font-size:1.8rem; font-weight: 700; letter-spacing:-0.04em;}
.bbs-top-list-box.white-ver .total-list-con {color: #fff;}

@media all and (max-width:800px) {
	.bbs-top-list-box{margin-bottom:5%; }
	.bbs-top-list-box:not(.bbs-top-category-box){flex-direction:initial; }
	/* 공통 :: TOTAL NUMBER 및 카테고리 검색 */
	.board-category-box select{width:150px}
	/* ~개씩 보기 */
	.top-view-select-box{margin-left: 15px;}
	.top-view-select-box select{width:100px;}
	/* 우측 카테고리 */
	.board-category-box{width:50%; max-width:200px;}
	.bbs-top-list-box:not(.top-search-center) .board-search-box + .board-category-box{margin-right:0;}
}

/* ****************** 공통 :: SEARCH BOX ********************** */
.board-search-box{text-align:center; padding:30px 0; }
.board-search-box .board-search-inner{position: relative; display:flex; align-items:center; max-width:500px; height:5rem; margin:0px auto; box-sizing:border-box; border:1px solid #ddd; background-color:#fff;}
.board-search-box .board-search-inner:after{display:none;}
.board-search-box .search-subject-select,
.board-search-box .search-word{height:100%; background-color:transparent; border:0; padding:0 15px; font-size:15px; color:#333; letter-spacing:-0.3px; box-sizing:border-box;}
.board-search-box .search-subject-select{width:12rem; }
.board-search-box .search-subject-select:not(.custom-select){padding-left:1em;}
.board-search-box .search-word{width:100%; border-right:0;}
.board-search-box .search-subject-select + .search-word,
.board-search-box .board-custom-select-box + .search-word{width:calc(100% - 17rem); }
.board-search-box .search-subject-select:focus,
.board-search-box .search-word:focus{color:#333; outline:none; background-color:transparent;}
.board-search-box .search-word::placeholder{color:#333;}
.board-search-box .search-word::-webkit-search-cancel-button{display:none;}
.board-search-box .bbs-search-btn{display: block; position: absolute; width: 4rem; height: 4rem; top: 50%; right: 0.4rem; margin-top: -2rem; border-radius: 50%; background: #000; text-align: center;}
.board-search-box .bbs-search-btn i{line-height:4rem; font-size:20px; color: #fff;}
/* Search Select Custom */
.board-search-box .board-custom-select-box{width:12rem; height:100%; }
.board-custom-select-box .custom-select-wrapper{height:100%;}
.board-custom-select-box .search-subject-select{padding:0;}
.board-custom-select-box .custom-select-trigger{border:0; height:100%; display:flex; align-items:center; line-height: 4rem; font-size: 1.5rem;}
.board-custom-select-box .custom-option-drop-list{border-color:#ddd; left:-1px; right:-1px;}
.board-custom-select-box .custom-option-item{text-align:left; font-size:0.8666em; font-weight:400; padding:8px 15px;}
.board-custom-select-box .custom-option-item.selection{background-color:#eee; }
/* 스타일 03(원형배경) */
.search-style-radius .board-search-inner{background-color:#fff; border-radius:2.5rem; transition:all 0.2s;  transition-delay:0.3s;}
.search-style-radius .board-search-inner.open {border-radius:2.5rem 2.5rem 2.5rem 0; transition-delay:0s;}
.search-style-radius .search-subject-select + .search-word,
.search-style-radius .board-custom-select-box + .search-word{border-left:0;}
.search-style-radius .board-custom-select-box .custom-select-trigger{padding-left:1.5em}
.search-style-radius .board-custom-select-box .custom-option-drop-list{/* left:1.5em; */ /* margin-top:-8px;  */border-radius: 0 0 2.5rem 2.5rem; border:1px solid #ddd; border-top: 1px solid #fff; box-shadow:3px 4px 7px 0px rgba(0, 0, 0, 0.1);}
/* -------- SEARCH BOX 상단 일때  -------- */
.bbs-top-list-box .board-search-box{width:50rem; padding:0;}
.bbs-top-list-box .board-search-inner{/* margin:0; max-width:none; */}
/* -------- SEARCH BOX White-ver  -------- */
.bbs-top-list-box.white-ver .board-search-box .board-search-inner {border: 1px solid #222222; background-color: rgba(255, 255, 255, 0.07);}
.bbs-top-list-box.white-ver .custom-select-trigger {color: #fff;}
.bbs-top-list-box.white-ver .board-search-box .search-subject-select, 
.bbs-top-list-box.white-ver .board-search-box .search-word {color: #fff;}
.bbs-top-list-box.white-ver .board-search-box .search-word:focus{color:#fff; }
.bbs-top-list-box.white-ver .board-search-box .search-word::placeholder{color:#fff;}
.bbs-top-list-box.white-ver .search-style-radius .board-custom-select-box .custom-option-drop-list {border: 1px solid #222222; border-top: 1px solid #222222; background: rgba(255, 255, 255, 0.07);}
.bbs-top-list-box.white-ver .custom-option-item {color: #fff;}
.bbs-top-list-box.white-ver .board-custom-select-box .custom-option-item:hover,
.bbs-top-list-box.white-ver .board-custom-select-box .custom-option-item.selection {background-color: #333;}

@media all and (max-width:800px) {
	.board-search-box{padding:0; border:0}
	.board-search-box .board-search-inner{max-width:none; }
	/* -------- SEARCH BOX 상단 일때  -------- */
	.bbs-top-list-box .board-search-box{width:100%; margin-bottom:5rem;}
	
	.board-search-box .search-subject-select {width: 10rem;}
	.board-search-box .board-custom-select-box {width: 10rem;}
	.board-search-box .search-subject-select + .search-word, 
	.board-search-box .board-custom-select-box + .search-word {width: calc(100% - 15rem);}
}

/* -------- 공통 :: Custom Select -------- */
.custom-select-box{
	display:block;
	width:100%;
 }
.custom-select-box select {
	display: none;
}
.custom-select-wrapper {
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	width:100%;
}
.custom-select-wrapper .custom-select {
	position: relative;
	display: block;
}
.custom-select-trigger {
	position: relative;
	display: block;
	width: 100%;
/* 	padding:0 15px; */
	color: #333;
	line-height: 40px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	font-size:15px;
	border:1px solid #ccc;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}
.custom-select-trigger:after{
	font-family: 'xeicon';
	position:absolute; 
	top:50%; 
	right:10px; 
	transform:translateY(-50%);
	content: "\e942";
	font-size:2.4rem;
}
.custom-select.opened .custom-select-trigger:after{
	content: "\e945";
}
/* Custom Select :: Option Drop List */
.custom-option-drop-list {
	position: absolute;
	display: none;
	top: 100%;
	left: 0%;
	right: 0;
	z-index:100;
	overflow-y:auto;
	max-height:210px;
	background: #fff;
	border:1px solid #ccc;
	border-top:0;
	pointer-events: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}
.custom-option-drop-list::-webkit-scrollbar{
	width: 5px;
}
.custom-option-drop-list::-webkit-scrollbar-thumb{
	background-color:#333;
	border-radius:5px;
	transition:all 0.5s;
}
.custom-option-drop-list::-webkit-scrollbar-track{
	background-color:#f2f2f2; 
	border-radius:0;
}
.custom-select.opened .custom-option-drop-list {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
.custom-option-item {
	position: relative;
	display: block;
	padding: 15px;
	font-size:13px;
	font-weight: 500;
	color: #555;
	line-height: 1.5;
	cursor: pointer;
	transition: all 0.05s ease-in-out;
}
.custom-option-item:hover {
	background:#f2f2f2;
}
.custom-option-item.selection{
	color:#000;	
}

/* ****************** 제품 :: 공통 ********************** */
.sub-wrap .prd-bottom-inquiry .cm-fill-btn.btn-style01:before {    border: 2px solid var(--main-color); border-radius: 4rem;}
.sub-wrap .prd-bottom-inquiry .cm-fill-btn.btn-style03:before {    border: 2px solid #fff; border-radius: 4rem;}

@media all and (min-width:801px){
	.sub-wrap .prd-bottom-inquiry .cm-fill-btn.btn-style01:hover,
	.sub-wrap .prd-bottom-inquiry .cm-fill-btn.btn-style03:hover {color: var(--main-color);}	
}


/* ****************** 
	* Mouse Pointer
********************** */
.sub-mouse-pointer{position:fixed; top:0px; left:0px; z-index:10000; pointer-events:none; }
/* base */
.sub-mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width: 10rem; height: 10rem; border-radius:50%;  transform:translate(-50%,-50%) scale(0); border:2px solid #fff; box-sizing:border-box; transition:var(--transition-custom); opacity:0; background:rgba(255,255,255,0.05); backdrop-filter:blur(1.5rem);}
.sub-mouse-pointer .pointer-circle i{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(90deg); font-size:4rem; color:#fff;}
/* arrow */
.sub-mouse-pointer.arrow .pointer-circle{transform:translate(-50%,-50%) scale(1); opacity:1;}

/* ****************** 제품 :: 인트로페이지(게이트페이지) ********************** */
.prd-intro-con {position: relative; width: 100%; display: flex; padding: 6.5rem 0;}
.prd-intro-con .swiper-container {overflow: visible;}
.prd-intro-con.prd-intro-con01 {padding-top: 0;}
.prd-intro-con.left-align .prd-intro-left {position:absolute; left:0; top:0; width: 100%; height: 100%; }
.prd-intro-con.left-align .prd-intro-left .prd-intro-tit-box{display: flex; align-items: center; height: 100%;}
.prd-intro-con.left-align .prd-intro-right  {position: relative; z-index: 1; width:calc(100% - (640px + ((100% - 1320px) / 2))); overflow:hidden; margin:0 0 0 auto; padding-left: 200px; box-sizing: border-box;}

.prd-intro-con.right-align .prd-intro-left {position:absolute; right:0; top:0; width: 100%; height: 100%; }
.prd-intro-con.right-align .prd-intro-left .prd-intro-tit-box {display: flex; align-items: center; justify-content: end; height: 100%;}
.prd-intro-con.right-align .prd-intro-right {position: relative; z-index: 1; width:calc(100% - (640px + ((100% - 1320px) / 2))); overflow:hidden;margin: 0 auto 0 0; padding-right: 200px; box-sizing: border-box;}

@media all and (max-width:2140px){
	.prd-intro-con.left-align .prd-intro-left .prd-intro-tit-box {max-width:1320px; margin:0 auto;}
	.prd-intro-con.left-align .prd-intro-right {width: calc(100% - (640px + ((100% - 1320px) / 2)));}

	.prd-intro-con.right-align .prd-intro-left .prd-intro-tit-box {max-width:1320px; margin:0 auto;}
	.prd-intro-con.right-align .prd-intro-right {width: calc(100% - (640px + ((100% - 1320px) / 2)));}
}
.prd-intro-tit {width: 39%; }
.prd-intro-tit .sub-tit {font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; color: var(--main-color); line-height: 1.3; margin-bottom: 1.5rem;}
.prd-intro-tit .tit {font-size: 5.6rem; font-weight: 700; letter-spacing: 0; line-height: 1.1; color: #fff;}
.prd-intro-tit .txt {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; color: rgba(255,255,255,0.4); line-height: 1.75; margin-top: 3rem;}
.prd-more-btn {position: relative; display: flex; align-items: center; justify-content: space-between; width: 24rem; height: 8rem; padding: 1rem; background: rgba(255,255,255,0.1); border-radius: 5rem;  -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; margin-top: 8rem; overflow: hidden;}
.prd-more-btn i {position: relative; z-index: 1; width: 6rem; height: 6rem;border-radius: 50%; /* background: var(--main-color);  */font-size: 2.4rem; line-height: 6rem; color: #fff; text-align: center; transition: all 0.4s ease-in-out;}
.prd-more-btn:hover i {transform: rotate(360deg);}
.prd-more-btn span {position: relative; display: block; padding-right: 3rem; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.025em; color: #fff; line-height: 1.3; z-index: 1;}
.prd-more-btn .cm-fill {position: absolute; display: block; width: 6rem; height: 6rem; top: 50%; left: 1rem;  transform: translate(0, -50%); background: var(--main-color); border-radius: 50%; transition: width 0.5s ease-out, height 0.5s ease-out, transform 0.5s ease-out; }
.prd-intro-list-swiper {min-height: 64rem;}
.prd-intro-list li {width: 42rem;  height: initial !important;  transition: all 0.4s; transition-property: opacity,visibility, transform, filter;}
.prd-intro-list li a {position: relative; display: block; width: 100%; height: 100%; padding: 5rem; border-radius: 4rem; background: linear-gradient(137deg, rgba(255,255,255,0.09) 0%, rgba(243, 115, 33, 0.09) 100%); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

/* .prd-intro-list li a:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4rem; background: rgba(0,0,0,0.1); opacity: 0; transition: all 0.4s; z-index: 1;}
.prd-intro-list li a:hover:before {opacity: 1;} */

.prd-intro-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%;}
.prd-intro-list li a .img-box span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.prd-intro-list li a .tit-box { text-align: left; padding-top: 0.5rem;}
.prd-intro-list li a .tit-box .sub-tit {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.016em; color: var(--main-color);}
.prd-intro-list li a .tit-box .tit {font-size: 2.8rem; font-weight: 600; letter-spacing: 0; color: #fff; line-height: 1.4; }
.prd-intro-list li a .txt-box {margin-top: 2rem;}
.prd-intro-list li a .txt-box dl {display: flex; alilgn-items: center; justify-content: space-between; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.prd-intro-list li a .txt-box dl:last-child {border-bottom: 0; padding-bottom: 0;}
.prd-intro-list li a .txt-box dl dt,
.prd-intro-list li a .txt-box dl dd {font-size: 1.5rem; font-weight: 400; color: #fff; line-height: 1.3;}
.prd-intro-list-swiper02 .prd-intro-list .tit-box,
.prd-intro-list-swiper03 .prd-intro-list .tit-box {padding: 9rem 0 5rem;}

/* 슬라이드 효과 */
@media all and (min-width:801px){
	.prd-more-btn:hover .cm-fill{ width: 40vw; height: 40vw; transform: translate(-5rem, -50%); transition: width 0.5s ease-in 0.1s, height 0.5s ease-in 0.1s, transform 0.5s ease-in 0.1s; }

	.prd-intro-con:not(.animated):not(.active) .prd-intro-list li a {visibility: hidden;}
	.prd-intro-con.animated .prd-intro-list li a, 
	.prd-intro-con.active .prd-intro-list li a {visibility: visible;}

	.prd-intro-con.left-align .prd-intro-list li.swiper-slide-active a {transform: translateX(-40rem); opacity: 0; filter: blur(2rem); } 
	.prd-intro-con.left-align .prd-intro-list li.swiper-slide-next a {transform: translateX(-70rem); opacity: 0; filter: blur(2rem);} 
	.prd-intro-con.left-align .prd-intro-list li.next01 a{transform: translateX(-100rem); opacity: 0; filter: blur(2rem);} 
	.prd-intro-con.right-align .prd-intro-list li.swiper-slide-active a {transform: translateX(40rem); opacity: 0; filter: blur(2rem);} 
	.prd-intro-con.right-align .prd-intro-list li.swiper-slide-next a {transform: translateX(70rem); opacity: 0; filter: blur(2rem);} 
	.prd-intro-con.right-align .prd-intro-list li.next01 a{transform: translateX(100rem); opacity: 0; filter: blur(2rem);} 

	.prd-intro-con.animated .prd-intro-list li.swiper-slide-active a,
	.prd-intro-con.animated .prd-intro-list li.swiper-slide-next a,
	.prd-intro-con.animated .prd-intro-list li.next01 a ,
	.prd-intro-con.active .prd-intro-list li.swiper-slide-active a,
	.prd-intro-con.active .prd-intro-list li.swiper-slide-next a,
	.prd-intro-con.active .prd-intro-list li.next01 a{transform: translateX(0); opacity: 1; filter: blur(0);transition: all 0.8s ease-in-out; transition-property: opacity, transform, filter;}
}

.prd-intro-con.left-align .prd-intro-list li.swiper-slide-prev,
.prd-intro-con.left-align .prd-intro-list li.swiper-slide-duplicate-prev{filter: blur(2rem); opacity: 0; visibility: hidden; transform: perspective(960px) rotateY(-90deg) scale(0.8);}
.prd-intro-con.right-align .prd-intro-list li.swiper-slide-prev,
.prd-intro-con.right-align .prd-intro-list li.swiper-slide-duplicate-prev{filter: blur(2rem); opacity: 0; visibility: hidden; transform: perspective(960px) rotateY(90deg) scale(0.8);}

.prd-intro-auto-con {padding: 10rem 0;}
.prd-intro-auto-con .prd-intro-tit {text-align: center; width: 100%;}
.prd-intro-auto-con .prd-more-btn {width: 28rem; margin: 6rem auto 0;}
/* .prd-intro-auto-list {opacity: 0; transition: 0.2s;} */
.prd-intro-auto-list .slick-list {overflow: visible; margin: 0 -4rem;}
.prd-intro-auto-list .slick-slide {margin: 0 4rem;}
.prd-intro-auto-list {width: 42rem; margin: 8rem auto 0;}
.prd-intro-auto-list li {width: 100%; }
.prd-intro-auto-list li a {filter: blur(2rem); transition: transform 0.8s ease-in-out, opacity 0.8s, filter 0.8s ease-in-out; opacity: 0;}
.prd-intro-auto-list li.slick-center a {z-index: 10;}
.prd-intro-auto-list li.center-prev a,
.prd-intro-auto-list li.center-next a {z-index: 9;}
.prd-intro-auto-list li.prev01 a,
.prd-intro-auto-list li.next01 a {z-index: 8;}
.prd-intro-auto-list li.prev02 a,
.prd-intro-auto-list li.next02 a {z-index: 7;}

.prd-intro-auto-list li.center-prev a  { transform: translateX(56rem) ;}
.prd-intro-auto-list li.prev01 a  { transform: translateX(112rem) ;}
.prd-intro-auto-list li.prev02 a 	{ transform: translateX(168rem) ;}

.prd-intro-auto-list li.center-next a  { transform: translateX(-56rem) ;}
.prd-intro-auto-list li.next01 a  { transform: translateX(-112rem) ;}
.prd-intro-auto-list li.next02 a  { transform: translateX(-168rem)  ;}
.prd-intro-auto-list.animated li a { transform: translateX(0) !important; opacity: 0.2;  filter: blur(0rem) !important;}
.prd-intro-auto-list.animated li.slick-active a {opacity: 1;}

.prd-intro-app-con {padding: 6rem 0 10rem;}
.prd-intro-app-con .prd-intro-tit {text-align: center; width: 100%;}
.prd-intro-app-con .prd-more-btn {width: 28rem; margin: 6rem auto 0;}
.prd-intro-app-list {width: 1160px; margin: 8rem auto 0;}
.prd-app-list .slick-list {overflow: visible; margin: 0 -4rem;}
.prd-app-list .slick-slide {margin: 0 4rem;}
.prd-app-list li {}
.prd-app-list li .inner {display: flex; align-items: center; padding: 6rem;  background: linear-gradient(137deg, rgba(255,255,255,0.09) 0%, rgba(243, 115, 33, 0.09) 100%);  -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; opacity: 0.2; border-radius: 2rem; filter: blur(2rem); transition: transform 0.8s ease-in-out, opacity 0.8s, filter 0.8s ease-in-out; opacity: 0;}
.prd-app-list li.slick-active .inner {opacity: 1;}
.prd-app-list li .inner .txt-box {width: 48.08%; padding-right: 3rem; box-sizing: border-box;}
.prd-app-list li .inner .txt-box .cate {font-size: 1.6rem; font-weight: 700; letter-spacing: -0.1em; line-height: 1.3; color: var(--main-color);}
.prd-app-list li .inner .txt-box .tit {font-size: 3.2rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; line-height: 1.5; overflow:hidden;display:block;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; margin-top:2rem ;}
.prd-app-list li .inner .txt-box .txt {font-size: 1.6rem; font-weight: 400; letter-spacing:-0.01em; color: rgba(255,255,255,0.5); line-height: 1.625; margin-top: 2rem; overflow:hidden;display:block;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.prd-app-list li .inner .video-box {position: relative; width: 51.92%;}
.prd-app-list li .inner .video-box .video-iframe-box {position: relative;padding-top:51.85%;height: 0; background-color: #000; overflow: hidden;}
.prd-app-list li .inner .video-box .video-iframe-box iframe {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.prd-app-list li .inner .video-box .video-cover-box { position: absolute;  top: 0px;left: 0px;  width: 100%;height: 100%; overflow: hidden; cursor: pointer;}
.prd-app-list li.slick-slide:not(.slick-active) .inner .video-box .video-cover-box {pointer-events: none;}
.prd-app-list li .inner .video-box .video-cover-box .thumb {display: block; position: relative; width: 100%; height: 100%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s;}
.prd-app-list li .inner .video-box .video-cover-box .thumb img {  width: 100%; height: 100%;}
.prd-app-list li .inner .video-box .btn-cover {position: absolute;  top: 50%; left: 50%; margin: -4.8rem 0 0 -4.8rem; z-index: 10;}
.prd-app-list li .inner .video-box button {position: relative; font-size: 9.6rem; color: #fff;}

.prd-app-list li.slick-center .inner {z-index: 10;}
.prd-app-list li.center-prev .inner,
.prd-app-list li.center-next .inner {z-index: 9;}
.prd-app-list li.prev01 .inner,
.prd-app-list li.next01 .inner {z-index: 8;}

.prd-app-list li.center-prev .inner  { transform: translateX(124rem) ;}
.prd-app-list li.prev01 .inner  { transform: translateX(248rem) ;}

.prd-app-list li.center-next .inner  { transform: translateX(-124rem) ;}
.prd-app-list li.next01 .inner  { transform: translateX(-248rem) ;}

.animated .prd-app-list li .inner { transform: translateX(0) !important; opacity: 0.2;  filter: blur(0rem) !important;}
.animated .prd-app-list li.slick-active .inner {opacity: 1;}

@media all and (max-width:1500px){
	.prd-intro-con.left-align .prd-intro-right {width: calc(100% - (640px + ((100% - 1320px) / 2))); padding-left: 100px;}
	.prd-intro-con.right-align .prd-intro-right {width: calc(100% - (640px + ((100% - 1320px) / 2))); padding-right: 100px;}
}
@media all and (max-width:1280px){
	.prd-intro-app-list {max-width: none; width: 90%;}
	.prd-intro-tit {width: 42%;}
}
@media all and (max-width:800px){
	.prd-intro-con {flex-wrap: wrap;}

	.prd-intro-con.left-align .prd-intro-left {position: relative; margin-bottom: 5rem;}
	.prd-intro-con.left-align .prd-intro-right {overflow: visible; width: 100%; padding: 0 0 0 var(--area-padding); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	.prd-intro-con.right-align .prd-intro-left {position: relative; margin-bottom: 5rem;}
	.prd-intro-con.right-align .prd-intro-left .prd-intro-tit-box {justify-content: start; }
	.prd-intro-con.right-align .prd-intro-right {overflow: visible;  width: 100%; padding: 0 0 0 var(--area-padding); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	.prd-intro-tit {width: 100%;}
	.prd-intro-tit .tit {font-size: 4rem;}
	.prd-more-btn {/* height: 6.4rem; */ margin-top:4rem;}
	/* 	.prd-more-btn i {width: 4.4rem;height: 4.4rem;  font-size: 2rem; line-height: 4.4rem;} */
	.prd-intro-list-swiper { min-height: auto;}
	.prd-intro-list li a {padding: 3rem 3rem 4rem;}
	.prd-intro-list li a .tit-box .tit {font-size: 2.4rem; margin-top: 1rem;}
	.prd-intro-list-swiper02 .prd-intro-list .tit-box, 
	.prd-intro-list-swiper03 .prd-intro-list .tit-box {padding: 3rem 0;}

	.prd-intro-auto-list .slick-list {margin: 0 -2rem;}
	.prd-intro-auto-list .slick-slide {margin: 0 2rem;}

	.prd-app-list li .inner {padding: 4rem; flex-wrap: wrap;}
	.prd-app-list li .inner .txt-box {width: 100%; padding-right: 0; margin-bottom: 3rem;}
	.prd-app-list li .inner .txt-box .tit {font-size: 2.4rem;}
	.prd-app-list li .inner .video-box {width: 100%;}

}
@media all and (max-width:480px){
	.prd-intro-auto-list {width: 100%; padding: 0 var(--area-padding); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	.prd-intro-con.right-align .prd-intro-list li {margin-left: 0 !important; margin-right: 30px !important;}
	.prd-intro-list li a {padding: 3rem 2rem 3.5rem;}
}


/* ****************** 제품 :: 상세페이지 ********************** */
/* 상단 제품이미지+기본정보 */
.prd-view-top {display: flex; align-items: center; padding: 12rem 0 8rem; border-bottom: 2px solid #fff;}
.prd-view-top .prd-view-img-con {position: relative; width: 50%; border-radius: 4rem; background: linear-gradient(137deg, rgba(255,255,255,0.09) 0%, rgba(243, 115, 33, 0.09) 100%);}
.prd-view-top .prd-view-img-list .img-wrap,
.prd-view-top .prd-view-img-list .video-wrap {position: relative; width: 100%; height: 0; padding-top: 100%;}
.prd-view-top .prd-view-img-list .video-wrap .video-wrap-inner {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.prd-view-top .prd-view-img-list .video-wrap .video-iframe-box {position: relative;height: 0;  border-radius: 4rem;  overflow: hidden; padding-top: 100%;}
.prd-view-top .prd-view-img-list .video-wrap .video-iframe-box iframe {position: absolute; top: 0px;left: 0px;width: 100%; height: 100%;}
.prd-view-top .prd-view-img-list .video-wrap .video-cover-box {position: absolute; top: 0px; left: 0px;   width: 100%;  height: 100%; border-radius: 4rem;overflow: hidden; cursor: pointer;}
.prd-view-top .prd-view-img-list .video-wrap .video-cover-box .thumb { display: block;position: relative; width: 100%; height: 100%;}
.prd-view-top .prd-view-img-list .video-wrap .video-cover-box .thumb img {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%);}
.prd-view-top .prd-view-img-list .video-wrap button {position: absolute; top: 50%; left: 50%; font-size: 6rem; color: #fff; margin: -3rem 0 0 -3rem; z-index: 10;}
.prd-view-top .prd-view-img-con .slick-dots {position: absolute; left: 4rem; bottom: 4rem; display: inline-flex;}
.prd-view-top .prd-view-img-con .slick-dots li { margin-left:3rem; }
.prd-view-top .prd-view-img-con .slick-dots li:first-child { margin-left:0; }
.prd-view-top .prd-view-img-con .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:1rem; height:1rem; background-color:#fff; font-size:0; opacity:0.15;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.prd-view-top .prd-view-img-con .slick-dots li.slick-active button{background-color:#fff; opacity:1.0; }

.prd-view-info-con {width: 50%; padding-left: 8rem; box-sizing: border-box;}
.prd-view-info-con .category {display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.016em; color: var(--main-color); margin-bottom: 2.5rem;}
.prd-view-info-con .prd-tit {font-size: 5.6rem; font-weight: 700; letter-spacing: -0.024em; color: #fff; line-height: 1.1; text-shadow: 0px 0px 1rem var(--main-color);}
.prd-view-info-con .prd-txt {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.66; color: rgba(255,255,255,0.5); padding-top: 2rem;}
.prd-view-info-con .prd-view-info-list {display: flex; padding-top: 5rem;}
.prd-view-info-con .prd-view-info-list dl {position: relative; width: 13.5rem; text-align: center; padding: 0 1rem; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,0.15); }
.prd-view-info-con .prd-view-info-list dl:first-of-type {border-left: 0;}
.prd-view-info-con .prd-view-info-list dl dt {font-size: 1.5rem; font-weight: 400; line-height: 1.2; color: #fff;}
.prd-view-info-con .prd-view-info-list dl dd {font-size: 2rem; font-weight: 600; line-height: 1.3; color: #fff; margin-top: 1.5rem;}
.prd-view-info-con .prd-view-btn-list {padding-top: 7.5rem; display: flex; margin: 0 -1rem;}
.prd-view-info-con .prd-view-btn-list a {position: relative; display: flex; align-items: center; justify-content: center; width: calc(50% - 2rem); margin: 0 1rem; max-width: 24rem; height: 6rem; text-align: center; border-radius: 4rem; box-sizing: border-box; }
.prd-view-info-con .prd-view-btn-list a:before {border: 2px solid #fff; border-radius: 4rem;}
.prd-view-info-con .prd-view-btn-list a em {font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: #fff; transition: var(--transition-custom2);}
.prd-view-info-con .prd-view-btn-list a.inquiry-btn { background: var(--main-color);}
.prd-view-info-con .prd-view-btn-list a.inquiry-btn:before {border: none;}
.prd-view-info-con .prd-view-btn-list a.catalog-btn {}
.prd-view-info-con .prd-view-btn-list a:hover em {color: var(--main-color);}

/* 제품 상세정보 */
.prd-view-con-wrap.fold {position: relative; height: 2300px; overflow: hidden;}
.prd-view-con-wrap.open {height: auto;}
.prd-view-con {padding: 10rem 0; border-bottom: 2px solid #fff;}
.prd-view-con:last-of-type {border-bottom: 0;}
.prd-view-con-tit {text-align: center; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.024em; color: #fff; line-height: 1.4; margin-bottom: 8rem;} 

/* Certification */ 
.prd-certification-list {display: flex; justify-content: center; margin: 0 -6rem;}
.prd-certification-list li {width: calc(16.66% - 12rem); margin: 0 6rem; text-align: center;}
.prd-certification-list li .prd-certif-img {position: relative; width: 100%; height: 0; padding-top: 100%;}
.prd-certification-list li .prd-certif-img span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255,255,255,0.1); border-radius: 50%;}
.prd-certification-list li strong {display: block; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.036em; color: #fff; line-height: 1.5; padding-top: 2rem;}
/* Video */ 
.prd-view-video-con {width: 1160px; margin: 8rem auto 0;}
.prd-view-video-list .slick-list {margin: 0 -4rem;}
.prd-view-video-list .slick-slide {margin: 0 4rem;}
.prd-view-video-list li .inner {border-radius: 2rem; overflow: hidden;}
.prd-view-video-list li .inner .prd-view-video {position: relative; }
.prd-view-video-list li .inner .video-iframe-box {position: relative;padding-top:56.034%;height: 0; background-color: #000; overflow: hidden;}
.prd-view-video-list li .inner .video-iframe-box iframe {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.prd-view-video-list li .inner .video-cover-box { position: absolute;  top: 0px;left: 0px;  width: 100%;height: 100%; overflow: hidden; cursor: pointer;}
.prd-view-video-list li:not(.slick-active) .inner .video-cover-box {pointer-events: none;}
.prd-view-video-list li .inner .video-cover-box .thumb {display: block; position: relative; width: 100%; height: 100%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s;}
.prd-view-video-list li .inner .video-cover-box .thumb img {  width: 100%; height: 100%;}
.prd-view-video-list li .inner .btn-cover {position: absolute;  top: 50%; left: 50%; margin: -4.8rem 0 0 -4.8rem; z-index: 10;}
.prd-view-video-list li .inner button {position: relative; font-size: 9.6rem; color: #fff;}
.prd-view-video-list .slick-dots {position: relative; margin-top: 4rem; display: flex; justify-content: center;}
.prd-view-video-list .slick-dots li {margin-left: 3.2rem;}
.prd-view-video-list .slick-dots li:first-child {margin-left: 0;}
.prd-view-video-list .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:0.8rem; height:0.8rem; background-color:#fff; font-size:0; opacity:0.15;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.prd-view-video-list .slick-dots li.slick-active button{background-color:#fff; opacity:1.0; }
/* Application Case */ 
.prd-view-app-list {width: 1160px; margin: 0 auto;}
.prd-view-app-list .prd-app-list .slick-list {overflow: hidden;}
.prd-view-app-list .prd-app-list .slick-dots {position: relative; margin-top: 4rem; display: flex; justify-content: center;}
.prd-view-app-list .prd-app-list .slick-dots li {margin-left: 3.2rem;}
.prd-view-app-list .prd-app-list .slick-dots li:first-child {margin-left: 0;}
.prd-view-app-list .prd-app-list .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:0.8rem; height:0.8rem; background-color:#fff; font-size:0; opacity:0.15;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.prd-view-app-list .prd-app-list .slick-dots li.slick-active button{background-color:#fff; opacity:1.0; }
/* Advantage */ 
.prd-advantage-list {display: flex; flex-wrap: wrap; margin: -1rem 0;}
.prd-advantage-list li {width: 50%; margin: 1rem 0; padding-right: 1rem; box-sizing: border-box;}
.prd-advantage-list li .txt {position: relative; padding-left: 4.4rem; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.036em; color: #fff; line-height: 1.8;}
.prd-advantage-list li .txt:before {position: absolute; top: -0.6rem; left: 0; content: '\e92c'; font-family: xeicon; font-size: 2.4rem; font-weight: 400; color: #fff;}
/* Specifications */ 
.prd-specifications .custom-scrollbar-wrapper + .prd-view-con-tit {margin-top: 10rem;}
.prd-specifications .prd-view-con-tit {margin-bottom: 6rem;}
.prd-specifications-con {display: flex;}
.prd-specifications-con + .prd-specifications-con {padding-top: 10rem;}
.prd-specifications-con .left-tit-con {width: 18.18%;}
.prd-specifications-con .left-tit-con strong {display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.035em; color: #fff; line-height: 1.4;}
.prd-specifications-con .right-tbl-con {width: 81.82%;}
.prd-spec-tbl-con .prd-spec-sub-tit {padding-top: 4rem; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.5; color: #fff; margin-bottom: 1.7rem;}
.prd-spec-tbl-con:first-of-type .prd-spec-sub-tit {border-top: 1px solid #fff;}
.prd-spec-tbl table {width: 100%; }
.prd-spec-tbl table tr td, 
.prd-spec-tbl table tr th {text-align: left; border-bottom: 1px solid #fff; padding: 1.2rem 2rem; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.024em; color: #fff; line-height: 1.4;}
.prd-spec-tbl table tbody > tr td,
.prd-spec-tbl table tbody > tr th {border-top: 1px solid #fff;}
.prd-spec-tbl table tr th {background: rgba(255,255,255,0.1);}
.prd-spec-tbl table tr td {border-right: 1px solid rgba(255,255,255,0.15);}
.prd-spec-tbl table tr td:last-of-type {border-right: 0;}
.prd-spec-tbl table tr.merge td {border-bottom: 1px solid rgba(255,255,255,0.15);}
.prd-spec-tbl table tr.merge.merge-end td {border-bottom: 1px solid #fff;}
/* 적용제품 */ 
.prd-applicable-list {display: flex; flex-wrap: wrap; margin:-1.5rem;}
.prd-applicable-list li {width: calc(33.33% - 3rem); margin: 1.5rem;}
.prd-applicable-list li a {display: block; width: 100%; padding: 5rem; border-radius: 4rem; background: linear-gradient(137deg, rgba(255,255,255,0.09) 0%, rgba(243, 115, 33, 0.09) 100%); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.prd-applicable-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%;}
.prd-applicable-list li a .img-box span {display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.prd-applicable-list li a .tit-box { text-align: left; padding-top: 0.5rem;}
.prd-applicable-list li a .tit-box .sub-tit {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.016em; color: var(--main-color);}
.prd-applicable-list li a .tit-box .tit {font-size: 4rem; font-weight: 600; letter-spacing: 0; color: #fff; line-height: 1.4; }
.prd-applicable-list li a .txt-box {margin-top: 2rem;}
.prd-applicable-list li a .txt-box dl {display: flex; alilgn-items: center; justify-content: space-between; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.prd-applicable-list li a .txt-box dl:last-child {border-bottom: 0; padding-bottom: 0;}
.prd-applicable-list li a .txt-box dl dt,
.prd-applicable-list li a .txt-box dl dd {font-size: 1.5rem; font-weight: 400; color: #fff; line-height: 1.3;}

/* 더보기 버튼 */
.prd-view-more-btn-box{position:relative; text-align:center;}
/* .prd-view-more-btn-box:after {position: absolute; content: ''; left: 0; bottom: 8rem; width: 100%; height: 48rem; background: transparent linear-gradient(0deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;} */
.prd-view-more-btn-box:before{position:absolute; top:50%; left:0; width:100%; height:2px; margin-top: -1px; background-color:#fff; content:""; z-index: 1;}
.prd-view-more-btn {overflow:hidden; display: inline-block; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); backdrop-filter: blur(10px); border-radius:50%; z-index: 2;}
.prd-view-more-btn-icon{display: block; position: relative; top: 1rem; margin-top: 0.5rem; font-size:4rem; color: #fff; transition:color 0.5s}
.prd-view-more-btn-icon i {line-height: 4rem;}

.prd-view-more-btn-box.open {margin-top: 4rem;}
.prd-view-more-btn-box.open:after {display: none;}
.prd-view-more-btn-box.open .prd-view-more-btn-icon {transform: rotate(-180deg)}

.prd-view-more-btn-inner {position: relative; width: 16rem;  height: 16rem; visibility: inherit;	display: flex; flex-direction:column; justify-content: center;  align-items: center;text-align: center;}
.prd-view-more-btn-inner strong {font-size: 1.8rem; font-weight: 600; letter-spacing: -0.036em; color: #fff; line-height: 1.3; display: block;  transition:color 0.5s}
.prd-view-more-btn-inner strong em {font-weight: 600;}
.prd-view-more-btn-line { position: absolute; top: 0; left: 0;width: 100%;height: 100%;}
.prd-view-more-btn-line svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #fff;
    stroke-width: 2px;
    fill: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.prd-view-more-btn-line svg:last-child {
    stroke-dasharray: 310px 310px;
    stroke-dashoffset: 310px;
    visibility: hidden;
    -webkit-transition: visibility 0s 1.7s;
    transition: visibility 0s 1.7s;
    animation: more-btn-line-out 1.7s cubic-bezier(0.215, 0.61, 0.355, 1);
	stroke: var(--main-color);
}

@keyframes more-btn-line-over{
	0%{
		-webkit-transform:rotate(-90deg);
		transform:rotate(-90deg)
	}
	to{
		-webkit-transform:rotate(90deg);
		transform:rotate(90deg);
		stroke-dashoffset:0;
	}
}
@keyframes more-btn-line-out{
	0%{
		-webkit-transform:rotate(90deg);
		transform:rotate(90deg);
		stroke-dashoffset:0;
	}
	to{
		-webkit-transform:rotate(450deg);
		transform:rotate(450deg);
		stroke-dashoffset:-310px
	}
}

/* @media all and (hover:hover){
	.prd-view-more-btn:hover .prd-view-more-btn-icon,
	.prd-view-more-btn:hover .prd-view-more-btn-inner strong {color:var(--main-color);}
	.prd-view-more-btn:hover .prd-view-more-btn-inner .prd-view-more-btn-line svg:last-child {
		visibility: inherit;
		-webkit-transition: none;
		transition: none;
		animation: more-btn-line-over 1.7s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	}
} */

/* 하단리스트버튼 */
.prd-view-bottom {padding-top: 15rem;}
.prd-view-bottom .list-view-btn {width: 100%; height: 10rem; border-radius: 10rem; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; color: #fff; line-height: 1.4; border: 1px solid #fff; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
 
@media all and (max-width:1280px){ 
	.prd-view-app-list {max-width: none; width: 90%;}
	
	/* Video */
	.prd-view-video-con {width: 90%; max-width: none; }

	.prd-certification-list {margin: 0 -3rem;}
	.prd-certification-list li {width: calc(16.66% - 6rem); margin: 0 3rem;}
}
@media all and (max-width:800px){ 
	/* 상단 제품이미지+기본정보 */
	.prd-view-top {padding: 8rem 0; flex-wrap: wrap;}
	.prd-view-top .prd-view-img-con {width: 100%;}
	.prd-view-info-con {width: 100%; padding-left: 0; padding-top: 4rem;}
	.prd-view-info-con .prd-tit {font-size: 5rem;}
	.prd-view-top .prd-view-img-con .slick-dots {left: 2.5rem; bottom: 2.5rem;}
	.prd-view-top .prd-view-img-con .slick-dots li {margin-left: 1.5rem;}

	/* 제품 상세정보 */
	.prd-view-con-tit {margin-bottom: 6rem;}
	/* Certification */
	.prd-certification-list {flex-wrap: wrap; margin: -3rem;}
	.prd-certification-list li {width: calc(33.33% - 6rem); margin: 3rem;}
	/* Advantage */
	.prd-advantage-list li {width: 100%;}
	.prd-specifications-con {flex-wrap: wrap;}
	.prd-specifications-con .left-tit-con {width: 100%; margin-bottom: 2.5rem;}
	.prd-specifications-con .right-tbl-con {width: 100%;}
	.prd-spec-tbl-con .prd-spec-sub-tit {padding-top: 3rem;}
	/* 적용제품 */
	.prd-view-app-list {width: 100%;}
	.prd-applicable-list li {width: calc(50% - 3rem);}
	.prd-applicable-list li a {padding: 3rem 3rem 4rem;}
	.prd-applicable-list li a .tit-box .tit {font-size: 3rem; margin-top: 1rem;}

	/* 더보기 버튼 */
	.prd-view-more-btn-inner { width: 11rem;height: 11rem;}
	.prd-view-more-btn-inner strong {font-size: 1.4rem;}
	.prd-view-more-btn-icon {font-size: 2.4rem; margin-top: 0;}
	.prd-view-more-btn-icon i {line-height: 2.4rem;}

	.prd-view-bottom .list-view-btn {height: 8rem;}
}
@media all and (max-width:480px){ 
	.prd-view-info-con .prd-view-info-list dl {width: 33.33%;}
	.prd-certification-list {margin: -3rem -2rem;}
	.prd-certification-list li {width: calc(33.33% - 4rem); margin: 3rem 2rem;}
}


/* ****************** 제품 :: 협동로봇 ********************** */
.line-up-con01 {padding: 5rem 0 0; max-width: 1600px; margin: 0 auto; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.line-up-con01 .inner {position: relative; display: flex;}
.line-up-con01 .inner .bg-img {width: 80rem; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.line-up-con01 .inner .bg-img img {max-width: 100%; transform:scale(0.3); opacity:0; transition:all 1.5s ease-out}
.line-up-con01 .inner .img-box {width: 50%;}
.line-up-con01 .inner .img-box img {max-width: 100%;}
.line-up-con01 .inner .txt-box {width: 50%; text-align: left; padding-top: 19rem;}
.line-up-con01 .inner .txt-box .tit {height: 14rem;}
.line-up-con01 .inner .txt-box .tit strong {display: block; font-size: 4.8rem; color: #fff; line-height: 1.3;}
.line-up-con01 .inner .txt-box .tit span {display: block; font-size: 1.8rem; font-weight: 500; color: rgba(255,255,255,0.3); line-height: 1.6; padding-top: 1rem;}
.line-up-con01 .inner .txt-box .txt01 {font-size: 2.4rem; font-weight: 500; color: #fff; line-height: 1.3;}
.line-up-con01 .inner .txt-box .txt02 {font-size: 1.8rem; font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.65; padding-top: 3rem;}
/* .line-up-con01 .inner .txt-box .tit strong,
.line-up-con01 .inner .txt-box .tit span,
.line-up-con01 .inner .txt-box .txt01,
.line-up-con01 .inner .txt-box .txt02 {opacity: 0; letter-spacing:0.02em; filter:blur(1rem); transition:all 0.6s ease-in-out; transition-delay: 0.6s;} */
/* .line-up-con01.animated .inner .bg-img img {transform:scale(1); opacity:1;}
.line-up-con01.animated .inner .txt-box .tit strong,
.line-up-con01.animated .inner .txt-box .tit span,
.line-up-con01.animated .inner .txt-box .txt01,
.line-up-con01.animated .inner .txt-box .txt02  {opacity: 1;  letter-spacing:-0.02em; filter:blur(0); } */

.line-up-con02 {padding: 10rem 0 13rem;}
.line-up-con02 .prd-list-tit-box {text-align: center; padding-bottom: 9rem;}
.line-up-con02 .prd-intro-list {display: flex; flex-wrap: wrap; margin: -1.5rem;}
.line-up-con02 .prd-intro-list li {width: calc(33.33% - 3rem); margin: 1.5rem;}
.line-up-con02 .prd-intro-list li a {position: relative; opacity: 0; transform: translate(30px); transition: var(--transition-custom2);}
.line-up-con02 .prd-intro-list li:nth-child(2) a {transition-delay: 0.3s;}
.line-up-con02 .prd-intro-list li:nth-child(3) a {transition-delay: 0.6s;}
.line-up-con02 .prd-intro-list li:nth-child(5) a {transition-delay: 0.3s;}
.line-up-con02 .prd-intro-list li:nth-child(6) a {transition-delay: 0.6s;}
.line-up-con02 .prd-intro-list li.animated a {opacity: 1; transform: translate(0);} 

.cobot-flow-txt-wrap {padding: 6rem 0; }
.cobot-flow-txt-wrap  .inner {position: relative; width: 100%; height: 18.8rem; overflow: hidden;}
.cobot-flow-txt-wrap .flow-txt {width: 100%;height: 100%; position: absolute; top: 0; left: 0; z-index: 2; mix-blend-mode: lighten;}
.cobot-flow-txt-wrap .maskBg {width: 100%; height: 100%;  display: flex; align-items: center; overflow: hidden;} 
.cobot-flow-txt-wrap .maskBg .marquee {width: 100%; height: 100%; position: relative;}
.cobot-flow-txt-wrap .maskBg .marquee .absol {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center;}
.cobot-flow-txt-wrap .maskBg .marquee .absol .mar_ch {display: flex; align-items: center;}
.cobot-flow-txt-wrap .maskBg .marquee .absol h4 {font-size:15rem; letter-spacing:-0.02em; color: rgba(255,255,255,0.15); font-weight: 700; box-sizing:border-box; white-space:nowrap;}
/* .cobot-flow-txt-wrap .bg-box {width: 100%;   height: 100%; background: rgba(255,255,255,0.3); backdrop-filter: blur(1rem);} */

.cobot-why-top {text-align: center; margin-bottom: 10rem;}
.cobot-why-top .cobot-why-tit {font-size: 1.5rem; font-weight: 700; letter-spacing: -0.024em; color: var(--main-color); line-height: 1.3; margin-bottom: 2rem;}
.cobot-why-top .cobot-why-txt {font-size: 4.8rem; font-weight: 700; letter-spacing: -0.023em; color: #fff; line-height: 1.42; }
.cobot-why-top .cobot-why-sub-txt {font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); line-height: 1.5; padding-top: 2rem;} 
.cobot-why-con01 {padding: 10rem 0; max-width: 1200px; margin: 0 auto;}
.cobot-why-list01 {display: flex; flex-wrap: wrap; margin: 0 -1.5rem;}
.cobot-why-list01 li {width: calc(33.333% - 3rem); margin: 0 1.5rem;}
.cobot-why-list01 li .inner {height: 100%; background: rgba(255,255,255,0.05); backdrop-filter:blur(1rem); border-radius: 3rem; padding: 5.2rem 2.5rem 8.5rem; box-sizing: border-box; text-align: center; transition:var(--transition-custom2); transition-delay: 0.2s; transition-property: transform, opacity, filter; filter:blur(1rem); opacity: 0;}
.cobot-why-list01 li:first-child .inner{transform: translateX(100%);}
.cobot-why-list01 li:last-child .inner{transform: translateX(-100%);}
.cobot-why-list01 li .inner .icon {display: flex; align-items: center; justify-content: center; height: 15rem; width: 15rem; margin: 0 auto 2rem; border-radius:50%; background: rgba(255,255,255,0.04);}
.cobot-why-list01 li .inner .tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.3; margin-bottom: 2.5rem;}
.cobot-why-list01 li .inner .txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.625; color: #FFFFFF;}
.cobot-why-list01.animated li .inner {opacity: 1; transform: translateX(0); filter:blur(0);}

.cobot-why-con02 {padding: 10rem 0;}
.cobot-why-list02 {display: flex; margin: -1.5rem;}
.cobot-why-list02 li {position: relative; width: calc(33.333% - 3rem); margin: 1.5rem;}
.cobot-why-list02 li:before {position: absolute; top: 50%; margin-top: -2rem; left: -3.5rem; content: '\e914'; font-family: xeicon; width: 4rem; height: 4rem; text-align: center; line-height: 4rem; font-size: 1.3rem; color: #fff; text-align: center; background: var(--main-color); border-radius: 50%; opacity: 0; transition: all 0.4s ease-in-out;}
.cobot-why-list02 li:first-child:before {display: none;}
.cobot-why-list02 li .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.cobot-why-list02 li .bg svg {width: 100%; height: 100%;}
.cobot-why-list02 li .bg svg circle {stroke-dasharray: 1240px;  stroke-dashoffset: 1240px; }
.cobot-why-list02 li .circle-box {position: relative; padding: 2rem; box-sizing: border-box; z-index: 1;}
.cobot-why-list02 li .inner-wrap {position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 50%; background: linear-gradient(180deg, rgba(243, 115, 33, 0.16) 0%, rgba(255, 255, 255, 0) 100%) 0%; transform-style: preserve-3d; opacity: 0; transform: rotateY(0);  transition: all 0.8s ease-in-out; transition-property:opacity,transform;}
.cobot-why-list02 li .inner {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction:column; text-align: center;  justify-content: center;}
.cobot-why-list02 li .inner .icon {}
.cobot-why-list02 li .inner .tit {font-size: 3rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; line-height: 1.2; padding-top: 1.1rem;}
.cobot-why-list02 li .inner .txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; line-height: 1.88; padding-top: 1.8rem;}

.cobot-why-list02 li.item01 .bg svg {transform: rotate(180deg);}
.cobot-why-list02 li.item02 .bg svg {transform: rotate(170deg);}
.cobot-why-list02 li.item03 .bg svg {transform: rotate(190deg);}

.cobot-why-list02-wrap.animated .cobot-why-list02 li:before {opacity: 1;}
.cobot-why-list02-wrap.animated .cobot-why-list02 li.item02:before  { transition-delay: 0.4s;}
.cobot-why-list02-wrap.animated .cobot-why-list02 li.item03:before { transition-delay: 0.9s;}
.cobot-why-list02-wrap.animated .cobot-why-list02 li .inner-wrap{opacity: 1; transform: rotateY(360deg);}
.cobot-why-list02-wrap.animated .cobot-why-list02 li.item02 .inner-wrap {transition-delay: 0.5s;}
.cobot-why-list02-wrap.animated .cobot-why-list02 li.item03 .inner-wrap { transition-delay: 1.0s;}
.cobot-why-list02-wrap.animated .cobot-why-list02 li.item01 .bg svg circle{animation: line-ani01 0.5s linear both; }
.cobot-why-list02-wrap.animated .cobot-why-list02 li.item02 .bg svg circle {animation: line-ani02 0.5s linear both; animation-delay: 0.5s}
.cobot-why-list02-wrap.animated .cobot-why-list02 li.item03 .bg svg circle{animation: line-ani01 0.5s linear both; animation-delay: 1.0s}

@keyframes line-ani01 {
  0% {
    stroke-dashoffset: 1240px; 
  }
  50% {
    stroke-dashoffset: 950px;
  }
  100% {
    stroke-dashoffset: 660px;
  }
}

@keyframes line-ani02 {
  0% {
    stroke-dashoffset: -1240px; 
  }
  50% {
    stroke-dashoffset: -965px;
  }
  100% {
    stroke-dashoffset: -690px;
  }
}

@media all and (max-width:1280px){ 
	.line-up-con01 .inner .bg-img {}
	.line-up-con01 .inner .txt-box {width: 35%; padding-top: 9rem;}
	
	.cobot-why-list02 li .inner .tit {font-size: 2.4rem;}
	.cobot-why-list02 li .inner .txt {font-size: 1.6rem;}	
}
@media all and (max-width:800px){ 
	.line-up-con01 {padding: 2rem 0 8rem;}
	.line-up-con01 .inner  {display: block;}
	.line-up-con01 .inner .img-box {width: 100%; }
	.line-up-con01 .inner .txt-box {padding-top: 0; width: 100%;}
	.line-up-con01 .inner .txt-box.right-box {padding-top: 0;}
	.line-up-con01 .inner .txt-box .tit {height: auto;}
	.line-up-con01 .inner .txt-box .tit strong {font-size: 4rem;}
	.line-up-con01 .inner .txt-box .txt01 {margin-top: 1rem; font-size: 1.8rem;}	
	.line-up-con01 .inner .txt-box .txt02 {font-size: 1.6rem;}

	.line-up-con02 {padding: 10rem 0;}
	.line-up-con02 .prd-intro-list {margin: -1rem;}
	.line-up-con02 .prd-intro-list li {width: calc(50% - 2rem); margin: 1rem;}
	.line-up-con02 .prd-intro-list li:nth-child(2) a {transition-delay: 0.3s;}
	.line-up-con02 .prd-intro-list li:nth-child(3) a {transition-delay: 0s;}
	.line-up-con02 .prd-intro-list li:nth-child(4) a {transition-delay: 0.3s;}
	.line-up-con02 .prd-intro-list li:nth-child(5) a {transition-delay: 0s;}
	.line-up-con02 .prd-intro-list li:nth-child(6) a {transition-delay: 0.3s;}

	.cobot-flow-txt-wrap {padding: 0;}
	.cobot-flow-txt-wrap .inner {height: 13.8rem;}
	.cobot-flow-txt-wrap .maskBg .marquee .absol h4 {font-size: 9rem;}
	
	.cobot-why-top {margin-bottom: 6rem;}
	.cobot-why-top .cobot-why-txt {font-size: 4rem;}
	.cobot-why-top .cobot-why-sub-txt {font-size: 1.8rem;}

	.cobot-why-list01 {margin: -1rem 0;}
	.cobot-why-list01 li {width: 100%; margin: 1rem 0;}
	.cobot-why-list01 li .inner {padding: 4.5rem 2.5rem; background: rgba(255, 255, 255, 0.09);}
	.cobot-why-list01 li:first-child .inner{transform: translateX(0);}
	.cobot-why-list01 li:last-child .inner{transform: translateX(0);}
	.cobot-why-list01 li .inner .tit {font-size: 2.2rem;}

	.cobot-why-list02 {flex-direction: column; margin: -1.5rem 0;}
	.cobot-why-list02 li {width: 100%; max-width: 40rem; margin: 1.5rem auto;}
	.cobot-why-list02 li:before {top: -3.5rem; left: 50%; margin-top: 0; margin-left: -2rem;}
	.cobot-why-list02 li.item01 .bg svg { transform: rotate(270deg);}
	.cobot-why-list02 li.item02 .bg svg { transform: rotate(260deg);}
	.cobot-why-list02 li.item03 .bg svg { transform: rotate(280deg);}
}


/* ****************** 제품 :: 이동로봇 ********************** */
.agv-amr-page {position: relative;}
/* .agv-amr-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.44; }
.agv-amr-bg .bg-point {position: absolute; top: 0; width: 172rem; height: 172rem; background: transparent radial-gradient(closest-side, #F37321 0%, #F3732100 80%);}
.agv-amr-bg .bg-point.bg-point01 {top: -50rem;  right: -63%;}
.agv-amr-bg .bg-point.bg-point02 {top: 172rem; right: -50%;}
.agv-amr-bg .bg-point.bg-point03 {top: 172rem; right: -50%;}
.agv-amr-bg .bg-point.bg-point04 {top: 172rem; right: -50%;}
 */
.prd-list-tit-box {}
.prd-list-tit-box .tit {font-size: 5.6rem; font-weight: 700; line-height: 1.1; color: #fff; letter-spacing: -0.02em;}
.prd-list-tit-box .sub-tit {font-size: 1.8rem; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,0.3); letter-spacing: -0.02em;}
.prd-list-tit-box .txt01 {font-size: 2.4rem; font-weight: 500; letter-spacing: -0.02em; color: #fff; line-height: 1.25; padding-top: 2rem;}
.prd-list-tit-box .txt02 {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); line-height: 1.66; padding-top: 2rem;}

.agv-amr-page .prd-list-tit-box .tit {font-size: 4.8rem;}
.agv-amr-page .prd-list-tit-box .sub-tit {margin-top: 1rem;}
.agv-amr-page .prd-list-tit-box .txt01 {line-height: 1.5; padding-top: 3.5rem;}

.agv-con {position: relative; padding-top: 15rem;}
.agv-con .prd-list-tit-box {text-align: center; padding-bottom: 8rem;}
.agv-list {display: flex; flex-wrap: wrap; margin: -1rem -1.5rem;}
.agv-list li {width: calc(25% - 3rem); margin: 1rem 1.5rem;}
.agv-list li a {display: block; width: 100%; height: 100%; padding: 5rem; border-radius:4rem; backdrop-filter: blur(1rem); background: linear-gradient(137deg, rgba(255, 255, 255, 0.09) 0%, rgba(243, 115, 33, 0.09) 100%);-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.agv-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%;}
.agv-list li a .tit {display: block; font-size: 2.3rem; font-weight: 600; line-height: 1.3; margin-top: 1rem; color: #fff;}

.amr-list-wrap {padding-top: 10rem;}
.amr-con {display: flex; align-items: center;}
.amr-con .amr-img-box {width: 50%;}
.amr-con .amr-img-box span {position: relative; display: block; width: 100%; height: 0; padding-top: 100%; }
.amr-con .amr-info-box {width: 50%; padding-left: 10rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} 
.amr-list-wrap .slick-dots {position: relative; margin-top: 4rem; display: flex; justify-content: center;}
.amr-list-wrap .slick-dots li {margin-left: 3.2rem;}
.amr-list-wrap .slick-dots li:first-child {margin-left: 0;}
.amr-list-wrap .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:0.8rem; height:0.8rem; background-color:#fff; font-size:0; opacity:0.15;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.amr-list-wrap .slick-dots li.slick-active button{background-color:#fff; opacity:1.0; }

.prd-why-wrap {padding: 22rem 0 10rem;}
.prd-why-top {text-align: center; margin-bottom: 5rem;}
.prd-why-tit {font-size: 5.6rem; font-weight: 700; letter-spacing: -0.024em; color: #fff; line-height: 1.2;}
.prd-why-txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); line-height: 1.66; padding-top: 1rem;}
.prd-why-con {padding-top: 15rem;}
.prd-why-con .prd-why-con-tit {font-size: 3.2rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.25; margin-bottom: 5rem; text-align: center;}
.prd-why-con .prd-why-item {display: flex; padding: 5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.prd-why-con .prd-why-item:first-of-type {border-top: 2px solid #fff;}
.prd-why-con .prd-why-item .tit-box {width: 24rem; padding-right: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.prd-why-con .prd-why-item .tit-box strong {display: block; font-size: 2.8rem; letter-spacing: -0.02em; color: #fff; line-height: 1.33;}
.prd-why-con .prd-why-item .tit-box span {display: block; font-size: 3.6rem; color: #fff; margin-top: 1rem;} 
.prd-why-con .prd-why-item .tit-box span:not(.icon) {width: 3.6rem; height: 3.6rem;}
.prd-why-con .prd-why-item .tit-box span:not(.icon) svg {width: 100%; height: 100%;}
.prd-why-con .prd-why-item .right-box { width: calc(100% - 24rem);}
.prd-why-con .prd-why-item .right-box .txt01 {font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.8; } 
.prd-why-con .prd-why-item .right-box .txt01 + .txt01 {margin-top: 5rem;}

.prd-why-con .prd-why-item .txt-box {display: flex; flex-wrap: wrap; }
.prd-why-con .prd-why-item .txt-box.txt-box-style01 {margin: 0 -0.75rem;}
.prd-why-con .prd-why-item .txt-box.txt-box-style01 dl {width: calc(33.333% - 1.5rem); margin: 0 0.75rem;}
.prd-why-con .prd-why-item .txt-box dl {border-radius: 3rem; background: rgba(255,255,255,0.05); padding: 2.5rem 3.5rem 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.prd-why-con .prd-why-item .txt-box dl dt {margin-bottom: 3.1rem;}
.prd-why-con .prd-why-item .txt-box dl dt .num {width: 4rem; height: 4rem; border-radius: 50%; padding: 0.5rem; box-sizing: border-box; background: rgba(243, 115, 33, 0.1);}
.prd-why-con .prd-why-item .txt-box dl dt .num span {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--main-color); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.prd-why-con .prd-why-item .txt-box dl dt .sub-tit {display: block; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.5; margin-top: 1.1rem;}
.prd-why-con .prd-why-item .txt-box dl dd {font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.6); line-height: 2; }

.prd-why-con .prd-why-item .txt-box.txt-box-style02 {margin: -0.5rem 0 ;}
.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl {display: flex; align-items: center; padding: 3rem 3.5rem;  width: 100%; margin: 0.5rem 0;}
.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl dt {width: 19.5rem; display: flex; align-items: center;  margin-bottom: 0;}
.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl dt .num {}
.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl dt .sub-tit {position: relative; width: calc(100% - 4rem); margin-top: 0; padding: 0 1.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl dt .sub-tit span {position: absolute; left: 1.5rem; bottom: -70%; font-size: 1.6rem; font-weight: 600; opacity: 0.3; }
.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl dd {width: calc(100% - 19.5rem);}

.prd-why-con .prd-why-item .txt-box.txt-box-style03 {margin: -1rem -0.75rem ; padding-top: 5rem;}
.prd-why-con .prd-why-item .txt-box.txt-box-style03 dl {width: calc(50% - 1.5rem); margin: 1rem 0.75rem; padding: 2.5rem 3.5rem 3rem 4rem; }

/* .prd-why-con .prd-why-item .txt-box {width: calc(100% - 24rem);} 
.prd-why-con .prd-why-item .txt-box dl {padding: 4rem 0; border-bottom: 1px solid rgba(255,255,255,0.2);}
.prd-why-con .prd-why-item .txt-box dl:first-of-type {padding-top: 0;}
.prd-why-con .prd-why-item .txt-box dl:last-of-type {padding-bottom: 0; border-bottom: 0;}
.prd-why-con .prd-why-item .txt-box dl dt {font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.66;}
.prd-why-con .prd-why-item .txt-box dl dt .txt + .txt {padding-top: 2rem;}
.prd-why-con .prd-why-item .txt-box dl dd {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.6); line-height: 1.66; padding-top: 0.4rem;} */

@media all and (max-width:1280px){ 
	.agv-list li a {padding: 4rem;}
}
@media all and (max-width:800px){ 
	.agv-con {padding-top: 8rem;}
	.prd-list-tit-box .tit {font-size: 4.8rem;}
	.prd-list-tit-box .txt01 {font-size: 1.8rem;}
	.agv-amr-page .prd-list-tit-box .tit {font-size: 4rem;}
	.agv-list {margin: -1rem;}
	.agv-list li {width: calc(50% - 2rem); margin: 1rem;}
	.agv-list li a {padding: 4rem 3rem;}
	.agv-list li a .tit {font-size: 1.6rem; line-height: 1.4;}
	.amr-con {flex-wrap: wrap;}
	.amr-con .amr-img-box {width: 100%;}
	.amr-con .amr-info-box {width: 100%; padding-left: 0; padding-top: 5rem;}
	.prd-why-wrap {padding: 15rem 0 10rem;}
	.prd-why-tit {font-size: 4rem;}
	.prd-why-con {padding-top: 10rem;}
	.prd-why-con .prd-why-item {flex-wrap: wrap; padding: 4rem 0;}
	.prd-why-con .prd-why-item .tit-box {width: 100%; padding-right: 0; padding-bottom: 4rem;}
	.prd-why-con .prd-why-item .tit-box span {font-size: 3rem; margin-top: 1rem;}
	.prd-why-con .prd-why-item .right-box {width: 100%;}
	.prd-why-con .prd-why-item .right-box .txt01 {font-size: 2rem;}
	.prd-why-con .prd-why-item .txt-box dl {    background: rgba(255, 255, 255, 0.1);}
	.prd-why-con .prd-why-item .txt-box dl dt {margin-bottom: 2rem;}
	.prd-why-con .prd-why-item .txt-box.txt-box-style01 {margin: -0.5rem 0;}
	.prd-why-con .prd-why-item .txt-box.txt-box-style01 dl {width: 100%; margin: 0.5rem 0;}
	.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl {flex-wrap: wrap;}
	.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl dt {width: 100%; margin-bottom: 2rem;}
	.prd-why-con .prd-why-item .txt-box.txt-box-style02 dl dd {width: 100%;}
	.prd-why-con .prd-why-item .txt-box.txt-box-style03 {margin: -0.5rem 0;}
	.prd-why-con .prd-why-item .txt-box.txt-box-style03 dl {width: 100%; margin: 0.5rem 0; padding: 2.5rem 3.5rem 3rem;}
}

/* ****************** 제품 :: 자동화시스템 ********************** */
.product-page .bbs-no-list {border-top: 1px solid #fff;}
.automation-system-list {display: flex; flex-wrap: wrap; margin: -1.5rem; padding: 6.5rem 0 4rem;}
.automation-system-list li {width: calc(33.33% - 3rem); margin: 1.5rem; border-radius: 4rem; background:  linear-gradient(137deg, rgba(255,255,255,0.09) 0%, rgba(243, 115, 33, 0.09) 100%); padding:5.5rem 5rem 5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.automation-system-list li .img-box {position: relative; width: 100%; height: 0; padding-top: 100%;}
.automation-system-list li .tit-box {padding: 4rem 0;}
.automation-system-list li .tit-box .cate {display: block; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.016em; color: var(--main-color); line-height: 1.5; margin-bottom: 0.5rem;}
.automation-system-list li .tit-box .tit  {display: block; font-size: 4rem; font-weight: 600; line-height: 1.4; color: #fff;}
.automation-system-list li .btn-box {display: flex; margin: 0 -0.5rem;}
.automation-system-list li .btn-box a {position: relative; width: calc(50% - 1rem); height: 5rem; margin: 0 0.5rem; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 4rem; box-sizing: border-box;}
.automation-system-list li .btn-box a:before {border: 2px solid #000; border-radius: 4rem;}
.automation-system-list li .btn-box a em {font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: #fff; transition: var(--transition-custom2);}
.automation-system-list li .btn-box a.view-btn {background: var(--main-color); border: 0;}
.automation-system-list li .btn-box a:hover em {color: var(--main-color);}

@media all and (max-width:1280px){ 
	.automation-system-list li {padding: 4.5rem 3.5rem;}
}
@media all and (max-width:800px){ 
	.automation-system-list {margin: -1rem;}
	.automation-system-list li {width: calc(50% - 2rem); margin: 1rem;}
	.automation-system-list li .tit-box {padding: 2rem 0;}
	.automation-system-list li .tit-box .tit {font-size: 2.6rem;}
	/* .automation-system-list li .btn-box {flex-wrap: wrap; margin: -0.5rem 0;}
	.automation-system-list li .btn-box a {width: 100%; margin: 0.5rem 0;} */
}
@media all and (max-width:640px){ 
		.automation-system-list li {width: calc(100% - 3rem);}
}

/* ****************** 제품 :: 적용사례 ********************** */
.prd-cases-wrap {padding: 4.5rem 0 6rem;}
.prd-cases-con {position: relative; display: flex; border-top: 1px solid #fff; padding-top: 40px;}
.prd-cases-con .left-con {width: 12rem;}
.prd-cases-con .cate-filter-con {position: relative; width: 12rem; transition: top 0.4s ease-in-out;}
.prd-cases-con .cate-filter-con.bottom-fixed {position: absolute; bottom: 0; left: 0;}
.prd-cases-con .cate-filter-list {position: relative; width: 100%; border-radius: 0.6rem; background: rgba(255,255,255,0.1); }
.prd-cases-con .cate-filter-list li {width: 100%; height: 60px;}
.prd-cases-con .cate-filter-list li input {display: none;}
.prd-cases-con .cate-filter-list li label {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1rem; border-radius: 0.6rem;overflow: hidden; transition: all 0.3s; box-sizing: border-box;}
.prd-cases-con .cate-filter-list li label span {font-size: 1.5rem; font-weight: 600; line-height: 1.4; color: #fff;}

/* .prd-cases-con .cate-filter-list li input:checked + label {background: var(--main-color);} */

.prd-cases-con .right-con {width: calc(100% - 12rem); padding-left: 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.prd-cases-con .prd-app-list li {margin-bottom: 4rem;}
.prd-cases-con .prd-app-list li .inner {opacity: 1;}
.prd-cases-con .prd-app-list li .inner .txt-box {padding-left: 2rem;}

@media all and (min-width:801px){ 
	.prd-cases-con .cate-filter-con.top-fixed {position: fixed; top: calc(var(--sub-menu-height) + 40px);}
	.scroll-up .prd-cases-con .cate-filter-con.top-fixed {top:  calc(var(--header-height) + var(--sub-menu-height) + 40px); transition: top 0.4s ease-in-out;}
}
@media all and (max-width:1280px){ 
	.prd-cases-con .prd-app-list li .inner {padding: 5rem;}
	.prd-cases-con .prd-app-list li .inner .txt-box {padding-left: 0;}
}
@media all and (max-width:800px){ 
	.prd-cases-con {display: block;}
	.prd-cases-con .left-con {width: 100%; margin-bottom: 5rem;}
	.prd-cases-con .cate-filter-con {position: relative; width: 100%; z-index: 1;}
	.prd-cases-con .cate-filter-con.top-fixed {position: relative; top: 0;}
	.prd-cases-con .cate-filter-list {display: flex;}
	.prd-cases-con .cate-filter-list li label span {font-size: 1.4rem;}
	.prd-cases-con .cate-filter-list li input:checked + label {background: var(--main-color);}
	.prd-cases-con .right-con {width: 100%; padding-left: 0;}
	.prd-cases-con .prd-app-list li .inner {padding: 5rem 3rem;}
}

/* default */
.mouse-default{position:fixed; top:-80rem; left:-80rem; width: 172rem; height: 172rem; border-radius:50%; opacity: 0.2; z-index: -1; pointer-events:none; filter: blur(20px);}
.mouse-default:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:50%; content: ''; backdrop-filter: blur(5px); /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f52f23+0,f52f23+100&1+0,0.74+27,0.37+52,0+78 */
background: radial-gradient(ellipse at center,  rgba(243, 115, 33, 1) 0%,rgba(243, 115, 33, 0.74) 27%,rgba(243, 115, 33, 0.37) 52%,rgba(243, 115, 33, 0) 78%,rgba(243, 115, 33, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

@media all and (max-width:800px){
	.mouse-default {visibility: hidden !important; opacity: 0 !important;}
}


/* ****************** 02 H 파트너스 :: 01 협업 파트너스 찾기 ********************** */
.office-page .sub-tab-wrapper-style ,
.store-page .sub-tab-wrapper-style {margin-bottom: 6.5rem;}
/* ****************
 * 오피스
**************** */
.office-con { display: flex; flex-wrap:wrap; justify-content: space-between; height: 100%; }
/* 왼쪽  */
.office-con-left{padding: 3rem 1rem 3rem 3rem;width: 30.23%; height: 65%; background-color: #f5f5f5; border-radius: 1rem; box-sizing: border-box;}
.office-search-result-box { position: relative; height: 100%;}
.office-search-result-list {height: 100%; padding-right: 1.3rem; overflow-x: hidden; overflow-y: auto;}
.office-search-result-list::-webkit-scrollbar {
	width: 7px;
}
.office-search-result-list::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0.1);
	border-radius: 7px
}
.office-search-result-list::-webkit-scrollbar-thumb {
	background-color: #404040;
	border-radius: 7px
} 
.office-search-result-item{position: relative; }
.office-search-result-item + .office-search-result-item{margin-top: 0.5rem;}
.office-search-result-item .inner {position: relative; display: block; padding: 4rem; width: 100%; background-color: #fff; border-radius: 1rem; box-sizing: border-box;}
.office-search-result-item .inner:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1rem; border: 2px solid var(--main-color); box-sizing: border-box; transition: all 0.3s; opacity: 0;}
.office-search-result-item.on .inner:before {opacity: 1;}

.office-search-result-item .tit{position: relative; margin-bottom: 2rem; padding-bottom: 2rem; padding-left: 2.5rem; font-size: 2rem; line-height: 1.3; font-weight: 700; color: #000; border-bottom: 1px solid #000;}
.office-search-result-item .tit:before {position: absolute; content: '\eb59'; font-family: xeicon; font-size: 2rem; color: #000; left: 0; top: 0; z-index: 1;}
.office-search-result-item dl{display: flex; flex-wrap:wrap;}
.office-search-result-item dl + dl{margin-top: 0.7rem;}
.office-search-result-item dt,
.office-search-result-item dd{font-size: 1.6rem; font-weight: 500; line-height: 1.375; color: #000;}
.office-search-result-item dt{width: 9.5rem;}
.office-search-result-item dd{width: calc(100% - 9.5rem);}
/* 오른쪽 */
.office-con-right{width: 69.77%; height: 65%; padding-left: 2rem; box-sizing: border-box;}

/* ****************
 * 스토어
**************** */
.store-page, .office-page {position: relative; padding-bottom: 3rem;}
.store-page-cover {display: none; position: absolute;top: 0;  left: 0;  width: 100%; height: calc(50vh + 9rem); background: transparent; z-index: 99;}
.store-con-wrap {height: 100vh; padding: 3rem 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.store-con {height: 100%; display: flex; flex-wrap:wrap; justify-content: space-between;}
/* 왼쪽  */
.store-con-left{position: relative; width: 30.23%; height: 100%;/*  background-color: #f5f5f5;  */border-radius: 1rem; box-sizing: border-box; overflow: hidden;}
.store-con-left:before {position: absolute; content: ''; width: 100%; height: 18rem; border-radius: 1rem; bottom: -9rem; left: 0; background: linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) ; opacity: 0; z-index: 1; visibility: hidden; transition: all 0.3s; transition-property: opacity, visibility;}
.store-con-left.scroll:before {opacity: 0.38; visibility: visible;}
.store-tab-wrapper-style {width: 100%; height: 60px;}
.store-tab-list-style ul {display: flex;}
.store-tab-list-style ul li {width: 50%; height: 60px;}
.store-tab-list-style ul li .store-tab {width: 100%; height: 100%; display: flex; justify-content: center; text-align: center; background: #fff;}
.store-tab-list-style ul li .store-tab em {position: relative; display: inline-flex; align-items:center; height: 100%; padding: 0 2.5rem; font-size: 1.6rem; font-weight: 700; color: #000;}
.store-tab-list-style ul li .store-tab em:before {position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #000; content: '';  transition: var(--transition-custom);transition-property: width, left;}
.store-tab-list-style ul li.selected .store-tab {background: #F5F5F5; border-radius: 1rem 1rem 0 0;}
.store-tab-list-style ul li.selected .store-tab em:before {width: 100%;left: 0;}

.store-tab-content-style {height: calc(100% - 60px); }
.store-tab-con {position: relative; padding: 5rem 0 0; height: 100%; box-sizing: border-box; background-color: #f5f5f5; overflow: hidden;}
.store-tab-con.store-tab-con01 {border-radius:  0 1rem 0 0;}
.store-tab-con.store-tab-con02 {border-radius: 1rem 0 0 0;}
.store-tab-con.tab01-active {border-radius:  0 1rem 0 0;}
.store-tab-con.tab02-active {border-radius: 1rem 0 0 0;}
.store-search-form {padding: 0 3rem;}
.store-search-form + .store-search-form{margin-top: 2rem;}
.store-search-form .tit{font-size: 1.6rem; font-weight: 700; color: #000; margin-bottom: 1rem;}
.input-button-group{/* padding: 1rem 1rem 1rem 2rem;  */width: 100%; height: 6rem; background-color: #fff; border-radius: 1rem; box-sizing: border-box; display: flex; align-items: center;}
.input-button-group .board-custom-select-box{width: 100%; height: 6rem; font-size: 1.6rem; font-weight: 500; color: #000; appearance: none; box-sizing: border-box; border: 0;}
.input-button-group .custom-select-trigger {background-color: #fff; border-radius: 1rem;  line-height: 6rem; padding: 0 1rem 0 2rem;}
.input-button-group .custom-select-trigger:after {content: '\e936';}
.input-button-group .custom-select-wrapper .custom-select.opened .custom-select-trigger {border-radius: 1rem 1rem 0 0;  }
.input-button-group .board-custom-select-box .custom-option-drop-list {border-color:#fff; background: #f2f2f2; right: 0; left: 0;/*  max-height: none;  */border-top: 0;}
.input-button-group .board-custom-select-box .custom-option-item {padding: 1rem 1rem 1rem 2rem;}
.input-button-group .board-custom-select-box .custom-option-item.selection {background: #f2f2f2; font-weight: 600;}
.input-button-group .board-custom-select-box .custom-option-item:hover ,
.input-button-group .board-custom-select-box .custom-option-item.selection:hover {background: #fff;}

.input-button-group .btn{width: 10rem; height: 4rem; font-size: 1.5rem; color: #fff; background-color: #000; border-radius: 0.6rem; margin-right: 1rem;}

.store-search-result-box{height: calc(100% - 1px - 23.6rem); margin-top: 4.5rem; padding: 0 1rem 0 3rem; position: relative;}
.store-search-reset-btn{position: absolute; top: -15px; left: 50%; margin-left: -50px; width: 100px; height: 30px; font-size: 14px; font-weight: 600; color: #000; background-color: #fff; border: 1px solid #CFCFCF; border-radius: 100px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; z-index: 10;}
.store-search-reset-btn i{position: relative; left: -0.2rem; margin-right: 0.8rem; font-weight: 400; transform: rotate(90deg)}

.store-search-result-list{position: relative; border-radius: 1rem; padding-top: 4.5rem; height: 100%;/* 위에 높이 만큼 빼기! */ overflow-x: hidden; overflow-y: auto; box-sizing: border-box; padding-right: 1.3rem;}
.store-search-result-box:before {position: absolute; content: ''; width: calc(100% - 6rem); left: 3rem; top: 0; height: 1px; background: #CFCFCF; z-index: 1;}
.store-search-result-list::-webkit-scrollbar {
	width: 7px;
}
.store-search-result-list::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0.1);
	border-radius: 7px
}
.store-search-result-list::-webkit-scrollbar-thumb {
	background-color: #404040;
	border-radius: 7px
} 
.store-search-result-item {position: relative;background: #fff; border-radius: 1rem;}
.store-search-result-item + .store-search-result-item {margin-top: 1rem;}
.store-search-result-item:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1rem; border: 2px solid var(--main-color); box-sizing: border-box; transition: all 0.3s; opacity: 0;}
.store-search-result-item.on:before {opacity: 1;}

.store-search-result-item .inner {position: relative;z-index: 1; padding: 2rem 3rem 3rem; }
.store-search-result-item .tit-box {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #000;}
.store-search-result-item .tit-box .tit {position: relative; width: calc(100% - 10rem); padding-left: 2.3rem; font-size: 2rem; color: #000; font-weight: 700; line-height: 1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-sizing: border-box;}
.store-search-result-item .tit-box .tit:before {position: absolute; content: '\eb59'; font-family: xeicon; font-size: 2rem; color: #000; left: 0; top: 0; z-index: 1;}
.store-search-result-item .tit-box .btn {position: relative; z-index: 2; display: flex; margin: 0 -0.4rem; z-index: 2;}
.store-search-result-item .tit-box .btn a {width: 4rem; height: 4rem; margin: 0 0.4rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; font-size: 1.5rem;  box-sizing: border-box;background-color: #fff;}
.store-search-result-item .tit-box .btn a.view-btn {background-color: var(--main-color); color: #fff;}
.store-search-result-item .tit-box .btn a.inquiry-btn {border: 2px solid #000; color: #000;}
.store-search-result-item .info-box {display: flex; flex-wrap: wrap; margin: -0.1rem -0.5rem; padding-top: 2rem;}
.store-search-result-item .info-box span {display: inline-block; padding-left: 1.3rem; position: relative; margin: 0.1rem 0.5rem; font-size: 1.5rem; font-weight: 500; line-height: 1.4; box-sizing: border-box;}
.store-search-result-item .info-box span:before {position: absolute; content: ''; width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; left: 0; top: 0.6rem;}
.store-search-result-item .info-box span.type01:before {background-color: var(--main-color);}
.store-search-result-item .info-box span.type02:before {background-color: #00A7FB;}
.store-search-result-item .info-box span.type03:before {background-color: #EE58FF;}
.store-search-result-item .info-box span.type04:before {background-color: #22F2B1;}
.store-search-result-item .info-box span.type05:before {background-color: #F2E422;}
/* 오른쪽 */
.store-con-right{width: 69.77%; height: 100%; padding-left: 2rem; box-sizing: border-box;}

/* ****************
 * 공통
**************** */
#map {width: 100%; height: 100%; border-radius: 1rem;}
.pac-container {display: none !important;}
@keyframes bounce-in {
  0% {
    transform: scale(0.5) translateY(50px);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) translateY(-10px);
    opacity: 1;
  }
  80% {
    transform: scale(0.95) translateY(5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.property {
  transform-origin:center; animation: bounce-in 0.6s ease;
}

/* ****************
 * 닫혀있을때 스타일
**************** */
.property {position: relative; width: auto; height: auto;}
.property .icon {width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; background: #fff; backdrop-filter: blur(15px); border:3px solid var(--main-color); border-radius: 50%;  transition: all 0.3s ease-out;}
.property .icon img {height: 30px;}

/* ****************
 * 열렸을때 스타일
**************** */
.property.highlight {width: auto; height: auto;}
.property.highlight .details {visibility: visible; opacity: 1;}
.property.highlight .icon{}

/* 내부 정보 */
.property .details {position: absolute; bottom: calc(100% + 20px); left: 50%; transform: translateX(-50%); visibility: hidden; opacity: 0; width: 280px; padding: 20px; display: flex; flex-direction: column; flex: 1; background-color: #fff; border-radius: 8px; box-shadow: 6px 6px 6px rgba(0,0,0,0.15); transition: all 0.3s ease-out; box-sizing: border-box;}
.property .details::after {position: absolute; bottom: -11px; left: 50%; margin-left: -12.5px; width: 25px; height: 12px; background: #fff; -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); clip-path: polygon(0 0, 50% 100%, 100% 0); content: "";}
.property .name{font-size: 24px; line-height: 1.3; font-weight: 700; color: #000;}
.property .address {margin-top: 10px; font-size: 14px; line-height: 1.5; color: #444;}
.property .tel {margin-top: 5px; font-size: 14px;  line-height: 1.5; color: #444;}

/* 스토어 팝업 */
.store-modal-content { position: relative; width: 96%;max-width: 600px; max-height: calc(100vh - 100px); margin: 50px auto;}
.store-modal-close-btn {position: absolute; top: -4rem; left: 50%; margin-left: -4rem; width: 8rem; height: 8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1rem solid #fff; background-color :#EEEEEE; font-size: 3.6rem; color: #000; box-sizing: border-box;} 
.store-pop-inner-box {height: 100%; padding: 6rem; background-color: #fff; border-radius: 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.store-pop-con {height: 100%;}
.store-pop-con .store-pop-tit {text-align: center; font-size:3.2rem; font-weight: 800; letter-spacing: -0.04em; color: #000; line-height: 1.2; margin-bottom: 2rem;}
.store-pop-con-inner {height: calc(100% - 5.9rem); overflow-x: hidden; overflow-y: auto;  }
.store-pop-con-inner::-webkit-scrollbar {
	width: 7px;
}
.store-pop-con-inner::-webkit-scrollbar-track {
	background-color: rgba(0,0,0,0.1);
	border-radius: 7px
}
.store-pop-con-inner::-webkit-scrollbar-thumb {
	background-color: #404040;
	border-radius: 7px
} 
.store-pop-con .store-pop-img {display: block; position: relative; width: 100%; height: 0; padding-top: 62.5%; border-radius: 2rem; overflow: hidden;  margin-bottom: 1rem;}
.store-pop-con .store-pop-img img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.store-pop-con .store-pop-info dl {padding: 3rem 0; border-bottom: 1px solid rgba(0,0,0,0.1);}
.store-pop-con .store-pop-info dl:last-of-type {border-bottom: 0; padding-bottom: 0;}
.store-pop-con .store-pop-info dl dt {font-size: 2rem; font-weight: 700; letter-spacing:-0.023em; color: #000; line-height: 1.3; padding-right: 1rem; box-sizing: border-box; margin-bottom: 1.5rem;}
.store-pop-con .store-pop-info dl dd {}
.store-pop-con .store-pop-info dl dd .txt {position: relative; padding-left: 1rem; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.024em; color: rgba(0,0,0,0.5); line-height: 1.7;}
.store-pop-con .store-pop-info dl dd .txt:before {position: absolute; content: '*'; left: 0; top: 0;}
.store-cate-list {display: flex; flex-wrap: wrap; margin: -0.3rem -1.2rem;}
.store-cate-list li {margin: 0.3rem 1.2rem; position: relative; padding-left: 1.8rem; font-size: 1.8rem; font-weight: 500; line-height: 1.6; color: #000;}
.store-cate-list li:before {position: absolute; content: ''; width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; top: 1rem; left: 0; }
.store-cate-list li.tyle01:before {background-color: var(--main-color);}
.store-cate-list li.tyle02:before {background-color: #00A7FB;}
.store-cate-list li.tyle03:before {background-color: #EE58FF;}
.store-cate-list li.tyle04:before {background-color: #22F2B1;}
.store-cate-list li.tyle05:before {background-color: #F2E422;}


@media all and (max-width:1280px){
	/* ****************
	 * 오피스
	**************** */
	.office-con-left {padding: 2rem 1rem 2rem 2rem;}
	.office-search-result-list {}
	.office-search-result-item .inner {padding: 3rem 2rem;}
	.office-search-result-item .tit {padding-bottom: 1.5rem; margin-bottom: 1.5rem;}
	.office-search-result-item dt  {width: 100%; margin-bottom: 0.3rem;  font-size: 1.4rem;}
	.office-search-result-item dd {width: 100%; font-size: 1.4rem;}

	/* ****************
	 * 스토어
	**************** */
	.store-tab-con {padding: 3rem 0 0;}
	.store-search-form {padding: 0 2rem;}
	.store-search-result-box {height: ; padding: 0 1rem 0 2rem;}
	.store-search-result-box:before {width: calc(100% - 5rem); left: 2rem;}
	.store-search-result-list {}
	.store-search-result-item .inner { padding: 2rem 2rem 7rem;}
	.store-search-result-item .tit-box {flex-direction: column-reverse;    align-items: flex-end;}
	.store-search-result-item .tit-box .tit {width: 100%; margin-top: 1rem; font-size: 1.8rem;}
	.store-search-result-item .tit-box .btn {position: absolute; bottom: 2rem; right: 2rem;}
		
	.input-button-group .btn {width: 8rem;}
}
@media all and (max-width:800px){
	/* ****************
	 * 오피스
	**************** */
	.office-con {position: relative; }
	.office-con-left {width: 100%; height: 30rem; margin-bottom: 1rem;}
	.office-search-result-list {height: calc(30rem - 4rem);}
	.office-con-right { position: relative;  width: 100%;padding-left: 0;  height: 0;  padding-top: 100%; padding-left: 0;}

	/* ****************
	 * 스토어
	**************** */
	.store-con-wrap {height: auto;}
	.store-con {position: relative; }
	.store-con-left {width: 100%; height: 56rem; margin-bottom: 1rem;}
	.store-con-right {position: relative; width: 100%; padding-left: 0; height: 0; padding-top: 100%;}
	.store-search-result-box { margin-top: 3.5rem;height: calc(100% - 1px - 22.6rem);}
	.store-search-result-list {padding-top: 3.5rem; }

	#map {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

	/* 스토어 팝업 */
	.store-modal-close-btn {width: 6rem;height: 6rem; top: -3rem; margin-left: -3rem; font-size:3rem;}
	.store-pop-inner-box { padding: 3.5rem 3rem 3rem;}
	.store-pop-con .store-pop-tit {font-size: 2.8rem;}
	.store-pop-con .store-pop-info dl dt {font-size: 2rem;}
	.store-pop-con .store-pop-info dl dd {}
	.store-cate-list li {font-size: 1.6rem;}
	.store-cate-list li:before {top: 0.8rem;}
	.store-pop-con .store-pop-info dl dd .txt {font-size: 1.6rem;}
}


/* ****************** 02 H 파트너스 :: 02 엔드 이펙터 ********************** */
/* 상단 필터 */
.effector-filter-con {padding-bottom: 1rem; border-bottom: 2px solid #000;}
.effector-filter-con .cm-btn-controls button, 
.effector-filter-con .cm-btn-controls a {max-width: 19.5rem;}
.sub-wrap .effector-filter-con .cm-fill-btn:before {    border: 2px solid #000;}
.effector-filter-con .tit {display: block; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.4; margin-bottom: 2.5rem;}
.effector-filter-box {border-radius: 1rem; background: #F5F5F5; padding: 4rem 5.2rem; margin-bottom: 4rem; box-sizing: border-box;}
.effector-filter-list {display: flex; padding: 1.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.05);}
.effector-filter-list:last-of-type {border-bottom: 0;}
.effector-filter-list dt {width: 11rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.25;}
.effector-filter-list dd {width: calc(100% - 11rem);}
.effector-filter-list dd .filter-list {display: flex; flex-wrap: wrap; margin: -0.5rem -1.5rem;}
.effector-filter-list dd .filter-list li {margin: 0.5rem 1.5rem;}
.effector-filter-list dd .filter-list li input {display: none;}
.effector-filter-list dd .filter-list li label {position: relative; padding-left: 2.5rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.8; color: rgba(0,0,0,0.3);}
.effector-filter-list dd .filter-list li label:before {position: absolute; top: -0.1rem; left: 0; content: ''; width: 2rem; height: 2rem; border: 2px solid #000;  box-sizing: border-box;}
.effector-filter-list dd .filter-list li label:after {position: absolute; top: -0.3rem; left: -0.2rem; content: '\e929'; font-family: xeicon; font-size: 2.4rem; line-height: 2.4rem; color: #fff; opacity: 0; font-weight: 400;} 
.effector-filter-list dd .filter-list li input:checked + label {color:#000;}
.effector-filter-list dd .filter-list li input:checked + label:before {background: #000;}
.effector-filter-list dd .filter-list li input:checked + label:after {opacity: 1;}

/* 리스트페이지 */
.effector-con {padding-top: 4.5rem;}
.effector-con .bbs-no-list {border-top: 1px solid #000;}
.effector-list {display: flex; flex-wrap: wrap; margin: -2rem; padding-bottom: 4rem;}
.effector-list li {width: calc(25% - 4rem); margin: 2rem;}
.effector-list li a {display: block; width: 100%; height: 100%; border-radius: 1rem; border: 2px solid #F5F5F5; background-color: #F5F5F5; box-sizing: border-box;}
.effector-list li a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 1rem 1rem 0 0; background-color:#fff; overflow: hidden;}
.effector-list li a .txt-box {border-radius: 0 0 1rem 1rem; padding: 4rem;}
.effector-list li a .txt-box .category {display: block; font-size: 1.6rem; letter-spacing:-0.01em; color: var(--main-color); line-height: 1.2; margin-bottom: 1.5rem;}
.effector-list li a .txt-box .tit {font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.effector-list li a .txt-box .txt {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; color: rgba(0,0,0,0.5); line-height: 1.6; margin-top:1.5rem ;}

@media all and (max-width:1280px){
	.effector-list li {width: calc(33.33% - 4rem);}
}
@media all and (max-width:800px){
	.effector-filter-box {padding: 4rem;}
	.effector-filter-list {flex-wrap: wrap;}
	.effector-filter-list dt {width: 100%; padding-bottom: 2rem;}
	.effector-filter-list dd {width: 100%;}

	.effector-list {margin: -1rem;}
	.effector-list li {width: calc(50% - 2rem); margin: 1rem;}
	.effector-list li a .txt-box {padding: 2.5rem 2rem;}
}
@media all and (max-width:480px){
	.effector-list li {width: calc(100% - 2rem); }
}


/* 뷰페이지 */
.effector-view-top {display: flex; padding: 8rem 0 4.5rem; border-bottom: 1px solid #000;}
.effector-view-info-con {width: calc(100% - 40rem); padding-right: 20rem; box-sizing: border-box;}
.effector-view-info-con .category {display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--main-color); line-height: 1.7; margin-bottom: 2rem;}
.effector-view-info-con .tit {font-size: 5.6rem; font-weight: 700; letter-spacing: -0.04em; color: #000; line-height: 1.125;}
.effector-view-info-con .txt {font-size: 2rem; font-weight: 400; letter-spacing: -0.01em; color: rgba(0,0,0,0.5); line-height: 1.3; margin-top: 2rem;}
.effector-view-info-con .btn-box {display: flex; margin: 0 -1rem; padding-top: 6rem;}
.effector-view-info-con .btn-box a {display: flex; align-items: center; justify-content: center; text-align: center; width: calc(50% - 2rem); margin: 0 1rem; max-width: 24rem; height: 6rem;  border-radius: 4rem; font-size: 1.6rem;letter-spacing: -0.036em; box-sizing: border-box;}
.effector-view-info-con .btn-box a:before {border: 2px solid #000; border-radius: 4rem;}
.effector-view-info-con .btn-box a em { font-weight: 600; }
.effector-view-info-con .btn-box .inquiry-btn {background-color: #000; color: #fff;}
.effector-view-info-con .btn-box .inquiry-btn:hover {color: #000;}
.effector-view-info-con .btn-box .link-btn {color: #000;}
.effector-view-info-con .btn-box .link-btn i {position: relative; font-size: 2.4rem; margin-left: 1rem; z-index: 1;    transition: var(--transition-custom);}
.effector-view-info-con .btn-box .link-btn .cm-fill {background: #000;}
.effector-view-info-con .btn-box .link-btn:hover {color: #fff;}
.effector-view-info-con .btn-box .link-btn:hover i {color: #fff;}

.effector-view-img-con {width: 40rem;}
.effector-view-img-list {width: 40rem; height: 40rem;}
.effector-view-img-list li span {display: block; position: relative; width: 100%; height: 0; padding-top: 100%; background: #F5F5F5; }
/* .effector-view-img-list li span img {    mix-blend-mode: multiply; } */
.effector-view-img-control {display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem;}
.effector-view-img-control .count-box span {position: relative; /* width: 2.5rem;  */display: inline-block; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.036em; color: #DDDDDD; padding: 0 0.7rem;}
.effector-view-img-control .count-box span em {font-weight: 700;}
.effector-view-img-control .count-box .cur-num {padding-left: 0;}
.effector-view-img-control .count-box .total-num {padding-right: 0;}
.effector-view-img-control .count-box .cur-num em {color: #000;}
.effector-view-img-control .count-box .cur-num:before {position: absolute; content: '/'; color: #DDDDDD; right: -0.2rem; top: -0.1rem;}
.effector-view-img-control .arrow-box button {font-size: 4.8rem; color: #DDDDDD; transition : all 0.4s;}
.effector-view-img-control .arrow-box button:hover {color: #000;}
.effector-view-con {padding: 10rem 0; border-bottom: 1px solid #000;}
.effector-view-con-tit {text-align: center; font-size: 3.2rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.4; margin-bottom: 8rem;}
.effector-view-con.effector-spec .effector-view-con-tit  {margin-bottom: 4rem;}

.effector-desc-con {display: flex;}
.effector-desc-con + .effector-desc-con {padding-top: 8rem;}
.effector-desc-con .effector-desc-tit {width: 14.24%; padding-right: 1rem; box-sizing: border-box;}
.effector-desc-con .effector-desc-tit strong {font-size: 2.4rem; letter-spacing: -0.04em; color: #000; line-height: 1.625; }
.effector-desc-con .effector-desc-txt {width: 85.76%; } 
.effector-desc-con .effector-desc-txt .txt {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.01em; color: rgba(0,0,0,0.5); line-height: 1.875;}

.effector-spec-con + .effector-spec-con {padding-top: 6rem;}
.effector-spec-con .effector-spec-tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.035em; color: #000; line-height: 1.4; margin-bottom: 2rem;}
.effector-spec-con .editor-table-box img {height: auto !important;}
.effector-spec-tbl {width: 100%;}
.effector-spec-tbl thead th {border-top: 1px solid #000000;}
.effector-spec-tbl thead th,
.effector-spec-tbl tbody th,
.effector-spec-tbl tbody td {font-size: 1.5rem; font-weight: 400; letter-spacing: -0.024em; color: #000; line-height: 1.3; text-align: left; padding: 1.5rem 2rem; border-bottom: 1px solid #000;}
.effector-spec-tbl thead th,
.effector-spec-tbl tbody th {background: rgba(0,0,0,0.1); font-weight: 600;}

.effector-img-con .img {text-align: center;}
.effector-img-con .img + .img {margin-top: 4rem;}
.effector-img-con .img img {max-width: 100%;}

.effector-view-bottom {padding: 8rem 0; text-align: center;}
.effector-view-bottom .link-btn {/* width: 100%;  */ min-width: 48rem; padding: 0 3rem; display: inline-flex; align-items: center; justify-content: center; height: 6rem; margin: 0 auto; border-radius: 4rem; background: #000000; margin: 0 auto; font-size: 1.6rem; font-weight: 600; letter-spacing:-0.036em; color: #fff; line-height: 1.3; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.effector-view-bottom .link-btn:before { border-radius: 4rem !important;}
.effector-view-bottom .link-btn i {position: relative; z-index: 1; margin-left: 1rem; font-size: 2.4rem; color: #fff; transition: var(--transition-custom);}
.effector-view-bottom .link-btn strong {font-weight: 600; position: relative; z-index: 1; }
.effector-view-bottom .link-btn strong em {font-weight: 600;}
.effector-view-bottom .link-btn:hover i {color: #000;}
.effector-view-bottom .link-btn:hover .cm-fill {width: 60vw; height: 60vw; }

@media all and (max-width:1280px){
	.effector-view-info-con {padding-right: 10rem;}
}
@media all and (max-width:800px){
	.effector-view-top {flex-direction: column;}
	.effector-view-img-con {width: 100%; }
	.effector-view-img-list  {margin: 0 auto;}
	.effector-view-info-con {width: 100%; padding-right: 0; margin-bottom: 5rem;}
	.effector-view-info-con .tit {font-size: 4rem;}
	.effector-view-info-con .btn-box { padding-top: 5rem; margin: 0 -0.5rem;}
	.effector-view-info-con .btn-box a { width: calc(50% - 1rem); margin: 0 0.5rem; max-width: none;}

	.effector-view-con {}
	.effector-view-con-tit {margin-bottom: 6rem;}
	.effector-desc-con {flex-wrap: wrap;}
	.effector-desc-con + .effector-desc-con {padding-top: 6rem;}
	.effector-desc-con .effector-desc-tit {width: 100%; padding-right: 0; padding-bottom: 1rem;}
	.effector-desc-con .effector-desc-txt {width: 100%;}
	
	.effector-view-bottom .link-btn {min-width: 0; width: 100%;}
}
@media all and (max-width:800px){
	.effector-view-img-list  {width: 100%; height: 100%;}
}


/* ****************** 05 회사소개 :: 한화로보틱스 소개 ********************** */
.company-intro-page {margin-top: calc(-1*(var(--header-height) + var(--sub-menu-height) + 4rem));}
/* 소개 */
#introTop { width: 100%;}
.company-intro-top {position: relative; width: 100%; overflow: hidden;}
.company-intro-top .intro-top-bg {position: fixed; top: 0; width: 100%; height: 100vh; overflow: hidden;}
.company-intro-top .intro-top-bg.no-fixed {position: absolute; }
.company-intro-top .intro-top-bg span{display: block; position: absolute; top:0; left:0; width:100%; height:100%; filter: blur(0); transition: all 0.4s ease-in-out;}
.company-intro-top .intro-top-bg span img{height:100%; width:100%; object-fit: cover;}

.intro-con01 {position: relative; width: 100%; height: 100vh; box-sizing: border-box;}
.intro-con01-inner {position: absolute; left: 50%; top: 50%; width: 81%; margin-top: -12rem; margin-left: -40.5%;}
.intro-con01-inner .intro-con01-tit{position: relative; font-size:8.4rem; line-height:1.13; font-weight:700; color:#fff; transition:all 1.3s ease-in-out; opacity:0; letter-spacing:0.2em; white-space:nowrap; }
.intro-con01-inner .intro-con01-tit .txt-effect{position: absolute; top:0; left:0; content:attr(data-label); display: block; height:100%; filter:blur(5px);  overflow:hidden; white-space:nowrap; transition:width 0s ease-in-out; transition-delay:0s; width:0; z-index: -1;}
.intro-con01-inner .intro-con01-tit .txt-effect em{position: absolute; top:0; left:0; font-weight:inherit; font-style:inherit; white-space:nowrap;color: var(--main-color);}
.intro-con01-inner .intro-con01-txt {font-size: 2rem; font-weight: 500; opacity:0; letter-spacing:0.2em; color: #fff; line-height: 1.7; margin-top: 4rem; text-align: center; transition: 1.3s ease-in-out;}
/* ar / al */
.intro-con01-inner .intro-con01-tit.cm-al{transform:translateX(-40%);}
.intro-con01-inner .intro-con01-tit.cm-ar{transform:translateX(40%);}
.intro-con01-inner .intro-con01-tit.cm-ar .txt-effect,
.intro-con01-inner .intro-con01-tit.cm-ar .txt-effect em{right:0; left:auto;}

.company-intro-top.active .intro-con01-inner .intro-con01-tit .txt-effect {width:100%; transition-delay:0s;}
.company-intro-top.active .intro-con01-inner .intro-con01-tit.cm-al{transform:translateX(0%); opacity:1; letter-spacing:-0.02em;}
.company-intro-top.active .intro-con01-inner .intro-con01-tit.cm-ar{transform:translateX(0%); opacity:1; letter-spacing:-0.02em;}
.company-intro-top.active .intro-con01-inner .intro-con01-txt {opacity:1; letter-spacing:-0.02em;}

.company-intro-top.active .intro-con01-inner.hide .intro-con01-tit .txt-effect {width:0; transition-delay:0.3s;}
.company-intro-top.active .intro-con01-inner.hide .intro-con01-tit.cm-al{transform:translateX(-40%); opacity:0; letter-spacing:0.2em}
.company-intro-top.active .intro-con01-inner.hide .intro-con01-tit.cm-ar{transform:translateX(40%); opacity:0; letter-spacing:0.2em}
.company-intro-top.active .intro-con01-inner.hide .intro-con01-txt {opacity:0; letter-spacing:0.2em}

.intro-con02 {position: relative; width: 100%; height: 100vh; display: flex; align-items: center;}
.intro-con02-inner { position: relative; }
.intro-con02-inner .txt-top {}
.intro-con02-inner .sub-tit {display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--main-color); line-height: 1.86;}
.intro-con02-inner .intro-con02-txt {position: relative; z-index: 1; }
.intro-con02-inner .intro-con02-txt.m-ver {display: none;}
.intro-con02-inner .intro-con02-txt .text{position:relative; font-size: 5.4rem; line-height: 1.48; letter-spacing: -0.02em; font-weight: 700; color: rgb(255, 255, 255, 0.25); background: linear-gradient(to right, #fff, #fff) no-repeat;  -webkit-background-clip: text;  background-clip: text; background-size: 0%;}
/* .intro-con02-inner .intro-con02-txt .text.active {background-position-x: 0%;} */
.intro-con02-inner .txt-bottom {opacity: 0; margin-top: 9rem; transition: all 0.4s ease-in-out}
.intro-con02-inner .txt-bottom .txt {width: 50%; margin: 0 0 0 auto; padding-right: 1rem; box-sizing: border-box; font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; color: rgba(255,255,255,0.4); line-height: 1.7;}


#introBottom {position: relative; /* z-index: 2; */}

.intro-con03 {padding: 30rem 0 25rem;}
.intro-con03-list {display: flex; margin: 0 -3rem;}
.intro-con03-list .intro-con03-item {position: relative; width: calc(33.333% - 6rem); margin: 0 3rem; height: 60rem; border-radius: 2.5rem; overflow: hidden;}
.intro-con03-item1 {top: 29rem; background: url(../images/content/intro_vision_img01.jpg)no-repeat center/cover;}
.intro-con03-item2 {top: 20rem; background: url(../images/content/intro_vision_img02.jpg)no-repeat center/cover;}
.intro-con03-item3 {top: 41rem; background: url(../images/content/intro_vision_img03.jpg)no-repeat center/cover;}

.intro-con03-item .intro-con03-txt {padding: 5rem; width: 100%; box-sizing: border-box;}
.intro-con03-item .intro-con03-txt .tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.3; margin-bottom: 3rem; }
.intro-con03-item .intro-con03-txt dl dt {position: relative; padding-left: 3.5rem; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.2;}
.intro-con03-item .intro-con03-txt dl dt:before {position: absolute; content: '\e92b'; font-family: xeicon; font-size: 2.4rem; color: var(--main-color); left: 0; top: 0;}
.intro-con03-item .intro-con03-txt dl dd {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); line-height: 1.8; margin-top: 2rem;}

.company-intro-bottom {}
.intro-con04 {padding: 16rem 0 20rem;}
.intro-tit-box {text-align: center;}
.intro-tit-box .intro-sub-tit {display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--main-color); margin-bottom: 2rem;}
.intro-tit-box .intro-tit {font-size: 6.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.3;} 
.intro-con04 .intro-tit-box {margin-bottom: 10rem;}
.intro-value-con {position: relative;} 
.intro-value-list {display: flex; flex-wrap: wrap;}
.intro-value-list li {position: relative; width: 20%; background: rgba(255, 255, 255, 0.01);backdrop-filter: blur(2rem); transition: all 0.8s ease-in-out; transition-property: transform;}
.intro-value-list li.list01 {border-radius: 2rem 0 0 2rem;}
.intro-value-list li.list05 {border-radius: 0 2rem 2rem 0;}
.intro-value-list li:after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border-radius: 2rem; background: var(--main-color); opacity: 0; transition: all 0.3s;}
.intro-value-list li .inner {position: relative; width: 100%; height: 100%; z-index: 1; padding: 6rem 3rem 12rem; box-sizing: border-box; text-align: center; opacity: 0; transition: all 0.8s ease-in-out; transition-property: opacity;}
.intro-value-list li .inner .icon {position: relative; display: inline-block; width: 80px; height: 80px; margin: 0 auto 4.5rem;}
.intro-value-list li .inner .icon svg {width: 100%; height: 100%;}
.intro-value-list li .inner .icon svg .cls01 {fill: var(--main-color);}
.intro-value-list li .inner .icon svg .cls02 {fill: var(--main-color); opacity: 0.5;}
.intro-value-list li .inner .icon .intro-value-icon01 path {transform-origin: center;}
.intro-value-list li .inner .icon .intro-value-icon02 .path01{transform-origin: center;  transform-box: fill-box;}

.intro-value-list li .inner .icon .intro-value-icon04 .circle {transform-origin:  top center; transform-box: fill-box;  stroke: var(--main-color);}
.intro-value-list li .inner .icon .intro-value-icon05 .ellipse {transform-origin: center; transform-box: fill-box; stroke: var(--main-color);}

.intro-value-list li .inner dl dt {font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.6;}
.intro-value-list li .inner dl dd {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; color: rgba(255,255,255,0.5); line-height: 1.8;}
.intro-value-list li .inner strong {position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); line-height: 7rem; font-size: 6rem; color: rgba(243, 115, 33, 0.2); transition: all 0.3s;}
/* active */
.intro-value-list.active li .inner{opacity: 1;}
@media all and (min-width:801px){
	.intro-value-list.active li .inner {animation: flipAni 0.8s linear both;}
	.intro-value-list.active li.list02 .inner {animation-delay:0.2s;}
	.intro-value-list.active li.list03 .inner {animation-delay:0.4s;}
	.intro-value-list.active li.list04 .inner {animation-delay:0.6s;}
	.intro-value-list.active li.list05 .inner {animation-delay:0.8s;}
}

@keyframes flipAni {
	0% {
		transform: rotateY(0);
	}
	100% {
		transform: rotateY(360deg);
	}
}
/* on */
.intro-value-list li.on:after {opacity: 1;}
.intro-value-list li.on .inner .icon svg .cls01 {fill: #fff;}
.intro-value-list li.on .inner .icon svg .cls02 {fill: #fff;}
.intro-value-list li.on .inner .icon .intro-value-icon04 .circle {stroke: #fff;}
.intro-value-list li.on .inner .icon .intro-value-icon05 .ellipse {stroke: #fff;}
.intro-value-list li.on strong {color: #fff;}

/* on-active */
.intro-value-list.on-active li .inner .icon .intro-value-icon01 {animation: valueIcon05 12.0s linear infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon01 .path01 {animation: valueIcon01Ani01 4.0s ease infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon01 .path02 {animation: valueIcon01Ani02 4.0s ease infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon01 .path03 {animation: valueIcon01Ani03 4.0s ease infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon01 .path04 {animation: valueIcon01Ani04 4.0s ease infinite}

.intro-value-list.on-active li .inner .icon .intro-value-icon02 {animation: valueIcon05 4.0s ease-in-out infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon02 .path01 {animation: valueIcon02 4.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon02 .path02 {animation: valueIcon02Ani01 4.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon02 .path03 {animation: valueIcon02Ani02 4.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon02 .path04 {animation: valueIcon02Ani03 4.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon02 .path05 {animation: valueIcon02Ani04 4.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite}

.intro-value-list.on-active li .inner .icon .intro-value-icon03 {animation: valueIcon03 12.0s linear infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path01 {animation: valueIcon03Ani01 6.0s ease infinite;}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path02 {animation: valueIcon03Ani02 6.0s ease infinite; animation-delay: 0.2s;}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path03 {animation: valueIcon03Ani03 6.0s ease infinite; animation-delay: 0.4s;}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path04 {animation: valueIcon03Ani04 6.0s ease infinite; animation-delay: 0.6s;}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path05 {animation: valueIcon03Ani05 6.0s ease infinite; animation-delay: 0.8s;}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path06 {animation: valueIcon03Ani06 6.0s ease infinite; animation-delay: 1.0s;}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path07 {animation: valueIcon03Ani07 6.0s ease infinite; animation-delay: 1.2s;}
.intro-value-list.on-active li .inner .icon .intro-value-icon03 .path08 {animation: valueIcon03Ani08 6.0s ease infinite; animation-delay: 1.4s;}

.intro-value-list.on-active li .inner .icon .intro-value-icon04 .circle02 {animation: valueIcon04Ani01 4.0s linear infinite;}
.intro-value-list.on-active li .inner .icon .intro-value-icon04 .circle03 {animation: valueIcon04Ani02 4.0s linear infinite;}
.intro-value-list.on-active li .inner .icon .intro-value-icon04 .circle04 {animation: valueIcon04Ani03 4.0s linear infinite;}
.intro-value-list.on-active li .inner .icon .intro-value-icon04 .circle05 {animation: valueIcon04Ani04 4.0s linear infinite;}

.intro-value-list.on-active li .inner .icon .intro-value-icon05 {animation: valueIcon05 4.0s ease-in-out infinite}
.intro-value-list.on-active li .inner .icon .intro-value-icon05 .ellipse01  {animation: valueIcon05Ani01 3.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite;}
.intro-value-list.on-active li .inner .icon .intro-value-icon05 .ellipse02  {animation: valueIcon05Ani02 3.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite;}
.intro-value-list.on-active li .inner .icon .intro-value-icon05 .ellipse03  {animation: valueIcon05Ani03 3.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite;}
.intro-value-list.on-active li .inner .icon .intro-value-icon05 .ellipse04  {animation: valueIcon05Ani04 3.0s cubic-bezier(0.42, 0, 0.27, 1.06) infinite;}

@keyframes valueIcon01Ani01 {
	0% {transform:translate(394px, 3434px) rotate(0deg);}
	30% {transform:translate(394px, 3434px) rotate(0deg);}
	100% {transform:translate(394px, 3434px) rotate(180deg);}
}
@keyframes valueIcon01Ani02 {
	0% {transform:translate(394px, 3434px) rotate(0deg);}
	30% {transform:translate(394px, 3434px) rotate(45deg);}
	100% {transform:translate(394px, 3434px) rotate(180deg);}
}
@keyframes valueIcon01Ani03 {
	0% {transform:translate(394px, 3434px) rotate(0deg);}
	30% {transform:translate(394px, 3434px) rotate(90deg);}
	100% {transform:translate(394px, 3434px) rotate(180deg);}
}
@keyframes valueIcon01Ani04 {
	0% {transform:translate(394px, 3434px) rotate(0deg);}
	30% {transform:translate(394px, 3434px) rotate(135deg);}
	100% {transform:translate(394px, 3434px) rotate(180deg);}
}

@keyframes valueIcon02 {
	0% {transform: translate(-5.947px, -7.353px) scale(1);}
	50% {transform: translate(-5.947px, -7.353px) scale(0);}
	100% {transform: translate(-5.947px, -7.353px) scale(1);}
}
@keyframes valueIcon02Ani01 {
	0% {transform: translate(0.59px, 0px);}
	50% {transform: translate(0.59px, 36px);}
	100% {transform: translate(0.59px, 0px);}
}
@keyframes valueIcon02Ani02 {
	0% {transform: translate(0.59px, 1.18px);}
	50% {transform: translate(0.59px, -34.82px);}
	100% {transform: translate(0.59px, 1.18px);}
}
@keyframes valueIcon02Ani03 {
	0% {transform: translate(1.18px, 0.59px);}
	50% {transform: translate(-34.82px, 0.59px);}
	100% {transform: translate(1.18px, 0.59px);}
}
@keyframes valueIcon02Ani04 {
	0% {transform: translate(0px, 0.59px);}
	50% {transform: translate(36px, 0.59px);}
	100% {transform: translate(0px, 0.59px);}
}

@keyframes valueIcon03 {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg);}
}
@keyframes valueIcon03Ani01 {
	0% {transform: translate(6.1px, -59.798px);}
	20% {transform: translate(-7.9px, 9.202px);}
	40% {transform: translate(-7.9px, 9.202px);}
	60% {transform: translate(6.1px, -59.798px);}
	100% {transform: translate(6.1px, -59.798px);}
}
@keyframes valueIcon03Ani02 {
	0% {transform: translate(55.242px, -43.042px);}
	20% {transform: translate(-8.758px, 0.958px);}
	40% {transform: translate(-8.758px, 0.958px);}
	60% {transform: translate(55.242px, -43.042px);}
	100% {transform: translate(55.242px, -43.042px);}
}
@keyframes valueIcon03Ani03 {
	0% {transform: translate(12.201px, 6.101px);}
	20% {transform: translate(-56.799px, -7.899px);}
	40% {transform: translate(-56.799px, -7.899px);}
	60% {transform: translate(12.201px, 6.101px);}
	100% {transform: translate(12.201px, 6.101px);}
}
@keyframes valueIcon03Ani04 {
	0% {transform: translate(55.242px, 56.242px);}
	20% {transform: translate(13.242px, -8.758px);}
	40% {transform: translate(13.242px, -8.758px);}
	60% {transform: translate(55.242px, 56.242px);}
	100% {transform: translate(55.242px, 56.242px);}
}
@keyframes valueIcon03Ani05 {
	0% {transform: translate(6.1px, 71.999px);}
	20% {transform: translate(20px, 2.999px);}
	40% {transform: translate(20px, 2.999px);}
	60% {transform: translate(6.1px, 71.999px);}
	100% {transform: translate(6.1px, 71.999px);}
}
@keyframes valueIcon03Ani06 {
	0% {transform: translate(-43.041px, 13.958px);}
	20% {transform: translate(20.959px, -29.042px);}
	40% {transform: translate(20.959px, -29.042px);}
	60% {transform: translate(-43.041px, 13.958px);}
	100% {transform: translate(-43.041px, 13.958px);}
}
@keyframes valueIcon03Ani07 {
	0% {transform: translate(0px, 6.101px);}
	20% {transform: translate(69px, 20.101px);}
	40% {transform: translate(69px, 20.101px);}
	60%  {transform: translate(0px, 6.101px);}
	100% {transform: translate(0px, 6.101px);}
}
@keyframes valueIcon03Ani08 {
	0% {transform: translate(-43.041px, -0.758px);}
	20% {transform: translate(-0.04px, 61.242px);}
	40% {transform: translate(-0.04px, 61.242px);}
	60% {transform: translate(-43.041px, -0.758px);}
	100% {transform: translate(-43.041px, -0.758px);}
}

@keyframes valueIcon04Ani01 {
	0% {transform: translate(7px, -0.101px) scale(1.0); opacity: 0.6;}
	20% {transform: translate(7px, -0.101px) scale(1.2); opacity: 0;}
	25% {transform: translate(7px, -0.101px) scale(0);opacity: 0.15;}
	100% {transform: translate(7px, -0.101px) scale(1.0);opacity: 0.6;}
}
@keyframes valueIcon04Ani02 {
	0% {transform: translate(14px, -0.101px) scale(1.0); opacity: 0.4;}
	30% {transform: translate(14px, -0.101px) scale(1.5); opacity: 0;}
	35% {transform: translate(14px, -0.101px) scale(0);opacity: 0.15;}
	100% {transform: translate(14px, -0.101px) scale(1.0);opacity: 0.4;}
}
@keyframes valueIcon04Ani03 {
	0% {transform: translate(20px, -0.101px) scale(1.0); opacity: 0.3;}
	50% {transform: translate(20px, -0.101px) scale(2.0); opacity: 0;}
	55% {transform: translate(20px, -0.101px) scale(0);opacity: 0.15;}
	100% {transform: translate(20px, -0.101px) scale(1.0);opacity: 0.3;}
}
@keyframes valueIcon04Ani04 {
	0% {transform: translate(29px, -0.101px) scale(1.0); opacity: 0.15;}
	70% {transform: translate(29px, -0.101px) scale(3.47); opacity: 0;}
	75% {transform: translate(29px, -0.101px) scale(0);opacity: 0.15;}
	100% {transform: translate(29px, -0.101px) scale(1.0);opacity: 0.15;}
}

@keyframes valueIcon05 {
	0% { transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes valueIcon05Ani01 {
	0% {transform: translate(-0.358px, 0.398px);}
	50%{transform: translate(-0.358px, 18.898px);} 
	100% {transform: translate(-0.358px, 0.398px);}
}
@keyframes valueIcon05Ani02 {
	0% {transform: translate(-0.358px, 37.398px);}
	50%{transform: translate(-0.358px, 18.898px);}
	100% {transform: translate(-0.358px, 37.398px);}
}
@keyframes valueIcon05Ani03 {
	0% {transform: translate(0.398px, -0.357px);}
	50%{transform: translate(18.898px, -0.357px);} 
	100% {transform: translate(0.398px, -0.357px);}
}
@keyframes valueIcon05Ani04 {
	0% {transform: translate(37.398px, -0.357px);}
	50%{transform: translate(18.898px, -0.357px);} 
	100% {transform: translate(37.398px, -0.357px);}
}

.intro-con05 {position: relative; padding: 10rem 0 15rem;}
.intro-con05 .intro-tit-box {}
.intro-mentality-wrap {margin-top: 12rem; position: relative;}
.intro-mentality-list {position: relative; width: 100%;}
.intro-mentality-list .intro-mental-item {position: sticky; top: calc(((100vh - 65rem + var(--sub-menu-height) + 20px)/2)); left: 0; width: 100%; height: 65rem; transform-origin: top;}
.intro-mental-item + .intro-mental-item{margin-top: 30rem;}
.intro-mental-item .intro-mental-inner {position: relative; width: 100%; height: 65rem;border-radius: 3rem; transform: translateY(0rem);}
.intro-mental-item .intro-mental-inner .inner {position: relative; width: 100%; height: 65rem; border-radius: 3rem;}
.intro-mental-item .intro-mental-basis, 
.intro-mental-item .intro-mental-bg { position: absolute;top: 0;  left: 0; width: 100%; height: 65rem;  border-radius: 3rem; opacity: 1; /*  transform: scaleX(1.1); */ display: block; overflow: hidden;}
.intro-mental-item .intro-mental-bg span {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: scale(1.12); transition:transform 0.8s ease-in-out; }
.intro-mental-item.active-item .intro-mental-bg span {transform:  scale(1.0);}
.intro-mental-item .intro-mental-txt {position: absolute; top:80%; left: 0; width: 100%; text-align: center; box-sizing: border-box; opacity: 1.0;}
.intro-mental-item .intro-mental-txt dt {font-size: 8rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.1;}
.intro-mental-item .intro-mental-txt dt b {font-weight: 600; color: var(--main-color);}
.intro-mental-item .intro-mental-txt dd {font-size: 2.4rem; font-weight: 500; letter-spacing: -0.01em; color: #fff; line-height: 1.25; padding-top: 1rem;}

#introMiddle {position: relative; width: 100%; height: 91vh;}
.intro-con06 {position: relative; width: 100%; height: 100%;}
.intro-con06 .intro-video-wrap {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 100%;}
.intro-video-wrap .video-iframe-box {position:relative; overflow:hidden; height:91vh; width:100%;  background:#000;}
.intro-video-wrap .video-iframe-box iframe {width: calc(100vw + 120px);height: calc(56.25vw + 300px); min-height: calc(92vh + 300px);min-width: 177.77vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.intro-video-wrap .video-cover-box {position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; overflow: hidden; cursor: pointer;}
.intro-video-wrap .video-cover-box .thumb { display: block;  position: relative; width: 100%; height: 100%;  -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s;  -ms-transition: all 0.4s; transition: all 0.4s;}
.intro-video-wrap .video-cover-box .thumb:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: transparent linear-gradient(270deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box; opacity: 0.5;}
.intro-video-wrap .video-cover-box .thumb img {position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100vw; /* height: 100%;  */}
.intro-video-wrap .btn-cover {  position: absolute; top: 50%; left: 50%;z-index: 10; margin-left: -6.4rem; margin-top: -6.4rem; width: 12.6rem; height: 12.6rem; z-index: 1;}
.intro-video-wrap .btn-cover button {font-size: 12.6rem; color: #fff; }

@media all and (max-width:1280px){
	.intro-con01-inner .intro-con01-tit {font-size: 6.4rem;}
	.intro-con02-inner .intro-con02-txt .text {font-size: 4.4rem;}
	
	#introMiddle {height: 61vh;}
	.intro-video-wrap .video-iframe-box {height: 61vh;}
	
	.intro-con03 {padding: 20rem 0;}
	.intro-con03-list .intro-con03-item {height: 51rem;}
	.intro-con03-item1 {top: 27rem; }
	.intro-con03-item2 {top: 20rem;}
	.intro-con03-item3 {top: 41rem; }
	.intro-con03-item .intro-con03-txt {padding: 4rem;}

	.intro-mentality-list .intro-mental-item {    top: calc(((100vh - 46rem + var(--sub-menu-height) + 20px) / 2)); height: 46rem;}
	.intro-mental-item .intro-mental-inner ,
	.intro-mental-item .intro-mental-inner .inner {height: 46rem;}
	.intro-mental-item .intro-mental-basis, 
	.intro-mental-item .intro-mental-bg {height: 46rem;}
}
@media all and (max-width:800px){
	.intro-tit-box .intro-tit {font-size: 4.8rem;}

	.intro-con01-inner {width: 100%;left: 0; margin-left: 0;}
	.intro-con01-inner .intro-con01-tit {font-size: 4rem;}
	.intro-con01-inner .intro-con01-txt {font-size: 1.8rem;}
	.intro-con02-inner .intro-con02-txt.pc-ver {display: none;}
	.intro-con02-inner .intro-con02-txt.m-ver {display: block;} 
	.intro-con02-inner .intro-con02-txt .text {  font-size: 3.4rem;}
	.intro-con02-inner .txt-bottom {opacity: 1 !important;  margin-top: 6rem;}
	.intro-con02-inner .txt-bottom .txt {width: 100%; padding-right: 0; font-size: 1.8rem;}

	#introMiddle {height: auto;}
	#introCon02 {position: relative; height: auto;}
	.intro-con02 {padding: 10rem 0; height: auto;}

	.intro-con03  {padding: 15rem 0 10rem; }
	.intro-con03-list {display: block; margin: 0;}
	.intro-con03-list .intro-con03-item {height: auto; width: 100%; margin: 0; margin-bottom: 2rem; }
	.intro-con03-item1 {top: 0; }
	.intro-con03-item2 {top: 0;}
	.intro-con03-item3 {top: 0; }
	.intro-con03-item .intro-con03-txt {padding:5rem 4rem 8rem;}
	.intro-con03-item .intro-con03-txt .tit {font-size: 3.2rem; }
	.intro-con03-item .intro-con03-txt dl dt {font-size: 2.2rem;}
	.intro-con03-item .intro-con03-txt dl dd {margin-top: 1rem;}

		
	.intro-tit-box .intro-tit {font-size:4rem;}
	.intro-con04 {padding: 10rem 0;}
	.intro-con04 .intro-tit-box {margin-bottom: 4rem;}
	
	.intro-value-list li {width: 100%;}
	.intro-value-list li .inner {padding: 5rem 3rem 8.5rem;}
	.intro-value-list li .inner .icon {margin: 0 auto 2.5rem;}
	.intro-value-list li .inner strong {bottom: 2.5rem; font-size: 4rem; line-height: 5rem;}

	.intro-con05 {padding: 10rem 0 0;}
	.intro-mentality-wrap {margin-top: 8rem;}
	.intro-mentality-list .intro-mental-item {position: relative; top: 0; height: 36rem;}
	.intro-mental-item + .intro-mental-item {margin-top: 2rem;}
	.intro-mental-item .intro-mental-basis, 
	.intro-mental-item .intro-mental-bg ,
	.intro-mental-item .intro-mental-inner ,
	.intro-mental-item .intro-mental-inner .inner {height: 100%;}
	.intro-mental-item .intro-mental-txt {top: 50%; transform:translateY(-50%);}
	.intro-mental-item .intro-mental-txt dt {font-size: 4.8rem;}
	.intro-mental-item .intro-mental-txt dd {font-size: 2rem;}
	.intro-mental-item4 {display: none;}

	.intro-con06-cover {display: none;}
	.intro-con06 {height: 0; padding-top: 56.28%;}
	.intro-con06 .intro-video-wrap {width: 100%; left: 0;     transform: translateX(0);}
	.intro-video-wrap .video-iframe-box {height: 100%;}
	.intro-video-wrap .video-iframe-box iframe { min-width: 0; min-height: 0;}
	.intro-video-wrap .video-cover-box .thumb:before, 
	.intro-video-wrap .video-cover-box .thumb:after {display: none;}
	.intro-video-wrap .btn-cover {width: 6.6rem; height: 6.6rem; margin-left: -3.3rem; margin-top: -3.3rem;}
	.intro-video-wrap .btn-cover button {font-size: 6.6rem;}
	/* .intro-video-wrap .background-video-wrapper  {height: 0; padding-top: 45.28%;}
	.intro-video-wrap .background-video iframe {min-width: 0; min-height: 0;} */
}
@media all and (max-width:480px){
	.intro-con01-inner .intro-con01-tit {font-size: 3rem; line-height: 1.6; transform:translateX(0) !important; text-align: center !important;}
	.intro-con01-inner .intro-con01-tit .txt-effect {line-height: 1.6;}
	.intro-con01-inner .intro-con01-tit .txt-effect,
	.intro-con01-inner .intro-con01-tit .txt-effect em{left:50% !important; right:auto !important; transform:translateX(-50%) !important;}

	.intro-mentality-list li .txt-circle .circle-inner dl dt {font-size: 2.2rem;}
	.intro-mentality-list li .txt-circle .circle-inner dl dd {padding-top: 1.3rem;}
}

/* CI */
.ci-con01 {padding: 10rem 0 12rem; }
.ci-intro-con {position: relative;}
.ci-intro-con .ci-intro-bg {position: absolute; top: 0; left: 50%; margin-left: -24rem; width: 48rem; height: 48rem; border-radius: 50%; border: 5px solid #f8f8f8; box-sizing: border-box; padding: 3.95rem;}
.ci-intro-con .ci-intro-bg span {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;  border-radius: 50%; background: #f8f8f8; }
.ci-intro-list {position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; padding-top:3.5rem;}
.ci-intro-list .ci-intro-item {display: flex; width: 50%;}
.ci-intro-list .ci-intro-item.item01 {flex-direction:row-reverse; padding-right: 9rem; box-sizing: border-box;}
.ci-intro-list .ci-intro-item.item02 { padding-left: 9rem; box-sizing: border-box;}
.ci-intro-list .ci-intro-item.item03 {width: calc(50% + 10rem); margin-top: 13.5rem;}
.ci-intro-item .ci-intro-circle {position: relative; width: 20rem; height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0.5rem solid var(--main-color); text-align: center; border-radius:50%; backdrop-filter: blur(2rem); -webkit-backdrop-filter: blur(2rem); background-color: rgba(255, 255, 255, 0.3); box-shadow: 0.5rem 0.9rem 4rem rgba(0,0,0,0.1);}
.ci-intro-item .ci-intro-circle:before {position: absolute; content: ''; top:50%; margin-top: -1px; height: 1px; width: 5.8rem; border-top: 1px dashed var(--main-color); z-index: 1;}
.ci-intro-item.item01 .ci-intro-circle:before {left: -5.8rem;}
.ci-intro-item.item02 .ci-intro-circle:before {right: -5.8rem;}
.ci-intro-item.item03 .ci-intro-circle:before {right: -24.8rem; width: 24.8rem;}
.ci-intro-item .ci-intro-circle:after {position: absolute; content: ''; top:50%; margin-top: -4px; height: 8px; width:8px;border-radius:8px; background: var(--main-color); z-index: 2;}
.ci-intro-item.item01 .ci-intro-circle:after {left: -5.8rem;}
.ci-intro-item.item02 .ci-intro-circle:after {right: -5.8rem;}
.ci-intro-item.item03 .ci-intro-circle:after {right: -24.8rem; }
.ci-intro-item .ci-intro-circle .tit-en {display: block; font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--main-color); }
.ci-intro-item.item01 .ci-intro-circle .tit-en {margin-top: 0.9rem;}
.ci-intro-item.item03 .ci-intro-circle .tit-en {margin-top: 1.3rem;}
.ci-intro-item .ci-intro-txt {position: relative; padding-top: 9.2rem; box-sizing: border-box;}
.ci-intro-item.item01 .ci-intro-txt {text-align: right; width: calc(100% - 20rem); padding-right: 7.5rem;}
.ci-intro-item.item02 .ci-intro-txt {width: calc(100% - 20rem); padding-left: 7.8rem;}
.ci-intro-item.item03 .ci-intro-txt {width: calc(100% - 20rem); padding-left: 26.8rem;}
.ci-intro-item .ci-intro-txt .tit-kr {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.2;}
.ci-intro-item .ci-intro-txt .txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; color: rgba(0,0,0,0.5); line-height: 1.625; padding-top: 1.5rem;}

.ci-con02 {}
.ci-con02 .ci-con-tit {font-size: 4rem; font-weight: 700; letter-spacing:-0.02em; color: #000; line-height: 1.2; margin-bottom: 3.5rem; text-align: center;}
.ci-info-con {padding: 4rem 4rem 0; background: #F5F5F5; border-radius: 2rem; margin-bottom: 4rem;}
.ci-logo-con {height:40rem; padding: 2rem 5rem; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 2rem;}
.ci-logo-con svg {max-width: 100%;}
.ci-color-con {padding: 0 0.5rem; box-sizing: border-box;}
.ci-color-list-con {padding: 6rem 3.5rem 4rem; box-sizing: border-box; border-bottom: 1px solid #DDDDDD;}
.ci-color-list {display: flex;}
.ci-color-list li {position: relative; width: 25%; padding: 0 1rem 0 7rem; padding-top: ; box-sizing: border-box;}
.ci-color-list li:before {position: absolute; content: ''; width: 5rem; height: 5rem; border-radius: 5rem; top: 0; left: 0; }
.ci-color-list li.color01:before {background: #F37321;}
.ci-color-list li.color02:before {background: #F89B6C;}
.ci-color-list li.color03:before {background: #FBB584;}
.ci-color-list li.color04:before {background: #000000;}
.ci-color-list li .color-name {padding-top: 1rem; display: block; font-size: 1.8rem; color: #000; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1.5rem;}
.ci-color-list li .color-code {display: flex; font-size: 1.2rem; font-weight: 500; color: #000; letter-spacing: -0.01em; line-height: 1.66; } 
.ci-color-list li .color-code dt {width: 4.4rem;}
.ci-color-list li .color-code dd {width: calc(100% - 4.4rem); color: rgba(0,0,0,0.5);}
.color-use {padding: 4rem 3.5rem; box-sizing: border-box;}
.color-use dl {display: flex; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; color: #000; line-height:1.875;}
.color-use dl dt {width: 7.5rem; font-weight: 700; letter-spacing: -0.02em; }
.color-use dl dd {width: calc(100% - 7.5rem); color: rgba(0,0,0,0.5);}
.ci-con02 .cm-btn-controls a i {margin-left:1rem ; position: relative; z-index: 1;}

@media all and (max-width:1280px){
	.ci-intro-con .ci-intro-bg { margin-left: -20rem;width: 40rem; height: 40rem;}
	
	.ci-intro-list {padding-top: 0;}
	.ci-intro-list .ci-intro-item.item03 {width: calc(50% + 8rem); margin-top: 10rem;}
	
	.ci-intro-item .ci-intro-circle {width: 16rem; height: 16rem;}
	.ci-intro-item .ci-intro-circle:before {width: 4rem; }
	.ci-intro-item.item01 .ci-intro-circle:before {left: -4rem;}
	.ci-intro-item.item02 .ci-intro-circle:before {right: -4rem;}
	.ci-intro-item.item03 .ci-intro-circle:before {right: -19rem; width: 19rem;}
	.ci-intro-item.item01 .ci-intro-circle:after {left: -4rem;}
	.ci-intro-item.item02 .ci-intro-circle:after {right: -4rem;}
	.ci-intro-item.item03 .ci-intro-circle:after {right: -19rem; }
	.ci-intro-item .ci-intro-circle .tit-en {font-size: 1.6rem; margin-top: 0.5rem;}
	.ci-intro-item .ci-intro-txt {padding-top: 7rem;}
	.ci-intro-item.item01 .ci-intro-txt { width: calc(100% - 16rem); padding-right: 5.5rem;}
	.ci-intro-item.item02 .ci-intro-txt {width: calc(100% - 16rem); padding-left: 5.5rem;}
	.ci-intro-item.item03 .ci-intro-txt {width: calc(100% - 16rem); padding-left: 20.5rem;}
	
	.ci-color-list-con { padding: 6rem 0 4rem 3.5rem;}
}
@media all and (max-width:800px){
	.ci-con01 {padding: 2rem 0 10rem;}
	.ci-intro-con .ci-intro-bg {display: none;}

	.ci-intro-list .ci-intro-item {width: 100%;}
	.ci-intro-list .ci-intro-item + .ci-intro-item {margin-top: 3rem;}
	.ci-intro-list .ci-intro-item.item01 {flex-direction:row; padding-right: 0; }
	.ci-intro-list .ci-intro-item.item02 { padding-left: 0;}
	.ci-intro-list .ci-intro-item.item03 {width: 100%; margin-top: 3rem;}

	.ci-intro-item.item01 .ci-intro-circle:before {left: auto; right: -4rem;}
	.ci-intro-item.item03 .ci-intro-circle:before {right: -4rem; width: 4rem;}
	.ci-intro-item.item01 .ci-intro-circle:after {left: auto; right: -4rem;}
	.ci-intro-item.item03 .ci-intro-circle:after {right: -4rem; }

	.ci-intro-item .ci-intro-txt {padding-top: 7rem;}
	.ci-intro-item.item01 .ci-intro-txt {text-align: left; padding-left: 5.5rem; padding-right: 0;}
	.ci-intro-item.item03 .ci-intro-txt {padding-left: 5.5rem;}
	.ci-info-con {padding: 3rem 3rem 0;}
	.ci-logo-con {height: 30rem;}
	.ci-color-list-con {padding: 3rem 0 ;}
	.ci-color-list {flex-wrap: wrap; margin: -1rem 0;}
	.ci-color-list li {width: 50%; margin: 1rem 0; padding: 0 1rem 0 6rem;}
	.ci-color-list li:before {width: 4rem; height: 4rem;}

	.color-use {padding: 3rem 0 4rem;}
}
@media all and (max-width:480px){
	.ci-color-list li .color-name span {display: block; line-height: 1.2;}
	.ci-color-list li {padding: 0 1rem 0 5rem;}
	.ci-color-list li:before {width: 3.4rem; height: 3.4rem;}
}

/* 연혁 */
.history-con-wrap {padding-top: 8.5rem;}
.history-con-top {}
.history-con-tit-box {text-align: center; margin-bottom: 6rem;}
.history-con-tit-box .tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.05em; color: var(--main-color); line-height: 1.3; margin-bottom: 1.5rem;}
.history-con-tit-box .txt {font-size: 4.8rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.25;}
.history-con-video {}
.history-con-video .background-video-wrapper {position: relative;overflow: hidden; width: 100%; height: 0; padding-top: 52.035%; border-radius: 3rem;}
.history-con-video .background-video-wrapper:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3rem; background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box; z-index: 1;}
.history-con-video .background-video {position: absolute; top: 0;  left: 0px;width: 100%; height: 100%; transform: scale(1.03);}
.history-con-video .background-video iframe{width: 100%; }
.history-con-video .history-m-img {display: none;}

.history-con-bottom {position: relative; margin-top: -35rem; z-index:2;}
.history-bottom-tit {text-align: center; font-size: 6rem; font-weight: 700; color: #fff; line-height: 1.16; letter-spacing: 0em; filter: blur(1rem);transition: all 0.6s ease-in-out; opacity: 0;}
.history-con-bottom.animated .history-bottom-tit {letter-spacing: -0.025em; filter: blur(0); opacity: 1;}

.history-percent-bar {position: absolute;top: 13rem; left: 50%; border-radius: 1.5px; margin-left: -1.5px; width:3px; height: calc(100% - 13rem); background: rgba(255,255,255,0.1);}
.history-percent-bar .percent-bar-child {position: absolute;content: ""; width: 100%;  height: 0; background-color: var(--main-color); z-index: 1; border-radius:1.5px 1.5px 0 0; /* transition: all 0.3s; */}
.percent-bar-child .point { display: flex; align-items: center; justify-content: center;  position: absolute; bottom: -1.5rem; left: calc(50% - 1.5rem); content: ""; z-index: 10; width: 3rem; height: 3rem; border-radius: 3rem; background-color: #fff; transition: all 0.4s; transition-property: background-color;}
.percent-bar-child .point:before {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 9rem; height: 9rem; border-radius: 50%; border-top:1px solid #fff; box-sizing:border-box; animation: historyScroll 1.5s linear infinite; transition: all 0.4s; transition-property: border-top;}
.percent-bar-child .point i {color: #000; font-size: 1.8rem; transition: all 0.4s; transition-property: color;}
.percent-bar-child .point.end i {transform: rotate(180deg);}
@keyframes historyScroll {
	0% {
		transform: translate(-50%, -50%) rotate(0);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
.percent-bar-child .point.active {background: var(--main-color);}
.percent-bar-child .point.active:before { border-top:1px solid var(--main-color); }
.percent-bar-child .point.active i {color: #fff;}

.history-con {padding-top: 37rem;}
.history-year-group-box {position: relative; display: flex;}
.history-year-group-box + .history-year-group-box {padding-top: 12rem;}
.history-year-group-box:last-of-type { padding-bottom: 7.5rem;}
.history-year-group-box .history-year-group-tit-box {width: 50%; padding-right: 10.4rem; box-sizing: border-box; text-align: right;}
.history-year-group-box .history-year-group-tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.1; transition: all 0.3s; opacity: 0.3;} 
.history-year-group-box .history-year-list-box {width: 50%; padding: 0.5rem 0 0 10.4rem; box-sizing: border-box;}
.history-year-group-box .history-year-item {display: flex; margin-bottom: 5rem; opacity: 0.3; transition: all 0.3s; }
.history-year-group-box .history-year-item:last-of-type {margin-bottom: 0;}
.history-year-group-box .history-year-item .history-year {position: relative; width: 7.5rem; }
.history-year-group-box .history-year-item .history-year strong {font-size: 1.8rem; font-weight: 700; line-height: 1.83; color: #fff;}
.history-year-group-box .history-year-item .history-detail-txt-con {width: calc(100% - 7.5rem);}
.history-year-group-box .history-year-item .history-detail-txt {font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; line-height: 1.83;}
.history-year-group-box .history-year-item .history-detail-txt b {color: var(--main-color);}
.history-year-group-box .history-year-item .history-detail-img {margin-top: 3rem; display: flex; margin: 3rem -1.5rem 0;}
.history-year-group-box .history-year-item .history-detail-img span {display: block; max-width: calc(50% - 3rem); margin: 0 1.5rem;}
.history-year-group-box .history-year-item .history-detail-img img {max-width: 100%}
.history-year-group-box .history-year-item .history-detail-img .history-logo {height: 35px; margin: 0 1.5rem;}
.history-year-group-box .history-year-item .history-detail-img .history-logo svg {max-width: 100%; height: 100%; display: block; vertical-align: top;}
.history-year-group-box.active .history-year-group-tit  {opacity: 1; color: var(--main-color);}
.history-year-group-box .history-year-item.on {opacity: 1;}

@media all and (min-width:801px){
	.history-year-group-box.reverse {flex-direction: row-reverse;}
	.history-year-group-box.reverse .history-year-group-tit-box {padding-right: 0; padding-left: 10.4rem; text-align: left;}
	.history-year-group-box.reverse .history-year-list-box {padding: 0.5rem 10.4rem 0 0;}
	.history-year-group-box.reverse .history-year-item {flex-direction: row-reverse;}
	.history-year-group-box.reverse .history-year-item .history-year {text-align: right;}
	.history-year-group-box.reverse .history-year-item .history-detail-txt-con  {text-align: right;}
	.history-year-group-box.reverse .history-year-item .history-detail-img {justify-content: end;}
}
@media all and (max-width:1280px){

}
@media all and (max-width:800px){
	.history-con-tit-box .tit {font-size: 2rem;}
	.history-con-tit-box .txt {font-size: 3.8rem;}
	
	.history-con-bottom {margin-top: 3rem;}
	.history-bottom-tit {font-size: 3.2rem;}
	
	.history-percent-bar {top: 16rem;}
	.history-con {padding-top: 15rem;}
	
	.history-percent-bar {left: 1rem; }
	.percent-bar-child .point:before {width: 6rem; height: 6rem;}
	.history-year-group-box { flex-wrap: wrap; padding: 1rem 0 0 7rem;}
	.history-year-group-box .history-year-group-tit-box {text-align: left; width: 100%; padding-right: 0;}
	.history-year-group-box .history-year-group-tit {font-size: 3.6rem;}
	.history-year-group-box .history-year-list-box {width: 100%; padding: 4rem 0 0 0;}
	.history-year-group-box .history-year-item .history-detail-txt {font-size: 1.6rem;}
	.history-year-group-box .history-year-item .history-detail-img {margin: 3rem -1rem 0;}
	.history-year-group-box .history-year-item .history-detail-img span { max-width: calc(50% - 2rem); margin: 0 1rem;}
}





/* ****************** 05 회사소개 :: 경영방침 ********************** */
.manage-con {display: flex;}
.manage-con .left-con {width: 21.29%; padding-right: 1rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.manage-con .right-con {width: 78.71%;}
.manage-con-tit {display: block; font-size: 4rem; letter-spacing: -0.02em; color: #000; line-height: 1.375; }

.manage-con01 {padding: 6rem 0; border-bottom: 1px solid rgba(0,0,0,0.1); border-top: 2px solid #000;}
.manage-box {padding: 7.5rem 8rem 8rem; background: #F5F5F5; border-radius: 2rem; box-sizing: border-box;}
.manage-box .manage-txt01 {font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.2; margin-bottom: 2rem;}
.manage-box .manage-txt01 span {color: var(--main-color);}
.manage-box .manage-txt02 {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; color: #000; line-height: 1.75;}
.manage-list {margin: 3.5rem 0;}
.manage-list li {display: flex; align-items: center; border-bottom: 1px dashed #DDDDDD; padding: 1.1rem 1.4rem;}
.manage-list li:first-child {border-top: 2px solid #000;}
.manage-list li .num {width: 3.4rem; height: 3.4rem; line-height: 3.4rem; text-align: center; border-radius: 3.4rem; background:#000000; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; color: #fff;} 
.manage-list li .txt {width: calc(100% - 3.4rem); padding-left: 2rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; color: #000; line-height: 1.4;box-sizing: border-box;}
.manage-bottom {display: flex; align-items: center; justify-content: space-between; padding-top: 3rem;}
.manage-bottom .date {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; color: #000; line-height: 1.75;}
.manage-bottom .ceo-txt {font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; color: #000; line-height: 1.4;}
.manage-bottom .ceo-txt .sign-img {display: inline-block; width: 8rem; padding-left: 1.5rem;}
.manage-bottom .ceo-txt .sign-img img {max-width: 100%; mix-blend-mode: darken;}
.manage-con02 {padding: 10rem 0;}
.certificate-list {display: flex; margin: 0 -2rem;}
.certificate-list li {width: calc(33.33% - 8rem); margin: 0 4rem; text-align: center;}
.certificate-list li .certificate-img-thumb {position: relative; padding: 5.5rem 6rem; border-radius: 2rem; box-sizing: border-box; background: #F5F5F5;}
.certificate-list li .certificate-img-thumb .img-con {display: block; position: relative; width: 100%; height: 0; padding-top: 145%; border-radius: 1rem; box-shadow: 0.5rem 0.9rem 3rem rgba(0,0,0,0.1); overflow: hidden;}
.certificate-list li .certificate-img-thumb .img-con img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.certificate-list li .certificate-tit {padding-top: 4rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; color: #000;}
.certificate-list li .certificate-tit span {display: block; color: var(--main-color);}
.certificate-list li .certificate-txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.75; color: rgba(0,0,0,0.5); padding-top: 1.5rem;}

@media all and (max-width:800px){
	.manage-con {display: block;}
	.manage-con .left-con {width: 100%;}
	.manage-con .left-con .manage-con-tit {font-size: 2.4rem; margin-bottom: 2rem;}
	.manage-con .right-con {width: 100%;}
	.manage-con01 {padding: 4rem 0;}
	.manage-box {padding: 4rem 3rem;}
	.manage-box .manage-txt01 {font-size: 2.4rem;}
	.manage-con02 {padding: 4rem 0;}
	.certificate-list {flex-wrap: wrap; margin: -2rem -1rem;}
	.certificate-list li {width: calc(50% - 2rem); margin: 2rem 1rem; }
	.certificate-list li .certificate-img-thumb {padding: 4.5rem 4rem;}
	.certificate-list li .certificate-tit {padding-top: 2rem; font-size: 1.8rem;}
	.manage-bottom {display: block;}
}
@media all and (max-width:480px){
	.manage-list li {display: block; padding: 1.5rem 0;}
	.manage-list li .num {display: block;}
	.manage-list li .txt {width: 100%; padding-left: 0; padding-top: 1rem;}
	.certificate-list li {width: calc(100% - 2rem);}
}


/* ****************** 06 소식 ********************** */
/* 리스트 공통 */
.bbs-list-style01 {}
.bbs-list-style01 .bbs-item {}
.bbs-list-style01 .bbs-item a {display: flex; align-items: center; position: relative; height: 11.3rem; box-sizing: border-box; border-top: 1px solid #000; background-color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s;-ms-transition: all 0.3s; transition: all 0.3s }
.bbs-list-style01 .bbs-item a .bbs-list-num {text-align: center; width: 13.5rem; font-size: 1.6rem; font-weight: 700; color: #000000; letter-spacing: -0.01em; line-height: 1.3;}
.bbs-list-style01 .bbs-item.notice-item a .bbs-list-num {color: var(--main-color);}
.bbs-list-style01 .bbs-item a .bbs-list-info-con {width: calc(100% - 29.5rem); padding: 0 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt {display: block; font-size: 2.8rem; letter-spacing: -0.04em; color: #000; line-height: 1.2; height: 1.2em; transition: all 0.4s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt strong {position: relative; font-weight: 700; background-image: linear-gradient(#000, #000);background-position: 100% 100%; background-repeat: no-repeat; background-size: 0% 3px; transition: all 0.4s;  transition-property: background-image, background-size, color; }
.bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt strong:before { position: absolute; content: ''; width: 100%; height: 3px; left: 0; bottom: 0; background-image: linear-gradient(#000, #000);background-position: 100% 100%; background-repeat: no-repeat; background-size: 0% 3px; transition: all 0.4s;  transition-property: background-image, background-size, color;}
.bbs-list-style01 .bbs-item a .bbs-list-state span {display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 3rem; border: 1px solid #000; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; background: #000; padding: 0 1rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.bbs-list-style01 .bbs-item a .bbs-list-state span.end {background: #fff; color: #000;}
.bbs-list-style01 .bbs-item a .bbs-list-date {text-align: center; width: 16rem; font-size: 1.6rem; color: rgba(0,0,0,0.5); letter-spacing: -0.01em; line-height: 1.625;}

@media all and (min-width:801px){
	.notice-con .bbs-list-style01 .bbs-item a {height: 9rem;}
	.notice-con .bbs-list-style01 .bbs-item a .bbs-list-num {width: 16rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
	.notice-con .bbs-list-style01 .bbs-item a .bbs-list-info-con {width: calc(100% - 36rem); padding: 0 4rem 0 1rem;}
	.notice-con .bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt {font-size: 2.4rem;}
	.notice-con .bbs-list-style01 .bbs-item a .bbs-list-date {width: 20rem;}

	.bbs-list-style01 .bbs-item a:hover .bbs-list-info-con .bbs-subject-txt {color: var(--main-color); }
	.bbs-list-style01 .bbs-item a:hover .bbs-list-info-con .bbs-subject-txt strong {background-image: linear-gradient( var(--main-color),  var(--main-color)); background-position: 0% 100%; background-size: 100% 3px; }
}
@media all and (max-width:800px){
	.bbs-list-style01 .bbs-item a { height: auto; padding: 2rem 0; flex-wrap: wrap; }
    .bbs-list-style01 .bbs-item a .bbs-list-num { width: 100%; text-align: left; margin-bottom: 1.5rem;}
    .bbs-list-style01 .bbs-item a .bbs-list-info-con {margin: 0 ;  padding: 0; width: 100%; }
	.bbs-list-style01 .bbs-item a .bbs-list-info-con strong {font-size: 1.8rem;}
	.bbs-list-style01 .bbs-item a .bbs-list-state {margin-top: 2rem;}
	.bbs-list-style01 .bbs-item a .bbs-list-date { width: 100%; text-align: left; margin-top: 1.5rem; font-size: 1.4rem;}
}

/* 리스트 - 박스형 */
.bbs-list-style09 { padding: 4rem 0;display: flex;flex-wrap: wrap; margin: -2% -2.2%;}
.bbs-list-style09 li { width: 28.933%; margin: 2% 2.2% ; border-radius: 2rem; }
.bbs-list-style09 li a { position: relative; display: block; border: 1px solid #eee; padding: 13% 13% 25.8%;transition: all 0.4s; border-radius: 2rem; ;}
.bbs-list-style09 li a:before {display: none;}
.bbs-list-style09 li a .bbs-list-date {font-size: 1.8rem; color: #000; font-weight: 700; letter-spacing: -0.01em; line-height: 1.625; transition: all 0.4s}
.bbs-list-style09 li a .bbs-list-num { display: block; font-weight: 700; font-size:3.6rem; font-weight: 700; color:#000; letter-spacing: -0.01em; line-height: 1.3; margin-top: 0.2rem; transition: all 0.3s}
.bbs-list-style09 li a .bbs-list-info-con { position: relative;padding-top: 2.3rem;}
.bbs-list-style09 li a .bbs-list-info-con .bbs-subject-txt {font-size: 2.4rem; letter-spacing: -0.04em; color: #000; line-height: 1.3; height: 3.9em; transition: all 0.4s; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.bbs-list-style09 .more-box {position: absolute; right: 3rem; bottom: 3rem;  display: flex; align-items: center; opacity: 0;  pointer-events: none; transition: all 0.4s;}
.bbs-list-style09 .more-box .more-txt {font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; color: #fff;}
.bbs-list-style09 .more-plus { margin-left: 1.7rem; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;background-color: #fff;border-radius: 50%;}
.bbs-list-style09 .more-plus i { font-size: 1.8rem; color: var(--main-color);}
.bbs-list-style09 li a.cm-fill-btn  .cm-fill {background: var(--main-color); z-index: -1; transition: width 0.6s ease-out, height 0.6s ease-out;}

@media all and (min-width: 801px) {
    .bbs-list-style09 li a.cm-fill-btn:hover .cm-fill{width:70vw; height:70vw;}
	.bbs-list-style09 li a:hover .bbs-list-date {color: #fff;}
	.bbs-list-style09 li a:hover .bbs-list-num {color: #fff;}
	.bbs-list-style09 li a:hover .bbs-list-info-con .bbs-subject-txt {color: #fff;}
	.bbs-list-style09 li a:hover .more-box { opacity: 1; }
}

@media all and (max-width: 1024px) {
    .bbs-list-style09 li a { padding:10% 7% 15%}
}
@media all and (max-width: 800px) {
    .bbs-list-style09 { margin: -0.7%;}
    .bbs-list-style09 li {width: 48.6%;  margin: 0.7%; }
	.bbs-list-style09 li a { padding: 8% 8% 12%}
	.bbs-list-style09 li a .bbs-list-num {font-size: 2.4rem;}
	.bbs-list-style09 li a .bbs-list-info-con .bbs-subject-txt {font-size: 2rem;}
}
@media all and (max-width: 480px) {
    .bbs-list-style09 {margin: -0.5rem 0;}
    .bbs-list-style09 li {width: 100%; margin: 0.5rem 0; }
}

/* 갤러리 공통 */
.board-con {border-top: 1px solid #000;}
.gallery-list-style01 {padding: 4rem 0; display: flex; flex-wrap: wrap; margin: -1.5rem;}
.gallery-list-style01 li {width: calc(33.33% - 3rem); margin: 1.5rem;}
.gallery-list-style01 li a {display: flex;flex-wrap: wrap; flex-direction: column;justify-content: space-between; width: 100%; height: 100%;background: #F5F5F5;  border: 1px solid #F5F5F5; border-radius:2rem;transition: all 0.4s;  box-sizing: border-box;}
.gallery-list-style01 li a .txt-box { padding: 4rem; box-sizing: border-box;}
.gallery-list-style01 li a .txt-box .cate {display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.016em; color: var(--main-color); line-height: 1.2; margin-bottom: 1.5rem;}
.gallery-list-style01 li a .txt-box .tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.57; height: 3em; overflow:hidden;display:block;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  transition: all 0.4s;}
.gallery-list-style01 li a .txt-box .tit strong {position: relative; background-image: linear-gradient(#000, #000);background-position: 100% 100%; background-repeat: no-repeat; background-size: 0% 3px; transition: all 0.4s;  transition-property: background-image, background-size, color;}
.gallery-list-style01 li a .txt-box .date {display: block; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; color: #000; line-height: 1.2; margin-top: 2.2rem;}
.gallery-list-style01 li a .img-box {position: relative; width: 100%; height: 0; padding-top: 66.66%;border-radius: 0 0 2rem 2rem;overflow: hidden;}
.gallery-list-style01 li a .img-box span {position: absolute; top: 0;  left: 0; width: 100%; height: 100%; display: block;}
.bbs-no-list{padding:10rem 0; text-align:center; color:#777; font-size:2rem; }
.notice-con .bbs-no-list {border-top: 1px solid #000;}


@media all and (min-width:801px){
	.gallery-list-style01 li a:hover .txt-box .tit {color: var(--main-color); }
	.gallery-list-style01 li a:hover .txt-box .tit strong {background-image: linear-gradient( var(--main-color),  var(--main-color)); background-position: 0% 100%; background-size: 100% 3px; }
}
@media all and (max-width:800px){
	.gallery-list-style01 {margin: -1rem;}
	.gallery-list-style01 li {width: calc(50% - 2rem); margin: 1rem;}
	.gallery-list-style01 li a .txt-box {padding: 3rem;}
	.gallery-list-style01 li a .txt-box .tit {font-size: 2rem;}
	.bbs-no-list{padding:6rem 0; font-size:1.6rem; }
}
@media all and (max-width:480px){
	.gallery-list-style01 {margin: -1rem 0;}
	.gallery-list-style01 li {width: 100%; margin: 1rem 0;}

}

/* ******************   게시판 :: 뷰페이지  ********************** */
.bbs-view-con{border-top:1px solid #333;}
/* 게시판 :: 뷰 :: 상단 타이틀 정보 */
.bbs-view-top{padding:20px; border-bottom:1px solid #eee; font-size:var(--board-view-font-size);}
.bbs-view-top .event-date{color:#888; padding-bottom:10px;}
.bbs-view-top .event-date dt,.bbs-view-top .event-date dd{display:inline-block; letter-spacing:-0.5px;}
.bbs-view-top .event-date dt{margin-right:10px; color:#333;}
.bbs-view-top .event-date dt:before{position:relative; top:-1px; font-family:"xeicon"; content: "\e9a0"; font-size:16px; margin-right:3px; vertical-align:middle;}
.bbs-view-top .bbs-state-box{margin-bottom:10px}
.bbs-view-top .bbs-state{display:inline-block; min-width:50px; padding:0 10px; height:30px; line-height:30px; background-color:#888; font-size:13px; border:1px solid #888; color:#fff; text-align:center;}
.bbs-view-top .bbs-state.ing{border-color:#5997bb; background-color:#5997bb;}
.bbs-view-top .bbs-state.end{background-color:#fff; color:#999}
.bbs-view-top .bbs-category{display:block; margin-bottom:10px;}
.bbs-view-top .bbs-tit{color:#282828; font-size:2.4rem; letter-spacing:-0.0333em; font-weight:500; line-height:1.25; word-break:keep-all;}
.bbs-view-top .bbs-write-info{margin-top:20px;}
.bbs-view-top .bbs-write-info dt,.bbs-view-top .bbs-write-info dd{display:inline-block; font-size: 1.4rem; color:#777; vertical-align:middle; font-weight:500;}
.bbs-view-top .bbs-write-info dd{margin:0 20px 0 5px; color:#888; font-weight:400}
.bbs-view-content{padding:30px 20px; border-bottom:1px solid #eee; }
.bbs-view-content.editor img {height: auto !important;}
/* 게시판 :: 뷰 :: 공유아이콘 */
.bbs-view-share-con{overflow:hidden; padding:10px 20px; border-bottom:1px solid #eee;}
.bbs-view-share-con ul{float:right;}
.bbs-view-share-con ul li{float:left;margin-left:5px;  -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.bbs-view-share-con ul li:first-child{margin-left:0;}
.bbs-view-share-con ul li a, .bbs-view-share-con ul li button{display:block;  width:34px; height:34px; text-align:center; line-height:34px;}
.bbs-view-share-con ul li img{width:30px;}
.bbs-view-share-con ul li i{font-size:20px; line-height:34px; color:#fff;}
.bbs-view-share-controls .bbs-button-controls{float:left;}
.bbs-view-share-controls .bbs-hit-good-num-con{float:right;}

/* 게시판 :: 뷰 :: 첨부파일 */
.bbs-view-file-info-box{line-height:20px; border-bottom:1px solid #eee; background-color:#f9f9f9; padding:10px 20px; margin-bottom:10px;}
.bbs-view-share-con + .bbs-view-file-info-box{border-top:0;}
.bbs-view-file-info-box .bbs-file-list{overflow:hidden; padding-top:5px; font-size:13px;}
.bbs-view-file-info-box .bbs-file-list:first-child{padding-top:0;}
.bbs-view-file-info-box .bbs-file-list dt{float:left; width:100px; font-weight:600; color:#333;}
.bbs-view-file-info-box .bbs-file-list dd{float:left; width:70%; width:calc(100% - 100px ); }
.bbs-view-file-info-box .bbs-file-list dd a:hover{text-decoration:underline;}
.bbs-view-file-info-box .bbs-file-list dd i{vertical-align:middle; font-size:15px;}

/* 게시판 :: 뷰 :: 이전글,다음글 */
.bbs-view-prev-next-list{margin-top:50px;}
.bbs-view-prev-next-list li{border-bottom:1px solid #eee;}
.bbs-view-prev-next-list li:first-child{border-top:1px solid #eee;}
.bbs-prev-next-tbl{width:100%; table-layout:fixed;}
.bbs-prev-next-tbl th,
.bbs-prev-next-tbl td{height:58px; color:#333; font-size:16px; letter-spacing:-0.5px; line-height:1.2; }
.bbs-prev-next-tbl th{text-align:left;}
.bbs-prev-next-tbl .bbs-prev-next-tit{position:relative; display:block; padding-left:25px; font-weight:400; }
.bbs-prev-next-tbl .bbs-prev-next-tit:after{position:absolute; top:0px; bottom:0px; width:1px; right:0px; background-color:#eee; content:"";}
.bbs-prev-next-tbl .bbs-prev-next-tit i{position:absolute; right:15px; font-size:20px;}
.bbs-prev-next-tbl td{padding-left:20px}
.bbs-prev-next-tbl td a{display:block; color:inherit;}
.bbs-prev-next-tbl td a .bbs-tit{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bbs-prev-next-tbl td a:hover .bbs-tit{text-decoration:underline}

/* ****************** 공통 :: BUTTON ********************** */
.bbs-view-con .bbs-view-btn-controls{overflow:hidden; display:flex; align-items:center; justify-content:space-between; text-align:center; margin-top:50px;}
.bbs-view-con .bbs-view-btn-controls .left-btn-controls,
.bbs-view-con .bbs-view-btn-controls .right-btn-controls{display:flex; margin: 0 -0.5rem;}
.bbs-view-con .bbs-view-btn-controls button,
.bbs-view-con .bbs-view-btn-controls a {width: 20rem; margin: 0 0.5rem;} 

.bbs-view-con .bbs-view-btn-controls .btn-style01:hover {color: #fff;}


@media all and (max-width:800px){
	/* 게시판 :: 뷰 */
	.bbs-view-top{padding:15px 0;}
	.bbs-view-top .bbs-tit{}
	.bbs-view-top .bbs-view-info{float:none; overflow:hidden;}
	.bbs-view-top .bbs-write-info{margin-top:10px;}
	.bbs-view-top .bbs-write-info dt,
	.bbs-view-top .bbs-write-info dd{font-size:12px;}
	.bbs-view-top .bbs-write-info dd{margin:0 7px 0 0}
	.bbs-view-content{padding:15px 0}

	/* 게시판 :: 뷰 :: 공유아이콘 */
	.bbs-view-share-con{padding:10px 15px}

	/* 게시판 :: 뷰 :: 첨부파일 */
	.bbs-view-file-info-box{padding:10px 15px;}
	.bbs-view-file-info-box .bbs-file-list{font-size:12px;}

	/* 게시판 :: 뷰 :: 이전글,다음글 */
	.bbs-prev-next-tbl colgroup{display:none;}
	.bbs-prev-next-tbl th{width:80px;}
	.bbs-prev-next-tbl th,
	.bbs-prev-next-tbl td{height:34px; font-size:13px; padding-left:10px}
	.bbs-prev-next-tbl .bbs-prev-next-tit{padding-left:10px;}
}

/* ******************  마이페이지 :: 온라인문의 뷰페이지  ********************** */
.mypage-view-con {}
.mypage-view-top {display: flex; align-items: center; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 3rem 4rem; box-sizing: border-box;}
.mypage-view-top .tit-box {width: calc(100% - 8rem); padding-right: 3rem; box-sizing: border-box;}
.mypage-view-top .tit-box .info {padding-bottom: 2rem;}
.mypage-view-top .tit-box .info span {float: left; display: inline-block; font-size: 1.6rem; line-height: 1.3;}
.mypage-view-top .tit-box .info .num {color: #000; font-weight: 700;} 
.mypage-view-top .tit-box .info .category {color: var(--main-color); font-weight: 700; padding-left: 3rem;}
.mypage-view-top .tit-box .info .date {color: rgba(0,0,0,0.5); padding-left: 2rem;}
.mypage-view-top .tit-box .tit {font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.4; color: #000;}
.mypage-view-top .state-box {width: 8rem; height: 3rem; border: 1px solid #000; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;}
.mypage-view-top .state-box span {font-size: 1.4rem; font-weight: 700; letter-spacing: -0.04em; color: #000;}

.mypage-view-content {padding-bottom:4rem;}
.mypage-view-content .contact-content {padding: 3rem 4rem; box-sizing: border-box;}
.mypage-view-content .answer-content {border: 2px solid #000; padding: 2.8rem 3.8rem;}

.mypage-view-con .cm-btn-controls button,
.mypage-view-con .cm-btn-controls a{max-width: 24rem;}
.contact-view-tbl {width: 100%;}
.contact-view-tbl th ,
.contact-view-tbl td {text-align: left; vertical-align: top; font-size: 1.8rem; color: #000; line-height: 1.66; box-sizing: border-box;}
.contact-view-tbl th {width: 13.8rem; font-weight: 600; padding: 1rem 1rem 1rem 0; border-right: 1px solid #EEEEEE;}
.contact-view-tbl td {width: calc(100% - 13.8rem); font-weight: 400; padding: 1rem 1rem 1rem 4rem; }
.contact-view-tbl td a {color: #3C84F1; border-bottom: 1px solid #3C84F1;}
.answer-content .contact-view-tbl th {border-right: 0;}

@media all and (max-width:800px){
	.mypage-view-top {flex-direction: column-reverse; align-items: flex-start; padding: 3rem 2.5rem;}
	.mypage-view-top .state-box {margin-bottom: 2rem;}
	.mypage-view-content .contact-content {padding: 3rem 2.5rem;}
	.mypage-view-content .answer-content {padding: 2.8rem 2.3rem;}
	.contact-view-tbl {display: block;}
	.contact-view-tbl tr {display:block; }
	.contact-view-tbl th ,
	.contact-view-tbl td {display:block; width:100% !important; }
	.contact-view-tbl th {border-right: 0;}
	.contact-view-tbl td {border-top: 1px solid rgba(0,0,0,0.1); padding: 1rem 0;}
}


/* -------- 공통 :: 체크박스 -------- */
.custom-checkbox-item-box{margin:0 -1rem;}
.custom-checkbox-item-box .custom-checkbox-item{margin:0.2rem 1rem}
.custom-checkbox-item{display:inline-block; vertical-align:middle; font-size:1.7rem;}
.custom-checkbox-item input[type="checkbox"]{display:none;}
.custom-checkbox-item label{display:inline-block; position:relative; padding-left:2.8rem; color:#000; font-size:1em; line-height:1.5; }
.custom-checkbox-item2 label{display:inline-block; position:relative; padding-left:2.8rem; color:#000; font-size:1em; line-height:1.5; }
.custom-checkbox-item label::before{position: absolute; content:''; left:0; top:0.3rem; width:2rem; height:2rem; border-radius:2px; border:2px solid #000; box-sizing:border-box;}
.custom-checkbox-item label::after{position: absolute; content:''; left:-0.1rem; top:-0.5rem; font-size:2.4rem; font-family:'xeicon'; color:#000;}
.custom-checkbox-item input[type="checkbox"]:checked + label::after{content: "\e929";}

@media all and (min-width:801px){
	/* big-item */
	.big-item.custom-checkbox-item{font-size:2rem;}
	.big-item.custom-checkbox-item label::before{width:2rem; height:2rem; top:0.6rem;}
	.big-item.custom-checkbox-item label::after{font-size:2.4rem; top:-0.1rem;}
	
}


/* -------- 공통 :: 탭 -------- */
@media all and (min-width:801px){
	/* Tab 공통 스타일02 */
	.sub-tab-list-style2{padding:1rem; box-sizing:border-box; background:#eee; border-radius:1rem;}
	.sub-tab-list-style2 ul{display:flex; justify-content: center; width:100%; height:100%;}
	.sub-tab-list-style2 ul li{display:table-cell; vertical-align:middle; position:relative; width:50%; max-width: 17rem; background-color:#eee; transition: all 0.4s;}
	.sub-tab-list-style2 ul li a{display:table; height:40px; width:100%; border-radius: 6px; transition: all 0.4s; }
	.sub-tab-list-style2 ul li a em{display:table-cell; vertical-align:middle; color:#000000; font-size:1.5rem; font-weight: 700; text-align:center;}
	.sub-tab-list-style2 ul li.selected {z-index: 1;}
	.sub-tab-list-style2 ul li.selected a {background-color:#000;}
	.sub-tab-list-style2 ul li.selected a em {color: #fff;}
}

/* -------- 공통 :: 버튼 -------- */
.cm-btn-controls{overflow:hidden; margin:-1rem 0;}
.cm-btn-controls button,
.cm-btn-controls a{display:flex; align-items:center; justify-content:center; width:100%; max-width:36rem; height:6rem; border:0; color:#fff; background:#000; font-size:1.8rem; margin:1rem 0; cursor:pointer; vertical-align:top; text-align:center; letter-spacing: -0.05em; box-sizing:border-box; border-radius: 1rem; font-weight:700;}
.cm-btn-controls button em,
.cm-btn-controls a em{font-weight:inherit;}
.cm-btn-controls button.wide,
.cm-btn-controls a.wide{width:100%; max-width:none;}
.cm-btn-controls button.small,
.cm-btn-controls a.small{ max-width:24rem;}

/* row */
.row.cm-btn-controls{display: flex; justify-content: center; margin:-1rem;}
.row.cm-btn-controls button,
.row.cm-btn-controls a{margin:1rem;}
/* btn-style */
.cm-btn-controls .btn-style01{background-color:var(--main-color);}
.cm-btn-controls .btn-style02{background-color:#E5E5E5; color:#000;}
.sub-wrap .cm-fill-btn.btn-style03:before{border-color:#fff}
.sub-wrap .cm-fill-btn.btn-style04 { color:#000; background:#fff;}
.sub-wrap .cm-fill-btn.btn-style04 .cm-fill {background: #000;}
@media all and (min-width:801px){
	/* wide */
	.cm-btn-controls button.wide.cm-fill-btn:hover .cm-fill,
	.cm-btn-controls a.wide.cm-fill-btn:hover .cm-fill{width:70vw; height:70vw;}

	.cm-btn-controls .btn-style01:hover{color:var(--main-color);}

	.sub-wrap .cm-fill-btn.btn-style04:hover {color: #fff;}
}
@media all and (max-width:800px){
	.cm-btn-controls button,
	.cm-btn-controls a{height:5rem; font-size:1.5rem;}
}

/* -------- 공통 :: 버튼효과(서브) -------- */
.sub-wrap .cm-fill-btn:before{position: absolute; content:''; top:0; left:0; border:1px solid #454a4e; border-radius:1rem; box-sizing:border-box; width:100%; height:100%; z-index:99;}
.sub-wrap .cm-fill-btn.btn-style01:before{border-color:var(--main-color);}
.sub-wrap .cm-fill-btn.btn-style02:before{border-color:#E5E5E5}


/* ****************** 회원 :: 로그인페이지 ********************** */
.login-page{max-width:360px; margin:auto;}
.login-page .sub-tab-wrapper-style{margin-bottom:3rem;}
.login-form{margin-bottom:4rem;}
/* 로그인 :: 인풋창 */
.login-item {position: relative; margin-bottom:2rem;}
.login-item .login-input {width:100%; border: solid 2px #000; border-radius: 1rem; background: none; padding: 0 2rem; height:6rem; font-size:1.7rem; color:#000; transition:border 150ms cubic-bezier(0.4,0,0.2,1); }
.login-item .input-label { position: absolute; top:50%; left: 2rem; color: rgba(0,0,0,0.25); pointer-events: none; transform: translateY(-50%); transition: 150ms cubic-bezier(0.4,0,0.2,1); font-size: 1.7rem; font-weight:700; }
.login-item .login-input:focus,
.login-input:valid { outline: none; border: 2px solid #000; }
.login-input:focus ~ label, 
.login-input:valid ~ label { top:0; transform: translateY(-50%); background-color: #fff; padding: 0 0.4rem; color: #000; }
/* 로그인 :: 아이디저장, 찾기 */
.login-bottom-box{display: flex; align-items:center; justify-content:space-between;}
.login-bottom-box .id-search-btn a{position: relative; font-size:1.5rem; font-weight:500; color:#000; padding: 0 0.8rem;}
.login-bottom-box .id-search-btn a:before {position: absolute; content: '/'; right: -0.4rem; top: 0.2rem; }
.login-bottom-box .id-search-btn a:last-of-type {padding-right: 0;}
.login-bottom-box .id-search-btn a:last-of-type:before {display: none;}
.login-bottom-box .custom-checkbox-item label {padding-left: 1.9rem; font-size: 1.5rem; font-weight: 400;}
.login-bottom-box .custom-checkbox-item label::before {width: 1.4rem; height: 1.4rem;}
.login-bottom-box .custom-checkbox-item label::after {left: -0.3rem; top: -0.8rem;}

/* ****************** 회원 :: 로그인페이지 ********************** */
@media all and (max-width:800px){
	.login-item .login-input{font-size:1.5rem; height:5rem;}
	.login-item .input-label{font-size:1.5rem;}
}


/* ****************** 회원 :: 회원가입 ********************** */
.join-intro-con{display: flex; justify-content:space-between;}
.join-intro-con .join-item{display: flex ; flex-direction: column; justify-content: space-between; width:calc(50% - 2rem); border-radius:2rem; background:#f5f5f5; padding:6.4rem; box-sizing:border-box; min-height:42rem;}
.join-intro-con .join-item .top-box{display: flex; justify-content:space-between; margin-bottom:3rem;}
.join-intro-con .join-item .top-box .tit-box{width:calc(100% - 12rem); padding-right: 1rem; box-sizing: border-box;}
.join-intro-con .join-item .top-box .tit-box .tit{font-size:3.2rem; line-height:1.5; letter-spacing:-0.015em; color:#000; font-weight:700; margin-bottom:1rem;}
.join-intro-con .join-item .top-box .tit-box .txt{font-size:1.8rem; line-height:1.66; letter-spacing:-0.015em; color:rgba(0,0,0,0.7);}
.join-intro-con .join-item .top-box .icon-box{display: flex; flex-direction:column; align-items:center; justify-content:center; width:12rem; height:12rem; text-align:center; background:#fff; border-radius:2rem; padding:1rem; box-sizing:border-box; color:#000;}
.join-intro-con .join-item .top-box .icon-box .icon{font-size:3.2rem;}
.join-intro-con .join-item .top-box .icon-box .txt{font-size:1.8rem; line-height:1.5; font-weight:800; margin-top:0.3rem;}

.join-intro-con .join-item.agency .top-box .icon-box{color:var(--main-color);}

@media all and (max-width:800px){
	.join-intro-con{display: block;}
	.join-intro-con .join-item{width:100%; padding:3rem; min-height:auto; margin-bottom:2rem;}
	.join-intro-con .join-item:last-child{margin-bottom:0;}
	.join-intro-con .join-item .top-box .tit-box{width:calc(100% - 10rem); }
	.join-intro-con .join-item .top-box .tit-box .tit{font-size:2.1rem;}
	.join-intro-con .join-item .top-box .tit-box .txt{font-size:1.6rem;}
	.join-intro-con .join-item .top-box .icon-box{ width:10rem; height:10rem;}
	.join-intro-con .join-item .top-box .icon-box .icon{font-size:2rem;}
	.join-intro-con .join-item .top-box .icon-box .txt{font-size:1.6rem;}
}


/* ****************** 회원 :: 회원가입01(약관동의) ********************** */
.join-write-wrap{border-bottom:2px solid #000; padding:6rem 0;}
.join-write-wrap:first-child{border-top:2px solid #000;}
.join-write-wrap + .cm-btn-controls{margin-top:5rem;}
/* 약관동의 */
.join-agree-con{margin-bottom:2rem;}
.join-agree-con:last-child{margin-bottom:0rem;}
.join-agree-con .agree-item{display: flex; align-items:center; justify-content:space-between; }
.join-agree-con .agree-item .more{display: flex; align-items:center; font-size:1.5rem; line-height:1.6; color:#000; cursor:pointer;}
.join-agree-con .agree-item .more i{font-size:1.6em; margin-left:1.5rem; transition:all 0.2s;}
.join-agree-con .agree-item .more.rotate i{transform:rotate(180deg);}

.join-agree-con .agree-inner{width:100%; border:2px solid rgba(0,0,0,0.25); padding:3rem; box-sizing:border-box; margin-top:2rem; margin-bottom:5rem;}
.join-agree-con .agree-inner .inquiry-agreement-con{height:24rem; overflow:auto; font-size:1.7rem; color:rgba(0,0,0,0.3);}

@media all and (max-width:800px){
	.join-write-wrap{padding:3rem 0;}
	.join-agree-con{margin-bottom:1rem;}
	.join-agree-con .agree-item .more{font-size:1.3rem;}
	.join-agree-con .agree-item .more i{margin-left:1rem;}

	.join-agree-con .agree-inner{padding:1.5rem; margin-top:1rem; margin-bottom:3rem;}
	.join-agree-con .agree-inner .inquiry-agreement-con{height:20rem; font-size:1.5rem;}
}

/* ****************** 회원 :: 회원가입02(입력폼) ********************** */
.join-write-con{display: flex; margin-bottom:6rem; padding-bottom:6rem; border-bottom:1px solid rgba(0,0,0,0.1);}
.join-write-con:last-child{margin-bottom:0rem; padding-bottom:0rem; border-bottom:none;}
.join-write-con .left-box{width:39.4%; padding-right: 4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.join-write-con .left-box .join-tit{font-size:3.2rem; line-height:1.2; letter-spacing:-0.024em; color:#000; font-weight:700;}
.join-write-con .left-box .join-tit2{font-size:3.2rem; line-height:1.2; letter-spacing:-0.024em; color:#000; font-weight:700;}
.join-write-con .right-box{width:61.6%;}
.cm-write-item{display: flex; justify-content:space-between; margin-bottom:1rem;}
.cm-write-item:last-child{margin-bottom:0rem;}
.cm-write-item .write-tit-box{display: flex; align-items:center; width:14rem; height:6rem;}
.cm-write-item .write-tit-box .write-tit{font-size:1.8rem; line-height:1.5; color:#000; font-weight:600; letter-spacing:-0.024em;}
.cm-write-item .write-tit-box .write-tit2{font-size:1.8rem; line-height:1.5; color:#000; font-weight:600; letter-spacing:-0.024em;}
.essential{color:var(--main-color);}

.cm-write-item .cm-fieldset-box{width:calc(100% - 14rem); max-width:660px;}
.cm-write-item .cm-nation-box {display: flex;}
.cm-write-item .cm-nation-box .nation01-select01 {width: 40%;}
.cm-write-item .cm-nation-box .nation01-select02 {width: calc(60% - 1rem); margin-left: 1rem;}

/* 문의폼 */
.cm-fieldset-box .write-input,
.cm-fieldset-box .write-select,
.cm-fieldset-box .custom-select-box,
.cm-fieldset-box .write-textarea{height:6rem; width:100%; background-color:#f2f2f2; color:#000; font-size:1.5rem; font-weight:500; text-indent:2rem; vertical-align:middle; box-sizing:border-box; border-radius:1rem !important; border:none; outline:none; }
.cm-fieldset-box .write-textarea{height:30rem; padding:2.5rem 2rem; text-indent:0;}
.cm-fieldset-box .plus-txt{font-size:1.6rem; line-height:1.5; letter-spacing:0; font-weight:500; color:#000; margin:1rem 0;}
/* 문의폼 :: Custom Select */
.cm-fieldset-box .custom-select-trigger { color: #000; line-height: 6rem; font-size:1.5rem; border:none; background: #f2f2f2; border-radius:1rem; transition-delay:0.2s;}
.custom-select-trigger:after{content: "\e936"; right:2rem; font-size:2.4rem; }
.custom-select.opened .custom-select-trigger:after{ content: "\e930"; }
/* Custom Select :: Option Drop List */
.custom-option-drop-list { top: 100%; background: #fff; border:2px solid #f2f2f2; border-radius:0 0 1rem 1rem;}
.custom-option-item { padding: 1.5rem 0; font-size:1.3rem; }
/* Custom Select :: Open */
.cm-fieldset-box .opened .custom-select-trigger{border-radius:1rem 1rem 0 0; transition-delay:0s;}

/* 문의폼 :: email */
.email-fieldset{position: relative; display: flex; flex-wrap:wrap; z-index:1;}
.email-fieldset .write-input, 
.email-fieldset .write-select,
.email-fieldset .custom-select-box,
.email-fieldset .fakeform-selectbox{width:calc(50% - 2.5rem);}
.email-fieldset + .email3{order:3;}
.email-fieldset .hypen{display:inline-block; vertical-align:middle; width:5rem; text-align:center; font-size:1.8rem; color:#000; font-weight:600; line-height:6rem;}
.cm-write-item .cm-fieldset-box .email3{margin-top:1rem;}
/* 문의폼 :: email :: style02 */
.email-fieldset.email-style02{}
.email-fieldset.email-style02 .write-input, 
.email-fieldset.email-style02 .write-select,
.email-fieldset.email-style02 .custom-select-box,
.email-fieldset.email-style02 .fakeform-selectbox{width:calc(33.33% - 2rem);}
.email-fieldset.email-style02 .custom-select-box,
.email-fieldset.email-style02 .fakeform-selectbox{margin-left:1rem;}

/* 문의폼 :: fakeform */
.fakeform-selectbox{position: relative; display:inline-block; width: 100%;}
.fakeform-selectbox select{opacity: 0; visibility: hidden;}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.fakeform-selectbox .select-title {text-indent: 2rem; width: 100% !important; text-align: left; vertical-align: middle; border:0; line-height: 6rem; font-size:1.5rem; color: #000; background-color: #f2f2f2; display: inline-block; box-sizing: border-box; cursor: pointer; border-radius:1rem;}
.fakeform-selectbox .select-title:after{font-family: 'xeicon'; position:absolute; top:50%; right:1.5rem; transform:translateY(-50%); content: "\e936"; font-size:2.4rem; color: #000;}
.fakeform-selectbox .select-title strong {width: 100%; font-weight: 500; word-break: break-all; display: block; overflow: hidden;}
.fakeform-selectbox .select-title.active{border-radius:1rem 1rem 0 0;}
.fakeform-selectbox .select-title.active:after{content: "\e930";}
.fakeform-selectbox .select-title.focus{}
.fakeform-selectbox .select-title.disabled{}

.fakeform-selectbox .select-title.active.upper {    border-radius: 0 0 1rem 1rem ;}

/* 옵션창 */
.select-option {border: 2px solid #f2f2f2; border-top: 0; background: #fff; border-radius: 0 0 1rem 1rem; max-height: 200px; overflow: auto; z-index: 999 !important;}
.select-option::-webkit-scrollbar{
	width: 5px;
}
.select-option::-webkit-scrollbar-thumb{
	background-color:#333;
	border-radius:5px;
	transition:all 0.5s;
}
.select-option::-webkit-scrollbar-track{
	background-color:#f2f2f2; 
	border-radius:0;
}
.select-option ul {margin: 0; padding: 0;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {height: auto; font-size: 1.3rem; line-height: 1.5; color: #555; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; padding: 1.5rem 0rem; display: block; overflow: hidden; cursor: pointer; text-indent:2rem;}
.select-option span:hover {background: #f2f2f2;}
.select-option span.selected {color: #000; font-weight: 600;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none; cursor: default;}

.select-option.upper {border-top: 2px solid #f2f2f2; border-bottom: 0; border-radius: 1rem 1rem 0 0;}

@media all and (max-width:800px){
	.fakeform-selectbox .select-title {text-indent: 1em; font-size: 1.4rem; line-height: 5rem;}
	.fakeform-selectbox .select-title:after{right:0.7em; font-size:2rem;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {height: auto; font-size: 1.3rem; font-weight: 500; line-height: 1.5; padding: 1.5rem 1em;}
}

/* 문의폼 :: 파일업로드 */
.upload-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } 

/* 문의폼 :: btn */
.btn-fieldset{display: flex; flex-wrap:wrap; justify-content:space-between;}
.btn-fieldset .btn-fieldset-inner{position: relative; width:calc(100% - 21rem);}
.btn-fieldset .write-btn{display: flex; align-items:center; justify-content:center; width:20rem; height:6rem; font-size:1.8rem; line-height:1.5; color:#fff; font-weight:600; background:#000; 
border-radius:1rem;}
.btn-fieldset .write-btn:before{border-color:#000;}
.btn-fieldset .write-btn:hover{color:#000;}
.btn-fieldset .write-btn.btn-style01{background:var(--main-color);}
.btn-fieldset .write-btn.btn-style01:before{border-color:var(--main-color);}
.btn-fieldset .write-btn.btn-style01:hover{color:var(--main-color);}
/* 문의폼 :: 인증번호 시간 */
#requestInput{margin-top:1rem;}
.certi-time{position: absolute; top:50%; right:3rem; text-align:right: font-size:1.2rem; font-weight:500; color:#000; transform:translateY(-50%);}

@media all and (max-width:1280px){
	.cm-write-item .cm-nation-box {flex-wrap: wrap;}
	.cm-write-item .cm-nation-box .nation01-select01 {width: 100%;}
	.cm-write-item .cm-nation-box .nation01-select02 {width: 1000%; margin-left: 0; margin-top: 1rem;}
}
@media all and (max-width:800px){
	.join-write-con{margin-bottom:4rem; padding-bottom:4rem;}
	.join-write-con{display: block; }
	.join-write-con .left-box{width:100%; margin-bottom:2rem;}
	.join-write-con .left-box .join-tit{font-size:2.6rem;}
	.join-write-con .right-box{width:100%;}
	
	.cm-write-item{display: block;}
	.cm-write-item .write-tit-box{width:100%; height:auto; margin-bottom:1rem;}
	.cm-write-item .write-tit-box .write-tit{font-size:1.4rem;}
	.cm-write-item .cm-fieldset-box{width:100%;}
	
	/* 문의폼 */
	.cm-fieldset-box .write-input,
	.cm-fieldset-box .write-select,
	.cm-fieldset-box .custom-select-box{height:5rem; text-indent:1.5rem;}
	.cm-fieldset-box .write-textarea{height:20rem; text-indent:1.5rem;}
	.cm-fieldset-box .plus-txt{font-size:1.4rem; margin:0.5rem 0;}
	/* 문의폼 :: email */
	.email-fieldset .write-input, 
	.email-fieldset .write-select,
	.email-fieldset .custom-select-box{width:calc(50% - 1.5rem);}
	.email-fieldset .hypen{width:3rem; font-size:1.4rem; line-height:5rem;}
	/* 문의폼 :: email :: style02 */
	.email-fieldset.email-style02 .write-input, 
	.email-fieldset.email-style02 .write-select,
	.email-fieldset.email-style02 .custom-select-box,
	.email-fieldset.email-style02 .fakeform-selectbox{width:calc(50% - 1.5rem);}
	.email-fieldset.email-style02 .custom-select-box,
	.email-fieldset.email-style02 .fakeform-selectbox{margin-left:0rem; margin-top:1rem; width:100% !important}
	/* 문의폼 :: Custom Select */
	.cm-fieldset-box .custom-select-trigger {line-height: 5rem;}
	.custom-select-trigger:after{font-size:2rem; }
	/* Custom Select :: Option Drop List */
	.custom-option-item { padding: 1rem 0;}
	/* 문의폼 :: fakeform */
	.select-option span,
	.select-option strong{text-indent:0;}
	/* 문의폼 :: btn */
	.btn-fieldset .btn-fieldset-inner{width:calc(100% - 16rem);}
	.btn-fieldset .write-btn{width:15rem; height:5rem; font-size:1.5rem;}
}
@media all and (max-width:480px){
	/* 문의폼 :: email */
	.btn-fieldset .btn-fieldset-inner.email-fieldset{width:100%; z-index:100;}
	.email-fieldset + .email3{order:inherit;}
	.btn-fieldset .btn-fieldset-inner.email-fieldset + .email3 + .write-btn{width:100%; margin-top:1rem;}
}

/* ****************** 회원 :: 가입완료 ********************** */
.join-finish-wrap{max-width:900px; margin:auto; background:#f5f5f5; border-radius:2rem; padding:7.4rem 3rem; box-sizing:border-box;}
.join-finish-wrap .top-logo{text-align:center; margin-bottom:2.5rem;}
.join-finish-wrap .join-finish-txt-box{text-align:center; margin-bottom:5rem;}
.join-finish-wrap .join-finish-txt-box .tit{font-size:6.4rem; letter-spacing:-0.05em; line-height:1.25; color:#000; font-weight:700; margin-bottom:1rem;}
.join-finish-wrap .join-finish-txt-box .txt{font-size:1.8rem; letter-spacing:-0.015em; line-height:1.875; color:rgba(0,0,0,0.7); font-weight:600;}
.join-finish-wrap .join-finish-txt-box .txt span{color:var(--main-color);}

@media all and (max-width:800px){
	.join-finish-wrap{padding:3rem 1.5rem;}
	.join-finish-wrap .top-logo{margin-bottom:2rem;}
	.join-finish-wrap .join-finish-txt-box{margin-bottom:3rem;}
	.join-finish-wrap .join-finish-txt-box .tit{font-size:3rem; }
	.join-finish-wrap .join-finish-txt-box .txt{font-size:1.6rem;}
}

/* ****************** 회원 :: 아이디, 비밀번호 찾기 ********************** */
.find-finish-con {width: 100%; max-width: 90rem; margin: 0 auto 5rem; height: 30rem; background: #F5F5F5; border-radius: 2rem; display: flex; align-items: center; justify-content: center; padding: 0 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.find-finish-con .inner {width: 100%; text-align: center;}
.find-finish-con .inner .txt {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.015em; color: #000; line-height: 1.375;}
.find-finish-con .inner .txt span {display: inline-block; color: var(--main-color)}
.find-finish-con .inner .sub-txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.016em; color: #999999; line-height: 1.3; margin-top: 1.5rem;}
.login-find-page .cm-btn-controls button, 
.login-find-page .cm-btn-controls a {    max-width: 30rem; margin: 0 auto;}
@media all and (max-width:800px){
	.find-finish-con {padding: 0 1rem;}
	.find-finish-con .inner .txt {font-size: 2rem;}
	.find-finish-con .inner .sub-txt {font-size: 1.5rem;}
}
@media all and (max-width:480px){
	.login-page .cm-btn-controls button, 
	.login-page .cm-btn-controls a,
	.login-find-page .cm-btn-controls button, 
	.login-find-page .cm-btn-controls a {max-width: none;}
}


/* ****************** 마이페이지 ********************** */
/* 마이페이지 :: 메인 */
#mypageWrap{display: flex; justify-content:space-between; padding-top:4rem; border-top:2px solid #000;}
/* 마이페이지 :: 좌측메뉴 */
#mypageMenu{position: relative; width:27rem; padding-right:5rem; box-sizing:border-box; }
#mypageMenu:before{position: absolute; content:''; width:1px; height:100%; border-left:1px solid #eee; top:0; right:-2px;}
.mypage-menu-inner{padding:2rem 0 3rem; border-bottom:1px solid #eee;}
.mypage-menu-inner:last-child{border-bottom:0;}
.mypage-menu-inner .mypage-menu-tit{font-size:2rem; line-height:2; letter-spacing:-0.05em; color:#000; font-weight:700;}
.mypage-menu-inner .mypage-menu{}
.mypage-menu-inner .mypage-menu li{margin:1rem 0;}
.mypage-menu-inner .mypage-menu li:last-child{margin-bottom:0;}
.mypage-menu-inner .mypage-menu li a{font-size:1.4rem; line-height:1.5; letter-spacing:-0.05em; color:#888; font-weight:500; transition:var(--transition-custom);}
/* active */
.mypage-menu-inner .mypage-menu li.active a,
.mypage-menu-inner .mypage-menu li a:hover{color:var(--main-color);}

/* 마이페이지 :: 우측메뉴 */
#mypageCon{position: relative; width:calc(100% - 27rem); padding-left:5rem; box-sizing:border-box; }
.mypage-con-inner{position: relative; border-bottom:2px solid #000; padding-bottom:6rem;}
.mypage-con-inner:before{position: absolute; content:''; width:1px; height:calc(100% - 4rem); border-left:1px solid #eee; top:0; left:-5rem;}
.mypage-con-inner.bd-no{border-bottom:0; padding-bottom:0;}
.mypage-con-inner.bd-no:before{height:calc(100% - 8rem);}
.mypage-con{border:2px solid #eee; box-sizing:border-box; border-radius:1rem; padding:4rem; margin-bottom:2rem;}
.mypage-con:last-child{margin-bottom:0;}
/* 마이페이지 :: 공통 :: 타이틀 */
.mypage-tit-box{display: flex; justify-content:space-between; align-items:flex-end;}
.mypage-tit-box .mypage-tit{font-size:2rem; line-height:1.5; letter-spacing:-0.05em; color:#000; font-weight:700;}
.mypage-tit-box .plus-txt{font-size:1.4rem; line-height:1.15; letter-spacing:-0.05em; color:#888; font-weight:500;}
.mypage-txt{font-size:1.6rem; line-height:1.875; letter-spacing:-0.06em; color:#888;}
.mypage-tit-box + .mypage-txt{margin-top:3.5rem;}

.mypage-modify-con .mypage-con {margin-bottom: 4rem;}
.mypage-modify-con .mypage-tit-box + .mypage-txt{margin-top:1.5rem;} 
/* 마이페이지 :: 공통 :: 버튼 */
.mypage-btn-list{display: flex; margin:0 -0.5rem;}
.mypage-btn-list .mypage-btn{display: flex; align-items:center; justify-content:center; height:4rem; border-radius:4rem; border:2px solid #000; background:#000; margin:0 0.5rem; box-sizing:border-box; font-size:1.5rem; letter-spacing:-0.06em; color:#fff; font-weight:700; padding:0 2rem; text-align:center;}
.mypage-btn-list .mypage-btn.cm-fill-btn:before{display: none;}
.mypage-btn-list .mypage-btn.btn-style01{border-color:var(--main-color); background:var(--main-color);}
.mypage-btn-list .mypage-btn.btn-style02{border-color:#ddd; background:#fff; color:#000;}
.mypage-btn-list .mypage-btn.btn-style02.cm-fill-btn .cm-fill{background:#ddd;}

/* 마이페이지 :: 인덱스 :: 상단 */
.mypage-index-top{display: flex; align-items:center; justify-content:space-between;}
/* 마이페이지 :: 인덱스 :: 리스트 */
.mypage-index-list{display: flex; border-top:1px solid #eee; padding-top:4rem; margin-top:2rem;}
.mypage-index-list .list-item{position: relative; width:50%; text-align:center; padding:0 1rem; box-sizing: border-box;}
.mypage-index-list .list-item:before{position: absolute; content:''; width:1px; height:6rem; top:50%; right:0; transform:translateY(-50%); background:#eee;}
.mypage-index-list .list-item:last-child:before{display: none;}
.mypage-index-list .list-item .tit{font-size:1.4rem; line-height:1.5; color:#000; font-weight:500;}
.mypage-index-list .list-item .num{display: inline-block; font-size:4rem; line-height:1; color:#000; font-weight:700; margin-top:2rem;}
/* no-items */
.mypage-index-list .list-item.no-items .num{color:#ccc}

/* 마이페이지 :: 정보수정 */
#mypageCon .join-write-con .left-box{width:20%; padding:1.8rem 2rem; box-sizing:border-box;}
#mypageCon .join-write-con .left-box .join-tit{font-size:2.4rem; letter-spacing:0.024em;}
#mypageCon .join-write-con .right-box{width:80%;}

.mypage-con-inner + .cm-btn-controls{margin-top:6rem;}

/* 마이페이지 :: 대리점회원 전환신청 */
.mypage-con:has(.mypage-inquiry-box){margin-bottom:4rem;}
.mypage-inquiry-box{display: flex; justify-content:space-between; align-items:center; border-top:2px solid #000; padding:3rem 0 2rem; margin-top:2.5rem;}
.mypage-inquiry-box .inquiry-txt{display: flex; font-size:1.6rem; letter-spacing:-0.015em; line-height:1.5; color:#000;}
.mypage-inquiry-box .inquiry-txt dt{font-weight:700; width:11rem;}
.mypage-inquiry-box .inquiry-txt dd{font-weight:500; width:calc(100% - 11rem);}
.mypage-inquiry-box .mypage-btn{ min-width:14rem;}

/* 마이페이지 :: 내가 작성한 글 */
@media all and (min-width:801px){
	#mypageCon .bbs-list-style01 {}
	#mypageCon .bbs-list-style01 .bbs-item {}
	#mypageCon .bbs-list-style01 .bbs-item a {height: 8.4rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-num {width: 10rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-state {width: 8rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-info-con {width: calc(100% - 39rem); padding: 0 2rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt {font-size: 2rem; }
}

.bbs-list-style01 .bbs-item a .bbs-list-category {text-align: center; width: 13rem; font-size: 1.6rem; font-weight: 700; color: var(--main-color); letter-spacing: -0.04em; line-height: 1.3;}


/* ***** 마이페이지 :: 문의구분 ***** */
.fakeform-selectbox.contact-fakeform {max-width: 24rem;}
.fakeform-selectbox.contact-fakeform .select-title {line-height: 5rem; border-radius: 2.5rem; color: #fff; background: #000;}
.fakeform-selectbox.contact-fakeform .select-title:after {color: #fff;}
.fakeform-selectbox.contact-fakeform .select-title.active { border-radius: 2.5rem 2.5rem 0 0;}


/* ****************** 마이페이지 ********************** */
@media all and (max-width:1280px){
	/* 마이페이지 :: 정보수정 */
	#mypageCon .join-write-con{display: block;}
	#mypageCon .join-write-con .left-box{width:100%; padding-inline:0; margin-bottom:0;}
	#mypageCon .join-write-con .right-box{width:100%;}
}
@media all and (max-width:800px){
	/* 마이페이지 :: 메인 */
	#mypageWrap{flex-direction:column-reverse;}
	/* 마이페이지 :: 좌측메뉴 */
	#mypageMenu{display: flex; flex-wrap:wrap; width:100%; padding-right:0rem; margin-top:5rem;}
	#mypageMenu:before{display: none;}
	#mypageMenu .mypage-menu-inner{width:50%; padding:1rem 0; }
	#mypageMenu .mypage-menu-inner:nth-last-child(-n+2){border:none;}
	/* 마이페이지 :: 우측메뉴 */
	#mypageCon{width:100%; padding-left:0;}
	.mypage-con-inner{position: relative; border-bottom:2px solid #000; padding-bottom:6rem;}
	.mypage-con-inner:before{display: none;}
	.mypage-con{padding:3rem 1.5rem;}
	/* 마이페이지 :: 공통 :: 타이틀 */
	.mypage-tit-box{}
	.mypage-tit-box .mypage-tit{font-size:1.8rem;}
	.mypage-tit-box .plus-txt{font-size:1.4rem;}
	.mypage-txt{font-size:1.4rem;}
	.mypage-tit-box + .mypage-txt{margin-top:2rem;}
	/* 마이페이지 :: 공통 :: 버튼 */
	.mypage-btn-list{display: flex; margin:0 -0.5rem;}
	.mypage-btn-list .mypage-btn{font-size:1.4rem; padding:0 1.5rem;}
	/* 마이페이지 :: 인덱스 :: 리스트 */
	.mypage-index-list{flex-wrap:wrap; padding-top:1rem; margin:2rem 0 -2rem;}
	.mypage-index-list .list-item{width:25%; margin:2rem 0;}
	.mypage-index-list.list05 .list-item{width:20%;}
	.mypage-index-list:not(.list05) .list-item:nth-child(4n):before{display: none;}
	.mypage-index-list .list-item .num{font-size:3rem;}
	
	/* 마이페이지 :: 대리점회원 전환신청 */
	.mypage-con:has(.mypage-inquiry-box){margin-bottom:3rem;}
	.mypage-inquiry-box{display: block; padding:2rem 0 1.5rem; margin-top:2rem;}
	.mypage-inquiry-box .mypage-btn{width:100%; margin-top:2rem;}
	
	/* 마이페이지 :: 내가 작성한 글 */
	.bbs-list-style01 .bbs-item a .bbs-list-category {width:100%; text-align:left; margin-bottom:1rem;} 
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt {font-size: 2rem; }
}
@media all and (max-width:480px){
	.mypage-index-top{display: block;}
	.mypage-index-top .mypage-tit-box{margin-bottom:1rem;}
}

/* 제품페이지 :: 원형 인트로 효과 */
.sub-intro-circle-wrap{position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* transform:scale(2); */ opacity:0; transition:all 1s ease-in-out;}
#visual.active .sub-intro-circle-wrap{/* transform:scale(1); */ opacity:1;}

@media all and (min-width:801px){
	#visual.active.top-fixed .sub-intro-circle-wrap{/* transform:scale(2); */ opacity:0; width:200%; height:200%; margin-left:-50%; margin-top:-10%;}
}

/* ****************** Cookies Settings Center ********************** */
.cookie-con {padding: 5rem 0 0; border-top: 1px solid #000;}
.cookie-con .cookie-txt-con {padding-bottom: 5rem;}
.cookie-con .cookie-txt-con strong {display: block; font-size: 3.2rem;font-weight: 700;letter-spacing: -0.02em;color: #000; line-height: 1.2;margin-bottom: 2rem;}
.cookie-con .cookie-txt-con .txt {font-size: 1.8rem; font-weight: 400;  letter-spacing: -0.02em;color: #000;  line-height: 1.75;}
.cookie-con .cookie-txt-con .txt a {color: #000; border-bottom: 1px solid #000; font-weight: 700;}
.cookie-con .join-agree-con {margin-bottom: 3rem;}
.cookie-inner {padding: 2rem 0 4rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.cookie-inner .cookie-txt { font-size: 1.8rem; line-height: 1.67; color: #000;}

.cookie-btn-controls{overflow:hidden; display:flex; align-items:center; justify-content:space-between; text-align:center; margin-top:50px;}
.cookie-btn-controls .left-btn-controls,
.cookie-btn-controls .right-btn-controls{display:flex; margin: 0 -0.5rem;}
.cookie-btn-controls button,
.cookie-btn-controls a {width: 25rem; margin: 0 0.5rem;} 
.cookie-btn-controls .btn-style01:hover {color: #fff;}

@media all and (max-width:800px){
	.cookie-btn-controls button,
	.cookie-btn-controls a {width: 16rem;}
}
@media all and (max-width:480px){
	.cookie-btn-controls {display: block;}
	.cookie-btn-controls .left-btn-controls,
	.cookie-btn-controls .right-btn-controls {display: block;}
	.cookie-btn-controls button,
	.cookie-btn-controls a {width: 100%;  margin: 0 auto 1rem;}
}

/* ****************** 03 로봇교육 :: 교육프로그램 ********************** */
.trn-program-top-wrap {position: relative;}
/*.trn-program-top-wrap:before {position: absolute; content: ''; width: 20rem; height: 20rem;  border-radius: 50%; bottom: -10rem; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 50%; z-index: 1;}*/
.trn-program-top {position: relative; height: 70rem;}
.trn-program-top:before {position: absolute; bottom: 0; right: 50%; content: ''; width: 50%; height: 100%; background: #fff; transition: all 1.0s; z-index: 1;}
.trn-program-top:after {position: absolute; bottom: 0; left: 50%; content: ''; width: 50%; height: 100%; background: #fff; transition: all 1.0s; z-index: 1;}
.trn-program-top-scroll {position: absolute;  top: 0; left: 0; width: 100%; height: 100%;text-align: center;  border-radius: 4rem; overflow: hidden;}
.trn-program-top-scroll .trn-program-top-bg span {display: block;position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 0;padding-top: 40.7%;}
.trn-program-top-scroll .trn-program-top-bg span img {position: absolute; top: 0;  left: 50%;transform: translateX(-50%); width: 1720px;}
.trn-program-top .inner {position: relative; display: flex; align-items: center; justify-content: space-between; text-align: center; width: 100%;height: 100%; box-sizing: border-box;}
.trn-program-txt-box {width: 100%;}
.trn-program-txt-box .sub-tit {font-size:1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--main-color); line-height: 1.3; margin-bottom: 2rem;}
.trn-program-txt-box .tit {font-size: 4.8rem; font-weight: 700; letter-spacing: -0.025em; color: #fff; line-height: 1.25;}
.trn-program-txt-box .txt {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.83; padding-top: 3rem;}
.trn-program-scoll-btn {position: absolute; bottom: -8.75rem; left: 50%; transform:translateX(-50%); display: block; width: 17.5rem; height: 17.5rem; background: var(--main-color); border-radius: 50%; box-sizing: border-box; z-index: 2; transition: transform 0.4s ease-in-out, bottom 2.0s; }
.trn-program-scoll-btn .inner {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; padding: 1rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.trn-program-scoll-btn .inner:before {position: absolute; content: ''; width: 1.2rem; height: 1.2rem; border-radius: 50%; background-color: #fff; top: 50%; left: 50%; margin: -0.6rem 0 0 -0.6rem;}
.trn-program-scoll-btn .inner img {max-width: 100%;	animation: trn_program_scoll 12s linear infinite; }
.trn-program-scoll-btn:hover {transform:translateX(-50%) scale(0.9); }
@keyframes trn_program_scoll {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}
/* active */
.training-program-page.active .trn-program-top:before { right: 100%; transition-delay: 0.2s;}
.training-program-page.active .trn-program-top:after { left: 100%; transition-delay: 0.2s;}


.trn-program-con01 {padding: 21rem 0 19rem;}
.trn-program-list li {position: relative; margin: 6rem 0; height: 12rem;}
.trn-program-list li .inner {position: absolute; top: 0; display: flex; align-items: center;}
.trn-program-list li .inner .tit {font-size: 8rem; font-weight: 700; letter-spacing: -0.025em; color: #000; line-height: 1; white-space:nowrap}
.trn-program-list li .inner .img01 {width: 20rem; height: 12rem; border-radius: 20rem; margin-left: 6rem;}
.trn-program-list li .inner .img01 img {max-width: 100%;}
.trn-program-list li .inner .img02 {width: 35rem; height: 12rem; border-radius: 6rem; box-shadow: 1rem 1.5rem 2rem rgba(0, 0, 0, 0.2); margin-left: 4rem;}
.trn-program-list li .inner .txt {font-size: 3.4rem; font-weight: 600; letter-spacing: -0.025em; color: rgba(0,0,0,0.4); line-height: 1; white-space:nowrap; margin-left: 4rem;}
/* dir */
.trn-program-list li.dir-rl .inner {left: calc((100vw - 1320px)/2);}
.trn-program-list li.dir-lr .inner {right: calc((100vw - 1320px)/2); flex-direction: row-reverse;}
.trn-program-list li.dir-lr .inner .img01 {margin-left: 0; margin-right: 6rem;}
.trn-program-list li.dir-lr .inner .img02 {margin-left: 0; margin-right: 4rem;}
.trn-program-list li.dir-lr .inner .txt {margin-left: 0; margin-right: 4rem;}
/* item */
.trn-program-item01 .inner .img01 {background: radial-gradient(closest-side at 32% 23%, rgba(248, 155, 108, 1) 0%, rgba(217, 94, 0, 1) 100%) 0% 0% no-repeat padding-box;}
.trn-program-item01 .inner .img01 span {display: block; width:12.6rem; position: relative; top: -2rem; margin: 0 auto;}
.trn-program-item01 .inner .img02 {background: url(../images/content/trn_program_con01_img02.jpg)no-repeat center/cover;}
.trn-program-item02 .inner .img01 {background: #E8E9E8;}
.trn-program-item02 .inner .img01 span {display: block; width:12rem; position: relative; top: -2rem; margin: 0 auto;}
.trn-program-item02 .inner .img02 {background: url(../images/content/trn_program_con01_img03.jpg)no-repeat center/cover;}
.trn-program-item03 .inner .img01 {background: radial-gradient(closest-side at 26% 29%, #2C354A 0%, #000000 100%) 0% 0% no-repeat padding-box;}
.trn-program-item03 .inner .img01 span {display: block; width:15.7rem; position: relative; top: -3.4rem; left: 4rem;}
.trn-program-item03 .inner .img02 {background: url(../images/content/trn_program_con01_img06.jpg)no-repeat center/cover;}

.trn-program-con02 {padding-bottom: 15rem;}
.trn-program-con02 .trn-program-txt-box {text-align: center; margin-bottom: 8rem;}
.trn-program-con02 .trn-program-txt-box .tit {color: #000;}
.trn-why-con {margin-left: -30px;}
.trn-why-accordion-list { display: flex; width: 100%;}
.trn-why-accordion-list .accordion-item {position: relative; white-space: nowrap;}
.trn-why-accordion-list .accordion-inner {position: relative; overflow: hidden; width: 100%; height: 70rem;}
.trn-why-accordion-list .inner-con {position: relative; margin-left: 30px; width: calc(100% - 30px); height: 100%; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; padding-top: 7.5rem; border-radius: 0 0 5rem 5rem; background: #F5F5F5;}
.trn-why-accordion-list .accordion-item01 .inner-con {border-top: 5px solid #FBB584;}
.trn-why-accordion-list .accordion-item02 .inner-con {border-top: 5px solid #F89B6C;}
.trn-why-accordion-list .accordion-item03 .inner-con {border-top: 5px solid #F37321;}
.trn-why-accordion-list .accordion-item .txt-box {text-align: center;}
.trn-why-accordion-list .accordion-item .txt-box .num {font-size: 1.7rem; font-weight: 700; letter-spacing: -0.05em; color: var(--main-color); line-height: 1.1; margin-bottom: 2.5rem;}
.trn-why-accordion-list .accordion-item .txt-box .txt01 {font-size: 2.8rem; font-weight: 700; letter-spacing: -0.05em; color: #000; line-height: 1.42; }
.trn-why-accordion-list .accordion-item .txt-box .txt02 {font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; color: rgba(0,0,0,0.54); line-height: 1.6; padding-top: 2rem; opacity: 0; transition: all 0.4s ease;}
.trn-why-accordion-list .img-box {position: absolute; width: 65rem; margin-left: 15px; bottom: -10.2rem; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.2s ease;}
.trn-why-accordion-list .img-box img {max-width: 100%;}
.trn-why-accordion-list .point-box {position: absolute; left: 50%; bottom: 8.5rem; transform: translateX(-50%);  width: 7.5rem; height: 7.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;  border: 4px solid rgba(0,0,0,0.1); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; transition: all 0.4s ease;}
.trn-why-accordion-list .point-box .wave-bg {position: absolute; left: 50%;top: 50%; width: 7.5rem;height: 7.5rem;transform: translate(-50%, -50%); transition: var(--transition-custom2);}
.trn-why-accordion-list .point-box .wave-bg span{border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; -webkit-animation-fill-mode: both;animation-fill-mode: both;position: absolute;left: 0;top: 0px;opacity: 0;margin: 0;width: 100%;height: 100%; -webkit-animation: wave-circle 2.5s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; animation: wave-circle 2.5s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.trn-why-accordion-list .point-box .wave-bg span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.trn-why-accordion-list .point-box .wave-bg span:nth-child(2) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.trn-why-accordion-list .point-box i {font-size: 2.4rem; color: #000;}
@keyframes wave-circle {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
		opacity: 0; 
	}
}
/* active */
.trn-why-accordion-list .accordion-inner.active .inner-con {background: linear-gradient(0deg, rgba(243, 115, 33, 0.2), rgba(243, 115, 33, 0.05));}
.trn-why-accordion-list .accordion-inner.active .txt-box .txt01 {font-size: 3.8rem;}
.trn-why-accordion-list .accordion-inner.active .txt-box .txt02 {opacity: 1;}
.trn-why-accordion-list .accordion-inner.active + .img-box {opacity: 1;}
.trn-why-accordion-list .accordion-inner.active .point-box {opacity: 0;}

.trn-program-con03 {position: relative; padding: 15rem 0 23rem; background: linear-gradient(120deg, rgba(249, 249, 249, 1) 0%, rgba(238, 238, 238, 1) 100%)}
.trn-program-con03 .bg {position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; }
.trn-program-con03 .bg span {display: block; width: 50%; height: 100%;}
.trn-curriculum-con {display: flex; position: relative; z-index: 1;}
.trn-curriculum-con .left-con {width: 50%;}
.trn-curriculum-con .trn-program-txt-box .tit {color: #000;}
.trn-curriculum-con .right-con {width: 50%;}
.trn-curriculum-list {border-top: 2px solid #000;}
.trn-curriculum-list li {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 5rem 2rem; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.1);}
.trn-curriculum-list li dl {width: calc(100% - 8rem);}
.trn-curriculum-list li dl dt {font-size: 3rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.2;}
.trn-curriculum-list li dl dd {font-size: 1.8rem; font-weight: 600; letter-spacing: -0.02em; color: rgba(0,0,0,0.5); line-height: 1.7; padding-top: 1rem;}
.trn-curriculum-list li .icon {display: inline-block; width: 5.5rem; }
.trn-curriculum-list li .icon img {max-width: 100%;}
.trn-program-flow-txt {position: absolute; bottom: 0; left: 0; width: 100%; }
.trn-program-flow-txt  .inner {position: relative; width: 100%; height: 12.7rem; overflow: hidden;}
.trn-program-flow-txt .flow-txt {width: 100%;height: 100%; position: absolute; top: 0; left: 0; z-index: 2; mix-blend-mode: lighten;}
.trn-program-flow-txt .maskBg {width: 100%; height: 100%;  display: flex; align-items: center; overflow: hidden;} 
.trn-program-flow-txt .maskBg .marquee {width: 100%; height: 100%; position: relative;}
.trn-program-flow-txt .maskBg .marquee .absol {position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; }
.trn-program-flow-txt .maskBg .marquee .absol .mar_ch {height: 100%; display: flex; align-items: center; white-space:nowrap;}
.trn-program-flow-txt .maskBg .marquee .absol .mar_ch img {max-height: 100%; margin-right: 8rem;}

.sub-wrap #bottomInquiryCon.trn-bottom-inquiry {padding: 15rem 0 0;}
.sub-wrap .trn-bottom-inquiry .cm-fill-btn.btn-style01:before {border: 2px solid var(--main-color); border-radius: 4rem;}
.sub-wrap .trn-bottom-inquiry .cm-fill-btn.btn-style03:before {border: 2px solid #fff; border-radius: 4rem;}

@media all and (max-width:1380px){ 
	.trn-program-list li.dir-rl .inner {left: 15rem;}
	.trn-program-list li.dir-lr .inner {right: 15rem;}
}
@media all and (max-width:1280px){ 
	.trn-program-top {}
	.trn-program-list li .inner .tit {font-size: 6rem;}

	.trn-why-accordion-list .accordion-inner {height: 64rem;}
	.trn-why-accordion-list .img-box {width: 80%; bottom: -7rem;}
	.trn-why-accordion-list .accordion-inner.active .txt-box .txt01 {font-size: 3.4rem;}
	
	.trn-program-con03 .bg span {width: 58%;}
}
@media all and (max-width:800px){ 
	.trn-program-top {height: 56rem;}
	.trn-program-txt-box .tit {font-size: 3.2rem;}
	
	.trn-program-top-wrap:before {width: 16rem; height: 16rem; bottom: -8rem;}
	.trn-program-scoll-btn {width: 14rem; height: 14rem;}
	.trn-program-scoll-btn .inner {padding: 0.7rem;}
	.training-program-page.active .trn-program-scoll-btn {bottom: -7rem; transition-delay: 0.5s;}

	.trn-program-con01 {padding: 15rem 0 12rem;}
	.trn-program-list li .inner .tit {font-size: 4.8rem;}
	.trn-program-list li {height: 10rem;}
	.trn-program-list li.dir-rl .inner {left: 10rem;}
	.trn-program-list li.dir-lr .inner {right: 10rem;}
	.trn-program-list li .inner .img01 {width: 18rem; height: 10rem; margin-left: 4rem;}
	.trn-program-list li .inner .img02 {width: 27rem; height: 10rem; margin-left: 3rem;}
	.trn-program-list li .inner .txt {font-size: 2.2rem; margin-left: 3rem;}
	.trn-program-list li.dir-lr .inner .img01 {margin-left: 0; margin-right: 4rem;}
	.trn-program-list li.dir-lr .inner .img02 {margin-left: 0; margin-right: 3rem;}
	.trn-program-list li.dir-lr .inner .txt {margin-left: 0; margin-right: 3rem;}
	
	.trn-program-con02 {padding-bottom: 10rem;}
	.trn-program-con02 .trn-program-txt-box {margin-bottom: 5.5rem;}
	.trn-why-con {margin-left: 0;}
	.trn-why-accordion-list {display: block;}
	.trn-why-accordion-list .accordion-item {margin-bottom: 8rem;}
	.trn-why-accordion-list .accordion-inner {width: 100%; height: 56rem;}
	.trn-why-accordion-list .inner-con {margin-left: 0; width: 100%; padding-top: 5.5rem; background: linear-gradient(0deg, rgba(243, 115, 33, 0.2), rgba(243, 115, 33, 0.05)); }
	.trn-why-accordion-list .accordion-item .txt-box .txt01 {font-size: 2.2rem; }
	.trn-why-accordion-list .accordion-item .txt-box .txt01 br {display: none;}
	.trn-why-accordion-list .accordion-item .txt-box .txt02 {font-size: 1.8rem; opacity: 1;}
	.trn-why-accordion-list .img-box {opacity: 1; margin-left: 0; width: 76%; bottom: -5rem;}
	.trn-why-accordion-list .point-box{display: none;}

	.trn-program-con03 {padding: 10rem 0 40rem;}
	.trn-program-con03 .bg {display: flex; align-items: flex-end;}
	.trn-program-con03 .bg span  {width: 100%; height: 45%;}
	.trn-curriculum-con {display: block;}
	.trn-curriculum-con .left-con {width: 100%; margin-bottom: 5rem;}
	.trn-curriculum-con .right-con {width: 100%;}
	.trn-curriculum-list li {padding: 4rem 2rem;}
	.trn-curriculum-list li dl dt {font-size: 2.4rem;}
	.trn-program-flow-txt  .inner {height: 6.5rem;}

	.sub-wrap #bottomInquiryCon.trn-bottom-inquiry {padding: 10rem 0 0;}

}
@media all and (max-width:480px){ 
	.trn-why-accordion-list .accordion-inner {height: 43rem;}
	.trn-why-accordion-list .accordion-item .txt-box {padding: 0 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
}

/* ****************** 03 로봇교육 :: 오프라인교육 ********************** */
/* **** 리스트페이지 **** */
.offline-training-wrap {position: relative; display: flex; padding: 40px 0; border-top: 2px solid #000;}
.training-filter-con {width: 20rem;  box-sizing: border-box;}
.training-filter-box {width: 16rem; transition: top 0.4s ease-in-out;}
.training-filter-box .inner {width: 100%;}
.training-filter-box .reset-btn {width: 100%; height: 5rem; border-radius: 1rem; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem 0 2rem; font-size: 1.4rem; color: #fff; font-weight: 700; margin-bottom: 1rem;}
.training-filter-box .reset-btn i {font-weight: 400; font-size: 2.4rem;}
.training-filter-item {width: 100%; margin-bottom: 1rem; padding: 0 2rem; box-sizing: border-box; background-color: #F5F5F5; border-radius: 1rem;}
.training-filter-item dt {position: relative;padding:1.7rem 0; font-size: 1.4rem;font-weight: 700; letter-spacing: -0.01em; color: #000;;}
.training-filter-item dt:before { position: absolute; content: '\e942'; top: 50%; margin-top: -1.2rem; right: 0; font-size: 2.4rem; color: #000; font-weight: 400; font-family: xeicon;}
.training-filter-item dt.open:before {content: '\e945'}
.training-filter-item dd {position: relative; padding: 0.7rem 0;}
.training-filter-item dd:after {position: absolute; content: ''; width: 100%; height: 1px; background: rgba(0,0,0,0.15); left: 0; top: 0; }
.training-filter-item .filter-check-list .check-item {padding: 1.2rem 0;}
.training-filter-item .filter-check-list .check-item input {display: none;}
.training-filter-item .filter-check-list .check-item label {font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; color: #000; opacity: 0.5; transition: all 0.2s;}
.training-filter-item .filter-check-list .check-item input:checked + label {opacity: 1; font-weight: 700;}
.training-date-box {width: 100%; border-top: 1px solid #EEEEEE;}
.training-date-box .date-item {position: relative; margin-top: 1rem; border-radius: 1rem; background: #F5F5F5;}
.training-date-box .date-item input {width: 100%; height: 5rem; line-height: 5rem; padding: 0 4rem 0 2rem; box-sizing: border-box; border: 0; background: transparent; outline: none; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: #000;} 
.training-date-box .date-item input::placeholder {color: #000;}
.training-date-box .date-item::before {position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); content: '\e9a4'; font-family: xeicon; font-size: 2.4rem; color: #000;}

.training-list-con {width: calc(100% - 20rem); padding-left: 3.9rem; border-left: 1px solid #EEEEEE;}
.training-list {display: flex; flex-wrap: wrap; margin:-1.5rem;}
.training-list li {width: calc(33.333% - 3rem); margin: 1.5rem;}
.training-list li .inner {position: relative; display: block; width: 100%; height: 100%; background: #F5F5F5; border-radius: 2rem; padding: 2.4rem 0 7rem; box-sizing: border-box;}
.training-list li .inner .thumbnail-box {position: relative; width: 100%; height: 0; padding-top: 58.82%;}
.training-list li .inner .thumbnail-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.training-list li .inner .info-box {padding: 3.5rem 4rem; box-sizing: border-box;}
.training-list li .inner .info-box .tit {font-size: 2.8rem; font-weight: 700; letter-spacing: -0.023em; color: #000; line-height: 1.3; margin-bottom: 1.4rem;}
.training-list li .inner .info-box .txt {position: relative; padding-left: 2.8rem; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; color: #888888; line-height: 1.5; margin: 0.4rem 0;}
.training-list li .inner .info-box .txt:first-of-type {margin-top: 0;}
.training-list li .inner .info-box .txt:last-of-type {margin-bottom: 0;}
.training-list li .inner .info-box .txt:before {position: absolute; font-family: xeicon; top: -0.2rem; left: 0; font-size: 1.6rem;}
.training-list li .inner .info-box .txt.date:before {content:"\e9a4"}
.training-list li .inner .info-box .txt.loca:before {content:"\eb59"}
.training-list li .inner .info-box .txt.num:before {content:"\e9f5"}
.training-list li .inner .info-box .txt.price:before {content:"\ea74"}
.training-list li .inner .info-box .txt.robot i {position: absolute; top: 0.5rem; left: 0; font-size: 1.6rem;}
.training-list li .inner .info-box .txt.date span {display: block;}
.training-list li .inner .btn-box {position: absolute; bottom: 2rem; left: 0; width: calc(100% + 1rem); padding: 0 2rem; display: flex; margin: 0 -0.5rem; box-sizing: border-box; z-index: 1;}
.training-list li .inner .btn-box .cm-fill-btn {display: flex; align-items: center; justify-content: center; width: calc(50% - 1rem); margin: 0 0.5rem; height: 5rem; border-radius: 1rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.036em; box-sizing: border-box;}
.training-list li .inner .btn-box .cm-fill-btn:before {border: 2px solid #000;}
.training-list li .inner .btn-box .cm-fill-btn em ,
.training-list li .inner .btn-box .cm-fill-btn em b {font-weight: 600;}
.training-list li .inner .btn-box .training-btn {background: #000; color: #fff;}
.training-list li .inner .btn-box .training-btn.end {background: #DDDDDD; color: #888888; }
.training-list li .inner .btn-box .training-btn.end::before {border: 2px solid #DDDDDD;}
.training-list li .inner .btn-box .training-btn.end .cm-fill {display: none !important;}
.training-list li .inner .btn-box .inquiry-btn {background: #F5F5F5; color: #000; } 
.training-list-con.fold li:nth-child(n+7) {display: none;}

@media all and (min-width:801px){ 
	.training-list li .inner .btn-box .training-btn:hover {color: #000;}
	.training-list li .inner .btn-box .training-btn.end:hover {color: #888888 !important;}
}

/* 더보기버튼 */
.training-more-btn-box{position:relative; text-align:center; padding: 10rem 0;}
.training-more-btn-box:before{position:absolute; top:50%; left:0; width:100%; height:2px; margin-top: -1px; background-color:#000; content:""; z-index: 1;}
.training-more-btn {overflow:hidden; display: inline-block; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius:50%; z-index: 2;}
.training-more-btn-icon{display: block; position: relative; top: 1rem; margin-top: 0.5rem; font-size:2.4rem; color: #000; transition:color 0.5s}
.training-more-btn-icon i {line-height: 2.4rem;}
.training-more-btn-box.open:after {display: none;}
.training-more-btn-box.open .training-more-btn-icon {transform: rotate(-180deg)}
.training-more-btn-inner {position: relative; width: 12rem;  height: 12rem; visibility: inherit;	display: flex; flex-direction:column; justify-content: center;  align-items: center;text-align: center;}
.training-more-btn-inner strong {font-size: 1.6rem; font-weight: 600; letter-spacing: -0.036em; color: #000; line-height: 1.3; display: block;  transition:color 0.5s}
.training-more-btn-inner strong em {font-weight: 600;}
.training-more-btn-line { position: absolute; top: 0; left: 0;width: 100%;height: 100%;}
.training-more-btn-line svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #000;
    stroke-width: 2px;
    fill: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@media all and (min-width:801px){ 
	.training-filter-box.top-fixed {position: fixed; top: calc(var(--sub-menu-height) + 60px);}
	.scroll-up .training-filter-box.top-fixed {top:  calc(var(--header-height) + var(--sub-menu-height) + 60px);}
	.training-filter-box.bottom-fixed {position: absolute; bottom: 4rem;}
}

@media all and (max-width:1280px){
	.training-list li .inner .info-box {padding: 3rem;}
	.training-list li .inner .info-box .tit {font-size: 2.6rem;}
}
@media all and (max-width:800px){
	.offline-training-wrap {display: block;}
	.training-filter-con {position: relative; width: 100%; padding-right: 0; padding-bottom: 5rem;}
	.training-filter-box  {width: calc(100% + 1rem); }
	.training-filter-box .inner {display: flex; flex-wrap: wrap; margin: -1rem -0.5rem;}
	.training-filter-box .reset-btn ,
	.training-filter-item {width: calc(33.333% - 1rem); margin: 1rem 0.5rem;}
	.training-filter-item {padding: 0; position: relative; background-color: transparent; }
	.training-filter-item dt {padding: 0 2rem; height: 5rem;  display: flex; align-items: center; justify-content: space-between; background-color: #F5F5F5; border-radius: 1rem; transition: all 0.2s;}
	.training-filter-item dt.open {border-radius: 1rem 1rem 0 0; }
	.training-filter-item dt:before {right: 1.5rem;}
	.training-filter-item dd {position: absolute; top: 100%; left: 0; width: 100%; display: none; padding: 0.7rem 2rem; background-color: #F5F5F5; border-radius: 0 0 1rem 1rem; z-index: 100; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; }
	.training-filter-item dd:after {display: none;}
	.training-date-box {display: flex; justify-content: space-between; width: calc(100% - 1rem); margin: 0 0.5rem; }
	.training-date-box .date-item {width: calc(50% - 0.5rem); }
	.training-list-con {width: 100%; padding-left: 0; border-left: 0;}
	
	.training-list li {width: calc(50% - 3rem);}
	.training-list li .inner .info-box {padding: 2.5rem;}
	.training-list li .inner .info-box .tit {font-size: 2.2rem;}
	.training-list li .inner .btn-box .cm-fill-btn {font-size: 1.4rem;}
}
@media all and (max-width:480px){
	.training-list li {width: calc(100% - 3rem);}
}

/* **** 상세페이지 **** */
.cm-offline-wrap {position: relative; display: flex; padding: 4rem 0; border-top: 2px solid #000;}
.cm-offline-wrap .left-con {width: calc(100% - 44rem); padding-right: 4rem; border-right: 1px solid #EEEEEE; box-sizing: border-box;}
.cm-offline-wrap .right-con {width: 44rem; padding-left: 4rem; box-sizing: border-box;}
.offline-view-con {min-height: 80rem;}
.offline-view-top {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 11rem; padding: 0 3.9rem; border: 2px solid #EEEEEE; border-radius: 1rem; box-sizing: border-box;}
.offline-view-top span {display: inline-block; height: 3.8rem;}
.offline-view-top span svg {height: 100%;}
.offline-view-top span #logo_txt path {fill:#000}
.offline-view-top strong {display: block; width: calc(100% - 30rem); text-align: right; font-size: 2rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.5;} 

.offline-view-content {padding: 5rem 0;}
.offline-view-content .txt-box {margin-bottom: 5rem;}
.offline-view-content .txt-box .txt01 {font-size: 2rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.7;}
.offline-view-content .txt-box .txt02 {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.023em; color: #000; line-height: 2.1; margin-top: 2rem;}
.offline-view-content .view-img-list {margin-bottom: 3rem;}
.view-img-list li {}
.view-img-list li .img {position: relative; width: 100%; height: 0; padding-top: 59.52%; border-radius: 1rem; overflow: hidden;}
.view-img-list li .img img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.view-img-list .slick-dots {display: flex; justify-content: center; margin-top: 4rem;}
.view-img-list .slick-dots li { margin:0 1.6rem; }
.view-img-list .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:0.8rem; height:0.8rem; background-color:#000; font-size:0; opacity:0.15;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.view-img-list .slick-dots li.slick-active button{ opacity:1.0; }
.offline-view-content .info-con .info-item + .info-item {padding-top:3rem ;}
.offline-view-content .info-con .info-item dt {font-size: 1.6rem; font-weight: 700; letter-spacing: -0.023em; line-height: 1.2; color: #000; margin-bottom: 1rem;}
.offline-view-content .info-con .info-item dd {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.023em; line-height: 2.1; color: #000;}

.offline-info-wrap {width: 40rem;}
.offline-info-wrap .offline-info-box {display: flex; flex-direction:column; justify-content: space-between; min-height: 52rem; border-radius: 2rem; background: #F5F5F5; padding: 7.5rem 4rem 4rem; box-sizing: border-box;}
.offline-info-box .tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.2; margin-bottom: 1.5rem;}
.offline-info-box .txt {position: relative; padding-left: 2.8rem; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; color: #888888; line-height: 1.85;}
.offline-info-box .txt:before {position: absolute; font-family: xeicon; top: -0.2rem; left: 0; font-size: 1.6rem;}
.offline-info-box .txt.date:before {content:"\e9a4"}
.offline-info-box .txt.loca:before {content:"\eb59"}
.offline-info-box .txt.num:before {content:"\e9f5"}
.offline-info-box .txt.price:before {content:"\ea74"}
.offline-info-box .txt.robot i {position: absolute; top: 0.5rem; left: 0; font-size: 1.6rem;}

.offline-info-box .txt.date span {display: inline-block; margin-left: 0.5rem;}
.offline-info-box dl {display: flex; justify-content: space-between; margin-top: 3.5rem; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 2rem; font-size: 1.8rem; letter-spacing: -0.02em; color: #000; font-weight: 500; box-sizing: border-box;}
.offline-info-box dl dd {font-weight: 700;}
.offline-info-wrap {transition: top 0.4s ease-in-out;}
.offline-info-wrap .apply-btn {display: flex; align-items: center; justify-content: center; border: 0; width: 100%; height: 6rem; background: #000; font-size: 1.8rem; color: #fff;  letter-spacing: -0.036em; font-weight: 600; box-sizing: border-box;  border-radius: 1rem; margin: 0 !important;}
.offline-info-wrap .apply-btn em {font-weight: inherit;}
.sub-wrap .offline-info-wrap .cm-btn-controls {margin: -0.5rem; padding-top: 2rem;}
.sub-wrap .offline-info-wrap .cm-fill-btn {margin: 0.5rem; font-size: 1.8rem; font-weight: 600;}
.sub-wrap .offline-info-wrap .cm-fill-btn:before {border: 2px solid #000;}

@media all and (min-width:801px){ 
	.offline-info-wrap.top-fixed {position: fixed; top: calc(var(--sub-menu-height) + 60px);}
	.scroll-up .offline-info-wrap.top-fixed {top:  calc(var(--header-height) + var(--sub-menu-height) + 60px);}
	.offline-info-wrap.bottom-fixed {position: absolute; bottom: 4rem;}
}
@media all and (max-width:1280px){ 
	.cm-offline-wrap .left-con {width: calc(100% - 40rem);}
	.cm-offline-wrap .right-con {width: 40rem;}
	.offline-info-wrap {width: 36rem;}
	.offline-info-box .tit {font-size: 3.6rem;}
	.offline-info-wrap .offline-info-box {    min-height: 47rem; padding: 4rem 3.5rem 3.5rem;}
	.offline-info-box dl {margin-top: 2.5rem;}
}
@media all and (max-width:800px){ 
	.cm-offline-wrap {display: block;}
	.cm-offline-wrap .left-con {width: 100%; padding-right: 0; border-right: 0;  border-bottom: 1px solid #eee;}
	.offline-view-top { flex-wrap: wrap;  padding: 1rem 2.5rem;}
	.offline-view-top span {height: 2.8rem;}
	.offline-view-top strong {width: 100%;}
	.offline-view-content {padding: 4rem 0;}
	.cm-offline-wrap .right-con {width: 100%; padding-left: 0; padding-top: 4rem;}
	.offline-info-wrap {width: 100%;}
	.offline-info-box .tit {font-size: 3rem;}
}

/* **** 신청페이지 **** */
.training-apply-con .tit-box {display: block; width: 100%; padding: 2.5rem 2.8rem; border: 2px solid #EEEEEE; font-size: 2rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.3; margin-bottom: 4rem; box-sizing: border-box; border-radius: 1rem;}
.training-apply-form {padding-bottom: 4rem;}
.training-apply-con .custom-checkbox-item label {font-size: 1.7rem; font-weight: 700;}
.training-apply-con .custom-checkbox-item label::after {font-weight: 400;}

/* **** 신청완료페이지 **** */
.apply-finish-page .cm-offline-wrap {border-bottom: 2px solid #000;}
.apply-finish-con {padding:7.5rem 7rem 6rem; border: 2px solid #EEEEEE; border-radius: 1rem; box-sizing: border-box;}
.finish-txt-box {text-align: center; margin-bottom: 5.5rem;}
.finish-txt-box h5 {font-size: 4rem; font-weight: 700; letter-spacing: -0.024em; color: #000 ; line-height: 1.2; }
.finish-txt-box h5 b {color: var(--main-color); font-weight: 700;}
.finish-txt-box .txt {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; color: #000; line-height: 1.66; padding-top: 1.5rem;}
.finish-txt-box .txt span {color: var(--main-color);}
.apply-info-con {padding: 1.5rem 2rem; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.apply-info-con dl {display: table;}
.apply-info-con dl dt,
.apply-info-con dl dd {display: table-cell; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: #000; line-height: 1.6; padding: 0.5rem 0;}
.apply-info-con dl dt {width: 9rem;}
.apply-info-con dl dd {width: calc(100% - 9rem);}
.offline-info-box .notice-txt-box {padding-top: 2rem;}
.offline-info-box .notice-txt-box .notice-txt {position: relative; padding-left: 1rem; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; color: #888888; line-height: 1.6;}
.offline-info-box .notice-txt-box .notice-txt:before {position: absolute; content: '*'; color: var(--main-color); left: 0; top: 0;}
.offline-info-box .notice-txt-box .notice-txt + .notice-txt {margin-top: 1.2rem;}
.apply-finish-page .cm-btn-controls {margin: -0.5rem; padding-top: 4rem;}
.apply-finish-page .cm-btn-controls .cm-fill-btn {max-width: 19.5rem; margin: 0.5rem;}
.apply-finish-page .cm-btn-controls .cm-fill-btn:before {border: 2px solid #000;}
.apply-finish-page .my-training-btn {display: block;}
.apply-finish-page .my-training-btn .state-btn {position: relative; width: 100%; margin-top: 1rem;}

@media all and (max-width:800px){ 
	.apply-finish-con {padding: 5.5rem 4rem 5rem;}
	.finish-txt-box h5 {font-size: 3rem;}
}

/* ****************** 03 로봇교육 :: 온라인교육 ********************** */
/* **** 리스트페이지 **** */
.online-training-con {border-top: 1px solid #000;}
.online-training-list {display: flex; flex-wrap: wrap; align-items: center; margin: -1.4rem -1.45rem; padding: 4rem 0;}
.online-training-list li {width: calc(25% - 2.9rem); margin: 1.4rem 1.45rem;}
.online-training-list li a {display: block; width: 100%; height: 100%; border-radius: 2rem; background: #F5F5F5; overflow: hidden; padding: 2rem 0; box-sizing: border-box;}
.online-training-list li a .thumbnail-box {position: relative; width: 100%; height: 0; padding-top: 58.766%;}
.online-training-list li a .thumbnail-box:before {position: absolute; content: '\ea40'; font-family: xeicon; font-size: 7.2rem; color: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;}
.online-training-list li a .thumbnail-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.online-training-list li a .txt-box {padding: 4rem 4rem 2rem; box-sizing: border-box;}
.online-training-list li a .txt-box .tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom: 1.6rem;}
.online-training-list li a .txt-box .info-txt {display: flex; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; color: #888888; line-height: 1.3;}
.online-training-list li a .txt-box .info-txt i { margin-right: 0.8rem; position: relative; top: 0.1rem;}
.online-training-list li a .txt-box .info-txt i.material-icons {margin-right: 0.7rem; font-size: 1.6rem;}
.online-training-list li a .txt-box .info-txt + .info-txt {margin-top: 0.6rem;}

@media all and (max-width:1280px){ 
	.online-training-list li {width: calc(33.333% - 2.9rem);}
}
@media all and (max-width:800px){ 
	.online-training-list li {width: calc(50% - 2.9rem);}
	.online-training-list li a .thumbnail-box:before {font-size: 5.2rem;}
	.online-training-list li a .txt-box {    padding: 3rem 3rem 2rem;}
	.online-training-list li a .txt-box .tit {font-size: 2rem;}
}
@media all and (max-width:480px){ 
	.online-training-list {margin: -1.2rem -0.9rem;}
	.online-training-list li {width: calc(50% - 1.8rem); margin: 1.2rem 0.9rem;}
	.online-training-list li a .txt-box { padding: 3rem 2rem 0;}
}

/* **** 상세페이지 **** */
.online-view-con {padding: 12rem 0 6rem;}
.view-top-con {padding: 6rem 0; border-top: 2px solid #000; border-bottom: 2px solid #000; text-align: center;}
.view-top-con .tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.2;}
.view-top-con .write-info {display: flex; justify-content: center; margin-top: 2rem;}
.view-top-con .write-info dt,
.view-top-con .write-info dd {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em; color: #888888; line-height: 1.5;}
.view-top-con .write-info dd {margin: 0 4rem 0 2rem;}
.view-top-con .write-info dd:last-of-type {margin-right: 0;}
.online-view-content {padding: 8rem 0; border-bottom: 2px solid #000;}
.online-video-con {position: relative; margin-bottom: 8rem;}
.online-video-con .video-iframe-box {position: relative;width: 100%; padding-top:56.06%;height: 0; background-color: #000; overflow: hidden;}
.online-video-con .video-iframe-box iframe {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.online-video-con .video-cover-box { position: absolute;  top: 0px;left: 0px;  width: 100%;height: 100%; overflow: hidden; cursor: pointer;}
.online-video-con .video-cover-box .thumb {display: block; position: relative; width: 100%; height: 100%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s;}
.online-video-con .video-cover-box .thumb img {  width: 100%; height: 100%;}
.online-video-con .btn-cover {position: absolute;  top: 50%; left: 50%; margin: -6.3rem 0 0 -6.3rem; z-index: 10;}
.online-video-con button {position: relative; font-size: 12.6rem; color: #fff;}
.online-info-con {padding: 0 4rem; box-sizing: border-box;}
.online-info-con .info-item + .info-item {padding-top:6rem ;}
.online-info-con .info-item dt {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.024em; line-height: 1.41; color: #000; margin-bottom: 1.2rem;}
.online-info-con .info-item dd {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.023em; line-height: 1.88; color: #000;}
.online-view-con .cm-btn-controls {margin-top: 3rem;}
.sub-wrap .online-view-con .cm-fill-btn:before {border: 2px solid #000;}

@media all and (max-width:800px){ 
	.view-top-con {text-align: left; padding: 5rem 0;}
	.view-top-con .tit {font-size: 2.8rem;}
	.view-top-con .write-info {justify-content: flex-start; flex-wrap: wrap;}
	.view-top-con .write-info dt, 
	.view-top-con .write-info dd {font-size: 1.5rem;}
	.view-top-con .write-info dt {width: 7rem;}
	.view-top-con .write-info dd {margin: 0; width: calc(100% - 7rem);}
	.online-video-con {margin-bottom: 6rem;}
	.online-info-con {padding: 0 2rem;}
	.online-info-con .info-item dt {font-size: 2rem;}
	.online-info-con .info-item dd {font-size: 1.6rem;}
	.online-info-con .info-item + .info-item {padding-top: 4rem;}
}

/* ****************** 03 로봇교육 :: MY교육 ********************** */
/* **** 리스트페이지 **** */
.my-training-page .training-date-box {padding-bottom: 1rem;}
.training-inquiry-box {padding-top: 1rem; border-top: 1px solid #EEEEEE;}
.training-inquiry-box .inquiry-inner {display: flex; flex-direction: column; justify-content: space-between; height: 28rem; border-radius: 1rem; background: url(../../error.html)no-repeat center/cover; padding: 4rem 1rem 1rem; box-sizing: border-box; }
.training-inquiry-box .inquiry-inner .txt {font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; line-height: 1.7; padding: 0 2rem 0 1rem; box-sizing: border-box; }
.training-inquiry-box .inquiry-inner .cm-fill-btn.inquiry-btn {display: flex; align-items: center; justify-content: center; height: 4rem; background: var(--main-color);; color: #fff; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.036em; border-radius: 1rem;}
.training-inquiry-box .inquiry-inner .cm-fill-btn.inquiry-btn:before {border: 2px solid var(--main-color);}
.training-inquiry-box .inquiry-inner .cm-fill-btn.inquiry-btn em {font-weight: 700; }
@media all and (min-width:801px){ 
	.training-inquiry-box .inquiry-inner .cm-fill-btn.inquiry-btn:hover {color: var(--main-color);}
}

.my-training-btn-wrap {position: absolute; bottom: 2rem; left: 0; width: 100%; height: 5rem; padding: 0 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; z-index: 1;}
.my-training-btn {position: relative; display: flex; gap:1rem;}
.my-training-btn .state-btn {display: flex; align-items: center; justify-content: center; width: calc(100% - 1rem); height: 5rem; border-radius: 1rem; font-size: 1.5rem; font-weight: 600; letter-spacing:-0.036em;}
.my-training-btn .state-btn.approval-btn {background-color: #000; color: #fff; } 
.my-training-btn .state-btn.cancel-btn {background-color: #fff; color: #000;} 
.my-training-btn .state-btn.end-btn {background-color: #DDDDDD; color: #888888;} 
.my-training-btn .state-btn .cm-tooltip-btn {display: inline-block; position: relative; margin-left: 0.5rem; font-size: 1.6rem;}
.my-training-btn .state-btn .cm-tooltip-btn i {}

.ing-training .my-training-btn,
.cancel-training .my-training-btn,
.end-training .my-training-btn {gap:0;}
.ing-training .my-training-btn .state-btn ,
.cancel-training .my-training-btn .state-btn ,
.end-training .my-training-btn .state-btn  {width: 100%; margin: 0;}
.cancel-training .my-training-btn .state-btn.cancel-btn {color: #888888;}

.my-training-page .training-list li {position: relative;}
.my-training-page .training-list li .inner {padding: 2.4rem 0 7rem;}
.training-list li.end-training .inner .thumbnail-box {opacity: 0.1;}

/* Applies to all tooltips */
.cm-tooltip-btn::before,
.cm-tooltip-btn::after,
.cm-tooltip-btn + .tooltip-box {text-align:left;  text-decoration:none; text-transform: none;  user-select: none; pointer-events: none; position: absolute; visibility:hidden;  filter:alpha(opacity=0); opacity:0;}
.cm-tooltip-btn::before {left: -2px; bottom: calc(100% + 7px);  content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid var(--main-color); z-index: 1001; }
.cm-tooltip-btn::after {left: -2px; bottom: calc(100% + 11px); content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid #fff;  z-index: 1002;}
.cm-tooltip-btn + .tooltip-box {display: flex; align-items: center; left: 0; bottom: calc(100% + 5px); width: 100%; min-height: 8rem; padding: 1rem 2rem 0.8rem; background-color: #fff; 
font-size:1.4rem; font-weight:500;  line-height:1.71; color:var(--main-color); border: 2px solid var(--main-color); border-radius: 1rem;  box-shadow: 0px 0.3rem 0.8rem #00000029;  z-index: 1000; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
  	visibility:visible; 
	opacity:1;
  }
}

@keyframes tooltips-horz {
  to {
    visibility:visible; 
	opacity:1;
  }
}

/* FX All The Things */ 
.cm-tooltip-btn[flow^="left"]:hover::before,
.cm-tooltip-btn[flow^="left"]:hover::after,
.cm-tooltip-btn[flow^="left"]:hover + .tooltip-box {
  visibility:visible; filter:alpha(opacity=100); opacity:1;
}

/* **** 뷰페이지 **** */
.my-training-page .view-top-con .write-info {margin: 0 -1.8rem; padding-top: 2rem;}
.my-training-page .view-top-con .write-info .txt {position: relative; padding-left: 3rem; margin: 0 1.8rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.02em;}
.my-training-page .view-top-con .write-info .txt:before {position: absolute; font-family: xeicon; top: -0.1rem; left: 0; font-size: 2rem;}
.my-training-page .view-top-con .write-info .txt.date:before {content:"\e9a4"}
.my-training-page .view-top-con .write-info .txt.loca:before {content:"\eb59"}
.my-training-page .view-top-con .write-info .txt.num:before {content:"\e9f5"}
.my-training-page .view-top-con .write-info .txt.price:before {content:"\ea74"}
.my-training-page .view-top-con .write-info .txt.robot i {position: absolute; top: -0.1rem; left: 0; font-size: 2rem;}
.my-training-page .online-info-con {padding: 0 4rem 8rem;}
.my-training-page .view-img-list li .img {padding-top: 56.061%;}

@media all and (max-width:800px){ 
	.training-inquiry-box {width: calc(100% - 1rem);  margin: 0 0.5rem;}
	.training-inquiry-box .inquiry-inner {height: auto; padding: 3rem 2rem;}
	.training-inquiry-box .inquiry-inner .txt {padding: 0 0 3rem 0;}
	.my-training-page .view-top-con .write-info {margin: -0.5rem 0;}
	.my-training-page .view-top-con .write-info .txt {font-size: 1.5rem;}
	.my-training-page .view-top-con .write-info .txt {width: 100%; margin:0.5rem 0;}
	.online-view-content {padding: 6rem 0;}
	.my-training-page .online-info-con {padding: 0 2rem 6rem;}
}

/* ****************** 마이페이지 :: 수강목록 ********************** */
.bbs-top-list-box.board-date-top {padding-top: 2rem;}
.board-date-search-box {width: 59rem;}
.board-date-search {display: flex;}
.board-date-search .date-item { position: relative; width: calc((100% - 11rem)/2); height: 5rem; background-color: #fff; border-radius: 2.5rem; box-sizing: border-box; border: 1px solid #ddd;}
.board-date-search .date-item:before {position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); content: '\e9a4'; font-family: xeicon; font-size: 2.4rem; color: #000;}
.board-date-search .date-item input {width: 100%; height: 100%; background-color: transparent; border: 0; padding: 0 19px; font-size: 1.4rem; font-weight: 700; color: #000;  letter-spacing: -0.01em; box-sizing: border-box;}
.board-date-search .date-item input::placeholder {color: #000;}
.board-date-search .middle {display: inline-block; width: 5rem; text-align: center; font-size: 1.4rem; line-height: 5rem; color: #000; letter-spacing: -0.01em;}
.board-date-search .bbs-search-btn {display: block; width: 5rem;  height: 5rem; border-radius: 50%; background: #000; text-align: center; margin-left: 1rem;}
.board-date-search .bbs-search-btn i {font-size: 2rem; color: #fff; line-height: 5rem;}

.mp-training-con {padding-top: 2rem; border-top: 1px solid #000;}
.mp-training-list {}
.mp-training-list li {margin-bottom: 1rem;}
.mp-training-list li .inner {border-radius: 2rem; background: #F5F5F5; padding: 4rem; display: flex; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.mp-training-list li .info-con {width: calc(100% - 14.5rem); padding-right: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.mp-training-list li .info-con .tit {font-size: 2.8rem; font-weight: 700; letter-spacing: -0.023em; color: #000000; line-height: 1.2; margin-bottom: 2.5rem;}
.mp-training-list li .info-con .info-box {display: flex;}
.mp-training-list li .info-con .info-list {max-width: 24.7rem; width: 50%;}
.mp-training-list li .info-con .info-list .txt{position: relative; padding-left: 2.6rem; font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; margin: 0.2rem 0;}
.mp-training-list li .info-con .info-list .txt:before {position: absolute; font-family: xeicon; top: -0.2rem; left: 0; font-size: 1.6rem;}
.mp-training-list li .info-con .info-list .txt.date:before {content:"\e9a4"}
.mp-training-list li .info-con .info-list .txt.loca:before {content:"\eb59"}
.mp-training-list li .info-con .info-list .txt.num:before {content:"\e9f5"}
.mp-training-list li .info-con .info-list .txt.price:before {content:"\ea74"}
.mp-training-list li .btn-con {width: 14.5rem;} 
.mp-training-list li .my-training-btn {flex-direction: column;}
.mp-training-list li .my-training-btn .state-btn {position: relative; width: 100%;}
.mp-training-list li .my-training-btn .cm-tooltip-btn + .tooltip-box {width: 30rem; left: auto; right: 0;}

@media all and (max-width:800px){ 
	.bbs-top-list-box.board-date-top {padding-top: 0;}
	.board-date-search-box {width: 100%; margin-bottom: 2rem;}
	.board-date-search .middle {width: 3rem;}
	.board-date-search .date-item {calc((100% - 9rem)/2)}
	.mp-training-list li .inner {padding: 3rem;}
	.mp-training-list li .info-con .tit {font-size: 2.2rem; margin-bottom: 1.5rem;}
	.mp-training-list li .info-con .info-box {display: block;}
	.mp-training-list li .info-con .info-list {width: 100%; max-width: none;}
}
@media all and (max-width:480px){ 
	.board-date-search .date-item input {padding: 0 15px;}
	.mp-training-list li .inner {display: block;}
	.mp-training-list li .info-con {width: 100%; padding-right: 0; padding-bottom: 2rem;}
	.mp-training-list li .btn-con {width: 100%;}
	.mp-training-list li .my-training-btn .cm-tooltip-btn + .tooltip-box {width: 100%; }
}


/* ****************** 제품 :: 맞춤형로봇추천 ********************** */
.ctm-tit-box {text-align: center;}
.ctm-tit-box .num {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--main-color); line-height: 1.2; display: block; margin-bottom: 2rem;}
.ctm-tit-box .tit {font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; color: #000000; line-height: 1.3;} 
.ctm-tit-box .tit span {color: var(--main-color);}
.ctm-tit-box .txt {font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(0,0,0,0.3); line-height: 1.5; margin-top: 0.5rem;}
.customized-page .cm-btn-controls button, 
.customized-page .cm-btn-controls a {max-width: 19.5rem;}
.sub-wrap .customized-page .cm-fill-btn:before { border: 2px solid #000;}

.customized-con01 {padding-bottom: 15rem;}
.customized-con01 .ctm-tit-box {margin-bottom: 5rem;}
.ctm-robot-list {display: flex; flex-wrap: wrap; margin: -1.5rem -1.3rem;}
.ctm-robot-list li { width: calc(25% - 2.6rem); margin: 1.5rem 1.3rem; height: 15rem;}
.ctm-robot-list li input {display: none;}
.ctm-robot-list li label {position: relative; display: flex; align-items: center; width: 100%; height: 15rem; padding: 3.5rem 4rem; box-sizing: border-box;}
.ctm-robot-list li label:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border-radius: 1rem; border: 2px solid #CFCFCF; background: #F5F5F5; box-sizing: border-box;}
.ctm-robot-list li label:after {position: absolute; content: '\e92b'; font-family: xeicon; font-size: 2.4rem; color: #CFCFCF; top: 1.5rem; right: 1.5rem; z-index: 1;}
.ctm-robot-list li label span {position: relative; width: 11rem; display: block;}
.ctm-robot-list li label span img {max-width: 100%;}
.ctm-robot-list li label strong {position: relative; width: calc(100% - 11rem); display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.44; color: #000; padding-left: 2rem; box-sizing: border-box;}
.ctm-robot-list li input:checked + label:before {border: 3px solid var(--main-color);}
.ctm-robot-list li input:checked + label:after {color: var(--main-color);}

.customized-con02 {padding: 10rem 0 18rem;}
.customized-con02 .ctm-tit-box {margin-bottom: 2.5rem;}
.cmt-detail-con {width: 100%; max-width: 100rem; margin: 0 auto 4rem; border-radius: 1rem; background: #F5F5F5; padding: 7rem 8.9rem 7rem 7.9rem; box-sizing: border-box;}
.cmt-detail-con .tit-box {margin-bottom: 3rem;}
.cmt-detail-con .tit-box .tit {display: block; font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height: 1.3; }
.cmt-detail-con .tit-box .en-tit {font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; color: rgba(0,0,0,0.3); line-height: 1.4; margin-top: 0.5rem;}
.cmt-detail-con .detail-con {display: flex;}
.cmt-detail-con .detail-con .img-box {display: flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; background-color: #fff; border-radius: 1rem; padding: 2.5rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.cmt-detail-con .detail-con .img-box img {max-width: 100%;}
.cmt-detail-con .detail-con .cmt-filter-con {width: calc(100% - 20rem); padding-left: 5.2rem; box-sizing: border-box;}
.cmt-filter-type {display: flex; align-items: center; justify-content: space-between; padding-bottom: 3.7rem; border-bottom: 1px solid rgba(0,0,0,0.1);}
.cmt-filter-type .tit {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.023em; color: #000; line-height: 1.2;}
.cmt-filter-type .cmt-type-list-wrap {position: relative; width: 43rem; height: 5rem; background: #fff; border-radius: 10rem; padding: 0.5rem; box-sizing: border-box;}
.cmt-type-line {position: absolute;width: 100%; margin: 0 auto; top: 0; left: 50%; transform: translateX(-50%);}
.cmt-type-line .move-line {position: absolute; width: 100%;margin: 0 auto; top: 5px; left: 5px;}
.cmt-type-line .move-line span {height: 4rem; width: 21rem; position: absolute;  top: 0; left: 0; text-align: center; transition: left 0.4s;background: var(--main-color); border-radius: 10rem;}

.cmt-filter-type .cmt-type-list {position: relative; z-index: 1; display: flex; width: 100%; height: 100%;} 
.cmt-filter-type .cmt-type-list li {width: 50%;}
.cmt-filter-type .cmt-type-list li input {display: none;}
.cmt-filter-type .cmt-type-list li label {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: #000; border-radius: 10rem; transition: all 0.3s;} 
.cmt-filter-type .cmt-type-list li input:checked + label {color: #fff;}

.cmt-filter-range {padding-top: 2.6rem;}
.cmt-filter-range .range-top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem;}
.cmt-filter-range .range-top .tit {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.023em; color: #000; line-height: 1.2;}
.range-input {display: flex; align-items: center;}
.range-input input {width: 8rem; height: 3rem; text-align: center; font-size: 1.2rem; color: #000;font-weight: 600; border: none; background-color: #fff;border-radius: 2rem;}
.range-input input:disabled {user-select: none;}
.range-input span {display: inline-block; width: 4rem; text-align: center; font-size: 1.8rem; color: #000;} 
.cmt-filter-range .range-slider {position: relative; height: 5px; border-radius: 5px; background: #CFCFCF; }
.cmt-filter-range .range-slider input[type=range] {-webkit-appearance: none; pointer-events: none; position: absolute; z-index: 2;  top: 0; left: 0;  width: 100%; height:5px; background-color: transparent;}
.cmt-filter-range .range-slider input[type=range]::-webkit-slider-thumb {opacity: 0; pointer-events: all; width: 18px; height: 18px; background: #fff; border: 2px solid var(--main-color); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; border-radius:50% ; cursor: pointer; -webkit-appearance: none; z-index: 3;}
.cmt-filter-range .range-slider .range-slider__range {position: absolute; height: 5px; background: var(--main-color); top: 0; border-radius: 10px; cursor: pointer;}
.cmt-filter-range .range-slider .range-slider__thumb {position: absolute; top: -6px;width: 18px; height: 18px;background: #fff; border: 2px solid var(--main-color); -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; border-radius:50% ; transform: translate(-50%, 0); z-index: 2;cursor: pointer;}
.cmt-filter-range .rangeslider--horizontal {opacity: 0;height: 0; pointer-events: none;}
.range-slider-scale {margin-top: 12px; position: relative; display: flex; justify-content: space-between;}
.range-slider-scale span {display: inline-block; font-size: 12px; font-weight: 600; color: #000; opacity: 0.3; cursor: pointer;}
.range-slider-scale span.active {opacity: 1;}

.customized-con03 {padding: 13rem 0 15rem; background: #F5F5F5;}
.customized-con03 .ctm-tit-box {margin-bottom: 2.5rem;}
.ctm-solution-con {margin-bottom: 6rem;}
.ctm-solution-list .slick-list {margin: 0 -0.6rem;}
.ctm-solution-list .slick-slide {margin: 0 0.6rem;}
.ctm-solution-list .list-item {padding: 2rem; border-radius: 2rem; background: #fff; box-sizing: border-box;}
.ctm-solution-list .list-item .img-box {position: relative; width: 100%; padding: 0 4rem; box-sizing: border-box;}
.ctm-solution-list .list-item .img-box span {position: relative; display: block; width: 100%; height: 0; padding-top: 100%;}
.ctm-solution-list .list-item .img-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.ctm-solution-list .list-item .txt-box {text-align: center; margin: 2rem 0;}
.ctm-solution-list .list-item .txt-box .cate {display: block; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; color: var(--main-color); line-height: 1.2;}
.ctm-solution-list .list-item .txt-box .tit {display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; color: #000; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ctm-solution-list .slick-dots {display: flex; justify-content: center; margin-top: 6rem;}
.ctm-solution-list .slick-dots li { margin:0 1.6rem; }
.ctm-solution-list .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:0.8rem; height:0.8rem; background-color:#000; font-size:0; opacity:0.15;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.ctm-solution-list .slick-dots li.slick-active button{ opacity:1.0; }

.customized-page .ctm-solution-list .cm-btn-controls a {width: 100%; max-width: none; height: 5rem;}
.customized-page .ctm-solution-list .cm-btn-controls a:before {transition: all 0.5s ease-out;}
.customized-page .ctm-solution-list .cm-btn-controls a .cm-fill {background: var(--main-color);}
.customized-page .ctm-solution-list .cm-btn-controls a:hover:before {border-color: var(--main-color);}

@media all and (max-width:1280px){ 
	.ctm-robot-list li {width: calc(33.33% - 2.6rem);}
	.cmt-detail-con {max-width: none;}
}
@media all and (max-width:800px){ 
	.ctm-tit-box .tit {font-size: 3.2rem;}
	.ctm-robot-list {margin: -1rem;}
	.ctm-robot-list li {width: calc(33.33% - 2rem); margin: 1rem;}
	.ctm-robot-list li label {padding: 2.5rem; flex-wrap: wrap;}
	.ctm-robot-list li label span {width: 7rem;}
	.ctm-robot-list li label strong {width: 100%; padding-left: 0; padding-top: 1rem; font-size: 1.6rem;}
	
	.cmt-detail-con {padding: 4rem 4rem 5rem;}
	.cmt-detail-con .tit-box .tit {font-size: 3.2rem;}
	.cmt-detail-con .detail-con {flex-wrap: wrap;}
	.cmt-detail-con .detail-con .img-box {margin-bottom: 3rem;}
	.cmt-detail-con .detail-con .cmt-filter-con {width: 100%; padding-left: 0; }
	.cmt-type-line {display: none !important;}
	.cmt-filter-type {padding-bottom: 2.5rem;}
	.cmt-filter-type {flex-wrap: wrap;}
	.cmt-filter-type .tit {display: block; margin-bottom: 1rem; font-size: 1.7rem;}
	.cmt-filter-type .cmt-type-list-wrap {width: 100%;}
	.cmt-filter-type .cmt-type-list li label {}
	.cmt-filter-type .cmt-type-list li input:checked + label {color: #fff !important; background: var(--main-color); }
	.cmt-filter-range {padding-top: 2.5rem;}
	.cmt-filter-range .range-top .tit {font-size: 1.7rem; padding-right: 1rem; box-sizing: border-box;}
	
	.ctm-solution-list .list-item .img-box {padding: 0;}
	.ctm-solution-list .list-item .txt-box .tit {font-size: 2rem;}

	.customized-page .ctm-solution-list .cm-btn-controls a {height: 4rem;}
}

/* ****************** 소식 :: 다운로드 ********************** */
/* 리스트 페이지 */
.download-con .bbs-top-list-box .board-search-box {width: 40rem;}
.download-top-left {display: flex; align-items: center;}
.download-top-left .total-list-con {white-space:nowrap; padding-left: 3rem;}
.fakeform-selectbox.download-fakeform .select-title {width: 16rem !important; line-height: 5rem; font-size: 1.4rem; border-radius: 2.5rem;}
.fakeform-selectbox.download-fakeform .select-title.active {border-radius: 2.5rem 2.5rem 0 0;}
.download-list-con {padding: 4rem 0; border-top: 1px solid #000; }
.download-list {margin: -1rem 0;}
.download-list li {height: 10rem; margin: 1rem 0;}
.download-list li a {position: relative; display: flex; align-items: center; width: 100%; height: 100%; border-radius: 2rem; padding-right: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.download-list li a:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #E5E5E5; border-radius: 2rem;  transition: all 0.3s; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.download-list li a .download-cate {width: 14.8rem; text-align: center; font-size: 1.6rem; font-weight: 700;  line-height: 1.3; letter-spacing: -0.02em; color: var(--main-color);}
.download-list li a .download-subject-box {width: calc(100% - 31.3rem); padding-right: 3rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.download-list li a .download-subject-box .tit {display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.download-list li a .learn-more-btn {display: flex; align-items: center; justify-content: center; position: relative; width: 16.5rem; height: 4rem; border-radius: 1rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: #000; transition: all 0.3s; }
.download-list li a .learn-more-btn:before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; border-radius: 1rem; border: 2px solid #000; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}

@media all and (min-width:801px){ 
	.download-list li a:hover:before {border-color: #000;}
	.download-list li a:hover .learn-more-btn {background: #000; color: #fff;}
}
@media all and (max-width:800px){ 
	.download-list li {height: auto;}
	.download-list li a {padding: 3rem; display: block;}
	.download-list li a .download-cate {width: 100%; text-align: left; margin-bottom: 1rem;}
	.download-list li a .download-subject-box {width: 100%; margin-bottom: 2.5rem;}
	.download-list li a .download-subject-box .tit {font-size: 2rem; padding-right: 0; line-height: 1.3; white-space: normal; overflow: visible; text-overflow: unset;}
	.download-list li a .learn-more-btn {width: 100%;}
}

/* 상세 페이지 */
.download-view-top {border-top: 2px solid #000; padding: 3rem 2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.download-view-top dl {margin-bottom: 2rem;}
.download-view-top dl dt {display: inline-block; padding-right: 2.4rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--main-color);}
.download-view-top dl dd {display: inline-block; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; color: rgba(0,0,0,0.5);}
.download-view-top .tit {font-size: 2.4rem; font-weight: 700; letter-spacing: -0.024em; color: #000; line-height: 1.3;}
.download-page .cm-offline-wrap {border-top: 1px solid #000;}
.download-content {padding: 2rem 0;}
.download-file-con {   border-radius: 2rem; background: #F5F5F5;  padding:4rem 2rem 2rem; box-sizing: border-box;}
.download-file-con strong {display: block; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing:-0.024em; color: #000; margin-bottom: 2rem;}
.download-file-list li + li {margin-top: 1rem;}
.download-file-list li a {padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; background: #fff; border-radius: 1rem;}
.download-file-list li a .txt {width: calc(100% - 6.5rem); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.023em; color: #000; line-height: 1.43; text-decoration: underline;  text-decoration-thickness: 2px;}
.download-file-list li a span {display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 0.5rem; background: #fff; border: 2px solid #000; box-sizing: border-box; font-size: 2.4rem; color: #000; transition: all 0.4s;}
.download-file-list li a:hover span {background: #000; color: #fff;}
.download-view-con .cm-fill-btn {max-width: 24rem; margin: 0 !important;}
.download-view-con .cm-btn-controls {padding-top: 4rem; border-top: 1px solid #000; margin: 0;}

@media all and (max-width:800px){ 
	.download-view-top dl dt {padding-right: 1.5rem;}
	.download-view-top .tit {font-size: 2.2rem;}
	.download-content {padding: 0 0 4rem;}
	.download-file-con {padding: 3rem 2rem 2rem;}
	.download-file-con strong {font-size: 2rem;}
	.download-file-list li a {padding: 2rem;}
	.download-file-list li a .txt {font-size: 1.4rem;}
}

/* 서브에서 메뉴 고정 */
/* 고정 헤더 기본값 */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;                 /* 반드시 최상단 */
  background-color: transparent; /* 맨 위에선 투명 */
  transition: background-color .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}

/* 스크롤 시(본문 위로 올라오면) 50% 불투명 배경 */
#header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.5); /* 흰 배경 50% */
  /* 필요하면 유리 효과 */
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* 본문이 헤더와 겹치지 않게 상단 여백 확보 (JS에서 동적으로 값 세팅) */
body.has-fixed-header #container,
body.has-fixed-header #wrap,
body.has-fixed-header main {
  padding-top: var(--header-h, 80px); /* 기본값 80px, JS로 실제 높이 반영 */
}