html,body{
margin:0px;
padding:0px;
font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans CN",sans-serif,Arial;
font-size:12px;
height: 100%
}
div{
margin:auto;
padding:0px;
}
ul,li{
margin:0px;
padding:0px;
}
img{
border:0px;
}
@font-face{
font-family:avenirpro_bold;
src: url("avenirpro_bold.otf")
}
.body_dark{
background-color:#0c0c0c;
}

.index_bg{
width:100%;
height:100%;
background: url("../images/bg_seafoodwell_index_m.jpg");
background-position: top center;
background-repeat: no-repeat;
background-size:cover;
display: block;
position:relative;
}

.index_button{
width: 70%;
height:88%;
display: block;
position:relative;
}
.index_button .left{
float:left;
text-align:left;
display: inline-block;
position:absolute;
left: 0px;
bottom:0px;
}
.index_button .left .left_text_cn{
float: left;
clear: both;
font-size: 1em;
font-weight: bold;
color: #2290ee;
}
.index_button .left .left_text_en{
float: left;
clear: both;
font-size: 1.7em;
font-weight:900;
font-family:avenirpro_bold,arial;
color: #000000;
text-decoration: none;
}
.index_button .left .left_text_en:hover{
color: #2290ee;
text-decoration:underline;
}
.index_button .right{
float:right;
text-align:right;
display: inline-block;
position:absolute;
right: 0px;
bottom:0px;
}
.index_button .right .right_text_cn{
float: right;
clear: both;
font-size: 1em;
font-weight: bold;
color: #2290ee;
}
.index_button .right .right_text_en{
float: right;
clear: both;
font-size: 1.7em;
font-weight:900;
font-family:avenirpro_bold,arial;
color: #000000;
text-decoration: none;
}
.index_button .right .right_text_en:hover{
color: #2290ee;
text-decoration:underline;
}

.index_footer{
width: 100%;
height:24px;
text-align: center;
font-size: 0.8em;
font-family:avenirpro_bold,arial;
color: #CCCCCC;
position:absolute;
bottom:0px;
}


.works_header_container{
clear: both;
width:100%;
height:auto;
display: block;
position: relative;
}
.works_header_container img{
width: 100%;
min-width: 1130px;
height: auto;
}
.works_detail_header{
clear: both;
width: 100%;
min-width: 1130px;
height: 170px;
position: absolute;
top:0;
}
.works_detail_header .logo{
float: left;
width: 235px;
height: 85px;
}
.works_detail_header .logo img{
width: 235px;
min-width: 235px;
height: 85px;
}
.works_detail_header .menu{
float: right;
display: inline-block;
height: 85px;
text-align: right;
}
.works_detail_header .menu .menu_a{
float:right;
padding:22px 30px 20px 0px;
}
.works_detail_header .menu .menu_a a{
display:inline-block;
color: #FFFFFF;
text-decoration: none;
}
.works_detail_header .menu .menu_a a:hover{
display:inline-block;
color: #FFFFFF;
text-decoration:underline;
border-bottom: 1px #FFFFFF solid;
}
.works_detail_header .menu .menu_a .menu_en{
float: right;
clear: both;
font-size: 20px;
font-weight:800;
font-family: avenirpro_bold,arial;
height: 22px;
}
.works_detail_header .menu .menu_a .menu_cn{
float: right;
clear: both;
font-size: 12px;
}


.works_list_header_container{
clear: both;
width:100%;
height:auto;
display: block;
position: fixed;
top: 0px;
z-index: 1;
}
.works_list_header{
clear: both;
width: 100%;
height: 50px;
background-color: #000000;
}
.works_list_header .logo{
float: left;
width: 50px;
height: 50px;
background: url("../images/works_list_logo_m.png") no-repeat;
background-size:cover;
}

