.intro{position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 99;background: #fff;pointer-events: none}
.intro.on{opacity: 0;transition: 1s;transition-delay: 1.8s}
.intro .title{display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 30px}
.intro i{display: block;transform: scale(10);opacity: 0}
.intro.on i{display: block;transform: scale(1);opacity: 1;transition: 1.5s}
.intro.on i .e{transition-duration: 1.5s}
.intro.on i .e{fill: #3B486B}
.intro strong{display: block;font-size: 40px;color: #222222;font-weight: 300;opacity: 0;transform: translateY(70px)}
.intro.on strong{display: block;transform: translateY(0);opacity: 1;transition: 1.2s;transition-delay: 0.3s}
.intro strong b{font-weight: 500;color: #3B486B}
.main_visual{width:100%;position: fixed; z-index: 3; height: 100vh;background: #fff;}
.main_visual .main_slider{ height:100%;overflow: hidden; position: relative;}
.main_visual .main_slider .slide_box .slide_bg{background: #17273c; opacity: 0.9; position: absolute; top: 0;left: 0; width: 245px; height: 100%}
.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: 0; top: 0; 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 .main_img:after{ content:""; display: block ;width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.1); z-index: 1; }
.main_visual .main_slider .slide_box .main_img:before{ content:""; display: block ;width: 100%; height: 262px; position: absolute; left: 0; top: 0; z-index: 1;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  opacity: .2;
}
.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  > div.on .main_img{ transform:perspective(500px) rotate(.001deg);}

.main_visual .main_slider .slide_box .main_img .videobcg.pc{display: block}
.main_visual .main_slider .slide_box .main_img .videobcg.pc video{width: 1920px;}
.main_visual .main_slider .slide_box .main_img .videobcg.mo{display: none}


/* padding-top:360px; */
.main_visual .main_slider .slide_box .in_obj{text-align: left; position: absolute; top:45%; transform: translate(0,-50%); padding-top: 0;width: 1280px;left: 50%;margin-left: -640px; z-index: 999}
.main_visual .main_slider .slide_box .in_obj .wrap_t{margin-bottom: 25px;}

.main_visual .main_slider .slide_box div strong{ display: block; position: relative;left:30px; opacity:0;
font-weight: 300;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
-moz-transition: l eft 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
-ms-transition: left 1s;
transition: left 1s;
transition-delay: 0.6s;
}
.main_visual .main_slider .slide_box div div.wrap_tit{display: block; opacity:0;
-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 span{  display: block; position: relative;opacity:0; left:30px;
-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.7s;
}
.main_visual .main_slider .slide_box div span em{font-style: normal;font-weight: 700}


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

.main_visual .main_slider .slide_box div div.wrap_tit ul:after{content: ''; display: block; clear: both;}
.main_visual .main_slider .slide_box div div.wrap_tit ul li{float: left; width: 130px; margin-right: 15px}
.main_visual .main_slider .slide_box div div.wrap_tit ul li:last-child{margin-right: 0}
.main_visual .main_slider .slide_box div div.wrap_tit ul li a{display: block; height: 170px; border: 1px solid rgba(255,255,255,0.4);text-align: center;box-sizing: border-box; padding-top: 42px; transition: 0.8s}
.main_visual .main_slider .slide_box div div.wrap_tit ul li:hover a{background: rgba(5,90,206,0.8); border-color: rgba(5,90,206,0.8)}
.main_visual .main_slider .slide_box div div.wrap_tit ul li a em{display: block; color: #ffffff; letter-spacing: -0.5px; line-height: 30px; margin-top: 30px;}
.main_visual .main_slider .slide_box div div.wrap_tit ul li:first-child a em{margin-top: 14px; }

.main_visual .main_slider .slide_box div div.wrap_tit ul li{opacity: 0;transform: translateX(30px);transition: 1s}
.main_visual .main_slider .slide_box div.on div.wrap_tit ul li{opacity: 1;transform: translateX(0)}
.main_visual .main_slider .slide_box div.on div.wrap_tit ul li:nth-child(1){transition-delay: 0.9s}
.main_visual .main_slider .slide_box div.on div.wrap_tit ul li:nth-child(2){transition-delay: 1.2s}
.main_visual .main_slider .slide_box div.on div.wrap_tit ul li:nth-child(3){transition-delay: 1.5s}
.main_visual .main_slider .slide_box div.on div.wrap_tit ul li:nth-child(4){transition-delay: 1.7s}

.main_visual .main_slider .slide_box > div .wrap_tit > em{color: #fff; font-size: 22px; letter-spacing: -0.25px;  font-style: normal; position: relative; left: 30px;transition: 0.8s; transition-delay: 0.3s; position: relative; margin-bottom: 20px;}
.main_visual .main_slider .slide_box > div.on .wrap_tit > em{left: 0;transition-delay: 0.3s}
.main_visual .main_slider .slide_box > div strong{ display: block;color: #fff;font-size: 50px;line-height:76px; }
.main_visual .main_slider .slide_box > div.box3 strong{color: #111}
.main_visual .main_slider .slide_box > div.box3 strong em{color: #111}

.main_visual .main_slider .slide_box .in_inner{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; text-align: center; width: 100%; }
.main_visual .main_slider .slide_box .in_inner .sein svg{ display: block; margin: 0 auto; }
.main_visual .main_slider .slide_box .in_inner p{ font-size: 40px; margin-top: 30px; font-weight: 300; color: #fff; width: 100%; }
.main_visual .main_slider .slide_box .in_inner p b{ font-weight: 500; }


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .main_visual .main_slider .slide_box > div strong{margin-bottom: 10px}
}

.main_visual .main_slider .slide_box > div strong em{font-style: normal; font-weight: 700;color: #fff;}

.main_visual .main_slider .slide_box > div span { font-size:16px;letter-spacing: -0.25px;line-height:34px;display: block;color: #e6e5e5;  font-weight: 300}

.main_visual .btn_wrap{position: absolute; z-index: 20; bottom: 70px; left: 60px; display: flex; }
.main_visual .btn_wrap > *{ transition: 0.5s}
.main_visual .btn_wrap .slick-prev{margin-right: 10px;}
.main_visual .btn_wrap .stop_btn{width: 20px;height: 20px;background: url(/img/main/stop.png);margin-left: 10px; margin-right: 10px; }
.main_visual .btn_wrap .stop_btn.play{background: url(/img/main/play.png); background-size: 100% 100% !important}

.main_visual .thum{ display: flex; align-items: center; }
.main_visual .thum li{ margin-left: 12px; width: 60px; height: 4px; background-color: rgba(255,255,255,0.3); position: relative; cursor: pointer; }
.main_visual .thum li:last-child{ display: none; }
.main_visual .thum li:first-child{ margin-left: 0; }
.main_visual .thum li:after{ content:""; display: block; width: 0; height: 100%; position: absolute; left: 0; top: 0; background-color: #fff; }
.main_visual .thum li.on:after{ width: 100%; transition: width 9s linear; }


.vis_w{ height: 200vh; position: relative; z-index: -1; }
.vis_w2{ height: 100vh; position: relative; z-index: -1; }

.main_rec{ width: 100%; height: 100vh; position: fixed; z-index: 10; display: none; }
.main_rec > div{ width: 100%; height: 0%; position: absolute; background-color: #fff;
  /* clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); */
}

.main_rec > div{height: 33.33%;transition-duration: 1s}
.main_rec.on > div{height: 0%;transition-duration: 1s}
.main_rec > div:nth-child(1){ left: 0; top: 0; }
.main_rec > div:nth-child(2){ left: 0; top: 33.333333333333%; }
.main_rec > div:nth-child(3){ left: 0; top: 66.666666666666%; }

.main_rec > div{height: 33.33%}
.main_rec.on > div{height: 0%;transition-duration: 1s}

.main_visual .main_slider .slide_box > div .in_inner .sein svg{ overflow: visible; }
.main_visual .main_slider .slide_box > div .in_inner .sein svg #SYM #S{ transform: translate(0, -40.36px); transition: transform 1s, opacity 1s; opacity: 0; }
.main_visual .main_slider .slide_box > div.on .in_inner .sein svg #SYM #S{ transform: translate(0, 0.36px); opacity: 1; }


.main_visual .main_slider .slide_box > div .in_inner .sein svg #SYM #I{ transform: translate(128.371px, 40.50px); transition: transform 1s, opacity 1s; opacity: 0; }
.main_visual .main_slider .slide_box > div.on .in_inner .sein svg #SYM #I{ transform: translate(128.371px, 0.50px); opacity: 1; }

.main_visual .main_slider .slide_box > div .in_inner .sein svg #SYM #N{ transform: translate(52.624px, -40.273px); transition: transform 1s, opacity 1s; opacity: 0; }
.main_visual .main_slider .slide_box > div.on .in_inner .sein svg #SYM #N{ transform: translate(52.624px, 0.273px); opacity: 1; }

.main_visual .main_slider .slide_box > div .in_inner .sein svg #SYM #E{ clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path 1s; transition-delay: .4s; }
.main_visual .main_slider .slide_box > div.on .in_inner .sein svg #SYM #E{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

.main_visual .main_slider .slide_box > div .in_inner .wrap > p{ letter-spacing: 10px; opacity: 0; filter: blur(10px); transition: letter-spacing 1s, opacity 1s, filter 1s; transition-delay: .3s; }
.main_visual .main_slider .slide_box > div.on .in_inner .wrap > p{ letter-spacing: 0; opacity: 1; filter: blur(0); }

#smoother-wrapper{ position: relative; z-index: 2; }
#smoother-wrapper.on{ z-index: 4; }
#main .wrap{ padding: 0 60px; }

#main .scroll_down{ position:fixed; right: 60px; bottom: 60px; display: flex; align-items: center; z-index: 5; }
#main .scroll_down strong{ display: block; font-size: 16px; font-weight: 500; color:#FFFFFF; margin-right: 17px; }
#main .scroll_down span{ display: block; width: 4px; height: 40px; background-color: rgba(255,255,255,0.3); position: relative; }
#main .scroll_down span:after{ content:""; display: block; width: 4px; height: 4px; position: absolute; left: 0; top: 0; background-color: #fff; animation: sc 3s linear infinite; }

@keyframes sc {
  100%{
    transform: translateY(36px);
  }
}

#main .m_tit span{ display: block; font-size: 18px; font-weight: 500; color:#FFFFFF; margin-bottom: 20px; }
#main .m_tit strong{ font-size: 36px; line-height: 1.5em; color:#FFFFFF; display: block; }
#main .m_btn{ width: 200px; height: 50px; position: relative; }
#main .m_btn:before{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #fff; border-radius: 10px;
  transition: transform .3s, opacity .3s; opacity: 0; transform: scale(0.9);
}
#main .m_btn a{ display: block; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; color:#FFFFFF; z-index: 1; position: relative; }
#main .m_btn a:after{ content:""; display: block; width: 100%; height: 100%; border-radius: 10px; border: 1px solid #FFFFFF; position: absolute; left: 0; top: 0;
  transition: transform .3s, opacity .3s;
  box-sizing: border-box;
}
#main .m_btn a svg{ margin-left: 8px; transition: transform .3s, margin .3s; }
#main .m_btn a svg path{ transition: stroke: .3s; }
#main .m_btn a:hover svg{ transform: rotate(45deg); margin-left: 18px; }
#main .m_btn a:hover:after{ transform: scale(1.1); opacity: 0; }
#main .m_btn:hover:before{ transform: scale(1); opacity: 1; }
#main .m_btn a:hover{ color: #3B486B; }
#main .m_btn a:hover svg path{ stroke: #3b486b; }


#main .m_tit span{ opacity: 0; transition: letter-spacing 1s, opacity 1s, filter 1s; letter-spacing: 5px; filter: blur(10px); }
#main .m_tit strong{ opacity: 0; transition: letter-spacing 1s, opacity 1s, filter 1s; letter-spacing: 5px; filter: blur(10px); transition-delay: .2s; }
#main .m_btn{ opacity: 0; transition: opacity 1s, filter 1s; filter: blur(10px); transition-delay: .4s; }

#main .on .m_tit span{ opacity: 1; letter-spacing: 0; filter: blur(0); }
#main .on .m_tit strong{ opacity: 1; letter-spacing: 0; filter: blur(0); }
#main .on .m_btn{ opacity: 1; filter: blur(0); }


#main .service_tab{height: 72px;
/*#main .service_tab{ position: fixed; z-index: 7; left: 50%; bottom: 45px; transform: translate(-50%,170%); height: 72px;*/
  border-radius: 10px; background-color: rgba(0,0,0,0.25); backdrop-filter: blur(20px); transition: transform 1s; display: none;
}
#main .service_tab ul{ display: flex; height: 100%; align-items: center; width: 1360px; justify-content: center; }
#main .service_tab ul li{ margin-right: 30px; }
#main .service_tab ul li:last-child{ margin-right: 0; }
#main .service_tab ul li a{ display: block; color: rgba(255,255,255,0.5); font-size: 18px; font-weight: 400; position: relative; transition: color .3s; }
#main .service_tab ul li a:after{ content:""; display: block; width: 100px; height: 40px; background: url('/img/main/menu_hover.png') center center no-repeat; position: absolute; left: 50%;
  top:0; transform: translate(-50%,-43px); z-index: -5; opacity: 0; transition: opacity .3s;
}
#main .service_tab ul li:hover a:after{ opacity: 1; }
#main .service_tab ul li:hover a{ color: #fff; }

/*#main .service_tab.on{ transform: translate(-50%,0); }*/

#main .con00{ background-color: #fff; height: 100vh; position: relative; }
#main .con00 .box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; }
#main .con00 .box svg{ display: block; margin: 0 auto; transform: scale(10);}
#main .con00 .box p{ font-size: 24px; color:#333333; margin-top: 40px; letter-spacing: 3px; opacity: 0; filter: blur(10px);
  transition: letter-spacing 1s, opacity 1s, filter 1s; text-align: center;
}
#main .con00 .box p b{ font-weight: 600; color:#3B486B; }

#main .con00 .box svg path{ transition: fill .3s; }
#main .con00.on .box svg #E1{ fill: #3B486B }
#main .con00.on .box svg #E2{ fill: #3B486B }
#main .con00.on .box svg #E3{ fill: #3B486B }
#main .con00.on .box p{ letter-spacing: 0; opacity: 1; filter: blur(0); }

/* con01 */

#main .con01{ background-color: #fff; padding-bottom: 155px; margin-top: 0;padding-top: 150px }
#main .con01 .wrap > ul{ display: flex;  }
#main .con01 .wrap > ul > li{ width: 33.3333333333%; margin-right: 60px; position: relative; }
#main .con01 .wrap > ul > li:last-child{ margin-right: 0; }
#main .con01 .wrap > ul > li .img{ position: relative; }
#main .con01 .wrap > ul > li .img:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url('/img/main/con01_line.png') center center no-repeat; background-size: 100% 100%; }
#main .con01 .wrap > ul > li .img img{ display: block; border-radius: 10px; max-width: 100%; }
#main .con01 .wrap > ul > li .txt{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#main .con01 .wrap > ul > li .txt span{ display: block; width: 120px; height: 44px; background: url('/img/main/con01_tag.png') center center no-repeat; line-height: 44px; text-align: center;
  color: #fff; font-size: 18px; font-weight: 500; margin: 0 auto; margin-bottom: 30px;
}

#main .con01 .wrap > ul > li{ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 1.5s; }
#main .con01.on .wrap > ul > li{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

#main .con01 .wrap > ul > li:nth-child(1){ transition-delay: .3s; }
#main .con01 .wrap > ul > li:nth-child(2){ transition-delay: .5s; }
#main .con01 .wrap > ul > li:nth-child(3){ transition-delay: .7s; }


#main .con01 .wrap > ul > li .txt .number{ position: relative;  }
#main .con01 .wrap > ul > li .txt .num_w{ overflow: hidden; height: 100px; text-align: center; border-bottom: 2px solid #fff; }
#main .con01 .wrap > ul > li .txt .num_w .num{ display: inline-block; display: flex; justify-content: center; }
#main .con01 .wrap > ul > li .txt .num_w ul{ margin-left: -0.2em; }
#main .con01 .wrap > ul > li .txt .num_w ul > li{ line-height: 1em; font-size: 100px; font-weight: 600; color:#fff; }
#main .con01 .wrap > ul > li .txt .number:after{ content:"개"; display: block; font-size: 18px; font-weight: 600; color:#FFFFFF; position: absolute; right: -5px; bottom: 12px; transform: translate(100%,0); z-index: 1; }
#main .con01 .wrap > ul > li:nth-child(2) .txt .number:after{ content:"명"; }
#main .con01 .wrap > ul > li:nth-child(3) .txt .number:after{ content:"곳"; }

#main .con01 .wrap > ul > li .txt .num_w .ul01{ transform: translateY(-90.9%); transition: transform 3s; }
#main .con01.on .wrap > ul > li .txt .num_w .ul01{ transform: translateY(0);  }

#main .con01 .wrap > ul > li .txt .num_w .ul02{ transform: translateY(0); transition: transform 3s; }
#main .con01.on .wrap > ul > li .txt .num_w .ul02{ transform: translateY(-90.9%);  }

#main .con01 .wrap > ul > li .txt .num_w .ul03{ transform: translateY(-90.9%); transition: transform 3s; }
#main .con01.on .wrap > ul > li .txt .num_w .ul03{ transform: translateY(0);  }

#main .con01 .wrap > ul > li .txt .num_w .ul04{ transform: translateY(0); transition: transform 3s; }
#main .con01.on .wrap > ul > li .txt .num_w .ul04{ transform: translateY(-90.9%);  }

#main .con02{ background-color: #0E1A3D; position:relative; padding-top: 165px;padding-bottom: 125px}
#main .con02 .m_tit{text-align: center}
#main .con02 .service_tab{width: 1360px;margin: 0 auto;margin-top: 43px}
#main .con02_mbtn .m_btn{ margin: 0 auto; margin-top: 45px; }
#main .con02_mbtn{ position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) !important; text-align: center; z-index: 5; opacity: 0; display: none;
  filter: blur(10px); transition: opacity .3s, filter .3s; }

#main .con02_mbtn.on{ opacity: 1; z-index: 5; filter: blur(0); }

#main .con02_mbtn span{ opacity: 0; transition: letter-spacing 1s, opacity 1s, filter 1s; letter-spacing: 5px; filter: blur(10px); transition-delay: .3s; }
#main .con02_mbtn strong{ opacity: 0; transition: letter-spacing 1s, opacity 1s, filter 1s; letter-spacing: 5px; filter: blur(10px); transition-delay: .5s; }
#main .con02_mbtn .m_btn{ opacity: 0; transition: opacity 1s, filter 1s; filter: blur(10px); transition-delay: .7s; }

#main .con02_mbtn.on span{ letter-spacing: 0; filter: blur(0); opacity: 1; }
#main .con02_mbtn.on strong{ letter-spacing: 0; filter: blur(0); opacity: 1; }
#main .con02_mbtn.on .m_btn{ filter: blur(0); opacity: 1; }

#main .con02 .list{ display: flex; width: 100%; justify-content: space-between; padding-top: 30px; position: relative; z-index: 6; padding-bottom: 30px; }
#main .con02 .list ul{ display: flex; width: 600px; flex-wrap: wrap; flex-direction: row-reverse; align-items: flex-start; }
#main .con02 .list{  margin-bottom: 70px; position: relative; }
#main .con02 .list:last-child{ margin-bottom: 0; }
#main .con02 .list a{ display: block; position: relative; overflow: hidden; }
#main .con02 .list a:before{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url('/img/main/service_shadow.png') center center no-repeat; border-radius: 10px; transition: transform .3s; }
#main .con02 .list a:hover:before{ transform: scale(1.07, 1.05); }
#main .con02 .list:nth-child(2n+0){margin-left: 0; }
#main .con02 .list .img{ position: relative; z-index: 1; }
#main .con02 .list .img:after{ content:""; display: block; width: 100%; height: 100%; border-radius: 9px; background-color: rgba(0,0,0,0.75); backdrop-filter: blur(20px); position: absolute; left: 0; top: 0;
opacity: 0; transition: opacity .3s;
}
#main .con02 .list .img:before{ content:""; display: block; width: 100%; height: 100%; border-radius: 9px; background:url('/img/main/service_line.png') center center no-repeat; position: absolute;
left: 0; top: 0; z-index: 1; background-size: 100% 100%;
opacity: 0; transition: opacity .3s;
}
#main .con02 .list .img img{ display: block; border-radius: 10px; width: 100%}
#main .con02 .list .txt{ position: absolute; left: 0; bottom: 0; padding: 30px; padding-top: 0; z-index: 2; transition: transform .3s; transform: translateY(72px); }
#main .con02 .list .txt i{ display: block; margin-bottom: 10px; border-radius: 10px; background-color: rgba(255,255,255,0.1); backdrop-filter: blur(4px); width: 60px; }
#main .con02 .list .txt strong{ display: block; font-size: 20px; font-weight: 600; color:#FFFFFF; }
#main .con02 .list .txt p{ margin-top: 20px; color: #B5BEB4; font-size: 16px; line-height: 1.5em; opacity: 0; transition: opacity .3s; }

#main .con02 .list ul:nth-child(1){ margin-top: 140px; }
#main .con02 .list ul:nth-child(1) li:nth-child(2){ margin-top: 260px; }
#main .con02 .list ul:nth-child(1) li:nth-child(3){ margin-top: -240px; }
#main .con02 .list ul:nth-child(1) li:nth-child(5){ margin-top: -240px; }

#main .con02 .list .swiper-slide{width: 280px;transition: 3.5s}
#main .con02 .list ul:nth-child(2){ flex-direction: row; }
#main .con02 .list ul:nth-child(2) li{ margin-right: 20px; margin-left: 0; }
#main .con02 .list ul:nth-child(2) li:nth-child(2n+0){ margin-right: 0; }
#main .con02 .list ul:nth-child(2) li:nth-child(2){ margin-top: 260px; }
#main .con02 .list ul:nth-child(2) li:nth-child(3){ margin-top: -240px; }
#main .con02 .list ul:nth-child(2) li:nth-child(5){ margin-top: 120px; }

/*#main .con02 .list{ transform: translateY(50px); opacity: 0; transition: transform 1.2s, opacity 1.2s; }*/
#main .con02.on .list ul li{ transform: translateY(0); opacity: 1; }
#main .con02.on .list ul li:nth-child(1){ transition-delay: .3s; }
#main .con02.on .list ul li:nth-child(2){ transition-delay: .5s; }
#main .con02.on .list ul li:nth-child(3){ transition-delay: .7s; }
#main .con02.on .list ul li:nth-child(4){ transition-delay: .9s; }
#main .con02.on .list ul li:nth-child(5){ transition-delay: 1.1s; }
#main .con02.on .list ul li:nth-child(6){ transition-delay: 1.3s; }



#main .con02 .list a:hover .img:after{ opacity: 1; }
#main .con02 .list a:hover .img:before{ opacity: 1; }
#main .con02 .list a:hover .txt{ transform: translateY(0); }
#main .con02 .list a:hover .txt p{ opacity: 1; }



#main .con03 .form_w{ opacity: 0; transition: opacity 1s; transition-delay: .4s; }
#main .con03.on .form_w{ opacity: 1; }

#main .con03 .video_w{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

#main .con03{ position: relative; height: 100vh; overflow: hidden}
#main .con03 .box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);text-align: center; }
#main .con03 .m_btn{ margin: 0 auto; margin-top: 40px; }
#main .con03 .form_w{ margin-top: 30px; }
#main .con03 .form_w form{ display: flex;  height: 60px;}
#main .con03 .form_w select{ width: 208px; height: 100%; border-radius: 10px;
  background: url('/img/main/select_arrow.png') right 28px center no-repeat;
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: brightness(115%) blur(15px);
  -webkit-backdrop-filter: brightness(115%) blur(15px);
  border: none;
  padding-left: 28px; color:#FFFFFF;
  font-size: 20px;
  margin-right: 20px;
}
#main .con03 .form_w select option{ color: #333; }
#main .con03 .form_w select {
   -webkit-appearance:none; /* for chrome */
   -moz-appearance:none; /*for firefox*/
   appearance:none;
}

#main .con03 .form_w select::-ms-expand{
   display:none;/*for IE10,11*/
}
#main .con03 .form_w input{ width: 320px; height: 100%; border-radius: 10px;
  background-color: rgba(255,255,255,.1);
  backdrop-filter: brightness(115%) blur(15px);
  -webkit-backdrop-filter: brightness(115%) blur(15px);
  border: none;
  padding-left: 28px; color:#FFFFFF;
  font-size: 20px;
}
#main .con03 .form_w input::placeholder{ color: #fff; }



#main .con04{ height: 100vh; background-color: #0E1A3D; position: relative; }
#main .con04:after{ content:""; display: block; width: 579px ; height: 100%; position: absolute; left: 0; top: 50%; transform: translate(0,-50%);
  background: url('/img/main/con04_bg.png') center center no-repeat;
}
#main .con04 .wrap{ display: flex; justify-content: space-between; align-items: center; height: 100%; }
#main .con04 .m_btn{ margin-top: 60px; }
#main .con04 .m_tit{ position: relative; z-index: 1; }
#main .con04 .map_wrap svg{ height: 100%; width: auto; }
#main .con04 .map_wrap #maps #PINS > g{ opacity: 0; transition: transform 1s, opacity 1s; }
#main .con04.on .map_wrap #maps #PINS > g{  opacity: 1; }
/*
#main .con04 .map_wrap #maps #PINS > g{ transform: translateY(-20px); opacity: 0; transition: transform 1s, opacity 1s; }
#main .con04.on .map_wrap #maps #PINS > g{ transform: translateY(0); opacity: 1; }

*/
#main .con04.on .map_wrap #maps #PINS > g:nth-child(1){ transition-delay: 1.3s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(2){ transition-delay: 1.2s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(3){ transition-delay: 1.1s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(4){ transition-delay: 1s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(5){ transition-delay: .9s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(6){ transition-delay: .8s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(7){ transition-delay: .7s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(8){ transition-delay: .6s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(9){ transition-delay: .5s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(10){ transition-delay: .4s; }
#main .con04.on .map_wrap #maps #PINS > g:nth-child(11){ transition-delay: .3s; }
#main .con04.on .map_wrap #maps #PINS > g #POINT{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-2{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-3{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-4{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-5{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-6{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-7{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-8{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-9{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-10{ opacity: 0; animation: pins 1s linear infinite; }
#main .con04.on .map_wrap #maps #PINS > g #POINT-11{ opacity: 0; animation: pins 1s linear infinite; }

