@charset "utf-8";
@import url("reset.css");

/* Common */
body,p,hr,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,div {margin:0;padding:0}
body,input,textarea,select,button,table {font-family:'Nanum Gothic', Gulim, AppleGothic, sans-serif;font-size:12px;-webkit-font-smoothing:antialiased;-moz-font-smoothing: antialiased;font-smoothing: antialiased;text-rendering: optimizeLegibility;-ms-touch-action: manipulation;touch-action: manipulation}
img,fieldset{border:0;}
fieldset{margin:0;padding:0;border:0}
img{max-width:100%;vertical-align:middle}
ul,ol{list-style:none;}
em,address {font-style:normal}
a {color:black;text-decoration:none}
a:hover,a:active,a:focus {text-decoration:underline}

.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
/* // Common */

.both{overflow:hidden}
.fl{float:left}
.fr{float:right}

#wrap{;}

/* 왼쪽메뉴 nav */
#nav{position:fixed;top:0;left:0;width:160px;height:100%;background:#36404e}
#nav ul{border-top:1px solid #545c68}
#nav ul li{padding:20px 0;border-bottom:1px solid #545c68;text-align:center}
#nav ul li a{display:block}
#nav ul li a:hover{text-decoration:none}
#nav ul li .big{display:block;font-size:20px;font-weight:300;color:#fff;letter-spacing:-1px}
#nav ul li .small{font-size:13px;font-weight:500;color:#fff}
#nav ul li .icon{display:block;color:#98a6ad;font-size:30px;font-weight:400}
#nav ul li .title{display:block;font-size:16px;font-weight:500;color:#fff;line-height:18px}
#nav ul li .num{display:block;font-size:18px;color:#fff}
#nav ul li:hover, 
#nav ul li.active{background:#188ae2}
#nav ul li:hover .icon,
#nav ul li.active .icon{color:#fff}
/* 왼쪽메뉴 nav */

/* 본문 */
#container{;}
#container .tnb{overflow:hidden;width:100%;height:50px;background:#36404e;line-height:50px}
#container .tnb .mobile{display:none}
#container .tnb .name{padding-left:20px;color:#fff}
#container .tnb .name .yellow{color:#ffe400;}
#container .tnb .name .blue{color:#00fff0;}
#container .tnb .name .pink{color:#fba1f4;}
#container .tnb .my{float:right;text-align:right;display:inline-block;color:#fff;margin-right:25px;}
#container .tnb .my .icon{display:inline-block;width:25px;height:25px;margin-right:8px;border:2px solid #ccc;border-radius:100%;font-size:16px;line-height:25px;text-align:center}
#container .tnb .my-menu{display:none;}
#container .mobile-menu{display:none;}
#container .content{padding:20px}
#container .path{padding-bottom:15px;color:#717171}
#container .path .last{color:#00b050}

