@charset "utf-8";
@font-face { font-family: 'PretendardVariable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('PretendardVariable'), url('./webfont/PretendardVariable.woff2') format('woff2-variations'); }
@font-face { font-family: 'Cafe24Shiningstar'; font-weight: 300; font-style: normal; src: url('./webfont/Cafe24Shiningstar-v2.0.woff2') format('woff2'), url('./webfont/Cafe24Shiningstar-v2.0.woff') format('woff'); font-display: swap; } 
@font-face { font-display: swap; font-family: 'Archivo Black'; font-style: normal; font-weight: 400; src: url('./webfont/archivo-black-regular.woff2') format('woff2'); }
:root {--font:'PretendardVariable'; --fontCafe24: 'Cafe24Shiningstar'; --font-eng:'Archivo Black'; --col-text: #717171; --bg: #ecf1f9; --col-blue1: #467cfa; --col-blue2: #8baeff; --col-blue3: #c1cbe2;}
* {padding: 0; margin: 0;}
#cocoaa_detail_view {position: relative; max-width: 1288px; min-width: 320px; padding-bottom: 10%; margin: 0 auto; overflow: hidden; font-family: var(--font); font-size: 16px; color: var(--col-text); line-height: 1; text-align: center;}
#cocoaa_detail_view h3, #cocoaa_detail_view h4 {font-size: 100%;}
#cocoaa_detail_view img {max-width: 100%;}
#cocoaa_detail_view li {list-style: none;}
#cocoaa_detail_view em {font-style: normal;}
#cocoaa_detail_view table {border-collapse: collapse; border-spacing: 0;}
#cocoaa_detail_view div[class^="temp-item"] {display: flex; flex-direction: column;}
#cocoaa_detail_view .mgt50 {margin-top: 5%;}
#cocoaa_detail_view .mgt100 {margin-top: 10%;}
#cocoaa_detail_view .temp-mtt {font-weight: 700; font-size: 5rem; letter-spacing: -0.04em; color: var(--col-blue1); line-height: 1.2;}
#cocoaa_detail_view .temp-stt {font-size: 2rem; line-height: 1.4; letter-spacing: -0.04em;}
#cocoaa_detail_view .temp-sst {font-size: 3.44rem; font-family: var(--fontCafe24); color: var(--col-blue3);}
#cocoaa_detail_view .tt-fs24 {font-size: 1.5rem;}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-mtt {font-size: 3.25rem;}
    #cocoaa_detail_view .temp-stt {font-size: 1.5rem;}
    #cocoaa_detail_view .temp-sst {font-size: 2.75rem;}
    #cocoaa_detail_view .tt-fs24 {font-size: 1.25rem;}
}
@media screen and (max-width: 428px) {
	#cocoaa_detail_view .temp-mtt {font-size: 2.25rem;}
	#cocoaa_detail_view .temp-stt {font-size: 1.25rem;}
    #cocoaa_detail_view .temp-sst {font-size: 2rem;}
    #cocoaa_detail_view .tt-fs24 {font-size: .875rem;}
}

/* detail view 23 */
#cocoaa_detail_view .temp-item-bn {padding: 0 18% 1.6%; background-color: var(--bg); flex-direction: row !important; align-items: center; text-align: left; line-height: 1.2; position: relative; z-index: 1; overflow: hidden;}
#cocoaa_detail_view .temp-item-bn::before, #cocoaa_detail_view .temp-item-bn::after {content: ''; display: block; background-position: center; background-size: contain; background-repeat: no-repeat; position: absolute; z-index: -1;}
#cocoaa_detail_view .temp-item-bn::before {background-image: url("https://nextdop.s3.ap-northeast-2.amazonaws.com/product/unit/0_20220725135136.png"); width: 201px; height: 126px; bottom: 0; left: 0;}
#cocoaa_detail_view .temp-item-bn::after {background-image: url("https://nextdop.s3.ap-northeast-2.amazonaws.com/product/unit/1_20220725135136.png"); width: 163px; height: 131px; top: 0; right: 0;}
#cocoaa_detail_view .temp-item-bn .tt-aglt {width: 75%; font-size: 2.5rem; color: var(--col-blue2);}
#cocoaa_detail_view .temp-item-bn .tt-aglt h3 {padding-top: 8px; color: var(--col-blue1);}
#cocoaa_detail_view .temp-item-bn .tt-agrt {width: 25%; text-align: center; font-size: 14px; color: #A8A8A8;}
#cocoaa_detail_view .temp-item-bn .tt-agrt img {width: 71px;}

@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-item-bn {padding: 0 10% 1.6%;}
    #cocoaa_detail_view .temp-item-bn .tt-aglt {font-size: 2rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-item-bn .tt-aglt {font-size: 1.25rem;}
    #cocoaa_detail_view .temp-item-bn .tt-agrt {font-size: 10px;}
    #cocoaa_detail_view .temp-item-bn .tt-agrt img {width: 32px;}
}

