@charset "utf-8";

.row{
    max-width: 1280px;
    margin: 0 auto;
}

/* 헤더///////////////// */
header{
    position: absolute;
    width: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.2);
    top: 0;
}
header.over{
    background: #fff;
}
#h_wrap{
    display: flex;
    justify-content: space-between;
    max-width: 1828px;
    margin: 0 auto;
    height: 90px;
}
#logo{
    padding: 20px 0 10px 0;
    z-index: 101;
    transform: scale(0.7);
}
#main_nav{
    width: 900px; 
    position: relative; 
}
#main_nav > ul{
    display: flex;
    justify-content: space-around;
    padding-top: 45px;
    font-weight: 700;
}
#main_nav > ul > li{
    position: relative;
    flex-grow: 1;
    text-align: center;
}
#main_nav > ul > li > a{
    display: block;
    color: #fff;
    font-size: 17px;
    height: 45px;
}
header.over #main_nav > ul > li > a{
    color: #000;
}
header #main_nav > ul > li > a > span{
    border-bottom: 3px solid transparent;
    height: 42px;
    display: inline-block;
    padding: 0 5px;

}
header #main_nav > ul > li:hover > a > span{
    border-bottom: 3px solid #21819e;
}
#main_nav .sub_navi{
    position: absolute;
    top: 45px;
    z-index: 1001;
    width: 100%;
    height: 200px;
    display: none;
}
#main_nav .sub_navi > ul{
    padding-top: 20px;
}
#main_nav .sub_navi > ul > li > a{
    height: 40px;
    line-height: 40px;
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #000;
}
#main_nav .sub_navi > ul > li > a:hover{
    color: #21819e;
}
#navi_bg{
    width: 100%;
    background: #fff;
    position: absolute;
    height: 200px;
    top: 90px;
    left: 0;
    display: none;
    border-top: 1px solid #000;
}


.lang_icon > ul{
    display: flex;
}
.lang_icon > ul > li:nth-child(1){
    padding: 45px 0 10px 0;
}
.lang_icon > ul > li:nth-child(2){
    padding: 35px 0 10px 0;
}
.lang_icon > ul > li{
    margin-left: 10px;
}
header .black{
    display: none;
}
header.over .black{
    display: block;
}

header.over .white{
    display: none;
}
header .white{
    display: block;
}

.lan.over .white{
    display: none;
}
.lan .white{
    display: block;
}
.lan.over .black{
    display: block;
}
.lan .black{
    display: none;
}

 .lang_icon > ul > li > .lan > img{
    transform: scale(1);
}
 .lang_icon > ul > li > .lan{
    margin-left: 0;
    display: flex;
    margin-bottom: 5px;
    width: 58px;
    border: 1px solid transparent;
} 
.lang_icon > ul > li > a{
    color: #fff;
    border: 1px solid #21819e;
    width: 108px;
    height: 44px;
    display: inline-block;
    background-color: #21819e;
    font-size: 17px;
    line-height: 44px;
    text-align: center;
    border-radius: 20px;
}
.lang_icon > ul > li:nth-child(2):hover > a{
    background-image: url(../image/store_thumb.jpg);
}
.lang_icon > ul > li:nth-child(2), .lang_icon > ul > li:nth-child(3){
    z-index: 1000;
}
.lang_icon > ul > li > .lan > img{
    width: 11px;
    height: 7px;
    margin-left: 13px;
    margin-top: 12px;
} 
.lang_icon > ul > li > .lan > span{
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    z-index: 10;
    color: #fff;
}
.lang_icon > ul > li{
    position: relative;
}
.lang_icon > ul > li > .lan_list{
    position: absolute;
    background: #fff;
    width: 58px;
    border: 1px solid #000;
    display: none;
    cursor: pointer;
}
.lang_icon > ul > li > .lan_list > .lan_item{
    height: 30px;
    font-size: 14px;
    text-indent: 22px;
    line-height: 30px;
    cursor: pointer;
}
.lang_icon > ul > li > .lan_list > .lan_item:nth-child(1){
    border-bottom: 1px solid #a5a5a5;
}
header.over .lang_icon > ul > li > .lan > span{
    color: #000;
}

.lang_icon > ul > li > .lan_list > .lan_item:hover{
    color: #21819e;
}


/* 서브페이지 서브 메뉴 */
#top{
    text-align: center;
}
#top > h1{
    font-size: 64px;
    margin-top: 170px;
    margin-bottom: 50px;
    font-weight: 700; 
}
#top > p{
    font-size: 24px;
    color: #646464;
    margin-bottom: 80px;
}


/* 모바일 스타일 */
.mb_close{
    z-index: 1001;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #000;
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
}
#mb_cl ul{
    display: flex;
}

