@charset "utf-8";

/*.ad{display: none !important;}*/

/*-------------------------------------------------------------------
	@ Variables
-------------------------------------------------------------------*/
:root{
	--color-primary: #ed4043;
	--item-speed : 0.8s;
}

/*-------------------------------------------------------------------
	@ Layout
-------------------------------------------------------------------*/
#wrap{display: flex; flex-direction: column; min-height: 100%; overflow: hidden;}

/* header */
header{position: fixed; left: 0; top:0; overflow: hidden; width: 100%; background: #fff; z-index: 9000;}
header.scroll::after,
header.line::after{position:absolute; left: 0; top: 91px; width: 100%; height: 1px; background: var(--color-primary); content:"";}
header > div{display: flex; justify-content: center; align-items: center; position: relative; width: 1200px; height: 92px; margin: 0 auto; z-index: 100;}
header .logo{position: absolute; left: 0; top: 14px; z-index: 11000;}
header .logo a{display: inline-block; width: 60px; height: 63px; background: url(../images/common/logo.png) center / 100% auto no-repeat; font-size: 0; text-indent: -9999em;}
header .tit{position: absolute; left: 0; top: 0; width: 100%; font-size: 30px; color: var(--color-primary); font-weight: 700; line-height: 92px; text-align: center; box-sizing: border-box; z-index: 10;}
header nav{position: absolute; left: 0; top: 0; width: 100%; text-align: center;}
header nav ul{display: inline-flex;}
header nav ul li{position: relative; padding: 0 30px;}
header nav ul li a{display: block;}
header nav ul li a span{display: flex; font-size: 26px; color: #000; font-weight: 500; line-height: 92px;}
header nav ul li a span i{margin-right: 10px;}
header nav ul li:last-child a span i{line-height: 84px;}
header nav ul li a:hover span{font-weight: 600; color: var(--color-primary);}
header nav ul li a.on span{font-weight: 600; color: var(--color-primary);}
header nav ul li::after{display: block; position: absolute; left: -5px; top: 0; font-size: 30px; color: #fff; line-height: 80px; opacity: 0.5; font-weight: 100; content: "/";}
header nav ul li:first-child::after{display: none;}
header .btn-search{position: absolute; right: -18px; top: 14px; width: 63px; height: 63px; background: url(../images/common/ico_search.svg) center / 36px auto no-repeat; text-indent: -9999em; z-index: 10; transition: top 0.5s ease;}
header .btn-close{position: absolute; right: -20px; top: calc(-100% - 8px); width: 63px; height: 63px; background: url(../images/common/ico_close.svg) center / 55px auto no-repeat; text-indent: -9999em; z-index: 10; transition: all 0.5s ease;}
header .btn-close:hover{transform: rotate(180deg);}
header .btn-menu{display: none;}
header.search nav{top: 100%;}
header.search .btn-search{top: calc(100% + 8px);}
header.search .btn-close{top: 14px;}
@keyframes pulse {
	from{opacity: 1; transform: scale(1);}
	to{opacity: .25; transform: scale(.75);}
}
@media all and (max-width:1300px) {
	header{overflow: hidden; height: 60px; transition: all 0.5s ease;}
	header.scroll::after,
	header.line::after{top: 59px;}
	header > div{display: block; width: 100%; height: 60px; padding: 10px 0; text-align: center; box-sizing: border-box;}
	header .logo{left: 20px; top: 0; height: 60px; font-size: 0; line-height: 1;}
	header .logo a{width: 43px; height: 100%; background-image: url(../images/common/logo_m.png);}
	header .tit{padding-right: 20px; font-size: 18px; line-height: 60px; text-align: right;}
	header nav{position: fixed; left: 100%; top: 50%; transform: translateY(-50%); width: 100%;}
	header nav ul{display: block;}
	header nav ul li{overflow: hidden; height: 45px;}
	header nav ul li a{transform: translateY(100px); opacity: 0;}
	header nav ul li a span{font-size: 22px; line-height: 45px;}
	header nav ul li a:hover span{font-weight: 400; color: #000;}
	header nav ul li:nth-of-type(1) a{transition: all 0.7s 0.3s ease;}
	header nav ul li:nth-of-type(2) a{transition: all 0.7s 0.5s ease;}
	header .btn-search{display: none;}
	header .btn-menu{display: block; position: absolute; right: 0; top: 0; width: 60px; height: 60px; background: none; text-indent: -9999em;}
	header .btn-menu::before{display: block; position: absolute; right: 20px; top: 26px; width: 17px; height: 2px; background: #000; content: ""; transition: top 0.25s 0.25s, transform 0.25s;}
	header .btn-menu::after{display: block; position: absolute; right: 20px; top: 34px; width: 17px; height: 2px; background: #000; content: ""; transition: top 0.25s 0.25s, transform 0.25s;}
	header .btn-menu.on::before{top: 30px; transform: rotate(45deg); transition: top 0.25s, transform 0.25s 0.25s;}
	header .btn-menu.on::after{top: 30px; transform: rotate(135deg); transition: top 0.25s, transform 0.25s 0.25s;}
	header .search-box{display: none;}
	header.on{height: 100%;}
	header.on nav{left: 0;}
	header.on nav ul li a{transform: translateY(0); opacity: 1;}
	header.on nav ul li::after{display: none;}
	header.on.off nav ul li:nth-of-type(1) a{transform: translateY(0); opacity: 0; transition: all 0.5s 0s ease;}
	header.on.off nav ul li:nth-of-type(2) a{transform: translateY(0); opacity: 0; transition: all 0.5s 0.1s ease;}
}

/* container */
main{min-height: calc(100% - 151px); padding-top: 92px;}
main > section{position: relative; width: 100%; background: #fff; z-index: 100; box-sizing: border-box;}
@media all and (max-width:1300px) {
	main{position: relative; min-height: auto; padding-top: 60px;}
	main::after{
		position: fixed; left: 0; top: 0; width: 100%; height: 110px; content: "";
	}
	main > section{padding: 0 20px;}
}

/* footer */
footer{position: relative; margin-top: auto; background: #fff; z-index: 8000;}
footer > div{display: flex; align-items: center; height: 60px; border-top: 1px solid #e5e5e5;}
footer .inner{display: flex; justify-content: space-between; position: relative; width: 1200px; margin: 0 auto; box-sizing: border-box;}
footer .copy p{font-size: 11px; color: #999; line-height: 40px;}
footer .copy .btn-contact{display: block; position: absolute; right: 0; top: 0; padding-left: 15px; font-size: 11px; color: #999; line-height: 40px;}
/* footer .copy .btn-contact::before{position: absolute; left: 0; top: 14px; width: 1px; height: 10px; background: #e5e5e5; content: "";} */
footer .copy .btn-contact:hover{color: var(--color-primary);}
footer .provider{position: absolute; right: 85px; top: 9px; width: 156px; height: 20px; background: url(../images/common/provider.png) center no-repeat;}
footer .btn-top{position: fixed; left: 50%; bottom: 35px; width: 50px; height: 50px; margin-left: 640px; border: 1px solid #e5e5e5; border-radius: 100%; background: url(../images/common/ico_top.svg) center / 26px auto #fff no-repeat; text-indent: -9999em; box-sizing: border-box; cursor: default; opacity: 0; transform: translateY(30px); transition: all 0.3s ease;}
footer .btn-top.on{cursor: pointer; opacity: 1; transform: translateY(0);}
@media all and (max-width:1300px) {
	footer > div{height: auto; padding: 3px 0 10px;}
	footer .inner{display: block; justify-content: center; width: 100%; text-align: center; line-height: 1;}
	footer .copy{display: inline-flex; align-items: center;}
	footer .copy p{display: inline-block; font-size: 8px; line-height: 1;}
	footer .copy .btn-contact{display: inline-block; position: relative; right: auto; top: auto; width: 26px; height: 12px; padding: 0; background: url(../images/common/ico_email.svg) center / auto 100% no-repeat; text-indent: -9999em;}
	footer .copy .btn-contact::before{display: none;}
	footer .provider{position: relative; right: auto; top: auto; width: 100%; height: 10px; margin-top: 5px; background: url(../images/common/provider_m.png) center / auto 7.5px no-repeat;}
	footer .btn-top{position: fixed; left: auto; right: 20px; bottom: 20px; width: 40px; height: 40px; margin-left: 0; background-position: center;}
}

/*-------------------------------------------------------------------
	@ Componets
-------------------------------------------------------------------*/
.no-result{position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; height: 95px; padding-top: 110px; background: url(../images/common/ico_warning.png) center no-repeat; font-size: 13px; font-weight: 400; text-align: center; color: #999; box-sizing: border-box;}
.search-box{display: none; position: fixed; left: 50%; top: 50%; width: 800px; transform: translate(-50%, -50%); transition: all 0.5s 0.1s ease; z-index: 11000;}
.search-box > div{position: relative; width: 100%; margin: 0 auto; text-align: center;}
.search-box input{width: 100%; height: 100px; padding-right: 0; background: transparent; font-size: 60px; font-weight: 300; color: #fff; text-align: center; box-sizing: border-box;}
.search-box input::placeholder{font-weight: 100; color: rgba(255, 255, 255, 1.5);}
.search-box input:focus::placeholder{opacity: 0;}
.search-box button{width: 100px; height: 100px; background: url(../images/common/ico_search_w.svg) center / 45px auto no-repeat; text-indent: -9999em; opacity: 1;}
.search-box input:placeholder-shown + button[type=submit]{opacity: 0.3;}
@media all and (max-width:1300px) {

}
@media all and (min-width:768px) and (max-width:1299px) {
	.item-list > li{width: calc(33% - 10px);}
	.item-list > li .item .img{height: calc(25vw - 30px);}
}


/*-------------------------------------------------------------------
	@ Pages
-------------------------------------------------------------------*/
/* main */
.main{background: #fff;}
.main > div{position: relative; width: 1200px; margin: 0 auto; background: #fff;}
.main section + h2{margin-top: 50px;}
.main .sub-wrap{display: flex; padding-top: 50px;}
.main .sub-wrap h2{display: block; font-size: 26px; font-weight: 600; color: #000;}
.main .sub-wrap .article-list > li{padding: 25px 0;}
.main .sub-wrap .article-list > li + li{border-top: 1px solid #eee;}
.main .sub-wrap .article-list > li a{display: flex;}
.main .sub-wrap .article-list > li a .thumb{width: 210px; aspect-ratio: 195 / 130; overflow: hidden; border-radius: 10px;}
.main .sub-wrap .article-list > li a .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease;}
.main .sub-wrap .article-list > li a .info{flex: 1; display: flex; flex-direction: column; padding-left: 25px;}
.main .sub-wrap .article-list > li a .info h4{font-size: 22px; font-weight: 600; color: #000; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.1s ease;}
.main .sub-wrap .article-list > li a .info p{margin-top: 10px; font-size: 14px; color: #666; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.main .sub-wrap .article-list > li a .info .time{display: block; margin-top: auto; font-size: 12px; color: #999; line-height: 1.5;}
.main .sub-wrap .article-list > li a:hover .thumb img{transform: scale(1.15);}
.main .sub-wrap .article-list > li a:hover h4{text-decoration: underline; text-underline-position: under; text-decoration-thickness: 1px; text-decoration-color: #333;}
@media all and (max-width:1300px) {
  .main{padding: 0 20px 45px;}
  .main > div{width: 100%;}
  .main .sub-wrap .article-list > li a{display: block;}
  .main .sub-wrap .article-list > li a .info{padding-left: 0; margin-top: 10px;}
  .main .sub-wrap .article-list > li a .thumb{width: 100%; aspect-ratio: 195 / 100;}
  .main .sub-wrap .article-list > li a .info h4{white-space: normal; line-height: 1.4;}
  .main .sub-wrap .article-list > li a .info p{-webkit-line-clamp: 2;}
  .main .sub-wrap .article-list > li a .info time{margin-top: 10px;}
}




/* sub */
.sub{background: #fff;}
.sub > div{position: relative; width: 1200px; margin: 0 auto; background: #fff;}
.sub .search-result{padding-top: 30px; font-size: 20px; font-weight: 400; line-height: 36px;}
.sub .search-result strong{font-weight: 700; color: var(--color-primary);}
.sub .view{display: flex; justify-content: space-between;}
.sub .view .content{width: 860px; padding: 0 40px 80px 0; background: url(../images/common/bg_sub.jpg) repeat-y; box-sizing: border-box;}
.sub .view .etc{width: 300px; margin-bottom: 40px;}
.sub .view .etc .ad-rb{padding: 25px; margin-top: 30px; border-radius: 20px; background: #f9f9f9;}
.sub .view .etc .ad-rb.mo{display: none;}
.sub .ad-sky{position: fixed; left: 50%; top: 188px; margin-left: 640px;}
.sub .ad-sky.mo{display: none;}
@media all and (max-width:1300px) {
	.sub{padding: 0 20px 45px;}
	.sub > div{width: 100%;}
	.sub .view{display: block;}
	.sub .view .content{width: 100%; padding: 0; background: none;}
	.sub .view .etc{width: 100%; margin-bottom: 0;}
	.sub .ad-sky.pc{display: none;}
	.sub .ad-sky.mo{display: block; position: relative; left: auto; top: auto; width: 300px; margin: 20px auto 0;}
	.sub .view .etc .ad-rb.pc{display: none;}
	.sub .view .etc .ad-rb.mo{display: block; width: 300px; padding: 0; margin: 40px auto 0; background: none;}
}




/* sub-main */
.sub .sub-wrap{display: flex; padding-top: 50px;}
.sub .sub-wrap h1{display: block; font-size: 26px; font-weight: 600; color: #000;}
.sub .sub-wrap .article-list > li{padding: 25px 0;}
.sub .sub-wrap .article-list > li + li{border-top: 1px solid #eee;}
.sub .sub-wrap .article-list > li a{display: flex;}
.sub .sub-wrap .article-list > li a .thumb{width: 210px; aspect-ratio: 195 / 130; overflow: hidden; border-radius: 10px;}
.sub .sub-wrap .article-list > li a .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease;}
.sub .sub-wrap .article-list > li a .info{flex: 1; display: flex; flex-direction: column; padding-left: 25px;}
.sub .sub-wrap .article-list > li a .info h3{font-size: 22px; font-weight: 600; color: #000; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.1s ease;}
.sub .sub-wrap .article-list > li a .info p{margin-top: 10px; font-size: 14px; color: #666; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.sub .sub-wrap .article-list > li a .info .time{display: block; margin-top: auto; font-size: 12px; color: #999; line-height: 1.5;}
.sub .sub-wrap .article-list > li a:hover .thumb img{transform: scale(1.15);}
.sub .sub-wrap .article-list > li a:hover h3{text-decoration: underline; text-underline-position: under; text-decoration-thickness: 1px; text-decoration-color: #333;}
@media all and (max-width:1300px) {
 .sub .sub-wrap .article-list > li a{display: block;}
 .sub .sub-wrap .article-list > li a .info{padding-left: 0; margin-top: 10px;}
 .sub .sub-wrap .article-list > li a .thumb{width: 100%; aspect-ratio: 195 / 100;}
 .sub .sub-wrap .article-list > li a .info h3{white-space: normal; line-height: 1.4;}
 .sub .sub-wrap .article-list > li a .info p{-webkit-line-clamp: 2;}
 .sub .sub-wrap .article-list > li a .info time{margin-top: 10px;}
}

/* intro */
.intro{display: flex; justify-content: center; align-items: center; height: 1000px; background: var(--color-primary);}
.intro .con{display: flex; align-items: center; justify-content: center; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 350px; padding-top: 60px; text-align: center; box-sizing: border-box;}
.intro .con .in{display: flex; align-items: center; position: relative; height: 350px; transition: all .5s ease-out;}
.intro .con .in::after{position: absolute; left: 50%; top: -20px; margin-left: -75px; width: 150px; height: 100px; background: url(../images/common/plane.png) center / 100% auto no-repeat; content: ''; opacity: 0; transform: translate(-80px, 80px); transition: all 0.7s 0.8s ease;}
.intro .con strong{display: block; font-size: 65px; font-weight: 300; color: #fff; transform: translateY(100px); opacity: 0; transition: all 0.7s 0.2s ease;}
.intro .con p{margin-top: 20px; font-size: 16px; color: #fff; font-weight: 100; transform: translateY(100px); opacity: 0; transition: all 0.7s 0.4s ease;}
.intro .scroll{position: fixed; left: 50%; bottom: 0; width: 1px; height: 150px; background: rgba(255, 255, 255, 0.3);}
.intro .scroll .line{position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #fff; opacity: 0.7; transform-origin: bottom left; animation:scroll 2.5s infinite ease;}
.intro .scroll img{position: absolute; left: 10px; top: 0;}
.intro.on .con strong{transform: translateY(0); opacity: 1;}
.intro.on .con p{transform: translateY(0); opacity: 1;}
.intro.on .con .in::after{opacity: 1; transform: translate(0, 0);}
@media all and (max-width:1300px) {
	.intro .con{padding: 60px 20px 0;}
	.intro .con .in::after{top: 50px; background-size: 50% auto;}
	.intro .con strong{font-size: 30px;}
	.intro .con p{margin-top: 10px; font-size: 12px;}
	.intro .con .c1{top: 80px; width: 150px; height: 150px; margin-left: -180px; transform-origin: 90px; animation:rotate 1.5s infinite linear;}
	.intro .con .c2{bottom: 100px; width: 100px; height: 100px; margin-left: 40px; transform-origin: 60px; animation:rotate2 1.5s infinite linear;}
	.intro .scroll{display: none;}
}
@keyframes rotate{
	0%{transform:rotate(0);}
	50%{transform:rotate(180deg);}
	100%{transform:rotate(360deg);}
}
@keyframes rotate2{
	0%{transform:rotate(0);}
	50%{transform:rotate(-180deg);}
	100%{transform:rotate(-360deg);}
}
@keyframes scroll{
	0%{height: 0; transform: scaleY(1);}
	45%{height: 100%; transform: scaleY(1);}
	90%{transform: scaleY(0);}
	100%{transform: scaleY(0);}
}

/* view */
.view{padding-top: 40px;}
.view .state-wrap{display: flex; align-items: center; margin-bottom: 20px;}
.view .state-wrap .state{display: flex; align-items: center; justify-content: center; width: 50px; height: 22px; margin-right: 10px; border-radius: 5px; background: #666; font-size: 14px; color: #fff; line-height: 1;}
.view .state-wrap .state.on{background: var(--color-primary);}
.view .state-wrap .state.off{background: #000;}
.view .state-wrap .txt{display: block; font-size: 14px; color: #999; line-height: 1;}
.view .top-wrap{position: relative;}
.view .top-wrap .tit{display: flex; align-items: flex-end; flex: 1;}
.view .top-wrap .tit h1{display: block; margin-right: 15px; font-size: 36px; font-weight: 500; line-height: 1.3; color: #000;}
.view .top-wrap .btm{display: flex; justify-content: space-between; align-items: center; margin-top: 5px;}
.view .top-wrap .btm .region{display: block; margin-bottom: 2px; font-size: 14px; color: #999; line-height: 1;}
.view .top-wrap .btm .util{display: flex; align-items: center;}
.view .top-wrap .btm .util .btn-home{display: flex; align-items: center; height: 30px; padding: 0 15px 0 38px; border-radius: 15px; background: url(../images/common/ico_home.svg) 15px center / 14px auto no-repeat #f5f5f5; font-size: 14px; line-height: 1; color: #000;}
.view .top-wrap .btm .util .btn-share{display: flex; align-items: center; width: 30px; height: 30px; margin-left: 10px; border-radius: 100%; background: url(../images/common/ico_share.svg) center / 17px auto no-repeat #f5f5f5; text-indent: -9999em;}
.view .gallery{height: auto; margin-top: 20px; text-align: center;}
.view .gallery > figure{display: inline-block; position: relative;}
.view .gallery img{width: auto; max-width: 100%;}
.view .gallery figcaption{display: block; position: absolute; left: 0; bottom: 0; width: 100%; padding-right: 10px; margin-top: 12px; background: rgba(0, 0, 0, 0.5); font-size: 10px; font-weight: 300; color: rgba(255, 255, 255, 0.7); line-height: 20px; text-align: right; box-sizing: border-box;}


.view .detail{margin-top: 50px; color: #000;}
.view .detail section{padding-top: 40px; margin-top: 40px; border-top: 1px solid #e5e5e5;}
.view .detail section:nth-of-type(1){padding-top: 0; margin-top: 0; border-top: 0;}
.view .detail p{font-size: 18px; line-height: 1.5;}
.view .detail p + p{margin-top: 10px;}
.view .detail h2{font-size: 24px; font-weight: 700; line-height: 1.3;}
.view .detail h2 + h3{margin-top: 25px;}
.view .detail h2 + p{margin-top: 20px;}
.view .detail h3{margin-top: 30px; font-size: 20px; font-weight: 700;}
.view .detail h3 + p,
.view .detail h3 + ul{margin-top: 10px;}
.view .detail ul{margin-top: 20px;}
.view .detail ul li{position: relative; font-size: 18px; line-height: 1.5; padding-left: 25px;}
.view .detail ul li::before{position: absolute; left: 5px; top: 11px; width: 6px; height: 6px; border-radius: 100%; background: #5d5d5d; content: "";}
.view .detail ul li + li{margin-top: 10px;}
.view .detail ul + p{margin-top: 20px;}
.view .detail a{font-size: 18px; color: var(--color-primary); vertical-align: top;}


.view .ad-ct.mo{display: none;}
.view .ad-c{width: 728px; margin: 50px auto 60px; text-align: center;}
.view .ad-c.mo{display: none;}
.view .blog{margin-top: 20px; text-align: center;}
.view .blog ul{border: 1px solid #e5e5e5;}
.view .blog ul > li{border-top: 1px solid #f5f5f5; text-align: left;}
.view .blog ul > li:first-child{border-top: 0;}
.view .blog ul > li:hover{background-color: #f9f9f9;}
.view .blog ul > li > div{position: relative; padding: 23px 30px 20px;}
.view .blog ul > li > div:hover strong{text-decoration: underline; text-underline-position : under;}
.view .blog ul > li .tit{display: flex;}
.view .blog ul > li .tit strong{display: block; font-size: 15px; font-weight: 400; color: #0c43b7; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.view .blog ul > li .tit strong b{font-weight: 600; color: var(--color-primary);}
.view .blog ul > li .tit span{display: block; position: relative; padding-left: 15px; margin-left: 15px; font-size: 13px; color: #999; line-height: 20px;}
.view .blog ul > li .tit span::after{position: absolute; left: 0; top: 50%; margin-top: -6px; width: 1px; height: 12px; background: #e5e5e5; content: "";}
.view .blog ul > li .tit:visited strong{color: #99209b;}
.view .blog ul > li .desc{display: block; padding-top: 5px; font-size: 13px; line-height: 20px; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.view .blog ul > li .desc b{font-weight: 500; color: var(--color-primary);}
.view .blog .btn-more{height: 30px; padding-right: 20px; margin-top: 15px; background: url(../images/common/ico_more.svg) right center / 14.5px auto no-repeat; font-size: 14px; color: #333; line-height: 1;}
.view .ad-rt{padding: 25px; margin-bottom: 20px; border-radius: 20px; background: #f9f9f9;}
.view .ad-rt.mo{display: none;}
.view .tag{padding: 20px 0 10px 20px; margin-bottom: 30px; border-radius: 20px; background: #f5f5f5;}
.view .tag ul{display: flex; flex-wrap: wrap;}
.view .tag ul li{display: flex; align-items: center; height: 35px; padding: 0 15px; margin: 0 10px 10px 0; border-radius: 15px; background: #fff; font-size: 14px; color: #999;}
.view .recomm-tit{margin-bottom: 15px; font-size: 18px; color: #000; font-weight: 600;}
.view .list > li{margin-top: 15px;}
.view .list > li:first-child{margin-top: 0;}
.view .list a{display: flex; align-items: center; justify-content: space-between; width: 100%; height: 65px;}
.view .list a .info{width: 185px;}
.view .list a .info strong{display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.view .list a .info span{display: block; font-size: 12px; line-height: 18px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.view .list a .img{width: 100px; height: 65px; border-radius: 10px; overflow: hidden;}
.view .list a .img img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.1);}
@media all and (max-width:1300px) {
	.view .state-wrap{display: block; margin-bottom: 8px; text-align: center;}
	.view .state-wrap .state{display: inline-flex; width: 45px; height: 20px; margin-right: 0; font-size: 12px;}
	.view .state-wrap .txt{display: block; margin: 10px 0 0; font-size: 12px;}
	.view .top-wrap{display: block; text-align: center;}
	.view .top-wrap .tit{display: block;}
	.view .top-wrap .tit h1{margin-right: 0; font-size: 24px; line-height: 28px;}
	.view .top-wrap .btm{display: block;}
	.view .top-wrap .btm .region{display: block; margin: 0; font-size: 11px; line-height: 26px;}
	.view .top-wrap .btm .util{display: inline-flex; margin-top: 5px;}
	.view .top-wrap .btm .util .btn-home{width: 25px; height: 25px; padding: 0; border-radius: 100%; background-position: center; background-size: 11px auto; font-size: 12px; text-indent: -9999em;}
	.view .top-wrap .btm .util .btn-share{width: 25px; height: 25px; margin: 0 5px; background-size: 13px auto}
	.view .gallery{margin-top: 15px;}
	.view .gallery figcaption{padding-right: 5px; font-size: 7px; line-height: 15px;}
	.view .title{display: block; margin-top: 25px;}
	.view .title.justify{align-items: center;}
	.view .title h2{font-size: 18px;}
	.view .title h2 + span{ margin: 5px 0 0; font-size: 10px; line-height: 18px;}
	.view .title .btn-blog{width: 70px; height: 13px;}
 	.view .detail br.pc{display: none;}
	.view .detail p{font-size: 16px;}
	.view .detail h2{font-size: 22px;}
	.view .detail h3{font-size: 18px;}
	.view .detail ul{margin-top: 15px;}
	.view .detail ul li{font-size: 16px;}
	.view .detail a{font-size: 16px;}
	.view .ad-ct.mo{display: block; width: 300px; margin: 30px auto 30px;}
	.view .ad-c.pc{display: none;}
	.view .ad-c.mo{display: block; width: 300px; margin: 30px auto;}
	.view .blog ul > li > div{padding: 15px 15px 33px;}
	.view .blog ul > li > div:hover strong{text-decoration: none;}
	.view .blog ul > li .tit{display: block;}
	.view .blog ul > li .tit strong{width: 100%; font-size: 13px; color: #0c43b7; line-height: 20px;}
	.view .blog ul > li .tit span{position: absolute; left: 15px; bottom: 15px; padding-left: 0; margin-left: 0; font-size: 11px; line-height: 1; color: #ccc;}
	.view .blog ul > li .tit span::after{display: none;}
	.view .blog ul > li .desc{padding-top: 2px; font-size: 12px; line-height: 18px;}
	.view .blog .btn-more{padding-right: 15px; margin-top: 10px; background-size: 12.5px auto; font-size: 12px; color: #333;}
	.view .ad-rt.pc{display: none;}
	.view .ad-rt.mo{display: block; width: 300px; padding: 0; margin: 0 auto 40px; background: none;}
	.view .tag{display: none;}
	.view .etc{margin-top: 40px;}
	.view .list a .info{order: 2; width: calc(100% - 115px);}
	.view .list a .img{order: 1;}
}


/*-------------------------------------------------------------------
	@ Components
-------------------------------------------------------------------*/
/* loading */
.loading-container,
.loading{display: none; height: 100px; position: relative; width: 100px; border-radius: 100%;}
.loading{border: 2px solid transparent; border-color: transparent #eee transparent #eee; animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%;}
.loading-container:hover .loading{border-color: transparent #E45635 transparent #E45635;}
.loading-container:hover .loading,
.loading-container .loading{transition: all 0.5s ease-in-out;}
#loading-text{animation: loading-text-opacity 2s linear 0s infinite normal; color: #999; font-size: 10px; font-weight: bold; margin-top: 45px; opacity: 0; position: absolute; text-align: center; text-transform: uppercase; top: 0; width: 100px;}
#loading-per{color: #ddd; font-size: 10px; font-weight: bold; position: absolute; text-align: center; text-transform: uppercase; top: 65px; width: 100px;}
@keyframes rotate-loading {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
@keyframes rotate-loading {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
@keyframes loading-text-opacity {
	0%{opacity: 0}
	20%{opacity: 0}
	50%{opacity: 1}
	100%{opacity: 0}
}

/* dim */
.dim{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(237, 64, 67, 0.9);}
.dim.all{z-index: 10000;}
.dim.page{z-index: 8000;}
.dim.on{display: block;}