@charset "UTF-8";

.container {position: relative; padding:13rem 0;}

#wrap {overflow:hidden;}

.inner {max-width:1280px; margin: auto;}
.sub_inner { }
.sub_content .sub_inner { width:100%; max-width:1500px; margin:auto; }

.main_tit {text-align: center;}
.main_tit h3 {font-size:4.2rem; line-height: 5.2rem; font-weight:600;}
.main_tit p {padding: 3rem 0 6rem 0; color: #999; font-size: 18px; font-weight: 600;}
.main_tit_left h3 {line-height:8rem; font-size:7rem;color: #fff;}
.main_tit_left .main-txt { display: flex; justify-content: space-between; padding-top: 150px; color: #fff;}
.main_tit_left .main-txt h4 { line-height:5rem; color: #fff; font-size: 4.2rem; font-weight: 700;}
.main_tit_left .main-txt p { line-height:3rem; color: #999; font-size: 1.7rem; font-weight: 700;}

.common-effect .pen { background: linear-gradient(to right, rgba(255,255,255,0) 50%, #131022 50%);   background-size: 200%; transition: .8s;}
.common-effect.ani-active .pen {    background-position: -100% 0; color: #fff !important;}

/*모바일 줄넘김*/
.mbr {display:none;}

.point {color:#534a80; letter-spacing:-2px; }

/*flex*/
.flex_wrap {display:flex;  justify-content: space-between;}
.flex_wrap.flex_end { align-items:flex-end; }

/* 말줄임표 */
.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* 말줄임표 (여러줄) */
.ellipsis_2 {  display:-webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; white-space: normal;  overflow: hidden; text-overflow: ellipsis; }

/* 텍스트 숨김 sound_only */
.blind {position: relative; display: block; width: 0px;  height: 0px;  overflow: hidden;}

/* 더보기 버튼 */
.more { display:inline-block; padding: 2.1rem 4.2rem; font-weight:700; font-size:1.5rem;  border:1px solid#000; border-radius:0rem; transition: .4s; }
.more::after {content:''; display:inline-block; vertical-align: bas; width:1.5rem; height:1rem; margin-left:.5rem; background: url(/main/img/arrow_btn.png) no-repeat; }
.more:hover::after {background: url(/main/img/arrow_btn_wh.png) no-repeat; }
.more.wh {border:1px solid#FFF; color:#FFF;}
.more.wh::after {background: url(/main/img/arrow_btn_wh.png) no-repeat;}
.more.wh:hover::after {background: url(/main/img/arrow_btn.png) no-repeat;}
.more > img {margin-left:.7rem; vertical-align: baseline;}

/* 커스텀 셀렉트 */
.custom-select {position: relative;}
.custom-select select {display:none;}
.select-selected {background-color: transparent; font-size:16px; line-height:49px; color:#222;}
.select-selected:after {position: absolute; content: ""; top: 50%; right: 0px; margin-top: -2px; width: 0; height: 0; border: 6px solid transparent; border-color: #222 transparent transparent transparent;}
.select-selected.select-arrow-active:after {border-color: transparent transparent #222 transparent;  margin-top: -6px;}
.select-selected {color: #222; border: 0px solid transparent; border-bottom:1px solid#000; cursor: pointer;}
.select-items {position: absolute; background-color: #fff; padding: 10px 0;  top: 100%; left: 0; right: 0; z-index: 50; border: solid 1px #222;}
.select-items div{color: #222; cursor: pointer; padding: 10px 20px; font-size:1.5rem; }
.select-hide { display: none;}
.select-items div:hover, .same-as-selected {background-color: rgba(0, 0, 0, 0.1);}
.bg-gradient { background: #e97829; /* Old browsers */
background: -moz-linear-gradient(-45deg, #e97829 30%, #da042d 80%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #e97829 30%,#da042d 80%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #e97829 30%,#da042d 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e97829', endColorstr='#da042d',GradientType=1 ); }

/*게시글 공통 버튼*/
.btn_default{display: inline-block; overflow: hidden;}
.btn_default > a, .btn_default > button  {background:#534a80;width: 320px;height: 60px;line-height: 60px;display:inline-block;font-size: 16px; position: relative;overflow: hidden;text-align: center;}
.btn_default a.btn_del {background:#999; }
.btn_default > button {margin-left:2rem; color:#FFF;}
.btn_default a .btn_txt , .btn_default button .btn_txt {display: flex; align-items:center; justify-content:center; height:100%; position: absolute;left: 0; right:0; top:0; transition: all 0.7s;opacity: 1; color:#fff;}
.btn_default a:hover .btn_txt, .btn_default button:hover .btn_txt  {left: 30px;right:180px}
.btn_default a::after, .btn_default > button::after {content: '';display: inline-block;width: 22px;height: 22px;background: url(/main/img/btn_arrow.svg) 0 0 / contain no-repeat;position: absolute;right: 50%;top: 50%;transform: translateY(-50%);transition: all 0.7s;opacity: 0;}
.btn_default a:hover::after ,.btn_default > button:hover::after {right: 30px;opacity: 1;}
	
/*화살표*/
.arrow_wrap {position:relative;}
.c_arrow {content: ''; display:inline-block; position: absolute; width: 15px;  height:15px; right:-30px; top:3px;  border-top: 2px solid #fff;   border-right: 2px solid #fff; transform: rotate(45deg); opacity:0.5; }


/*더보기 애니메이션 버튼*/
.ani_btn {display:inline-block; position:relative; color:#fff; font-size:18px;}
.ani_btn .ani_round {display:inline-block;  }
.ani_btn .ani_round::before { content: "";  display:inline-block; left:0;  position: absolute; top: 80%; z-index: -1;   width: 3.8rem; height: 3.8rem; margin-top: -2.4rem; border-radius: 20rem; transform:translateX(-30px); background-color: #534a80; animation: r_btn .5s ease-in-out;}
.ani_btn:hover .ani_round::before { transform:translateX(88px);  animation: r_btn_before .5s ease-in-out; }

@keyframes r_btn {
  0% {
		width: 12.8rem;
		transform:translateX(0px);
	}
  50% {
	
  }
  100% {
		transform:translateX(-30px);
  }
}

@keyframes r_btn_before {
  0% {
		width: 12.8rem;
		transform:translateX(-30px);
	}
  50% {
	
  }
  100% {
		
		transform:translateX(88px);
  }
}