@charset "utf-8";

/****************************************/
/* Name: DESIGN WAVE
/* PART: CONTENTS STYLE
/* Version: 1.0
/* Author: Kim Bo Reum
/****************************************/


/*=============================================================
						공통사용
=============================================================*/
*:focus {outline: none !important;}

.hide-768 {}
.show-768 {display: none;}
.only_pic {width:100%; text-align: center; overflow: hidden;}


@media all and (max-width:1200px){
    .only_pic {}
    .only_pic img {width:170%; margin-left: -35%}  
    
}

@media all and (max-width:768px){
    .hide-768 {display: none;}
    .show-768 {display: block;}
}


/*== 싱글 체크박스 ==*/
.single input[type=checkbox] {display:none;}
.single input[type=checkbox] + label {position:relative; display:inline-block; cursor:pointer; padding-left:30px; font-size:15px; line-height: 20px; color: #606060;}
.single input[type=checkbox] + label:before {position:absolute; left:0; top:0; display:inline-block; width:20px; height:20px; overflow: hidden; background-position: center; background-repeat: no-repeat; content: ''; background-size: 60%; background-image: url("/_img/utility/check.png"); background-color: #fff; border: 1px solid #909090;}
.single input[type=checkbox]:checked + label:before {background-color:#157cb6; border-color: #157cb6}


/*== 싱글 라디오버튼 ==*/
.single input[type=radio] {display:none;}
.single input[type=radio] + label {position:relative; display:inline-block; cursor:pointer; padding-left:30px; font-size:15px; line-height: 20px; color: #606060;}
.single input[type=radio] + label:before {position:absolute; left:0; top:0; display:inline-block; width:20px; height:20px; border-radius: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; content: ''; background-size: 60%; background-image: url("/_img/utility/check.png"); background-color: #fff; border: 1px solid #909090;}
.single input[type=radio]:checked + label:before {background-color:#157cb6; border-color: #157cb6}


/*== 리스트형 라디오&체크박스 ==*/
ul.multi_line {box-sizing:border-box; display: flex;}
ul.multi_line li {position:relative; float:left; cursor: pointer; margin-right: 5px;}

/*체크박스*/
ul.multi_line li input[type="checkbox"] {display:none;}
ul.multi_line li input[type="checkbox"] + label {display:block; width:115; height:40px;line-height:40px; text-align:center; color:#8a8a8a; font-size: 13px; border:1px solid #e0e0e0; box-sizing: border-box; border-radius: 3px;}
ul.multi_line li input[type="checkbox"]:checked + label {border: 1px solid #00b346; color: #00b346}

/*라디오버튼*/
ul.multi_line li input[type="radio"] {display:none;}
ul.multi_line li input[type="radio"] + label {display:block; width:115px; height:40px;line-height:40px;  margin-left:0; text-align:center; color:#8a8a8a; font-size: 13px; border:1px solid #e0e0e0; box-sizing: border-box; border-radius: 3px;}
ul.multi_line li input[type="radio"]:checked + label {border: 1px solid #00b346; color: #00b346}

/*== 셀렉트박스 ==*/
select {height:60px; border: 1px solid #ddd; font-size: 14px; padding: 0 20px; background:url("../_img/utility/btn_unfold.png") no-repeat right 20px top 50%, #fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; background-size: 16px;}
select::-ms-expand { display:none; }

.contents_flex_wraps {width: 100%; display: flex; flex-wrap: wrap;}

/*== TOP버튼 ==*/
#top_btn {position: fixed; bottom: 0px; right: 50px; width: 45px; height: 45px; border-radius: 100%; overflow: hidden; box-sizing:border-box;  box-shadow: 0 0 5px rgba(0,0,0,0.2); cursor: pointer; text-align: center; line-height: 55px;  background-color: #252525; background-position: center !important; background-repeat: no-repeat !important; background-image: url("../_img/utility/top_arrow.png"); text-indent: -9999em; transition: .3s; opacity: 0; z-index: 99999}
#top_btn.on {bottom: 70px; opacity: 1;}
#top_btn:hover {background-color: #157cb6;}

.fixed-cs_btn {position: fixed; bottom: 0;  right: 50px; width: 45px; height: 45px; border-radius: 100%;  background-position: center; background-repeat: no-repeat; background-size: 25px; transition: .3s; box-shadow: 0 0 5px rgba(0,0,0,0.2); z-index: 99999; opacity: 0;}
.fixed-cs_btn#kakao {background-image: url(/_img/utility/ico_kakao-b.png); background-color:#fae100; }
.fixed-cs_btn#kakao a {display: block; width: 100%; height: 100%;}
.fixed-cs_btn#call {background-color: #ffa300; text-align: center;}
.fixed-cs_btn#call i {font-size: 21px; color: #fff; line-height: 45px;}

.fixed-cs_btn.on {opacity: 1;}
.fixed-cs_btn.on#kakao {bottom: 125px;}
.fixed-cs_btn.on#call {bottom: 185px;}


/*ifame wrap*/
.video-container {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed {position:absolute; top:0; left:0; width:100%; height:100%;}
.video-container video,.video-container object,.video-container embed {position:absolute; top:0; left:0; width:100%; height:100%;}

/*중앙정렬*/
.vertical_arr_wrap {width: 100%; height: 100%; display: table;}
.vertical_arr_wrap .arr_wrap {width: 100%; height: 100%; display: table-cell; vertical-align: middle;}


/* 이미지확대보기 */
.img-zoom {position:relative;width:100%}
.img-zoom img {max-width:100%}
.img-zoom.zoom {padding-bottom:50px}
.img-zoom .btn-zoom {position:absolute;bottom:0;right:0; width:50px;height:50px;background:#eee url(https://img.icons8.com/ios-glyphs/25/1e1e1e/search--v1.png) no-repeat 50% 50%;z-index:5;  display: none;}
.blind {position: absolute; top: 0; left: 0; overflow: hidden; width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important;}

@media screen and (max-width:990px) {
	#top_btn {right:10px; width: 35px; height:35px;}
	#top_btn.on { bottom: 12px;}
	
	.fixed-cs_btn#kakao {background-size: 17px;}
	
	.fixed-cs_btn {right: 10px; width: 35px; height: 35px;}	
	.fixed-cs_btn.on#kakao {bottom: 60px;}
	.fixed-cs_btn.on#call {bottom: 110px;}
	.fixed-cs_btn#call i {font-size: 17px; line-height: 35px;}

	.single input[type=checkbox] + label {font-size: 13px; padding-left: 24px;}
	.single input[type=checkbox] + label:before {width: 17px; height: 17px;}
	
	.single input[type=radio] + label {font-size: 13px; padding-left: 22px; line-height: 17px;}
	.single input[type=radio] + label:before {width: 15px; height: 15px;}
    
    select { height: 50px; background-size: 13px; background-position: right 10px top 50%; padding: 0 10px;}
}


@media all and (max-width:768px){
	.img-zoom img {width:100%}
    .img-zoom .btn-zoom {display: block;}
}


/*=============================================================
						서브컨텐츠
=============================================================*/
.sub_section {position: relative; margin: 100px 0}

.visual_pics {width:100%; height: 400px; position: relative; overflow: hidden;}
.visual_pics img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;  object-fit: cover; transition: 1.5s; transform: scale(1.2,1.2);}
.visual_pics.on img {transform: scale(1,1);}

.text_box {margin: 50px 0}
.text_box h3, .text_box h5 {text-align: center; color: #212121; line-height: 1.4; font-weight: 700; word-break: keep-all;}
.text_box p {text-align: center; color: #333; line-height: 1.6; font-size: 18px; margin: 30px 0; word-break: keep-all;}
.text_box.sub_sectionTitle p {margin-bottom: 0; margin-top: 15px;}

@media all and (max-width :1200px) {
    .sub_section {margin: 80px 0}
}

@media all and (max-width:980px) {
    .sub_section {margin: 70px 0}
    .visual_pics {height: 300px;}  
    .text_box {margin: 40px 0}
    .text_box p {font-size: 16px; margin: 25px 0}
    
}

@media all and (max-width:768px) {
    .sub_section {margin: 50px 0}
    .visual_pics {height: 170px;}
    
    .text_box {margin: 25px 0}
    .text_box p {font-size: 14px; margin: 20px 0}
}


/*협회설립목적*/
#sub01_01-section1 {z-index: 1;}
#sub01_01-section2 {background: #f1f1f1; margin: 0; padding: 0 0 100px 0}
#sub01_01-section2::before {position: absolute; top: -300px; width: 100%; height: 300px; background: #f1f1f1; content: '';}
.goal_list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.goal_list .goalBox {width: 32%; height: 320px; overflow: hidden; position: relative; display: table}
.goal_list .goalBox dl {width: 100%; height: 100%; box-sizing: border-box; display: table-cell; vertical-align: middle;}
.goal_list .goalBox dl dt {text-align: center; font-size: 23px; font-weight: 700; color: #fff; margin-bottom: 20px;}
.goal_list .goalBox dl dt::before {display: block; width: 78px; height: 78px; background-position: center; background-repeat: no-repeat; background-size: 100%; content: ''; margin: 0 auto 20px auto;}
.goal_list .goalBox dl dd {font-size: 18px; text-align: center; line-height: 1.7; color: #fff;}
.goal_list .goalBox.goal1 {background:#383d53}
.goal_list .goalBox.goal2 {background:#5c658d}
.goal_list .goalBox.goal3 {background:#383d53}
.goal_list .goalBox.goal1 dl dt::before {background-image:url("/_img/utility/icon-intro1.png")}
.goal_list .goalBox.goal2 dl dt::before {background-image:url("/_img/utility/icon-intro2.png")}
.goal_list .goalBox.goal3 dl dt::before {background-image:url("/_img/utility/icon-intro3.png")}

@media all and (max-width:1200px ){
    #sub01_01-section2 {padding-bottom: 80px;}
}

@media all and (max-width:980px ){
    #sub01_01-section2 {padding-bottom: 70px;}
    #sub01_01-section2::before {top: -15%; }
    .goal_list .goalBox dl dt {font-size: 19px;}
    .goal_list .goalBox dl dd {font-size: 16px;}
    
}

@media all and (max-width:768px ){
    #sub01_01-section2 {padding-bottom: 60px;}
    .goal_list .goalBox {width: 100%; height: auto; padding: 30px 15px; margin-bottom: 20px;}
    .goal_list .goalBox:last-of-type {margin-bottom: 0}
    .goal_list .goalBox dl dt {font-size: 17px; margin-bottom: 10px;}
    .goal_list .goalBox dl dt::before {width: 60px; height: 60px; margin-bottom: 7px;}
    .goal_list .goalBox dl:nth-of-type(2) dt::before {width: 50px; height: 50px;}
    .goal_list .goalBox dl dd {font-size: 14px;}
}


/*주요사업내용*/
.service_banner_list {display: flex; flex-wrap: wrap; justify-content: space-between; background: url("/_img/contents/sub01_01-pic1.jpg") no-repeat center; background-size: cover;}
.service_banner_list .serviceBox {width: 33.3%; height: 500px; overflow: hidden; position: relative;}
.service_banner_list .serviceBox::after {position: absolute; top: 50%; left: 0; margin-top: -180px; height: 360px; width: 1px; background: #fff; content: '';}
.service_banner_list .serviceBox:first-of-type::after {display: none;}
.service_banner_list .serviceBox .text {width: 100%; height: 100%; box-sizing: border-box; /*display: table; */}
.service_banner_list .serviceBox .text dl {width: 100%; height: 100%; box-sizing: border-box; padding: 50px 30px;}
.service_banner_list .serviceBox .text dl dt {position: relative; font-size: 25px; color: #fff; font-weight: 500; margin-bottom: 20px; text-align: center; padding-top: 130px; transition: 0.5s ease;}
.service_banner_list .serviceBox .text dl dt::before {display: block; width: 84px; height: 84px; background-position: center; background-repeat: no-repeat; background-size: 100%; content: ''; margin: 0 auto 25px auto;}
.service_banner_list .serviceBox .text dl dd {font-size: 18px; color: #fff; line-height: 1.7; text-align: center; transform: translateY(100px); opacity: 0; transition: 0.5s ease;}
.service_banner_list .serviceBox:hover .text dl dt {padding-top: 60px}
.service_banner_list .serviceBox:hover .text dl dd {transform:translateY(0); opacity: 1;}

.service_banner_list .serviceBox.part1 .text dl dt::before {background-image:url("/_img/utility/icon-intro4.png")}
.service_banner_list .serviceBox.part2 .text dl dt::before {background-image:url("/_img/utility/icon-intro5.png")}
.service_banner_list .serviceBox.part3 .text dl dt::before {background-image:url("/_img/utility/icon-intro6.png")}


@media all and (max-width:1200px ){}

@media all and (max-width:980px ){
    .service_banner_list .serviceBox {height: 400px;}
    .service_banner_list .serviceBox .text dl dt {font-size: 19px;}
    .service_banner_list .serviceBox .text dl dd {font-size: 16px;}
    
}

@media all and (max-width:768px ){
    .service_banner_list .serviceBox {width: 100%; height: 300px;}
    .service_banner_list .serviceBox::after {width: 90%; height: 1px; top: auto; margin-top: 0; bottom: 0; left: 50%; margin-left: -45%; opacity: 0.5}
    .service_banner_list .serviceBox .text dl dt {font-size: 18px; padding-top: 50px; margin-bottom: 12px;}
    .service_banner_list .serviceBox .text dl dt::before {width:60px; height: 60px; margin-bottom: 12px;}    
    .service_banner_list .serviceBox:first-of-type::after {display: block;}
    .service_banner_list .serviceBox .text dl dd {font-size: 14px;}
    
    .service_banner_list .serviceBox:hover .text dl dt {padding-top: 5px}
}


/*연혁*/
.history_wrap {width: 100%; display: flex; flex-wrap: wrap; box-sizing: border-box; }
.history_wrap .year_deco {width: 50%; text-align: center; box-sizing: border-box; padding-right: 50px;}
.history_wrap .year_deco img {width: 100%;}
.history_wrap .main_history {width: 50%; box-sizing: border-box; border-left: 1px solid #ddd; padding-left: 50px;}
.history_wrap .main_history dl {width: 100%; margin-bottom: 50px;}
.history_wrap .main_history dl dt {position: relative; font-weight: 800; color: #212529; font-size: 27px;}
.history_wrap .main_history dl dt::after {position: absolute; top: 7px; left: -55px; border-radius: 100%; width: 10px;  height: 10px; background: #1e906c; content: '';}
.history_wrap .main_history dl dd {margin-top: 15px;}
.history_wrap .main_history dl dd ul {}
.history_wrap .main_history dl dd ul li {position: relative; margin-top: 7px; box-sizing: border-box; font-size: 18px; color: #747474;}
.history_wrap .main_history dl dd ul li span {font-weight: 700; color: #309782; position: absolute; top: 0; left: 0; }

@media screen and (max-width:980px) {
	.history_wrap {justify-content: space-between}
	.history_wrap .year_deco {width: 100%; box-sizing: border-box; padding: 0; margin-bottom: 30px; height: 300px; position: relative; overflow: hidden;}
    .history_wrap .year_deco img {position: absolute; top: 0; left: 0; height: 100%; object-fit: cover;}
	.history_wrap .main_history  {width: 100%; padding-left: 30px;}
    .history_wrap .main_history dl {margin-bottom: 30px;}
    .history_wrap .main_history dl dt {font-size: 19px;}
    .history_wrap .main_history dl dt::after {left: -35px;}	
	.history_wrap .main_history dl dd {margin-top: 10px}
	.history_wrap .main_history dl dd ul li {font-size: 15px;}
}

@media screen and (max-width:768px) {
    .history_wrap .main_history dl dt {font-size: 17px;}
	.history_wrap .main_history dl dd {margin-top: 0}
    .history_wrap .main_history dl dd ul li {font-size: 14px;}
}


/*오시는길*/
#contact_us {margin-bottom: 200px;}
#contact_us #maps {width: 100%; height: 500px;}
#contact_us #address {width: 700px; box-sizing: border-box; padding: 50px; background: #fff; position: relative; z-index: 1; float: right; margin-top: -100px;}
#contact_us #address h6 {color: #309782; font-weight: 700;}
#contact_us #address p {font-size: 19px; color: #747474; margin-top: 15px;}
#contact_us #address p span {font-size: 16px;  background-position: top 3px left; background-repeat: no-repeat; box-sizing: border-box; padding-left: 23px; margin-right: 50px;}
#contact_us #address p span.call {background-image:url("https://img.icons8.com/ios-filled/20/000000/phone.png")}
#contact_us #address p span.fax {background-image:url("https://img.icons8.com/material/20/000000/phone-office--v1.png")}
#contact_us #address p span.mail {background-image:url("https://img.icons8.com/material-rounded/20/000000/mail.png")}

@media screen and (max-width: 980px) {
	#contact_us #maps {height: 400px;}
	#contact_us #address {width: 100%; margin:0 auto 70px auto; box-shadow: 0 10px 5px rgba(0,0,0,0.2); padding: 30px}
	#contact_us #address p {font-size: 17px;}
	#contact_us #address p span {font-size: 15px;}
}

@media screen and (max-width: 768px) {
	#contact_us {margin-bottom: 60px;}
	#contact_us #maps {height: 300px;}
	#contact_us #address { padding: 25px 15px; float: none;}
	#contact_us #address p {margin-top: 10px; font-size: 15px;}
	#contact_us #address p span {font-size: 14px; display: block; width: 100%; background-size: 15px;}
}

/*정관*/
.textBox {width: 100%; margin: 100px 0}
.textBox p {font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 40px;}
.textBox p.heading {font-size: 30px; color: #111}
.textBox p.heading_mid {margin-bottom: 20px; font-weight: 500; color: #111; background: url("/_img/utility/bullet.png") no-repeat top 7px left; padding-left: 25px;}
.textBox ul {margin-bottom: 40px;}
.textBox ul li {font-size: 18px; color: #666; margin: 13px 0; position: relative; line-height: 1.6}
.textBox ul li p {padding: 20px 10px; padding-bottom: 0}
.textBox ul.circleNumbering li {padding-left: 30px;}
.textBox ul.circleNumbering li span {position: absolute; top: 7px; left: 0; width: 20px; height: 20px; border-radius: 100%; background: #ccc; text-align: center; line-height: 20px; color: #fff; font-size:13px;}

.textBox ul.nomalList li {padding-left: 17px;}
.textBox ul.nomalList li::before {position:absolute; top: 10px; left: 0; width: 7px; height: 2px; background: #999; content: '';}

@media all and (max-width:980px ){
    .textBox {margin: 50px 0}
    .textBox p {font-size: 16px;}
    .textBox p.heading {font-size: 25px;}
    .textBox p.heading_mid {}
    
    
    .textBox ul li {font-size: 16px;}
}

@media all and (max-width:768px ){
    .textBox {margin: 0;}
    .textBox p {font-size: 14px; margin-bottom: 30px;}
    .textBox p.heading {font-size: 21px;}
    .textBox p.heading_mid {padding-left: 18px; background-size: 13px; background-position: top 6px left;margin-bottom: 10px;}
    
    .textBox ul li {font-size: 14px;}
    .textBox ul.circleNumbering li {padding-left: 23px;}
    .textBox ul.circleNumbering li span {font-size: 11px; width: 17px; height: 17px; line-height: 17px; top: 4px;}
    .textBox ul li p {padding: 10px 15px; padding-bottom: 0; margin-bottom: 0}
}


/*협회회원*/
.shop_list_wrap {width: 100%; overflow: hidden; margin: 50px 0;}
.shop_list_wrap .shopBox {position: relative; float: left; width: 32%; height: 260px; border: 1px solid #ddd; background: #fafafa; box-sizing: border-box; padding: 50px 30px; margin-bottom: 2em; margin-left: 2%;}
.shop_list_wrap .shopBox:first-of-type {margin-left: 0;}
.shop_list_wrap .shopBox p.shop_name {font-size: 21px !important; font-weight: 700;  color: #309782 !important; margin-bottom: 25px;}
.shop_list_wrap .shopBox dl {width: 100%; position: relative; margin: 15px 0; padding-left: 70px;}
.shop_list_wrap .shopBox dl dt, .shop_list_wrap .shopBox dl dd {font-size: 16px; line-height: 1.4;}
.shop_list_wrap .shopBox dl dt {position: absolute; top: 1px; left: 0; background-position: top 2px left; background-repeat: no-repeat; padding-left: 23px; box-sizing: border-box; color: #212529; font-weight: 500;}
.shop_list_wrap .shopBox dl dd {color: #747474;}
.shop_list_wrap .shopBox dl dd a {color: #747474;}
.shop_list_wrap .shopBox dl.addr dt {background-image: url("https://img.icons8.com/material-rounded/20/000000/address.png");}
.shop_list_wrap .shopBox dl.call dt {background-image:url("https://img.icons8.com/ios-filled/18/000000/phone.png")}
.shop_list_wrap .shopBox dl.fax dt {background-image:url("https://img.icons8.com/material/20/000000/phone-office--v1.png")}


@media screen and (max-width:980px) {
	.shop_list_wrap .shopBox {padding:40px 20px; height: 230px;}
	.shop_list_wrap .shopBox p.shop_name {font-size: 19px !important; margin-bottom: 10px;}
	.shop_list_wrap .shopBox dl {margin: 5px 0; padding-left: 60px;}
	.shop_list_wrap .shopBox dl dt, .shop_list_wrap .shopBox dl dd {font-size: 15px;}
}


@media screen and (min-width: 768px) {
	.shop_list_wrap .shopBox:nth-of-type(3n+1) {margin-left: 0} 
}


@media screen and (max-width: 768px) {
	.shop_list_wrap .shopBox {width: 48.5%; margin-bottom: 1.5em; padding: 25px 15px; height: 200px;}
	.shop_list_wrap .shopBox:nth-of-type(2n+1) {margin-left: 0} 
	.shop_list_wrap .shopBox p.shop_name {font-size: 17px !important;}
	.shop_list_wrap .shopBox dl {padding-left: 54px;}
	.shop_list_wrap .shopBox dl dt, .shop_list_wrap .shopBox dl dd {font-size: 14px;}
	.shop_list_wrap .shopBox dl dt {padding-left: 20px; background-size: 15px;}
	.shop_list_wrap .shopBox:nth-of-type(3n+1) {margin-left: 0} 
}

@media screen and (max-width: 648px) {
	.shop_list_wrap .shopBox {width: 100%; margin-left: 0; height: auto;}
}

/* 반응형 테이블 안내창 */
.scroll-info {position:relative;width:100%;text-align:center;font-size:14px;margin-bottom:10px;padding:10px 0;}
.scroll-info span:before, .scroll-info span:after {content:"";display:inline-block;vertical-align:middle;width:23px;height:9px;background:url(/_img/utility/tbl_rsv_arr.png) no-repeat;margin-top:-2px}
.scroll-info span:before {background-position:0 0;margin-right:30px}
.scroll-info span:after {background-position:-32px 0;margin-left:30px}
.scroll-info br {display:none}
.gray .scroll-info span {color: #fff;}


@media all and (min-width:768px){
    .scroll-info {display: none;}
    .scroll-info * {vertical-align:middle}
	.scroll-info span {display:inline-block;height:20px;padding-top:15px;padding-bottom:15px}
}
@media all and (max-width:399px){
	.scroll-info {line-height:1.4}
	.scroll-info br {display:block}
    
    .scroll-info span:before, .scroll-info span:after {position:absolute;top:50%}
	.scroll-info span:before {left:10px}
	.scroll-info span:after {right:10px}
}

/*테이블*/
.table_wrap {width: 100%;}
table.comm_basic_table {width: 100%; table-layout: fixed; border-left: 1px solid #dedede; background: #fff; min-width: 768px; border-top: 1px solid #dedede;}
table.comm_basic_table tr {}
table.comm_basic_table tr th, table.comm_basic_table tr td { padding:15px 20px; box-sizing: border-box; text-align: center; font-size: 18px; border-bottom: 1px solid #dedede; border-right: 1px solid #dedede; color:#333; line-height: 1.6;}
table.comm_basic_table tr td.align-top{vertical-align: top;}
table.comm_basic_table tr td ul {}
table.comm_basic_table tr td ul li {position: relative; text-align: left; margin: 10px 0; padding-left: 13px; box-sizing: border-box;}
table.comm_basic_table tr td ul li::after {position: absolute; top: 10px; left: 0; width: 7px; height: 2px; background: #ddd; content: '';}
table.comm_basic_table tr td ul li ul li {margin: 6px 0; font-size: 15px;}
table.comm_basic_table tr th img {width: 40px;}
table.comm_basic_table thead tr th { color: #333; background: #f1f1f1 ; font-weight: 600;}
table.comm_basic_table tr td ul.leng2 {display: flex; flex-wrap: wrap;}
table.comm_basic_table tr td ul.leng2>li {width:50%; float: left;}
table.comm_basic_table .txt-left {text-align: left} 

table.comm_basic_table .basic {background: #9c0; color: #fff}
table.comm_basic_table .silver {background: #f60; color: #fff}
table.comm_basic_table .gold {background: #0099cc; color: #fff}

table.comm_basic_table.non-roof {}
table.comm_basic_table.non-roof tr th {background: #f1f1f1 ; color: #333;}

table.comm_basic_table tr td.plus {position: relative; padding-top: 30px;}
table.comm_basic_table tr td.plus::before {position: absolute; top: -20px; left: 50%; margin-left: -20px; width: 40px; height: 40px; border-radius: 100%; background: #111; color: #fff; content: '+'; line-height: 40px; font-size: 25px;}


@media all and (max-width:768px){
    .table_wrap {overflow-x: scroll;}
    
    table.comm_basic_table tr th, table.comm_basic_table tr td {font-size: 14px; padding: 13px 15px}
}


.notice_text {margin-top: 15px; font-family: 'Noto Sans Kr';}
.notice_text p {font-size: 15px; color: #555;}
.notice_text p::before {background: url("/_img/resource/icon_notice-g.png") no-repeat left top; background-size: 20px; content: ''; }
.notice_text ul {position: relative; box-sizing: border-box; padding-left: 30px;}
.notice_text ul::before {background: url("/_img/resource/icon_notice.png") no-repeat left top; background-size: 100%; width: 20px; height: 20px; content: ''; display: block; position: absolute; top:0; left: 0; }
.notice_text ul li {position: relative; font-size: 15px; padding-left: 13px; margin-bottom: 5px;}
.notice_text ul li::before {position: absolute; top: 9px; left: 0; width: 7px; height: 2px; background: #ddd; content: '';}

@media all and (max-width:768px){
    .notice_text ul {padding-left: 20px;}
    .notice_text ul::before {width: 15px; top: 2px;}
    .notice_text ul li {font-size: 13px; padding-left: 11px;}
}


/*게시판검색*/
#search_ver2 {width: 100%; display: flex; justify-content: space-between; margin-bottom: 25px;}
#search_ver2 #resutl_shop_num {margin-bottom: 0; padding-top: 25px; background-position: top 27px left;}
#search_ver2 #search {width: 360px; position: relative;}
#search_ver2 #search input[type="text"] {width: 100%; height: 60px; background: #f5f5f5; border-radius: 5px; border: 0; font-size: 16px; padding: 0 10px; box-sizing: border-box; padding-right: 70px;}
#search_ver2 #search button {position: absolute; top: 0; right: 0; width: 60px; height: 60px; background:url("/_img/utility/search.png") no-repeat center; background-size: 25px; text-indent: -99999px; border: 0;}
#resutl_shop_num {font-size: 17px; color: #6b7786; margin-bottom: 15px;}
#resutl_shop_num strong {color: #309782;}

@media screen and (max-width:980px){ 
	
	#search_ver2 #search input[type="text"] {height: 55px; line-height: 55px; font-size: 15px;}
	#search_ver2 #search button {width: 55px; height: 55px;}
}


@media screen and (max-width:768px){ 
	
	#search_ver2 {display: block;}
	#search_ver2 #resutl_shop_num {width: 100%; margin-bottom: 10px; padding-top: 0; font-size: 15px;}
	#search_ver2 #search {width: 100%;}
	#search_ver2 #search input[type="text"] { height: 50px; line-height: 50px; font-size: 14px;}
	#search_ver2 #search button {background-size: 20px; width: 50px; height: 50px;}

}

/*페이징*/
#paging {width: 100%; display: flex; justify-content: center; margin-top: 50px; flex-wrap: wrap;}
#paging a {display:block; width: 35px; height: 35px; border-radius: 100%; text-align: center; line-height: 35px; font-size: 15px; color: #212529; margin: 0 5px; box-sizing: border-box;}
#paging a.on {background: #309782; color: #fff;}
#paging a.btn {text-indent: -99999px; border: 1px solid #ddd; background-position: center; background-repeat: no-repeat;}
#paging a.btn.first {background-image: url("/_img/utility/bbs_paging_first.jpg");}
#paging a.btn.prev {background-image: url("/_img/utility/bbs_paging_prev.jpg");}
#paging a.btn.next {background-image: url("/_img/utility/bbs_paging_next.jpg");}
#paging a.btn.last {background-image: url("/_img/utility/bbs_paging_last.jpg");}

@media screen and (max-width: 980px) {
	#paging {margin: 30px 0 60px 0}
	#paging a {width: 25px; height: 25px; line-height: 25px; margin: 0 2px; font-size: 14px;}
	#paging a.btn {background-size: 45%;}
}

@media screen and (max-width: 768px) {
	#paging a {font-size: 13px;}
}



/*기본 게시판*/
#bbs_wrapper {width: 100%;}
.bbs_list {width: 100%; border-top: 2px solid #141720;}
.bbs_list .bbsBox {width: 100%; display: table;  border-bottom: 1px solid #ddd; table-layout: fixed;}
.bbs_list .bbsBox div {display: table-cell; padding: 35px 0; font-size: 18px; color: #747474; text-align: center; vertical-align: middle;}
.bbs_list .bbsBox .num {width: 10%; font-family: 'GmarketSans';}
.bbs_list .bbsBox .category {font-weight: 600; color: #309782; width: 10%;  font-size: 18px; }
.bbs_list .bbsBox .title {text-align: left; width: 65%; box-sizing: border-box; padding-left: 30px;  font-size: 18px;}
.bbs_list .bbsBox .title a {color: #212529; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;}
.bbs_list .bbsBox .title a:hover {color: #309782;}
.bbs_list .bbsBox .title a span {font-size: 13px; color: #fff; border-radius: 4px; display: inline-block; padding: 2px 15px; background: #383d53; margin-left: 10px; vertical-align: middle; margin-top: -2px;}
.bbs_list .bbsBox .date {width: 15%}
.bbs_list .bbsBox.notice {}
.bbs_list .bbsBox.notice .num.notice {font-weight: 800; color: #309782; font-family: 'Noto Sans Kr' !important}
.bbs_list .bbsBox.notice .title {font-weight: 600;}

.bbs_list.has_writer {}
.bbs_list.has_writer .bbsBox .title {width:50%}
.bbs_list.has_writer .bbsBox .name {width: 15%}
.bbs_list.has_writer .bbsBox .date {width: 15%}

.bbs_list.qna .bbsBox .title {width:65%}
.bbs_list.qna .bbsBox .name {width: 10%}
.bbs_list.qna .bbsBox.reply {background: #fafafa;}
.bbs_list.qna .bbsBox.reply .num img {width: 25px}
.bbs_list.qna .bbsBox.reply .title {font-weight: 600}


@media screen and (max-width: 980px) {
	.bbs_list .bbsBox {display: block; position: relative; box-sizing: border-box; padding-left: 70px; padding-top: 20px; padding-bottom: 20px; overflow: hidden;}
	.bbs_list .bbsBox div { padding: 0;}
	.bbs_list .bbsBox .num {position: absolute; top: 50%; margin-top: -12px; left: 0; width: 70px; display: block;}
	.bbs_list .bbsBox .title {padding-left: 0; width: 100%; font-size: 16px;}
	.bbs_list .bbsBox .category {width: auto; text-align: left; font-size: 16px; padding-right: 10px; font-weight: 700;}
	.bbs_list .bbsBox .date {width: auto; text-align:left; display: block;}
	
	.bbs_list.has_writer .bbsBox .title {width: auto;}
	.bbs_list.has_writer .bbsBox .name {width: auto; display: block; float: left; font-size: 14px; padding-right: 10px;}
	.bbs_list.has_writer .bbsBox .date {width: auto; float: left; font-size: 14px;}
	
	
	.bbs_list.qna .bbsBox.reply .num img {width: 17px;}
}

@media screen and (max-width: 768px) {
	.bbs_list .bbsBox {padding-left: 55px; padding-top: 10px; padding-bottom: 10px;}
	.bbs_list .bbsBox div {display: block;}
	.bbs_list .bbsBox .num {font-size: 15px; width: 55px;}
	.bbs_list .bbsBox .title {font-size: 14px;}
	.bbs_list .bbsBox .category {font-size: 13px;}
	.bbs_list .bbsBox .date {font-size: 13px;}
	.bbs_list .bbsBox .name {font-size: 13px;}
    .bbs_list .bbsBox .title a span {font-size: 11px; padding: 1px 10px; margin-left: 6px;}
}



/*공지사항*/
#bbs_list {width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;} 
#bbs_list .board_list_slider-item {width: 32%; margin-right: 2%; margin-bottom: 4%;}
#bbs_list .board_list_slider-item:nth-of-type(3n) {margin-right: 0}


/*회원가입*/
.hifu_step_wrap {}
.hifu_step_wrap .stepBox {position: relative; width: 100%; box-sizing: border-box; border: 7px solid #dedede; padding: 40px 0; background: #fff; display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: 50px;}
.hifu_step_wrap .stepBox::after {position: absolute; bottom: -52px;; left: 50%; margin-left: -12px; width: 0; height: 0; border:25px solid transparent; border-top-color: #dedede; content: '';}
.hifu_step_wrap .stepBox:last-of-type::after {display: none;}
.hifu_step_wrap .stepBox .icon {width: 17%; text-align: center; display: table;}
.hifu_step_wrap .stepBox .icon p {width: 100%; height: 100%; display: table-cell; vertical-align:middle; text-align: center;}
.hifu_step_wrap .stepBox .icon p img {width: 30%;}
.hifu_step_wrap .stepBox .text {position: relative; width: 83%; border-left: 1px solid #dedede; padding-left: 50px; box-sizing: border-box;}
.hifu_step_wrap .stepBox .text p {font-size: 19px;}
.hifu_step_wrap .stepBox .text p.stepName {font-size: 21px; font-weight: 600; color: #111; margin-bottom: 20px;}
.hifu_step_wrap .stepBox .text p.stepName span {color:#383d53; vertical-align: baseline; padding-right: 10px;}
.hifu_step_wrap .stepBox .text p.stepName span em {color:#5c658d; padding-left: 5px;}
.hifu_step_wrap .stepBox .text a {display: block;width: 170px; height: 40px; box-sizing: border-box; border: 1px solid #ddd; text-align: center; line-height: 40px; background: #ecf1f7; transition: 0.3s; color: #333; font-weight: 500;}
.hifu_step_wrap .stepBox .text a span {font-size: 15px; background-image: url(/_img/utility/icon-down-b.png); background-repeat: no-repeat; background-position:  center right; padding-right: 30px; background-size: 25px;}
.hifu_step_wrap .stepBox .text a:hover {background: #309782; border-color: #309782; color: #fff;}
.hifu_step_wrap .stepBox .text a:hover span {background-image: url(/_img/utility/icon-down-w.png)}

.hifu_step_wrap .stepBox .text ul {}
.hifu_step_wrap .stepBox .text ul li {font-size: 19px; margin: 15px 0; position: relative; padding-left: 15px; color: #212121; line-height: 1.5;}
.hifu_step_wrap .stepBox .text ul li::before {position: absolute; top: 14px; left: 0; width: 7px; height: 1px; background: #aaa; content: '';}

.hifu_step_wrap .stepBox:nth-of-type(3) .icon p img {width: 27%;}



@media all and (max-width:1400px){
    .sub02_01 .contents {padding-left: 0 !important; padding-right: 0 !important}
}


@media screen and (min-width:1200px) {
    .hifu_meritList .careBox:nth-of-type(4) {margin-left: 0}
}

@media screen and (max-width:1200px) {
    .hifu_meritList {justify-content: flex-start;}
    .hifu_meritList .careBox {width: 49%; height: auto; margin-left: 2%; margin-bottom: 2%;}
    .hifu_meritList .careBox:nth-of-type(2n+1) {margin-left: 0}
    
    .hifu_step_wrap .stepBox .icon p img {width: 35%}
    .hifu_step_wrap .stepBox:nth-of-type(3) .icon p img {width: 30%;}
    .hifu_step_wrap .stepBox:nth-of-type(4) .icon p img {width: 40%;}
    .hifu_step_wrap .stepBox .text ul li {margin: 7px 0}
}

@media screen and (max-width:980px) {
    .hifu_meritList .careBox .text_wrap p {font-size: 17px;}
    .hifu_meritList .careBox .text_wrap p.tit::before {width: 130px; height: 130px;}
    
    .hifu_step_wrap .stepBox {margin-bottom: 30px; border-width: 5px;}
    .hifu_step_wrap .stepBox::after {border-width: 18px; bottom: -37px;}
    .hifu_step_wrap .stepBox .text {padding-left: 40px; padding-right: 40px;}
    .hifu_step_wrap .stepBox .text p.stepName {font-size: 18px; margin-bottom: 15px;}
    .hifu_step_wrap .stepBox .text ul li {font-size: 16px;}
    
}

@media screen and (max-width:768px) {    
    .hifu_meritList .careBox .text_wrap {padding: 30px 15px;}
    .hifu_meritList .careBox .text_wrap p {font-size: 14px;}
    .hifu_meritList .careBox .text_wrap p span {font-size: 18px;}
    .hifu_meritList .careBox .text_wrap p.tit {font-size: 16px; margin-bottom: 5px;}
    .hifu_meritList .careBox .text_wrap p.tit::before {width: 100px; height: 100px; margin-bottom: 10px;}
    .hifu_step_wrap .stepBox .text a {width: 100%; height: 45px; line-height: 45px;}
    .hifu_step_wrap .stepBox .icon p img {width: 50%}
    .hifu_step_wrap .stepBox:nth-of-type(3) .icon p img {width: 45%;}
    .hifu_step_wrap .stepBox:nth-of-type(4) .icon p img {width: 60%;}
    .hifu_step_wrap .stepBox .text {padding-left: 30px; padding-right: 20px;}
    .hifu_step_wrap .stepBox .text p.stepName {font-size: 16px; margin-bottom: 15px;}
    .hifu_step_wrap .stepBox .text ul li {font-size: 14px;}
    .hifu_step_wrap .stepBox .text ul li::before {top: 10px; }
}

@media screen and (max-width:640px) {   
    .hifu_meritList .careBox {width: 100%; margin-left: 0; margin-bottom: 30px;}
    
    .hifu_step_wrap .stepBox {display: block; padding: 25px 0}
    .hifu_step_wrap .stepBox .icon {width: 100%; margin-bottom: 10px;}
    .hifu_step_wrap .stepBox .icon p img {width: 45px;}
    .hifu_step_wrap .stepBox:nth-of-type(3) .icon p img {width: 45px;}
    .hifu_step_wrap .stepBox:nth-of-type(4) .icon p img {width: 50px;}
    
    
    .hifu_step_wrap .stepBox .text {padding-left: 20px; width: 100%; border-left: 0;}
    .hifu_step_wrap .stepBox .text p.stepName {font-size: 16px; margin-bottom: 25px; text-align: center;}
    .hifu_step_wrap .stepBox .text p.stepName span {display: block; margin-bottom: 8px; padding-right: 0}
    .hifu_step_wrap .stepBox .text ul li {font-size: 14px;}
    .hifu_step_wrap .stepBox .text ul li::before {top: 10px; }
    
    .hifu_step_wrap .stepBox:nth-of-type(4) .text p.stepName  {padding-top: 0 !important; margin-bottom: 0}
    
}