#mb_cl > ul > li{
    margin-right: 20px;
    font-size: 16px;
}
#mb_cl ul li a{
    color: #000;
}
#mb_cl ul li:hover a{
    color: #21819E;
}
#mb_cl li.on a{
    color: #21819E;
    font-weight: 700;
}
#mb_navi{
    position: fixed;
    top: 0;
    right: -100%; /* 닫힘: -100% */
    width: 73%;
    height: 100%;
    z-index: 1001;
    background: #fff;
    overflow-y: auto;  /* 밑에 메뉴가 있는데 안보여서 스크롤을 넣어서 보이게 하기 위해 */
}
.mb_bg{
    position: fixed;
    width: 100%;
    height: 100%;
    right: -100%;  /* 닫힘: -100% */
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1001;
}
.mo_sns ul{
    display: flex;
}
.mo_sns ul li{
    margin: 10px;
}
.mo_sns ul li:nth-child(1){
    margin-left: 20px;
}
.mo_sns ul li:nth-child(4){
    flex-grow: 1;
    text-align: end;
}
.mo_sns ul li:nth-child(4) a{
    color: #fff;
    border: 1px solid #21819e;
    width: 108px;
    height: 44px;
    display: inline-block;
    background-color: #21819e;
    font-size: 17px;
    line-height: 44px;
    text-align: center;
    border-radius: 20px;
    z-index: 1001;
}

