@charset "utf-8";
*{ box-sizing:border-box;}
body,div,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,th,td,pre,code,form,fieldset,legend,input,textarea,blockquote,figure,button{ margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,main,nav,section,summary { display:block; }
html{-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
body{ font-size: 14px; line-height: 1.44; color: #303133; background: #fff; font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
button,input,select,textarea{ font:inherit; color:#303133; line-height: 1.44; border: 0;outline: 0;}
input[type="text"],input[type="password"],input[type="tel"],input[type="email"]{padding-left: 5px;}
audio,canvas,progress,video{ display:inline-block; vertical-align:baseline; }
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
ol,ul,li{ list-style:none;}
table{ border-collapse:collapse; border-spacing:0;}
sup,sub{ font-size:100%; vertical-align:baseline;}
a,a:active{ outline:none;}
i{ font-style:normal; }
del,ins{ text-decoration:none;}
fieldset,img,acronym{ border:0;}
img,acronym,input,textarea,iframe,button{ vertical-align:middle;}
input,button,textarea,select,optgroup,option{ resize:none; outline:none;}
html,body,a,button,input,li,div,span,section{ -webkit-tap-highlight-color:transparent;outline: none;}
img,video{ max-width:100%;}
a,img{ -webkit-touch-callout: none;}
a,button{ cursor:pointer;}
input:-webkit-autofill{-webkit-box-shadow: 0 0 0 200px white inset;}
/*
::-webkit-scrollbar{ width:8px; height:8px;}
::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.05);}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:vertical{height: 5px;background-color:rgba(0,0,0,.15); -webkit-border-radius: 10px;}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:vertical:hover{ background-color:rgba(0,0,0,.2);}
*/

.top{ position: fixed; z-index: 20; left: 0; top: 0; padding: 0 16px; width: 100%; height: 56px; display: flex; align-items: center; color: #fff; }
.top.is-black{ background-color: #000;}
.top .logo{ font-size: 20px; flex: 1; font-weight: 300; padding: 0 16px; font-family: Lato, sans-serif;}
.top .nav{ position: relative;}
.top .nav dt{ height: 40px; display: flex; align-items: center; font-weight: 300; font-size: 16px; font-family: Lato, sans-serif; cursor: pointer;}
.top .nav svg{ width: 24px; height: 24px;}
.top .nav dd{ position: absolute; top: 40px; right: 0; display: none;}
.top .nav ul{ box-shadow: 0 0 10px rgba(0,0,0,.55); background-color: rgba(33,33,33,1); border-radius: 2px; width: 240px; padding: 8px 0;}
.top .nav li{ padding-left: 32px;}
.top .nav li a{ display: block; padding: 11.5px 0 8px; color: #fff; font-weight: 300; font-size: 16px; font-family: Lato, sans-serif; text-decoration:none;}
.top .nav li a:hover{ color: rgba(77,255,175,1);}
.top .nav:hover dd{ display: block;}

.header{ height: 340px; padding: 60px 0; position: relative; display: flex; align-items: center; justify-content: center; text-align: center;}
.header:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(33,33,33,1); opacity: .4;}
.header.is-policy{ background: rgba(0,104,91,1) url('../images/simple-header-blended-small.png') no-repeat; background-size: cover;}
.header.is-service{ background: rgba(0,104,91,1) url('../images/service.jpg') no-repeat center center; background-size: cover;}
.header.is-service:before{ opacity: .3;}
.header.is-deletion{ background: rgba(0,104,91,1) url('../images/cross.jpeg') no-repeat center center; background-size: cover;}
.header.is-deletion:before{ opacity: .3;}

.header h1{ font-size: 64pt; color: #fff; position: relative; font-weight: 300; font-family: Lato, sans-serif; max-width: 750px; line-height: 1;}

.layout{ padding: 1.5rem 0;}
.layout .content{ max-width: 1280px; padding: 0 48px; margin: 0 auto; font-size: 11pt; font-family: Lato, sans-serif; font-weight: 400; line-height: 1.6667; margin-top: 12px; padding-bottom: 50px;}
.layout .content h2{ margin-top: 20px; font-size: 19pt; color: rgba(0,104,91,1);}
.layout .content a{ color: rgba(0,102,56,1);}
.layout .view-form{ width: 640px; margin: 0 auto;}
.layout .view-form .success{ display: none;}
.layout .view-form .block{ margin-bottom: 12px; border: 1px solid rgb(218,220,224); background-color: #fff; border-radius: 8px; padding: 24px; page-break-inside: avoid; word-wrap: break-word;}
.layout .view-form .block:first-child{ border-top: 10px solid rgb(103, 58, 183);}
.layout .view-form .block.is-error{ border-color: rgb(217,48,37)}
.layout .view-form .block.is-error .suffix{ display: flex;}
.layout .view-form .block.is-error input{ border-bottom: 2px solid rgb(217,48,37) !important;}
.layout .view-form .title{ font-size: 32px; color: rgb(32,33,36); font-weight: 400; line-height: 1; margin-bottom: 22px;}
.layout .form-item .label{ margin-bottom: 16px; font-size: 12pt; line-height: 24px; display: flex; align-items: center;}
.layout .form-item .label:after{ content: '*'; color: rgb(217,48,37); padding-left: .25em; font-size: 16px; font-weight: 400; letter-spacing: .2px;}
.layout .form-item .blank{ height: 48px; padding-bottom: 8px;}
.layout .form-item .blank input{ width: 300px; height: 40px; border: 0; border-bottom: 1px solid rgb(103, 58, 183, 0.3); padding: 0;}
.layout .form-item .blank input:focus{ border-bottom: 2px solid rgb(103, 58, 183);  transition: .2s;}
.layout .form-item .checkbox{ display: flex; align-items: center; cursor: default;}
.layout .form-item .checkbox .icon{ width: 20px; height: 20px; border: 2px solid #5F6367; border-radius: 3px; margin-right: 10px; cursor: pointer;}
.layout .form-item .checkbox.is-active .icon{ background-color: rgb(103, 58, 183); border-color: rgb(103, 58, 183); position: relative;}
.layout .form-item .checkbox.is-active .icon:before{ content: ''; position: absolute; left: 3px; top: 6px; width: 2px; height: 7px; background-color: #fff; transform: rotate(-45deg);}
.layout .form-item .checkbox.is-active .icon:after{ content: ''; position: absolute; left: 4px; top: 6px; width: 12px; height: 2px; background-color: #fff; transform: rotate(-45deg);}
.layout .form-item .suffix{ font-size: 12px; color: rgb(217,48,37); display: none; align-items: center;}
.layout .view-form .footer{ display: flex; align-items: center;}
.layout .footer .submit{ flex: 1;}
.layout .footer .submit button:hover{ box-shadow: 0px 2px 1px -1px rgba(103, 58, 183, 0.2), 0px 1px 1px 0px rgba(103, 58, 183, 0.14), 0px 1px 3px 0px rgba(103, 58, 183, 0.12);}
.layout .footer button{ background-color: rgb(103, 58, 183); color: #fff; border: 0; font-size: 14px; font-weight: 500; line-height: 36px; padding: 0 24px; border-radius: 4px; transition: .2s;}
.layout .footer .clear button{ color: rgb(103, 58, 183); background-color: transparent; padding: 0 8px;}
.layout .footer .clear button:hover{ background-color: #F8FAFE;}
.layout .footer button:active{ background-color: #A084D2;}

.layout .view-form.is-success .form-item,
.layout .view-form.is-success .footer,
.layout .view-form.is-success .ref-checkbox-block{ display: none;}
.layout .view-form.is-success .success{ display: block;}
.layout .view-form.is-success .success a{ color: blue;}

