.tab ul {
    display: flex;
    background: #ededed;
    --borderRadius: calc(30/18*1em);
    border-radius: var(--borderRadius);
    width: 100%;
    height: calc(60/18*1em);
    max-width: calc(473/18*1em);
    margin: 0 auto;
    margin-top: calc(70/18*1em);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0em;
}
.tab ul li {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    color: #000;
    border-radius: var(--borderRadius);
    transition: background-color, color; transition-duration: .5s;
    height: 100%;
    overflow: hidden;
}
.tab ul li.act {
    background: #0633a3;
    color: #fff;
}
.tab ul li:not(.act):hover {
    background: #dbdbdb;
    color: #0633a3;
}
.tab ul li a {
    width: 100%;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}


.s1{
	padding-top: 100px; padding-bottom: 80px;
}
.s1 .wrap{
	display: flex; align-items: center; justify-content: space-between;
}
.s1 .wrap ._tit{
	text-align: left; position: relative; z-index: 2;
    font-size: clamp(40px, 45/1920*100vw, 45px);
}
._tit.type02 > div {
    font-size: inherit;
    -webkit-text-stroke: calc(2/45*1em);
}
.s1 .wrap ._tit > div{
	margin-bottom: max(calc(30/72*1em),12px);
}
.s1 .wrap ._tit > div span{display: block;}
.s1 .wrap ._tit > small{
	line-height: 1.666;
}
.s1 .wrap .swiper{
	width: 640px; margin: 0;
}
.s1 .wrap .swiper-slide{
	border-radius: 115px 32px 32px 32px;
	position: relative;  overflow: hidden;
	transition: opacity 1s, filter 1s,transform;
	filter: blur(0px);
}
.s1 .wrap .swiper-slide::before {content:''; display: block; padding-bottom: calc(597/470*100%);}

.s1 .wrap .swiper-slide::after{
	content:''; display: block;
	position: absolute; top: 28px; right: 24px;
	width: 33px; aspect-ratio: 1/1; background-image: url(/asset/img/common/story_logo.png);
	background-size: cover; opacity: 1;
	display: none;
}

.s1 .wrap .swiper-slide .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;
	background-size: cover;
	background-color: #ededed;
}
.s1 .wrap .swiper-slide .bg img{
	filter: brightness(0.5);
	opacity: 1; transition: opacity 1s;
	width: 100%; height: 100%; object-fit: cover;
}

.s1 .wrap .swiper-slide .txtBx{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	color: #fff; line-height: 1.6;
	padding: 46px; box-sizing: border-box;
	display: flex; flex-direction: column; justify-content: flex-end;
	transition: color 1s;
}

.s1 .wrap .swiper-slide .txtBx .num{
	font-weight: 700; color: #fff; font-size: 14px;
	display: flex; align-items: center; justify-content: flex-start;
}

.s1 .wrap .swiper-slide .txtBx strong{
	font-size: 26px; font-weight: 700;
	margin-bottom: 20px;
	/* overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; */
}
.s1 .wrap .swiper-slide .txtBx > p{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 25px;
    font-weight: 300;
    font-size: 14px;
}
.s1 .wrap .swiper-slide .txtBx .btnBx{
	display: flex; align-items: flex-start; justify-content: flex-start;
	gap: 14px;
    font-size: 14px;
    font-weight: 500;
}
.s1 .wrap .swiper-slide .txtBx .btnBx a{
	width: calc(136/14*1em); height: calc(34/14*1em); border-radius: 100px;
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; font-weight: 500;
	transition: background-color, color, border-color; transition-duration: .5s;
	background-color: #605d5b; color: #fff;
}
.s1 .wrap .swiper-slide .txtBx .btnBx a i{margin-right: 4px; font-size: calc(12/14*1em);}
html.pc .s1 .wrap .swiper-slide .txtBx .btnBx a:hover{
	background-color: #000;
}


._controls{
	display: flex; align-items: center; justify-content: center;
	margin-top: 30px;
}
._controls [class^="swiper-button"]{
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; width: 36px; height: 36px;
	border: 1px solid #000;
	box-sizing: border-box;
    background-color: #fff;
	transition: background-color color; transition-duration: .5s;
	cursor: pointer;
}
@media screen and (min-width: 821px) {
    ._controls [class^="swiper-button"]:hover{
        background-color: #000; color: #fff;
    }
}
._controls .swiper_paging{
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; width: 100px;
	text-align: center;
    color: #000;
}

@media screen and (max-width:1600px) {
	.s1 .wrap .swiper{margin-right: calc(90/1600*100vw); width: 600px;}
}
@media screen and (max-width:1440px) {
	.s1 ._controls{color: #000;}
    ._tit.type02 > div {font-weight: 500;}
    .s1 .wrap ._tit {font-size: clamp(35px, 40/1440*100vw, 40px);}
}
@media screen and (max-width:1280px) {
    .s1 .wrap ._tit {font-size: clamp(30px, 35/1280*100vw, 35px);}
    .s1 .wrap .swiper{width: calc(450/1024*100vw);}
    .s1 .wrap .swiper-slide .txtBx {padding: 30px;}
    .s1 .wrap .swiper-slide .txtBx strong {font-size: clamp(20px, 24/1280*100vw, 24px);}
}
@media screen and (max-width: 1024px) {
    .tab ul {font-size: clamp(16px, 18/1024*100vw, 18px);}
    .s1 {padding-top: 80px;}
    .s1 .wrap {flex-direction: column; align-items: center;}
    .s1 .wrap ._tit {text-align: center; margin-bottom: 40px;}
    .s1 .wrap ._tit {font-size: clamp(35px, 40/1024*100vw, 40px);}
    ._tit.type02 > small {font-size: 16px;}
    .s1 .wrap .swiper{width: 100%; max-width: 800px; margin-right: 0;}
}
@media screen and (max-width: 820px) {
    .s1 {padding-bottom: 60px; padding-top: 60px;}
    .s1 .wrap ._tit {font-size: clamp(32px, 40/820*100vw, 40px);}
    ._tit.type02 > small {font-size: clamp(14px, 16/820*100vw, 16px);}
    .s1 .wrap .swiper-slide .txtBx {padding: 20px;}
}
@media screen and (max-width:500px) {
    .tab ul {font-size: clamp(14px, 16/500*100vw, 16px);}
    .s1 .wrap ._tit {font-size: clamp(24px, 32/500*100vw, 32px);}
    .s1 .wrap .swiper-slide {border-radius: 60px 26px 26px 26px;}
	.s1 .wrap .swiper-slide::after{top: 14px; right: 14px; width: 34px;}
	.s1 .wrap .swiper-slide .txtBx{padding: 15px;}
	.s1 .wrap .swiper-slide .txtBx strong{font-size: clamp(16px, 18/500*100vw, 18px);}
	.s1 .wrap .swiper-slide .txtBx > p {font-size: clamp(12px, 14/500*100vw, 14px);}
	.s1 .wrap .swiper-slide .txtBx .btnBx{gap: 10px;}
	.s1 .wrap .swiper-slide .txtBx .btnBx a{font-size: clamp(10px, 12/500*100vw, 12px);}
}
@media screen and (max-width:360px) {
    .s1 {padding-bottom: 40px;}
    .s1 .wrap ._tit {font-size: clamp(18px, 24/360*100vw, 24px);}
    ._tit.type02 > small {font-size: clamp(12px, 14/360*100vw, 14px);}
}