@charset "utf-8";

#main_bnr_area{position:relative;width:100%;height:100%;background-color:#f0f7fd;}
#main_bnr_area .big_bnr{overflow:hidden;position:absolute;z-index:1;right:0;top:0;width:calc(50% - 50px);height:100%;background:#fff}
#main_bnr_area .big_bnr > div{position:absolute;top:0;width:100%;height:100%}
#main_bnr_area .big_bnr > div img{width:100%}
#main_bnr_area .big_bnr .bnr01{z-index:8}
#main_bnr_area .big_bnr .bnr02{z-index:7}
#main_bnr_area .big_bnr .bnr03{z-index:6}
#main_bnr_area .big_bnr .zidx{z-index:9}
#main_bnr_area .big_bnr .on{z-index:10;left:0;animation:leftimg 1.5s forwards;}

@keyframes leftimg {
	0% {left:-100%}
	100% {left:0}
}


#main_bnr_area .side_img{overflow:hidden;position:absolute;top:150px;left:0;width:150px;height:calc(100% - 300px);background:#666}
#main_bnr_area .side_img > div{position:absolute;top:0;width:100%;height:100%}
#main_bnr_area .side_img > div img{width:100%}
#main_bnr_area .side_img .side_bnr01{z-index:8}
#main_bnr_area .side_img .side_bnr02{z-index:7}
#main_bnr_area .side_img .side_bnr03{z-index:6}
#main_bnr_area .side_img .zidx{z-index:9}
#main_bnr_area .side_img .on{z-index:10;right:0;animation:rightimg 1.5s forwards;}


#main_bnr_area .main_tit{font-size:38px;line-height:1.6}

#main_bnr_area .txt_img_box{position:absolute;z-index:2;right:0;bottom:0;width:calc(50% + 100px);height:330px;background: url(/sh_img/index/idx_bg.jpg) repeat;}
#main_bnr_area .main_txt_box {position:absolute;top:240px;left:265px}
#main_bnr_area .main_txt_box .controls{overflow:hidden;width:132px;height:62px;padding:0 1px}
#main_bnr_area .main_txt_box .controls > div{float:left;width:60px;height:60px;border-radius:60px;border:1px solid #c8c8c8;font-size:11px;line-height:60px;color:rgba(0,0,0,.6);text-align:center;cursor:pointer}
#main_bnr_area .main_txt_box .controls > div:last-child{margin-left:10px}

#next{position:relative;}
#next svg{position:absolute;top:-2px;left:-1px}
#next #cercle_blanc{stroke-dashoffset:190;stroke-dasharray:190;position:absolute;top:0;stroke-linecap:round}
#next.on #cercle_blanc{animation:fill 6s cubic-bezier(0.165, 0.840, 0.440, 1.000)}
#next.on2 #cercle_blanc{animation:fill2 6s cubic-bezier(0.165, 0.840, 0.440, 1.000)}

@keyframes fill{from{stroke-dashoffset:190}to{stroke-dashoffset:0}}
@keyframes fill2{from{stroke-dashoffset:190}to{stroke-dashoffset:0}}

.txt_img_box .img{position:absolute;right:0;bottom:0;width:430px;height:480px;background:#666}
.txt_img_box .img > div{position:absolute;top:0;right:0;width:100%;height:100%}
.txt_img_box .img .s_bnr01{z-index:9}
.txt_img_box .img .s_bnr02{z-index:8}
.txt_img_box .img .s_bnr03{z-index:7}
.txt_img_box .img .zidx{z-index:10}
.txt_img_box .img .on{z-index:11;top:0;right:0;animation:rightimg 1s forwards;}

@keyframes rightimg {
	0% {right:-100%}
	100% {right:0}
}

.txt_img_box .txt_box{padding:100px 0 0 80px}
.txt_img_box .txt_box .tit{width:47%;padding-bottom:18px;font-weight:700;font-size:20px;line-height:1.7;word-break:keep-all;color:#fff;font-family:'notokr-bold'}
.txt_img_box .txt_box .txt{width:47%;font-size:14px;line-height:24px;color:rgba(255,255,255,.3);word-break:keep-all;font-family:'notokr-regular'}

.main_txt_box .main_tit{padding-bottom:20px;font-weight:700;font-size:109px;line-height:112px;letter-spacing:-1px;font-family:'notokr-bold';}
.main_txt_box .main_txt{width:59%;margin-bottom:50px;font-size:14px;line-height:24px;color:#666;font-family:'notokr-regular'}