@keyframes pins {
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

#main .con05{ background-color: #fff; padding-top: 140px; padding-bottom: 180px; }
#main .con05 .m_tit { text-align: center; }
#main .con05 .m_tit span{ color:#3B486B;  }
#main .con05 .m_tit strong{ color: #000000; }

#main .con05 .list{ display: flex; margin-top: 80px; gap: 60px; }
#main .con05 .list > div{ width: 50%; }
#main .con05 .list > div > div{ margin-bottom: 40px; }
#main .con05 .list > div > div:last-child{ margin-bottom: 0; }
#main .con05 .list .n_tit{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
#main .con05 .list .n_tit strong{ font-size: 28px; font-weight: 700; color: #000000; }
#main .con05 .list .n_tit a{ transition: transform .3s; }
#main .con05 .list .n_tit a svg path{ transition: stroke .3s; }
#main .con05 .list .n_tit a:hover svg path{ stroke: #3B486B; }
#main .con05 .list .n_tit a:hover{ transform: translateX(5px);}
#main .con05 .list ul li a{ padding: 40px; border-radius: 12px; background-color: #fff; display: block; text-align: left; box-shadow: 0 0 40px rgba(152,152,152,0.16);
  transition: box-shadow .3s, background .3s;
}
#main .con05 .list ul{ display: flex; }
#main .con05 .list ul li{ width: 49%; margin-right: 2%; }
#main .con05 .list ul li:last-child{ margin-right: 0; }
#main .con05 .list ul li a strong{ display: block; font-size: 22px; line-height: 1.5em; font-weight: 600; color: #3A3A3A;  margin-bottom: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#main .con05 .list ul li a p{ font-size: 18px; line-height: 1.5em; font-weight: 400; color:#656565; margin-bottom: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#main .con05 .list ul li a span{ display: block; font-size: 18px; color:#9E9E9E; }
#main .con05 .list ul li a:hover{ background-color: #0E1A3D; box-shadow: 0 0 0 rgba(152,152,152,0.16);}
#main .con05 .list ul li a:hover strong{ color: #fff; }
#main .con05 .list ul li a:hover p{ color:#BCC2D5; }
#main .con05 .list ul li a:hover span{ color:#8790AA; }

