@charset "UTF-8";

/* 폰트 */
/*
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/
/* 디스플레이 테이블 */
.dis-t{ display: table; }
.dis-tc{ display: table-cell; }
.dis_t{ display: table; width: 100%; }
.dis_tc{ display: table-cell; }
.tfix{ table-layout: fixed; }
@media all and (max-width:1169px){
	.con_pc{ display: none; }
	.con_m{ display: block; }
}
@media all and (min-width:1170px){
	.con_pc{ display: block; }
	.con_m{ display: none; }
	
	.dis_t_pc{ display: table; width: 100%; }
	.dis_tc_pc{ display: table-cell; }
}


.youtube{ position: relative; }
.youtube:after{ display: block; content: ""; padding-top: 56.25%; }
.youtube iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* =========================
	LAYOUT
========================= */
/* max-width */
.w1100{ max-width: 1140px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }
.w1200{ max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }
.w1400{ max-width: 1440px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }
.w1500{ max-width: 1540px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }
.w1600{ max-width: 1640px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; }

.num_ul{ padding-left: 20px; }
.num_ul > li{ list-style: decimal; }
.num_ul > li:last-child{ margin-bottom: 0; }

.bar_ul li{display: table; width: 100%;}
.bar_ul li:before{ content: "-"; display: table-cell; vertical-align: top; width: 12px; }
.bar_ul li p{ display: table-cell; vertical-align: top; }

/* 리더기 */
.sound_only{display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0;text-indent:-9999em;line-height:0;border:0 !important;overflow:hidden !important;}
@media (max-width:1023px) {
	.pc_con{ display: none; }
	.m_con{ display: block; }
}
@media (min-width:1024px) {
	.pc_con{ display: block; }
	.m_con{ display: none; }
}

