@charset "utf-8";

* { margin:0; padding:0; font-style:normal; font-weight:normal; font-variant:normal; text-transform: none; -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,body { width:100%; height:100%; border:none; font-size: 14px; font-family:Arial,"Microsoft YaHei", "微软雅黑";}
img { border:none;}
ul,ol,li { list-style:none;}

a,a:hover,a:active,a:link,a:visited { outline:none; text-decoration:none;}
textarea, input, select, button { font-family: inherit;}

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

.money { font-family:Arial, Tahoma;}
.money::before { padding-right: 3px; font-size: 12px;}
.money.CNY::before { content: "¥";}

.article { padding: 20px; line-height: 1.8; word-break: break-all; overflow: hidden; margin-top: 20px;}

.layout { width: 1200px; margin: 0 auto;}

/*header*/
.header .layout { display: flex; align-items: center;}
.header ._logo { width: 280px; display: flex; align-items: center; padding: 10px 0;}
.header ._logo img { display: block; width: 60px; height: 60px;}
.header ._logo div { flex: 1; padding-left: 10px;}
.header ._logo strong { font-size: 16px; font-weight: bold; line-height: 18px;}
.header ._logo p { font-size: 32px; line-height: 34px;}
.header ._search { flex: 1; display: flex; align-items: center; padding:0 20px;}
.header ._search input { outline: none; height: 40px; line-height: 40px; padding: 0 10px;}
.header ._search ._keyword { flex: 1; border: 2px solid var(--color-primary-7); border-right: none; background-color: #fff; font-size: 16px; border-radius: 2px 0 0 2px;}
.header ._search ._submit { font-family: 'icofont'; border: none; background-color: var(--color-primary-7); color: #fff; font-size: 18px; border-radius: 0 2px 2px 0; cursor: pointer;}
.header ._search ._submit:hover { background-color: var(--color-primary-5);}
.header ._user { width: 200px; display: flex; align-items: center; justify-content: right;}
.header ._user img { display: block; width: 40px; height: 40px; border-radius: 50%;}
.header ._user span { padding-right: 10px; text-align: right; white-space: nowrap; color: #555; overflow: hidden; text-overflow: ellipsis;}
.header ._user:hover span { color: #f60;}
.header .menu { background-color: var(--color-primary-7); display: flex; justify-content: center; align-items: center; min-width: 1200px;}
.header .menu a { color: #fff; font-size: 16px; padding: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.header .menu a:hover { background-color: var(--color-primary-5);}

.footer { background-color: #eee; margin-top: 40px; padding: 20px 0; color: #999;}
.footer ._menu { display: flex; width: 100%; justify-content: center; align-items: center;}
.footer ._menu a { color: #555; padding: 10px 20px;}
.footer ._copyright { padding: 10px 0; line-height: 1.5;}
.footer ._copyright p { text-align: center; font-size: 12px; color: #999;}
.footer ._copyright p a { padding-left: 10px; color: #999;}
.footer ._copyright p img { width: 20px; height: 20px; vertical-align:middle; margin-right:3px;}
.footer ._list { display: flex; padding: 10px 0;}
.footer ._list::before { color: #555; font-weight: bold; padding-right: 10px; font-size: 12px;}
.footer ._list div { flex: 1; font-size: 12px;}
.footer ._contactUs::before { content: "联系我们";}
.footer ._contactUs span { color: #555; white-space: nowrap; font-size: 12px; padding-right: 10px;}
.footer ._blogroll::before { content: "友情链接";}
.footer ._blogroll a { color: #777; margin-right: 10px; white-space: nowrap; font-size: 12px;}
.footer a:hover { color: var(--color-auxiliary-7); text-decoration: underline;}

/*line word*/
.homeBanner { display: flex; height: 350px; overflow: hidden;}
.homeBanner ._keywords { width: 255px;}
.homeBanner ._keywords p { color: var(--color-warning-7); color: #f60; font-size: 16px;  padding: 14px 0 5px; width: 100%; line-height: 100%;}
.homeBanner ._keywords a { padding: 5px 10px; line-height: 200%; white-space: nowrap; font-size: 13px; color: #555;}
.homeBanner ._keywords a:hover { background-color: var(--color-primary-7); color: #fff;}
.homeBanner ._banner { width: 700px;}
.homeBanner ._banner ._nothing { height: 350px; background-color: #eee; color: #ccc; display: flex; justify-content: center; align-items: center; font-size: 40px;}
.homeBanner ._bulletin { flex: 1; white-space: pre-wrap;}
/*banner*/
#index-swiper { height:350px;}
#index-swiper .swiper-slide { text-align:center; background:#fff; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center; overflow:hidden;}
#index-swiper .swiper-pagination { position:absolute; bottom:10px; width:100%; text-align:center; counter-reset: section;}
#index-swiper .swiper-pagination span { display:inline-block; width:20px; height:20px; line-height:20px; font-size:12px; color:#555; text-align:center; background:#fff; border-radius:50%; margin:0 3px; cursor:pointer;}
#index-swiper .swiper-pagination span::before { counter-increment: section; content: counter(section);}
#index-swiper .swiper-pagination span.swiper-pagination-bullet-active { background:var(--color-primary-7); color:#fff;}
#index-swiper .swiper-slide img { display: block; width: 100%;}
/*bulletin*/
#bulletin { flex: 1; overflow: hidden; position: relative;}
#bulletin p { padding:350px 10px 0; font-size: 16px; line-height:30px; position: absolute; color: #555; animation-name: bulletinScroll; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 10s;/*每行高30，每行1秒，默认高300为10秒*/}
@keyframes bulletinScroll { 0% { transform: translateY(0);} 100% { transform: translateY(-100%);}}

/*homeLines*/
.homeLines { display: flex; width: 100%; margin-top: 40px;}
.homeLines ._left { width: 200px;}
.homeLines ._left div { font-size: 24px; color: var(--color-primary-7); border-bottom: 1px solid var(--color-primary-7); height: 36px;}
.homeLines ._left p { padding: 3px 0;}
.homeLines ._left strong { display: block; color: #333; font-size: 16px; padding: 10px 0;}
.homeLines ._left a { font-size: 12px; line-height: 2; padding:5px 10px; white-space: nowrap; color: #777;}
.homeLines ._left a:hover { color: #fff; background-color: var(--color-primary-7);}
.homeLines ._right { flex: 1;}
.homeLines ._right ._top { border-bottom: 1px solid var(--color-primary-7); height: 31px; margin-top: 5px; padding-left: 20px; display: flex;}
.homeLines ._right ._top ._menu { display: flex; flex: 1; overflow: hidden;}
.homeLines ._right ._top ._menu a { margin: 0 3px;}
.homeLines ._right ._top a { font-size: 14px; padding:5px 8px; white-space: nowrap; color: #777;}
.homeLines ._right ._top a.more { float: right; font-weight: bold; color: var(--color-primary-7);}
.homeLines ._right ._top a:hover { background-color: #ddd;}
.homeLines ._right ._top a.active { color: #fff; background-color: var(--color-primary-7); cursor: default;}
.homeLines ._right ._list a { margin: 20px 0 0 20px; display: flex; width: 180px; height: 210px; flex-direction: column;}
.homeLines ._right ._list a ._img { width: 100%; height: 110px; display: block; background-color: #ddd;}
.homeLines ._right ._list ._load { animation: blink 2s infinite; display: flex; flex-wrap: wrap;}
.homeLines ._right ._list ._load a { cursor: default;}
.homeLines ._right ._list ._load ._title { flex: 1;}
.homeLines ._right ._list ._load ._title p { background-color: #ddd; height: 10px; margin-top: 10px;}
.homeLines ._right ._list ._load ._price { background-color: #ddd; height: 15px;}
.homeLines ._right ._list ._item { display: flex; flex-wrap: wrap;}
.homeLines ._right ._list ._item a:hover { background-color: #eee;}
.homeLines ._right ._list ._item a:hover img { opacity: .8;}
.homeLines ._right ._list ._item ._title { flex: 1;}
.homeLines ._right ._list ._item ._title { color: #555; line-height: 1.5; padding: 5px; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}
.homeLines ._right ._list ._item ._title span { color: #fff; border-radius: 2px; padding: 2px 5px; font-size: 12px; margin-right: 5px;}
.homeLines ._right ._list ._item ._price { padding: 5px; display: flex;}
.homeLines ._right ._list ._item ._price .money { color: #f60; font-size: 16px;}
.homeLines ._right ._list ._item ._price span { font-size: 12px; color: #999; text-align: right; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.lineSearch { border: 1px solid #eee; margin-top: 10px; padding: 10px; color: #555;}
.lineSearch ._list { display: flex; padding: 10px;}
.lineSearch ._list ._title { width: 80px; text-align: right; font-weight: bold;}
.lineSearch ._list ._title::after { content: "：";}
.lineSearch ._list ._item a { color: #555; padding: 5px; margin-right: 5px; white-space: nowrap;}
.lineSearch ._list ._item a.active,
.lineSearch ._list ._item a:hover { background-color: var(--color-primary-7); color: #fff; border-radius: 2px;}
.lineSearch ._filter { display: flex; border-top: 1px solid #eee; padding-top: 10px; align-items: center;}
.lineSearch ._filter ._sort a { color: #555; margin:0 15px;}
.lineSearch ._filter ._sort a.active { color: var(--color-auxiliary-7);}
.lineSearch ._filter ._sort a:hover { color: var(--color-auxiliary-7); text-decoration: underline;}
.lineSearch ._filter ._price { padding: 0 30px;}
.lineSearch ._filter ._price::before { content: "价格区间：";}
.lineSearch ._filter ._price input { width: 80px;}
.lineSearch ._filter ._check { display: flex;}
.lineSearch ._filter ._check label { cursor: pointer; margin: 0 20px;}

.lineList a { display: flex; border: 1px solid #eee; margin-top: 10px; padding: 10px; color: #555;}
.lineList a ._left { width: 200px;}
.lineList a ._left img { width: 100%;}
.lineList a ._right { flex: 1; padding-left: 10px;}
.lineList a ._right ._title { font-size: 16px; font-weight: bold; color: #333;}
.lineList a ._right ._title span { color: #fff; border-radius: 2px; font-size: 12px; padding: 3px 8px; margin-right: 5px; margin-top: -2px;}
.lineList a ._right ._subtitle { padding-top: 10px;}
.lineList a ._right ._subtitle span { padding-right: 10px; color: var(--color-primary-7);}
.lineList a ._right ._subtitle span::after { content: "出发";}
.lineList a ._right ._supplier { padding-top: 10px;}
.lineList a ._right ._supplier::before { content: "供应商：";}
.lineList a ._price { vertical-align: bottom; font-size: 24px; color: #f60;}

/*pageBar*/
.pageBar { display: flex; padding: 8px 0; justify-content: right;}
.pageBar form { font-size: 14px; padding: 0 10px; display: flex; justify-content: right; align-items: center; flex-wrap: wrap;}
.pageBar form a { display: block; border-radius: 2px; color: #555; line-height: 40px; padding: 0 15px; text-align: center; margin: 3px; -webkit-transition: .25s; -moz-transition: .25s; -o-transition: .25s; transition: .25s;}
.pageBar a:hover { background-color: var(--color-background-4); color: var(--color-primary-7);}
.pageBar input { width: 50px; text-align: center; margin: 3px; line-height: 36px; padding: 0;}
.pageBar a.active { cursor: default;}
.pageBar a.active,
.pageBar button { background-color: var(--color-primary-7) !important; color: #fff !important;}
.pageBar button { padding:0 15px; line-height: 40px; border: none; cursor: pointer; border-radius: 2px; margin:3px 0 3px 5px; -webkit-transition: .25s; -moz-transition: .25s; -o-transition: .25s; transition: .25s;}
.pageBar button:hover { opacity: .7; background-color: var(--color-primary-5) !important;}

/*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 & button*/
.button { display: inline-block; padding: 0 15px; cursor: pointer; background-color: transparent; font-size: 14px; border-radius: 2px; transition:.4s; line-height: 36px; border: 1px solid #ccc; color: #555; white-space: nowrap; user-select: none;}
.input { border-radius: 2px; outline: none; transition:.4s; font-size: 14px; padding:0 10px; line-height: 36px; border: 1px solid #ccc; background-color: #fff; color: #555;}
.button:hover,
.input:focus { border-color: var(--color-primary-7) !important; background-color: var(--color-primary-1) !important;}
/*checkbox*/
.checkbox input[type="checkbox"] { display: none;}
.checkbox input[type="checkbox"] + span { user-select:none; cursor:pointer; display: flex; align-items: center;}
.checkbox input[type="checkbox"] + span::before { content: ""; display: block; border:1px solid #bbb; border-radius: 2px; height:20px; line-height:20px; width:20px; margin-right: 3px; text-align: center; font-weight: bold; color: var(--color-primary-7); font-size: 16px;}
.checkbox input[type="checkbox"]:checked + span::before { border-color:var(--color-primary-7); content: "✓"}

/*lineDetail*/
.lineDetail ._primary { display: flex; margin-top: 20px;}
.lineDetail ._left { width: 525px;} 
.lineDetail ._img { position: relative;}
.lineDetail ._img img { width: 100%; display: block; height: 300px;}
.lineDetail ._img a { position: absolute; right: 0; bottom: 0; background:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.6) 100%); color: #fff; padding: 10px 10px 10px 50px; text-align: center;}
.lineDetail ._img a::before { content: "点击查看图片"; display: block;}
.lineDetail ._noDate { display: flex; justify-content: center; align-items: center; font-size: 18px; padding: 20px 0;}
.lineDetail ._loader { display: flex; justify-content: center; align-items: center; height: 401px;}
.lineDetail ._right { flex: 1; padding-left: 20px;}
.lineDetail ._right ._title { font-size: 20px;}
.lineDetail ._right ._explain { color: #555; margin-top: 10px;}
.lineDetail ._right ._attribute { display: flex; margin-top: 20px; color: #777;}
.lineDetail ._right ._attribute div { padding-right: 20px;}
.lineDetail ._right ._price { padding: 30px 0;}
.lineDetail ._right ._price .money { color: #f60; font-size: 32px;}
.lineDetail ._right ._other { display: flex; margin-top: 20px;}
.lineDetail ._right ._other ._lable { width: 90px; font-weight: bold; text-align: center;}
.lineDetail ._right ._supplierUser { display: flex; margin-top: 20px;}
.lineDetail ._right ._supplierUser ._avatar { padding-right: 20px;}
.lineDetail ._right ._supplierUser ._avatar img { display: block; width: 75px; height: 75px; border-radius: 50%;}
.lineDetail ._right ._supplierUser ._recommend { display: flex; line-height: 1.8;}
.lineDetail ._right ._supplierUser ._recommend strong { display: block; font-weight: bold; font-size: 18px;}
.lineDetail ._right ._supplierUser ._recommend::before,
.lineDetail ._right ._supplierUser ._recommend::after { color: var(--color-primary-7); font-size: 70px; line-height: 1;}
.lineDetail ._right ._supplierUser ._recommend::before { content: "“"; line-height: 60px;}
.lineDetail ._right ._supplierUser ._recommend::after { content: "”"; height: 30px; align-self: flex-end;}
.lineDetail ._right ._departure { color: #f60; border: 2px solid #f60; padding: 4px 10px;}
.lineDetail ._right ._booking { display: flex; align-items: center; justify-content: center; padding: 20px 0;}
.lineDetail ._right ._booking ._stat { flex: 1; text-align: center;}
.lineDetail ._right ._booking a { display: block; background-color: #eee; padding: 15px 20px; border-radius: 3px; color: #555;}
.lineDetail ._right ._booking ._submit { background-color: var(--color-auxiliary-7); color: #fff;}
.lineDetail ._right ._booking ._submit:hover { opacity: 0.8;}
.lineDetail ._section { display: flex; margin-top: 40px;}
.lineDetail ._section ._title { width: 120px;}
.lineDetail ._section ._title div { background-color: var(--color-primary-7); color: #fff; width: 80px; margin: 0 auto; border-radius: 3px; text-align: center; padding: 20px 0; font-size: 16px;}
.lineDetail ._section ._content { flex: 1; line-height: 1.8; overflow: hidden; white-space: pre-wrap;}
.lineDetail ._section ._content._summary { display: flex; flex-wrap: wrap;}
.lineDetail ._section ._content._summary div { width: 33.3%; display: flex;}
.lineDetail ._section ._content._summary div i { display: block; padding: 10px 10px 0 0; font-size: 20px; color: var(--color-primary-7);}
.lineDetail ._section ._content._summary div p { padding:10px 20px 0 0;}
.lineDetail ._section ._content._price strong { font-weight: bold; display: block;}
.lineDetail ._section ._trip ._items { display: flex; padding: 5px 0;}
.lineDetail ._section ._trip ._keys { width: 100px; display: flex; flex-direction: column; align-items: center;}
.lineDetail ._section ._trip ._value { flex: 1;}
.lineDetail ._section ._trip ._day { text-align: center; border: 2px solid #999; border-radius: 3px; font-size: 18px; line-height: 20px; font-weight: bold;}
.lineDetail ._section ._trip ._day::before { content: "Day"; display: block; background-color: #999; color: #fff; padding: 0 5px; font-size: 12px; line-height: 16px; font-weight: normal;}
.lineDetail ._section ._trip ._course { font-weight: bold; font-size: 20px;}
.lineDetail ._section ._trip ._steup::before { display: block; font-size: 14px; line-height: 14px; padding: 5px 0;}
.lineDetail ._section ._trip ._times { font-size: 16px; line-height: 16px; font-weight: bold;}
.lineDetail ._section ._trip ._lines { width: 1px; border-left: 1px dashed #ccc; flex: 1;}

.imagesList { display: none; background-color: rgba(0, 0, 0, 0.4); position: fixed; left: 0; top: 0; right: 0; bottom: 0; justify-content: center; align-items: center;}
.imagesList ._body { display: flex; justify-content: center; align-items: center; background-color: #fff; width: 90%; height: 90%; padding: 30px 0;}
.imagesList ._left,
.imagesList ._right { border-style: solid; border-width: 5px; width: 30px; height: 30px; cursor: pointer; transform: rotate(45deg);}
.imagesList ._left { border-color: transparent transparent #555 #555; margin-left: 20px;}
.imagesList ._right { border-color: #555 #555 transparent transparent; margin-right: 20px;}
.imagesList ._list { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden;}
.imagesList ._thumb { display: flex; padding-top: 20px; overflow: auto;}
.imagesList ._thumb img { width: 100px; display: block; margin-right: 10px; cursor: pointer; padding: 2px; border: 2px solid #fff;}
.imagesList ._thumb img:hover { opacity: 0.8;}
.imagesList ._thumb img.active { border-color: var(--color-primary-7);}
.imagesList ._view { flex: 1; background-image: url(/images/blank.gif); background-repeat: no-repeat; background-size: contain; background-position: center center;}
.imagesList ._view img { display: block; width: 100%; height: 100%; object-fit:contain;}

.lineDetail ._calendar { margin-top: 10px;}
.lineDetail ._calendar ._month { display: flex; justify-content: center; align-items: center; padding-bottom: 10px; overflow: auto; flex-wrap: nowrap;}
.lineDetail ._calendar ._month div { border-bottom: 4px solid #fff; cursor: pointer; padding: 10px 15px 5px; line-height: 1;}
.lineDetail ._calendar ._month div.active { border-color: var(--color-primary-7); color: var(--color-primary-7);}
.lineDetail ._calendar ._month span { display: block; text-align: center; font-size: 16px;}
.lineDetail ._calendar ._week { display: flex; justify-content: center; align-items: center;}
.lineDetail ._calendar ._week span { flex: 1; font-size: 16px; text-align: center; line-height: 40px;}
.lineDetail ._calendar ._days { display: none; flex-wrap: wrap;}
.lineDetail ._calendar ._days a { flex: 0 0 calc(100% / 7); text-align: center; height: 50px; color: #333; cursor: default; padding-top: 10px;}
.lineDetail ._calendar ._days a.none { color: #ccc; cursor: default;}
.lineDetail ._calendar ._days a.some { cursor: pointer; border-radius: 3px;}
.lineDetail ._calendar ._days a.some:hover { background-color: #ccc;}
.lineDetail ._calendar ._days .money { color: #f60;}




.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: 2px; 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: 2px; line-height: 50px; padding: 0 20px; cursor: pointer;}
.wk_button:hover { background-color: var(--color-primary-5);}
/*close*/
.wk_close { 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;}
.wk_close:hover { background-color: var(--color-error-7); border-radius: 50%;}
.wk_close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.wk_close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -1px;}
.wk_close::before,
.wk_close::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;}
.wk_close:hover::before,
.wk_close:hover::after { background-color: #fff;}
/*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: 2px; 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: 2px; font-size: 16px; cursor: pointer;}
.wk_wrap .__fluid .__btn button:hover { opacity: .8;}

/*tips*/
.wk_tips { background-color: var(--color-primary-7); color: #fff; padding:12px 15px; font-size: 14px; border-radius: 2px; 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;}

/*loading*/
.loader { 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;}
.loader 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;}
.loader 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: loader 2s infinite linear;}
@keyframes loader {	100% {background-position: right -50px top 0}}

.loader2 { width: 40px; height: 40px; position: relative; animation: rotate 1s linear infinite; border-radius: 50%; border: 4px solid rgba(0, 0, 0,0.1); border-top-color: var(--color-primary-7);}

/*animation*/
@keyframes rotate {	to { transform: rotate(360deg);}}

@-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}

@keyframes blink { 0% { opacity: 1;} 35% { opacity: 0;} 100% { opacity: 1;}}