@charset "UTF-8";
/*-------------------------------------------------
title       : 고용노동부 열린장관실 메인
Author      : PLAN I
Create date : 2024-03-14
-------------------------------------------------*/

/* 250704 */
/* fonts */
@import url("webfont.css");

/* Common */
[class*="section sec"]{padding: 8rem 0;}
.layout{width: 100%; max-width: calc(1280px + 1.6rem + 1.6rem); margin: 0 auto; padding: 0 1.6rem;}
[class*="section sec"] .titles{display: block; color: #000; font-size: 4.8rem; line-height: 1; font-weight: 700;}

/* 250704 */
/* 비주얼 */
.visual {height: 69rem; background-image: url(../images/main/bg_visual_3_on.png); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.visual.visual0 {height:75rem;background-image: url(../images/main/bg_visual_0.png); background-position: top center;}
.visual.visual1 {background-image: url(../images/main/bg_visual_1.png);}
.visual.visual2 {background-image: url(../images/main/bg_visual_2.png);}
.visual.visual3 {background-image: url(../images/main/bg_visual_3_bg.png);}
.visual.visual3_bg {background-image: url(../images/main/bg_visual_3.png);}
.visual .layout{height: 100%;}
.visual .inners{position: relative; display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; height: 100%;}
.visual .inners .title{z-index: 1; display: block; padding:0;  color: #333333; font-size: 4.8rem; letter-spacing: -0.1rem; font-weight: 300;}
.visual .inners .title.al-c {text-align: center;}
.visual .inners .title.al-b {text-align: right;}
.visual .inners .title.al-b em {text-align: left;}
.visual .inners .title.al-b .sign {text-align: center;}
.visual .inners .title em{display: block; background-size: 100% auto; font-size: 7.8rem; line-height: 1.2; font-family: 'NanumBrush';}
.visual .inners .title em .txt-bl {color: #005ebc;}
.visual .inners .title em .txt-nv {color: #003863;}
.visual .inners .title em .txt-rd {color: #c60429;}
.visual .inners .title.v0 > * {text-shadow: 1px 1px 1px #ffffff;}
.visual .inners .title.v0 em {font-size: 5.2rem; font-family: 'Pretendard GOV'; font-weight: 700; letter-spacing: -0.14rem;}
.visual .inners .title.v0 em .txt-bl {color: #1d56bc;}
.visual .inners .title.v0 .sub-tit {display: block; margin: 25px auto 0; color: #333; line-height: 1.0; letter-spacing: 0.2rem; font-family: 'NanumPen';}
.visual .inners .title.v0 .sub-tit span {font-size: 6.5rem; font-size: 130%; letter-spacing: -0.06rem;}
.visual .inners .title.v0 .sign {margin-top: 5px; font-weight: 600;}
.visual .inners .visual-img1 {position: absolute; right: 250px; bottom: 0; width: 100%; max-width: 396px; height: 655px; background: url(../images/main/img_visual_1_on.png) right bottom no-repeat; background-size: contain;}
.visual .inners .visual-img3 {position: absolute; right: 0px; bottom: 0; width: 100%; max-width: 515px; height: 604px; background: url(../images/main/img_visual_3_on.png) right bottom no-repeat; background-size: contain;}
.visual .inners ul{z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; width: 100%; margin-top: 6rem;}
.visual .inners ul li{width: 16.5rem;}
.visual .inners ul li:not(:last-child){margin-right: 1.2rem;}
.visual .inners ul li a{display: block; height: 100%; padding: 3rem; text-align: center; background-color: #fff; border-radius: 1rem; box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.04); -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.visual .inners ul li a:hover{background-color: #246BEB; box-shadow: 4px 4px 18px 0px rgba(36, 107, 235, 0.62);}
.visual .inners ul li a strong{display: block; font-size: 1.8rem; color: #555; font-weight: 500; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.visual .inners ul li a:hover strong{color: #fff;}
.visual .inners ul li a strong:before{content: ""; display: block; width: 5.6rem; height: 6.2rem; margin: 0 auto 0.5rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}
.visual .inners ul li:nth-child(1) a strong:before{background-image: url(../images/main/img_list_1.png);}
.visual .inners ul li:nth-child(2) a strong:before{background-image: url(../images/main/img_list_2.png);}
.visual .inners ul li:nth-child(3) a strong:before{background-image: url(../images/main/img_list_3.png);}
.visual .inners ul li:nth-child(4) a strong:before{background-image: url(../images/main/img_list_facebook.png);}
.visual .inners ul li:nth-child(4) {display: flex; align-items: end; width: auto;}
.visual .inners ul li:nth-child(4) a {height: auto; padding: 0; background-color: transparent; box-shadow: none;}
.visual .inners ul li:nth-child(4) a strong {font-size:0;}
.visual .inners ul li:nth-child(4) a strong:before {width: 3.8rem; height: 3.8rem; margin: 0;}
.visual.visual0 .inners ul{margin-top: 15rem; margin-bottom: -17rem;}
.sign {margin-top: 15px; font-size: 2.4rem;}
.sign strong {margin-top: 5px; margin-left: 10px; font-size: 3.0rem; font-weight:600; line-height: 1.0;}
.sign.sign-rt {position: absolute; right: 0; bottom: 40px; font-size: 2.5rem; text-align: right;}
.sign.sign-rt strong {/*display: block;*/ font-size: 3.0rem;}

/* 좋은일자리를 만드는 현장속으로 */
.sec1{}
.sec1 .inners{}
.sec1 .inners:after{content: ""; display: block; clear: both;}
.sec1 .inners .imgs{overflow: hidden; float: right; position: relative; display: block;  width: 49%; min-height: 40rem; margin-left: 9%; border-radius: 1rem; box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.25);}
.sec1 .inners .imgs:before{content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);}
.sec1 .inners .imgs:after{content: ""; display: block; position: absolute; top: 50%; left: 50%; z-index: 2; width: 8rem; height: 8rem; margin-left: -4rem; margin-top: -4rem; background: url(https://www.moel.go.kr/resources/cyber/images/main/icon_sec1_2.png) no-repeat center center; background-size: 100% auto;}
.sec1 .inners .imgs img{
    display: block; position: absolute; top: 50%; left: 50%; width: auto;
    max-width: none; min-width: 100%; height: 100%; transform-origin: left top;
    -webkit-transform: scale(1) translate(-50%,-50%); transform: scale(1) translate(-50%,-50%);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.sec1 .inners .imgs:hover img{
    -webkit-transform: scale(1.1) translate(-50%,-50%); transform: scale(1.1) translate(-50%,-50%);
}
.sec1 .inners .titles{max-width: 38rem; padding-top: 3.4rem; line-height: 1.31;}
.sec1 .inners em{display: inline-block; margin-top: 4rem; padding: 0.8rem 1.5rem; color: #246BEB; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.36rem; line-height: 1; background-color: #EFF5FF; border-radius: 0.3rem;}
.sec1 .inners .links{display: block; margin-top: 1.6rem;}
.sec1 .inners .links a{display: inline-flex; align-items: center; color: #1D1D1D; font-size: 2.4rem; font-weight: 700;}
.sec1 .inners .links a span{
    overflow: hidden; display: inline-block; width: auto; max-width: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), -webkit-linear-gradient(left, #1D1D1D, #1D1D1D, #1D1D1D); background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), -o-linear-gradient(left, #1D1D1D, #1D1D1D, #1D1D1D); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(to right, #1D1D1D, #1D1D1D, #1D1D1D); background-size: 100% 0.1rem, 0 0.1rem !important; background-position: 100% 100%, 0 100% !important; background-repeat: no-repeat !important;
    -webkit-transition: background-size 0.4s; transition: background-size 0.4s;
}
.sec1 .inners .links a:hover span{background-size: 0 0.1rem, 100% 0.1rem !important;}
.sec1 .inners .links a:after{content: ""; display: inline-block; width: 3rem; height: 3rem; margin-left: 1rem; background: url(../images/main/icon_sec1_1.svg) no-repeat center center; background-size: 100% auto;}
.sec1 .inners .links p{margin-top: 0.8rem; color: #555; font-size: 1.6rem; }

/* 장관실 포토 */
.sec2{background: #EFF5FF url(../images/main/bg_sec2_1.svg) no-repeat right bottom; background-size:  contain; border-top-left-radius: 8rem;}
.sec2 .inners{overflow: hidden; }
.sec2 .inners .swiper{overflow: visible; position: relative; margin-top: 4rem;}
.sec2 .inners .swiper .swiper-wrapper{}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide{}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a{display: block;}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a .imgs{
    overflow: hidden; display: block; position: relative; width: 100%; padding-bottom: 75.5%; border-radius: 1rem; box-shadow: 4px 4px 26px 0px transparent; box-sizing: border-box;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a .imgs:before{
    content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: transparent; border: 0.6rem solid transparent; border-radius: 1rem;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a:hover .imgs:before{border-color: #246BEB; }
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a:hover .imgs{box-shadow: 4px 4px 26px 0px rgba(36, 107, 235, 0.50);}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a .imgs img{
    position: absolute; top: 50%; left: 50%; width: auto; min-width: 100%; max-width: none; height: 100%;
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a strong{overflow: hidden; display: block; margin-top: 1.6rem; color: #1D1D1D; font-size: 2.4rem; white-space: nowrap; text-overflow: ellipsis;}
.sec2 .inners .swiper .swiper-wrapper .swiper-slide a p{overflow: hidden; display: block; display: -webkit-box; height: 4.8rem; margin-top: 0.8rem; font-size: 1.6rem; color: #555; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis;}
.sec2 .inners .swiper .btn_wrap{display: flex; position: absolute; bottom: calc(100% + 4rem); right: 0;}
.sec2 .inners .swiper .btn_wrap .swiper-button-prev,
.sec2 .inners .swiper .btn_wrap .swiper-button-next{
    display: block; opacity: 1; position: relative; top: auto; right: auto; left: auto; margin-top: auto; width: 4.2rem; height: 4.2rem; background-color: #fff; border-radius: 50%; box-shadow: 2px 2px 7px 0px rgba(36, 107, 235, 0);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.sec2 .inners .swiper .btn_wrap .swiper-button-prev:hover,
.sec2 .inners .swiper .btn_wrap .swiper-button-next:hover{background-color: #246BEB; box-shadow: 2px 2px 7px 0px rgba(36, 107, 235, 0.25);}
.sec2 .inners .swiper .btn_wrap .swiper-button-prev{}
.sec2 .inners .swiper .btn_wrap .swiper-button-next{margin-left: 0.8rem;}
.sec2 .inners .swiper .btn_wrap .swiper-button-prev:after,
.sec2 .inners .swiper .btn_wrap .swiper-button-next:after{
    display: block; width: 100%; height: 100%; font-size: 0; background: url(../images/main/icon_sec2_1.svg) no-repeat center center; background-size: 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
.sec2 .inners .swiper .btn_wrap .swiper-button-next:after{
    -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.sec2 .inners .swiper .btn_wrap .swiper-button-prev:hover:after,
.sec2 .inners .swiper .btn_wrap .swiper-button-next:hover:after{background-image: url(../images/main/icon_sec2_2.svg);}

/* 반응형 */
@media screen and (max-width:1280px){
	.visual.visual0 {background-position: top 50% right 35%;}
	.visual .inners .visual-img1 {height: 620px;}
}
@media screen and (max-width:1024px){
    [class*="section sec"] .titles{font-size: 4.25rem;}
    .visual{height: 60rem; background-position: top 50% right 30%;}
	.visual.visual0 {height: 60rem; background-position: top 50% right 35%;}
	.visual.visual3_bg {background-position: top 50% right 50%;}
	.visual .inners .title{/*width: 380px; max-width: 380px;*/ padding:10px 0; font-size: 3.8rem;}
    .visual .inners .title em{font-size: 6.7rem;}
	.visual .inners .title.v0 em {font-size: 4.2rem;}
	.visual .inners .visual-img1 {right: 50px; height: 490px;}
	.visual .inners .visual-img3 {right: 30px; height: 470px;}	
    .visual .inners ul li{width: 15rem;}
    .visual .inners ul li a{padding: 2.5rem;}
	.visual.visual0 .inners ul {margin-top: 6rem; margin-bottom: -12rem;}
    .sign.sign-rt {float: none; position: inherit; text-align: center;}
    .sec1 .inners .imgs{min-height: auto; height: 25rem; margin-left: 3rem;}
    .sec2{border-top-left-radius: 6rem;} 
}
@media screen and (max-width:768px){
    [class*="section sec"]{padding: 5rem 0 6rem;}
    [class*="section sec"] .titles{font-size: 3.5rem;}
    .visual{height: 55rem; background-position: top 50% right 35%;}
	.visual.visual0 {height: 55rem; background-position: top 50% right 35%;}
	.visual.visual3_bg {background-position: top 50% right 55%;}
    .visual .inners .title{font-size: 3.3rem;}
    .visual .inners .title em{font-size: 5.0rem;}
	.visual .inners .title.v0 em {font-size:3.7rem;}
	.visual .inners .visual-img1 {right: 30px; height: 440px;}
	.visual .inners .visual-img3 {right: 0; height: 430px;} 
	.visual .inners ul {margin-top: 10rem; margin-bottom: -3rem;}
    .visual .inners ul li{max-width: calc((100% - 1.2rem - 1.2rem) / 3);}
	.visual .inners ul.list2 li{max-width: calc((100% - 1.2rem - 1.2rem) / 4);}
	.visual.visual0 .inners ul {margin-top: 4rem; margin-bottom: -11rem;}
	.sign {float: none; position: inherit;}
	.sign.sign-rt {float: none; position: inherit; text-align: center;}
	.sign.sign-rt strong {display: inline-block;}
    .sec1 .inners{display: flex; flex-wrap: wrap;}
    .sec1 .inners .imgs{order: 2; float: none; width: 100%; height: auto; margin-top: 1.75rem; padding-bottom: 56.25%; margin-left: 0;}
    .sec1 .inners .imgs:after{width: 7rem; height: 7rem; margin-top: -3.5rem; margin-left: -3.5rem;}
    .sec1 .inners .titles{order: 1; width: 100%; max-width: 100%; padding-top: 0;}
    .sec1 .inners em{order: 3; margin-top: 2rem;}
    .sec1 .inners .links{order: 4;}
    .sec2{border-top-left-radius: 4rem;}
    .sec2 .inners .swiper{margin-top: 1.75rem;}
    .sec2 .inners .swiper .btn_wrap{bottom: auto; top: -5rem;}
    .sec2 .inners .swiper .btn_wrap .swiper-button-prev, 
    .sec2 .inners .swiper .btn_wrap .swiper-button-next{width: 3.5rem; height: 3.5rem;}
}
@media screen and (max-width:640px){
    [class*="section sec"]{padding: 4rem 0 5rem;}
    [class*="section sec"] .titles{font-size: 3rem; line-height: 1.31;}
    .visual{height: 50rem; background-position: top 50% right 35%}
	.visual.visual0 {height: 50rem; background-position: top 50% right 30%;}
	.visual.visual3_bg {background-position: top 50% right 30%;}
    .visual .inners .title{font-size: 3.1rem;}
    .visual .inners .title em{font-size: 4.5rem;}
	.visual .inners .title.v0 em {width:240px;margin:0 auto;font-size:3.5rem;}
	.visual .inners .visual-img1 {right: 50px; height: 400px;}
	.visual .inners .visual-img3 {right: 0; height: 390px;} 
	.visual .inners ul.list2 li{max-width: calc((100% - 1.2rem - 1.2rem + 4.0rem) / 4);}
    .visual .inners ul li a{padding: 2rem 1rem;}
    .visual .inners ul li a strong:before{width: 4rem; height: 4.5rem;}
	.visual .inners .title.v0 em,
	.visual .inners .title.v0 .sub-tit,
	.visual .inners .title.v0 .sign {/*text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;*/}
	.visual .inners .title.v0 .sign {font-weight: 600;}
	.visual .inners .title.v0 .sign strong {font-weight: 600;}
	.visual.visual0 .inners ul {margin-top: 4rem; margin-bottom: -6rem;}
	.sign {font-size: 1.8rem;}	
	.sign strong {margin-left: 10px; font-size: 2.4rem; font-weight: 500;}
    .sec1 .inners .links a,
    .sec2 .inners .swiper .swiper-wrapper .swiper-slide a strong{font-size: 2.2rem;}
    .sec1 .inners em{font-size: 1.6rem;}
    .sec1 .inners .links{margin-top: 1rem;}
    .sec1 .inners .imgs:after{width: 6rem; height: 6rem; margin-top: -3rem; margin-left: -3rem;}    
}
@media screen and (max-width:600px){
	.visual .inners .title{}
	.visual .inners .title.v0 em {width:210px;}
	.visual .inners .visual-img1 {right: 20px; height: 350px;}
	.visual .inners .visual-img3 {right: 0; height: 350px;}
	.visual.visual0 .inners ul {margin-top: 4rem; margin-bottom: -5rem;}
}
@media screen and (max-width:480px){
    [class*="section sec"] .titles{font-size: 2.85rem;}
    .visual{height: 50rem;}
	.visual.visual0 {height: 50rem; background-position: top 50% right 28%;}
    .visual .inners .title{font-size: 2.9rem;}
	.visual .inners .title.v0 em {width:190px;font-size:3.4rem;}
	.visual .inners .visual-img1 {right: 0px; height: 350px;}
	.visual .inners .visual-img3 {right: -90px;} 
	.visual .inners ul li a{padding: 1.5rem 1rem;}
	.visual .inners ul li a strong{font-size: 1.7rem;}
	.visual .inners ul li:nth-child(4) a strong:before {width: 4.2rem; height: 4.2rem;}
	.visual.visual0 .inners ul { margin-top: 6rem; margin-bottom: -5rem;}
	.sign.sign-rt {font-size: 2.1rem;}
	.sign.sign-rt strong {margin-left: 5px; font-size: 2.5rem;}
}
@media screen and (max-width:400px){
	.visual .inners .title {font-size: 2.5rem;}
	.visual .inners .visual-img1 {right: -15px;}
	.visual .inners ul li a{padding: 1rem 1rem;}
	.visual .inners ul li a strong {line-height: 1.2;}
	.visual.visual0 .inners ul {margin-top: 4rem; margin-bottom: -8rem;}
	.sign.sign-rt {font-size: 1.8rem;}
	.sign.sign-rt strong {margin-left: 5px; font-size: 2.2rem;}
}
@media screen and (max-width:300px){
	.visual .inners .title {font-size: 2.2rem;}
	.visual .inners .title.v0 em {width:170px;}
	.visual .inners .visual-img1 {right: -35px; height: 295px;}
	.visual.visual0 .inners ul {margin-top: 4rem; margin-bottom: -7rem;}
}

/* 250704 */
/* 비주얼 */
.visual.center .inners {justify-content: center;}
.visual.center .inners ul {justify-content: center;}
.visual.center .inners .title {width: 625px; max-width: 625px; font-size: 5.5rem; text-align: center;}
.visual.center .inners .title em {line-height: 1.0;}
.visual.center .sign {margin-top: 5px;}
.visual.center .sign {float: inherit; position: inherit; margin-top: 15px; font-size: 2.4rem; text-align: center;}
.visual.center .sign strong {display: inline-block; margin-left: 20px; font-size: 3.0rem;}
.visual .inners ul.list1 {margin-top: 4.5rem;}
.visual .inners ul.list1 li {width: 18.5rem;}
.visual .inners ul.list1 li:not(:last-child){margin-right: 2rem;}
.visual .inners ul.list1 li a {padding: 4rem 2rem; box-shadow: none;}
.visual .inners ul.list1 li a:hover {box-shadow: none;}
.visual .inners ul.list1 li a strong {color: #000; font-size: 2.2rem; font-weight: 400;}
.visual .inners ul.list1 li a:hover strong {color: #fff;}
.visual .inners ul.list1 li a strong:before {width: 6.2rem;}
.visual .inners ul.list1 li:nth-child(1) a{background: url(../images/main/bg_list1_1.png) no-repeat 50% 50%; background-size: contain;}
.visual .inners ul.list1 li:nth-child(2) a{background: url(../images/main/bg_list1_2.png) no-repeat 50% 50%; background-size: contain;}
.visual .inners ul.list1 li:nth-child(3) a{background: url(../images/main/bg_list1_3.png) no-repeat 50% 50%; background-size: contain;}
.visual .inners ul.list1 li:nth-child(1) a strong:before{background-image: url(../images/main/img_list1_1.png);}
.visual .inners ul.list1 li:nth-child(2) a strong:before{background-image: url(../images/main/img_list1_2.png);}
.visual .inners ul.list1 li:nth-child(3) a strong:before{background-image: url(../images/main/img_list1_3.png);}
@media screen and (max-width:1280px){
	.visual .inners ul.list1 li {width: 16rem;}
	.visual .inners ul.list1 li:not(:last-child){margin-right: 2rem;}
	.visual .inners ul.list1 li a {box-shadow: none;}
	.visual .inners ul.list1 li a strong {font-size: 1.8rem;}
}
@media screen and (max-width:1024px){
	.visual.center .inners .title {width: 455px; max-width: 455px; font-size: 4.5rem;}
	.visual.center .sign {font-size: 2.2rem;}	
	.visual.center .sign strong {font-size: 2.8rem;}	
	.visual .inners ul.list1 li {width: 15rem;}
	.visual .inners ul.list1 li:not(:last-child){margin-right: 1.2rem;}
	.visual .inners ul.list1 li a {padding: 3.5rem 2.5rem; box-shadow: none;}	
	.visual .inners ul.list1 li a strong {font-size: 1.6rem;}
}

@media screen and (max-width:768px){
	.visual.center .inners .title {width: 355px; max-width: 355px; font-size: 3.5rem;}
	.visual .inners ul.list1 li a {padding: 3.5rem 0;}
}

@media screen and (max-width:640px){	
	.visual .inners ul.list1 li a strong {font-size: 1.8rem;}
	.visual .inners ul.list1 li a strong:before {width: 4.5rem;}
}

/* 250821 */
/* sec3 */
.sec3 .inners {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; align-items: stretch;}
.sec3 .inners > div {width: calc((100% - 2.4rem) / 2); }
.sec3 .inners > div {position: relative; padding: 20px; border-radius: 20px; box-shadow: 0 0 15px #00000015; background-color: #fff;}
.sec3 .inners .titles {font-size: 2.6rem; line-height: 1.2;}
.sec3 .inners .cont-lt {display: flex; flex-direction: column; flex: 0 0 30%; flex: 1 1 100%; width: 100%; max-width: 30%; margin: 0 auto; margin-right: 2.5rem;}
.sec3 .inners .cont-lt > strong {margin-bottom: 2rem;}
.sec3 .inners .cont-lt .imgs {overflow: hidden; float: right; position: relative; display: block; width: 100%; min-height: 22rem; border-radius: 1rem; box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.25);}
.sec3 .inners .cont-lt .imgs:before {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);}
.sec3 .inners .cont-lt .imgs:after {content: ""; display: block; position: absolute; top: 50%; left: 50%; z-index: 2; width: 8rem; height: 8rem; margin-left: -4rem; margin-top: -4rem; background: url(../images/main/icon_sec1_2.png) no-repeat center center; background-size: 100% auto;}
.sec3 .inners .cont-lt .imgs img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: #f3e8fa; background-size: cover; background-position: center; background-repeat: no-repeat; object-fit: cover; z-index: 1;}/* 250821 */
.sec3 .inners .cont-lt .links {display: block; margin-top: 1.6rem;}
.sec3 .inners .cont-lt .links a {display: inline-flex; align-items: flex-start; font-size: 2.2rem; color: #1D1D1D; font-weight: 700; line-height: 1.3;}
.sec3 .inners .cont-lt .links a span {display: block; display: -webkit-box; max-width: 100%;}
.sec3 .inners .cont-lt .links a:after {content: ""; display: inline-block; width: 5rem; height: 3rem; margin-left: 1rem; background: url(../images/main/icon_sec1_1.svg) no-repeat center center;}
.sec3 .inners .cont-lt .links p {overflow: hidden; display: block; display: -webkit-box; height: 75px; margin-top: 0.8rem; font-size: 1.6rem; color: #555; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; display: none;}
.sec3 .inners .cont-rt {flex: auto; position: relative;}
.sec3 .inners .cont-rt .titles {margin-bottom: 2rem;}
.sec3 .inners .swiper {position: static;}
.sec3 .inners .swiper .swiper-wrapper .swiper-slide {height: 305px; height: auto; margin-bottom: 6rem;}
.swiper-slide img {max-height: 300px;}
.sec3 .inners .swiper .swiper-wrapper .swiper-slide a .imgs {overflow: hidden; position: relative; display: block; width: 100%; height: 0; padding-top: calc((200 / 360) * 100%); border-radius: 1rem; box-shadow: 4px 4px 26px 0px transparent; box-sizing: border-box; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.sec3 .inners .swiper .swiper-wrapper .swiper-slide a .imgs img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: #f3e8fa; background-size: cover; background-position: center; background-repeat: no-repeat; object-fit: cover; z-index: 1;}
.sec3 .inners .swiper .swiper-wrapper .swiper-slide a strong {display: block; display: -webkit-box; height: auto; margin-top: 1.6rem; font-size: 2.0rem; color: #1D1D1D; line-height: 1.3;}
.sec3 .inners .swiper .swiper-wrapper .swiper-slide a p {overflow: hidden; display: block; display: -webkit-box; height: 6.5rem; margin-top: 0.8rem; font-size: 1.4rem; color: #555; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; display: none;}
.sec3 .inners .swiper .btn_wrap {display: flex; position: absolute; bottom: calc(100% - 4.2rem); bottom: calc(100% - 6.2rem); right: 20px;}
.sec3 .inners .swiper .btn_wrap .swiper-button-prev, .sec3 .inners .swiper .btn_wrap .swiper-button-next {display: block; opacity: 1; position: relative; top: auto; right: auto; left: auto; width: 4.2rem; height: 4.2rem; margin-top: auto; border: 1px solid #cbcbcb; border-radius: 50%; background-color: #fff; box-shadow: 2px 2px 7px 0px rgba(36, 107, 235, 0); -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.sec3 .inners .swiper .btn_wrap .swiper-button-prev:hover, .sec3 .inners .swiper .btn_wrap .swiper-button-next:hover {background-color: #246BEB; box-shadow: 2px 2px 7px 0px rgba(36, 107, 235, 0.25);}
.sec3 .inners .swiper .btn_wrap .swiper-button-next {margin-left: 0.8rem;}
.sec3 .inners .swiper .btn_wrap .swiper-button-prev:after,
.sec3 .inners .swiper .btn_wrap .swiper-button-next:after {display: block; width: 100%; height: 100%; background: url(../images/main/icon_sec2_1.svg) no-repeat center center; background-size: 100% auto; font-size: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
.sec3 .inners .swiper .btn_wrap .swiper-button-next:after {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
.sec3 .inners .swiper .btn_wrap .swiper-button-prev:hover:after,
.sec3 .inners .swiper .btn_wrap .swiper-button-next:hover:after {background-image: url(../images/main/icon_sec2_2.svg);}
.sec3 .inners .cont-rt a.fb {position: absolute; right: 20px; bottom: 20px; display: inline-block; padding: 10px 20px; margin: 0; border-radius: 10px; background-color: #3d6ee8; font-size: 1.6rem; color: #fff; font-weight: 600; text-align: center;}
.sec3 .inners .cont-rt a.fb:hover {background-color: #2144AD;}
.sec3 .inners > div .more {position: absolute; top: 20px; right: 20px; width: 3.0rem; height: 3.0rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background-color: #3d6ee8; font-size:0; transition: all .45s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.sec3 .inners > div .more:hover {box-shadow: 3px 6px 9px #00000030;}
.sec3 .inners > div .more::before, .sec3 .inners > div .more::after {content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 2px; height: 12px; background-color: #fff; border-radius: 1px;}
.sec3 .inners > div .more::before {transform: translate(-50%, -50%);}
.sec3 .inners > div .more::after {transform: translate(-50%, -50%) rotate(90deg);}

@media screen and (max-width:1024px){
	.sec3 {padding-bottom: 12rem;}
	.sec3 .inners {display: block;}
	.sec3 .inners .titles {font-size: 3.4rem;}
    .sec3 .inners > div {width: 100%;}
	.sec3 .inners .cont-lt {max-width: inherit;}
	.sec3 .inners > div:nth-child(n+2){overflow: hidden; margin-top: 5rem;}
	.sec3 .inners .cont-lt .imgs {min-height: 40rem;}
	.sec3 .inners .cont-lt .links p {height: auto;}
	.sec3 .inners .swiper .swiper-wrapper .swiper-slide {height: auto;}
	.sec3 .inners > div .more {width: 4.0rem; height: 4.0rem;}
}

@media screen and (max-width: 768px){
	.sec3 .inners .titles {font-size: 3.1rem;}
	.sec3 .inners .cont-lt .titles {margin-bottom: 1.75rem;}	
	.sec3 .inners > div .more {width: 3.1rem; height: 3.1rem;}
}

@media screen and (max-width: 640px){
	.sec3 .inners .titles {font-size: 2.8rem;}
	.sec3 .inners .cont-lt .imgs {min-height: 34rem;}
	.sec3 .inners .cont-lt .imgs:after{width: 6rem; height: 6rem; margin-top: -3rem; margin-left: -3rem;}	
	.sec3 .inners > div .more {width: 3.3rem; height: 3.3rem;}
}

@media screen and (max-width:600px){
	.sec3 .inners .cont-lt .imgs {min-height: 30rem;}
}

@media screen and (max-width:480px){
	.sec3 .inners .cont-lt .imgs {min-height: 25rem;}
}