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

#service{position:relative;margin: 0 auto; padding-bottom: 80px; transition: all .35s; }
#service.active {transform: translateX(-220px);}

#service .feedback{  margin: 0 auto; padding: 20px; box-sizing: border-box; border:1px solid #ddd;}
#service .feedback .tagnav{margin:0 auto;}
#service .feedback .tagnav>.mob_select{display:none;}
#service .feedback .tagnav>.nav{padding:0;margin:0 auto;}
#service .feedback .tagnav>.nav>a{ position:relative; display:block; float:left; width:16%; margin: 0 .33%; color:#fff; border-radius: 3px; background:rgb(219 38 29); text-align:center;padding:20px 0; box-sizing:border-box;}
#service .feedback .tagnav>.nav>a>i{ font-size: 5rem;}
#service .feedback .tagnav>.nav>a>span{display:block;padding:10px 0; font-size:1.8rem;}
#service .feedback .tagnav>.nav>a:hover{background: rgba(53,59,73,1);}
#service .feedback .tagnav>.nav>a.A{ background:#eee;color:rgba(144,40,51,1);}
#service .feedback .tagnav>.nav>a.A>i>img{ top:-64px;}
#service .feedback .tagcon{padding:50px 10px;}
#service .feedback .tagcon>.text{color: #666;font-size: 1.4rem;line-height: 3rem;margin-bottom: 20px;}
#service .feedback .tagcon>.text h3{display:block; font-weight:bold;}
#service .feedback .tagcon>.badging{color: #666;font-size: 1.4rem;line-height: 3rem; text-align:right;}
#service .feedback .tagcon>.title { padding:10px 0; font-size: 1.8rem; font-weight:bold; color: #666;}
#service .feedback .tagcon>.form{padding:0; margin:0 auto;}
#service .feedback .tagcon>.form .w50{  float:left; width:40%; margin-right:10%;}
#service .feedback .tagcon>.form .w50:nth-child(even){ float:right;}
#service .feedback .tagcon>.form .w100{ float:none!important; width:90%; margin-right:10%;clear:both;}
#service .feedback .tagcon>.form .item{ position:relative; padding:10px 0 10px 130px; box-sizing:border-box; text-align:left;}
#service .feedback .tagcon>.form .item>.tit{display:block; margin-left:-130px; float:left; width:130px;line-height:36px; font-size:1.6rem; color:#666;}
#service .feedback .tagcon>.form .item>.tit .ast{display:inline-block; float:left; width:20px; height:36px; line-height:36px; font-size:1.6rem; color:#ff0000;}
#service .feedback .tagcon>.form .item>.inputtext { float:left; width:100%; box-sizing:border-box; border: 1px solid #ddd;padding-left: 10px;height: 36px;line-height: 36px;font-size: 1.5rem;}
#service .feedback .tagcon>.form .item>.textareatext { float:left; width:100%; box-sizing:border-box; border: 1px solid #ddd;padding:10px;line-height: 30px;font-size: 1.5rem;}
#service .feedback .tagcon>.form .item .select{ position:relative;margin:0 auto;}
#service .feedback .tagcon>.form .item .select>.in{ position:relative; display:block; cursor:pointer; height:36px;line-height:36px; padding:0 10px; border:1px solid #ddd;background:#fff; font-size:1.5rem; color:#666;}
#service .feedback .tagcon>.form .item .select>.in:after{ position:absolute;z-index:1; right:10px;top:50%; margin-top:-8px; width:16px; height:16px; line-height: 16px; overflow: hidden; color: #999; font-family: iconfont; font-size: 1.6rem; content:'\e63e'; transition:all .35s; }
#service .feedback .tagcon>.form .item .select>.active:after{transform:rotate(180deg)}
#service .feedback .tagcon>.form .item .select>.con{display:none; position:absolute;z-index:3;left:0;top:36px; padding:5px 0; width:100%; max-height:170px; overflow-y:auto; box-sizing:border-box; background:#fff; border:1px solid #ddd;}
#service .feedback .tagcon>.form .item .select>.con>a{display:block;padding:10px; color:#666; font-size:14px;transition:all .35s;}
#service .feedback .tagcon>.form .item .select>.con>a:hover{background:#f7f7f7;}
#service .feedback .tagcon>.form .code .inputtext{ width:50%; }
#service .feedback .tagcon>.form .code .chk{position:relative;top: -4px; margin-left:10px;}
#service .feedback .tagcon>.form .btn{ text-align:center;margin:0 auto;padding:30px 0;}
#service .feedback .tagcon>.form .btn>input{ position:relative; display:inline-block; background:rgb(219 38 29); border:0; cursor:pointer; overflow:hidden; box-sizing:border-box;padding:15px 80px; border-radius: 30px; font-size:1.8rem; color:#fff; transition:all .35s;}
#service .feedback .tagcon>.form .btn>input:hover{background: rgba(53,59,73,1);}



