@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); /* font-family: 'Pretendard', sans-serif; */

/* #content */
body {font-family: 'Pretendard', sans-serif; color: #29203B;}

.block {display: block; color: #212121;}
.img_box img {width: 100%;}
.p_color {color: #7A519E;}

section h3 {display: inline-block; font-size: 45px; line-height: 1em; letter-spacing: -1px; text-align: center; position: relative; left: 50%; transform: translateX(-50%);}
section h3 .add_text {display: block; font-weight: 300; font-size: 24px; line-height: 1.2em; margin-bottom: .8em;}
section .text_box h4 {font-size: 18px; line-height: 1em; letter-spacing: 3px; left: 0; transform: translateX(0);}
section .text_box .add_text {font-size: 50px; font-weight: 600; line-height: 55px; letter-spacing: -1px; margin: 2em 0 1em;}
section .sub_text {font-size: 20px; font-weight: 300; line-height: 33px; letter-spacing: -1px;}
section .sub_text .p_color {display: inline; font-weight: 600;}


.cover {width: 100%; padding-top: calc(782/1920*100%); background-image: url(../images/sub01_02_img_cover.png); background-repeat: no-repeat; background-position: center; background-size: cover;}


.intro .inner {display: flex; align-items: center; justify-content: center; padding: 80px 12% 80px 16.66%;}
.intro .inner .text_box {width: 40%;}
.intro .inner .img_box {width: 60%;}


.management {background: #F9F9F9;}
.management .inner {padding: 100px 16.66%;}
.management .inner .sub_text {text-align: center; margin-top: 1em;}


.detail .inner ul li {display: flex; align-items: center; justify-content: center; gap: 38px; padding: 0 16.66%;}
.detail .inner ul li:nth-child(2n-1) {flex-direction: row-reverse;}
.detail .inner ul li.diet {gap: 97px;}
.detail .inner ul li.diet .img_box {padding: 100px 0;}
.detail .inner ul li.graph {background: #F9F9F9;}
.detail .inner ul li.graph .img_box {padding: 100px 0;}
.detail .inner ul li .text_box {width: 45%;}
.detail .inner ul li .img_box {width: 55%;}


.contents {background: #F9F9F9; overflow: hidden; position: relative;}
.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%);}
.contents .inner {padding: 196px 25% 0;}
.contents .inner ul {display: flex; align-items: end; justify-content: center;}
.contents .inner ul li {width: 50%; text-align: center;}
.contents .inner ul li .text_box {margin-bottom: 38px;}
.contents .inner ul li .text_box .add_text {margin: 1em 0 .5em;}


.download .inner {padding: 120px 34%;}
.download .inner .p_color {color: #8556E3;}
.download .inner .add_text {font-size: 18px; line-height: 26px; text-align: center; margin: 20px 0 60px;}
.download .inner .btn_box {display: flex; gap: 20px;}
.download .inner .btn_box li {width: 50%;}
.download .inner .btn_box li a {display: block; background-color: #000; padding: 24px 0; border-radius: 8px;}
.download .inner .btn_box li a span {display: block; width: 100%; height: 32px; background-repeat: no-repeat; background-position: center; background-size: contain;}



/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) { 
    .intro .inner {padding: 80px 12%;}
    .management .inner {padding: 100px 12%;}
    .detail .inner ul li {padding: 0 12%;}
    .contents .inner {padding: 196px 20% 0;}
    .download .inner {padding: 120px 25%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .intro .inner {padding: 80px 8%;}
    .management .inner {padding: 100px 8%;}
    .detail .inner ul li {padding: 0 8%;}
    .contents .inner {padding: 196px 15% 0;}
    .download .inner {padding: 120px 20%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .intro .inner {padding: 80px 6%;}
    .management .inner {padding: 100px 6%;}
    .detail .inner ul li {padding: 0 6%;}
    .download .inner {padding: 120px 15%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */ 
    section .text_box .add_text {font-size: 32px; line-height: 1.2em;}
    section .text_box .sub_text {font-size: 18px; line-height: 1.5em;}


    .cover {padding-top: calc(782/1024*100%); background-image: url(../images/sub01_02_img_cover_tab.png);}    
    

    .intro .inner {padding: 180px 5%;}
    .intro .inner .text_box {width: 50%;}
    .intro .inner .img_box {width: 50%;}

    
    .management .inner {padding: 100px 0;}
    .management .inner .sub_text {margin: 1em 0;}
    

    .detail .inner ul li {gap: 16px; padding: 0 5%;}
    .detail .inner ul li:nth-child(2n-1) {flex-direction: row;}
    .detail .inner ul li.diet {gap: 16px;}
    
    
    .contents::before {width: 103%; top: 69%;}
    .contents .inner {padding: 196px 5% 0;}
    .contents .inner ul li .text_box {margin-bottom: 38px;}


    .download .inner {padding: 100px 15%;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */   
    section h3 {font-size: 40px; line-height: 1.2em;}
    section .sub_text {font-size: 18px; line-height: 26px;}


    .cover {padding-top: calc(615/428*100%); background-image: url(../images/sub01_02_img_cover_mo.png);}  
    

    .intro .inner {flex-direction: column; padding: 75px 0 30px;}
    .intro .inner .text_box {width: 100%; padding: 0 5%; box-sizing: border-box; text-align: center;}
    .intro .inner .img_box {width: 100%;}
    
    
    .management .inner {padding: 100px 0 60px;}
    .management .inner h3 i {display: block;}
    .management .inner .sub_text {margin: 1em 0 0;}
    .management .inner .sub_text .block {display: inline;}
    .management .inner .sub_text i {display: block;}
    
    
    .detail .inner ul li {flex-direction: column; gap: 0;}
    .detail .inner ul li:nth-child(2n-1) {flex-direction: column;}
    .detail .inner ul li.diet {gap: 16px;}
    .detail .inner ul li.diet .img_box {padding: 60px 0 40px;}
    .detail .inner ul li.graph .img_box {padding: 60px 0 40px;}
    .detail .inner ul li .text_box {width: 100%; padding-top: 100px;}
    .detail .inner ul li .img_box {width: 100%;}


    .contents::before {display: none;}
    .contents .inner {padding: 126px 5% 60px;}
    .contents .inner ul {flex-direction: column; gap: 80px;}
    .contents .inner ul li {width: 100%; position: relative;}
    .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%;}
    .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%;}
    .contents .inner ul li .text_box {margin-bottom: 38px;}
    .contents .inner ul li .text_box .add_text {margin: 1em 0 .5em;}


    .download .inner {padding: 80px 10%;}
    .download .inner h3 {font-size: 28px; line-height: 36px; letter-spacing: -2px;}
    .download .inner .add_text {font-size: 16px; line-height: 24px; margin: 14px 0 40px;}
    .download .inner .add_text i {display: block;}
    .download .inner .btn_box {flex-direction: column; gap: 16px;}
    .download .inner .btn_box li {width: 100%;}
    .download .inner .btn_box li a {padding: 18px 0;}
    .download .inner .btn_box li a span {height: 26px;}
}