@charset "utf-8";

.ell{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.clamp{ display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}

.menu{ display: none;}

body{ background: var(--fourth);}

header{ position: fixed; z-index: 9; top: 0; right: 0; left: 0; display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw; width: 100%; height: 6rem; margin: auto; transition: .5s;}
header .logo{ grid-column: span 4; display: grid; grid-template-columns: 6rem auto;}
header .logo .ico{ grid-row: 1 / 3; align-self: center; justify-self: center; width: 3rem; height: 3rem; background: url('../img/logo-ico-w.svg') center center no-repeat #007aff; background-size: 2.5rem auto;}
header .logo .cn{ grid-column: 2 / 3; justify-self: start; align-self: end; font-size: 1.75rem; font-weight: bold; color: var(--w)}
header .logo .en{ grid-column: 2 / 3; justify-self: start; align-self: start; font-size: 0.75rem; text-transform: uppercase; color: var(--w3); letter-spacing: .1em;}
header nav{ grid-column: 6 / 13; display: grid; grid-template-columns: repeat(7,1fr) 6rem;}
header nav .itm{ position: relative; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: .3s;}
header nav .itm .cn{ font-size: 1.125rem; line-height: 1.5; font-weight: bold; color: var(--w); transition: .3s;}
header nav .itm .en{ font-size: 0.75rem; line-height: 1.5; color: var(--w5); transition: .3s;}

header nav .itm:hover .cn{ color: var(--tertiary)}
header nav .itm:hover .en{ color: var(--w);}

header nav .search{ position: relative; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: .5s;}
header nav .search i{ font-size: 1.6875rem; line-height: 1; color: var(--w); transition: .5s;}
header nav .search span{ font-size: 0.75rem; line-height: 1.5; color: var(--w); transition: .5s;}
header nav .search .box{ position: absolute; top: 100%; right: 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 220%; height: 3rem; background: var(--w); transform: translateX(100%); transition: .5s;}
header nav .search .box input{ border: none; border-radius: 0; font-size: .875rem; line-height: 1.5; padding: .25em .5em}
header nav .search .box input[type=text]{ background: #f1f1f1;}
header nav .search .box input[type=button],
header nav .search .box input[type=submit]{ background: var(--primary); font-family: 'hfdz'; color: var(--w); cursor: pointer; transition: .5s;}

header nav .search:hover i{ color: var(--tertiary)}
header nav .search:hover .box{ transform: translateX(0);}

header.full{ top: 0; width: 100%; background: var(--w); box-shadow: 0 .5rem .5rem -.25rem rgba(1, 15, 60, .1);}
header.full .logo .ico{ background-color: #007aff;}
header.full .logo .cn{ color: var(--primary)}
header.full .logo .en{ color: var(--secondary)}
header.full nav .itm .cn{ color: var(--primary)}
header.full nav .itm .en{ color: var(--secondary)}
header.full nav .search i{ color: var(--primary)}
header.full nav .search span{ color: var(--secondary)}

header.full nav .itm:hover{ background: var(--primary);}
header.full nav .itm:hover .cn{ color: var(--w)}
header.full nav .itm:hover .en{ color: var(--w5)}
header.full nav .search:hover{ background: var(--primary);}
header.full nav .search:hover i{ color: var(--w)}
header.full nav .search:hover span{ color: var(--w)}
header.full nav .search:hover .box{ background: var(--primary);}
header.full nav .search:hover .box input[type=button],
header.full nav .search:hover .box input[type=submit]{ background: var(--tertiary); color: var(--w)}

.container{ position: relative; z-index: 0; width: 100%; height: auto;}

.slide{ position: relative; width: 100%; height: 100vh;}
.slide .swiper-container{ width: 100%; height: 100%; overflow: hidden;}
.slide .swiper-container .itm{ position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
.slide .swiper-container .itm .cover{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transform: scale(1); transition: 4s;}
.slide .swiper-container .itm .cover:after{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 16rem; background: linear-gradient(rgba(19,29,64,1), rgba(19,29,64,0)); mix-blend-mode: multiply;}
.slide .swiper-container .itm.swiper-slide-active .cover{ transform: scale(1.1);}

.slide .swiper-container .itm .font{ position: relative; z-index: 1; top: 100%; display: grid; grid-gap: 1.25vw; width: 60%; padding: 2.5vw 2.5vw 2.5vw 10vw; transform: translateY(-50%); text-shadow: 4px 4px 5px rgba(19, 29, 64, .5); background: rgba(19,29,64,.5); opacity: 0; transition: 2s;}
.slide .swiper-container .itm .font .caption{ margin-bottom: 1rem; font-size: 2rem; line-height: 2; font-weight: normal; text-transform: uppercase; color: var(--w);}
.slide .swiper-container .itm .font .cn{ font-size: 3rem; line-height: 1; color: var(--w); font-weight: bold;}
.slide .swiper-container .itm .font .en{ font-size: 1.5rem; line-height: 1.75; color: var(--w); font-weight: bold; text-transform: uppercase;}
.slide .swiper-container .itm .font .more{ position: relative; margin-top: 1rem; display: flex; flex-flow: row nowrap; align-items: center; padding: .5em 0; font-size: 1rem; line-height: 2; color: var(--w); text-transform: uppercase;}
.slide .swiper-container .itm .font .more:before{ content: ''; margin-right: 1rem; width: 6rem; height: 1px; background: var(--w); box-shadow: 4px 4px 5px rgba(19, 29, 64, .5);}
.slide .swiper-container .itm.swiper-slide-active .font{ top: 50%; opacity: 1;}

.slide .slide-contrl{ position: absolute; z-index: 3; right: 10vw; bottom: 2.5vw; display: flex;}
.slide .slide-contrl .dots{ display: flex; flex-flow: row nowrap; align-items: flex-end; justify-content: center; height: 1rem; padding: 0 1rem}
.slide .slide-contrl .dots span{ width: 6px; height: 6px; margin: 0 .5rem; border-radius: 0; background: var(--w); opacity: 1; transition: .5s;}
.slide .slide-contrl .dots span.swiper-pagination-bullet-active{ height: 1rem;}
.slide .slide-contrl .page{ display: flex; justify-content: center; align-items: center; font-size: 1rem; line-height: 1; color: var(--w)}

.row{ position: relative; display: grid; grid-gap: 1.25vw; width: 100%; padding: 3.75vw 10vw;}
.row .row-title{ position: relative; z-index: 1; display: grid; width: 100%; overflow: hidden;}
.row .row-title .cn{ font-size: 1.75rem; line-height: 1.5; font-weight: bold; color: var(--primary)}
.row .row-title .en{ font-size: 1.125rem; line-height: 1.5; color: var(--d5)}
.row .row-title .more{ grid-row: 1 / 3; grid-column: 2 / 3; display: flex; align-items: center; justify-content: flex-end;}
.row .row-title .more:before{ content: '查看更多'; position: relative; z-index: 1; color: var(--primary); text-transform: uppercase; transition: .3s;}
.row .row-title .more:hover:before{ color: var(--tertiary);}

.row .row-content{ position: relative; z-index: 1; display: grid; width: 100%; overflow: hidden;}

/* solution */
.solution{ overflow: hidden;}
.solution .row-content{ display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); grid-gap: 1.25vw; width: 100%; overflow: visible;}
.solution .row-content .itm .box{ position: relative; top: 0; display: grid; grid-template-columns: 45% 55%; width: 100%; height: auto; overflow: hidden; background: #fafafa; transition: .5s;}
.solution .row-content .itm .box:before{ content: '\e619'; font-family: 'hfdz'; position: absolute; z-index: 1; right: .25rem; bottom: .25rem; font-size: 1.5rem; line-height: 1; color: var(--w); transition: .5s;}
.solution .row-content .itm .box:after{ content: ''; position: absolute; z-index: 0; right: -3rem; bottom: -3rem; width: 6rem; height: 6rem; border-radius: 3rem; background: var(--tertiary); transition: .3s;}
.solution .row-content .itm .box .thumb{ position: relative; z-index: 2; width: 100%; height: 0; padding-bottom: calc( 100% / 4 * 3); overflow: hidden; transition: .5s;}
.solution .row-content .itm .box .thumb .img{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 80%; height: 80%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-box-reflect:below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2)); transition: .5s;}
.solution .row-content .itm .box .info{ position: relative; z-index: 2; display: flex; flex-flow: column nowrap; padding: 1.25vw; color: var(--w); }
.solution .row-content .itm .box .info .cn{ font-size: 1.35rem; line-height: 1.5; font-weight: bold; color: var(--primary); transition: .5s;}
.solution .row-content .itm .box .info .en{ font-size: .75rem; line-height: 1.5; text-transform: uppercase; color: var(--tertiary); transition: .5s;}
.solution .row-content .itm .box .info .pos{ display: flex; flex-flow: column nowrap; margin-top: 0.625vw; font-size: 0.875rem; color: var(--d5)}
.solution .row-content .itm .box .info .pos:before{ content: '产品包含：'; transition: .5s;}
.solution .row-content .itm .box .info .pos span{ padding-left: 4em; color: var(--d5); line-height: 2; transition: .5s;}

.solution .row-content .itm:hover .box{ top: -.5rem; box-shadow: 0 1rem 1rem -.5rem rgba(1, 15, 60, .3);}
.solution .row-content .itm:hover .box:before{ transform: rotate(135deg);}
.solution .row-content .itm:hover .box:after{ border-radius: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: var(--primary);}
.solution .row-content .itm:hover .box .thumb .img{ transform: scale(1.1);}
.solution .row-content .itm:hover .box .info .cn{ color: var(--w)}
.solution .row-content .itm:hover .box .info .en{ color: var(--w)}
.solution .row-content .itm:hover .box .info .pos:before{ color: var(--w)}
.solution .row-content .itm:hover .box .info .pos span{ color: var(--w)}

/* about */
.about .mask{ content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: calc( 100% - 4vw - 3.75vw);}
.about .row-title .cn{ color: var(--w)}
.about .row-title .more:after{ background: var(--w);}
.about .row-title .more:before{ color: var(--w)}
.about .row-content{ grid-template-columns: 2fr 1fr; grid-gap: 1.25vw; }
.about .row-content .info{ display: grid; grid-gap: 1.25vw; justify-items: start; }
.about .row-content .info .tit{ font-size: 1.5rem; line-height: 1.75; color: var(--w)}
.about .row-content .info .desc{ font-size: 1rem; line-height: 2; color: var(--w)}
.about .row-content .info .detail{ padding: .5em 2.5em; margin: 2vw 0 3vw; border: 1px solid var(--w); font-size: 1rem; line-height: 1.5; text-transform: uppercase; color: var(--w); transition: .3s;}
.about .row-content .info .detail:hover{ color: var(--w); background: var(--tertiary); border-color: var(--tertiary);}

.about .row-content .number{ display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; height: 8vw; background: var(--w);}
.about .row-content .number .itm{ display: grid; grid-gap: 0.5rem;}
.about .row-content .number .itm .num span{ font-size: 3rem; line-height: 1; color: var(--tertiary)}
.about .row-content .number .itm .num i{ font-size: 0.75rem; line-height: 1.5; color: var(--secondary); font-style: normal;}
.about .row-content .number .itm .cap{ font-size: 1.125rem; line-height: 1.5; color: var(--primary)}
.about .row-content .cover{ grid-column: 2 / 3; grid-row: 1 / 3; }
.about .row-content .cover .img{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;}

/* culture */
.culture .mask{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: calc( 50% + 1.3125rem + .625vw ); }
.culture .row-title .cn{ color: var(--w)}
.culture .row-title .more:after{ background: var(--w);}
.culture .row-title .more:before{ color: var(--w)}
.culture .row-content{ grid-template-columns: repeat(3,1fr);}
.culture .row-content .itm{ display: grid; grid-template-rows: repeat(2,1fr); grid-template-areas: 'a''b';}
.culture .row-content .itm .info{ display: flex; flex-flow: column nowrap; justify-content: center; padding: 1.5rem; transition: .5s;}
.culture .row-content .itm .info .cap{ display: flex; align-items: center; color: var(--w); transition: .5s}
.culture .row-content .itm .info .cap .cn{ font-size: 1.25rem; color: var(--w); transition: .5s}
.culture .row-content .itm .info .cap .en{ font-size: 0.75rem; margin-left: 1rem; color: var(--w); transition: .5s}
.culture .row-content .itm .info .slo{ margin: 1.5rem 0; font-size: 1.5rem; line-height: 1.5; font-weight: bold; color: var(--w); transition: .5s;}
.culture .row-content .itm .info .font{ font-size: .875rem; line-height: 2; color: var(--w); transition: .5s }
.culture .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc( 100% / 16 * 9 ); overflow: hidden; transition: .5s}
.culture .row-content .itm .thumb:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: var(--primary); opacity: 0; background-blend-mode: overlay; transition: .5s}
.culture .row-content .itm .thumb .img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: .5s}
.culture .row-content .itm:nth-child(2) .info{ grid-area: b;}
.culture .row-content .itm:nth-child(2) .thumb{ grid-area: a;}
.culture .row-content .itm:nth-child(2) .info .cap .cn{ color: var(--primary)}
.culture .row-content .itm:nth-child(2) .info .cap .en{ color: var(--primary)}
.culture .row-content .itm:nth-child(2) .info .slo{ color: var(--primary)}
.culture .row-content .itm:nth-child(2) .info .font{ color: var(--primary)}

