.container{position:relative;width:100%;max-width:1300px;padding:0px 10px;} .topMenu .container{max-width:1300px;} img{max-width:100% !important;} #header{position:fixed;top:0px;left:0px;width:100%;background-color:white;z-index:1000;} .border-bottom_none{border-bottom:0px !important;} .text-left{text-align:left !important;} #sod_frm_pay .pay_tbl td#od_send_cost2_msg{padding-top:0px;padding-bottom:10px;font-size:13px;line-height:18px;height:auto;} #header .hideHeader{position:relative;width:100%;height:170px;transition:height 0.3s ease-in-out;z-index:100;} #header.scrolled .hideHeader{height:0px;overflow:hidden;} /* ####################### 상단배너 ######################## */ #topBanner{width:100%;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;} #header.scrolled #topBanner{opacity:0;transform:translateY(-10px);} #topBanner .swiper-slide > a{display:flex;width:100%;height:40px;align-items:center;justify-content:center;font-size:20px;font-weight:300;color:white;;background-color:#eee;white-space:pre;letter-spacing:0em;} #topBanner .swiper-slide > a.color0{background-color:yellowgreen} #topBanner .swiper-slide > a.color1{background-color:steelblue;color:white;} #topBanner .swiper-slide > a.color2{background-color:tomato;color:white;} #topBanner .swiper-slide > a.color3{background-color:cadetblue;color:white;} #topBanner .swiper-slide > a.color4{background-color:slateblue;color:white;} #topBanner .swiper-slide > a strong{font-weight:bold;} #topBanner .swiper-slide > a.color0 strong{color:red;} #topBanner .swiper-slide > a.color1 strong{color:white;} #topBanner .swiper-slide > a.color2 strong{omato;color:white;} #topBanner .swiper-slide > a.color3 strong{background-color:cadetblue;color:white;} #topBanner .swiper-slide > a.color4 strong{color:white;} .partner #headPadding{height:130px;} .partner #headPadding2{height:0px;} .partner #header .hideHeader{height:70px;} .partner .topHead .container{height:70px;} .partner #topBanner{display:none;} .partner .topHead .logo{position:static;transform:initial;} .partner .topHead .logo img{height:45px;} .partner .pt_title{position:absolute;top:50%;left:50%;transform:translate(-50% , -50%);font-size:25px;font-weight:bold;} .partner .topMenu .container{height:60px;} /* ####################### END 상단배너 ######################## */ /* ####################### 상단로고 ######################## */ .topHead{position:relative;width:100%;margin:0px;transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;overflow:visible;} #header.scrolled .topHead{opacity:0;transform:translateY(-10px);} .topHead .logo{position:absolute;top:50%;left:50%;transform:translate(-50% , -50%);} .topHead .logo img{max-height:60px;} .topHead .container {display:flex;align-items:center;height:130px;overflow:visible;} .topHead .container > div{margin-left:auto;overflow:visible;} .topHead .container .menu {margin-bottom:15px;margin-left:auto;} .topHead .container .menu a{padding:0px 10px;} .topHead .container .menu a:last-child{padding-right:0px;} /* 고객센터 드롭다운 */ .topHead .container .menu > div{position:relative;display:inline-block;} .topHead .container .menu > div .sub-menu{display:none;position:absolute;top:calc(100% + 3px);right:0px;min-width:150px;background-color:#fff;border:1px solid #ddd;box-shadow:0 4px 10px rgba(0,0,0,0.1);z-index:9999;list-style:none;margin:0;padding:5px 0 0 0;} .topHead .container .menu > div .sub-menu::before{content:"";position:absolute;top:-8px;left:0;width:100%;height:8px;} .topHead .container .menu > div:hover .sub-menu{display:block;} .topHead .container .menu > div .sub-menu li a{display:block;padding:8px 15px;white-space:nowrap;font-size:13px;color:#333;} .topHead .container .menu > div .sub-menu li a:hover{background-color:#f5f5f5;color:#004a99;} /* ####################### END 상단로고 ######################## */ /* ####################### 상단모바일로고 ######################## */ .mtopHead{padding:0px 5px;display:none;align-items:center;position:relative;width:100%;margin:0px;height:70px;transition:all 0.2s;border-bottom:1px solid #ddd;} .mtopHead .logo{} .mtopHead .logo img{max-height:40px;} .sideMenu .sm_login{margin-bottom:15px;display:flex;align-items:center;justify-content:center;} .sideMenu .sm_login .go_admin{display:none;} .sideMenu .sm_login a{display:inline-flex;align-items:center;padding:0px 15px;margin:0px 5px;height:35px;border:1px solid #aaa;background-color:white;} .sideMenu .sm_list{width:100%;flex:1;overflow-y:hidden;} .sideMenu .sm_list > ul{width:100%;border-top:2px solid #aaa;} .sideMenu .sm_list > ul > li{width:100%;} .sideMenu .sm_list > ul > li > a{display:block;width:100%;padding:10px 15px;border-bottom:1px solid #ccc;font-size:15px;font-weight:500;} .sideMenu .sm_list > ul > li > ul{padding:10px 0px;width:100%;background-color:#f3f3f3;} .sideMenu .sm_list > ul > li > ul li{} .sideMenu .sm_list > ul > li > ul li a{padding-left:35px;display:block;line-height:30px;font-size:14px;} .sideMenu .sm_list > ul > li {width:100%;} .sideMenu { padding-bottom:70px; overflow-y:auto; scrollbar-width: thin;} .cpCon{padding:15px 0px;display:flex;align-items:center;justify-content:center;} .cpCon a{padding:0px 15px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #aaa;font-size:14px;color:white;border-radius:5px;background-color:steelblue;} /* ####################### 상단모바일로고 ######################## */ /* ####################### 상단메뉴 ######################## */ .topMenu{width:100%;border-top:1px solid #ddd;border-bottom:1px solid #ddd;} .topMenu .container{height:70px;display:flex;align-items:center;} .topMenu .container .wsmenu{width:calc(100% - 80px);} .topHead .container .topSearch{margin-left:auto;flex:1;display:flex;align-items:center;justify-content:flex-end;overflow:visible;} .shop_container{width:100%;max-width:1300px;padding:0px;margin:0px auto;} .topMenu .container .topSearch2{width:80px;flex:1;display:flex;align-items:center;justify-content:flex-end;} .partner .topMenu{} .partner .topMenu .menu{display:flex;align-items:center;justify-content:center;margin:0px auto;height:60px;} .partner .topMenu .menu a{padding:0px 40px;height:60px;display:inline-flex;align-items:center;font-size:18px;font-weight:400;color:black;} .partner .topMenu .menu a.on{font-weight:bold;} /* 상단 메뉴 */ .wsmenu-list > li > a{display:inline-flex;align-items:center;height:70px;} .wsmenu>.wsmenu-list{justify-content:space-between;} .wsmenu>.wsmenu-list>li>.wsmegamenu{top:65px;} .wsmenu>.wsmenu-list>li:hover>a{background-color:white;} .wsmenu>.wsmenu-list>li{} .wsmenu>.wsmenu-list>li.category{width:70px;text-align:left;} .wsmenu>.wsmenu-list>li>a{padding:0px 5px;border-right:0px;font-size:18px;color:#222;} .wsmenu>.wsmenu-list>li>a.listMenu{position:relative;margin-right:0px;} .wsmenu>.wsmenu-list>li>a.listMenu.current, .wsmenu>.wsmenu-list>li>a.listMenu:hover{color:black;} .wsmenu>.wsmenu-list>li>a.listMenu:after{display: block;height: 2px; width: 0;transition: width .25s ease; margin: 0 auto 0; position: absolute; bottom: 15px; left: 0; right: 0; content: "";background-color:#004a99} .wsmenu>.wsmenu-list>li>a.listMenu.current:after, .wsmenu>.wsmenu-list>li>a.listMenu:hover:after{width:100%;z-index:1;} .wsmenu>.wsmenu-list>li>ul.sub-menu>li:hover>a{background-color:white;} .bs-allmenu { display: inline-block; vertical-align: middle; } .bs-allmenu .sect-bt { cursor: pointer; font-size: 0; line-height: 0; position: relative; z-index: 10; transition: margin .25s ease; width: 45px; height: 45px; } .bs-allmenu:hover .sect-bt { background: #004998; width: 45px; height: 45px; border-radius: 50%; } .bs-allmenu .sect-bt span, .bs-allmenu .sect-bt span:before, .bs-allmenu .sect-bt span:after { display: block; width: 21px; height: 2px; background: #111; position: absolute; left: 0;margin:0 auto;right: 0;} .bs-allmenu:hover .sect-bt span, .bs-allmenu:hover .sect-bt span:before, .bs-allmenu:hover .sect-bt span:after { background: #fff; margin: 0 auto; right: 0;} .bs-allmenu .sect-bt span { margin-top: 14px;} .bs-allmenu:hover .sect-bt span { margin-top: 14px;} .bs-allmenu .sect-bt span:before, .bs-allmenu .sect-bt span:after { content: "";} .bs-allmenu .sect-bt span:before { top: 7px;} .bs-allmenu .sect-bt span:after { top: 14px;} .cateMenu{padding:20px 30px 20px 50px;display:flex;} .cateMenu .category{width:150px;} .cateMenu .category h4{margin-bottom:10px;display:inline-flex;align-items:center;height:30px;font-size:18px;color:black;} .cateMenu .category h4 a{color:black;} .cateMenu .category ul{width:100%;} .cateMenu .category ul li{width:100%;} .cateMenu .category ul li a{line-height:28px;display:inline-block;font-size:14px;color:#333;} .cateMenu .category ul li a:hover{color:black;} .sideMenu .sm_head .smTitle{font-size:20px;font-weight:500;color:#333;} .cateMenu .brand{width:calc(100% - 180px);padding:0px;} .cateMenu .brand .head{margin-bottom:10px;width:100%;height:30px;display:flex;align-items:center;justify-content:flex-end;font-size:14px;color:#777;} .cateMenu .brand ul{border:1px solid #eee;padding:20px 20px;border-radius:10px;} /* END 상단 메뉴 1 */ .topSearch .search{position:relative;width:200px;border-bottom:2px solid #333;overflow:visible;} .topSearch .search form{width:100%;display:flex;align-items:center;} .topSearch .search form input[type='text']{width:165px;height:35px;padding:0px 5px;border:0px;font-size:14px;color:#333;} .topSearch .search form button{margin-left:5px;width:30px;text-align:center;font-size:22px;background-color:white;border:0px;} .topSearch .search .best_search{position:absolute;top:calc(100% - 1px);left:0px;width:270px;padding:10px 0px 0px 0px;display:none;z-index:2000;} .topSearch .search .best_search > div{width:100%;padding:15px 10px 10px 20px;border:1px solid #dddddd;background-color:white;} .topSearch .search .best_search h4{margin-bottom:10px;font-size:18px;} .topSearch .search .best_search ul{display:flex;align-items:center;flex-wrap:wrap;} .topSearch .search .best_search ul li{margin-right:15px;} .topSearch .search .best_search ul li a{display:inline-block;line-height:28px;font-size:14px;color:#777;} .topSearch .search:hover .best_search{display:block;} .topSearch .search .best_search ul li a:hover{color:black;} .mtopHead .topSearch{margin-left:auto;margin-right:0px;display:flex;align-items:center;} .mtopHead .topSearch > div.mSearch{margin-right:10px;} .mtopHead .topSearch > div.cart{margin-right:0px;} .mtopHead .topSearch .cart a i{font-size:28px;} .partner .mtopHead .topSearch{margin-left:10px;} .partner .mtopHead .mpt_title{margin-left:auto;font-size:20px;font-weight:bold;letter-spacing:-0.05em;} /*모바일 검색*/ .mSearch form{width:100%;display:flex;align-items:center;} .mSearch form input[type='text']{flex:1;height:35px;padding:0px 5px;border:0px;font-size:14px;color:#333;} .mSearch form button{margin-left:5px;margin-right:10px;width:30px;text-align:center;font-size:25px;background-color:white;border:0px;} .mSearch .best_search{position:absolute;top:calc(100% - 1px);right:1px;width:270px;padding:10px 0px 0px 0px;background-color:white;display:none;} .mSearch .best_search > div.seTag{width:100%;padding:15px 10px 10px 20px;border:1px solid #dddddd;background-color:white;} .mSearch .best_search > div.seTag h4{margin-bottom:10px;font-size:18px;} .mSearch .best_search > div.seTag ul{display:flex;align-items:center;flex-wrap:wrap;} .mSearch .best_search > div.seTag ul li{margin-right:15px;} .mSearch .best_search > div.seTag ul li a{display:inline-block;line-height:28px;font-size:14px;color:#777;} .mSearch.on .best_search{display:block;} .mSearch .best_search ul li a:hover{color:black;} .topSearch2 .cart{} .topSearch2 .cart a{display:inline-block;position:relative;padding-right:10px;} .topSearch2 .cart a i{font-size:28px;} .topSearch2 .cart a span.count{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0px;right:0px;width:20px;height:20px;background-color:#333;color:white;font-size:10px;border-radius:50%;} /* ####################### END상단메뉴 ######################## */ /* 하단메뉴 */ #footer{width:100%;display:block;background-color:#f8f8f8;} #footer .bt_menu{padding:10px 0px;width:100%;border-bottom:1px solid #dddddd;} #footer .bt_menu a{margin-right:20px;font-size: 15px; display: inline-block;line-height: 60px;height: 60px;color:#444;} #footer .bt_menu a.privacy{font-weight:bold;color:black;} #footer .bt_info{padding:30px 0px;border-bottom:1px solid #dddddd;} #footer .bt_info .container{display:flex;} #footer .bt_info .logo{margin-right:20px;} #footer .bt_info .logo img{width:100%;max-height:60px;} #footer .bt_info .info{flex:1;} #footer .bt_info .info .com_name{margin-bottom:10px;font-size:17px;color:#444;font-weight:500;} #footer .bt_info .info .com_info{font-size:14px;color:#777;line-height:1.8em;font-weight:400;} #footer .bt_info .info .com_info p br{display:none;} #footer .bt_info .info .com_info strong{margin-right:5px;font-weight:500;color:#333;} #footer .bt_info .info .com_info2 span{margin-right:0px;} #footer .bt_info .info .com_info2 strong{margin-right:10px;} #footer .bt_info .info .com_info2 span.vline{margin:0px 5px;color:#999;} #footer .bt_info .cs{width:200px;} #footer .bt_info .cs h4{margin-bottom:10px;font-size:17px;color:#444;font-weight:500;} #footer .bt_info .cs .cs_tel{margin-bottom:5px;font-size:24px;font-weight:bold;color:#222;} #footer .bt_info .cs .cs_info{font-size:15px;line-height:25px;color:#555;} #footer .copyright{padding:20px 0px;text-align:center;color:#777;font-size:13px;} .menuBrand{width:100%;padding:5px 10px;display:flex;} .menuBrand > div{width:calc(50% - 20px);margin:0px 10px;} .menuBrand > div > a > .head{padding-left:4px;margin-bottom:10px;font-size:15px;font-weight:bold;color:#222;} .menuBrand > div > a > .img{margin-bottom:15px; width:100%;height:200px;border-radius:10px;background:no-repeat center center ;background-size:cover;} .menuBrand > div > a > .text{font-size:13px;line-height:22px;color:#555;text-align:justify} .menuBrand .brandBox{display:block;} /**/ #headPadding{width:100%;height:40px;} #headPadding2{width:100%;height:200px;} /**/ .pCont{width:100%;} .bgTitle{width:100%;height:180px;display:flex;align-items:center;justify-content:center;background:url('/img/page/title_bg.jpg') no-repeat center center ;background-size:cover;} .bgTitle span{color:white;font-size:30px;font-weight:bold;text-shadow: 6px 2px 2px rgba(0,0,0,0.5); letter-spacing:0.03em;} .pCont.board .container{width:100%;max-width:1080px;} /*mobile menu bar*/ .topSearch .mSearch{display:none;} .coCont{width:100%;padding:30px 0px;min-height:300px;} .allMenuList{width:100%;padding:20px} .allMenuList > ul{width:100%;display:flex;justify-content:space-between;} .allMenuList > ul > li{width:14.28%;text-align:center;} .allMenuList > ul > li > a{display:inline-block;font-weight:bold;margin-bottom:5px;} .allMenuList > ul > li > ul{width:100%;} .allMenuList > ul > li > ul > li{text-align:center;} .allMenuList > ul > li > ul > li a{display:inline-block;line-height:30px;} #footer .bt_info .info .com_info.com_info2{display:flex;align-items:center;flex-wrap:wrap;} .item_list .it_info{padding-left:10px;} @media (max-width: 1180px) { .wsmenu>.wsmenu-list>li>a.listMenu{margin-right:20px;} } @media (max-width: 1080px) { .wsmenu>.wsmenu-list>li>a{font-size:16px;} .wsmenu>.wsmenu-list>li>a.listMenu{margin-right:10px;} } @media (max-width: 980px) { .topHead{display:none;} .topMenu{display:none;} #headPadding2{height:70px;} .mtopHead{display:flex;} #header .hideHeader{height:40px;} .topMenu .container{height:60px;justify-content:space-between;} .partner #header .hideHeader{display:none;} #sit_pvi{width:calc(100% - 420px);margin-right:20px;} #sit_pvi_thumb li{width:120px;margin-right:10px;} #sit_ov{width:400px;} .wsmenu{position:static;display:flex;align-items:center;width:auto;flex:1;padding:0px;} .wsmenu:after{display:none;} .wsmenu>.wsmenu-list{display:none !important;} .wsdownmenu-text{width:auto;position:absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);line-height:initial;text-indent:0px;} .wsdownmenu-text img{height:35px;} .wsdownmenu-animated-arrow{right:auto;position:relative;width:45px;height:50px;} .mb_box{margin-top:0px} .topMenu .container .topSearch{flex:initial;} /*search*/ .topSearch .search{display:none;} .topSearch .mSearch{padding-top:7px;display:block;margin-right:10px;} .topSearch .mSearch > .icon{font-size:30px;} .mSearch .best_search{} .topSearch2 .cart a i{font-size:35px;} .mSearch .best_search{} } @media (max-width: 890px) { } /*mobile footer*/ .mFooter, .mFooterPadding{display:none;} @media (max-width: 980px) { .mFooter, .mFooterPadding{display:block;} .mFooter{position:fixed;bottom:0px;left:0px;width:100%;height:60px;background-color:white;border-top:1px solid #ccc;box-shadow: 0 0 5px 2px rgba(0,0,0,.15);z-index:10000;} .mFooterPadding{width:100%;height:60px;background-color:white;} .mFooter ul{display:flex;align-items:center;} .mFooter ul li{position:relative;width:25%;} .mFooter ul li:after{position:absolute;top:50%;right:0px;display:block;content:"";width:1px;height:30px; background-color:#ddd;transform:translateY(-50%);} .mFooter ul li:last-child:after{display:none;} .mFooter ul li a{display:flex;align-items:center;justify-content:center;width:100%;height:60px;} .mFooter ul li a > div{width:100%;line-height:25px;text-align:center;color:#222;} .mFooter ul li a div.icon{font-size:20px;} .mFooter ul li a div.icon i{margin-right:0px;} .mFooter ul li a div.text{font-size:12px;} } @media (max-width: 780px) { .container{display:block;} .main_media .main_youtube{margin-bottom:30px;width:100%;} .main_media .main_insta{width:100%;} .main_cs .main_qna{width:100%;margin-bottom:30px;} .main_cs .main_as{width:100%;} #footer .bt_info .container{display:block;} #footer .bt_info .logo{margin-right:0px;margin-bottom:20px;width:100%;text-align:center;} #footer .bt_info .logo img{max-height:60px;} #footer .bt_info .info{margin-bottom:20px;text-align:center;} #footer .bt_info .cs{width:100%;text-align:center;} .main_as .text br{display:none;} .pg_shop_list .container{padding:0px;} #footer .bt_menu .container{padding-left:15px;padding-right:15px;} } @media (max-width: 650px) { #topBanner .swiper-slide > a{font-size:16px;letter-spacing:-0.05em;} body .mbskin{display:block;} body .mbskin .mbskin_box{margin:0px auto;} body .mbskin .banner{width:auto;} #sit_inf p, #sit_inf div, #sit_inf p span, #sit_inf p span {font-size:18px !important;} body.test #sit_inf p, body.test #sit_inf div, body.test #sit_inf p span, body.test #sit_inf p span {font-size:16px !important;} #pCont .mpCont {padding:30px 0px;display:block;} #pCont .mpCont .mpLeft ul{padding:0px 0px 15px 0px;border:0px;display:flex;align-items:center;justify-content:space-between;} #pCont .mpCont .mpLeft ul li{width:calc(25% - 3px);} #pCont .mpCont .mpLeft ul li.head{display:none;} #pCont .mpCont .mpLeft ul li a{display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;color:#333;border:1px solid #aaa;} #pCont .mpCont .mpLeft ul li a.on{background-color:#333;color:white;border-color:#333;} #pCont .mpCont .mpBody{padding-left:0px;} #pCont .register_form h1{margin-bottom:10px;font-size:18px;} #pCont #register_form ul li{padding:10px 0px;} #pCont #register_form ul li > label{max-width:100px;padding-left:10px;font-size:14px;} #pCont #register_form ul li > div input[type='text'], #pCont #register_form ul li > div input[type='password']{font-size:14px;} } @media (max-width: 540px) { .bgTitle{background-image:url('/img/page/mtitle_bg.jpg');} #footer .bt_info .info .com_info p br{display:block;} } @media (max-width: 450px) { .mtopHead .logo img{height:35px} .partner .mtopHead .mpt_title{font-size:18px;} .mtopHead{height:60px;} } @media (max-width: 400px) { #topBanner .swiper-slide > a{font-size:15px;} #insta_gallery li{width:50%;} } @media (max-width: 390px) { #footer .bt_info .info .com_info.com_info2 p{width:100%;} #footer .bt_info .info .com_info.com_info2 p .mobile_hidden{display:none;} } @media (max-width: 360px) { .mtopHead .logo img{height:30px} .partner .mtopHead .mpt_title{font-size:16px;} } /*****************************************/