style.css 10.5 KB
@charset "utf-8";
@import url(https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css);
@font-face{
	font-family:"sandoll";
	src:url('./font/SanDoll.ttf') format('truetype');
}
*{ margin : 0; padding : 0;}
li{ list-style : none; }
a{ text-decoration : none;}
/*초기화*/
body{width:100%; height:100%; font-family: 'Nanum Barun Gothic', sans-serif;}/*작업하기전에 확인*/
header{font-family: 'sandoll', sans-serif !important;}

.Wrap{min-height:100%;}
.wrapper{position:relative; width:875px; margin:0 auto; min-width:875px; padding:5px 5px; background:#fff;}/*매번 수정해야함*/

.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.f22{font-size:22px;}
.f24{font-size:24px;}
.f28{font-size:28px;}
.f40{font-size:40px;}
.f56{font-size:56px;}

.Cf{color:#fff;}
.Cc{color:#ccc;}
.C0{color:#000;}
.C2{color:#222;}
.C4{color:#444;}
.C7{color:#777;}

.W300{font-weight:300;}
.W400{font-weight:400;}
.W500{font-weight:500;}
.W700{font-weight:700;}
.W900{font-weight:900;}

.roboto{font-family:'Roboto', sans-serif;}
.italic{font-style:italic;}
.active{color:#fff; background:#4a4a4a;}
.under{text-decoration:underline;}
.orange{background:url('/web/inc/images/btn_orange_bg.png') no-repeat center; background-size:100%;}
.long_orange{background:url('/web/inc/images/long_orange_bg.png') no-repeat center; background-size:100%;}
.green{background:url('/web/inc/images/btn_green_bg.png') no-repeat center; background-size:100%;}
.red{background:url('/web/inc/images/red_bg.png') no-repeat center; background-size:100%;}
.navy{background:url('/web/inc/images/navy_bg.png') no-repeat center; background-size:100%;}
.yellow{background:url('/web/inc/images/yellow_bg.png') no-repeat center; background-size:100%;}
.brown{background:url('/web/inc/images/btn_brown_bg.png') no-repeat center; background-size:100%;}
/*공통*/

/*헤더*/
header{width:100%; background:#353535; height:57px;}
header ul{width:100%;}
header ul li{float:left; line-height:57px; width:33.33%; text-align:center;}
header ul li:first-child{text-align:left;}
header ul li:nth-child(2){color:#fff; font-size:2.2em;}
header ul li:last-child{float:right; text-align:right;}
header ul li img{vertical-align:middle; padding:0px 12px;}

/*네비게이션*/
nav{width:100%; background:#e6e7e8; height:43px; font-size:1em; color:#707070;}
nav ul{width:100%;}
nav ul li{width:33.33%; float:left; text-align:center; line-height:43px;}

/*건물명/년도*/
.year{width:100%; height:20px; background:#939393; font-size:0.8em; color:#fff;}
.year ul{width:100%;}
.year ul li{width:50%; float:left; line-height:20px;}
.year ul li:last-child{text-align:right;}
.year ul li a{padding:0px 25px;}
.year ul li:last-child a{padding:0px 45px;}

/*리스트*/
section{width:100%; height:75px; font-size:0.8em;}
section ul{width:100%; border-bottom:1px solid #939393;}
section ul li{width:25%; float:left; overflow:hidden; position:relative;}
section ul li:first-child{text-align:left; font-size:0.95; color:#4a4a4a; line-height:75px;}
section ul li:nth-child(2){width:50%; text-align:center; color:#707070; font-size:0.9em;}
section ul li .date{width:50px; margin-left:25px; text-align:center; background:url('/web/inc/images/btn_data_bg.png') no-repeat center; background-size:100%;}
section ul li .status{width:50px; text-align:center; line-height:75px; color:#fff; margin-left:20%;}
section ul li .price{font-weight:bold; color:#ff0000;}
section .room_info li{width:33.33%; float:left; overflow:hidden; position:relative;}
section .room_info li:nth-child(2){width:33.33%; text-align:center; color:#707070;}
section ul li .room_num{width:80px; margin-left:10%; text-align:center; background:url('/web/inc/images/btn_room_bg.png') no-repeat center; background-size:100%;}
section ul .room_user p{text-align:left; padding:0px 20px;}
section ul .room_user .price{font-weight:normal; color:#707070;}
section .room_info li .status{width:50px; text-align:center; line-height:75px; color:#fff; float:right; margin-right:20%;}
section .room_info li .logn_status{width:75px;}
section .room_info li .rent_list{line-height:32px;}
section .room_info li .rent_list:first-child{margin-top:5px;}

/*납부기한/금액*/
.contant{width:86%; border-bottom:1px solid #707070; margin:0 auto;}
.con1{height:63px;}
.con1 dl{padding:14px 0px; font-size:0.8em; color:#707070;}
.con1 dl dt{margin-bottom:3px;}
.buil_name dl{padding:25px 0px; font-size:0.9em; color:#707070;}
.buil_name dl dt{margin-bottom:0px;}
.bill{height:90px;}
.bill dl{padding:14px 0px; font-size:0.8em; color:#707070;}
.bill dl dd:nth-child(2){margin:7px 0px;}
.con2{padding:10px 0px;}
.con2 ul{padding:0px 15px; font-size:0.85em; color:#707070;}
.con2 ul li{height:22px; width:100%; line-height:22px; margin-bottom:3px;}
.buil_list{padding:15px 0px 10px 0px;}
.buil_list ul li{height:23px; width:100%; line-height:23px; margin-bottom:5px;}
.con2 ul li:last-child{margin-bottom:0px;}
.con2 ul li a:first-child{display:inline-block; width:10px; margin-right:3px;}
.con2 ul li a:last-child{float:right;}
.con2 ul .used{margin-top:14px;}
.con2 ul .used a:first-child{display:inline-block; width:50px; margin-right:3px; text-align:center; background:url('/web/inc/images/btn_usage_bg.png') no-repeat center; background-size:100%; color:#fff; font-size:0.8em;}
.con2 ul .used a:nth-child(2) span{margin-left:29px;}
.con2 ul .rent a:first-child{display:inline-block; width:50px; margin-right:3px; text-align:center; color:#fff; font-size:0.8em;}
.bill2{padding:15px 0px;}
.bill2 ul{padding:0px 15px; font-size:0.82em; color:#707070;}
.bill2 ul li{height:22px; width:100%; line-height:22px; margin-bottom:3px;}
.bill2 ul li span{font-size:0.95em;}
.bill2 ul li:last-child{margin-bottom:0;}
.bill2 ul li a{display:inline-block; width:22%}
.bill2 ul li a:first-child{width:10px; margin-right:3px;}
.bill2 ul li a:nth-child(n+3){text-align:center;}
.bill2 ul li a:last-child{float:right; text-align:right;}

/*계좌*/
.bank{width:86%; margin:0 auto; margin-top:40px; color:#707070; font-size:0.85em;}
.bank div{height:94px; width:90%; margin:0 auto; background:url('/web/inc/images/account_bg.png') no-repeat center; background-size:100%;}
.bank div ul{float:left;}
.bank div .text1{width:25%; height:86px; text-align:center;}
.bank div .text1 li:first-child{margin:23px 0px 17px 0px;}
.bank div .text2{width:74%; height:86px;}
.bank div .text2 li:first-child{margin:23px 0px 17px 14px;}
.bank div .text2 li{margin-left:14px;}

/*비고/특약*/
.note{width:86%; margin:0 auto; margin-top:20px; color:#707070; font-size:0.85em;}
.note div{height:94px; width:90%; margin:0 auto;}
.note div .text1 li:last-child{margin:20px 0px 35px 0px; width:92%; height:85px; border:1px solid #707070; padding:4%;}
.claim_con div{width:100%;}
.claim_con div .text1 li a:first-child{display:inline-block; width:10px; margin-right:3px;}
.claim_con div .text1 li a:last-child{font-weight:bold;}

/*팝업*/
.pop{width:70%; height:175px; color:#707070; background:#fff; margin:0 auto; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}/*background:url('/web/inc/images/bg_pop1.png') no-repeat center top; background-size:100%;*/
.pop .head{width:100%; height:42px; border-bottom:1px solid #707070;}
.pop .head li{line-height:42px; width:33%; text-align:center; float:left;}
.pop .head li:first-child{color:#fff;}
.pop .head .title{font-size:0.98em;}
.pop .con{width:100%; height:115px; overflow-y:scroll;}
.pop .con li{width:85%; margin:0 auto; border-bottom:1px solid #707070; height:40px; line-height:40px; text-align:center;}
.pop2{width:64%; height:260px; background:url('/web/inc/images/bg_pop2.png') no-repeat center top; background-size:100%;}
.pop .con2{width:100%; height:180px; overflow-y:scroll; font-size:0.85em;}
.pop .con2 li{width:85%; margin:0 auto; height:40px;}
.pop3_1{width:70%; height:265px; background:#fff; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.pop3{border:none; width:85%;}
.pop3 ul{font-size:0.9em; color:#707070; border-bottom:1px solid #707070; padding:10px 0;}
.pop3 ul:last-child{border:none;}
.pop3 ul li{height:22px; width:100%; line-height:22px;}
.pop3 ul li:last-child{margin-bottom:0;}
.pop3 ul li a{display:inline-block; width:22%}
.pop3 ul li a:first-child{width:10px; margin-right:3px;}
.pop3 ul li a:nth-child(n+3){text-align:center;}
.pop3 ul li a:last-child{float:right; text-align:right;}
.pop4_1{width:70%; height:345px; background:#fff; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}/*background:url('/web/inc/images/bg_pop4.png') no-repeat center top; background-size:100%;*/
.pop4{padding:8px 0px;}
.pop4 ul{padding:0px 15px; font-size:0.9em; color:#707070;}
.pop4 ul li{height:22px; width:100%; line-height:22px; margin-bottom:3px;}
.pop4 ul li:last-child{margin-bottom:0;}
.pop4 ul li a:first-child{display:inline-block; width:10px; margin-right:3px;}
.pop4 ul li a:last-child{float:right;}
.total{width:85%; margin:0 auto; font-size:0.95em; height:35px; line-height:35px;}
.total div{float:right;}
.room_none_pop_box{width:70%; height:165px; background:#fff; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.room_none_pop{border:none; width:85%;}
.room_none_pop ul{font-size:0.9em; color:#707070; border-bottom:1px solid #707070; padding:10px 0;}
.room_none_pop ul:last-child{border:none;}
.room_none_pop ul li{height:35px; width:100%; line-height:35px;}
.room_none_pop ul li:last-child{margin-bottom:0;}
.room_none_pop ul li a{display:inline-block; width:22%}
.room_none_pop ul li a:first-child{width:10px; margin-right:3px;}
.room_none_pop ul li a:nth-child(n+3){text-align:center;}
.room_none_pop ul li a:last-child{float:right; text-align:right;}



/* popup */
PopArea { top:0; left:0; width:100%; height:100%; position:fixed; z-index:999; background:rgba(0,0,0,0.6) }

.PopST02 a.Btn01 { border-top:1px solid #6e8d95; background:#4a707a }
.PopST02 { margin:0 auto; margin-right:45px; margin-left:45px; background:#464a4e; overflow:hidden }
.PopST02 div.TT { background:#0296bb; height:38px; position:relative }
.PopST02 div.TT a { position:absolute; width:38px; height:38px; background:url(/app/web/inc/img/btn_top_close.png) no-repeat; background-size:38px 38px; font-size:0; top:0; left:0 }
.PopST02 div.TT h3 { margin:0 38px 0 38px; height:38px; line-height:38px; font-size:1.15em; font-weight:500; text-align:center; color:#fff }
.PopST02 ul { width:100% }
.PopST02 li { height:38px; border-bottom:1px solid #343638; text-align:center; color:#fff; font-size:1.0em; font-weight:400; float:left; line-height:38px; width:100% }
.PopST02 li:last-child { border-bottom:0 }


.avail{background: #3DB7CC;}
.navail{background: #FF0000;}