/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

/* page-body */
#productPlan .page-body .visual { margin-top:30px }
#productPlan .page-body .pick { margin-top:30px; text-align:center }
#productPlan .page-body .pick select { width:588px; height:38px; font-size:15px; color:#555; text-align:center }
#productPlan .page-body .clst { zoom: 1; overflow: hidden; margin-top: 10px; padding: 10px 7px 7px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
#productPlan .page-body .clst li { float: left; margin-right: 15px; padding-left: 10px; background: url(/images/d3/modern_simple/common/bull_h2_sqr_gray.gif) no-repeat 0 45%; }
#productPlan .page-body .clst li a { display: block; white-space: nowrap; }
#productPlan .page-body .p-hd { position: relative; margin-top: 70px; padding: 0 10px 5px; border-bottom: 2px solid #5c5c5c; }
#productPlan .page-body .p-hd.mt-35 { margin-top: 35px; }
#productPlan .page-body .p-hd h3 { color: #5c5c5c; font-size: 14px; font-weight: bold; letter-spacing: -1px; }
#productPlan .page-body .p-hd .top { position: absolute; top: 0; right: 5px; color: #5c5c5c; }
#productPlan .page-body .plst { zoom: 1; overflow: hidden; margin: 25px auto 0; }
#productPlan .page-body .item-wrap { padding-top:50px }
#productPlan .page-body .item-wrap .main_icons { position:relative; }
#content .page-hd h2{ text-align: center;}

.prmWrap .tab-nav {margin: 80px 0 0 0;}
.prmWrap .tab-nav ul { display: flex; justify-content: center; }
.prmWrap .tab-nav li { flex: 1; font-size: 28px; font-weight: 500; color: #a2a2a2; background: #f9f9f9; padding: 40px 0; text-align: center; }
.prmWrap .tab-nav li.active { color: #000; background: #fff;}


.prmWrap .tab-content .con { display: none; }
.prmWrap .tab-content .con.active { display: block; }


/* 사이즈 안내 */
.prmWrap .size_title { font-size: 32px; font-weight: 500; margin: 80px 0 0 0;}
.prmWrap .steps {padding: 120px 0 40px 0;}
.prmWrap .steps .step_title span{ display: block; margin: 0 0 24px 0; font-family: "Marcellus", serif; color: #BF214B; font-size: 28px; font-weight: 500;}
.prmWrap .steps .step_title p{font-size: 28px; font-weight: 500;}

.prmWrap .steps .tab-nav {margin: 80px 0 32px 0;}
.prmWrap .steps .tab-nav ul.nav_ver01 {width: 500px; margin: 0 auto; background: #d9d9d9; padding: 8px; border-radius: 80px; overflow: hidden;}
.prmWrap .steps .tab-nav ul.nav_ver01 li{font-size: 24px; font-weight: 500; background: #d9d9d9; border-radius: 80px; padding: 20px 0;}
.prmWrap .steps .tab-nav ul.nav_ver01 li.active { color: #000; background: #fff;}

.prmWrap .slide_wrap {margin: 0 0 24px 0;}
.prmWrap .slide_wrap .text_box{ text-align: left; padding: 32px 24px; border: 1px solid #eee;}
.prmWrap .slide_wrap .text_box p:first-child {display: flex; align-items: center; font-weight: 500; font-size: 22px; margin: 0 0 16px 0;}
.prmWrap .slide_wrap .text_box p .number{background: #000000; color: #ffffff; padding: 2px 6px; border-radius: 50%; margin-right: 8px; font-size: 14px;}
.prmWrap .add_info{ text-align: left; font-size: 16px; font-weight: 400; color: #525252; line-height: 24px;}

.prmWrap .steps .swiper-button-next{top:71%; right:32px; width:auto}
.prmWrap .steps .swiper-button-next::after{font-size:22px; color:#000000;}

.prmWrap .mid_info{ padding: 24px 40px; background: #e2e2e2; text-align: left; font-size: 16px; font-weight: 400;}

.prmWrap .steps .info_con{ padding: 16px; border: 1px solid #eee; border-radius: 15px;}
.prmWrap .steps .info_con figure{overflow: hidden; margin: 0 0 8px 0;}    
.prmWrap .steps .info_con figcaption{text-align: left; padding: 24px 0;}
.prmWrap .steps .info_con figcaption .text_top{margin: 0 0 24px 0;}

.prmWrap .step_three{margin: 0 0 80px 0;}
.prmWrap .step_three .step_title{margin: 0 0 80px 0;}


/* 올바른 착용 방법 */
.prmWrap .step { padding: 100px 0; }
.prmWrap .step .progress_tit{font-family: "Marcellus", serif;}
.prmWrap .step .swiper-pagination { bottom: auto; top: 12px; }

.prmWrap .step .swiper-pagination-bullet { position: relative; width: 50px; height: 50px; color: #a2a2a2; background: #f2f2f2; opacity: 1; line-height: 49px; font-size: 20px; font-weight: 400; border: 2px solid #f2f2f2; }
.prmWrap .step .swiper-pagination-bullet:not(.swiper-pagination-bullet.on ~ .swiper-pagination-bullet):not(.swiper-pagination-bullet.on) { color: #BF214B; background: #ffffff; border: 2px solid #BF214B;}

.prmWrap .step .swiper-pagination-bullet.on { color: #ffffff; background: #BF214B; position: relative; border: 2px solid #BF214B;}
.prmWrap .step .swiper-pagination-bullet.on::after { content: ""; position: absolute; width: 70px; height: 70px; background: #BF214B; opacity: 0.2; top: 50%; left: 50%; 
                                                      transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; }
.prmWrap .step .swiper-pagination-bullet:not(:last-child)::before { content: ""; position: absolute; top: 50%; left: 110%; height: 0; width: 32px; border: 1px dashed #a2a2a2;}
.prmWrap .step .swiper-pagination-bullet:not(:last-child){margin-right:40px;}

.prmWrap .step .swiper-button-next{top:75.5%; right:32px; width:auto}
.prmWrap .step .swiper-button-next::after{font-size:22px; color:#000000;}


/* BASIC css end */