@charset "UTF-8";




/*table*/
#sub table.line {border-top: 2px solid #111111;width: 100%;/* margin-top: 10px; */position: relative;z-index: 1;background: #fff;}
#sub table.line th {color: #222;padding:20px 0;text-align: center;border-bottom: 1px solid #111;/* background: #d6d0c721; */vertical-align: middle;font-weight:  400;font-size: 20px;}
#sub table.line th + td {border-bottom: 1px solid #111;}
#sub table.line td {padding: 20px 10px;  border-bottom: 1px solid #ddd; }
#sub table.line td img {margin-bottom:15px;height: auto !important;}
#sub table.line td i {margin-left:10px;color: #4c6aaa;}
#sub table.line td > span.box {padding: 4px 15px;font-size: .9em;background: #b9b9b9;color: #fff;}
#sub table.line td > span.box.before {background: #5a8a85;}
#sub table.line th > p {float: right;font-size: 1em;padding: 0;line-height: normal;}
#sub table.line th > p > span {font-weight: 400;margin-left:20px;color: #444;font-size: .8em;}

#sub table.list td {text-align: center;}
#sub table.list td i {color: #614e31;margin-left: 5px;font-size: 20px;vertical-align: text-top;line-height: 23px;}
#sub table.list td b {font-size: 11px;color: #fff;font-weight: 400;margin-left: 10px;background: #5b7ca6;padding: 1px 8px;}
#sub table.list td span {}
#sub table.list tr:hover td, #sub table.list tr.notice td {background: rgb(234, 241, 241);}

#sub table.view th {padding:10px 20px; text-align: left; }
#sub table.view td {padding:30px 20px;line-height: 2em;}
#sub table.view .board_con {padding: 50px 100px;  text-align: justify;}
/* table.view td div.question {border: 1px solid  #758FCA;border-radius: 4px;padding: 0 0 15px;position: relative;overflow: hidden;min-height: 150px;background: #fff;}
table.view td div.question > span {position: absolute;font-size: 100px;bottom: 47px;right: 0;color: rgba(117, 143, 202, 0.22);font-family: tahoma;font-weight: 900;z-index: 0;}
table.view td div.answer {border: 1px solid  rgb(88, 169, 157);border-radius: 4px;margin-top: 30px;position: relative;overflow: hidden;min-height: 130px;background: #fff;color: #777;}
table.view td div.answer > span {position: absolute;font-size: 100px;bottom: 24px;color: rgba(88, 169, 157, 0.18);right: 0;font-family: tahoma;font-weight: 900;z-index: 0;}
table.view td div.question > div, table.view td div.answer > div {padding: 15px;z-index: 1;position: relative;line-height: 24px;} */


/*counsel*/
colgroup .num {width: 100px;}
colgroup .sort {width: 180px;}
colgroup .review {width: 180px;}
colgroup .photo {width: 160px;}
colgroup .arrow {width: 60px;}
colgroup .name {width: 100px;}
colgroup .date {width: 140px;}
colgroup .answer {width: 140px;}

