@charset "utf-8";

/* up_pop */
.up_pop {margin-top: -6.5rem; width: 100%; height: 6.5rem; color: #fff; background: #474d5d; z-index: 10; }
.up_pop .container {position: relative; padding: 1rem 0 1.5rem 0; height: 100%;}
.up_pop .upPopWrap {float: left; width: 75%; height: 100%; overflow: hidden;}
.up_pop #upPopSlide {margin: 0 -1.5rem; width: calc(100% + 3rem); height: 100%; overflow: hidden;}
.up_pop .slick-list,
.up_pop .slick-track {height: 100%;}
.up_pop .upPopWrap .item {float: left; width: calc(100% / 3); height: 100%; border-left: 2px dotted rgba(255,255,255,0.3);}
.up_pop .upPopWrap .item a {position: relative; display: block; padding: 0 1.5rem; height: 100%; overflow: hidden;}
.up_pop .upPopWrap .item a .img {display: block; width: 100%; height: 100%; text-align: center; font-size: 0; background: rgba(255,255,255,0.3); border-radius: 0.5rem; overflow: hidden;}
.up_pop .upPopWrap .item a .img img {max-width: 100%; height: 100%;}
.up_pop .upPopWrap .item a .txt {display: -webkit-box; -webkit-box-orient: vertical; height: 3rem; line-height: 1.25rem; font-size: 0.9rem; color: #fff; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 2; overflow: hidden;}
.up_pop .upPopWrap .item a .btn {display: inline-block; padding: 0 0.5rem; line-height: 1.5rem; font-size: 0.75rem; background: rgba(0,0,0,0.4); border-radius: 0.25rem; transition: background-color 0.3s;}
.up_pop .upPopWrap .item a .txt + .ar {margin-top: -0.5rem;}
.up_pop .control {position: relative; float: right; padding-top: 0.5rem; width: calc(25% - 1.5rem); height: 100%; line-height: 1;}
.up_pop .control h3 {position: relative; font-size: 1.1rem; font-weight: 700;}
.up_pop .control h3:before {position: absolute; top: 0.5rem; left: 0; width: 100%; height: 1px; background: #fff; content: "";}
.up_pop .control h3 span {position: relative; display: inline-block; padding-right: 0.25rem; background: #474d5d;}
.up_pop .control a {display: inline-block; transition: all 0.25s; }
.up_pop .control .btn {position: absolute; top: 0.5rem; right: 0; display: inline-block; background: #474d5d; overflow: hidden;}
.up_pop .control .btn > a {float: left; margin-left: 0.25rem; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; text-align: center; font-size: 1.1rem; color: #fff; overflow: hidden;}
.up_pop .control .btn > a i {line-height: 1.25rem;}
.up_pop .control a.play {display: none;}
.up_pop .control .btn2 {margin-top: 1.5rem; overflow: hidden;}
.up_pop .control .btn2 > a {float: left; display: inline-block; max-width: calc(50% - 0.5rem); font-size: 0.75rem;}
.up_pop .control .btn2 > a + a {margin-left: 1rem;}
.up_pop .control .btn2 a i {margin-right: 0.25rem; vertical-align: text-top; font-size: 0.8rem;}
/* up_pop : active */
.up_pop .upPopWrap .item a:hover .txt,
.up_pop .upPopWrap .item a:focus .txt {text-decoration: underline;}
.up_pop .upPopWrap .item a:hover .btn,
.up_pop .upPopWrap .item a:focus .btn {color: #474d5d; background: #f1f1f1;}
.up_pop .control .btn > a:hover,
.up_pop .control .btn > a:focus {font-size: 0.8rem; color: #474d5d; background: #f1f1f1; border-radius: 50%;}

/* popBtn */
.popBtn {position: absolute; right: 2rem; top: 1rem; padding: 0 2rem 0 1rem; width: 6rem; height: 2rem; line-height: calc(2rem - 4px); font-weight: 700; color: #124da7; background: #fff; border: 2px solid #114ea9; border-radius: 1rem; z-index: 2;}
.popBtn:after {position: absolute; top: 0; right: 1rem; font-family: "xeicon"; font-size: 1rem; content: "\e942";}

.openPop .up_pop {margin-top: 0;}
.openPop .popBtn:after {content: "\e945";}

html.fp-enabled body:not(.fp-viewing-firstPage) .popBtn {display: none;}

@media screen and (max-width: 1720px){
	/* popBtn */
	.popBtn {position: fixed; top: auto; bottom: 7rem; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; width: 4rem; height: 4rem; font-size: 0.7rem; font-weight: 700; border-radius: 50%;}
	.popBtn:after {top: -0.75rem; right: auto; left: 50%; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; font-size: 1.2rem; color: #fff; background: #00245a; border-radius: 50%; transform: translateX(-50%); }
}

@media screen and (max-width: 1440px){
	.up_pop .container {padding: 1rem 1rem 1.5rem;}
}

@media screen and (max-width: 1240px){
	/* up_pop */
	.up_pop .control .btn2 {margin-top: 0.5rem;}
	.up_pop .control .btn2 > a {width: 100%; max-width: 100%;}
	.up_pop .control .btn2 > a + a {margin-top: 0.15rem; margin-left: 0;}
}

@media screen and (max-width: 768px){
	/* up_pop */
	.up_pop .upPopWrap {width: calc(100% - 10rem);}
	.up_pop .control {width: 9rem;}
}


@media screen and (max-width: 480px){
	/* up_pop */
	.up_pop .upPopWrap {width: calc(100% - 7rem);}
	.up_pop .control {padding-top: 0.25rem; width: 6.5rem;}
	.up_pop .control h3 {display: none;}
	.up_pop .control .btn {position: relative; top: auto; right: auto; float: right;}
	.up_pop .control .btn2 {clear: both; margin-top: 1.5rem; width: 100%;}
	.up_pop .control .btn2 > a + a {margin-top: 0.5rem;}
}

@media screen and (max-width: 340px){
	/* up_pop */
	.up_pop .upPopWrap .item a .txt {height: 2.5rem; line-height: 1.25rem;}
	.up_pop .upPopWrap .item a .btn {width: 100%; text-align: center;}
	.up_pop .upPopWrap .item a .txt + .ar {margin-top: 0;}
}