#wrap-all{ } .inner3{width:63%;margin:0 auto} /*header부분*/ /* #header_menu{background: #fff;} #header{height:160px;box-sizing:border-box;width:100%; position: fixed; top:0; left: 50%; transform: translateX(-50%); background: #ffffff; z-index: 10;z-index: 300} #header_main{height:100px;border-bottom:1px solid #a0a0a0;box-sizing:border-box;background-color:#fff; position: relative; } #header_main ul { margin-top:64px;width:200px; display:inline-block; float:left;} #header_main ul li {width:100px;float:left;height:23px; line-height:23px;position: relative;} #header_main ul li:nth-child(1):after {height: 14px;width: 1px;background: #666;content: '';display: block; position: absolute;top: 50%;left: 76px;transform: translateY(-50%);} #header_main ul li a {color:#000;} #header_main ul li a:hover {color:#999; } #header_main ul li a img{} #header_main .logo{line-height:100px;float:left; text-align:center; position: absolute;left: 50%; transform: translateX(-50%);} #header_main .logo img{vertical-align:middle; height: 15px;} #header_main form.search{margin-top:43px;display:inline-block; float:right; width:170px;} #header_main form.search p{height:25px;position:relative;} #header_main form.search p a {position:absolute; top: 50%;right: 15px;} #header_main form.search p a img{} #header_main form.search #totalSearch{height:40px; width:170px; box-sizing:border-box;background: none; padding-left: 16px; border: 1px solid #666;outline: none;} */ /* 새로운header */ .open-btn{display: none;} #header{height: 101px !important;} .header { border-bottom:1px solid #EAEAEA;width:100%; position: fixed;z-index: 1000; background: #fff;} .header-inner { position:relative; margin:0 auto; width:1200px; height:100px;} .header-inner .logo { display:inline-block; margin-top:41px; } .header-inner .logo .logo_m{display:none;} .nav { position:absolute; top:0; left:0; right:0; z-index:3; transition: 0.7s ease;} .header strong {position: absolute;right: 0;top:50%;display: inline-block;z-index: 100;transform: translateY(-50%);} .header strong a {padding:7px 30px; background: #000;display: inline-block;border-radius: 20px;color:#fff} .header strong.main_academy {position: absolute;right: 0;top:50%;display: inline-block;z-index: 100;transform: translateY(-50%); right:-126px;} .header strong.main_academy a {padding:7px 30px; background: #444;display: inline-block;border-radius: 20px;color:#fff} .header strong.new_store {position: absolute;top:50%;display: inline-block;z-index: 100;transform: translateY(-50%); right:144px;} .header strong.new_store a {padding:7px 30px; background: #444;display: inline-block;border-radius: 20px;color:#fff} .nav:hover::before {content:''; display:block; position:absolute; top:101px; left: -200%; right: -200%; bottom:-360px; background-color:#fff; box-shadow:0px 16px 16px rgba(0, 0, 0, 0.25); z-index:2;} .nav.nav_interior:hover::before {content:''; display:none;} .nav button { display:none; position:absolute; top:17px; right:50px; -webkit-transform:translateY(0); transform:translateY(0); width:32px; height:32px; border-radius:0; background:rgba(0, 0, 0, 0); box-shadow:0 0 0 rgba(0, 0, 0, 0); z-index:3; } .nav.nav_interior .dep { position:absolute; top:37px; right:150px; width:34%; height:63px;} .nav .dep { position:absolute; top:37px; right:298px; height:63px;} .nav .dep > li { position:relative; float:left; display:inline-block; width:auto; text-align:left; z-index:2;padding:0 37px } .nav .dep > li:last-child{padding-right: 0;} .nav .dep > li:first-child {padding-left: 0;} .nav .dep > li > a { font-size:15px; line-height:27px; color:#413C39;font-weight:600;} .nav .dep > li:hover > a { color:#91724f; font-weight:bold; } .nav .dep > li:first-child .dep-2 { margin-left:0; border-left:0; } /* 이전 코딩 */ /* .nav.nav_interior .dep { position:absolute; top:37px; right:150px; width:34%; height:63px;} .nav .dep { position:absolute; top:37px; right:29px; width:55%; height:63px;} .nav .dep > li { position:relative; float:left; display:inline-block; width:auto; text-align:left; z-index:2;padding:0 37px } .nav .dep > li:first-child {padding-left: 0;} .nav .dep > li > a { font-size:15px; line-height:27px; color:#413C39;font-weight:600;} .nav .dep > li:hover > a { color:#91724f; font-weight:bold; } .nav .dep > li:first-child .dep-2 { margin-left:0; border-left:0; } */ .nav:hover .dep-2 { visibility:visible; opacity:1; transition:all 0.7s ease; } .nav .dep-2 { visibility:hidden; opacity:0; position:absolute; top:57px; padding:16px 10px 23px 0; width:calc(100% + 5px); height:170px; text-align:left; } .nav .dep-2 > li a { font-size:14px; line-height:30px; color:#666; font-weight:400;letter-spacing:-1px;} .nav .dep-2 li .two_line {line-height: 4px;} .nav .dep-3 > ul {position: absolute; top: 0;left: 0; width:100%} .nav .dep-2 > li a:hover { color:#91724f;} .menuBtn {position: absolute;top:330px ; z-index: 3;} .menuBtn li{float: left;width:33%;text-align: center; background-color: #666;padding:20px 0 ; color:#fff;} .menuBtn li a{font-size: 25px;display: inline-block; } /*header부분*/ /*메뉴부분*/ /* #header_menu ul li {height:40px; line-height:59px;width:200px;float:left; text-align:center;} #header_menu ul li a{font-size:15px; font-weight:900; padding:0 20px; color:#000; letter-spacing:1;font-family: 'Raleway', sans-serif;} #header_menu ul li:hover a{color:#666; transition:0.3s} #header_menu::after{width:100%; height: 60px; position: absolute; top: 100px;left: 0;background: #fff;content: ''; display: block; z-index: -1; } #header .menu_m{display: none;} */ /*메뉴부분*/ /* 배너부분 */ #main_visual{padding-top:0px} #visualM{display: none;} #visual{width: 100%; height: 645px; position: relative; margin-top: 130px;overflow: hidden;} #visual .swiper-container{display: none;} #mainRolling{position: absolute; left: 0; top: 0; width: 300%; height: 645px;} #mainRolling li{width: 33.333%; height: 645px; position: relative; float: left; background: #000; overflow: hidden;} #mainRolling li img{position: absolute; left: 50%; margin-left: -1000px;} #visual .mainRolling_Arr{} /* #visual .mainRolling_Arr .inner{width:1200px;margin:0 auto ; position: relative;} */ #visual .mainRolling_Arr > div{width: 40px; height: 70px; background: rgba(0,0,0,0.5); transition:0.2s ease-in-out;} #visual .mainRolling_Arr .prev{left: 0; position: absolute; top: 50%;transform: translateY(-50%);margin-left: 15%;opacity: 0.8;} #visual .mainRolling_Arr .prev:hover{background: rgba(255,255,255,0.3);} #visual .mainRolling_Arr .next{right: 0; position: absolute; top: 50%;transform: translateY(-50%);margin-right:15%;opacity: 0.8;} #visual .mainRolling_Arr .next:hover{background: rgba(255,255,255,0.3);} /* 배너부분 */ #wrap .middle_textbox{width:100%;background:#eee; height:45px; line-height:45px; text-align:center;} #wrap .middle_textbox p{color:#ba974c; font-size:15px;} #container.section1{background:#1d1f23;} #container .textbox h3{color:#dddddd;} #container .textbox strong #container .textbox p{color:#dddddd;} #container div.inner2{background-size: cover; background-position: 50% 50%;/*border-bottom:2px solid #6e6e6e; */box-sizing:border-box;} #container .section5{} /*notice*/ #franchise{ box-sizing:border-box; margin: 0px auto; padding:0 50px;background: #0c0c0c; z-index: 3; height: 305px;} #franchise h4{font-weight:500;font-size:18px;height:40px; line-height:40px; border-bottom:1px solid #ddd;} #franchise table{ padding:15px 10px 90px 0; background:#fff; position:relative;width:67%} #franchise table tr th{padding:10px 10px 10px 20px; text-align:left; font-weight:500; color:#000;font-weight: 600;} #franchise table tr #email{width:100px;} #franchise table tr #content{width:276px;} /* #franchise .table{background:#fff; position:relative;width:63%} */ #franchise a{text-align:center;color:white;left: 49%;transform:translate(38%, -148%);background:#181818; width:35.5%; line-height:50px; font-size:15px;height:50px; display:inline-block;} input[type="tell"] {border:1px solid #cdd3d4;} input[type="checkbox"]{} #toggle_contents .franchise {} /* 창업예상비용 */ /* #toggle_button, #toggle_contents { height:0; overflow:hidden; position:absolute; z-index: 2; } #toggle_button:checked + #toggle_contents { height:auto; border-top:0; } */ #notice_wrap .nocice_inner{padding-left: 36%; position: relative;} #notice_wrap .nocice_inner span{position: absolute;top: 50%; right: 5%; transform: translateY(-50%);border: 1px solid #868686; color:#868686;font-size: 23px;width:30px; height: 30px; line-height: 30px; text-align: center;} #notice_wrap{float: left;} #notice_wrap .notice_title{float: left;} #notice_wrap .notice_title h4{line-height: 70px;color:#fff} #notice_wrap .notice_rolling{ height:70px; overflow:hidden; background-color:#000; float: left;} #notice_wrap .notice_rolling .rolling{position:relative; width:100%; height:auto;padding-left: 40px;} #notice_wrap .notice_rolling .rolling li{width:100%; height:70px; line-height:70px} #notice_wrap .notice_rolling .rolling li a{color:#fff} #franchiseN {float: left;} #franchiseN .franchiseN_text {height: auto; background-color: #0c0c0c; position: relative;} #franchiseN .franchiseN_text p {line-height: 70px;height: 70px;padding-left: 50px;} #franchiseN .franchiseN_text p a{color:#fff} #franchiseN .franchiseN_text p span{margin-left: 48%;border: 1px solid #868686; cursor: pointer; color:#fff; width:30px; height: 30px; position: relative;display: inline-block;vertical-align: middle;} #franchiseN .franchiseN_text p span img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .show{display: block;} .hide{display: none;} /*notice*/ /*section1*/ #container .section1{color:white;position:relative;height:260px;background-image:url('/images/main/section1_bg.png'); } #container .section1 .textbox{position:absolute; top:50%; left:50%;transform:translate(-50%,-50%); } #container .section1 .textbox .sec1_txt {margin-left: 700px;} #container .section1 .textbox .sec1_txt h3{margin:10px 0 15px 0;font-family: 'Noto Sans KR';font-size: 25px;font-weight: 400;color:#fff} #container .section1 .textbox .sec1_txt h3 strong{color:#fff;font-family: 'Noto Sans KR';} #container .section1 .textbox .sec1_txt p{font-size: 16px;font-weight: 300;} #container .section1 .textbox .sec1_txt a{width: 182px;height: 37px;color: #fff;font-size: 16px;display: block;border: 1px solid #fff;;text-align: center;line-height: 37px;margin-top:24px;} #container .section1 .textbox .sec1_txt a:hover {background: #fff;color:#000;transition: 0.3s;} /*section1*/ /*section2*/ #container .section2{height:880px;background-color: #e8e8e8;width:100%} #container .section2 .textbox{padding:100px 0 50px 0;text-align:center;} #container .section2 .textbox h3{padding-top:10px;margin-bottom:30px;color:#c2c2c2;font-weight:400; font-family: 'Raleway', sans-serif;font-weight: 200;color:#000; font-size: 50px;} #container .section2 .textbox h3 strong{color:#000;font-family: 'Raleway', sans-serif;font-weight: 500;} #container .section2 .textbox .sec2_line{background:#000; width:100px; height:1px;margin:0 auto 30px;} #container .section2 .textbox p {color:#555;font-size:18px;font-weight: 600;} #container .section2 .textbox p strong {color:#000} /* section2 시그니처 슬라이더 베이커리메뉴 */ #container .section2 .img_rolling{} #container .section2 .img_rolling .rolling-wrap{} #container .section2 .img_rolling .rolling-wrap .swiper-slide {background: none;} .rollingImg-wrap{overflow: hidden;height: 402px; } #container .section2 .img_rolling .rolling-wrap .swiper-slide img:hover{transform: scale(1.1);transition: 0.6s;} #container .section2 .img_rolling .rolling-wrap .swiper-slide p{color:#000 ;font-weight: 600;padding-top: 30px;} #container .section2 ul li p{position: absolute; top: 45%;left: 50%; transform: translate(-50%, -50%);color:#fff; font-size:16px;font-weight: 700;; z-index: 100;} .main_bakerymenu {} .main_bakerymenu .textbox{text-align: center;padding: 100px 0 50px;} .main_bakerymenu .textbox h3{padding-bottom: 20px;font-size: 30px !important; font-weight: 600;color:#000 !important} .main_bakerymenu .textbox p{font-size: 18px;color: #000;} .main_bakerymenu ul {} .main_bakerymenu ul li {float: left; text-align: center; transition: 0.7s;} .main_bakerymenu ul li img {} .main_bakerymenu ul li p { color:#000; font-weight: 600; font-size: 14px;padding-bottom: 5px;} .main_bakerymenu ul li span {font-size: 12px;} .more_btn{padding: 100px 0 50px; margin: 0 auto;text-align: center; } .more_btn a:hover img {box-shadow: 3px 3px 5px #dcdcdc ;transition: 0.4s;} /*section2 시그니처 슬라이더 베이커리메뉴 마침*/ /*section3*/ #container .section3{height:auto;padding:100px 0;/*background-image:url('/images/main/section3_background.png');*/} #container .section3 .line_1{box-sizing:border-box; border:2px solid #a1957e; width:100%; margin:auto; height:100%;padding:0.2%;} #container .section3 .line_2{box-sizing:border-box; border:1px solid #a1957e; width:100%; margin:auto; height:100%;} #container .section3 .textbox{text-align:center;} #container .section3 .textbox h3{ font-weight:500;color:#52340e; font-size:50px;padding-top:10px;color:#000; font-family: 'Raleway', sans-serif;font-weight: 200;margin-bottom: 30px;} #container .section3 .textbox .sec3_line{background:#000; width:100px; height:1px;margin:10px auto 30px;} #container .section3 .textbox .sec3_p{color:#555;font-size:18px;font-weight: 600;} #container .section3 .textbox .sec3_p strong{color:#000} #container .section3 .textbox h3>strong{ font-family: 'Raleway', sans-serif;color:#000;font-weight: 500;} #container .section3 .textbox a{padding:5px 10px;/* border:1px solid #ac8c46; */background:#000; color:#fff; margin-top:15px; display:inline-block;} #container .section3 .inner{max-width:100%; overflow:hidden;position:relative; width:1250px;} #container .section3 .inner>#slide.cf{margin-left:25px;} #container #slide{margin-top:40px;width:2800px; margin-left:25px;} #container #slide li{width:300px;float:left; text-align:center;padding-right: 5px;} #container #slide li span{display:block; font-size:17px; color:#000; margin-bottom:5px;padding-top: 15px;font-weight: 600;} #container #slide li p{color:#000; font-weight:500;} #container #slide li img{width:90%} #container .left{cursor:pointer;position:absolute; top:50%; transform:translateY(-50%);} #container .left i{font-size: 40px;} #container .right{cursor:pointer;position:absolute; top:50%; right:-12px; transform:translateY(-50%);} #container .right i{font-size: 40px;} /*section3*/ /*section4*/ #container.section4{background:#090f19;} #container .section4{position:relative;height:auto;} #container .section4 .textbox{position:absolute; top:50%; right:0;transform:translate(-50%,-50%); width:600px; padding-left:50px;box-sizing:border-box; } #container .section4 .textbox h3{margin:10px 0 15px 0;font-family: 'Noto San KR';font-weight: 400;color:#fff;font-size: 25px;} #container .section4 .textbox h3 strong{font-family: 'Noto Sans KR';} #container .section4 .textbox p {font-weight: 300;font-size: 15px;color:#ddd;} .pc_img {display: block;width:100%} .m_img {display: none ;} /*section4*/ /*section5*/ #container .section5{position:relative;height:700px;width:100%; background: url('/images/main/sec5_img3.png') center center fixed no-repeat #000;} #container .section5>img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} #container .section5 .textbox{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} #container .section5 .textbox div{width:400px; float:left; text-align:center; height:150px; } #container .section5 .textbox div.e_text{position:relative;line-height:150px;} #container .section5 .textbox div.e_text1::after{content:"";position:absolute; width:100px; height:2px; border-top:5px dotted white; top:50%; right:0; transform:translateY(-50%); opacity:0.9;} #container .section5 .textbox div.e_text2::before{content:"";position:absolute; width:100px; height:2px; border-top:5px dotted white; top:50%; left:0; transform:translateY(-50%); opacity:0.9;} #container .section5 .textbox div.centertext{padding:60px 17px; box-sizing:border-box; background: rgba(0, 0, 0, 0.9);height: auto;width:600px} #container .section5 .textbox div.centertext h3{ color:#fff; font-size:40px;font-family: 'Raleway', sans-serif;line-height: 1;} #container .section5 .textbox div.centertext span{ color:#fff; font-weight:400; font-size:40px; } #container .section5 .textbox div.centertext p{ color:#adadad;font-size:16px;padding:15px 0 25px; font-weight: 200;} #container .section5 .textbox div.centertext a{display:inline-block; padding:5px 10px; border:1px solid #adadad; box-sizing:border-box; color:#adadad;} /*section5*/ /* 메인_인테리어 */ .main_interior {position: relative; height: auto; padding: 100px 0 150px;} .main_interior.store {padding-top: 100px;padding-bottom:50px;} .main_interior .leftBox{float: left;} .main_interior .leftBox img{} .main_interior .rightBox {float: right; width:57%; height: 659px; background: #b9a38a;} .main_interior .rightBox .textbox {padding:100px} .main_interior .rightBox .textbox h3 {color:#000 !important; font-weight: 600; font-size: 30px !important; padding-bottom: 25px;} .main_interior .rightBox .textbox p {padding-bottom: 40px; color:#000} .main_interior .rightBox .textbox span {display: inline-block; font-size: 15px;} .main_interior .rightBox .textbox span a {display: inline-block; padding:5px 14px;background: #fff; border-radius: 20px;} /* 메인_인테리어 롤링 */ .main_interior.new .interior_txt h3 {font-weight: 600; font-size: 24px !important; padding-bottom: 20px; display: inline-block; float: left;color: #000;} .main_interior.new .interior_txt strong {display: inline-block; float: right;} .main_interior.new .interior_txt strong a {font-size: 20px;} .main_interior.new .interior_txt strong span {font-size: 20px; color: #ed2040; padding-left: 5px; font-weight: 600;} .img_rolling img { border-radius: 10px; width: 100%;} .img_rolling p {font-size: 18px; font-weight: 600; padding-top: 10px; color: #000; } .rollingImg-wrap2 {overflow: hidden; } /* 화살표 */ .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display: none;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-image:none} .swiper-button-prev, .swiper-rtl .swiper-button-next {left: 10px !important;top: 45% !important;} .swiper-button-next, .swiper-rtl .swiper-button-prev {right: 10px !important;top: 45% !important;} /* 메인_인테리어 */ /* 메인_포트폴리오 카테고리 */ .main_interior_cg {padding:0px 0 100px} .main_interior_cg .interior_txt h3 {color: #000;font-weight: 600; font-size: 24px !important; padding-bottom: 20px;} .main_interior_cg .interior_cg_list {height: 248px;display: flex; justify-content: space-between} .main_interior_cg .interior_cg_list .interior_cg_item {width: 23.5%; float: left;background: #fff; border:1px solid #eee;border-radius:10px; ;} .main_interior_cg .interior_cg_list .interior_cg_item:nth-child(5){margin-right: 0;} .main_interior_cg .interior_cg_list .interior_cg_item a{} .main_interior_cg .interior_cg_list .interior_cg_item a .img_allwrap {overflow: hidden;width: 100%; height:180px;border-radius: 10px 10px 0 0;} .main_interior_cg .interior_cg_list .interior_cg_item a .img_wrap{overflow: hidden;width: 100%; height:180px;border-radius: 10px 10px 0 0;transition:all .2s;background-repeat: no-repeat; background-size: cover;} .main_interior_cg .interior_cg_list .interior_cg_item a .img_wrap:hover {transform: scale(1.1);} .main_interior_cg .interior_cg_list .interior_cg_item:nth-child(1) a .img_wrap {background-image:url(/images/sub/bsi_sum.jpg);} .main_interior_cg .interior_cg_list .interior_cg_item:nth-child(2) a .img_wrap {background-image: url(/images/sub/obispo_sum.jpg);} .main_interior_cg .interior_cg_list .interior_cg_item:nth-child(3) a .img_wrap {background-image: url(/images/sub/gs3d_sum.jpg);} .main_interior_cg .interior_cg_list .interior_cg_item:nth-child(4) a .img_wrap {background-image: url(/images/sub/bsgj_sum.jpg);} .main_interior_cg .interior_cg_list .interior_cg_item:nth-child(5) a .img_wrap {background-image: url(/images/main/interior_cg_sum100.png);} .main_interior_cg .interior_cg_list .interior_cg_item a p {padding:20px 0;text-align: center;font-size: 18px;color: #000; font-weight: 600;} /* 메인_포트폴리오 카테고리 */ /* 메인_인스타그램 */ #instafeed {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 100px;} #instafeed a {width: 23.5%; padding-top: 23.5%; position: relative; margin-bottom: 20px; overflow: hidden;} #instafeed a:nth-last-child(-n+4) {margin-bottom: 0;} #instafeed a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} /*footer*/ #footer {} #footer .footertextbox{background:#181818; padding:50px 0;color:#666; } #footer .footertextbox li{padding-bottom:5px;font-size: 12px;} #footer .footertextbox h4{font-size: 20px;font-weight: 600;color:#fff ;padding-bottom: 20px;} #footer .footertextbox .ft-wrap{} #footer .footertextbox .ft-wrap .address{float: left;padding-right: 122px;} #footer .footertextbox .ft-wrap .ft_num {float: left;width:160px; color: #ddd; font-weight: 700;} #footer .footertextbox .ft-wrap .ft_num span {display: inline-block;width:60px;font-size: 12px;} #footer .footertextbox .ft-wrap .ft_menu {float: right;color: #666;} #footer .footertextbox .ft-wrap .ft_menu a{color:#666;font-size: 12px;} #footer .footertextbox p {color:#666;font-size: 12px;} /*footer*/ /* 퀵메뉴 */ #top{ position: fixed; bottom:0px; right: 20px ;} #top a{display:inline-block;margin:0 auto; vertical-align: middle;line-height: 60px; font-size: 15px;background: #000; width:60px ; height: 60px;} #rightQuickArea{position:absolute;text-align:left;padding:0;z-index:30;} .call_num {background: #4d4d4d; padding:20px 0 ;text-align: center;border-radius: 8px 0 0 8px; } .call_num span {color:#fff; padding-top: 5px;display: block;font-size: 16px;} /* 퀵메뉴 */ /* main-slider부분 배인배너롤링*/ /* 모바일 퀵메뉴 탑 */ #container .quick_m_top{display: none;} #pop{right: 351px; position: fixed; top: 101px;width:480px;background: #fff;b;border: 2px solid #000;} #pop .pop_inner {width:100%;padding: 0 30px; box-sizing: border-box; } #pop .pop_inner li{position: relative; width:100%; padding:20px 0 } #pop .pop_inner li img{position: absolute; right: 0px;top: 50%; transform: translateY(-50%);} #pop .pop_inner h4 {font-size: 20px; color: #000;} #pop .pop_inner h4 span {font-size: 20px; display: inline-block;} #pop .pop_inner h4 strong {padding-left: 10px ;display: inline-block;} #pop .pop_inner li p {width:270px; margin-left: 34px; padding: 5px 0;line-height: 1.2;} #pop .pop_inner li strong.num {font-size: 22px; font-weight: 600;color: #000;padding-left:34px;display: block; } #pop .pop_inner li em {margin-left: 34px;display: inline-block;background: #91724f; padding:5px; padding: 0px 6px 4px; border-radius: 2px; color: #fff;margin-top:5px} #pop_bt{right: 202px; position: fixed;top: 120px; ;cursor: pointer;} #pop_bt img{width:100%} #pop .pop_title {width: 100%; background: #000; position: relative; ;} #pop .pop_title h3 {text-align: center; color:#fff; padding: 15px 0;font-weight: 500; font-size: 20px; } #close{ cursor:pointer; font-weight:bold;text-align: right;} #close img{position: absolute; top: 50%;right: 34px; transform: translateY(-50%); width:20px} /* 스와이퍼 배너 */ .top-banner .swiper-pagination-bullet-active{background: rgba(255, 255, 255, 0) !important; border: 2px solid #fff;padding: 0 !important;} .top-banner .swiper-pagination-bullet{ background: #fff ;padding: 2px;opacity: 1;} .swiper-button-next, .swiper-button-prev { color:#fff !important; } /* 배너 페이지네이션 */ #visual .visual-controller {position: absolute;bottom: 20px;width: 100%;text-align: center; z-index: 1;} /* .visual .visual-controller + .visual-list {padding-bottom: 240px;} */ #visual .visual-controller a {width: 8px;height: 8px;display: inline-block;text-indent: -999em;vertical-align: middle;border: 1px solid #ccc;border-radius:15px;background-color: #ccc;margin-left: 5px;} #visual .visual-controller a.active {background-color:#000; border:1px solid #fff } #visual .visual-controller [class*="btn-"] { color: #fff;border: 1px solid #ccc;line-height: 20px;padding: 2px;display: none;} /* 스와이퍼 배너 */ .ftBtn_m{display: none;} /* -------------------------모바일 사이즈---------------------------------------- */ @media screen and (max-width: 750px) { html{overflow-x: hidden;} .inner {} .inner3{width: 90% !important;;margin:0 auto} .textbox span{font-size:12px;} .textbox p{font-size:12px;} .textbox p br{display:none;} /*header부분*/ #header{height:0px !important; position:fixed;width:100%; background:white;z-index: 1000; top: 0;} /* #header_main{height:70px;} #header_main ul {display:none;} #header_main .logo{height:70px; line-height:70px;width:100%;} #header_main .logo img{} #header_main form.search{display:none;} #header_menu::after {height: 10px;} */ /* **** 새로운 header */ .nav {display: none;} .header{width:100%} .header-inner{width:100%; height: 65px;} .header .logo{position: absolute; margin:0; top:50%; left:50%; transform: translate(-50%,-50%);} .header strong {right: 2%} .header strong a {padding: 4px 15px } .open-btn{display:block;position: absolute; left: 5%; top:50%; transform: translateY(-50%);} #leftNavBox{display:block;} .header .header-inner ul.member{display:none;} /*.tabs li {width:33.3333%;}*/ #leftNavBox{width: 100%; height: 100%; background: #fff; position: fixed; left: 0; top: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 101;-webkit-transform: translateZ(0)} #leftNav{width: 100%; padding: 70px 5% 0; box-sizing: border-box; position: relative; z-index: 102;} #header .left-nav-logo{display: block; width: 180px; position: absolute; left: 5%; top: 24px;} #header .left-nav-logo img{width: 100%;} #leftNav .left-nav-close{display: block; width: 21px; background: #fff; position: absolute; right: 6%; top: 22px;} #leftNav .left-nav-close img{width: 100%;} #leftNav a img{margin-bottom:10px;width:70%;} #leftNav .login-wrap{width: 100%; background: #f6f6f6; position: relative;} #leftNav .login-wrap .login-box{} #leftNav .login-wrap .login-box li{float: left; width: 50%; box-sizing:border-box;} #leftNav .login-wrap .login-box li a{display: block; width: 100%; height: 50px; font-size: 14px; text-align: center; line-height: 50px; text-indent: 40px;} #leftNav .login-wrap .login-box li.sign-in{} #leftNav .login-wrap .login-box li.sign-in:after{content: ""; clear: both; display: block; height: 20px; width: 1px; background: #ddd; position: absolute; left: 50%; top: 50%; margin-left: -0.5px; margin-top: -10px;} #leftNav .login-wrap .login-box li.sign-in a{background: url("/images/common/sign_in.png") no-repeat 20% 50%;} #leftNav .login-wrap .login-box li.login{} #leftNav .login-wrap .login-box li.login a{background: url("/images/common/login.png") no-repeat 20% 50%;} #leftNav .login-wrap .member-box{} #leftNav .login-wrap .member-box li{float: left;} #leftNav .login-wrap .member-box li a{display: block; width: 100%; height: 50px; text-align: center; line-height: 50px; font-size: 14px;font-weight:600;} #leftNav .login-wrap .member-box li.login-on{width: 65%;} #leftNav .login-wrap .member-box li.login-on:after{content: ""; clear: both; display: block; height: 20px; width: 1px; background: #ddd; position: absolute; left: 65%; top: 50%; margin-left: -0.5px; margin-top: -10px;} #leftNav .login-wrap .member-box li.login-on a{background: url('/images/common/sign_in.png') 6.5% 50% no-repeat; text-indent: 30px;} #leftNav .login-wrap .member-box li.login-on a strong{color: #4b5e6c; font-weight: 600;} #leftNav .login-wrap .member-box li.logout{width: 35%;} #leftNav .login-wrap .member-box li.logout a{} #leftNav .left-menu{margin-top: 20px;} #leftNav .left-menu .lm1{} #leftNav .left-menu .lm1 > li{} #leftNav .left-menu .lm1 > li h2{padding-bottom: 2px;font-size: 16px; color:#b09b71; border-left: 3px solid #b09b71; text-indent: 10px; line-height: 1.2;} #leftNav .left-menu .lm1 > li .lm2{margin: 14px 0 20px; border: 1px solid #ddd; border-bottom: 0;} #leftNav .left-menu .lm1 > li .lm2 li{float: left; width: 50%; padding: 10px 0; border-bottom: 1px solid #ddd; text-indent: 10px; box-sizing:border-box;} #leftNav .left-menu .lm1 > li .lm2 li:nth-of-type(2n){border-left: 1px solid #ddd;} #leftNav .left-menu .lm1 > li:nth-of-type(6) .lm2 li:last-of-type, #leftNav .left-menu .lm1 > li:nth-of-type(1) .lm2 li:last-of-type{width: 100%;} #leftNav .left-menu .lm1 > li:nth-of-type(6) .lm2 li:last-of-type, #leftNav .left-menu .lm1 > li:nth-of-type(7) .lm2 li:last-of-type{width: 100%;} #leftNav .left-menu .lm1 > li .lm2 li a{display: block; width: 100%; font-size: 14px;} /* 새로운 헤더 */ /*header부분*/ /*메뉴부분*/ /* #header_menu ul{position:relative;display: none;} #header_menu ul li {box-sizing:border-box;height:30px;line-height:30px;background:#fff;width:33.33%;float:left; text-align:center; border-right:0.5px solid #dcdcdc; border-bottom:0.5px solid #dcdcdc;} #header_menu ul li a{color:#333;font-size:13px;padding:10px;} #header_main .logo img{height: 14px;} #header .menu_m{display: block;} #header .menu_m .menu_m_slide a{font-size: 13px; font-weight: 900; } */ /*메뉴부분*/ #wrap .middle_textbox{height:35px; line-height:12px; text-align:center;} #wrap .middle_textbox p{width:70%; font-size:12px;padding:8px 0;} /* 롤링배너-모바일 */ #main_visual{padding-top:66px} #visual{display: none;} #visualM{display: block;position: relative; padding-top:110px;width: 100%; height: 400px; height: 100%; overflow: hidden;} #visualM .swiper-container { width: 100%; height: 100%; } #mainRolling{} #mainRolling > div{} #mainRolling > div > img{width: 100%;} #visualM .mainRolling_Arr{position: absolute; top: 50%; width: 100% ;margin-top: -30px;} #visualM .mainRolling_Arr > li{width: 25px; height: 60px; background: rgba(0,0,0,0.5); transition:0.2s ease-in-out; } #visualM .mainRolling_Arr > li img{width: 100%; margin-top: 8px;} #visualM .mainRolling_Arr .prev{float: left;} #visualM .mainRolling_Arr .prev:hover{background: rgba(255,255,255,0.3);} #visualM .mainRolling_Arr .next{float: right;} #visualM .mainRolling_Arr .next:hover{background: rgba(255,255,255,0.3);} #visualM .swiper-container{width: 100%; height: 100%; margin-left: auto; margin-right: auto; margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1;} #visualM .swiper-slide {text-align: center; font-size: 18px; background: #fff; 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;} #visualM .swiper-slide a img{display: block;} /* 롤링배너-모바일 */ /* notice 공지사항 */ #notice_wrap {width:100% !important} #notice_wrap .nocice_inner{position: relative;padding-left: 0;} #notice_wrap .nocice_inner span{position: absolute;top: 50%; right: 5%; transform: translateY(-50%);border: 1px solid #868686; vertical-align: middle; box-sizing: border-box;} #notice_wrap{float: left;} #notice_wrap .notice_title{float: left;} #notice_wrap .notice_title h4{padding-left: 20px;} #notice_wrap .notice_rolling{ height:70px; overflow:hidden; background-color:#000; float: left;} #notice_wrap .notice_rolling .rolling{position:relative; width:100%; height:auto;padding-left: 25px;} #notice_wrap .notice_rolling .rolling li{width:100%; height:70px; line-height:70px} #notice_wrap .notice_rolling .rolling li a{color:#fff} #franchiseN {display: none;} #franchiseN .franchiseN_text {height: auto; background-color: #0c0c0c;} #franchiseN .franchiseN_text p {line-height: 70px;height: 70px;padding-left: 50px;} #franchiseN .franchiseN_text p a{color:#fff} #franchiseN .franchiseN_text p span{margin-left: 445px;border: 1px solid #fff; padding:0px 7px; cursor: pointer; color:#fff} /* notice 공지사항 */ #section0 {display: none;} #container.section1{background:#1d1f23;} #container .textbox h3{color:#dddddd;} #container .textbox strong #container .textbox p{color:#dddddd;} #container div.inner2{background-size: cover; background-position: 50% 50%;/*border-bottom:2px solid #6e6e6e;*/ box-sizing:border-box;} #container .section2{height:100%;background-image:url('/images/main/sec2_bg.jpg');} #notice_box > div{width:100%;} #notice_box > div.notice{margin-right:0; margin-bottom:0; } #notice_box > div h4{height:30px; line-height:30px;} #notice_box > div h4 a{ float:right; margin-right:10px; font-size:12px;} #notice_box > div.notice ul li { padding:5px 5px 5px 10px;} #notice_box > div.notice ul li a{float:left;font-size:12px;width:75%;} #notice_box > div.notice ul li span{float:left; width:24%; font-size:12px;} #notice_box > div.franchise table tr th{padding:2px 2px 2px 5px;font-size:12px;} #notice_box > div.franchise .table{position:relative;} #notice_box > div.franchise a{right:10px; width:100%; line-height:40px; font-size:15px;height:40px;position:sticky;margin-top: 30px;} input[type="text"] {width:60%; padding:0;} input[type="tell"] {width:15%; border:1px solid #cdd3d4;} input#email{width:25%; padding:0;} /*section1*/ #container .section1{height:150px;background-image:url('/images/main/section1_bg.png'); } #container .section1 .textbox .sec1_txt span{color:#bbb;font-size:12px;} #container .section1 .textbox .sec1_txt h3{letter-spacing:-1px; margin: 3px 0; font-weight:bold;font-size: 16px;padding-bottom: 10px;} #container .section1 .textbox .sec1_txt p{letter-spacing:-1px;font-size:12px;} #container .section1 .textbox .sec1_txt {margin-left: 0px;text-align: center;} #container .section1 .textbox .sec1_txt a{width: 182px;height: 25px;font-size: 12px;;text-align: center;line-height: 25px;margin-top:0px;margin: 10px auto;} /*section1*/ /*section2*/ #container .section2{height:auto;background-color: #e8e8e8;} #container .section2 .textbox{padding:80px 0 50px 0;text-align:center;} #container .section2 .textbox h3{padding-top:5px;margin-bottom:10px;color:#c2c2c2;font-weight:400; font-family: 'Raleway', sans-serif;font-weight: 100;color:#000; font-size: 25px;padding:0 4%} #container .section2 .textbox h3 strong{color:#000;font-family: 'Raleway', sans-serif;} #container .section2 .textbox .sec2_line{background:#000; width:100px; height:1px;margin:0 auto 20px;} #container .section2 .textbox p {color:#555;font-size:16px;} #container .section2 .img_rolling{width:90%} #container .section2 .img_rolling .rolling-wrap{} #container .section2 .img_rolling .rolling-wrap .swiper-slide {background: none;width:45%} #container .section2 .img_rolling .rolling-wrap .swiper-slide img{width:100%} #container .section2 .img_rolling .rolling-wrap .swiper-slide p{padding-bottom: 80px;} #container .section2 .img_rolling .rolling-wrap .swiper-slide {background: none;} .rollingImg-wrap{overflow: hidden;height: auto; } #container .section2 .img_rolling .rolling-wrap .swiper-slide img:hover{transform: scale(1.0);transition: 0.6s;} /*section2*/ /* section2 베이커리메뉴 */ .main_bakerymenu.inner{width:90%; margin: 0 auto;} .main_bakerymenu .textbox{padding: 75px 0 0px;} .main_bakerymenu .textbox h3{font-size: 25px !important; padding-bottom: 15px;} .main_bakerymenu .textbox p{font-size: 15px;color: #000;} .main_bakerymenu ul li {width:50% !important} .main_bakerymenu ul li:last-child {display: block !important;} .main_bakerymenu ul li img {width:100%} .main_bakerymenu ul li p { color:#000; font-weight: 600; font-size: 14px;padding-bottom: 5px;} .main_bakerymenu ul li span {font-size: 12px;} .more_btn{padding: 75px 0 38px; margin: 0 auto;text-align: center; } .more_btn a:hover img {box-shadow: 3px 3px 5px #dcdcdc ;transition: 0.4s;} .main_bakerymenu ul.main_coffee li {} .main_bakerymenu ul.main_coffee li img{width:90%} .main_bakerymenu ul.main_coffee li:nth-child(1),.main_bakerymenu ul.main_coffee li:nth-child(2){padding-top:25px} /*section2 베이커리메뉴 마침*/ /*section3*/ #container .section3{width:100%;height:auto;padding: 50px 2% 50px;overflow:hidden;} #container .section3 .line_1{padding:0.5%;} #container .section3 .textbox{width:100%; margin-top:20px;text-align:center;} #container .section3 .textbox img{width:20px;} #container .section3 .textbox h3{font-size:25px;padding:0;margin-bottom: 10px;} #container .section3 .textbox .sec3_p{font-size:16px;padding-bottom: 10px;color:#555} #container .section3 .textbox strong{color:#ac8c46;} #container .section3 .textbox a{padding:2px 5px;margin-top:5px;font-size:12px;} #container .section3 .inner{width:100%;overflow:hidden !important;position:relative;} #container #slide{margin-top:20px;width:100%;height:360px;overflow:hidden;} #container #slide li{width:100%;float:none;transform:translateX(43%);margin:24px 0 40px -50%;} #container #slide li span{display:block; font-size:17px; color:#000; margin-bottom:5px;} #container #slide li p{color:#777; font-weight:600; font-size: 14px;} #container #slide li img{width:259px !important;} #container .left{left:0;transform:translateY(-50%);top:55%;} #container .left img{width:20px;} #container .right img{width:20px;transform:translateY(-94%);} #container .right{right:0;top:55%;} #container .section3 .textbox .sec3_line{margin: 10px auto 20px;} /*section3*/ /*section4*/ #container .section4{width:100%;height: auto;} #container .section4 .textbox{} #container .section4 .textbox h3{} #container .section4 .textbox h3 strong{color:#fff} #container .section4 .textbox p{font-size: 12px;} .m_img{display: block; width:100%} .m_img.m_interior_logo{display: block; width:93%} .pc_img{display: none; width:100%} /*section4*/ /*section5*/ #container .section5{position:relative;height:700px;width:100%; background: url('/images/main/sec5_img3.png') center center no-repeat #000; } #container .section5{height:400px;} #container .section5>img{width:200px;} #container .section5 .textbox{} #container .section5 .textbox div{width:100%; float:none;height:150px; } #container .section5 .textbox div.e_text{display:none;} #container .section5 .textbox div.centertext a{display:inline-block;font-size:12px;} #container .section5 .textbox div.centertext img{width:100px;} #container .section5 .textbox div.centertext{padding:45px 17px; box-sizing:border-box; background: rgba(0, 0, 0, 0.9);height: auto;width:230px} #container .section5 .textbox div.centertext h3{ color:#fff; font-size:30px;font-family: 'Raleway', sans-serif;line-height: 1.2;} #container .section5 .textbox div.centertext span{ color:#fff; font-weight:400; font-size:30px; } #container .section5 .textbox div.centertext p{ color:#adadad;font-size:15px;padding:10px 0 20px; font-weight: 400;} #container .section5 .textbox div.centertext a{display:inline-block; padding:5px 10px; border:1px solid #adadad; box-sizing:border-box; color:#adadad;} /*section5*/ /* 메인_인테리어 */ .main_interior {position: relative; height: auto; padding: 30px 0 50px; margin:75px 0 0px} .main_interior.store {padding: 75px 0 20px; margin:75px 0 0px} .main_interior .leftBox{float:none;} .main_interior .leftBox img{height:100%} .main_interior .rightBox {float: none; width:auto; background: rgba(0, 0, 0, 0.7);position: absolute; top: 50%;left: 50%; height: auto; transform: translate(-50%,-50%); } .main_interior .rightBox .textbox {padding:50px 20px;text-align: center;} .main_interior .rightBox .textbox h3 {color:#fff !important; font-size: 25px !important; } .main_interior .rightBox .textbox p {padding-bottom: 40px; color:#fff} .main_interior .rightBox .textbox span {display: inline-block; font-size: 15px;} .main_interior .rightBox .textbox span a {display: inline-block; padding:5px 14px;background: #fff; border-radius: 20px; font-weight: 600;} /* 메인_인테리어 롤링*/ .main_interior.new .interior_txt h3 {font-weight: 600; font-size: 20px !important; padding-bottom: 20px; display: inline-block; float: left;} .main_interior.new .interior_txt strong {display: inline-block; float: right;} .main_interior.new .interior_txt strong a {font-size: 16px;} .main_interior.new .interior_txt strong span {font-size: 20px; color: #05f; padding-left: 5px; font-weight: 600;} .main_interior.new .img_rolling p {font-size: 14px;} /* 화살표 */ .main_interior .swiper-button-prev, .swiper-rtl .swiper-button-next,.main_interior .swiper-button-next, .swiper-container-rtl .swiper-button-prev {width: 35px !important;top: 40% !important} /* 메인_인테리어 */ /* 메인_인테리어 카테고리 */ .main_interior_cg {} .main_interior_cg .interior_txt h3 {font-size: 20px !important;} .main_interior_cg .interior_cg_list{height: 123px;} .main_interior_cg .interior_cg_list .interior_cg_item a .img_allwrap {height:80px} .main_interior_cg .interior_cg_list .interior_cg_item a .img_wrap {height:80px} .main_interior_cg .interior_cg_list .interior_cg_item a p {padding:10px 0; font-size: 14px;} /* 메인_인테리어 카테고리 */ /*footer*/ #wrap{} #footer .footertextbox {width:100%} #footer .footertextbox li {padding-bottom: 5px;} #footer .footertextbox h4{} #footer .footertextbox .ft-wrap{} #footer .footertextbox .ft-wrap .address{font-size: 14px; padding-right: 0;} #footer .footertextbox .ft-wrap .ft_num {float: none; padding-top:103px; color: #ddd;} #footer .footertextbox .ft-wrap .ft_num li {} #footer .footertextbox .ft-wrap .ft_menu {float:none} #footer .footertextbox .ft-wrap .ft_menu li {float: left; padding-right: 20px;} #footer .footertextbox .ft-wrap .ft_menu li a{} #footer .footertextbox p {padding:50px 0} #ftBtnWrap {width:100%; display: block; } .ftBtn_m{height:50px; background: #000; margin:auto} .ftBtn_m li{float: left; text-align: center;width:25%} .ftBtn_m li a{line-height: 50px; font-style: 15px; color:#666} .ftBtn_m{display: block;height: auto; background: #000; overflow-y: hidden; overflow-x: hidden; box-sizing: border-box;margin: 0 auto;} .ftBtn_m li{float: left;height: 50px;text-align: center;} .ftBtn_m li:last-child{padding-right: 0%;} .ftBtn_m li a{font-size: 15px; color:#666; line-height: 50px;} /*footer*/ /* 퀵메뉴 모바일 */ #rightQuickArea{display: block;} #top{display: none;} #pop{right: 0px;position: fixed; top:180px; width:90px;background: #fff;border: 1px solid #000;} #pop .pop_inner {width:100%;padding: 0px; box-sizing: border-box;padding-top: 10px; } #pop .pop_inner li{text-align: center;padding:70px 0px 15px;} #pop .pop_inner li img{width:64px; position: absolute;top: 5px ; left:50%; transform: translateX(-50%);} #pop .pop_inner h4 {font-size: 15px; color: #000;} #pop .pop_inner h4 span {display: none;} #pop .pop_inner h4 strong {padding-left: 0px ;} #pop .pop_inner li p {display: none;} #pop .pop_inner li strong.num {font-size: 12px; font-weight: 600;color: #000;padding-left:0px;display:none } #pop .pop_inner li em {display: none; ;} #pop_bt{right: 10px;position: fixed;top:78px; width:70px;cursor: pointer;} #pop_bt img{width:100%} #pop .pop_title {width: 100%; background: #000; position: relative; } #pop .pop_title h3 {font-size: 15px;} #close{ display: block;} #close img{top: -14px ; right: -1px; background: #000; width:17px; padding:5px} /* 퀵메뉴 */ /* 모바일 퀵메뉴 탑 */ #container .quick_m_top{background: #dcdcdc; display: block;} #container .puick_m_top {width:100%} #container .top_quick li{width:20% ;float: left; background: #dcdcdc;padding:12px 0px;box-sizing: border-box;border-right: 1px solid #fff;} #container .top_quick li:nth-child(1){height: auto;} #container .top_quick li:nth-child(5){border-right:none} #container .top_quick li:nth-child(1) p {} #container .top_quick li p{text-align: center;} #container .top_quick li p img{width:30px; height: 33px;} /* 모바일 nav */ .hamburger {z-index: 1000;} .hamburger .line{width: 24px; height: 2px; background-color: /*#555*/#000; display: block; margin: 6px 0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .hamburger:hover{} #hamburger-1.is-active .line:nth-child(1){ -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);} #hamburger-1.is-active .line:nth-child(2){ opacity: 0;} #hamburger-1.is-active .line:nth-child(3){ -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); -o-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg);} .header .gnb-btn {float: left; width: 60px; height: 45px; padding-top: 15px; padding-left: 15px;} #nav .left-menu{position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 30; display: none; } #nav .left-menu .dim{width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; bottom: 0; z-index: 0;} #nav .left-menu .dim{width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; bottom: 0; z-index: 0;} #nav .left-menu .left-menu-bar{width: 70%; background: #e8ebec; margin-left: -70%; position: absolute; top: 0; height: 100%; z-index: 20; overflow: hidden;} #nav .left-menu .left-menu-bar .movemenu{width: 110%; overflow-y:scroll; height: 100%;padding-top:65px} #nav .left-menu .left-menu-bar .movemenu .ulwrap{padding-bottom: 80px;} #nav .left-menu .left-menu-bar .left-banner{width: 100%; background: #333;} #nav .left-menu .left-menu-bar .left-banner img{width: 101%;} #nav .left-menu .left-menu-bar .all-menu{} #nav .left-menu .left-menu-bar .all-menu.campus{} #nav .left-menu .left-menu-bar .all-menu.campus span{background-color: #fff;} #nav .left-menu .left-menu-bar .all-menu.sup span a{color:#000; display: block; width: 100%; height: 100%; } #nav .left-menu .left-menu-bar .all-menu span{-webkit-filter: grayscale(100%);filter: grayscale(100%);display: block; background-size:25px; background-repeat: no-repeat; background-position: 5% 50%; text-indent: 6%; padding-left: 30px; height: 50px; background-color: #fff; border-bottom: 1px solid #e8ebec; font-size: 16px; font-weight: 200; line-height: 50px;} #nav .left-menu .left-menu-bar .all-menu:nth-child(2){border-top: 1px solid #e8ebec;} #nav .left-menu .left-menu-bar .all-menu.campus span{-webkit-filter: none;filter: none; border-bottom: none;} #nav .left-menu .left-menu-bar .all-menu.campus ul {position:relative;} #nav .left-menu .left-menu-bar .all-menu.campus ul li{background: #f8f9f9; border-bottom: 1px solid #e8ebec; left:0; top:0} #nav .left-menu .left-menu-bar .all-menu.campus ul li:nth-child(2) {} #nav .left-menu .left-menu-bar .all-menu.campus ul li a{color: #000;} #nav .left-menu .left-menu-bar .all-menu.campus ul li.on a{color: #91724f;} #nav .left-menu .left-menu-bar .all-menu ul{display: none;} #nav .left-menu .left-menu-bar .all-menu ul li{line-height: 40px; height: 40px; text-indent: 5%; background: #f8f9f9; border-bottom: 1px solid #e8ebec; padding-left: 30px;} #nav .left-menu .left-menu-bar .all-menu.campus ul li > a:after{content: ''; position: absolute; display: inline-block; width: 1px; height: 25px; top: 8px; right: 0; background: #777;} #nav .left-menu .left-menu-bar .all-menu.campus ul li:first-child > a:after{display: none;} #nav .left-menu .left-menu-bar .all-menu ul li .sidecall a{display: block; width: 65%; height: 40px; float: left; color: #fff;font-weight: 200;background-size: 15px; text-indent: 40px; box-sizing:border-box;} /* 모바일 nav */ #instafeed a {margin-bottom: 10px;} } /* --------------------------태블릿 버전-------------------------------- */ @media screen and (max-width: 1200px){ #pop_bt{right:10px;} #wrap {overflow-x:hidden} .inner{width:95%; margin:0 auto} .franchise-inner{width:100% !important} .header-inner{width:95%; margin:0 auto; } .inner3{width:95%} /* **** 새로운 header */ #header{height:0px !important; position:fixed;width:100%; background:white;z-index: 1000; top: 0;} .header .gnb-btn{display: block !important;} .nav {display: none;} .header{width:100%} .header-inner{width:100%; height: 65px;} .header .logo{position: absolute; margin:0; top:50%; left:50%; transform: translate(-50%,-50%);} .header .logo.interior_logo{position: absolute; margin:0; top:53%; left:44%; transform: translate(-50%,-50%);} .header strong {right: 2%} .header strong a {padding: 4px 15px } .open-btn{display: block !important; ;position: absolute; left: 5%; top:50%; transform: translateY(-50%);} #leftNavBox{display:block;} .header .header-inner strong.new_store{display: none;} .header .header-inner ul.member{display:none;} /*.tabs li {width:33.3333%;}*/ #leftNavBox{width: 100%; height: 100%; background: #fff; position: fixed; left: 0; top: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; z-index: 101;-webkit-transform: translateZ(0)} #leftNav{width: 100%; padding: 70px 5% 0; box-sizing: border-box; position: relative; z-index: 102;} #header .left-nav-logo{display: block; width: 180px; position: absolute; left: 5%; top: 24px;} #header .left-nav-logo img{width: 100%;} #leftNav .left-nav-close{display: block; width: 21px; background: #fff; position: absolute; right: 6%; top: 22px;} #leftNav .left-nav-close img{width: 100%;} #leftNav a img{margin-bottom:10px;width:70%;} #leftNav .login-wrap{width: 100%; background: #f6f6f6; position: relative;} #leftNav .login-wrap .login-box{} #leftNav .login-wrap .login-box li{float: left; width: 50%; box-sizing:border-box;} #leftNav .login-wrap .login-box li a{display: block; width: 100%; height: 50px; font-size: 14px; text-align: center; line-height: 50px; text-indent: 40px;} #leftNav .login-wrap .login-box li.sign-in{} #leftNav .login-wrap .login-box li.sign-in:after{content: ""; clear: both; display: block; height: 20px; width: 1px; background: #ddd; position: absolute; left: 50%; top: 50%; margin-left: -0.5px; margin-top: -10px;} #leftNav .login-wrap .login-box li.sign-in a{background: url("/images/common/sign_in.png") no-repeat 20% 50%;} #leftNav .login-wrap .login-box li.login{} #leftNav .login-wrap .login-box li.login a{background: url("/images/common/login.png") no-repeat 20% 50%;} #leftNav .login-wrap .member-box{} #leftNav .login-wrap .member-box li{float: left;} #leftNav .login-wrap .member-box li a{display: block; width: 100%; height: 50px; text-align: center; line-height: 50px; font-size: 14px;font-weight:600;} #leftNav .login-wrap .member-box li.login-on{width: 65%;} #leftNav .login-wrap .member-box li.login-on:after{content: ""; clear: both; display: block; height: 20px; width: 1px; background: #ddd; position: absolute; left: 65%; top: 50%; margin-left: -0.5px; margin-top: -10px;} #leftNav .login-wrap .member-box li.login-on a{background: url('/images/common/sign_in.png') 6.5% 50% no-repeat; text-indent: 30px;} #leftNav .login-wrap .member-box li.login-on a strong{color: #4b5e6c; font-weight: 600;} #leftNav .login-wrap .member-box li.logout{width: 35%;} #leftNav .login-wrap .member-box li.logout a{} #leftNav .left-menu{margin-top: 20px;} #leftNav .left-menu .lm1{} #leftNav .left-menu .lm1 > li{} #leftNav .left-menu .lm1 > li h2{padding-bottom: 2px;font-size: 16px; color:#b09b71; border-left: 3px solid #b09b71; text-indent: 10px; line-height: 1.2;} #leftNav .left-menu .lm1 > li .lm2{margin: 14px 0 20px; border: 1px solid #ddd; border-bottom: 0;} #leftNav .left-menu .lm1 > li .lm2 li{float: left; width: 50%; padding: 10px 0; border-bottom: 1px solid #ddd; text-indent: 10px; box-sizing:border-box;} #leftNav .left-menu .lm1 > li .lm2 li:nth-of-type(2n){border-left: 1px solid #ddd;} #leftNav .left-menu .lm1 > li:nth-of-type(6) .lm2 li:last-of-type, #leftNav .left-menu .lm1 > li:nth-of-type(1) .lm2 li:last-of-type{width: 100%;} #leftNav .left-menu .lm1 > li:nth-of-type(6) .lm2 li:last-of-type, #leftNav .left-menu .lm1 > li:nth-of-type(7) .lm2 li:last-of-type{width: 100%;} #leftNav .left-menu .lm1 > li .lm2 li a{display: block; width: 100%; font-size: 14px;} /* 모바일 nav */ #nav.m_img{display: block !important;} .hamburger {z-index: 1000;} .hamburger .line{width: 24px; height: 2px; background-color: /*#555*/#000; display: block; margin: 6px 0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} .hamburger:hover{} #hamburger-1.is-active .line:nth-child(1){ -webkit-transform: translateY(8px) rotate(45deg); -ms-transform: translateY(8px) rotate(45deg); -o-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);} #hamburger-1.is-active .line:nth-child(2){ opacity: 0;} #hamburger-1.is-active .line:nth-child(3){ -webkit-transform: translateY(-8px) rotate(-45deg); -ms-transform: translateY(-8px) rotate(-45deg); -o-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg);} .header .gnb-btn { float: left; width: 60px; height: 45px; padding-top: 18px; padding-left: 15px; } #nav .left-menu{position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 30; display: none; } #nav .left-menu .dim{width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; bottom: 0; z-index: 0;} #nav .left-menu .dim{width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: absolute; bottom: 0; z-index: 0;} #nav .left-menu .left-menu-bar{width: 70%; background: #e8ebec; margin-left: -70%; position: absolute; top: 0; height: 100%; z-index: 20; overflow: hidden;} #nav .left-menu .left-menu-bar .movemenu{width: 110%; overflow-y:scroll; height: 100%;padding-top:65px} #nav .left-menu .left-menu-bar .movemenu .ulwrap{padding-bottom: 80px;} #nav .left-menu .left-menu-bar .left-banner{width: 100%; background: #333;} #nav .left-menu .left-menu-bar .left-banner img{width: 101%;} #nav .left-menu .left-menu-bar .all-menu{} #nav .left-menu .left-menu-bar .all-menu.campus{} #nav .left-menu .left-menu-bar .all-menu.campus span{background-color: #fff;} #nav .left-menu .left-menu-bar .all-menu.sup span a{color:#000; display: block; width: 100%; height: 100%; } #nav .left-menu .left-menu-bar .all-menu span{-webkit-filter: grayscale(100%);filter: grayscale(100%);display: block; background-size:25px; background-repeat: no-repeat; background-position: 5% 50%; text-indent: 6%; padding-left: 30px; height: 50px; background-color: #fff; border-bottom: 1px solid #e8ebec; font-size: 16px; font-weight: 200; line-height: 50px;} #nav .left-menu .left-menu-bar .all-menu:nth-child(2){border-top: 1px solid #e8ebec;} #nav .left-menu .left-menu-bar .all-menu.campus span{-webkit-filter: none;filter: none; border-bottom: none;} #nav .left-menu .left-menu-bar .all-menu.campus ul {position:relative;} #nav .left-menu .left-menu-bar .all-menu.campus ul li{background: #f8f9f9; border-bottom: 1px solid #e8ebec; left:0; top:0} #nav .left-menu .left-menu-bar .all-menu.campus ul li:nth-child(2) {} #nav .left-menu .left-menu-bar .all-menu.campus ul li a{color: #000;} #nav .left-menu .left-menu-bar .all-menu.campus ul li.on a{color: #91724f;} #nav .left-menu .left-menu-bar .all-menu ul{display: none;} #nav .left-menu .left-menu-bar .all-menu ul li{line-height: 40px; height: 40px; text-indent: 5%; background: #f8f9f9; border-bottom: 1px solid #e8ebec; padding-left: 30px;} #nav .left-menu .left-menu-bar .all-menu.campus ul li > a:after{content: ''; position: absolute; display: inline-block; width: 1px; height: 25px; top: 8px; right: 0; background: #777;} #nav .left-menu .left-menu-bar .all-menu.campus ul li:first-child > a:after{display: none;} #nav .left-menu .left-menu-bar .all-menu ul li .sidecall a{display: block; width: 65%; height: 40px; float: left; color: #fff;font-weight: 200;background-size: 15px; text-indent: 40px; box-sizing:border-box;} /* 모바일 nav */ /* 메인 배너 */ #main_visual{padding-top:66px ;} /* 메인 메뉴 */ .main_bakerymenu > .pc_img{display: none;} .main_bakerymenu > .m_img{display: block !important;} .main_bakerymenu ul li{width:33.333%} .main_bakerymenu ul li:last-child{display: none;} /* 메인 메뉴 */ /* 인테리어 */ .main_interior .leftBox img{width:100%} .main_interior .rightBox{width:45%} .main_interior.m_img{display: block;} .main_interior.pc_img{display: none;} /* 메인_인테리어 */ .main_interior .m_img{display: block; width:100%} .main_interior .pc_img{display: none; } .main_interior {position: relative; height: auto; } .main_interior .leftBox{float:none;} .main_interior .leftBox img{height:100%} .main_interior .rightBox {float: none; width:auto; background: rgba(0, 0, 0, 0.7);position: absolute; top: 50%;left: 50%; height: auto; transform: translate(-50%,-50%); } .main_interior .rightBox .textbox {text-align: center;} .main_interior .rightBox .textbox h3 {color:#fff !important; font-size: 25px !important; } .main_interior .rightBox .textbox p {padding-bottom: 40px; color:#fff} .main_interior .rightBox .textbox span {display: inline-block; font-size: 15px;} .main_interior .rightBox .textbox span a {display: inline-block; padding:5px 14px;background: #fff; border-radius: 20px; font-weight: 600;} /* 메인_인테리어 롤링 */ .main_interior.new {margin: 0px !important;} .main_interior.new.inner {margin:0 auto} .main_interior .swiper-button-next, .swiper-rtl .swiper-button-prev,.main_interior .swiper-button-prev, .swiper-rtl .swiper-button-next {display: none;} /* 메인_인테리어 */ .menu_contents2 .sub_menu li{ width:33%; } }