@charset "utf-8";

/* #content */
section .inner > p {font-weight: 700; font-size: 70px; letter-spacing: -1px; text-align: center;}
section .inner > p.m_color {font-size: 50px; padding: 50px 0; margin-top: 50px; position: relative;}
section .inner > p.m_color::before {content: ''; display: block; width: 85px; height: 4px; background: #161718; 
    position: absolute; top: 0; left: 50%; margin-left: -42.5px;}
section .inner > div p {font-weight: 300; font-size: 35px; line-height: 52px; letter-spacing: -1px; text-align: center; color: #505050;}
section .inner > div strong {font-weight: 500;}
.img_box img {width: 100%;}
.block {display: block;}

.top_banner .inner {position: relative;}
.top_banner .inner .mo_ver {display: none;}
.top_banner .inner .pc_ver {width: 100%; padding-top: calc(562/1920 * 100%); position: relative;
    background-repeat: no-repeat; background-position: center; background-size: cover;}
.top_banner .inner .pc_ver iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.top_banner .inner img {width: 100%;}
.top_banner .inner .text_box {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center;}
.top_banner .inner h2 {font-size: 90px; line-height: 1em; letter-spacing: -1px;}
.top_banner .inner p {font-size: 28px; line-height: 1em; letter-spacing: -1px; margin-top: 32px; color: #fff;}


.doctors {background: #F2F2F2;}
.doctors .inner {padding: 150px 16.66% 0;}
.doctors .inner .img_box {margin-top: 50px;}


.knowhow .inner {padding: 150px 16.66%;}
.knowhow .inner > p.m_color {margin-bottom: 0;}
.knowhow .inner ul {margin-top: 100px;}
.knowhow .inner ul li {background-repeat: no-repeat; background-size: cover; border-radius: 20px; overflow: hidden; margin-bottom: 30px;}
.knowhow .inner ul li:last-child {margin-bottom: 0;}
.knowhow .inner ul li:nth-child(1) {background-image: url(../images/img_knowhow01.png); background-position: right center;}
.knowhow .inner ul li:nth-child(2) {background-image: url(../images/img_knowhow02.png); background-position: left center;}
.knowhow .inner ul li:nth-child(3) {background-image: url(../images/img_knowhow03.png); background-position: right center;}
.knowhow .inner ul li:nth-child(4) {background-image: url(../images/img_knowhow04.png); background-position: left center;}
.knowhow .inner ul li dl {padding: 120px 5%;}
.knowhow .inner ul li:nth-child(2n) dl {text-align: right;}
.knowhow .inner ul li dl dt {font-weight: 700; font-size: 45px; line-height: 45px; letter-spacing: -1px; margin-bottom: 25px;}
.knowhow .inner ul li dl dd {font-weight: 300; font-size: 30px; line-height: 44px; letter-spacing: -1px; color: #505050;}


.rules {background: #F2F2F2;}
.rules .inner {padding: 150px 12.5%;}
.rules .inner .mo_ver {display: none;}
.rules .inner ul {display: flex; justify-content: space-between; gap: 30px; margin-top: 100px;}
.rules .inner ul li .img_box img {height: 100%; object-fit: contain; border-radius: 50%;}
.rules .inner ul li p {font-weight: 300; font-size: 30px; line-height: 55px; letter-spacing: -1px; text-align: center; color: #000; margin-top: 30px;}
.rules .inner ul li p strong {display: block; font-size: 40px;}


.result .inner {padding: 150px 16.66%;}
.result .inner > p.m_color {margin-bottom: 0;}
.result .inner ul {display: flex; align-items: center; justify-content: space-between; margin: 100px 0;}
.result .inner ul .img_box {width: 50%;}
.result .inner ul .text_box {width: 45%; text-align: center; color: #505050;}
.result .inner ul .text_box p {font-weight: 300; font-size: 35px; line-height: 50px; letter-spacing: -2px; color: #161718;}
.result .inner ul .text_box p strong {font-weight: 500;}
.result .inner ul .text_box .check_list {width: 70%; background: #EAF2FF; padding: 30px 7%; border-radius: 10px; margin: 32px auto; box-sizing: border-box;}
.result .inner ul .text_box .check_list p {text-align: left; font-size: 30px; line-height: 55px; position: relative;}
.result .inner ul .text_box .check_list p::before {content: ''; display: inline-block; width: 23px; height: 21px; margin-right: 2%;
    background: url(../images/icon_check.png) center no-repeat; background-size: contain; position: relative; left: 0; top: 0;}
.result .inner ul .text_box span {font-weight: 300; font-size: 30px; line-height: 42px; letter-spacing: -2px;}
.result .inner .notice {font-weight: 400; font-size: 28px; letter-spacing: -0.5px; color: #000; padding: 30px 5%; background: #F2F2F2; border-radius: 10px;}


/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section .inner > p {font-size: 50px; letter-spacing: -1px;}
    section .inner > p.m_color {font-size: 36px; padding: 10px 0; margin-top: 10px; position: relative;}
    section .inner > p.m_color::before {width: 21px; height: 1px; margin-left: -15.5px;}
    section .inner > div p {font-size: 26px; line-height: 1.5em; letter-spacing: -1px;} 

    .top_banner .inner h2 {font-size: 70px;}

    .doctors .inner {padding: 150px 10% 0;}

    .knowhow .inner {padding: 150px 10%;}
    .knowhow .inner ul li dl dt {font-size: 40px;}
    .knowhow .inner ul li dl dd {font-size: 20px; line-height: 1.5em;}

    .rules .inner ul li p {font-size: 20px; line-height: 2em;}
    .rules .inner ul li p strong {font-size: 32px;}

    .result .inner {padding: 150px 10%;}
    .result .inner ul .text_box p {font-size: 32px; line-height: 1.5em;}
    .result .inner ul .text_box .check_list p {font-size: 20px; line-height: 2em;}
    .result .inner ul .text_box .check_list p::before {width: 11px; height: 10px;}
    .result .inner ul .text_box span {font-size: 20px; line-height: 1.5em;}
    .result .inner .notice {font-size: 20px; line-height: 1.5em;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {

}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {

}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */   
    section .inner > p {font-size: 34px; line-height: 50px; letter-spacing: -1px;}
    section .inner > p.m_color {font-size: 26px; line-height: 38px; letter-spacing: -1px; padding: 20px 0; margin-top: 20px;}
    section .inner > p.m_color::before {width: 32px; height: 1px; margin-left: -16px;}
    section .inner > div p {font-size: 16px; line-height: 22px;}

    .top_banner .inner h2 {font-size: 42px;}
    .top_banner .inner p {font-size: 14px; margin-top: 20px;}

    .doctors .inner {padding: 80px 5% 0;}
    .doctors .inner .img_box {margin-top: 40px;}

    .knowhow .inner {padding: 80px 5%;}
    .knowhow .inner ul {margin-top: 50px;}
    .knowhow .inner ul li {border-radius: 10px; margin-bottom: 16px;}
    .knowhow .inner ul li dl {padding: 44px 5%;}
    .knowhow .inner ul li dl dt {font-size: 22px; line-height: 30px; margin-bottom: 18px;}
    .knowhow .inner ul li dl dd {font-size: 16px; line-height: 22px;}

    
    .rules .inner {padding: 80px 10%;}
    .rules .inner ul {gap: 16px; margin-top: 40px;}
    .rules .inner ul li p {font-size: 16px; line-height: 26px; margin-top: 19px;}
    .rules .inner ul li p strong {font-size: 22px;}
    
    
    .result .inner {padding: 80px 5%;}
    .result .inner ul {display: flex; align-items: center; justify-content: space-between; margin: 40px 0 30px;}
    .result .inner ul .text_box p {font-size: 18px; line-height: 25px; letter-spacing: -1px; color: #505050;}
    .result .inner ul .text_box .check_list {width: 100%; padding: 14px 7%; border-radius: 8px; margin: 17px auto;}
    .result .inner ul .text_box .check_list p {font-size: 18px; line-height: 28px;}
    .result .inner ul .text_box .check_list p::before {width: 11px; height: 10px;}
    .result .inner ul .text_box span {font-size: 16px; line-height: 22px; letter-spacing: -1px;}
    .result .inner .notice {font-size: 16px; line-height: 20px; padding: 12px 5%; border-radius: 8px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */ 
    section .inner > p {font-size: 30px; line-height: 38px;}
    section .inner > p i {display: block;}
    section .inner > p.m_color {font-size: 17px; line-height: 17px;}
    section .inner > p.m_color::before {width: 40px; height: 2px; margin-left: -20px;}
    section .inner > div p {font-size: 14px; line-height: 23px;}
    section .inner > div p .block {display: inline;}
    section .inner > div p i {display: block;}

    .top_banner .inner .mo_ver {display: block;}
    .top_banner .inner .pc_ver {display: none;}


    .doctors .inner {padding: 50px 0 0;}
    .doctors .inner .img_box {margin-top: 40px;}

    .knowhow .inner {padding: 50px 5%;}
    .knowhow .inner ul {margin-top: 22px;}
    .knowhow .inner ul li {min-height: 320px; border-radius: 10px; margin-bottom: 20px;}
    .knowhow .inner ul li:nth-child(1) {background-image: url(../images/img_knowhow01_mo.png); background-position: bottom center;}
    .knowhow .inner ul li:nth-child(2) {background-image: url(../images/img_knowhow02_mo.png); background-position: bottom center;}
    .knowhow .inner ul li:nth-child(3) {background-image: url(../images/img_knowhow03_mo.png); background-position: bottom center;}
    .knowhow .inner ul li:nth-child(4) {background-image: url(../images/img_knowhow04_mo.png); background-position: bottom center;}
    .knowhow .inner ul li dl {padding: 25px 5%;}
    .knowhow .inner ul li dl dt {font-size: 24px; line-height: 30px; margin-bottom: 10px;}
    .knowhow .inner ul li dl dt i {display: block;}
    .knowhow .inner ul li dl dd {font-size: 15px;}
    .knowhow .inner ul li:last-child dl dd .block {display: inline;}
    .knowhow .inner ul li:last-child dl dd i {display: block;}

    .rules .inner {padding: 50px 5%;}
    .rules .inner .pc_ver {display: none;}
    .rules .inner .mo_ver {display: flex; margin-top: 40px; border-radius: 10px; overflow: hidden;}
    .rules .inner .mo_ver .tab_box {width: 50%; flex-direction: column; align-items: stretch; gap: unset; margin-top: 0;}
    .rules .inner .mo_ver .tab_box li {width: 100%; border-bottom: solid 1px #F2F2F2;}
    .rules .inner .mo_ver .tab_box li:last-child {border-bottom: none;}
    .rules .inner .mo_ver .tab_box li a {display: block; font-weight: 300; font-size: 16px; line-height: 22px; letter-spacing: -1px; 
        color: #505050; background-color: #fff; padding: 12% 5%;}
    .rules .inner .mo_ver .tab_box li a.on {background-color: #286fd9; color: #fff;}
    .rules .inner .mo_ver .img_box {width: 50%; background: #f7f7f7;}
    .rules .inner .mo_ver .img_box img {height: 100%; object-position: center; object-fit: cover; border-radius: 0 10px 10px 0;}
    
    .result .inner {padding: 50px 5%;}
    .result .inner ul {flex-direction: column; gap: 27px; margin: 44px 0 26px;}
    .result .inner ul .img_box {width: 75%;}
    .result .inner ul .text_box {width: 100%;}
    .result .inner ul .text_box p {font-size: 18px; line-height: 25px; letter-spacing: -1px; color: #505050;}
    .result .inner ul .text_box .check_list {width: 75%; padding: 14px 7%; border-radius: 6px; margin: 16px auto;}
    .result .inner ul .text_box .check_list p {font-size: 15px; line-height: 25px;}
    .result .inner ul .text_box .check_list p::before {width: 9px; height: 8px;}
    .result .inner ul .text_box span {font-size: 14px; line-height: 23px; letter-spacing: -1%;}
    .result .inner .notice {font-size: 12px; line-height: 16px; padding: 7px 5%; border-radius: 6px;}
    .result .inner .notice i {display: block;}
}