/* 콘텐츠 */
.full_fu{
    background: #fff;
}
.f1{
    border-left: 1920px solid #cf0021;
    border-bottom: 999px solid transparent;
    border-top: 0px solid #cf0021; 
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
 .swi_fu{
    position: fixed;
    height: 100vh;
    top: 0;
    width: 100%;
    left: 0;
    z-index: -1;
} 
.sw1 {
    position: relative;
    
}
.sw1 .row{
    position: relative;
    display: flex;
    align-items: flex-end;
}
.sw1 .swiper-slide{
    height: 100vh;
}
.sl_l{
    position: absolute;
    top: 175px;
    left: 0;
    
}
.sl_l h1{
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.sl_l h1 span{
    display: block;
    margin-top: -16px;
}
.sl_l p{
    color: #fff;
}
.sl_l p:nth-child(2){
    font-size: 24px;
    font-weight: 500;
}
.sl_l p:nth-child(3){
    font-size: 24px;
    font-weight: 700;
}
.sl_m{
    position: absolute;
    top: 278px;
    left: 285px;
}
.sl_m img{
    width: 860px;
    height: 760px;
}
.sl_m span{
    position: absolute;
    bottom: 88px;
    right: 198px;
}
.sl_r{
    position: absolute;
    top: 130px;
    right: -105px;
}
.sl_r img{
    width: 385px;
    height: 355px;
}
.sl_r span{
    position: absolute;
    top: 302px;
    right: 46px;
}
.sw1_btn{
    position: absolute;
    width: 100%;
    top: 539px;
    z-index: 10;
}
.sw1_btn p{
    color: #fff;
    font-size: 20px;
    display: inline;
}
.sw1_btn p:nth-child(1){
    margin-right: 250px;
}
.sw1_btn .swiper-pagination{
    text-align: left;
    text-indent: 30px;
}
.sw1 .swiper-pagination-bullet{
    background: var(--swiper-pagination-bullet-inactive-color, #fff);
}


.sw1 .swiper-horizontal>.swiper-scrollbar, .sw1 .swiper-scrollbar.swiper-scrollbar-horizontal{
    width: 230px;
    height: 2px;
    
}
.sw1 .swiper-scrollbar{
    background: rgba(255, 255, 255, 0.6);
    left: 30px;
    bottom: 12px;
}
.sw1 .swiper-scrollbar-drag{
    background: #fff;
}
.sw1 .swiper-pagination-bullet{
    color: #D9D9D9;
  }
  .sw1 .swiper-slide{
    overflow: hidden;
  }
/*   .sw1 .swiper-button-next, .sw1 .swiper-button-prev{
    display: none;
  } */
      /*재생, 정지 버튼  */
    .sw2_btn{
        display: flex;
        position: relative;
        z-index: 11;
    }
  .sw1 .sw_btn2{
    
    background: url(../image/prev.png) no-repeat 0 5px;
    width: 44px;
    height: 25px;
    cursor: pointer;
    text-indent: -9999px;
    margin-left: 10px;
    cursor: pointer;
}
.sw1 .sw_btn3{
    background: url(../image/next.png) no-repeat 0 5px;
    
    width: 44px;
    height: 25px;
    cursor: pointer;
    text-indent: -9999px;
    margin-left: 10px;
    cursor: pointer;
}

/* 검정색 버튼 */
.sw1_btn.black p{
    color: #000;
}
.sw1 .sw1_btn.black .swiper-scrollbar-drag{
    background: #000;
}
.sw1 .sw1_btn.black .swiper-scrollbar{
    background: #999;
}

.sw1 .sw1_btn.black .sw_btn2{
    filter: brightness(0);
}
.sw1 .sw1_btn.black .sw_btn3{
    filter: brightness(0);
}
.swiper-slide .f2{
    background: url(../image/background2.jpg) no-repeat;
    height: 100%;
}
.sl_l ul li{
    font-size: 24px;
    font-weight: 500;
    color: #fff;
}
.sl_m2{
    position: relative;
    top: 280px;
    right: -325px;
}
.sl_m2 img{
   max-width: 94%; /* 1050px */
}
.f2 .sl_m2 span{
    bottom: 48px;
    right: 82px;
    position: absolute;
    color: #FFEA7C;
}
.swiper-slide .f3{
    background: url(../image/background3_1.jpg) no-repeat;
    height: 120%;
}
.sl_m3{
    position: relative;
    top: 95px;
    right: -325px;
}
.sl_m3 img{
    max-width: 104% ; /* 955px */
 }
 .f3 .sl_l h1{
    color: #ffea7c;
 }
 .f3 .sl_m3 span{
    bottom: 186px;
    right: 82px;
    position: absolute;
    color: #fff;
 }
 .swiper-slide .f4{
    background: url(../image/background4.jpg) no-repeat;
    max-width: 100%;
 }
 .f4 .sl_l h1,  .f4 .sl_l ul li{
    color: #000;
 }
 .f4 .sl_m3 span{
    bottom: 186px;
    right: 82px;
    position: absolute;
    color: #000;
 }
 /* //////////////// */
 .c_t{
    margin-bottom: 150px;
    margin-top: 100vh;
 }
 .ct_p{
    text-align: center;
    position: relative;
    padding-top: 80px;
 }
 .ct_p h3, .ct_p ul{
    transform: translateY(50%);
    opacity: 0;
 }
 .ct_p.active h3, .ct_p.active ul{
    transform: translate(0%);
    opacity: 1;
    transition: 0.3s;
 }
 
 .ct_p h3{
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: 700;
 }

 .ct_p ul a{
    color: #565656;
 }
 .ct_p ul{
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
 }

 .ct_p ul li{
    font-size: 16px;
    font-weight: 500;
    margin-right: 20px;
    position: relative;
 }
 .ct_p ul li:hover a{
    color: #cf0021;
 }
 .ct_p ul li::after{
    position: absolute;
    content: '';
    top: 6px;
    right: -11px;
    border: 1px solid #cacaca;
    height: 10px;
 }
 .ct_p ul li:nth-child(4)::after{
    display: none;
 }
 .ct_p a{
    color: #000;
 }
 .ct_p p{
    font-size: 14px;
    position: absolute;
    top: 79px;
    right: 0;
 }
 .ct_p ul li.on a{
    color: #cf0021;
 }
 .ct_p p a:hover{
    font-weight: 700;
 }
 .ct_b{
     display: flex;
    justify-content: space-between;
    position: relative;
 }
 .ct_b a ul li img{
    width: 100%;
    vertical-align: top;
 }
 .ct_b a ul li:hover img{
    transform: scale(1.2);
    transition: 0.3s;
 }
 .ct_b .swiper-slide:nth-child(1) a ul li img{
    transform: rotate(10deg);
 }
 .ct_b .swiper-slide:nth-child(2) a ul li img{
    transform: rotate(32deg);
 }
 .ct_b .swiper-slide:nth-child(1) a ul li:hover img{
    transform: rotate(10deg) scale(1.2);
    transition: 0.3s;
 } 
 .ct_b .swiper-slide:nth-child(2) a ul li:hover img{
    transform: rotate(32deg) scale(1.2);
    transition: 0.3s;
 } 
 .ct_b a{
    color: #000;
 }
 .ct_b a ul li:nth-child(2){
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 5px;
 }
 .ct_b a ul li:nth-child(3){
    text-align: center;
 }
 .nextbutton, .prevbutton{
    display: none;
 }
/* //////////////////// */
.but .swiper-button-next:after, .but .swiper-button-prev:after{
    display: none;
}
.but .swiper-button-prev{
    top: 162px;
    left: -3px;
}
.but .swiper-button-next{
    top: 162px;
    left: 57px;
}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
     opacity: 1;
     cursor: pointer;
     pointer-events: auto;
}
.sp_m{
    display: flex;
    position: relative;
}
.more{
    position: absolute;
    right: 10px;
    top: 0;
}
.sp_up{
    width: calc(100% - 270px);
    max-width:920px;
}
.sp1 .swiper-slide {
    position: relative;
    padding-bottom: 60px;
}
.sp1 .swiper-slide figure{
    margin-right: 20px;
}
.sp1 .swiper-slide figure img{
    width: calc(100% - 60px);
    height: 500px;
    border-radius: 30px;
    box-shadow: 52px 33px 0 #cf0023;
}
.sp1 .swiper-slide a{
    color: #fff;
}
.im_t{
    position: absolute;
    top: 20px;
    left: 40px;
    font-weight: 700;
    font-size: 32px;
}
.im_b{
    position: absolute;
    font-size: 20px;
    bottom: 78px;
    left: 40px;
}
.im_t.black , .im_b.black{
    color: #000;
}
.sp_m{
    position: relative;
    padding-bottom: 150px;
    overflow: hidden;
}
.sp_m > p > a{
    color: #000;
    font-size: 14px;
}
.sp_m > p:hover > a{
    font-weight: 700;
}
.sp_b{
    position: relative;
    top: 160px;
}
.sp_b a{
    color: #000;
}

.sp_b h3{
    font-size: 36px;
    font-weight: 700;
}
.sp_b p{
    font-size: 20px;
    color: #565656;
}
.sp_b .more{
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 0;
}
.sp1 .swiper-button-next, .swiper-rtl .sp1 .swiper-button-prev{
    right: var(--swiper-navigation-sides-offset, 208px);
    left: auto;
    
}
.sp1 .swiper-button-prev, .sp1 .swiper-rtl .sp1 .swiper-button-next{
    left: var(--swiper-navigation-sides-offset, 948px);
    right: auto;
}
.sp1 .swiper-button-next, .sp1 .swiper-button-prev{
    top: var(--swiper-navigation-top-offset, 64%);
}
/* //////////////////// */
.m_im{
    position: relative;
    overflow: hidden;
}
.m_im figure{
    height: 570px;
    overflow: hidden;
}
.m_im figure img{
    object-fit: cover;
    width: 100%;
    height: 570px;
}
.m_im figure img.m_im_mb{
    display: none;
}
.m_image{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.m_image_mb{
    display: none;
}
.m_image img{
    width: 400px;
}
.m_image ul{
    text-align: center;
    padding-left: 50%;
    transform: translateX(50%);
    opacity: 0;
}
.imgg{
    display: none;
}
.m_image ul.active{
    transform: translateX(0);
    opacity: 1;
    transition: 0.5s;
}
.m_image ul li{
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
}
.m_image ul li:nth-child(2){
    margin-bottom: 50px;
}
.m_image ul li a{
    color: #fff;
    font-weight: 700;
    font-size: 32px;
    border: 1px solid #21819E;
    border-radius: 15px;
    background-color: #21819E;
    display: inline-block;
    width: 280px;
    text-align: center;
    width: 300px;
    height: 75px;
    line-height: 75px;
}
/* //////////////////////////////////////// */
.full{
    background: #f6cbd2;
    height: auto;
    padding-top: 80px;
    overflow: hidden;
}
.t1{
    align-items: center;
    display: flex;
    margin-bottom: 20px;
}
.t1 span{
    font-weight: 700;
    font-size: 64px;
    color: #21819E;
    margin-left: 20px;
}
.t1 img{
    width: 230px;
}
.full .row p{
    font-size: 20px;
    margin-bottom: 70px;
    color: #565656;
}
.f_l{
    position: relative;
    z-index: 10;
    background: #f6cbd2;
    width: 45%;
}
.f_l::before{
    content: '';
    width: 350px;
    height: 100%;
    background: #f6cbd2;
    left: -350px;
    position: absolute;
    top: 0;
}
.f_l img{
    width: 420px;
    vertical-align: top;
}
.t_more a{
    font-size: 14px;
    color: #000;
}
.t_more:hover a{
    font-weight: 700;
}
.cf{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.right{
    width: 55%;
}
.but2{
    display: flex;
    position: relative;
}
.but2 .prev{
    position: absolute;
    top: -93px;
    left: 0;
    cursor: pointer;
}
.but2 .next{
    position: absolute;
    top: -93px;
    left: 57px;
    cursor: pointer;
}
.t_more{
    position: absolute;
    top: -93px;
    right: 0px;
}
.f_r{
    overflow: visible;
}
.f_r .swiper-slide img{
    width: 100%;
    height: 250px;
}
.f_r .swiper-slide p{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    color: #000;
    text-align: center;
}
/* /////////////////////////////// */
#b_b{
    background: url(../image/search.jpg) no-repeat;
    z-index: -1;
    background-size: cover;
    overflow: hidden;
}

.b_t{
    padding: 100px 0;
    text-align: center;
}
.b_t h2{
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    transform: translateX(50%);
    opacity: 0;
}
.b_t p{
    font-size: 24px;
    color: #fff;
    margin-bottom: 50px;
    transform: translateX(50%);
    opacity: 0;
}
#sh_form {
    border: 1px solid #fff;
    height: 68px;
    border-radius: 40px;
    margin: 0 auto;
    width: 60%;/* 745px */
    background: #fff;
    transform: translateX(50%);
    opacity: 0;
}
#sh {
    margin-top: 12px;
    height: 50px;
    border: none;
    margin-left: 13px;
    width: calc(100% - 79px);
    outline: none;
    color: #21819E;
    font-size: 20px;
    transform: translateX(50%);
    opacity: 0;
}
#sh_form input{
    float: left;
}
.shbtn{
    margin-top: 4px;
    transform: translateX(50%);
    opacity: 0;
}
#b_b.active .b_t h2, #b_b.active .b_t p, #b_b.active #sh, #b_b.active .shbtn, #b_b.active #sh_form{
    transform: translateX(0%);
    opacity: 1;
    transition: 0.5s;
}
/* ////////////////////////////////////////////// */
.gg h3{
    font-weight: 700;
    font-size: 36px;
    margin-top: 80px;
    margin-bottom: 10px;
}
.gg p{
    font-size: 20px;
    color: #565656;
    margin-bottom: 40px;
}
.gg_b ul{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
.gg_b ul li{
    width: 23%;
    position: relative;
}
.gg_b ul li img{
    width: 100%;
     height: 295px;
     vertical-align: top;
}
.ov_text{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.69);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}
.ov_text span{
    display: inline-block;
    padding: 10px;
    color: #fff;
    font-size: 16px;
}
 .gg_b  a:hover .ov_text{
    opacity: 1;
}
.ne, .pre{
    display: none;
 }