#container .colgroup{position:relative}
#container .colgroup-01{margin-bottom:20px;}
#container .colgroup-01.explain{padding:20px;background:#0070c0;border:2px solid #0070c0;border-radius:5px}
#container .colgroup-01.explain .btn-icon{}
#container .colgroup-01.explain .btn-icon .up{position:absolute;top:21px;right:30px;font-size:30px;color:#fff}
#container .colgroup-01.explain .btn-icon .down{display:none;position:absolute;top:21px;right:30px;font-size:30px;color:#fff}
#container .colgroup-01.explain .btn-icon.on .up{display:none}
#container .colgroup-01.explain .btn-icon.on .down{display:block;}
#container .colgroup-01.explain .close{display:none}
#container .colgroup-01.explain .btn-icon.on .close{display:block}
#container .colgroup-01.explain .cont{}
#container .colgroup-01.explain .cont .icon{display:inline-block;padding:0 30px 0 15px;font-size:60px;color:#eeeeee}
#container .colgroup-01.explain .cont .box{display:inline-block}
#container .colgroup-01.explain .cont .box .time{padding-bottom:10px;font-weight:500;color:#fff;font-size:17px;letter-spacing:-0.5px}
#container .colgroup-01.explain .cont .box .time .icon{padding:0 5px 0 0;color:#fff;font-size:19px}
#container .colgroup-01.explain .cont .box .time .best{display:inline-block;margin-left:10px;padding:0px 5px;background:#fff900;border-radius:3px;font-size:12px;color:#ff0000;font-weight:300;line-height:14px}
#container .colgroup-01.explain .cont .box p{font-size:15px;color:#fff;line-height:18px;font-weight:400}
#container .colgroup-01.explain .cont .box table{width:100%;margin:0 auto}
#container .colgroup-01.explain .cont .box th, #container .colgroup-01 .box td{padding:5px 0;color:#fff;text-align:center;}
#container .colgroup-01.explain .cont .box thead th{padding:10px 0 15px}
#container .colgroup-01.explain .cont .box tbody td{border-bottom:1px solid #00b0f0}
#container .colgroup-02{}
#container .colgroup-02 .col-01{float:left;width:65%;margin-right:12px;padding:20px;border:2px solid #f3f3f3;border-radius:5px}
#container .colgroup-02 .col-01 .start{margin-bottom:30px;}
#container .colgroup-02 .col-01 .start .cont{position:relative;padding:5px 0;text-align:left;}
#container .colgroup-02 .col-01 .start .cont .i_text{width:96%;padding:0 15px;height:34px;background:#ffffcc;border:1px solid #e3e3e3;border-radius:3px;line-height:34px;}
#container .colgroup-02 .col-01 .start .cont .i_select{width:25%;color:#aeaeab;padding:0 15px;height:34px;background:#ffffcc;border:1px solid #e3e3e3;border-radius:3px;line-height:34px;}
#container .colgroup-02 .col-01 .start .cont .entry-cont{display:none;margin:0 2px;padding:20px 10px;background:#dce6f2;border:1px solid #558ed5;color:#7f7f7f;text-align:center;}
#container .colgroup-02 .col-01 .start .cont .entry-cont .fa{color:#ff0000}
#container .colgroup-02 .col-01 .start .cont .entry-cont strong{font-weight:500;color:#0070c0}
#container .colgroup-02 .col-01 .start .cont .btn-start{position:absolute;bottom:5px;right:0px;margin-left:-125px;width:125px;padding:8px 0}
#container .colgroup-02 .col-01 .start .cont .text{padding:10px 0;color:#00b050;}
#container .colgroup-02 .col-01 .start.chart{;}
#container .colgroup-02 .col-01 .start.chart .tab-title li{float:inherit;margin:0 auto;}
#container .colgroup-02 .col-01 .start.chart .tab-cont{margin-bottom:20px;}
#container .colgroup-02 .col-01 .start.chart .tab-cont #chart-visit{height:300px;}
#container .colgroup-02 .col-01 .start.chart .tab-cont #chart-browser{height:300px;}
#container .colgroup-02 .col-01 .btn.btn-back{background:#00b050;border:1px solid #00b050}
#container .colgroup-02 .col-01 .btn.btn-delete{background:#e46c00;border:1px solid #e46c00}
#container .colgroup-02 .col-01 .btn.btn-submit{display:inline-block;width:inherit;padding:8px 15px;margin:5px 0 0;font-size:12px;border-radius:3px;}
#container .colgroup-02 .col-01 .list{margin-bottom:20px}
#container .colgroup-02 .col-01 .list .image{text-align:center;width:100%;margin:0 auto;}
#container .colgroup-02 .col-01 .list .comment{padding-top:20px}
#container .colgroup-02 .col-01 .list .comment .fl{color:#6f6f6f}
#container .colgroup-02 .col-01 .list .comment .fr{color:#ff2222}
#container .colgroup-02 .col-02 .charge{}
#container .colgroup-02 .col-01 .info{margin-bottom:20px;}
#container .colgroup-02 .col-01 .info .cont{padding:20px;border:2px solid #f3f3f3;border-top:0;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#container .colgroup-02 .col-01 .info .title{position:relative;padding:14px 26px;background:#3b3e47;border-top-left-radius:5px;border-top-right-radius:5px;font-size:16px;font-weight:500;color:#fff}
#container .colgroup-02 .col-01 .info .title .open{position:absolute;top:15%;right:30px;font-size:24px;cursor:pointer}
#container .colgroup-02 .col-01 .info .text{padding:10px 0 35px;font-size:16px;color:#00b050;text-align:center;font-weight:500}
#container .colgroup-02 .col-01 .info .text strong{font-weight:500}
#container .colgroup-02 .col-01 .info .cont .charge_info{display:none}
#container .colgroup-02 .col-01 .info .cont p{font-size:14px}
#container .colgroup-02 .col-01 .info .promise .feed{position:relative;width:50%;text-align:center}
#container .colgroup-02 .col-01 .info .promise .feed .profile{position:relative}
#container .colgroup-02 .col-01 .info .promise .feed .profile .name{position:absolute;bottom:33%;left:30%;padding:5px 50px 5px 10px;background:#fff;border:2px solid #00b050;border-radius:5px;font-size:13px;color:#00b050;font-weight:500}
#container .colgroup-02 .col-01 .info .promise .step{margin:50px 0 0 27px;width:40%}
#container .colgroup-02 .col-01 .info .promise .step ul {}
#container .colgroup-02 .col-01 .info .promise .step ul li{position:relative;margin-bottom:18px;padding:6px 30px;background:#188ae2;border-radius:5px;font-size:13px;color:#fff;text-align:center}
#container .colgroup-02 .col-01 .info .promise .step ul li .num{position:absolute;top:2px;left:-10px;width:23px;height:23px;background:#fff;border:2px solid #188ae2;border-radius:100%;color:#000;line-height:23px;}
#container .colgroup-02 .col-01 .info .promise .step ul li:last-child{margin-bottom:0}
#container .colgroup-02 .col-02{float:right;width:33%} 
#container .colgroup-02 .col-02 .code{margin-bottom:15px;padding:5px;background:#36404e;border-radius:3px;text-align:center}
#container .colgroup-02 .col-02 .code .my{padding:26px 0 22px 20px;background:#fff;font-size:14px;color:#36404e;letter-spacing:-1px;text-align:left}
#container .colgroup-02 .col-02 .code .my .icon{color:#717171;font-size:14px}
#container .colgroup-02 .col-02 .code .my .num{color:#ff5656}
#container .colgroup-02 .col-02 .code .comment{padding:10px 0 5px;color:#fff;font-size:12px;}
#container .colgroup-02 .col-02 .share{overflow:hidden;margin-bottom:15px;}
#container .colgroup-02 .col-02 .share a {float:left;display:block;width:48%;padding:22px 0 15px;background:#188ae2;border-radius:2px;font-size:16px;font-weight:500;color:#fff;text-align:center}
#container .colgroup-02 .col-02 .share a span{display:block;}
#container .colgroup-02 .col-02 .share a.recode{float:right;background:#6b5fb5;}
#container .colgroup-02 .col-02 .share .icon{padding-bottom:5px;font-size:39px;}
#container .colgroup-02 .col-02 .board{margin-bottom:15px;padding:15px 15px 10px;border:2px solid #f3f3f3;border-radius:5px}
#container .colgroup-02 .col-02 .board .title{display:block;padding-bottom:5px;font-size:16px;font-weight:500}
#container .colgroup-02 .col-02 .board .icon{padding:0 5px 0 0;color:#717171;font-size:17px}
#container .colgroup-02 .col-02 .board ul{}
#container .colgroup-02 .col-02 .board ul li{position:relative;border-bottom:1px solid #e7e7e7;line-height:29px;}
#container .colgroup-02 .col-02 .board ul li a{color:#717171;}
#container .colgroup-02 .col-02 .board ul li .date{position:absolute;top:3px;right:0;color:#717171}
#container .colgroup-02 .col-02 .board ul li:last-child{border-bottom:0}
#container .colgroup-02 .col-02 .inquiry{}
#container .colgroup-02 .col-02 .inquiry a{display:block;height:89px;line-height:89px;background:#ff9800;font-size:32px;font-weight:500;color:#fff;letter-spacing:-1px;text-align:center}
#container .colgroup-02 .col-02 .buy{background:#36404e;border-radius:5px;}
#container .colgroup-02 .col-02 .buy .subject{background:#00b050;padding:20px 0;border-bottom:1px solid #545c68;font-size:26px;font-weight:500;color:#fff;letter-spacing:-1px;text-align:center}
#container .colgroup-02 .col-02 .buy .cont{padding:20px;}
#container .colgroup-02 .col-02 .buy ul{}
#container .colgroup-02 .col-02 .buy ul li{padding:20px 0 15px;border-bottom:1px solid #545c68;}
#container .colgroup-02 .col-02 .buy ul li .i_select{display:block;width:100%;padding:7px;background:#fff;border-radius:5px;color:#6f6f6f;text-align:center}
#container .colgroup-02 .col-02 .buy ul li .i_text{display:block;width:75%;margin-bottom:10px;padding:7px;background:#fff;border-radius:5px;color:#6f6f6f;text-align:center}
#container .colgroup-02 .col-02 .buy ul li .btn-default{padding:9px}
#container .colgroup-02 .col-02 .buy ul li .title{padding-bottom:10px;font-size:15px;color:#fff}
#container .colgroup-02 .col-02 .buy ul li .title .icon{padding-right:10px;font-size:18px;color:#8e9ca3;}
#container .colgroup-02 .col-02 .buy ul li .title .like{color:#ffe400}
#container .colgroup-02 .col-02 .buy ul li .title .follower{color:#06ede0}
#container .colgroup-02 .col-02 .buy ul li .title .user{color:#fba1f4}
#container .colgroup-02 .col-02 .buy ul li .text{display:block;font-size:15px;color:#fff;letter-spacing:-0.3px;text-align:center}
#container .colgroup-02 .col-02 .buy ul li .cancel{display:inline-block;padding-left:30px;font-size:15px;color:#fff}
#container .colgroup-02 .col-02 .buy ul li .total{padding-right:25px;font-size:15px;color:#fff}
#container .colgroup-02 .col-02 .buy .buy-check{display:none;overflow:hidden;margin:25px 0 15px;}
#container .colgroup-02 .col-02 .buy .buy-check p{text-align:center;padding:5px 10px 15px;color:#fff;}
#container .colgroup-02 .col-02 .buy .buy-check ul{overflow:hidden}
#container .colgroup-02 .col-02 .buy .buy-check ul li{float:left;width:50%;padding:0;border-bottom:0;}
#container .colgroup-02 .col-02 .buy .buy-check ul li.right{float:right}
#container .colgroup-02 .col-02 .buy .buy-check .btn{float:left;margin-bottom:10px;width:95%;padding:20px 0;border-radius:3px;font-size:16px}
#container .colgroup-02 .col-02 .buy .buy-check .price{background:#f9c851;color:#36404e}
#container .colgroup-02 .col-02 .buy .buy-check .reset{background:#ddd;color:#36404e}
#container .colgroup-02 .col-02 .buy .buy-check .check{background:#188ae2;color:#fff}
#container .colgroup-02 .col-02 .buy .buy-btn{margin-top:50px}
#container .colgroup-02 .col-02 .buy .buy-btn a{display:block;width:100%;margin-bottom:20px;padding:15px 0;border-radius:3px;color:#fff;font-size:20px;font-weight:500;text-align:center}
#container .colgroup-02 .col-02 .buy .buy-btn .icon{padding-right:10px;font-size:25px}
#container .colgroup-02 .col-02 .buy .buy-btn .bank{background:#188ae2}
#container .colgroup-02 .col-02 .buy .buy-btn .card{background:#6b5fb5}
#container .colgroup-02 .col-02 .buy .buy-btn .total{display:block;font-size:48px;font-weight:700;color:#f0ff00;letter-spacing:-0.5px;text-align:center}
#container .colgroup-02 .col-02 .buy .buy-btn .vat{display:block;font-size:16px;color:#b3b4b7;text-align:center}