#main .con05 .list > div{ transform: translateY(40px); opacity: 0; transition: transform 1s, opacity 1s; }
#main .con05 .list > div:nth-child(1){ transition-delay: .3s; }
#main .con05 .list > div:nth-child(2){ transition-delay: .5s; }
#main .con05 .list > div:nth-child(3){ transition-delay: .7s; }

#main .con05.on .list > div{ transform: translateY(0); opacity: 1;}

#main .con05 .list .right ul li a{ padding: 0; box-shadow: none; position: relative; }
#main .con05 .list .right ul li a:hover{ background-color: transparent; box-shadow: none; }
#main .con05 .list .right ul li a .img{ position: relative; overflow: hidden; border-radius: 20px; }
#main .con05 .list .right ul li a .img:after{ content:""; display: block; width: 100%; height: 50%; position: absolute; left: 0; bottom: 0;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}
#main .con05 .list .right ul li a .img img{  display: block; width: 100%; transition: transform 1s; }
#main .con05 .list .right ul li a:hover .img img{ transform: scale(1.1); }
#main .con05 .list .right ul li a .txt{ padding: 30px; padding-bottom: 0; width: 100%; }
#main .con05 .list .right ul li a .txt p{ margin-bottom: 0; color: #444444 !important; }
#main .con05 .list .right ul li a .txt strong{ margin-top: 10px; color: #222222 !important;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