.sns{
    margin-bottom: 80px;
}
.sns a{
    color: #000;
      display: flex;
      align-items: center;
}
.sns ul{
    margin-left: 19px;
}
.sns ul li:nth-child(1){
    font-size: 14px;
}
.sns ul li:nth-child(2){
    font-size: 24px;
}
.sns ul li:nth-child(2) .count{
    font-size: 24px;
}
.sns ul li:nth-child(2) span{
    font-size: 14px;
}
.sns img{
    width: 83px;
}
/* ///////////////////////////// */
.bb{
    border-top: 2px solid #a5a5a5;
}
.bb_bb ul{
    display: flex;
    justify-content: space-between;
    padding: 30px 0;
    align-items: center;
}
/* ///////////////////////////////////// */
footer{
    background-color: #21819E;
    padding: 20px 0;
}
.foo ul{
    display: flex;
}
.foo ul li{
    margin-right: 15px;
}
.foo ul li a{
    font-size: 14px;
    color: #fff;
}
.foo ul li:nth-child(1) a{
    font-weight: 700;
}
.foo p{
    color: #fff;
}
.rtn{
    display: flex;
    justify-content: space-between;
}
#site{
    width: 150px;
    margin: 20px;
    position: relative;  /* 펼처지는 메뉴때문애 */
}
.text_site{
    border-bottom: 1px solid #fff;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}
.ch_text{
    display: block;
    text-indent: 5px;  /* 인라인 요소일때 안먹힘 */
    font-size: 14px;
    color: #fff;
}
.arrow{
    position: relative;   /* 화살표 위치를 잡기위해 */
    
}
 .arrow .n{
    display: none;
    position: absolute;
    bottom: 2px;
    right: 4px;
} 
.arrow .u{
    position: absolute;
    bottom: 2px;
    right: 4px;
}
#site > ul{
    position: absolute;
    border: 1px solid #000;
    background: #fff;
    bottom: 31px;
    width: 100%;
    box-sizing: border-box; /* 선을 맞추기 위해서도 넣는다 */
    display: none; 
}
#site > ul li:nth-child(1){
    border-bottom: 1px solid #a5a5a5;
}
#site ul li a{
    display: block;
    height: 30px;
    line-height: 30px;
    text-indent: 5px;
    color: #a5a5a5;
}
#site ul li a:hover{
    color: #21819E;
}

