@charset "utf-8";

@import url("common.css");

/* index */
#inwrap { position:relative; width:100%; height:100%; background:url(../images/main/back.png) no-repeat; background-size:100%;}
#incontainer {width:70%; margin:0 auto;}

#incontainer .loginbox { padding-top:65%;}
#incontainer .loginbox li { margin:1% 0;}
#incontainer .loginbox .id {height:45px; background:url(../images/main/id_back.png) no-repeat; background-size:cover;}
#incontainer .loginbox .pw {height:45px; background:url(../images/main/pw_back.png) no-repeat; background-size:cover;}
#incontainer .loginbox .inputbox { height:100%; width:100%; padding-left:20%; color:#FFF; font-size:20px; box-sizing:border-box; background:transparent; border:0;}
#incontainer .loginbox li a { width:100%;}
#incontainer .loginbox img { width:100%; margin-top:1%;}
#incontainer .loginbox .idcheck { text-align:right;}
#incontainer .loginbox .idcheck .checkbox { width:15px; height:15px;}
#incontainer .loginbox .idcheck img { width:30%; vertical-align:middle;}

#incontainer .joinbox { margin:10% 0 15% 0;}
#incontainer .joinbox a { width:100%;}
#incontainer .joinbox img { width:100%;}

#infooter { margin:0 auto; width:97%;}
#infooter img { width:100%;}

/* sub */
#wrap { position:relative; background:#0f73e5;}

#header  {position:relative; height:55px;}
#header > h1 { display:block; padding-top:5%; text-align:center; color:#FFF; font-size:20px; font-weight:bold;}
#header .pre { position:absolute; left:10px; top:13px; width:35px;}
#header .pre img { width:100%;}

/* gnb */
#header .mMenu{position:absolute;display:block;top:0;right:0;width:100%;}
#header .mMenu .btnMenuToggle{position:absolute;top:15px;right:10px;width:35px;height:28px;z-index:100;background:url('../images/sub/ico_gnb.png') center center no-repeat;background-size:100%;-moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;transition: 0.5s;}
#header .mMenu .btnMenuClose{position:absolute;top:15px;right:10px;width:35px;height:28px;z-index:100;background:url('../images/sub/ico_close.png') center center no-repeat;background-size:100%;display:none;}
#header .mMenu .mMenuSide{position:absolute; z-index:200;background:#273890;margin-top:55px;width:60%;height:100%;opacity:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#header .mMenu .mMenuSide .mDepth01{display:block;font-size:16px;color:#fff;background:url('../images/sub/icon_side_off.png') 90% center no-repeat;height:45px;line-height:45px;padding:0 0 0 20px;border-bottom:1px solid #5260a6;-moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;transition: 0.5s;}
#header .mMenu .mMenuSide .mDepth01:hover{color:#7ecef4;}
#header .mMenu .mMenuSide > ul {background:#273890;z-index:200;position:relative;}
#header .mMenu .mMenuSide > ul > li.active{background:#265daa;} 
#header .mMenu .mMenuSide > ul > li.active .mDepth01{background:url('../images/sub/icon_side_on.png') 90% center no-repeat;color:#7ecef4;} 
#header .mMenu .mMenuSide .sub-menu {background:#2494d0;padding:10px 0;}
#header .mMenu .mMenuSide .sub-menu li a{display:block;padding:10px 0;font-size:14px;color:#fff;padding-left:15px;}
#header .mMenu .mMenuSide > ul > li > ul > li{margin:0 20px;border-top:1px solid #7cbfe3;}
#header .mMenu .mMenuSide > ul > li > ul > li > a{background:url('../images/sub/icon_sideSub_off.png') 3px center no-repeat;}
#header .mMenu .mMenuSide > ul > li > ul > li.active > a{font-weight:bold;}
#header .mMenu .mMenuSide > ul > li > ul > li:first-child{border-top:0;}
#header .mMenu .mMenuSide > ul > li > ul a:hover{color:#7ecef4;}
#header .mMenu .mMenuSide .memberinfo { font-size:12px; color:#FFF; padding:10% 0 10% 5%; border-bottom:1px solid #5260a6;}
#header .mMenu .mMenuSide .memberinfo > p { margin-bottom:3%; text-align:center;}
#header .mMenu .mMenuSide .memberinfo > a { color:#FFF; padding:3% 10%; background:#00004f; text-align:center; border-radius:20px;}

