@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body {font-family: 'Pretendard', sans-serif; color: #29203B;}
#content .block {display: block; color: #212121;}
#content .img_box img {width: 100%;}
#content .p_color {color: #7A519E;}
#content section h3 {display: inline-block; font-size: 45px; line-height: 1em; letter-spacing: -1px; text-align: center; position: relative; left: 50%; transform: translateX(-50%);}
#content section h3 .add_text {display: block; font-weight: 300; font-size: 24px; line-height: 1.2em; margin-bottom: .8em;}
#content section .text_box h4 {font-size: 18px; line-height: 1em; letter-spacing: 3px; left: 0; transform: translateX(0);}
#content section .text_box .add_text {font-size: 50px; font-weight: 600; line-height: 55px; letter-spacing: -1px; margin: 2em 0 1em;}
#content section .sub_text {font-size: 20px; font-weight: 300; line-height: 33px; letter-spacing: -1px;}
#content section .sub_text .p_color {display: inline; font-weight: 600;}
#content .cover {width: 100%; padding-top: 40.73%; background-image: url(/images/daeat/app/sub01_02_img_cover.png); background-repeat: no-repeat; background-position: center; background-size: cover;}
#content .intro .inner {display: flex; align-items: center; justify-content: center; padding: 80px 12% 80px 16.66%;}
#content .intro .inner .text_box {width: 40%;}
#content .intro .inner .img_box {width: 60%;}
#content .management {background: #F9F9F9;}
#content .management .inner {padding: 100px 16.66%;}
#content .management .inner .sub_text {text-align: center; margin-top: 1em;}
#content .detail .inner ul li {display: flex; align-items: center; justify-content: center; gap: 38px; padding: 0 16.66%;}
#content .detail .inner ul li:nth-child(2n-1) {flex-direction: row-reverse;}
#content .detail .inner ul li.diet {gap: 97px;}
#content .detail .inner ul li.diet .img_box {padding: 100px 0;}
#content .detail .inner ul li.graph {background: #F9F9F9;}
#content .detail .inner ul li.graph .img_box {padding: 100px 0;}
#content .detail .inner ul li .text_box {width: 45%;}
#content .detail .inner ul li .img_box {width: 55%;}
#content .contents {background: #F9F9F9; overflow: hidden; position: relative;}
#content .contents::before {content: ''; display: block; width: 70%; padding-top: 70%; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, #7A519E 0%, #934EF4 100%);
    position: absolute; top: 66%; left: 50%; transform: translateX(-50%);}
#content .contents .inner {padding: 196px 25% 0;}
#content .contents .inner ul {display: flex; align-items: end; justify-content: center;}
#content .contents .inner ul li {width: 50%; text-align: center;}
#content .contents .inner ul li .text_box {margin-bottom: 38px;}
#content .contents .inner ul li .text_box .add_text {margin: 1em 0 .5em;}
#content .download .inner {padding: 120px 34%;}
#content .download .inner .p_color {color: #8556E3;}
#content .download .inner .add_text {font-size: 18px; line-height: 26px; text-align: center; margin: 20px 0 60px;}
#content .download .inner .btn_box {display: flex; gap: 20px;}
#content .download .inner .btn_box li {width: 50%;}
#content .download .inner .btn_box li a {display: block; background-color: #000; padding: 24px 0; border-radius: 8px;}
#content .download .inner .btn_box li a span {display: block; width: 100%; height: 32px; background-repeat: no-repeat; background-position: center; background-size: contain;}

@media screen and (max-width:1540px) {
#content .intro .inner {padding: 80px 12%;}
#content .management .inner {padding: 100px 12%;}
#content .detail .inner ul li {padding: 0 12%;}
#content .contents .inner {padding: 196px 20% 0;}
#content .download .inner {padding: 120px 25%;}
}

@media screen and (max-width:1440px) {
#content .intro .inner {padding: 80px 8%;}
#content .management .inner {padding: 100px 8%;}
#content .detail .inner ul li {padding: 0 8%;}
#content .contents .inner {padding: 196px 15% 0;}
#content .download .inner {padding: 120px 20%;}
}