.go_sns{
    position: fixed;
    bottom: 100px;
    right: 1%;
    z-index: 20;
}
.foo ul{
    margin-bottom: 5px;
}
.foo ul li{
    position: relative;
}
.foo ul li::after{
    content: '';
    position: absolute;
    top: 5px;
    right: -9px;
    border: 1px solid #e4e4e4;
    height: 10px;
}
.foo ul li:nth-child(3)::after{
    display: none;
}



@media screen and (max-width: 1662px) {
    .swi_fu{
        position: static;
    }
    .c_t{
        margin-top: 0;
    }
        .f1 {
            width: 100vw;
            height: 300vh;
            background-color: #cf0021;
            clip-path: polygon(0 0, 100% 0, 0 100%);
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
        }
        
        .t_more {
            margin-right: 10px;
        }
}
@media screen and (max-width: 1440px) {
    .sl_r{
        right: -20px;
    }
}

@media screen and (max-width: 1227px) {
    .sl_m3 {
        right: -236px;
    }
}

@media screen and (max-width:1066px) {
    .f1 {
        width: 100vw;
        height: 744vh;
        background-color: #cf0021;
        clip-path: polygon(0 0, 100% 0, 0 100%);
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        
    }
    .sl_m {
        position: absolute;
        top: 552px;
        left: -28px;
    }
    .sl_m img {
        width: 560px;
        height: 460px;
        transition: 0.3s;
    }
    .sl_m span {
        bottom: 82px;
        right: 412px;
    }
    .sw1 .swiper-horizontal>.swiper-scrollbar, .sw1 .swiper-scrollbar.swiper-scrollbar-horizontal{
        width: 147px;
    }
    .sw1_btn p:nth-child(1) {
        margin-right: 166px;
    }
    .sl_r img {
        width: 585px;
        height: 555px;
        transition: 0.3s;
    }
    .sl_r span {
       display: none;
    }
    .sl_m2 {
        top: 588px;
        right: 0px;
    }
    .sl_m2 img {
        max-width: 73%;
    }
    .f2 .sl_m2 span {
        bottom: 43px;
        right: 217px;
    }
    .sl_m3 {
        position: relative;
        top: 437px;
        right: -64px;
    }
    .sl_m3 img {
        max-width: 74%;
    }
    .f3 .sl_m3 span {
        bottom: 232px;
        right: 181px;
    }
    .ct_p p {
        margin-right: 10px;
    }
    .c_t {
        margin-bottom: 223px;
    }
   .m_image_pc{
    display: none;
   }
   .m_image_mb{
    display: block;
    margin: 0 auto;
   }
    .m_im > figure{
        height: 434px;
    }
    .m_im figure img.m_im_mb{
        display: block;
    }
    .m_im figure img.m_im_pc{
        display: none;
    }
    .m_image{
        position: static;
        width: 100%;
        margin-top: 30px;
        transform: translateY(0);
    }
    .m_image ul {
        text-align: center;
        padding-left: 0px;
    }
    .m_image ul li{
        color: #000;
    }
   
    .m_image ul li:nth-child(2) {
        margin-bottom: 28px;
    }
    .m_image ul li a {
        border-radius: 31px;
        width: 70%;
        height: 59px;
        line-height: 59px;
    }
    #fu{
        margin-top: 45px;
    }
    .f_l img {
        width: 98%;
    }
}