.works_list_header .menu{
float: right;
display: inline-block;
height: 50px;
text-align: right;
}
.works_list_header .menu .menu_a{
float:right;
padding:18px 18px 20px 4px;
}
.works_list_header .menu .menu_a a{
display:inline-block;
color: #FFFFFF;
text-decoration: none;
}
.works_list_header .menu .menu_a a:hover{
display:inline-block;
color: #FFFFFF;
text-decoration:underline;
border-bottom: 1px #FFFFFF solid;
}
.works_list_header .menu .menu_a .menu_en{
float: right;
clear: both;
font-size: 1.2em;
font-weight:800;
font-family: avenirpro_bold,arial;
height: 20px;
}
.works_list_header .menu .menu_a .menu_cn{
display: none;
float: right;
clear: both;
font-size: 12px;
}



.channel_footer{
clear:both;
height:10px;
width:100%;
font-size: 1em;
font-weight: 900;
font-family: avenirpro_bold,arial;
text-align: center;
color: #B9B9B9;
}
.channel_footer_logo{
float:right;
padding-top: 30px;
padding-right: 10px;
}
.channel_footer_logo img{
width: 50px;
height: 40px;
}
.channel_footer_box{
clear: both;
padding-top: 36px;
padding-bottom: 24px;
}
.channel_footer a{
font-size: 1em;
color: #B9B9B9;
text-decoration: none;
}
.channel_footer a:hover{
color: #B9B9B9;
text-decoration: underline;
}


.works_footer{
clear:both;
height:180px;
width:100%;
min-width:1130px;
font-size: 14px;
font-family: avenirpro_bold,arial;
text-align: right;
}
.works_footer_logo{
float:right;
padding-top: 60px;
margin-right: 20px;
}
.works_footer_logo img{
width: 75px;
height: 60px;
}
.works_footer_box{
float:right;
padding-top: 80px;
}
.works_footer a{
font-size: 14px;
color: #000000;
text-decoration: none;
}
.works_footer a:hover{
color: #2290ee;
text-decoration: underline;
}
.works_footer_dark{
clear:both;
height:180px;
width:100%;
min-width:1130px;
font-size: 14px;
font-family: avenirpro_bold,arial;
color: #888;
text-align: right;
}
.works_footer_dark a{
font-size: 14px;
color: #888;
text-decoration: none;
}
.works_footer_dark a:hover{
color: #2290ee;
text-decoration: underline;
}


.works_001_5184app_banner{
background: url("../works/images/works_001_5184app_banner.jpg") center top no-repeat;
background-size: 1920px auto;
}
.works_002_xrkapp_banner{
background: url("../works/images/works_002_xrkapp_banner.jpg") center top no-repeat;
background-size: 1920px auto;
}


.works_detail_body{
clear:both;
width: 100%;
}
.works_detail_title{
clear:both;
width: 65%;
min-width: 1090px;
text-align: center;
font-size: 28px;
font-weight: bold;
color: #333;
padding: 80px 20px 50px 20px;
}
.works_detail_description{
clear:both;
width: 65%;
min-width: 1090px;
text-align: center;
line-height: 180%;
font-size: 14px;
color: #999;
padding: 0 20px 80px 20px;
margin-bottom: 20px;
border-bottom: 1px #DDDDDD solid;
}
.works_detail_title_dark{
clear:both;
width: 65%;
min-width: 1090px;
text-align: center;
font-size: 28px;
font-weight: bold;
color: #FFF;
padding: 80px 20px 50px 20px;
}
.works_detail_description_dark{
clear:both;
width: 65%;
min-width: 1090px;
text-align: center;
line-height: 180%;
font-size: 14px;
color: #888;
padding: 0 20px 80px 20px;
margin-bottom: 20px;
border-bottom: 1px #333 solid;
}
.works_detail_box{
clear:both;
overflow:hidden;
width:100%;
min-width: 1130px;
padding: 0;
margin:0 auto;
}
.works_detail_box img{
clear: both;
display: block;
width: 100%;
min-width: 1130px;
border: 0;
}



