@charset "utf-8";
/* CSS Document */

body{background:#eef5f3;}
#wrap{position:relative;}
#wrap:after{
    display:block;
    content:"";
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b550+0,008b93+100 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: url("../images/common/bg_wrap.png") bottom center no-repeat;
    background-size: cover;
    z-index: -1;
}

#header{position: relative;}

#content{padding: 20px 40px 130px;}
#content p.welcome{
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}
#content p.welcome em{}

#content ul.menu{
    margin: 10px -20px 0;
}
#content ul.menu:after{display:block; clear:both; content:"";}

#content ul.menu li{position:relative;float: left;width: 50%;}
#content ul.menu li a:after{display:block;content:"";position:absolute;top: 42px;left: 42px;width:42px;height:42px;}

#content ul.menu .menu1 a:after{background: url("../images/common/ico_zip.png") 0 0 no-repeat;}
#content ul.menu .menu2 a:after{background: url("../images/common/ico_zip.png") -90px 0 no-repeat;}
#content ul.menu .menu3 a:after{background: url("../images/common/ico_zip.png") -179px 0 no-repeat;}
#content ul.menu .menu4 a:after{background: url("../images/common/ico_zip.png") -271px 0 no-repeat;}
#content ul.menu .menu5 a:after{background: url("../images/common/ico_zip.png") -357px 0 no-repeat;}
#content ul.menu .menu6 a:after{background: url("../images/common/ico_zip.png") -448px 0 no-repeat;}
#content ul.menu .menu7 a:after{background: url("../images/common/ico_zip.png") 0px -170px no-repeat;}

#content ul.menu li div{}
#content ul.menu li div a{display: flex;justify-content: right;align-items: flex-end;height: 105px;margin: 15px;padding: 30px;border-radius: 8px;background:#fff;font-size: 17px;text-align: right;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
#content ul.menu li div a span{display: flex;align-items: center;height: 40px;line-height: 22px;}

@media screen and (min-width:381px) {
	.mx380{display:none;}
}
@media screen and (min-width:801px) {
    #wrap:after{
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b550+0,008b93+100 */
        background: #00b550; /* Old browsers */
        background: -moz-linear-gradient(left,  #00b550 0%, #008b93 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left,  #00b550 0%,#008b93 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right,  #00b550 0%,#008b93 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b550', endColorstr='#008b93',GradientType=1 ); /* IE6-9 */
    }
}

@media screen and (max-width:470px) {
	#content ul.menu li div a{padding: 30px 15px;}
}

@media screen and (max-width:420px) {
	#wrap:after{height: 250px;}
	
    #content{padding: 0 25px 100px;}
	#content ul.menu li div a{padding: 15px 10px;text-align: center;justify-content: center;}
    #content ul.menu li a:after{left: 50%;margin-left: -21px;}
}