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

/* 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;}

/* 비주얼 */
.visual{height: 69rem; background-repeat: no-repeat; background-position: center center; background-size: cover; border-bottom-right-radius: 8rem;}
.visual .layout{height: 100%;}
.visual .inners{display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center; height: 100%;}
.visual .inners .title{display: block; background-color:rgba(51,51,51,0.7); padding:0 20px; font-size: 5rem; color: #fff; letter-spacing: -0.1rem; font-weight: 300;}
.visual .inners .title em{display: block; width: 42.8rem; height: 13.4rem; background: url(../images/main/bg_visualtxt.svg) no-repeat center center; background-size: 100% auto; text-indent: -9999px;}
.visual .inners ul{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: 4.8rem; height: 4.8rem; margin: 0 auto 1rem; 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/icon_visual1.png);}
.visual .inners ul li:nth-child(2) a strong:before{background-image: url(../images/main/icon_visual2.png);}
.visual .inners ul li:nth-child(3) a strong:before{background-image: url(../images/main/icon_visual3.png);}
.sign {float:right;font-size:20px;font-color:#ffffff;margin:20px 20px 20px 0;}
.sign img {padding-left:20px;}
.sign strong {font-size:30px;padding-left:25px;font-weight:500;}


/* 좋은일자리를 만드는 현장속으로 */
.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(../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:1024px){
    [class*="section sec"] .titles{font-size: 4.25rem;}
    .visual{height: 60rem; border-bottom-right-radius: 6rem;}
    .visual .inners .title{font-size: 4.5rem;}
    .visual .inners .title em{width: 36.38rem; height: 11.39rem;}
    .visual .inners ul li{width: 15rem;}
    .visual .inners ul li a{padding: 2.5rem;}
    .sec1 .inners .imgs{min-height: auto; height: 25rem; margin-left: 3rem;}
    .sec2{border-top-left-radius: 6rem;}
    .visual .inners .title {padding:10px 0}
}
@media screen and (max-width:768px){
    [class*="section sec"]{padding: 5rem 0 6rem;}
    [class*="section sec"] .titles{font-size: 3.5rem;}
    .visual{height: 55rem; border-bottom-right-radius: 4rem;}
    .visual .inners .title{font-size: 3.75rem;}
    .visual .inners .title em{width: 32.1rem; height: 10.05rem;}
    .visual .inners ul li{max-width: calc((100% - 1.2rem - 1.2rem) / 3);}
    .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;}
    .visual .inners .title{font-size: 2.2rem;}
    .visual .inners .title em{width: 25.68rem; height: 8.71rem;}
    .visual .inners ul{margin-top: 7rem;}
    .visual .inners ul li a{padding : 2rem 1.5rem;}
    .visual .inners ul li a strong:before{width: 4rem; height: 4rem;}
    .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;}
    .sign {float:right;font-size:1.7rem;font-color:#ffffff;margin:20px 10px 20px 0;}
    .sign img {padding-left:20px;}
	.sign strong {font-size:2rem;padding-left:15px;font-weight:500;}
}
@media screen and (max-width:480px){
    [class*="section sec"] .titles{font-size: 2.85rem;}
    .visual{height: 45rem;}
    .visual .inners .title{font-size: 3.1rem;}
    .visual .inners .title em{width: 21.4rem; height: 6.7rem;}
}