/*html,body{overflow:hidden;}*/
#main{overflow:hidden;padding:4% 0 0 0;}
#main::before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	background:#fff url("../../resources/images/bg_main_left_top.png") no-repeat right top;
	width: 676px;
	height: 812px;
	z-index: -1;
}
#main::after {
	content: '';
	position: fixed;
	left: 0;
	bottom: 0;
	background:#fff url("../../resources/images/bg_main_right_bottom.png") no-repeat left bottom;
	width: 427px;
	height: 244px;
	z-index: -1;
}
#main .inner{position:relative;width:1720px;margin:0 auto;}
#logo a{display:inline-block;}
#main h2{line-height:1;margin-top:90px;color:#191919; font-family: "OpenSans";}
#main h2 span{display:block;}
#main h2 span.txt1{font-size:52px;animation-name:fadeInUp;animation-duration:1s;animation-delay:.3s;animation-fill-mode:backwards; line-height: 1.2}
#main h2 span.txt2{font-size:94px;animation-name:fadeInUp;animation-duration:1s;animation-delay:.6s;animation-fill-mode:backwards; font-weight: 600; margin-top: 15px}
#main .description{line-height:1.5;margin-top:20px;animation-name:fadeInUp;animation-duration:1s;animation-delay:.9s;color:#191919;animation-fill-mode:backwards; font-size: 18px}
footer {font-size: 12px; margin-top: 4%;}
footer>div {display: flex; align-items: center; gap:20px; margin-bottom: 10px }
/* ?�단 ?�틸리티 */
#menu_btn{position:absolute;z-index:50;top:0;right:0;width:47px;height:31px;background:url(../../resources/images/menu.png) no-repeat center;transition:.3s;}
#menu_btn.active{background:url(../../resources/images/menu_close.png) no-repeat center;}
#main #intro_sns{line-height:29px;position:absolute;top:5px;right:170px;height:29px;transition:.3s;z-index: 70;}
#main #intro_sns li{float:left;}
#main #intro_sns li+li{margin-left:15px;}
#main #lang{top:0px;}
#logo{position:relative;z-index:40;}

/* 비주??*/
@keyframes visualAni{
    0%{opacity:0;}
    100%{transform:scale(1);opacity:1;}
}
@keyframes circleWrapAni{
    0%{opacity:0;}
    100%{opacity:1;}
}
#visual svg{width:100%;height:100%;}
#visual{top:-50px;position:absolute;right:0;width:900px;height:900px;transform:scale(.3);opacity:0;animation-name:visualAni;animation-duration:1s;animation-delay:.3s;animation-fill-mode:forwards;}
#visual .circle{position:absolute;z-index:10;top:0;right:0;bottom:0;left:0;animation-name:fadeOut;animation-duration:1s;animation-delay:.3s;border-radius:50%;background:#ff500b;animation-fill-mode:forwards;}
#visual #shape{fill:none;stroke:#ff500b;stroke-width:1;}
#visual .circle_wrap{position:absolute;width:100%;height:100%;padding:5%;transform:rotate(-90deg);opacity:0;animation-name:circleWrapAni;animation-duration:0.5s;animation-delay:.3s;animation-fill-mode:forwards;}
#visual #bar{position:absolute;top:50%;left:50%;width:44%;height:0;transform-origin:0;}
#visual #bar span{position:relative;top:-9px;left:9px;display:block;float:right;width:18px;height:18px;border-radius:9px;background:#fff;}
#visual #bar span:after{position:absolute;top:3px;left:3px;display:block;width:12px;height:12px;content:'';border-radius:6px;background:#ff500b;}
#visual #slide_img{opacity:0;position:absolute;z-index:40;top:calc(50% - 39%);left:calc(50% - 39%);overflow:hidden;width:78%;height:78%;border-radius:50%;animation-name:fadeIn;animation-duration:0.5s;animation-delay:.3s;animation-fill-mode:forwards;}
#visual #slide_img li{width:100%;height:100%;}
#visual #slide_img li img{transition:8s;transform:scale(1.2);}
#visual #slide_img li.swiper-slide-active img{transform:scale(1);}
#visual #slide_img li a{display:block;width:100%;height:100%;}
#visual #slide_img img{width:100%;}
#visual #cnt{position:absolute;top:50%;right:6%;width:60px;height:60px;margin-top:-30px;margin-right:-30px;color:#fff;border-radius:30px;background:#ff500b url(/resources/images/cnt.png) no-repeat center;}
#visual #cnt .num{font-size:32px;position:absolute;top:4px;left:14px;}
#visual #cnt .total{font-size:22px;position:absolute;right:12px;bottom:8px;}
#visual .swiper-button-next{right:5%;}
#visual .swiper-button-prev{left:5%;}
#visual .swiper-button-prev.swiper-button-disabled{display:none;}
#visual .swiper-button-next.swiper-button-disabled{display:none;}

/* 카피?�이??*/
.copy{font-size:12px;text-transform:uppercase;}
@media (max-width:1759px){
    #main .inner{width:1200px;}
    #visual{width:640px;height:640px;top:0;}
    #visual #cnt{transform:scale(.8);}
    #main .description{margin-left:0;}
}

