/* Written By KYI */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap'); /*Reset*/ body{margin: 0; padding: 0;} div,p,h1,h2,h3,h4,h5,h6,ol,li,dl,dt,dd,ul,pre,form,fieldset,legend,button,table,th,td{margin:0;padding: 0;border:0;} ul,ol,li,dl{list-style: none;} img{border:0;vertical-align: middle; font-size:0;} address,caption,cite,code,dfn,em,var{font-style: normal;} a{color:inherit; text-decoration:none; color:#333;} a:hover,a:active,a:focus{text-decoration:none;} table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;} strong{font-weight:500;} h1,h2,h3,h4,h5,h6{font-weight:400;} article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary,main {display:block;} /* common */ body,th,td,button{color:#3b3b3b; font-size:15px; line-height:1.5; letter-spacing:-0.08em; font-family: 'Noto Sans KR', sans-serif;} .blind{display:none;} /*font-weight Light:300, Regular:400, Bold:700, ExtraBold:800*/ *:focus { outline:none; }/*크롬에서 div, 기타 버튼 클릭시 생기는 테두리 제거*/ /*공통***********************************************************************************/ #kyi-top-banner{width:100%; margin:0 auto; position:relative; } #kyi-top-banner img{width:100%; display:block;} #kyi-header{width:100%; margin:0 auto; position:relative; height:70px; box-sizing:border-box;} .kyi-logo{position:absolute; left:50%; margin-left:-120px; top:50%; margin-top:-30px; width:240px; } .kyi-logo img{width:100%;} .kyi-search-box{position:absolute; width:100%; box-sizing:border-box; padding:5% 10%; margin:0 auto; z-index:999999; top:70px; background:#2891db; display:none;;-webkit-transition: left 1s; transition: left 1s;} .kyi-search-box input{box-sizing:border-box; width:100%; height:48px; border:2px #222a34 solid; border-radius:9999px; padding:0 70px 0 34px;} .kyi-search-box button{position:absolute; right:10%; cursor:pointer; border-radius:0 9999px 9999px 0;} .kyi-search-btn{position:absolute; right:10px; top:50%; margin-top:-20px; width:30px; height:30px; padding:5px;background:#222a34;} .kyi-search-btn img{width:100%;} .kyi-search-close{display:none;} .kyi-all-open{position:absolute; left:10px; top:50%; margin-top:-20px;} .kyi-all-open a{display:block; font-size:0; background:#2891db; width:40px; height:40px; line-height:40px; text-align:center;} .kyi-all-open a img{width:20px;} /*sidemenu*/ #kyi-all-gnb{position:fixed;top:0;bottom:0;background:#fff; display:none; left:-200px; z-index:999999;　-webkit-transition: left 1s; transition: left 1s; width:auto; overflow:visible; } #kyi-all-gnb .kyi-all-gnb-area{position:relative; z-index:55; width:280px; left:0; overflow:hidden auto; height:100%;background:#111} #kyi-all-gnb .kyi-gnb-close-btn{font-size:0; width:40px; height:40px; position:absolute; left:280px; top:0px; z-index:999; text-align:center; background:#ed5c22 url(img/all-close-btn.png) no-repeat; background-position:50%; background-size:20px; color:#fff; cursor:pointer;} .kyi-gnb li{border-bottom:1px #d1dae4 solid;} .kyi-gnb li a{padding:10px; display:block; background:#e9eff4;} .kyi-gnb li a li a{padding:10px; display:block; background:#e9eff4;} .kyi-gnb li ul li a{display:block; background:#fff;} .kyi-sidebg{position:fixed; height:150%; background:rgba(0,0,0,0.5); width:100%; top:0; right:0; z-index:44;} #kyi-quick{position:fixed; right:20px; top:100px; z-index:9999999999;} .kyi-quick-list{padding:10px; background:#222a34; text-align:center;} .kyi-quick-list li{border-left:1px rgba(255,255,255,0.1) solid; padding:5px 0; display:inline-block; box-sizing:border-box; width:32%;} .kyi-quick-list li:first-child{border-left-width:0;} .kyi-quick-list li a{color:#fff; font-size:13px; display:block; width:100%;} .kyi-ql1 a div{background:url(img/basket-ico.png) no-repeat 50% 0px; padding-top:35px; position:relative;} .kyi-ql1 a div span{display:block; position:absolute; right:10px; top:0; width:24px; height:24px; line-height:24px; background:#ed5c22; border-radius:9999px; color:#fff; font-size:13px;} .kyi-ql2 a{display:block; background:url(img/car-ico.png) no-repeat 50% 0px; padding-top:35px; } .kyi-ql3 a{display:block; background:url(img/my-ico.png) no-repeat 50% 0px; padding-top:35px; } .kyi-ql4 dt{color:#fff; font-size:13px;margin-bottom:10px;} .kyi-tnb{height:20px; line-height:20px; padding:10px;border-bottom:1px #d1dae4 solid; background:#fff;} .kyi-tnb li{display:inline-block; position:relative; padding:0 15px;} .kyi-tnb li:first-child{padding-left:0;} .kyi-tnb li:first-child:after{display:none;} .kyi-tnb li:after{display:block; position:absolute; content:" "; width:3px; height:3px; background:#8b8f93; border-radius:50%; left:0; top:50%; margin-top:-1px; } .kyi-tnb li a{position:relative; line-height:inherit; display:block; padding-left:17px; background-position:0 50%;background-repeat:no-repeat; font-size:15px;} .kyi-tnb li.kyi-t1 a{background-image:url(img/tnb-icon1.gif);} .kyi-tnb li.kyi-t2 a{background-image:url(img/tnb-icon2.gif);} .kyi-tnb li.kyi-t3 a{background-image:url(img/tnb-icon3.gif);} .kyi-bottom-info{background:#f1f2f4; width:94%;padding:30px 3%;} .kyi-bottom-info-list{width:100%; margin:0 auto;} .kyi-bottom-info-list:after{clear:both; display:block; height:0; content:""; visibility:hidden;} .kyi-bottom-info-list li{float:left; width:25%;} .kyi-bottom-info-list li a{display:block; text-align:center;border-left:1px #bbc9cd solid;} .kyi-bottom-info-list li:first-child a{border-left:0;} .kyi-bottom-info-list li a span{display:inline-block; font-size:15px; color:#33374e; background-position:50% 0; padding-top:45px; background-size:35px 35px; background-repeat:no-repeat; line-height:inherit;} .kyi-bottom-info-list li.kyi-bil1 a span{background-image:url(img/quick-img1.png);} .kyi-bottom-info-list li.kyi-bil2 a span{background-image:url(img/quick-img2.png);} .kyi-bottom-info-list li.kyi-bil3 a span{background-image:url(img/quick-img3.png);} .kyi-bottom-info-list li.kyi-bil4 a span{background-image:url(img/quick-img4.png);} .kyi-bottom-info-cus{width:100%; padding-top:20px;} .kyi-bottom-info-cus:after{clear:both; display:block; height:0; content:""; visibility:hidden;} .kyi-bottom-info-cus section{float:left; width:100%; box-sizing:border-box; border:1px #bbc9cd solid; text-align:center; padding:20px 10px;margin-bottom:2%; background:#fff;} .kyi-bottom-info-cus section:first-child{margin-left:0;} .kyi-info-title{font-size:22px; color:#34384f; font-weight:500; line-height:1em;} .kyi-info-title span{display:block; font-size:14px; color:#9d9fa8; font-family: 'Poppins', sans-serif; font-weight:500; letter-spacing:0em; text-transform:uppercase;} .kyi-cus-tel{font-size:27px; color:#3e4e90; font-family: 'Poppins', sans-serif; font-weight:700; letter-spacing:0em; padding:15px 0 5px; display:block;} .kyi-cus-text-type1{color:#555555;} .kyi-cus-ico{padding:15px 0 10px;} .kyi-cus-ico img{width:58px;} .kyi-cus-bank{font-family: 'Poppins', sans-serif; font-weight:700; letter-spacing:0em; font-size:21px; line-height:1.15em;} #kyi-notice{position:relative;} .kyi-notice-list{text-align:left; margin-top:10px;} .kyi-notice-list li{border-top:1px #e1e1e1 solid; padding:12px 0;} .kyi-notice-list li:first-child{border-top-width:0;} .kyi-notice-list li a{display:block; height:20px; line-height:20px; padding-right:10px; overflow:hidden; color:#555;} .kyi-notice-list li a:hover{color:#3b50aa;} .kyi-notice-list li span{display:block; margin-top:10px; box-sizing:border-box; font-family: 'Poppins', sans-serif; background:url(img/notice-ico.gif) no-repeat 0 50%; background-size:15px; height:15px; line-height:15px; padding-left:17px; color:#999999; font-size:14px; letter-spacing:0em;} .kyi-notice-more{width:42px; height:42px; position:absolute; right:0; top:0; border:1px #bbc9cd solid; border-width: 0 0 1px 1px} .kyi-notice-more img{width:100%;} footer{width:100%;background:#1d2228;} .kyi-footer-info{text-align:center; margin:0 auto; padding:20px 10px; color:rgba(255,255,255,0.7); font-size:15px; line-height:1.4em; letter-spacing:-0.05em; word-break:keep-all;} .kyi-footer-copy{color:rgba(255,255,255,0.5); font-family: 'Poppins', sans-serif; letter-spacing:0em; padding-top:10px;} .kyi-f-logo-link{margin-top:10px;} .kyi-f-logo-link a{display:inline-block; margin-right:5px; opacity:90%;} .kyi-f-logo-link a img{height:15px;} /*main*/ #kyi-visual{width:100%; position:relative; overflow-x:hidden; margin:0 auto; clear:both;} #kyi-visual .slick-list.dragging{cursor: pointer; cursor: hand;} #kyi-visual .slick-slider .slider-for{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); position:relative; z-index:1; clear:both;} #kyi-visual .slick-slide {float: left; text-align:center; height: 100%; min-height: 1px;*/} #kyi-visual .slick-slide img{width:100%;} .kyi-main-title{font-size:35px; font-weight:600; margin-bottom:20px; text-align:center;} .kyi-main-title span{font-size:16px; color:#b0b0b0; font-family: 'Poppins', sans-serif; font-weight:500;text-transform:uppercase; letter-spacing:0em; display:block;} /*제품리스트 공통*/ .kyi-product-list{margin-left:0%;} .kyi-product-list li{float:left; text-align:center; box-sizing:border-box; background:#fff;margin:0 2%;/*width:224px !important;*/} .kyi-product-list:after{clear:both; display:block; height:0; content:""; visibility:hidden;} .kyi-product-list li a{display:block;} .kyi-product-img{position:relative; box-sizing:border-box; padding-top:100%; overflow:hidden; border:1px #e1e1e1 solid;} .kyi-product-img img{width:100%; position:absolute;} .kyi-product-text-box{padding:15px 0px 0;height:150px; box-sizing:border-box;} .kyi-product-state{padding-bottom:10px;} .kyi-product-state span{display:inline-block; background:black; color:#fff; font-size:10px; height:18px; line-height:18px; padding:0 5px; border-radius:5px 5px 0 5px; letter-spacing:0em;} .kyi-product-state span.kyi-ps1{background-color:#fa66a8} .kyi-product-state span.kyi-ps2{background-color:#66a8fa} .kyi-product-state span.kyi-ps3{background-color:#fa6666} .kyi-product-state span.kyi-ps4{background-color:#a5a0a2} .kyi-product-text1{color:#777777; font-size:15px;} .kyi-product-text2{color:#333333; font-size:15px; font-weight:500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.3em; height: 2.6em; } .kyi-product-price p{display:inline-block;} .kyi-product-price .kyi-pp1{color:#d81119; font-family: 'Poppins', sans-serif; font-weight:500; font-size:20px;} .kyi-product-price .kyi-pp2{font-size:17px; color:#666666; text-decoration: line-through; font-weight:300;padding:0 5px; } .kyi-product-price .kyi-pp3 span{font-size:20px; font-weight:600;} .kyi-product-list .slick-list{width:100%; overflow:hidden;} .kyi-product-list .slick-list:after{clear:both; display:block; height:0; content:""; visibility:hidden;} .kyi-product-list .slick-list.dragging{cursor: pointer; cursor: hand;} .kyi-product-list .slick-slider .slider-for{-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0); position:relative; z-index:1; clear:both;} .kyi-product-list .slick-slide {float: left; text-align:center; margin:0 10px; /*height: 100%; min-height: 1px;*/} #kyi-recommend{background:#f1f2f4; width:100%; margin:0 auto; padding:40px 0;overflow:hidden;} .kyi-recomend-area{width:96%; margin:0 auto; position:relative; } #kyi-recommend .kyi-product-list li{border:1px #e1e1e1 solid; width:auto;} #kyi-recommend .kyi-product-list li a{padding:20px 10px} #kyi-recommend .kyi-product-img{border:0;} #kyi-recommend .kyi-product-text-box{border-top:1px #e1e1e1 solid; padding:15px 0 0;} #kyi-recommend .kyi-product-text1{font-size:14px;} #kyi-recommend .kyi-product-text2{font-size:16px} #kyi-recommend .kyi-product-price .kyi-pp1{font-size:20px;} #kyi-recommend .kyi-product-price .kyi-pp3 span{font-size:22px;} #kyi-recommend .slick-arrow{position:absolute; left:-110px; top:50%; margin-top:-5px; font-size:0; width:90px; height:90px; z-index:9999999; background:url(img/product-arrow-prev.png); cursor:pointer;} #kyi-recommend .slick-arrow.slick-next{left:auto; right:-110px;background:url(img/product-arrow-next.png)} #kyi-best{width:100%; margin:0 auto; padding:20px 0;} #kyi-best .kyi-product-list li{width:46%;} @media (max-width:480px) { #kyi-recommend .kyi-product-list li{margin-left:0;} } /*sub공통*/ .kyi-sub-content-area{width:100%; margin:0 auto; padding:20px 0 60px;} .kyi-sub-title-box{width:100%; margin:0px auto; padding-top:40px; position:relative; border-top:1px #e0e0e0 solid; text-align:center;} .kyi-sub-title-box h2{font-size:28px; font-weight:600;} .kyi-sub-nav p{display:inline-block; vertical-align:2px;} .kyi-sub-nav span{display:inline-block; position:relative; color:#545454; font-size:15px; padding-left:10px; margin-left:4px;} .kyi-sub-nav span:after{position:absolute; content:""; display:block; width:6px; height:11px; background:url(img/sub-nav-arrow.gif); left:0; top:50%; margin-top:-5px;} /*sub list*/ .kyi-list-select{padding:22px 0; border:1px #e4e4e4 solid; border-width:1px 0; margin-bottom:15px;} .kyi-list-select:after{clear:both; display:block; height:0; content:""; visibility:hidden;} .kyi-total-product{width:30%; float:left; font-weight:600; color:#555; font-size:15px;margin-left:10px; line-height:35px;} .kyi-total-product span{color:#ed5c22;} .kyi-select-tab{width:100%; text-align:center; line-height:25px; margin-bottom:20px;} .kyi-select-tab li{display:inline-block;} .kyi-select-tab li a{display:block; font-size:15px; color:#555; position:relative;padding:0 10px;} .kyi-select-tab li a:after{content:""; display:block; width:3px; height:3px; background:#bdbdbd; border-radius:50%; position:absolute; left:0; top:50%; margin-top:-1px;} .kyi-select-tab li:first-child a{padding-left:0;} .kyi-select-tab li:first-child a:after{display:none;} .kyi-select-box{float:right; box-sizing:border-box; padding-right:10px; width:60%;vertical-align:middle;} .kyi-select-box select{width:100%; border:1px #e1e1e1 solid;font-size:15px; padding:5px 0;} .kyi-list-num{text-align:center; line-height:35px;} .kyi-list-num span{display:inline-block; vertical-align:3px;} .kyi-list-num span img{width:35px;} .kyi-list-num a{display:inline-block; padding:0 10px;} .kyi-list-num p{display:inline-block; width:35px; height:35px; line-height:35px; background:#1d314a; border-radius:9999px; color:#fff;} .sub-kyi-PL li{width:46%;} /* 이미지 틀에 맞추는 소스 */ .img{position:relative;float:left;width:100%;height:100%;vertical-align:middle;text-align:center;} .img img{position:absolute;top:0;bottom:0;left:0;right:0;max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;} /*================================== 최상단 ==================================*/ #main-navbar{position:relative;float:left;z-index:10;width:94%;padding:3%;background:#fff;border-bottom:1px solid #ccc;text-align:center;} #toggle-sidebar,#toggle-sidebar2{float:left;width:6%;cursor:pointer;} #main-navbar ul{float:left;width:80%;margin:1% 4%} #main-navbar ul li{float:left;width:24.5%;line-height:90%;border-left:1px solid #ccc;text-align:center;} #main-navbar ul li:first-child{border-left:none;} #main-navbar ul li a{float:left;width:100%;display:block;font-size:14px;font-weight:400;text-align:center;} #main-sidebar,#main-sidebar2{position:fixed;top:0;bottom:0;background:#e5e5e5;} #main-sidebar .close-sb,#main-sidebar2 .close-sb{height:54px;line-height:54px;background:#333;padding:0 0 0 3%;border-bottom:1px solid #000;font-size:18px;color:#fff;cursor:pointer;} #main-sidebar ul li > a,#main-sidebar2 ul li > a{display:block;height:42px;line-height:42px;padding:0 0 0 5%;border-bottom:1px solid #ccc;font-size:16px;font-weight:600;color:#555;} #main-sidebar ul li > a:hover,#main-sidebar2 ul li > a:hover{background:#333;border-bottom:1px solid #010101;color:#fff;} #main-sidebar ul li li > a,#main-sidebar2 ul li li > a{display:block;padding:0 0 0 3%;background:#f7f7f7;border-bottom:1px solid #dedee0;font-size:13px;color:#555;} .right_box{float:left;width:96%;margin:2%;} .right_box a{float:left;width:28.5%;background:#fff;border:1px solid #ccc;border-radius:10px;padding:9% 0;margin:2%;font-size:13px;text-align:center;} .right_box a img{float:left;width:40%;margin:3% 30%;} /* 로고, 전화걸기 */ .logo{position:relative;float:left;width:100%;padding:4% 0;text-align:center;} .logo a{float:left;width:80%;margin:0 10%;text-align:center;} .nlogo{position:relative;float:left;width:70%;margin:1% 15%;text-align:center;} /* 메뉴 */ #menu{position:relative;float:left;width:94%;padding:2% 3%;background:#fff;border:1px solid #ccc;border-left:none;border-right:none;} #menu .icon_w{float:left;width:40%;} #menu .icon_w a{float:left;width:28%;margin-right:3%;} .search{float:left;width:60%;background:#e5e5e5;} .search .search_bar{float:left;width:80%;padding:2%;line-height:100%;font-size:16px;background:none;} .search .search_btn{float:left;width:20%;} .search input{ border:0; border-radius: 0px; -webkit-appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /*================================== 메인 ==================================*/ /* 메인 슬라이드 */ .promotion{position:relative;float:left;margin:0;padding:0;min-width:320px;max-width:1080px;width:100%;overflow-x:hidden;} .slidings{margin:0;padding:0;} #promotionBanner{margin:0;padding:0;} .wrap{margin:0;padding:0;} figure{margin:0;padding:0;} #promotionBannerPagination{margin:0;padding:0;} .pagination{margin:0;padding:0;} .mtitle{position:relative;float:left;width:100%;line-height:100%;font-size:22px;color:#000;text-align:center;margin-bottom:5%;background:url(../img/title_Bg.png) no-repeat center center;background-size:200%;} .mtitle b{display:inline-block;width:100%;line-height:100%;font-size:22px;font-weight:500;letter-spacing:2px;color:#000;text-align:center;} .mtitle b span{float:left;width:100%;line-height:100%;font-size:11px;font-weight:300;letter-spacing:0;margin-top:10px;color:#777;} /* 추천상품 */ .swiper-container{position:relative;float:left;width:96%;margin:0;padding:7% 2% 0 2%;background:#f5f5f5;} div.swiper-slide{position:relative;float:left;width:100%;margin:0;padding:0;text-align:center;margin-bottom:-20px; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} .best_w{position:relative;float:left;width:45.2%;height:280px;margin:0 2%;background:#fff;} .best_w a{position:relative;float:left;width:100%;height:180px;overflow:hidden;} .best_w b{float:left;width:84%;line-height:20px;font-size:16px;font-weight:500;letter-spacing:-1px;color:#000;margin:0 7%;padding-top:10px;border-top:1px solid #e0e0e0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .best_w b font{float:left;width:100%;line-height:100%;font-size:11px;font-weight:300;letter-spacing:0;color:#666;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .best_w p{float:left;width:100%;line-height:100%;font-size:14px;font-weight:500;color:#e12020;margin-top:10px;} .best_w p span{display:inline-block;font-size:12px;text-decoration:line-through;font-weight:300;color:#aaa;margin-right:2px;} /* 상품리스트 */ #product{position:relative;float:left;width:92%;margin:8% 4% 0 4%;} ul.p_list{float:left;width:104%;margin-left:-2%;} ul.p_list li{float:left;display:block;width:45.7%;height:300px;text-align:center;margin:0 2%;} ul.p_list li a{position:relative;float:left;width:100%;height:180px;background:#f4f4f4;overflow:hidden;margin-bottom:3%;} ul.p_list li b{float:left;width:100%;line-height:18px;font-size:14px;font-weight:500;color:#000;margin-top:4%;} ul.p_list li b font{float:left;width:100%;line-height:100%;font-size:10px;font-weight:300;letter-spacing:0;color:#666;margin-top:6px;} ul.p_list li p{float:left;width:100%;line-height:100%;font-size:14px;font-weight:500;letter-spacing:-0.03em;color:#e12020;margin-top:5%;} ul.p_list li p span{display:inline-block;font-size:11px;text-decoration:line-through;font-weight:300;color:#aaa;margin-right:4px;} .icons{display:inline-block; *display:inline; zoom:1;} .icons img{float:left;width:auto;height:12px;margin:1px;} p.p_img{width:98%;} p.p_imgm{width:100%;margin-bottom:6%;} p.p_imgm img{width:100%;border:1px solid #e0e0e0;} p.pr_subject{width:96%;margin:1%;font-size:90%;} p.price2{width:98%;font-size:95%;letter-spacing:-1px;color:#999;text-decoration:line-through;} p.price{width:98%;font-size:95%;letter-spacing:-1px;color:#000;} /*================================== 하단 ==================================*/ /* 카피라이트 */ #footer{position:relative;float:left;width:100%;background:#e5e5e5;margin-top:6%;} .copy{position:relative;float:left;width:94%;padding:20px 3% 0 3%;color:#888;line-height:13px;font-size:11px;} .copy p{text-align:center;} /* 버튼 style */ #button{position:relative;float:left;width:100%;padding:24px 0;background:#e5e5e5;text-align:center;} .btn{margin:0 1%;padding:2% 4%;font-size:76%;color:#555; background:#fff; border:1px solid #aaa; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; behavior:url(ie-css3.htc);} /*================================== 서브 ==================================*/ #sub_content{position:relative;float:left;width:100%;} /* 서브 카테고리 */ .sub_title{position:relative;float:left;width:94%;padding:4% 3%;line-height:100%;font-size:120%;font-weight:bold;background:#f1f1f1;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}/* 페이지 타이틀 */ /* 서브탭 2개 */ .sub_tab{position:relative;float:left;width:100%;} .sub_tab li{float:left;width:49.8%;} .sub_tab li a{display:block;width:100%;height:36px;line-height:36px;background:#888;font-size:13px;font-weight:400;text-align:center;color:#fff;border-left:1px solid #fff;border-top:1px solid #fff;} .sub_tab li a.select{background:#000;} /* 서브탭 3개 */ .sub_tab3{position:relative;float:left;width:100%;} .sub_tab3 li{float:left;width:49.5%;} .sub_tab3 li a{display:block;width:100%;height:36px;line-height:36px;background:#888;font-size:13px;font-weight:400;text-align:center;color:#fff;border-left:1px solid #fff;border-top:1px solid #fff;} .sub_tab3 li a.select{background:#000;} /* 서브탭 4개 */ .sub_tab4{position:relative;float:left;width:100%;} .sub_tab4 li{float:left;width:24.8%;} .sub_tab4 li a{display:block;width:100%;height:36px;line-height:36px;background:#888;font-size:13px;font-weight:400;text-align:center;padding:8% 0;color:#fff;border-left:1px solid #fff;border-top:1px solid #fff;} .sub_tab4 li a.select{background:#000;} .page_content{position:relative;float:left;width:94%;padding:8% 3%;margin-bottom:5%;overflow:hidden;} img.img_w{width:124%;margin-left:-12%;} img.img2_w{width:110%;margin-left:-5%;} /* 페이징 고정 소스 */ .paging_w{position:relative;float:left;width:100%;margin:5% 0;} .paging{text-align:center;} .paging ul{display:inline-block;zoom:1;*display:inline;} .paging ul li{float:left;text-align:center;} .paging ul li a{float:left;display:block;font-size:90%;padding:0 5px;margin:0 2px;color:#898989;background:#fafafa;border:1px solid #e0e0e0;} .paging ul li.on{float:left;display:block;font-size:90%;padding:0 5px;margin:0 2px;border:1px solid #555;background:#898998;color:#fff;font-weight:600;} ul.gallery{float:left;width:104%;margin:5% 0 0 -2%;} ul.gallery li{float:left;display:block;width:45.7%;margin:0 2%;} ul.gallery li a{float:left;width:100%;} ul.gallery li a img{float:left;width:100%;} ul.gallery li p{float:left;width:100%;font-size:13px;margin-top:3%;text-align:center;} #greeting{position:relative;float:left;width:100%;text-align:center;padding-bottom:200px;background:url(../img/gree_bg.png) no-repeat center bottom;background-size:380px;} #greeting b{float:left;width:100%;line-height:24px;font-size:18px;font-weight:600;color:#119ef7;margin-bottom:4%;} #greeting p{float:left;width:100%;line-height:18px;font-size:14px;font-weight:300;color:#666;text-shadow:2px 2px 2px #fff;} h5.sub_txt{float:left;width:100%;text-align:center;line-height:30px;font-size:18px;font-weight:300;letter-spacing:-1px;margin:0;padding:0;color:#333;font-family:'NanumMyeongjo' !important;margin-bottom:5%;} h5.sub_txt span{color:#0d8dfa;} #company{position:relative;float:left;width:100%;} #company p{float:left;width:100%;line-height:20px;font-size:14px;font-weight:300;color:#666;} #company p b{font-size:18px;font-weight:600;color:#89bc29;} #company img{float:left;width:40%;margin:0 3% 0 0;} .history_tbl{float:left;width:100%;margin-top:-20px;} .history_tbl table{float:left;width:100%;} .history_tbl table th,.history_tbl table td{border:1px solid #ccc;padding:2%} .history_tbl table th:first-child,.history_tbl table td:first-child{border-left:none;} .history_tbl table th{width:24%;font-size:26px;color:#17b293;vertical-align:top;letter-spacing:-2px;font-weight:bold;background:#edf8f6;} .history_tbl table td{border-right:none;} .history_tbl table td dl{position:relative;float:left;width:100%;margin:4px 0;} .history_tbl table td dl dt{position:absolute;left:0;top:-6px;min-height:30px;height:100%;font-size:20px;color:#898989;font-weight:bold;} .history_tbl table td dl dd{float:left;padding-left:10px;line-height:18px;font-size:13px;font-weight:300;color:#333;margin:3px 0 3px 40px;background:url(../img/sub_bullet.gif) no-repeat 0 8px;} .page_title{float:left;width:100%;line-height:100%;text-align:center;margin:8% 0 4% 0;background:url(../img/line.gif) repeat-x center center;} .page_title b{display:inline-block;font-size:24px;font-weight:600;letter-spacing:-1px;padding:0 14px;background:#fff;} .page_title2{float:left;width:100%;line-height:100%;font-size:20px;font-weight:600;letter-spacing:-1px;padding-left:8px;margin:6% 0 3% 0;border-left:4px solid #51a932;} ul.cpn_banner{float:left;width:96%;padding:2%;background:#f5f5f5;} ul.cpn_banner li{float:left;width:31.333%;margin:1%;} ul.cpn_banner li img{float:left;width:100%;} .award{float:left;width:104%;margin-left:0;} .award dl{float:left;width:33%;height:200px;margin-top:5%;} .award dl dt{float:left;text-align:center;font-size:14px;line-height:24px;} .award dl dt img{float:left;width:98%;margin-left:3%;} .award dl dd{float:left;width:98%;text-align:center;font-size:14px;line-height:20px;margin-top:4%;} .award dl dd strong{float:left;width:100%;line-height:18px;font-size:14px;text-align:center;} table.map_tbl{float:left;width:100%;text-align:left;} table.map_tbl th{width:24%;background:#f2f2f2;font-size:14px;font-weight:600;color:#333;} table.map_tbl td{font-size:16px;color:#333;} table.map_tbl th,table.map_tbl td{padding:2%;line-height:18px;font-size:13px;border:1px solid #ccc;} .add_txt{float:left;width:100%;line-height:32px;font-size:20px;} /* 이미지 크기 제멋대로일때 잡아주는 소스 */ @media screen and (min-width:0) and (max-width:360px) { .best_w{height:230px;} .best_w a,ul.p_list li a{height:139px;} ul.p_list li{height:260px;} ul.p_list li b font{display:none;} ul.gallery li{height:280px;} ul.gallery li a img{height:150px;} } @media screen and (min-width:361px) and (max-width:420px) { } @media screen and (min-width:421px) and (max-width:767px) { .best_w{height:350px;} .best_w a{height:260px;} ul.p_list li{width:29.333%;height:280px;} ul.p_list li a{height:168px;} ul.gallery li{height:480px;} ul.gallery li a img{height:320px;} } @media screen and (min-width:768px) and (max-width:1023px) { .best_w{height:440px;} .best_w a{height:333px;} ul.p_list li{width:29.333%;height:330px;} ul.p_list li a{height:215px;} ul.gallery li{height:480px;} ul.gallery li a img{height:320px;} } @media screen and (min-width:1024px) and (max-width:1920px) { .best_w{height:540px;} .best_w a{height:433px;} ul.p_list li{width:29.333%;height:420px;} ul.p_list li a{height:280px;} ul.gallery li{height:570px;} ul.gallery li a{height:400px;} } /* Written By MJS */ @font-face{font-family:'NotoSerifKR';font-style:normal;font-weight:100;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');} @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 700; src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot); src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff2) format('woff2'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff) format('woff'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.ttf) format('truetype'); } @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 400; src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot); src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff2) format('woff2'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff) format('woff'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.ttf) format('truetype'); } @font-face { font-family: 'Nanum Gothic'; font-style: normal; font-weight: 800; src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.eot); src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.woff2) format('woff2'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.woff) format('woff'), url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.ttf) format('truetype'); } body,html{width:100%;font-family: 'Nanum Gothic', sans-serif;margin:0;padding:0;} *{list-style:none;margin:0;padding:0;} .sub_title{position:relative;float:left;width:100%;line-height:100%;font-weight:100;text-decoration:none;font-size:24px;letter-spacing:-1px;text-align:center;color:#000 !important;margin:8% 0 4% 0;} .font{font-family:'NotoSerifKR' !important;font-weight:100;} /* 공통 style */ .photo_box{position:relative;float:left;width:100%;} .pb_title{float:left;width:100%;line-height:24px;font-size:14px;text-align:right;color:#000;margin-top:4%;} .pb_title b{line-height:40px;font-weight:100;font-size:26px;} .pb_txt{float:left;width:100%;line-height:100%;font-size:13px;text-align:right;color:#444;} .pb_txt span{font-size:10px;color:#888;} .frame_box{position:relative;float:left;width:100%;overflow:hidden;} .fb1{position:relative;float:left;width:73%;margin-right:2%;background:#aaa;} .fb_w{position:relative;float:left;width:25%;} .fb2{position:relative;float:left;width:100%;background:#666;margin-bottom:8%;} .fb3{position:relative;float:left;width:100%;background:#000;} .fb_txt{position:relative;float:left;width:100%;margin:5% 0 3% 0;} .fb_txt b{float:left;width:100%;line-height:100%;font-size:20px;padding-bottom:2%;border-bottom:1px solid #aaa;} .fb_txt p{float:left;width:100%;line-height:19px;font-size:13px;margin-top:4%;color:#555;} .text_box{position:relative;float:left;width:100%;box-sizing:border-box;padding:2.5% 4% 3% 4%;background:#eaeaea;} .tbox_img{float:left;width:46%;margin:1% 3% 3% 0;} .tbox_img2{float:left;width:25.6%;padding-bottom:-10px;margin:7px 40px 0 0;} .tbox_img img{float:left;} .text_box p{line-height:20px;font-size:13px;} /* 매월당 정보 */ .tea_info{position:relative;float:left;width:100%;box-sizing:border-box;padding:5% 5% 5% 20%;border:1px solid #e0e0e0;background:#f9f9f9;} .tea_info p{float:left;width:110%;line-height:16px;height:16px;font-size:11px;letter-spacing:-0.025em;margin-bottom:2px;} .tea_info p b{display:inline-block;width:38px;height:16px;height:16px;font-size:10px;padding:0 3px;background:#999;color:#fff;text-align:center;margin-right:5px;} .tea_info p strong{} .tea_logo{position:absolute;left:3%;top:18px;float:left;width:14%;height:80px;} .tea_logo img{float:left;width:100%;} /* 제다과정 */ .step_list{position:relative;float:left;width:100%;} .step_list ul{float:left;width:100%;} .step_list ul li{position:relative;float:left;width:100%;box-sizing:border-box;padding:4%;border:1px solid #ccc;margin-bottom:-1px;} .step_list ul li p{float:left;width:62%;line-height:18px;font-size:12px;text-align:center;color:#555;} .step_list ul li p b{float:left;width:100%;line-height:100%;font-size:17px;letter-spacing:-1px;color:#184d0d;margin:2% 0 4% 0;} .step_list ul li p span{float:left;width:100%;line-height:100%;font-size:13px;font-weight:600;color:#8ebe85;} .step_list img{float:left;width:34%;margin-right:4%;} /* 상품소개 */ .tea_product{position:relative;float:left;width:100%;box-sizing:border-box;padding:5% 5% 7% 5%;background:#153c11;margin-top:8%;} .tea_product ul{float:left;width:100%;} .tea_product ul li{float:left;width:100%;margin:0.5% 0;box-sizing:border-box;padding:4%;background:#fff;box-shadow:2px 2px 0px #000;} .tea_product ul li p{float:left;width:66%;line-height:17px;font-size:12px;letter-spacing:-0.025em;color:#555;} .tea_product ul li p b{float:left;width:100%;line-height:100%;font-size:17px;margin:0 0 4% 0;color:#000;} .tea_product ul li p span{float:left;width:100%;line-height:100%;font-size:10px;margin-top:5px;color:#888;} .tea_product ul li img{float:left;width:30%;background:#999;margin-right:4%;} .tea_title{float:left;width:100%;line-height:30px;text-align:center;color:#fff;margin-bottom:4%;} .tea_title b{float:left;width:100%;font-size:24px;} .tea_title span{font-size:13px;opacity:0.6;} /*차우리기 과정 */ .tea_step{position:relative;float:left;width:100%;background:#000;} .tea_step:before{content:' ';position:absolute;left:0;top:0;display:block;width:100%;height:100%;background:url(../../img/p4-1_1.jpg) no-repeat;z-index:0;opacity:0.2;} .tea_step ul{position:relative;float:left;width:100%;box-sizing:border-box;padding:5%;} .tea_step ul li{position:relative;float:left;width:100%;box-sizing:border-box;padding:4%;background:#fff;margin:1% 0;opacity:0.9;} .tea_step ul li img{float:left;width:18%;margin-right:6%;} .ts_txt{float:left;width:76%;} .ts_txt b{float:left;width:100%;line-height:24px;font-size:20px;font-weight:100;color:#0f5616;} .ts_txt b i{float:left;width:24px;height:24px;line-height:24px;font-size:16px;text-align:center;font-style:normal;background:#0f5616;color:#fff;margin-right:5px;} .ts_txt p{float:left;width:100%;line-height:20px;font-size:14px;font-weight:600;margin-top:3%;color:#000;} .ts_txt span{float:left;width:100%;line-height:16px;font-size:11px;margin-top:2%;color:#666;} .tea_step ul ul{float:left;width:95%;padding:0;margin:6px 0 0 0;} .tea_step li li{float:left;width:100%;line-height:16px;font-size:11px;padding:0;margin:0;padding-left:5px;margin-top:3px;color:#666;box-sizing:border-box;background:url(../../img/bullet.gif) no-repeat 0 4px;}