#main .con05 .banner{ padding-top: 126px; }
#main .con05 .banner ul{ display: flex;  }
#main .con05 .banner ul li{ width: 50%; margin-right: 40px; position: relative; }
#main .con05 .banner ul li:last-child{ margin-right: 0; }
#main .con05 .banner ul li .img img{ display: block; width: 100%; border-radius: 10px; }
#main .con05 .banner ul li .m_tit{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; }
#main .con05 .banner ul li .m_tit .m_btn{ margin: 0 auto; margin-top: 40px; }
#main .con05 .banner ul li .m_tit span{ color: #fff; }
#main .con05 .banner ul li .m_tit strong{ color: #fff; }

#main .con05 .banner ul li{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: clip-path 1s; }
#main .con05 .banner.on ul li{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

#main .con05 .banner ul li .img img{ transform: scale(1.2); transition: transform 1s;  }
#main .con05 .banner.on ul li .img img{ transform: scale(1); }


@media(max-width:1480px){
  #main .con02 .list .img img{ width: 190px; }
  #main .con02 .list .txt{ transform: translateY(0);}
  #main .con02 .list .txt p{ display: none; }
  #main .con02 .list .txt{ padding: 20px; padding-right: 0; width: 100%; }
  #main .con02 .list .txt i{ width: 40px; }
  #main .con02 .list .txt i img{ width: 100%; }
  #main .con02 .list .txt strong{ font-size: 16px; }
  #main .con02 .list ul{ width: 400px; }
  #main .service_tab ul li a{ font-size: 14px; }
  #main .service_tab ul li{ margin-right: 30px; }
  #main .service_tab{ width: 90%; }
  #main .con04 .m_tit{ width: 40%; }
  #main .con04 .wrap .map_wrap{ width: 60%; }
  #main .con04 .wrap .map_wrap svg{ width: 100%; height: auto; }
  #main .con04:after{ display: none; }
  #main .con04{ height: auto; }
  #main .con05 .list .n_tit strong{ font-size: 20px; }
  #main .con05 .list .n_tit a svg{ width: 18px; height: auto; }
  #main .con05 .list ul li a{ padding: 25px; }
  #main .con05 .list ul li a strong{ font-size: 18px; margin-bottom: 10px; }
  #main .con05 .list ul li a p{ font-size: 14px; margin-bottom: 15px; }
  #main .con05 .list ul li a span{ font-size: 14px; }
  #main .con05 .list{ margin-top: 40px; }
  #main .con05{ padding-top: 80px; padding-bottom: 100px; }
  #main .con05 .banner{ padding-top: 80px; }
  #main .m_tit span{ font-size: 14px; margin-bottom: 10px; }
  #main .m_tit strong{ font-size: 24px; }
  #main .m_btn{ width: 140px; height: 40px;  }
  #main .m_btn a{ font-size: 14px; }
  #main .con05 .banner ul li .m_tit .m_btn{ margin-top: 20px; }
  #main .con05 .banner ul li{ margin-right: 20px; }
  #main .service_tab ul{ width: 100%; }
  #main .con03 .form_w select{ width: 140px; padding-left: 15px; margin-right: 10px; font-size: 14px; background-position: right 15px center; background-size: 10px; }
  #main .con03 .form_w input{ width: 220px;padding-left: 15px; font-size: 14px; }
  #main .con03 .form_w form{ height: 42px; }
}