.works_list_container{
clear: both;
display:block;
width: 100%;
height: auto;
margin-top: 50px;
}
.works_bg_m{
background: url("../images/works_bg_m.png") top;
background-repeat: no-repeat;
background-size:100%;
}
.about_bg_m{
background: url("../images/about_bg_m.png") top;
background-repeat: no-repeat;
background-size:100%;
}
.works_list_container_title{
clear: both;
display: inline-block;
width: 100%;
padding: 66px 0;
}
.works_list_container_title .title_1{
display: block;
overflow:hidden;
font-family: avenirpro_bold,arial;
font-size: 4.4em;
font-weight: 900;
color: #000000;
width: 208px;
text-align: center;
}
.works_list_container_title .title_2{
display: block;
overflow:hidden;
font-size: 1.4em;
font-weight: bold;
color: #000000;
width: 200px;
text-align: right;
margin-top: -4px;
}
.works_list_container_title .title_2_works{
padding-right: 2px;
}
.works_list_container_title .title_2_about{
padding-right: 10px;
}
.works_list_box{
display: block;
overflow:hidden;
padding: 0px 25px;
margin-bottom: 25px;
}
.works_list_box img{
clear: both;
display:inline-block;
width: 100%;
height: auto;
box-shadow: 0px 20px 15px -10px rgba(0, 0, 0, 0.08);
border-radius: 16px;
}
.works_list_box a{
display: inline-block;
overflow: hidden;
font-size: 12px;
font-weight: normal;
color: #CCC;
text-decoration: none;
text-align: center;
}
.works_list_box a:hover{
text-decoration: none;
color: #CCC;
}
.works_list_box a:hover img{
width: 100%;
height: auto;
border-radius:12px;
}
.works_list_box a span{
clear:both;
}


.works_list_body{
background:  url("../images/bg_works_m.png") top no-repeat;
background-size:100%;
}

.about_list_body{
background:  url("../images/bg_works_m.png") top no-repeat;
background-size:100%;
}


.about_list_box{
width: 90%;
height: 23vw;
margin-bottom:24px;
position: relative;
z-index: 999;
}
.about_list_box .about_title_1{
left:7%;
top:18%;
font-size: 1.9em;
font-weight: 900;
color: #FFFFFF;
font-family:avenirpro_bold,arial;
position: absolute;
}
.about_list_box .about_title_2{
right:22px;
bottom:15px;
font-size: 1.5em;
font-weight: 900;
color: #FFFFFF;
font-family:avenirpro_bold,arial;
position: absolute;
}

.bg_wechat{
background:url("../images/about_bg_wechat_m.png") no-repeat;
background-size:100%;
box-shadow: 0px 20px 15px -10px rgba(31, 197, 50, 0.3);
border-radius: 16px;
}
.bg_qq{
background:url("../images/about_bg_qq_m.png") no-repeat;
background-size:100%;
box-shadow: 0px 20px 15px -10px rgba(69, 147, 243, 0.3);
border-radius: 16px;
}
.bg_skype{
background:url("../images/about_bg_skype_m.png") no-repeat;
background-size:100%;
box-shadow: 0px 20px 15px -10px rgba(51, 196, 243, 0.3);
border-radius: 16px;
}
.bg_phone{
background:url("../images/about_bg_phone_m.png") no-repeat;
background-size:100%;
box-shadow: 0px 20px 15px -10px rgba(0, 0, 0, 0.15);
border-radius: 16px;
}
.bg_email{
background:url("../images/about_bg_email_m.png") no-repeat;
background-size:100%;
box-shadow: 0px 20px 15px -10px rgba(0, 0, 0, 0.15);
border-radius: 16px;
}
.bg_homepage{
background:url("../images/about_bg_homepage_m.png") no-repeat;
background-size:100%;
box-shadow: 0px 20px 15px -10px rgba(0, 0, 0, 0.15);
border-radius: 16px;
}