@charset "utf-8";
/* animation */
@-webkit-keyframes bounce-effect {
    0% { transform: translate(0,-5px); }
    100% { transform: translate(0,5px); }
}
@keyframes bounce-effect {
    0% { transform: translate(0,-5px); }
    100% { transform: translate(0,5px); }
}

/**  main  **/
#main { position: relative; width: 100%; text-align: center; } 
#main .btn_box a { display: inline-block; font-size: var(--font-large); font-weight: 700; color: var(--color-white); line-height: 24px; padding: 13px 24px; border-radius: 25px; background: var(--color-main); box-shadow: 0px 4px 10px rgba(120, 120, 120, 0.76); -webkit-animation: bounce-effect 0.7s alternate ease-in-out infinite; animation: bounce-effect 0.7s alternate ease-in-out infinite; } 
#main .btn_box a::after { width: 11px; height: 19px; background: url(../../image/main/btn_arrow.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -1px; margin-left: 10px; } 
/** section 01 **/
.section01 { width: 100%; background: #fee6c2; } 
.section01 .inner { padding: 8px 24px 16px; } 
.section01 .inner h2 { font-size: var(--font-large); font-weight: 900; color: var(--color-dark-gray); line-height: 30px; font-family: 'Gmarket Sans'; margin-bottom: 10px; } 
.section01 .inner h2::before { display: block; width: 66px; height: 46px; background: url(../../image/main/logo_sangsang.webp) no-repeat center center; background-size: contain; margin: 0 auto 4px; content: ''; } 
.section01 .inner h2 strong { color: #37b051; } 
.section01 .inner h2 span { color: #8c4ef7; } 
.section01 .inner a { display: block; max-width: 350px; margin: 0 auto; } 
.section01 .inner a img { width: 100%; }
/** section 02 **/
.section02 { width: 100%; background: #efecff; } 
.section02 .inner { padding: 56px 24px 32px; } 
.section02 h2 { font-size: 44px; font-weight: 700; line-height: 53px; margin-bottom: 8px; } 
.section02 .inner > p { font-size: var(--font-medium); line-height: 26px; margin-bottom: 24px; } 
.section02 .btn_box { width: 100%; margin-bottom: 56px; }
.section02 .btn_box a { display: inline-block; } 
.section02 .inner > img { width: 100%; max-width: 350px; border-radius: var(--border-radius); border-top-left-radius: 0px; overflow: hidden; margin-bottom: 24px; } 
.section02 ul { position: relative; display: flex; justify-content: center; } 
.section02 ul li { width: 72px; margin-right: 24px; } 
.section02 ul li:last-of-type { margin-right: 0; } 
.section02 ul li img { width: 72px; height: 72px; background: var(--color-white); border-radius: 50%; overflow: hidden; } 
.section02 ul li p { font-size: var(--font-medium); font-weight: 700; color: #222; line-height: 26px; margin-top: 8px; } 
.section02 ul li p b { color: #417AB6; } 
/** section 03 **/
.section03 { width: 100%; background: var(--color-white); } 
.section03 .inner { padding: 64px 24px; } 
.section03 .txt_box { margin-bottom: 64px; } 
.section03 .txt_box span { display: inline-block; font-size: var(--font-medium); font-weight: 700; color: var(--color-white); line-height: 26px; padding: 4px 8px; background: #777777; margin-bottom: 16px; } 
.section03 .txt_box p { font-size: var(--font-large-xl); font-weight: 700; line-height: 34px; margin-bottom: 24px; } 
.section03 .txt_box p.ico_emoji::after { display: block; width: 40px; height: 40px; background: url(../../image/main/txt_emoji.webp) no-repeat center center; background-size: contain; content: ''; margin: 16px auto 0; } 
.section03 .txt_box p b { color: var(--color-main); } 
.section03 .txt_box img { width: 100%; max-width: 350px; border-radius: var(--border-radius); border-top-left-radius: 0px; overflow: hidden; } 