.procnt, .btnwrap, .bg { display: none; }
.procnt.on, .btnwrap.on, .bg.on { display: block; }

/* product slide */
.swiper-container { position: relative; }

/* Swiper 동적 생성 SVG 네비게이션 아이콘 숨기기 */
.swiper-container.mySwiper .swiper-button-prev .swiper-navigation-icon,
.swiper-container.mySwiper .swiper-button-next .swiper-navigation-icon {
    display: none !important;
}

.swiper-wrapper .swiper-slide .proTit { position: relative; padding: 5.4rem 0 7rem; }
.swiper-wrapper .swiper-slide .proTit > p.ko { margin-bottom: 1rem; text-align: center; font-size: 2.4rem; line-height: 2.4rem; font-weight: 600; color: #000; }
.swiper-wrapper .swiper-slide .proTit > p.en { text-align: center; font-size: 1.6rem; line-height: 1.6rem; font-weight: 200; color: #000; }
.swiper-wrapper .swiper-slide .proThumb { padding-bottom: 8.2rem; text-align: center; }
.swiper-wrapper .swiper-slide .proThumb img { position: relative; width: 100%; }
.swiper-button-wrap { position: absolute; z-index: 2; top: 6.5rem; width: 100%; height: 2rem; }
.swiper-button-wrap .swiper-button-prev { position: absolute; margin-top: -1.3rem; width: 3.2rem; height: 3.2rem; left: 1.2rem; background: none; }
.swiper-button-wrap .swiper-button-next { position: absolute; margin-top: -1.3rem; width: 3.2rem; height: 3.2rem; right: 1.2rem; background: none; }
.swiper-button-wrap .swiper-button-prev > img,
.swiper-button-wrap .swiper-button-next > img { width: 100%; }
/*
.swiper-button-wrap .swiper-button-next:not(.custom-next-btn),
.swiper-button-wrap .swiper-button-prev:not(.custom-prev-btn) {
    display: none !important;
}
*/


.bg-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.bg-wrap .bg { width: 100%; height: 100%; }

/* product detail*/
.prodetail-wrap { margin-top: -0.1rem; }
.procnt { width: 100%; box-sizing: border-box; padding: 0 1.2rem 0 1.2rem; }
.procnt > .tabCont > .contDetail { display: none;}
.procnt > .tabCont > .contDetail.on { display: inherit; }
.procnt ul.tab { text-align: center; height: 4.4rem; }
.procnt ul.tab > li.tablink { display: inline-block; width: 49.5%; height: 100%; }
.procnt ul.tab > li.tablink.on { position: relative; }
.procnt ul.tab > li.tablink.on::after { transform: skew(-50deg); -webkit-transform: skew(-50deg); -moz-transform: skew(-50deg); position: absolute; bottom: 0; left: 0; content: ""; display: inline-block; width: 100%; height: 0.6rem; }
.procnt ul.tab > li.tablink > a { position: relative; top: 0.6rem; font-size: 1.6rem; font-weight: 200; color: #7A7A7A; }
.procnt ul.tab > li.tablink.on > a { font-size: 1.6rem; font-weight: 600;  }

.contDetail.first > ul > li > p.tit { margin: 3rem 0 2.7rem 0; text-align: center; font-size: 2rem; line-height: 2rem; font-weight: 600; }
.contDetail.first > ul > li > p.sub { text-align: center; line-height: 2.4rem; font-size: 1.4rem; font-weight: 200; }
.contDetail.first > ul > li > ul > li { padding-left: 2.8rem; text-align: left; line-height: 2.4rem; font-size: 1.4rem; font-weight: 200; }
.contDetail.first > ul > li.component { padding-bottom: 2.5rem; }
.contDetail.first > ul > li.component > p.tit { margin-top: 5.2rem; }
.contDetail.first > ul > li.symptom { padding-bottom: 2.8rem; }
.contDetail.first > ul > li.symptom > p.tit { margin: 3.1rem 0 3.2rem 0; }
.contDetail.first > ul > li.symptom > .icon-wrap > ul { width: 100%; box-sizing: border-box; padding: 0 2.6rem; text-align: center; }
.contDetail.first > ul > li.symptom > .icon-wrap > ul > li { display: inline-block; margin-right: 2.1rem; }
.contDetail.first > ul > li.symptom > .icon-wrap > ul > li:last-child { margin-right: 0; }
.contDetail.first > ul > li.symptom > .icon-wrap > ul > li > span { display: inline-block; width: 6rem; height: 6rem; }
.contDetail.first > ul > li.symptom > .icon-wrap > ul > li > span > img { width: 100%; }
.contDetail.first > ul > li.symptom > .icon-wrap > ul > li > p { margin-top: 0.7rem; font-size: 1.2rem; font-weight: 400; }
.contDetail.first > ul > li.character { padding-bottom: 3rem; }
.contDetail.first > ul > li.character > p.tit { margin-bottom: 2.4rem; }
.contDetail.first > ul > li.character { padding-bottom: 0 !important; border-bottom: none !important; }
.contDetail.first > ul > li.character ul { margin-top: 0.3rem; }
.contDetail.first > ul > li.character ul li { margin-bottom: 0.8rem; position: relative; letter-spacing: 0; }
.contDetail.first > ul > li.character ul li:last-child { margin-bottom: -0.5rem; }
.contDetail.first > ul > li.character ul li::before { position: absolute; left: 0; top: 0.2rem; content: ""; display: inline-block; width: 1.5rem; height: 2.2rem; }

.contDetail.second > ul { margin-top: 4.4rem; margin-bottom: -2.4rem; }
.contDetail.second > ul > li { margin-bottom: 2rem; }
.contDetail.second > ul > li > p.tit { margin-bottom: 0.2rem; padding-left: 2.8rem; position: relative; font-size: 1.4rem; font-weight: 600; line-height: 2.4rem; }
.contDetail.second > ul > li > span { display: inline-block; padding-left: 2.8rem; font-size: 1.4rem; font-weight: 200; line-height: 2.4rem; }
.contDetail.second > ul > li > p::before { position: absolute; left: 0; top: 0.2rem; content: ""; display: inline-block; width: 1.5rem; height: 2.2rem; }


/* taksen */
.procnt.taksen { position: relative; background: linear-gradient(to bottom, #E1EFEB, #fff); }
.procnt.taksen ul.tab > li.tablink.on a { color: #107773; }
.procnt.taksen ul.tab > li.tablink.on::after { background: #107773; }
.procnt.taksen .icon-wrap p { color: #107773; }
.procnt.taksen .contDetail.first > ul > li { border-bottom: 0.1rem solid #B1DED6; }
.procnt.taksen .contDetail.first > ul > li.character ul li:nth-child(1)::before { background: url("../images/m_detail_taksen_num_01.png") no-repeat; background-size: 100%; }/*기본정보>숫자1*/
.procnt.taksen .contDetail.first > ul > li.character ul li:nth-child(2)::before { background: url("../images/m_detail_taksen_num_02.png") no-repeat; background-size: 100%; }/*기본정보>숫자2*/
.procnt.taksen .contDetail.second > ul > li:nth-child(1) > p::before { background: url("../images/m_detail_taksen_num_01.png") no-repeat; background-size: 100%; }
.procnt.taksen .contDetail.second > ul > li:nth-child(2) > p::before { background: url("../images/m_detail_taksen_num_02.png") no-repeat; background-size: 100%; }
.procnt.taksen .contDetail.second > ul > li:nth-child(3) > p::before { background: url("../images/m_detail_taksen_num_03.png") no-repeat; background-size: 100%; }
.procnt.taksen .contDetail.second > ul > li:nth-child(4) > p::before { background: url("../images/m_detail_taksen_num_04.png") no-repeat; background-size: 100%; }
.bg.taksen { background: #E1EFEB; }

/* eve */
.procnt.eve { background: linear-gradient(to bottom, #FFEBEE, #fff); }
.procnt.eve ul.tab > li.tablink.on a { color: #7B1219; }
.procnt.eve ul.tab > li.tablink.on::after { background: #7B1219; }
.procnt.eve .icon-wrap p { color: #7B1219; }
.procnt.eve .contDetail.first > ul > li { border-bottom: 0.1rem solid #FCD8DC; }
.procnt.eve .contDetail.first > ul > li.character ul li:nth-child(1)::before { background: url("../images/m_detail_eve_num_01.png") no-repeat; background-size: 100%; }/*기본정보>숫자1*/
.procnt.eve .contDetail.first > ul > li.character ul li:nth-child(2)::before { background: url("../images/m_detail_eve_num_02.png") no-repeat; background-size: 100%; }/*기본정보>숫자2*/
.procnt.eve .contDetail.second > ul > li:nth-child(1) > p::before { background: url("../images/m_detail_eve_num_01.png") no-repeat; background-size: 100%; }
.procnt.eve .contDetail.second > ul > li:nth-child(2) > p::before { background: url("../images/m_detail_eve_num_02.png") no-repeat; background-size: 100%; }
.procnt.eve .contDetail.second > ul > li:nth-child(3) > p::before { background: url("../images/m_detail_eve_num_03.png") no-repeat; background-size: 100%; }
.bg.eve { background: #FFEBEE; }

/* lady */
.procnt.lady { background: linear-gradient(to bottom, #FCDDE5, #fffefa 60%, #fff); }
.procnt.lady ul.tab > li.tablink.on a { color: #D01773; }
.procnt.lady ul.tab > li.tablink.on::after { background: #D01773; }
.procnt.lady .icon-wrap p { color: #D01773; }
.procnt.lady .contDetail.first > ul > li { border-bottom: 0.1rem solid #FCD8DC; }
.procnt.lady .contDetail.first > ul > li.character ul li:nth-child(1)::before { background: url("../images/m_detail_lady_num_01.png") no-repeat; background-size: 100%; }/*기본정보>숫자1*/
.procnt.lady .contDetail.first > ul > li.character ul li:nth-child(2)::before { background: url("../images/m_detail_lady_num_02.png") no-repeat; background-size: 100%; }/*기본정보>숫자2*/
.procnt.lady .contDetail.first > ul > li.character ul li:nth-child(3)::before { background: url("../images/m_detail_lady_num_03.png") no-repeat; background-size: 100%; }/*기본정보>숫자3*/
.bg.lady { background: #FCDDE5; }
.procnt.lady .contDetail.second ul { margin-top: 4.6rem; }
.procnt.lady .contDetail.second ul li { margin-bottom: 0; }
.procnt.lady .contDetail.second ul li:last-child { margin-bottom: 1.9rem; }
.procnt.lady .contDetail.second ul li span { padding-left: 0; }

/* ibuprofen */
.procnt.ibu { position: relative; background: linear-gradient(to bottom, #E5F1FD, #fff); }
.procnt.ibu ul.tab > li.tablink.on a { color: #232463; }
.procnt.ibu ul.tab > li.tablink.on::after { background: #232463; }
.procnt.ibu .icon-wrap p { color: #232463; }
.procnt.ibu .contDetail.first > ul > li { border-bottom: 0.1rem solid #BAD7F1; }
.procnt.ibu .contDetail.first > ul > li.character ul li:nth-child(1)::before { background: url("../images/m_detail_ibu_num_01.png") no-repeat; background-size: 100%; }/*기본정보>숫자1*/
.procnt.ibu .contDetail.first > ul > li.character ul li:nth-child(2)::before { background: url("../images/m_detail_ibu_num_02.png") no-repeat; background-size: 100%; }/*기본정보>숫자2*/
.procnt.ibu .contDetail.second > ul > li:nth-child(1) > p::before { background: url("../images/m_detail_ibu_num_01.png") no-repeat; background-size: 100%; }
.procnt.ibu .contDetail.second > ul > li:nth-child(2) > p::before { background: url("../images/m_detail_ibu_num_02.png") no-repeat; background-size: 100%; }
.procnt.ibu .contDetail.second > ul > li:nth-child(3) > p::before { background: url("../images/m_detail_ibu_num_03.png") no-repeat; background-size: 100%; }
.procnt.ibu .contDetail.second > ul > li:nth-child(4) > p::before { background: url("../images/m_detail_ibu_num_04.png") no-repeat; background-size: 100%; }
.bg.ibu { background: #E5F1FD; }

/* dexi */
.procnt.dexi { background: linear-gradient(to bottom, #EFEEF5, #fdfcff 80%, #fff); }
.procnt.dexi ul.tab > li.tablink.on a { color: #473477; }
.procnt.dexi ul.tab > li.tablink.on::after { background: #473477; }
.procnt.dexi .icon-wrap p { color: #473477; }
.procnt.dexi .contDetail.first > ul > li { border-bottom: 0.1rem solid #C7C4E2; }
.procnt.dexi .contDetail.first > ul > li.character ul li:nth-child(1)::before { background: url("../images/m_detail_dexi_num_01.png") no-repeat; background-size: 100%; }/*기본정보>숫자1*/
.procnt.dexi .contDetail.first > ul > li.character ul li:nth-child(2)::before { background: url("../images/m_detail_dexi_num_02.png") no-repeat; background-size: 100%; }/*기본정보>숫자2*/
.bg.dexi { background: #EFEEF5; }
.procnt.dexi .contDetail.second ul { margin-top: 4.6rem; }
.procnt.dexi .contDetail.second ul li { margin-bottom: 0; }
.procnt.dexi .contDetail.second ul li:last-child { margin-bottom: 1.9rem; }
.procnt.dexi .contDetail.second ul li span { padding-left: 0; }


/* acet */
/*.procnt.acet { background: linear-gradient(to bottom, #FFFAE6, #fffefa 60%, #fff); } */
.procnt.acet { background: linear-gradient(to bottom, #FDECE6, #fdece6 60%, #fff); } 

/*.procnt.acet ul.tab > li.tablink.on a { color: #960000; }*/
/*.procnt.acet ul.tab > li.tablink.on::after { background: #960000; }*/
.procnt.acet ul.tab > li.tablink.on a { color: #9D171C; }
.procnt.acet ul.tab > li.tablink.on::after { background: #9D171C; }
.procnt.acet .icon-wrap p { color: #9D171C; }
.procnt.acet .contDetail.first > ul > li { border-bottom: 0.1rem solid #DEABAC; }
.procnt.acet .contDetail.first > ul > li.character ul li:nth-child(1)::before { background: url("../images/m_detail_mg_num_01.png") no-repeat; background-size: 100%; }/*기본정보>숫자1*/
.procnt.acet .contDetail.first > ul > li.character ul li:nth-child(2)::before { background: url("../images/m_detail_mg_num_02.png") no-repeat; background-size: 100%; }/*기본정보>숫자2*/
.bg.acet { background: #FDECE6; } 
.procnt.acet .contDetail.second ul { margin-top: 4.6rem; }
.procnt.acet .contDetail.second ul li { margin-bottom: 0; }
.procnt.acet .contDetail.second ul li:last-child { margin-bottom: 1.9rem; }
.procnt.acet .contDetail.second ul li span { padding-left: 0; }


sup {
    vertical-align: super;
    font-size: 0.75em;
    line-height: 0;
}