#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 .photoBox {width:718px; height:287px; position:absolute; top:0px; left:0px; margin-top:12px; border:1px solid #ddd; background:url('/new/img/architect/bg_photo.jpg') no-repeat;background-color:#fff; padding:17px;}
#mainSection1 .photoBox  h3 {color:#a5d0ee; line-height:22px;}
#mainSection1 .photoBox .photoArea {width:334px; height:251px; border:1px solid #1779be; overflow:hidden; position:absolute; top:18px; left:76px;}
#mainSection1 .photoBox .photoArea ul {width:500%; height:251px;}
#mainSection1 .photoBox .photoArea li {float:left; width:334px; height:251px;}
#mainSection1 .photoBox .photoArea img {width:334px; min-height:251px;}
#mainSection1 .photoBox .subPhoto {position:absolute; width:270px; height:100px;  bottom:15px; right:30px;}
#mainSection1 .photoBox .subPhoto li {width:48%; height:100px; overflow:hidden; float:left; margin-left:2%;}
#mainSection1 .photoBox .subPhoto img {width:100%; min-height:100px;}
#mainSection1 .photoBox .photoTitle {width:280px; height:200px; position:absolute; top:70px; right:10px;}
#mainSection1 .photoBox .photoTitle h5 {font-size:20px; font-weight:500; line-height:26px;font-family:'NotoSansKR-Light-Hestia'; color:#333333 }
#mainSection1 .photoBox .photoTitle .comName {padding-top:15px; display:inline-block;; font-size:14px; color:#777; font-weight:600}
#mainSection1 .photoBox .list-btn {position:absolute; top:18px; right:30px;  text-align:center; height:8px; width:auto;}
#mainSection1 .photoBox .list-btn div {width:8px; height:8px; display:inline-block; background:url('/new/img/main/slide_btn.gif') -8px 0px no-repeat; }
#mainSection1 .photoBox .list-btn .over {background:url('/new/img/main/slide_btn.gif') 0px 0px no-repeat;}
#mainSection1 .main-Login {width:354px; height:138px; position:absolute; top:0px; right:0px; margin-top:12px;}
#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; background-color:#fff}
#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:576px;  margin:0 auto; position:relative;}
#mainSection2 .companyBox {width:1080px; height:568px; padding:17px 0px 17px 17px; background:#fff; margin-top:8px; float:left;}
#mainSection2 .companyBox ul {margin-top:10px;}
#mainSection2 .companyBox li {width:343px; height:160px; float:left;  margin-left:10px; position:relative; margin-bottom:10px; overflow:hidden;}
#mainSection2 .companyBox li .photo {width:84px; height:64px; border:1px solid #eeeeee; overflow:hidden; margin-right:10px;}
#mainSection2 .companyBox li .photo img {width:100%;}
#mainSection2 .companyBox li .info {display:inline-block; position:absolute; top:10px; left:100px; color:#666666}
#mainSection2 .companyBox li .info h5 {font-size:14px; color:#555; line-height:18px; min-height:36px;  width:220px  }
#mainSection2 .companyBox li .info  p {line-height:30px;}
#mainSection2 .companyBox li .portF {margin-top:10px; width:95px; height:78px; overflow:hidden; float:left; margin-right:5px;}
#mainSection2 .companyBox li .portF last-child {margin-right:0px; }
#mainSection2 .companyBox li .portF img {width:100%; min-height:78px;}

#mainSection3 { width:1080px; height:300px;  margin:0 auto; position:relative;}
#mainSection3 .requestBox {width:536px; height:288px; padding:17px 0px 17px 17px; background:#fff; margin-top:8px; float:left;}
#mainSection3 .requestBox ul {}
#mainSection3 .requestBox li {width:500px; padding-top:22px;  padding-bottom:12px; border-bottom:1px solid #ddd; position:relative; }
#mainSection3 .requestBox li b {font-size:14px; color:#555555}
#mainSection3 .requestBox li .num {color:#006cb8; font-weight:600; padding-right:5px;}
#mainSection3 .requestBox li:last-child {border:0px;}
#mainSection3 .requestBox .countBox {width:30px; height:27px; padding:10px; padding-top:6px; line-height:18px; position:absolute; top:20px; right:57px; border:2px solid #ddd; display:inline-block; text-align:center; font-weight:600; color:#006cb8}
#mainSection3 .requestBox .countBox strong {color:#555}
#mainSection3 .requestBox .btn_request {width:30px; height:27px; padding:10px; padding-top:6px; line-height:18px; position:absolute; top:20px; right:0px; border:2px solid #006cb8; display:inline-block; text-align:center; font-weight:600; color:#fff; background:#006cb8;}