.culture .row-content .itm:hover .info{ background: var(--primary);}
.culture .row-content .itm:hover .info .cap .cn{ color: var(--w)}
.culture .row-content .itm:hover .info .cap .en{ color: var(--w)}
.culture .row-content .itm:hover .info .slo{ color: var(--w)}
.culture .row-content .itm:hover .info .font{ color: var(--w)}
.culture .row-content .itm:hover .thumb .img{ transform: scale(1.1);}
.culture .row-content .itm:hover .thumb:after{ opacity: .8;}

/* news */
.news .row-content{ grid-template-columns: repeat(3,1fr); grid-gap: 1.25vw; overflow: visible;}
.news .row-content .itm{ position: relative; z-index: 0; top: 0; width: 100%; background: var(--w); padding: 2.5vw 1.25vw; transition: .5s;}
.news .row-content .itm:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 0; height: 2px; background: var(--tertiary); transition: .5s}
.news .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3); margin: 2.5vw 0; overflow: hidden; transition: .5s}
.news .row-content .itm .thumb .img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: .5s}
.news .row-content .itm .info{ display: grid; grid-gap: .5rem;}
.news .row-content .itm .info .date{ color: var(--primary); line-height: 1.25;}
.news .row-content .itm .info .date .md{ font-size: 1.5rem;}
.news .row-content .itm .info .date .y{ font-size: 1rem;}
.news .row-content .itm .info .tit{ margin-top: 1.25vw; font-size: 1.25rem; color: var(--d); transition: .5s}
.news .row-content .itm .info .desc{ font-size: 1rem; color: var(--d5)}
.news .row-content .itm .detail i{ position: relative; left: 0; display: block; width: 2rem; border-radius: var(--rounded); font-size: 2rem; line-height: 1; color: var(--d2); transition: .5s}

