.section-use { margin-bottom: 90px; } 

.use-bg { background-image: url(/img_/bg/use_page_bg.jpg); height: 540px; } 

.top-bg-cont-wrap { top: 58%; } 

.top-bg-tit { margin-bottom: 0; } 


.tab-wrap { border-bottom: 1px solid #000; margin-bottom: 40px; } 

.tab-list { display: flex; justify-content: center; padding-bottom: 20px; } 

.tab-list li { margin-right: 90px; } 

.tab-list li:last-child { margin-right: 0; } 

.tab { font-size: 18px; position: relative; color: #959595; } 

.tab:hover { color: #43695c; } 

.tab.choice { opacity: 1; color: #43695c; font-weight: 600; } 

.tab:after { content: " "; display: block; width: 8px; height: 8px; background: #43695c; position: absolute; bottom: -20px; left: 50%; border-radius: 50%; transform: translateX(-50%); } 

.tit-wrap { text-align: center; padding-top: 30px; } 

.tit-wrap h3 { color: #43695c; font-weight: 300; font-size: 40px; letter-spacing: 0.02em; margin-bottom: 20px; } 

.tit-wrap p { letter-spacing: 0.05em; font-size: 18px; font-weight: 300; } 

/* 01 */
.htu-list { display: flex; flex-wrap: wrap; } 

.htu { width: 385px; margin-right: 21px; margin-bottom: 60px; } 

.htu:nth-child(3n) { margin-right: 0; } 

.htu-img-box { width: 100%; height: 450px; } 

.htu-img-box img { width: 100%; height: 100%; } 

.htu-txt-box { margin-top: 20px; } 

.htu-info-box { text-align: center; } 

.htu-info-box .htu-name { font-size: 30px; font-weight: 600; margin-bottom: 20px; } 

.htu-info-box .htu-description { font-size: 18px; font-weight: 300; } 

/* ...01 */

/* howtouse01-detail */
.howtouse-detail .cont-tit-wrap { text-align: center; margin-bottom: 40px; } 

.howtouse-detail .cont-tit-wrap h3 { font-size: 60px; font-weight: 300; margin-bottom: 20px; margin-top: -5px; } 

.howtouse-detail .cont-video-thumb { position: relative; cursor: pointer; font-size: 0; margin-bottom: 40px; } 

.howtouse-detail .cont-video-thumb img { width: 100%; } 

.howtouse-detail .cont-video-thumb:before { content: " "; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); } 

.howtouse-detail .cont-video-thumb:after { content: " "; display: block; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(/img_/icon/playbtn.png) no-repeat; background-size: 100%; } 

.howtouse-detail .cont-detail { font-size: 0; margin-bottom: 90px; } 

#anotherProductsSwiper .swiper-slide { width: 385px; } 

#anotherProductsSwiper .swiper-slide a { display: block; background: #f4f2f5; }  
/* ...howtouse01-detail */

/*02*/
.howtouse02 .cont-wrap { margin-top: 90px; } 
.howtouse02 .cont-wrap .cont { padding-top: 15px; border-top: 1px solid #eaeaea; padding-bottom: 90px; margin-bottom: 40px; } 

.howtouse02 .cont-wrap .cont:last-child { padding-bottom: 50px; margin-bottom: 0; } 

.howtouse02 .cont-wrap .cont .guide-txt { font-size: 20px; } 

.howtouse02 .cont-wrap .cont .guide-txt > span { position: relative; } 

.howtouse02 .cont-wrap .cont .guide-txt > span:before { content: " "; display: block; width: 100%; height: 8px; background: linear-gradient(150deg, rgb(165, 19, 207), rgb(110, 31, 151), rgb(96, 23, 132)); position: absolute; top: -11px; } 

.howtouse02 .cont-wrap .cont .guide-txt > span span { font-weight: 300; } 

.howtouse02 .cont-wrap .cont .guide-txt > span span.bold { font-weight: 600; } 

.howtouse02 .cont-wrap .cont-img { width: 100%; height: 0; padding-bottom: calc(285 / 1220 * 100%); background-repeat: no-repeat; margin-top: 70px; } 

.howtouse02 .cont-wrap .cont1-img { background-image: url(/img_/howtouse/htu-1.png); } 

.howtouse02 .cont-wrap .cont2-img { background-image: url(/img_/howtouse/htu-2.png); } 

.howtouse02 .cont-wrap .cont3-img { background-image: url(/img_/howtouse/htu-3.png); } 

.howtouse02 .cont-wrap .cont4-img { background-image: url(/img_/howtouse/htu-4.png); } 

.howtouse02 .cont-wrap .cont5-img { background-image: url(/img_/howtouse/htu-5.png); } 
/*...02*/

/* 03 */
.howtouse03 .flex-box { display: flex; justify-content: center; align-items: center; } 

.howtouse03 .flex-box .left { overflow: hidden; margin-right: 90px; } 

.howtouse03 .flex-box .left img { transform: translateY(100%); transition: 1s; } 

.howtouse03 .flex-box .right { overflow: hidden; } 

.howtouse03 .flex-box .right .right-cont-wrap { transform: translateY(-100%); transition: 1s; } 

.howtouse03 .flex-box .right .sec-title { font-size: 40px; font-family: 'Noto Sans KR',sans-serif; font-weight: 400; margin-bottom: 36px; } 

.howtouse03 .flex-box .right .description { font-size: 18px; font-weight: 300; margin-bottom: 10px; } 

.howtouse03 .flex-box .right .description-bold { font-size: 30px; font-weight: 600; line-height: 1.4; margin-bottom: 32px; } 

.howtouse03 .flex-box .right .odometer-wrap { margin-bottom: 40px; } 

.howtouse03 .flex-box .right .odometer-wrap span { font-size: 20px; font-weight: 300; vertical-align: bottom; } 

.howtouse03 .flex-box .right .odometer-wrap .odometer-inside span { font-weight: 600; font-size: 36px; color: #43695c; } 

.howtouse03 .flex-box .right .test-btn { display: block; background:#43695c; width: 180px; height: 60px; line-height: 60px; text-align: center; color: #fff; font-weight: 300; } 

.howtouse03 .flex-box .right .test-btn span { margin-right: 17px; } 
/*...03 */