@media screen and (max-width:780px) {
    header{
        flex-wrap: nowrap;
        /* padding: 0 20px; */
        width: 100%;
        background-color: transparent;
    }
    #logo{
        width: auto;
        text-align: left;
        margin-left: 15px;
        padding-top: 10px;
    }
    #main_nav{
        display: none;
   }
   .lang_icon{
        position: relative;
        display: none;
   }
   .mb_menu{
    position: absolute;
    top: 12px;
    width: 30px;
    height: 30px;
    right: 38px;
    z-index: 1002;
   }
   .m_im figure img {
    object-position: center -83px;
   }
   .mb_1, .mb_2, .mb_3{
    border: 2px solid #000;
    margin-bottom: 7px;
    transition: 0.3s;
   }
   .mb_menu.cross .mb_1{
    transform: rotate(45deg) translate(6px, -4px);
    transform-origin: 0px 0px;
   }
   .mb_menu.cross .mb_2{
    opacity: 0;
   }
   .mb_menu.cross .mb_3{
    transform: rotate(-45deg) translate(14px, -17px);
    transform-origin: 100% 100%;
   }
       /* 모바일 메뉴 복사 */
       .mb_navi_wrap{
        margin-top: 10px;
    }
    .mb_navi_wrap > ul > li > a{
        display: block;
        line-height: 60px;
        height: 60px;
        font-size: 16px;
        color: #5E5E5e;
        font-weight: 700;
        text-indent: 20px;
    }
    .mb_navi_wrap > ul > li:nth-child(2) > a, .mb_navi_wrap > ul > li:nth-child(3) > a{
        background: none;
    }
    .mb_navi_wrap > ul > li > a.on{
        color: #21819E;
    }
    .mb_navi_wrap > ul > li > .sub_navi{
        display: none;
    }
    .mb_navi_wrap > ul > li > .sub_navi > ul > li > a:hover{
        color: #21819E;
    }
    .mb_navi_wrap > ul > li > .sub_navi > ul > li > a{
        display: block;
        height: 40px;
        color: #5E5E5e;
        text-indent: 30px;
        font-size: 14px;
        line-height: 40px;
    }
    /* ///////////////////////// */
    .sl_l h1{
        text-indent: 10px;
    }
    .sl_l p:nth-child(2){
        text-indent: 10px;
    }
    .sl_l p:nth-child(3){
        text-indent: 10px;
    }
    .right {
        width: 100%;
    }
    .sl_r{
        opacity: 0;
        visibility: visible;
        transition: opacity 0.3s ease, visibility 0.3S ease;
    }
    .sl_m2 {
        top: 583px;
        right: 0px;
    }
    .sl_m2 img {
        max-width: 78%;
    }
    .f2 .sl_m2 span {
        bottom: 4px;
        right: 217px;
    }
    .sl_m3 img {
        max-width: 87%;
    }