@media only screen and (max-width: 1080px){
    #service .feedback .tagnav>.nav>a>span{ font-size:1.5rem;}

}
@media only screen and (max-width: 960px){

    #service .feedback .tagnav{ position:relative;margin:0 auto;}
    #service .feedback .tagnav>.mob_select{ display:block; position:relative; background: #eee; border-bottom:1px solid #ddd;padding:20px; cursor:pointer;}
    #service .feedback .tagnav>.mob_select:after{ position:absolute;z-index:1; right:20px;top:50%; margin-top:-10px; width:21px; height:21px; color: rgba(144,40,51,1); font-family: iconfont; font-size: 1.8rem; content:'\e63e'; transition:all .35s; }
    #service .feedback .tagnav>.mob_select>.in>i{ position:relative; display:block; float:left; width:64px;height:64px; line-height: 64px; text-align: center; background: rgba(144,40,51,1); color: rgba(255,255,255,1); border-radius: 5px; font-size: 4.2rem; overflow:hidden;margin:0 auto;}
    #service .feedback .tagnav>.mob_select>.in>i>img{ position:relative;z-index:2;left:0;top:0; width:100%; height:auto;}
    #service .feedback .tagnav>.mob_select>.in>span{display:block; float:left; padding:0 20px; line-height:64px; font-size:2rem; color:rgba(144,40,51,1);}
    #service .feedback .tagnav>.nav{ display:none; position:absolute;z-index:9;left:0;top:105px; width:100%; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
    #service .feedback .tagnav>.nav>a{ float:none; width:100%; box-sizing:border-box; padding:10px 20px; background:#f7f7f7; border-bottom:1px solid #eee;transition: all .35s; }
    #service .feedback .tagnav>.nav>a:last-child{border: 0;}
    #service .feedback .tagnav>.nav>a:after{ display:none;}
    #service .feedback .tagnav>.nav>a>i{ float:left; color: rgba(144,40,51,1);}
    #service .feedback .tagnav>.nav>a>span{display:block; float:left; padding:0 20px; line-height:64px; font-size:1.8rem; color:rgba(144,40,51,1);}
    #service .feedback .tagnav>.nav>a:hover{ background:#fff;color:rgba(144,40,51,1);}
    #service .feedback .tagnav>.nav>a.A{background: rgba(144,40,51,1);}
    #service .feedback .tagnav>.nav>a.A>i{color: #fff;}
    #service .feedback .tagnav>.nav>a.A>span{color: #fff;}
    #service .feedback .tagcon>.form .item {padding-left: 110px;}
    #service .feedback .tagcon>.form .item>.tit{font-size:1.4rem;width: 110px; margin-left: -110px;}
    #service .feedback .tagcon>.form .item>.inputtext { font-size: 1.4rem;}
    #service .feedback .tagcon>.form .item>.textareatext { font-size: 1.4rem;}


}

@media only screen and (max-width: 780px){
    #service .feedback .tagcon{padding:20px;}
    #service .feedback .tagcon>.text{font-size:1.3rem;line-height:28px;}
    #service .feedback .tagcon>.badging{font-size: 1.3rem;line-height: 28px;}
    #service .feedback .tagcon>.title { font-size: 1.6rem;}
    #service .feedback .tagcon>.form .w50{  float:none; width:100%; margin-right:0;clear:both;}
    #service .feedback .tagcon>.form .w50:nth-child(even){ float:none;}
    #service .feedback .tagcon>.form .w100{ float:none!important; width:100%; margin-right:0;clear:both;}
    #service .feedback .tagcon>.form .item>.tit{font-size:1.4rem;}
    #service .feedback .tagcon>.form .item>.inputtext { font-size: 1.4rem;}
    #service .feedback .tagcon>.form .item>.textareatext {font-size: 1.4rem;}
    #service .feedback .tagcon>.form .item .select>.in{ font-size:1.4rem;}

}
@media only screen and (max-width: 640px){

    #service .feedback{border:0;}
    #service .feedback .tagnav{ width:100%; padding:10px 0}
    #service .feedback .tagnav>.mob_select{padding:10px 20px;}
    #service .feedback .tagnav>.mob_select>.in>i{ width:50px;height:50px; line-height: 50px; font-size: 3.6rem; }
    #service .feedback .tagnav>.mob_select>.in>span{ font-size:1.6rem; line-height:50px;}
    #service .feedback .tagnav>.nav{ top:78px;}
    #service .feedback .tagnav>.nav>a>i{ width:42px;height:42px; line-height: 42px; font-size: 3.2rem; overflow:hidden;}
    #service .feedback .tagnav>.nav>a>span{font-size:1.6rem; line-height:42px;}
    #service>.feedback .tagcon{padding:0;}

}
@media only screen and (max-width: 420px){

    #service .feedback .tagnav>.nav>a>span{font-size:1.4rem;}
    #service .feedback .tagcon>.text{padding-top:20px;}
    #service .feedback .tagcon>.form .item{padding:10px 0 10px 105px;}
    #service .feedback .tagcon>.form .item>.tit{ margin-left:-105px; width:105px; font-size:1.3rem;}
    #service .feedback .tagcon>.form .item>.tit .ast{ width:20px; font-size:1.3rem; color:rgba(144,40,51,1);}

}