#container { background:#FFF; width:95%; margin:0 auto; padding:3%; box-sizing:border-box;}
#contents { background:#FFF; width:95%; margin:0 auto; box-sizing:border-box;}

/* join */
#container h2 img { width:100%;}
#container .agreebox { margin:3% 0;}
#container .agreebox h3 { font-size:14px; color:#000; font-weight:bold;}
#container .agreebox .textbox { width:95%; margin-top:2%; border:1px solid #ccc; height:100px; padding:2%; font-size:13px; line-height:140%; overflow-x:hidden;overflow-y:auto;}
#container .agreebox .textbox1 { width:95%; margin-top:2%; border:1px solid #ccc; height:160px; padding:2%; font-size:13px; line-height:140%; overflow-x:hidden;overflow-y:auto;}
#container .agreebox .agreetitle {font-weight:700; margin-bottom:2%;}
#container .agreebox .agreecon {margin-bottom:2%;}
#container .agreebox .checkag { text-align:right; font-size:14px;}
#container .agreebox .checkag1 { clear:both; text-align:right; font-size:14px; padding:2% 0 5% 0;}
#container .inputdl { position:relative; padding:2% 0; font-size:13px; letter-spacing:-1px; margin-bottom:4%; overflow:hidden;}
#container .inputdl dt { float:left; width:25%; height:45px; line-height:45px; box-sizing:border-box; border-bottom:#CCC solid 1px;}
#container .inputdl dd { float:left; width:75%; height:45px; line-height:45px; box-sizing:border-box; border-bottom:#CCC solid 1px;}
#container .inputdl dd input { line-height:25px; margin-top:1%; border:#CCC solid 1px;}
#container .inputdl .btncheck { display:inline-block; background:#999; line-height:30px; padding:0 5%; text-align:center;}
#container .inputdl .btncheck a {color:#FFF;}

#container .inputdlid { position:relative; padding:2% 0; font-size:13px; letter-spacing:-1px; margin-bottom:10%; overflow:hidden;}
#container .inputdlid dt { float:left; width:17%; line-height:45px; box-sizing:border-box; border-bottom:#CCC solid 1px;}
#container .inputdlid dd { float:left; width:83%; line-height:45px; box-sizing:border-box; border-bottom:#CCC solid 1px;}
#container .inputdlid dd input { line-height:25px; border:#CCC solid 1px;}
#container .idpwment {background:#e7eef8; text-align:center; padding:4%;font-size:13px; letter-spacing:-0.5px; margin-bottom:4%; border:#CCC solid 1px; overflow:hidden;}

#container .pay { overflow:hidden; margin-bottom:8%;}
#container .pay li { padding:8% 5%; margin-bottom:2%; font-weight:bold; color:#FFF; background:#0f73e5;}
#container .icost { width:100%; vertical-align:middle;}
#container .greybox { padding:5%; background:#efefef; font-size:12px; border:#CCC solid 1px;}