.im_t {
    left: 60px;
}
.im_b {
    left: 60px;
    text-align: left;
}
    .sp1 .swiper-slide figure img {
        width: calc(100% - 85px);
        height: 429px;
        box-shadow: 42px 33px 0 #cf0023;
    }
    .f3 .sl_m3 span {
        bottom: 140px;
        right: 142px;
    }
    .c_t {
        margin-bottom: 200px;
    }
    .sp_b {
        white-space: nowrap;
        text-align: center;
        top: 0;
    }
    .sp_m{
        flex-direction: column;
    }
    .sp_up {
        width: calc(100% - 50px);
        text-align: center;
    }
    .but .swiper-button-next {
        top: 60%;
        right: 10%;
        left: auto;
    }
    .but .swiper-button-prev {
        top: 60%;
        left: 10%;
    }
    .cf{
        display: block;
    }
    .f_r{
        max-width: 500px;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 37px;
    }
    .f_l{
        margin: 0 auto;
        width: 63%;
        margin-bottom: -18px;
    }
    .t_more {
        top: -434px;
        right: 0px;
    }
    .full .row p{
        text-align: center;
    }
    .t1 {
        justify-content: center;
    }
    .m_im figure{
        height: 340px;
    }
    .m_im figure img{
        height: 100%;
        object-position: center;
    }
    .but2 .prev {
        top: 117px;
        left: 8%;
    }
    .but2 .next{
        top: 117px;
        left: 89%;
    }
    .t1 img {
        width: 31%;
    }
    .t1 span{
        font-size: 10vw;
    }
    .bb{
        display: none;
    }
        .go_sns{
        display: none;
    }
    .full .row p {
        font-size: 18px;
    }
    .full .row p{
        margin-bottom: 22px;
    }
    .gg h3, .gg p{
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .f_r .swiper-slide img {
        width: 59%;
        height: 240px;
    }
    .f_r{
        text-align: center;
    }
}

@media screen and (max-width: 656px) {
    .f1{
        clip-path: polygon(0 0, 100% 0, 0 137%);
    }
    .c_t {
        margin-bottom: 154px;
    }
    .sl_m2 img {
        max-width: 99%;
    }
    .sl_m3{
        top: 451px;
        right: -14px;
    }
    .sl_m3 img {
        max-width: 95%;
    }
    .f3 .sl_m3 span {
        bottom: 88px;
        right: 98px;
    }
    .f4 .sl_m3 span {
        bottom: 91px;
        right: 65px;
    }
    .sp1 .swiper-slide figure img {
        width: calc(100% - 16px);
        height: 429px;
        box-shadow: 28px 29px 0 #cf0023;
    }
    .sp1 .swiper-slide figure img {
        height: 350px;
    }
    .sp_m {
        padding-bottom: 100px;
    }
    .full{
        position: relative;
    }
    .but2{
        position: static;
    }
    .m_image{
        padding: 0 10px;
        box-sizing: border-box;
    }
    .m_image img {
        width: 388px;
    }
    
    #site{
        display: none;
    }
    .full .row p{
        margin-bottom: 50px;
    }
    .f_l img {
        margin-bottom: 25px;
    }
    .but2 .prev {
        top: 682px;
        z-index: 10;
    }
    .but2 .next{
        top: 682px;
        z-index: 10;
    }
    .t_more {
        top: 136px;
        right: 0px;
    }
}