#cocoaa_detail_view .temp-item-cover {position: relative;}
#cocoaa_detail_view .temp-item-cover .temp-tt-wrap {width: 100%; position: absolute; bottom: 8.3%; left: 0; z-index: 1;}
#cocoaa_detail_view .temp-item-cover .temp-tt-wrap .temp-mtt {padding-bottom: 15.7%; font-size: 5.63rem; font-family: var(--font-eng);}
#cocoaa_detail_view .temp-item-cover .temp-tt-wrap p {font-weight: 700; font-size: 2.5rem; color: var(--col-blue1); line-height: 1.2;}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-item-cover .temp-tt-wrap .temp-mtt {padding-bottom: 10%; font-size: 3.5rem;}
    #cocoaa_detail_view .temp-item-cover .temp-tt-wrap p {font-size: 1.75rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-item-cover .temp-tt-wrap .temp-mtt {font-size: 2.5rem;}
    #cocoaa_detail_view .temp-item-cover .temp-tt-wrap p {font-size: 1.25rem;}
}

#cocoaa_detail_view .temp-tt-mutiple {padding: 14% 4%; background-color: var(--bg);}
#cocoaa_detail_view .temp-tt-mutiple ul {display: grid; grid-template-columns: repeat(3, minmax(auto, 1fr)); gap: 2.59em .88em; font-size: 2rem; line-height: 1.2;}
#cocoaa_detail_view .temp-tt-mutiple ul li {padding: 1em; background-color: #fff;}
#cocoaa_detail_view .temp-tt-mutiple ul li span {display: inline-block; padding: 8px .75em; margin-bottom: 1em; border: 3px solid currentColor; border-radius: .63em; font-weight: 700; color: var(--col-blue1);}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-tt-mutiple ul {grid-template-columns: repeat(2, minmax(auto, 1fr));}
    #cocoaa_detail_view .temp-tt-mutiple ul {font-size: 1.5rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-tt-mutiple ul {font-size: 1rem;}
}

#cocoaa_detail_view .temp-item-imt {position: relative; text-align: left;}
#cocoaa_detail_view .temp-item-imt::after {content: ''; display: block; background: url("https://nextdop.s3.ap-northeast-2.amazonaws.com/product/unit/1_20220725143236.png") center / contain no-repeat; width: 15.5%; height: 17.1vh; position: absolute; bottom: -80px; right: 0; z-index: 1;}
#cocoaa_detail_view .temp-item-imt .temp-tt-wrap {position: absolute; bottom: 6.3%; left: 3.5%; font-size: 3.44rem; color: var(--col-blue1);}
#cocoaa_detail_view .temp-item-imt .temp-tt-wrap::before, #cocoaa_detail_view .temp-item-imt .temp-tt-wrap::after {content: ''; display: block; width: 1.09em; height: 3px; background-color: var(--col-blue1);}
#cocoaa_detail_view .temp-item-imt .temp-tt-wrap::before {margin-bottom: .73em;}
#cocoaa_detail_view .temp-item-imt .temp-tt-wrap::after {margin-top: .73em;}
#cocoaa_detail_view .temp-item-imt .temp-tt-wrap p {font-size: .51em;}
#cocoaa_detail_view .temp-item-imt .temp-tt-wrap span {display: inline-block; padding: .86em .86em 0 0;}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-item-imt .temp-tt-wrap {font-size: 2.5rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-item-imt::after {width: 80px; height: 100px; bottom: -40px;}
    #cocoaa_detail_view .temp-item-imt .temp-tt-wrap {font-size: 1.5rem;}
}

