﻿
.model-nr-09{padding:80px 0; position:relative;background:url(/images/site/feedback.jpg) center center no-repeat; background-size:cover; background-attachment:fixed;}
.model-nr-09 .model-img{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:1;}
.model-nr-09 .model-bg{background:var(--gradient-blue)/*#5f3afcc2*//*var(--gradient-purple-dark)*/; position:absolute; top:0; left:0; right:0; bottom:0; z-index:2; opacity:0.8}
.model-nr-09 .nrLayout{position:relative;z-index:3;}
.model-nr-09 .model-feedback{display: grid;grid-template-columns: repeat(3,1fr); grid-gap:30px;}
.model-nr-09 .model-feedback-2{display: grid;grid-template-columns: repeat(2,1fr); grid-gap:30px;}
.model-nr-09 .model-nr-html{padding-top:50px;}
.model-nr-09 .li{margin-bottom: 20px; position:relative;}
.model-nr-09 .li .btspan{position:absolute; z-index:2; width:20px; height:20px; line-height:20px; top:calc(50% - 10px); left:5px;}
.model-nr-09 .li input{width: 100%;border: 1px #fff solid;height: 60px;background: #fff;border-radius: 10px;padding: 0 20px;font-size: 18px;line-height: 60px;}
.model-nr-09 .li input::placeholder, .model-nr-04 .model-nr-html .item-right .li textarea::placeholder{color: #ccc}
.model-nr-09 .li textarea{width: 100%;border: 1px #fff solid;height: 115px;background: #fff;border-radius: 10px;padding: 20px;font-size: 18px;line-height: 1.5;}
.model-nr-09 .li input,
.model-nr-09 .li textarea{ font-family:'nunito-sans'; cursor: pointer;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.model-nr-09 .li input:focus, 
.model-nr-09 .li textarea:focus{border: 1px var(--site-colorB) solid;}
.model-nr-09 .item-btn{position: relative;overflow: hidden;cursor: pointer;background: var(--site-colorA);margin: 0 auto;border-radius: 10px;}
.model-nr-09 .item-btn .item-btn-word{width: 240px;text-align: center;background: rgba(0,0,0,0);color: #fff;font-size: 18px;position: relative;z-index: 3;height: 60px;line-height: 60px;text-align: center;}
.model-nr-09 .item-btn:before{content: "";position: absolute;width: 300px;height: 300px;border-radius: 50%;background: var(--gradient-orange);z-index: 2;transform: scale(0.2);top: -45px;left: -10px;opacity: 0;}
.model-nr-09 .item-btn:after{content: "";position: absolute;width: 300px;height: 300px;border-radius: 50%;background: var(--gradient-purple-dark);z-index: 2;transform: scale(0.2);top: -40px;left: -10px;opacity: 0;}
.model-nr-09 .item-btn:before{-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
.model-nr-09 .item-btn:after{-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.model-nr-09 .item-btn:hover{border-radius: 60px;}
.model-nr-09 .item-btn:hover:before{transform: scale(1);top: -75px;opacity: 1;}
.model-nr-09 .item-btn:hover:after{transform: scale(1);top: -75px;opacity: 1;}

.model-nr-09 .li.btLine input,
.model-nr-09 .li.btLine textarea{border:1px #ff6a00 solid;box-shadow:2px 1px 11px 2px rgba(255, 106, 0, .53);}

.model-nr-09 .li-yzm img{height:50px; margin-right:20px; border-radius:5px;}

.model-nr-09  .li-pro{height:60px; line-height:60px; padding:0 10px; background:#f1f1f1; border-radius:10px; font-size:16px; color:#555}


@media (max-width: 767px)  {
.model-nr-09{padding:30px 0;}  
.model-nr-09 .model-feedback{grid-template-columns: repeat(1,1fr); grid-gap:0px; padding:10px 10px 0px 10px;}
.model-nr-09 .model-nr-html{padding-top:20px;}
.model-nr-09 .li{margin-bottom: 20px;}
.model-nr-09 .li .btspan{position:absolute; z-index:2; width:20px; height:20px; line-height:20px; top:calc(50% - 10px); left:5px;}
.model-nr-09 .li input{height: 50px;font-size: 16px;line-height: 50px;} 
.model-nr-09 .li textarea{font-size: 16px; padding:10px;}  
.model-nr-09 .item-btn .item-btn-word{width: 240px; height: 50px; line-height: 50px;}
.model-nr-09 .item-btn:hover{border-radius: 50px;}

.model-nr-09 .li-message{margin-left:10px; margin-right:10px;}
.model-nr-09 .li-message .btspan{top:15px !important}

.model-nr-09 .li.btLine input,
.model-nr-09 .li.btLine textarea{border:1px #ff6a00 solid;box-shadow:2px 1px 11px 2px rgba(255, 106, 0, .53);}

.model-nr-09 .li-yzm img{height:50px; margin-right:20px; border-radius:5px;}

.model-nr-09  .li-pro{height:60px; line-height:60px; padding:0 10px; background:#f1f1f1; border-radius:10px; font-size:16px; color:#555}

}