@charset "utf-8";
*, *:before, *:after {
  box-sizing: border-box;
}
/**** 공통소스 ****/
@-ms-viewport {
  width: device-width;
}
div{box-sizing:border-box}
.lightbox {
	display: none;
}
input[type=text]::-ms-clear{display: none} 
.font_st {font-weight: 500;font-family: 'Noto Sans KR', sans-serif; }


/**** pc ****/
@media only all and (min-width:1301px) {
.pc_view { }
.tb_view { display:none !important}
.mobile_view { display:none !important}
}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:768px) {
.pc_view {display:none  !important}
.tb_view { display:block !important}
.mobile_view {display:none  !important}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.pc_view {display:none  !important}
.tb_view { display:none !important}
.mobile_view {display:block  !important}
}



/**** pc ****/
@media only all and (min-width:768px) {
.pc_view2 {display:block  ; width: 100%; float: left}
.mobile_view2 { display:none !important}
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.pc_view2 {display:none  !important}
.mobile_view2 {display:block  !important; width: 100%; float: left}
}




/**** pc ****/
@media only all and (min-width:769px) {
img.pc_view { display:block !important}
img.mobile_view { display:none !important}
ul.pc_view { display:block !important}
ul.mobile_view { display:none !important}
}
/**** 모바일 ****/
@media only all and (max-width:768px) {
img.pc_view {display:none  !important}
img.mobile_view {display:block   !important}
ul.pc_view {display:none  !important}
ul.mobile_view {display:block  !important}
}






/**** 타이틀 : pc ****/