@media screen and (max-width:460px) {
    #logo img{
        width: 90%;
    }
    .mo_sns ul li:nth-child(1){
        margin-left: 10px;
    }
    .mo_sns ul li img{
        width: 40px;
    }
    .mo_sns ul li{
        margin-right: 0px;
    }
    #logo{
        margin-left: 0px;
    }
    .f1 {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .sl_l h1 {
        font-size: 54px;
    }
    .sl_l p:nth-child(2) {
        font-size: 22px;
    }
    .sl_l p:nth-child(3) {
        font-size: 22px;
    }
    .sl_l ul li{
        text-indent: 10px;
    }
    .sl_m {
        top: 373px;
        left: -41px;
    }
    .sw1_btn{
        top: 818px;
        margin-left: 10px;
    }
    .sl_m2 {
        top: 540px;
    }
    .sl_m2 img {
        max-width: 100%;
    }
    .sl_m img {
        width: 107%;
        height: auto;
    }
    .sl_m span {
        right: 272px;
        bottom: 43px;
    }
    .f2 .sl_m2 span {
        bottom: 11px;
        right: 58px;
    }
    .f3 .sl_m3 span {
        bottom: 61px;
        right: 7px;
    }
    .sl_m3 img {
        max-width: 98%;
    }
    .sl_m3 {
        top: 444px;
        right: 23px;
    }
    .ct_b a ul li:hover img{
        transform: scale(1);
        transition: 0s;
     }
     .ct_b .swiper-slide:nth-child(1) a ul li:hover img{
        transform: rotate(10deg) scale(1);
        transition: 0s;
     } 
     .ct_b .swiper-slide:nth-child(2) a ul li:hover img{
        transform: rotate(32deg) scale(1);
        transition: 0s;
     } 
    .sp_up {
        width: calc(100% - 21px);
    }
    .sp1 .swiper-slide figure img {
        height: 322px;
    }

    .im_b {
        font-size: 18px;
        left: 33px;
    }
    .im_t {
        font-size: 28px;
        left: 33px;
    }
    .m_image img {
        width: 380px;
    }
    .imgg {
        left: 9%;
    }
    .ov_text{
        display: none;
    }
    .mb_navi_wrap > ul > li:nth-child(2) > a, .mb_navi_wrap > ul > li:nth-child(3) > a{
        background: none;
    }
    .t_more {
        top: 64px;
    }
    .nextbutton, .prevbutton{
        display: block;
     }
     .swiper-button-next, .swiper-button-prev {
        top: var(--swiper-navigation-top-offset, 42%);
     }
     .ne, .pre{
        display: block;
     }
     .gg_b ul li img {
        width: 62%;
     }
     .gg_b .swiper-slide{
        text-align: center;
     }
     .swiper-button-next:after, .swiper-button-prev:after{
        display: none;
     }
     .but2 .prev {
        top: 590px;
    }
    .but2 .next{
        top: 590px;
    }
    #sh{
        font-size: 16px;
    }
    .b_t h2 {
        font-size: 58px;
    }
    .b_t p {
        font-size: 20px;
    }
    .sns {
        margin-bottom: 45px;
    }
    .foo ul{
    justify-content: center;
    }
    .foo p{
        text-align: center;
    }
    .foo p:nth-child(2){
        display: none;
    }
   
}

@media screen and (max-width: 402px) {
    .sl_m3 {
        top: 515px;
        right: 1px;
    }
    .sl_m3 img {
        max-width: 89%;
    }
    .sw1_btn {
        top: 808px;
    }
    .c_t {
        margin-bottom: 117px;
    }
    .ct_p p{
        top: 50px;
    }

    .full .row p {
        margin-left: 10px;
        margin-right: 10px;
    }
    .sp_up {
        width: calc(100% - 20px);
    }
    .sp_b {
        top: -29px;
    }
    .sp_m {
        padding-bottom: 44px;
    }
    .sp1 .swiper-slide figure img {
        box-shadow: 22px 18px 0 #cf0023;
    }
    .sp1 .swiper-slide figure img {
        height: 304px;
    }
    
    #sh {
        font-size: 14px;
    }
    .im_t {
        font-size: 25px;
        left: 18px;
    }
    .im_b {
        font-size: 18px;
        left: 18px;
    }
    .m_image img {
        width: 346px;
    }
    .m_image ul li {
        font-size: 18px;
    }
    .but2 .prev, .but2 .next {
        top: 563px;
    }
    .gg_b ul li img {
        width: 66%;
    }
    .gg_b ul li img {
        height: 283px;
    }
}