.news .row-content .itm:hover{ top: -.5rem; box-shadow: 0 1rem 1rem -.5rem rgba(220, 181, 114, .3);}
.news .row-content .itm:hover:after{ width: 100%;}
.news .row-content .itm:hover .info .tit{ color: var(--tertiary)}
.news .row-content .itm:hover .detail i{left: 50%; transform: translateX(-50%); color: var(--tertiary)}
.news .row-content .itm:hover .thumb .img{ transform: scale(1.1);}

/* banner */
.banner{ position: relative; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 20vw;}
.banner .ico{ position: relative; z-index: 1; width: 4rem; height: 4rem; background: url('../img/logo-ico-w.svg') center center no-repeat; background-size: 100% auto;}
.banner .cn{ position: relative; z-index: 1; font-size: 2.5rem; line-height: 2; color: var(--w); font-weight: bold;}
.banner .en{ position: relative; z-index: 1; font-size: 2rem; line-height: 1.5; color: var(--w); text-transform: uppercase;}

/* achieve */
.achieve{ padding-top: 0;}
.achieve .row-content{ grid-template-columns: repeat(3,1fr); grid-gap: 1.25vw; overflow: visible}
.achieve .row-content .itm{ position: relative; z-index: 0; top: 0; overflow: hidden; transition: .5s;}
.achieve .row-content .itm .thumb{ position: relative; z-index: 0; width: 100%; height: 0; padding-bottom: calc( 100% / 16 * 9 ); overflow: hidden; overflow: hidden;}
.achieve .row-content .itm .thumb .img{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: .5s}
.achieve .row-content .itm .info{ position: absolute; z-index: 1; top: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 1.125rem; line-height: 1.5; color: var(--w); font-weight: bold; background: var(--primary); opacity: 0.9; transform: translateY(100%); transition: .5s}

.achieve .row-content .itm:hover{ top: -0.5rem; box-shadow: 0 1rem 1rem -.5rem rgba(1, 15, 60, .3); transition: .5s 0;}
.achieve .row-content .itm:hover .info{ transform: translateY(0);}
.achieve .row-content .itm:hover .thumb .img{ transform: scale(1.1);}

