@charset "utf-8";

@media (max-width:1500px){
    .banner_arrow_r {
        right: 3% !important;
    }
    .banner_arrow_l {
        left: 3% !important;
    }
    .section_1,
    .section_1_2 {
        padding: 60px 8%;
    }
    .section_2_area2 {
        width: 100%;
        padding: 50px calc(8% + 25px) 450px calc(8% + 25px);
        position: relative;
    }
    .section_2 {
        gap: 12px;
    }
    .section_2_slide_item_txt_box{
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px 5px 0 0;
    }
}
@media (max-width:1280px){
    .banner_txt_box h1 {
        font-size: 44px;
        line-height: 61px;
    }
    .banner_txt_box h2 {
        font-size: 18px;
        line-height: 25px;
    }
    .banner_txt_box a {
        font-size: 17px;
        line-height: 23px;
        padding: 16px 80px;
    }
    .section_1_txtbox h1 {
        font-size: 55px;
        line-height: 76px;
    }
}
@media (max-width:1080px){
    .section.section_2{
        flex-direction: column;
    }
    .section_2_slide_contentss {
        width: 100% !important;
    }
    .section_2_slide_item{
        width: 100% !important;
        height: unset !important;
    }
    .section_2_slide_item{
        box-shadow: unset;
    }
    .section_2_slide_item_txt_box{
        width: 100%;
        height: unset;
        padding: 24px;
        gap: 12px;
        background-color: #222222ad !important;
    }
    .section_2_slide_item_txt_box h1 {
        font-size: 22px;
        line-height: 28px;
    }
    .section_2_slide_item_txt_box p {
        font-size: 15px;
        line-height: 21px;
    }
    .section_2_box{
        width: 100%;
        gap: 12px;
    }
    .section_2_box_buts {
        gap: 6px;
        margin-top: 12px;
    }
    .section2_content h1 {
        font-size: 28px;
        line-height: 40px;
    }
    .butt.section_2_butt{
        padding: 12px 35.5px;
        margin-top: unset;
    }
    .section2_content p {
        font-size: 19px;
        line-height: 25px;
    }
    .banner_txt_box h1 {
        font-size: 34px;
        line-height: 51px;
    }
    .banner_txt_box_sub h3 {
        font-size: 38px;
        line-height: 45px;
    }
    .banner_txt_box {
        gap: 20px;
    }
    .section_1_txtbox h1 {
        font-size: 50px;
        line-height: 56px;
    }
    .section_2_area2_content_box2 {
        transform: unset;
    }
    .section_2_area2 {
        padding: 0px 6% 30px 6%;
    }
    .section_2_area2_content {
        display: flex;
        justify-content: space-between;
        z-index: 9;
        flex-direction: column;
        gap: 12px;
    }
    .section_2_area2_content_box {
        display: flex;
        flex-direction: unset;
        gap: 10px;
        width: unset;
        overflow: hidden;
        border-radius: 15px;
    }
    .section_2_area2_content_box_img1 img, .section_2_area2_content_box_img2 img {
        width: 100%;
    }
    .section_2_area2_contents {
        gap: 12px;
    }
    .section_2_area2_content_box_img1{
        display: none;
    }
    .section_2_area2_content_box_m1{
        padding: 50px 25px;
        background:url(../images/index/section_2_area2_content_box1.png ) no-repeat center center;
        background-size: cover;
    }
    .section_2_area2_content_box{
        position: relative; 
    }
    .section_2_area2_content_box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 검은색 반투명한 레이어를 추가합니다. */
    }
    .section_2_area2_content_box_txtbox{
        z-index: 9;
    }
    .section_2_area2_content_box_m2{
        padding: 50px 25px;
        background:url(../images/index/section_2_area2_content_box2.png ) no-repeat center center;
        background-size: cover;
    }
    .section_2_area2_content_box_m3{
        padding: 50px 25px;
        background:url(../images/index/section_2_area2_content_box3.png ) no-repeat center center;
        background-size: cover;
    }
    .section_2_area2_content_box_m4{
        padding: 50px 25px;
        background:url(../images/index/section_2_area2_content_box4.png ) no-repeat center center;
        background-size: cover;
    }
}
@media (max-width:900px){
    .banner_slider_box {
        padding: 0 6% 5% 6%;
    }
    .banner_arrow_r,
    .banner_arrow_l{
        display: none !important;
    }
    .banner_txt_box {
        gap: 40px;
    }
    .section_1,
    .section_1_2 {
        padding: 150px 5%;
    }
    .section_2{
        opacity: 1;
        transition: 0.5s;
    }
    .section_2_area2 {
        padding: 30px 6% 30px 6%;
    }
    .section_1_txtbox{
        gap: 60px;
    }
    .section_1_txtbox h1 br{
        display: none;
    }
    .section_1_txtbox h1 {
        font-size: 40px;
        line-height: 46px;
    }
    .banner_txt_box {
        padding: 0px 6% 0 6%;
        gap: 10px;
    }
    .section2_contents {
        display: flex;
        height: 80vh;
        gap: 24px;
        flex-direction: column;
    }
    .section2_content:hover{
        flex: unset;
        filter: unset;
    }
    .section2_content.active{
        flex: 3;
        filter: grayscale(0);
    }
    .section_2 {
        padding: 0px 5%;
    }
}
@media (max-width:768px){
    .section_2_box h1{
        font-size: 32px;
        line-height: 37px;
    }
    .section_2_box h2,
    .section_2_box_but p{
        font-size: 18px;
    }
    .section_2_box{
        padding-top: 24px;
    }
    .section2_content {
        padding: 0 12px;
        gap: 16px;
    }
    .butt.section_2_butt{
        font-size: 17px;
        line-height: 23px;
        margin-top: unset;
    }
    .butt.section_2_butt {
        padding: 6px 12px;
        margin-top: unset;
    }
    .section2_content h1 {
        font-size: 22px;
        line-height: 26px;
    }
    .section2_content p {
        font-size: 15px;
        line-height: 20px;
    }
    .banner_txt_box h1 {
        font-size: 26px;
        line-height: 31px;
    }
    .banner_txt_box_sub h3 {
        font-size: 25px;
        line-height: 32px;
    }
    .banner_txt_box h1 br{
        display: none;
    }
    .banner_txt_box h2 {
        font-size: 16px;
        line-height: 24px;
    }
    .banner_txt_box a {
        padding: 12px 56px;
    }
    .section_1,
    .section_1_2 {
        padding: 100px 5%;
    }
    .section_1_txtbox {
        gap: 20px;
    }
    .section_1_txtbox h1 {
        font-size: 32px;
        line-height: 37px;
    }
    .section_1_txtbox h2 {
        font-size: 18px;
    }
    .section_1_txtbox h2 br{
        display: none;
    }
    .section_2_area2_content_box h1{
        font-size: 20px;
        line-height: 24px;
        text-align: center;
    }
    .section_2_area2_content_box p{
        font-size: 16px;
        line-height: 20px;
        text-align: center;
    }
    .section_2_area2_content_box_img2{
        display: none;
    }
    .section_2_area2_content_box{
        padding: 24px 12px;
        align-items: center;
        justify-content: center;
    }
    .section_2_area2_content_box_txtbox_m_but{
        display: flex;
    }
    .wrep_bk {
        background: url(../images/index/section_2_area2.png)no-repeat -550px center fixed;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}