@charset "utf-8";
/* 제작사 : D.LOFT - http://www.dloft.net/ */
/* CSS Document */

/* 영역구분 */
#wrap {position:relative; overflow:hidden; width:100%; margin:0 auto; text-align:center;}
.wrap {display:inline-block; vertical-align:middle; box-sizing:border-box; width:100% !important; min-width:310px; padding-left:min(8.333vw, 30px); padding-right:min(8.333vw, 30px); margin:0 auto;}


/* 컬러 */
.cm {color:#f8faf9 !important;}	/* 메인 */
.cs {color:#514a4a !important;} /* 서브 */
.cg {color:#ae807b !important;} /* 갈색 */
.cn {color:#b68c87 !important;} /* 옅은 갈색 */
.ct {color:#9b6a56 !important;} /* 진한 갈색 */
.ce {color:#b38883 !important;} /* 갈색 */
.cy {color:#dddddd !important;} /* 더 밝은회색 */
.ck {color:#000 !important;}	/* 검은색 */
.cw {color:#fff !important;}	/* 흰색 */



/* 타이틀 */
.title {font-size:50px; line-height:70px; word-wrap:normal; word-break:keep-all;}
.title.font, .title .font {font-family:'NanumSquare', sans-serif;}
.title.thin, .title .thin {font-weight:100;}
.title.light, .title .light {font-weight:300;}
.title.regular, .title .regular {font-weight:400;}
.title.medium, .title .medium {font-weight:500;}
.title.bold, .title .bold {font-weight:700;}
.title.black, .title .black {font-weight:900;}
.title.t1 {font-size:60px; line-height:70px;}
.title.t2 {font-size:50px; height:70px; line-height:76px;}
.title.enter {white-space:nowrap;}
.title.enter span, .title .enter span, .title.enter strong, .title .enter strong{display:block;}


/* 텍스트 */
.text {font-size:17px; font-weight:400; line-height:30px; word-wrap:normal; word-break:keep-all;}
.text.font, .text .font {font-family:'NanumSquare', sans-serif;}
.text.word, .text .word {word-break:break-all;}
.text.thin, .text .thin {font-weight:100;}
.text.light, .text .light {font-weight:300;}
.text.medium, .text .medium {font-weight:500;}
.text.bold, .text .bold {font-weight:700;}
.text.exbold, .text .exbold {font-weight:800;}
.text.black, .text .black {font-weight:900;}
.text.big, .text .big {font-size:20px;}
.text.small, .text .small {font-size:16px;}
.text.mini, .text .mini {font-size:14px; line-height:25px;}
.text img {display:inline-block; vertical-align:middle; max-width:100%; margin:0;}
.overflow {min-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.text.enter, .text .enter {white-space:nowrap;}
.text.enter span, .text .enter span, .text.enter strong, .text .enter strong {display:block;}



/* 서식 */
.template {display:inline-block; vertical-align:middle; width:100%; text-align:left; word-wrap:normal; word-break:keep-all;}
.template > h4 {display:block; position:relative; width:auto; margin-top:30px; padding-left:20px; font-size:20px; font-weight:500; color:#0e0e0e; line-height:30px;}
.template > h4:first-child {margin-top:0;}
.template > h4:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:8px; width:6px; height:6px;border-radius:50%; border:#c79d70 solid 3px;}
.template > strong {display:block; position:relative; width:auto; margin-top:20px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:500; color:#777; line-height:24px;}
.template > p {display:block; position:relative; width:auto; margin-top:10px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template > .box {margin-top:20px; margin-left:25px; padding:20px 25px; border:#e6e6e6 solid 1px; background-color:#f9f9f9; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template strong {font-weight:500; color:#0e0e0e;}
.template a {color:#0e0e0e;}
.template a:hover {text-decoration:underline; text-decoration-color:rgba(0, 174, 239, 0.7);}
.template > ul {display:block; position:relative; width:auto; margin-top:10px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template > ul > li {position:relative; margin:5px 0; padding-left:10px;}
.template > ul > li:before {content:""; position:absolute; left:0px; top:11px; width:3px; height:3px; border-radius:50%; background-color:#999;}
.template > ul > li > ul {display:block; position:relative; width:auto; margin:5px 15px; font-size:12px; font-family:'Noto Sans KR'; font-weight:400; color:#999; line-height:22px;}
.template > ul > li > ul > li {position:relative; padding-left:10px;}
.template > ul > li > ul > li:before {content:""; position:absolute; left:0px; top:11px; width:4px; height:1px; background-color:#999;}
.template > ul > li > p {display:block; position:relative; width:auto; margin:5px 15px; padding-left:10px; font-size:12px; font-family:'Noto Sans KR'; font-weight:400; color:#999; line-height:22px;}
.template > ul > li > p:before {content:""; position:absolute; left:0px; top:10px; width:4px; height:1px; background-color:#999;}
.template > .table {margin-top:10px; margin-left:25px;}


/* 테이블 */
ul.table {display:inline-block; vertical-align:middle; width:100%;}
ul.table li {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-bottom:10px;}
ul.table strong {display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; width:100px; padding:10px 0; border-top:#9f9f9f solid 1px;}
ul.table p {margin-left:120px; padding:10px 0; border-top:#ececec solid 1px;}

ul.table.t1 strong {width:150px;}
ul.table.t1 p {margin-left:170px;}

div.table table {width:100%; border-top:#0e0e0e solid 1px;}
div.table table tr:first-child th, .table tr:first-child td {border-top:none;}
div.table table th {position:relative; padding:15px 20px; border-bottom:#9f9f9f solid 1px;}
div.table table th:before {content:""; position:absolute; left:0; top:50%; width:1px; height:16px; margin-top:-8px; background:#ececec;}
div.table table th:first-child:before {display:none;}
div.table table td {padding:15px 20px; border:#ececec solid 1px;}
div.table table td:first-child {border-left:none;}
div.table table td:last-child {border-right:none;}


/* 꾸밈요소 */
.bar {position:relative; padding-top:20px;}
.bar:before {content:""; position:absolute; left:0; top:0; width:30px; height:5px; border-radius:1px; background:#0e0e0e;}

.marker {display:inline-block; min-width:50px; padding:0 10px; border-radius:12px; background-image:linear-gradient(to right, #85cbcc 0%, #f9e2ae 100%); color:#fff; font-weight:800; line-height:24px;}
.marker.t1 {border-radius:13px; line-height:26px;}

.bullet {position:relative;}
.bullet li {position:relative; padding-left:15px;}
.bullet li:before {content:""; position:absolute; left:0; top:12px; width:4px; height:4px; border-radius:2px; background:#0e0e0e;}


.d_bullet {position:relative; box-sizing:border-box; padding-left:10px;}
.d_bullet:before {content:""; position:absolute; left:0; top:8px; width:4px; height:14px; border-radius:2px; background:#b1847f;}
.d_bullet.t1 {padding-left:20px;}
.d_bullet.t1:before {left:10px; background-color:#fac68d;}
.d_bullet.t2:before {top:12px; width:6px; height:6px; border-radius:50%; background-color:#935f49;}

.bgm {padding:0 5px; background:#c79d70;}
.bgs {padding:0 5px; background:#0e0e0e;}
.bga {padding:0 5px; background:#f9f9f9;}


.line.cbm {background-image:linear-gradient(180deg,rgba(255,255,255,0) 95%, #07a24c 5%);}
.line.cbs {background-image:linear-gradient(180deg,rgba(255,255,255,0) 95%, #ffb541 5%);}
.line.cbr {background-color:#f24a5e;}
.line.cbb {background-image:linear-gradient(180deg,rgba(255,255,255,0) 95%, #262629 5%);}
.line.cbg {background-color:#313339;}
.line.cbt {background-color:#9d9ea2;}
.line.cby {background-image:linear-gradient(180deg,rgba(255,255,255,0) 95%, #d5dadf 5%);}
.line.cbk {background-image:linear-gradient(180deg,rgba(255,255,255,0) 95%, #000 5%);}

.line.cbs.t2 {background-image:linear-gradient(180deg,rgba(255,255,255,0) 60%, rgba(255,181,65,0.5) 40%);}

.quotation {padding:60px; border-radius:25px; background:#f9f9f9;}
.quotation .q_box {max-width:800px; margin:0 auto; padding:20px; border-radius:5px; overflow:hidden; background:#fff; box-shadow:40px 40px 60px rgba(0, 0, 0, 0.15);}
.quotation > p {margin-top:20px;}
.quotation img {width:100%; max-width:800px;}

.space1 {margin-top:25px;}
.space2 {margin-top:50px;}
.space3 {margin-top:100px;}


/* 탭 */
.tab {display:inline-block; vertical-align:middle; width:100%;}
.tab ul {display:inline-block; vertical-align:middle; width:100%;}
.tab li {display:inline-block; vertical-align:middle; position:relative; float:left; width:100%; max-width:300px;}
.tab li:before {content:""; position:absolute; left:0; right:0; top:0; bottom:0; border:#ececec solid 1px; border-left:none; background:#fff;}
.tab li:first-child:before {border-left:#ececec solid 1px; border-radius:5px 0 0 5px;}
.tab li:last-child:before {border-radius:0 5px 5px 0;}
.tab li.on:before {border-color:#c79d70; background:#c79d70;}
.tab a {display:inline-block; vertical-align:middle; position:relative; width:100%; height:60px; overflow:hidden; font-size:18px; font-weight:300; color:#0e0e0e; letter-spacing:-0.5px; line-height:60px;}
.tab li.on a {font-weight:400; color:#fff;}
.tab.div4 ul {max-width:1200px;}
.tab.div4 li {width:25%;}
.tab.div3 ul {max-width:900px;}
.tab.div3 li {width:33.333%;}
.tab.div2 ul {max-width:600px;}
.tab.div2 li {width:50%;}


/* 박스 */
.box {position:relative; background-color:#fff; box-shadow:0 0 20px rgba(0, 0, 0, 0.1);}
.box.t1 {padding:30px; border:20px solid #f9f9f9; box-shadow:none;}
.box.t2 {padding:10px; border-radius:30px; background-color:#f5f5f5; box-shadow:none;}


/* 폼태그 */
.form {display:inline-block; vertical-align:middle; width:100%; text-align:left;}
.form .f_wrap {display:inline-block; vertical-align:middle; width:100%;}
.form .f_field {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%; margin:5px 0; height:50px; border-radius:25px; background-color:#f3ebe9;}
.form .f_field.div1 {width:100%;}
.form .f_field.div2 {width:50%;}
.form .f_field.div3 {width:33.333333%;}
.form .f_field.div4 {width:25%;}
.form .f_field.div5 {width:20%;}
.form .f_field.div6 {width:16.666666%;}
.form .f_field.div7 {width:14.285714%;}
.form .f_field.div8 {width:12.5%;}
.form .f_field.div9 {width:11.111111%;}
.form .f_field.div10 {width:10%;}
.form .f_field .ff_title {position:absolute; left:20px; top:0; height:50px; overflow:hidden; font-family:'NanumSquare',san-serif; font-size:13px; font-weight:700; color:#c5bab9; letter-spacing:-0.5px; line-height:50px; text-align:left;}
.form .f_field .ff_title.birth {right:20px;}
.form .f_field .ff_title label {position:relative;}
.form .f_field .ff_title.birth label {display:inline-block; width:100%;}
.form .f_field .ff_wrap {display:block; margin-left:100px !important; margin-right:25px;}
.form .f_field .ff_wrap.text {margin-top:5px;}
.form .f_field .ff_wrap.option {min-height:30px; margin:10px 0; line-height:30px;}
.form .f_field .ff_wrap.option span {margin-right:15px;}
.form .f_field .ff_wrap.option input {margin-right:5px;}
.form .f_field .ff_wrap.content {min-height:50px; margin-top:0; line-height:50px;}
.form .f_field input {display:inline-block; vertical-align:middle;}
.form .f_comment {display:inline-block; vertical-align:middle; float:left; box-sizing:border-box; width:100%; padding:5px 20px; font-family:'NanumSquare',san-serif; font-size:12px; font-weight:700; color:#c5bab9; line-height:15px; letter-spacing:-0.5px; word-break:keep-all; text-align:left;}

/* 폼스타일 */
.input {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:50px; margin:0; padding:0; border:none; background-color:transparent; font-weight:400;
	font-size:15px; color:#514a4a; letter-spacing:-0.5px; line-height:50px; text-align:left; text-indent:0;}
.input:focus {outline:none;}
.input:hover {border-color:#0e0e0e; color:#0e0e0e;}
.input::placeholder {color:#c5bab9;}
.select {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:50px; margin:0; padding:0; border:none; background-color:transparent;
	font-size:15px; color:#514a4a; letter-spacing:-0.5px; line-height:50px; text-align:left; text-indent:0;}
.select:hover {border-color:#0e0e0e; color:#0e0e0e;}
.select:focus {outline:none;}
.select::placeholder {color:#c5bab9;}
.textarea {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:180px; margin:0; padding:20px 15px; border:none; border-radius:15px; background-color:#fff; font-family:'NanumSquare',san-serif; font-size:15px; font-weight:400; color:#514a4a; line-height:25px; letter-spacing:-0.5px;text-align:left; resize:none;}
.textarea::placeholder {color:#c5bab9;}
.textarea:focus {outline:none;}
.file {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:48px; margin:0; padding:10px 0; border:#b0b0b0 solid 1px; background-color:#fff;
	font-size:15px; color:#777; letter-spacing:0px; line-height:30px; text-align:left; text-indent:5px;}
.file:hover {border-color:#0e0e0e; color:#0e0e0e;}

.input.w50p {width:50%;}
.ff_calendar {display:inline-block; vertical-align:middle; position:relative; line-height:50px;}
.ff_calendar i {position:absolute; left:0; top:50%; width:20px; height:20px; margin-top:-10px; background-image:url("../images/common/icon_calendar.png"); background-repeat:no-repeat; background-position:center 0; background-size:100% auto;}
.input_date {box-sizing:border-box; width:100%; padding-left:20px; border:none; background-color:transparent; font-family:'NanumSquare', sans-serif; font-size:14px; font-weight:900; color:#aeaeba; line-height:50px; letter-spacing:-0.5px; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.input_date:focus {outline:none;}
.input_date > span {display:inline-block; position:absolute; left:50%; top:15px; margin-left:-8px; font-family:'NanumSquare', sans-serif; font-size:14px; font-weight:900; color:#aeaeba; line-height:20px; letter-spacing:-0,5px;}

/* 버튼 */
.btn_wrap {display:inline-block; vertical-align:middle; width:100%; text-align:center;}
.btn_wrap ul {display:inline-block; vertical-align:middle; margin:0 auto; width:100%;}
.btn_wrap li {display:inline; float:left; width:100%; margin-bottom:10px;}
.btn_wrap.small li,
.btn_wrap.mini li {width:auto;}
.btn_wrap li:last-child {margin-bottom:0;}
.btn {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:100%; height:50px; padding:0px 40px; border-radius:25px; background-image:linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, #ae807b 100%); background-color:#ae807b; font-family:'NanumSquare',san-serif; font-size:17px; font-weight:700; color:#fff; line-height:50px; letter-spacing:-1px; text-align:center; box-shadow:0 20px 40px rgba(174, 128, 123, 0.4); transition:0.2s; -webkit-transition:0.2s;}
.btn span {position:relative;}
.btn.t1 {height:60px; border-radius:30px; font-size:22px; font-weight:700; line-height:60px; text-align:left;}
.btn.t1:before {content:""; position:absolute; right:42px; top:50%; z-index:0; width:8px; height:8px; margin-top:-5px; border-top:#fff solid 3px; border-right:#fff solid 3px; border-radius:2px; transform:rotate(45deg); -ms-transform:rotate(45deg);transition:0.2s; -webkit-transition:0.2s;}
.btn.t1:active:before {right:32px;}
.btn.t2 {border:#ae807b solid 1px; background-color:#fff; background-image:none; color:#b28681;}
.btn.t3 {background-color:#fff; background-image:none; color:#b28681;}
.btn.t4 {height:30px; padding:0; background-color:#ae807b; background-image:none; font-size:15px; line-height:30px; }
.btn.small {width:100px; height:40px; padding:0; font-size:15px; font-weight:400; line-height:40px; box-shadow:0 10px 20px rgba(174, 128, 123, 0.1);}
.btn.mini {width:80px; height:30px; padding:0; font-size:12px; font-weight:400; line-height:30px; box-shadow:0 10px 20px rgba(174, 128, 123, 0.1);}
.btn.t4.small,
.btn.t4.mini {box-shadow:none;}

.cs_search {position:absolute; right:14px; top:15px; font-size:14px; width:auto; height:20px; padding:0 13px; line-height:20px; }

/* 페이징 */
.paging {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; padding-top:20px; padding-bottom:10px; border-top:#e5e5e5 solid 1px; text-align:center;}
.paging ul {display:inline-block; vertical-align:middle;}
.paging li {display:inline-block; vertical-align:middle; float:left;}
.paging a {display:inline-block; vertical-align:middle; min-width:36px; height:36px; margin:2px; padding:0 4px; border-radius:3px; background-color:#f0f0f0; font-size:12px; font-weight:500; color:#231f20; line-height:36px; text-align:center; overflow:hidden; text-overflow:ellipsis; word-break:break-all; transition:0.2s; -webkit-transition:0.2s;}
.paging a:active {background-color:#fff; box-shadow:0 4px 8px rgba(35, 31, 32, 0.08);}
.paging a.on {background-color:#0c4da2; font-weight:700; color:#fff;}

/* 메뉴 */
.menu {display:inline-block; vertical-align:middle; position:relative; width:100%;}
.menu > ul {display:block; width:auto; margin:10px 20px;}
.menu > ul > li {display:inline-block; vertical-align:middle; position:relative; width:100%; padding:5px 0; border-bottom:#f5f5f5 solid 1px;}
.menu > ul > li:last-child {border:none;}
.menu > ul > li > a {display:block; position:relative; width:auto; padding:10px; padding-right:40px; font-size:15px; font-weight:400; color:#231f20; line-height:20px; letter-spacing:-0.5px; text-align:left;}
.menu > ul > li > a:before {content:""; position:absolute; left:0; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:2px; background-color:#ae807b;}
.menu > ul > li > a:after {content:""; position:absolute; right:17px; top:17px; width:7px; height:7px; border-right:#ccc solid 1px; border-bottom:#ccc solid 1px; transform:rotate(-45deg); -ms-transform:rotate(-45deg);}



.checkbox {display:inline-block; position:relative; min-height:30px;}
.checkbox input[type='checkbox'], .checkbox input[type='radio'] {position:absolute; left:0; top:5px; z-index:-1; width:20px; height:20px; opacity:0;}
.checkbox label {cursor:pointer;}
.checkbox label i {display:inline-block; vertical-align:middle; position:relative; float:left; box-sizing:border-box; width:20px; height:20px; margin-top:5px; margin-right:min(2.22vw, 8px); overflow:hidden; border-radius:50%; background-image:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%); background-color:transparent; border:#e5d9d8 solid 1px; transition:0.2s; -webkit-transition:0.2s;}
.checkbox label i:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; box-sizing:border-box; width:6px; height:6px; margin-left:-3px; margin-top:-3px; border-radius:50%; background-color:#e5d9d8; transition:0.2s; -webkit-transition:0.2s;}
.checkbox input:checked + label i {background-image:linear-gradient(to right, #85cbcc 0%, #f9e2ae 100%); border:none;}
.checkbox input:checked + label i:before {background-color:#fff;}
.checkbox input:checked ~ .input {display:block !important;}
.checkbox label span {display:inline-block; vertical-align:middle; float:left; font-family:'NanumSquare',san-serif; font-size:min(4.1667vw, 15px); font-weight:400; color:#514a4a; line-height:30px; letter-spacing:-1px; transition:0.2s; -webkit-transition:0.2s;}
.checkbox input:checked + label span {font-weight:700; color:#b38883;}
.checkbox.t1 > label span {font-size:min(5.2778vw, 19px);  font-weight:400;}
.checkbox.t1 > input:checked + label span {font-weight:800;}
.checkbox.t2 > label span:before {content:""; position:absolute; box-sizing:border-box; right:-18px; top:7px; width:16px; height:16px; border-radius:50%; border:#514a4a solid 1px; background-color:#fff; text-indent:-1px; font-family:'NanumSquare',san-serif; font-size:min(3.88vw, 14px); font-weight:400; color:#514a4a; line-height:16px; letter-spacing:-1px; transition:0.2s; -webkit-transition:0.2s;}
.cstl_degree > li:nth-child(1) .checkbox.t2 label span:before {content:"0";}
.cstl_degree > li:nth-child(2) .checkbox.t2 label span:before {content:"1";}
.cstl_degree > li:nth-child(3) .checkbox.t2 label span:before {content:"2";}
.cstl_degree > li:nth-child(4) .checkbox.t2 label span:before {content:"3";}
.checkbox.t2 input:checked + label span:before {border-color:#ae807b; background-color:#ae807b; color:#fff;}
.checkbox.t3 input[type='checkbox'], .checkbox input[type='radio'] {top:0; width:30px; height:30px;}
.checkbox.t3 label i {width:30px; height:30px; margin-top:0; margin-right:10px; border-radius:10px;}
.checkbox.t3 label i:before {width:9px; height:5px; background-color:transparent; border-bottom:#e5d9d8 solid 2px; border-left:#e5d9d8 solid 2px; margin-left:-4px; margin-top:-4px; border-radius:0; transform:rotate(-45deg);}
.checkbox.t3 label span {font-size:15px;}
.checkbox.t3 input:checked + label i:before {background-color:transparent; border-bottom:#fff solid 2px; border-left:#fff solid 2px;}
.checkbox.t4 {margin-top:15px;}
.checkbox.t4 label i {margin-right:0;}
.checkbox.t4 label span {position:absolute; left:50%; top:-21px; width:30px; margin-left:-15px; text-align:center;}

/* 더 보기 */
.more {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; width:32px; height:32px; background-color:#fff; border:#0e54a2 solid 3px; border-radius:50%; transition:0.3s; -webkit-transition:0.3s;}
.more:before {content:""; position:absolute; left:50%; top:50%; box-sizing:border-box; width:8px; height:8px; margin-left:-5px; margin-top:-4px; border-top:#0e54a2 solid 3px; border-right:#0e54a2 solid 3px; transform:rotate(45deg); transition:0.3s; -webkit-transition:0.3s;}


/* 온도계 */
.thermometer {display:inline-block; position:relative; background-color:#fff; border-radius:15px; box-shadow:0 0 20px rgba(174, 128, 123, 0.2);}
.thermometer i {display:inline-block; position:absolute; border-radius:2px; background-color:#514a4a; opacity:0.8;}
.thermometer .t_fill {display:inline-block; position:absolute; border-radius:8px; transition:0.4s; -webkit-transition:0.4s;}
.thermometer.t1 {width:30px; height:180px;}
.thermometer.t1 .t_fill {left:7px; right:7px; top:173px; bottom:7px;}
.thermometer.t1 .t_fill.t1 {top:137px; background-color:#9ca8e0;}
.thermometer.t1 .t_fill.t2 {top:107px; background-color:#a8dee0;}
.thermometer.t1 .t_fill.t3 {top:77px; background-color:#a7c676;}
.thermometer.t1 .t_fill.t4 {top:50px; background-color:#fbc78d;}
.thermometer.t1 .t_fill.t5 {top:7px; background-color:#f07038;}
.thermometer.t1 i {right:0; top:0; width:12px; height:2px; opacity:0.8;}
.thermometer.t1 i:nth-child(2) {top:30px;}
.thermometer.t1 i:nth-child(3) {top:60px;}
.thermometer.t1 i:nth-child(4) {top:90px;}
.thermometer.t1 i:nth-child(5) {top:120px;}
.thermometer.t1 i:nth-child(6) {top:150px;}
.thermometer.t2 {width:100%; height:30px;}
.thermometer.t2 .t_fill {left:7px; right:calc(100% - 7px); top:7px; bottom:7px;}
.thermometer.t2 .t_fill.t1 {right:75%; background-color:#a8dee0;}
.thermometer.t2 .t_fill.t2 {right:55%; background-color:#a7c676;}
.thermometer.t2 .t_fill.t3 {right:35%; background-color:#fbc78d;}
.thermometer.t2 .t_fill.t4 {right:7px; background-color:#f07038;}
.thermometer.t2 i {bottom:0; width:2px; height:12px; opacity:0.8;}
.thermometer.t2 i:nth-child(2) {left:20%;}
.thermometer.t2 i:nth-child(3) {left:40%;}
.thermometer.t2 i:nth-child(4) {left:60%;}
.thermometer.t2 i:nth-child(5) {left:80%;}
.thermometer.t2 i:before {content:"0"; position:absolute; left:-1px; bottom:-30px; height:25px; font-family:'NanumSquare',san-serif; font-size:13px; font-weight:400; color:#ded8d7; line-height:25px; letter-spacing:-0.5px; transition:0.4s; -webkit-transition:0.4s;}
.thermometer.t2 i:nth-child(2):before {content:"0";}
.thermometer.t2 i:nth-child(3):before {content:"1";}
.thermometer.t2 i:nth-child(4):before {content:"2";}
.thermometer.t2 i:nth-child(5):before {content:"3";}
.thermometer.t2 .t_fill.t1 ~ i:nth-child(2):before {color:#514a4a; font-weight:700;}
.thermometer.t2 .t_fill.t2 ~ i:nth-child(3):before {color:#514a4a; font-weight:700;}
.thermometer.t2 .t_fill.t3 ~ i:nth-child(4):before {color:#514a4a; font-weight:700;}
.thermometer.t2 .t_fill.t4 ~ i:nth-child(5):before {color:#514a4a; font-weight:700;}

/* 팝업 */
.popup {position:fixed; left:0; right:0; top:-100%; bottom:100%; z-index:999999; width:auto !important; height:auto !important; background-color:rgba(0, 0, 0, 0.9);}
.popup.on {top:0; bottom:0;}
.popup .p_box {display:inline-block; vertical-align:middle; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; width:auto; height:auto; background-color:#fff; transform:scale(0.8); transition:0.4s; -webkit-transition:0.4s;}
.popup.on .p_box {transform:scale(1);}
.popup .p_head {display:inline-block; vertical-align:middle; position:fixed; left:0; right:0; top:0; z-index:999; height:40px; padding:10px; background-color:#ae807b; box-shadow:0 5px 10px rgba(35, 31, 32, 0.06); transition:0.3s; -webkit-transition:0.3s;}
.popup .p_close {display:inline-block; vertical-align:middle; position:absolute; left:10px; top:10px; z-index:9; width:40px; height:40px; border-radius:20px; color:#fff;}
.popup .p_close:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:18px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:2px; background-color:currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg); transition:0.2s; -webkit-transition:0.2s;}
.popup .p_close:after {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:18px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:2px; background-color:currentColor; transform:rotate(135deg); -ms-transform:rotate(135deg); transition:0.2s; -webkit-transition:0.2s;}
.popup .p_body {position:absolute; left:0; right:0; top:60px; bottom:0;overflow:hidden; padding:20px;}
.popup .p_title {font-size:17px; font-weight:700; color:#fff; line-height:40px; text-align:center;}
.popup .btn.t1 {height:40px; font-size:15px; line-height:40px;}
.popup .btn.t2 {height:40px; font-size:15px; line-height:38px;}

.popup.t1 .p_box {left:10%; right:10%; top:50%; width:auto; height:220px; margin-top:-110px; border-radius:15px 15px 10px 10px;}
.popup.t1 .p_head {border-radius:10px 10px 0 0;}
.popup.t1 .p_close {left:auto; right:10px;}
.popup.t1 .p_title {text-align:left; text-indent:10px;}

.popup.t2 .p_box {left:50%; right:auto; top:50%; bottom:auto; width:800px; height:600px; margin-top:-300px; margin-left:-400px; border-radius:15px 15px 10px 10px;}
.popup.t2 .p_head {border-radius:10px 10px 0 0;}
.popup.t2 .p_close {left:auto; right:10px;}
.popup.t2 .p_title {text-align:left; text-indent:10px;}


/* 페이징 */
.pagination {display:inline-block; vertical-align:middle; position:relative; width:calc(100% + 10px); margin-left:-5px; margin-top:20px; font-size:0; text-align:center;}
.pagination ul {padding-top:50px;}
.pagination .first,
.pagination .prev,
.pagination .next,
.pagination .last {display:inline-block; vertical-align:middle; position:absolute; box-sizing:border-box; top:0; width:auto; height:40px; margin:0; border:none; background-color:#ede6e5; border-radius:5px; transition:0.2s; -webkit-transition:0.2s;}
.pagination .first {left:5px;; right:calc(75% + 7px);}
.pagination .prev {left:calc(25% + 3px); right:calc(50% + 5px);}
.pagination .next {left:calc(50% + 5px); right:calc(25% + 3px);}
.pagination .last {left:calc(75% + 7px); right:5px;}
.pagination .first:hover ,
.pagination .prev:hover ,
.pagination .next:hover ,
.pagination .last:hover {border-color:#f79726;}
.pagination .first a,
.pagination .prev a,
.pagination .next a,
.pagination .last a {display:inline-block; vertical-align:middle; position:relative; font-size:0; background-image:none !important; background-color:transparent !important; color:transparent; box-shadow:none;}
.pagination .first a:active,
.pagination .prev a:active,
.pagination .next a:active,
.pagination .last a:active {background-image:linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, #ae807b 100%) !important; background-color:#b88e89 !important;}
.pagination .first:before,
.pagination .prev:before,
.pagination .next:before,
.pagination .last:before {content:""; display:inline-block; vertical-align:middle; position:absolute; box-sizing:border-box; left:50%; top:50%; z-index:1; width:8px; height:8px; margin-left:-5px; margin-top:-4px; border-top:#514a4a solid 1px; border-right:#514a4a solid 1px; transform:rotate(-135deg); pointer-events:none;}
.pagination .first:after,
.pagination .last:after {content:""; display:inline-block; vertical-align:middle; position:absolute; box-sizing:border-box; left:50%; top:50%; z-index:1; width:8px; height:8px; margin-left:-5px; margin-top:-4px; border-top:#514a4a solid 1px; border-right:#262629 solid 1px; transform:rotate(-135deg); pointer-events:none;}
.pagination .prev:before {margin-left:-3px;}
.pagination .first:before {margin-left:2px;}
.pagination .first:after {margin-left:-4px;}
.pagination .next:before ,
.pagination .last:before {transform:rotate(45deg);}
.pagination .last:before {margin-left:-1px;}
.pagination .last:after {margin-left:-7px; transform:rotate(45deg);}
.pagination .off {opacity:0.3; pointer-events:none;}
.pagination li {display:inline-block; vertical-align:middle; width:calc(20% - 10px); min-width:30px; margin:0 5px; padding:0;}
.pagination li a {display:inline-block; vertical-align:middle; width:100%; height:40px; border-radius:5px; background-color:#fff; font-family:'NanumSquare',san-serif; font-size:15px; font-weight:700; color:#ae807b; line-height:40px; box-shadow:0 10px 20px rgba(174, 128, 123, 0.2); transition:0.2s; -webkit-transition:0.2s;}
.pagination li a:active {background-image:linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, #ae807b 100%); background-color:#b88e89; color:#fff;}
.pagination li.current a {background-image:linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, #ae807b 100%); background-color:#b88e89; color:#fff;}