.more_btn a{display: block} .more_btn a .btn_w{background: #ECE2DF;border-radius: 10px;padding: 3px;width: 430px;overflow: hidden;position: relative;} .more_btn a .btn_w div{position: relative;z-index: 2;display: flex;align-items: center;height: 94px;background: #fff;border-radius: 8px;;justify-content: space-between;padding: 0 40px;} .more_btn a .btn_w div strong{flex-shrink: 50px;color: #370D00;font-weight: 900;font-size: 50px;transition: 0.7s;} .more_btn a .btn_w div i{display: block;transition: 0.7s} .more_btn a:hover .btn_w div i{transform: translateX(15px)} .more_btn a:hover .btn_w div strong{color: #C10808;} .more_btn a:ver .btn_w div path{transition: 0.7s;} .more_btn a:hover .btn_w div path{fill: #C10808;} .more_btn a .btn_w:before{content: '';display: block;position: absolute;width: 0%;height: 100%;background-color: #C10808;top: 0;left: 0;transition: 0.7s;} .more_btn a:hover .btn_w:before{width: 100%;} .m_title_w .tag{display: flex;margin-bottom: 25px;} .m_title_w .tag .tag_in i img{display: block;margin: 0 auto} .m_title_w .tag .tag_in strong{display: flex;padding: 0 35px;height: 50px;background: #370D00;border-radius: 30px;align-items: center;font-size: 24px;color: #FFFFFF;margin-top: -1px;} .m_title_w .tit strong{display: block;font-size: 120px;color: #370D00;font-weight: 900;line-height: 120px;} .main_visual{width:100%;position: relative;z-index: 3; padding-top: 50.6%;;background: #f2f4f5;} .main_visual .thum_wrap{position: absolute;width: 100;z-index: 15;width: 100%;bottom: 20px;;display: flex;justify-content: center;gap: 0 20px;align-items: center} .main_visual .thum_wrap button svg path{transition: 0.7s;} .main_visual .thum_wrap button{transition: 0.7s;display: block;} .main_visual .thum_wrap button.slick-prev:hover{transform: translateX(-20px);} .main_visual .thum_wrap button.slick-next:hover{transform: translateX(20px);} .main_visual .thum_wrap button:hover svg path{transition: 0.7s;fill: #FF1010;} .main_visual .thum_wrap ul{display: flex;gap: 0 10px;} .main_visual .thum_wrap ul li{width: 20px;height: 4px;border-radius: 2px;transition: 0.5s; background: #FFFFFF;opacity: 0.5;border-radius: 2px;} .main_visual .thum_wrap ul li.on{width: 200px;background: #FFFFFF;opacity: 1} .main_visual .main_slider{ height:100%;overflow: hidden; position: absolute;top: 0;width: 100%} .main_visual .main_slider .slide_box .slide_bg{background: #17273c; opacity: 0.9; position: absolute; top: 0;left: 0; width: 245px; height: 100%} .main_visual .main_slider .slide_box{ overflow: hidden;width:100%;height:100%; position: relative; background-color: #fff; } .main_visual .main_slider .slide_box > div{ overflow: hidden;height:inherit;position: absolute;left:0;top:0;right:0; z-index: 3; overflow: hidden; width: 100%; height: 100%; opacity:0; } .main_visual .main_slider .slide_box > div{ -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } .main_visual .main_slider .slide_box .main_img{ position: absolute;left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; -moz-transition: all 8s ; -webkit-transition: all 8s; -o-transition: all 8s; -ms-transition: all 8s ; transition: all 8s ; transform: scale(1.0); } .main_visual .main_slider .slide_box .main_img img{width: 100%;display: block} .main_visual .main_slider .slide_box .main_img img.pc{display: block} .main_visual .main_slider .slide_box .main_img img.mo{display: none} .main_visual .main_slider .slide_box > div.on .main_img{ transform: scale(1.0); transform:perspective(500px) rotate(.001deg);} .main_visual .main_slider .slide_box .box1{background:url('/img/main/main_visual01.jpg') center center no-repeat; background-size:cover;} n_visual .main_slider .slide_box div > div{position: relative; } .main_visual .main_slider .slide_box div > div .txt_wrap{padding-left: 120px} #bo_sch{border: none} .main_visual .main_slider .slide_box > div.on{ z-index: 5; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" } #main .main_con01{position: relative;} #main .main_con01 .frame{position: absolute;width: 100%;height: 556px;padding: 0 40px;top: 50%;transform: translateY(-50%) translateX(-50%);left: 50%;} #main .main_con01 .frame > div{position: relative;height: 100%;width: 100%} #main .main_con01 .frame > div .dot01{position: absolute;top: 0;left: 0} #main .main_con01 .frame > div .dot02{position: absolute;top: 0;right: 0} #main .main_con01 .frame > div .dot03{position: absolute;bottom: 0;right: 0} #main .main_con01 .frame > div .dot04{position: absolute;bottom: 0;left: 0} #main .main_con01 .rolling_txt{position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;} #main .main_con01 .rolling_txt strong{font-size: 200px;color: #370D00;font-weight: 900;white-space: nowrap;letter-spacing: -5px} #main .main_con01 .video_in{height: 100vh;position: relative;overflow: hidden;clip-path: inset(300px calc(50% - 660px) calc(50vh - 278px) calc(50% - 660px) round 278px);} #main .main_con01 .video_in .video{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)} #main .main_con01 .video_in .video video{display: block} #main .main_con01 .video_in .rolling_txt{color: #FFFFFF;mix-blend-mode: overlay} #main .main_con01 .video_in .rolling_txt strong{color: #FFFFFF;mix-blend-mode: overlay} #main .main_con01 .title{position: absolute;width: 100%;left: 0;margin-top: -337px;top: 50%;text-align: center} #main .main_con01 .title strong{font-size: 40px;color: #C10808;font-weight: 900;letter-spacing: -0.7px;} #main .main_con06 > div{padding: 80px;display: flex;align-items: center;padding-bottom: 200px;} #main .main_con06 .fran_img {width: 50%} #main .main_con06 .fran_img .img_w{position: relative;padding-top: 56%;background: #000;border-radius: 20px;width: 100%;overflow: hidden} #main .main_con06 .fran_img .img_w img{position: absolute;top: 0;left: 0;display: block;margin-top: -40%;} #main .main_con06 .txt_wrap{padding-left: 80px;} #main .main_con06 .txt_wrap > strong{display: block;margin-bottom: 10px; font-size: 120px;font-weight: 900;color: #370D00;} #main .main_con06 .txt_wrap > p{font-size: 24px;color: #370D00;font-weight: 500;margin-bottom: 80px;} #main .main_con07{display: flex} #main .main_con07 > div{width: 50%} #main .main_con07 .m_title_w{padding-top: 120px;padding-left: 20px;position: relative} /* #main .main_con07 .m_title_w .bg{position: absolute;top: 0;left: 0;width: 305px;height: 644px;border-radius: 0 10px 10px 0;background: #F8F5EE;} #main .main_con07 .m_title_w .bg2{position: absolute;bottom: 278px;left: 50%;margin-right:20px;width: 450px;height: 407px;border-radius: 10px;background: #F8F5EE;} */ #main .main_con07 .m_title_w .bg2, #main .main_con07 .m_title_w .bg{display: none} #main .main_con07 .m_title_w .tag, #main .main_con07 .m_title_w .tit{position: relative;z-index: 5} .m_title_w .tag .tag_in{animation: tag 2s infinite linear;transform-origin: center top} @keyframes tag{ 0%{transform: rotate(0deg)} 25%{transform: rotate(2deg)} 50%{transform: rotate(0deg)} 75%{transform: rotate(-2deg)} 100%{transform: rotate(0deg)} } #main .main_con07 .loop_content{display: flex;;gap: 0 20px;padding-top: 120px;} #main .main_con07 .loop_content > div{padding: 0 33px;background-color: #F1EADB;border-radius: 10px;overflow: hidden;;} #main .main_con07 .loop_content > div.loop{height: 800px;;} #main .main_con07 .loop_content > div.loop02{margin-top: 60px;} #main .main_con07 .loop_content > div.loop02{margin-top: 60px;} #main .main_con07 .loop_content > div ul.n3{margin-top: 0} #main .main_con07 .loop_content > div ul.n1{margin-top: 0} #main .main_con07 .loop_content > div ul{display: flex;flex-direction: column;gap: 30px;margin-top: 30px} #main .main_con07 .loop_content > div ul.n3{margin-top: 0} #main .main_con07 .loop_content > div ul.n1{margin-top: 0} #main .main_con07 .loop_content > div ul li {position: relative;border-radius: 10px;overflow: hidden} #main .main_con07 .loop_content > div ul li .img img{display: block;width: 100%} #main .main_con07 .loop_content > div ul li .img{border-radius: 10px;overflow: hidden;;} #main .main_con07 .loop_content > div ul li .img:before{content: '';position: absolute;bottom: 0;left: 0;;display: block;;width: 100%;height: 108px;background: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,1));;} #main .main_con07 .loop_content > div ul li strong{font-size: 22px;position: absolute;bottom: 0;left: 0;padding:20px 30px ;color: #fff;} #main .main_con05{background: #C10808;padding-top: 230px;padding-bottom: 50px;border-radius: 0 0 60px 60px;} #main .main_con05 .swiper .wrap .pizza_img{transition:0.7s;position: relative;height: 500px;;margin-top: 250px;} #main .main_con05 .swiper .wrap .pizza_img div{transition:0.7s;transform: scale(0.6);position: absolute;left: 50%;top: 50%;margin-left: -345px;margin-top: -345px;} #main .main_con05 .swiper .wrap .pizza_img img{width: 690px} #main .main_con05 .swiper .swiper-slide-active .wrap .pizza_img{width: 100%;height: 500px;margin-top: 0;} #main .main_con05 .swiper .swiper-slide-active .wrap .pizza_img div{transform: scale(1) } #main .main_con05 .swiper .swiper-slide-prev .wrap .pizza_img{transform: translateX(-50px);margin-top: 100px;} #main .main_con05 .swiper .swiper-slide-next .wrap .pizza_img{transform: translateX(50px);margin-top: 0;} #main .main_con05 .swiper .swiper-slide-next + div .wrap .pizza_img{margin-top: 250px;} #main .main_con05 .m_title_w{display: flex;justify-content: center;} #main .main_con05 .m_title_w .tit{margin-bottom: 164px;} #main .main_con05 .m_title_w .tit strong{color: #fff;} #main .main_con05 .pizze_slide{position: relative;} #main .main_con05 .pizze_slide .plate{position: absolute;left: 50%;transform: translateX(-50%);top: -40px;mix-blend-mode: multiply;} #main .main_con05 .pizze_slide .txt{padding-top: 90px;transform: translateX(40px);transition: 0.6s;} #main .main_con05 .pizze_slide .txt .tag{margin-bottom: 20px;;} #main .main_con05 .pizze_slide .txt .tag{display: flex;justify-content: center; gap :0 10px} #main .main_con05 .pizze_slide .txt .tag span{display: flex;width: 108px;height: 51px;align-items: center;justify-content: center;color: #FFFFFF;font-size: 30px;font-weight: 900;border-radius: 10px;} #main .main_con05 .pizze_slide .txt .tag span.new{border: 2px solid #FFFFFF;color: #fff;} #main .main_con05 .pizze_slide .txt .tag span.best{background-color: #FF1313;} #main .main_con05 .pizze_slide .txt .tit{margin-bottom: 70px;} #main .main_con05 .pizze_slide .txt .tit strong{display: block;text-align: center;color: #FFFFFF;font-size: 30px;font-weight: 600;} #main .main_con05 .pizze_slide .txt .more_btn a .btn_w {background-color: #E50A0A;} #main .main_con05 .pizze_slide .txt .more_btn a .btn_w:before {background-color: #fff;} #main .main_con05 .pizze_slide .txt .more_btn a .btn_w div{background-color: #C10808;} #main .main_con05 .pizze_slide .txt .more_btn a .btn_w div strong{color: #FFFFFF;} #main .main_con05 .pizze_slide .txt .more_btn a .btn_w div i svg path{fill : #fff} #main .main_con05 .pizze_slide .txt .more_btn a:hover .btn_w div i svg path{fill : #fff} #main .main_con05 .pizze_slide .txt{opacity: 0;} #main .main_con05 .pizze_slide .swiper-slide-active .txt{opacity: 1;transform: translateY(0);} #main .main_con05 .pizze_slide .sli_btn{position: absolute;left: 50%;top: 270px;} #main .main_con05 .pizze_slide .sli_btn svg{width: 80px;display: block} #main .main_con05 .pizze_slide .sli_btn.swiper-button-prev {transform: translateX(-350px);} #main .main_con05 .pizze_slide .sli_btn.swiper-button-next {left: auto; transform: translateX(350px);right: 50%;} #main .main_con05 .pizze_slide .sli_btn.swiper-button-next svg{display: block;transition: 0.7s} #main .main_con05 .pizze_slide .sli_btn.swiper-button-prev svg{display: block;transition: 0.7s} #main .main_con05 .pizze_slide .sli_btn.swiper-button-next:hover svg{transform: translateX(10px)} #main .main_con05 .pizze_slide .sli_btn.swiper-button-prev:hover svg{transform: translateX(-10px)} #main .main_con05 .pizze_slide .sli_btn.swiper-button-next, #main .main_con05 .pizze_slide .sli_btn.swiper-button-prev{width: 80px;height: auto;} #main .main_con05 .pizze_slide .sli_btn:after, #main .main_con05 .pizze_slide .sli_btn:after{display: none;} #main .main_con02{position: relative;width: 100%;height: 100vh;overflow: hidden;display: none} #main .main_con02 .con_w{position: absolute;top: 0;height: 0;width: 100%;height: 100%} #main .main_con02 .bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);;} #main .main_con02 .con_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);;} #main .main_con02 .con_box div{transform: scale(0.1613);} #main .main_con02 .pizza{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #main .main_con02 .pizza01{transform: scale(1) translate(80%,20%);} #main .main_con02 .pizza02{transform: scale(0.63) translate(-160%,-130%);} #main .main_con02 .pizza03{transform: scale(0.1) translate(-630%,-450%);} #main .main_con02 .pizza04{transform: scale(0.21) translate(-160%,-260%);} #main .main_con02 .cont02 {position: absolute;top: 0;left: 0;z-index: -1} #main .main_con02 .container { position: absolute; z-index: 11; bottom: 40px; transform: translateX(-50%);left: 50% } #main .main_con08{padding: 200px 80px;} #main .main_con08 .banner_w{display: flex;gap: 0 45px;width: 100%} #main .main_con08 .banner_w .banner{position: relative;border-radius: 16px;overflow: hidden;width: 100%;background: #000000} #main .main_con08 .banner_w .banner:after{content: '';display: block;background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0.45} #main .main_con08 .banner_w .banner img{display: block;transition: 0.5s} #main .main_con08 .banner_w .banner:hover img{opacity: 0.5} #main .main_con08 .banner_w .banner .wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 80px;display: flex;justify-content: space-between;flex-direction: column;transform: translateY(265px);transition: 0.5s;z-index: 3} #main .main_con08 .banner_w .banner:hover .wrap{transform: translateY(0)} #main .main_con08 .banner_w .banner .wrap .tit span{display: block;font-size: 26px;color: #FFFFFF;font-weight: 600;margin-bottom: 10px;} #main .main_con08 .banner_w .banner .wrap .tit strong{display: block;font-size: 80px;color: #FFFFFF;font-weight: 900;letter-spacing: -0.5px;margin-bottom: 10px;} #main .main_con08 .banner_w .banner .wrap .tit p{font-size: 22px;color: #FFFFFF;} #main .main_con08 .banner_w .banner .wrap ul{display: flex;gap: 10px;margin-top: 20px;opacity: 0} #main .main_con08 .banner_w .banner:hover .wrap ul{opacity: 1} #main .main_con08 .banner_w .banner .wrap ul li{width: 165px;} #main .main_con08 .banner_w .banner .wrap ul li select{border: 2px solid #FFFFFF;border-radius: 10px;height: 54px;box-sizing: border-box;background: none;color: #fff;padding-left: 30px;font-size: 20px;} #main .main_con08 .banner_w .banner .wrap ul li:last-child{width: calc(100% - 336.6666666666667px)} #main .main_con08 .banner_w .banner .wrap ul li select option{color: #000} #main .main_con08 .banner_w .banner .wrap ul li .sch_w{position: relative} #main .main_con08 .banner_w .banner .wrap ul li .sch_w input{background: rgba(255,255,255,0.3);backdrop-filter: blur(20px); border-radius: 10px;height: 54px;box-sizing: border-box;color: #fff;padding-left: 30px;font-size: 20px;border: none;width: 100%} #main .main_con08 .banner_w .banner .wrap ul li .sch_w input::placeholder{color: #fff} #main .main_con08 .banner_w .banner .wrap ul li .sch_w button{position: absolute;height: 100%;right: 0;padding-right: 20px;} #main .main_con08 .banner_w .banner .more_btn a .btn_w{background: #C1080875;border: 3px solid #E50A0A;padding: 0;overflow: visible;} #main .main_con08 .banner_w .banner .more_btn a .btn_w:before{clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);border-radius: inherit;border: 3px solid #fff;width: 100%;top: -3px;left: -3px;background-color: none;} #main .main_con08 .banner_w .banner .more_btn a:hover .btn_w:before{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);background: none;} #main .main_con08 .banner_w .banner .more_btn a .btn_w div{background: none} #main .main_con08 .banner_w .banner .more_btn a .btn_w div strong{color: #fff} #main .main_con08 .banner_w .banner .more_btn a .btn_w div path{fill: #fff} #main .main_con03{width: 100%;height: 100vh;position: relative;overflow: hidden} #main .main_con03 .step01{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: flex-end;pointer-events: none;align-items: center;justify-content: center} #main .main_con03 .step01 .m_title_w .tag{display: flex;justify-content: center;transform: none;transition: 0s;} #main .main_con03 .step01 .m_title_w .tit div{display: flex;justify-content: center;gap: 0 10px;align-items: center} #main .main_con03 .step01 .m_title_w .tit div i{border-radius: 10px;overflow: hidden} #main .main_con03 .step01 .m_title_w .tit div i img{display: block} #main .main_con03 .step01 .model{margin-top: 10px;} #main .main_con03 .step01 .model img{display: block;margin: 0 auto;} #main .main_con03 .step02{background: #C10808;position: absolute;width: 100%;height: 100vh;top: 0;left: 0} #main .main_con03 .step02 .bg_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);mix-blend-mode: screen} #main .main_con03 .step02 .img_wrap{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #main .main_con03 .step02 .img_wrap .after_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} #main .main_con03 .step02 .img_wrap .after_img div{transform: scale(0.53) rotate(180deg);} #main .main_con03 .step02 .img_wrap .after_img div img{opacity: 0;} #main .main_con03 .step02 .txt_wrap{position: absolute;bottom: 0;left: 0;padding: 40px;width: 100%;display: flex;justify-content: space-between;align-items: flex-end;} #main .main_con03 .step02 .txt_wrap > div >strong{font-size: 120px;color: #FFFFFF;font-weight: 900;letter-spacing: -0.7px;line-height: 120px;display: block;} #main .main_con03 .step02 .txt_wrap .more_btn a .btn_w{background-color: #E50A0A;} #main .main_con03 .step02 .txt_wrap .more_btn a .btn_w:before{background-color: #fff;} #main .main_con03 .step02 .txt_wrap .more_btn a .btn_w div{background-color: #C10808;} #main .main_con03 .step02 .txt_wrap .more_btn a .btn_w div strong{color: #fff} #main .main_con03 .step02 .txt_wrap .more_btn a .btn_w div path{fill: #fff;} #main .main_con03 .cover{mix-blend-mode: screen;position: absolute;top: 0;left: 0;z-index: 3;pointer-events: none;} #main .main_con03 .cover2{background: #fff;position: absolute;top: 0;left: 0;background: #fff; z-index: 3;pointer-events: none;width: 100%;height: 100%} #main .main_con03 .step02 .point{position: absolute;left: 50%;margin-left: 517px;top: 50%;transform: translateY(-59%)} #main .main_con03 .step02 .point .point_list ul{display: flex;flex-direction: column;gap: 200px;} #main .main_con03 .step02 .point .point_list ul li .title{display: flex;align-items: flex-end;gap:0 25px;padding-bottom: 20px;margin-bottom: 20px;position: relative} #main .main_con03 .step02 .point .point_list ul li .title .line{position: absolute;right: 0} #main .main_con03 .step02 .point .point_list ul li:nth-child(1) .title .line{bottom: 0;transform: translateY(100%)} #main .main_con03 .step02 .point .point_list ul li:nth-child(2) .title .line{bottom: 0} #main .main_con03 .step02 .point .point_list ul li .title strong{font-size: 40px;color: #FFFFFF;font-weight: 900;letter-spacing: -1px} #main .main_con03 .step02 .point .point_list ul li .title strong span{font-weight: inherit;font-size: 50px;} #main .main_con03 .step02 .point .point_list ul li p{font-size: 22px;color: #FFFFFF;font-weight: 500;line-height: 30px;} #main .main_con03 .step01{z-index: 5} #main .main_con03 .con_w{position: absolute;top: 0;left: 0;width: 100%;height: 100%} .banner_list { animation: roll 700s linear infinite; } /* 첫 번째 배너 리스트가 끝나면 뒤에 바로 두 번째 배너 리스트가 붙도록 설정 */ /* .banner_list.n2 { animation-delay: 40s; padding: 30px 0; } */ .banner_list.n3 { animation: roll 350s linear infinite; } /* 첫 번째 배너 리스트가 끝나면 뒤에 바로 두 번째 배너 리스트가 붙도록 설정 */ /* .n4:last-child { padding: 30px 0; animation: roll 40s linear infinite; animation-delay: 30s; } */ /* 롤링 애니메이션 정의 */ @keyframes roll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } .m_title_w .tag{transform: translateY(100px);transition: 1s} .on .m_title_w .tag{transform: translateY(0)} .m_title_w .tit div{overflow: hidden} .m_title_w .tit div *{transform: translateY(110%);transition: 1s} .on .m_title_w .tit div *{transform: translateY(0)} #main .main_con05 .pizze_slide .swiper{transform: translateY(100px);transition: 1s;transition-delay: 0.3s;opacity: 0} #main .main_con05.on .pizze_slide .swiper{transform: translateY(0);opacity: 1} #main .main_con05{margin-top: -2px;position: relative;z-index: 3} #main .main_con08 .banner_w .banner{transform: translateY(100px);transition: 1s;transition-delay: 0.0s;opacity: 0} #main .main_con08 .banner_w .banner02{transition-delay: 0.3s} #main .main_con08.on .banner_w .banner{transform: translateY(0);opacity: 1} @media (max-width: 1900px) { #main .main_con02 .container svg{width: 90vw;height: auto} } #main .main_con01{overflow: hidden} .main_visual .main_slider{position: relative} .main_visual{padding: 0} .main_visual .main_slider .slide_box > div:nth-child(1){position: relative} .main_visual .main_slider .slide_box .main_img{position: static} @media (max-width: 1700px) { #main .main_con01 .rolling_txt strong{font-size: 150px;} #main .main_con01 .title strong{font-size: 34px;} .m_title_w .tit strong, #main .main_con03 .step02 .txt_wrap > div >strong, #main .main_con06 .txt_wrap > strong{font-size: 90px;line-height: 1} #main .main_con06 .txt_wrap > p{font-size: 20px;margin-bottom: 40px;} #main .main_con08{padding: 150px 20px} #main .main_con06 > div{padding: 80px 20px;} #main .main_con05{padding-top: 60px;} #main .main_con08 .banner_w .banner .wrap .tit strong{font-size: 60px;} #main .main_con08 .banner_w .banner .wrap .tit span{font-size: 20px;} #main .main_con08 .banner_w .banner .wrap{padding: 80px 20px;} #footer .ft_inner .f01 .info ul li p{font-size: 13px;} #footer .ft_inner .f01 .btn a{font-size: 15px;} #footer .ft_inner .ft02 .num p{font-size: 23px;margin-top: 7px} #footer .ft_inner .ft02 .num strong{font-size: 20px} #footer .ft_inner .f01 .info ul li strong{font-size: 16px;} #footer .ft_inner .f01 .info .tit strong{font-size: 18px;} #footer .ft_inner .ft01 > ul > li ul li a{font-size: 15px;} #footer .ft_inner .ft01 > ul > li{width: 160px;} #footer .ft_inner .ft01 > ul{padding-left: 0} #footer .ft_inner .ft01 > ul > li > a{font-size: 17px;} #footer .ft_inner .f01 .info ul{gap: 0 30px;} #footer .ft_inner .ft02 .sns ul svg{width: 40px;height: auto} } @media (max-width: 1500px) { #main .main_con05 .pizze_slide .sli_btn{top: 230px;} #main .main_con03 .step02 .point .point_list ul li .title .line{display: none} #main .main_con03 .step02 .point{left: auto;margin-left: 0;right: 20px;} #main .main_con03 .step02 .point .point_list ul li .title{border-bottom: 3px solid #fff} #main .main_con05 .swiper .wrap .pizza_img img{width: 560px;} #main .main_con05 .swiper .wrap .pizza_img div{margin-left: -280px;margin-top: -280px} #main .main_con05 .pizze_slide .plate img{width: 500px;} #main .main_con05 .m_title_w .tit{margin-bottom: 80px;} #main .main_con05 .pizze_slide .plate{top: 0} #header #gnb > ul > li > div.open_box{width: 1000px;} #header #gnb > ul{gap:0 25px} #header #gnb > ul:nth-child(1){padding-right: 90px;} #header #gnb > ul:nth-child(2){padding-left: 90px;} #header #gnb > ul > li > div.open_box .list{padding: 40px;} #main .main_con05 .pizze_slide .txt{padding-top: 50px} } @media (max-width: 1400px) { #main .main_con01 .video_in{ clip-path: inset(calc(50vh - 208px) calc(50% - 400px) calc(50vh - 208px) calc(50% - 400px) round 278px) } } @media (max-width: 1400px) { #footer .ft_inner{padding: 40px 20px;} #footer .ft_inner .ft01 > ul > li ul li a{font-size: 14px} #footer .ft_inner .ft01 > ul > li ul{gap: 7px} #footer .ft_inner .f01 .btn a{font-size: 14px} #footer .ft_inner .f01 .btn ul li{margin-bottom: 10px;} #footer .ft_inner .f01 .info ul li{gap: 6px} #footer .ft_inner .f01 .info > ul:last-child{gap: 0 20px} #footer .ft_inner .ft02 .num strong{font-size: 16px;} #footer .ft_inner .f02{padding-left: 20px;margin-left: 20px;} } @media (max-width: 1100px) { #main .main_con08 .banner_w .banner:after{opacity: 0.5;background: #000} #footer .copy{padding: 0 20px} #main .main_con03 .step02 .txt_wrap{flex-direction: column;justify-content: flex-start;align-items: flex-start;gap: 20px} #quick ul li a{width: 90px;height: 90px;} #quick ul li a svg{width: 30px;height: auto;} #quick ul li a strong{font-size: 16px;} #main .main_con08 .banner_w .banner .wrap ul{display: none;} #main .main_con01 .rolling_txt strong{font-size: 90px;} .m_title_w .tit strong, #main .main_con03 .step02 .txt_wrap > div >strong, #main .main_con06 .txt_wrap > strong{font-size: 60px;} #main .main_con03 .step02 .point .point_list ul li .title strong{font-size: 32px;} #main .main_con03 .step02 .point .point_list ul li p{font-size: 16px;line-height: 1.5} #main .main_con03 .step02 .point .point_list ul li .title img{width: 50px;} #main .main_con03 .step02 .point .point_list ul li .title strong span{font-size: 40px;} #main .main_con03 .step02 .bg_img img{width: 700px} #main .main_con07 > div{width: 100%} #main .main_con07{flex-wrap: wrap;gap: 30px;} #main .main_con07 > div{justify-content: center} #main .main_con07 .m_title_w .bg2{display: none} #main .main_con08 .banner_w .banner .wrap .tit span{font-size: 16px;} #footer .ft_inner .ft01{display: none} #footer .ft_inner .ft02{flex-direction: column} #footer .ft_inner .f02{margin-left: 0;padding-left: 0;padding-top: 20px;margin-top: 20px;border-top: 1px solid #fff;border-left: none} #footer .ft_inner .f01{flex-direction: column} #footer .ft_inner .f01 .btn{flex-direction: row;} #footer .ft_inner .f01 .btn ul{display: flex;gap: 10px} #footer .ft_inner .f01 .btn ul li{margin-bottom: 0} #footer .ft_inner .f01 .info{padding: 0;margin-top: 10px;} #footer .ft_inner .f01 .info .tit{margin-bottom: 10px;} #header #gnb{padding: 0 20px; padding-top: 70px; ;display: block;position: fixed;right: 0;top: 0;width: 100%;background-color: #fff;height: 100%;transition: 0.7s;max-width: 500px;} #header #gnb.on{transform: translate(0%);} #header #gnb > ul{display: flex;flex-direction: column;gap: 10px} #header #gnb > ul > li > div.open_box{position: static;opacity: 1;width: 100%;pointer-events: all;} #header #gnb > ul > li > div.open_box > div.naming_box{display: none;} #header #gnb > ul > li > div.open_box > div{width: 100%;} #header #gnb > ul{padding-right: 0;width: 100%;} #header #gnb > ul > li > div.open_box{transform: none;} #header #gnb > ul:nth-child(1){padding-right: 0;} #header #gnb > ul > li > a{color: #370D00;height: 40px;padding: 0 40px;transition: 0;line-height: 60px;background: #F8F5EE;border-radius: 6px;font-size: 20px;height: 60px;font-weight: 500;font-size: 20px} #header #gnb > ul > li > div.open_box .list{padding: 0 20px;} #header #gnb > ul > li:hover > a{transform: none;} #header #gnb > ul:nth-child(2){padding-left: 0;} #header #gnb > ul > li > div.open_box{margin-top: 30px;margin-top: 10px;display: none;;} #header #gnb > ul > li:hover > div.open_box{display: block;;} #header #gnb{transform: translateX(100%);} #header .all_menu_b{display: block;z-index: 11;} #header #gnb{z-index: 99;} #header .close_b{display: block;} #main .main_con02 .container{padding-bottom: 60px;} #header #gnb {display: flex;flex-direction: column;gap: 10px;justify-content: flex-start} #header #gnb > ul > li > div.open_box .list{padding: 0} #header #gnb > ul > li > div.open_box{padding-top: 12px;} #main .main_con03 .step02 .txt_wrap{padding-bottom: 60px;} #header #gnb > ul > li > div.open_box .list ul{padding: 24px 30px;border-radius: 6px} #header #gnb > ul > li > div.open_box .list ul li a{padding: 0;justify-content: flex-start} #header #gnb > ul > li > div.open_box .list ul li:hover a{color: #370D00;background: #fff} #header #gnb > ul > li > div.open_box{display: block} #header #gnb > ul > li > div.open_box .list ul li a{padding: 8px 0; height: auto} #header #gnb > ul > li > div.open_box .list ul li{border-bottom: none;padding: 0} #header #gnb > ul > li > div.open_box{position: relative !important;top: 0;left: 0} #header #gnb > ul > li > div.open_box:after{width: 40px;height: 4px;border-radius: 4px 4px 0 0;background: #370D00;top: 8px;left: 40px;transform: none;margin-left: 0} #header #gnb > ul > li > div.open_box{display: none} #header #gnb{overflow-x: scroll} #header #gnb > ul > li:hover > div.open_box{display: none} #header #gnb > ul > li.on > div.open_box{display: block} #header.b_header #gnb > ul > li > a i{display: block} #header.b_header #gnb > ul > li > a{justify-content: space-between;display: flex} #header.b_header #gnb > ul > li.on > a{background: #C10808;color: #fff} #header.b_header #gnb > ul > li > a svg{display: block;transition: 0.7s} #header.b_header #gnb > ul > li.on > a svg{transform: rotate(-180deg)} #header.b_header #gnb > ul > li > a svg path{transition: 0.3s} #header.b_header #gnb > ul > li.on > a svg path{fill : #fff} #header #gnb > ul > li > a i{display: block} #header #gnb > ul > li > a{justify-content: space-between;display: flex} #header #gnb > ul > li.on > a{background: #C10808;color: #fff} #header #gnb > ul > li > a svg{display: block;transition: 0.7s} #header #gnb > ul > li.on > a svg{transform: rotate(-180deg)} #header #gnb > ul > li > a svg path{transition: 0.3s} #header #gnb > ul > li.on > a svg path{fill : #fff} #header #gnb > ul > li > a i{display: block} #footer .award{ padding: 0 20px; margin-bottom: 20px; } } @media (max-width: 960px) { #footer .copy{font-size: 11px;height: 40px;line-height: 1.5;word-break: keep-all} #footer .copy address{font-size: 11px} #main .main_con05 .pizze_slide .sli_btn{display: none;} #main .main_con01 .title strong{font-size: 22px;} #main .main_con01 .video_in {clip-path: inset(calc(50vh - 208px) 20% calc(50vh - 208px) 20% round 90px);} #main .main_con01 .rolling_txt strong{font-size: 60px;} #main .main_con01 .title{margin-top: -267px;} #main .main_con02 .con_box div svg{width: 90vh;height: auto} #main .main_con02 .bg svg{height: 100vh;width: auto;} .m_title_w .tag .tag_in strong{font-size: 15px;padding: 0 7px;height: 40px;} #main .main_con03 .step01 .m_title_w .tit div i img{width: 100px;} #main .main_con03 .step01 .m_title_w .tit div:nth-child(1){margin-bottom: 15px} #main .main_con03 .step01 .m_title_w .tit div i{border-radius: 5px;} .m_title_w .tit strong, #main .main_con03 .step02 .txt_wrap > div >strong, #main .main_con06 .txt_wrap > strong{font-size: 40px;} #main .main_con03 .step02 .img_wrap .before_img img {width: 300px;} #main .main_con03 .step02 .img_wrap .after_img div img {width: 400px;} #main .main_con03 .step02 .point .point_list ul li .title strong{font-size: 24px;} #main .main_con03 .step02 .point .point_list ul li .title strong span{font-size: 30px;} #main .main_con03 .step02 .point .point_list ul li p{font-size: 14px;} #main .main_con03 .step02 .point{right: 40px;} #main .main_con05 .swiper .wrap .pizza_img img{width: 400px;} #main .main_con05 .swiper .swiper-slide-active .wrap .pizza_img{height: 300px} #main .main_con05 .swiper .wrap .pizza_img div{margin-top: -200px;margin-left: -200px;} #main .main_con05 .pizze_slide .txt .tag span{font-size: 14px;} #main .main_con05 .pizze_slide .txt .tag span{width: 58px;height: 32px;border-radius: 4px;} #main .main_con05 .swiper .wrap .pizza_img{height: 300px;} #main .main_con05 .swiper .swiper-slide-next .wrap .pizza_img, #main .main_con05 .swiper .swiper-slide-prev .wrap .pizza_img{margin-top: 60px} #main .main_con05 .pizze_slide .plate img{width: 360px;} #main .main_con05 .pizze_slide .plate{top: -30px} #main .main_con05 .pizze_slide .txt .tit strong{font-size: 20px} #main .main_con05 .pizze_slide .txt .more_btn a .btn_w{width: 100%} .more_btn a .btn_w div strong{font-size: 19px;} .more_btn a .btn_w div{height: 45px;padding: 0 15px} .more_btn a .btn_w div svg{width: 37px;height: auto} #main .main_con05 .pizze_slide .txt .tit{margin-bottom: 30px;} #main .main_con06 > div{flex-direction: column;gap: 20px;} #main .main_con06 > div{width: 100%} #main .main_con06 .fran_img, #main .main_con06 .txt_wrap{width: 100%} #main .main_con06 .txt_wrap{padding-left: 0;margin-top: 25px;} #main .main_con07 .loop_content{padding-top: 30px} #main .main_con07 .loop_content > div.loop{height: 500px} #main .main_con07 .m_title_w .bg{width: 90%;height: 70%;padding-top: 60px;} #main .main_con07 .loop_content > div{padding: 0 10px} #main .main_con07 .loop_content{padding: 0 20px;} #main .main_con07 .loop_content > div{border-radius: 5px;} #main .main_con07 .loop_content > div ul{gap:10px ;margin-top: 10px;} #main .main_con07 .loop_content > div ul li strong{font-size: 14px;padding: 15px} #main .main_con08 .banner_w{flex-direction: column;gap: 20px;} #main .main_con08 .banner_w .banner .wrap ul{display: none} #main .main_con08 .banner_w .banner .wrap{transform: none} #main .main_con08 .banner_w .banner .banner_bg img{width: 100%} #main .main_con08 .banner_w .banner .wrap .tit span{font-size: 13px;} #main .main_con08 .banner_w .banner .wrap .tit p{font-size: 15px;} #main .main_con08 .banner_w .banner .wrap .tit strong{font-size: 32px;} #main .main_con08 .banner_w .banner .wrap{padding: 40px 20px;} #main .main_con08 .banner_w .more_btn a .btn_w{width: 100%} #footer .ft_inner .f01 .info > ul:last-child{gap: 15px;} #footer .ft_inner .ft02 .num ul{gap: 10px;margin-bottom: 20px;} #header{height: 70px;padding: 0} #header.on{padding: 0} #header #logo svg{width: 60px;height: auto} #header.on #logo{top: 12px} #header #logo{top: 12px} #header #gnb > ul > li > a{font-size: 16px;} #header #gnb > ul > li > div.open_box .list{display: block;} #header #gnb > ul > li > div.open_box .list ul li a{font-size: 13px;height: 30px;;} #header #gnb > ul > li > div.open_box{margin-top: 0;} .main_visual .thum_wrap{bottom: 10px;} .main_visual .thum_wrap button svg{width: 40px;height: auto;} .main_visual .thum_wrap ul li.on{width: 45px;} .main_visual .thum_wrap ul li{height: 10px;height: 2px;} #quick ul li a strong{font-size: 12px;} #quick ul li a svg{width: 22px;} #quick ul li a{width: 55px;height: 55px;border-radius: 6px;} #quick ul li a i{margin-bottom: 5px;} .btn_top button{width: 55px;height: 55px;border-radius: 6px;} .btn_top button div strong{font-size: 15px;} #main .main_con01 .video_in .video video{width: 100%} .btn_top button div svg{width: 7px;height: auto;display: block;;} #main .main_con01 .video_in .video .wrap{height: 100vh;display: flex;align-items: center;background: #000} #main .main_con01 .video_in .video{width: 100vw} } @media (max-width: 660px) { .main_visual .main_slider .slide_box .main_img img.pc{display: none} .main_visual .main_slider .slide_box .main_img img.mo{display: block} #quick{bottom: 0%;top: auto} #main .main_con03 .step02 .txt_wrap{padding: 20px;} #main .main_con03 .step02 .txt_wrap > div >strong{font-size: 26px;} #main .main_con03 .step02 .point .point_list ul li p{font-size: 13px;} #main .main_con03 .step02 .point .point_list ul li .title{margin-bottom: 10px;padding-bottom: 10px;} #main .main_con03 .step02 .point .point_list ul li .title img{width: 30px;} #main .main_con03 .step02 .point .point_list ul li .title{gap: 0 10px;} #main .main_con03 .step02 .point{right: 20px;} #main .main_con01 .video_in{ clip-path: inset(calc(50vh - 208px) 10% calc(50vh - 208px) 10% round 20px) } #main .main_con01 .rolling_txt strong{font-size: 45px;letter-spacing: 0.2px} #main .main_con02 .con_box div svg{width: 90vw} #main .main_con03 .step01 .m_title_w .tit div{margin-bottom: 10px;} #main .main_con03 .step01 .model img{width: 400px} #main .main_con06 .txt_wrap > p{font-size: 16px;margin-bottom: 30px;} #main .main_con06 .fran_img .img_w img {width: 100%;margin-top: -60%;display: block;} #main .main_con06 > div{padding: 40px 20px} #main .main_con06 .fran_img .img_w{border-radius: 10px;} #main .main_con07 .m_title_w{padding: 0;padding: 20px;padding-top: 50px;padding-bottom: 0} #main .main_con08{padding: 50px 20px;} #main .main_con08 .banner_w .banner{border-radius: 10px;} #footer .ft_inner .f01 .info ul{flex-wrap: wrap;gap:10px 0 ;} #footer .ft_inner .f01 .info ul li{width: 50%} #footer .ft_inner .f01 .info ul:last-child li{width: 100%} #footer .ft_inner .f01 .btn ul{flex-wrap: wrap;gap: 10px 0} #footer .ft_inner .f01 .btn{flex-direction: column;gap: 10px 0} #footer .ft_inner .f01 .btn ul li{width: 50%} #main .main_con02 .container{bottom: 20px;} #main .main_con01 .frame svg{display: block;transform: scale(0.7)} #main .main_con03 .step01 .txt_wrap{transform: translateY(-50%);top: 50%;position: absolute;width: 100%;} #main .main_con03 .step01 .txt_wrap .m_title_w .tag{margin-bottom: 70px;} #footer .ft_inner .f01 .info .tit strong{font-size: 13px;} #footer .ft_inner .f01 .info ul li strong{font-size: 12px;} #footer .ft_inner .f01 .info ul li p{font-size: 11px;} #footer .ft_inner .f01 .info > ul:last-child{padding-top: 20px;margin-top: 20px;;} #footer .ft_inner .f01{padding-top: 0;} #footer .ft_inner .ft02 .num strong{font-size: 12px;} #footer .ft_inner .ft02 .num p{font-size: 18px;} #footer .ft_inner .ft02 .num ul{display: flex;flex-direction: row;} #footer .ft_inner .ft02 .num ul li{width: 100%;} #header #gnb{width: 300px;} .main_visual{padding-top: 110%;} .main_visual .main_slider .slide_box .main_img img{width: 100%} /* .main_visual .main_slider .slide_box .main_img img{width: auto;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}*/ .main_visual .main_slider .slide_box .main_img{width: 100%;height: 100%;} #footer .ft_inner .f01 .btn a{font-size: 12px;} #main .main_con05 .pizze_slide .txt .more_btn a .btn_w{width: 90%;margin: 0 auto} #main .main_con05 .pizze_slide .swiper{height: 480px;} #main .main_con07 .m_title_w{text-align: center} #main .main_con07 .m_title_w .tag{width: 187px;margin: 0 auto;justify-content: center;margin-bottom: 20px;} #footer .ft_inner .f01 .btn{o} #footer .ft_inner .f01 .btn ul, #footer .ft_inner .f01 .btn > a{padding: 10px;border-radius: 5px;} #main .main_con03 .step02 .bg_img{opacity: 0.3} #main .main_con03 .step02 .point .point_list ul li p{font-weight: 600} .main_visual .main_slider{position: relative} .main_visual{padding: 0} .main_visual .main_slider .slide_box > div:nth-child(1){position: relative} .main_visual .main_slider .slide_box .main_img{position: static} #footer .award{ margin-top: -20px; } #footer .award svg{ width: 130px; height: auto; } } @media (max-width: 440px) { #main .main_con03 .step01 .model img{width: 260px} #main .main_con05 .swiper .wrap .pizza_img img{width: 350px} #main .main_con05 .swiper .wrap .pizza_img div{margin-left: -170px;margin-top: -160px;} #main .main_con03 .step01 .m_title_w .tit div i{display: none} #main .main_con05 .pizze_slide .plate img{width: 320px} #main .main_con05 .pizze_slide .txt{padding-top: 0;margin-top: -60px;} #main .main_con05 .pizze_slide .plate{top: 9px;} .m_title_w .tit strong, #main .main_con03 .step02 .txt_wrap > div >strong, #main .main_con06 .txt_wrap > strong{font-size: 30px} #main .main_con05 .m_title_w .tit{margin-bottom: 40px} #main .main_con05 .pizze_slide .swiper{height: 480px;} #main .main_con05{border-radius: 0 0 20px 20px } .more_btn a .btn_w{max-width: 100%} #main .main_con06 .txt_wrap{margin-top: 0} #main .main_con07 .loop_content > div.loop{height: 300px;} #main .main_con07 .loop_content > div.loop02{margin-top: 25px;} #main .main_con07 .loop_content{gap: 0 10px;} #main .main_con03 .step01 .txt_wrap .m_title_w .tag{margin-bottom: 30px;} #main .main_con03 .step01 .model img{width: 90vw;} #main .main_con03 .step02 .img_wrap .after_img div img{width: 320px;} #main .main_con08 .banner_w .banner .wrap{padding: 20px;} #main .main_con03 .step02 .point{right: 60px;} #main .main_con03 .step02 .txt_wrap .more_btn a .btn_w{width: 190px} #main .main_con05 .pizze_slide .txt{margin-top: 0} #main .main_con03 .step01 .m_title_w .tit div{margin-bottom: 5px} }