/*body, html{ overflow-x: hidden; }*/
.inner{ width: 1640px; margin: 0 auto; }


/* 공통 */
.go_btn{ display:flex; }
.go_btn a{ display:flex; align-items: center; height: 48px; padding: 0 34px; border-radius: 70px; background-color: #1E6FC9; gap: 15px; transition: background .3s; }
.go_btn a:hover{  background-color: #1483FF; }


.go_btn a strong{ font-size: 18px; font-weight: 600; color: #fff; display: block;  }


/* 메인비주얼 */
.visual{ height: 100vh; width: 100%; position: relative; }
.visual .bg_video{ width: 100%; height: 100%; position: relative; overflow: hidden; }
.visual .bg_video:after{ content:""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; z-index: 1; }
.visual .bg_video .videobcg{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.visual .main_copy{ width: 100%; text-align: center; align-items: center; flex-flow: column; gap: 20px; justify-content: center; display:flex; z-index: 5; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.visual .main_copy p{ font-size: 22px; font-weight: 300; color: #fff; }
.visual .main_copy strong{ font-size: 60px; color:#FFFFFF; font-weight: 600; }

.visual .sc{ position: absolute; left: 50%; bottom: 60px; transform: translate(-50%,0); z-index: 2; display:flex; align-items: center; gap: 20px; flex-flow: column; }
.visual .sc .icon{  width: 20px; height: 32px; border: 1px solid #FFFFFF; border-radius: 60px; position: relative; }
.visual .sc .icon span{ display: block; width: 6px; height: 6px; border-radius: 50%; background-color: #FFFFFF; position: absolute; left: 50%; top: 7px; transform: translate(-50%,0); animation: sc ease-in-out 1s infinite; }

#main .main_tab { margin-top: 20px; }
#main .main_tab ul{ display:flex; }
#main .main_tab ul li{ width: 16.666666%; position: relative; }
#main .main_tab ul li:after{ content:""; display: block; width: 1px; height: 90px; background-color: #E8ECEF; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); }
#main .main_tab ul li:last-child:after{ display: none; }
#main .main_tab ul li a{ display:flex; align-items: center; text-align: center; flex-flow: column; gap: 8px; height: 190px; justify-content: center; }
#main .main_tab ul li a i img{ mix-blend-mode: multiply; }

#main .main_tab ul li:before{ content:""; width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.8); background-color: #F2F5F8; border-radius: 12px; z-index: -1; opacity: 0; transition: transform .4s, opacity .4s; }
#main .main_tab ul li:hover:before{ transform: translate(-50%,-50%) scale(1); opacity: 1; }
#main .main_tab ul li a strong{ font-size: 18px; color:#222222; font-weight: 500; }



/* 메인 공통 */
#main .m_tit { display:flex; flex-flow: column; gap: 20px; }
#main .m_tit > em{ font-size: 18px; font-weight: 700; color:#1E6FC9; }
#main .m_tit > strong{ font-size: 40px; line-height: 1.3em; color:#222222; font-weight: 700; letter-spacing: -0.02em; }
#main .m_tit > strong sup{ font-size: 30px; transform: translateY(-15px); display: inline-block; }


#main .m_tit2 > strong{ font-size: 52px; line-height: 1.3em; font-weight: 400; color:#273541; letter-spacing: -0.04em; }
#main .m_tit2 > strong b{ font-weight: 600; }

#main .con_w{ display:flex; flex-flow: column; gap: 160px; margin-bottom: 160px; }


/* con02 */
#main .con02 .m_tit{ text-align: center; }
#main .con02 .list{ margin-top: 60px; }
#main .con02 .list ul{ display:flex; gap: 40px; }
#main .con02 .list ul li{ width: 25%; }
#main .con02 .list ul li .img{ overflow: hidden; border-radius: 12px; position: relative; }
#main .con02 .list ul li .img img{ display: block; width: 100%; transition: transform .4s; }
#main .con02 .list ul li .txt{ margin-top: 20px; display:flex; flex-flow: column; gap: 15px; }
#main .con02 .list ul li .txt strong{ font-size: 24px; font-weight: 700; color: #222222; }
#main .con02 .list ul li .txt p{ font-size: 20px; line-height: 1.6em; color:#6B6B6B; word-break: keep-all; }
#main .con02 .list ul li .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(12,98,193,0.8); display:flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s; z-index: 1; }
#main .con02 .list ul li .hover .go_b{ display:flex; align-items: center; height: 48px; border-radius: 70px; background-color: #fff; width: 105px; text-align: center; justify-content: center; position: relative; transition: width .4s, padding .4s; }
#main .con02 .list ul li .hover .go_b i{ position: absolute; right: 50%; top: 50%; transform: translate(50%,-50%); transition: transform .4s, right .4s; }
#main .con02 .list ul li .hover .go_b strong{ font-size: 18px; font-weight: 600; color: #1E6FC9; }

#main .con02 .list ul li a:hover .hover{ opacity: 1; }
#main .con02 .list ul li a:hover .hover .go_b{ width: 160px; padding: 0 32px; padding-right: 50px; }
#main .con02 .list ul li a:hover .hover .go_b i{ transform: translate(0,-50%); right: 30px; }
#main .con02 .list ul li a:hover .img img{ transform: scale(1.1); }



/* con03 */

.main_visual{width:100%;position: relative;z-index: 3; height: 860px; background: #fff; padding: 0; padding-top: 0; }
.main_visual .main_slider{ height:100%;overflow: hidden; position: relative;}
.main_visual .main_slider .slide_box{ overflow: hidden;width:100%;height:100%; position: relative; background-color: #fff; }
.main_visual .main_slider .slide_box > div{ overflow: hidden;height:inherit;position: absolute;left:0;top:0;right:0; z-index: 3; overflow: hidden;
width: 100%; height: 100%;
opacity:0;
}
.main_visual .main_slider .slide_box > div{
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.main_visual .main_slider .slide_box .main_img{ position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; width: 100%; height: 100%; border-radius: 10px;
-moz-transition: all 8s ;
-webkit-transition: all 8s;
-o-transition: all 8s;
-ms-transition: all 8s ;
transition: all 8s ;
}

.main_visual .main_slider .slide_box .main_img #videobcg{
display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}


.main_visual .main_slider .slide_box .main_img .you_wrap{ position: relative;
    min-width: 100%;
    width: 100%;
    background-size: cover;
    pointer-events: none;
    height: auto;
    overflow: hidden;
	padding-top: 56.25%;
}

.main_visual .main_slider .slide_box .main_img .you_wrap:after{ content:""; width: 100%; height: 100px; display: block; position: absolute; left: 0; top: 0; z-index: 10; backdrop-filter: blur(20px); }

.main_visual .main_slider .slide_box .main_img .you_wrap iframe{     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover; width: 100% !important; }


.main_visual .main_slider .slide_box .main_img img{ display: block; min-width: 100%;  max-width: auto;height: 100%; position: absolute; left: 50%; transform: translate(-50%,-50%) scale(1.1); top: 50%;  transition: transform 5s; }
.main_visual .main_slider .slide_box div.on .main_img img{ transform: translate(-50%,-50%) scale(1);}

.main_visual .main_slider .slide_box .in_obj{text-align: left; top:0%; width: 100%; z-index: 9}
.main_visual .main_slider .slide_box .in_obj:after{content: ''; display: block}
.main_visual .main_slider .slide_box .in_obj .wrap_t{margin-bottom: 25px;}
.main_visual .main_slider .slide_box div div.wrap_tit{display: block;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
transition-delay: 0.6s;}
.main_visual .main_slider .slide_box div.on div.wrap_tit{
    opacity: 1
}



.main_visual .main_slider .slide_box > div.on{ z-index: 5; opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}


@keyframes sc {
	0%{
		height: 0;
	}
	100%{
		height: 100%;
	}
}




/*효과*/

.main_visual .box.on .dim{opacity: 0.1;transition: 1.5s}
.main_visual .box1.on .dim{opacity: 0.3}
.main_visual ul li{overflow: hidden}
.main_visual ul li strong{display: block;transform: translateY(100%);}
.main_visual .box.on ul li strong{transform: translateY(0%);transition: transform 1.4s}
.main_visual .box.on ul li:nth-child(1) strong{transition-delay: 0.2s}
.main_visual .box.on ul li:nth-child(2) strong{transition-delay: 0.4s}
.main_visual .box.on ul li:nth-child(3) strong{transition-delay: 0.6s}
.main_visual .box.on ul li:nth-child(4) strong{transition-delay: 0.8s}
.main_visual .box.on ul li:nth-child(5) strong{transition-delay: 1s}
.main_visual .txt, .main_visual .txt2{overflow: hidden}
.main_visual .txt p{display: block;transform: translateY(100%);}
.main_visual .box.on .txt p{transform: translateY(0%);transition: transform 1.4s;transition-delay: 1.2s}
.main_visual .txt2 span{display: block;transform: translateY(100%);}
.main_visual .box.on .txt2 span{transform: translateY(0%);transition: transform 1.4s;transition-delay: 2.7s}




#main .main_visual .in_inner .in_obj strong{ font-size: 120px; line-height: 1em; font-weight: 800; color:#fff; display: block; }
#main .main_visual .in_inner .in_obj p{ font-size: 24px; line-height: 36px; color: #fff; margin-top: 30px; }
#main .main_visual .progress{ position: relative; width: 100%; height: 2px; background-color: rgba(255,255,255,0.25); margin-top: 40px; }
#main .main_visual .progress .on{ display: block; width: 0; height: 100%; background-color: #FFCC00; position: absolute; left: 0; top: 0; }
#main .main_visual .main_slider .slide_box div.on .progress .on{ width: 100%; transition: width 6s linear; }

.main_visual .main_slider .slide_box div .in_obj strong{
  transform: translate3d(0px, 200%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 10deg); transition: transform 1s; transform-style: preserve-3d;
}

#main .main_visual .in_inner .in_obj .clip2 strong{ transition-delay: .2s; }

.main_visual .main_slider .slide_box div.on .in_inner .in_obj strong{
  transform: translate3d(0px, 0, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0);
}

#main .main_visual .in_inner .in_obj p{ filter: blur(10px); opacity: 0; transition: filter 1.2s, opacity 1s; transition-delay: .6s; }
#main .main_visual .main_slider .slide_box div.on .in_inner .in_obj p{ filter: blur(0); opacity: 1; }

#main .main_visual .in_inner .clip{ overflow: hidden; position: relative;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  position: relative;
  overflow: hidden;
}

#main .main_visual .in_inner .wraps{ position: relative; }
#main .main_visual .thum_wrap { position: absolute; right: 0; bottom: -40px; z-index: 5; }
#main .main_visual .thum_wrap .thum li{ float: left; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; margin-right: 10px; cursor: pointer; }
#main .main_visual .thum_wrap .thum li:first-child{ margin-left: 0; }
#main .main_visual .thum_wrap .thum li.on{ border-color: #FFCC00; background-color: #FFCC00; }

#main .main_visual .thum_wrap .thum li.last{ display: none; }


#main .main_visual .box2 .thum_wrap .thum li:nth-child(2){ border-color: #FFCC00; background-color: #FFCC00; }
#main .main_visual .box3 .thum_wrap .thum li:nth-child(3){ border-color: #FFCC00; background-color: #FFCC00; }

#main .con_w{ padding-top: 160px; }

/* con01 */
#main .con01 .wraps .p_tab{ width: 270px; }
#main .con01 .wraps{ display:flex; gap: 200px; margin-top: 50px; }

#main .con01 .wraps .p_tab ul{ display:flex; gap: 12px; flex-flow: column; }
#main .con01 .wraps .p_tab ul li button{ display:flex; align-items: center; padding: 5px; padding-right: 35px; gap :12px; border-radius: 70px; transition: background .3s; }
#main .con01 .wraps .p_tab ul li button strong{font-size: 20px; font-weight: 700; color: #222;letter-spacing: -0.02em; white-space:  nowrap; transition: color .3s; }
#main .con01 .wraps .p_tab ul li button .arrow{ margin-left: 18px; opacity: 0; transition: opacity .3s; }

#main .con01 .wraps .p_tab ul li.on button .arrow{ opacity: 1; }

#main .con01 .wraps .p_tab ul li:nth-child(1).on button{ background-color: #EAF5D9; }
#main .con01 .wraps .p_tab ul li:nth-child(2).on button{ background-color: #EFE8FB; }
#main .con01 .wraps .p_tab ul li:nth-child(3).on button{ background-color: #DEEBF8; }
#main .con01 .wraps .p_tab ul li:nth-child(4).on button{ background-color: #FBE8E8; }
#main .con01 .wraps .p_tab ul li:nth-child(1).on button strong{ color: #598E00; }
#main .con01 .wraps .p_tab ul li:nth-child(2).on button strong{ color: #9973DC; }
#main .con01 .wraps .p_tab ul li:nth-child(3).on button strong{ color: #1E6FC9; }
#main .con01 .wraps .p_tab ul li:nth-child(4).on button strong{ color: #F34F4F; }

#main .p_list{ overflow: hidden; }
#main .p_list .swiper-wrapper{ height: auto; }
#main .p_list .swiper-slide{ width: auto; height: auto; }
#main .p_list .swiper-slide a{ display: flex; flex-flow: column; gap: 25px; border-radius: 12px; border: 1px solid #C8CDD2; overflow: hidden; height: 410px; position: relative; }
#main .p_list .swiper-slide a .img img{ display: block; width: 100%; }
#main .p_list .swiper-slide a .txt{ padding: 0 35px; }
#main .p_list .swiper-slide a .txt .t_top{ display:flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
#main .p_list .swiper-slide a .txt .t_top strong{ font-size: 24px; font-weight: 700; color:#222222; letter-spacing: -0.02em; }
#main .p_list .swiper-slide a .txt .t_top .cate{ display:flex; height: 31px; background-color: #E8F1FB; border-radius: 70px; padding: 0 14px; align-items: center; font-size: 15px; font-weight: 600; color:#1E6FC9; }
#main .p_list .swiper-slide a .txt .t_info{ display:flex; flex-flow: column; gap: 16px; }
#main .p_list .swiper-slide a .txt .t_info dl{ display:flex; justify-content:  space-between; }
#main .p_list .swiper-slide a .txt .t_info dl dt{ font-size: 16px; color: #48555B; font-weight: 600; letter-spacing: -0.02em;}
#main .p_list .swiper-slide a .txt .t_info dl dd{ font-size: 16px; color: #48555B; font-weight: 400; letter-spacing: -0.02em;}

#main .p_list .swiper-slide a .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(12,98,193,0.8); display:flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s; z-index: 1; }
#main .p_list .swiper-slide a .hover .go_b{ display:flex; align-items: center; height: 48px; border-radius: 70px; background-color: #fff; width: 105px; text-align: center; justify-content: center; position: relative; transition: width .4s, padding .4s; }
#main .p_list .swiper-slide a .hover .go_b i{ position: absolute; right: 50%; top: 50%; transform: translate(50%,-50%); transition: transform .4s, right .4s; }
#main .p_list .swiper-slide a .hover .go_b strong{ font-size: 18px; font-weight: 600; color: #1E6FC9; }

#main .p_list .swiper-slide a:hover .hover{ opacity: 1; }
#main .p_list .swiper-slide a:hover .hover .go_b{ width: 160px; padding: 0 32px; padding-right: 50px; }
#main .p_list .swiper-slide a:hover .hover .go_b i{ transform: translate(0,-50%); right: 30px; }

#main .p_list .swiper-slide a .txt .t_md { margin-top: -16px; margin-bottom: 16px; }
#main .p_list .swiper-slide a .txt .t_md p{ font-size: 18px; font-weight: 500; color:#3C4043; letter-spacing: -0.02em; }

#main .p_list{ display: none; }
#main .pl_01{ display: block; }

/* con03 */
#main .con03{ position: relative; }
#main .con03 > .inner{ position: absolute; left: 0; right: 0; margin: 0 auto; top: 40%; transform: translate(0,-50%); z-index: 5; }
#main .con03 .m_tit{ padding-left: 120px; }
#main .con03 .m_tit strong{ color: #fff; }

#main .con03 .control{ position: absolute; left: 0; bottom: 140px; z-index: 5; width: 100%; }
#main .con03 .control .inner{ padding-left: 120px; display:flex; align-items: center; gap: 40px; }

#main .con03 .control .stop_btn{width: 60px;height: 60px;background: url(/img/main/slide_pause.png); border: 2px solid #fff;border-radius: 50%; background-size: 100% 100%; }
#main .con03 .control .stop_btn.play{background: url(/img/main/slide_play.png); background-size: 100% 100% !important}

.thum{ display:flex; align-items: center; gap: 40px; }
.thum li{ cursor: pointer; }
.thum li i{display: block;position: relative;width: 215px;height: 2px;background: rgba(255,255,255,0.5);margin-bottom: 14px;}
.thum li i:after{content: '';display: block;width: 0%;height: 100%;background: #fff;}
.thum li.on i:after{width: 100%;transition: 8s linear; }
.thum li span{font-size: 22px; color: #fff;font-weight: 600; opacity: .7; }
.thum li.on span{ opacity: 1; }


.thum li.last{display: none;}


#main .con03 .box > .inner{ position: absolute; left: 0; right: 0; position: relative; height: 100%; display:flex; justify-content: flex-end; align-items: center; z-index: 10; padding-right: 120px; }
#main .con03 .box .txt_box{ width: 480px; height: calc(100% - 200px); border-radius: 12px; background-color: rgba(255,255,255,0.9);  padding: 70px 50px; display:flex; flex-flow: column; position: relative; transform: translateX(50px); opacity: 0; transition: transform 1s, opacity 1s; }
#main .con03 .box.on .txt_box{ transform: translateX(0); opacity: 1; }

#main .con03 .box .txt_box .after_box{ display: block; width: 100%; height: 100%; position: absolute; right: -20px; top: 0; transform: translateX(150%) scale(1); background-color: rgba(255,255,255,0.2); border-radius: 12px; backdrop-filter: blur(30px); z-index: -1; transition: transform 1s, opacity 1s; opacity: 0; transition-delay: .2s; }
#main .con03 .box.on .txt_box .after_box{ transform: translateX(100%) scale(.9); opacity: 1; }

#main .con03 .box .txt_box > strong{ font-size: 40px; font-weight: 700; color:#222222; letter-spacing: -0.02em; margin-bottom: 20px; display: block; }
#main .con03 .box .txt_box > p{ font-size: 20px; letter-spacing: -0.02em; color:#1E6FC9; margin-bottom: 40px; }
#main .con03 .box .txt_box ul{ display:flex; flex-flow: column; gap: 15px; }
#main .con03 .box .txt_box ul li{ padding-left: 12px; position: relative; font-size: 18px; line-height: 1.5em; color:#606060; letter-spacing: -0.02em; }
#main .con03 .box .txt_box ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #606060; position: absolute; left: 0; top: 11px; }

#main .con03 .box .txt_box .go_btn{ position: absolute; left: 50px; bottom: 70px; }

/* con04 */
#main .con04 .s_slide{ margin-top: 50px; }
#main .con04 .swiper-wrapper{ transition-timing-function: linear; }
#main .con04 .swiper-slide{ width: auto; }
#main .con04 .m_tit2 .go_btn{ margin-top: 40px; }
#main .con04 .s_slide .swiper-slide a{ overflow: hidden; display: block; position: relative; border-radius: 12px; transition: transform .5s; }
#main .con04 .s_slide .swiper-slide a:after{ content:""; display: block; width: 100%; height: 50%; background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); opacity: .3; position: absolute; left: 0; bottom: 0; transition: opacity .5s; }
#main .con04 .s_slide .swiper-slide a .img img{ display: block; width: 100%; }
#main .con04 .s_slide .swiper-slide a .txt{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 45px 35px; padding-top: 0; display:flex; flex-flow: column; gap: 12px; transform: translateY(50px); transition: transform .5s; z-index: 2; }
#main .con04 .s_slide .swiper-slide a .txt i{ display: block; margin-bottom: 8px; }
#main .con04 .s_slide .swiper-slide a .txt strong{ font-size: 26px; color:#FFFFFF; font-weight: 600; letter-spacing: -0.02em; }
#main .con04 .s_slide .swiper-slide a .txt p{ font-size: 18px; color:#FFFFFF; font-weight: 400; letter-spacing: -0.02em; }
#main .con04 .s_slide .swiper-slide a .txt svg{ display: block; margin-top: 18px; opacity: 0; transition: opacity .5s; }

#main .con04 .s_slide .swiper-slide a:hover{ transform: translateY(-12px); }
#main .con04 .s_slide .swiper-slide a:hover:after{ opacity: .6; }
#main .con04 .s_slide .swiper-slide a:hover .txt{ transform: translateY(0); }
#main .con04 .s_slide .swiper-slide a:hover .txt svg{ opacity: 1; }


/* .con05 */
#main .con05 { padding: 160px 0; background-color: #F1F6FB; }
#main .con05 .m_tit2 .go_btn{ margin-top: 40px; }
#main .con05 .r_list { margin-top: 50px; }
#main .con05 .r_list .swiper-slide{ height: auto; }
#main .con05 .r_list{ height: 880px; }
#main .con05 .r_list .swiper-slide a{ display: block; padding :40px; border-radius: 12px; background-color: #fff; border: 1.5px solid #D9DDE1; box-shadow: 0 0 60px rgba(163,185,204,0.2); transition: border .5s, transform .5s; }

#main .con05 .r_list .swiper-slide a .top{ display:flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
#main .con05 .r_list .swiper-slide a .top .cate span{ display: flex; align-items: center;  height: 31px; border-radius: 17px; background-color: rgba(41,113,239,0.1); padding: 0 15px; color: 15px; color:#2971EF; font-weight: 600; }
#main .con05 .r_list .swiper-slide a .top .best{ display:flex; align-items: center; gap: 8px; }
#main .con05 .r_list .swiper-slide a .top .best strong{ font-size: 16px; color:#2971EF; font-weight: 600; }
#main .con05 .r_list .swiper-slide a .txt{ display:flex; flex-flow: column; gap: 20px; }
#main .con05 .r_list .swiper-slide a .txt strong{ display: block; font-size: 24px; line-height: 1.5em; color: #333333; letter-spacing: -0.02em; 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#main .con05 .r_list .swiper-slide a .name{ margin-top: 50px; }
#main .con05 .r_list .swiper-slide a .name p{ font-size: 16px; color:#A6ADB4; }

#main .con05 .r_list .swiper-slide a .txt p{ display: block; font-size: 17px; line-height: 1.5em; color: #6A6A6A; letter-spacing: -0.02em; word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

#main .con05 .r_list .swiper-slide a:hover{ border-color: #2971EF; transform: translateY(-12px); }

#main .con05 .swiper-pagination{ position :static; margin-top: 20px; display: none; }
#main .con05 .swiper-pagination .swiper-pagination-bullet-active{ background-color: #1E6FC9; }

/* .con06 */
#main .con06 .m_tit2 .go_btn{ margin-top: 40px; }
#main .con06 .n_list{ margin-top: 50px; }
#main .con06 .n_list .swiper-slide a{ display: block; border-radius: 12px; background-color: #EEF2F6; padding: 35px; transition: background .4s, transform .4s; }
#main .con06 .n_list .swiper-slide a .txt{ display: flex; flex-flow: column; gap: 10px; width: 100%;  }
#main .con06 .n_list .swiper-slide a .txt .cate{ display:flex; }
#main .con06 .n_list .swiper-slide a .txt .cate span{ display: flex; align-items: center;  height: 31px; border-radius: 17px; background-color: rgba(41,113,239,0.1); padding: 0 15px; font-size: 15px; color:#2971EF; font-weight: 600; transition: background .4s, color .4s; }

#main .con06 .n_list .swiper-slide a .txt strong{ display: block; font-size: 20px; line-height: 1.5em; color: #333333; letter-spacing: -0.02em; 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .4s;
}
#main .con06 .n_list .swiper-slide a .txt p{ margin-top: 60px; font-size: 15px; color:#97A1AB;  transition: color .4s; }

#main .con06 .n_list .swiper-slide a:hover{ background-color: #2993EF; transform: translateY(-12px); }
#main .con06 .n_list .swiper-slide a:hover .txt .cate span{ background-color: #4BACFF; color: #fff; }
#main .con06 .n_list .swiper-slide a:hover .txt strong{ color: #fff; }
#main .con06 .n_list .swiper-slide a:hover .txt p{ color: #B7DDFF; }

#main .con06 .swiper-pagination{ position :static; margin-top: 20px; display: none; }
#main .con06 .swiper-pagination .swiper-pagination-bullet-active{ background-color: #1E6FC9; }



#main .m_tit > em{ transition: transform 1.2s, opacity 1.2s; transform: translateY(40px); opacity: 0; }
#main .m_tit > strong{ transition: transform 1.2s, opacity 1.2s; transform: translateY(40px); opacity: 0; transition-delay: .2s; }

#main .on .m_tit > em{ transform: translateY(0); opacity: 1; }
#main .on .m_tit > strong{ transform: translateY(0); opacity: 1; }

#main .con01 .wraps{ transition: transform 1.2s, opacity 1.2s; transform: translateY(40px); opacity: 0; transition-delay: .4s; }

#main .con01.on .wraps{ transform: translateY(0); opacity: 1; }


#main .m_tit2 > strong{ transition: transform 1.2s, opacity 1.2s; transform: translateY(40px); opacity: 0; display: block; }
#main .m_tit2 > .go_btn{ transition: transform 1.2s, opacity 1.2s; transform: translateY(40px); opacity: 0; transition-delay: .2s; }

#main .on .m_tit2 > strong{ transform: translateY(0); opacity: 1; }
#main .on .m_tit2 > .go_btn{ transform: translateY(0); opacity: 1; }



.visual .main_copy strong{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; transition-delay: .2s; }

.visual.on .main_copy strong{ transform: translateY(0); opacity: 1; }

.visual .main_copy p{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }

.visual.on .main_copy p{ transform: translateY(0); opacity: 1; }


#main .con02 .list ul li{ transition: transform 1.2s, opacity 1.2s; opacity: 0; transition-delay: .4s; }
#main .con02 .list ul li:nth-child(odd){ transform: translateY(30px); }
#main .con02 .list ul li:nth-child(even){ transform: translateY(-30px); }

#main .con02.on .list ul li{ opacity: 1; transform: translateY(0) !important; }

@keyframes sc{
	0%{
		transform: translate(-50%,0);
	}
	50%{
		transform: translate(-50%,10px);
	}
	100%{
		transform: translate(-50%,0)
	}
}



	.visual .bg_video .mo{ display: none !important; }
	.visual .bg_video .pc{ display: block !important; }



@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}

@media (max-width: 1800px){
	#header{ padding: 0 30px; }
	#header .gnb{ padding-left: 220px; }
	#header.ons .gnb ul{ gap: 90px; }
}


@media (max-width: 1660px){
	.inner{ width: 100%; padding: 0 20px; }
	#header .gnb > ul > li > a{ font-size: 15px; }
	#header .gnb > ul > li > ul > li > a{ font-size: 14px; }
	#header .gnb > ul > li > ul > li > .sub_n2 > li > a{ font-size: 14px; }
	.go_btn a{ height: 40px; padding: 0 24px; gap: 8px; }
	.go_btn a strong{ font-size: 15px; }
	#header .right_btn .login a{ padding: 0 18px; font-size: 14px; }
	#header .right_btn{ gap: 10px; }
	#footer .right_t{ right: 20px; }
}

@media (max-width: 1460px){
	#header .gnb{ display: none; }
	#header .right_btn{ right: 70px; }
	#header .all_menu_b{ right: 0; display: block; }
	#header .all_menu_b span{ background-color: #fff; }
	#header.ac .all_menu_b span{ background-color: #222; }
	#header{ height: 90px; }
	#quick{ right: 20px; bottom: 20px; gap: 14px; }
	#main .main_tab ul li a i img{ width:60px; height: 60px; }
	#main .main_tab ul li a strong{ font-size: 14px; }
	#main .main_tab ul li a{ height: 150px; }
	#main .m_tit > strong{ font-size: 28px; }
	#main .m_tit{ gap: 10px; }
	#main .m_tit > em{ font-size: 16px; }
	#main .con01 .wraps .p_tab ul li button{ gap: 6px; padding: 4px; padding-right: 20px; }
	#main .con01 .wraps .p_tab ul li button svg:nth-child(1){ width: 40px; height: auto; }
	#main .con01 .wraps .p_tab ul li button .arrow{ margin-left: 8px; }
	#main .con01 .wraps .p_tab ul li button .arrow{ width: 6px; height: auto; }
	#main .con01 .wraps .p_tab ul li button strong{ font-size: 16px; }
	#main .con01 .wraps{ gap: 100px; }
	#main .con_w{ gap: 120px; margin-bottom: 120px; padding-top: 120px; }
	#main .con02 .list ul{ gap: 20px; }
	#main .con02 .list ul li .txt strong{ font-size: 20px; }
	#main .con02 .list ul li .txt p{ font-size: 16px; line-height: 1.5em; }
	#main .con02 .list ul li .txt{ gap: 8px; }
	#main .con02 .list ul li .hover .go_b strong{ font-size: 15px; }
	#main .con02 .list ul li a:hover .hover .go_b{ width: 140px; padding: 0 15px; padding-right: 30px; }
	#main .con03 .box .txt_box > strong{ font-size: 26px; margin-bottom: 10px; }
	#main .con03 .box .txt_box > p{ font-size: 16px; margin-bottom: 20px; }
	#main .con03 .box .txt_box ul li{ font-size: 16px; padding-left: 10px; word-break: keep-all; }
	#main .con03 .box .txt_box ul li:after{ top: 9px; }
	#main .con03 .box .txt_box ul{ gap: 8px; }
	#main .con03 .box .txt_box{ width: 370px; padding: 40px; }
	#main .con03 .box .txt_box .go_btn{ left: 40px; bottom: 40px; }
	.thum{ gap: 20px; }
	.thum li i{ width: 150px; margin-bottom: 6px; }
	.thum li span{ font-size: 16px; }
	#main .con03 .control .inner{ gap: 20px; padding-left: 60px; }
	#main .con03 .m_tit{ padding-left: 60px; }
	#main .con04 .m_tit2 .go_btn{ margin-top: 20px; }
	#main .m_tit2 > strong{ font-size: 30px; }
	#main .con04 .s_slide .swiper-slide a .img img{ width: 300px; }
	#main .con04 .s_slide .swiper-slide a .txt{ padding: 30px; padding-top: 0; gap: 8px; }
	#main .con04 .s_slide .swiper-slide a .txt strong{ font-size: 20px; }
	#main .con04 .s_slide .swiper-slide a .txt p{ font-size: 16px; word-break: keep-all; }
	#main .con05{ padding: 120px 0; }
	#main .con05 .r_list .swiper-slide a .txt strong{ font-size: 18px; }
	#main .con05 .r_list .swiper-slide a .txt p{ font-size: 15px; }
	#main .con05 .r_list .swiper-slide a .txt{ gap: 8px; }
	#main .con05 .r_list .swiper-slide a .top{ margin-bottom: 10px; }
	#main .con05 .r_list .swiper-slide a .name{ margin-top: 30px; }
	#main .con05 .r_list .swiper-slide a .name p{ font-size: 15px; }
	#main .con05 .r_list .swiper-slide a{ padding: 30px; }
	#main .con05 .r_list .swiper-slide a .top .cate span{ font-size: 13px; height: 25px; padding: 0 10px; }
	#main .con05 .r_list .swiper-slide a .top .best strong{ font-size: 13px; }
	#main .con05 .r_list .swiper-slide a .top .best i img{ width: 24px; }
	#main .con06 .m_tit2 .go_btn{ margin-top: 20px; }
	#main .con06 .n_list .swiper-slide a{ padding: 28px; }
	#main .con06 .n_list .swiper-slide a .txt strong{ font-size: 18px; }
	#main .con06 .n_list .swiper-slide a .txt .cate span{ font-size: 13px; height: 25px; padding: 0 10px; }
	.visual .main_copy strong{ font-size: 48px; }
	.visual .main_copy p{ font-size: 18px; }
	.visual .main_copy{ gap: 12px; }
	#footer .f_logo svg{ width: 180px; height: auto; }
	#footer .sns_list ul{ gap: 6px; }
	#footer .sns_list ul li a{ display: block; }
	#footer .sns_list ul li svg{ width: 40px; height: auto; }
	#footer .right_t{ gap: 20px; }
	#footer .right_t .family button{ width: 170px; padding-left: 16px; font-size: 15px; padding-right: 16px; height: 48px; }
	
	#main .con05 .r_list{ height: 600px; }
}


@media (max-width: 1300px){
	#footer .f_m { flex-flow: column; gap: 40px; }
	#footer .f_m > div{ width: 100% !important; border-right: none; border-bottom: 1px solid #DDE5EC; padding-left: 0 !important; padding-bottom: 40px; }
	#footer .f_m > div:last-child{ padding-bottom: 0; border-bottom: none; }
	#footer .f_m .number{ flex-flow: row; }
	#footer .f_m .number dl dd strong{ font-size: 24px; }
	#footer .f_m .number dl dd p{ font-size: 14px; }
	#footer .f_m .number dl dt{ font-size: 16px; }
	#footer .f_m .f_nav ul{ gap: 8px; }
	#footer .f_m .f_nav ul li a{ font-size: 14px; }
	#footer .f_m .f_info ul li dl dt{ font-size: 14px; }
	#footer .f_m .f_info ul li dl{ gap: 8px; }
	#footer .f_m .f_info ul li dl dd{ font-size: 14px; }
	#footer .f_m .f_info ul{ gap: 40px; }
	#footer .f_m .f_info { gap: 40px; }
	#footer .f_slide{ padding: 16px 0; margin-top: 60px; margin-bottom: 40px; }
	#footer .f_slide ul li img{ height: 60px; }
	#footer .f_slide ul{ height: 60px; }

}


@media (max-width: 980px){
    #footer .right_t .family ul{padding: 10px}
    #footer .right_t .family ul li a{font-size: 13px}
	.visual .sc{ gap: 10px; bottom: 40px; }
	.visual .sc svg{ width: 40px; height: auto; }
	#quick .contact button{ gap: 4px; width: 70px; height: 70px; }
	#quick .contact button i img{ width:30px; height: auto; }
	quick .join a{ gap :4px; }
	#quick .join a i img{ width:30px; height: auto; }
	#quick .join a p{ font-size: 14px; }
		#quick .contact button p{ font-size: 14px; }
	#quick .contact button i{  margin-top: -0; }
	#quick .join a{ width: 70px; height: 70px; }
	#quick .top_btn a{ width: 70px; height: 70px; }
	#main .main_tab ul li{ width: 33.33333333%; }
	#main .main_tab ul { flex-flow: wrap; position: relative; }
	#main .main_tab ul li:nth-child(3):after{ display: none; }
	#main .main_tab ul:after{ content:""; display: block ;width: 100%; height: 1px; background-color: #e8ecef; position: absolute; left: 0; top :50%; }
	#main .main_tab ul li a{ height :120px; gap: 4px; }
	#main .main_tab ul li a i img{ width: 50px; height: 50px; }
	#main .p_list .swiper-slide a .txt .t_top strong { font-size: 18px;  } 
	#main .p_list .swiper-slide a .txt .t_top .cate{ padding: 0 10px; font-size: 13px; height :24px; }
	#main .p_list .swiper-slide a .txt .t_top{ margin-bottom: 15px; }
	#main .p_list .swiper-slide a .txt .t_info{ gap: 8px; }
	#main .p_list .swiper-slide a .txt .t_info dl dt{ font-size: 13px; }
	#main .p_list .swiper-slide a .txt .t_info dl dd{ font-size: 13px; }
	#main .p_list .swiper-slide a .img img { width: 280px; } 
	#main .p_list .swiper-slide a{ gap: 18px; height: 350px; }
	#main .p_list .swiper-slide a .txt .t_md{ margin-top: -5px; margin-bottom: 10px; }
	#main .p_list .swiper-slide a .txt .t_md p{font-size: 14px; }
	#main .p_list .swiper-slide a .hover .go_b{ height: 40px; }
	#main .p_list .swiper-slide a .hover .go_b strong{ font-size: 14px; }
	#main .p_list .swiper-slide a:hover .hover .go_b { width: 140px; padding: 0 24px; padding-right: 30px; }
	#main .con02 .list ul{ flex-flow: wrap; }
	#main .con02 .list ul li{width: calc(50% - 10px); }
	#main .con03 .box .txt_box .after_box{ display: none; }
	#main .con03 > .inner{ top: 100px; transform: translate(0,0); }
	#main .con03 .control{ bottom: 100px; }
	#main .con03 .control .stop_btn{ width: 40px; height: 40px; }
	#main .con03 .box .txt_box{ width: 100%; height: 400px }
	#main .con03 .box > .inner{ padding-right: 20px; }
	#main .con_w{ gap: 80px; padding-top: 80px; margin-bottom: 80px; }
	#main .con06 .n_list .swiper-slide a .txt p{ margin-top: 30px; }
	#footer .copy{ font-size: 13px; }
	.visual .bg_video .videobcg{ height: 100%; }
	.main_visual .main_slider .slide_box .main_img .you_wrap iframe{ height: 100%; width: 100% !important; }
	.main_visual .main_slider .slide_box .main_img .you_wrap{ height: 100%; padding-top: 0; }
	#main .m_tit > strong sup{ font-size: 20px; transform: translateY(-10px); }
	#main .con05 .r_list{ height: auto; }
	
	#main .con06 .n_list{ height: 430px; }
	#main .con06 .n_list .swiper-wrapper .swiper-slide{height: auto; }
	#main .con06 .swiper-pagination{ display: block; }
	
}

@media (max-width: 640px){
	#header{ padding: 0 20px; height: 60px; }
	#header h1 a svg{ width: 120px; height: auto; }
	.go_btn a strong{ font-size: 14px; }
	.go_btn a{ heihgt: 36px; gap: 8px; padding: 0 16px; }
	#header .right_btn .login a{ font-size: 13px; padding: 0 10px; height: 32px; }
	#header .right_btn{ right: 60px; }
	#header .go_btn{ display: none; }
	.visual .main_copy p .mo_br{ display :block; }
	.visual .main_copy strong{ font-size: 28px; }
	.visual .main_copy p{ line-height: 1.5em; font-size: 15px; }
	#main .m_tit > strong{ font-size: 18px; }
	#main .con_w{ gap: 60px; margin-bottom: 60px; padding-top: 60px; }
	#main .m_tit > em{ font-size: 14px; }
	#main .con01 .wraps .p_tab ul{ gap: 6px; flex-flow: wrap; }
	#main .con01 .wraps .p_tab ul li{  }
	#main .con01 .wraps .p_tab{ width: 100%; }
	#main .con01 .wraps { flex-flow: column; }
	#main .con01 .wraps .p_tab ul li button strong{ font-size: 14px; }
	#main .con01 .wraps .p_tab ul li button{  gap: 4px; padding: 3px; padding-right: 15px; }
	#main .con01 .wraps .p_tab ul li button svg:nth-child(1){ width: 30px; }
	#main .con01 .wraps .p_tab ul{ width: 100%; }
	#main .con01 .wraps{ margin-top: 15px; gap: 20px; }
	#main .p_list{ overflow: visible; }
	#main .p_list .swiper-slide a .txt .t_info dl{ flex-flow: column; gap: 4px; }
	#main .p_list .swiper-slide a .txt{ padding: 0 20px; }
	#main .con02 .list ul{flex-flow: column; }
	#main .con02 .list ul li{ width: 100%; }
	#main .con02 .list ul li:nth-child(even){ transform: translateY(30px); }
	#main .con02 .list ul li .txt strong{font-size: 16px; }
	#main .con02 .list ul li .txt p{ font-size: 14px; }
	#main .con02 .list ul li .txt{ margin-top: 12px; gap: 4px; }
	#main .con02 .list{ margin-top: 20px; }
	#main .con03 .m_tit{ padding-left: 20px; }
	#main .con03 .box .txt_box > strong{ font-size: 18px; margin-bottom: 4px; }
	#main .con03 .box .txt_box > p{ font-size: 14px; }
	#main .con03 .box .txt_box ul li{ font-size: 13px; }
	#main .con03 .box .txt_box ul{ gap: 4px; }
	#main .con03 .box .txt_box{ padding: 20px; }
	.control{ display: none; }
	.main_visual{ height: 600px; }
	#main .con03 > .inner{ top: 60px; }
	#main .con03 .box > .inner{ margin-top: 20px;  }
	#main .con03 .box .txt_box .go_btn{ left: 20px; bottom: 20px; }
	#main .m_tit2 > strong{ font-size: 20px; }
	#main .con04 .s_slide .swiper-slide a .img img{ width: 220px; }
	#main .con04 .s_slide .swiper-slide a .txt p{ font-size: 13px; }
	#main .con04 .s_slide .swiper-slide a .txt strong{ font-size: 16px; }
	#main .con04 .s_slide .swiper-slide a .txt{ padding: 20px; gap: 4px; }
	#main .con04 .s_slide .swiper-slide a .txt i img{ width: 30px; }
	#main .con05 .m_tit2 .go_btn{margin-top: 10px; }
	#main .con05 .r_list{ margin-top: 20px; }
	#main .con05{ padding: 60px 0; }
	#main .con05 .r_list .swiper-slide a{ padding: 20px;  }
	#main .con05 .r_list .swiper-slide a .txt strong{ font-size: 16px; }
	#main .con05 .r_list .swiper-slide a .txt p{ font-size: 13px; }
	#main .con05 .r_list .swiper-slide a .name p{ font-size: 13px; }
	#main .con06 .n_list .swiper-slide a .txt strong{ font-size: 16px; }
	#main .con06 .n_list{ margin-top: 20px; }
	#main .con06 .n_list .swiper-slide a{ padding: 20px; }
	#main .con06 .n_list .swiper-slide a .txt p{ font-size: 13px; margin-top: 20px; }
	#footer .f_logo svg{ width: 100px; height: auto; }
	#footer .right_t{ position: static; }
	#footer .inner{ gap: 12px; }
	#footer .right_t{ justify-content: space-between; }
	#footer .right_t .family button{ width: 120px; padding-left: 10px; padding-right: 12px; height: 38px; font-size: 13px; }
	#footer .f_m .f_info ul{ gap: 12px; flex-flow: wrap; }
	#footer .f_m .f_info ul li{ width: calc(50% - 6px); }
	#footer .f_m .f_info ul li:nth-child(1){ width: 100%; }
	#footer .f_m .f_info{ gap: 12px; }
	#footer .f_m{ gap: 20px; }
	#footer .f_m > div{ padding-right: 0 !important; padding-bottom: 20px; }
	#footer .f_m .number{ flex-flow: column; gap: 20px; }
	#footer .f_m .number dl{ gap: 4px; }
	#footer .f_m .number dl dt{ font-size: 13px; }
	#footer .f_m .number dl dd{ font-size: 12px; }
	#footer .f_m .number dl dd strong{ font-size: 18px; }
	#footer .f_slide{ margin-top: 40px; margin-bottom: 20px; padding: 10px 0; }
	#footer .f_slide ul li img{ height: 50px; }
	#footer .f_slide ul { height: 50px; }
	#footer .copy{ font-size: 11px; }
	#quick .top_btn a{ width: 60px; height: 60px; }
	#quick .top_btn a p{ font-size: 12px; }
	#quick .join a{ width: 60px; height: 60px; }
	#quick .contact button{ width: 60px; height: 60px; }
	#footer .f_m .f_nav ul{ flex-flow: wrap; }
	
	#quick .contact button p{ font-size: 12px; }
	#quick .join a p{ font-size: 12px; }
	#quick .contact .contact_box .wraps > div{ width: 220px; padding: 20px; }
	#quick .contact .contact_box .wraps > div > strong{ font-size: 16px; }
	#quick .contact .contact_box .wraps > div > p{ font-size: 13px; }
	#quick .contact .contact_box .wraps > div > em{ font-size: 20px; }
	#quick .contact .close_b svg{ width:16px; height: auto; }
/*
	#main .con05 .r_list ul li:nth-child(2) ~ li{ display: none; }
	#main .con06 .n_list ul li:nth-child(2) ~ li{ display: none; }
*/
	#main .con03 .box .txt_box{ height: 280px; }
	#main .con03 .box .txt_box > p{ margin-bottom: 10px; }
	#main .con03 .box > .inner{ align-items: flex-end; padding-top: 0; padding-bottom: 50px; }
	#main .con03 .control{ bottom: auto; top: 130px; display: block; }
	#main .con03 .control .inner{ padding-left: 40px; gap: 6px; }
	.thum{ gap: 6px; }
	.thum li span{ font-size: 12px; }
	.thum li i{ width: 90px; }
	.main_visual .main_slider .slide_box .main_img video{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%; }
	
	#main .m_tit > strong sup{ font-size: 14px; transform: translateY(-10px); }
	
		
	.visual .bg_video .mo{ display: block !important; }
	.visual .bg_video .pc{ display: none !important; }
	
	#main .con05 .r_list .swiper-slide a { height: 237px }
	#main .con05 .r_list{ height: 500px; }
	
	
	#main .con05 .swiper-pagination{ display: block; }
	
		#main .con06 .n_list{ height: 360px; }
}