@charset "utf-8";
/* *******************************************************
 * filename : common.css
 * description : 서브페이지 공통 컨텐츠 CSS
 * date : 2021-08-10
******************************************************** */

/* ========================================================
 * SUB COMMON 
======================================================== */
/* -------- 공통 레이아웃(휠)  -------- */
.wheel-container{overflow:hidden; position:relative; height:100vh; min-height:750px; display:table; width:100%;}
.wheel-inner-container{display:table-cell;  vertical-align:middle;}


/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover{display:none;}

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

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

/* ****************** 공통 :: 스크롤아이콘 ********************** */
.cm-scroll-icon{position:absolute; bottom:0px; right:0px; text-align:right; z-index:11; }
.cm-scroll-icon .scroll-icon-wrapper{position:relative; display:flex;justify-content:flex-end; }
.cm-scroll-icon .scroll-icon-inner{display:block; position:relative; width:120px; margin:0 -120px -120px 0; text-align:center; color:#aaa; font-size:10px; letter-spacing:5px;  font-weight:900;}
.cm-scroll-icon .scroll-icon-inner .txt{display:inline-block; padding-bottom:255px;  writing-mode:vertical-lr; opacity:0; animation: upDown 1.5s ease-in-out infinite; transition:opacity 0.5s ease 0.5s }
.cm-scroll-icon .scroll-icon-inner .line{position:absolute; bottom:0px; height:0px; width:10px; left:50%; margin-left:-5px; background-color:#000; transition:height 0.5s ease 0.2s}
@keyframes upDown {
	0% {
		transform:  translateY(-10px);
	}
	50% {
		transform: translateY(0px);
	}
	100% {
		transform:  translateY(-10px);
	}
}
.ie-browser .cm-scroll-icon .scroll-icon-inner .txt{display:block; width:20px; height:122px; font-size:0; margin:0px auto; background:url(/images/main/scroll_txt.png) no-repeat}
.cm-scroll-icon.is-loaded .scroll-icon-inner .txt{opacity:1.0;}
.cm-scroll-icon.is-loaded .scroll-icon-inner .line{height:250px;}

/* 스크롤 아이콘 2 */
.scroll-down-txt{display:block; line-height:1.1; font-size:0.8em; color:#aaa; letter-spacing:0.50em; margin-top:9.625vw; }
.scroll-down-txt span{display:inline-block; /* opacity:0; transform:translateY(100%) */}
.scroll-down-txt .char{display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; animation-delay:calc(60ms * var(--char-index))}
.scroll-down-txt .whitespace{width:10px}
@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    15%,85% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

    100% {
        opacity: 0;
        transform: translateY(50%) rotateX(-90deg)
    }
}
/* ****************** 공통 :: splitting hover ********************** */
.splitting-over .char {
	display: inline-block;
	position: relative;
	visibility: hidden;
	overflow: hidden;
	vertical-align: bottom;
}
.splitting-over .char:before,
.splitting-over .char:after {
	content: attr(data-char);
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
       user-select: none;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.6s cubic-bezier(0.37, 0.03, 0.09, 0.98);
	transition-delay: calc( 0.05s * var(--char-index) );
}
.splitting-over .char:after {
	transform: translateY(100%);
}
.splitting-over .char:before {
	transform: translateY(-100%);
}
.splitting-over .char:after {
	transform: translateY(0);
}
.hidden-txt-wrap{overflow:hidden; display:block; font-weight:inherit;}
.hidden-txt-wrap .hidden-txt{position:relative; display:inline-block; transform: translateY(100%); opacity:0; transition:all 1s ease; font-weight:inherit;}
.animated .hidden-txt-wrap .hidden-txt{transform: translateY(0%); opacity:1;  }
.hidden-txt-wrap:nth-child(0) .hidden-txt{transition-delay:0s;}
.hidden-txt-wrap:nth-child(1) .hidden-txt{transition-delay:0.15s;}
.hidden-txt-wrap:nth-child(2) .hidden-txt{transition-delay:0.3s;}

/* ****************** 공통 :: 메뉴 ********************** */
/* -------- 공통 :: 메뉴스타일 01 -------- */
#cmSubMenuListCon{height:50px; position:relative; margin-bottom:120px; z-index:111;}
#cmSubMenuListCon.mb60{margin-bottom:60px;}
.cm-sub-menu-container{position:relative; height:50px; }
.cm-sub-menu-wrapper{position:relative;}
.cm-sub-menu-list-con{display:inline-block;}
.cm-sub-menu-list-con .cm-sub-menu-item{float:left; background-color:#f7f7f7; }
.cm-sub-menu-list-con .cm-sub-menu-item:first-child{border-radius:25px 0 0 25px;}
.cm-sub-menu-list-con .cm-sub-menu-item:last-child{border-radius:0 25px 25px 0 ;}
.cm-sub-menu-list-con .cm-sub-menu-item .cm-sub-menu-btn{display:flex; align-items:center; position:relative; z-index:1; height:50px; padding:0 28.5px; font-size:1.8666em; letter-spacing:-0.25px; font-weight:400; color:#252525; transition:color 0.3s 0.1s, height 0.3s ease-in-out;}
.cm-sub-menu-list-con .cm-sub-menu-item:first-child .cm-sub-menu-btn{padding:0 37px;}
.cm-sub-menu-list-con .cm-sub-menu-item.selected .cm-sub-menu-btn{font-weight:700; color:#fff;}
.cm-sub-menu-list-con .cm-sub-menu-item .cm-sub-menu-btn span{display:inline-block; position:relative; top:0px;}
.cm-sub-menu-list-con[data-func="click"] .cm-sub-menu-item:not(.selected) .cm-sub-menu-btn:hover{transition-delay:0s; color:#92d050}
.cm-sub-menu-indicator{position:absolute; top:0px; left:0px; width:150px; height:50px; background:#92d050; border-radius:30px; transition:height 0.3s ease-in-out; }
/* white menu */
.white-menu .cm-sub-menu-list-con .cm-sub-menu-item{background-color:#fff;}
/* fixed menu */
#cmSubMenuListCon.top-fixed{z-index:111;}
#cmSubMenuListCon.top-fixed .cm-sub-menu-container{position:fixed; top:40px; left:0; width:100%; height:40px; z-index:111; transition:transform 0.3s ease-in-out, top 0.3s ease-in-out;}
#cmSubMenuListCon.top-fixed .cm-sub-menu-list-con .cm-sub-menu-item .cm-sub-menu-btn{height:40px; padding:0 24px; font-size:1.066em;}
#cmSubMenuListCon.top-fixed .cm-sub-menu-indicator{height:40px;}
.scroll-up #cmSubMenuListCon.top-fixed .cm-sub-menu-container,
.scroll-over #cmSubMenuListCon.top-fixed .cm-sub-menu-container{transform:translateY(80px); top:10px;}

/* -------- 공통 :: 메뉴스타일 02(Board Sort Sytle) -------- */
.cm-bbs-sort-con{position:relative; display:inline-block; height:44px; padding:5px ; border-radius:30px; margin-right:50px; background-color:#92d050; }
.cm-bbs-sort-con-inner{display:flex;}
.cm-bbs-sort-con-inner .cm-bbs-sort-btn{position:relative; height:44px; margin-left:5px; padding:0 27.5px; font-size:1.2em; letter-spacing:-0.25px; color:#fff;}
.cm-bbs-sort-con-inner .cm-bbs-sort-btn:first-child{margin-left:0;}
.cm-bbs-sort-con-inner .cm-bbs-sort-btn.selected {color:#92d050}
.cm-bbs-sort-con .cm-bbs-sort-indicate{position:absolute; top:5px; left:5px; width:103px; height:44px; background:#fff; border-radius:30px; }

/* ****************** 공통 :: Button ********************** */
/* -------- 공통 :: Button 01 -------- */
.cm-button-style-01 {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing:border-box;
}
.cm-button-style-01 .over-circle-bg {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #fff;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  transform: translate(-50%, -50%);
}
.cm-button-style-01 *:not(.over-circle-bg){
	position:relative; 
	z-index:1;
}
.cm-button-style-01:hover {
	color: #efe3df;
}
.cm-button-style-01:hover .over-circle-bg {
	width: 225%;
	height: 562.5px;
}

/* -------- 공통 :: Button 02(Magnetic Button) -------- */
.cm-magnetic-btn{transition:all 0.1s}

/* -------- 공통 :: 이전,다음 버튼 -------- */
.cm-arrow-btn{display:block; overflow:hidden; position:relative; display: flex; width:100px; height:100px; background-color:#fff; color:#000; font-size:1.6em; border-radius:50%; justify-content: center; align-items: center;}
.cm-arrow-btn .cm-arrow-btn-icon{position:absolute; overflow:hidden; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:3px; color:#000; font-size:1em; color:#000; transition:color 0.5s}
.cm-arrow-btn .cm-arrow-btn-icon:before{font-family:"xeicon"; content: "\e93b";}
.cm-arrow-btn.cm-next-btn .cm-arrow-btn-icon:before{content: "\e93e";}
/* .cm-arrow-btn:hover .cm-arrow-btn-icon{color:#6fb638}
.cm-arrow-btn:hover .cm-arrow-btn-icon i{
	-webkit-animation: ani_icon 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: ani_icon 1s cubic-bezier(0.215, 0.61, 0.355, 1);
} */
.cm-arrow-btn-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cm-arrow-btn-line svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #e5e5e5;
    stroke-width: 1px;
    fill: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.cm-arrow-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: #6fb638;
}
.cm-arrow-btn:hover .cm-arrow-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;
}

/* -------- 공통 :: 페이지 컨트롤러 버튼 -------- */
.page-share-controls{position:absolute; right:0px; top:0px; z-index:1;}
.page-share-controls > ul{display:flex;}
.page-share-controls > ul > li{margin-left:1.6em;}
.page-share-controls > ul > li:first-child{margin-left:0}
.page-share-controls > ul > li > button{position:relative; display:inline-block; font-size:2em; color:inherit; color:#252525;}
.page-share-controls > ul > li > button.selected{color:#92d050}
.sns-share-btn-box{position:relative;}
.sns-share-btn-box .share-sns-list{position:absolute; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s; opacity:0;filter:Alpha(opacity=0); visibility:hidden;}
.sns-share-btn-box .share-sns-list li{position:absolute;  -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.sns-share-btn-box.open .share-list-dim{display:block;}
.sns-share-btn-box.open .share-sns-list{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
.sns-share-btn-box .share-sns-list li{position:absolute;  -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.sns-share-btn-box .share-sns-list li button{display:block; width:45px; height:45px; line-height:45px; border-radius:50%; text-align:center; background-color:#fff; box-sizing:border-box; transition:all 0.5s ease;}
.sns-share-btn-box .share-sns-list li button i{color:#fff !important; font-size:1.5em; vertical-align:middle;}
.sns-share-btn-box .share-sns-list li button:hover{box-shadow:3px 3px 6px 0px rgb(0, 0, 0, 0.24);}
.sns-share-btn-box[data-row="bottom"] .share-sns-list{left:50%; top:45px; margin-left:-22px;}
.sns-share-btn-box[data-row="bottom"] .share-sns-list li{top:0;}
.sns-share-btn-box[data-row="bottom"].open .share-sns-list li:nth-child(1){top:5px;}
.sns-share-btn-box[data-row="bottom"].open .share-sns-list li:nth-child(2){top:55px;}
.sns-share-btn-box[data-row="bottom"].open .share-sns-list li:nth-child(3){top:105px;}
.sns-share-btn-box[data-row="bottom"].open .share-sns-list li:nth-child(4){top:155px;}
.sns-share-btn-box[data-row="bottom"].open .share-sns-list li:nth-child(5){top:205px;}
.sns-share-btn-box[data-row="bottom"].open .share-sns-list li:nth-child(6){top:255px;}

/* ****************** 공통 :: Form ********************** */
/* -------- 공통 :: Select List Custom(option custom) -------- */
.cm-select-con{display:block; position:relative;}
.cm-select-con .cm-select-trigger{display:block; position:relative; width:100%; text-align:left; height:55px; border-bottom:5px solid #353535; color:#333; padding-right:30px; font-size:1.33333em; }
.cm-select-con .cm-select-trigger em{display:block; position:absolute; bottom:50%; left:0px; width:100%;  transform:translateY(50%); white-space:nowrap; overflow:hidden; font-weight:500; transition:all 0.3s; }
.cm-select-con .cm-select-trigger:after{position:absolute; top:50%; right:0px; transform:translateY(-50%); font-family:"xeicon"; font-size:1.6em; content: "\e942";}
.cm-select-con .cm-select-trigger.open:after{ transform:translateY(-50%) rotate(180deg);}
.cm-select-con .cm-select-trigger.open .button-tit,
.cm-select-con .cm-select-trigger.selected .button-tit{font-size:0.7em; transform:translateY(-100%); color:#92d050}
.cm-select-con .cm-select-option-list{position:absolute; top:100%; overflow-x:hidden; overflow-y:auto; max-height:200px; border:2px solid #353535; border-top:0; left:0; right:0; background-color:#fff; display:none; z-index:11; }
.cm-select-con .cm-select-option-list li .cm-select-option-item{display:flex; width:100%; height:40px; color:#333; font-size:1.1em; font-weight:500; padding:0 1em; align-items:center; transition:all 0.3s}
.cm-select-con .cm-select-option-list li .cm-select-option-item:hover{background-color:#f7f7f7; }

/* -------- 공통 :: Search -------- */
.cm-bbs-search-con{width:100%; position:relative; }
.cm-bbs-search-con .cm-bbs-search-input{position:relative; width:100%; padding-right:70px; box-sizing:border-box; height:55px; font-size:1.3333em; border:0; color:#333; transition:all 0.3s; background-color:transparent;}
input:focus::-webkit-input-placeholder{
    color: transparent !important;
}
input:focus::-moz-placeholder{
    color: transparent !important;
}
input:focus:-moz-placeholder{
    color: transparent !important;
}
input::-webkit-search-cancel-button{
	display:none;
}
.cm-bbs-search-con .cm-bbs-search-input::placeholder{color:#ccc;}
.cm-bbs-search-con .cm-bbs-search-input:focus{outline:none; border-bottom-color:#92d050}
.cm-bbs-search-con .cm-bbs-search-btn{position:absolute; top:50%; right:40px; transform:translateY(-50%); color:#333; font-size:1.6em; transition:all 0.3s 0s}
.cm-bbs-search-con .cm-bbs-reset-btn{}
.cm-bbs-search-con .cm-bbs-search-line{position:absolute; bottom:0px; left:0; width:100%; height:5px; background-color:#353535}
.cm-bbs-search-con .cm-bbs-search-line:after{position:absolute; bottom:0px; left:0px; width:100%; height:5px; content:""; background-color:#92d050; transition:transform 0.4s; transform:scaleX(0); transform-origin:0 0;}
.cm-bbs-search-con .cm-bbs-search-input:focus + .cm-bbs-search-btn{color:#92d050; transition-delay:0.2s}
.cm-bbs-search-con .cm-bbs-search-input:focus + .cm-bbs-search-btn + .cm-bbs-search-line:after{transform:scaleX(1)}

/* 공통 :: Reset 버튼 */
.cm-bbs-reset-btn{position:absolute; top:50%; right:0px; transform:translateY(-50%); margin-top:-1px; display:flex; align-items:center; color:#333; font-size:1.6em; transition:all 0.3s 0s}
.cm-bbs-reset-btn i{transition:all 0.3s ease;}
.cm-bbs-reset-btn:before{position:absolute; top:3px; bottom:6px; left:-8px; width:1px; background-color:#ccc; content:"";}
.cm-bbs-reset-btn:hover i{transform:rotate(270deg)}
.cm-select-next-reset.cm-bbs-reset-btn{right:auto; left:100%; margin-left:30px}
.cm-select-next-reset.cm-bbs-reset-btn:before{left:-15px; bottom:3px;}

/* ****************** 공통 :: 타이틀 ********************** */
.cm-sub-con-tit{font-size:64px; font-size:4.26666em; letter-spacing:-0.03125em; color:#252525; word-spacing:-0.015625em; }
.cm-sub-con-tit.has-line-height{line-height:1.125;}
.cm-sub-con-tit-txt{display:block; margin-top:1em; color:#aaa; font-size:0.3125em; font-weight:300; letter-spacing:-0.01em; word-spacing:-.016em; }
.cm-sub-con-tit.has-line-height .cm-sub-con-tit-txt{line-height:1.5;}
/* ****************** 공통 :: 더보기 버튼 ********************** */
.cm-list-more-btn-box{position:relative; margin-top:50px; text-align:center;}
.cm-list-more-btn-box:before{position:absolute; top:50%; left:0; width:100%; height:1px; background-color:#e5e5e5; content:"";}
.cm-list-more-btn{overflow:hidden; display: inline-block; position:relative; background-color:#fff;  border-radius:50%;}
.gray-style .cm-list-more-btn{background-color:#f7f7f7}
.cm-list-more-btn-icon{position:absolute; overflow:hidden; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:3px; color:#000; font-size:1.6em; color:#000; transition:color 0.5s}
.cm-list-more-btn:hover .cm-list-more-btn-icon{color:#6fb638}
.cm-list-more-btn:hover .cm-list-more-btn-icon i{
	-webkit-animation: ani_icon 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: ani_icon 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cm-list-more-btn-inner {
    position: relative;
    width: 100px;
    height: 100px;
    visibility: inherit;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.cm-list-more-btn-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.cm-list-more-btn-line svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #e5e5e5;
    stroke-width: 1px;
    fill: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.cm-list-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: #6fb638;
}
.cm-list-more-btn:hover .cm-list-more-btn-inner .cm-list-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;
}
@keyframes ani_icon{
	0%{
		transform:translateY(-100%);
	}
	100%{
		transform:translateY(0);
	}
}
@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
	}
}

.cm-loading{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:none;
	z-index:99999;
}
.cm-loading svg {
	width: 100px;
	height: 100px;
	margin: 20px;
	display: inline-block;
}

/* ****************** 공통 :: svg ********************** */
.draw-svg-icon * {
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	transition: all 0s ease;
}
.draw-svg-icon svg{width:100%; height:100%;}
.draw-svg-icon *{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5px; stroke:url(#linear-gradient);}
.animated .draw-svg-icon *{
	stroke-dashoffset: 0;
	transition: all 10s ease;
}

/* ****************** 공통 :: 리스트 ********************** */
.cm-isotope-list-conatiner{/* overflow:hidden; */ } /* 그림자를 위해 주석처리 2021-11-24*/