/* PC */ @media screen and (min-width:1201px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -40px; margin-bottom: 120px;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 50%; background-color: #06793e; border-radius: 0 20px 20px 0;} .pnb .pnb_inner ul{display: flex; height: 80px; align-items: center; justify-content: right; margin-right: 10%;} .pnb .pnb_inner ul li{position: relative;} .pnb .pnb_inner ul li a{position: relative; color: #aaa;text-align: center; margin-left: 50px;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -25px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: 600;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{overflow: hidden; position: relative; width: 100%; height: 750px;} .page_top{transition-duration: 0.5s; position: absolute; width: 80%; height: 400px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 200px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 3.5em; font-weight: bold; color: #fff;} /* 섹션 타이틀 */ .contitle h2{text-shadow: 0 0 4px rgba(255, 255, 255, 0.8); font-size: 2.6em; font-weight: bold; text-align: center; z-index: 1; position: relative; color: #000;} .contitle .title_img{position: relative; width: 70%; height: 200px; background-color: #F9E5C4; margin: 40px auto; bottom: -40px;} .contitle p{position: relative; font-size: 1em; text-align: center; margin-bottom: 10px; line-height: 1.6em;} .contitle p:last-child{margin-bottom: 0;} .contitle p.title_explanation{color: #06793e; position: relative; font-size: 1.2em; text-align: center; margin-bottom: 40px; line-height: 1.6em;} /* */ /* 곰표뮤지엄 */ /* */ #museum{position: relative;} /* 페이지 타이틀 이미지 */ #museum .page_top{background-image: url(../img/top_museum.jpg);} #museum .museum_content .museum_inner{position: relative; margin: 0 auto; width: 92%; max-width: 1600px; display: flex; align-items: flex-start; justify-content: space-between;} /* 연도 고정 */ #museum .museum_content .museum_inner .museum_year{position: sticky; width: 18%; height: calc(100vh - 200px); left: 0; top: 120px; } #museum .museum_content .museum_inner .museum_year .museum_year_inner{display: flex; position: absolute; width: 100%; height: 100%; left: 0; top: 0} /* 20 단어 */ #museum .museum_content .museum_inner .museum_year .museum_year_inner>div p{position:absolute; font-size: 60px; font-weight: bold; color: #06793e; top:0; left: 0;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul{position: relative; height: calc(100vh - 200px);} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li{position: relative; display: flex; height: 25%; flex-direction: column; justify-content: space-between;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a{transition-duration: 0.5s; font-size: 60px; font-weight: bold; color: #ccc;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_now a{color: #06793e; } #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_view a span{opacity: 1;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a span{opacity: 0; transition-duration: 0.5s;} /* 뮤지엄 내용 */ #museum .museum_content .museum_inner .museum_box{position: relative; width: 80%;} #museum .museum_content .museum_inner .museum_box>ul{display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 120px;} #museum .museum_content .museum_inner .museum_box>ul>li{position: relative; top: 100px; opacity: 0; width: 48%; min-width: 400px; } #museum .museum_content .museum_inner .museum_box>ul>li img{width: 100%; border-radius: 20px; margin-bottom: 40px;} /* 내용 텍스트 */ #museum .museum_content .museum_inner .museum_box>ul>li h3{ word-break: keep-all; position: relative; font-size: 2em; font-weight: bold; margin-bottom: 20px;} #museum .museum_content .museum_inner .museum_box>ul>li h3::after{content: ""; display: block; position: absolute; z-index: -1; width: 20px; height: 30px; background-color: #F9E5C4; top: -10px; left: -10px;} #museum .museum_content .museum_inner .museum_box>ul>li h4{font-size: 1.4em; font-weight: bold; margin-bottom: 8px; color: #626262} #museum .museum_content .museum_inner .museum_box>ul>li p{font-size: 1.2em; line-height: 1.6em; text-align: justify; margin-bottom: 20px;} #museum .museum_content .museum_inner .museum_box>ul>li p.store{margin-left: 5px; font-weight: bold;} /* 짝수번째 이미지 배치 */ #museum .museum_content .museum_inner .museum_box>ul>li:nth-child(2n){margin-top: 16%} /* 연도별 간격 */ #museum .museum_content .museum_inner .museum_box>ul{margin-bottom: 100px} /* */ /* 곰표노포 */ /* */ #storeTop{position: relative;} /* 페이지 타이틀 이미지 */ #storeTop .page_top{background-image: url(../img/top_store.jpg);} /* 상단 텍스트 */ #store_content .store_about{position: relative;} #store_content .store_about .contitle p:last-of-type{margin: 50px 0;} #store_content .contitle .title_img{background-image: url(../img/title_store.jpg); background-size: cover; background-position: center;} /* 노포리스트 */ #store_content .store_list_wrap{position: relative; padding-top: 100px;} #store_content .store_list_wrap::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-image: url(../img/deco.png); background-size: cover; top: 50px; left: 50%; transform: translateX(-50%);} #store_content .store_list_wrap ul{position: relative; max-width: 1600px; width: 92%; margin: 0 auto;} #store_content .store_list_wrap .store_list li{display: flex; align-items: flex-end; margin-bottom: 250px;} #store_content .store_list_wrap .store_list li:first-child{margin-top: 100px;} /*노포 이미지 추가 */ #store_content .store_list_wrap .store_list li .store_img{max-width: 900px; height: 400px; position: relative; width: 60%; overflow: hidden; background-color: #f1f1f1;} #store_content .store_list_wrap .store_list li .store_img>div{background-position: center; background-size: cover; position: relative; transform: scale(1.5) translateX(100%); width: 100%; height: 400px; transition-duration: 0.5s; opacity: 0; cursor: pointer;} #store_content .store_list_wrap .store_list li:nth-child(1) .store_img>div{background-image: url(../img/store0.jpg);} #store_content .store_list_wrap .store_list li:nth-child(2) .store_img>div{background-image: url(../img/store1.jpg);} #store_content .store_list_wrap .store_list li:nth-child(3) .store_img>div{background-image: url(../img/store2.jpg);} #store_content .store_list_wrap .store_list li:nth-child(4) .store_img>div{background-image: url(../img/store3.jpg);} /*노포 짝수번째 배치 변경 */ #store_content .store_list_wrap .store_list li:nth-child(2n){flex-direction: row-reverse; text-align: right;} #store_content .store_list_wrap .store_list li:nth-child(2n) .store_img>div{transform: scale(1.5) translateX(-100%)} /* 노포 텍스트 배치 */ #store_content .store_list_wrap .store_list li .store_text{margin: 0 40px;} #store_content .store_list_wrap .store_list li .store_text h3{font-size: 1.4em; font-weight: 600; margin-bottom: 20px;} #store_content .store_list_wrap .store_list li .store_text h3 span{font-size: 1.8em; display: block; margin-top: 10px;} #store_content .store_more{width: 300px; height: 60px; border: 1px solid #06793e; border-radius: 31px; background: none; position: relative; margin: 100px auto; display: block;} /* */ /* 쿠킹연구소 */ /* */ #labTop{position: relative;} /* 페이지 타이틀 이미지 */ #labTop .page_top{background-image: url(../img/top_lab.jpg);} #labAbout{position: relative;} #labAbout .contitle .title_img{background-image: url(../img/title_lab.jpg); background-size: cover; background-position: center;} /* 연구소 내용 목록 */ #labAbout>ul{position: relative; margin: 20px auto; width: 600px; display: flex; justify-content: space-between;} #labAbout>ul li{position: relative; width: 48%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 20px;} #labAbout>ul li::after{content: ""; display: block; position: absolute; border: 4px solid #ccc; border-radius: 20px; height: 100%; width: 100%; top: 0; left: 0; transition-duration: 0.5s; box-sizing: border-box;} #labAbout>ul li:hover::after{border: 8px solid #06793e;} #labAbout>ul li.select::after{border: 8px solid #06793e;} #labAbout>ul li img{width: 150px; margin-bottom: 30px;} #labAbout>ul li img:last-child{display: none;} #labAbout>ul li.select img:first-child{display: none;} #labAbout>ul li.select img:last-child{display: block;} #labAbout>ul li h3{font-size: 1.2em; margin-bottom: 16px; font-weight: bold; } #labAbout>ul li.select h3 a{color: #06793e; transition-duration: 0.5s;} #labAbout>ul li p{line-height: 1.6em; text-align: center; transition-duration: 0.5s;} #labAbout>ul li.select p{color: #06793e;} /* 탭 */ #labAbout{position: relative; margin-bottom: 80px;} #labAbout .lab_tab_wrap{position: relative; height: 40px;} #labAbout .lab_tab_wrap .lab_tab{position: relative; display: flex; width: 600px; left: 50%; transform: translateX(-50%); z-index: 99; border: 2px solid #06793e; opacity: 0; transition-duration: 0.5s; border-radius: 0 0 20px 20px; overflow: hidden; border-top: none; background-color: #fff; } #labAbout .lab_tab_wrap .lab_tab.change_tab{position: fixed; width: 600px; top: 100px; opacity: 1;} #labAbout .lab_tab_wrap .lab_tab li{width: 50%;cursor: pointer; transition-duration: 0.5s; line-height: 40px;} #labAbout .lab_tab_wrap .lab_tab li p{font-size: 1.2em; text-align: center; position: relative;} #labAbout .lab_tab_wrap .lab_tab li.select{background-color: #06793e;} #labAbout .lab_tab_wrap .lab_tab li.select p{color: #fff;} #labAbout .lab_tab_wrap .lab_tab li.select p::after{background-color: #06793e; width: 100%; height: 3px; content: ""; display: block; position: absolute; bottom: 0; left: 0;} /* lab내용 */ /* 베이커리세미나 */ #lab_content{position: relative;} #lab_content .contitle h2{margin-bottom: 20px; position: relative;} #lab_content .contitle h3{font-size: 2em; font-weight: 700; text-align: center; margin-bottom: 40px;} #lab_content .contitle p{word-break: keep-all;} /* 현장스케치 */ #lab_content .now_seminar{padding-bottom: 250px; background-image: url(../img/lab_text.png); background-repeat: repeat-x; background-position: 0 bottom; margin-bottom: 100px;} #lab_content .now_seminar .now_wrap{background-color: #ffdb6c; overflow: hidden; padding: 40px 0; box-sizing: border-box; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul{position: relative; display: flex; width: 300%;} #lab_content .now_seminar .now_wrap ul li{width: 33.333%; display: flex; flex-direction: column; justify-content: center; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul li .li_inner{width: 92%; max-width: 1600px; margin: 0 auto; display: flex; background-color: #fff; padding: 40px 100px; box-sizing: border-box; border-radius: 20px; align-items: center;} /* 현장스케치 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about p{font-size: 1.4em; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about h3{font-size: 2em; font-weight: bold; margin-bottom: 20px;} /* 현장스케치 더보기 버튼 */ #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn{font-size: 1.2em; background: none; border: 1px solid #06793e; width: 120px; height: 40px; border-radius: 21px; transition: 0.5s;margin-bottom: 20px; color: #06793e;} #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn.select{background-color: #06793e; color: #fff; } /* 현장스케치 추가 내용 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more{background-color: #f1f1f1; padding: 20px 10px; border: 1px solid #06793e; border-radius: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p{line-height: 1.6em; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p span{font-weight: bold; margin-right: 10px;} /* 현장스케치 이미지 */ #lab_content .now_seminar .now_wrap ul li .li_inner>div:first-child{margin-right: 40px;} #lab_content .now_seminar .now_wrap ul li img{width: 460px; height: 500px; margin-right: 10%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);} /* 현장스케치 버튼 */ #lab_content .now_seminar .now_wrap .now_btn_wrap{position: relative; display: flex; justify-content: center; margin-bottom: 20px;} #lab_content .now_seminar .now_wrap .now_btn_wrap .now_btn{width: 50px; height: 50px; border-radius: 50%; background-color: #fff; border: none;} #lab_content .now_seminar .now_wrap .now_btn_wrap .prev{margin-right: 20px;} /* 지난세미나 */ #lab_content .last_seminar{position: relative; width: 92%; max-width: 1600px; margin: 100px auto 200px auto;} #lab_content .last_seminar ul{display: flex; flex-wrap: wrap; margin-top: 60px;} #lab_content .last_seminar ul li{position: relative; width: 23.5%; margin-right: 2%; overflow: hidden; margin-bottom: 4%; border-radius: 20px;} #lab_content .last_seminar ul li:nth-child(4n){margin-right: 0;} #lab_content .last_seminar ul li .img_box{position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center;} #lab_content .last_seminar ul li .img_box img{width: 100%; max-width: 334px; opacity: 0.7; transition-duration: 0.5s;} /* 이미지 텍스트 박스 */ #lab_content .last_seminar ul li .img_box .text_box{position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition-duration: 0.5s; background-color: #fff; padding: 4px 0;} #lab_content .last_seminar ul li .text_box p{font-size: 1.1em; margin-bottom: 8px;} #lab_content .last_seminar ul li .text_box h3{font-size: 1.3em; font-weight: bold; margin-bottom: 16px;} #lab_content .last_seminar ul li .text_box button{font-size: 0.9em; background: none; border: 1px solid #06793e; width: 120px; height: 30px; border-radius: 16px; color: #06793e; transition-duration: 0.5s; text-align: center;} /* 이미지 아래의 텍스트 조절 */ #lab_content .last_seminar ul li .text_box>*{display: none;} #lab_content .last_seminar ul li .text_box h3{display: block;} /* hover */ #lab_content .last_seminar ul li:hover .text_box{padding: 10px 0;} #lab_content .last_seminar ul li:hover .text_box p, #lab_content .last_seminar ul li:hover .text_box button{display: block;} #lab_content .last_seminar ul li:hover .img_box img{opacity: 1;} #lab_content .last_seminar ul li .text_box button:hover{color: #fff; background-color: #06793e;} /* 레시피 */ #lab_content .recipe{position: relative; max-width: 1600px; width: 92%; margin: 0 auto 200px auto; display: none;} /* 레시피 목록 */ #lab_content .recipe>ul>li {margin-bottom: 80px;} #lab_content .recipe>ul>li .recipe_card{display: flex; align-items: center; border-radius: 20px; border: 4px solid #ccc; overflow: hidden; transition-duration: 0.5s;} #lab_content .recipe>ul>li .recipe_card img{width: 300px;} /* 목록 - 중앙 타이틀과 텍스트부분 */ #lab_content .recipe>ul>li .recipe_card>div:nth-child(2){padding: 0 20px; box-sizing: border-box; width: calc(100% - 450px);} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title p{margin-bottom: 10px; font-size: 1.2em; word-break: keep-all;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title h2{margin-bottom: 30px; font-size: 1.6em; font-weight: bold;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li{margin-bottom: 10px; line-height: 20px;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li span{width: 20px; height: 20px; border-radius: 50%; background-color: #06793e; color: #fff; display: inline-block; text-align: center; margin-right: 10px;} /* 목록 - 자세한 레시피 버튼*/ #lab_content .recipe>ul>li .recipe_card>button{width: 150px; height:300px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition-duration: 0.5s; border: none; background-color: #fff;} #lab_content .recipe>ul>li .recipe_card>button p{color: #06793e; margin-bottom: 20px;} #lab_content .recipe>ul>li .recipe_card>button .arrow{position: relative; width: 40px; height: 40px; transform: rotate(0deg); transition-duration: 0.5s;} #lab_content .recipe>ul>li .recipe_card>button .arrow span{background-color: #06793e; width: 20px; height: 4px; display: block; position: absolute; top: 20px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:first-child{transform: rotate(45deg); margin-left: 3px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:last-child{transform: rotate(135deg); margin-left: 15px;} #lab_content .recipe>ul>li .recipe_card>button:hover{background-color: #F9E5C4;} /* 선택된 레시피 */ #lab_content .recipe>ul>li.select .recipe_card>button{background-color: #F9E5C4;} #lab_content .recipe>ul>li.select .recipe_card>button .arrow{transform: rotate(-180deg);} #lab_content .recipe>ul>li.select .recipe_card{border-radius: 20px 20px 0 0; border-bottom-width: 2px;} /* 자세한 레시피 */ #lab_content .recipe>ul>li .recipe_more .more_wrap{display: none; border: 4px solid #ccc; border-radius: 0 0 20px 20px; border-top: none; background-color: #f1f1f1;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li{position: relative; padding: 40px; box-sizing: border-box;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li::after{content: ""; display: block; position: absolute; width: 90%; height: 2px; background-color: #06793e; bottom: 0; left: 50%; transform: translateX(-50%);} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li:last-child::after{display: none;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div{display: flex; justify-content: space-between;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about{ width: 48%; box-sizing: border-box;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about h3{font-size: 1.4em; font-weight: bold; margin-bottom: 20px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div{display: flex; position: relative;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p:first-child{width: 40px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p:last-child{width: calc(100% - 40px); line-height: 1.6em;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process{width: 48%;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li{line-height: 1.6em;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li span{width: 16px; height: 16px; border-radius: 50%; background-color: #ccc; display: inline-block; text-align: center; margin-right: 10px; line-height: 16px;} } /* Tablet 가로 */ @media screen and (min-width:801px) and (max-width:1200px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -40px; margin-bottom: 150px;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 60%; background-color: #06793e; border-radius: 0 20px 20px 0;} .pnb .pnb_inner ul{display: flex; height: 80px; align-items: center; justify-content: right; margin-right: 10%;} .pnb .pnb_inner ul li a{position: relative; color: #ccc;text-align: center; margin-left: 50px;} .pnb .pnb_inner ul li.select a{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -25px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{overflow: hidden; position: relative; width: 100%; height: 700px;} .page_top{transition-duration: 0.5s; position: absolute; width: 80%; height: 380px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 190px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0; width: 100%;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 3em; font-weight: bold; color: #fff;} /* 섹션 타이틀 */ .contitle h2{text-shadow: 0 0 4px rgba(255, 255, 255, 0.8); font-size: 2.4em; font-weight: 600; text-align: center; z-index: 1; position: relative; color: #000;} .contitle .title_img{position: relative; width: 70%; height: 200px; margin: 30px auto; bottom: -40px;} .contitle p{position: relative; font-size: 1em; text-align: center; margin-bottom: 10px; line-height: 1.6em;} .contitle p{position: relative; font-size: 1em; text-align: center; margin-bottom: 10px; line-height: 1.6em;} .contitle p:last-child{margin-bottom: 0;} .contitle p.title_explanation{color: #06793e; position: relative; font-size: 1.2em; text-align: center; margin-bottom: 20px; line-height: 1.6em;} /* */ /* 곰표뮤지엄 */ /* */ #museum{position: relative;} /* 페이지 타이틀 이미지*/ #museum .page_top{background-image: url(../img/top_museum.jpg);} #museum .museum_content .museum_inner{position: relative; margin: 0 auto; width: 92%; display: flex; align-items: flex-start; justify-content: space-between;} /* 연도 고정 */ #museum .museum_content .museum_inner .museum_year{position: sticky; width: 18%; height: calc(100vh - 200px); left: 0; top: 120px; } #museum .museum_content .museum_inner .museum_year .museum_year_inner{display: flex; position: absolute; width: 100%; height: 100%; left: 0; top: 0} /* 20 단어 */ #museum .museum_content .museum_inner .museum_year .museum_year_inner>div p{position:absolute; font-size: 45px; font-weight: bold; color: #06793e; top:0; left: 0;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul{position: relative; height: calc(100vh - 200px);} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li{position: relative; display: flex; height: 25%; flex-direction: column; justify-content: space-between; } #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a{transition-duration: 0.5s; font-size: 45px; font-weight: bold; color: #ccc;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_now a{color: #06793e;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_view a span{opacity: 1;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a span{opacity: 0; transition-duration: 0.5s;} /* 뮤지엄 내용 */ #museum .museum_content .museum_inner .museum_box{position: relative; width: 82%;} #museum .museum_content .museum_inner .museum_box>ul{display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 120px;} #museum .museum_content .museum_inner .museum_box>ul>li{position: relative; top: 100px; opacity: 0; width: 48%; } #museum .museum_content .museum_inner .museum_box>ul>li img{width: 100%; border-radius: 20px; margin-bottom: 40px;} /* 내용 텍스트 */ #museum .museum_content .museum_inner .museum_box>ul>li h3{ word-break: keep-all; position: relative; font-size: 1.7em; font-weight: bold; margin-bottom: 20px;} #museum .museum_content .museum_inner .museum_box>ul>li h3::after{content: ""; display: block; position: absolute; z-index: -1; width: 18px; height: 25px; background-color: #F9E5C4; top: -10px; left: -8px;} #museum .museum_content .museum_inner .museum_box>ul>li h4{font-size: 1.2em; font-weight: bold; margin-bottom: 8px; color: #626262;} #museum .museum_content .museum_inner .museum_box>ul>li p{font-size: 1.1em; line-height: 1.6em; text-align: justify; margin-bottom: 20px;} #museum .museum_content .museum_inner .museum_box>ul>li p.store{font-weight: bold; margin-left: 5px;} /* 짝수번째 이미지 배치 */ #museum .museum_content .museum_inner .museum_box>ul>li:nth-child(2n){margin-top: 16%} /* 연도별 간격 */ #museum .museum_content .museum_inner .museum_box>ul{margin-bottom: 100px} /* */ /* 곰표노포 */ /* */ #storeTop{position: relative;} /* 페이지 타이틀 이미지 */ #storeTop .page_top{background-image: url(../img/top_store.jpg);} /* 상단 텍스트 */ #store_content .store_about{position: relative;} #store_content .store_about .contitle p:last-of-type{margin: 50px 0;} #store_content .contitle .title_img{background-image: url(../img/title_store.jpg); background-size: cover; background-position: center;} /* 노포리스트 */ #store_content .store_list_wrap{position: relative; padding-top: 50px;} #store_content .store_list_wrap::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-image: url(../img/deco.png); background-size: cover; top: 30px; left: 50%; transform: translateX(-50%);} #store_content .store_list_wrap ul{position: relative; max-width: 1600px; width: 92%; margin: 0 auto;} #store_content .store_list_wrap .store_list li{display: flex; align-items: flex-end; margin-bottom: 250px;} #store_content .store_list_wrap .store_list li:first-child{margin-top: 100px;} /*노포 이미지 추가 */ #store_content .store_list_wrap .store_list li .store_img{max-width: 900px; height: 400px; position: relative; width: 60%; overflow: hidden; background-color: #f1f1f1;} #store_content .store_list_wrap .store_list li .store_img>div{background-position: center; background-size: cover; position: relative; transform: scale(1.5) translateX(100%); width: 100%; height: 400px; transition-duration: 0.5s; opacity: 0; cursor: pointer;} #store_content .store_list_wrap .store_list li:nth-child(1) .store_img>div{background-image: url(../img/store0.jpg);} #store_content .store_list_wrap .store_list li:nth-child(2) .store_img>div{background-image: url(../img/store1.jpg);} #store_content .store_list_wrap .store_list li:nth-child(3) .store_img>div{background-image: url(../img/store2.jpg);} #store_content .store_list_wrap .store_list li:nth-child(4) .store_img>div{background-image: url(../img/store3.jpg);} /*노포 짝수번째 배치 변경 */ #store_content .store_list_wrap .store_list li:nth-child(2n){flex-direction: row-reverse; text-align: right;} #store_content .store_list_wrap .store_list li:nth-child(2n) .store_img>div{transform: scale(1.5) translateX(-100%)} /* 노포 텍스트 배치 */ #store_content .store_list_wrap .store_list li .store_text{margin: 0 40px;} #store_content .store_list_wrap .store_list li .store_text h3{font-size: 1.3em; font-weight: 600; margin-bottom: 20px; word-break: keep-all;} #store_content .store_list_wrap .store_list li .store_text h3 span{font-size: 1.6em; display: block; margin-top: 10px;} #store_content .store_more{width: 300px; height: 60px; border: 1px solid #06793e; border-radius: 31px; background: none; position: relative; margin: 100px auto; display: block;} /* */ /* 쿠킹연구소 */ /* */ #labTop{position: relative;} /* 페이지 타이틀 이미지 */ #labTop .page_top{background-image: url(../img/top_lab.jpg);} #labAbout{position: relative;} #labAbout .contitle .title_img{background-image: url(../img/title_lab.jpg); background-size: cover; background-position: center;} /* 연구소 내용 목록 */ #labAbout>ul{position: relative; margin: 40px auto; width: 600px; display: flex; justify-content: space-between;} #labAbout>ul li{position: relative; width: 48%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 20px;} #labAbout>ul li::after{content: ""; display: block; position: absolute; border: 4px solid #ccc; border-radius: 20px; height: 100%; width: 100%; top: 0; left: 0; transition-duration: 0.5s; box-sizing: border-box;} #labAbout>ul li:hover::after{border: 8px solid #06793e;} #labAbout>ul li.select::after{border: 8px solid #06793e;} #labAbout>ul li img{width: 120px; margin-bottom: 30px;} #labAbout>ul li img:last-child{display: none;} #labAbout>ul li.select img:first-child{display: none;} #labAbout>ul li.select img:last-child{display: block;} #labAbout>ul li h3{font-size: 1.2em; margin-bottom: 16px; font-weight: bold; } #labAbout>ul li.select h3 a{color: #06793e; transition-duration: 0.5s;} #labAbout>ul li p{line-height: 1.6em; text-align: center; transition-duration: 0.5s;} #labAbout>ul li.select p{color: #06793e;} /* 탭 */ #labAbout{position: relative; margin-bottom: 80px;} #labAbout .lab_tab_wrap{position: relative; height: 40px;} #labAbout .lab_tab_wrap .lab_tab{position: relative; display: flex; width: 550px; left: 50%; transform: translateX(-50%); z-index: 99; border: 2px solid #06793e; opacity: 0; transition-duration: 0.5s; border-radius: 0 0 20px 20px; overflow: hidden; border-top: none; background-color: #fff; } #labAbout .lab_tab_wrap .lab_tab.change_tab{position: fixed; width: 550px; top: 80px; opacity: 1;} #labAbout .lab_tab_wrap .lab_tab li{width: 50%;cursor: pointer; transition-duration: 0.5s; line-height: 40px;} #labAbout .lab_tab_wrap .lab_tab li p{font-size: 1.2em; text-align: center; position: relative;} #labAbout .lab_tab_wrap .lab_tab li.select{background-color: #06793e;} #labAbout .lab_tab_wrap .lab_tab li.select p{color: #fff;} #labAbout .lab_tab_wrap .lab_tab li.select p::after{background-color: #06793e; width: 100%; height: 3px; content: ""; display: block; position: absolute; bottom: 0; left: 0;} /* lab내용 */ /* 베이커리세미나 */ #lab_content{position: relative;} #lab_content .contitle h2{margin-bottom: 20px; position: relative;} #lab_content .contitle h3{font-size: 1.8em; font-weight: 700; text-align: center; margin-bottom: 20px;} #lab_content .contitle p{word-break: keep-all;} /* 현장스케치 */ #lab_content .now_seminar{padding-bottom: 250px; background-image: url(../img/lab_text.png); background-repeat: repeat-x; background-position: 0 bottom; margin-bottom: 100px;} #lab_content .now_seminar .now_wrap{background-color: #ffdb6c; overflow: hidden; padding: 30px 0; box-sizing: border-box; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul{position: relative; display: flex; width: 300%;} #lab_content .now_seminar .now_wrap ul li{width: 33.333%; display: flex; flex-direction: column; justify-content: center; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul li .li_inner{width: 92%; max-width: 1600px; margin: 0 auto; display: flex; background-color: #fff; padding: 40px 60px; box-sizing: border-box; border-radius: 20px; align-items: center;} /* 현장스케치 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about p{font-size: 1.3em; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about h3{font-size: 1.7em; font-weight: bold; margin-bottom: 20px; white-space: nowrap;} /* 현장스케치 더보기 버튼 */ #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn{font-size: 1.1em; background: none; border: 1px solid #06793e; width: 100px; height: 36px; border-radius: 21px; transition: 0.5s;margin-bottom: 20px; color: #06793e;} #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn.select{background-color: #06793e; color: #fff; } /* 현장스케치 추가 내용 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more{background-color: #f1f1f1; padding: 10px; border: 1px solid #06793e; border-radius: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p{line-height: 1.6em; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p span{font-weight: bold; margin-right: 10px;} /* 현장스케치 이미지 */ #lab_content .now_seminar .now_wrap ul li .li_inner>div:first-child{margin-right: 30px;} #lab_content .now_seminar .now_wrap ul li img{width: 300px; margin-right: 6%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);} /* 현장스케치 버튼 */ #lab_content .now_seminar .now_wrap .now_btn_wrap{position: relative; display: flex; justify-content: center; margin-bottom: 20px;} #lab_content .now_seminar .now_wrap .now_btn_wrap .now_btn{width: 40px; height: 40px; border-radius: 50%; background-color: #fff; border: none;} #lab_content .now_seminar .now_wrap .now_btn_wrap .now_btn img{width: 100%;} #lab_content .now_seminar .now_wrap .now_btn_wrap .prev{margin-right: 20px;} /* 지난세미나 */ #lab_content .last_seminar{position: relative; width: 92%; max-width: 1600px; margin: 100px auto 120px auto;} #lab_content .last_seminar ul{display: flex; flex-wrap: wrap; margin-top: 40px;} #lab_content .last_seminar ul li{position: relative; width: 32%; margin-right: 2%; overflow: hidden; margin-bottom: 4%; border-radius: 20px;} #lab_content .last_seminar ul li:nth-child(3n){margin-right: 0;} #lab_content .last_seminar ul li .img_box{position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center;} #lab_content .last_seminar ul li .img_box img{width: 100%; max-width: 334px; opacity: 0.7; transition-duration: 0.5s;} /* 이미지 텍스트 박스 */ #lab_content .last_seminar ul li .img_box .text_box{position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition-duration: 0.5s; background-color: #fff; padding: 4px 0;} #lab_content .last_seminar ul li .text_box p{font-size: 1em; margin-bottom: 4px;} #lab_content .last_seminar ul li .text_box h3{font-size: 1.2em; font-weight: bold; margin-bottom: 10px;} #lab_content .last_seminar ul li .text_box button{font-size: 0.9em; background: none; border: 1px solid #06793e; width: 100px; height: 24px; border-radius: 13px; color: #06793e; transition-duration: 0.5s; text-align: center;} /* 이미지 아래의 텍스트 조절 */ #lab_content .last_seminar ul li .text_box>*{display: none;} #lab_content .last_seminar ul li .text_box h3{display: block;} /* hover */ #lab_content .last_seminar ul li:hover .text_box{padding: 10px 0;} #lab_content .last_seminar ul li:hover .text_box p, #lab_content .last_seminar ul li:hover .text_box button{display: block;} #lab_content .last_seminar ul li:hover .img_box img{opacity: 1;} #lab_content .last_seminar ul li .text_box button:hover{color: #fff; background-color: #06793e;} /* 레시피 */ #lab_content .recipe{position: relative; width: 92%; margin: 0 auto 120px auto; display: none;} /* 레시피 목록 */ #lab_content .recipe>ul>li {margin-bottom: 80px;} #lab_content .recipe>ul>li .recipe_card{display: flex; align-items: center; border-radius: 20px; border: 4px solid #ccc; overflow: hidden; transition-duration: 0.5s;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(1){position: relative; width: 250px; overflow: hidden;} #lab_content .recipe>ul>li .recipe_card img{position: relative; width: 300px; left: 50%; transform: translateX(-50%);} /* 목록 - 중앙 타이틀과 텍스트부분 */ #lab_content .recipe>ul>li .recipe_card>div:nth-child(2){padding: 0 20px; box-sizing: border-box; width: calc(100% - 370px);} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title p{margin-bottom: 10px; font-size: 1.2em; word-break: keep-all;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title h2{margin-bottom: 30px; font-size: 1.6em; font-weight: bold;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li{margin-bottom: 10px; line-height: 20px;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li span{width: 20px; height: 20px; border-radius: 50%; background-color: #06793e; color: #fff; display: inline-block; text-align: center; margin-right: 10px;} /* 목록 - 자세한 레시피 버튼*/ #lab_content .recipe>ul>li .recipe_card>button{width: 120px; height:300px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition-duration: 0.5s; border: none; background-color: #fff;} #lab_content .recipe>ul>li .recipe_card>button p{color: #06793e; margin-bottom: 20px;} #lab_content .recipe>ul>li .recipe_card>button .arrow{position: relative; width: 40px; height: 40px; transform: rotate(0deg); transition-duration: 0.5s;} #lab_content .recipe>ul>li .recipe_card>button .arrow span{background-color: #06793e; width: 20px; height: 4px; display: block; position: absolute; top: 20px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:first-child{transform: rotate(45deg); margin-left: 3px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:last-child{transform: rotate(135deg); margin-left: 15px;} #lab_content .recipe>ul>li .recipe_card>button:hover{background-color: #F9E5C4;} /* 선택된 레시피 */ #lab_content .recipe>ul>li.select .recipe_card>button{background-color: #F9E5C4;} #lab_content .recipe>ul>li.select .recipe_card>button .arrow{transform: rotate(-180deg);} #lab_content .recipe>ul>li.select .recipe_card{border-radius: 20px 20px 0 0; border-bottom-width: 2px;} /* 자세한 레시피 */ #lab_content .recipe>ul>li .recipe_more .more_wrap{display: none; border: 4px solid #ccc; border-radius: 0 0 20px 20px; border-top: none; background-color: #f1f1f1;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li{position: relative; padding: 40px; box-sizing: border-box;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li::after{content: ""; display: block; position: absolute; width: 90%; height: 2px; background-color: #06793e; bottom: 0; left: 50%; transform: translateX(-50%);} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li:last-child::after{display: none;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div{display: flex; justify-content: space-between;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about{ width: 48%; box-sizing: border-box;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about h3{font-size: 1.4em; font-weight: bold; margin-bottom: 20px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div{display: flex; position: relative;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p:first-child{width: 40px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p:last-child{width: calc(100% - 40px); line-height: 1.6em;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process{width: 48%;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li{line-height: 1.6em;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li span{width: 16px; height: 16px; border-radius: 50%; background-color: #ccc; display: inline-block; text-align: center; margin-right: 10px; line-height: 16px;} } /* Tablet 세로 */ @media screen and (min-width:601px) and (max-width:800px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -30px; margin-bottom: 150px;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 80%; background-color: #06793e; border-radius: 0 20px 20px 0;} .pnb .pnb_inner ul{display: flex; height: 60px; align-items: center; justify-content: right; margin-right: 10%;} .pnb .pnb_inner ul li a{position: relative; color: #ccc;text-align: center; margin-left: 30px; font-size: 0.9em;} .pnb .pnb_inner ul li.select a{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -17px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{overflow: hidden; position: relative; width: 100%; height: 600px;} .page_top{transition-duration: 0.5s; position: absolute; width: 80%; height: 320px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 160px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; width:80%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 2.8em; font-weight: bold; color: #fff;} /* 섹션 타이틀 */ .contitle h2{text-shadow: 0 0 4px rgba(255, 255, 255, 0.8); font-size: 2.2em; font-weight: 600; text-align: center; z-index: 1; position: relative; color: #000;} .contitle .title_img{position: relative; width: 70%; height: 160px; margin: 20px auto; bottom: -40px;} .contitle p{position: relative; font-size: 1em; text-align: center; margin-bottom: 10px; line-height: 1.6em; word-break: keep-all;} .contitle p:last-child{margin-bottom: 0;} .contitle p.title_explanation{color: #06793e; position: relative; font-size: 1.1em; text-align: center; margin-bottom: 20px; line-height: 1.6em; word-break: keep-all;} /* */ /* 곰표뮤지엄 */ /* */ #museum{position: relative;} /* 페이지 타이틀 이미지 */ #museum .page_top{background-image: url(../img/top_museum.jpg);} #museum .museum_content .museum_inner{position: relative; margin: 0 auto; width: 92%; max-width: 1600px; display: flex; align-items: flex-start; justify-content: space-between;} /* 연도 고정 */ #museum .museum_content .museum_inner .museum_year{position: sticky; width: 18%; height: calc(100vh - 200px); left: 0; top: 120px; } #museum .museum_content .museum_inner .museum_year .museum_year_inner{display: flex; position: absolute; width: 100%; height: 100%; left: 0; top: 0} /* 20 단어 */ #museum .museum_content .museum_inner .museum_year .museum_year_inner>div p{position:absolute; font-size: 36px; font-weight: bold; color: #06793e; top:0; left: 0;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul{position: relative; height: calc(100vh - 200px);} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li{position: relative; display: flex; height: 25%; flex-direction: column; justify-content: space-between; } #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a{transition-duration: 0.5s; font-size: 36px; font-weight: bold; color: #ccc;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_now a{color: #06793e;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_view a span{opacity: 1;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a span{opacity: 0; transition-duration: 0.5s;} /* 뮤지엄 내용 */ #museum .museum_content .museum_inner .museum_box{position: relative; width: 80%;} #museum .museum_content .museum_inner .museum_box>ul{padding-top: 120px;} #museum .museum_content .museum_inner .museum_box>ul>li{position: relative; top: 100px; opacity: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; margin-bottom: 20px;} #museum .museum_content .museum_inner .museum_box>ul>li img{width: 60%; border-radius: 20px; margin-bottom: 40px;} /* 내용 텍스트 */ #museum .museum_content .museum_inner .museum_box>ul>li h3{ word-break: keep-all; position: relative; font-size: 1.4em; font-weight: bold; margin-bottom: 20px;} #museum .museum_content .museum_inner .museum_box>ul>li h3::first-letter{position: relative; background-color: #F9E5C4;} #museum .museum_content .museum_inner .museum_box>ul>li h3::first-letter:after{content: ""; display: block; position: absolute; z-index: -1; width: 12px; height: 20px; background-color: #F9E5C4; top: -5px; left: -4px;} #museum .museum_content .museum_inner .museum_box>ul>li h4{font-size: 1.1em; font-weight: bold; margin-bottom: 8px; color: #626262;} #museum .museum_content .museum_inner .museum_box>ul>li p{font-size: 1em; line-height: 1.6em; text-align: justify; margin-bottom: 20px;} #museum .museum_content .museum_inner .museum_box>ul>li p.store{font-weight: bold; margin-left: 5px;} /* 짝수번째 이미지 배치 */ #museum .museum_content .museum_inner .museum_box>ul>li:nth-child(2n){align-items: flex-end;} #museum .museum_content .museum_inner .museum_box>ul>li:nth-child(2n) {text-align: right;} /* 연도별 간격 */ #museum .museum_content .museum_inner .museum_box>ul{margin-bottom: 100px} /* */ /* 곰표노포 */ /* */ #storeTop{position: relative;} /* 페이지 타이틀 이미지 */ #storeTop .page_top{background-image: url(../img/top_store.jpg);} /* 상단 텍스트 */ #store_content .store_about{position: relative;} #store_content .store_about .contitle p:last-of-type{margin: 40px 0;} #store_content .contitle .title_img{background-image: url(../img/title_store.jpg); background-size: cover; background-position: center;} /* 노포리스트 */ #store_content .store_list_wrap{position: relative; padding-top: 50px;} #store_content .store_list_wrap::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-image: url(../img/deco.png); background-size: cover; top: 30px; left: 50%; transform: translateX(-50%);} #store_content .store_list_wrap .store_list{position: relative; width: 92%; margin: 0 auto;} #store_content .store_list_wrap .store_list li{margin-bottom: 150px; display: flex; flex-direction: column; align-items: flex-start;} #store_content .store_list_wrap .store_list li:first-child{margin-top: 100px;} /*노포 짝수번째 배치 변경 */ #store_content .store_list_wrap .store_list li:nth-child(2n){align-items: flex-end; text-align: right;} #store_content .store_list_wrap .store_list li:nth-child(2n) .store_img>div{transform: scale(1.5) translateX(-100%)} /*노포 이미지 추가 */ #store_content .store_list_wrap .store_list li .store_img{max-width: 900px; height: 300px; position: relative; width: 92%; overflow: hidden; background-color: #f1f1f1; margin-bottom: 20px;} #store_content .store_list_wrap .store_list li .store_img>div{background-position: center; background-size: cover; position: relative; transform: scale(1.5) translateX(100%); width: 100%; height: 300px; transition-duration: 0.5s; opacity: 0; cursor: pointer;} #store_content .store_list_wrap .store_list li:nth-child(1) .store_img>div{background-image: url(../img/store0.jpg);} #store_content .store_list_wrap .store_list li:nth-child(2) .store_img>div{background-image: url(../img/store1.jpg);} #store_content .store_list_wrap .store_list li:nth-child(3) .store_img>div{background-image: url(../img/store2.jpg);} #store_content .store_list_wrap .store_list li:nth-child(4) .store_img>div{background-image: url(../img/store3.jpg);} /* 노포 텍스트 배치 */ #store_content .store_list_wrap .store_list li .store_text h3{font-size: 1.1em; font-weight:600; margin-bottom: 10px;} #store_content .store_list_wrap .store_list li .store_text h3 span{font-size: 1.4em; margin-left: 10px;} #store_content .store_more{width: 300px; height: 60px; border: 1px solid #06793e; border-radius: 31px; background: none; position: relative; margin: 100px auto; display: block;} /* */ /* 쿠킹연구소 */ /* */ #labTop{position: relative;} /* 페이지 타이틀 이미지 */ #labTop .page_top{background-image: url(../img/top_lab.jpg);} #labAbout{position: relative;} #labAbout .contitle .title_img{background-image: url(../img/title_lab.jpg); background-size: cover; background-position: center;} /* 연구소 내용 목록 */ #labAbout>ul{position: relative; margin: 40px auto; width: 400px; display: flex; justify-content: space-between;} #labAbout>ul li{position: relative; width: 48%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 20px;} #labAbout>ul li::after{content: ""; display: block; position: absolute; border: 2px solid #ccc; border-radius: 20px; height: 100%; width: 100%; top: 0; left: 0; transition-duration: 0.5s; box-sizing: border-box;} #labAbout>ul li:hover::after{border: 4px solid #06793e;} #labAbout>ul li.select::after{border: 4px solid #06793e;} #labAbout>ul li img{width: 80px; margin-bottom: 20px;} #labAbout>ul li img:last-child{display: none;} #labAbout>ul li.select img:first-child{display: none;} #labAbout>ul li.select img:last-child{display: block;} #labAbout>ul li h3{font-size: 1.1em; margin-bottom: 16px; font-weight: bold; } #labAbout>ul li.select h3 a{color: #06793e; transition-duration: 0.5s;} #labAbout>ul li p{line-height: 1.6em; text-align: center; transition-duration: 0.5s;} #labAbout>ul li.select p{color: #06793e;} /* 탭 */ #labAbout{position: relative;} #labAbout .lab_tab_wrap{position: relative; height: 40px;} #labAbout .lab_tab_wrap .lab_tab{position: relative; display: flex; width: 400px; left: 50%; transform: translateX(-50%); z-index: 99; border: 2px solid #06793e; opacity: 0; transition-duration: 0.5s; border-radius: 0 0 20px 20px; overflow: hidden; border-top: none; background-color: #fff; } #labAbout .lab_tab_wrap .lab_tab.change_tab{position: fixed; width: 400px; top: 60px; opacity: 1;} #labAbout .lab_tab_wrap .lab_tab li{width: 50%;cursor: pointer; transition-duration: 0.5s; line-height: 40px;} #labAbout .lab_tab_wrap .lab_tab li p{font-size: 1em; text-align: center; position: relative;} #labAbout .lab_tab_wrap .lab_tab li.select{background-color: #06793e;} #labAbout .lab_tab_wrap .lab_tab li.select p{color: #fff;} #labAbout .lab_tab_wrap .lab_tab li.select p::after{background-color: #06793e; width: 100%; height: 3px; content: ""; display: block; position: absolute; bottom: 0; left: 0;} /* lab내용 */ /* 베이커리세미나 */ #lab_content{position: relative;} #lab_content .contitle h2{margin-bottom: 20px; position: relative;} #lab_content .contitle h3{font-size: 1.8em; font-weight: 700; text-align: center; margin-bottom: 20px;} #lab_content .contitle p{word-break: keep-all;} /* 현장스케치 */ #lab_content .now_seminar{padding-bottom: 220px; background-image: url(../img/lab_text.png); background-repeat: repeat-x; background-position: 0 bottom; margin-bottom: 100px;} #lab_content .now_seminar .now_wrap{background-color: #ffdb6c; overflow: hidden; padding: 30px 0; box-sizing: border-box; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul{position: relative; display: flex; width: 300%;} #lab_content .now_seminar .now_wrap ul li{width: 33.333%; display: flex; flex-direction: column; justify-content: center; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul li .li_inner{width: 92%;margin: 0 auto; background-color: #fff; padding: 40px 60px; box-sizing: border-box; border-radius: 20px;} /* 현장스케치 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap{display: flex; flex-direction: column; align-items: flex-start;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about p{font-size: 1.1em; margin-right: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about h3{font-size: 1.4em; font-weight: bold;} /* 현장스케치 더보기 버튼 */ #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn{font-size: 1.1em; background: none; border: 1px solid #06793e; width: 100px; height: 30px; border-radius: 21px; transition: 0.5s; margin-top: -40px; color: #06793e; align-self: flex-end; margin-bottom: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn.select{background-color: #06793e; color: #fff; } /* 현장스케치 추가 내용 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more{background-color: #f1f1f1; padding: 10px; border: 1px solid #06793e; border-radius: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p{line-height: 1.6em; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p span{font-weight: bold; margin-right: 10px;} /* 현장스케치 이미지 */ #lab_content .now_seminar .now_wrap ul li>div>div:first-child{width: 100%; background-color: #626262; height: 250px; overflow: hidden; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap ul li img{width: 100%; position: relative; top: 50%; transform: translateY(-50%);} /* 현장스케치 버튼 */ #lab_content .now_seminar .now_wrap .now_btn_wrap{position: relative; display: flex; justify-content: center; margin-bottom: 20px;} #lab_content .now_seminar .now_wrap .now_btn_wrap .now_btn{width: 40px; height: 40px; border-radius: 50%; background-color: #fff; border: none;} #lab_content .now_seminar .now_wrap .now_btn_wrap .now_btn img{width: 100%;} #lab_content .now_seminar .now_wrap .now_btn_wrap .prev{margin-right: 20px;} /* 지난세미나 */ #lab_content .last_seminar{position: relative; width: 92%; max-width: 1600px; margin: 100px auto 120px auto;} #lab_content .last_seminar ul{display: flex; flex-wrap: wrap; margin-top: 40px;} #lab_content .last_seminar ul li{position: relative; width: 32%; margin-right: 2%; overflow: hidden; margin-bottom: 4%; border-radius: 20px;} #lab_content .last_seminar ul li:nth-child(3n){margin-right: 0;} #lab_content .last_seminar ul li .img_box{position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center;} #lab_content .last_seminar ul li .img_box img{width: 100%; max-width: 334px; opacity: 0.7; transition-duration: 0.5s;} /* 이미지 텍스트 박스 */ #lab_content .last_seminar ul li .img_box .text_box{position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition-duration: 0.5s; background-color: #fff; padding: 4px 0;} #lab_content .last_seminar ul li .text_box p{font-size: 0.9em; margin-bottom: 4px;} #lab_content .last_seminar ul li .text_box h3{font-size: 1em; font-weight: bold; margin-bottom: 10px;} #lab_content .last_seminar ul li .text_box button{font-size: 0.9em; background: none; border: 1px solid #06793e; width: 80px; height: 24px; border-radius: 13px; color: #06793e; transition-duration: 0.5s; text-align: center;} /* 이미지 아래의 텍스트 조절 */ #lab_content .last_seminar ul li .text_box>*{display: none;} #lab_content .last_seminar ul li .text_box h3{display: block;} /* hover */ #lab_content .last_seminar ul li:hover .text_box{padding: 10px 0;} #lab_content .last_seminar ul li:hover .text_box p, #lab_content .last_seminar ul li:hover .text_box button{display: block;} #lab_content .last_seminar ul li:hover .img_box img{opacity: 1;} #lab_content .last_seminar ul li .text_box button:hover{color: #fff; background-color: #06793e;} /* 레시피 */ #lab_content .recipe{position: relative; width: 92%; margin: 0 auto 120px auto; display: none;} /* 레시피 목록 */ #lab_content .recipe>ul>li {margin-bottom: 80px;} #lab_content .recipe>ul>li .recipe_card{display: flex; flex-direction: column; border-radius: 20px; border: 4px solid #ccc; overflow: hidden; transition-duration: 0.5s;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(1){position: relative; height: 300px; overflow: hidden;} #lab_content .recipe>ul>li .recipe_card img{position: relative; width: 100%; top: 65%; transform: translateY(-50%);} /* 목록 - 중앙 타이틀과 텍스트부분 */ #lab_content .recipe>ul>li .recipe_card>div:nth-child(2){padding: 20px; box-sizing: border-box; } #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title p{margin-bottom: 10px; font-size: 1.1em; word-break: keep-all;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title h2{margin-bottom: 20px; font-size: 1.4em; font-weight: bold;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li{margin-bottom: 10px; line-height: 20px;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li span{width: 20px; height: 20px; border-radius: 50%; background-color: #06793e; color: #fff; display: inline-block; text-align: center; margin-right: 10px;} /* 목록 - 자세한 레시피 버튼*/ #lab_content .recipe>ul>li .recipe_card>button{ height:60px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition-duration: 0.5s; border: none; background-color: #fff;} #lab_content .recipe>ul>li .recipe_card>button p{color: #06793e;} #lab_content .recipe>ul>li .recipe_card>button .arrow{position: relative; width: 30px; height: 30px; transform: rotate(0deg); transition-duration: 0.5s; } #lab_content .recipe>ul>li .recipe_card>button .arrow span{background-color: #06793e; width: 16px; height: 2px; display: block; position: absolute; top: 14px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:first-child{transform: rotate(45deg); margin-left: 2px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:last-child{transform: rotate(135deg); margin-left: 12px;} #lab_content .recipe>ul>li .recipe_card>button:hover{background-color: #F9E5C4;} /* 선택된 레시피 */ #lab_content .recipe>ul>li.select .recipe_card>button{background-color: #F9E5C4;} #lab_content .recipe>ul>li.select .recipe_card>button .arrow{transform: rotate(-180deg);} #lab_content .recipe>ul>li.select .recipe_card{border-radius: 20px 20px 0 0; border-bottom-width: 2px;} /* 자세한 레시피 */ #lab_content .recipe>ul>li .recipe_more .more_wrap{display: none; border: 4px solid #ccc; border-radius: 0 0 20px 20px; border-top: none; background-color: #f1f1f1;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li{position: relative; padding: 20px; box-sizing: border-box;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li::after{content: ""; display: block; position: absolute; width: 90%; height: 2px; background-color: #06793e; bottom: 0; left: 50%; transform: translateX(-50%);} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li:last-child::after{display: none;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div{display: flex; justify-content: space-between;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about{ width: 48%; box-sizing: border-box;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about h3{font-size: 1.4em; font-weight: bold; margin-bottom: 20px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div{display: flex; position: relative;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p:first-child{width: 40px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p:last-child{width: calc(100% - 40px); line-height: 1.6em;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process{width: 48%;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li{line-height: 1.6em;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li span{width: 16px; height: 16px; border-radius: 50%; background-color: #ccc; display: inline-block; text-align: center; margin-right: 10px; line-height: 16px;} } /* Mobile */ @media screen and (max-width:600px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -30px; margin-bottom: 100px;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 100%; background-color: #06793e;} .pnb .pnb_inner ul{display: flex; height: 60px; align-items: center; justify-content: center;} .pnb .pnb_inner ul li a{position: relative; color: #ccc;text-align: center; font-size: 0.9em; margin: 0 10px;} .pnb .pnb_inner ul li.select a{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -12px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{overflow: hidden; position: relative; width: 100%; height: 560px;} .page_top{transition-duration: 0.5s; position: absolute; width: 90%; height: 200px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 100px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; width:100%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 2.2em; font-weight: bold; color: #fff;} /* 섹션 타이틀 */ .contitle h2{text-shadow: 0 0 4px rgba(255, 255, 255, 0.8); font-size: 1.6em; font-weight: 600; text-align: center; z-index: 1; position: relative; color: #000;} .contitle .title_img{position: relative; width: 70%; height: 120px; margin: 20px auto; bottom: -40px;} .contitle p{position: relative; font-size: 0.9em; text-align: center; margin-bottom: 10px; line-height: 1.6em; word-break: keep-all;} .contitle p:last-child{margin-bottom: 0;} .contitle p.title_explanation{color: #06793e; position: relative; font-size: 1em; text-align: center; margin-bottom: 20px; line-height: 1.6em; word-break: keep-all;} /* */ /* 곰표뮤지엄 */ /* */ #museum{position: relative;} /* 페이지 타이틀 이미지 */ #museum .page_top{background-image: url(../img/top_museum.jpg);} #museum .museum_content .museum_inner{position: relative; margin: 0 auto; width: 92%; max-width: 1600px; display: flex; align-items: flex-start; justify-content: space-between;} /* 연도 고정 */ #museum .museum_content .museum_inner .museum_year{position: sticky; width: 16%; height: calc(100vh - 200px); left: 0; top: 120px; } #museum .museum_content .museum_inner .museum_year .museum_year_inner{display: flex; position: absolute; width: 100%; height: 100%; left: 0; top: 0} /* 20 단어 */ #museum .museum_content .museum_inner .museum_year .museum_year_inner>div p{position:absolute; font-size: 28px; font-weight: bold; color: #06793e; top:0; left: 0;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul{position: relative; height: calc(100vh - 200px);} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li{position: relative; display: flex; height: 25%; flex-direction: column; justify-content: space-between;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a{transition-duration: 0.5s; font-size: 28px; font-weight: bold; color: #ccc; } #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_now a{color: #06793e;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li.year_view a span{opacity: 1;} #museum .museum_content .museum_inner .museum_year .museum_year_inner>ul li a span{opacity: 0; transition-duration: 0.5s;} /* 뮤지엄 내용 */ #museum .museum_content .museum_inner .museum_box{position: relative; width: 72%;} #museum .museum_content .museum_inner .museum_box>ul{padding-top: 120px;} #museum .museum_content .museum_inner .museum_box>ul>li{position: relative; top: 100px; opacity: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; margin-bottom: 40px;} #museum .museum_content .museum_inner .museum_box>ul>li img{width: 100%; border-radius: 20px; margin-bottom: 20px;} /* 내용 텍스트 */ #museum .museum_content .museum_inner .museum_box>ul>li h3{ word-break: keep-all; position: relative; font-size: 1.2em; font-weight: bold; margin-bottom: 10px;} #museum .museum_content .museum_inner .museum_box>ul>li h3::first-letter{position: relative; background-color: #F9E5C4; } #museum .museum_content .museum_inner .museum_box>ul>li h3::first-letter:after{content: ""; display: block; position: absolute; z-index: -1; width: 12px; height: 20px; background-color: #F9E5C4; top: -5px; left: -4px;} #museum .museum_content .museum_inner .museum_box>ul>li h4{font-size: 0.9em; font-weight: bold; margin-bottom: 4px; color: #626262;} #museum .museum_content .museum_inner .museum_box>ul>li p{font-size: 0.9em; line-height: 1.6em; text-align: justify; margin-bottom: 10px;} #museum .museum_content .museum_inner .museum_box>ul>li p.store{font-weight: bold; margin-left: 5px; font-size: 0.8em;} /* 짝수번째 이미지 배치 */ #museum .museum_content .museum_inner .museum_box>ul>li:nth-child(2n){align-items: flex-end;} /* 연도별 간격 */ #museum .museum_content .museum_inner .museum_box>ul{margin-bottom: 50px;} /* */ /* 곰표노포 */ /* */ #storeTop{position: relative;} /* 페이지 타이틀 이미지 */ #storeTop .page_top{background-image: url(../img/top_store.jpg);} /* 상단 텍스트 */ #store_content .store_about{position: relative;} #store_content .store_about .contitle p:last-of-type{margin: 30px 0;} #store_content .store_about .contitle p:nth-of-type(2) br{display: none;} #store_content .contitle .title_img{background-image: url(../img/title_store.jpg); background-size: cover; background-position: center;} /* 노포리스트 */ #store_content .store_list_wrap{position: relative; padding-top: 50px;} #store_content .store_list_wrap::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-image: url(../img/deco.png); background-size: cover; top: 30px; left: 50%; transform: translateX(-50%);} #store_content .store_list_wrap .store_list{position: relative;} #store_content .store_list_wrap .store_list li{margin-bottom: 150px; display: flex; flex-direction: column; align-items: flex-start;} #store_content .store_list_wrap .store_list li:first-child{margin-top: 80px;} /*노포 짝수번째 배치 변경 */ #store_content .store_list_wrap .store_list li:nth-child(2n){align-items: flex-end; text-align: right;} #store_content .store_list_wrap .store_list li:nth-child(2n) .store_img>div{transform: scale(1.5) translateX(-100%)} /*노포 이미지 추가 */ #store_content .store_list_wrap .store_list li .store_img{max-width: 900px; height: 250px; position: relative; width: 92%; overflow: hidden; background-color: #f1f1f1; margin-bottom: 20px;} #store_content .store_list_wrap .store_list li .store_img>div{background-position: center; background-size: cover; position: relative; transform: scale(1.5) translateX(100%); width: 100%; height: 250px; transition-duration: 0.5s; opacity: 0; cursor: pointer;} #store_content .store_list_wrap .store_list li:nth-child(1) .store_img>div{background-image: url(../img/store0.jpg);} #store_content .store_list_wrap .store_list li:nth-child(2) .store_img>div{background-image: url(../img/store1.jpg);} #store_content .store_list_wrap .store_list li:nth-child(3) .store_img>div{background-image: url(../img/store2.jpg);} #store_content .store_list_wrap .store_list li:nth-child(4) .store_img>div{background-image: url(../img/store3.jpg);} /* 노포 텍스트 배치 */ #store_content .store_list_wrap .store_list li .store_text{width: 92%; position: relative; margin: 0 auto;} #store_content .store_list_wrap .store_list li .store_text h3{font-size: 1em; font-weight:600; margin-bottom: 10px;} #store_content .store_list_wrap .store_list li .store_text p{font-size: 0.9em;} #store_content .store_list_wrap .store_list li .store_text h3 span{font-size: 1.2em; margin-left: 10px;} #store_content .store_more{width: 300px; height: 60px; border: 1px solid #06793e; border-radius: 31px; background: none; position: relative; margin: 100px auto; display: block;} /* */ /* 쿠킹연구소 */ /* */ #labTop{position: relative;} /* 페이지 타이틀 이미지 */ #labTop .page_top{background-image: url(../img/top_lab.jpg);} #labAbout{position: relative;} #labAbout .contitle .title_img{background-image: url(../img/title_lab.jpg); background-size: cover; background-position: center;} /* 연구소 내용 목록 */ #labAbout>ul{position: relative; margin: 40px auto; width: 300px; display: flex; justify-content: space-between;} #labAbout>ul li{position: relative; width: 48%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 20px;} #labAbout>ul li::after{content: ""; display: block; position: absolute; border: 2px solid #ccc; border-radius: 20px; height: 100%; width: 100%; top: 0; left: 0; transition-duration: 0.5s; box-sizing: border-box;} #labAbout>ul li:hover::after{border: 4px solid #06793e;} #labAbout>ul li.select::after{border: 4px solid #06793e;} #labAbout>ul li img{width: 50px; margin-bottom: 20px;} #labAbout>ul li img:last-child{display: none;} #labAbout>ul li.select img:first-child{display: none;} #labAbout>ul li.select img:last-child{display: block;} #labAbout>ul li h3{font-size: 1em; font-weight: bold; margin-bottom: 8px;} #labAbout>ul li.select h3 a{color: #06793e; transition-duration: 0.5s;} #labAbout>ul li p{line-height: 1.6em; text-align: center; transition-duration: 0.5s; font-size: 0.9em;} #labAbout>ul li.select p{color: #06793e;} /* 탭 */ #labAbout{position: relative;} #labAbout .lab_tab_wrap{position: relative; height: 30px;} #labAbout .lab_tab_wrap .lab_tab{position: relative; display: flex; width: 280px; left: 50%; transform: translateX(-50%); z-index: 99; border: 2px solid #06793e; opacity: 0; transition-duration: 0.5s; border-radius: 0 0 20px 20px; overflow: hidden; border-top: none; background-color: #fff; } #labAbout .lab_tab_wrap .lab_tab.change_tab{position: fixed; width: 280px; top: 50px; opacity: 1;} #labAbout .lab_tab_wrap .lab_tab li{width: 50%;cursor: pointer; transition-duration: 0.5s; line-height: 30px;} #labAbout .lab_tab_wrap .lab_tab li p{font-size: 0.9em; text-align: center; position: relative;} #labAbout .lab_tab_wrap .lab_tab li.select{background-color: #06793e;} #labAbout .lab_tab_wrap .lab_tab li.select p{color: #fff;} #labAbout .lab_tab_wrap .lab_tab li.select p::after{background-color: #06793e; width: 100%; height: 3px; content: ""; display: block; position: absolute; bottom: 0; left: 0;} /* lab내용 */ /* 베이커리세미나 */ #lab_content{position: relative;} #lab_content .contitle h2{margin-bottom: 20px; position: relative;} #lab_content .contitle h3{font-size: 1.2em; font-weight: 700; text-align: center; margin-bottom: 20px;} #lab_content .contitle p{word-break: keep-all; font-size: 0.9em; margin-bottom: 0;} /* 현장스케치 */ #lab_content .now_seminar{padding-bottom: 150px; background-image: url(../img/lab_text.png); background-repeat: repeat-x; background-position: 0 bottom; margin-bottom: 100px; background-size: 300%;} #lab_content .now_seminar .now_wrap{background-color: #ffdb6c; overflow: hidden; padding: 30px 0; box-sizing: border-box; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul{position: relative; display: flex; width: 300%;} #lab_content .now_seminar .now_wrap ul li{width: 33.333%; display: flex; flex-direction: column; justify-content: center; transition-duration: 0.5s;} #lab_content .now_seminar .now_wrap ul li .li_inner{width: 92%;margin: 0 auto; background-color: #fff; padding: 20px; box-sizing: border-box; border-radius: 20px;} /* 현장스케치 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap{display: flex; flex-direction: column; align-items: flex-start;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about p{font-size: 0.9em; margin-right: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about h3{font-size: 1.2em; font-weight: bold;} /* 현장스케치 더보기 버튼 */ #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn{font-size: 0.9em; background: none; border: 1px solid #06793e; width: 60px; height: 24px; border-radius: 13px; transition: 0.5s; margin-top: -30px; color: #06793e; align-self: flex-end; margin-bottom: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .about_more_btn.select{background-color: #06793e; color: #fff; } /* 현장스케치 추가 내용 */ #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more{background-color: #f1f1f1; padding: 10px; border: 1px solid #06793e; border-radius: 20px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p{line-height: 1.6em; margin-bottom: 8px; font-size: 0.9em;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p span{font-weight: bold; margin-right: 10px;} #lab_content .now_seminar .now_wrap ul li .li_inner .now_text_wrap .about_more p:last-child{margin-bottom: 0;} /* 현장스케치 이미지 */ #lab_content .now_seminar .now_wrap ul li>div>div:first-child{width: 100%; background-color: #626262; height: 180px; overflow: hidden; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap ul li img{width: 100%; position: relative; top: 20%; transform: translateY(-50%);} /* 현장스케치 버튼 */ #lab_content .now_seminar .now_wrap .now_btn_wrap{position: relative; display: flex; justify-content: center; margin-bottom: 10px;} #lab_content .now_seminar .now_wrap .now_btn_wrap .now_btn{width: 30px; height: 30px; border-radius: 50%; background-color: #fff; border: none;} #lab_content .now_seminar .now_wrap .now_btn_wrap .now_btn img{width: 100%;} #lab_content .now_seminar .now_wrap .now_btn_wrap .prev{margin-right: 20px;} /* 지난세미나 */ #lab_content .last_seminar{position: relative; width: 92%; margin: 100px auto 100px auto;} #lab_content .last_seminar ul{display: flex; flex-wrap: wrap; justify-content: space-between;} #lab_content .last_seminar ul li{position: relative; width: 48%;overflow: hidden; margin-bottom: 4%; border-radius: 20px;} #lab_content .last_seminar ul li .img_box{position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center;} #lab_content .last_seminar ul li .img_box img{width: 100%; max-width: 334px; opacity: 0.7; transition-duration: 0.5s;} /* 이미지 텍스트 박스 */ #lab_content .last_seminar ul li .img_box .text_box{position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition-duration: 0.5s; background-color: #fff; padding: 4px 0;} #lab_content .last_seminar ul li .text_box p{font-size: 0.8em; margin-bottom: 4px;} #lab_content .last_seminar ul li .text_box h3{font-size: 0.9em; font-weight: bold; margin-bottom: 10px;} #lab_content .last_seminar ul li .text_box button{font-size: 0.8em; background: none; border: 1px solid #06793e; width: 80px; height: 24px; border-radius: 13px; color: #06793e; transition-duration: 0.5s; text-align: center;} /* 이미지 아래의 텍스트 조절 */ #lab_content .last_seminar ul li .text_box>*{display: none;} #lab_content .last_seminar ul li .text_box h3{display: block;} /* hover */ #lab_content .last_seminar ul li:hover .text_box{padding: 8px 0;} #lab_content .last_seminar ul li:hover .text_box p, #lab_content .last_seminar ul li:hover .text_box button{display: block;} #lab_content .last_seminar ul li:hover .img_box img{opacity: 1;} #lab_content .last_seminar ul li .text_box button:hover{color: #fff; background-color: #06793e;} /* 레시피 */ #lab_content .recipe{position: relative; width: 92%; margin: 0 auto 100px auto; display: none;} /* 레시피 목록 */ #lab_content .recipe>ul>li {margin-bottom: 60px;} #lab_content .recipe>ul>li .recipe_card{display: flex; flex-direction: column; border-radius: 20px; border: 2px solid #ccc; overflow: hidden; transition-duration: 0.5s;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(1){position: relative; height: 200px; overflow: hidden;} #lab_content .recipe>ul>li .recipe_card img{position: relative; width: 100%; top: 65%; transform: translateY(-50%);} /* 목록 - 중앙 타이틀과 텍스트부분 */ #lab_content .recipe>ul>li .recipe_card>div:nth-child(2){padding: 16px; box-sizing: border-box; } #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title p{margin-bottom: 8px; font-size: 0.9em; word-break: keep-all;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .recipe_title h2{margin-bottom: 20px; font-size: 1.2em; font-weight: bold;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li{margin-bottom: 8px; line-height: 20px; font-size: 0.9em;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li:last-child{margin-bottom: 0;} #lab_content .recipe>ul>li .recipe_card>div:nth-child(2) .main_recipe li span{width: 20px; height: 20px; border-radius: 50%; background-color: #06793e; color: #fff; display: inline-block; text-align: center; margin-right: 5px; font-size: 0.9em;} /* 목록 - 자세한 레시피 버튼*/ #lab_content .recipe>ul>li .recipe_card>button{ height:40px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition-duration: 0.5s; border: none; background-color: #fff;} #lab_content .recipe>ul>li .recipe_card>button p{color: #06793e; font-size: 0.9em} #lab_content .recipe>ul>li .recipe_card>button .arrow{position: relative; width: 20px; height: 20px; transform: rotate(0deg); transition-duration: 0.5s;} #lab_content .recipe>ul>li .recipe_card>button .arrow span{background-color: #06793e; width: 10px; height: 2px; display: block; position: absolute; top: 10px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:first-child{transform: rotate(45deg); margin-left: 2px;} #lab_content .recipe>ul>li .recipe_card>button .arrow span:last-child{transform: rotate(135deg); margin-left: 8px;} #lab_content .recipe>ul>li .recipe_card>button:hover{background-color: #F9E5C4;} /* 선택된 레시피 */ #lab_content .recipe>ul>li.select .recipe_card>button{background-color: #F9E5C4;} #lab_content .recipe>ul>li.select .recipe_card>button .arrow{transform: rotate(-180deg);} #lab_content .recipe>ul>li.select .recipe_card{border-radius: 20px 20px 0 0; border-bottom-width: 2px;} /* 자세한 레시피 */ #lab_content .recipe>ul>li .recipe_more .more_wrap{display: none; border: 2px solid #ccc; border-radius: 0 0 20px 20px; border-top: none; background-color: #f1f1f1;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li{position: relative; padding: 16px; box-sizing: border-box;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li::after{content: ""; display: block; position: absolute; width: 90%; height: 2px; background-color: #06793e; bottom: 0; left: 50%; transform: translateX(-50%);} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li:last-child::after{display: none;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about{ box-sizing: border-box; } #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about h3{font-size: 1.1em; font-weight: bold; margin-bottom: 10px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div{ position: relative;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p:first-child{font-weight: bold; } #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .about>div p{font-size: 0.9em; margin-bottom: 8px; text-align: center; line-height: 1.6em;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process {background-color: #fff; box-sizing: border-box; padding: 8px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li{line-height: 1.6em; font-size: 0.9em;margin-bottom: 4px;} #lab_content .recipe>ul>li .recipe_more .more_wrap>ul>li>div .process ol li span{width: 16px; height: 16px; border-radius: 50%; background-color: #ccc; display: inline-block; text-align: center; margin-right: 5px; line-height: 16px;} }