#cocoaa_detail_view .temp-item-agrt {padding: 15% 0 25%; flex-direction: row !important; position: relative; text-align: left;}
#cocoaa_detail_view .temp-item-agrt::after {content: ''; display: block; background: url("https://nextdop.s3.ap-northeast-2.amazonaws.com/product/unit/0_20220725143236.png") center / contain no-repeat; width: 29.5%; height: 29vh; position: absolute; bottom: 10%; left: 0; z-index: -1;}
#cocoaa_detail_view .temp-item-agrt .temp-mtt {width: 48.2%; padding: 0 .73em; font-size: 3.44rem; box-sizing: border-box;}
#cocoaa_detail_view .temp-item-agrt .item-wrap {width: 51.8%;}
#cocoaa_detail_view .temp-item-agrt .item-wrap .tt-fs24 {padding-top: 1em; line-height: 1.4;}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-item-agrt {flex-direction: column !important;}
    #cocoaa_detail_view .temp-item-agrt::after {bottom: 0;}
    #cocoaa_detail_view .temp-item-agrt .temp-mtt {width: 100%; font-size: 3rem;}
    #cocoaa_detail_view .temp-item-agrt .item-wrap {width: 100%; padding: 10% 0 0 20%; box-sizing: border-box;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-item-agrt .temp-mtt {font-size: 2rem;}
}

#cocoaa_detail_view .temp-item-aglt {padding-bottom: 10%; flex-direction: row !important;}
#cocoaa_detail_view .temp-item-aglt .item {width: 51.8%;}
#cocoaa_detail_view .temp-item-aglt .temp-tt-wrap {width: 48.2%; text-align: right; padding: 0 4%; box-sizing: border-box;}
#cocoaa_detail_view .temp-item-aglt .temp-tt-wrap .temp-mtt {font-size: 3.44rem;}
#cocoaa_detail_view .temp-item-aglt .temp-tt-wrap .tt-fs24 {padding-top: 2.67em; line-height: 1.4; text-align: left;}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-item-aglt {flex-direction: column !important;}
    #cocoaa_detail_view .temp-item-aglt .item {width: 100%; padding-right: 20%; box-sizing: border-box;}
    #cocoaa_detail_view .temp-item-aglt .temp-tt-wrap {width: 100%; padding-top: 10%;}
    #cocoaa_detail_view .temp-item-aglt .temp-tt-wrap .temp-mtt {font-size: 3rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-item-aglt .temp-tt-wrap .temp-mtt {font-size: 2rem;}
}

#cocoaa_detail_view .temp-item-mutiple .temp-tt-wrap {padding: 14% 0;}
#cocoaa_detail_view .temp-item-mutiple .temp-tt-wrap .temp-mtt {padding: .34em 0 .79em; font-weight: 200;}
#cocoaa_detail_view .temp-item-mutiple .temp-tt-wrap .temp-mtt span {font-weight: 700;}
#cocoaa_detail_view .temp-item-mutiple .temp-tt-wrap .temp-stt {font-size: 2.25rem;}
#cocoaa_detail_view .temp-item-mutiple div[class^="item"] {display: grid; align-items: flex-end; background-color: var(--bg); position: relative;}
#cocoaa_detail_view .temp-item-mutiple div[class^="item"] .temp-stt {padding: 0 1.75em 1.75em; font-weight: 700;}
#cocoaa_detail_view .temp-item-mutiple .item-aglt {grid-template-columns: repeat(2, 62% 38%);}
#cocoaa_detail_view .temp-item-mutiple .item-imt .temp-stt {position: absolute; bottom: 0; right: 0; text-align: right;}
#cocoaa_detail_view .temp-item-mutiple .item-agrt {grid-template-columns: repeat(2, 38% 62%); text-align: left;}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-item-mutiple .temp-tt-wrap .temp-stt {font-size: 2rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-item-mutiple .temp-tt-wrap .temp-stt {font-size: 1.5rem;}
    #cocoaa_detail_view .temp-item-mutiple div[class^="item"] {grid-template-columns: 1fr !important;}
    #cocoaa_detail_view .temp-item-mutiple div[class^="item"] .temp-stt {padding: 1.75em;}
}

