@charset "utf-8";

#mainArea{display:flex;justify-content:space-between;position:relative;max-width:1280px;width:100%;margin:0 auto;font-size:15px;letter-spacing:-.2px;line-height:1.6;font-family:'notokr-medium'}
#mainArea .pl{white-space:pre-line}

/* 바로가기 */
#mainArea .wings{display:flex;flex-direction:column;justify-content:space-between;width:25%}
#mainArea .wings li{height:278px;border-radius:24px;background-color:#dcedf6}
#mainArea .wings li.box02{background-color:#f5eee4}
#mainArea .wings li.box03{background-color:#e4efdd}
#mainArea .wings li.box04{background-color:#ece6f8}
#mainArea .wings li a{display:block;position:relative;height:100%;padding:40px 20px 40px 32px;color: rgba(0,0,0,.6)}
#mainArea .wings li p{margin-bottom:15px;font-size:22px;color:#222;font-family:'LotteMartHappy'}
#mainArea .wings li img{position:absolute;right:30px;bottom:25px;transition:all .2s ease-out}
#mainArea .wings li span{display:block;position:absolute;left:32px;bottom:40px;width:42px;height:42px}
#mainArea .wings li span:before{display:block;content:"";transform:scale(1);width:100%;height:100%;border-radius:50%;background-color:#666;transition:all .25s ease-out}
#mainArea .wings li span:after{display:block;content:"";position:absolute;left:0;top:0;transform:scale(0);width:100%;height:100%;border-radius:50%;background-color:#fff;transition:all .25s ease-out}
#mainArea .wings li span i{position:absolute;left:10px;top:12px;z-index:1;font-size:18px;color:#fff;transition:all .25s ease-out}
#mainArea .wings li:hover span:before{transform:scale(0);transition:all .25s ease-in}
#mainArea .wings li:hover span:after{transform:scale(1);transition:all .25s ease-in}
#mainArea .wings li:hover span i{color:#222;transition:all .25s ease-out}
#mainArea .wings li:hover img{transform:rotate(5deg)}

/* 메인배너 */
#mainBnr{position:relative;width:47%;height:578px;border-radius:24px;background-color:#ddd}
#mainBnr .pager_dot{display:inline-block;position:absolute;left:10%;bottom:60px;z-index:101;width:auto}
#mainBnr .pager_dot span{opacity:.4;width:11px;height:11px;margin:0;border-radius:10px;background-color:#fff;transition:all .2s}
#mainBnr .pager_dot span+span{margin-left:8px}
#mainBnr .pager_dot span.on{opacity:1;width:25px}
#mainBnr ul li{overflow:hidden;width:100%;height:100%;background:url(/sh_img/index/main_banner/bg01.jpg) center no-repeat}
#mainBnr ul li img{position:absolute}
/* 배너-1 */
#mainBnr ul .bnr01 .txt{opacity:0;position:absolute;left:10%;top:70px;font-size:18px;color:#fff;transition:all .25s ease-out;font-family:'LotteMartHappy'}
#mainBnr ul .bnr01 .txt p{margin-bottom:15px;font-size:40px;line-height:1.3}
#mainBnr ul .bnr01 .img01{top:200px;right:30px}
#mainBnr ul .bnr01 .img02{top:160px;right:90px;opacity:0;transition:all .2s}
#mainBnr ul .bnr02 .txt p{word-break:keep-all;line-height:1.3}
#mainBnr ul .bnr01.on .txt{opacity:1}
#mainBnr ul .bnr01.on .img02{opacity:1;transition:all .2s .2s}
/* 배너-2 */
#mainBnr ul .bnr02{background-image:url(/sh_img/index/main_banner/bg02.jpg)}
#mainBnr ul .bnr02 .txt{position:absolute;left:90px;top:70px;font-size:40px;color:#fff;letter-spacing:-2.5px;font-family:'LotteMartHappy'}
#mainBnr ul .bnr02 .txt p{display:inline-block;position:relative;opacity:0;transition:all .25s ease-out}
#mainBnr ul .bnr02 .txt p b{color:#fded95}
#mainBnr ul .bnr02 .txt p span{display:block;position:absolute;left:-50px;top:-25px;z-index:-1;width:72px;height:72px;padding-top:15px;border-radius:50%;font-weight:600;font-size:15px;text-align:center;letter-spacing:0;text-shadow:none;background-color:#f44d2b}
#mainBnr ul .bnr02 .img01{bottom:0;left:90px}
#mainBnr ul .bnr02 .img02{top:170px;left:50px;opacity:0;transform:scale(0);transition:opacity .2s, transform .25s ease-out}
#mainBnr ul .bnr02.on .txt p{opacity:1}
#mainBnr ul .bnr02.on .img02{opacity:1;transform:scale(1);transition:opacity .2s, transform .4s ease-out .2s}

@media(max-width:1230px){
#mainArea .pl{white-space:normal;word-break:keep-all}	
}
@media(max-width:1024px){
#mainArea .wings li a{padding:30px 20px 30px 30px}
#mainBnr ul .bnr01 .txt{top:50px}
#mainBnr ul .bnr01 .txt p{font-size:36px}
#mainBnr ul .bnr02 .txt{top:90px;left:10%;padding-right:10px;font-size:36px}
#mainBnr ul .bnr02 .txt p span{top:-50px;left:0}
}
@media(max-width:768px){
#mainArea{flex-wrap:wrap;padding:0 20px}
#mainArea .wings{width:calc(50% - 10px);margin-top:20px}
#mainArea .wings li+li{margin-top:20px}
#mainBnr{order:-1;width:100%;height:450px}	
#mainBnr ul li{background-size:cover}
#mainBnr ul .bnr02 .txt{top:50px;left:50%;transform:translateX(-50%)!important;width:100%;text-align:center}
#mainBnr ul .bnr02 .txt p span{position:relative;left:auto;top:auto;width:120px;height:auto;margin:0 auto 10px;padding-top:0;border-radius:30px;line-height:40px}
#mainBnr ul .bnr02 .txt p span br{display:none;}
#mainBnr ul .bnr02 .img01{max-width:357px;width:100%;left:50%;transform:translateX(-50%)!important}
#mainBnr ul .bnr02 .img02{max-width:416px;width:100%;left:50%;transform:translateX(-50%)!important}
#mainBnr .pager_dot{bottom:35px}
}
@media(max-width:480px){
#mainArea{padding:0 15px}
#mainArea .wings{width:100%;margin-top:15px}
#mainArea .wings li{height:auto}
#mainArea .wings li+li{margin-top:15px}
#mainArea .wings li a{padding:25px}
#mainArea .wings li p{margin-bottom:10px}
#mainArea .wings li img{right:20px;bottom:auto;top:15px;width:45px}
#mainArea .wings li.box04 img{width:35px}
#mainArea .wings li span{display:none}
#mainBnr ul .bnr01 .txt{font-size:16px}
#mainBnr ul .bnr01 .txt p{font-size:28px}
#mainBnr ul .bnr02 .txt{padding:0 20px}
#mainBnr ul .bnr02 .txt p{font-size:30px}
}