@media screen and (max-width:1058px) {
#content .intro .inner {padding: 80px 6%;}
#content .management .inner {padding: 100px 6%;}
#content .detail .inner ul li {padding: 0 6%;}
#content .download .inner {padding: 120px 15%;}
}

@media screen and (max-width:1024px) {
#content section .text_box .add_text {font-size: 32px; line-height: 1.2em;}
#content section .text_box .sub_text {font-size: 18px; line-height: 1.5em;}
#content .cover {padding-top: 76.37%; background-image: url(/images/daeat/app/sub01_02_img_cover_tab.png);}
#content .intro .inner {padding: 180px 5%;}
#content .intro .inner .text_box {width: 50%;}
#content .intro .inner .img_box {width: 50%;}
#content .management .inner {padding: 100px 0;}
#content .management .inner .sub_text {margin: 1em 0;}
#content .detail .inner ul li {gap: 16px; padding: 0 5%;}
#content .detail .inner ul li:nth-child(2n-1) {flex-direction: row;}
#content .detail .inner ul li.diet {gap: 16px;}
#content .contents::before {width: 103%; top: 69%;}
#content .contents .inner {padding: 196px 5% 0;}
#content .contents .inner ul li .text_box {margin-bottom: 38px;}
#content .download .inner {padding: 100px 15%;}
}

@media screen and (max-width:768px) {
#content .wrap { min-width: 375px; }
#content section h3 {font-size: 40px; line-height: 1.2em;}
#content section .sub_text {font-size: 18px; line-height: 26px;}
#content .cover {padding-top: 143.69%; background-image: url(/images/daeat/app/sub01_02_img_cover_mo.png);}
#content .intro .inner {flex-direction: column; padding: 75px 0 30px;}
#content .intro .inner .text_box {width: 100%; padding: 0 5%; box-sizing: border-box; text-align: center;}
#content .intro .inner .img_box {width: 100%;}
#content .management .inner {padding: 100px 0 60px;}
#content .management .inner h3 i {display: block;}
#content .management .inner .sub_text {margin: 1em 0 0;}
#content .management .inner .sub_text .block {display: inline;}
#content .management .inner .sub_text i {display: block;}
#content .detail .inner ul li {flex-direction: column; gap: 0;}
#content .detail .inner ul li:nth-child(2n-1) {flex-direction: column;}
#content .detail .inner ul li.diet {gap: 16px;}
#content .detail .inner ul li.diet .img_box {padding: 60px 0 40px;}
#content .detail .inner ul li.graph .img_box {padding: 60px 0 40px;}
#content .detail .inner ul li .text_box {width: 100%; padding-top: 100px;}
#content .detail .inner ul li .img_box {width: 100%;}
#content .contents::before {display: none;}
#content .contents .inner {padding: 126px 5% 60px;}
#content .contents .inner ul {flex-direction: column; gap: 80px;}
#content .contents .inner ul li {width: 100%; position: relative;}
#content .contents .inner ul li:nth-child(1):before {content: ''; display: block; width: 110%; padding-top: 140%; border-radius: 50% 0 0 50%; 
        background: linear-gradient(180deg, #7A519E 0%, #934EF4 100%); position: absolute; bottom: 0; right: -60%;}
#content .contents .inner ul li:nth-child(2):before {content: ''; display: block; width: 110%; padding-top: 140%; border-radius: 0 50% 50% 0; 
        background: linear-gradient(180deg, #7A519E 0%, #934EF4 100%); position: absolute; bottom: 0; left: -60%;}
#content .contents .inner ul li .text_box {margin-bottom: 38px;}
#content .contents .inner ul li .text_box .add_text {margin: 1em 0 .5em;}
#content .download .inner {padding: 80px 10%;}
#content .download .inner h3 {font-size: 28px; line-height: 36px; letter-spacing: -2px;}
#content .download .inner .add_text {font-size: 16px; line-height: 24px; margin: 14px 0 40px;}
#content .download .inner .add_text i {display: block;}
#content .download .inner .btn_box {flex-direction: column; gap: 16px;}
#content .download .inner .btn_box li {width: 100%;}
#content .download .inner .btn_box li a {padding: 18px 0;}
#content .download .inner .btn_box li a span {height: 26px;}
}