body, html{ overflow-x: hidden; }

.inner{width: 1400px; margin: 0 auto; }
.in2{ padding: 0 120px;  max-width: 1920px; margin: 0 auto; }
#footer{z-index: 4;position: relative}


.m_intro{ position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; z-index: 12; }
.m_intro .img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.m_intro .white{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.m_intro .white > div{ position: absolute; background-color: #fff; }
.m_intro .white > div:nth-child(1){ width: 400%; height: 400%; background-color: #fff; position: absolute; left: 50%; top: 2px; transform: translate(-50%,-100%); }
.m_intro .white > div:nth-child(3){ width: 400%; height: 400%; background-color: #fff; position: absolute; left: 50%; bottom: 6px; transform: translate(-50%,100%); }
.m_intro .white > div:nth-child(2){ width: 400%; height: 400%; background-color: #fff; position: absolute; left: 2px; top: 50%; transform: translate(-100%,-50%); }
.m_intro .white > div:nth-child(4){ width: 400%; height: 400%; background-color: #fff; position: absolute; right: 2px; top: 50%; transform: translate(100%,-50%); }


/* 메인비주얼 */
.main_visual{width:100%;position: relative;z-index: 3; height: 100vh; background: #FFF; overflow: hidden; }
.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 .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{ position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; width: 100%; height: 100%;
-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 .box1:after{ content:""; display: block; width: 100%; height: 100%;  }

.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 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)"
}






.main_visual .scroll_down{ position:absolute; left: 50%; bottom: 50px; z-index: 10; display: flex; flex-flow: column; align-items: center; text-align: center; gap: 10px; transform: translate(-50%,0); animation: scroll 1.2s ease-in-out infinite; }
.main_visual .scroll_down strong{ font-size: 18px; color:#FFFFFF; font-weight: 300; }


@keyframes scroll {
    0%{
        transform: translate(-50%,0);
    }
    50%{
        transform: translate(-50%,10px);
    }
    100%{
        transform: translate(-50%,0);
    }
}
/*효과*/
.main_visual .in_inner{ width: 100%; position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%); z-index: 10;}
.main_visual .in_inner .wrap{  display: flex; justify-items: center; text-align: center; align-items: center; flex-flow: column; gap: 30px; }
.main_visual .in_inner .wrap p{ font-size: 24px; font-weight: 300; color: #fff;  }

.main_visual .box.on .dim{opacity: 0.1;transition: 1.5s}
.main_visual .box1.on .dim{opacity: 0.3}


.main_visual .in_inner .wrap .hiwin{ opacity: 0; transition: opacity 1s; }
.main_visual .in_inner .wrap p{ opacity: 0; transform: translateY(40px); transition: transform 1s, opacity 1s; transition-delay: .3s; }


.m_intro{ transition: transform 1s; }
.m_intro.on{ transform: translate(-50%,-50%) scale(.5); }

.main_visual .in_inner.on .wrap .hiwin{ opacity: 1; }
.main_visual .in_inner.on .wrap p{ transform: translateY(0); opacity: 1; }


#main .main_visual .btn_wrap { position: absolute; left: 50%; transform: translate(-50%,0); bottom: 130px; z-index: 11; }
#main .main_visual .btn_wrap .thum{ display: flex; justify-content: center; gap: 4px; }
#main .main_visual .btn_wrap .thum li{ width: 43px; height: 43px; cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; }
#main .main_visual .btn_wrap .thum li.on{ border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); }
#main .main_visual .btn_wrap .thum li span{ width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255,255,255,0.3); transition: background .3s; position: relative; z-index: 1; }
#main .main_visual .btn_wrap .thum li.on span{ background-color: #fff; }
/*#main .main_visual .btn_wrap .thum li.on{ border-color: #FFCC00; background-color: #FFCC00; }*/
#main .main_visual .btn_wrap .thum li.last{ display: none; }

#main .main_visual .btn_wrap .thum li .progress{ position: absolute; left: 0; top: 0; fill: transparent; stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 150; stroke-dashoffset: 150; overflow: visible; transform:rotate(-90deg); }

#main .main_visual .btn_wrap .thum li.on .progress{ stroke-dashoffset: 0; transition: all 8s linear; }






/* 메인컨텐츠 공통 */
#main .m_tit{ display: flex; flex-flow: column; }
#main .m_tit .mask_em{ margin-bottom: 20px; overflow: hidden; }
#main .m_tit .mask{ overflow: hidden; }
#main .m_tit em{ font-size: 24px; font-weight: 500; color:#377D2A; display: block; }
#main .m_tit strong{ font-size: 40px; line-height: 1.3em; color:#3B403D; font-weight: 700; display: block; }


#main .m_tit em{ transform: translateY(100%); transition: transform 1s; }
#main .on .m_tit em{ transform: translateY(0); }

#main .m_tit strong{ transform: translateY(100%); transition: transform 1s; }
#main .on .m_tit strong{ transform: translateY(0); }

#main .m_tit .mask_st1 strong{ transition-delay: .2s; }
#main .m_tit .mask_st2 strong{ transition-delay: .4s; }



.go_btn{ width: 200px; height: 60px; transition: width .4s; border-radius: 100px; }
.go_btn a{ display: block; position: relative; width: 100%; height: 100%; border-radius: 100px;  overflow: hidden;
}
.go_btn a:after{ content:""; display: block; width: 100%; height: 100%; border-radius: 100px; border: 1px solid rgba(255,255,255,0.25); position: absolute; left: 0; top: 0; box-sizing: border-box;}
.go_btn a ul { display: flex; height: 100%; }
.go_btn a ul li{ width: 220px; height: 100%; text-align: center; color: #fff; font-size: 18px; font-weight: 300; display: flex; align-items: center; justify-content: center; background-color: #377D2A;  }
.go_btn a ul li:nth-child(1){ background-color: #8BB94E;  }
.go_btn a ul{ position: absolute; right: 0; top: 0; width: 400px; transition: right .4s, width .4s; }
.go_btn a:hover ul{ right: -100%; width: 440px; }
.go_btn:hover{ width: 220px; }

#main .con{ display: flex; flex-flow: column; gap: 160px; }

#main{ position: relative; }
#main .con01_line{ position: fixed; left: 0; top: 47%; width: 0; height: 1px; background-color: #EEEEEE; z-index: -1; transition: width 2s, opacity .3s; }
#main .con01_cir{ position: fixed; left: 50%; top: 50%; transform: translate(-10%,-50%); z-index: -1; transition: opacity .3s; }
#main .con01_line.on{ width: 100%; }
#main .con01_line.on2{ opacity: 0; }
#main .con01_cir.on2{ opacity: 0; }

#main .con01_cir svg circle{ 
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: all 2s;
}

#main .con01_cir.on svg circle{ stroke-dashoffset: 0; }



/* con01 */
#main .con01{ height: 490vh; width: 100%; position: relative; }
/*#main .con01:after{ content:""; display: block; width: 100%; height: 1px; background-color: #E9E9E9; position: absolute; left: 0; top: 50%; z-index: -1; }*/
#main .con01 .in2{ display: flex; }
#main .con01 .in2 .p_tit{ width: 50%; height: 100vh; display: flex; flex-flow: column; justify-content: center; }
#main .con01 .in2 .p_tit .txt_w{ overflow: hidden; height: 26px; margin-bottom: 10px; }
#main .con01 .in2 .p_tit .txt_w2 .wrap{ transition: transform .6s; }
#main .con01 .in2 .p_tit .txt_w .wrap{ transition: transform .6s; }

#main .con01 .in2 .p_tit.on1 .txt_w .wrap{ transform: translateY(-33.333333333333%); }
#main .con01 .in2 .p_tit.on2 .txt_w .wrap{ transform: translateY(-66.666666666666%); }
#main .con01 .in2 .p_tit.on3 .txt_w .wrap{ transform: translateY(-66.666666666666%); }
#main .con01 .in2 .p_tit.on4 .txt_w .wrap{ transform: translateY(-66.666666666666%); }
#main .con01 .in2 .p_tit.on5 .txt_w .wrap{ transform: translateY(-66.666666666666%); }

#main .con01 .in2 .p_tit.on1 .txt_w2 .wrap{ transform: translateY(-16.66666666666667%); }
#main .con01 .in2 .p_tit.on2 .txt_w2 .wrap{ transform: translateY(-33.33333333333333%); }
#main .con01 .in2 .p_tit.on3 .txt_w2 .wrap{ transform: translateY(-50%); }
#main .con01 .in2 .p_tit.on4 .txt_w2 .wrap{ transform: translateY(-66.66666666666667%); }
#main .con01 .in2 .p_tit.on5 .txt_w2 .wrap{ transform: translateY(-83.33333333333333%); }
#main .con01 .in2 .p_tit.on6 .txt_w2 .wrap{ transform: translateY(-100%); }


#main .con01 .in2 .p_tit > div > div > em{ display: block; font-size: 24px; font-weight: 500; color:#2A7D48; line-height: 1.2em; }
#main .con01 .in2 .p_tit > div > div > strong{ display: block; font-size: 50px; line-height: 60px; color:#3B403D; font-weight: 500; }
#main .con01 .in2 .p_tit .txt_w2{ overflow: hidden; height: 120px; }
#main .con01 .in2 .p_tit .p_info{ margin-top: 85px; position: relative; }
#main .con01 .in2 .p_tit .p_info .pbox{ display: flex; gap: 20px; opacity: 0; transition: opacity .6s; }
#main .con01 .in2 .p_tit .p_info .pbox1{ opacity: 1; }
#main .con01 .in2 .p_tit .p_info .pbox1 ~ .pbox{ position: absolute; left: 0; top: 0; }
#main .con01 .in2 .p_tit .p_info .pbox > div{ width: 200px; padding: 20px; background-color: #F6F7F9; border-radius: 4px; display: flex; flex-flow: column; justify-content: space-between; height: 211px; }
#main .con01 .in2 .p_tit .p_info .pbox > div strong{ font-size: 20px; font-weight: 400; color:#4C554F; line-height: 26px; display: block;  }
#main .con01 .in2 .p_tit .p_info .pbox > div p{ font-size: 18px; color:#377D2A; font-weight: 600; }
#main .con01 .in2 .p_tit .p_info .pbox > div p b{ font-size: 42px; font-weight: 500; display: inline-block; margin-right: 4px; }

#main .con01 .in2 .p_img{ position: relative; padding-top: 145px; padding-bottom: 145px; transform: translateX(100px); }
#main .con01 .in2 .p_img:after{ content:""; display: block; width: 1px; height: 100%; position: absolute; left: -10px; top: 0; background-color: #E9E9E9; }
#main .con01 .in2 .p_img:before{ content:""; display: block; width: 1px; height: 100%; position: absolute; right: -10px; top: 0; background-color: #E9E9E9; }

#main .con01 .in2 .p_img .wrap{ display: flex; flex-flow: column; gap: 60px; align-items: center; position: relative; }
#main .con01 .in2 .p_img .box{  perspective: 1500px; cursor: pointer; }
#main .con01 .in2 .p_img .box img{ border-radius: 10px; display: block; transform: rotateX(45deg); transition: transform-origin .6s; transform-origin: top left; }
#main .con01 .in2 .p_img .box1 img{ transform: translateX(0); }

#main .con01 .in2 .p_tit.on1 .p_info .pbox{ opacity: 0; }
#main .con01 .in2 .p_tit.on1 .p_info .pbox2{ opacity: 1; }

#main .con01 .in2 .p_tit.on2 .p_info .pbox{ opacity: 0; }
#main .con01 .in2 .p_tit.on2 .p_info .pbox3{ opacity: 1; }

#main .con01 .in2 .p_tit.on3 .p_info .pbox{ opacity: 0; }
#main .con01 .in2 .p_tit.on3 .p_info .pbox4{ opacity: 1; }

#main .con01 .in2 .p_tit.on4 .p_info .pbox{ opacity: 0; }
#main .con01 .in2 .p_tit.on4 .p_info .pbox5{ opacity: 1; }

#main .con01 .in2 .p_tit.on5 .p_info .pbox{ opacity: 0; }
#main .con01 .in2 .p_tit.on5 .p_info .pbox6{ opacity: 1; }



/*
#main .con01 .in2 .p_img .box.on img{ }
#main .con01 .in2 .p_img .box.on2 img{  transform-origin: bottom left; }
*/


#main .con02 .m_tit{ text-align: center; margin-bottom: 80px; }
#main .con02 .con_slide{ height: 600vh; position: relative; }
#main .con02 .con_slide .img ul li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#main .con02 .con_slide .img ul li img{ display: block;  min-width: 100vw; object-fit: fill; }

#main .con02 .con_slide .img ul .lis img{ clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition: clip-path 1s, transform 1s; transform: translateX(10%); }

#main .con02 .con_slide .txt{ position: absolute; left: 140px; top: 38%; transform: translate(0,-50%); width: 100%; }
/*#main .con02 .con_slide .txt ul{ width: 100%; }*/

#main .con02 .con_slide .txt .first{ opacity: 1; transform: translateX(0); }

#main .con02 .con_slide .txt .lis{ position: absolute; left: 0; top: 0; width: 100%; transition: transform .6s, opacity .6s; opacity: 0; transform: translateX(60px); }

#main .con02 .con_slide .txt .lis.on1{ transform: translateX(0); opacity: 1; z-index: 1; }
#main .con02 .con_slide .txt .lis.on2{ transform: translateX(-60px); opacity: 0; }



#main .con02 .con_slide .txt strong{ font-size: 60px; display: block; font-weight: 700; color:#FFFFFF; margin-bottom: 20px; }
#main .con02 .con_slide .txt p{ font-size: 18px; line-height: 1.5em; color:#FFFFFF; font-weight: 300; margin-bottom: 55px; }

#main .con02 .con_slide .txt .go_btn a:after{ border: 1px solid #AADF4B; }
#main .con02 .con_slide .txt .go_btn li:nth-child(2){ background: transparent; }

#main .con02 .con_slide .on_tab{ position: absolute; width: 60px; height: calc(100% - 60px); border-radius: 100px; background-color: #96B859; left: 30px; top: 50%; transform: translate(0,-50%); padding: 30px 0; display: flex; justify-content: center; }
#main .con02 .con_slide .on_tab ul li{ font-size: 20px; font-weight: 500; color:#FFFFFF; line-height: 25px; writing-mode: vertical-rl; }
#main .con02 .con_slide .on_tab .wrap{ width: 25px; overflow: hidden; }
#main .con02 .con_slide .on_tab ul{ display: flex; transition: transform .6s; }
#main .con02 .con_slide .tab_list{ height: 100%; position: absolute; right: 0; top: 0; }
#main .con02 .con_slide .tab_list .wrap{ overflow: hidden; width: 300px; height: 100%; }
#main .con02 .con_slide .tab_list .wrap ul{ display: flex; width: 200%; height: 100%; background-color: rgba(255,255,255,0.2); transition: transform .6s; }
#main .con02 .con_slide .tab_list .wrap ul li{ width: 60px; height: 100%; border-left: 1px solid rgba(255,255,255,0.2);}
#main .con02 .con_slide .tab_list .wrap ul li a{ writing-mode: vertical-rl; width: 100%; display: flex; padding-top: 45px; position: relative; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color:#FFFFFF; height: 100%; transition: color .3s; }
#main .con02 .con_slide .tab_list .wrap ul li a:before{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; transition: background .3s; }
#main .con02 .con_slide .tab_list .wrap ul li a:hover{ color: #96B859; }
#main .con02 .con_slide .tab_list .wrap ul li a:hover:before{ background-color: #96B859; }
#main .con02 .con_slide .slides{ height: calc(100vh - 80px); overflow: hidden; width: 100%; position: relative; position: absolute; left: 0; top: 0; }

#main .con02 .con_slide .img li.on img{ clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); transform: translateX(0); }

#main .con02 .con_slide .on_tab.on1 .wrap ul{ transform: translateX(-25px); }
#main .con02 .con_slide .on_tab.on2 .wrap ul{ transform: translateX(-50px); }
#main .con02 .con_slide .on_tab.on3 .wrap ul{ transform: translateX(-75px); }
#main .con02 .con_slide .on_tab.on4 .wrap ul{ transform: translateX(-100px); }
#main .con02 .con_slide .on_tab.on5 .wrap ul{ transform: translateX(-125px); }
#main .con02 .con_slide .on_tab.on6 .wrap ul{ transform: translateX(-150px); }

#main .con02 .con_slide .tab_list.on1 .wrap ul{ transform: translateX(-60px); }
#main .con02 .con_slide .tab_list.on2 .wrap ul{ transform: translateX(-120px); }
#main .con02 .con_slide .tab_list.on3 .wrap ul{ transform: translateX(-180px); }
#main .con02 .con_slide .tab_list.on4 .wrap ul{ transform: translateX(-240px); }
#main .con02 .con_slide .tab_list.on5 .wrap ul{ transform: translateX(-300px); }
#main .con02 .con_slide .tab_list.on6 .wrap ul{ transform: translateX(-360px); }

#main .con02 .loc{ width: 100%; height: 100%; }
#main .con02 .loc > div{ width: 100%; height: 16.6666666666%; }



/* CON03 */
#main .con03{ height: 970px; transition: padding .6s; }
#main .con03 .wrap{ position: relative; height: 100%; background: url('/img/main/con03_bg00.jpg') center center no-repeat; background-size: cover; background-attachment: fixed; overflow: hidden; }

#main .con03 .bg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; }
#main .con03 .bg:after{ content:""; display: block; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; z-index: 2;
}
#main .con03 .bg > div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform 1s, opacity 1s; width: 100%; height: 100%; opacity: 0; }
#main .con03 .bg > div.on{ transform: translate(-50%,-50%); z-index: 1; opacity: 1; }


#main .con03 .wrap .c_tit{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%); width: 100%; display: flex; flex-flow: column; align-items: center; text-align: center; z-index: 2; }
#main .con03 .wrap .c_tit em{ font-size: 24px; font-weight: 500; color: #fff; display: block; margin-bottom: 10px; transition: opacity 1s; opacity: 0; }
#main .con03 .wrap .c_tit strong{ font-size: 50px; line-height: 60px; color: #fff; font-weight: 600; transition: opacity 1s; opacity: 0; transition-delay: .4s; }
#main .con03 .wrap .c_tit p{ font-size: 18px; line-height: 1.5em; color: #fff; font-weight: 200; margin-top: 30px; transition: opacity 1s; opacity: 0; transition-delay: .8s;  }
#main .con03 .wrap .list { height: 100%; opacity: 0; z-index: -1; position: relative; }
#main .con03 .wrap .list .inner{ height: 100%; }
#main .con03 .wrap .list ul{ display: flex; height: 100%; }
#main .con03 .wrap .list ul li{ width: 33.33333333333%; height: 100%; }
#main .con03 .wrap .list ul li a{ height: 100%; display: flex; flex-flow: column; text-align: center; justify-content: flex-end; padding: 60px 0; align-items: center; position: relative; }
#main .con03 .wrap .list ul li a:after{ content:""; display: block; width: 1px; height: 100%; background-color: rgba(255,255,255,0.2); position: absolute; right: 0; top: 0; }

#main .con03 .wrap .list ul li:nth-child(1) a:before{ content:""; display: block; width: 1px; height: 100%; background-color: rgba(255,255,255,0.2); position: absolute; left: 0; top: 0; }

#main .con03 .wrap .list ul li a svg{ display: block; margin-top: 30px; opacity: 0; transition: opacity 1s; }
#main .con03 .wrap .list ul li a p{ font-size: 18px; line-height: 1.5em; font-weight: 300; color:#FFFFFF; margin-top: 20px; opacity: 0; transition: opacity 1s; }
#main .con03 .wrap .list ul li a .title{ transition: transform .8s; transform: translateY(-140%); }
#main .con03 .wrap .list ul li.on a .title{ transform: translateY(0); }
#main .con03 .wrap .list ul li a .title strong{ font-size: 40px; color:#FFFFFF; font-weight: 600; display: block; margin-bottom: 8px; }
#main .con03 .wrap .list ul li a .title em{ font-size: 20px; font-weight: 300; color:#FFFFFF; }

#main .con03 .wrap .list ul li.on a p{ opacity: 1; }
#main .con03 .wrap .list ul li.on a svg{ opacity: 1; }


#main .con03.ac .wrap .c_tit em{ opacity: 1; }
#main .con03.ac .wrap .c_tit strong{ opacity: 1; }
#main .con03.ac .wrap .c_tit p{ opacity: 1; }


#main .con03 .go_btn{ margin-top: 30px; display: none; transition: width .4s, opacity 1s; opacity: 0; transition-delay: 0s, 1s;  }
#main .con03.ac .go_btn{ opacity: 1; }

#main .con03.on{ padding: 100px 68px; }
#main .con03.on .wrap{ border-radius: 0; }
#main .con03.on .wrap .list{ opacity: 1; z-index: 4; }
#main .con03 .wrap .list .img{ height: 100%; }

#main .white_box{ width: 100%; height: 80vh; }

/* con04 */
#main .con04{ background-color: #fff; }
#main .con04 .list{ margin-top: 70px; }
#main .con04 .list ul{ display:flex; gap: 30px; }
#main .con04 .list ul li{ width: 33.3333333333333%; }
#main .con04 .list ul li a{ position: relative; display: block; border-radius: 10px; width: 100%; overflow: hidden; }
#main .con04 .list ul li a .img{ width: 100% !important; overflow: hidden; height: 338px !important; }
#main .con04 .list ul li a .hover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-flow: column; justify-content: space-between; padding: 40px; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(10px) brightness(110%); opacity: 0; transition: opacity .4s; z-index: 1; }
#main .con04 .list ul li a:hover .hover{ opacity: 1; }
#main .con04 .list ul li a .hover .txt{ display: flex; flex-flow: column; gap: 10px; }
#main .con04 .list ul li a .hover .txt strong{ display: block;
overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
    font-size: 22px; font-weight: 600; color: #000; line-height: 1.5em;
}
#main .con04 .list ul li a .hover .txt p{ font-size: 18px; font-weight: 300; color: #666666; }
#main .con04 .list ul li a .hover .bt{ display:flex; align-items: center; justify-content: space-between; }
#main .con04 .list ul li a .hover .bt .tag{ display: flex; gap: 8px; }
#main .con04 .list ul li a .hover .bt .tag span{ font-size: 14px; color:#377D2A; padding: 5px 10px; border-radius: 50px; border: 1px solid #377D2A; }
#main .con04 .list ul li a .hover .bt .plus{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #377D2A; }

#main .con04 .list ul li a .img img{ display: block; width: 100%; border-radius: 10px; transition: transform .4s; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#main .con04 .list ul li a:hover .img img{ transform: translate(-50%,-50%) scale(1.1); }


#main .con04 .list ul li{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; }
#main .con04.on .list ul li{ transform: translateY(0); opacity: 1; }

#main .con04 .list ul li:nth-child(1){ transition-delay: .7s; }
#main .con04 .list ul li:nth-child(2){ transition-delay: .9s; }
#main .con04 .list ul li:nth-child(3){ transition-delay: 1.1s; }


/* con05 */
#main .con05{ background: url('/img/main/con05_bg.jpg') center center no-repeat; background-size: cover; padding: 140px 0; position: relative; }
#main .con05:after{ content:""; display: block; width: 100%; height: 30%; background: rgb(23,41,29);
background: linear-gradient(0deg, rgba(23,41,29,1) 0%, rgba(23,41,29,0) 100%); position: absolute; left: 0; bottom: 0; }
#main .con05 .inner{ display:flex; flex-flow: column; gap: 40px; align-items: center; position: relative; z-index: 1; }
#main .con05 .c_tit{ display: flex; flex-flow: column; gap: 10px; text-align: center; align-items: center; }
#main .con05 .c_tit em{ font-size: 24px; color:#FFFFFF; }
#main .con05 .c_tit strong{ font-size: 26px; color:#FFFFFF; font-weight: 600; }
#main .con05 .form{ display: flex; flex-flow: column; gap: 20px; }
#main .con05 .form .box{ display: flex; align-items: center; }
#main .con05 .form .box strong{ width: 100px; font-size: 18px; font-weight: 400; color:#FFFFFF; }
#main .con05 .form .box .f_sel{ width: 420px; height: 52px; border-radius: 8px; backdrop-filter: blur(30px) brightness(110%);
    background: url('/img/main/sel_arrow.png') right 20px center no-repeat;
    background-color: transparent; border: 1px solid rgba(255,255,255,0.2); font-size: 18px; color: #D0DBD4; padding-left: 20px; -webkit-appearance: none;  /* 크롬 화살표 없애기 */
    -moz-appearance: none; /* 파이어폭스 화살표 없애기 */
    appearance: none;  /* 화살표 없애기 */
}
#main .con05 .form .box .f_sel option{ color: #333; }

#main .con05 .form .box .f_inp{ background-color: transparent; border: 1px solid rgba(255,255,255,0.2); font-size: 18px; color: #D0DBD4; padding-left: 20px; width: 420px; height: 52px; border-radius: 8px; backdrop-filter: blur(30px) brightness(110%);
}
#main .con05 .form .box .f_inp::placeholder{ color: #D0DBD4; }


#main .con05 .c_tit em{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; }
#main .con05.on .c_tit em{ transform: translateY(0); opacity: 1; }

#main .con05 .c_tit strong{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; transition-delay: .2s; }
#main .con05.on .c_tit strong{ transform: translateY(0); opacity: 1; }

	#main .con02 .con_slide .img ul .lis .pc_img{ display: block; }
	#main .con02 .con_slide .img ul .lis .mo_img{ display: none; }


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

}

@media (min-height: 1400px){
	#main .con01{ height: auto; }
	#main .con02 .con_slide .img ul li img{ min-width: auto; height: 100%; }
}

@media (min-width: 1920px){
  .main_visual{ height: 100vh; }
  #main .con03 .bg > div video{ width: 100%; height: auto;  }
}

@media (max-width: 1919px){
.main_visual .main_slider .slide_box .main_img #videobcg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

}

@media (max-width: 1540px){
    .in2{ padding: 0 60px; } 
    #main .con01 .in2 .p_img .box img{ width: 400px; height: auto; }
    #main .con01 .in2 .p_img{ transform: translateX(160px); }
    #main .con01_cir svg{ width: 700px; height: auto; }
    #main .con01_cir{ transform: translate(2%, -50%); }
    #main .con03.on{ padding: 50px; }
    #main .con03 .bg video{ width: 100%; }
    .inner{ width: 100%; padding: 0 20px; }
    #main .con01{ height: 480vh; }
}


@media (max-width: 1360px){
    #main .con01 .in2 .p_tit > div > div > em{ font-size: 18px; }
    #main .con01 .in2 .p_tit .txt_w{ height: 20px; }
    #main .con01 .in2 .p_tit > div > div > strong{ font-size: 32px; line-height: 42px; }
    #main .con01 .in2 .p_tit .txt_w2{ height: 84px }
    #main .con01 .in2 .p_tit .p_info .pbox > div strong{ font-size: 16px; line-height: 22px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div p b{ font-size: 28px; margin-right: 2px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div p{ font-size: 16px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div{ width: 160px; height: 160px; padding: 15px; }
    #quick{ right: 20px;bottom: 20px; }
    #main .con02 .con_slide .txt strong{ font-size: 40px; margin-bottom: 10px; }
    #main .con02 .con_slide .txt p{ font-size: 16px; margin-bottom: 30px; }
    .go_btn a ul li{ font-size: 16px; }
    .go_btn{ width: 150px; }
    .go_btn:hover{ width: 170px; }
    .go_btn a ul li{ width: 170px; }
    .go_btn a ul{ width: 300px; }
    .go_btn a:hover ul{ right: -100%; width: 340px; }
    .go_btn a ul li svg{ width: 20px; height: auto; }
    .go_btn{ height: 48px; }
    #main .con02 .con_slide .on_tab ul li{ font-size: 18px; }
    #main .con02 .con_slide .tab_list .wrap ul li a{ font-size: 18px; }
    #main .con04 .list ul li a .hover{ padding: 30px; }
}



@media (max-width: 1280px){
    #main .con01 .in2 .p_img { transform: translate(0px); }
    #main .con01 .in2{ justify-content: space-between; }
}

@media (max-width: 1100px){
    #main .con01 .in2 .p_img .box img{ width: 320px; }
    #main .con01{ height: 350vh; }
    #main .con{ gap: 100px; }
    #main .m_tit em{ font-size: 18px; }
    #main .m_tit .mask_em{ margin-bottom: 10px; }
    #main .m_tit strong{ font-size: 30px; }
    #main .con02 .m_tit{ margin-bottom: 40px; }
    #main .con03 .wrap .c_tit strong{ font-size: 30px; line-height: 1.5em; }
    #main .con03 .wrap .c_tit em{ font-size: 18px; }
    #main .con03 .wrap .c_tit p{ margin-top: 15px; font-size: 16px; }
    #main .con03 .wrap .list ul li a .title strong{ font-size: 24px; margin-bottom: 5px; }
    #main .con03 .wrap .list ul li a .title em{ font-size: 16px; }
    #main .con03 .wrap .list ul li a p{ font-size: 15px; word-break: keep-all; padding: 0 20px;}
    #main .con03 .wrap .list ul li a p br{ display: none; }
    #main .con03 .bg video{ width: auto; height: 100%; }
    #main .con04 .list ul li a .hover .txt strong{ font-size: 18px; }
    #main .con04 .list ul li a .hover .txt p{ font-size: 14px; }
    #main .con04 .list ul li a .hover .bt .tag span{ font-size: 12px; padding: 3px 6px;  }
    #main .con04 .list ul li a .hover .bt .plus{ width: 30px; height: 30px; }
    #main .con04 .list ul li a .hover .bt .plus svg{ width: 12px; height: auto; }
    #main .con03.on{ padding: 40px; }
    .in2{ padding: 0 40px; }
    #main .con04 .list{ margin-top: 30px; }
    #footer .f_top .t_info{ gap: 20px; }
    #footer .f_top .t_info strong{ font-size: 24px; line-height: 1.5em; }
    #footer .f_top .t_info svg{ width: 160px; height: auto; }
    #footer .f_top .t_info .dl_box{ gap: 8px; }
    #footer .dl_box dl dt{ font-size: 13px; }
    #footer .dl_box dl dd{ font-size: 13px; }
    #footer .f_top .f_link ul li a .slides > div{ font-size: 15px; }
    #footer .f_top .f_link ul li a .slides{ width: 320px; }
    #footer .f_top .f_link ul li{ width: 160px; padding: 30px 0; }
    #footer .f_md .dl_box .f_dl{ width: 50%; }
    #footer .f_md .dl_box { flex-flow: wrap; gap: 30px 0; }
    #footer .f_bt .f_sns{ margin-right: 40px;  }
    #footer .f_bt .f_sns ul li svg{ width: 40px; height: auto; }
    #footer .f_bt .f_nav ul{ gap: 20px; }
    #footer .f_bt .f_nav ul li a{ font-size: 13px; }
    #footer .f_md .dl_box .f_dl{ gap: 6px; }
    #footer .f_md{ margin-top: 30px; }
    #footer .f_bt{ margin-top: 40px; }
    #footer{ padding: 70px 0; }
}

@media (max-width: 980px){
    .main_visual .in_inner .wrap .hiwin svg{ width: 300px; height: auto; }
    .m_intro .img img{ width: 900px; }
    .main_visual .in_inner .wrap p{ font-size: 18px; }
    .main_visual .in_inner .wrap{ gap: 20px; }
    #main .main_visual .btn_wrap .thum li span{ width: 6px; height: 6px; }
    .main_visual .scroll_down strong { font-size: 13px; } 
    .main_visual .scroll_down{ gap: 4px; bottom: 30px; }
    .main_visual .scroll_down svg{ width:14px; height: auto; }
    #main .main_visual .btn_wrap{ bottom: 90px; }
    #quick ul li a .icon{ width: 44px; height: 44px; }
    #quick ul li a{ width: 44px; height: 44px; }
    #quick ul li a .icon svg{ width: 18px; height: auto; }
    #quick ul li a:after{ font-size: 13px; right: 44px; }
    #quick ul li a:hover{ width: 110px; }
    #quick .scroll_top button{ width: 44px; height: 44px; }
    #quick .scroll_top button svg{ width: 20px; height: auto; }
    #quick .scroll_top button .wrap{ width: 20px; height: 20px; }
    #main .con01 .in2 .p_tit > div > div > strong{ font-size: 24px; line-height: 32px; }
    #main .con01 .in2 .p_tit .txt_w2{ height: 64px; }
    #main .con01 .in2 .p_tit > div > div > em{ font-size: 14px; }
    #main .con01 .in2 .p_tit .txt_w{ margin-bottom: 4px; height: 15px; }
    #main .con01 .in2 .p_tit .p_info{ margin-top: 40px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div{ padding: 12px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div strong{ font-size: 14px; line-height: 20px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div p{ font-size: 14px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div p b{ font-size: 18px; margin-right: 1px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div{ width: 120px; }
    #main .con01_line{ display: none; }
    #main .con01 .in2{ flex-flow: column; }
    #main .con01 .in2 .p_img{ padding-top: 50px; padding-bottom: 50px; }
    #main .con01 .in2 .p_tit{ width: 100%; justify-content: center; padding-top: 70px; background-color: #fff; position: relative; z-index: 10; }
    #main .con01 .in2 .p_tit .p_info{ margin-top: 10px; }
    #main .con01_cir{ left: 50%; top: auto; top: 50%; transform: translate(-50%,-50%)}
    #main .con01 .in2 .p_img{ width: 300px; }
    #main .con01 .in2 .p_img .box img{ width: 100%; }
    #main .con01 .in2 .p_img .wrap{ gap: 40px; }
    #main .con01 .in2 .p_img{ padding-top: 10px; padding-bottom: 10px; }
    #main .con01 .in2 .p_tit{ height: auto; padding-bottom: 40px;  }
    #main .con01 .in2{ align-items: center; }
    #main .con01_cir{ display: none; }
    #main .m_tit strong{ font-size:18px; }
    #main .m_tit em{ font-size: 14px; }
    #main .m_tit .mask_em{ margin-bottom: 4px; }
    #main .con02 .m_tit{ margin-bottom: 20px; }
    #main .con02 .con_slide .on_tab{ left: 20px; padding: 20px 0; width: 44px; height: calc(100% - 40px); }
    #main .con02 .con_slide .on_tab ul li{ font-size: 14px; }
    #main .con02 .con_slide .tab_list .wrap ul li a{ font-size: 14px; padding-top: 20px;  }
    #main .con02 .con_slide .tab_list .wrap ul li{ width: 44px; }
    #main .con02 .con_slide .tab_list .wrap{ width: 220px; }
    
    #main .con02 .con_slide .tab_list.on1 .wrap ul{ transform: translateX(-44px); }
#main .con02 .con_slide .tab_list.on2 .wrap ul{ transform: translateX(-88px); }
#main .con02 .con_slide .tab_list.on3 .wrap ul{ transform: translateX(-132px); }
#main .con02 .con_slide .tab_list.on4 .wrap ul{ transform: translateX(-176px); }
#main .con02 .con_slide .tab_list.on5 .wrap ul{ transform: translateX(-220px); }
#main .con02 .con_slide .tab_list.on6 .wrap ul{ transform: translateX(-264px); }
    #main .con02 .con_slide .txt{ left: 100px; }
    #main .con02 .con_slide .txt strong{ font-size: 20px; margin-bottom: 4px; }
    #main .con02 .con_slide .txt p{ font-size: 13px; margin-bottom: 20px; }
    .go_btn a ul li{ font-size: 14px; }
    #main .con02 .con_slide .tab_list .wrap{ width: 88px; }
    #main .con02 .con_slide .tab_list .wrap ul{ width: 500%; }
    #main .con02 .con_slide .img ul li img{ height: 100%; min-width: auto; }
    #main .con03 .wrap .c_tit strong{ font-size: 20px; line-height: 1.3em; }
    #main .con03 .wrap .c_tit em{ font-size: 14px; }
    #main .con03 .wrap .c_tit p{ font-size: 13px; line-height: 1.5em; margin-top: 8px; }
    #main .con03 .wrap .list ul li a .title strong{ font-size: 18px; }
    #main .con03 .wrap .list ul li a .title em{ font-size: 13px; }
    #main .con03 .wrap .list ul li a svg{ margin-top: 15px; width: 40px; height: auto; }
    #main .con03 .wrap .list ul li a p{ font-size: 13px; }
    #main .con03 .wrap .list ul{ flex-flow: column; }
    #main .con03 .wrap .list ul li{ width: 100%; height: 33.33333%; }
    #main .con03 .wrap .list ul li a .title{ transform: translateY(0); }
    #main .con03 .wrap .list ul li a p{ opacity: 1; }
    #main .con03 .wrap .list ul li a svg{ opacity: 1; }
    #main .con03 .wrap .list ul li a:after{ width: 100%; height: 1px; left: 0; bottom: 0; top: auto; right: auto; }
    #main .con03 .wrap .list ul li:nth-child(1) a:before{ display: none; }
    #main .con04 .list ul{ gap: 15px; flex-flow: column; }
    #main .con04 .list ul li{ width: 100%; }
    #main .con04 .list ul li a .hover .txt{ gap: 4px; }
    #main .con04 .list ul li a .hover .txt strong{ font-size: 14px; }
    #main .con04 .list ul li a .hover .txt p{ font-size: 12px; }
    #main .con05 .c_tit em{ font-size: 14px; }
    #main .con05 .c_tit strong{ font-size: 18px; }
    #main .con05 .c_tit{ gap: 4px; }
    #main .con05 .form .box .f_sel{ width: 260px; height:42px; font-size: 13px; padding-left: 15px; }
    #main .con05 .form .box strong{ width: 60px; font-size: 14px; }
    #main .con05 .form .box .f_inp{ width: 260px; height:42px; font-size: 13px; padding-left: 15px; }
    #main .con05 .inner{ gap: 20px; }
    #main .con05 .form{ gap: 10px; }
    #main .con05{ padding: 70px 0; }
    #main .white_box{ height: 90vh; display: none !important; }
    #main .con02 .con_slide .img ul .lis img{ position: absolute; left: -80%; top: 0; }
	
	#main .con01 .in2{ justify-content: flex-start; }
	#main .con01 .in2 .p_img{ width: 100%; }
	#main .con01 .in2 .p_img .wrap{ flex-flow: row; width: calc(450% + 100px); gap: 20px; }
	#main .con01 .in2 .p_img .box{ width: 90%; }
	#main .con01 .in2 .p_img .box6{ margin-right: 40px; }
	#main .con01 .in2 .p_img .box img{ width: 100%; }
	#main .con01 .in2 .p_img:before{ display: none; }
	#main .con01 .in2 .p_img:after{ display: none; }
	#main .con01 .in2{ height: 100%; display:flex; flex-flow: column; justify-content: center; }
	#main .con01{ height: 100vh; }
/*	#main .con02{ height: 100vh; }*/
/*	#main .con02 .con_slide{ height: auto !important; }*/
	.scroll-buffer {
	  height: 230vh;
	}
	
	#main .con01 .in2 .p_img .box img{ transform: rotateX(0) !important; }
	#main .con01 .in2 .p_tit{ padding-top: 0; padding-bottom: 20px; }
	#main .con02 .con_slide .on_tab{top: auto;  bottom: 10px; transform:translate(0,0); }
	#main .con03 .wrap .list{ height: calc(100% - 80px); margin-top: 80px; }
	#main .con04{ position: relative; z-index: 5; padding-top: 60px; }
	
	#main .con03{ height: 700px; }
	#main .con03.on{ padding: 0; }
}



@media (max-width: 640px){
    .in2{ padding: 0 20px; }
    #footer .f_top .t_info strong{ font-size: 18px; line-height: 1.3em; }
    #footer .f_top{ flex-flow: column; justify-content: flex-start; }
    #footer .f_top .f_link ul{ justify-content: flex-end; }
    #footer .f_top .f_link ul li{ width: 100px; padding: 15px 0; }
    #footer .f_top .f_link ul li a .slides{ width:200px; }
    #footer .f_top .f_link ul li a .slides > div{ font-size: 12px; }
    #footer .f_top .t_info svg{ width: 110px; }
    #footer .f_top .t_info .dl_box{ gap: 3px; }
    #footer .dl_box dl dt{ font-size: 12px; }
    #footer .dl_box dl dd{ font-size: 12px; }
    #footer .f_md .dl_box .f_dl{ gap: 3px; width: 100%;}
    #footer .f_md .dl_box{ gap: 12px; }
    #footer .f_md .dl_box{ flex-flow: column; gap: 15px 0; }
    #footer .f_md .dl_box .f_dl dd br{ display: none; }
    .main_visual .in_inner .wrap .hiwin svg{ width: 200px; }
    .main_visual .in_inner .wrap p{ font-size: 14px; }
    .m_intro .img img{ width: 500px; }
    #main .con02 .con_slide .txt{ width: 200px; }
    #main .con02 .con_slide .txt p{ word-break: keep-all; }
    #main .con02 .con_slide .txt p br{ display: none; }
    #main .con02 .con_slide .txt{ left: 90px; }
    #main .con01 .in2 .p_tit .p_info .pbox{ gap: 10px; }
    #main .con01 .in2 .p_tit .p_info .pbox{ width: 100%; }
    #main .con01 .in2 .p_tit .p_info .pbox > div strong{ font-size: 12px; line-height: 18px; }
    #main .con01 .in2 .p_tit .p_info .pbox > div{ width: 33.3333333%; }
    #main .con03 .wrap .list ul li a{ padding: 20px 0; }
    #main .con02 .con_slide .on_tab{ height: calc(100% - 120px); padding-top: 40px; }
    #main .con02 .con_slide .tab_list .wrap ul li a{ padding-top: 120px; }
    #main .con03 .wrap .list ul li a{ justify-content: center; }
    #main .con01 .in2 .p_tit .p_info .pbox > div{ height: 110px; }
    #main .white_box{ height: 100vh !important; }
	#main .con02 .con_slide .slides{ height: calc(100vh - 60px); }
	#main .con02 .con_slide .on_tab{ top: 120px; bottom: auto; height: calc(100% - 130px); }
	#main .con{ gap: 50px; }
	#main .con04{ padding-top: 0; }
	#main .con02 .con_slide .tab_list{ right: -44px; }
/*	#main .con04 .list ul li a .hover{ opacity: 1;  }*/
	#main .con05 .c_tit strong{ word-break: keep-all; }
	#main .con04 .list ul li a .img{ height: 210px !important; }
	#main .con04 .list ul li a .img img{ width: 100%; height: auto; max-width: 100%;  }
	#main .con04 .list ul li:nth-child(3){ display: none !important; }
	#main .con03 .wrap{ background-position: left 40% center; }
	#main .con02 .con_slide .img .pc_img{ display: none !important; }
	#main .con02 .con_slide .img .mo_img{ display: block !important; }
	#main .con02 .con_slide .img ul .lis img{ left: 0; }
	#main .con02 .con_slide .img ul li img{ height: auto; width: 100%; }
	#main .con02 .con_slide .img ul li:after{ content:""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.1); position: absolute; left: 0; top: 0; }
	#main .con03 .go_btn{ margin-top: 20px; display: block; }
}


@media (max-width: 414px){
/*	#main .con03 .wrap .list{  }*/
}