@media only all and (min-width:769px) {
.com_stitle{ width: 100%; font-size: 22px; color: #000; font-family: 'Noto Sans KR', sans-serif; margin-bottom: 20px}
.com_stitle em{ font-size: 12px; color: #999; }
	
.title_bar .title2 {idth:100%; float:left;   margin-bottom: 30px}
.title_bar .title2 p.text1{width:100%; float:left; margin-bottom:5px;  font-size:24px; color:#000 ;font-family: 'Noto Sans KR', sans-serif; font-weight: 500; letter-spacing: -1px}
.title_bar .title2 p.text2{width:100%; float:left; font-size:14px; color:#999; line-height:16px}

.title_bar2{	width:100%;	float:left; margin-bottom:20px;}
.title_bar2 .text1{float:left; font-size:22px;color:#000;  margin-right:10px;;font-family: 'Noto Sans KR', sans-serif; font-weight: 500}
.title_bar2 .text2{ float:left; font-size:12px; color:#999; line-height:16px; margin-top:15px }


.btn_box_box{ width: 100%;  text-align: center; overflow: hidden;}
.btn_box_box a{ display: inline-block; vertical-align: middle;} 


}
/****  타이틀  : 모바일 ****/
@media only all and (max-width:768px) {
.com_stitle{ width: 100%; font-size: 18px; color: #000;  ;font-family: 'Noto Sans KR', sans-serif;margin-bottom: 10px}
.title_bar .title2 {idth:100%; float:left;  margin-bottom: 10px}
.title_bar .title2 p.text1{width:100%; float:left; margin-bottom:5px;  font-size:20px; color:#000 ;font-family: 'Noto Sans KR', sans-serif; font-weight: 500}
.title_bar .title2 p.text2{width:100%; float:left; font-size:12px; color:#999; line-height:16px}

.title_bar2{	width:100%;	float:left; margin-bottom:20px;}
.title_bar2 .text1{width:100%;	float:left; font-size:18px;color:#000; font-weight:500;  margin-right:10px;;font-family: 'Noto Sans KR', sans-serif; line-height: 24px}
.title_bar2 .text2{ width:100%;	float:left; font-size:12px; color:#999; line-height:16px; margin-top:5px }


.btn_box_box{ width: 100%;  text-align: center; overflow: hidden; margin-top: 20px}
.btn_box_box a{ display: inline-block; vertical-align: middle;} 


}

/* 전체 사이즈 */

/**** pc ****/
@media only all and (min-width:1301px) {
.inner {width: 100%; margin:0px auto; display: table; padding: 0px 5%; box-sizing: border-box; position: relative }
.inner2 {width: 1250px; margin:0px auto;  }
.inner2_2 {width: 1200px; margin:0px auto;  }
.inner3 {width: 1080px; margin:0px auto; }
}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:769px) {
.inner {width: 100%; margin:0px auto; display: table; padding: 0px 20px; box-sizing: border-box; position: relative }
.inner2 {max-width: 1200px; margin:0px auto;  padding: 0px 20px; box-sizing: border-box  }
.inner2_2 {max-width: 1200px; margin:0px auto;  padding: 0px 20px; box-sizing: border-box  }
.inner3 {max-width: 1080px; margin:0px auto; padding: 0px 20px; box-sizing: border-box  }
}
/**** 모바일 ****/
@media only all and (max-width:768px) {
.inner {width: 100%; margin:0px auto; display: table;  position: relative }
.inner2 {width: 100%;  margin:0px auto;  padding: 0px 10px; position: relative ; }
.inner2_2 {max-width: 1200px; margin:0px auto;  padding: 0px 0px; box-sizing: border-box  }
.inner3 {width: 100%;  margin:0px auto;  padding: 0px 0px;  }

}



/**** 기본 갤러리 3개 ****/
/**** pc ****/
@media only all and (min-width:769px) {
ul.t_3n_pr li{ width: 33.3%; float: left; padding-right: 30px ; box-sizing: border-box}	
ul.t_3n_pr li:nth-child(3n){ width: 33.3%; float: left; padding-right: 0px  ; box-sizing: border-box}	

ul.t_2n li{ width: 50%; float: left; }
ul.t_3n li{ width: 33.3%; float: left; }
ul.t_4n li{ width: 25%; float: left; }	
ul.t_5n li{ width: 20%; float: left; }	
}
/**** 모바일 ****/
@media only all and (max-width:768px) {
ul.t_3n_pr li{ width: 33.3%; float: left; padding-right: 5px ; box-sizing: border-box}	
ul.t_3n_pr li:nth-child(3n){ width: 33.3%; float: left; padding-right: 0px  ; box-sizing: border-box}	

ul.t_2n li{ width: 50%; float: left; }
ul.t_3n li{ width: 33.3%; float: left; }
ul.t_4n li{ width: 25%; float: left; }	
ul.t_5n li{ width: 33.3%; float: left; }	
}

/**** 기본 갤러리 ****/
/**** pc ****/
@media only all and (min-width:769px) {
.m_sp_gray{background-color: #fff}	
	
}
/**** 모바일 ****/
@media only all and (max-width:768px) {
.m_sp_gray{ background-color: #f7f7f7}	
}


a{text-decoration:none}
a:hover{text-decoration:none}

.t_center{text-align:center}
.t_right{text-align:right}
.text-center{text-align:center}
.div_img{ width:100%; float:left}
.div_img img{ }

.input_st{ border: 1px solid #ccc !important; box-sizing: border-box; background-color: #f7f7f7 ; padding: 15px 15px !important; }
input.input_st{ border: 1px solid #ccc; box-sizing: border-box; height: 40px !important; line-height: 40px !important;  background-color: #f7f7f7 !important; padding: 0px 15px !important; }

/* 정렬 */
.al {text-align:left !important;}
.ar {text-align:right !important;}
.ac {text-align:center !important;}
.fl {float:left !important;}
.fr {float:right !important;}
.fn {float:none !important;}
.cl {clear:both;}
.vt {vertical-align:top;}
.vm {vertical-align:middle;}
.clfix {overflow:hidden;}

.comf{float:left !important; width: 100%}



/**** 중간라인 ****/
.w_50p_line_r{float:left; width:calc(50% - 1px); box-sizing:border-box; border-right:1px solid #ccc;  padding-right:40px}
.w_50p_line_l{float:right; width:calc(50% - 1px); box-sizing:border-box ; padding-left:40px}

/**** 컨텐츠 사이 ****/
.sp_div{ width:100%; float:left; height:2vw}
.sp_div2{ width:100%; float:left; height:3vw}
.sp_div3{ width:100%; float:left; height:4vw}




/**** 이미지 왼쪽 ****/
.text_img_left{ width:100%; float:left;}
.text_img_left img{ width:40%; float:left;}
.text_img_left .text{ width:60%; float:right;  font-size:14px; font-weight:300; color:#666; letter-spacing:-0.5px; box-sizing:border-box; padding-left:20px}

/**** 라인 ****/
.line_b{ width:100%; float:left; border-bottom:1px solid #ccc; height:1px; margin:50px 0px}
.line_b2{ width:100%; float:left; border-bottom:1px solid #ccc; height:1px; margin:5px 0px}
.line_b3{ width:100%; float:left; border-bottom:1px solid #ccc; height:1px; margin:30px 0px}



.title_b_line{ width:100%; float:left; margin:10px 0px 30px 0px; height:1px; border-left:90px solid #666; box-sizing:border-box}


/**** 영역 ****/
.w_100p{  width:100% ;box-sizing:border-box}
.w_90p{ width:90% ;box-sizing:border-box }
.w_80p{  width:80% ;box-sizing:border-box }
.w_70p{ width:70% ;box-sizing:border-box }
.w_60p{  width:60% ;box-sizing:border-box }
.w_50p{ width:50% ;box-sizing:border-box }
.w_48p{  width:48% ;box-sizing:border-box }
.w_45p{  width:45% ;box-sizing:border-box }
.w_40p{  width:40% ;box-sizing:border-box }
.w_33p{ width:33% ;box-sizing:border-box }
.w_30p{ width:30% ;box-sizing:border-box }
.w_20p{  width:20% ;box-sizing:border-box }
.w_19p{ width:18% ;box-sizing:border-box }
.w_18p{ width:18% ;box-sizing:border-box }
.w_15p{ width:15% ;box-sizing:border-box }
.w_10p{ width:10% ;box-sizing:border-box }

.w_80px{ width:80px ;box-sizing:border-box }


/**** 영역 ****/
.w_90p_center{width:90% ;box-sizing:border-box; margin:0px auto }
.w_80p_center{ width:80% ;box-sizing:border-box ; margin:0px auto}
.w_70p_center{ width:70% ;box-sizing:border-box ; margin:0px auto}
.w_60p_center{ width:60% ;box-sizing:border-box ; margin:0px auto}
.w_50p_center{ width:50% ;box-sizing:border-box; margin:0px auto }
.w_40p_center{ width:40% ;box-sizing:border-box; margin:0px auto }
.w_30p_center{  width:30% ;box-sizing:border-box; margin:0px auto }
.w_20p_center{  width:20% ;box-sizing:border-box ; margin:0px auto}
.w_10p_center{  width:10% ;box-sizing:border-box; margin:0px auto }




/**** 공백 ****/
.sp_100{ width:100%; height:100px; float:left}
.sp_90{ width:100%; height:90px; float:left}
.sp_80{ width:100%; height:80px; float:left}
.sp_70{ width:100%; height:70px; float:left}
.sp_60{ width:100%; height:60px; float:left}
.sp_50{ width:100%; height:50px; float:left}
.sp_40{ width:100%; height:40px; float:left}
.sp_30{ width:100%; height:30px; float:left}
.sp_20{ width:100%; height:20px; float:left}
.sp_10{ width:100%; height:10px; float:left}

/**** 마진값: 하단 ****/
.mb_100{ margin-bottom:100px !important}
.mb_90{ margin-bottom:90px !important}
.mb_80{ margin-bottom:80px !important}
.mb_70{ margin-bottom:70px !important}
.mb_60{ margin-bottom:60px !important}
.mb_50{ margin-bottom:50px !important}
.mb_40{ margin-bottom:40px !important}
.mb_30{ margin-bottom:30px !important}
.mb_20{ margin-bottom:20px !important}
.mb_10{ margin-bottom:10px !important}
.mb_5{ margin-bottom:5px !important}
.mb_m1{ margin-bottom:-1px}

/**** 마진값: 상단 ****/
.mt_100{ margin-top:100px}
.mt_90{ margin-top:90px}
.mt_80{ margin-top:80px}
.mt_70{ margin-top:70px}
.mt_60{ margin-top:60px}
.mt_50{ margin-top:50px}
.mt_40{ margin-top:40px}
.mt_30{ margin-top:30px}
.mt_20{ margin-top:20px}
.mt_10{ margin-top:10px}
.mt_5{ margin-top:5px}
.mt_m1{ margin-top:-1px}

/**** 마진값: 좌 ****/
.ml_10{ margin-left:100px}
.ml_90{ margin-left:90px}
.ml_80{ margin-left:80px}
.ml_70{ margin-left:70px}
.ml_60{ margin-left:60px}
.ml_50{ margin-left:50px}
.ml_40{ margin-left:40px}
.ml_30{ margin-left:30px}
.ml_20{ margin-left:20px}
.ml_10{ margin-left:10px}
.ml_m1{ margin-left:-1px}

/**** 마진값: 우 ****/
.mr_100{ margin-right:100px}
.mr_90{ margin-right:90px}
.mr_80{ margin-right:80px}
.mr_70{ margin-right:70px}
.mr_60{ margin-right:60px}
.mr_50{ margin-right:50px}
.mr_40{ margin-right:40px}
.mr_30{ margin-right:30px}
.mr_20{ margin-right:20px}
.mr_10{ margin-right:10px}
.mr_5{ margin-right:5px}
.mr_2{ margin-right:2px}
.mr_m1{ margin-right:-1px}


/**** 패딩: 상하좌우 ****/

.pd_50{padding:50px}
.pd_40{padding:40px}
.pd_30{padding:30px}
.pd_20{padding:20px}
.pd_10{padding:10px}
/**** 패딩: 좌 ****/

.pd_l_50{padding-left:50px;box-sizing:border-box}
.pd_l_40{padding-left:40px;box-sizing:border-box}
.pd_l_30{padding-left:30px;box-sizing:border-box}
.pd_l_20{padding-left:20px ;box-sizing:border-box}
.pd_l_10{padding-left:10px; box-sizing:border-box}

.pd_r_50{padding-right:50px;box-sizing:border-box}
.pd_r_40{padding-right:40px;box-sizing:border-box}
.pd_r_30{padding-right:30px;box-sizing:border-box}
.pd_r_20{padding-right:20px ;box-sizing:border-box}
.pd_r_10{padding-right:10px; box-sizing:border-box}

/**** 테두리 라운드 각 ****/
.br_0{border-radius: 0px;}
.br_2{border-radius: 2px;}
.br_4{border-radius: 4px;}
.br_5{border-radius: 5px;}
.br_7{border-radius: 7px;}
.br_10{border-radius: 10px;}


/**** 패딩: 상 ****/

.pd_t_5{padding-top:5px;box-sizing:border-box}
.pd_t_10{padding-top:10px;box-sizing:border-box}
.pd_t_15{padding-top:15px;box-sizing:border-box}
.pd_t_20{padding-top:20px;box-sizing:border-box}
.pd_t_25{padding-top:25px;box-sizing:border-box}

/**** 버튼크기 ****/
.btn_size1{padding:0px 10px; font-size:13px; height:30px; line-height:30px !important; display: inline-block}
.btn_size2{padding:0px 15px; font-size:14px;  height:35px; line-height:35px !important; display: inline-block}
.btn_size3{padding:0px 25px; font-size:14px;  height:40px; line-height:40px !important; display: inline-block}

.btn_size4{padding:0px 5px; font-size:12px; height:21px; line-height:18px !important; display: inline-block}

/**** 버튼컬러 ****/
.btn_gray1{ border:1px solid #ccc; background-color:#eee; color:#666;text-decoration:none}
.btn_gray1:hover{ border:1px solid #999999; background-color:#eee; color:#666;text-decoration:none}

.btn_gray2{ border:1px solid #666; background-color:#999; color:#fff;text-decoration:none}
.btn_gray2:hover{ border:1px solid #333; background-color:#666; color:#fff;text-decoration:none}

.btn_gray3{ border:1px solid #333; background-color:#666666; color:#fff;text-decoration:none}
.btn_gray3:hover{ border:1px solid #000; background-color:#333; color:#fff;text-decoration:none}

.btn_white1{ border:1px solid #ccc; background-color:#fff; color:#666;text-decoration:none}
.btn_white1:hover{ border:1px solid #999999; background-color:#fff; color:#666;text-decoration:none}

.btn_black1{ border:1px solid #000; background-color:#333; color:#fff;text-decoration:none}
.btn_black1:hover{ border:1px solid #000; background-color:#000; color:#fff;text-decoration:none}


/**** 포인트버튼 ****/
.btn_point1{ border:1px solid #3e64ab; background-color:#5d84cf; color:#fff;text-decoration:none}
.btn_point1:hover{ border:1px solid #2f539a; background-color:#3e64ab; color:#fff;text-decoration:none}




/**** 박스컬러 ****/
.box_gray1{border:1px solid #ccc; background-color:#f7f7f7; }


/**** 폰트크기 ****/
.font_19{ font-size:19px !important }
.font_18{ font-size:18px !important}
.font_17{ font-size:17px !important}
.font_16{ font-size:16px !important}
.font_15{ font-size:15px !important}
.font_14{ font-size:14px !important }
.font_13{ font-size:13px !important }
.font_12{ font-size:12px !important}

.fw_200{ font-weight:200;font-family: 'Noto Sans KR', sans-serif; }
.fw_300{ font-weight:300;font-family: 'Noto Sans KR', sans-serif; }
.fw_400{ font-weight:400;font-family: 'Noto Sans KR', sans-serif; }
.fw_500{ font-weight:500;font-family: 'Noto Sans KR', sans-serif; }

.font_color1{ color:#0033a7}
.font_color2{ color:#f13c55}
.font_color3{ color:#000; font-weight: 500;;font-family: 'Noto Sans KR', sans-serif; }

/**** 아이콘 li 설명 텍스트 : 체크아이콘 ****/
ul.iconlist1{ width:100%; float:left; }
ul.iconlist1 li{ width:100%; float:left;margin-bottom:10px; position:relative; font-size:14px; color:#666; line-height:18px; padding-left:25px; box-sizing:border-box}
ul.iconlist1 li i{ float:left; font-size:18px; color:#666; position:absolute; left:0px; top:0px; line-height:19px }



/**** 테이블 bg ****/
.tb_bg_color1{ background-color:#e7e9ef !important}


/**** 폰트 강조****/
.font_em { font-weight:500; color:#333}
.font_em2 { font-weight:500; color:#0b8bc1}
.font_em3 {
	font-weight:500;
	color:#0b8bc1;
	text-decoration: underline;
}
.font_em4 { font-weight:500; }

/**** 입력폼 기본 ****/

input[type="search"] {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
input[type="radio"], input[type="checkbox"] {
	margin:4px 0 0;
	margin-top:1px \9;
	line-height:normal
}
input[type="file"] {
	display:block
}
input[type="range"] {
	display:block;
	width:100%
}
select[multiple], select[size] {
	height:auto
}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
	outline:thin dotted;
	outline:5px auto -webkit-focus-ring-color;
	outline-offset:-2px
}


.input_st1 {
	display:block;
	width:100%;
	height:34px;
	padding:6px 12px;
	font-size:14px;
	line-height:1.42857143;
	color:#555;
	background-color:#eee;
	background-image:none;
	border:1px solid #ccc;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; ; font-size: 20px
}
.input_st1:focus {
	border-color:#66afe9;
	outline:0;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)
}
.input_st1::-moz-placeholder {
color:#999;
opacity:1
}
.input_st1:-ms-input-placeholder {
color:#999
}
.input_st1::-webkit-input-placeholder {
color:#999
}
.input_st1::-ms-expand {
border:0;
background-color:transparent
}
.input_st1[disabled], .input_st1[readonly], input_st1[disabled] .input_st1 {
	background-color:#eee;
	opacity:1
}
.input_st1[disabled], fieldset[disabled] .input_st1 {
	cursor:not-allowed
}



.input_st2 {
	display:block;
	width:100%;
	height:34px;
	padding:6px 12px;
	font-size:14px;
	line-height:1.42857143;
	color:#555;
	background-color:#f4f4f4;
	background-image:none;
	 border:none;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
.input_st2:focus {
	border-color:#66afe9;
	outline:0;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)
}
.input_st2::-moz-placeholder {
color:#999;
opacity:1
}
.input_st2:-ms-input-placeholder {
color:#999
}
.input_st2::-webkit-input-placeholder {
color:#999
}
.input_st2::-ms-expand {
border:0;
background-color:transparent
}
.input_st2[disabled], .input_st1[readonly], input_st1[disabled] .input_st1 {
	background-color:#eee;
	opacity:1
}
.input_st2[disabled], fieldset[disabled] .input_st1 {
	cursor:not-allowed
}




select {font-family:'Noto Sans KR',"NanumBarunGothic", nbg, dotum, sans-serif;
  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;background-color: #fff ;
  background: url( ../images/com/select_icon.png) no-repeat 98% 50%; height:40px;  ; font-size: 13px !important; color: #666; height:40px; line-height: 40px; padding-left: 10px; box-sizing: border-box; 
}
/**** 모바일 ****/
@media only all and (max-width:768px) {
select {font-family:'Noto Sans KR',"NanumBarunGothic", nbg, dotum, sans-serif;
  -webkit-appearance: none;  /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;
  background: url( ../_img/com/select_icon.png) no-repeat 98% 50%; height:40px;  ; font-size: 13px; background-color: #fff /* 화살표 모양의 이미지 */ 
}
}
/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand { 
  display: none;
}

.filesearch{float:left; margin-left:5px; height:40px; line-height:40px; background-color:#999; border:1px solid #8b8b8b; padding:0px 10px; color:#fff !important; font-size:14px}
.filesearch:hover{color:#fff}
.filesearch a{ color:#fff !important; text-decoration:none; line-height:28px; }
.filesearch a:hover{ color:#fff;text-decoration:none}
.filesearch:hover{ color:#fff;text-decoration:none}
.filesearch:active{ color:#fff; text-decoration:none}
.filesearch:visited{ color:#fff; text-decoration:none}
.inputst{float:left; height:30px; padding-left:5px; color:#666; font-size:14px;  border: solid 1px #ccc; background-color: #f7f7f7}

