/* #content */
#content {color: #29203B;}
.img_box img {width: 100%; border-radius: 16px;}
.block {display: block;}

section .more_btn {display: inline-block; font-weight: 500; font-size: 24px; color: #8556E3; padding: 24px 36px; 
    border: 1px solid #8556E3; border-radius: 8px; box-sizing: border-box;}

section .main_title {letter-spacing: -0.02em; line-height: 56px; margin-bottom: 20px;}
section .sub_text {letter-spacing: -0.02em; margin-bottom: 1em;}
section .sub_text:last-of-type {margin-bottom: 0;}


.introduction .inner {padding: 0 16.66% 120px;}
.introduction .inner ul {display: flex; justify-content: space-between; align-items: center;}
.introduction .inner ul li {width: 48%;}


.types {background: #F5F5F5;}
.types .inner {padding: 120px 16.66%;}
.types .inner .medicine_box {margin-top: 48px;}
.types .inner .medicine_box > li {display: flex; justify-content: space-between; align-items: stretch; margin-bottom: 48px;}
.types .inner .medicine_box > li:last-child {margin-bottom: 0;}
.types .inner .medicine_box > li > div {width: 48%; border-radius: 16px; background: #fff;}
.types .inner .medicine_box > li .img_box img {height: 100%; object-fit: contain;}
.types .inner .medicine_box > li .text_box {padding: 40px; box-sizing: border-box;}
.types .inner .medicine_box > li .text_box dl dt {font-weight: 700; font-size: 32px; line-height: 42px; letter-spacing: -0.64px; margin-bottom: 8px;}
.types .inner .medicine_box > li .text_box dl dd {font-weight: 300; font-size: 16px; line-height: 22px; letter-spacing: -0.32px; margin-bottom: 1em;}
.types .inner .medicine_box > li .text_box dl dd:last-of-type {margin-bottom: 0;}
.types .inner .medicine_box > li .text_box .characteristics {display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-top: 20px;}
.types .inner .medicine_box > li .text_box .characteristics li {width: 15%; position: relative;}
.types .inner .medicine_box > li .text_box .characteristics li::before {content: ''; display: block; width: 100%; padding-top: 100%;}
.types .inner .medicine_box > li .text_box .characteristics li p {width: 100%; height: 100%; background: #fff; border-radius: 50%; 
    font-size: 14px; line-height: 17px; letter-spacing: -0.28px; text-align: center; border: 1px solid #8556E3; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.types .inner .medicine_box > li .text_box .characteristics li.on p {background: #EBE1FF;}
.types .inner .medicine_box > li .text_box .more_btn {font-size: 16px; letter-spacing: -0.32px; padding: 12px 36px; margin-top: 30px;}


.banner_area .inner {padding: 0 16.66%;}
.banner_area .inner ul {display: flex; align-items: end; justify-content: space-between;}
.banner_area .inner ul li.text_box {padding: 120px 0;}
.banner_area .inner ul li.img_box {width: 40%; padding-top: 40%; background-image: url(../images/sub01_10_img_model.png?v=0226);
    background-repeat: no-repeat; background-position: left bottom; background-size: contain;}


/* 팝업 s */
.popup_bg {width: 100%; height: 100vh; background: rgba(0, 0, 0, .6); position: fixed; top: 0; left: 0; z-index: 2000; display: none;}
.popup_con {position: fixed; left: 50%; top: 50vh; transform: translate(-50%, -50%); z-index: 2000; display: none;}
.popup_con .img_box {margin: 0 auto; position: relative;}
.popup_con .img_box img {width: auto; height: 80vh; object-fit: contain;}
.popup_con .btn_close {display: inline-block; width: 70px; height: 70px; position: absolute; top: -47px; right: 10px;}
.popup_con .btn_close::before {content: ''; width: 48px; height: 1.5px; border-radius: 1px; background: #fff; position: absolute; top: 50%; left: 50%; margin-left: -24px; transform: rotate(-45deg);}
.popup_con .btn_close::after {content: ''; width: 48px; height: 1.5px; border-radius: 1px; background: #fff; position: absolute; top: 50%; left: 50%; margin-left: -24px; transform: rotate(45deg);}
/* 팝업 e */


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .introduction .inner {padding: 0 12% 120px;}
    .types .inner {padding: 120px 12%;}   
    .banner_area .inner {padding: 0 12%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .introduction .inner {padding: 0 8% 120px;}
    .types .inner {padding: 120px 8%;}   
    .banner_area .inner {padding: 0 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .introduction .inner {padding: 0 6% 120px;}
    .types .inner {padding: 120px 6%;}   
    .banner_area .inner {padding: 0 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .main_title {font-size: 28px; margin-bottom: 12px; line-height: 36px;}
    section .sub_text {font-size: 14px; line-height: 20px;}
    section .more_btn {font-size: 18px; padding: 22px 36px;}

    .introduction .inner {padding: 0 5% 80px;}


    .types .inner {padding: 80px 5%;}
    .types .inner .medicine_box {margin-top: 16px;}
    .types .inner .medicine_box li {border-radius: 16px; overflow: hidden;}
    .types .inner .medicine_box > li > div {background: #fff;}
    .types .inner .medicine_box > li .img_box {width: 45%; border-radius: 16px 0 0 16px;}
    .types .inner .medicine_box > li .text_box {width: 55%; padding: 32px 5%; border-radius: 0 16px 16px 0;}
    .types .inner .medicine_box > li .text_box dl dt {font-size: 18px; line-height: 26px; letter-spacing: -0.36px; margin-bottom: 16px;}
    .types .inner .medicine_box > li .text_box dl dd {font-size: 14px; line-height: 20px; letter-spacing: -0.28px;}
    .types .inner .medicine_box > li .text_box dl dd .block {display: inline;}
    .types .inner .medicine_box > li .text_box .characteristics {gap: 6px;}
    .types .inner .medicine_box > li .text_box .characteristics li {width: 18%;}
    .types .inner .medicine_box > li .text_box .characteristics li p {width: 98%; height: 98%; font-size: 13px; line-height: 15px; letter-spacing: -0.26px;}
    .types .inner .medicine_box > li .text_box .more_btn {font-size: 12px; line-height: 18px; letter-spacing: 0px; padding: 8px 24px; margin-top: 20px;}


    .banner_area {border-bottom: 1px solid rgba(46, 21, 102, .05);}
    .banner_area .inner {padding: 0 5%;}
    .banner_area .inner ul li.text_box {padding: 52px 0;}
    .banner_area .inner ul li.text_box .main_title {margin-bottom: 24px;}
    .banner_area .inner ul li.img_box {width: 50%; padding-top: 50%;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    section .more_btn {font-size: 14px; padding: 18px 28px;}

    .introduction .inner {padding: 60px 5%;}
    .introduction .inner ul {flex-direction: column;}
    .introduction .inner ul li {width: 100%;}
    .introduction .inner ul .img_box {margin-top: 16px;}
    .introduction .inner ul li img {border-radius: 8px;}


    .types .inner {padding: 60px 5%;}
    .types .inner .medicine_box > li {flex-direction: column; border-radius: 8px;}
    .types .inner .medicine_box > li .img_box {width: 100%; border-radius: 8px 8px 0 0;}
    .types .inner .medicine_box > li .text_box {width: 100%; border-radius: 0 0 8px 8px; padding: 20px 5%;}
    .types .inner .medicine_box > li .text_box dl dt {font-size: 22px; line-height: 32px; letter-spacing: -0.44px;}
    .types .inner .medicine_box > li .text_box .characteristics {flex-wrap: wrap; margin-top: 16px;}
    .types .inner .medicine_box > li .text_box .characteristics li {width: 20%;}
    .types .inner .medicine_box > li .text_box .more_btn {padding: 8px 28px; margin-top: 16px;}


    .banner_area {border-bottom: none;}
    .banner_area .inner ul {align-items: center; flex-direction: column;}
    .banner_area .inner ul li {width: 100%; text-align: center;}
    .banner_area .inner ul li.text_box {padding: 60px 0 24px;}
    .banner_area .inner ul li.img_box {width: 100%; padding-top: 100%; background-image: url(../images/sub01_10_img_model_mo.png?v=0226); background-position: center bottom;}


    /* 팝업 s */
    .popup_con {width: 90%;}
    .popup_con .img_box img {width: 100%; height: auto;}
    .popup_con .btn_close {width: 50px; height: 50px; top: -35px; right: 5px;}
    .popup_con .btn_close::before {width: 35px; margin-left: -17.5px;}
    .popup_con .btn_close::after {width: 35px; margin-left: -17.5px;}
    /* 팝업 e */
}