@media (max-width:1279px){
    html,body{overflow-y:auto;}
    #main{position:relative;padding:5% 0 0 0;}
    #main .inner{width:auto;height:auto;margin-right:5%;margin-left:5%;}
    #logo a{margin-top:10px;}
    #logo img{}
    #menu_btn{top:10px;}
    #main #full_sns{top:22px;}
    #main #intro_sns{top: 22px; right:185px;}
    #main #intro_sns li{display: inline-block;margin: 0 5px;}
    #main #lang{top:10px; right:calc(30px + 5% + 5%);}
    #main h2{text-align:center;}
    #main .description{font-size:18px;text-align:center;}
    #visual{position:static;margin:0 auto;}
    #foot{position:relative;height:68px;border-top:1px solid #e5e5e5; background: #fff;}
    #foot .copy{line-height:1;position:absolute;top:30px;right:40px;transform:none;}
	footer {bottom: 30px; position: absolute}

}
@media (max-width:799px){
    #main #intro_sns{display: none;}
    #main h2 span.txt1{font-size:40px;}
    #main h2 span.txt2{font-size:40px;}
    #main .description{font-size:15px;}
    #visual{width:160%;height:160%;margin-left:-50%;padding-bottom:160%;}
    #visual #cnt{top:80%;right:18%;}
}
@media (max-width:639px){
    #logo img{width:90px;height:17px;}
    #main{border-right:none;}
    #main h2{margin-top:60px;}
    #main h2 span.txt1{font-size:30px;}
    #main h2 span.txt2{font-size:30px;}
    #main .description{font-size:14px;}
}
@media (max-width:480px){
	.visual {top: 30%!important}
	footer {bottom: 20px;}
	footer>div,footer>div span {display: block!important}
	.visual {transform: scale(0.45)!important;left: -60%!important;}

}

