@font-face
	{
	font-family: myFirstFont;
	src: url('../fonts/PALA.TTF')
}

body,div,p,a,ul,li,ol,img{display: block;padding: 0;margin: 0;box-sizing: border-box;font-family:myFirstFont;}
body{width: 100%;}
a{text-decoration: none;}
ul,li,ol{list-style: none;}
img{max-width: 100%;}

.w1200{width: 1200px;margin: auto;}
.header{width: 100%;}
.cbanner img{width: 100%;}
.pc_header{background-color: #fff;}

#posite{display: flex;color: #000;margin-top: 20px;}
#posite>a{color: #000;}

#pc_page{display: flex;justify-content: center;margin-top: 20px;}
#phone_page{display: none;} 
#pc_page li{margin-left: 5px;}
#pc_page li a{padding: 5px 10px;border: #ccc solid 1px;color: #000;}
#pc_page li.active a{background: #f08200;color: #fff;}
#pc_page_c{margin: 20px;}
#pc_page_c a{color: #000;}


/* 栏目导航 */
#heading{margin-top: 20px;}
#heading #top{display: none;}
#heading #list_cont{display: flex;justify-content: center;}
#heading #list_cont a{color: #f08200;padding: 10px 20px;border-radius: 20px;font-weight: bold;transition: all .5s;margin-left: 5px;}
#heading #list_cont a.active{color: #fff;background: #f08200;}
#heading #list_cont a:hover{color: #f08200;box-shadow: 0 0 2px 1px #f08200;}
#heading #list_cont a.active:hover{color: #fff;}


/* pc端头部 */
.phone_header{display: none;}
.pc_header .logo_cont{display: flex;padding: 15px 0;align-items: center;justify-content: space-between;}
.pc_header .logo_cont>.logo{width: 584px;height: 60px;}
.pc_header .logo_cont>div{display: flex;align-items: center;}
.pc_header .logo_cont>div>img{width: 40px;height: 40px;}
.pc_header .logo_cont>div>div{margin-left: 16px;}
.pc_header .logo_cont>div>div p{color: #666;font-size: 14px;}
.pc_header .logo_cont>div>div p:last-child{font-size: 28px;color: #f08200;font-weight: bold;}

.pc_header .head_nav{background: #3f4a59;display: flex;justify-content: center;}
.pc_header .head_nav .nav_list{position: relative;}
.pc_header .head_nav .nav_list>a{padding: 20px 50px;color: #fff;font-size: 18px;position: relative;}
.pc_header .head_nav .nav_list>a:hover{background: #f08200;}
.pc_header .head_nav .nav_list>a.active{background: #f08200;}

.pc_header .head_nav .nav_list ul{position: absolute;width: 100%;display: none;z-index: 99;}
.pc_header .head_nav .nav_list ul li a{text-align: center;background: #3f4a59;color: #fff;font-size: 18px;padding: 20px 0;}
.pc_header .head_nav .nav_list ul li a:hover{background: #f08200;}

@media screen and (max-width: 1200px) {
  .w1200{width: 100%;}
  .pc_header .head_nav .nav_list>a{padding: 20px 30px;}
}

@media screen and (max-width: 980px) {
  .pc_header .logo_cont>.logo{width: 43vw;height: 5vw;}
  .pc_header .logo_cont>div>img{width: 5vw;height: 5vw;}
  .pc_header .head_nav .nav_list>a{font-size: 16px;padding: 20px 22px;}
}


@media screen and (max-width: 768px) {
  .pc_header{display: none;}
  #pc_page{display: none;}
  #phone_page{display: flex;justify-content: center;align-items: center;}
  #phone_page span{padding: 5px;font-size: 12px;background: #f08200;color: #fff;border: #ccc solid 1px;margin-left: 2px;}
  #phone_page a{padding: 5px;font-size: 12px;color: #000;border: #ccc solid 1px;margin-left: 2px;margin-top: 3px;}
  #pc_page_c{margin: 10px 0;}
  #pc_page_c a{font-size: 12px;}

  /* 栏目导航 */
  #heading{margin-top: 0;}
  #heading #top{display: flex;justify-content: space-between;padding: 10px;background: #3f4a59;align-items: center;border-top: #9e9e9e solid 1px;}
  #heading #top div{width: 95vw;color: #fff;}
  #heading #top img{width: 5vw;height: 4vw;cursor: pointer;transition: all .5s;}
  #heading #top img.active{transform: rotate(180deg);}
  #heading #list_cont{flex-wrap: wrap;display: none;}
  #heading #list_cont a{width: 100%;border: #ccc dashed 1px;border-radius: 0;margin-left: 0;}
  #heading #list_cont a.active{background: inherit;color: #f08200;}


  /* 手机端头部 */
  .phone_header{display: block;}
  .phone_header .header_heading{display: flex;justify-content: space-between;padding: 10px;width: 100%;background: #3f4a59;}
  .phone_header .header_heading a{width: 250px;}
  .phone_header .header_heading a>img{width: 100%;}
  .phone_header .header_heading div{width: 50px;position: relative;}
  .phone_header .header_heading div span{width: 50px;background: #fff;position: absolute;height: 2px;top:15px;transform-origin: left;transition: all .5s;}
  .phone_header .header_heading div span:nth-child(2){top: 35px;}
  .phone_header .header_heading div span:last-child{top: 55px;}
  .phone_header .header_heading div.active span:first-child{transform: rotate(55deg);}
  .phone_header .header_heading div.active span:last-child{transform: rotate(-55deg);}
  .phone_header .header_heading div.active span:nth-child(2){opacity: 0;}
  .phone_header .nav_cont{width: 100%;background: #666;display: none;}
  .phone_header .nav_cont .nav_list{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;border-bottom: #ccc solid 1px;}
  .phone_header .nav_cont .nav_list>a{width: 500px;color: #fff;font-size: 16px;padding: 20px;}
  .phone_header .nav_cont .nav_list>div{width: 20px;font-size: 20px;color: #fff;line-height: 60px;margin-right: 20px;transition: all .5s;transform-origin: center;}
  .phone_header .nav_cont .nav_list>div.active{transform: rotate(90deg);}
  .phone_header .nav_cont .nav_list>ul{width: 100%;padding: 0 40px;display: none;}
  .phone_header .nav_cont .nav_list>ul li{border-bottom: #ccc dashed 1px;}
  .phone_header .nav_cont .nav_list>ul li:last-child{border: none;}
  .phone_header .nav_cont .nav_list>ul li a{color: #fff;padding: 20px 0;}

}

@media screen and (max-width: 414px) {
  #posite{font-size: 12px;margin-top: 10px;}
  
  #heading #top{padding: 5px;}
  #heading #top div{font-size: 12px;}
  #heading #top img{width: 9vw;height: 7vw;}
  #heading #list_cont a{font-size: 12px;padding: 5px 10px;}


  .phone_header .header_heading a{width: 150px;}
  .phone_header .header_heading div{width: 35px;}
  .phone_header .header_heading div span{width: 35px;top: 10px;}
  .phone_header .header_heading div span:nth-child(2){top: 20px;}
  .phone_header .header_heading div span:last-child{top: 30px;}
  .phone_header .header_heading div.active span:last-child{transform: rotate(-36deg);}
  .phone_header .header_heading div.active span:first-child{transform: rotate(36deg);}
  .phone_header .nav_cont .nav_list>a{width: 250px;padding: 10px;font-size: 4px;}
  .phone_header .nav_cont .nav_list>div{line-height: 36px;font-size: 16px;}
  .phone_header .nav_cont .nav_list>ul{padding: 0 20px;}
  .phone_header .nav_cont .nav_list>ul li a{padding: 10px 0;font-size: 14px;}
}