#cocoaa_detail_view .temp-color {padding: 12% 0 8%; margin-top: 19%; background-color: var(--bg);}
#cocoaa_detail_view .temp-color .temp-sst {padding-top: 8px;}
#cocoaa_detail_view .temp-color .temp-item-row3 {padding-top: 13%; text-align: left;}
#cocoaa_detail_view .temp-color .temp-item-row3 li {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; margin-bottom: 18%;}
#cocoaa_detail_view .temp-color .temp-item-row3 li img {border-radius: 0 25% 25% 0;}
#cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap {padding: 0 11%;}
#cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap h3 {font-size: 2.5rem;}
#cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap h4 {font-weight: 700; font-size: 3.13rem; padding: 1em 0;}
#cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap .tt-fs24 {line-height: 1.4;}
#cocoaa_detail_view .temp-color .temp-item-row3 li:nth-child(2) img {order: 2; border-radius: 25% 0 0 25%;}

@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap h3 {font-size: 1.75rem;}
    #cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap h4 {font-size: 2.75rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap h3 {font-size: 1.25rem;}
    #cocoaa_detail_view .temp-color .temp-item-row3 li .temp-tt-wrap h4 {font-size: 1.5rem;}
}

/* Doctor Profile Row */
.doctor_profile_row {display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin: 60px 0;}
.doctor_profile_row .doctor_image {width: 100%;}
.doctor_profile_row .doctor_image img {width: 100%; height: auto; display: block; border-radius: 30px;}
.doctor_profile_row .doctor_info {padding: 20px 40px 0 0px; text-align: left;}
.doctor_profile_row .doctor_name {font-size: 3.5rem !important; font-weight: 700; color: #2b2b2b; margin-bottom: 15px;}
.doctor_profile_row .doctor_position {font-size: 2rem !important; font-weight: 600; color: #2b2b2b; margin-bottom: 30px;}
.doctor_profile_row .doctor_credentials {list-style: none; padding: 0; margin: 0;}
.doctor_profile_row .doctor_credentials li {font-size: 1rem; line-height: 1.8; color: #2b2b2b; padding-left: 0;}

@media screen and (max-width: 768px) {
    .doctor_profile_row {grid-template-columns: 1fr; gap: 30px;}
    .doctor_profile_row .doctor_info {padding: 0 20px;}
    .doctor_profile_row .doctor_name {font-size: 2rem !important;}
    .doctor_profile_row .doctor_position {font-size: 1.25rem !important;}
    .doctor_profile_row .doctor_credentials li {font-size: 1rem;}
}

@media screen and (max-width: 428px) {
    .doctor_profile_row .doctor_info {padding: 0;}
    .doctor_profile_row .doctor_name {font-size: 1.75rem !important;}
    .doctor_profile_row .doctor_position {font-size: 1.125rem !important;}
    .doctor_profile_row .doctor_credentials li {font-size: 0.9rem; line-height: 1.8;}
}

/* Temp Item Single */
#cocoaa_detail_view .temp-item-single {width: 100%; text-align: center;}
#cocoaa_detail_view .temp-item-single img {width: 100%; max-width: 100%; height: auto; display: block;}

/* Temp Cont Wrap */
#cocoaa_detail_view .temp-cont-wrap {padding: 12% 7.8%; background-color: var(--bg);}
#cocoaa_detail_view .temp-cont-wrap .temp-mtt {font-weight: 700;}
#cocoaa_detail_view .temp-cont-wrap .temp-tt-wrap {padding: 6.51% 2%; margin: 15.4% 0; background-color: #fff; border-radius: 6.25rem;}
#cocoaa_detail_view .temp-cont-wrap .temp-tt-wrap h4 {font: normal 3.44rem 'Cafe24Shiningstar'; color: var(--col-blue1);}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-cont-wrap .temp-tt-wrap h4 {font-size: 2.75rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-cont-wrap .temp-tt-wrap {padding: 10% 5%; border-radius: 3rem;}
    #cocoaa_detail_view .temp-cont-wrap .temp-tt-wrap h4 {font-size: 2rem;}
}

/* Temp Check */
#cocoaa_detail_view .temp-check {padding-top: 12%;}
#cocoaa_detail_view .temp-check h3.temp-mtt {font-size: 5rem;}
#cocoaa_detail_view .temp-check h4.temp-mtt {font-weight: 700;}
#cocoaa_detail_view .temp-check ul {padding: 10% 15.6%; text-align: left; color: #fff; font-weight: 700; font-size: 2.25rem;}
#cocoaa_detail_view .temp-check ul li {padding: .56em 1.33em; background-color: var(--bg); margin-bottom: 1.11em; border-radius: 1.39em; display: flex; align-items: center;}
#cocoaa_detail_view .temp-check ul li .i-bullet {display: block; width: 1.17em; height: 1.17em; margin-right: 1.78em; border-radius: 100%; background-color: currentColor;}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-check h3.temp-mtt {font-size: 3.5rem;}
    #cocoaa_detail_view .temp-check ul {padding: 10%;font-size: 1.5rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-check h3.temp-mtt {font-size: 2.25rem;}
    #cocoaa_detail_view .temp-check ul {font-size: 1.25rem;}
}

/* Temp Point */
#cocoaa_detail_view .temp-point {padding-top: 11%;}
#cocoaa_detail_view .temp-point .temp-mtt {font-weight: 700; font-size: 5rem;}
#cocoaa_detail_view .temp-point .item-col2 {padding: 10% 0; display: grid; grid-template-columns: repeat(2, 44.6% 55.4%); text-align: left;}
#cocoaa_detail_view .temp-point .item-col2 .temp-tt-wrap {padding: 21.66% 8.3% 0; line-height: 1.4;}
#cocoaa_detail_view .temp-point .item-col2 .temp-tt-wrap h4 {font-size: 2.5rem; padding-bottom: 28.88%;}
#cocoaa_detail_view .temp-point .item-agrt {padding: 2.8% 0 8.7% 32.5%; background-color: var(--bg);}
#cocoaa_detail_view .temp-point .item-agct {padding: 8% 10.3% 4.2%; position: relative;}
#cocoaa_detail_view .temp-point .item-agct::before {content: ''; display: block; width: 100%; height: 64%; position: absolute; top: 0; left: 0; z-index: -1; background-color: var(--bg);}
@media screen and (max-width: 768px) {
    #cocoaa_detail_view .temp-point .temp-mtt {font-size: 3.5rem;}
    #cocoaa_detail_view .temp-point .item-col2 .temp-tt-wrap h4 {font-size: 1.75rem;}
}
@media screen and (max-width: 428px) {
    #cocoaa_detail_view .temp-point .temp-mtt {font-size: 2.5rem;}
    #cocoaa_detail_view .temp-point .item-col2 {grid-template-columns: 1fr;}
    #cocoaa_detail_view .temp-point .item-col2 .temp-tt-wrap {padding: 11.66% 8.3%;}
    #cocoaa_detail_view .temp-point .item-col2 .temp-tt-wrap h4 {font-size: 1.5rem; padding-bottom: 18%;}
    #cocoaa_detail_view .temp-point .item-agrt {padding-left: 20%;}
    #cocoaa_detail_view .temp-point .item-agct {padding: 8% 5% 4.2%;}
}

/* Doctor Section Wrap */
#cocoaa_detail_view .doctor_section_wrap {width: 100%; padding: 3rem 0;}

#cocoaa_detail_view .doctor_title_box {text-align: center; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 3px solid #2b2b2b;}
#cocoaa_detail_view .doctor_title_box p {margin: 0;}
#cocoaa_detail_view .doctor_title_box .txt1 {display: block; font-family: var(--font-eng); font-size: 2.5rem; color: #999; margin-bottom: 0.75rem; letter-spacing: 0.05em;}
#cocoaa_detail_view .doctor_title_box .txt2 {display: block; font-size: 3rem; font-weight: 700; color: #2b2b2b; letter-spacing: -0.02em;}

#cocoaa_detail_view .doctor_title_box.mgt100 {margin-top: 5rem;}

@media screen and (max-width: 768px) {
    #cocoaa_detail_view .doctor_section_wrap {padding: 2rem 0;}
    #cocoaa_detail_view .doctor_title_box {margin-bottom: 2rem;}
    #cocoaa_detail_view .doctor_title_box .txt1 {font-size: 2rem;}
    #cocoaa_detail_view .doctor_title_box .txt2 {font-size: 2.5rem;}
    #cocoaa_detail_view .doctor_title_box.mgt100 {margin-top: 4rem;}
}

@media screen and (max-width: 428px) {
    #cocoaa_detail_view .doctor_section_wrap {padding: 1.5rem 0;}
    #cocoaa_detail_view .doctor_title_box {margin-bottom: 1.5rem; padding-bottom: 1rem;}
    #cocoaa_detail_view .doctor_title_box .txt1 {font-size: 1.5rem;}
    #cocoaa_detail_view .doctor_title_box .txt2 {font-size: 2rem;}
    #cocoaa_detail_view .doctor_title_box.mgt100 {margin-top: 3rem;}
}