/* order */
#contents .search { position:relative; background:#e7eef8; padding:2%;font-size:13px; letter-spacing:-1px; margin-bottom:4%; border-bottom:#CCC solid 1px; overflow:hidden;}
#contents .search dl { margin-bottom:5%; overflow:hidden;}
#contents .search dt {float:left; width:20%; line-height:40px; box-sizing:border-box; border-bottom:#CCC solid 1px; font-weight:bold;}
#contents .search dd {float:left; width:80%; line-height:40px; box-sizing:border-box; border-bottom:#CCC solid 1px;}
#contents .search dd input { line-height:25px; border:#CCC solid 1px;}
#contents .search .icodate {}
#contents .search .icodate img { width:14.5%; vertical-align:middle;}
#contents .btnsearch a { width:100%;}
#contents .btnsearch img { width:100%;}
#contents .boardbox { padding:2%;}
#contents .boardbox .icost { width:100%; vertical-align:middle;}
#contents .boardbox h4 { font-weight:bold; font-size:15px; margin:4% 0; background:url(../images/sub/bullet.png) left 2px no-repeat; background-size:14px; padding-left:18px;}
#contents .boardbox h5 { font-weight:bold; font-size:15px; margin:4% 0; background:url(../images/sub/bullet.png) left 9px no-repeat; background-size:14px; padding-left:18px;}
#contents .boardbox h5 a { width:38%;}
#contents .boardbox h5 img { width:100%; margin-left:5px; vertical-align:middle;}
#contents .cmtbox { margin-bottom:5%;}
#contents .cmtbox textarea { width:98%;}
#contents .cmtlist { margin-bottom:5%;}
#contents .cmtlist ul { border-top:#ccc solid 1px; border-style:dashed;}
#contents .cmtlist li { font-size:12px; line-height:130%; border-bottom:#ccc solid 1px; border-style:dashed; padding:3% 0 3% 1%;}
#contents .cmtlist .myon { background:#e7eef8; color:#006;}
#contents .cmtlist .cmttxt { color:#888; margin-bottom:5px;}
#contents .odbtnbox { text-align:center;}
#contents .odbtnbox a { width:49%;}
#contents .odbtnbox img { width:100%;}
#contents .icomemo { width:70%; vertical-align:middle;}



/* board */
.tablest {border-top:#273890 solid 2px; margin-bottom:5%;}
.tablest th {border-bottom:#dcdcdc solid 1px; padding:3% 1%; font-size:12px; font-weight:bold; background:#e9ebf4;}
.tablest td {border-bottom:#dcdcdc solid 1px; padding:4% 1%; font-size:12px; text-align:center;}
.tal { text-align:left !important;}

.paging {line-height:0;text-align:center;margin:50px 0;}
.paging span{display:inline-block;font-size:0;line-height:0;margin:0;}
.paging span a{display:inline-block;width:32px;height:32px;line-height:32px;border:1px solid #ddd;text-align:center;}
.paging ul{display:inline-block;vertical-align:top;margin:0 4px;}
.paging li{display:inline-block;vertical-align:top;margin:0 1px;font-size:12px;}
.paging li a{display:inline-block;width:32px;height:32px;line-height:32px;font-size:12px;border:1px solid #ddd;text-align:center;}
.paging li.on a{border:1px solid #7f7f7f;background:#7f7f7f;color:#fff;}

.btnbox { text-align:center;}
.btnbox a { width:49%;}
.btnbox img { width:100%;}

.tablest1 {border-top:#273890 solid 2px; margin-bottom:5%;}
.tablest1 th {border-bottom:#dcdcdc solid 1px; padding:4% 2%; font-size:12px; font-weight:bold; background:#e9ebf4;}
.tablest1 td {border-bottom:#dcdcdc solid 1px; padding:4% 2%; font-size:12px; text-align:left; background:#FFF;}
.tablest1 td img { width:100%;}
.tablest1 td > input { line-height:25px; border:#CCC solid 1px;}

.tablest2 {border-top:#273890 solid 2px; margin-bottom:5%;}
.tablest2 th {border-bottom:#dcdcdc solid 1px; padding:3% 2%; font-size:12px; font-weight:bold; background:#e9ebf4;}
.tablest2 td {border-bottom:#dcdcdc solid 1px; padding:3% 2%; font-size:12px; text-align:left;}

.tablest3 {border-top:#273890 solid 2px; margin-bottom:5%;}
.tablest3 th {border-bottom:#dcdcdc solid 1px; padding:2%; font-size:12px; font-weight:bold; background:#e9ebf4;}
.tablest3 td {border-bottom:#dcdcdc solid 1px; padding:2%; font-size:12px; text-align:left;}
.tablest3 td > input { line-height:25px; border:#CCC solid 1px;}

.bullet { background:url(../images/sub/bullet.png) no-repeat; padding-left:20px;}

/* footer */
#footer { width:98%; padding-top:5%; margin:0 auto;}
#footer img { width:100%;}