/* lnb */
.lnb{margin-top:44px;margin-left: -40px;}
.lnb:after{content:'';display:block;clear:both;}
.lnb_item{float:left;}
.lnb_link{display:block;width:150px;}
.lnb_shape_wrap{position:relative;width:100%;height:130px;}
.lnb_shape_img{transition:0.5s;position:absolute;width:300px;height:300px;left:50%;top:50%;transform:translate(-50%,-50%) scale(0.4);}
.lnb_shape_img.img1{background:url(../../resources/images/m1.png) no-repeat center;}
.lnb_shape_img.img2{background:url(../../resources/images/m2.png) no-repeat center;}
.lnb_shape_img.img3{background:url(../../resources/images/m3.png) no-repeat center;}
.lnb_shape_img.img4{background:url(../../resources/images/m4.png) no-repeat center;}
.lnb_shape_gray{transition:0.5s ease-in-out;position:absolute;width:80px;opacity: 30%;height:80px;border-radius:100%;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);}
.lnb_shape_green{opacity:0;transition:0.5s ease-in-out;top:50%;position:absolute;width:80px;height:80px;border-radius:100%;left:50%;transform:translate(-50%,-50%) scale(1);}
.lnb_link_txt{transition:opacity 0.5s, color 0.5s;color:#4f4f4f;text-align:center;width:100%;font-size:18px; font-weight: 400}
.lnb_link:hover .lnb_link_txt {color:#109016; text-decoration: underline; }
.lnb_link:hover .lnb_shape_gray{margin-left:10px;width:115px;height:115px;}
.lnb_link:hover .lnb_shape_green{margin-left:-10px;width:115px;height:115px;opacity:1;}
.lnb_link:hover .lnb_shape_img{transform:translate(-50%,-50%) scale(0.6);}
.lnb_item.item1 .lnb_shape_green,
.lnb_item.item1 .lnb_shape_gray{background:#54a945;}
.lnb_item.item2 .lnb_shape_green,
.lnb_item.item2 .lnb_shape_gray {background:#33865d;}
.lnb_item.item3 .lnb_shape_green,
.lnb_item.item3 .lnb_shape_gray{background:#41a291;}
.lnb_item.item4 .lnb_shape_green,
.lnb_item.item4 .lnb_shape_gray{background:#42b66d;}

/* 초기 ?�팅 */
.lnb_shape_green.ready{opacity:1;transform:translate(-50%,-50%) scale(0);}
.lnb_shape_gray.ready,.lnb_shape_img.ready{opacity:0;transform:translate(-50%,-50%) scale(0);}
.lnb_link_txt.ready{opacity:0;}

.main_content{position: relative; z-index: 20;max-width: 750px; left: 130px}

/* visual styles */
.visual {position: absolute;z-index: 10;right:0;top:0;width: 1040px;height: 760px;margin-top: 30px;transform:scale(0.9)}
.visual_canvas{display:block;}
.visual_canvas canvas{display: block;padding: 10px 0;width: 860px;height: 740px;}

.visual .visual_list{display:none;position:absolute;left:0;top:0;width: calc(100% - 28px);height: 760px;margin: 0 0 0 28px;padding:0;background:#fff}
.visual .visual_list li{display:none;z-index:30;position:absolute;top:0;left:0;width:100%;height:760px;margin:0;padding:0;list-style:none;font-size:0;line-height:0;}
.visual .visual_list li img{/*margin-top: 20px;*/}
.visual .visual_list li.active{display:block;z-index:60;}

.visual .visual_control{position:absolute;left:0;top:0;z-index:100}
.visual .btn_arrow{position:absolute;font-size:0;border:none;}
.visual .btn_arrow button{position:absolute;top:480px;width:40px;height:42px;padding:0;font-size:0;line-height: 0;border:none;}
.visual .btn_arrow button span{display:block}
.visual .btn_arrow button.btn_prev{left: 180px;background:url(../../resources/images/visual_btn_prev.png) no-repeat;}
.visual .btn_arrow button.btn_pause{}
.visual .btn_arrow button.btn_play{}
.visual .btn_arrow button.btn_next{left: 666px;background:url(../../resources/images/visual_btn_next.png) no-repeat;}
.visual_paging{position:absolute;top:500px;left: 740px;width:60px;height:60px;margin-top:-30px;margin-right:-30px;color:#fff;border-radius:30px;background:#109016 url(../../resources/images/cnt.png) no-repeat center;z-index:100; }
.visual_paging .num{position:absolute;top:4px;left:12px;font-size:32px;}
.visual_paging .total{position:absolute;right:12px;bottom:8px;font-size:22px;}
.visual .btn_number{position:absolute;top:488px;left: 810px;width: 170px}
.visual .btn_number button{display:inline-block;width: 12px;height:12px;margin:0 8px;padding:0;background-color: #cac6c3;border:none;border-radius: 50%;font-size:0;line-height: 0;}
.visual .btn_number button.active{background-color: #88bd2e;}

.ie9 .visual .visual_list{display:block; border-radius: 500px; overflow: hidden; margin-left: 90px;}
.ie9 .visual_canvas{display:none;}

.visual_bar{position:fixed;right: 0;bottom:0;width: 6px;height:0;background-color: #109016; border-radius: 500px; overflow: hidden;}
.visual_bar_bg{position:fixed;right: 0;bottom:0;width: 8px;height:100%;background-color: #f35e11; z-index: -1}

@media (max-width:1759px){
    .lnb_shape_wrap{transform:scale(0.8)}
    .main_content {left: 0;}
    .visual {right: -250px;transform:scale(0.8); margin-top: -30px;}
    .visual_paging{display: none;}
    .main_content{max-width: 650px;}
}
@media (min-width:1280px){
    .main_content {left: 0;}
}
@media (max-width:1279px){
    .lnb{margin-bottom:0}
    .lnb_item{width:25%;}
    .lnb_link{width:100%; display: flex; align-items: center}
    .lnb_link:after{content:'';display:block;clear:both;}
    .lnb_shape_wrap{width:50%;float:left;transform:scale(0.7)}
    .lnb_link_txt{width:50%;text-align:left;}
    .visual {position: static}
    .main_content{max-width: 100%;}
    .ie9 .visual .visual_list{}

}
@media (max-width:1023px){
    .lnb_shape_wrap{display:none;}
    .lnb_link_txt{text-align:center;margin-top:0;width:100%;position:relative;}
    .lnb_item .lnb_link_txt:before{content:'';display:block;position:absolute;background:#109016;width:6px;height:6px;border-radius:100%;margin-top:8px;margin-left:-4px;}
    .lnb_item:nth-child(1) .lnb_link_txt:before{display:none;}
    .margin-top {margin-top: 70px;}
    .visual {right: 0;margin-top: 0;}
}
@media (max-width:639px){
    html, body, #main,
    #main .inner {height: 100%}

    .lnb_item{width:50%; margin: 10px 0}
    .lnb_link_txt{text-align:left;padding-left:15px;}
    .lnb_item:nth-child(1) .lnb_link_txt:before{display:block;}
    .lnb_item .lnb_link_txt:before{margin-top:8px;margin-left:-16px}
    .lnb {margin-left: 40px;margin-top: 40px;}
    
    .visual {transform: scale(0.5);}
    
    .visual {position: absolute;top: 30%;left: -33%;z-index: -1;}
    
    .visual .visual_control { top: 250px;}
    .visual .btn_number {display: none;}

	#main::before {
		width: 338px;
		height: 406px;
		background-size:338px 406px ;
	}
	#main::after {content: none}
}
@media (max-width:440px){
    .visual .visual_control { top: 250px;}
    .visual .btn_number {display: none;}
}

@media (max-height: 480px) {
	#main h2 span.txt1 {font-size: 22px;}
	#main h2 {margin-top: 30px}
	#main h2 span.txt2 {font-size: 28px; margin-top: 10px}
	#main .description br {display: none;}
	#main .description {font-size: 12px}
	.visual {top: 30%}
	.lnb {margin-left: 20px; margin-top: 10px}
	.lnb_link_txt {font-size: 14px;}
	.lnb_item {margin: 5px 0}
	
}