/* map */
.map{ position: relative; width: 100%; height: 15vw;}
.map .content{ position: absolute; z-index: 1; top: 0; right: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(19,29,64,.9); background-blend-mode: overlay;}
.map .content i{ font-size: 4rem; line-height: 1; color: var(--w)}
.map .content .cn{ font-size: 1.75rem; line-height: 1.5; color: var(--w);}
.map .content .en{ font-size: 1.125rem; line-height: 1.5; color: var(--w);}

/* contact */
.contact{ padding: 3.75vw 10vw; background: var(--primary) url('../img/bg.webp'); background-blend-mode: overlay;}
.contact .content{ display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1.25vw; overflow: visible;}
.contact .content .info{ grid-column: 8 / 13; text-align: right;}
.contact .content .info .caption{ margin-bottom: 1em; font-size: 1.5rem; line-height: 2; font-weight: bold; color: var(--w);}
.contact .content .info .itm{ display: flex; justify-content: flex-end; align-items: center; font-size: 1.125rem; line-height: 2; color: var(--w);}
.contact .content .info .itm i{ margin-right: 0.5em; font-size: 1.25rem; line-height: 1;}
.contact .content .nav{ grid-column: 1 / 8; display: flex; flex-flow: row nowrap; justify-content: space-between;}
.contact .content .nav dl dt a{ font-size: 1.25rem; line-height: 2; color: var(--w); transition: .3s;}
.contact .content .nav dl dd{ padding: .25em 0;}
.contact .content .nav dl dd a{ font-size: .875rem; line-height: 2; color: var(--w5); transition: .3s;}
.contact .content .nav dl dt a:hover{ color: var(--tertiary)}
.contact .content .nav dl dd a:hover{ color: var(--w)}
.contact .content .qrcode{display: grid; justify-items: start; }
.contact .content .qrcode .itm{ display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; text-align: center;}
.contact .content .qrcode .itm img{ width: 6rem; height: 6rem;}
.contact .content .qrcode .itm span{ margin-top: 1rem; font-size: 0.875rem; line-height: 1.5;}

/* footer */
footer{ position: relative; background: var(--primary) url('../img/bg.webp'); background-blend-mode: overlay; overflow: hidden;}
footer .copyright:before{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 1px; background: var(--secondary);}
footer .copyright{ position: relative; display: flex; justify-content: space-between; align-items: center; padding: 1rem 10vw; font-size: 0.75rem; line-height: 2; color: var(--w); text-transform: uppercase;}
footer .copyright:after{ content: '百航科技 - 网络品牌设计';}


/* sub */
.sub{ padding-top: 6rem;}

.location{ position: relative; z-index: 2;  display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; padding: 1.25vw 10vw; background: var(--w); box-shadow: 0 .5rem .5rem -.25rem rgba(1, 15, 60, .1);}
.location .category{ display: flex; flex-flow: row nowrap; align-items: center; font-size: 1rem; line-height: 1.5;}
.location .category a{ color: var(--d)}
.location .category a:not(:last-child){ margin-right: 2em;}
.location .category a.on{ color: var(--tertiary)}
.location .bread{ display: flex; flex-flow: row nowrap; align-items: center; font-size: 1rem; line-height: 1.5;}
.location .bread a{ color: var(--d3)}
.location .bread a:not(:last-child):after{ content: '\e60e'; font-family: 'hfdz'; font-size: 0.75rem; padding: 0 .5em; color: var(--d3)}
.location .bread a:last-child{ color: var(--primary)}
.location .bread a:hover{ color: var(--tertiary)}

