@font-face {
    font-family: 'InkLipquid';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#header #logo svg *{ transition: fill .3s; }

.fp-viewing-main #quick > .wrap{background: rgba(255,255,255,0.1);backdrop-filter: blur(10px)}
.fp-viewing-main #quick > .wrap{background: rgba(255,255,255,0.1);backdrop-filter: blur(10px)}
.fp-viewing-main #quick > .wrap path{fill: #fff}
.fp-viewing-main #quick > .wrap strong{color: #fff}
.fp-viewing-main #quick > .wrap li:hover strong{color: #fff}

.fp-viewing-why #quick > .wrap{background: rgba(255,255,255,0.1);backdrop-filter: blur(10px)}
.fp-viewing-why #quick > .wrap{background: rgba(255,255,255,0.1);backdrop-filter: blur(10px)}
.fp-viewing-why #quick > .wrap path{fill: #fff}
.fp-viewing-why #quick > .wrap strong{color: #fff}
.fp-viewing-why #quick > .wrap li:hover strong{color: #fff}
.fp-viewing-why #header #logo svg *{ fill: #2B6845; }
.fp-viewing-why #header.color #logo svg *{ fill: #fff; }

.fp-viewing-cordiality #header #logo svg *{ fill: #2B6845; }
.fp-viewing-cordiality #header .menu_open button i{ background-color: #2B2B2B; }
.fp-viewing-cordiality #header.wt #logo svg *{ fill: #fff; }
.fp-viewing-cordiality #header.wt .menu_open button i{ background-color: #fff; }



.fp-viewing-ideo #quick > .wrap{background: rgba(255,255,255,0.1);backdrop-filter: blur(10px)}
.fp-viewing-ideo #quick > .wrap{background: rgba(255,255,255,0.1);backdrop-filter: blur(10px)}
.fp-viewing-ideo #quick > .wrap path{fill: #fff}
.fp-viewing-ideo #quick > .wrap strong{color: #fff}
.fp-viewing-ideo #quick > .wrap li:hover strong{color: #333}
#intro{position: fixed;height: 100vh;width: 100%;z-index: 500;pointer-events: none; background: #285139;}
#intro .copy{position: absolute;width: 100%;top: 50%;transform: translateY(-50%);color: #FFFFFF;font-size: 50px;font-weight: 300;text-align: center}
#intro .copy strong{color: #FFFFFF;font-size: 50px;font-weight: 300;transition: 0.7s}

#intro .bg{position: absolute;width: 100%;height: 100vh; }
#intro .bg i{display: block;width: 33%;height: 100%;background: #285139; transition: 0.7s; position: absolute;}
#intro .bg i:nth-child(1){ left: 0; top: 0; }
#intro .bg i:last-child{ width: 34%; }
#intro .bg i:nth-child(2){ left: 33%; top: 0; }
#intro .bg i:nth-child(3){ left: 66%; top: 0; }

#intro .bg i{animation: int 1s;animation-fill-mode: forwards;animation-delay: 15s;transform-origin: left}
@keyframes int{
	0%{transform: scaleX(1)}
	100%{transform: scaleX(0)}
}
/*#intro .bg i:last-child{ margin-left: -1px; }*/
#quick .wrap{position: fixed;top: 50%;transform: translateY(-50%);right: 0;background: #FFFFFF;border-radius: 10px 0 0 10px;padding: 15px 0;z-index: 9999;box-shadow: 0 0 30px rgba(0,67,26,0.1)}
#quick .wrap ul li{position: relative}
#quick .wrap ul li a{display: block;padding: 16px 0;width: 100px;text-align: center}
#quick .wrap ul li a strong{display: block;font-size: 14px;color: #333333;line-height: 16px;margin-top: 6px; transition: color .3s; font-weight: 500; }
#quick .wrap ul li a path{transition: fill 0.3s; }
#quick .wrap ul li:hover a path{fill: #2B6845}
#quick .wrap ul li:after{content: '';display: block;width: 50px;height: 1px;position: absolute;bottom: 0;left: 50%;margin-left: -25px;background: rgba(255,255,255,0.2);}
#quick .wrap ul li:last-child:after{display: none}
.main_visual{position: relative;height: 100vh;overflow: hidden;width: 100%}
.main_visual .vis_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: #000}
.main_visual .vis_img > *{opacity: 0.75}
.main_visual .vis_img > video{width: 1920px;}
.main_visual .vis_text_wrap{position: absolute;width: 100%;top: 50%; transform: translate(0,-50%); height: 100%; display: flex;justify-content: space-between;align-items: center;width: 1520px; margin: 0 auto; left: 0; right: 0; }
.main_visual .vis_text_wrap .vis_text strong{display: block;font-size: 44px;color: #FFFFFF;font-weight: 400;margin-bottom: 55px; line-height: 1.7em; }
.main_visual .vis_text_wrap .vis_text strong i{display: inline-block;color: inherit;font-weight: inherit;position: relative; font-size: 60px; font-weight: 400; }
.main_visual .vis_text_wrap .vis_text p{font-family: "amandine", sans-serif;font-size: 20px;color: #fff ; letter-spacing: 0.1em; }
.main_visual .vis_text_wrap .vis_count{ position: absolute; right: 0; bottom: 90px; }
.main_visual .vis_text_wrap .vis_count > ul{display: flex;align-items: center; gap: 30px;}
.main_visual .vis_text_wrap .vis_count > ul > li{display: flex;align-items: center}
.main_visual .vis_text_wrap .vis_count > ul > li span{display: block;color: #fff;font-size: 18px;margin-bottom: 15px;}

.main_visual .vis_text_wrap .vis_count .p_info{ text-align: right; margin-top: 10px;  }
.main_visual .vis_text_wrap .vis_count .p_info p{ font-size: 14px; color: #fff; opacity: .5; }

/*
.main_visual .vis_text_wrap .vis_count > ul > li strong{font-size: 50px;color: #FFFFFF;font-family: "amandine", sans-serif;font-weight: 400}
.main_visual .vis_text_wrap .vis_count > ul > li strong em{font-size: 18px;color: #FFFFFF}
*/

.main_visual .vis_text_wrap .vis_count .num_box{ display: flex; gap: 10px; align-items: center; }
.main_visual .vis_text_wrap .vis_count .num_box > p{ margin-top: 10px; font-size: 18px; color:#FFFFFF; }
.main_visual .vis_text_wrap .vis_count .num_box .num_w{ overflow: hidden; height: 64px; position: relative; }
.main_visual .vis_text_wrap .vis_count .num_box .num_w .num{ display: flex; }
.main_visual .vis_text_wrap .vis_count .num_box .num_w .num ul li{ font-family: "amandine", sans-serif; font-size: 50px; line-height: 64px; color: #fff; font-weight: 600; text-align: center; }
.main_visual .vis_text_wrap .vis_count .num_box .num_w .num > span{ font-size: 50px; font-weight: 600; color: #fff; line-height: 64px; font-family: "amandine", sans-serif; }

.main_visual .vis_text_wrap .vis_count .num_box .num_w .ul01{ transform: translateY(-90.9%); transition: transform 4s ease-in-out; transition-delay: 16.3s; }
.main_visual.on .vis_text_wrap .vis_count .num_box .num_w .ul01{ transform: translateY(0);  }

.main_visual .vis_text_wrap .vis_count .num_box .num_w .ul02{ transform: translateY(0); transition: transform 4s ease-in-out; transition-delay: 16.3s; }
.main_visual.on .vis_text_wrap .vis_count .num_box .num_w .ul02{ transform: translateY(-90.9%);  }

.main_visual .vis_text_wrap .vis_count .num_box .num_w .ul03{ transform: translateY(-90.9%); transition: transform 4s ease-in-out; transition-delay: 16.3s; }
.main_visual.on .vis_text_wrap .vis_count .num_box .num_w .ul03{ transform: translateY(0);  }

.main_visual .vis_text_wrap .vis_count .num_box .num_w .ul04{ transform: translateY(0); transition: transform 4s ease-in-out; transition-delay: 16.3s; }
.main_visual.on .vis_text_wrap .vis_count .num_box .num_w .ul04{ transform: translateY(-90.9%);  }

.main_visual .vis_text_wrap .vis_count .num_box .num_w .ul05{ transform: translateY(-90.9%); transition: transform 4s ease-in-out; transition-delay: 16.3s; }
.main_visual.on .vis_text_wrap .vis_count .num_box .num_w .ul05{ transform: translateY(0);  }

.main_visual .vis_text_wrap .vis_count .num_box .num_w .ul06{ transform: translateY(0); transition: transform 4s ease-in-out; transition-delay: 16.3s; }
.main_visual.on .vis_text_wrap .vis_count .num_box .num_w .ul06{ transform: translateY(-90.9%);  }

.main_visual .scroll{ position: absolute; left: 60px; bottom: 60px; z-index: 10; animation: sc 1s ease-in-out infinite; }


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



.main_title{position: relative;z-index: 2}
.main_title strong{display: block;font-family: "amandine", sans-serif;font-size: 119px;color: #FFFFFF;font-weight: 400;margin-bottom: 15px;display: flex;}
.main_title strong i{color: inherit;font-weight: inherit;font-family: inherit}
.main_title strong i.mr{margin-right: 20px;}
.main_title p{font-size: 24px;color: #FFFFFF;font-weight: 300;line-height: 36px;}
.main_title p span{position: relative; font-weight: 500; }

#main .why .wrap{height: 100vh;position: relative}
#main .why .wrap .vis_img{height: 100%;position: absolute;width: 100%;overflow: hidden; }
#main .why .wrap .vis_img img{position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%}
#main .why .wrap .memo{ position: absolute; left: 50%; bottom: 0; z-index: 5; width: 1520px; transform: translate(-50%,0); }
#main .why .wrap .memo .bg{position: relative}

#main .why .wrap .memo .bg img{filter: drop-shadow(20px 20px 6px rgba(0,0,0,0.1))}
#main .why .wrap .memo .txt{position: absolute;top: 0;left: 0;padding-top: 75px;padding-left: 70px}
#main .why .wrap .memo .txt p{font-family: 'InkLipquid';font-size: 24px;color: #FFFFFF;margin-bottom: 10px;}
#main .why .wrap .memo .txt span{display: block;text-align: right;font-family: 'InkLipquid';font-size: 24px;color: #FFFFFF;margin-bottom: 20px;}
#main .why .main_title{position: absolute; width: 1520px; top: 50%;transform: translate(-50%,-50%);left: 50%;padding-left: 0; z-index: 3; }
#main .why .main_title strong i{ color: #404040; }
#main .why .main_title p{ color:#404040; font-weight: 300; display: flex; align-items: center; padding-left: 280px; position: relative;  }
#main .why .main_title p:before{ content:""; display: block; width: 0; height: 1px; background-color: #E8E8E8; position: absolute; left: 0; top: 50%; transform: translate(0,50%);  transition: width 1s, background 1s; transition-delay: 1s; }
#main .why .main_title p span{ color:#2B6845; font-weight: 500; }
.fp-viewing-why #main .why .main_title p:before{ width: 240px; }

#main .why .wrap{ position: relative; }
#main .why .wrap:after{ content:""; display: block; width: 50%; height: 0; background-color: #fff; position: absolute; left: 0; bottom: 0; transition: height 1s, width 1s; z-index: 1; }

.fp-viewing-why #main .why .wrap:after{ height: 100%; width: 60%; }

.fp-viewing-why #main .why.on .wrap:after{ width: 50%; height: 30%; transition: width 1.5s, height 1.5s; }
.fp-viewing-why #main .why.on .wrap .vis_img{ transform: translateX(0); transition-delay: 0s; }
.fp-viewing-why #main .why.on .wrap .vis_img:after{ opacity: 1; }
.fp-viewing-why #main .why .wrap .vis_img:after{ content:""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.2); opacity: 0; transition: opacity 1.5s; }

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


.fp-viewing-why #main .why.on .main_title p:before{ width: 64px; background-color: #e8e8e8; transition-delay: 0.5s; }
.fp-viewing-why #main .why.on .main_title p{ padding-left: 95px; transition-delay: .5s; color: #fff; transition: padding 1s, color 1s; }
.fp-viewing-why #main .why.on .main_title strong i{  transition: color 1s;  color: #fff; transition-delay: .5s; }
.fp-viewing-why #main .why.on .main_title p span{ color: #fff; transition: color 1s; transitiond-
.5s; }

.fp-viewing-why #main .why.on .main_title{ transform: translate(-50%,-120%); transition: transform 1s; transition-delay: 0.5s; }






#main .cordiality .wrap{height: 100%;position: relative;overflow: hidden}
#main .cordiality .wrap .bg_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); }

#main .cordiality .main_title{position: absolute;bottom: 20px; width: 1520px; left: 50%; transform: translate(-50%,0); transition: bottom 1s; }
#main .cordiality .main_title > span{display: block;margin-top: 30px; font-size: 18px;color: #FFFFFF;line-height: 36px;font-weight: 300; padding-left: 90px; }
.fp-viewing-principles {background: #F8FBF9}


#main .cordiality .wrap .bg_img .videobcg{ display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-10%) scale(.7); border-radius: 60px; transition: transform 1s, border-radius 1s, opacity 1s; opacity: 0; }

.fp-viewing-cordiality #main .cordiality .wrap .bg_img .videobcg{ transform: translate(-50%,-50%) scale(1); border-radius: 0; opacity: 1; transition-delay: 2s; }

#main .cordiality .main_title strong i{ color: #404040; }
#main .cordiality .main_title p{ color: #404040; }
#main .cordiality .main_title p span{ color: #2B6845; font-weight: 500; }

#main .cordiality .main_title p{ padding-left: 240px; position:r relative; transition-delay: 0s; }
#main .cordiality .main_title p:before{ content:""; display: block; width: 0; height: 1px; background-color: #E8E8E8; position: absolute; left: 0; top: 50%; transform: translate(0,50%);  transition: width 1s, background 1s; transition-delay: 0s; }
.fp-viewing-cordiality #main .cordiality .main_title p:before{ width: 198px; }

#main .cordiality.on .main_title{ bottom: 150px; }
#main .cordiality.on .main_title p:before{ width: 64px; }
#main .cordiality.on .main_title p{ padding-left: 90px; }

#main .cordiality.on .main_title strong i{ color: #fff; transition-delay: 0s; }
#main .cordiality.on .main_title p{ color: #fff; }
#main .cordiality.on .main_title p span{ color: #fff; font-weight: 500; }



#main .principles .list_wrap{display: flex;justify-content: flex-end;position: relative;padding-bottom: 190px;}
#main .principles .list_wrap .list_in{width: 50%;padding-top: 180px;display: flex;flex-wrap: wrap;gap:60px 0}
#main .principles .list_wrap .list_in .list {display: flex;width: 800px;align-items: flex-end;gap: 20px;}
#main .principles .list_wrap .list_in .list:nth-child(2n) {flex-direction: row-reverse}
#main .principles .list_wrap .list_in .list .list_img{position: relative}
#main .principles .list_wrap .list_in .list .list_img .img{border-radius: 60px;overflow: hidden}
#main .principles .list_wrap .list_in .list .list_img .img img{display: block}
#main .principles .list_wrap .list_in .list .list_img .txt{position: absolute;bottom: 0;left: 0;width: 100%;padding: 50px;}
#main .principles .list_wrap .list_in .list .list_img .txt strong{display: block;font-size: 24px;color: #FFFFFF;line-height: 36px;margin-bottom: 25px;}
#main .principles .list_wrap .list_in .list .list_img .txt p{font-size: 18px;line-height: 30px;color: #FFFFFF;font-weight: 300}
#main .principles .list_wrap .list_in .list .tip{padding: 40px;background: #EAF2ED;border-radius: 20px 20px 20px 60px;position: relative}
#main .principles .list_wrap .list_in .list .tip p{font-size: 16px;color: #809F8C;line-height: 26px;font-weight: 300}
#main .principles .list_wrap .list_in .list .tip .pin{width: 16px;height: 16px;background: #FFFFFF;border-radius: 50%;top: 13px;left: 13px;position: absolute}
#main .principles .list_wrap .list_in .list .tip i{position: absolute;bottom: 2px;left: -3px}
#main .principles .list_wrap .list_in .list .tip i img{display: block}
#main .principles .list_wrap .list_in .list .tip i{transform: scaleX(-1); }

#main .principles .main_title{ width: 1520px; margin: 0 auto;  }
#main .principles .wrap{ display: flex; flex-flow: column; padding-top: 10%; }
#main .principles .main_title strong i{ color: #404040; font-size: 80px; }
#main .principles .main_title p{ color: #404040; }
#main .principles .main_title p span{ color:#2B6845; font-weight: 500; }

#main .principles .main_title p{ padding-left: 90px; position: relative; transition: transform 1sm opacity 1s; transform: translateX(50px); opacity: 0;  transition-delay: 1s; }
#main .principles .main_title p:before{ content:""; display: block; width: 64px; height: 1px; background-color: #E8E8E8; position: absolute; left: 0; top: 50%; transform: translate(0,50%);  transition: width 1s, background 1s; transition-delay: 0s; }

#main .principles .p_slide .swiper-slide{ width: auto; height: auto; }
#main .principles .p_slide .swiper-wrapper{ height: auto; transition-timing-function: linear !important; }

.fp-viewing-principles #main .principles .main_title p{ transform: translateX(0); opacity: 1; }

#main .principles .p_slide .swiper-slide{ position: relative; transition: transform 1s; }
#main .principles .p_slide .swiper-slide a{ display: b lock; position: relative; }
#main .principles .p_slide .swiper-slide a .img{ position: relative; overflow: hidden; transition: border-radius .6s; }
#main .principles .p_slide .swiper-slide a .img:after{ content:""; display: block; width: 100%; height: 50%; background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); position: absolute; left: 0; bottom: 0; transition: height .6s, opacity .6s; opacity: .5; }
#main .principles .p_slide .swiper-slide a .img img{ display: block; transition: transform .6s; }
#main .principles .p_slide .swiper-slide.swiper-slide-prev{ transform: translateY(40%); }
#main .principles .p_slide .swiper-slide.swiper-slide-active{ transform: translateY(20%); }
#main .principles .p_slide .swiper-slide.swiper-slide-next{ transform: translateY(0%); }
#main .principles .p_slide .swiper-slide.swiper-slide-next + div{ transform: translateY(-20%); }
#main .principles .p_slide .swiper-slide.swiper-slide-next + div ~ div{ transform: translateY(-40%); }

#main .principles .p_slide .swiper-slide .txt{ position: absolute; left: 0; bottom: 0; z-index: 1; padding: 40px; padding-top: 0; padding-bottom: 50px; transform: translateY(40%); transition: transform .6s; }
#main .principles .p_slide .swiper-slide .txt strong{ display: block; font-size: 24px; line-height: 1.5em; color: #fff; font-weight: 600; margin-bottom: 10px; }
#main .principles .p_slide .swiper-slide .txt p{ font-size: 18px; line-height: 1.6em; color:#FFFFFF; font-weight: 300; opacity: 0; transition: opacity .6s; }
#main .principles .p_slide .swiper-slide a:hover .txt{ transform: translateY(0); }
#main .principles .p_slide .swiper-slide a:hover .txt p{ opacity: 1; }
#main .principles .p_slide .swiper-slide a:hover .img img{ transform: scale(1.1); }
#main .principles .p_slide .swiper-slide a:hover .img{ border-radius: 20px; }
#main .principles .p_slide .swiper-slide a:hover .img:after{opacity: .7; height: 100%; }

#main .ideo .wrap{position: relative;height: 100vh;width: 100%}
#main .ideo .wrap .img_list ul li{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);opacity: 0}
#main .ideo .wrap .img_list ul li.on{opacity: 1}
#main .ideo .wrap .tab{position: absolute;height: 100%;display: flex;align-items: center;top: 0;z-index: 10;padding-left: 60px}
#main .ideo .wrap .tab ul li{margin-bottom: 20px;opacity: 0.5}
#main .ideo .wrap .tab ul li.on{opacity: 1}
#main .ideo .wrap .tab ul li:last-child{margin-bottom: 0}
#main .ideo .wrap .tab ul li a{display: block;color: #FFFFFF;font-family: "amandine", sans-serif;font-size: 90px;display: flex;align-items: center;gap: 0 30px}
#main .ideo .wrap .tab ul li a img{display: block;}
#main .ideo .wrap .tab ul li a i{display: block;position: relative;opacity: 0;transition: 0.7s}
#main .ideo .wrap .tab ul li.on a i{opacity: 1}
#main .ideo .wrap .tab ul li a i:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(/img/main/arrow_on.png);animation: rot 10s infinite linear}
@keyframes rot{
	0%{transform: rotate(0deg)}
	100%{transform: rotate(360deg)}
}
#main .ideo .wrap .txt ul li{opacity: 0}
#main .ideo .wrap .txt ul li.on{opacity: 1}
#main .ideo .wrap .txt ul li{position: absolute;width: 50vw;bottom: 0;right: 0;padding: 60px;z-index: 5}
#main .ideo .wrap .txt ul li strong{display: block;font-size: 24px;color: #FFFFFF;margin-bottom: 35px;font-weight: 500}
#main .ideo .wrap .txt ul li strong span{position: relative}
#main .ideo .wrap .txt ul li strong span:after{content: '';display: block;width: 100%;height: 1px;position: absolute;bottom: 0;left: 0;background: #fff}
#main .ideo .wrap .txt ul li p{font-size: 18px;color: #FFFFFF;line-height: 36px;font-weight: 300}

.tit_fix{position: fixed;top: 0; height: 100vh;z-index: 3;display: flex;align-items: center;width: 50%;transition: opacity 1s;z-index: -1}
.tit_fix{padding-left: 60px;opacity: 0;pointer-events: none}
.tit_fix.on{opacity: 1;pointer-events: auto}
.tit_fix .main_title p{color: #666666;margin-top: 0;margin-bottom: 20px;}

.tit_fix .main_title strong{margin-bottom: 0;color: #1F683C;font-weight: 500}
.btn_wrap{opacity: 0}
.fp-viewing-principles .btn_wrap{opacity: 1;transition: 0.7s;transition-delay: 2s}
.btn_wrap{position: fixed;top: 50%;left: 50%;transform: translateY(-50%);margin-left: -115px;z-index: 3}
.btn_wrap button{display: block;width: 50px;height: 50px;text-indent: -9999px;border-radius: 50%;margin: 0 auto;box-shadow: 0 0 20px rgba(31,104,60,0.2);transition: 0.7s}
.btn_wrap button.prev-button{background: url(/img/main/prev.png)}
.btn_wrap button.next-button{background: url(/img/main/next.png)}
.btn_wrap button.prev-button:hover{background: url(/img/main/prev_on.png)}
.btn_wrap button.next-button:hover{background: url(/img/main/next_on.png)}
.btn_wrap div{display: flex;align-items: center;justify-content: center;gap : 0 4px;margin: 40px 0}
.btn_wrap div span{font-size: 30px;color:#1F683C;    font-family: "amandine", sans-serif;font-weight: 600}
.btn_wrap div em{font-size: 18px;color: #9DB8A8;     font-family: "amandine", sans-serif;font-weight: 600}
/*motion*/

.main_title strong i{filter: blur(5px);opacity: 0;transform: translateY(-70px);transition: 1.5s;display: block}
.active .main_title strong i{filter: blur(0);opacity: 1;transform: translateY(0);}
.main_title strong i.mar{margin-right: 100%}
.active .main_title strong i:nth-child(1){transition-delay: 0.3s}
.active .main_title strong i:nth-child(2){transition-delay: 0.4s}
.active .main_title strong i:nth-child(3){transition-delay: 0.5s}
.active .main_title strong i:nth-child(4){transition-delay: 0.6s}
.active .main_title strong i:nth-child(5){transition-delay: 0.7s}
.active .main_title strong i:nth-child(6){transition-delay: 0.8s}
.active .main_title strong i:nth-child(7){transition-delay: 0.9s}
.active .main_title strong i:nth-child(8){transition-delay: 1.0s}
.active .main_title strong i:nth-child(9){transition-delay: 1.1s}
.active .main_title strong i:nth-child(10){transition-delay: 1.2s}
.active .main_title strong i:nth-child(11){transition-delay: 1.3s}
.active .main_title strong i:nth-child(12){transition-delay: 1.4s}


#main .why .wrap .vis_img{opacity: 1;transition: 1.5s;transform: translateX(100%); }
#main .why.active .wrap .vis_img{opacity: 1;transform: translateX(10%);transition-delay: 0.3s}
.main_title p{transform: translateY(70px);opacity: 0;transition: 1.2s}
.active .main_title p{transform: translateY(0);opacity:1}
.why.active .main_title p{transition-delay: 0.9s}
#main .cordiality .main_title > span{transform: translateY(70px);opacity: 0;transition: 1.2s}
#main .cordiality.active .main_title > span{transform: translateY(0);opacity:1;transition-delay: 1.2s}

#main .why .wrap .memo{transform: translate(-50%,50%);opacity: 0;transition: 1s}
#main .why.active .wrap .memo{transform: translate(-50%,22%);opacity:1; transition-delay: 3s; }

#main .cordiality .wrap .bg_img img{transform: scale(1);transition: 3s}
#main .cordiality.active .wrap .bg_img img{transform: scale(1.05);transition: 3s}

#main .con04 { overflow: hidden; }
#main .con04 .wrap{ width: 100%; height: 100vh; }
#main .con04 .i_slide{ width: 100%; height: 100%; position: relative; }
#main .con04 .i_slide .img ul{ display: flex; width: 100%; height: 100%; }
#main .con04 .i_slide .img{ width: 100%; display: block; min-height: 100vh; min-width: 100vw; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%; }
#main .con04 .i_slide .img ul li{ width: 33.3333%; position: relative; height: 100%; transition-delay: 2s; }

#main .con04 .i_slide .img ul li:nth-child(3){ transform: translateY(100%); }
#main .con04 .i_slide .img ul li:nth-child(2){ transform: translateY(150%); }
#main .con04 .i_slide .img ul li:nth-child(1){ transform: translateY(200%); }

.fp-viewing-ideo #main .con04 .i_slide .swiper-slide-active .img ul li:nth-child(3){ transform: translateY(0);transition: transform 1.5s; transition-delay: 0s; }
.fp-viewing-ideo #main .con04 .i_slide .swiper-slide-active .img ul li:nth-child(2){ transform: translateY(0);transition: transform 1.5s; transition-delay: 0s; }
.fp-viewing-ideo #main .con04 .i_slide .swiper-slide-active .img ul li:nth-child(1){ transform: translateY(0);transition: transform 1.5s; transition-delay: 0s; }


.fp-viewing-ft #main .con04 .i_slide .swiper-slide-active .img ul li:nth-child(3){ transform: translateY(0);transition: transform 1.5s; transition-delay: 0s; }
.fp-viewing-ft #main .con04 .i_slide .swiper-slide-active .img ul li:nth-child(2){ transform: translateY(0);transition: transform 1.5s; transition-delay: 0s; }
.fp-viewing-ft #main .con04 .i_slide .swiper-slide-active .img ul li:nth-child(1){ transform: translateY(0);transition: transform 1.5s; transition-delay: 0s; }


#main .con04 .i_slide .txt .box strong{ transform: translateX(70px); opacity: 0; transition: transform 1.5s, opacity 1.5s; opacity: 0; transition-delay: .3s; }
#main .con04 .i_slide .swiper-slide-active .txt .box strong{ transform: translateX(0); opacity: 1; }

#main .con04 .i_slide .txt .box span{ transform: translateX(70px); opacity: 0; transition: transform 1.5s, opacity 1.5s; opacity: 0; transition-delay: .3s; }
#main .con04 .i_slide .swiper-slide-active .txt .box span{ transform: translateX(0); opacity: 1; }

#main .con04 .i_slide .txt .box p{ transform: translateX(120px); opacity: 0; transition: transform 1.5s, opacity 1.5s; opacity: 0; transition-delay: .3s; }
#main .con04 .i_slide .swiper-slide-active .txt .box p{ transform: translateX(0); opacity: 1; }



#main .con04 .i_slide .img ul li img{ width: calc(100% + 1px); display: block; min-height: 100vh; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

#main .con04 .i_slide .txt { position: absolute; left: 50%; transform: translate(-50%,200%); bottom: 90px; width: 1520px; margin: 0 auto; z-index: 2; display: flex;  gap: 150px; transition: transform 1.5s; transition-delay: 2s; }
#main .con04 .i_slide .swiper-slide-active .txt{ transform: translate(-50%,0); transition-delay: 0s; }

#main .con04 .i_slide:after{ content:""; display: block; width: 1px; height: 100vh; position: absolute; left: 14%; top: 0; background-color: #fff; opacity: .3; z-index: 2; }
#main .con04 .i_slide .txt .nums { padding-top: 105px; position: relative; }

#main .con04 .i_slide .txt .nums dl{ display: flex; flex-flow: column; align-items: center; }
#main .con04 .i_slide .txt .nums dl dt{ font-size: 40px; font-family: "amandine", sans-serif; font-weight: 500; color: #fff; margin-bottom: 50px; }
#main .con04 .i_slide .txt .nums dl dd{ font-size: 20px; font-family: "amandine", sans-serif; font-weight: 500; color: #fff; opacity: .5; }

#main .con04 .i_slide .txt .box strong{ display: block; font-family: "amandine", sans-serif; font-weight: 400; color: #FFFFFF; font-size: 119px; margin-bottom: 30px; }
#main .con04 .i_slide .txt .box span{ font-size: 24px; color:#FFFFFF; font-weight: 300; margin-bottom: 40px; display: block; padding-left: 90px; position: relative; }
#main .con04 .i_slide .txt .box span i{ font-weight: 500; color: inherit; }
#main .con04 .i_slide .txt .box p{ font-size: 18px; font-weight: 300; color:#FFFFFF; line-height: 2em; padding-left: 90px; position: relative; }
#main .con04 .i_slide .txt .box p .br{ display: block; }
#main .con04 .i_slide .txt .box span:after{ content:""; display: block; width: 50vw; height: 1px; background-color: #fff; opacity: .3; position: absolute; left: 60px; top: 50%; transform: translate(-100%,-50%); }





.main_visual .vis_text_wrap .vis_text strong{filter: blur(5px);opacity: 0;transition: 1.2s;letter-spacing: 10px}
.main_visual.on .vis_text_wrap .vis_text strong{filter: blur(0);opacity: 1;transition: 1.2s;letter-spacing: 0;transition-delay: 0s; } /* 16s */

.main_visual .vis_text_wrap .vis_text p{transform: translateX(70px);filter: blur(5px);opacity: 0;transition: 1.2s}
.main_visual.on .vis_text_wrap .vis_text p{transform: translateX(0);filter: blur(0);opacity: 1;transition-delay: 0.3s; } /* 16.3s */
.main_visual .vis_text_wrap .vis_count{transform: translateX(70px);filter: blur(5px);opacity: 0;transition: 1.2s}
.main_visual.on .vis_text_wrap .vis_count{transform: translateX(0);filter: blur(0);opacity: 1;transition-delay: 0.3s; } /* 16.3s */

#main .principles .list_wrap .list_in{transform: translateX(70px);filter: blur(5px);opacity: 0;transition: 1.2s}
#main .principles.active .list_wrap .list_in{transform: translateX(0);filter: blur(0);opacity: 1;transition-delay: 1.2s}
#main .principles .wrap{height: 100vh;overflow-y: hidden; overflow-x: hidden}
.fp-viewing-principles #header h1 svg path{fill: #167438}
.fp-viewing-principles #header .menu_open button i{background: #2b2b2b; }


#main .ideo .wrap .img_list ul li img, #main .cordiality .wrap .bg_img img, .main_visual .vis_img > video{width: 100vw}



/*.fp-viewing-ft #quick > .wrap{ display: none; }*/







@media (max-width: 1920px) {
	#main .ideo .wrap .img_list ul li img, #main .cordiality .wrap .bg_img img{width: auto}
	.main_visual .vis_img > video{width: 1920px}
}



@media (max-width: 1560px) {
    .main_visual .vis_text_wrap{ width: 100%; padding: 0 100px; }
    .main_visual .vis_text_wrap .vis_count{ right: 100px; }
    #main .why .main_title{ width: 100%; padding: 0 100px; }
    .main_title strong{ font-size: 80px; margin-bottom: 10px; }
    #main .why .wrap .memo .txt p{ font-size: 20px; }
    #main .why .wrap .memo .bg img{ width: 560px; }
    #main .why .wrap .memo{ width: 100%; left: 100px; transform: translateY(50%); }
    #main .why.active .wrap .memo{ transform: translateY(22%); }
    #main .why .wrap .memo .txt{ padding-top: 60px; padding-left: 60px; }
    .main_title p{ font-size: 18px; line-height: 1.5em; }
    .fp-viewing-why #main .why.on .main_title{ transform: translate(-50%,-150%); }
    #main .cordiality .main_title{ padding: 0 100px; width: 100%; }
    #main .principles .main_title{ width: 100%; padding: 0 100px; }
    #main .principles .p_slide .swiper-slide a .img img{ width: 300px; }
    #main .principles .p_slide .swiper-slide .txt{ padding: 25px 30px; padding-top: 0; }
    #main .principles .p_slide .swiper-slide .txt strong{ font-size: 18px; }
    #main .principles .p_slide .swiper-slide .txt p{ font-size: 14px; line-height: 1.5em; word-break: keep-all; }
    #main .principles .p_slide .swiper-slide .txt p br{ display: none; }
    #main .principles .main_title strong i{ font-size: 60px; }
    #main .con04 .i_slide .txt .box strong{ font-size: 80px; margin-bottom: 20px; }
    #main .con04 .i_slide .txt{ width: 100%; padding: 0 100px; }
    #main .con04 .i_slide .txt .box span{ font-size: 20px; margin-bottom: 20px; }
    #main .con04 .i_slide .txt .box p{ font-size: 16px; }
    #main .con04 .i_slide .txt .nums{ padding-top: 52px;  }
    #quick > .wrap ul li a{ width: 88px; }
}

@media (max-width: 1500px) {
/*
    .btn_wrap{top: auto;bottom: 30px;display: flex;align-items: center;justify-content: center;left: 20px;transform: translateY(0);margin-left: 0;gap: 0 30px}
	.main_visual .vis_text_wrap .vis_text strong{font-size: 48px;}
	.main_visual .vis_text_wrap .vis_text strong i:before{height: 4px;}
	.main_visual .vis_text_wrap .vis_text p{font-size: 16px;}
	.main_visual .vis_text_wrap .vis_count ul li span{font-size: 15px;}
	.main_visual .vis_text_wrap .vis_count ul li strong{font-size: 45px;}
	.main_title strong{font-size: 90px}
	.main_title p{font-size: 18px;}
	#main .why .wrap .vis_img{width: 70%}
	#main .why .wrap .memo{left: auto;right: 20px;margin-left: 0}
	#main .why .wrap .memo .txt p{font-size: 20px;}
	#main .why .wrap .memo .txt span{font-size: 20px;}
	#main .why .wrap .memo .bg img{width: 570px}
	#main .cordiality .main_title > span{font-size: 16px;line-height: 1.7}
	#main .principles .list_wrap .list_in{width: 60%}
	#main .principles .list_wrap .list_in .list .list_img .txt strong{font-size: 20px;line-height: 1.7}
	#main .principles .list_wrap .list_in .list .list_img .txt p{font-size: 16px;line-height: 1.7}
	#main .principles .list_wrap .list_in .list .list_img .img img{width: 450px}
	#main .principles .list_wrap .list_in .list .list_img .txt{padding: 30px;}
	#main .principles .list_wrap .list_in .list .list_img .img{border-radius: 30px;}
	#main .principles .list_wrap .list_in .list .tip p{font-size: 15px;line-height: 1.5}
	#main .ideo .wrap .tab ul li a{font-size: 65px;}
	#main .ideo .wrap .txt ul li{width: 60vw}
	#main .ideo .wrap .txt ul li p{font-size: 16px;line-height: 1.7}
	#main .ideo .wrap .txt ul li strong{font-size: 20px;}
	#footer ul{flex-direction: column;gap: 20px;text-align: center}
*/
}
@media (max-width: 1260px) {
	.tit_fix{display: none}
    #main .principles .tit_fix{position: relative;display: block;height: auto;padding-top: 100px}
	#main .principles .list_wrap .list_in{width: 100%;justify-content: center;padding-top: 60px;}
	#main .ideo .wrap .tab{height: auto;top: 20%}
	#main .ideo .wrap .txt ul li{width: 100vw}
	#main .ideo .wrap .img_list ul li img, #main .cordiality .wrap .bg_img img, #main .why .wrap .vis_img img{height: 100vh}
	#header{padding: 20px;}
	#hd_menu .life{display: none}
	#hd_menu #gnb{width: 50%}
	#hd_menu .bg03.on{width: 50%}
}
@media (max-width: 960px) {
    .btn_wrap{display: none}
	.main_visual .vis_text_wrap{padding: 20px;}
	.main_visual .vis_text_wrap .vis_text strong{font-size: 32px;margin-bottom: 10px;}
	.main_visual .vis_text_wrap .vis_text p{font-size: 14px}
	.main_visual .vis_text_wrap .vis_text strong i:before{height: 2px}
	.main_visual .vis_text_wrap .vis_count ul li span{font-size: 12px;}
	.main_visual .vis_text_wrap .vis_count ul li strong{font-size: 32px;}
	.main_visual .vis_text_wrap .vis_count ul li strong em{font-size: 12px;}
	.main_visual .vis_text_wrap .vis_count ul li:after{height: 25px;margin: 0 20px;}
	#main .why .main_title{padding-left: 20px;}
	.main_title strong{font-size: 60px;}
	.main_title p{font-size: 15px;line-height: 1.7}
	#main .why .wrap .memo .txt p, #main .why .wrap .memo .txt span{font-size: 14px;margin-bottom: 5px;}
	#main .why .wrap .memo .bg img{width: 400px}
	.main_title strong{margin-bottom: 7px;}
	#main .cordiality .main_title{margin-top: -85px}
	#main .cordiality .main_title > span{font-size: 14px;margin-top: 7px;}
	#main .principles .list_wrap .list_in .list .list_img .txt strong{font-size: 17px;margin-bottom: 10px;}
	#main .principles .list_wrap .list_in .list .list_img .txt p{font-size: 14px;}
	#main .principles .list_wrap .list_in .list .list_img .img img{width: 370px;}
	#main .principles .list_wrap .list_in .list .tip p{font-size: 13px;}
	#main .principles .list_wrap .list_in .list .tip{padding: 25px;}
	#main .principles .list_wrap .list_in .list .tip i img{width: 25px;}
	#main .principles .list_wrap .list_in .list .tip .pin{width: 10px;height: 10px;}
	#main .principles .list_wrap .list_in .list .tip{border-radius: 15px;}
	#main .principles .list_wrap .list_in{gap: 30px}
	#main .ideo .wrap .tab ul li a{font-size: 35px;}
	#main .ideo .wrap .tab{padding-left: 20px;}
	#main .ideo .wrap .txt ul li{padding: 20px;}
	#main .ideo .wrap .txt ul li strong{font-size: 15px;margin-bottom: 15px}
	#main .ideo .wrap .txt ul li p{font-size: 13px;}
	#main .principles .list_wrap .list_in .list{max-width: 100%;padding: 0 20px;}
	#main .ideo .wrap .tab ul li a img{height: 45px;}
	#main .ideo .wrap .tab ul li a i:after{background-size: 100% 100%}
	#header #logo a svg{width: 160px;height: auto}
	#hd_menu #gnb > ul{padding-left: 60px;}
	#hd_menu #gnb > ul > li > ul li a{font-size: 16px}
	#hd_menu #gnb > ul > li > ul li{margin-bottom: 20px;}
	#hd_menu #gnb > ul > li > a{font-size: 35px;}
	#hd_menu #gnb > ul > li > ul{padding-left: 40px;}
	#hd_menu #gnb > ul{gap: 25px 0}
	#hd_menu button{right: 20px;top: 20px;}
	#hd_menu button svg{width: 25px;height: auto}
	#hd_menu .bg img{height: 100vh;display: block}
	
	#hd_menu .bg{clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);;transition: 1s}
	#hd_menu .bg02{clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
	#hd_menu.on .bg{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
	#footer ul{gap:7px 0}
	#footer ul li{font-size: 13px;}
	#footer{padding: 60px 0;}
	#footer address{font-size: 12px;}
	#footer ul{margin-bottom: 15px;}
    #main .principles .list_wrap .list_in{padding-top: 40px;}
    #main .principles .tit_fix{padding-left: 20px;}
    #quick > .wrap ul li a svg{width: 20px;height: auto}
    #quick > .wrap ul li a{width: 60px;}
    #quick > .wrap ul li a strong{font-size: 10px;line-height: 1.2}
    #quick > .wrap ul li a{padding: 5px;}
	#intro .copy strong{font-size: 20px;}
    #hd_menu .bg03 { left: auto; transform: translate(0,0); right: 0; } 
    #main .why .main_title p{ padding-left: 50px; }
    .fp-viewing-why #main .why .main_title p:before{ width: 38px; }
    .fp-viewing-why #main .why.on .main_title p{ padding-left: 50px; }
    .fp-viewing-why #main .why.on .main_title p:before{ width: 38px; }
    #main .why .main_title{ padding-right: 20px; }
    #main .why .wrap .memo{ left: 20px; }
    #main .cordiality .main_title{ padding: 0 20px; }
    #main .cordiality .main_title > span{ line-height: 1.7em; }
    #main .cordiality.on .main_title{ bottom: 80px; }
    #main .principles .p_slide .swiper-slide a .img img{ width: 220px; }
    #main .principles .p_slide .swiper-slide .txt p{ display: none; }
    #main .principles .p_slide .swiper-slide .txt{ width: 100%; transform: translateY(0); }
    #main .principles .p_slide .swiper-slide .txt{ padding: 20px; padding-top: 0; }
    #main .principles .p_slide .swiper-slide .txt strong{ font-size: 14px; line-height: 1.5em; }
    #main .principles .wrap{ padding-top: 140px; }
    #main .principles .main_title{ padding: 0 20px; margin-bottom: 30px; }
    #main .principles .main_title strong i{ font-size: 40px; }
    .main_title strong{ font-size: 40px; }
    #main .con04 .i_slide .img ul li{ width: 100%; }
    #main .con04 .i_slide .img ul li:nth-child(1){ display: none; }
    #main .con04 .i_slide .img ul li:nth-child(3){ display: none; }
    #main .con04 .i_slide .txt .box strong{ font-size: 40px; }
    #main .con04 .i_slide .txt{ padding: 0 20px; }
    #main .con04 .i_slide .txt{ gap: 40px; }
    #main .con04 .i_slide .txt .box p{ font-size: 14px; line-height: 1.6em; word-break: keep-all; }
    #main .con04 .i_slide .txt .box p .br{ display: none; }
    #main .con04 .i_slide .txt .nums dl dt{ font-size: 20px; margin-bottom: 30px; }
    #main .con04 .i_slide .txt .nums dl dd{ font-size: 14px; }
    #main .con04 .i_slide .txt .nums{ padding-top: 39px; }
    #main .con04 .i_slide:after{ left: 60px; }
    #main .con04 .i_slide .txt .box span{ font-size: 16px; padding-left: 40px; }
    #main .con04 .i_slide .txt .box span:after{ left: 28px; }
    #main .con04 .i_slide .txt .box p{ padding-left: 40px; }
    .main_visual .vis_text_wrap .vis_text strong i{ font-size: 40px; }
    .main_visual .vis_text_wrap .vis_count .num_box .num_w .num ul li{ font-size: 30px; line-height: 40px; }
    .main_visual .vis_text_wrap .vis_count .num_box .num_w{ height: 40px; }
    .main_visual .vis_text_wrap .vis_count .num_box .num_w .num > span{ font-size: 30px; line-height: 40px; }
    .main_visual .vis_text_wrap .vis_count .num_box > p{ font-size: 14px; margin-top: 4px; }
    #footer2{ padding: 40px 0; }
    #footer2 .wrap{ padding: 0 20px; }
    #footer2 .wrap .f_top{ flex-flow: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
    #footer2 .wrap .f_top svg{ width: 140px; height: auto; }
    #footer2 .wrap .f_top .f_nav ul li a{ font-size: 12px; }
    #footer2 .wrap .f_top .f_nav ul{ gap: 20px; }
    #footer2 .wrap .f_info p{ font-size: 12px; line-height: 2em; }
    #footer2 .wrap .f_info p span{ width: 20px; }
    #footer2 .wrap .f_top{ margin-bottom: 20px; }
    #footer2 .wrap .f_info address{ font-size: 12px; margin-top: 20px; }
    .main_visual .scroll{ left: 20px; bottom: 20px; }
    .main_visual .scroll svg{ width: 20px; height: auto; }
    
}
@media (max-width: 660px) {
	#main .principles .list_wrap .list_in .list .list_img .txt p br{display: none}
	#main .principles .list_wrap .list_in .list .tip{margin-top: 10px;}
	#main .principles .list_wrap .list_in .list .tip p br{display: none}
	#main .principles .list_wrap .list_in .list{display: block}
	#main .principles .list_wrap .list_in .list{width: 410px}
	#main .principles .list_wrap .list_in .list .tip p, #main .principles .list_wrap .list_in .list .list_img .txt p{word-break: keep-all}
	#hd_menu #gnb > ul{padding-left: 20px;}
	#header .menu_open button{width: 40px;}
}
@media (max-width: 600px) {
    
/*	#main .why .wrap .vis_img{width: 100%;height: 45%;border-radius: 0 0 30px 30px}*/
	#main .why .wrap .memo{top: 40%;margin-top: 0;left: 50%;margin-left: -200px;right: auto}
	#main .ideo .wrap .txt ul li p br{display: none}
	#main .ideo .wrap .txt ul li p{word-break: keep-all}
	.main_title strong{font-size: 45px;}
	#main .cordiality .main_title > span{font-size: 13px;}
	#main .principles .list_wrap{padding-bottom: 60px;}
	#main .ideo .wrap .tab ul li a{gap: 0 10px;}
	#main .ideo .wrap .tab ul li a{font-size: 26px;}
	#main .ideo .wrap .tab ul li{margin-bottom: 7px}
	#hd_menu #gnb > ul > li > a{font-size: 25px;}
	#hd_menu #gnb > ul > li > ul li a{font-size: 14px;}

    #main .ideo .wrap .img_list ul li img, #main .cordiality .wrap .bg_img img, #main .why .wrap .vis_img img{height: 95vh}
    #main .cordiality.on .main_title{ bottom: 120px; }
    .main_visual .vis_text_wrap .vis_text strong{ font-size: 20px; }
    .main_visual .vis_text_wrap .vis_text strong i{ font-size: 30px; }
    .fp-tableCell{ height: 100vh !important; overflow: hidden; }
    #main .con04 .i_slide .txt .box strong{ font-size: 30px; }
    .main_visual .vis_img{ width: 100%; height: 100%; }
    .main_visual .vis_img > video{ width: auto; height: 100%; transform: translateX(-40%); }
    .main_visual{ height: 100%; }
    .main_visual .vis_text_wrap .vis_count{ bottom: 160px; }
    #main .cordiality.on .main_title{ bottom: 250px; }
    #main .cordiality .main_title{ margin-top: 0; bottom: 160px; }
    #main .cordiality .wrap .bg_img .videobcg{ height: 100%; }
    #main .principles .main_title strong i{ font-size: 24px; line-height: 1.5em; }
    #main .principles .p_slide .swiper-slide .txt{ z-index: 2; }
    #main .con04 .i_slide .img ul li img{ height: 100%; width: auto; }
    #main .con04 .i_slide .txt{ bottom: 160px; }
    #footer2 .wrap .f_info p span{ display: block; width: auto; }

}
@media (max-width: 500px) {
    #quick > .wrap ul li a strong{font-size: 9px;}
	#main .cordiality .wrap .bg_img{transform: translateX(-66%)}
    #quick > .wrap {width: 100%;top: auto;bottom: 0;transform: none;right: auto;left: 0}
    #quick > .wrap ul{display: flex}
    #hd_menu #gnb > ul > li > ul li{padding: 0}
    #quick > .wrap ul li{width: 100%}
    #quick > .wrap {padding: 0;border-radius: 5px 5px 0 0 }
    #quick > .wrap ul li:after{display: none}
    #quick > .wrap ul{align-items: center}
    #quick > .wrap ul li a strong{margin-top: 0}
    #quick > .wrap ul li a{width: 100%}
    #main .ideo .wrap .txt ul li{bottom: 60px;}
    .main_title strong{font-size: 35px;}
    .main_title p{font-size: 13.5px;margin-bottom: 5px;}
    .main_visual .vis_text_wrap{bottom: 90px;}
		#intro .copy strong{font-size: 17px;line-height: 1.5}
    .main_visual .vis_text_wrap .vis_count{ right: 20px; }
    #intro .bg i:nth-child(3){ left: 65%; width: 35%; }
    .main_visual .scroll{ bottom: 80px; }

}