@charset "utf-8";

/* 비쥬얼이미지 */
.gw_V20{background:url('/img/visual/gw_V20.jpg') repeat center 0; background-size:cover;}
.gw_OnulV10{background:url('/img/visual/gw_OnulV10.jpg') repeat center 0;background-size:cover;}
.gw_mobile{background:url('/img/visual/gw_mobile.jpg') repeat center 0;background-size:cover;}
.gw_messenger{background:url('/img/visual/gw_messenger.jpg') repeat center 0;background-size:cover;}
.gw_onulware{background:url('/img/visual/gw_onulware.jpg') repeat center 0;background-size:cover;}
.gw_portal{background:url('/img/visual/gw_portal.jpg') repeat center 0;background-size:cover;}
.gw_baw{background:url('/img/visual/gw_baw.jpg') repeat center 0;background-size:cover;}


/**/
.SefficeGwWrap{width:1100px;margin:0 auto;}
.SefficeGwWrap section{font-size:1.2em;font-family:ng,나눔 고딕, 'Nanum Gothic';color:#666;padding:15px 5px;box-sizing:border-box}
.SefficeGwWrap section h3{font-weight:normal;font-size:1.6em;color:#000;font-family:'Noto Sans KR';letter-spacing:-1px;background:url('/img/common.png') no-repeat -480px -39px;padding:10px 0 15px 0;margin-top:20px}
.SefficeGwWrap section.summary{}
.SefficeGwWrap section div span.point01{font-weight:bold;color:#ff7004;font-size:1.2em}
.SefficeGwWrap section div span.point02{font-weight:bold;text-decoration:underline}
.SefficeGwWrap section.summary div{padding:5px;line-height:20px}
.SefficeGwWrap section.summary p.img{text-align:center;margin:15px 0}
.SefficeGwWrap section.feature {}
.SefficeGwWrap section.feature div{overflow:hidden}
.SefficeGwWrap section.feature div p.V20{float:left;margin-right:30px}
.SefficeGwWrap section.feature div ul{float:left;}
.SefficeGwWrap section.feature div ul li{background:url('/img/etc/dot01.gif') no-repeat 5px 10px;padding:5px 0 5px 15px;font-family: 'Noto Sans KR';}
.SefficeGwWrap section.function{}
.SefficeGwWrap section.function .function_V20{background:#9c9c95 url('/img/gw/v20_bg01.jpg') repeat}
.SefficeGwWrap section.function .function_V20 {overflow:hidden;padding:50px 110px}
.SefficeGwWrap section.function  dl{float:left;margin:8px 15px;}
.SefficeGwWrap section.function  dt{background:url('/img/gw/bg001.png') repeat;border:2px solid #fff;width:100px;height:100px;border-radius:100px}
.SefficeGwWrap section.function dt span{display:block;background:url('/img/gw/icon.png') no-repeat;width:100px;height:100px;font-size:0}
.SefficeGwWrap section.functio dt span.icon02{background-position:0 -100px}
.SefficeGwWrap section.function dt span.icon03{background-position:0 -200px}
.SefficeGwWrap section.function dt span.icon04{background-position:0 -300px}
.SefficeGwWrap section.function dt span.icon05{background-position:0 -400px}
.SefficeGwWrap section.function dt span.icon06{background-position:0 -500px}
.SefficeGwWrap section.function dt span.icon07{background-position:0 -600px}
.SefficeGwWrap section.function dt span.icon08{background-position:0 -700px}
.SefficeGwWrap section.function dt span.icon09{background-position:0 -800px}
.SefficeGwWrap section.function dt span.icon10{background-position:0 -900px}
.SefficeGwWrap section.function dt span.icon11{background-position:0 -1000px}
.SefficeGwWrap section.function dt span.icon12{background-position:0 -1100px}
.SefficeGwWrap section.function dt span.icon13{background-position:0 -1200px}
.SefficeGwWrap section.function dt span.icon14{background-position:0 -1300px}
.SefficeGwWrap section.function dt span.icon15{background-position:0 -1400px}
.SefficeGwWrap section.function dt span.icon16{background-position:0 -1500px}
.SefficeGwWrap section.function dd{text-align:center;color:#000;font-size:.8em;margin-top:5px;}
.SefficeGwWrap section.organization{}
.SefficeGwWrap section.organization div{text-align:center}

/* Onul V1.0 */
.SefficeGwWrap section.function .gw_onulV10{background:#9c9c95 url('/img/gw/onulV10_bg01.jpg') repeat}
.SefficeGwWrap section.function .gw_onulV10 {overflow:hidden;padding:50px 70px}
.SefficeGwWrap section.feature div p.onulV10Left{float:left;background:url('/img/gw/onulV10_arrow01.png') no-repeat right center;padding-right:70px;}
.SefficeGwWrap section.feature div p.onulV10Right{float:left;}

/* 모바일 */
.SefficeGwWrap section.summary p.img01{text-align:center}
.SefficeGwWrap section.function .function_mobile{background:#9c9c95 url('/img/gw/mobile_bg01.jpg') repeat;overflow:hidden;padding:50px}
.SefficeGwWrap section.Mscreen div{text-align:center}

/* Seffice Onul V2.0 */
.SefficeGwWrap section.function .onulware{background:#9c9c95 url('/img/gw/onulware_bg01.jpg') repeat 0 2px;overflow:hidden;padding:50px 70px}

/* 포탈 */
.SefficeGwWrap section.Portal{}
.SefficeGwWrap section.Portal li{background:url('/img/etc/dot01.gif') no-repeat 5px 12px;padding:5px 0 5px 15px;font-family: 'Noto Sans KR';}
.SefficeGwWrap section.Portal .PortalStep{background:url('/img/gw/portal_line.png') repeat-x 0 90px;padding-top:30px;overflow:hidden;display:table;width:100%}
.SefficeGwWrap section.Portal .PortalStep dl{display:table-cell;width:25%;text-align:center;min-width:135px;}
.SefficeGwWrap section.Portal .PortalStep dt{padding-top:145px;font-size:1.2em;color:#000;font-weight:bold;margin-bottom:15px}
.SefficeGwWrap section.Portal .PortalStep .Step01 dt{background:url('/img/gw/portal_step01.png') no-repeat center 0;}
.SefficeGwWrap section.Portal .PortalStep .Step02 dt{background:url('/img/gw/portal_step02.png') no-repeat center 0;}
.SefficeGwWrap section.Portal .PortalStep .Step03 dt{background:url('/img/gw/portal_step03.png') no-repeat center 0;}
.SefficeGwWrap section.Portal .PortalStep .Step04 dt{background:url('/img/gw/portal_step04.png') no-repeat center 0;}
.SefficeGwWrap section.Portal .PortalStep dd{text-align:left;font-size:.9em;background:url('/img/company/dot.gif') no-repeat 0 8px;padding:2px 0 2px 8px;margin-left:40px}
.SefficeGwWrap section .diagram {text-align:center}

/* baw */
.SefficeGwWrap section .gw_bawDiv > div{margin:15px 0;}
.SefficeGwWrap section .gw_bawDiv .Step01{background:url('/img/gw/baw_no01.jpg') no-repeat;padding-left:100px}
.SefficeGwWrap section .gw_bawDiv .Step02{background:url('/img/gw/baw_no02.jpg') no-repeat;padding-left:100px}
.SefficeGwWrap section .gw_bawDiv .Step03{background:url('/img/gw/baw_no03.jpg') no-repeat;padding-left:100px}
.SefficeGwWrap section .gw_bawDiv > div .title{font-weight:bold;font-size:1.3em;color:#e96d00;padding:10px 0;font-family: 'Noto Sans KR';}
.SefficeGwWrap section .gw_bawDiv > div .contents{font-family: 'Noto Sans KR';}
.SefficeGwWrap section .gw_bawDiv .Step02 ul{overflow:hidden;}
.SefficeGwWrap section .gw_bawDiv .Step02 li{float:left;padding:10px 0}
.SefficeGwWrap section .gw_bawDiv .monitor{display:table;width:100%}
.SefficeGwWrap section .gw_bawDiv .monitor li{display:table-cell;width:33.3%}
.SefficeGwWrap section .gw_bawDiv .monitor li span{display:block;text-align:center;font-family: 'Noto Sans KR';}
.SefficeGwWrap section .gw_bawimg {text-align:center}

/* 메신저 */
.SefficeGwWrap section.messenger01 {}
.SefficeGwWrap section.messenger01 dl{margin:10px 0}
.SefficeGwWrap section.messenger01 dt{background:url('/img/etc/dot01.gif') no-repeat 5px 10px;padding:5px 0 5px 15px;font-weight:bold;color:#000}
.SefficeGwWrap section.messenger01 dd{padding-left:15px}
.SefficeGwWrap section.messenger02 div{text-align:center}

/**************************************   미디어스크린 조절 시작 **************************************/
@media screen and (max-width:1100px){
.SefficeGwWrap {width:100%}
/* V2.0 */
.SefficeGwWrap section.function .function_V20 {overflow:hidden;padding:40px 40px}
.SefficeGwWrap section.feature div p.V20{float:none}
.SefficeGwWrap section.organization div img{width:100%}
/* Onul V1.0 */
.SefficeGwWrap section.feature div p{float:none;text-align:center;width:100%;}
.SefficeGwWrap section.feature div p.onulV10Left{background:url('/img/gw/onulV10_arrow02.png') no-repeat center bottom;padding:0 0 60px 0;}
.SefficeGwWrap section.function .gw_onulV10 {overflow:hidden;padding:40px 60px}
/* 모바일 */
.SefficeGwWrap section.Mscreen div img, .SefficeGwWrap section.summary p.img01 img{width:100%}
/* Seffice Onul V2.0 */
.SefficeGwWrap section.function .function_mobile, .SefficeGwWrap section.function .onulware{padding:40px}
/* 포탈 */
.SefficeGwWrap section .diagram img{width:100%;height:auto}
/* baw */
.SefficeGwWrap section .gw_bawDiv .monitor li img{width:100%;}
.SefficeGwWrap section .gw_bawimg img{width:80%;height:auto}

/* 메신저 */
.SefficeGwWrap section.messenger02 div img{width:100%;}

}

@media screen and (max-width:560px){

/* V2.0 */
.SefficeGwWrap section{font-size:1.1em;}
.SefficeGwWrap section.summary p.img img{width:100%;}
.SefficeGwWrap section.feature div p, .SefficeGwWrap section.feature div ul{float:none;}
.SefficeGwWrap section.feature div{background:#f5f4f8;padding:10px}
.SefficeGwWrap section.function .function_V20 {overflow:hidden;padding:40px}
/* Onul V1.0 */
.SefficeGwWrap section.feature div p.onulV10Left  img, .SefficeGwWrap section.feature div p.onulV10Right  img{width:100%;height:auto}
.SefficeGwWrap section.function .gw_onulV10 {overflow:hidden;padding:40px}
/* Seffice Onul V2.0 */
/* portal */
.SefficeGwWrap section.Portal .PortalStep{background:url('/img/gw/portal_line.png') repeat-y 80px 0;padding-top:30px;display:table;width:100%}
.SefficeGwWrap section.Portal .PortalStep dl{display:block;overflow:hidden;width:100%;text-align:center;margin-left:0px;margin-bottom:15px}
.SefficeGwWrap section.Portal .PortalStep dt span{background:#fff}
.SefficeGwWrap section.Portal .PortalStep dt{float:left;padding-top:135px;font-size:1.2em;width:165px;color:#000;font-weight:bold;margin-bottom:15px}
.SefficeGwWrap section.Portal .PortalStep dd{float:none;font-size:.9em;margin-left:170px}
.SefficeGwWrap section.Portal .PortalStep dd:nth-child(2) {margin-top:30px;}

/* baw */
.SefficeGwWrap section .gw_bawDiv .monitor li{display:block;width:100%;padding:10px;box-sizing:border-box}
.SefficeGwWrap section .gw_bawimg img{width:100%;height:auto}

/* 메신저 */
.SefficeGwWrap section.messenger01 img{width:100%;}


}