#mainSection {width:100%; height:auto; position:relative; background:#f5f7f8; padding-bottom:50px; font-size:12px; }

#mainSection h3 {font-size:16px; font-weight:500; font-family: 'NotoSansKR-Light-Hestia';  color:#333 }
#mainSection1 {width:1080px; height:300px; margin:0 auto; position:relative;}
#mainSection1 .mainNew {width:718px; height:287px; position:absolute; top:0px; left:0px; margin-top:12px; border:2px solid #006cb8; background:#fff; padding:17px;}
#mainSection1 .mainNew a {color:#555}
#mainSection1 .mainNew .newImg {width:330px; height:244px; border:1px solid #eeeeee; overflow:hidden; float:left}
#mainSection1 .mainNew .newImg img {width:100%; min-height:244px;}
#mainSection1 .newCont {float:left; margin-left:17px; width:317px;}
#mainSection1 .newCont .title {margin-top:15px; height:36px; font-size:14px; line-height:18px; color:#555; font-weight:600}
#mainSection1 .newCont .writer {margin-top:7px; color:#666; font-size:11px;}
#mainSection1 .newCont .cont {width:100%; margin-top:7px; height:70px; line-height:18px; color:#666; border-bottom:1px solid #eeeeee;}
#mainSection1 .newCont ul {margin-top:15px;}
#mainSection1 .newCont li {height:24px;  padding-left:10px; font-weight:600; background:url('/new/img/main/bg_Mnews_dot.gif') 1px 4px no-repeat ;}
#mainSection1 .newCont li a {color:#666;}

#mainSection1 .main-Login {width:354px; height:138px; position:absolute; top:0px; right:0px; margin-top:8px;}
#mainSection1 .main-Login .loginBox {width:352px; height:138px; background:#fff; border:1px solid #dddddd}
#mainSection1 .main-Login .loginBox .idBox {width:174px; height:39px; overflow:hidden; background:#f5f7f8; position:absolute; top:20px; left:20px;}
#mainSection1 .main-Login .loginBox .pwBox {width:174px; height:39px; overflow:hidden; background:#f5f7f8; position:absolute; top:58px; left:20px;}
#mainSection1 .main-Login .loginBox label {position:absolute; line-height:37px; padding-left:10px}
#mainSection1 .main-Login .loginBox input[type='text'], .loginBox input[type='password'] {border:0px; height:100%; width:100%; padding-left:10px; background:#f5f7f8;}
#mainSection1 .main-Login .loginBox .btn_login {position:absolute; display:block; font-size:13px; top:20px; right:100px; width:77px; line-height:77px; height:77px; font-weight:600; text-align:center; border:0px; color:#fff; background:#006cb8; }
#mainSection1 .main-Login .loginBox .join {position:absolute; display:block; font-size:13px; top:20px; right:20px; line-height:75px; width:77px; height:77px; font-weight:600; text-align:center; border:2px solid #006cb8; color:#006cb8;}
#mainSection1 .main-Login .loginBox .userFind {position:absolute; bottom:16px; left:20px}
#mainSection1 .main-Login .loginBox .speedJoin {position:absolute; bottom:12px; right:20px; height:20px; line-height:20px;}
#mainSection1 .main-Login .loginBox .speedJoin img {vertical-align:middle; margin-left:3px}
#mainSection1 .main-AD2 {width:354px; height:auto; position:absolute; top:159px; right:0px;}
#mainSection1 .main-AD2 span {width:352px; height:138px; display:block; background:url('/new/img/main/mainAD2.jpg');}

#mainSection2 { width:1080px; height:296px;  margin:0 auto; position:relative;}
#mainSection2 .webtoonBox {width:717px; overflow:hidden; position:relative; height:288px; background:#fff;  padding:17px 0px 17px 17px;  margin-top:8px; float:left;}
#mainSection2 .webtoonBox p {width:18px; height:18px;float:right; padding-right:20px; margin-top:-22px;}
#mainSection2 .webtoonBox div {width:325px; height:110px; overflow:hidden;  margin-top:10px; float:left; margin-right:12px; overflow:hidden;}
#mainSection2 .eventBox {width:354px; height:288px; padding:17px 0px 17px 17px; background:#fff; margin-top:8px; float:left; margin-left:8px;}
#mainSection2 .eventBox p {width:18px; height:18px;float:right; padding-right:20px;margin-top:-22px;}
#mainSection2 .eventBox ul {float:left; margin-top:10px; }
#mainSection2 .eventBox li {margin-bottom:15px; width:330px; height:100px;}
#mainSection2 .eventBox span {width:120px; height:100px; display:block; border:1px solid #ddd; float:left; margin-right:5px; overflow:hidden;}
#mainSection2 .eventBox li span img {width:120px; min-height:100px;}
#mainSection2 .eventBox h6 {font-size:14px; margin-bottom:5px; line-height:20px; color:#555}
#mainSection2 .eventBox h6 a {color:#555}

