@charset "utf-8";
.idx_area{overflow:hidden;width:100%;max-width:1903px;height:100vh;max-height:936px;margin:0 auto}

/*좌측 bar 영역*/
.idx_area .logo_side{float:left;width:100px;height:100%}
/* .idx_area .logo_side .brand_name{position:relative;overflow:hidden;width:100%;height:34%;background:#fff}
.idx_area .logo_side .brand_name h1{position:absolute;top:calc(50% - 75px);left:-25px;width:150px;height:100px;font-weight:700;font-size:14px;line-height:100px;text-align:center;color:#333;transform:rotate(-90deg);font-family: 'Poppins', sans-serif;} */

.idx_area .sns_color_bar{overflow:hidden;position:relative;width:100%;height:66%}
.idx_area .sns_color_bar .sns_link{position:absolute;z-index:50;left:-103px;bottom:200px;width:300px;transform:rotate(-90deg)}
.idx_area .sns_color_bar .sns_link li{float:left;margin-right:30px;font-weight:600;font-size:13px;font-family: 'Poppins', sans-serif;}
.idx_area .sns_color_bar .sns_link li:last-child{margin-right:0}
.idx_area .sns_color_bar .sns_link li a{color:#fff}

.idx_area .sns_color_bar .color_bar{position:absolute;left:0;top:0;width:100%;height:100%}
.idx_area .sns_color_bar .color_bar > div{position:absolute;width:100%;height:100%;opacity:0}
.idx_area .sns_color_bar .color_bar .c1{background:#f1b22c}
.idx_area .sns_color_bar .color_bar .c2{background:#c63174}
.idx_area .sns_color_bar .color_bar .c3{background:#62b9b9}
.idx_area .sns_color_bar .color_bar .on{z-index:10;animation-name:chgcolor;animation-duration:1s;animation-fill-mode:forwards;opacity:1}
.idx_area .sns_color_bar .color_bar .zidx{z-index:9;opacity:1}
@keyframes chgcolor {
	0% {right:-100px;opacity:1}
	100% {right:0;opacity:1}
}

/*배열*/
.idx_area .motion_bnr_area{overflow:hidden;float:left;width:calc(100% - 100px);height:100%}
.idx_area .motion_bnr_area .img01_area{float:left;width:28%;height:100%}
.idx_area .motion_bnr_area .img02_area{position:relative;float:left;width:24.5%;height:100%}
.idx_area .motion_bnr_area .big_img_area{position:relative;float:left;width:47.5%;height:100%;background:#eee2b5}

/***좌측이미지영역***/
.idx_area .img01_area .img_box{position:relative;width:100%;height:68.5%;background:#f2f2f2}
.idx_area .img01_area .txt_box{position:relative;width:100%;height:31.5%;background:#fff}

/*로고*/
.brand_name{height:33%}
.brand_name .logo_wrap {display:block;position:absolute;top:18%;width:100px;height:33%}
.brand_name .logo_wrap .chg_logo{position:absolute;overflow:hidden;width:100%;height:100%;background-size:cover;opacity:0;transition:all 1s}
.brand_name .logo_wrap .logo1{background:url(/sh_img/index/main_banner/logo01.png) no-repeat}
.brand_name .logo_wrap .logo2{background:url(/sh_img/index/main_banner/logo02.png) no-repeat}
.brand_name .logo_wrap .logo3{background:url(/sh_img/index/main_banner/logo03.png) no-repeat}
.brand_name .logo_wrap .on{opacity:1}
.brand_name .logo_wrap .chg_logo img{position:absolute;bottom:-20px;left:-150px;opacity:0;}
/* .brand_name .logo_wrap .on img{animation-name:numimg;animation-duration:4s;animation-fill-mode:forwards;animation-delay:1s}
@keyframes numimg {
	0% {}
	30% {opacity:.2}
	80% {opacity:.2}
	100% {}
} */
.brand_name p{position:relative;bottom:-64%;left:-37%;transform:rotate(270deg);width:165px;font-size:16px;font-weight:700;color:#222;font-family:"poppins"}


/*좌측 상단이미지*/
.idx_area .img01_area .img_box .chg_img{position:absolute;width:100%;height:100%;background-size:cover;opacity:0}
.idx_area .img01_area .img_box .c1{background:url(/sh_img/index/main_banner/l_img01.jpg) no-repeat}
.idx_area .img01_area .img_box .c2{background:url(/sh_img/index/main_banner/l_img02.jpg) no-repeat}
.idx_area .img01_area .img_box .c3{background:url(/sh_img/index/main_banner/l_img03.jpg) no-repeat}
.idx_area .img01_area .img_box .on{z-index:10;animation-name:chgimg;animation-duration:1s;animation-fill-mode:forwards;opacity:1}
.idx_area .img01_area .img_box .zidx{z-index:9;opacity:1}
@keyframes chgimg {
	0% {left:-100%;opacity:1}
	100% {left:0;opacity:1}
}

/*좌측 하단텍스트*/
.idx_area .img01_area .txt_box .chg_txt{position:absolute;left:80px;top:119px;width:100%;opacity:0}
.idx_area .img01_area .txt_box .chg_txt p{overflow:hidden;position:relative;width:100%}
.idx_area .img01_area .txt_box .chg_txt .tit{height:31px;margin-bottom:10px;font-weight:700;font-size:22px;color:#333;font-family:'Poppins', sans-serif;}
.idx_area .img01_area .txt_box .chg_txt .txt{height:24px;font-size:14px;line-height:24px;color:#666;font-family:'notokr-regular'}
.idx_area .img01_area .txt_box .chg_txt span{position:absolute;bottom:-31px}
.idx_area .img01_area .txt_box .on{opacity:1}
.idx_area .img01_area .txt_box .on span{animation-name:txton;animation-duration:4.1s;animation-fill-mode:forwards}

.chg_txt .d1{animation-delay:.9s}
.chg_txt .d2{animation-delay:1.2s}
.chg_txt .d3{animation-delay:1.5s}
@keyframes txton {
	0% {bottom:-31px}25% {bottom:0}
	75% {bottom:0}
	100% {bottom:-31px}
}

/**중앙이미지영역**/

.idx_area .img02_area .num_box{position:relative;width:100%;height:68.5%;background:#333}
.idx_area .img02_area .img_box{position:relative;width:100%;height:31.5%;background:#fff1e5}

/*중앙 상단 이미지*/
.idx_area .img02_area .num_box .chg_img{position:absolute;overflow:hidden;width:100%;height:100%;background-size:cover;opacity:0;transition:all 1s}
.idx_area .img02_area .num_box .c1{background:url(/sh_img/index/main_banner/c_t_img01.jpg) no-repeat}
.idx_area .img02_area .num_box .c2{background:url(/sh_img/index/main_banner/c_t_img02.jpg) no-repeat}
.idx_area .img02_area .num_box .c3{background:url(/sh_img/index/main_banner/c_t_img03.jpg) no-repeat}
.idx_area .img02_area .num_box .on{opacity:1}
.idx_area .img02_area .num_box .chg_img img{position:absolute;bottom:-20px;left:-150px;opacity:0;}
.idx_area .img02_area .num_box .on img{animation-name:numimg;animation-duration:4s;animation-fill-mode:forwards;animation-delay:1s}
@keyframes numimg {
	0% {}
	30% {opacity:.2}
	80% {opacity:.2}
	100% {}
}

/*중앙 하단 이미지*/
.idx_area .img02_area .img_box .chg_img{position:absolute;width:100%;height:100%;background-size:cover;opacity:0}
.idx_area .img02_area .img_box .c1{background:url(/sh_img/index/main_banner/c_b_img01.jpg) no-repeat}
.idx_area .img02_area .img_box .c2{background:url(/sh_img/index/main_banner/c_b_img02.jpg) no-repeat}
.idx_area .img02_area .img_box .c3{background:url(/sh_img/index/main_banner/c_b_img03.jpg) no-repeat}
.idx_area .img02_area .img_box .on{z-index:10;animation-name:ctchgimg;animation-duration:1s;animation-fill-mode:forwards;opacity:1}
.idx_area .img02_area .img_box .zidx{z-index:9;opacity:1}

@keyframes ctchgimg {
	0% {bottom:-100%;opacity:1}
	100% {bottom:0;opacity:1}
}

/*우측이미지영역*/
.idx_area .big_img_area .img_box{position:relative;overflow:hidden;width:100%;height:100%}
.idx_area .big_img_area .img_box .chg_img{position:absolute;width:100%;height:100%;background-size:cover;opacity:0}
.idx_area .big_img_area .img_box .c1{background:url(/sh_img/index/main_banner/big_img01.jpg) no-repeat}
.idx_area .big_img_area .img_box .c2{background:url(/sh_img/index/main_banner/big_img02.jpg) no-repeat}
.idx_area .big_img_area .img_box .c3{background:url(/sh_img/index/main_banner/big_img03.jpg) no-repeat}
.idx_area .big_img_area .img_box .on{z-index:10;animation-name:chgbigimg;animation-duration:1s;animation-fill-mode:forwards;opacity:1}
.idx_area .big_img_area .img_box .zidx{z-index:9;opacity:1}

@keyframes chgbigimg {
	0% {right:-100%;opacity:1}
	100% {right:0;opacity:1}
}

.idx_area .big_img_area .main_controls{position:absolute;z-index:100;bottom:90px;left:100px;width:65px;height:65px;border-radius:65px;border:1px solid rgba(255,255,255,.4);font-size:13px;text-align:center;line-height:65px;color:rgba(255,255,255,.4);cursor:pointer; transition:all .3s}
.idx_area .big_img_area .main_controls:hover{border-color:#fff;left:95px;bottom:85px;width:75px;height:75px;border-radius:75px;line-height:75px;color:#fff}

.idx_area .big_img_area .main_txt{position:absolute;z-index:100;left:100px;bottom:295px;width:600px;height:219px}
.idx_area .big_img_area .main_txt .txt_box{position:absolute;opacity:0;transition:all .3s}
.idx_area .big_img_area .main_txt h2{overflow:hidden;position:relative;width:600px;height:78px;font-weight:700;font-size:63px;line-height:78px;color:#fff;font-family:'Poppins', sans-serif;}
.idx_area .big_img_area .main_txt .txt{position:relative;margin-top:20px;font-size:15px;color:rgba(255,255,255,.6);font-family:'Poppins', sans-serif;}
.idx_area .big_img_area .main_txt span{position:absolute;top:-85px;display:block}

.idx_area .big_img_area .main_txt .on{opacity:1}
.idx_area .big_img_area .main_txt .on span{animation-name:txton2;animation-duration:4.3s;animation-fill-mode:forwards}
.idx_area .big_img_area .main_txt .d1{animation-delay:.9s}
.idx_area .big_img_area .main_txt .d2{animation-delay:1.2s}

.idx_area .big_img_area .r_side_txt{position:absolute;z-index:100;right:-155px;top:332px;font-size:14px;color:#fff;transform:rotate(-90deg);font-family:'Poppins', sans-serif;}

.idx_area .big_img_area .main_num{position:absolute;z-index:100;right:50px;bottom:98px;width:48px;height:36px;font-weight:700;font-size:36px;line-height:36px;color:#fff;font-family:'Poppins', sans-serif;}
.idx_area .big_img_area .main_num li{position:absolute;width:100%;height:100%;opacity:0;transition:all .3s}
.idx_area .big_img_area .main_num .on{opacity:1}

.idx_area .big_img_area .idx_menu{left:100px}

@keyframes txton2 {
	0% {top:-85px;opacity:0}
	30% {top:0;opacity:1}
	70% {top:0;opacity:1}
	100% {top:-85px;opacity:0}
}

/*중앙,우측메뉴 공통*/
.idx_menu{position:absolute;left:50px;top:40px;z-index:100}
.idx_menu > li{float:left;margin-right:25px;font-weight:400;font-size:14px;font-family:'Poppins', sans-serif;}
.idx_menu > li a{color:rgba(255,255,255,.7);transition:all .3s}
.idx_menu > li a:hover{color:#fff}