/*yzi*/
.yzi{height: 409px;background: url("../images/yzi_bg.jpg") no-repeat center top;overflow: hidden;}
.yzi-box{float: right;width: 660px;padding-top: 130px;position: relative;}
.yzi-box h2{margin-bottom: 20px;}
.yzi-box h2 img{width: 505px;height: 50px;display: block;}
.yzi-box p{font-family: "宋体";font-size: 14px;line-height: 32px;color: #515151;}
.yzi-box em{position: absolute;width: 217px;left: -250px;top: 85px;}
.yzi-box em img{width: 217px;height: 201px;display: block;}

/*title*/
.title{height: 126px;background: url("../images/tit_bg.png") no-repeat center top;position: relative;font-family: "宋体";}
.title span{display: block;font-size: 44px;height: 54px;line-height: 54px;color: #050202;text-align: center;letter-spacing: 10px;padding-top: 35px;}
.title em{position: absolute;width: 640px;bottom: 0;right: 0;font-size: 22px;line-height: 30px;color: #050202;}

/*pro*/
.pro{height: 1167px;background: url("../images/pro_bg.jpg") no-repeat center top;padding-top: 88px;overflow: hidden;}
.pro-tab{height: 44px;line-height: 44px;padding-top: 54px;text-align: center;}
.pro-tab li{display: inline-block;width: 191px;height: 44px;margin: 0 30px;}
.pro-tab li a{display: block;height: 44px;font-family: "宋体";font-size: 20px;color: #030303;text-align: center;}
.pro-tab li.cur{background: url("../images/proa2.png") no-repeat center top;}
.pro-dx{padding-top: 60px;}
.pro-dx ul li{float: left;width: 380px;position: relative;margin: 0 30px 35px 0;}
.pro-dx ul li.ml0{margin-right: 0;}
.pro-dx ul li img{width: 380px;height: 380px;display: block;}
.pro-dx ul li em{position: absolute;width: 214px;height: 157px;background: url("../images/proa1.png") no-repeat center top;font-size: 18px;color: #fff;line-height: 130px;text-align: center;left: 83px;top: 82px;z-index: 1;transition: all 0.7s;-webkit-transition: all 0.7s;transform: scaleX(0);-webkit-transform: scaleX(0);}
.pro-dx ul li em::after{position: absolute;content: "";width: 50px;height: 2px;background-color: #fff;left: 50%;bottom: 60px;margin-left: -25px;}
.pro-dx ul li:hover em{transform: scaleX(1);-webkit-transform: scaleX(1);}
.pro-txt{padding-top: 76px;width: 610px;height: 270px;margin: 0 auto;}
.pro-txt-lf{float: left;width: 272px;height: 270px;}
.pro-txt-lf img{width: 272px;height: 270px;}
.pro-txt-rt{float: left;width: 334px;height: 270px;}
.pro-txt-rt p{float: right;height: 200px;padding-top: 15px;font-size: 14px;line-height: 30px;-webkit-writing-mode:vertical-rl;writing-mode: vertical-rl;writing-mode: tb-rl;color: #101826;}
.pro-wan{width: 210px;height: 104px;margin: 12px auto 0;}
.pro-wan img{width: 210px;height: 104px;}

/*yos*/
.yos{padding: 105px 0 115px;overflow: hidden;}
.yos-box{padding-top: 90px;}
.yos-box dl{float: left;width: 400px;}
.yos-box dt{height: 400px;overflow: hidden;}
.yos-box dt img{width: 400px;height: 400px;}
.yos-box dd{height: 334px;padding-top: 66px;background-color: #fff;}
.yos-box dd span{float: right;width: 50px;text-align: center;font-family: "宋体";font-size: 30px;line-height: 34px;color: #050202;padding-left: 76px;margin: 0 25px 0 20px;}
.yos-box dd p{float: right;width: 160px;height: 270px;line-height: 40px;font-family: "宋体";font-size: 18px;color: #050202;-webkit-writing-mode:vertical-rl;writing-mode: vertical-rl;writing-mode: tb-rl;letter-spacing: 1px;padding-left: 30px;position: relative;}
.yos-box dd p::before{position: absolute;content: "";width: 1px;height: 220px;background-color: #050202;left: 0;top: 0;}

/*anl*/
.anl{background: url("../images/anl_bg.jpg") no-repeat center top;background-size: 100% 100%;overflow: hidden;padding: 100px 0 124px;}
.anl-siz{padding-top: 70px;position: relative;}
.anl-tab{width: 960px;height: 44px;}
.anl-tab li{float: left;width: 240px;height: 44px;}
.anl-tab li a,.anl-siz span a{display: block;line-height: 44px;font-family: "宋体";font-size: 26px;color: #050202;text-align: center;}
.anl-tab li.cur{background: url("../images/proa2.png") no-repeat center top;}
.anl-siz span{position: absolute;width: 240px;height: 44px;right: 0;bottom: 0;}
.anl-siz span:hover{background: url("../images/proa2.png") no-repeat center top;}
.anl-dx{padding-top: 50px;}
.anl-dx p img{width: 1200px;height: 600px;display: block;}
.anl-dx ul{padding-top: 46px;}
.anl-dx ul li{float: left;width: 388px;margin-right: 18px;overflow: hidden;}
.anl-dx ul li.ml0{margin-right: 0;}
.anl-dx ul li img{width: 388px;height: 258px;display: block;}

/*adv*/
.adv{overflow: hidden;}
.adv-tab{padding: 56px 0 35px;height: 60px;}
.adv-tab li{float: left;width: 300px;height: 60px;line-height: 60px;font-family: "細明體";font-size: 32px;color: #1e1e1e;text-align: center;}
.adv-tab li.cur{background: url("../images/adva1.png") no-repeat center center;}
.adv-dx{max-width: 1920px !important;margin: 0 auto;}
.adv-dx li{width: 100% !important;}
.adv-dx .content{padding-top: 130px;}
.adv-dx h2{float: right;width: 70px;font-family: "細明體";font-size: 60px;line-height: 70px;color: #fff;padding: 20px 50px 0 0;background: url("../images/adv-ft1.png") no-repeat right top;}
.adv-dx h4{float: right;width: 113px;margin-right: 40px;padding-top: 25px;}
.adv-dx h4 em,.adv-dx h4 span{float: right;width: 34px;font-size: 24px;line-height: 30px;color: #fff;padding: 0 11px;text-align: center;}
.adv-dx h4 em{border-left: 1px solid #fff;}
.adv-dx p{float: right;width: 200px;font-family: "宋体";font-size: 22px;color: #fff;line-height: 40px;height: 260px;-webkit-writing-mode:vertical-rl;writing-mode: vertical-rl;writing-mode: tb-rl;opacity: 0.7;margin-right: 40px;padding-top: 25px;}

/*zci*/
.zci{height: 551px;background: url("../images/zci_bg.jpg") no-repeat center top;overflow: hidden;}
.zci-box{padding: 80px 0 0;}
.zci-box dl{float: left;width: 280px;height: 280px;margin-right: 26px;position: relative;overflow: hidden;}
.zci-box dl.ml0{margin-right: 0;}
.zci-box dt{position: relative;height: 280px;}
.zci-box dt img{width: 280px;height: 280px;}
.zci-box dl dt em{position: absolute;width: 100%;height: 280px;background-color: rgba(0,0,0,0.3);left: 0;top: 0;font-size: 28px;color: #fff;text-align: center;line-height: 230px;-webkit-transition: all 0.4s linear;-o-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}
.zci-box dt em::after{position: absolute;content: "";width: 60px;height: 2px;background-color: #fff;left: 50%;margin-left: -30px;bottom: 110px;}
.zci-box dl dd{position: absolute;opacity:0;width: 100%;height: 280px;background-color: rgba(0,0,0,0.8);left: 0;top: 0;-webkit-transform:translate3d(0,0,-65px) rotate3d(1,0,0,90deg);  transform:translate3d(0,0,-65px) rotate3d(1,0,0,90deg);  -webkit-transform-origin:50% 0%;  transform-origin:50% 0%;  -webkit-transition:all 0.4s linear;-o-transition: all 0.4s linear;-moz-transition: all 0.4s linear;  transition:all 0.4s linear;}
.zci-box dd em{display: block;font-size: 28px;color: #fff;height: 68px;line-height: 68px;text-align: center;position: relative;padding-top: 55px;}
.zci-box dd em::after{position: absolute;content: "";width: 60px;height: 2px;background-color: #fff;left: 50%;margin-left: -30px;bottom: 0;}
.zci-box dd p{font-size: 14px;color: #fff;line-height: 30px;padding: 20px 25px 0;}
.zci-box dl:hover dt em{display: none;}
.zci-box dl:hover dd{opacity:1;visibility:visible;-webkit-transform:rotate3d(1,0,0,0deg);transform:rotate3d(1,0,0,0deg);}
.zci-wz{font-family: "細明體_HKSCS";font-size: 18px;height: 30px;line-height: 30px;color: #000;text-align: center;letter-spacing: 20px;padding-top: 75px;}

/*new*/
.new{padding: 70px 0 50px;background: url("http://www.happyporcelain.com/images/new_bg.jpg") no-repeat center top;background-size: 100% 100%;overflow: hidden;}
.new-tab{padding: 44px 0 50px;text-align: center;line-height: 40px;}
.new-tab li{display: inline-block;width: 135px;height: 40px;margin: 0 25px;}
.new-tab li a{display: block;font-family: "細明體";font-size: 18px;color: #1e1e1e;line-height: 40px;}
.new-tab li.cur{background: url("../images/newa1.png") no-repeat center center;}
.new-dx{float: left;width: 510px;}
.new-dx-lf li{margin-bottom: 40px;}
.new-dx-lf li h2{float: left;width: 108px;border-top: 1px solid #000;text-align: right;font-family: "思源黑体 CN";color: #000;}
.new-dx-lf li h2 span{display: block;font-size: 52px;line-height: 60px;padding-top: 5px;}
.new-dx-lf li h2 em{display: block;font-size: 16px;line-height: 24px;}
.new-dx-lf li p{float: right;width: 370px;font-family: "思源黑体 CN";}
.new-dx-lf li p a{display: block;color: #060001;font-size: 20px;line-height: 30px;height: 30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.new-dx-lf li p span{display: block;font-size: 14px;line-height: 26px;color: #666666;margin-top: 10px;}
.new-dx-rt{float: right;width: 610px;}
.new-dx-pic{float: left;width: 496px;}
.new-dx-pic ul li{height: 352px;position: relative;}
.new-dx-pic ul li img{width: 496px;height: 352px;display: block;}
.new-dx-pic ul li em{position: absolute;width: 456px;height: 54px;line-height: 54px;background-color: rgba(0,0,0,0.8);font-size: 16px;color: #fff;left: 0;bottom: 0;padding: 0 20px;}
.new-dx-pic ul li i{float: right;font-size: 14px;}
.new-dx-txt{float: right;width: 80px;height: 352px;background-color: #b8814d;padding-right: 34px;}
.new-dx-txt h2{padding-top: 65px;font-family: "宋体";position: relative;}
.new-dx-txt h2::before{position: absolute;content: "";width: 20px;height: 1px;background-color: #fff;right: 15px;top: 45px;transform: rotate(-30deg);}
.new-dx-txt h2 em{float: right;width: 24px;text-align: center;font-size: 14px;color: #fff;-webkit-writing-mode:vertical-rl;writing-mode: vertical-rl;writing-mode: tb-rl;text-transform: uppercase;letter-spacing: 3px;}
.new-dx-txt h2 span{float: right;width: 30px;font-size: 22px;color: #fff;line-height: 24px;text-align: center;}
.new-dx-siz{width: 8px;margin: 10px 8px 0 auto;}
.new-dx-siz li{height: 8px;background-color: #fff;border-radius: 100%;margin-bottom: 8px;}
.new-dx-siz li.cur{background-color: #000;}

/*abo*/
.abo{padding: 115px 0 110px;overflow: hidden;}
.abo-box{padding-bottom: 40px;}
.abo-box-lf{float: left;width: 310px;}
.abo-box-lf a{display: block;font-family: "思源黑体 CN";font-size: 50px;height: 60px;line-height: 60px;color: #000;}
.abo-box-lf i{display: block;width: 100px;height: 2px;background-color: #000;margin: 12px 0 15px;}
.abo-box-lf p span{display: block;font-size: 18px;color: #282828;line-height: 24px;}
.abo-box-lf p em{display: block;font-size: 12px;color: #282828;line-height: 20px;opacity: 0.5;text-transform: uppercase;}
.abo-box-rt{float: right;width: 870px;font-size: 14px;line-height: 26px;color: #606060;}
.abo-pic img{width: 1200px;display: block;}

/*img放大*/
.yos-box dt img,
.anl-dx ul li img{-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;}
.yos-box dt img:hover,
.anl-dx ul li img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
/**/