/*reset*/
*{ margin:0; padding:0;}
html,body{ width:100%;}
body{ position:relative; font-family:Microsoft Yahei; font-size:14px; background:#fff;}
img{ vertical-align:top; border:none;}
header,footer,div{ display:block;}
a:link{ text-decoration:none; color:#666; outline:none;}
a:visited{ text-decoration:none; color:#666; outline:none;}
a:hover{ text-decoration:none; color:#666; outline:none;}
a:active{ text-decoration:none; color:#666; outline:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px; font-weight:normal;}
ul,ol,dl,dt,dd,li{ list-style:none;}
/*base*/
.rspsv-img{ display:block; max-width:100%; margin:0 auto;}
.txtcen{ text-align:center;}
.fl{ float:left;}
.fr{ float:right;}
.pdbot{ padding-bottom:30px!important;}
.wrap1000{ margin:0 auto; width:1000px; position:relative;}
.wrap1200{ margin:0 auto; width:1200px; position:relative;}
.wrap1150{ margin:0 auto; width:1150px; position:relative;}
.clrboth{ clear:both;}
.clrafter:after{ content:''; visibility:hidden; display:block; height:0; clear:both;}

/*PC端*/
.apply-btn{ display:block; width:200px; line-height:2.8; text-align:center; font-size:20px; font-weight:bold; color:#487fff!important; border-radius:5px; margin:0 auto; border:1px solid #487fff;}
.apply-btn:hover{ background:#fff;}
.ygf-ban{ height:620px; background:url(/Skins/ygf/img/img0.jpg) center no-repeat;}
.ygf-ban-btn{ position:absolute; left:0; top:480px; text-align:center; line-height:2.5; font-size:22px; font-weight:bold;}
.ygf-ban-btn a{ display:inline-block; border:1px solid #fff; color:#fff; border-radius:5px; padding:0 50px; margin:0 2rem 0 0; position: relative;
  display: inline-block;
  color: #03e9f4;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  letter-spacing: 4px}
.ygf-ban-btn a:hover{ background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;}
.ygf-ban-btn span{ display:inline-block; color:#fff;}
.ygf-ban-btn a span {
  position: absolute;
  display: block;
}

.ygf-ban-btn a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.ygf-ban-btn a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.ygf-ban-btn a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.ygf-ban-btn a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}
.ygf-intro{ background:#f5f5ff; padding:60px 0;}
.ygf-intro .t1{ font-size:40px; padding-bottom:20px;}
.ygf-intro .t2{ font-size:20px; color:#808080; padding-bottom:50px;}
.ygf-intro .p1{ font-size:20px; color:#808080; line-height:2; padding:40px 0 0 0;}
.ygf-reason{ background:url(/Skins/ygf/img/img2.jpg) center no-repeat; height:816px;}
.ygf-reason .t1{ font-size:40px; padding-bottom:20px; padding-top:60px;}
.ygf-reason .t2{ font-size:20px; color:#808080; padding-bottom:50px;}
.ygf-reason-list li{ display:inline-block; width:30.33%; margin:0 1% 2.5% 1%; box-shadow:0 0 10px #aaa; background:#fff; padding:30px 0;}
.ygf-reason-list li>h1{ font-size:40px; padding-bottom:30px;}
.ygf-reason-list li>h2{ font-size:20px; color:#999; line-height:2;}
.ygf-advantage{ padding:60px 0; background:#f5f5ff;}
.ygf-advantage .t1{ font-size:40px; padding-bottom:20px;}
.ygf-advantage .t2{ font-size:20px; color:#808080; padding-bottom:50px;}
.ygf-advantage ul li{ width:31.33%; margin-right:3%; margin-bottom:3%; float:left;}
.ygf-advantage ul li:nth-child(3n){ margin-right:0;}
.ygf-advantage ul li img{ display:block; width:100%;}
.ygf-advantage ul li .w1{ background:#fff; text-align:center; padding:20px 0;}
.ygf-advantage ul li .w1 h1{ font-size:30px; padding:0 0 15px 0;}
.ygf-advantage ul li .w1 h2{ font-size:18px; color:#888;}
.ygf-help{ padding:60px 0;}
.ygf-help .t1{ font-size:40px; padding-bottom:20px;}
.ygf-help .t2{ font-size:20px; color:#808080; padding-bottom:50px;}
.ygf-help .ua li{ width:25%; float:left; text-align:center; font-size:20px; padding:20px 0; border-right:1px solid #fff; box-sizing:border-box; background:#f5f5ff; cursor:pointer;}
.ygf-help .ua li.on{ background:#487fff; color:#fff;}
.ygf-help .ub li{ display:none;}
.ygf-help .ub li.on{ display:block;}
.ygf-steps{ padding:60px 0; background:#f5f5ff;}
.ygf-steps .t1{ font-size:40px; padding-bottom:20px;}
.ygf-steps .t2{ font-size:20px; color:#808080; padding-bottom:50px;}
.ygf-steps .ua1{ width:465px;}
.ygf-steps .ua1 li{ border-radius:7px; box-sizing:border-box; padding:30px 20px; background:#fff; margin-bottom:10px; cursor:pointer;}
.ygf-steps .ua1 li h1{ font-size:24px; padding-bottom:10px;}
.ygf-steps .ua1 li h2{ display:none; font-size:16px; line-height:1.8;}
.ygf-steps .ua1 li.on{ background:#487fff; color:#fff;}
.ygf-steps .ua1 li.on h2{ display:block;}
.ygf-steps .ub1 li{ display:none; position:relative;}
.ygf-steps .ub1 li>a{ position:absolute; width:200px; line-height:2.8; text-align:center; font-size:20px; color:#fff; border-radius:5px; right:20px; bottom:20px; z-index:9; background:#3672ff;}
.ygf-steps .ub1 li>a:hover{ background:#fff; color:#3672ff; font-weight:bold;}
.ygf-steps .ub1 li.on{ display:block;}
.ygf-tools{ padding:60px 0;}
.ygf-tools .t1{ font-size:40px; padding-bottom:20px;}
.ygf-tools .t2{ font-size:20px; color:#808080; padding-bottom:50px;}
.ygf-tools .ua2 li{ width:20%; float:left; text-align:center; font-size:20px; padding:20px 0; border-right:1px solid #fff; box-sizing:border-box; background:#f5f5ff; cursor:pointer;}
.ygf-tools .ua2 li.on{ background:#487fff; color:#fff;}
.ygf-tools .ub2 li{ display:none; position:relative;}
.ygf-tools .ub2 li>a{ position:absolute; width:200px; line-height:2.8; text-align:center; font-size:20px; color:#fff; border-radius:5px; left:50%; margin-left:-100px; bottom:50px; z-index:9; background:#3672ff;}
.ygf-tools .ub2 li>a:hover{ background:#fff; color:#3672ff; font-weight:bold;}
.ygf-tools .ub2 li.on{ display:block;}
.ygf-tools .morebtn{ display:block; text-align:center; margin:30px 0 0 0; color:#3672ff!important; font-size:20px;}
.ygf-buy{ background:url(/Skins/ygf/img/buybg.jpg) center no-repeat; height:731px;}
.ygf-buy .t1{ font-size:40px; padding-bottom:20px; padding-top:100px; color:#fff;}
.ygf-buy .t2{ font-size:20px; color:#fff; padding-bottom:50px;}
.ygf-buy-list{ padding:40px 0;}
.ygf-buy-list li{ float:left; width:19%; padding-right:1.25%; background:url(/Skins/ygf/img/arrow1.png) right center no-repeat; text-align:center; color:#fff;}
.ygf-buy-list li>p{ height:4rem;}
.ygf-buy-list li>h1{ font-size:22px; padding:30px 0 10px 0;}
.ygf-buy-list li>h2{ font-size:16px; line-height:1.9;}
.ygf-buy-list li:last-child{ padding-right:0; background:none;}
.ygf-buy-apply{ text-align:center; line-height:2.5; font-size:22px; font-weight:bold;}
.ygf-buy-apply a{ display:inline-block; border:1px solid #fff; color:#fff; border-radius:5px; padding:0 50px; margin:0 2rem 0 0;}
.ygf-buy-apply a:hover{ background:#fff; color:#2d53aa;}
.ygf-buy-apply span{ display:inline-block; color:#fff;}
.ygf-clients{ height:833px; background:url(/Skins/ygf/img/clients.jpg) center no-repeat;}
.ygf-clients .t1{ font-size:40px; padding-bottom:20px; padding-top:100px;}
.ygf-clients .t2{ font-size:20px; color:#808080; padding-bottom:50px;}
/*门窗店*/
.mcd-1{ background:#303030; box-sizing:border-box;}
.mcd-1 *{ box-sizing:border-box;}
.mcd-1 ul{ display:block;}
.mcd-1 ul li{ float:left; width:25%; display:block; position:relative; height:527px; cursor:pointer;}
.mcd-1 ul li:nth-child(1){ background:url(/Skins/ygf/img/mcd1101.jpg) center;}
.mcd-1 ul li:nth-child(2){ background:url(/Skins/ygf/img/mcd1102.jpg) center;}
.mcd-1 ul li:nth-child(3){ background:url(/Skins/ygf/img/mcd1103.jpg) center;}
.mcd-1 ul li:nth-child(4){ background:url(/Skins/ygf/img/mcd1104.jpg) center;}
.mcd-1-1{ position:absolute; left:0; top:0; transition:all 0.4s; width:100%; height:100%; text-align:center; color:#fff; padding-top:40%;}
.mcd-1 ul li:hover .mcd-1-1{ background:rgba(0,133,252,0.4); padding-top:20%;}
.mcd-1-1 a{ display:block; opacity:0; visibility:hidden; color:#fff; width:100px; line-height:2.5; border-radius:5px; border:1px solid #ccc; margin:0 auto;}
.mcd-1-1 a:hover{ background:#fff; color:#303030;}
.mcd-1 ul li:hover a{ opacity:1; visibility:visible;}
.mcd-1-1>.img{ display:block; margin:0 auto; width:102px; height:102px;}
.mcd-1-1-1{ font-size:20px; padding:40px 0 10px 0;}
.mcd-1-1-2{ line-height:1.8; padding:0 0 30px 0; display:none;}

/*mobile端*/
.apply-btn2{ display:block; width:50%; line-height:2.4; text-align:center; font-size:18px; font-weight:bold; color:#487fff!important; border-radius:30px; margin:16px auto 0 auto; border:1px solid #487fff;}
.mobile{ max-width:720px; margin:0 auto;}
.mobi-ban{ position:relative;}
.mobi-ban-btn{ position:absolute; left:15px; top:68%; text-align:left; line-height:2.4; font-size:14px; font-weight:bold;}
.mobi-ban-btn a{ display:inline-block; background:#fff; color:#2d53aa; border-radius:30px; padding:0 20px; margin:0 10px 0 0;}
.mobi-ban-btn span{ display:inline-block; color:#fff;}
.mobi-intro{ padding:30px 15px;}
.mobi-intro .t1{ font-size:22px; padding-bottom:15px; font-weight:bold;}
.mobi-intro .p1{ font-size:14px; line-height:1.8; padding:15px 0 0 0; color:#777;}
.mobi-reason{ background:url(/Skins/ygf/img/img2.jpg) center/cover no-repeat; padding:30px 15px 10px 15px;}
.mobi-reason .t1{  font-size:22px; padding-bottom:30px; font-weight:bold;}
.mobi-reason ul li{ width:50%; float:left; box-sizing:border-box; margin-bottom:30px;}
.mobi-reason ul li:nth-child(odd){ border-right:1px solid #aaa;}
.mobi-reason ul li>h1{ font-size:18px; padding:0 0 20px 0; color:#111;}
.mobi-reason ul li>h2{ color:#888;}
.mobi-advantage{ padding:30px 15px;}
.mobi-advantage .t1{ font-size:22px; padding-bottom:15px; font-weight:bold;}
.mobi-advantage ul li{ width:48%; float:left; margin-right:4%; margin-bottom:4%; box-shadow:0 0 7px #ccc;}
.mobi-advantage ul li img{ display:block; width:100%;}
.mobi-advantage ul li:nth-child(even){ margin-right:0;}
.mobi-advantage ul li .w1{ padding:10px; text-align:center;}
.mobi-advantage ul li .w1 h1{ font-size:17px; padding-bottom:10px;}
.mobi-advantage ul li .w1 h2{ font-size:13px; color:#777;}
.mobi-help{ padding:30px 0.15rem;}
.mobi-help .t1{ font-size:22px; padding-bottom:15px; font-weight:bold;}
.mobi-help .ua{ margin-bottom:10px;}
.mobi-help .ua li{ width:50%; float:left; text-align:center; font-size:14px; padding:15px 0; box-sizing:border-box; background:#f5f5ff; cursor:pointer;}
.mobi-help .ua li.on{ background:#487fff; color:#fff;}
.mobi-help .ub li{ display:none;}
.mobi-help .ub li img{ display:block; width:100%;}
.mobi-help .ub li.on{ display:block;}
.mobi-steps{ padding:30px 0.15rem; background:#f5f5ff;}
.mobi-steps .t1{ font-size:22px; padding-bottom:15px; font-weight:bold;}
.mobi-steps .ua1{ width:100%; margin-bottom:10px;}
.mobi-steps .ua1 li{ width:50%; float:left; text-align:center; font-size:14px; padding:20px 0; box-sizing:border-box; background:#f5f5ff; cursor:pointer;}
.mobi-steps .ua1 li.on{ background:#487fff; color:#fff;}
.mobi-steps .ua1 li.on h2{ display:block;}
.mobi-steps .ub1 li{ display:none;}
.mobi-steps .ub1 li img{ display:block; width:100%;}
.mobi-steps .ub1 li.on{ display:block;}
.mobi-tools{ padding:30px 0.15rem;}
.mobi-tools .t1{ font-size:22px; padding-bottom:15px; font-weight:bold;}
.mobi-tools .ua2{ margin-bottom:10px;}
.mobi-tools .ua2 li{ width:20%; float:left; text-align:center; font-size:0.1rem; padding:20px 0; border-right:1px solid #fff; box-sizing:border-box; background:#f5f5ff; cursor:pointer;}
.mobi-tools .ua2 li.on{ background:#487fff; color:#fff;}
.mobi-tools .ub2 li{ display:none; position:relative;}
.mobi-tools .ub2 li img{ display:block; width:100%;}
.mobi-tools .ub2 li>a{ position:absolute; width:40%; line-height:2.8; text-align:center; font-size:14px; color:#fff; border-radius:20px; left:30%; bottom:10px; z-index:9; background:#3672ff;}
.mobi-tools .ub2 li.on{ display:block;}
.mobi-tools .morebtn{ display:block; text-align:center; margin:15px 0 0 0; color:#3672ff!important; font-size:18px;}
.mobi-buy{ padding:30px; background:url(/Skins/ygf/img/mobile/buybg.jpg) center/cover #3672ff;}
.mobi-buy .t1{ font-size:22px; padding-bottom:45px; font-weight:bold; color:#fff;}
.mobi-buy-apply{ text-align:center; line-height:2.5; font-size:15px; font-weight:bold; padding:30px 0 0 0;}
.mobi-buy-apply a{ display:inline-block; background:#fff; color:#2d53aa; border-radius:30px; padding:0 20px; margin:0 0.1rem 0 0;}
.mobi-buy-apply span{ display:inline-block; color:#fff;}
.mobi-clients{ padding:30px 20px;}
.mobi-clients .t1{ font-size:19px; padding-bottom:45px;}