/* reset */

*,
*::before,
*::after {box-sizing: border-box;}

body {margin: 0;font-family: "Pretendard", -apple-system, BlinkMacSystemFont,  "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", "Noto Sans KR",  sans-serif;}

img {max-width: 100%;height: auto;display: block;}
a {color: inherit;text-decoration: none;}
button {padding-block: 0;padding-inline: 0; border: none; background: none;}
h1,h2,h3,h4,h5,h6 {margin-block-start: 0;margin-block-end: 0;}
strong {display: inline-block;}
p {margin-block-start: 0;margin-block-end: 0;}
ul {margin-block-start: 0;margin-block-end: 0;padding-inline-start: 0;list-style: none;}
.red{color:#ff571f}
/* layouts */

.page-wrap {display: flex;flex-direction: column;min-height: 100vh;background-color: #fff;}

.skip-nav a {position: absolute;left: -9999px;top: 0;padding: 8px 16px;background: #161c26;color: #fff;z-index: 1000;}
.skip-nav a:focus {left: 16px;top: 16px;}

.site-header {z-index: 1;position: relative;height: 48px;}
.site-header__inner {/* max-width: 1200px; */margin: 0 auto;padding: 8px 16px 8px 24px;}

.site-header .logo,
.site-header .logo > img,
.img-logo__header {display: block;width: 104px;height: auto;}

.section__nav.mo{padding:0 20px 0; margin-top:40px;margin-bottom:24px;}
.section__nav.mo .btn-open{position: relative; display:inline-block;padding-right:26px;font-weight: 500;font-size:24px; font-weight:500;color:#161c26; border: none; background: #fff;font-family: "Ok", sans-serif;}
.section__nav.mo .btn-open::after{display: block;content: "";position: absolute;width: 24px;height: 24px;top:50%;right: 0;  transform: translateY(-50%);background: url("../images/icon_arrow.png") center center no-repeat;background-size: 100% 100%;}


.site-main {position: relative;font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", "Noto Sans KR", sans-serif;;}

.section-wrap--bottom .section-wrap__inner {position: relative;/* max-width: 1200px; */margin: 0 auto;padding: 8px 24px 24px 24px;}

.section-hero .hero__content {display: flex;flex-direction: column;gap: 8px;}
.section-hero .hero__title {font-family: "Ok", sans-serif;font-size: 20px;font-weight: 500;line-height: 1.29;letter-spacing: -0.84px;text-align: left;color: #161c26;}
.section-hero .hero__desc {font-size: 18px;font-weight: 500;line-height: 26px;color: #545964;}
.product-accordion {display: flex;flex-direction: column;gap: 12px;position: relative;font-family:"Pretendard";}
.product-accordion .accordion__item{border-top:1px solid #e9ebf0}
.product-accordion .accordion__item:first-child{border-top:none}

.product-accordion .accordion__header {  position: relative;display: flex;flex-direction: row;align-self: stretch;justify-content: space-between;align-items: center;padding: 20px 36px 20px 28px;border-radius: 16px;background-color: #fff;}
.product-accordion .accordion__trigger {width: 100%;border: none;font-size: 16px;font-weight: 500;line-height: 1.5;text-align: left;color: #161c26;background: #fff;font-family: "Ok", sans-serif;}
.product-accordion .accordion__trigger::before {content: "";position: absolute;width: 24px;height: 24px;top:20px;left: 0;background: url("../images/icon_q.png") center center no-repeat;background-size: 100% 100%;}
.product-accordion .accordion__trigger::after {content: "";position: absolute;width: 24px;height: 24px;top:20px;right: 0;background: url("../images/icon_down.png") center center no-repeat;background-size: 100% 100%;}

.product-accordion .accordion__trigger[aria-expanded="true"]::after {content: "";background: url("../images/icon_up.png") center center no-repeat;background-size: 100% 100%;}
/* .product-accordion .accordion__panel {opacity: 0;overflow: hidden;display: flex;flex-direction: column;max-height: 0; transition: max-height 260ms ease,;}
.product-accordion .accordion__panel.is-open {opacity: 1;max-height: 100%;padding: 16px;border-radius: 16px;font-size: 16px;line-height: 1.5;text-align: left;color: #545964;background-color: #f7f7f9;} */
.product-accordion .accordion__panel {display: grid;grid-template-rows:0fr; transition: grid-template-rows 200ms ease;overflow: hidden;}
.product-accordion .accordion__panel.is-open {grid-template-rows: 1fr; height: auto;transition: grid-template-rows 200ms ease;}
.product-accordion .accordion__header.is-open-header {border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
.product-accordion .accordion__panel > .inner{ border-radius: 16px;text-align: left;color: #545964;background-color: #f7f7f9;overflow: hidden;padding: 0 16px;font-size: 16px;line-height: 1.5; transition: padding .2s ease;}
.product-accordion .accordion__panel.is-open > .inner{padding: 16px 16px }


.product-accordion .accordion__panel p + strong,
.product-accordion .accordion__panel strong + strong {margin-top: 16px;}
.product-accordion .accordion__panel ul + p {margin-top: 4px;}
.product-accordion .accordion__panel .img-product {width: 80px;height: auto;padding: 16px 0;}

.section-pagenation {margin: 36px 0 60px;}
.section-pagenation .pagenation{display: flex;justify-content: center;gap: 16px;}
.section-pagenation .pagenation a{display:flex; width:24px; height:24px;text-align: center;justify-content: center; align-items: center;}
.section-pagenation .pagenation .page-count{display: flex;justify-content: center;gap:8px; color:#6c7080; font-weight: 500px; font-size: 16px;}

.section-pagenation .pagenation .selected a{color: #ff571f; background: #fff2ee;border-radius:8px;font-weight: 600;}
.section-pagenation .pagenation .btn-wrap{display:flex;gap:8px}
.section-pagenation .pagenation .btn a{background-position: center center;background-repeat: no-repeat;background-size: 100% 100%;font-size: 0;}
.section-pagenation .pagenation .btn{width:24px; height:24px;visibility: hidden;}
.section-pagenation .pagenation .btn.visible{visibility: visible;}
.section-pagenation .pagenation .btn.prev-list a{background-image:  url("../images/icon_prev_list.png");background-size: 100% 100%;}
.section-pagenation .pagenation .btn.prev a{background-image:  url("../images/icon_prev.png");}
.section-pagenation .pagenation .btn.next a{background-image:  url("../images/icon_next.png");}
.section-pagenation .pagenation .btn.next-list a{background-image:  url("../images/icon_next_list.png");}




.site-footer {display: flex;flex-direction: column;flex-shrink: 0;margin-top: auto;/* margin-bottom: 104px; */background-color: #e9ebf0;}
.site-footer__inner {padding: 32px 24px 48px 24px;}
.site-footer .logo > img,.img-logo__footer {width: 91px;height: auto;}
.site-footer__content {margin-top: 8px;}
.site-footer__text {font-size: 12px;color: #545964;line-height: 1.5;}
.site-footer__text span {display: none;}
.site-footer__text + .site-footer__text {margin-top: 4px;}

.site-footer__copyright {margin-top: 16px;font-size: 12px;line-height: 1.5;text-align: left;color: #4d5764;}
/*popup*/
body{max-height: 100vh;overflow: hidden;}
.page-wrap{max-height: 100vh;overflow: auto;}
.modal{ position: fixed;top: 0;left: 0;right: 0;bottom: 0; display: none;}
.modal.is-open{display: block;}
.modal__overlay{position:absolute;inset: 0; top:0; left:0;right:0;bottom:0;background: rgba(0,0,0,0.64);}
.modal__dialog-wrap{display:flex;height: 100%; align-items: flex-end;}
.modal__dialog{flex-direction: column;display: flex;position: fixed;left:8px; right:8px; bottom:20px; background: #fff;width:calc(100% - 16px); border-radius: 32px; height:50dvh;overflow-y: hidden;
animation: popupOpen .3s ease-out forwards;}
.modal__close{position: absolute;top: 12px;left: auto;right: 16px;width: 28px;height: 28px; color: transparent;font-size: 0;text-indent: -1000px;background: url(../images/btn_closepop.png) no-repeat center center;background-size: 28px auto;vertical-align: top;z-index: 9;}
@keyframes popupOpacity {
	0% {opacity:0;}
	100% {opacity:1;}
}
@-webkit-keyframes popupOpen {
	0% {-webkit-transform:translateY(100%);}
	100% {-webkit-transform:translateY(0);}
}
@keyframes popupOpen {
	0% {transform:translateY(100%);}
	100% {transform:translateY(0);}
}

.modal__header{padding:32px 50px 8px 24px;}
.modal__content{padding:16px 24px 16px;overflow-y: auto;scrollbar-width: none;}
.modal__content::-webkit-scrollbar{display: none;}
.modal__content:after {content: '';display: block;position: absolute;bottom: 0;left: 0;width: 100%;height: 32px;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
.modal__content .option-list li{ display: flex;position: relative;}
.modal__content .option-list a{ display: block; font-size:18px;color:#161c26;padding: 19px 0;width:100%}
.modal__content .option-list a.on,.modal__content .option-list a[aria-selected="true"]{font-weight: 600;
  }
.modal__content .option-list a.on:after,.modal__content .option-list a[aria-selected="true"]:after{ content: '';position: absolute;right:0px;color: transparent;font-size: 0;text-indent: -1000px; width:24px; height:24px; background:url("../images/icon_checkbox.png") 50% 50% no-repeat; background-size: contain ;}
.pc{display: none;}
@media (min-width: 1024px) {
  .pc{display: block;}
  .mo{display: none;}
  .page-wrap{display:block; text-align:center;min-width:1200px}
  
  .site-header{max-width:1200px;margin-left:auto;margin-right:auto}
  .site-header__inner{padding: 8px 64px;}
  .site-main{max-width:936px; min-height:400px;width:100%}
  .section-wrap.section-wrap--top{ padding-top:64px;}

  .layout__container{  display: flex; margin-top:32px; padding: 0 64px;text-align:left;max-width:1200px;margin-left:auto;margin-right:auto}
  
  .section-wrap--top{padding: 0 64px; max-width:1200px;margin-left:auto;margin-right:auto}
  .section-wrap__inner{width:100%;text-align:left}
  .section__nav{min-width:200px; padding:20px 0 0;margin-top:0;font-family: "Ok", sans-serif;text-align:left}
  .section__nav li{display: block;font-size: 18px;margin-bottom:16px;color:#8c94a2;letter-spacing: -0.72px;line-height: 1.56;}
  .section__nav .active{color:#ff571f;font-family: "Ok", sans-serif;}
  .product-accordion .accordion__trigger{font-size: 18px;}
  .product-accordion .accordion__panel.is-open{font-size: 14px;}
  .product-accordion .accordion__trigger::before{width:26px;height: 26px}
  .section-wrap--bottom .section-wrap__inner{padding-top:0;}
  
  .section-pagenation{margin-bottom:120px;}
  
  .site-footer{display:block;}
  .site-footer__inner{max-width:1200px; text-align:left;margin-left:auto;margin-right:auto; padding:32px 64px 48px}
}