/* BASIC css start */
.main_slideshow .swiper_main_visual a {width:100%;}
.main_slideshow .swiper_main_visual {height: calc(100vh - 192px);position: relative; min-height: 600px;}
.main_slideshow .swiper_main_visual .swiper_slider_wrap { width: 100%; height: 100%; }
.main_slideshow .swiper_main_visual .swiper-wrapper { width: 100%; height: 100%; }
.main_slideshow .swiper_main_visual_item { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; }
.main_slideshow .swiper_main_visual_bg { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: no-repeat center center; background-size: cover; }
.main_slideshow .swiper_main_visual_content { display: table; width: 100%; height: 100%; position: relative; }
.main_slideshow .swiper_main_visual_content_inner { display: table-cell; vertical-align: middle; }
.main_slideshow .swiper_main_visual_content b {display: block;font-size: 30px;font-weight: 600;letter-spacing: 0em;line-height: 1.3;color: #333;text-align: center;}
.main_slideshow .swiper_main_visual_content p { padding-top: 15px; font-size: 17px; line-height: 1.65; font-weight: 400; letter-spacing: -0.025em; color: #333;text-align: center;}
.main_slideshow .swiper_main_visual_content .bro_btn { margin-top: 50px; top: -10px;}
.main_slideshow .main_visual_video_type .swiper_main_visual_bg :after { content: "";  background: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; left: 0; right: 0; display: block; position: absolute;}
.main_slideshow .main_slideshow_pagination_container {position: absolute;bottom: 3%;left: 0;z-index: 40;width: 100%;}
.main_slideshow .main_slideshow_pagination .swiper-pagination-bullet { width: 50px; height: 10px; border-radius: 0px; margin: 0 9px; border: 2px solid #000; background: rgb(255, 255, 255); opacity: 1; }
.main_slideshow .main_slideshow_pagination.swiper-pagination-clickable.swiper-pagination-bullets {text-align: center;}
.main_slideshow .swiper-pagination-bullet b { display: block; width: 100%; background: #000; height: 100%; -webkit-transform:scaleX(0); -ms-transform:scaleX(0); transform:scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; }
.main_slideshow .main_slideshow .main_slideshow_control{display: none;}
.main_slideshow .swiper-pagination-bullet { position: relative;}
.main_slideshow .swiper-pagination-bullet:after {content: "";background: transparent; display:block;position: absolute;left: 0;top: 0;transform: translateY(-50%);width: 100%;}
.main_slideshow .use_mouse .swiper-pagination-bullet:focus{ outline:none}
.main_slideshow .cycle_count span{opacity: 0;}
.main_slideshow .swiper_main_visual_content_text_inner{margin: 0 auto; width: 100%; padding-top: 20%;}

.hello { padding: 50vw 0 94vw; text-align: center;overflow: hidden;position: relative;}
.hello span{font-family: 'HS';font-size: 50px;transform:rotate(90deg);display: inline-block;color: #1c5633;}
.hello img{position: absolute;bottom: -30px;left: calc(15%); width: 65%;}

.philosophy{padding: 0 20px;position: relative;margin: 0 auto;text-align: center;}
.philosophy .swiper-container{background-color: #000;}
.philosophy img{border:2px solid #000;opacity: 0.7;}
.philosophy-txt{position: absolute;left: 0;top: 0;width: 100%;display: table;height: 100%;}
.philosophy-txt > div{display: table-cell;padding: 80px 20px;text-align: center;}
.philosophy-txt > div h3{color: #fff;font-size: 30px;font-family: 'HS';}
.philosophy-txt > div p{color: #fff;font-size: 18px;padding: 30px 0;}

.friends{margin-top: 100px;padding: 0 20px;}
.h2-title{text-align: center;color: #1c5633;font-size: 30px;font-family: 'HS';}
.h2-title img{height: 36px;}
.friends-box p{margin: 20px;font-size: 18px;}
.products{text-align: center;background: #fff;padding-bottom: 100px;}
.products > ul{padding: 0 40px;margin-top: -60px;z-index: 1;position: relative;}
.products > ul > li{box-shadow: 10px 5px 0 #9d9d9d;background: #fff;margin-top: 40px;}
.products > ul > li .img{border: 2px solid #222;border-bottom: 0;overflow: hidden;}
.products > ul > li .txt{border: 2px solid #222;border-top: 0;padding: 30px 20px 35px;}
.products > ul > li h3{text-align: center;font-size: 20px;font-weight: 600;}
.products > ul > li p{text-align: center;font-size: 15px;margin-top: 15px;}
.products > ul > li .img img{transition: all 0.3s ease-in-out;}
.products > ul > li a:hover .img img{transform: scale(1.1,1.1);}
.products > ul > li a{display: block;}

.webtoon{background: #fff;padding: 100px 20px;}
.webtoon > ul{margin-left: -15px;margin-top: 20px;}
.webtoon > ul > li{margin-left: 15px;float: left;margin-top: 15px;width: calc(100% / 3 - 15px);position: relative;}
.webtoon > ul > li > img{width: 100%;}
.webtoon-black{position: absolute;left: 0;top: 0;display: table;background: rgba(0, 0, 0, 0.5);width: 100%;height: 100%;z-index: 1;display: none;}
.webtoon-black ul{display: table-cell;vertical-align: middle;text-align: center;}
.webtoon-black ul li{display: inline-block;margin: 0 10px;}
.webtoon-black ul li a{color: #fff;}
.webtoon-black ul li img{height: 20px;}


/* common */
.prd-section { padding:0 0 26vw; }
.title-section { margin-bottom: 40px; text-align: center; }
.title-section strong { display: block; font-family: 'HS'; font-size: 32px; color: #1c5633; }
.title-section span { display: block; margin: 5px 0 0; font-weight: 400; font-size: 18px; letter-spacing: -.5px; }

.product-list {}
.product-list .thumb { overflow: hidden; margin-bottom: 10px; border: 2px solid #333; border-radius: 20px; }
.product-list .info { font-size: 14px; letter-spacing: -1px; }
.product-list .info .prd-name { margin-bottom: 10px; }
.product-list .info .prd-price-sell { font-weight: 600; font-size: 13px; }
.product-list .info .prd-price-consumer { margin:0 5px; font-size: 12px; opacity: .5; text-decoration: line-through; }
.product-list .info .prd-sale-percent { font-size: 12px; color:#1c5633; }

.btn-box { text-align: center; }
.btn-box .btn-move { display: inline-block; padding: 0 40px; height: 40px; border: 1px solid #333; border-radius: 20px; font-weight: 600; font-size: 15px; line-height: 38px; }

/* visual-slide */
.main_slideshow { overflow:hidden; margin:10px 10px 0; border:2px solid #333; border-radius: 15px 15px 0 0; }
.main_slideshow { margin-bottom: 26vw; }

/* new-items */
.new-prd-section { overflow: hidden; padding:0 0 5vw; }
.new-prd-section .title-section { margin-bottom: 30px; }
.new-prd-section .new-product-list { padding:0 0 10vw; }
.new-prd-section .swiper { padding: 0 50px; }
.new-prd-section .swiper .swiper-slide .thumb { transition:all 200ms linear; transform: scale(0.8); }
.new-prd-section .swiper .swiper-slide.swiper-slide-active .thumb { margin-bottom: 20px; transform: scale(1); }
.new-prd-section .product-list .info { text-align: center; }
.new-prd-section .product-list .info .subname { margin-bottom: 10px; font-weight: 600; font-size: 13px; color: #1c5633; }
.new-prd-section .product-list .info .prd-name { font-size: 15px; }
.new-prd-section .product-list .info .prd-price-sell { font-size: 15px; }
.new-prd-section .product-list .info .prd-price-consumer,
.new-prd-section .product-list .info .prd-sale-percent { font-size: 13px; }

/* hello */
#container .hello img { bottom: -20px; }
#container .philosophy { overflow: hidden; margin:0 10px 26vw; padding:0; border:2px solid #333; border-radius: 15px; }
#container .philosophy img { border:0; }
#container .philosophy-txt > div a{ display: inline-block; padding: 0 40px; height: 40px; border: 1px solid #fff; border-radius: 20px; font-weight: 600; font-size: 15px; line-height: 38px; color: #fff; }

/* products */
.recmd-prd-section { background-color: #fff; }
.recmd-prd-section .recmd-product-list { margin: 20px 20px 0; }
.recmd-prd-section .recmd-product-list { display: flex; flex-wrap: wrap; justify-content: flex-start; justify-content: space-between; }
.recmd-prd-section .recmd-product-list li { width: calc(50% - 5px); margin-bottom: 40px; }

/* friend */
#container .friends { margin:0; padding:26vw 0 36vw; text-align: center; }
#container .friends .friends-box p { margin:10px 0 20px; }

/* youtube */
.youtube .title-section strong { display: inline-block; }
.youtube .title-section img { width: 25px; margin-left: 7px; vertical-align: sub; }
.youtube-box { margin: 0 auto; margin-top: 40px; padding-bottom: 26vw; position: relative;}
.youtube-vedio { overflow: hidden; position: absolute; bottom:28.7%; left: 12.5%; width: 70%; height: 27.4%; border-radius: 20px; }

/* contents */
.board-contents { overflow: hidden; padding: 26vw 0; background-color: #fff; }
.board-contents .swiper { padding: 0 14vw; }
.board-contents .swiper a { display:block; }
.board-contents .swiper .thumb { overflow: hidden; border: 2px solid #333; border-radius: 20px; }
.board-contents .swiper .thumb img { width: 100%; }
.board-contents .swiper .info { padding: 20px 0 0; text-align: center; }
.board-contents .btn-box { margin-top: 40px; }

/* BASIC css end */