#mainSection4 {width:1080px; height:461px; margin:0 auto; position:relative; padding-top:8px; z-index:10}
#mainSection4 .materialsBox {width:1080px; overflow:hidden; background:#fff; position:relative; height:459px; padding:20px; float:left;}
#mainSection4 .materialsBox .category {position:absolute; overflow:hidden; top:0px; left:0px; width:100%; height:50px;  }
#mainSection4 .materialsBox .category .bg-category {width:100%; height:45px; border-bottom:1px solid #ededed;}
#mainSection4 .materialsBox .category .bg-category ul {width:200%; height:100%; margin-left:65px; }
#mainSection4 .materialsBox .category .bg-category ul li {z-index:1; height:45px; float:left; line-height:54px; position:relative; font-size:14px; cursor:pointer; color:#777777; padding-right:10px; padding-left:10px;}
#mainSection4 .materialsBox .category .bg-category ul .over {color:#006cb8; font-weight:600; }
#mainSection4 .materialsBox .category .bg-category ul li .ico-over {width:100%; display:block; height:50px; top:0px; left:0px; position:absolute; background:url('/new/img/main/bg_menu_category.gif') bottom center no-repeat; z-index:1111}
#mainSection4 .materialsBox .category .bg-category .cateBtn {position:absolute; top:0px; right:0px; z-index:2}
#mainSection4 .materialsBox .category .bg-category .cateBtn img {padding:0px; margin:0px;}
#mainSection4 .materialsBox .materialsList {margin-top:25px;} 
#mainSection4 .materialsBox .materialsList li {height:200px; width:23%; float:left; margin-right:2%}
#mainSection4 .materialsBox .materialsList h5 {font-size:13px; width:100%; display:inline-block;  margin-bottom:5px; line-height:18px; }
#mainSection4 .materialsBox .materialsList div {width:100%; height:120px; border:1px solid #ddd; float:left; margin-bottom:7px;  overflow:hidden;}
#mainSection4 .materialsBox .materialsList img {width:100%; min-height:120px; }
#mainSection4 .materialsBox .materialsList em {line-height:16px;}


/* 상단 1080 */
@media all and (max-width:1080px){
#mainSection1 {width:100%;}
#mainSection1 h3 {display:none;}
#mainSection1 .photoBox {width:65%; background:url('/new/img/architect/bg_photo_1080.jpg') no-repeat; background-color:#fff;}
#mainSection1 .photoBox  .photoArea {left:16px;}
#mainSection1 .photoBox  .photoTitle {width:30%; }
#mainSection1 .main-Login {width:34%;}
#mainSection1 .main-Login .loginBox {width:99%;}
#mainSection1 .main-Login .loginBox .idBox {width:80%;}
#mainSection1 .main-Login .loginBox .pwBox {width:80%;}
#mainSection1 .main-AD2 {width:34%; overflow:hidden;}


#mainSection2 { width:100%;}
#mainSection2 .companyBox {width:100%;}
#mainSection2 .companyBox li {width:32.3%;  margin-left:1%;  }
#mainSection2 .companyBox li .photo img {width:100%;}
#mainSection2 .companyBox li .info h5 {width:100%;  }
#mainSection2 .companyBox li .portF {width:32%; margin-right:1%;}
#mainSection2 .companyBox li .portF last-child {margin-right:0px; }
#mainSection2 .companyBox li .portF img {width:100%; min-height:78px;}

#mainSection3 { width:100%; overflow:hidden; height:auto;}
#mainSection3 .requestBox {width:100%;}
#mainSection3 .requestBox li {width:100%; }
#mainSection3 .requestBox .cont {width:70%; height:12px;overflow:hidden; z-index:1; display:block;}
#mainSection3 .requestBox .countBox {right:67px; z-index:99; background:#fff}
#mainSection3 .requestBox .btn_request {right:10px;}

#mainSection4 {width:100%;}
#mainSection4 .materialsBox {width:100%;}


}


@media all and (max-width:727px){
#mainSection1 {height:350px;}
#mainSection1 .photoBox {width:86%; left:7%; height:338px; }
#mainSection1 .photoBox  .photoTitle {display:none; }
#mainSection1 .photoBox  .photoArea {width:96%; height:95%; top:2%; left:2%;}
#mainSection1 .photoBox  .photoArea ul {width:500%; height:100%;}
#mainSection1 .photoBox  .photoArea li {float:left; width:20%; height:100%;}
#mainSection1 .photoBox  .photoArea img {width:100%; min-height:100%;}

#mainSection1 .photoBox .list-btn {display:none;}
#mainSection1 .main-Login .loginBox {display:none;}
#mainSection1 .main-AD2 {display:none;}


#mainSection2 { width:100%; height:726px;}
#mainSection2 .companyBox {width:86%; margin-left:7%; height:726px; overflow:hidden;}
#mainSection2 .companyBox li {width:98%;  }

#mainSection4 .materialsBox {width:86%; margin-left:7%}
#mainSection4 .materialsBox .materialsList li {height:200px; width:48%; float:left; margin-right:2%}

#mainSection3 {height:593px;}
#mainSection3 .requestBox {width:86%; margin-left:7%; }
#mainSection3 .requestBox .countBox {display:none;}
#mainSection3 .requestBox .btn_request {display:none;}

}