@charset "utf-8";

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

/* 바로가기 */
#mainArea .wings{display:flex;flex-direction:column;justify-content:space-between}
#mainArea .wings li{width:316px;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 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:19px;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:608px;height:578px;border-radius:24px;background-color:#ddd}
#mainBnr .pager_dot{display:inline-block;position:absolute;left:60px;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{position:absolute;left: 40px;top: 30px;font-size:18px;color:#fff;transition:all .25s ease-out;font-family:'LotteMartHappy'}
#mainBnr ul .bnr01 .txt p{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 .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:48px;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:#5f3e3e}
#mainBnr ul .bnr02 .txt p span{display:block;position:absolute;left:-50px;top:-25px;z-index:-1;width:72px;height:72px;border-radius:50%;font-size:15px;text-align:center;letter-spacing:0;line-height:73px;text-shadow:none;background-color:#ffc300}
#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}