@charset "utf-8";

/*font*/
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&subset=korean');




 


/* reset.css */
body{font-family:'Nanum Gothic'; font-size:13px; line-height:1.6; color:#666; padding:0; margin:0; vertical-align:top; background-color:#f4f4f4; -webkit-text-size-adjust:none; text-align:left;}

ul,ol,dl,li {margin:0; padding:0; list-style-type:none;}
dl dt {margin:0; padding: 0;}
dl dd {margin:0; padding: 0;}
img {border:0; vertical-align:middle;}
a {text-decoration:none; color:#666;}
p {margin:0; padding: 0;}
h1, h2, h3, h4, h5 {margin:0; padding:0; clear:both;}
table {border-collapse:collapse; border-spacing:0;}
input{font-family:'Nanum Gothic'; font-size:13px; color:#898989; border:1px solid #ccc;}
input[type=text],[type=file],[type=email],[type=password],[type=tel]{width: auto; height: 30px; line-height: 30px; box-sizing: border-box; padding: 0 5px;}
select{color:#898989; font-family:'Nanum Gothic'; padding:0; height: 30px; line-height: 30px;}
textarea{width: 98%; height: 50px; color:#898989; font-family:'Nanum Gothic'; font-size: 13px; border:1px solid #ccc; box-sizing: border-box; padding: 5px; line-height: 1.6;}





/*margin*/
.mgt5{margin-top: 5px;}
.mgt10{margin-top: 10px !important;}
.mgt15{margin-top: 15px;}
.mgt20{margin-top: 20px;}
.mgb5{margin-bottom: 5px;}
.mgb10{margin-bottom: 10px;}



@media screen and (min-width:0px) and (max-width:1024px) {
	
/*----------header----------*/
.headerWrap{text-align: center; background: #fff;}
#header{width: 100%; height: 70px; display: block; transition: all 0.5s;}
#header h1{height: 70px; line-height: 70px; font-size: 24px; color: #2683c5; font-weight: bold; display: block;}
#header h1>a>img{width: 200px;}

    .btnCall{position:absolute; top:25px; right:10px;}
    .btnCall>.fa-bars{font-size:24px; color:#150955;}
    .gnbMo{position:fixed; top:0px; left:-250px; width:250px; height:100%; background:rgba(0,0,0,0.9); z-index:999; transition: all 0.5s;}
    .gnbMo.on{left:0px;}
    #gnbMo{padding: 0;}
    #gnbMo>li{width: 100%; border-bottom: 1px solid #666;}
    #gnbMo>li>a{width:99%; background:rgba(0,0,0,0.7); font-size: 14px; line-height: 2.5; color:#fff; font-weight: 600; text-align: left; text-indent: 20px; display:block;}
    #gnbMo>li>a>i{float: right; margin: 10px 15px 0 0;}
    #gnbMo>li>ul>li>ul{margin-left: 35px;}
    #gnbMo>li>ul>li>ul>li{width: 100%; text-align: left;}
    #gnbMo>li>ul>li>ul>li>a{color: #aaa;}
    
    #gnbMo>li>ul.depth2{width: 100%; background:rgba(0,0,0,0.9); box-sizing: border-box; padding: 0 0 10px 0; display: block;}
    #gnbMo>li>ul.depth2>li>a{color: #fff; text-align: left; box-sizing: border-box; padding: 5px 20px; display: block;}

    .user{width: 100%; border-bottom: 1px solid #666; padding: 20px 0; background: #201E5E; text-align: center;}
    .user>span{font-weight: bold; color: #fff; padding-left: 20px; margin-bottom: 10px; text-align: left; display: block;}
    .user>a{font-size: 12px; width: 70px; height: 30px; line-height: 30px; background: #fff; color: #333; text-align: center; border-radius: 5px; margin: 0 auto; display: inline-block;}
    .user>a.btnCall{width: 18px; height: 18px; line-height: 18px; font-size: 18px; color: #fff; background:none; margin-top: -3px;}

    .home{position: absolute; top: 25px; left: 20px; }
    .home>.fa-home{font-size: 24px; color: #aaa;}

    
    
    
    
    
    
    
    
    
    /*----------navi----------*/
    #hGnb{width:100%; height: 35px; background: #150955; display: table;}
    #hGnb>li{float: left; width: 25%;}
    #hGnb>li>a{width: 100%; line-height: 35px; text-align: center; font-weight: 600; color: #fff; display: block;}
    /*#hGnb>li>a.on{box-sizing: border-box; border-bottom: 2px solid #201E5E;}*/
    
    
    
    
    
    /*----------visual----------*/
    #visual{width: 100%; display: block; background: #fff;}
    #visual>img{width: 100%;}
    
	/*#visual{width: 1200px; height: 400px; background: #fff; position: relative; overflow: hidden; margin: 0 auto;}*/
	#panel{width: 100%; height: 100%; margin: 0 auto;}
	#panel>li{float: left; width: 100%; height: 100%;}
	#panel>li>a{width: 100%; margin: 0 auto; display: block; text-indent: -10000px;}
	#panel>li>a>img{width: 100%; margin: 0 auto; display: block; text-indent: -10000px;}    

        
    
    
/*----------main contents----------*/
#contents{width: 100%; display: block;}
.logbox{width: 100%; display: block;}
.logbox li+li{margin-top: 10px;}
.logCheck{width: 100%; display: table; margin-top: 5px;}
.logCheck li{float: left; width: 50%;}

.quick{width: 100%; box-sizing: border-box; padding: 5px; margin: 5px 0; background: #fff; display: table;}
.quick>li{float: left; width: 25%; line-height: 1.2; box-sizing:border-box; padding:5px; vertical-align: top; text-align: center;}
.quick>li>a{width: 100%; font-size: 14px; font-weight: bold; color: #333; text-align: center; vertical-align: top; display: block;}
.quick>li>a>img{width: 70px; margin-bottom: 5px;}

    
    .mainCont{width: 100%; background: #fff; box-sizing: border-box; padding: 10px; display: table;}
    .mainCont h2{font-size: 16px; color: #201e5e; font-weight: bold; line-height: 1.2; margin: 0 0 5px 0;}
	.mainCont h2>a{color: #201e5e;}
    
    .mlist{width: 100%; display: block;}
    .mlist li{border-bottom: 1px solid #ccc; padding: 5px 0; display: block;}
    .mlist li:nth-last-child(1){border-bottom: 0;}
    .mlist li>a{display: block;}
    .mlist li>a>span{background: #e1e1e1; font-size: 12px; display: inline-block; width: 100px; text-align: center; margin-right: 5px;}
    
    .mlist2{width: 100%; display: block;}
    .mlist2>ul>li{float: left; height: 160px; display: inline-block;}
    .mlist2>ul>li.poster{width: 120px;}
    .mlist2>ul>li.poster>img{width: 120px; height: 160px;}
    .mlist2>ul>li.txt{width: 230px; box-sizing: border-box; padding-left: 10px;}
    .mlist2>ul>li.txt div+div{margin-top: 5px;}
    .mlist2>ul>li.txt>div>strong{color: #333;}
    .mlist2>ul>li.txt li{clear: both;}
    .mlist2>ul>li.txt li+li{margin-top: 5px;}
    .mlist2>ul>li.txt li>span{width: 70px; text-align: center; background: #eee; border-radius: 20px; display: inline-block;}
    
    .mPhoto{width: 100%; display: block;}
    .mPhoto>li+li{margin-top: 10px;}
    .mPhoto td.img{width: 120px; height: 160px; margin-bottom: 10px;}
	.mPhoto td.txt{box-sizing: border-box; padding-left: 10px; vertical-align: top;}
    .mPhoto td.txt>strong{color: #333; display: block;}

    /*
	.mPhoto{width: 100%; display: block;}
    .mPhoto>li{float: left; width: 33.3333%; text-align: center; display: block;}
    .mPhoto>li>a{width: 120px; margin: 0 auto; display: block;}
    .mPhoto>li>a>img{width: 120px; height: 160px; margin-bottom: 10px;}
	*/
    
    .fquick{width: 100%; border-bottom: 1px solid #ccc; box-sizing: border-box; padding: 10px; text-align: center; display: table;}
    .fquick>a{font-size: 12px; line-height: 1; box-sizing: border-box; padding: 0 10px; display: inline-block;}
    .fquick>a:nth-child(1){padding-left: 0;}
    .fquick>a:nth-last-child(1){padding-right: 0;}
    .fquick>a+a{border-left: 1px solid #ccc;}
    
    
/*tab*/
.tab{width: 100%; height: 30px; margin-bottom: 5px; display: table;}
.tab li{float: left;}
.tab li+li{margin-left: 2%;}
.tab li>a{display: block; text-align: center; height: 100%; line-height: 1.4; background: #89bbe5; color: #fff;  box-sizing: border-box; border-radius: 10px;}
.tab li>a.on{background: #2683c5; color: #fff;}
.tab li.line01>a{padding: 15px 0;}
.tab li.line02>a{padding: 5px 0;}
.tab3>li{width: 32%; height: 50px;}
    
/*btn*/
.btn{width: 100%; text-align: center; margin-top: 10px; display: table;}
.btn a{height: 30px; line-height: 30px; text-align: center; border-radius: 5px; display: inline-block; background: #5bb2e3; color: #fff; box-sizing: border-box; padding: 0 10px;}
.btn a+a{margin-left: 5px;}
.btn a.w100{width: 100%;}
.btn a.more{width: 100%; border-radius: 0; color: #333; background: #fff; border: 1px solid #ccc; border-radius: 5px;}
    .btnTop{width: 100%; text-align: right; margin: 0 0 10px 0; display: table;}
    .btnTop>a{height: 30px; line-height: 30px; text-align: center; border-radius: 5px; background: #5bb2e3; color: #fff; box-sizing: border-box; padding: 0 10px; display: inline-block;}
    .btnTop>select{float: left; height: 30px; line-height: 30px;}
    



/*footer*/
#footer{width: 100%; margin: 0 auto; padding: 10px 0; text-align: center; font-size: 11px; color: #aaa;}
#footer>li{width: 100%; display: table;}
#footer>li+li{margin-top: 5px;}
#footer a{font-size: 11px; color: #aaa; padding: 0 10px;}
#footer a+a{border-left: 1px solid #aaa;}
}