@charset "utf-8";

* { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
::before, ::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;}
html { width:100%; height:100%; font-size: 14px; font-family:"Microsoft YaHei", "微软雅黑"; font-style:normal; font-weight:normal; font-variant:normal;}
body { width:100%; height:100%;}
html,body,img { border:none;}
ul,ol,li { list-style:none;}
dfn { font-family:Arial, Tahoma;}
a,a:hover,a:active,a:link,a:visited { outline:none; text-decoration:none;}

.excessive { -webkit-transition:0.2s; -moz-transition:0.2s; -o-transition:0.2s; transition:0.2s;}

/*input error*/
.wk_input_error { border:1px solid var(--color-error-6);  box-shadow:0 0 8px var(--color-error-6); background-color: var(--color-error-0);}
/*input*/
.wk_input_group { display: flex; align-items: center; position: relative;}
.wk_input_group::before { position: absolute; left: 10px; font-size: 18px; user-select: none;}
.wk_input_group input { flex: 1; padding-left: 35px;}
.wk_input { border:1px solid #ccc; height:50px; line-height:50px; font-size:16px; border-radius: 3px; outline:none;}
.wk_input:focus { border:1px solid var(--color-primary-7); box-shadow:0 0 8px var(--color-primary-7);}
/*button*/
.wk_button { background-color: var(--color-primary-7); color: #fff; font-size: 16px; text-align: center; outline: none; border: none; border-radius: 3px; line-height: 50px; padding: 0 20px; cursor: pointer;}
.wk_button:hover { background-color: var(--color-primary-5);}

/*wrap*/
.wk_wrap { display: flex !important; position: fixed !important; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; align-items: center; flex-direction: column; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; background-color: rgba(255, 255, 255, 0.3); /*-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);*/}
.wk_wrap .__fluid { opacity: 0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;  background-color: #fff; border-radius: 3px; border: 1px solid #ccc; box-shadow: 0 0 8px 0 rgba(0, 0, 0,0.5);}
.wk_wrap .__title { display: flex; align-items: center; height: 40px;}
.wk_wrap .__title span { flex: 1; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; font-size: 18px; user-select: none; color: #555;}
.wk_wrap .__title a { margin-right: 5px;}
.wk_wrap .__content { display: block !important;}
.wk_wrap.fadeInUp { opacity: 1;}
.wk_wrap.fadeInUp .__fluid { opacity: 1;}
.wk_wrap .__fluid .__pop { display: flex; align-items: center;}
.wk_wrap .__fluid .__pop .__icon { padding:10px;}
.wk_wrap .__fluid .__pop .__icon::before { content: ""; display: block; font-size: 24px; font-weight: bold; color: #fff; border-radius: 50%; width: 36px; height: 36px; line-height: 36px; text-align: center;}
.wk_wrap .__fluid .__pop .__content { padding: 20px 20px 20px 0; font-size: 16px;}
.wk_wrap .__fluid .error .__icon::before { content: "✗"; background-color: var(--color-error-7);}
.wk_wrap .__fluid .success .__icon::before { content: "✓"; background-color: var(--color-success-7);}
.wk_wrap .__fluid .__btn { display: flex; align-items: center; justify-content: center; padding: 10px 0;}
.wk_wrap .__fluid .__btn button { border: none; background-color: var(--color-primary-7); color: #fff; padding:10px 15px; border-radius: 5px; font-size: 16px; cursor: pointer;}
.wk_wrap .__fluid .__btn button:hover { opacity: .8;}
/*checkbox*/
.wk_checkbox { user-select:none; display:inline-block;  padding-right:5px; cursor:pointer; position: relative; vertical-align: middle;}
.wk_checkbox::before { content:''; display: block; border:1px solid #bbb; border-radius: 3px; height:20px; line-height:20px; width:20px;}
.wk_checkbox::after { content: ""; display: block; position: absolute; width: 16px; height: 8px; top: 4px; left: 2px;}
.wk_checkbox.active::before { border-color:var(--color-primary-7);}
.wk_checkbox.active::after { border-width: 0 0 3px 3px; border-style: solid; border-color: var(--color-primary-7); transform: rotate(-45deg);}
/*tips*/
.wk_tips { background-color: var(--color-primary-7); color: #fff; padding:12px 15px; font-size: 14px; border-radius: 3px; position: absolute; left: -500%; max-width: 100%; pointer-events: none; word-break: break-all; word-wrap: break-word; z-index: 9999; -webkit-animation-duration: .2s; -moz-animation-duration: .2s; -o-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);}
.wk_tips.__error { background-color: var(--color-error-7);}
.wk_tips::after { content: ''; border: 8px solid var(--color-primary-7); position: absolute; border-width: 8px; border-left-color: transparent !important; border-right-color: transparent !important;}
.wk_tips.__error::after { border-color: var(--color-error-7);}
.wk_tipsT::after { bottom: -7px; border-bottom-width: 0;}
.wk_tipsB::after { top: -7px; border-top-width: 0;}
.wk_tipsL::after { left: 4px;}
.wk_tipsR::after { right: 4px;}
/*captcha*/
.wk_captcha { padding:10px 20px 10px 20px;}
.wk_captcha .__pic { display: flex; align-items: center; margin-bottom: 10px;}
.wk_captcha .__pic div { flex: 1;}
.wk_captcha .__pic img { cursor: pointer; display: block;}
.wk_captcha .__pic a { margin-left: 10px; color: var(--color-primary-7);}
.wk_captcha .__pic a:hover { color: var(--color-error-7);}
.wk_captcha button { margin-left: 10px;}
.wk_captcha input { width: 210px;}


/*mask*/
.wkcuiMask { opacity: 0; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.3); -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;}


.wk_wrap .__fluid .__pop { display: flex; align-items: center;}
.wk_wrap .__fluid .__pop .__icon { padding:10px;}
.wk_wrap .__fluid .__pop .__icon::before { content: ""; display: block; font-size: 24px; font-weight: bold; color: #fff; border-radius: 50%; width: 36px; height: 36px; line-height: 36px; text-align: center;}
.wk_wrap .__fluid .__pop .__content { padding: 20px 20px 20px 0; font-size: 16px;}
.wk_wrap .__fluid .error .__icon::before { content: "✗"; background-color: var(--color-error-7);}
.wk_wrap .__fluid .success .__icon::before { content: "✓"; background-color: var(--color-success-7);}
.wk_wrap .__fluid .__btn { display: flex; align-items: center; justify-content: center; padding: 10px 0;}
.wk_wrap .__fluid .__btn button { border: none; background-color: var(--color-primary-7); color: #fff; padding:10px 15px; border-radius: 5px; font-size: 16px; cursor: pointer;}
.wk_wrap .__fluid .__btn button:hover { opacity: .8;}




/*wrap*/
.wkcuiWrap { display: flex !important; position: fixed !important; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; align-items: center; flex-direction: column; background-color: rgba(255, 255, 255, 0.3);}
.wkcuiFluid { opacity: 0; background-color: #fff; border-radius: 6px; border: 1px solid #ccc; box-shadow: 0 0 8px 0 rgba(0, 0, 0,0.3); position: relative; overflow: hidden; display: flex; flex-direction: column; max-height: 100%; max-width: 100%;}
.wkcuiTitle { display: flex; align-items: center; height: 40px;}
.wkcuiTitle span { flex: 1; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; font-size: 18px; user-select: none; color: #555;}
.wkcuiTitle a { margin-right: 5px;}
.wkcuiTitleNone { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 2;}
.wkcuiTitleNone::before { content: ''; flex: 1;}
.wkcuiContent { display: block !important; overflow: auto; word-break: break-all; line-height: 1.8; font-size: 16px; flex: 1; position: relative; z-index: 1;}
.wkcuiWrap.open { opacity: 1;}
.wkcuiWrap.open .wkcuiFluid { opacity: 1;}

/*close*/
.wkcuiClose { display: flex; width: 28px; height: 28px; justify-content: center; align-items: center; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s;}
.wkcuiClose:hover { background-color: var(--color-error-7); border-radius: 50%;}
.wkcuiClose::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.wkcuiClose::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -1px;}
.wkcuiClose::before,
.wkcuiClose::after { content: ''; display: block; overflow: hidden; background-color: #555; width: 1px; height: 20px; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s;}
.wkcuiClose:hover::before,
.wkcuiClose:hover::after { background-color: #fff;}

/*loading*/
.wkcuiLoading { width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 9999999;}
.wkcuiLoading div { background-color:rgba(0, 0, 0, 0.3); padding: 15px; border-radius: 5px; text-align: center; font-size: 14px; color: #fff; width: 200px; user-select: none;}
.wkcuiLoading div::before { content: ""; display: block; margin:0 auto 10px auto; width: 100%; height: 15px; border-radius: 15px; background: linear-gradient(90deg, transparent,var(--color-primary-7)) left -50px top 0/50px 20px no-repeat #fff; animation: wkcuiLoading 2s infinite linear;}
@keyframes wkcuiLoading { 100% {background-position: right -50px top 0}}

/*animation*/
@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.rotate{-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;}
.rotate-0{-webkit-transform:rotate(0);transform:rotate(0)}
.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.rotate-0,.rotate-180,.rotate-90{-webkit-transition:.25s linear;transition:.25s linear;}

@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.1,.1);transform:scale(.1,.1)}100%{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1}}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.1,.1);transform:scale(.1,.1)}100%{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1}}
.zoomIn{-webkit-animation:zoomIn .25s ease;animation:zoomIn .25s ease}
@-webkit-keyframes zoomOut{0%{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1}100%{-webkit-transform:scale(.8,.8);transform:scale(.8,.8);opacity:0}}
@keyframes zoomOut{0%{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1}100%{-webkit-transform:scale(.8,.8);transform:scale(.8,.8);opacity:0}}
.zoomOut{-webkit-animation:zoomOut .25s ease;animation:zoomOut .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInUp{-webkit-animation:fadeInUp .25s ease;animation:fadeInUp .25s ease}
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}}
@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}}
.fadeOutUp{-webkit-animation:fadeOutUp .25s ease;animation:fadeOutUp .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInRight{-webkit-animation:fadeInRight .25s ease;animation:fadeInRight .25s ease}
@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}}
@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}}
.fadeOutRight{-webkit-animation:fadeOutRight .25s ease;animation:fadeOutRight .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}}
@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0)}}
.fadeOutDown{-webkit-animation:fadeOutDown .25s ease;animation:fadeOutDown .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.fadeInLeft{-webkit-animation:fadeInLeft .25s ease;animation:fadeInLeft .25s ease}
@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}}
@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}}
.fadeOutLeft{-webkit-animation:fadeOutLeft .25s ease;animation:fadeOutLeft .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}

@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.fadeIn{-webkit-animation:fadeIn .25s ease;animation:fadeIn .25s ease}
@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
.fadeOut{-webkit-animation:fadeOut .25s ease;animation:fadeOut .25s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}