/* --------------------------------------------------------------------------------------------------------------------------------------------------------------- main_basic --------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .PC_box{display:block;} .MOBILE_box{display:none;} #wrap,.container {width:1000px;margin: 0 auto;position: relative;} /*퀵메뉴*/ #fl_menu{position:absolute; top:20px; right:-110px; z-index:9999;} #fl_menu .label{padding-left:15px; line-height:40px; font-size:12px; font-weight:bold; background:#ffd801; color:#612701;letter-spacing:1px;cursor:pointer;} #fl_menu .menu {padding:10px;background-color:#f9f9f9} #fl_menu .menu .menu_item{display:block; background:#efefef; color:#000; font-size:12px; text-decoration:none;text-indent:-500px;overflow:hidden;} @media only screen and (max-width: 800px) { #wrap,.container {width:100%;margin: 0;position: relative;padding:50px 15px 15px 15px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;} #fl_menu{display:none;} .PC_box{display:none;} .MOBILE_box{display:block;} } @media only screen and (max-width: 640px) { .footerTop .container{padding:0 20px;} } /* --------------------------------------------------------------------------------------------------------------------------------------------------------------- 레이아웃 --------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /*---메인상단---*/ #ContentArea .mainBanner{position: relative;margin-bottom:20px;} #ContentArea .mainBanner .leftB{width:250px;height:150px;border:1px solid #d2d2d2;text-align:center;background-color: #f6f6ec;} #ContentArea .mainBanner .rightB{position:absolute; top:0; right:0; width:740px;height:152px;} #ContentArea .mainBanner .rightB ul{} #ContentArea .mainBanner .rightB ul li{display:inline-block;width:240px;height:70px;margin:1px 5px 2px 0;text-indent:-10000px;overflow:hidden;} #ContentArea .mainBanner .rightB ul li.thr{margin-right:0;} #ContentArea .mainBanner .rightB ul li a, #ContentArea .mainBanner .rightB ul li a span{display:block;width:240px;height:70px;} #ContentArea .mainBanner .rightB ul li .bn01{background:#eff7ec url(/images/md7004/2022_topBanner_01.jpg) no-repeat center 0;} #ContentArea .mainBanner .rightB ul li .bn02{background:#eff7ec url(/images/md7004/2022_topBanner_02.jpg) no-repeat center 0;} #ContentArea .mainBanner .rightB ul li .bn03{background:#eff7ec url(/images/md7004/2022_topBanner_03.jpg) no-repeat center 0;} #ContentArea .mainBanner .rightB ul li .bn04{background:#eff7ec url(/images/md7004/2022_topBanner_04.jpg) no-repeat center 0;} #ContentArea .mainBanner .rightB ul li .bn05{background:#eff7ec url(/images/md7004/2022_topBanner_05.jpg) no-repeat center 0;} #ContentArea .mainBanner .rightB ul li .bn06{background:#eff7ec url(/images/md7004/2022_topBanner_06.jpg) no-repeat center 0;} /*---왼쪽메뉴---*/ #wrap .Category {float:left;width:164px;height:100%;padding-top:20px;} #wrap .Category h3{display:none;font-weight:normal;font-size:24px;font-family:Rufina;} #menuList {height:780px;background: url(/images/md7004/menuBg.jpg) no-repeat 0 0;} #menuList ul {padding-top:60px;} #menuList ul li {line-height:28px;font-size:14px;padding-left:25px;} #menuList ul li a{color:#fff;} #menuList ul li a:hover{color:#ffe050;} #menuList ul li.subMenu:hover,#menuList ul li.subMenu_select {color:#ffe050;} #menuList ul li.subMenu_select a {color:#ffe050;font-weight:bold;} #menuList ul li:first-child a{color:#ff5050;font-weight:bold;} #wrap .infoFloat {float:left;width:164px;position:absolute;left:-180px;top:20px;} /*---컨텐츠---*/ #ContentArea{margin-left:200px;width:800px;min-height:900px;padding:20px 0 50px 0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;} #ContentArea.noca{margin-left:0;width:1000px;min-height:500px;} #ContentArea h3 {padding-bottom:10px;font-size:16px;color:#575757;font-family:"돋움", Dotum,Gothic,"고딕",arial,helvetica,sans;} /*제품이름,본문제목등*/ #ContentArea h4 {padding:20px 0;font-size:16px;color:#575757;font-family:"돋움", Dotum,Gothic,"고딕",arial,helvetica,sans;} /*상품이동탭 타이틀*/ .guidlineH2{position: relative;background:#f4f4f4 url(/images/md7004/dot.png) no-repeat 15px center;padding-left:35px;line-height:50px;font-size:1.2em;font-size:normal;margin-bottom:20px;color:#000;} .guidlineH2 .link{position:absolute; top:0; right:20px;color: #333;font-size: 13px;} a.moreBtn{width:150px;height:40px;color:#fff;padding:0 20px;text-align:center;line-height:40px;font-weight:bold;display:inline-block;background-color:#6f7279;} a.moreBtn:hover{background-color:#eb2c2c;} @media only screen and (max-width: 800px) { #wrap .Category {display:none;} #wrap .infoFloat {display:none;} #ContentArea{margin-left:0;width:100%;} #ContentArea.noca{width:100%;} #ContentArea .mainBanner .leftB{width:100%;height:auto;} #ContentArea .mainBanner .rightB{position:static; width:100%;height:auto;padding-top:20px;} #ContentArea .mainBanner .rightB ul li.thr{margin-right:5px;} #ContentArea .mainBanner .rightB ul li{width:32%;height:72px;} #ContentArea .mainBanner .rightB ul li a, #ContentArea .mainBanner .rightB ul li a span{width:100%;height:100%;} } @media only screen and (max-width: 780px) { #ContentArea .mainBanner .rightB ul li{width:48%;height:72px;} #ContentArea .mainBanner .rightB ul li a, #ContentArea .mainBanner .rightB ul li a span{width:100%;height:100%;} } @media only screen and (max-width: 640px) { } @media only screen and (max-width: 480px) { #ContentArea .mainBanner .rightB ul li{width:100%;height:72px;margin-right:0;} #ContentArea .mainBanner .rightB ul li.thr{margin-right:0;} } @media only screen and (max-width: 375px) { } /*---제품소개---*/ /* 제품리스트 */ .productsList li{margin-bottom:15px;}/*전체카다록리스트*/ .productsList li img{border:1px solid #ddd;max-width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }/*전체카다록리스트*/ .productsList li.double{width:49%;display:inline-block;} .product_3 li{display:inline-block;margin: 0 15px 15px 0;padding-bottom:10px;width:250px;vertical-align:top;} .product_3 li:nth-child(3n){margin-right: 0 ;} .product_3 li.last{margin-right:0;} .product_3 li img{width:252px;border:1px solid #bcbcbc;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} .product_3 li:hover img{width:252px;border:1px solid #2c8fd3;} .product_3 li h5{font-size:14px;padding-left:5px;} .product_3 li p{font-size: 1rem;color: red;padding-left: 5px;font-weight: 600;} .product_4 li{display:inline-block;margin: 0 15px 15px 0;padding-bottom:10px;width:180px;vertical-align:top;} .product_4 li:nth-child(4n){margin-right: 0 ;} .product_4 li.last{margin-right:0;} .product_4 li img{width:180px;border:1px solid #bcbcbc;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} .product_4 li:hover img{width:180px;border:1px solid #2c8fd3;} .product_4 li h5{font-size:14px;padding-left:5px;} .product_4 li p{font-size: 1rem;color: red;padding-left: 5px;font-weight: 600;} @media only screen and (max-width: 800px) { .product_3 li{width:23%;margin: 0 10px 10px 0;} .product_3 li:nth-child(3n){margin-right: 10px;} .product_3 li:nth-child(4n){margin-right: 0 ;} .product_3 li.last{margin-right:0;} .product_3 li img{width:100%;} .product_3 li:hover img{width:100%;} .product_4 li{width:23%;margin: 0 10px 10px 0;} .product_4 li:nth-child(4n){margin-right: 0 ;} .product_4 li.last{margin-right:0;} .product_4 li img{width:100%;} .product_4 li:hover img{width:100%;} } @media only screen and (max-width: 780px) { .product_3 li{width:23%;} .product_3 li:nth-child(3n){margin-right: 10px;} .product_3 li:nth-child(4n){margin-right: 0 ;} .product_3 li.last{margin-right:0;} .product_4 li{width:23%;} .product_4 li:nth-child(3n){margin-right: 10px ;} .product_4 li:nth-child(4n){margin-right: 0 ;} .product_4 li.last{margin-right:0;} } @media only screen and (max-width: 640px) { .product_3 li{width:31%;} .product_3 li:nth-child(3n){margin-right: 0;} .product_3 li:nth-child(4n){margin-right: 10px ;} .product_3 li.last{margin-right:0;} .product_4 li{width:31%;} .product_4 li:nth-child(3n){margin-right: 0 ;} .product_4 li:nth-child(4n){margin-right: 10px;display:none;} .product_4 li.last{margin-right:0;} } @media only screen and (max-width: 480px) { .product_3 li{width:46%;} .product_3 li:nth-child(2n){margin-right: 0;} .product_3 li:nth-child(3n){margin-right: 10px;} .product_3 li:nth-child(4n){margin-right: 10px ;display:inline-block;} .product_3 li.last{margin-right:0;} .product_4 li{width:46%;} .product_4 li:nth-child(2n){margin-right: 0 ;} .product_4 li:nth-child(3n){margin-right: 10px ;} .product_4 li:nth-child(4n){margin-right: 10px;display:inline-block;} .product_4 li.last{margin-right:0;} } @media only screen and (max-width: 375px) { .product_3 li{width:43%;} .product_4 li{width:43%;} } @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 제품소개_본문 */ #calendarInfo {padding:20px;position:relative;} #calendarInfo .new_imageBox {width:400px;text-align:center;padding:15px 0;background-color:#efefef;min-height: 500px;} #calendarInfo .new_imageBox .sample img{width:250px;border:1px solid #ddd;} #calendarInfo .new_textBox {position:absolute;top:20px;right:20px;width:500px;} #calendarInfo .new_textBox h3{font-size:24px;font-weight:bold;font-family: 'Nanum Gothic', sans-serif;} #calendarInfo .new_textBox h3 span.num {color:#fff;display:inline-block;margin-right:15px;padding:5px 10px;} #calendarInfo .new_textBox h3 span.small {font-size:18px;font-weight:normal;} #calendarInfo .new_textBox h3.brown{color:#d7b48a} #calendarInfo .new_textBox h3.pink{color:#f17760} #calendarInfo .new_textBox h3.green{color:#93bd7b} #calendarInfo .new_textBox h3.blue{color:#4f8cbd} #calendarInfo .new_textBox h3.blue span.num{background-color:#4f8cbd} #calendarInfo .new_textBox h3.brown span.num{background-color:#d7b48a} #calendarInfo .new_textBox h3.pink span.num{background-color:#f17760} #calendarInfo .new_textBox h3.green span.num{background-color:#93bd7b} #calendarInfo .new_textBox .pay{background:#f7f7f7;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin-top:10px;padding:10px;} #calendarInfo .new_textBox .pay .first{text-decoration:line-through} #calendarInfo .new_textBox .pay .two{color:#d81e1e;font-weight:bold;font-size:1.4em;line-height:2.5em;} #calendarInfo .new_textBox .info{background:#fff;margin-bottom:30px;} #calendarInfo .new_textBox .info table { width:100%;} #calendarInfo .new_textBox .info tbody th {text-align:left;padding-left:10px;font-size:13px;font-weight:bold;border-bottom:1px solid #ddd;} #calendarInfo .new_textBox .info tbody tr td{padding:3px 0;text-align:left;border-bottom:1px solid #ddd;} #calendarInfo .new_textBox .btnOrder{margin-top:10px;} #calendarInfo .new_textBox .btnOrder .listBtn {display:inline-block;width:49.5%;margin:0 auto;height:50px;line-height:50px;font-size:17px;text-align:center;margin-top:30px;background-color:#fff;border:1px solid #ddd;color:#000;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} #calendarInfo .new_textBox .btnOrder .orderBtn {display:inline-block;width:49.5%;margin:0 auto;height:50px;line-height:50px;font-size:17px;text-align:center;margin-top:30px;background-color:#346aff;border:1px solid #346aff;color:#fff;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} .detail {text-align:center;} .detail img {display:inline-block;margin-bottom:20px;width:600px;border:1px solid #ddd;text-align:center;} #cal_pay{width:100px;height:30px;border:1px solid #ddd;padding:0 7px;} @media only screen and (max-width: 800px) { #calendarInfo {padding:0;} #calendarInfo .new_imageBox {width:40%;margin-bottom:30px;} #calendarInfo .new_textBox {width:55%;top:10px;right:10px;} } @media only screen and (max-width: 780px) { #calendarInfo .new_imageBox {width:100%;} #calendarInfo .new_textBox {position:static;width:100%;top:0;right:0;} .detail img {width:90%;max-width:600px;} } @media only screen and (max-width: 640px) { } @media only screen and (max-width: 480px) { #calendarInfo .new_textBox .btnOrder .listBtn {width:48%;} #calendarInfo .new_textBox .btnOrder .orderBtn {width:48%;} } @media only screen and (max-width: 375px) { } /*배송등안내*/ .explain li{background: url('/images/md7004/dotA.gif') no-repeat 5px 10px;padding-left:15px;} .orderSample{text-align:center;margin:20px 0;} .orderSample img{width:100%;max-width:640px} .product-tab-title { background-color: #555; padding-top: 2px; margin-top:30px; font-size: 0; } .product-tab-title .product-tab-title-list-wraper { background-color: white; border-b ottom: 1px solid #ccc; } .product-tab-title .product-tab-title__list.active { border-bottom-color: #ffffff; margin-bottom: -2px; background: #ffffff; border-bottom: 1px solid white; color: #111; } .product-tab-title .product-tab-title__list:first-child { border-left: 1px solid #ccc; } .product-tab-title .product-tab-title__list { text-align: center; color: #555; border-collapse: collapse; z-index: 1; display: inline-block; position: relative; font-size: 16px; font-weight: bold; width: 25%; box-sizing: border-box; padding: 15px 20px 14px; border-right: 1px solid #ccc; background-color: #fafafa; } @media only screen and (max-width: 800px) { .product-tab-title .product-tab-title__list:nth-child(3),.product-tab-title .product-tab-title__list:nth-child(4) {display:none;} .product-tab-title .product-tab-title__list {width: 50%;padding: 10px;} } /*---회사소개---*/ /* 회사소개 */ .introP{margin-left:20px;background:url(/images/md7004/infoBg_2024.png) no-repeat right bottom;background-size:auto;padding:30px 0 50px;} #ContentArea .introP h3{color:#fe8c45;font-weight:bold;} .introP .introText {margin-bottom:20px;font-size:14px;} .introP .introEndText {font-size:18px;font-family: 'Nanum Myeongjo', serif;font-weight:bold;} /* 고객센터 */ /* 일반테이블 */ .tbl02{margin-bottom:30px;} .tbl02 table { width:100%; border-top:2px solid #545861; border-bottom:1px solid #545861; color:#545861;font-size:1em; } .tbl02 thead tr th{border-bottom:1px solid #ddd;border-right:1px solid #ddd; padding:9px 10px;border-top:1px solid #5d5d5d;font-weight:bold;background-color:#efefef;} .tbl02 thead tr th.last{border-right:none;} .tbl02 tbody th {background:#f7fbfb;border-bottom:1px solid #ddd;border-right:1px solid #ddd;text-align:center;padding-left:10px;font-weight:bold;font-size:0.9em;} .tbl02 tbody tr td{border-bottom:1px solid #ddd;border-right:1px solid #ddd; padding:9px 10px;text-align:center;} .tbl02 tbody tr td.last{border-right:none;} .tbl02 tbody tr td.left{text-align:left;} /*연혁*/ .historyBox {margin:0;background-size:auto 100%;} .historyBox .mobileBg{display:none;} .historyBox dl {width:auto;padding-left:20px;} .historyBox dl dt{display:inline-block;width:50px;color:#419ad9;font-size:1.3em;font-weight:bold;vertical-align:top;padding:5px 0 10px;} .historyBox dl dd{display:inline-block;width:300px;padding:5px 0 10px;} .historyBox dl dd span.month{color:#b8b8b8;padding-right:20px;} .historyBox dl dd span.agency{color:#8e8e8e;font-size:.9em;} .historyBox dl dt.multie{} .historyBox dl dd.multie{background:none;} /*주문하기*/ #orderWrap{width:100%;overflow-x:auto;} @media only screen and (max-width: 800px) { .introP{margin-left:0;background:none;} #ContentArea .introP h3{font-size:1.1em;} .introP .introText {font-size:1em;} .introP .introEndText {font-size:1em;} } @media only screen and (max-width: 640px) { /*연혁*/ .historyBox {margin:0;background:none;padding-left:0;} .historyBox .mobileBg{display:block;margin-bottom:30px;} .historyBox .mobileBg span {display:inline-block;width:30%;text-align:center;} #orderWrap{border:1px solid #ddd;box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;} } @media only screen and (max-width: 480px) { /*연혁*/ .historyBox {padding-left: 0;} .historyBox dl {width:100%;padding-left:0;box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;} .historyBox dl dt{width:15%;max-width:90px;font-size:1.1em;} .historyBox dl dd{width:83%;font-size:.9em;} .historyBox dl dd span.month{padding-right:10px;} } @media only screen and (max-width: 375px) { /*연혁*/ .historyBox {padding-left: 0;} .historyBox .mobileBg{display:none;} .historyBox dl {width:100%;padding-left:0;box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;background:none;} .historyBox dl dt{display:block;width:100%;font-size:1.2em;font-weight:bold;padding-bottom:0;} .historyBox dl dd{display:block;width:100%;font-size:1em;} .historyBox dl dd span.month{padding-right:10px;} }