#mainSection3 { width:1080px; height:300px;  margin:0 auto; position:relative;}
#mainSection3 .columnBox {width:536px; height:288px; padding:17px 0px 17px 17px; background:#fff; margin-top:8px; float:left; }
#mainSection3 .columnBox p {width:18px; height:18px;float:right; padding-right:20px; margin-top:-22px;}
#mainSection3 .columnBox ul {margin-top:12px;}
#mainSection3 .columnBox li { width:245px; height:270px; float:left; margin-right:8px;}
#mainSection3 .columnBox li:last-child {margin-right:0px;}
#mainSection3 .columnBox h5 {font-size:14px; margin-bottom:5px; line-height:18px; margin-top:5px; color:#555}
#mainSection3 .columnBox h5 a {color:#555}
#mainSection3 .columnBox div {width:245px; position:relative; height:130px; border:1px solid #ddd; overflow:hidden; }
#mainSection3 .columnBox li span {line-height:16px; color:#666}
#mainSection3 .columnBox .column {width:245px; min-height:130px;}
#mainSection3 .lawBox {width:536px; height:288px; padding:17px 0px 17px 17px; background:#fff; margin-top:8px; float:left;  margin-left:8px;}
#mainSection3 .lawBox p {width:18px; height:18px;float:right; padding-right:20px; margin-top:-22px;}
#mainSection3 .lawBox ul {margin-top:12px;}
#mainSection3 .lawBox li { width:31%; height:105px; float:left; margin-bottom:10px; margin-right:2%;}
#mainSection3 .lawBox li:last-child {margin-right:0px;}
#mainSection3 .lawBox div {width:100%; position:relative; height:105px; border:1px solid #ddd; overflow:hidden; }
#mainSection3 .lawBox .column {width:100%; min-height:105px;}

#mainSection4 { width:1080px; height:300px;  margin:0 auto; position:relative;}
#mainSection4 .lawBox {width:536px; height:288px; padding:17px 0px 17px 17px; background:#fff; margin-top:8px; float:left;}
#mainSection4 .lawBox p {width:18px; height:18px;float:right; padding-right:20px; margin-top:-22px;}
#mainSection4 .lawBox ul {margin-top:10px;}
#mainSection4 .lawBox li {width:240px; height:105px; float:left; padding:10px; margin-left:8px; margin-bottom:8px; border:1px solid #ccc; background:#f1f1f1;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
#mainSection4 .lawBox li b {font-size:14px; color:#555}
#mainSection4 .lawBox li b a {color:#555}
#mainSection4 .lawBox li span {line-height:16px; color:#666}
#mainSection4 .lawBox li span a {color:#666}

/* 상단 1080 */
@media all and (max-width:1080px){
#mainSection1 {width:100%;}
#mainSection1 .mainNew {width:65%;} 
#mainSection1 .mainNew .newImg {width:40%;}
#mainSection1 .newCont { width:57%; margin-left:2%;}
#mainSection1 .main-Login {width:34%;}
#mainSection1 .mainNew span {width:100%;}
#mainSection1 .main-Login .loginBox {width:99%;}
#mainSection1 .main-Login .loginBox .idBox {width:80%;}
#mainSection1 .main-Login .loginBox .pwBox {width:80%;}
#mainSection1 .main-Login .loginBox .btn_login {right:10px;}
#mainSection1 .main-Login .loginBox .join {height:30px; top:115px; line-height:28px; right:10px;}
#mainSection1 .main-Login .loginBox .speedJoin {display:none}
#mainSection1 .main-AD2 {width:34%; overflow:hidden;}

#mainSection2 { width:100%}
#mainSection2 .webtoonBox {width:65%; overflow:hidden; position:relative; height:288px; background:#fff;  padding:17px 0px 17px 17px;  margin-top:8px; float:left;}
#mainSection2 .webtoonBox div {width:48%; margin-right:1%; }

#mainSection2 .eventBox {width:34%; height:288px; padding:17px 0px 17px 17px; background:#fff; margin-top:8px; float:left; margin-left:1%;}
#mainSection2 .eventBox ul {margin-top:10px; }
#mainSection2 .eventBox li {margin-bottom:15px; width:95%; height:100px;}


#mainSection3 { width:100%}
#mainSection3 .columnBox {width:50%;}
#mainSection3 .columnBox li { width:48%; height:270px; float:left; margin-right:1%;}
#mainSection3 .columnBox div {width:100%; }
#mainSection3 .lawBox {width:49%;}

#mainSection4 {  width:100%; height:auto; overflow:hidden;}
#mainSection4 .lawBox {width:100%; overflow:hidden;}
#mainSection4 .lawBox ul {margin-top:10px;}
#mainSection4 .lawBox li {width:95%; height:73px; overflow:hidden; margin-left:0px; ; background:#f1f1f1; }
}

@media all and (max-width:727px){
#mainSection1 {width:100%; }
#mainSection1 .mainNew {width:86%;  left:7%}
#mainSection1 .mainNew .newImg {display:none;}
#mainSection1 .newCont {width:98%;}
#mainSection1 .main-AD2 {width:86; height:auto; position:absolute; top:157px; right:0px;}
#mainSection1 .main-Login .loginBox {display:none;}
#mainSection1 .main-AD2 {display:none;}

#mainSection2 {height:593px;}
#mainSection2 .webtoonBox {width:86%; margin-left:7%; }
#mainSection2 .webtoonBox div {width:100%; margin-right:0%; }
#mainSection2 .eventBox {width:86%; margin-left:7%; overflow:hidden;}

#mainSection3 {height:593px;}
#mainSection3 .columnBox {width:86%; margin-left:7%; }
#mainSection3 .lawBox {width:86%; margin-left:7%; }

#mainSection4 {height:593px;}
#mainSection4 .lawBox {width:86%; margin-left:7%; }
}