.trans_{
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.trans_opa{
-webkit-transition: 0.2s opacity ease-in-out;
-moz-transition: 0.2s opacity ease-in-out;
-ms-transition: 0.2s opacity ease-in-out;
-o-transition: 0.2s opacity ease-in-out;
transition: 0.2s opacity ease-in-out; }
.boxs{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
/* 가로정렬 */
.ta_c{ text-align: center; }
.ta_r{ text-align: right; }
.ta_l{ text-align: left; }
.ta_j{ text-align: justify; }
/*세로정렬*/
.va_m{ vertical-align: middle; }
/* 단어자르기 */
.wb_ka{ word-break: keep-all; }
/* 단어간격 */
.ls_05{letter-spacing: -0.5px; }
.ls_1{letter-spacing: -1px; }


/*font-size*/
.fs13{font-size: 13px;}
.fs14{font-size: 14px;}
.fs20{font-size: 20px;}
.fs23{font-size: 23px;}
.fs40{font-size: 40px;}

.fw500{ font-weight: 500; }
.fw600{ font-weight: 600; }
.fw700{ font-weight: 700; }
.fw800{ font-weight: 800; }
.fw900{ font-weight: 900; }

.as_font .svg-inline--fa,
.as_font .fas{ vertical-align: baseline; }

/*디스플레이 테이블*/
.dis_t{ display: table; width: 100%; }
.tl_fix{ table-layout: fixed; }
.dis_tr{ display: table-row; }
.dis_tc{ display: table-cell; }

/* position */
.str{ position: relative; }
.str > .left{ float: left; }
.str > .right{ float: right; }
.str > .center{ position: absolute; top: 50%; left: 50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
.str > .caption{ position: absolute; top: 33%; left: 0; width: 100%; /*transform:translateY(-50%); -webkit-transform:translateY(-50%);*/ text-align: center; padding: 0 10px; box-sizing: border-box; -webkit-box-sizing: border-box; z-index: 10; }


/* float */
.clear:after{ display: block; content: ""; clear: both; }
.clear .left{float: left;}
.clear .right{float: right;}

/*float_list*/
.float_list:after{ display: block; content: ""; clear: both; }
.float_list > li{ display: block; float: left; }
.float_list > li > a{ display: block; }
.float_list.line > li > a{ display: inline-block; }
.float_list.line > li:after{ display: inline-block; content: "│"; }
.float_list.line > li:last-child:after{ display: none; }

/*txt_wrap*/
.txt_wrap{ color: #777777; letter-spacing: -1px; }
.txt_wrap .tit{ margin-bottom: 50px; color: #333333; font-size: 1rem; }
.txt_wrap .txt{ margin-bottom:30px; }
.txt_wrap .txt:last-child{ margin-bottom: 0; }
.txt_wrap p{ display: inline; }
.txt_wrap .last{ text-align: right; margin-top: 50px; margin-bottom: 0; }
.txt_wrap .reverse p{ display: block; }
@media all and (min-width:420px) {
	.txt_wrap .txt br{ display: block;}
}
@media all and (min-width:768px) {
	.txt_wrap{ font-size: 16px; }
	.txt_wrap .tit{ font-size: 20px; }
	.txt_wrap .reverse p{ display: inline-block; }
}
@media all and (min-width:1200px) {
	.txt_wrap p{ display: block; margin-right: 0; }
}

/* selectbox */
.selectbox{ position: relative; }
.selectbox .select-con{ position: absolute; top: 85px; left: 0; line-height: 30px; background: #fff; border-radius: 5px; display: none; }
.selectbox .select-con a{ display: block; padding: 0 10px; }

/* =========================
	bxslider common
========================= */
/* bx slider custom 배경없애기 */
.bx-wrapper{ box-shadow:none; border:none; margin-bottom: 0; background: none; }
/* bx-pager 사파리 글자 오류 수정 */
.bx-wrapper .bx-viewport{ -webkit-transform:none; }
/* bx slider 중앙정렬 */
.sliders{ position: relative; }
.sliders .img img{ display: block; width: 100%; }
.sliders .slider{ position: relative; }
.sliders .caption{ position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); -webkit-transform:translateY(-50%); text-align: center; }
.sliders .caption img{ display: block; margin: 0 auto; max-width: 100%;}

/* =========================
	text-overflow
========================= */
.word_space{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.text_over1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.text_over2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 
/* =========================
	width
========================= */
.w100{ width:100%;}
.w50{ width:50%;}
.w30{ width:30%;}

/*=========================
	overflow X scroll
=========================*/
.of_s{ width: 96%; margin-left: 4%;overflow: hidden;overflow-x: scroll;-webkit-overflow-scrolling: touch; }
.of_s::-webkit-scrollbar { -webkit-appearance: none; }
.of_s::-webkit-scrollbar:horizontal{ height: 10px; }
.of_s::-webkit-scrollbar-thumb{background-color: #ccc; border-radius: 10px; border: 2px solid #eee; }
.of_s::-webkit-scrollbar-track{ background-color: #eee; }
/* PC */
@media all and (min-width:1200px){
	.of_s{ margin-left: 0; width: 100%; overflow-x:inherit; overflow:inherit; }
}

/* =========================
	삼각형
========================= */
.tri_rotate{ width: 0px;height:0px; border-right:32px solid transparent;border-bottom:32px solid #692f74; }

/* =========================
	IMG
========================= */
.imgw100{display: block; width: 100%;}

/* =========================
	MARGIN LEFT
========================= */
.ml10{ margin-left: 10px;}
.ml20{ margin-left: 20px;}
.ml25{ margin-left: 25px;}
/* =========================
	MARGIN RIGHT
========================= */
.mr5{ margin-right: 5px;}
/* =========================
	MARGIN TOP
========================= */
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt90{margin-top: 90px;}
.mt115{margin-top: 115px;}
.mt145{margin-top: 145px;}
/* =========================
	MARGIN BOTTOM
========================= */
.mb05{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}
.mb55{margin-bottom: 55px;}
.mb60{margin-bottom: 60px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}
.mb90{margin-bottom: 90px;}
.mb95{margin-bottom: 95px;}
.mb100{margin-bottom: 100px;}
.mb110{margin-bottom: 110px;}
.mb115{margin-bottom: 115px;}
.mb120{margin-bottom: 120px;}
.mb130{margin-bottom: 130px;}
.mb145{margin-bottom: 145px;}
.mb150{margin-bottom: 150px;}

/* =========================
	PADDING TOP
========================= */
.pt100{padding-top: 100px; }
.pt115{padding-top: 115px; }
.pt117{padding-top: 117px; }
.pt120{padding-top: 120px; }
/* =========================
	PADDING BOTTOM
========================= */
.pb70{ padding-bottom: 70px; }
/* =========================
	PADDING RIGHT
========================= */
.pr05{ padding-right: 5px; }

/* =========================
	BOX HOVER EFFECT
========================= */
.boxesline{ display: block; position: relative; border-collapse: collapse; }
.boxesline:before{ transition: all 0.4s; position: absolute; content: ""; width: 100%; height: 50%; left: 49.3%; margin-left: -50%; top: 25%; border-color: rgba(84, 137, 199, 0); border-style: solid; border-width: 0 7px; }
.boxesline:after{ transition: all 0.4s; position: absolute; content: ""; width: 50%; height: 92%; left: 50%; margin-left: -25%; top: 0; border-color: rgba(84, 137, 199, 0); border-style: solid; border-width: 7px 0; }
.boxesline:hover:after{ width: 100%; margin-left: -50%; border-color: #5489c7; }
.boxesline:hover:before{ height: 100%; top: 0%; border-color: #5489c7; }

/*=========================
	애니메이션
=========================*/
/*base code*/
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-transition: transform 0.5s ease; transition: transform 0.5s ease; }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
/*the animation definition*/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translateY(1);
    -ms-transform: translateY(1);
    transform: translateY(1);
  }
  50% {
    -webkit-transform: translateY(1.2em);
    -ms-transform: translateY(1.2em);
    transform: translateY(1.2em);
  }
  100% {
    -webkit-transform: translateY(1);
    -ms-transform: translateY(1);
    transform: translateY(1);
  }
}
@keyframes pulse {
   0% {
    -webkit-transform: translateY(1);
    -ms-transform: translateY(1);
    transform: translateY(1);
  }
  50% {
    -webkit-transform: translateY(1.2em);
    -ms-transform: translateY(1.2em);
    transform: translateY(1.2em);
  }
  100% {
    -webkit-transform: translateY(1);
    -ms-transform: translateY(1);
    transform: translateY(1);
  }
}
.pulse{ -webkit-animation-name: pulse; animation-name: pulse; }
.pulse:hover{ -webkit-animation-name: none; animation-name: none; }