@charset "utf-8";
/*-------------------------------------------------
Author : SY,CHo
Create date : 2018. 09. 04. 모바일 리뉴얼
-------------------------------------------------*/
/*
*/
#header {position: fixed; top: 0; left: 0; z-index:90;}
#body {text-align: center;}
.section {padding: 50px 15px 0 15px;}
.fp-tableCell {height: 100% !important;}
.section h2 {margin-bottom: 25px; font-size: 2.2rem; color: #333;}
.section h2 > strong {font-weight: inherit; color: #fc6719;}
.section-arrow {position: absolute; left: calc(50% - 7px); bottom: 25px; display: none; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 25px; color: #333;}
.section.active .section-arrow {display: inline-block;}
#section1 {color: #fff; background: url(../../images/mps/new_main/s1-bg.jpg) no-repeat center top; background-size: cover;}
#section1 .fp-tableCell > strong {display: block; margin-bottom: 20px; font-family: 'NotoM'; font-size: 2.1rem; text-shadow: 2px 2px 0 rgba(0,0,0,0.15);}
#section1 .fp-tableCell > p {margin-bottom: 10px;}
#section1 ul {display: inline-block; margin: 0 auto; max-width: 285px; overflow: hidden;}
#section1 ul > li {float: left; display: inline-block; margin: 10px 5px; width: 85px;}
#section1 ul > li span {display: inline-block; margin-bottom: 5px; width: 75px; height: 75px; line-height: 75px; background: #fff no-repeat center center; background-size: cover; border-radius: 50%; box-shadow: 1px 1px 1px rgba(0,0,0,0.15);}
#section1 ul > li:nth-child(1) span {background-image: url(../../images/mps/new_main/icon3.png);}
#section1 ul > li:nth-child(2) span {background-image: url(../../images/mps/new_main/icon4.png);}
#section1 ul > li:nth-child(3) span {background-image: url(../../images/mps/new_main/icon2.png);}
#section1 ul > li:nth-child(4) span {background-image: url(../../images/mps/new_main/icon7.png);}
#section1 ul > li:nth-child(5) span {background-image: url(../../images/mps/new_main/icon6.png);}
#section1 ul > li:nth-child(6) span {background-image: url(../../images/mps/new_main/icon1.png);}
#section1 .section-arrow {color: #fff;}
/* #section2, #section3 스타일 공통 */
.list-style-same {position: relative; text-align: left;}
.list-style-same h3 {position: relative; margin-bottom: 15px; font-family: 'NotoM'; font-size: 1.8rem; font-weight: 400;}
.list-style-same h3:after {position: absolute; top: 50%; left: 115px; width: calc(100% - 180px); height: 1px; background-color: #cccdcd; content: "";}
.list-style-same .more {position: absolute; top: 0; right: 10px;}
.bx-control-same .bx-controls {position: relative; margin-top: 20px; height: 35px; line-height: 35px; text-align: center;}
.bx-control-same .bx-pager-item {display: inline-block; margin: 0 8px;}
.bx-control-same a.bx-pager-link {display: inline-block; width: 10px; height: 10px; background-color: #ddd; border-radius: 5px; overflow: hidden;}
.bx-control-same a.bx-pager-link.active {width: 24px; background-color: #75777b;}
.bx-control-same .bx-controls-direction a {position: absolute; top: 0;}
.bx-control-same .bx-controls-direction a:before {position: absolute; top: 0; width: 35px; height: 35px; line-height: 33px; text-align: center; font-family: 'xeicon'; font-size: 20px; border: 1px solid #555; border-radius: 50%;}
.bx-control-same .bx-controls-direction a.bx-prev {left: 0; padding-left: 45px;}
.bx-control-same .bx-controls-direction a.bx-prev:before {left: 0; content: "\e93c";}
.bx-control-same .bx-controls-direction a.bx-next {right: 0; padding-right: 45px;}
.bx-control-same .bx-controls-direction a.bx-next:before {right: 0; content: "\e93f";}
.service-list li {float: left; width: 100%;}
.service-list li a {position: relative; display: block; padding: 25px 25px 25px 100px; width: 100%; height: 110px; text-align: left; color: #333; background-color: #fff;}
.service-list li a strong {position: absolute; top: 0; left: 0; display: block; padding: 25px 10px; width: 80px; height: 100%; text-align: center; color: #fff; background-color: #fc6719;}
.service-list li a span {display: block; margin-bottom: 10px; font-size: 1.3rem; color: #555;}
.service-list li a p {height: 42px; overflow: hidden;}
#section2 {background: url(../../images/mps/new_main/s2-bg.jpg) no-repeat center top; background-size: 100% 40%;}
#section2 h2 {margin-bottom: 15px; color: #fff;}
#section2 .report {position: relative; margin-bottom: 30px; padding: 15px; width: 100%; min-height: 150px; background-color: #fff; border: 1px solid #d0d0d0;}
#section2 .report:before {position: absolute; top: 0; left: 0; width: 90px; height: 84px; content: url(../../images/mps/new_main/report-bg1.gif);}
#section2 .report:after {position: absolute; right: 0; bottom: 0; width: 56px; height: 54px; content: url(../../images/mps/new_main/report-bg2.gif);}
#section2 .report h3 {position: relative; margin-bottom: 15px; font-family: 'NotoM'; color: #fc671a;}
#section2 .report h3:after {position: absolute; bottom: 0; left: 50%; width: 30px; height: 1px; background-color: #ededed; content: ""; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#section2 .report p {position: relative; height: 54px; margin-bottom: 10px; color: #333; font-size: 1.5rem; overflow: hidden;}
#section2 .report a {display: inline-block; width: 100px; height: 30px; line-height: 30px; color: #fff; background-color: #a39d94; border-radius: 15px;}
#section2 .trend h3:after {left: 115px; width: calc(100% - 180px);}
#section2 .trend .bx-viewport {height: 90px !important;}
#section2 .trend .service-list li a {padding: 15px 25px 15px 100px; height: 90px;}
#section2 .trend .service-list li a p {height: 60px;}
#section3 .service {margin-bottom: 35px;}
#section3 .service .bx-viewport {height: 110px !important;}
#section3 .event h3:after {left: 130px; width: calc(100% - 195px);}
#section3 .event.list-style-same .event-list li {margin-top: 5px; overflow: hidden;}
#section3 .event.list-style-same .event-list li:first-child {margin-top: 0;}
#section3 .event.list-style-same .event-list li a {position: relative; display: block; padding-left: 15px; width: 100%; height: 25px; line-height: 25px; color: #555; overflow: hidden;}
#section3 .event.list-style-same .event-list li a:before {position: absolute; top: 10px; left: 0; width: 8px; height: 8px; background-color: #fc6719; border-radius: 50%; content: "";}
#section3 .event.list-style-same .event-list .date {float: left; display: block; width: 130px; margin-right: 10px; color: #333; font-family: 'NotoM';}
#section3 .event.list-style-same .event-list .txt {display: block; position: relative; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; font-family: NotoR; overflow: hidden;}
#section4 .news {position: relative; width: 100%; height: 310px; overflow: hidden;}
#section4 .news:before {position: absolute; top: 39px; left: 0; width: 100%; height: 1px; background-color: #bdc5ca; content: "";}
#section4 .news > li {float: left; display: inline-block; width: 25%;}
#section4 .news > li > a {position: relative; display: block; width: 100%; height: 40px; color: #98a5ad;}
#section4 .news .list {display: none; position: absolute; top: 40px; left: 0; width: 100%; text-align: left; overflow: hidden;}
#section4 .news .list > li {border-bottom: 1px solid #bdc5ca; overflow: hidden;}
#section4 .news .list > li > a {display: block; position: relative; padding: 23px 60px; color: #333; overflow: hidden;}
#section4 .news .list > li > a:after {position: absolute; top: 25px; right: 0; width: 35px; height: 30px; background-color: #fff; line-height: 30px; text-align: center; font-family: 'xeicon'; font-size: 20px; content: "\e90b";}
#section4 .news .list .date {position: absolute; top: 25px; left: 0; width: 60px; text-align: center; color: #222; font-size: 1.2rem; }
#section4 .news .list .date em {display: block; font-size: 2.2rem;}
#section4 .news .list .txt {display: block; height: 43px; font-weight: normal; font-family: NotoR; overflow: hidden;}
#section4 .news .list.recruit > li {padding-bottom: 14px;}
#section4 .news .list.recruit > li > a {padding: 35px 60px 0 15px; height: 75px;}
#section4 .news .list.recruit > li > a span {top: 15px; left: auto; display: block; padding-left: 17px; width: 100%; text-align: left; font-size: 1.4rem;}
#section4 .news .list.recruit > li > a span:before {position: absolute; top: 1px; left: 0; font-family: 'xeicon'; color: #fd671b; content: "\ea2c";}
#section4 .news > li.active > a {color: #333; border-bottom: 2px solid #fc671a;}
#section4 .news > li.active .list {display: block;}
#section5 .btns { margin-bottom: 15px; overflow: hidden;}
#section5 .btns a {position: relative; display: inline-block; width: 49%; height: 50px; padding: 0 15px; background-color: #fc671a; text-align: left; line-height: 50px; color: #fff; }
#section5 .btns a:before {position: absolute; top: 0; right: 15px; font-family: 'xeicon'; font-size: 20px; content: "\e90b";}
#section5 .btns a + a {margin-left: 2%; background-color: #75777b;}
.communication {margin-bottom: 20px; padding: 15px; background-color: #fff;}
.communication h3 {margin-bottom: 20px; font-family: 'NotoM';}
.communication ul {overflow: hidden;}
.communication ul li {float: left; width: 25%; font-size: 1.3rem;}
.communication ul li a, .communication ul li a span {display: block; margin-bottom: 5px;}
#section5 .sns {position: relative; padding: 20px; border: 3px solid #fff;}
#section5 .sns h3 {position: absolute; top: -12px; left: 15px; padding: 0 10px; background-color: #f5f2ee; font-family: 'NotoM'; font-size: 1.7rem;}
#section5 .sns ul {overflow: hidden;}
#section5 .sns ul li {float: left; width: 25%; font-size: 1.3rem;}
#section5 .sns ul li a {display: block;}
#section5 .sns ul li a span {display: block; width: 45px; margin: 0 auto 5px;}
#section5 .sns ul li a span img {max-width: 100%;}
#section6.section {padding: 0;}
@media all and (max-width: 380px) {
#section3 .event.list-style-same .event-list .date {width: 115px; margin-right: 5px; font-size: 1.4rem;}
}