@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: #6a6a6a;color: #fff;width: 85px;display: inline-block;}
#sub table.line td > span.box.before {background: #00a1e9;}
#sub table.line th > p {float: right;font-size: 1em;padding: 0;line-height: normal;margin-bottom: 0;}
#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: 12px;color: #fff;font-weight: 400;margin-left: 10px;background: #00a1e9;padding: 1px 5px;}
#sub table.list td span.best {background:#7784bb;color:#fff;padding: 4px 10px;font-size: 12px;}
#sub table.list tr:hover td, #sub table.list tr.notice td {background: rgba(119, 132, 187, 0.10);}

#sub table.view th {padding:10px 20px; text-align: left; }
#sub table.view td {padding: 80px 20px;line-height: 2em;}
#sub table.view .board_con {padding: 80px 100px;text-align: justify;}



/*counsel*/
colgroup .num {width: 100px;}
colgroup .sort {width: 180px;}
colgroup .review {width: 180px;}
colgroup .photo {width: 150px;}
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: #6a6a6a;color: #fff;border: 1px solid #6a6a6a;}
.paging li:hover a, .paging li.active a {color: #fff;}
.paging li a:before {font-family: 'icon_font';font-size: 11px;position: relative;display:  inherit;}
.paging li:first-child a:before {content: '\E878\E878';}
.paging li:nth-child(2) a:before {content: '\E878';}
.paging li:nth-last-child(2) a:before {content: '\E877';}
.paging li:last-child a:before {content: '\E877\E877';}

/*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: 25px;padding: 5px 10px;max-width: 50%;}
.list_search > input[type="submit"]{background: #a5a5a5;border: 1px solid #a5a5a5;color:#fff;padding: 5px 15px;height: 37px;margin-left: -6px;cursor: pointer;margin-top: 0;}
.list_search button {float:right;background: #00a1e9;border: 1px solid #00a1e9;color:#fff;padding: 5px 15px;font-weight: 500;cursor: pointer;position: absolute;right:  30px;font-size: 18px;}


/* 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-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;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;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;} */

#sub table.bf_list_2 td {vertical-align: middle;}
#sub table.bf_list_2 td img{margin-bottom: 0; display: block; max-width: 210px; width: 100%;}
#sub table.bf_list_2 td a {display: block;}
#sub table.bf_list_2 td h4{color: #222;font-size: 1.1em;}
#sub table.bf_list_2 td > span {width: 40px;height: 40px;background: #b69c71;display: inline-block;color:#fff;padding-left: 3px;font-size: 20px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius:  30px;line-height: 40px;}


.bf_view {padding: 0 100px;margin:0;text-align: center;position: relative;z-index: 1;}
.bf_view h4 {font-size: 36px;margin-bottom: 40px; 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: 400px;}

.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: #00a1e9;border: 1px solid #00a1e9;color: #fff;}
.btn_gray{background: #797979;border: 1px solid #797979;color: #fff;}
.btn_red{background: #396ebb;border: 1px solid #396ebb;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: 25px;display: inline-block;line-height: 25px;}
.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: #00a1e9;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%;min-height: 100%;-webkit-filter: grayscale(10%);filter: grayscale(10%);}
.review_board ul li a > div {background: #fff;border:1px solid #eee;margin-bottom: 30px;padding: 0;}
.review_board ul li h5 {font-size:22px;color: #333;margin-top: 20px;letter-spacing: -2px;padding: 0 20px 20px;}

.review_board ul li a > div > div {/* 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 a > div > div.review { height: 3.6em;-webkit-line-clamp: 3;}
.review_board ul li p:last-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 p:last-child {line-height:19px;font-size:12px;color:#333;text-transform: uppercase;display: block;text-align: right;background: #fff;margin-top: 30px;font-weight: 500;padding: 0 20px;}
.review_board ul li p: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;position: relative;margin-top: 9px;}

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

/*board_write*/
#sub .board_write {border-top: 2px solid #111111;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: rgba(119, 132, 187, 0.1);text-align: center;line-height: 37px;color: #222;}
#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: 33px;}
#sub .board_write  dt.con {line-height: 92px;}
#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: 30%;}
#sub .board_write .e-mail p{padding-left:10px;display: inline-block;padding-bottom:0;margin-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; */}


.board_cate {margin: 80px auto 50px;max-width: 1200px;position: relative;z-index: 1;}
.board_cate ul {text-align: center;}
.board_cate li {border:1px solid #ddd;background:#f7f7f7;width: 16.6666%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;float: left;/* border-bottom: 1px solid #222; */}
.board_cate a {display:block;position:relative;padding: 15px 0px;font-size: 18px;color: #222;text-align:center;line-height:1.2em;font-weight: 400;}
.board_cate .active, .board_cate li:hover {z-index:2;border:1px solid #63533a;background:#fff;font-weight:bold;position: relative;/* border-bottom: 0; */}
.board_cate .active a {color: #63533a}
.board_cate:after {clear:both;content:''; display:block}
#sub.board_07 table.line td img {margin-bottom: 0;width: 150px;}
#sub.board_07 table.line td > div  {/* height: 115px; */overflow: hidden;vertical-align: middle;display: inline-block;}

/* 모바일 (해상도 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: 12px;}
#sub table.line {font-size:12px}
#sub table.line th {font-size:12px;padding: 10px;}
#sub table.line td{padding: 10px 5px;}
#sub table.list td b{font-size: 10px;}
#sub table.list td i{font-size: 14px;line-height: 17px;}
#sub table.line th + td {border-bottom:1px solid #111}
#sub table.view .board_con {padding: 40px 0px;}

.btn {padding:5px 15px;}



/* .bf_list li{width: 100%;min-height: 0;}
.bf_list li::before, .bf_list li::after{padding: 0px 7px;font-size: 11px;line-height: 2em;border-radius: 0 0 3px 0;}
.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;} */

#sub table.bf_list_2 td p {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: 0;padding: 10px;}
.review_board ul li a > div{padding:0}
.review_board ul li a > div > div{padding:0 10px;font-size: 12px;margin-top: 0;}
.review_board ul li p:last-child{margin-top:20px;padding: 0 10px 20px;}
.review_board ul li p span{font-size: 12px;}
.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: 6px 5px;width: 50px;}
  .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 */}

  .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,.board_cate li:nth-child(2),.board_cate li:nth-child(3) {margin-top:0}
.board_cate a {font-size: 12px;padding: 10px 0;}
.board_cate .active, .board_cate li:hover {border: 1px solid #63533a;}

#sub.board_07 table.line td img {margin-bottom: 0;width: auto;}
#sub.board_07 table.line td > div  {height: 57px;}
#sub.board_07 table.line td {vertical-align: middle;}
#sub.board_07 table.line td span {display: block;}



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

}
.auto_height {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 10px;
}

.auto_height iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.kakao {text-align:center; }
.kakao img {line-height: 0}
.kakao ul {margin-bottom: 150px;}
.kakao li {display: inline-block;}
.kakao a{}
.kakao_bg {height: 280px;background: #e7e3e4;display: block;position: absolute;z-index: -1;left: 0;right: 0;margin-top: -436px;}

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


@media screen and (max-width:  767px) {
  .kakao ul{margin-bottom:40px}
  .kakao ul li:first-child{margin-bottom:50px}
  .kakao ul li:first-child img {width: 260px;}
  .kakao_bg {margin-top: 0;height: 311px;top: 326px;}
}
