/* common */
#wrapper {position: relative;}
.layout {width:880px;margin: 0 auto;}

/* header */
#header {position: fixed;top: 0;left:0;width:100%;z-index: 999;background-color: #ffffff;}
#header .layout {display:flex;justify-content:space-between;align-items:center;height:60px;}
#header h1 {display: inline-flex;}
#header h1 img {height:24px;}
#header .btn {font-size: 14px;font-weight: bold;opacity:0.75;color:#ffffff;}
#header .btn:hover {opacity: 1;}

/* container */
#container {position:relative;margin-top: 60px;}
#container .contop {position:relative;padding:60px 0;background-color:#3f3f3f;}
#container .contop * {color:#fff;font-weight:bold}
#container .contop strong {font-size:24px;}
#container .contop h2 {margin-top:15px;font-size:48px;text-transform: uppercase;}

#container .cont {padding-top:80px;}
#container .cont ul {position:relative;padding-bottom:40px;border-bottom:1px solid rgba(0,0,0,0.05);}
#container .cont ul:after, #container .cont .app div:after {content: "";display:block;clear:both;}
#container .cont ul li, #container .cont ul li a {-webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#container .cont ul li {float:left;margin:0 10px;background-color:#fcfcfc;border-radius:10px;border:1px solid #ececec;}
#container .cont ul li:hover {background-color:#fff;box-shadow: 0 5px 20px rgba(0,0,0,0.05);}

#container .cont .erp li {width:calc(17.5% - 16px);}
#container .cont .erp li a {height:110px;display:flex;justify-content: center;align-items: center;width:100%;font-size:18px;font-weight:bold;text-align:center;line-height:1.3;}
#container .cont .erp li.red {width:calc(30% - 16px);background-color: #d21818;}
#container .cont .erp li.red a {font-size:36px;font-weight:bold;color:#fff;}
#container .cont .erp li:first-of-type {margin-left: 0;}
#container .cont .erp li:last-of-type {margin-right: 0;}

#container .cont .app {padding:40px 0;}
#container .cont .app div {margin-bottom: 20px;}
#container .cont .app div:last-of-type {margin-bottom: 0;}
#container .cont .app li {width:calc(20% - 16px);}
#container .cont .app li:first-of-type, #container .cont .app li:nth-of-type(5n + 1) {margin-left: 0;}
#container .cont .app li:last-of-type, #container .cont .app li:nth-of-type(5n) {margin-right: 0;}
#container .cont .app li a {display:block;padding:17px 0;text-align: center;font-size:16px;font-weight: 500;}
#container .cont .app li span {width: 80px;height:80px;display:block;margin: 0 auto 20px;}

#container .cont .app div:nth-of-type(1) li:nth-of-type(1) span {background: url(../img/icon_purchase.svg) no-repeat center;}
#container .cont .app div:nth-of-type(1) li:nth-of-type(2) span {background: url(../img/icon_purchase.svg) no-repeat center;}
#container .cont .app div:nth-of-type(1) li:nth-of-type(3) span {background: url(../img/icon_kmes.svg) no-repeat center;}
#container .cont .app div:nth-of-type(1) li:nth-of-type(4) span {background: url(../img/icon_phrm.svg) no-repeat center;}
#container .cont .app div:nth-of-type(1) li:nth-of-type(5) span {background: url(../img/icon_pp.svg) no-repeat center;}
#container .cont .app div:nth-of-type(2) li:nth-of-type(1) span {background: url(../img/icon_qcoi.svg) no-repeat center;}
#container .cont .app div:nth-of-type(2) li:nth-of-type(2) span {background: url(../img/icon_cart.svg) no-repeat center;}
#container .cont .app div:nth-of-type(2) li:nth-of-type(3) span {background: url(../img/icon_visitor.svg) no-repeat center;}
#container .cont .app div:nth-of-type(2) li:nth-of-type(4) span {background: url(../img/icon_brazing.svg) no-repeat center;}
#container .cont .app div:nth-of-type(2) li:nth-of-type(5) span {background: url(../img/icon_fgm.svg) no-repeat center;}
#container .cont .app div:nth-of-type(3) li:nth-of-type(1) span {background: url(../img/icon_boxing.svg) no-repeat center;}
#container .cont .app div:nth-of-type(3) li:nth-of-type(2) span {background: url(../img/icon_keyboard.svg) no-repeat center;}
#container .cont .app div:nth-of-type(3) li:nth-of-type(3) span {background: url(../img/icon_materials.svg) no-repeat center;}
#container .cont .app div:nth-of-type(3) li:nth-of-type(4) span {background: url(../img/icon_paste.svg) no-repeat center;}
#container .cont .app div:nth-of-type(3) li:nth-of-type(5) span {background: url(../img/icon_purchase.svg) no-repeat center;}

#container .cont .add {padding:40px 0;border-bottom: 0;text-align: center;}
#container .cont .add li {display:inline-block;float: none;width:70%;margin-bottom: 20px;}
#container .cont .add li:last-of-type {margin-bottom: 0;}
#container .cont .add li a {display:block;padding:10px;text-align:center;}

/* footer */
#footer {position:relative;width:100%;}
#footer .layout {padding:24px 0;border-top:1px solid rgba(0,0,0,0.05);}
#footer .layout p {font-size: 12px;opacity: 0.6;text-align: center;}

@media all and (max-width:880px) {
    .layout {width:92%;}
    #container .layout {padding:50px 0;}
    #container li {margin: 0 20px 20px;}
}