@media(max-width:1280px){
  #main .con01 .wrap > ul > li{ margin-right: 30px; }
    #main .wrap{ padding: 0 20px; }
    #main .con01 .wrap > ul > li .txt .num_w{ height: 60px; }
    #main .con01 .wrap > ul > li .txt .num_w ul > li{ font-size: 60px; }
    #main .con01 .wrap > ul > li .txt span{ width: 90px; height: 38px; line-height: 38px; background-size: 100% 100%; margin-bottom: 20px; font-size: 15px; }
    #main .con01 .wrap > ul > li .txt .number:after{ font-size: 14px; }
    #main .con01{ padding-bottom: 100px; }
}

@media(max-width:1080px){
  #main .con00 .box svg{ width: 180px; height: auto; }
  #main .con00 .box p{ font-size: 18px; margin-top: 20px; }
  #main .con02_mbtn .m_btn{ margin-top: 20px; }
  #main .con05 .list{ flex-flow: column; gap: 40px; }
  #main .con05 .list > div{ width: 100%; }
  #main .con05 .list > div > div{ margin-bottom: 20px; }
  #main .con05 .list .right ul li a .img{ border-radius: 12px; }
}

@media(max-width:850px){
    .intro .title{gap: 20px}
    .intro strong{        font-size: 22px;}
    .intro svg{width: 160px;height: auto}
  .main_visual .main_slider .slide_box > div .in_inner .sein svg{ width: 160px; height: auto; }
  .main_visual .main_slider .slide_box .in_inner p{ font-size: 22px; margin-top: 20px; }
  .main_visual .btn_wrap{ left: 20px; bottom: 30px; }
  .main_visual .thum li{ width: 30px; height: 3px; margin-left: 6px; }
  .main_visual .btn_wrap .stop_btn{ margin: 0 5px; }
  #main .scroll_down strong{ font-size: 12px; margin-right: 8px; }
  #main .scroll_down{ right: 20px; bottom: 30px; }
  #main .con03{ height: 500px; position: relative; overflow: hidden; }
  #main .con03 .video_w{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
  #main .con02 .list ul{ display: block; width: auto; }
/*  #main .con02 .list{ margin-left: 0; margin-right: 0; margin-bottom: 40px !important; margin-top: 0 !important; ; }*/
/*  #main .con02 .list{ margin-left: 0; margin-right: 0; margin-bottom: 40px !important; margin-top: 0 !important; width: 190px; }*/
  #main .con02 .list .img img{ width: 100%;  }
  #main .con02 .list .img:before{ display: none; }
/*  #main .con02 .list{ padding-top: 100px; }*/
  #main .service_tab{ display: none !important; }
  #main .con04 .m_btn{ margin-top: 20px; }
  #main .con04 .m_tit{ width: 100%; }
  #main .con04 { padding-top: 60px; }
  #main .con04 .wrap{ display: block; }
  #main .con04 .wrap .map_wrap{ width: 100%; margin-top: -100px; }
  #main .con05 .list{ display: block; }
  #main .con05 .list > div{ width: 100%; margin-right: 0; margin-bottom: 20px; }
  #main .con05 .list .n_tit{ margin-bottom: 10px; }
  #main .con05 .list ul li a{ padding: 18px; border-radius: 8px; }
  #main .con05 .list ul li a strong{ font-size: 14px; margin-bottom: 4px; }
  #main .con05 .list ul li a p{ font-size: 12px; margin-bottom: 8px; }
  #main .con05 .list ul li{ margin-bottom: 8px; }
  #main .con05 .list ul li a span{ font-size: 12px; }
  #main .con05 .banner ul{ display: block; }
  #main .con05 .banner ul li{ width: 100%; margin-bottom: 10px; }
  #main .con05 .banner ul li:last-child{ margin-bottom: 0; }
  #main .con05 .banner{ padding-top: 40px; }
  #main .con05 .list .right ul li a .txt{ padding: 18px; padding-top: 0; }
  #main .con05 .list .right ul li a .txt strong{ margin-bottom: 4px; }
    #main .con02 .list a{width: 260px}
    #main .con02 .list .swiper-slide{width: 260px}
    #main .con02{padding: 60px 0}
}