.newspage .row-content{ grid-template-columns: repeat(3,1fr); grid-gap: 1px; overflow: visible; background: #eee;}
.newspage .row-content .itm{ position: relative; z-index: 0; display: grid; grid-gap: 1.5rem; width: 100%; background: var(--w); padding: 2.5vw 3vw; transition: .5s;}
.newspage .row-content .itm:after{ content: ''; position: absolute; z-index: 0; bottom: -1px; left: auto; right: 0; width: 0; height: 2px; background: var(--tertiary); transition: .5s}
.newspage .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3); overflow: hidden; transition: .5s}
.newspage .row-content .itm .thumb .img{ position: absolute; z-index: 0; top: 0; right: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: .5s}
.newspage .row-content .itm .info{ display: grid; grid-gap: 1rem; }
.newspage .row-content .itm .info .tit{ font-size: 1.25rem; line-height: 1.5; color: var(--d); transition: .5s}
.newspage .row-content .itm .info .desc{ font-size: .875rem; line-height: 2; color: var(--d5);}
.newspage .row-content .itm .info .date{ font-size: 3rem; line-height: 1; font-weight: bolder; color: #eee; transition: .5s}
.newspage .row-content .itm .detail{ position: absolute; right: 3vw; bottom: 2.5vw; border-bottom: 1px solid var(--w); font-size: 1rem; line-height: 2; color: var(--w); text-transform: uppercase; transition: .5s}

.newspage .row-content .itm:hover:after{ left: 0; right: auto; width: 100%;}
.newspage .row-content .itm:hover .thumb .img{ transform: scale(1.1);}
.newspage .row-content .itm:hover .info .tit{ color: var(--tertiary)}
.newspage .row-content .itm:hover .info .date{ color: var(--tertiary);}
.newspage .row-content .itm:hover .detail{ border-color: var(--tertiary); color: var(--tertiary);}


.row-page{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin-top: 3.75rem;}
.row-page a{ padding: .5em 1em; margin: 0 .25em; font-size: 1.125rem; line-height: 1.5; color:var(--d); background: var(--w); transition: .3s;}
.row-page a:hover{ color: var(--w); background: var(--tertiary);}
.row-page a.on{ color: var(--w); background: var(--primary);}
.row-page a.dis{ display: none;}

.banner-sub{ position: relative; width: 100%; height: 25vw;  background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
.banner-sub .title{ position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; margin: auto; display: flex; flex-flow: column nowrap; justify-content: center; width: 100%; padding: 0 10vw; background: rgba(19,29,64,.85); line-height: 1.5; opacity: 1; transition:.3s;}
.banner-sub .title .cn{ font-size: 2.5rem; color: var(--w); font-weight: bolder;}
.banner-sub .title .en{ font-size: 1.5rem; color: var(--w); font-weight: bold;}
.banner-sub .title .desc{ font-size: 1.25rem; color: var(--w)}

/* contact */
.mapbox{ position: relative; z-index: 0; width: 100%; height: 35vw;}
.mapbox #map{ position: relative; z-index: 0; width: 100%; height: 100%;}
.mapbox .title{ position: absolute; z-index: 2; top: 0; bottom: 0; left: 10vw; margin: auto; display: flex; flex-flow: column nowrap; justify-content: center; width: 26%; line-height: 1.5; opacity: 1; transition:.3s;}
.mapbox .title .cn{ font-size: 2.5rem; color: var(--w); font-weight: bolder;}
.mapbox .title .en{ font-size: 1.5rem; color: var(--w); font-weight: bold;}
.mapbox .title .desc{ font-size: 1.25rem; color: var(--w)}

.mapbox:after{ content: ''; position: absolute; z-index: 1; top: 0; right: 0; width: 100%; height: 100%; background: rgba(19,29,64,.95); mix-blend-mode: multiply; opacity: 1; transition:.3s;}
.mapbox:hover:after{ opacity: 0; z-index: -1;}
.mapbox:hover .title .cn{ color: var(--primary)}
.mapbox:hover .title .en{ color: var(--primary)}
.mapbox:hover .title .desc{ color: var(--primary)}
.contactpage{ position: relative; z-index: 1; padding: 0 10vw; margin-top: -7vw; margin-bottom: 3.75vw;}
.contactpage .row-content{ grid-template-columns: repeat(3,1fr);}
.contactpage .row-content .itm{ display: grid; padding: 4vw 3vw; background: var(--w);}
.contactpage .row-content .itm:last-child{ background: var(--primary);}
.contactpage .row-content .itm:last-child{ grid-template-columns: repeat(2,1fr); grid-gap: 2rem 0;}
.contactpage .row-content .itm .caption{ display: flex; flex-flow: column nowrap;}
.contactpage .row-content .itm .caption .cn{ font-size: 1.5rem; line-height: 1.5; color: var(--primary)}
.contactpage .row-content .itm .caption .en{ font-size: 1rem; line-height: 1; color: var(--d3)}
.contactpage .row-content .itm .caption .line{ width: 1rem; height: 2px; margin-top: 2rem; background: var(--d5);}
.contactpage .row-content .itm .info{ display: grid; grid-gap: 0.5rem; padding-top: 1.75rem;}
.contactpage .row-content .itm .info span{ font-size: .875rem; color: var(--d5); line-height: 1.5;}
.contactpage .row-content .itm .info span b{ font-weight: normal; color: var(--d2)}

.contactpage .row-content .itm .qrcode{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;}
.contactpage .row-content .itm .qrcode img{ width: 7rem; height: 7rem; background: var(--w);}
.contactpage .row-content .itm .qrcode span{ padding: .5em 0; font-size: 0.75rem; line-height: 2; color: var(--w)}
.contactpage .row-content .itm .social{ grid-column: span 2; display: grid; grid-template-columns: repeat(3,1fr); justify-items: center;}
.contactpage .row-content .itm .social a i{ font-size: 2rem; line-height: 1; color: var(--w)}

/* product */
.product-category{ position: fixed; z-index: 5; display: grid; width: 100%; padding: 0 10vw; background: var(--w); overflow: hidden; transform: translateY(calc( -100% + 4rem)); transition: .5s;}
.product-category .itm{ position: relative; display: grid; grid-template-columns: 8rem auto 4rem; width: 100%; overflow: hidden; transition: .5s;}
.product-category .itm:not(:last-child):after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 1px; background: #ddd;}

.product-category .itm .cate{ position: relative; align-self: start; display: flex; justify-content: center; align-items: center; height: 4rem; padding: 0 1em; font-size: 1rem; font-weight: bold; color: var(--d); transition: .3s;}
.product-category .itm .cate:after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; height: 30%; margin: auto; background: #ddd;}

.product-category .itm .pro{ width: 100%; margin: 1rem 0; font-size: 0; overflow: hidden; transition: .5s;}
.product-category .itm .pro a{ display: inline-block; font-size: .875rem; line-height: 2rem; color: var(--d3); padding: 0 1em; border-radius: var(--rounded); transition: .3s;}

.product-category .itm .more{ display: flex; justify-content: center; align-items: center; cursor: pointer;}
.product-category .itm .more i{ font-size: 1rem; transition: .5s;}
.product-category .itm .more.act i{ transform: rotate(180deg);}

.product-category .itm:hover{ background: #fafafa;}
.product-category .itm .cate:hover{ color: var(--tertiary)}
.product-category .itm .pro a:hover{ color: var(--w); background: var(--tertiary);}

.product-category .catalog{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: 4rem; font-size: 0.875rem; cursor: pointer;}
.product-category .catalog span{ padding-top: 1em; color: var(--tertiary); line-height: 1;}
.product-category .catalog span:before{ content: '展开';}
.product-category .catalog i{ color: var(--tertiary); line-height: 1;}
.product-category .catalog.on{ flex-flow: column-reverse nowrap;}
.product-category .catalog.on i{ transform: rotate(180deg);}
.product-category .catalog.on span{ padding-top: 0;}
.product-category .catalog.on span:before{ content: '关闭';}

.product-category .catalog:hover{ background: #fafafa;}

.productpage{ padding: calc( 3.25vw + 4rem) 10vw 3.75vw;}
.productpage .row-cate{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 1px; margin-bottom: 1.25vw;}
.productpage .row-cate .itm{ display: flex; justify-content: center; align-items: center; padding: .5em 0; font-size: 1.125rem; line-height: 2; color: var(--d); background: var(--w); transition: .3s;}
.productpage .row-cate .itm:hover{ color: var(--w); background: var(--primary);}
.productpage .row-cate .itm.on{ color: var(--w); background: var(--tertiary);}
.productpage .row-content{ grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw; overflow: visible;}
.productpage .row-content .itm{ position: relative; z-index: 0; top: 0; width: 100%; background: var(--w); transition: .5s}
.productpage .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.productpage .row-content .itm .thumb .img{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: 70%; height: 70%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-box-reflect:below 0 -webkit-linear-gradient( transparent,transparent 80%,rgba(255,255,255,.2)); transition: .5s}
.productpage .row-content .itm .info{ display: grid; grid-gap: 2rem; padding: 1.5rem; background: #fafafa;}
.productpage .row-content .itm .info .tit{ font-size: 1.125rem; line-height: 1.5; color: var(--d); transition: .5s}
.productpage .row-content .itm .info .view{ justify-self: start; padding: .5em 1em; border: 1px solid #ddd; font-size: .875rem; line-height: 1.25; color: #666; transition: .5s}

.productpage .row-content .itm:hover{ top: -1rem; box-shadow: 0 1rem 1rem -.5rem rgba(220, 181, 114, .3);}
.productpage .row-content .itm:hover .thumb .img{ transform: scale(1.1);}
.productpage .row-content .itm:hover .tit{ color: var(--tertiary)}
.productpage .row-content .itm:hover .view{ color: var(--w); border-color: var(--tertiary); background: var(--tertiary);}

/* case */
.casepage .row-content{ grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw; overflow: visible;}
.casepage .row-content .itm{ position: relative; z-index: 0; top: 0; display: grid; background: var(--w); transition: .5s;}
.casepage .row-content .itm .thumb{ position: relative; z-index: 1; width: 100%; height: 0; padding-bottom: calc(100% / 16 * 9); overflow: hidden;}
.casepage .row-content .itm .thumb .img{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: cover; transition: .5s;}
.casepage .row-content .itm .info{ position: relative; z-index: 1; display: grid; grid-gap: 0.5rem; padding: 1rem 1.5rem;}
.casepage .row-content .itm .info .tit{ align-self: start; font-size: 1.125rem; line-height: 1.5; color: var(--d); transition: .5s;}
.casepage .row-content .itm .info .tit:before{ content: '合作企业：'; display: block; font-size: 0.875rem; line-height: 1.5; color: var(--d5); transition: .5s;}
.casepage .row-content .itm .info .date{ align-self: end; font-size: 1.125rem; line-height: 1.5; color: var(--d); transition: .5s;}
.casepage .row-content .itm .info .date:before{ content: '合作时间：'; display: block; font-size: 0.875rem; line-height: 1.5; color: var(--d5); transition: .5s;}
.casepage .row-content .itm:before{ content: ''; position: absolute; z-index: 0; left: auto; right: 0; bottom: 0; width: 0; height: 2px; background: var(--tertiary); transition: .5s;}
.casepage .row-content .itm:after{ content: '查看详情'; position: absolute; z-index: 1; right: 0; bottom: 0; padding: 1rem 1.5rem; font-size: 1rem; color: var(--w); transition: .5s;}

.casepage .row-content .itm:hover{ top: -1rem; box-shadow: 0 1rem 1rem -.5rem rgba(220, 181, 114, .3);}
.casepage .row-content .itm:hover:before{ left: 0; right: auto; width: 100%;}
.casepage .row-content .itm:hover:after{ color: var(--tertiary)}
.casepage .row-content .itm:hover .thumb .img{ transform: scale(1.1);}

/* job */
.jobpage .row-content{ overflow: visible;}
.joblist{ width: 100%;}
.joblist dt{ display: grid; grid-template-columns: repeat(4,1fr); background: var(--primary);}
.joblist dt span{ font-size: 1.125rem; line-height: 3; color: var(--w); text-align: center;}
.joblist dd{ background: var(--w);}
.joblist dd .tit{ display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #eee; cursor: pointer;}
.joblist dd .tit span{ font-size: 1rem; line-height: 3; color: var(--d); text-align: center;}
.joblist dd .info{ display: none; background: #fafafa; overflow: hidden;}
.joblist dd .info .col{ float: left; width: 50%; padding: 1.25vw 2.5vw}
.joblist dd .info .col span{ font-size: 1rem; line-height: 3; color: var(--d); font-weight: bold;}
.joblist dd .info .col .con{ font-size: 0.875rem!important; line-height: 1.75; color: var(--d3)}
.joblist dd .info .join{ float: left; width: 100%; display: flex; justify-content: center; align-items: center; padding: 1.25vw 0 2.5vw;}
.joblist dd .info .join a{ font-size: 1.125rem; line-height: 2.5; color: var(--w); padding: 0 1.5em; background: var(--tertiary);}

/* about */
.aboutpage{ width: 100%; height: auto; background: var(--w);}
.aboutpage .about-banner{ display: flex; flex-flow: column nowrap; justify-content: center; width: 100%; height: 30vw; padding: 0 10vw; background: url('../img/about-sub-bg.jpg') center center no-repeat; background-size: cover; line-height: 1.5;}
.aboutpage .about-banner .cn{ font-size: 2.5rem; color: var(--w); font-weight: bolder;}
.aboutpage .about-banner .en{ font-size: 1.5rem; color: var(--w); font-weight: bold;}
.aboutpage .about-banner .desc{ width: 60%; font-size: 1.25rem; color: var(--w)}

.aboutpage .about-number{ position: relative; display: grid; grid-template-columns: repeat(4,1fr); width: 100%; padding: 2.5vw 10vw; }
.aboutpage .about-number:after{ content: ''; position: absolute; bottom: 0; left: 10vw; width: calc( 100% - 20vw); height: 1px; background: #ccc;}
.aboutpage .about-number .itm{ display: grid; grid-gap: 0.5rem; padding: 0 1rem}
.aboutpage .about-number .itm .num span{ font-size: 2.5rem; line-height: 1; font-weight: bold; color: var(--d)}
.aboutpage .about-number .itm .num i{ font-size: 1rem; line-height: 1.5; color: var(--d5); font-style: normal;}
.aboutpage .about-number .itm .cap{ font-size: 1rem; line-height: 1.5; color: var(--d3)}

.aboutpage .about-row{ display: grid; width: 100%; grid-gap: 2.5vw; padding: 2.5vw 10vw; height: auto;}
.aboutpage .about-row .row-bg{ background-position: center center; background-repeat: no-repeat; background-size: cover;}
.aboutpage .about-row .row-bg .title{ line-height: 1.5;}
.aboutpage .about-row .row-bg .title .cn{ font-size: 1.5rem; color: var(--primary)}
.aboutpage .about-row .row-bg .title .en{ font-size: 1rem; color: var(--d5)}

.aboutpage .about-row .row-content{ width: 100%; display: grid; grid-gap: 1.25vw;}
.aboutpage .about-row .row-content .title{ display: flex; flex-flow: row nowrap; align-items: center; line-height: 1.5; font-weight: bold;}
.aboutpage .about-row .row-content .title .cn{ font-size: 1.5rem; color: var(--primary);}
.aboutpage .about-row .row-content .title .en{ font-size: 1rem; color: var(--d3); padding-left: 0.5em;}
.aboutpage .about-row .row-content .title .en span{ color: var(--primary); text-transform: uppercase;}

.aboutpage .about-row.a_profiles .row-bg{ width: 100%; height: 24vw;}
.aboutpage .about-row.a_profiles .row-content .title{ flex-flow: column nowrap; align-items: flex-start;}
.aboutpage .about-row.a_profiles .row-content .title .cn{ font-size: 2rem; color:var(--d); font-weight: normal;}
.aboutpage .about-row.a_profiles .row-content .title .en{ font-size: 1.125rem; padding-left: 0;}
.aboutpage .about-row.a_profiles .row-content .content{ font-size: 1rem; line-height: 2; color: var(--d3); text-align: justify;}
.aboutpage .about-row.a_profiles .row-content .more{ display: flex;}
.aboutpage .about-row.a_profiles .row-content .more a{ padding: .5em 2.5em; font-size: 1rem; line-height: 1.75; color: var(--w); background: var(--primary); transition: .3s;}
.aboutpage .about-row.a_profiles .row-content .more a:hover{ background: var(--tertiary)}

.aboutpage .about-row.a_culture{ background: #fafafa;}
.aboutpage .about-row.a_culture .row-content .content{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2.5vw;}
.aboutpage .about-row.a_culture .row-content .content .itm{ position: relative; z-index: 0; top: 0; display: grid; grid-gap: 1rem; line-height: 1.5; padding: 1.25vw 0 2.5vw; transition: .5s;}
.aboutpage .about-row.a_culture .row-content .content .itm:after{ content: ''; position: absolute; z-index: 1; left: auto; right: 0; bottom: 0; width: 0; height: 2px; background: var(--tertiary); transition: .5s;}
.aboutpage .about-row.a_culture .row-content .content .itm .cap{ text-align: center;}
.aboutpage .about-row.a_culture .row-content .content .itm .cap .cn{ font-size: 1.5rem; color: var(--d);}
.aboutpage .about-row.a_culture .row-content .content .itm .cap .en{ font-size: .875rem; color: var(--d5); font-weight: bold;}
.aboutpage .about-row.a_culture .row-content .content .itm .slo{ font-size: 1.25rem; color: var(--secondary); font-weight: bold; text-align: center;}
.aboutpage .about-row.a_culture .row-content .content .itm .ico{ justify-self: center; display: flex; justify-content: center; align-items: center; width: 8rem; height: 8rem; border-radius: var(--rounded); }
.aboutpage .about-row.a_culture .row-content .content .itm .ico i{ font-size: 5rem; line-height: 1; color: var(--d3)}
.aboutpage .about-row.a_culture .row-content .content .itm .font{ justify-self: center; width: 90%; font-size: 0.875rem; color: var(--d3); text-align: center;}

.aboutpage .about-row.a_culture .row-content .content .itm:hover{ top: -1rem; background: var(--w); box-shadow: 0 1rem 1rem -.5rem rgba(220, 181, 114, .3);}
.aboutpage .about-row.a_culture .row-content .content .itm:hover:after{ left: 0; right: auto; width: 100%;}

.aboutpage .about-row.a_qualify .row-content{ width: 100%; overflow: hidden;}
.aboutpage .about-row.a_qualify .row-content .content{ width: 100%; overflow: hidden;}
.aboutpage .about-row.a_qualify .row-content .content .swiper-container{ width: calc( 100% + 2.5vw); margin-left: -1.25vw;}
.aboutpage .about-row.a_qualify .row-content .content .itm{ padding: 0 1.25vw;}
.aboutpage .about-row.a_qualify .row-content .content .itm .box{ width: 100%; padding: 1.5rem; background: #fafafa;}
.aboutpage .about-row.a_qualify .row-content .content .itm .box .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 100%;}
.aboutpage .about-row.a_qualify .row-content .content .itm .box .thumb img{ position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; max-width: calc(100% - 1.5rem); max-height: calc(100% - 1.5rem); margin: auto; border: .75rem solid #D4A656; transition: .5s;}
.aboutpage .about-row.a_qualify .row-content .content .itm:hover .box .thumb img{ border-color: var(--tertiary); box-shadow: 0 1rem 1rem -.5rem rgba(220, 181, 114, .3); transform: scale(1.05); }

/* article */
.article-page{ display: grid; grid-gap: 2.5vw; padding: 3.75vw 10vw; background: #fff;}
.article-page .article-title{ font-size: 1.75rem; line-height: 1.5; color: var(--d); font-weight: bold;}

.article-page .article-caption{ display: flex; flex-flow: row nowrap;}
.article-page .article-caption .itm{ font-size: 1rem; line-height: 1; color: var(--d3);}
.article-page .article-caption .itm i{ font-size: 1rem; line-height: 1; margin-right: .5em;}
.article-page .article-caption .itm:not(:last-child){ margin-right: 2rem;}

.article-page .article-line{ width: 100%; height: 1px; background: #eee; }

.article-page .article-content{ font-size: 1.125rem; line-height: 2; color: var(--d2); }
.article-page .article-content img{ display: inline-block; max-width: 100%;}

.article-page .article-arrows{ position: relative; display: grid; grid-template-columns: repeat(2,1fr);}
.article-page .article-arrows:after{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 1px; height: 30%; margin: auto; background: #ccc; }
.article-page .article-arrows a{ display: flex; align-items: center; padding: 1.25vw 2.5vw; font-size: 1.125rem; line-height: 1.5; color: var(--d); background: #fafafa; transition: .3s;}
.article-page .article-arrows a.prev:before{ content: '上一篇：'; color: var(--d5)}
.article-page .article-arrows a.next{ justify-content: flex-end;}
.article-page .article-arrows a.next:before{ content: '下一篇：'; color: var(--d5)}

.article-page .article-arrows a:hover{ color: var(--w); background: var(--primary);}
.article-page .article-arrows a:hover:before{ color: var(--w);}
.article-page .article-arrows a.prev:hover{ padding-left: 5vw;}
.article-page .article-arrows a.next:hover{ padding-right: 5vw;}

/* details-page */
.details-page{ display: grid; grid-gap: 1.5vw; width: 100%; padding: 4rem 0 3.75vw; background: var(--w); overflow: hidden;}
.details-page .info{ width: 100%; padding: 0 10vw; background: #fafafa; overflow: hidden;}
.details-page .info .cover{ position: relative; width: 100%; height: auto; overflow: hidden;}
.details-page .info .cover .swiper-container{ width: 100%; overflow: hidden; }
.details-page .info .cover .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 30%;}
.details-page .info .cover .itm .thumb .img{position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; width: 70%; height: 70%; margin: auto; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-box-reflect:below 0 -webkit-linear-gradient( transparent,transparent 85%,rgba(255,255,255,.2)); transition: .5s}

.details-page .info .cover .arrows{ position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; margin: auto; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border: 1px solid #ccc; cursor: pointer; transition: .3s;}
.details-page .info .cover .arrows i{ font-size: 1.5rem; line-height: 1; color: var(--d5); transition: .3s;}
.details-page .info .cover .arrows.next{ left: auto; right: 0;}
.details-page .info .cover .arrows:hover{ border-color: var(--tertiary); background: var(--tertiary)}
.details-page .info .cover .arrows:hover i{ color: var(--w);}

.details-page .title{ display: flex; flex-flow: column nowrap; align-items: flex-start; padding: 0 10vw; border-bottom: 1px solid #eee; line-height: 1.5;}
.details-page .title .name{ font-size: 2rem; color: var(--d); font-weight: bold;}
.details-page .title .cate{ font-size: 1.125rem; color: var(--d5)}
.details-page .title .tel{ padding: .5em 1.5em; margin: 2rem 0 2.5vw; background: var(--tertiary); font-size: 1rem; color: var(--w);}

.details-page .content{ padding: 0 10vw; display: grid; grid-gap: 2.5vw;}
.details-page .content .cote{ padding-bottom: 2.5vw; border-bottom: 1px solid #eee;}
.details-page .content .cote .cap{ padding-bottom: 1rem; font-size: 1.5rem; line-height: 2; color: var(--d)}
.details-page .content .cote .con{ padding: 2rem; background: #fafafa; font-size: 1rem; line-height: 2; color: var(--d3);}
.details-page .content .cote .con img{ display: inline-block; max-width: 100%;}

/* searchpage */
.searchpage .row-search{ display: flex; justify-content: center; align-items: center; padding: 1.25vw; background: var(--w);}
.searchpage .row-search input[type=text]{ width: calc( 100% - 5rem ); padding: .75em .75em; border: none; border-radius: .25rem 0 0 .25rem; background: #eee; font-size: 1rem; line-height: 1.5; color: var(--d)}
.searchpage .row-search input[type=button]{ display: flex; justify-content: center; align-items: center; width: 5rem; padding: .75em .75em; border: none; border-radius: 0 .25rem .25rem 0; background: var(--primary); font-size: 1rem; line-height: 1.5; color: var(--w)}

.searchpage .row-content{ padding: 2.5vw; background: var(--w);}
.searchpage .row-content .itm{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: .5em 1em; border-bottom: 1px solid #eee;}
.searchpage .row-content .itm span{ font-size: 1.125rem; line-height: 2; color: var(--d);}
.searchpage .row-content .itm i{ font-size: 1rem; line-height: 2; font-style: normal; color: var(--d5);}
.searchpage .row-content .itm i:before{ content: '【 ';}
.searchpage .row-content .itm i:after{ content: ' 】';}
.searchpage .row-content .itm:hover{ background: #fafafa;}

/* apply */
.apply-list{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 2rem; padding: 2rem; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .05);}
.apply-list dt{ grid-column: span 3; font-weight: bold; font-size: 1.5rem;}
.apply-list dd{ display: grid; grid-template-columns: 20% 80%;}
.apply-list dd span{ font-size: 1rem; line-height: 2.5; text-align: right; padding-right: 1em;}
.apply-list dd button{ grid-column: span 2; width: 7rem; height: 2.5rem; margin-left: 20%; border: none; border-radius: 2px; font-size: 1rem; color: var(--w); text-align: center; background: var(--primary);}
.apply-list input,
.apply-list select{ width: 60%; height: 2.5rem; text-indent: .5rem; border: 1px solid #ddd; border-radius: 2px; background: var(--w); font-size: 1rem; line-height: 2.5;}