/*paging*/
.paging {text-align: center;font-family: 'Roboto';}
.paging li{display: inline-block;border:1px solid #ddd;width: 30px; height: 30px;line-height: 30px; vertical-align:top}
.paging li a{display:block}
.paging li:hover, .paging li.active {background: #5a8a85;color: #fff;border: 1px solid #5a8a85;}
.paging li:hover a, .paging li.active a {color: #fff;}
.paging li a:before {font-family: 'mdwell';font-size: 11px;position: relative;display:  inherit;}
.paging li:first-child a:before {content: '\e824\e824';}
.paging li:nth-child(2) a:before {content: '\e824';}
.paging li:nth-last-child(2) a:before {content: '\e823';}
.paging li:last-child a:before {content: '\e823\e823';}

/*list_search*/
.list_search {margin-top: 20px;position:relative;z-index: 1;}
.list_search label{margin-right: 5px;}
.list_search > input[type="text"]{border-right: 0;height: 24px;padding: 5px 10px;max-width: 50%;}
.list_search > input[type="submit"]{background: #a5a5a5;border: 1px solid #a5a5a5;color:#fff;padding: 5px 15px;height: 36px;margin-left: -6px;cursor: pointer;margin-top: 0;}
.list_search button {float:right;background: #5a8a85;border: 1px solid #5d8884;color: #fff;padding: 5px 15px;font-weight: 500;cursor: pointer;position: absolute;right:  30px;font-size: 18px;height: 36px; }


/* Before After */
.bf_list { overflow: hidden; margin-left: -30px;}
.bf_list li{position: relative;z-index:1;width: 50%;float: left;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;padding-left: 30px;min-height: 306px;}
.bf_list li::before, .bf_list li::after{content: 'BEFORE';position: absolute;background: rgba(251, 251, 250, .90);padding: 2px 10px;color: #222;border-radius: 0 0 8px 0;font-weight: 400;/* font-family: 'Play', sans-serif; */font-size: 16px;}
.bf_list li::after {content: 'AFTER';top:0;left: 322px;background: #444444;color: #fff;}
.bf_list li img{width: 50%;display: block;float: left;}
.bf_list li span{display:block;/* background: #614e31; */text-align:center;padding:10px;clear:both;margin-bottom:60px;color: #222;font-size: 18px;border: 1px solid #ccc;}
.bf_list a::after{width: 40px;height: 40px;background: #ffffff;display: inline-block;/* color: #ffffff; */font-size: 24px;border-radius:  30px;line-height: 40px;content: "\e823";padding-left: 3px;font-family: 'snarane';text-align: center;position: absolute;z-index: 100;left: 50%;margin-left: -5px;top: 25%;moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

.bf_view {padding: 0 100px;margin:0;text-align: center;position: relative;z-index: 1;}
.bf_view h4 {font-size: 36px;margin-bottom: 40px;/* background: rgba(181, 171, 157, 0.5); */color:#222;padding:5px;}
.bf_view h4 + p {font-size: 18px; margin-bottom: 50px;}
.bf_view li{width: 100%; margin-bottom: 50px; padding-left: 0;}
.bf_view li::before, .bf_view li::after {left: 0;font-size: 18px;}
.bf_view li::after {left: 500px;}

.bf_view li em::after{width: 50px;height: 50px;background: #ffffff;display: inline-block;color: #444;font-size: 32px;border-radius:  30px;line-height: 50px;content: "\e823";padding-left: 6px;font-family: 'snarane';text-align: center;position: absolute;z-index: 100;left: 50%;margin-left: -30px;top: 39%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}


/* btn */
.btn_wrap {text-align: center; }
.btn {padding: 8px 30px;cursor: pointer;display: inline-block;line-height: 1.2em;}
.btn_green{background: #5a8a85;border: 1px solid #5d8884;color: #fff;}
.btn_gray{background: #797979;border: 1px solid #797979;color: #fff;}
.btn_red{background: #b52b2b;border: 1px solid #e62a2b;color: #fff;}

.btn_green:hover, .btn_gray:hover,.btn_red:hover{color:#fff}

/*password*/
.password {text-align: center;border: 8px solid #f4f4f4;padding: 20px;position: relative;z-index: 101;max-width: 500px;margin: 0 auto 40px;margin-top: 0;}
.password form {position: relative;z-index: 10;margin-top: 15px;}
.password p {line-height: 1.5em;z-index:2;color:  #666;}
.password input {max-width: 60%;z-index:2;}
.password a {vertical-align: middle;padding: 5px 15px;margin: 0 5px;height: 24px;display: inline-block;line-height: 24px;}
.password i {position: absolute;font-size: 200px;color: #f4f4f4;right: 0;bottom: -30px;z-index: -1;}

.gallery_pass {line-height: 1.4em;max-width: 600px;background: #fff;}
.gallery_pass h5 {color: #bb8f46;margin-bottom: 1.5em;margin-top: 1.5em;font-size: 25px;font-weight: 400;}
.gallery_pass p {font-size: 17px;margin-bottom: 24px;}
.gallery_pass p > em {padding: 1px 6px;margin: 2px 0;}
.gallery_pass p > input[type=text] {text-align: center;}


/* review_board */
.review_board {position: relative; z-index: 1}
.review_board ul{margin-left: -30px;overflow:hidden;}
.review_board ul li {padding-left: 30px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;text-align: justify;}
.review_board ul li span {display:block; height:215px; overflow:hidden;}
.review_board ul li img {display: block;width: 100%;}
.review_board ul li div {background: #fff;border:1px solid #eee;margin-bottom: 30px;padding: 0 0 20px 0;}
.review_board ul li h5 {font-size:22px;color: #333;margin-top: 20px;letter-spacing: -2px;padding: 0 20px;}

.review_board ul li p {margin-top: 10px;padding: 0 20px;font-size: 16px;overflow: hidden;text-overflow: ellipsis; /* 여러 줄 자르기 추가 스타일 */white-space: normal;line-height: 1.2;height: 2.4em;text-align: left;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.review_board ul li p:first-child::after {content: "MORE";margin-left: 10px;float: right;letter-spacing:0;font-size: 14px;font-family: 'Spoqa Han Sans', "Spoqa Han Sans", "spoqahansans", "Apple SD Gothic Neo", "Nanum Barun Gothic", "Nanum Gothic", Verdana, Arial, "Malgun Gothic", Dotum, sans-serif;font-weight: 300;margin-top: 5px;}

.review_board ul li p.line {margin-top: 15px;border-top: 1px dashed #ddd;padding: 15px 20px 0;}
.review_board ul li em {color: #866b41;font-weight: 500;}
.review_board ul li em:last-child {line-height:19px;font-size: 12px;color:#333;text-transform: uppercase;display: block;text-align: right;background: #fff;padding: 30px 20px 0;}
.review_board ul li em:last-child::after {content:'';/* line-height: 1px; */background:#333;/* position:absolute; *//* top:calc(50% - 1px); *//* right:0; */display: inline-block;width:20px;height:1px;margin-left: 10px;vertical-align: middle;}

.review_board ul li p span {font-size:14px;float:  left;color: #b5b5b5;}
.review_board ul li p span:last-child {float:right;}


/*board_write*/
#sub .board_write {border-top: 2px solid #222;overflow: hidden;position: relative;/* background: #fff; */z-index: 1;}
#sub .board_write  dt {padding: 20px;width: 20%;float: left;border-bottom: 1px solid #ddd;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;background: #d6d0c721;text-align: center;line-height: 37px;color: #222;font-weight: 400;}
#sub .board_write  dd {padding: 20px;width: 80%;float: right;border-bottom: 1px solid #ddd;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;min-height: 78px;line-height: 34px;}
#sub .board_write  dt.con {line-height: 98px;}
#sub .board_write  dd.full {padding: 20px 30px;}
#sub .board_write  dd.full input, .board_write dd.full textarea { margin-left:-10px; margin-right: -10px; width: 100%; }
#sub .board_write #email1 {width: 38%;}
#sub .board_write .e-mail p{ padding-left:10px; display: inline-block; padding-bottom:0 }
#sub .board_write label {vertical-align: middle;}
#sub .board_write input[type="file"] {border: 1px solid #d3d3d3;height: 30px;line-height: 40px;padding-top: 5px;}
#sub .board_write input[type="file"]:before {width: 74px;height: 37px;background: #ccc;content:'파일선택';display:inline-block;position:absolute;text-align:center;margin-top: -6px;/* color: #fff; */}


/* 모바일 (해상도 640px 이하) */
@media screen and (max-width:  767px) {

colgroup .num {width: 50px;}
colgroup .sort {width: 21%;}
colgroup .review {width: 40%;}
colgroup .photo {width: 25%;}
colgroup .arrow {width: 3%;}
colgroup .name {width: 20%;}
colgroup .date {width: 16%;}
colgroup .answer {width: 26%;}


#sub table.line th {font-size: 14px;}
#sub table.line {font-size:14px}
#sub table.line th {font-size:14px;padding: 10px;}
#sub table.line td{padding: 10px 5px;}
#sub table.list td i{font-size: 22px;line-height: 17px;}
#sub table.line th + td {border-bottom:1px solid #111}
#sub table.view .board_con {padding: 20px 0px;}
#sub table.view .board_con img {max-width: 100% !important; width: 100% !important; }

.btn {padding:5px 15px;}

/* .board_cate {padding: 0;margin-top: 30px;}
.board_cate ul {border-left: 1px solid #ddd;overflow: hidden;}
.board_cate li {width: 33.3333%;border: 1px solid #ddd;margin-top: -1px;border-left: 0;}
.board_cate li:first-child {width:100%;margin-top:0}
.board_cate a {font-size: 14px;}
.board_cate .active, .board_cate li:hover {border: 1px solid #63533a;} */

.bf_list li{width: 100%;min-height: 0;}
.bf_list li::before, .bf_list li::after{padding: 3px 10px;font-size: 11px;}
.bf_list li::after {left: 50%;margin-left: 15px;}
.bf_list li span{margin-bottom: 20px;padding: 5px;font-size: 14px;}
.bf_list a::after{display: none;}

.bf_view { padding: 0 ;}
.bf_view h4 {font-size: 16px;margin-bottom: 20px;}
.bf_view li{margin-bottom: 20px;}
.bf_view li::before, .bf_view li::after {font-size: 10px;}
.bf_view li::after {margin-left: 0;}
.bf_view li em::after{display:none;}

.review_board ul li {width:100% !important}
.review_board ul li div{padding-bottom:0;}
.review_board ul li h5{font-size: 16px;margin-top: 10px;padding: 0 10px;}
.review_board ul li p{padding:0 10px;font-size: 14px;}
.review_board ul li p span{font-size: 14px;}
.review_board ul li p.line{padding:10px;margin-top: 0;}
.review_board ul li p em:last-child{font-size: 10px;margin-top: 15px;margin-bottom: 15px;}
.review_board ul li p em:last-child::after{}
.review_board ul li em:last-child{
        padding: 15px 10px;
}
  #sub table.line td > span.box {padding: 2px 5px;}
  .list_search button{position: static;float: none;font-size: 1em;}

  #sub .board_write input{padding: 5px 10px;line-height: 20px;height: 18px;}

  #sub .board_write dd {padding: 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;font-size: 14px;min-height: 0;}
  #sub .board_write dd.full {padding: 10px 20px;}
  #sub .board_write #email1 {}
  #sub .board_write dd.phone {line-height: 30px;}
  #sub .board_write dd.e-mail {line-height: 30px;}
  #sub .board_write dt {width:100%;font-size: 14px;line-height: 14px;text-align:  left;border-bottom:  0;padding:10px;}
  #sub .board_write dt.con {line-height: 14px;}
  #sub .board_write .e-mail p{padding-left:0;padding-top: 8px;line-height: 19.6px;display:  block;}
  #sub .board_write input[type="file"]{height: 25px;padding-top: 0;padding-left: 0;line-height: 35px;}
  #sub .board_write input[type="file"]:before{height: 32px;margin-top: -1px;}
  .filebox {width:100%;}
  .filebox .upload-name {float:right;width: 64%; /* 구식 브라우저를 위한 대비책(fallback) */width: -webkit-calc(100% - 102px);/* Chrome, Safari */width: -moz-calc(100% - 102px); /* for Firefox */width: calc(100% - 102px); /* for IE */}

.paging li {width: 24px;height: 24px;line-height: 25px;}
.paging li a:before {line-height: 25px;}
.password {margin: 60px 15px;padding: 30px 10px;}
.password a {height: auto;}
.password input {height: 28px;}
.gallery_pass h5 {font-size:  15px;}
.gallery_pass h5 span {display: block;}
.gallery_pass p {margin-bottom: 10px;font-size: 14px;}
.gallery_pass p > span {display: block;}
.btn_wrap {margin-top: 20px;font-size: 14px;}

}


.kakao ul {text-align:center;}
.kakao ul li {display:inline-block;vertical-align: middle;}
.kakao_bg {height: 243px;background: #e7e3e4;display: block;position: absolute;z-index: -1;left: 0;right: 0;margin-top: -302px;}

.personal  { line-height: 1.8em }
.personal h6 {margin-top: 1.4em;margin-bottom: 10px;color: #5b7ca6;font-size: 1.2em;font-weight: 400;}
.personal p {margin-bottom: 10px}


@media screen and (max-width:  767px) {
  .kakao .sub_title h3 p img {width: 30px;}
  .kakao ul li:first-child img {width: 220px;}
  .kakao_bg {margin-top: 0;height: 254px;top: 250px;}
}
