@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 450 / var(--inner) * 100vw ), 450px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"M&SG"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}

.radiobx {display: flex; flex-wrap: wrap;}
.radiobx .item {display: flex;align-items: center; min-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.radiobx .item:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}

.greeting-wrap {overflow: hidden;}
.greeting-wrap .contain {max-width:1360px; display: flex; align-items: center; gap: var(--padding-60); flex-wrap: wrap;}
.greeting-wrap .imgbx {width:clamp(320px, calc( 630 / var(--inner) * 100vw ), 630px);} 
.greeting-wrap .textbx {flex:1;}
.greeting-wrap .title {font-size:var(--font-size-32); font-weight: 500; line-height: 1.31;}
.greeting-wrap .decbx {padding-top: var(--padding-50);}
.greeting-wrap .decbx .dec {font-size:var(--font-size-18); line-height: 1.66; color: var(--color-body);}

.history-toptext {margin-bottom: var(--padding-120); text-align: center;}
.history-text {margin-top: var(--padding-60); font-size:var(--font-size-18); line-height: 1.66; color: var(--color-body);}


.history {max-width: 500px;margin:0 auto;}

.history .item {padding:0 0 100px 40px; position:relative;}
.history .item:before {top:12px; width:1px; position:absolute; content:''; left:0; background-color:#ddd; height:100%; bottom:0;}
.history .item:after {width:12px; height:12px; left:-6px; top:12px; background:#8AC9D8; position:absolute; content:''; border-radius: 50%;}
.history .item:last-child {padding-bottom:0;}
.history .item:last-child:before {display:none;}
.history .item .year {font-size:34px; margin-bottom:var(--padding-30); line-height:1.1em; font-weight:700; letter-spacing:-.03em; color:var(--color-primary); position:relative;}
.history .item ul li {margin-bottom:14px; display:flex; gap: 7px; color: var(--color-body); line-height: 1.6; letter-spacing: -0.5px;}
.history .item ul li:last-child {margin-bottom:0;}
.history .item ul li .month {width:60px; font-weight:700; }
.history .item ul li .cnt { position:relative; flex:1;}
@media (max-width: 1024px) {
	.history .item {padding: 0 0 60px 40px;}
	.history .item .year {font-size:28px;}
	.history .item ul li {margin-bottom: 10px;}
}

@media (max-width: 640px) {
	.history {display:block;}
	.history .item:after {width:10px; height:10px; left:-4px; top:8px;}
	.history .item {padding:0 0 40px 25px;}
    .history .item .year {font-size:22px;}
	.history .item ul li .month {width: 40px;}
}

.partners-contain {position: relative; background: #F2F2F2;z-index: 1;}
.partners-contain:after {position: absolute; content: ''; left: 0; top: var(--nav-height2); height:clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); width: 100%; background: #F2F2F2; z-index: 1;}
.partners-contain #contArea {max-width: 1460px;}
.partners-list {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--padding-20);}
.partnets-item .logoimg {display: flex;align-items: center;justify-content: center;padding:14px; background: #fff; height: clamp(60px, calc( 140 / var(--inner) * 100vw ), 140px);}
.partnets-item .logoimg img {height: 100%; object-fit: scale-down;}

.prdtab-wrap {margin-bottom: var(--padding-110);}
.prdtab-wrap .tablist {overflow-x: auto; display: flex; justify-content: center;}
.prdtab-wrap .tabitem {padding: 0 var(--padding-24); position: relative;}
.prdtab-wrap .tabitem:not(:last-child):after {position: absolute; content: ''; right: 0; top: 50%; transform: translateY(-50%);  width: 1px; height: 14px; background: #dddd;}
.prdtab-wrap .tabitem.active .tablink {color: var(--color-primary); font-weight: bold;}
.prdtab-wrap .tabitem .tablink {font-size: var(--font-size-20); line-height: 1.4; color: var(--color-body); font-weight: 500; white-space: nowrap;}

.prdcontflx {display: flex; gap: 40px; align-items: center; flex-wrap: wrap;}
.prdcontflx .imgbx {width:clamp(300px, calc( 700 / var(--inner) * 100vw ), 700px);}
.prdcontflx .imgbx .images img {width: 100%; border-radius: clamp(24px, calc( 46 / var(--inner) * 100vw ), 46px);}
.prdcontflx .textbx {flex: 1;}
.prdcontflx .textbx .prd-top {margin-bottom: var(--padding-30); letter-spacing: -0.8px;}
.prdcontflx .textbx .prd-category {font-size: var(--font-size-22); color: var(--color-body); margin-bottom: var(--padding-20); line-height: 1.1; font-weight: 600;}
.prdcontflx .textbx .prd-title {font-size: var(--font-size-32); font-weight: bold; color: #78243C;  }
.prdcontflx .textbx .prd-subtitle {font-size: var(--font-size-28); font-weight: bold; line-height: 1.5;}
.prdcontflx .textbx .prd-section {margin-bottom: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.prdcontflx .textbx .prd-section:last-child {margin-bottom: 0;}
.prdcontflx .textbx .prd-label {display: inline-block; padding:5px 10px ; background: #78243C; color: #fff; font-size: var(--font-size-18); font-weight: 600; margin-bottom:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); border-radius: 6px; letter-spacing: -0.5px;}
.prdcontflx .textbx .prd-content {color: var(--color-body); display: flex;flex-direction: column;gap: 8px; letter-spacing: -0.5px;}
.prdcontflx .textbx .ingredient-item {display: flex;  font-size: var(--font-size-18); line-height: 1.5;}
.prdcontflx .textbx .ingredient-left {margin-right: 14px;}
.prdcontflx .textbx .ingredient-right {flex: 1; margin-top: 2px;}
.prdcontflx .textbx .right-item {display: flex; align-items: center; ;}
.prdcontflx .textbx .ingredient-name {font-weight: 600;  color: #000; white-space: nowrap;}
.prdcontflx .textbx .ingredient-text {font-weight: 400; color: var(--color-body); font-size: var(--font-size-16);}
.prdcontflx .textbx .ingredient-dots {flex: 1; border-bottom: 1px dotted var(--color-body); margin: 0 var(--padding-15); height: 1px;}
.prdcontflx .textbx .ingredient-quantity {font-weight: 400; color: var(--color-body); font-size: var(--font-size-16);}
.prdcontflx .textbx .bulletitem2 {color: var(--color-body); line-height: 1.87; font-size: var(--font-size-16);}
.prd-color2 {color: #009037 !important;}
.prd-bg2 {background: #009037 !important;}
.prd-color3 {color: #DE61AD !important;}
.prd-bg3 {background: #DE61AD !important;}
.prd-color4 {color: #3FAEE3 !important;}
.prd-bg4 {background: #3FAEE3 !important;}
.prd-color5 {color: #EB8B34 !important;}
.prd-bg5 {background: #EB8B34 !important;}
.prd-color6 {color: #F0631E !important;}
.prd-bg6 {background: #F0631E !important;}
.prd-color7 {color: #CD1417 !important;}
.prd-bg7 {background: #CD1417 !important;}

.prdcontwrap .downbx {margin-top: var(--padding-80); text-align: center;}
.prdcontwrap .btn-download {display: inline-flex;align-items: center;justify-content: center; padding:0 20px; min-width:130px; height: 50px; font-size:var(--font-size-18); font-weight: 600; color: #fff; background: var(--color-primary); border-radius: 25px;} 

.pharmeacy-contain {display: flex;flex-direction: column;gap: var(--padding-80);}
.toptitbx {display: flex;align-items: center;justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: var(--padding-40); line-height: 1.45; letter-spacing: -0.6px;}
.toptitbx .tit {font-size: var(--font-size-22); font-weight: 600; color: #000;}
.toptitbx .btn-reset {display: flex;align-items: center;gap:8px; font-weight: 600; color: var(--color-body);}
.search-wrap {padding-top: var(--padding-30); border-top: 1px solid #ddd;}
.search-list {display: flex;flex-wrap: wrap;gap:var(--padding-12);}
.search-item .link {display: flex;align-items: center;justify-content: center;padding:var(--padding-15) clamp(20px, calc( 34 / var(--inner) * 100vw ), 34px); background: #ddd; border-radius: 25px; font-size: var(--font-size-18); font-weight: 600; color: var(--color-body); line-height: 1.1;}
.search-item .link.active {background: var(--color-primary); color: #fff;}

.region-search-wrap {padding: var(--padding-40); background: #EFFDFF;}
 .region-guide {margin-bottom: var(--padding-30); font-size: var(--font-size-18); color: var(--color-body); line-height: 1.44; font-weight: 600;}
.region-select-wrap {display: flex; gap: var(--padding-15); flex-wrap: wrap;}
.region-select-wrap .select-box {flex: 1; min-width: clamp(150px, calc( 200 / var(--inner) * 100vw ), 200px);}
.region-select-wrap .select-region {width: 100%; height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); padding: 0 var(--padding-20); border: 1px solid #ddd; border-radius: 8px; font-size: var(--font-size-18); color: var(--color-body); background: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--padding-20) center; background-size: 12px 8px; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.region-select-wrap .select-region::-ms-expand {display: none;}
.region-select-wrap .btn-add-region {padding: 0 var(--padding-30); height: clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px); background: var(--color-primary); color: #fff; border: none; border-radius: 25px; font-size: var(--font-size-18); font-weight: 600; cursor: pointer; white-space: nowrap;}
.selected-region-list {display: flex; flex-wrap: wrap; gap: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px); margin-top: var(--padding-30);}
.region-tag {display: flex; align-items: center; gap: var(--padding-10); padding: 12px; background: #fff; color: #000; line-height: 1.4;}
.region-tag .tag-text {line-height: 1.2;}
.region-tag .tag-close {display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; padding: 0; border: none; background: none; color: #000; cursor: pointer; }
.region-tag .tag-close svg {width: 100%; height: 100%;}
.formbtn {text-align: center; margin-top: var(--padding-40); padding-top: var(--padding-40); border-top: 1px solid #ddd;}

.find-store-wrap {position:relative; height:clamp(300px, calc( 500 / var(--inner) * 100vw ), 500px);}
.find-store-map {position:relative; overflow:hidden; width:100%; height:100%;}
.find-store-map #map {position:relative; width:100%; height:100%;}
.customoverlay {position:absolute; bottom:60px; left:0; z-index:20; width:340px; margin-left:-170px; padding:var(--padding-24); background:#fff; border-radius:8px; box-shadow:4px 4px 4px 0 rgba(0, 0, 0, 0.25);letter-spacing:-.04em; }
.customoverlay .inner {position:relative; display:grid; gap:8px;}
.customoverlay .addr {margin-bottom:var(--padding-40); font-size:var(--font-size-16); font-weight:600; line-height:1.4em; letter-spacing:-.04em; color:#2c2c2c;word-break: break-word;white-space: normal;}
.customoverlay .close {position:absolute; bottom:-5px; right:0; color:var(--color-body); font-weight:500; font-size:12px; line-height:1.5em; cursor:pointer;}
.btn-get-position {position:absolute; bottom:20px; right:20px; z-index:10; width:48px; height:48px; background:#fff; border:1px solid #2c2c2c; border-radius:12px;}
.btn-get-position svg {display:block; margin:0 auto; width:20px;}
@media (max-width: 640px){
	.customoverlay {bottom:40px; width:260px; margin-left:-120px;}
}

/* 다국어 */
.history .item ul li .month:lang(en) {width: 90px;}