@media(max-width:640px){
  #main .con00 .box{ padding: 0 20px; }
  #main .con00 .box p{ font-size: 14px; word-break: keep-all; }
  #main .con01 .wrap > ul{ display: block; }
  #main .con01 .wrap > ul > li{ width: 70%; margin: 0 auto !important; margin-bottom: 12px !important; }
  #main .con01 .wrap > ul > li:last-child{ margin-bottom: 0 !important; }
  #main .con01 .wrap > ul > li .txt .num_w ul > li{ font-size: 30px; }
  #main .con01 .wrap > ul > li .txt .num_w{ height: 30px; }
  #main .con01 .wrap > ul > li .txt span{ width: 58px; height: 28px; font-size: 13px; line-height: 28px; }
  #main .con01{ padding-bottom: 60px; }
/*
  #main .con02 .list{ padding-top: 60px; }
  #main .con02 .list ul:nth-child(2) li{ margin-right: 0!important;  }
*/
  #main .con03 .m_btn{ margin-top: 10px; }
  #main .con03 .form_w{ margin-top: 10px; }
  #main .m_tit span{ font-size: 12px; margin-bottom: 4px; }
  #main .m_tit strong{ font-size: 18px; }
  #main .con05{ padding-top: 60px; padding-bottom: 60px; }
  #main .con04 .wrap{ height: auto; }

}