/* 본문*/

/* 버튼 button */
.btn-both{overflow:hidden;text-align:center;margin:10px auto}
.btn-both .fl{float:left}
.btn-both .fr{float:right}
.btn{display:inline-block;border:0;cursor:pointer;text-align:center;white-space:nowrap;}
.btn.btn-default{padding:8px 30px;border:1px solid #e3e3e3;border-radius:3px;}
.btn.btn-list{background:#6f6f6f;color:#fff;border:0;padding:8px 15px;margin:5px 0 0;font-size:12px;border-radius:3px}
.btn.btn-primary{background:#188ae2;color:#fff;border:0;}
.btn.btn-confirm{background:#3ac9d6;color:#fff;font-size:18px;}
.btn.btn-back{padding:8px 30px;background:#36404e;border:1px solid #36404e;border-radius:3px;color:#fff;}
.btn.btn-pw{padding:0 15px;height:36px;line-height:36px;border-top-right-radius:3px;border-bottom-right-radius:3px}
.btn.btn-join{padding:8px 20px;}
.btn.btn-join .icon{display:inline-block;padding-right:5px}
.btn.btn-confirm.btn-login{width:100%;padding:7px 0;border-radius:3px;font-size:18px;}
.btn.btn-top{bottom:inherit;top:31px}
/* 버튼 button */

/* 탭 */
.tab-title{overflow:hidden;margin-bottom:40px;}
.tab-title li{float:left;width:49.5%;text-align:center}
.tab-title li a, .tab-title li span{display:block;padding:10px 0;background:#f3f3f3;border-radius:5px;font-size:17px;font-weight:600;color:#6f6f6f;letter-spacing:-0.3px}
.tab-title .active a, .tab-title .active span{background:#3ac9d6;color:#fff}
.tab-title li:last-child{float:left;}
.tab-cont{}

.tab-btn{overflow:hidden;margin-bottom:20px}
.tab-btn li{float:left;}
.tab-btn li a{display:inline-block;margin-right:10px;padding:10px 20px;border:1px solid #0070c0;border-radius:5px;color:#0070c0;text-align:center;width:90px}
.tab-btn li .icon{margin-right:10px}
.tab-btn li.foreign a{background:#3ac9d6;color:#fff;border-color:#3ac9d6}
.tab-btn li.active a{background:#0070c0;color:#fff}
.tab-btn li.search{float:right}
.tab-btn li.search .i_text{padding:7px;background:#fff;border-radius:5px;color:#6f6f6f;letter-spacing:-1px;outline:none;border:1px solid #ddd}
.tab-btn li.search .btn-submit{display:inline-block;background:#00b0f0;padding:7px 14px;border-radius:5px;border:1px solid #00b0f0;color:#fff}
/* 탭 */

/* 태그 */
.tag{}
.tag table{width:100%;background:#fff}
.tag th, .tag td{position:relative;padding:5px;}
.tag thead th{border-bottom:2px solid #ddd;color:#3b3e47;font-weight:500}
.tag tbody td{color:#6f6f6f;}
.tag tbody td a{display:block;padding:5px;background:#e6e6e6;border-radius:5px;text-align:center}
.tag tbody td .icon{color:#ff0000;margin-left:5px}
/* 태그 */


/* 테이블 */
.list{}
.list table{width:100%;table-layout:fixed}
.list th, .list td{position:relative;padding:8px 5px;border-bottom:1px solid #ddd}
.list thead th{border-bottom:2px solid #ddd;color:#3b3e47;font-weight:700;font-size:13px}
.list tbody th{vertical-align:middle}
.list tbody td{color:#6f6f6f;text-align:right;font-size:12px}
.list tbody td.up{color:blue}
.list tbody td.down{color:red}
.list tbody td .mobile-only{overflow:hidden;padding:5px}
.list tbody td .mobile-only li{float:left;padding:3px;font-size:.9em}
.list tbody td .mobile-only li .btn-delete{display:inline-block;color:#e46c00;border:0 !important;background:none !important;border:0;font-size:12px;text-align:center;border-radius:5px;letter-spacing:-1px;outline:none}
.list tbody td .comment{;}
.list tbody td .comment .comment-list{;}
.list tbody td .comment .comment-list .comment-reply{padding:12px 5px 12px 50px;border-bottom:1px solid #ddd}
.list tbody td .comment .comment-write{margin-top:5px;border:2px solid #ed1c24;background-color:#fff;border-radius:5px 5px 5px 0;padding:7px}
.list tbody td .comment .comment-write textarea{width:100%;min-height:50px;float:none;resize:none;border:none;box-shadow:none;font-size:12px;outline:none}
.list tbody td .comment .comment-write .btn-submit{font-size:12px;font-weight:500;color:#fff;letter-spacing:-1px;text-align:center;background:#ed1c24;padding:5px 10px;border-radius:5px 5px 5px 0}
.list tbody td.url {}
.list tbody td.url .icon{padding:0 0 0 10px;font-size:17px;color:#5c6a7a}
.list tbody td.url.id-none a {color:#ff0000;}
.list tbody td.url.id-none .icon{color:#d5d9dc;}
.list tbody td.check{font-size:16px;color:#6f6f6f;}
.list tbody td.check .ok{color:#00b0f0}
.list tbody td.end{color:#bbb}
.list tbody td.state{color:#00b050}
.list tbody td.state .stay{color:#000}
.list tbody td .i_check,
.list tbody td .i_radio{width:13px;height:13px;margin:2px 5px 2px 0;padding:0;vertical-align:middle}
.list tbody td .i_text{width:96%;padding:0 15px;height:26px;background:#ffffcc;border:1px solid #e3e3e3;border-radius:3px;line-height:26px}
.list tbody td .i_textarea{width:96%;padding:0 15px;background:#ffffcc;border:1px solid #e3e3e3;border-radius:3px}
.list tbody td .delete{color:#e46c00;font-weight:500}
.list tbody td .setting{color:#00b0f0;text-decoration:underline}
.list tbody td .auto{position:absolute;top:12px;left:10px;}
.list tbody td .ing{display:inline-block;width:60px;height:22px;line-height:22px;background:#00b0f0;color:#fff;border-radius:3px;border:0;text-align:center;}
.list tbody td .finish{display:inline-block;width:60px;height:22px;line-height:22px;background:#bfbfbf;color:#fff;border-radius:3px;}
.list tbody td .stay{display:inline-block;width:60px;height:22px;line-height:22px;background:#fff;color:#404040;border-radius:3px;}
.list tbody td .warning{color:#ff0000}
.list .paging{width:100%;background:#eee;padding:6px 0;text-align:center;}
.list .paging span{display:inline-block;padding:2px 4px}
.list .paging span a{color:#6f6f6f;}
.list .paging .num{}
.list .paging .btn{}
.list .paging .active a{font-weight:500;color:#000}

.info{}
.info table{width:100%;border:0;border-collapse:collapse;border-color:#ddd;table-layout:fixed;}
.info th, .info td{padding:10px 20px;color:#6f6f6f;font-weight:400}
.info tbody th{padding:10px}
.info tbody th:nth-child(1){border-le1ft:1px solid #ddd}
.info tbody td{}
.info tbody td.item{padding:0 10px;font-size:20px;border:0;color:#fff}
.info tbody td.item .item-price{padding:45px 20px;background:#33cccc;border-radius:100%}
.info tbody td.null{padding:5px;border:0}
.info tbody td.null .sam{display:inline-block;padding:2px;background:#33cccc;color:#fff;font-size:13px;}
.info tbody td.vs{padding:25px 0;font-size:20px;color:#00b050}
.info .pick{color:#00b050;}
.info .bg_pick{background:#eff9f4;font-weight:500}

.charge{}
.charge .title{padding-bottom:10px;font-size:15px;font-weight:500}
.charge table{width:100%;margin:0 auto 30px;border-collapse: collapse;}
.charge th, .charge td{padding:15px 0;border:1px solid #ddd;text-align:center}
.charge thead th{background:#558ed5;color:#fff;font-weight:500;font-size:15px}
/* 테이블 */

/* Modal Window */
.mw{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:100}
.mw .b1g{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:.8}
.mw .hx{position:relative;text-align:center;}
.mw .fg{position:absolute;top:50%;left:50%;}

#mode-cont{}
#mode-cont .hx{padding:22px 0;font-size:18px;color:#fff;font-weight:400}
#mode-cont .hx .icon{display:inline-block;padding-right:15px;color:#98a6ad;font-size:34px;font-weight:400;vertical-align:middle}
#mode-cont .hx .yellow{color:#ffe400;font-weight:400}
#mode-cont .hx .blue{color:#00fff0;}
#mode-cont .fg{width:600px;margin:-300px 0 0 -300px;background:#36404e}
#mode-cont .tx{background:#36404e}
#mode-cont .tx .cont{margin:0 20px;padding:20px;background:#fff;border:1px solid #f3f3f3;border-radius:8px}
#mode-cont .tx .cont .feed{position:relative}
#mode-cont .tx .cont .feed .feed-cont{padding:10px;border-top:1px solid #dadada;}
#mode-cont .tx .cont .feed .feed-cont .id{display:inline-block;padding-left:10px;font-size:12px}
#mode-cont .tx .cont .feed .feed-cont .icon{padding:4px 12px;font-size:15px;border:2px solid #00b050;border-radius:5px;vertical-align:middle}
#mode-cont .tx .cont .feed .image{}
#mode-cont .tx .cont .feed .tool{position:absolute;top:30%;right:5%;background:#fff;border:2px solid #00b050;border-radius:5px;}
#mode-cont .tx .cont .feed .tool ul{}
#mode-cont .tx .cont .feed .tool ul li{padding:7px 30px 7px 15px;border-bottom:1px solid #ddd;font-size:13px;color:#6f6f6f}
#mode-cont .tx .cont .feed .tool ul li.url{font-weight:500;color:#00b050}
#mode-cont .tx .cont .feed .tool ul li:last-child{border:0}
#mode-cont .tx .cont .feed .profile{position:relative}
#mode-cont .tx .cont .feed .profile .name{position:absolute;bottom:84px;left:80px;padding:5px 50px 5px 10px;background:#fff;border:2px solid #00b050;border-radius:5px;font-size:13px;color:#00b050;font-weight:500}
#mode-cont .tx .cont .step{margin:50px 0 0 27px;padding:6px 30px;background:#188ae2;border-radius:5px;font-size:13px;color:#fff;text-align:center}
#mode-cont .tx .cont .step ul {}
#mode-cont .tx .cont .step ul li{position:relative;margin-bottom:18px;padding:6px 30px;background:#188ae2;border-radius:5px;font-size:13px;color:#fff;text-align:center}
#mode-cont .tx .cont .step ul li .num{position:absolute;top:2px;left:-10px;width:23px;height:23px;background:#fff;border:2px solid #188ae2;border-radius:100%;color:#000;line-height:23px;}
#mode-cont .tx .cont .step ul li:last-child{margin-bottom:0}
#mode-cont .tx .close{padding:15px 0 11px;text-align:center}
#mode-cont .tx .close .btn-close{font-size:16px;font-weight:400;color:#fff}

#check-cont{}
#check-cont .fg{width:500px;margin:-100px 0 0 -250px;}
#check-cont .tx{padding:20px;background:#fff;border:2px solid #000}
#check-cont .tx .title{padding-bottom:15px;font-size:16px;font-weight:500}
#check-cont .tx .cont{padding-bottom:30px}
#check-cont .tx .cont p{}
#check-cont .tx .buy{font-size:17px;text-align:center}
#check-cont .tx .btn.btn-back{background:#00b0f0;border:1px solid #00b0f0}

#check-cont-02{}
#check-cont-02 .fg{width:500px;margin:-100px 0 0 -250px;}
#check-cont-02 .tx{padding:20px;background:#fff;border:2px solid #000}
#check-cont-02 .tx .title{padding-bottom:15px;font-size:16px;font-weight:500}
#check-cont-02 .tx .cont{padding-bottom:30px}
#check-cont-02 .tx .cont p{}
#check-cont-02 .tx .buy{font-size:17px;text-align:center}
#check-cont-02 .tx .btn.btn-back{background:#00b0f0;border:1px solid #00b0f0}

@media (min-width:768px) and (max-width:1024px){ 
	/* 태블릿 - 넷북 */
	#nav{width:100px}
	#nav ul li .icon{font-size:20px}
	#nav ul li .title{display:none}
	#nav ul li .num{display:none}

	#container{;}
	#container .colgroup-02 .col-01{float:none;width:inherit;margin:0 0 20px;}
	#container .colgroup-02 .col-01 .start, #container .colgroup-02 .col-01 .list{margin-right:0}
	#container .colgroup-02 .col-01 .info .cont{padding:20px 10px}
	#container .colgroup-02 .col-01 .info .promise .feed{}
	#container .colgroup-02 .col-01 .info .promise .feed img{max-width:100%}
	#container .colgroup-02 .col-01 .info .promise .feed .profile .name{bottom:31%;left:25%;}
	#container .colgroup-02 .col-01 .info .promise .step{width:40%;margin:30px 0 0 20px}
	#container .colgroup-02 .col-01 .info .promise .step ul li{}
	#container .colgroup-02 .col-02{float:inherit;width:100%;}
		
	.info th, .info td{padding:5px;border-bottom:1px solid #ddd;border-right:1px solid #ddd;color:#6f6f6f;font-weight:400}
	.info tbody th{padding:5px}
	.info tbody td.null{padding:1px}
	.info tbody td.item{padding:1px}
	.info tbody td.item .item-price{padding:22px 5px;font-size:16px}
	
	#mode-cont .fg{top:30%;left:15%;margin:0 auto;background:#36404e}
	#check-cont .fg{top:30%;left:25%;margin:0 auto;background:#fff}
}

@media (max-width:767px){
	/* 모바일 */
	#login{width:90%;margin:50px auto 0}
	#login .title{padding:0 15px;line-height:normal}
	#login .title .big{padding-top:3px}
	#login .title .name{display:block;float:none;padding:0;font-size:12px}
	#login .box-login table{width:100%;margin:0 auto;padding:25px 0}
	#login .box-login .i_text{width:90%}
	
	#nav{display:none}
	
	#container{;}
	#container .tnb {overflow:hidden}
	#container .tnb .my{display:none}
	#container .tnb .mobile{overflow:hidden;display:block;background:#36404e}
	#container .tnb .mobile .logo{padding:0 10px;background:#36404e;height:inherit;line-height:normal}
	#container .tnb .mobile .icon{display:inline-block;color:#98a6ad;font-size:20px;font-weight:400;margin:10px 0}
	#container .tnb .mobile .big{display:inline-block;margin:10px 0;font-size:17px;font-weight:300;color:#fff;letter-spacing:-1px;line-height:30px;}
	#container .tnb .mobile .big .yellow{color:#ffe400;font-size:24px;font-weight:400}
	#container .tnb .mobile .big .blue{color:#00fff0;font-size:24px;font-weight:400}
	#container .tnb .mobile .big .pink{color:#fba1f4;font-size:24px;font-weight:400}
	#container .tnb .mobile .small{font-size:13px;font-weight:500;color:#fff}
	#container .tnb .name {display:block;font-size:11px;padding-left:2px }
	#container .tnb .mobile .menu{background:#fff;padding:0 30px;font-size:20px;cursor:pointer;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}
	#container .tnb .mobile .menu:hover,
	#container .tnb .mobile .menu.on{color:#188ae2}
	#container .tnb .my-menu{display:none;position:absolute;top:50px;right:0;width:30%;background:#fff;z-index:100}
	#container .tnb .my-menu ul{}
	#container .tnb .my-menu ul li{padding:10px 15px;line-height:100%;border-bottom:1px solid #ddd}
	#container .tnb .my-menu ul li a{font-size:0.8rem}
	#container .tnb .my-menu ul li .fa{padding-right:5px}
	#container .tnb .my-menu ul li a:hover{color:#188ae2}
	#container .mobile-menu{display:block;width:100%;background:#36404e;z-index:100}
	#container .mobile-menu ul{overflow:hidden;border-top:1px solid #545c68;}
	#container .mobile-menu ul li{float:left;width:25%;text-align:center}
	#container .mobile-menu ul li a{display:block;padding:10px 0;border-right:1px solid #545c68;}
	#container .mobile-menu ul li .icon{color:#98a6ad;font-size:22px;font-weight:400}
	#container .mobile-menu ul li .title{display:block;font-size:13px;font-weight:500;color:#fff;line-height:18px}
	#container .mobile-menu ul li .num{font-size:13px;color:#fff}
	#container .mobile-menu ul li:last-child{border-right:0}
	#container .mobile-menu .like .num{color:#ffe400}
	#container .mobile-menu .follower .num{color:#06ede0}
	#container .mobile-menu .user .num{color:#fba1f4}	
	#container .mobile-menu ul li:hover, 
	#container .mobile-menu ul li.active{background:#188ae2}
	#container .mobile-menu ul li:hover .icon,
	#container .mobile-menu ul li.active .icon{color:#fff}
	
	#container .path{font-size:12px}
	#container .content{padding:20px 10px}
	#container .colgroup-01.explain .icon{position:absolute;top:10px;right:10px;font-size:40px;padding:0;}
	#container .colgroup-01.explain .cont .icon.fa-history,
	#container .colgroup-01.explain .cont .icon.fa-users{display:none}
	#container .colgroup-01.explain .cont .box .time{font-size:15px;letter-spacing:-0.5px}
	#container .colgroup-01.explain .cont .box .time .icon{position:relative;top:inherit;right:inherit;}
	#container .colgroup-01.explain .cont .box p{font-size:12px}
	#container .colgroup-01.explain .cont .box td{padding:2px 10px;font-size:12px}
	#container .colgroup-02 .col-01{float:inherit;width:inherit;margin:0 0 20px;padding:10px}
	#container .colgroup-02 .col-01 .btn.btn-submit{display:inline-block;width:inherit;padding:8px 15px;margin:5px 0 0;font-size:12px;border-radius:3px;}
	#container .colgroup-02 .col-01 .start, #container .colgroup-02 .col-01 .list, #container .colgroup-02 .col-01 .info{margin-right:0}
	#container .colgroup-02 .col-01 .info .cont{display:none;padding:20px 5px}
	#container .colgroup-02 .col-01 .start .cont label{width:38%;font-size:12px}
	#container .colgroup-02 .col-01 .start .cont label .icon{padding:0;font-size:15px}
	#container .colgroup-02 .col-01 .start .cont .i_text{width:96%;padding:0 5px;font-size:12px;}
	#container .colgroup-02 .col-01 .start .cont .i_select{width:25%;padding:0 5px;font-size:12px}
	#container .colgroup-02 .col-01 .start .cont .btn-start{width:inherit;padding:8px 10px}
	#container .colgroup-02 .col-01 .start .time label{display:block}
	#container .colgroup-02 .col-01 .start .url .icon{font-size:14px;padding-right:3px}
	#container .colgroup-02 .col-01 .start .url span{font-size:12px}
	#container .colgroup-02 .col-01 .start.chart .tab-cont{margin-bottom:20px;}
	#container .colgroup-02 .col-01 .start.chart .tab-cont #chart-visit{height:200px;}
	#container .colgroup-02 .col-01 .start.chart .tab-cont #chart-browser{height:200px;}
	#container .colgroup-02 .col-01 .set{margin-bottom:0}
	#container .colgroup-02 .col-01 .set .cont {overflow:hidden}
	#container .colgroup-02 .col-01 .set .cont .i_text{width:95%;padding:0 5px;font-size:12px;}
	#container .colgroup-02 .col-01 .set .cont .btn-start{display:inline-block;width:inherit;padding:8px 15px;margin:5px 0 0;float:right;font-size:12px}
	#container .colgroup-02 .col-01 .list .comment{font-size:11px}
	#container .colgroup-02 .col-01 .info .text{font-size:13px}
	#container .colgroup-02 .col-01 .info .cont table{display:none}
	#container .colgroup-02 .col-01 .info .cont .charge_info{display:block}
	#container .colgroup-02 .col-01 .info .cont .charge_info img{max-width:100%}
	#container .colgroup-02 .col-01 .info p{font-size:12px}
	#container .colgroup-02 .col-01 .info .promise .feed{width:100%;text-align:center}
	#container .colgroup-02 .col-01 .info .promise .feed img{max-width:100%}
	#container .colgroup-02 .col-01 .info .promise .feed .profile .name{bottom:33%;left:25%;}
	#container .colgroup-02 .col-01 .info .promise .step{margin:10px 0;width:100%;}
	#container .colgroup-02 .col-01 .info .promise .step ul li{width:100%;margin-bottom:5px;padding:6px 0px;}
	#container .colgroup-02 .col-02{float:inherit;width:100%;}
	#container .colgroup-02 .col-02 .board ul li a{font-size:12px}
	#container .colgroup-02 .col-02 .board ul li .date{font-size:12px}
	#container .colgroup-02 .col-02 .code{;}
	#container .colgroup-02 .col-02 .code .my{font-size:12px}
	#container .colgroup-02 .col-02 .share{;}
	#container .colgroup-02 .col-02 .inquiry a{height:70px;line-height:70px;font-size:25px;}
	#container .colgroup-02 .col-02 .buy .subject{padding:3px 0;border:0;font-size:20px;cursor:pointer}
	#container .colgroup-02 .col-02 .buy .cont{display:none}
	#container .colgroup-02 .col-02 .buy ul li{padding:10px 0 5px}
	#container .colgroup-02 .col-02 .buy ul li .type{width:100%;padding:2px}
	#container .colgroup-02 .col-02 .buy .buy-btn{margin-top:10px}
	#container .colgroup-02 .col-02 .buy .buy-btn a{font-size:17px}
	
	
	.tab-title{margin-bottom:20px}
	.tab-title li a, .tab-title li span{font-size:14px}

	.tab-btn{margin-bottom:10px}
	.tab-btn li a{margin-right:5px;padding:5px 10px;border:1px solid #3ac9d6;border-radius:5px;color:#6f6f6f;font-size:13px}
	.tab-btn li .icon{margin-right:5px}
	.tab-btn li:last-child a{margin:0}
	
	.tag th, .tag td{padding:1px}
	.tag tbody td a{padding:2px;font-size:12px}
	.tag tbody td .icon{margin-left:2px}
	
	.list th, .list td{padding:12px 1px;font-size:11px;letter-spacing:-0.5px}
	.list tbody td .auto{position:relative;top:inherit;left:inherit}
	.list tbody td.url .info{}
	.list tbody td.url a{display:inline-block;width:89%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden }
	.list tbody td .ing,
	.list tbody td .stay,
	.list tbody td .finish{width:inherit;padding:0 5px;height:inherit;line-height:normal}
	.list tbody td.url .icon{padding:0;display:none;}
	.list .tbl-consult th:nth-child(6), .list .tbl-consult td:nth-child(6){display:none}
	
	.info th, .info td{padding:10px 1px;border-bottom:1px solid #ddd;border-right:1px solid #ddd;color:#6f6f6f;font-size:11px;font-weight:400}
	.info tbody th{padding:10px 0px}
	.info tbody td.item{padding:0px;font-size:12px}
	.info tbody td.item .item-price{width:33px;padding:3px 2px;display:block}
	.info tbody td.null{padding:1px}
	.info tbody td.null .sam{padding:2px 1px;font-size:10px}
	
	#mode-cont .fg{top:10%;left:inherit;width:100%;margin:0 auto;background:transparent}
	#mode-cont .hx{padding:15px 0;margin: 0 10px;background: #36404e;border: 1px solid #fff;border-bottom: 0}
	#mode-cont .tx{margin:0 10px;border:1px solid #fff;border-top:0}
	#mode-cont .tx .cont{padding:15px 20px}
	#mode-cont .tx .cont .feed .profile img{max-width:100%}
	#mode-cont .tx .cont .feed .profile .name{bottom:32%;padding:3px 30px 3px 10px}
	#mode-cont .tx .cont .feed .image img{max-width:100%}
	#mode-cont .tx .cont .step{width:100%;padding:10px 0;margin:20px 0 0}
	#mode-cont .tx .cont .step ul {}
	#mode-cont .tx .cont .step ul li{margin-bottom:10px;}

	#check-cont .fg{top:15%;left:inherit;width:100%;margin:0 auto}
	#check-cont .tx{margin:0 10px;padding:10px;}
	#check-cont .tx .cont{padding-bottom:20px}
	#check-cont .tx .cont p{font-size:12px;}
	#check-cont .tx .buy{font-size:15px;}
	#check-cont .tx .btn.btn-back{font-size:12px}
	
	#check-cont-02 .fg{top:15%;left:inherit;width:100%;margin:0 auto}
	#check-cont-02 .tx{margin:0 10px;padding:10px;}
	#check-cont-02 .tx .cont{padding-bottom:20px}
	#check-cont-02 .tx .cont p{font-size:12px;}
	#check-cont-02 .tx .buy{font-size:15px;}
	#check-cont-02 .tx .btn.btn-back{font-size:12px}
}

/********** status css **********/
.d-flex{
    display: flex;
}
.w-33{
    width: 33.33%;
}
.w-20{
    width: 20%;
}
.w-10{
    width: 10%;
}
.w-40{
    width: 40%;
}
.w-50{
    width: 50%;
}
.w-60{
    width: 60%;
}
.w-70{
    width: 70%;
}
.w-80{
    width: 80%;
}
.w-90{
    width: 90%;
}
.w-100{
    width: 100%;
}
/* 마진 */
.mt-5{
    margin-top: 5px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.mt-20{
    margin-top: 20px;
}
.mt-25{
    margin-top: 25px;
}
.mt-30{
    margin-top: 30px;
}
.mb-5{
    margin-bottom: 5px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-15{
    margin-bottom: 15px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-30{
    margin-bottom: 30px;
}
/* 패딩 */
.pt-5{
    padding-top: 5px;
}
.pt-10{
    padding-top: 10px;
}
.pt-15{
    padding-top: 15px;
}
.pt-20{
    padding-top: 20px;
}
.pt-25{
    padding-top: 25px;
}
.pt-30{
    padding-top: 30px;
}
.pb-5{
    padding-bottom: 5px;
}
.pb-10{
    padding-bottom: 10px;
}
.pb-15{
    padding-bottom: 15px;
}
.pb-20{
    padding-bottom: 20px;
}
.pb-25{
    padding-bottom: 25px;
}
.pb-30{
    padding-bottom: 30px;
}
.text-center{
    text-align: center;
}

@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.reservation-wrap {
    font-family: 'yg-jalnan', sans-serif;
    background: #f3eac1;
    padding: 50px 0 50px;
    overflow: hidden;
    width: 100%;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
	line-height: 1;
}
.reservation-inner {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 36px 100px 20px;
    position: relative;
}
.reservation-wrap .tit {
    font-size: 32px;
    color: #403C3B;
    margin-bottom: 30px;
	line-height: 120%;
}
.reservation-wrap .reservation-content {
    position: relative;    
    z-index: 3;
    margin-bottom: 50px;
}
.reservation-wrap .reservation-content-inner {
    position: relative;
    background: #9bd3ba;
    border: 5px solid #ec514c;
    border-radius: 20px;
    z-index: 4;
    padding-bottom: 30px;
}
.reservation-wrap .reservation-content .box {
    content: '';
    display: block;
    width: 95%;
    height: 99%;
    background: #9bd3ba;
    border: 5px solid #ec514c;
    border-radius: 20px;
    position: absolute;
    right: -15px;
    top: 8px;
    z-index: -1;
}
.reservation-wrap .icon-area {
    padding: 10px;
    justify-content: flex-end;
    border-bottom: 5px solid #ec514c;
}
.reservation-wrap .icon-area li {
    margin-right: 10px;
}
.reservation-wrap .icon-area li:last-of-type {
    margin-right: 0;
}
.reservation-wrap .icon-area li img {
    width: 30px;
}
.reservation-wrap .dashed-box {
    justify-content: center;
    margin: 25px 0;
}
.reservation-wrap .dashed-box li {
    width: 5px;
    height: 5px;
    background: #ec514c;
    margin-right: 5px;
}
.reservation-wrap .dashed-box li:last-of-type {
    margin-right: 0;
}
.reservation-wrap .reservation-list {
    width: 83%;
    margin: 0 auto;
    padding-bottom: 30px;
}
.reservation-wrap .reservation-list li {
    margin-bottom: 15px;
    font-size: 20px;
    color: #03A678;
}
.reservation-wrap .reservation-list li a{color:#403C3B;}
.reservation-wrap .reservation-list li:last-of-type {
    margin-bottom: 0;
}
.reservation-wrap .attention {
    color: #403C3B;
    padding: 0 20px;
}
.reservation-wrap .attention dt {
    font-size: 24px;
    margin-bottom: 20px;
}
.reservation-wrap .attention dd {
    font-size: 15px;
    margin-bottom: 10px;
    line-height: 1.4em;
}
.reservation-wrap .attention dd:last-of-type {
    margin-bottom: 0;
}
.reservation-wrap .logo-img {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: block;
    width: 100px;
    margin: 0 auto;
}
@media (max-width:320px) {
    .reservation-wrap .attention dd {
        letter-spacing: -1px;
    }
}
/********** status css **********/