@media(max-width:540px){
     .intro .title{gap: 10px}
    .intro strong{        font-size: 16px;}
    .intro svg{width: 120px;height: auto}
/*  #main .con02 .list{ width: 120px; }*/
  #main .con02 .list .txt strong{ font-size: 13px; }
  #main .con02 .list .txt i{ width: 24px; margin-bottom: 5px; }
  #main .con02 .list .txt{ padding: 10px; }
  .main_visual .main_slider .slide_box > div .in_inner .sein svg{ width: 120px; }
  .main_visual .main_slider .slide_box .in_inner p{ font-size: 16px; margin-top: 10px; }
  #footer .scroll_top{ width: 32px; height: 32px; top: -20px; }
  #footer .scroll_top a span{ background-size: 16px !important;}
  #footer .foot .innerwrap .family>a{ width: 100%; }
  #footer .foot .innerwrap .family{ position: static; }
  #footer .foot .innerwrap ul.snslink{ margin-top: 20px; }
  #main .con04 .wrap .map_wrap{ margin-top: 0; }
  #footer .foot .innerwrap ul.snslink{ position: static; }
  #main .con02_mbtn{ width: 100%; }
  #main .con03 .form_w form{ flex-flow: column; height: 80px; }
  #main .con03 .form_w select{ width: 100%; margin-right: 0; margin-bottom: 4px; }
  #main .con03 .form_w input{ width: 100%; }
  #main .con03 .box{ width: 100%; padding: 0 20px; }
  #main .con05 .list .n_tit strong{ font-size: 16px; }
  #main .con05 .banner ul li .m_tit .m_btn{ margin-top: 10px; }
  #main .m_tit strong{ font-size: 16px; }
  .main_visual .btn_wrap{ display: none; }


}

/*  */