/* #=============================================# | http://di-dot.com | | Copyright 2020 di-dot all right reserved. | | Licensed under the di-dot bella jo License. | #=============================================# */ @charset "UTF-8"; /* ##Device = Desktops ##Screen = 1281px to higher resolution desktops ##Device = 데스크탑 ##Screen = 1281px 이상 해상도 데스크탑 */ .foot-contacts { z-index: 2; } @media (min-width: 1281px) { /* --------------------------------------- COMMON --------------------------------------- */ /* ---------- lnb ---------- */ #header .area-gnb .lnb-menus { position:absolute; left:0; top:-999999px; width:100%; display:block; padding:20px 0; opacity:0; transition:opacity 0.3s; } #header .area-gnb .lnb-menus li { display:block; text-align:center; } #header .area-gnb .lnb-menus li a { font-size:13px; padding:5px 0; display:inline-block; color:#999; } #header .area-gnb .lnb-menus li a:hover { color:#000; } #header .area-gnb .gnb-menus > li > a:hover { color:#ffcd34; } /* ---------- hover ---------- */ #header:hover { background-color:#2c2c2c; transition:background 0.2s; } #header .inner:before { content:''; background-color:#f0f0f0; position:absolute; left:0; top:180px; /*수정*/ width:100%; height:0; z-index: -1; transition:height 0.2s; } #header:hover .inner:before { height:320px; transition:height 0.2s; } #header:hover .area-gnb .lnb-menus { display:block; top:75px; opacity: 1; transition:opacity 0.3s; } /* ---------- footer ---------- */ .main .wrap-btn-top { display:none; } .main .wrap-btn-call { display:none; } .main .wrap-btn-kakao { display:none; } /* --------------------------------------- MAIN POP --------------------------------------- */ .popup .modal-cont img { width:100%; max-width:none; } } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px ##Device = 랩탑, 데스크탑 ##Screen = 1025px에서 1280px 사이 */ @media (min-width: 1025px) and (max-width: 1280px) { /* --------------------------------------- COMMON --------------------------------------- */ #header { padding:0 20px; box-sizing:border-box; } /* ---------- lnb ---------- */ #header .area-gnb .lnb-menus { position:absolute; left:0; top:-999999px; width:100%; display:block; padding:20px 0; opacity:0; transition:opacity 0.3s; } #header .area-gnb .lnb-menus li { display:block; text-align:center; } #header .area-gnb .lnb-menus li a { font-size:13px; padding:5px 0; display:inline-block; color:#999; } #header .area-gnb .lnb-menus li a:hover { color:#000; } /* ---------- hover ---------- */ #header:hover { background-color:#2c2c2c; transition:background 0.2s; } #header .inner:before { content:''; background-color:#f0f0f0; position:absolute; left:0; top:180px; /*수정*/ width:100%; height:0; z-index: -1; transition:height 0.2s; } #header:hover .inner:before { height:320px; transition:height 0.2s; } #header:hover .area-gnb .lnb-menus { display:block; top:75px; opacity: 1; transition:opacity 0.3s; } /* ---------- 최상단배너 ---------- */ #header .wide-top { display:block; position:relative; width: 100%; background-color: #ffcc35; } #header .wide-top .wide-top-con { display:block; text-align:center; width:100%; margin:0 auto; } #header .top-m { display:none; } /* 랜딩 최상단배너 */ .wide-top { display:block; position:relative; width: 100%; background-color: #ffcc35; } .wide-top .wide-top-con { display:block; text-align:center; width:100%; margin:0 auto; } .top-m { display:none; } /* ---------- aside ---------- */ .aside-main { display:none; } /* ---------- footer ---------- */ .main .wrap-btn-top { display:none; } .main .wrap-btn-call { display:none; } .main .wrap-btn-kakao { display:none; } /* --------------------------------------- MAIN --------------------------------------- */ /* ---------- SECTION - 01 ---------- */ /* .main .sec01 { background-position: center left 80%; } .main .sec01 .wrap-txt h4 { font-size:48px; } .main .sec01 .wrap-txt h5 { font-size:48px; margin:30px auto 40px; } .main .sec01 .wrap-txt .desc { font-size:20px; } .main .sec01 .wrap-btn { margin:40px 0 0; } */ /* ---------- SECTION - 02 ---------- */ /* .main .sec02 { background-position: center left 20%; } .main .sec02 .inner-box { padding-left: 40px; } */ /* ---------- SECTION - 04 ---------- */ /* .main .sec04 { background:url('../img/main/img_sec04_bg.png') left 105% no-repeat, url('../img/main/img_sec04_object.png') 95% center no-repeat, #ff939f; background-size:60% auto, 50% auto; } */ /* ---------- SECTION - 05 ---------- */ /* .main .sec05 { background:url('../img/main/img_sec05_bg.png') 5% center no-repeat, #508fc2; background-size: 50% auto; } */ /* ---------- SECTION - 09 ---------- */ /* .main .sec09 .wrap-txt h4 { margin-top:23px; font-size:24px; line-height:28px; } .main .sec09 .wrap-txt h5 { margin-left:14px; } .main .sec09 .wrap-txt h5 .tel { font-size:36px; } .main .sec09 .wrap-txt h5 p { font-size:16px; } .main .sec09 .wrap-txt h6 { margin-left:14px; } */ /* --------------------------------------- MAIN POP --------------------------------------- */ .popup .modal-cont img { width:100%; max-width:none; } /* --------------------------------------- SUB --------------------------------------- */ /* ---------- COMMON ---------- */ /* sub whole */ .sub .inner { padding-left: 40px; padding-right: 40px; box-sizing:border-box; } .sub .subvisual { height:200px; } .sub .snb-menus { width:695px; } .sub .snb-menus li { width:140px; } .sub .snb-menus li:nth-child( n+6 ) { margin-top:-1px; } .sub .snb-menus li a { font-size:12px; } /* about */ .about .subvisual { background-position: center; } .about .snb-menus { width:auto; } /* menu */ .menu .subvisual { background:url('../img/menu/img_visual.jpg') center no-repeat; } /* franchisee */ .franchisee .subvisual { background:url('../img/franchisee/img_visual.jpg') center 10% no-repeat; } /* store */ .store .subvisual { background:url('../img/store/img_visual.jpg') top right no-repeat; } .store .snb-menus { width:auto; } /* news */ .news .subvisual { background:url('../img/news/img_visual.jpg') top right no-repeat; } .news .snb-menus { width:auto; } /* ---------- ABOUT ---------- */ /* brand */ .brand .sec02 .wrap-img { position:absolute; left:30px; top:150px; max-width:360px; } .brand .sec05 .wrap-img { position:absolute; left:30px; top:150px; max-width:360px; } .brand .sec05 { background:url('../img/about/bg_brand05.jpg') 75% bottom no-repeat; } /* visit */ .visit h2 { font-size:0; } /* different */ .brand .sec05 { background:url('../img/brand/bg_brand05.jpg') 80% right no-repeat; background-size:cover; } /* ---------- MENU ---------- */ /* menu01 */ .menu01 .sec02 { background:url('../img/menu/bg_menu0102.jpg') 50% center no-repeat; background-size:cover; } .menu01 .sec02 .inner { padding:100px 0; } .menu01 .sec02 .wrap-txt { text-align:right; padding-right:40px; } .menu01 .sec04 .inner { padding:180px 0; } .menu01 .sec04 .wrap-txt { padding-left:40px; } /* ---------- FRANCHISEE ---------- */ /* blending */ .blending .sec02 .wrap-cont ul li:before { left:0; transform: translate(-150%, -50%); } .blending .sec02 .wrap-cont .tit b { font-size:32px; } .blending .sec03 .wrap-cont ul { margin-left:-40px; } .blending .sec03 .wrap-cont ul li { width:calc(50% - 40px); margin-left:40px; float:left; } /* different */ .different .sec02 { background:url('../img/franchisee/bg_differentiation02.jpg') 80% bottom no-repeat; background-size:cover; } /* competitive */ .competitive .sec04 .wrap-txt { width:50%; float:left; text-align:left; padding-top:50px; } .competitive .sec04 .wrap-img { max-width:520px; } .competitive .sec05 .inner { background-size:50% auto; } .competitive .sec07 .wrap-cont ul { margin:0 20px 0 0px; } .competitive .sec09 .wrap-cont { margin:0 40px; } /* interior */ .interior .sec01 .desc { font-size:16px; } /* ---------- STORE ---------- */ /* store */ .store-list .wrap-search { padding:20px; } .store-list .wrap-search .area-wrap input[type="text"] { width:240px; margin-right:20px; box-sizing:border-box; padding:0 10px; } .store-view .inner { padding:0 200px 120px; } } /***********************************************************************************************************************/ /***********************************************************************************************************************/ /***********************************************************************************************************************/ /* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to 1024px ##Device = 태블릿, 아이패드(세로), ##Screen = 768px에서 1024px 사이 */ @media (min-width: 768px) and (max-width: 1024px) { #footer .wrap-btn { bottom:120px; } /* --------------------------------------- BASIC --------------------------------------- */ #container { /* 수정 margin-top:50px; */ margin-top:135px; } .inner { width:100%; max-width:100%; margin:0 auto; overflow-x: hidden; } .section { } .pc-view { display: none; } .mb-view { display: block; } /* aside */ .aside-main { display:none; } /* --------------------------------------- HEADER --------------------------------------- */ #header { background-color:#333; position:fixed; } #header h1 { /* padding:10px 0; 수정*/ padding:90px 0 10px 0; float:none; position:absolute; left:50%; top:0; transform: translateX(-50%); } #header h1 a { width: 150px; height: 30px; background: url('../img/logo.png') center 5px no-repeat; background-size: auto 36px; } /* ---------- gnb ---------- */ #header .area-gnb { padding:10px; } #header .area-gnb .menu-trigger { display:block; text-indent: -9999px; font-size:0; width:30px; height:30px; position:relative; } #header .area-gnb.active { float:right; margin:0 30% 0 0; } /* button trigger */ #header .menu-trigger span { width:100%; height:2px; display:inline-block; box-sizing:border-box; position:absolute; left:0; transition: all .4s; border-radius: 2px; background-color:#c5c5c5; cursor: pointer; } #header .menu-trigger span:nth-of-type(1) { top: 5px; } #header .menu-trigger span:nth-of-type(2) { top: 14px; } #header .menu-trigger span:nth-of-type(3) { bottom: 5px; } #header .active .menu-trigger span:nth-of-type(1) { -webkit-transform: translateY(9px) rotate(-45deg); transform: translateY(9px) rotate(-45deg); } #header .active .menu-trigger span:nth-of-type(2) { opacity: 0; } #header .active .menu-trigger span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(45deg); transform: translateY(-9px) rotate(45deg); } /* sub menu */ #header .area-gnb .gnb-menus { width:30%; height:100vh; overflow-y:auto; position:absolute; right:-31%; top:0px; z-index: 20; background-color:#222222; padding:50px 0 0; box-sizing:border-box; transition:right 0.2s ease-in; } #header .area-gnb.active .gnb-menus { right:0; transition:right 0.2s ease-in; } #header .area-gnb .gnb-menus li { display:block; padding:0; border-top:1px solid #434343; } #header .area-gnb .gnb-menus li a { font-size:12px; font-family:'Noto Sans'; font-weight:500; display:block; line-height:49px; color:#fff; vertical-align: middle; padding:0 20px; } #header .area-gnb .gnb-menus > li > a { background:url('../img/common/ico_arrow_down.png') 90% center no-repeat; background-size: 10px auto; letter-spacing: 0.04em; } #header .area-gnb .gnb-menus > li.current > a { color:#ffcd34; background:url('../img/common/ico_arrow_up.png') 90% center no-repeat; background-size: 10px auto; } #header .area-gnb .gnb-menus > li.only a { background:none; } /* social menu */ #header .area-gnb .gnb-menus > li.social { width:100%; position:absolute; top:0; right:0; text-align:right; padding:0; } #header .area-gnb .gnb-menus > li.social a { width:24px; height:24px; display:inline-block; background-color:#fff; box-sizing:content-box; margin:0; border-radius: 50%; padding:12px 5px; } #header .area-gnb .gnb-menus > li.social a img { display:none; } #header .area-gnb .gnb-menus > li.social .ico_blog { background:url('../img/common/ico_social_blog_m.png') center no-repeat; background-size:24px auto; } #header .area-gnb .gnb-menus > li.social .ico_insta { background:url('../img/common/ico_social_insta_m.png') center no-repeat; background-size:24px auto; margin-right:10%; } /* lnb menu */ #header .area-gnb .lnb-menus { position:static; padding:0; } #header .area-gnb .lnb-menus li { text-align:left; } #header .area-gnb .lnb-menus li a { font-size:10px; color:#c5c5c5; font-weight:400; padding:0 30px; } #header .area-gnb .current .lnb-menus { display:block; } /* ---------- 최상단배너 ---------- */ #header .wide-top { display:block; position:relative; width: 100%; background-color: #ffcc35; } #header .wide-top .wide-top-con { display:block; text-align:center; width:100%; margin:0 auto; } #header .top-pc { display:none; } /* 랜딩 최상단배너 */ .wide-top { display:block; position:relative; width: 100%; background-color: #ffcc35; } .wide-top .wide-top-con { display:block; text-align:center; width:100%; margin:0 auto; } .top-pc { display:none; } /* bg black */ .bgblack { background:rgba(0,0,0,0.75); opacity: 0; transition:opacity 0.2s ease-in; } .bgblack.on { width:100%; height:100vh; position:absolute; z-index:5; opacity: 1; transition:opacity 0.2s ease-in; } /* --------------------------------------- FOOTER --------------------------------------- */ .main .wrap-btn-top { display:none; } .main .wrap-btn-call { display:none; } .main .wrap-btn-kakao { display:none; } /* --------------------------------------- MAIN --------------------------------------- */ /* ---------- VISUAL ---------- */ .main .visual { width:100%; position:relative; padding-top:0px; } /* .main .visual .slick-slide img { width:100%; } .main .visual .slick-arrow { width:40px; height:40px; box-sizing:border-box; background:url('../img/main/ico_arrow_r.png') center no-repeat; text-indent: -9999px; font-size:0; position:absolute; top:50%; z-index: 2; } .main .visual .slick-prev { left:10px; transform: translateY(-50%); transform: rotate(180deg); } .main .visual .slick-next { right:10px; } */ /* ---------- SECTION - 01 ---------- */ .main .sec01 { padding-top: 168px; background: #ffdb35; } .main .sec01 .inner-box { width: 700px; margin: 0 auto; padding: 0; text-align: center; } .main .sec01 h2 { margin-bottom: 60px; color: #000; font-size: 110px; line-height: 1.125; } .main .sec01 h2 span { color: #fff; } .main .sec01 p { position: relative; color: #000; font-size: 42px; line-height: 1.25; letter-spacing: -0.04em; } .main .sec01 p:after { display: block; content: ''; position: absolute; bottom: -180px; left: 50%; width: 1px; height: 130px; background: #000; } .main .sec01 p b { display: inline-block; height: auto; font-weight: 500; line-height: 1; box-shadow: inset 0 -33px 0 #fff; } .main .sec01 small { display: block; margin: 210px auto 48px; color: #000; font-weight: 300; font-size: 38px; line-height: 1.35; letter-spacing: -0.04em; } .main .sec01 small b { position: relative; font-weight: 500; } .main .sec01 small b::after { left: -42px; top:-9px; width: 147px; height: 56px; background:url('../img/main/sec01_obj.png')no-repeat center/cover; } .main .sec01 small u { font-weight: 500; text-underline-position : under; } .main .sec01 a { margin: 0 auto; } .main .sec01 img { width: 100%; margin: 0 auto; } .main .sec01 .mb-view { display: block !important; } /* ---------- SECTION - 02 ---------- */ .main .sec02 { background-size: cover; } .main .sec02 .sec02-inner { max-width: 100%; margin:0 auto; padding: 95px 18px 45px; } .main .sec02 .inner-box { padding: 0 } .main .sec02 h2 { margin-bottom: 44px; color: #181818; font-size: 56px; } .main .sec02 ul li { margin-bottom: 0; padding-left: 13px; font-size: 18px; line-height: initial; } .main .sec02 ul li:nth-of-type(2) { margin: 3px 0; } .main .sec02 ul li:after { top: 4px; left:0; width:10px; height:10px; } .main .sec02 ul li span { line-height: 1.3; box-shadow: inset 0 18px #18634e; } .main .sec02 p { margin: 36px auto 0; font-size: 18px; line-height: 1.2; letter-spacing: -0.04em; } .main .sec02 p span { box-shadow: inset 0 -14px 0 #ffdb35; } .main .sec02 img { display: none; } /* ---------- SECTION - 02 ---------- */ .main .sec03 .sec03-inner { padding: 120px 0; } .main .sec03 h3 img { padding: 0 18px; } .main .sec03 p { margin: 18px 0 25px; font-size: 34px; } .main .sec03 p b { font-weight: 700; } .main .sec03 img { max-width: 700px; padding: 0 7px 0 15px; } .main .sec03 .mb-view { display: block !important; } /* ---------- SECTION - 04 ---------- */ .main .sec04 { background: url('../img/main/mo_sec04_bg.png')no-repeat center/cover; } .main .sec04 .sec04-inner { padding: 120px 0; } .main .sec04 h3 img { max-width: 700px; padding: 0 46px; } .main .sec04 p { margin: 18px 0 12px; font-size: 34px; } .main .sec04 .sec04-inner > img { max-width: 700px; margin: 0 auto; padding: 0 4px 0 2px; } .main .sec04 .mb-view { display: block !important; } /* ---------- SECTION - 05 ---------- */ .main .sec05 { background: url('../img/main/mo_sec05_bg.png')no-repeat center/cover; } .main .sec05 .sec05-inner { max-width: 700px; margin: 0 auto; padding: 162px 0 136px; text-align: center; } .main .sec05 h2 { font-size: 90px; } .main .sec05 h2 span { font-size: 110px; } .main .sec05 p { margin: 132px 0 90px; color: #fff; font-size: 36px; line-height: 1.35; letter-spacing: -0.04em; } .main .sec05 strong { display: inline; margin: 0 auto 36px; line-height: 1.3; font-size: 42px; box-shadow: inset 0 -35px 0 #ff5a00; } /* ---------- SECTION - 06 ---------- */ .main .sec06 { background: url('../img/main/mo_sec06_bg.png')no-repeat center/cover; } .main .sec06 .sec06-inner { width: fit-content; margin: 0 auto; padding: 152px 25px 32px; } .main .sec06 p { display: flex; width: 455px; height: 84px; margin: 0 auto 42px; font-size: 36px; border-radius: 42px; justify-content: center; align-items: center; } .main .sec06 h2 { margin-bottom: 40px; font-size: 110px; } .main .sec06 h2 span { font-size: 90px; } .main .sec06 img { box-shadow: 5px 9px 10px 0px rgba(65, 54, 5, 0.1); border-radius: 20px; } .main .sec06 .mb-view { display: block !important; } .main .sec-profit { width: 100%; background: url('../img/main/profit_bg.png')no-repeat bottom right/contain; padding-bottom: 60vw; } .main .sec-profit .profit-inner { max-width: 700px; margin: 0 auto; padding: 72px 0 44px; text-align: left; } .main .sec-profit h2 { max-width: 700px; margin: 0 auto 60px; font-size: 110px; } .main .sec-profit p { max-width: 700px; margin: 0 0 90px; color: #000; font-size: 34px; } .main .sec-profit .profit-inner img { margin: 0 auto; } .main .sec-profit .wrap-img .mb-view { display: block !important; } .main .sec-side .side-inner { display: flex; flex-wrap: wrap; flex-direction: column-reverse; } .main .sec-side .side-inner .bottom-left { width: 100%; } .main .sec-side .side-inner .bottom-right { width: 100%; border-radius: 35px 0 0 0; } .main .sec-side .side-inner .bottom-right a { bottom: 13%; left: 5%; } .main .sec-side .side-inner .bottom-right .mb-view { display: block !important; } .main .sec-review { padding: 176px 0 140px; background: url('../img/main/mo_review_bg.png')no-repeat top/cover; } .main .sec-review .review-inner { max-width: 700px; } .main .sec-review .review-inner > p { width: 340px; height: 84px; font-size: 36px; border-radius: 40px; } .main .sec-review .review-inner > h4 { margin-top: 60px; padding: 0 32px; font-size: 80px; line-height: initial } .main .sec-review img { margin: 0 auto; } .main .sec-review .title02 { margin-bottom: 70px; } .main .sec-review .review-info { display: block; max-width: 700px; margin: 70px auto 0; text-align: center; } .main .sec-review .review-info p { font-size: 80px; } .main .sec-review .review-info strong { font-size: 110px; } .main .sec-review .info-inner { padding: 0 54px; margin-top: 60px; } .main .sec-review .info-inner b { margin: 0 auto 38px; font-size: 70px; box-shadow: inset 0 -52px 0 #ffeebb; } .main .sec-review .info-inner img { width: 100%; margin: 0 auto 108px; padding: 0 14px; } .main .sec-review .info-inner p { color: #000; font-size: 42px; } .main .sec-review .mb-view { display: block !important; } .main .sec00 { position: relative; height: 670px; background: #fff; } .main .sec00 .sec00-inner { padding-top: 145px; padding-left: 40px; } .main .sec00 .wrap-txt { position: relative; display: flex; max-width: 1200px; height: 200px; margin:0 auto; flex-wrap: wrap; flex-direction: column; border-left: 5px solid #000; } .main .sec00 h3 { position: absolute; top: 3px; font-size: 90px; line-height: 1; letter-spacing: -0.06em; font-weight: 700; } .main .sec00 h3 span { color: #18634e; line-height: 1; letter-spacing: -0.06em; } .main .sec00 h4 { position: absolute; bottom: -20px; font-size: 110px; line-height: 1; letter-spacing: -0.06em; font-weight: 700; } .main .sec00 h4 span { color: #ffcc35; line-height: 1; letter-spacing: -0.06em; } .main .sec00 img { position: absolute; top: auto; bottom: -200px; right: 50%; width: 87.5vw; max-width: 613px; transform: translateX(50%); } .main .sec19 { padding-top: 270px; background: #fffdf5; } .main .sec19 .sec19-list small { font-size: 36px; border-bottom: 1px solid #d4d4d4 } .main .sec19 .sec19-list h5 { font-size: 100px; } .main .sec19 .sec19-list:nth-of-type(1) { margin-bottom: 120px; } .main .sec19 .sec19-list:nth-of-type(1) h5 { margin: 30px auto 50px; } .main .sec19 .sec19-list:nth-of-type(2) h5 { margin: 30px auto 50px; } .main .sec19 .sec19-list strong { margin-bottom: 34px; font-size: 80px; box-shadow: inset 0 -32px 0 #ffdb35; } .main .sec19 .sec19-list p { padding: 0 16px; font-size: 34px; } .main .sec19 .sec19-list p span { display: inline; box-shadow: inset 0 -28px 0 #ffdb35; } .main .sec19 .sec19-list .mb-view { display: block !important; } .main .sec19 .sec19-list:nth-of-type(1) img { max-width: 628px; margin-top: 70px; padding: 0 18px; } .main .sec19 .sec19-list:nth-of-type(2) img { margin-top: 36px; margin-left: 0; } .main .sec19 .sec19-list:nth-of-type(2) img.pc-view { display: block; } .main .sec19 .sec19-list:nth-of-type(2) img.mb-view { display: none !important; } .main .sec19 a { bottom: 14%; left: calc(50% - 105px); } /* ---------- SECTION - 09 ---------- */ /* .main .sec09 .inner { padding:50px 40px; } .main .sec09 .wrap-txt { width:100%; float:none; padding:0; text-align:center; } .main .sec09 .wrap-txt h4 { background-color:#111; float:none; } .main .sec09 .wrap-txt h5 { float:none; margin:20px 0; padding:0; } .main .sec09 .wrap-txt h5 .tel { font-size:34px; color:#111; } .main .sec09 .wrap-txt h5 p { font-size:14px; } .main .sec09 .wrap-txt h6 { float:none; font-size:15px; margin-bottom:40px; } .main .sec09 .wrap-txt h6 .title { line-height:180%; } .main .sec09 .wrap-txt h6 .contents-time { line-height:140%; } .main .sec09 .wrap-txt h6 .holiday { line-height:140%; } */ /* --------------------------------------- SECTION - 09 --------------------------------------- */ .main .sec09 { background:#ffcc35; } .main .sec09 .inner { padding:6px 8px 2px; } .main .sec09 .wrap-txt { width:100%; float:none; padding:0; } .main .sec09 .wrap-txt h4 { display:none; } .main .sec09 .wrap-txt h5 { float:none; margin:0; padding:0; text-align:left; } .main .sec09 .wrap-txt h5 .tel { font-family: 'S coredream'; font-size:16px; font-weight:900; margin:0 0 5px; line-height:1em; color:#111; } .main .sec09 .wrap-txt h5 p { font-family:'Noto Sans'; font-weight:300; font-size:12px; display:inline-block; } .main .sec09 .wrap-txt h6 { float:none; font-size:15px; margin-bottom:40px; } .main .sec09 .wrap-txt h6 .title { line-height:180%; } .main .sec09 .wrap-txt h6 .contents-time { line-height:140%; } .main .sec09 .wrap-txt h6 .holiday { line-height:140%; } /* form */ .main .sec09 .wrap-form { width:100%; float:none; position:relative; margin:3px 0; } .main .sec09 .wrap-form .item-input { width:25%; float:none; margin:0 0 0 2px; float:left; } .main .sec09 .wrap-form .item-input.name { width:20%; margin:0; } .main .sec09 .wrap-form .item-input.questions { display:none; } .main .sec09 .wrap-form .item-input input[type="text"], .main .sec09 .wrap-form .item-input input[type="tel"] { width:100%; height:30px; line-height:30px; box-sizing:border-box; padding:3px 10px; font-size:12px; color:#222; border-color:#b7b7b7; } .main .sec09 .wrap-form .questions { width:100%; resize: none; } .main .sec09 .wrap-form .questions textarea { display:block; height:60px; box-sizing:border-box; padding:10px; font-size:16px; color:#222; resize: none; line-height:1.2em; border-color:#b7b7b7; } .main .sec09 .wrap-form .item-btn { margin:0; position:absolute; right:0px; bottom:20px; width:28%; } .main .sec09 .wrap-form .item-btn a { height:30px; width:100%; margin:0; background-color:#000; font-family: 'S coredream'; font-size:12px; color:#fff!important; font-weight:600; border-radius:0px; line-height:30px; } .main .sec09 .wrap-form .item-chk { width:100%; margin:0; clear:both; float:none; font-family:'Noto Sans'; font-weight:300; font-size:12px; } .main .sec09 .wrap-form .item-chk input { width:14px; height:14px; border:1px solid #b7b7b7; margin:0; cursor: pointer; } .main .sec09 .wrap-form .item-chk label { cursor: pointer; color:#111; } .main .sec09 .wrap-form .item-chk a { vertical-align: middle; color:#111; } .main .sec-blend { padding: 134px 0; } .main .sec-blend .blend-inner { padding: 0 30px; } .main .sec-blend .sec-title { width: 512px; margin: 0 auto 50px; font-size: 36px; border-radius: 40px; } .main .sec-blend h3 { font-size: 90px; } .main .sec-blend h4 { font-size: 90px; } .main .sec-blend img { width: 100%; max-width: 556px; margin: 76px auto 178px; padding: 0 .main 38px; } .main .sec-blend p { padding: 0 12px; font-size: 34px; letter-spacing: -0.05em; } .main .sec-blend p .mb-view { display: block !important; } .main .sec-blend p span { box-shadow: inset 0 24px 0 #ffee35; } .main .sec-blend p:before { left: calc(50% - 44px); top: -102px; width: 88px; height: 10px; background: #ffee35; } .main .blend02 { padding: 78px 0 30px; background:url('../img/main/blend02_bg.png')no-repeat center/cover; } .main .blend02 h4 { color: #181818; padding-top: 5px; font-size: 33px; font-weight: 700; letter-spacing: -0.04em; text-align: center; } .main .blend02 h4 i { position: relative; font-size: 43px; } .main .blend02 h4 i:after { top: -10px; left: calc(50% - 2px); width: 5px; height: 5px; } .main .blend02 .wrap-cont { margin: 0 auto; } .main .blend02 .wrap-cont ul { flex-direction: column; } .main .blend02 .wrap-cont ul li { margin: 55px 0; } .main .blend02 .wrap-cont ul li:nth-of-type(3) { margin: 90px 0 30px; } .main .blend02 .wrap-cont ul li:before { left: calc(50% - 28px); top:-74px; } .main .blend02 .wrap-cont ul li:nth-of-type(3):before { top:-121px; } .main .blend03 h4 { margin: 0 auto; width: 500px; } .main .blend03 .wrap-cont { margin: 70px 0 40px; } .main .blend03 .wrap-cont ul { max-width: 570px; margin: 0 auto; } .main .blend03 .wrap-cont ul li { margin: 30px 40px; } .main .blend03 .wrap-cont .wrap-txt .desc { font-size: 30px; } .main .blend03 .subtitle { width: 570px; margin: 50px auto 0; } .main .sec07 { padding: 175px 0 86px; background:url('../img/main/mo_sec07_bg.png')no-repeat center/cover; } .main .sec07 .sec07-inner { max-width: 700px; text-align: center; } .main .sec07 h4 { font-size: 70px; font-weight: 700; } .main .sec07 h4 span { font-weight: 300; } .main .sec07 h5 { margin: 48px 0 68px; font-size: 90px; box-shadow: inset 0 -72px 0 #f2571b; } .main .sec07 p { padding-top: 75px; font-size: 38px; } .main .sec07 p u { margin-top: 44px; font-size: 42px; } .main .sec07 p :after { top: 0; right: calc(50% - 23px); width: 46px; height: 4px; background: #fff; } .main .sec07 a { float: none; margin: 80px auto 0; } .main .sec07 img { margin-top: 75px; margin-left: -16px; } .main .sec07 .mb-view { display: block !important; } /* ---------- SECTION - 10 ---------- */ .main .sec10 .wrap-img .pc-view { display:block; margin:0 auto; margin-top:30px; } .main #mo { position: static; width: 20%; } .main .sec10 .wrap-txt h5 { font-size: 56px } .main .sec10 .wrap-txt h4 { font-size: 90px; } /* ---------- SECTION - 11 ---------- */ .main .sec11 { background:url('../img/main/img_sec11_bg.jpg') top no-repeat; background-size: 200% auto; } .main .sec11 .wrap-txt .title02 { display:block; margin:0 auto; margin-top:30px; } .main .sec11 .wrap-img .insta { display:block; margin:0 auto; margin-top:80px; } /* ---------- SECTION - 12 ---------- */ .main .sec12 { width: 100%; margin:0 auto; } .main .sec12 .sec12-inner01 { margin: 0 auto; padding: 116px 40px 32px; } .main .sec12 .sec12-inner01 p { width: 250px; height: 84px; margin: 0 auto 62px; font-size: 36px; } .main .sec12 .sec12-inner01 h4 { font-size: 110px; text-align: center; } .main .sec12 .sec12-inner01 h4 span { font-size: 110px; } .main .sec12 .sec12-inner01 h4 span:after { left: -20px; bottom: 0; width: 327px; height: 169px; background:url('../img/main/sec12_obj01.png')no-repeat; background-size: cover; } .main .sec12 .sec12-inner01 h6 { margin: 0 auto; font-size: 70px; } .main .sec12 .sec12-inner01 img { max-width: 700px; margin: 0 auto; } .main .sec12 .sec12-inner02 { padding: 65px 0 0; } .main .sec12 .sec12-inner02 p { margin: 0 auto 18px; font-size: 42px; } .main .sec12 .sec12-inner02 p span { box-shadow: inset 0 -32px 0 #ffee35; } .main .sec12 .sec12-inner02 img { margin: 0 auto; padding: 0 17px 46px 20px; } .main .sec12 .wrap-img02 img { margin: 0 auto; } .main .sec12 .sec12-inner02 .mb-view { display: block !important; } .main .sec13 { padding: 145px 0 85px; background:url('../img/main/mo_sec13_bg.png')no-repeat center/cover; } .main .sec13 .sec13-inner { max-width: 700px; } .main .sec13 h3 { margin: 0 auto 28px; background: url('../img/main/sec13_obj01.png')no-repeat bottom 10px center; font-size: 110px; } .main .sec13 h4 { margin: 0 auto 45px; font-size: 70px; } .main .sec13 h4 b:after { bottom: 0; left: 0; width: 204px; height: 86px; background: url('../img/main/sec13_obj02.png')no-repeat center/cover; } .main .sec13 strong { display: block; margin: 0 auto 16px; font-size: 50px; line-height: initial; } .main .sec13 .mb-view { display: block !important; } .main .sec13 .pc-view { display: none; } .main .sec14 { padding: 80px 0 62px; background:url('../img/main/mo_sec14_bg.png')no-repeat center/cover; } .main .sec14 .sec14-inner { width: fit-content; max-width: 700px; } .main .sec14 h2 { margin: 0 auto 62px; font-size: 50px; } .main .sec14 h3 { font-size: 90px; } .main .sec14 h3 span { box-shadow: inset 0 -62px 0 #fff; } .main .sec14 h4 { font-size: 70px; } .main .sec14 img { margin: 62px auto 44px; } .main .sec14 p { font-size: 50px; font-weight: 500; } .main .sec14 strong { font-size: 70px; } .main .sec14 strong span { box-shadow: inset 0 -50px 0 #fff; } .main .sec14 .mb-view { display: block !important; } .main .sec08 { padding: 138px 0 215px; background:url('../img/main/img_sec08_bg_m.jpg') right center no-repeat; background-size:cover; } .main .sec08 .inner { max-width: 700px; padding: 0; } .main .sec08 .wrap-txt { text-align:center; } .main .sec08 .wrap-txt h4 { margin-bottom: 0; font-size: 110px; } .main .sec08 .wrap-txt strong { display: block; margin:10px 0 24px; font-size: 50px; } .main .sec08 a { margin: 0 auto; } /* --------------------------------------- MAIN POP --------------------------------------- */ .popup .modal-cont img { width:100%; max-width:none; } /* form */ /* .main .sec09 .wrap-form { width:100%; float:none; } .main .sec09 .wrap-form .item-input { width:100%; float:none; margin-left:0; margin-bottom:5px; } .main .sec09 .wrap-form .questions { width:100%; } .main .sec09 .wrap-form .item-btn { margin:15px 0 0; } .main .sec09 .wrap-form .item-btn a { height:60px; width:100%; margin:0; color:#fff; } .main .sec09 .wrap-form .item-chk { margin:0; } .main .sec09 .wrap-form .item-chk input { margin:5px 0 5px; } */ /* --------------------------------------- SUB --------------------------------------- */ /* ---------- COMMON ---------- */ /* sub whole */ .sub .inner { padding:100px 60px; box-sizing:border-box; } .sub h2 { display:none; } .sub .subvisual { display:none; } .sub .area-snb { display:none; } /* about */ .about .subvisual { background-position: center; } .about .snb-menus { width:auto; } /* menu */ .menu .subvisual { background:url('../img/menu/img_visual.jpg') center no-repeat; } /* franchisee */ .franchisee .subvisual { background:url('../img/franchisee/img_visual.jpg') center 10% no-repeat; } /* store */ .store .subvisual { background:url('../img/store/img_visual.jpg') top right no-repeat; } .store .snb-menus { width:auto; } /* news */ .news .subvisual { background:url('../img/news/img_visual.jpg') top right no-repeat; } .news .snb-menus { width:auto; } /* ---------- ABOUT ---------- */ /* brand */ .brand .sec01 { background: url('../img/about/bg_brand01.jpg') center right no-repeat; background-size:cover; position:relative; } .brand .sec01:before { content:''; display:block; width:100%; height:100%; position:absolute; background: #333; left:0; top:0; opacity: 0.6; z-index:1; } .brand .sec01 .wrap-txt { position: relative; z-index: 1; } .brand .sec02 .inner { padding-bottom: 250px; overflow: visible; } .brand .sec02 .wrap-txt { text-align: center; } .brand .sec02 .wrap-txt .subtitle { margin-bottom:20px; } .brand .sec02 .wrap-txt .desc { margin:40px 0 20px; } .brand .sec02 .wrap-img { width:70%; max-width:260px; position:absolute; left:50%; top:inherit; bottom:-50px; transform: translateX(-50%); } .brand .sec03 .wrap-txt h4 { position:relative; margin:10px auto 40px; display:block; padding:0; } .brand .sec03 .wrap-txt h4:before, .brand .sec03 .wrap-txt h4:after { width:30%; height:1px; background:#fff; top:0%; } .brand .sec03 .wrap-txt .desc { padding:0 10%; } /* bi */ .bi .sec01 .wrap-img img { width:40%; } .bi .sec01 .wrap-txt .desc { font-size:16px; } .bi .sec02 .wrap-txt { width:100%; text-align:center; margin:50px 0 0; } .bi .sec02 .wrap-txt .desc { font-size:16px; } /* visit */ .visit h2 { font-size:0; } .visit .inner { padding-top:50px; } .visit .area-visit.inner { padding-top:100px; } .visit .area-visit .visit-tabs { text-align:center; } .visit .wrap-txt .address { width:100%; float:none; } .visit .wrap-txt .tel { width:100%; float:none; border-top:1px solid #ebebeb; } /* ---------- MENU ---------- */ /* menu01 */ .menu01 .sec01 .inner { padding:100px 60px; box-sizing: border-box; } .menu01 .sec02 { background:url('../img/menu/bg_menu0102.jpg') 50% center no-repeat; background-size:cover; } .menu01 .sec02 .inner { padding:100px 0; } .menu01 .sec02 .wrap-txt { text-align:right; padding-right:40px; } .menu01 .sec02 { background:url('../img/menu/bg_menu0102_m.jpg') center bottom no-repeat; background-size:cover; } .menu01 .sec02 .inner { padding-bottom: 65%; } .menu01 .sec02 .wrap-txt { text-align:center; } .menu01 .sec04 { background:url('../img/menu/bg_menu0104_m.jpg') center bottom no-repeat; background-size:cover; } .menu01 .sec04 .inner { padding: 100px 60px 65%; } .menu01 .sec04 .wrap-txt { text-align:center; } /* drink */ .drink h2 { padding:60px 0 30px; margin:0; display:block; font-size:20px; letter-spacing: 0.1em; } .drink .inner { padding:0px 60px 100px; } .drink .sec01 .wrap-list { border-top:1px solid #ebebeb; padding:60px 0 0; } .drink .sec01 .wrap-list ul { margin-left:-20px; } .drink .sec01 .wrap-list ul li { width:calc(33.3333% - 20px); margin-left:20px; margin-bottom:50px; } /* ---------- FRANCHISEE ---------- */ /* blending */ .blending .sec01 .inner { background:url('../img/franchisee/img_blending_coffee01.png') center 160% no-repeat; background-size:600px auto; } .blending .sec01 .wrap-txt h4 { margin:0 0 40px; } .blending .sec01 .wrap-txt .quotation span:first-of-type { margin-left:0px; margin-bottom:30px; } .blending .sec01 .wrap-txt .quotation span:last-of-type { margin-left:0px; } .blending .sec01 .wrap-txt .line { height:130px; margin:30px auto 100px; } .blending .sec02 .wrap-cont { margin:50px 0 0; } .blending .sec02 .wrap-cont ul { margin:0px; } .blending .sec02 .wrap-cont ul li { width:60%; float:none; margin:0 auto 100px; } .blending .sec02 .wrap-cont ul li:before { left:50%; top:-50%; transform: translate(-50%, 50%); } .blending .sec02 .wrap-cont ul li:first-child:before { display:none; } .blending .sec02 .wrap-cont .active { margin:180px auto 0; } .blending .sec02 .wrap-cont .active:before { transform: translate(-50%, -50%); } .blending .sec03 .wrap-cont { margin:20px 0 0; } .blending .sec03 .wrap-cont ul { margin-left:-20px; } .blending .sec03 .wrap-cont ul li { width:calc(50% - 20px); margin-left:20px; float:left; } .blending .sec03 .wrap-cont .wrap-txt .desc span { max-width:130px; line-height:32px; } .blending .sec03 .wrap-img { margin:30px 0 0; } .blending .sec04 .wrap-img .pc-view { display:block; } /* different */ .different .sec01 .mb-view { display:block!important; } .different .sec01 b:before { content:''; display:block; } .different .sec02 { background:url('../img/franchisee/bg_differentiation02.jpg') 75% bottom no-repeat; } .different .sec03 .subtitle { margin:20px 0 40px; } .different .sec03 .wrap-cont ul { margin-left:0px; } .different .sec03 .wrap-cont ul li { width:100%; height:auto; margin-left:0px; margin-bottom:10px; box-sizing:border-box; float:none; padding:20px 0; position:relative; } .different .sec03 .wrap-cont ul li:nth-child(2n+1) { margin-top:40px; } .different .sec03 .wrap-cont ul li:nth-child(2n+1):after { transform: translateX(-50%) rotate(90deg); bottom:-30px; z-index: 2; } .different .sec03 .wrap-cont ul li:nth-child(1):after { } /* interview */ .interview .sec01 .pc-view { display:block } /* competitive */ .competitive .sec04 .wrap-txt { width:50%; float:left; text-align:left; padding-top:50px; } .competitive .sec04 .wrap-img { max-width:520px; } .competitive .sec05 .inner { background-size:50% auto; } .competitive .sec07 .wrap-cont ul { margin:0 20px 0 0px; } .competitive .sec09 .wrap-cont { margin:0 40px; } /* interior */ .interior .sec01 .desc { font-size:16px; } /* ---------- STORE ---------- */ /* store */ .store-list .wrap-search { padding:20px; } .store-list .wrap-search .area-wrap input[type="text"] { width:240px; margin-right:20px; box-sizing:border-box; padding:0 10px; } .store-view .inner { padding:0 200px 120px; } /* ---------- REASON ---------- */ /* reason */ .reason01_bg { background:url('../img/about/reason/bg_reason.jpg') center top no-repeat; position:relative; margin-top: -180px; } .reason01_bg #pcimg { margin-top: -60px; } } /***********************************************************************************************************************/ /***********************************************************************************************************************/ /***********************************************************************************************************************/ /* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px ##Device = 태블릿, 아이패드(가로) ##Screen = 768px에서 1024px 사이 */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { /* X */ } /* 상단 로고 여백 */ @media (max-width: 440px) { #header h1 { padding:50px 0 10px 0; } } @media (min-width: 441px) and (max-width: 587px) { #header h1 { padding:65px 0 10px 0; } } @media (min-width: 588px) and (max-width: 767px) { #header h1 { padding:80px 0 10px 0; } } /***********************************************************************************************************************/ /***********************************************************************************************************************/ /***********************************************************************************************************************/ /* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px ##Device = 저해상도 태블릿, 모바일(가로) ##Screen = 481px에서 767px 사이 */ @media (min-width: 481px) and (max-width: 767px) { /* X */ } /***********************************************************************************************************************/ /***********************************************************************************************************************/ /***********************************************************************************************************************/ /* ##Device = Most of the Smartphones Mobiles (Portrait+Landscape) ##Screen = B/w 320px to 767px ##Device = 저해상도 태블릿, 대부분의 스마트폰 모바일 기기(세로+가로) ##Screen = 320px에서 767px 사이 */ @media screen and (max-width: 767px) { /* --------------------------------------- BASIC --------------------------------------- */ #container { /* 수정 margin-top:50px; */ margin-top:95px; } .inner { width:100%; max-width:100%; margin:0 auto; overflow-x: hidden; } .section { } .pc-view { display: none!important; } .mb-view { display: block!important; } /* aside */ .aside-main { display:none; } /* --------------------------------------- HEADER --------------------------------------- */ #header { width:100%; height:50px; background-color:#333; z-index: 10; position:fixed; left:0; top:0; } #header .inner { padding:0; box-sizing:border-box; background-color:#333333; } #header h1 { /* 수정 padding:10px 0; */ /* padding:50px 0 10px 0; */ float:none; position:absolute; left:50%; top:0; transform: translateX(-50%); } #header h1 a { width: 170px; height: 50px; text-indent: -9999px; display:block; background: url('../img/logo.png') center 5px no-repeat; background-size: 170px 45px; margin-top: -6%;} /* ---------- gnb ---------- */ #header .area-gnb { padding:15px; float:right; } #header .area-gnb .menu-trigger { display:block; text-indent: -9999px; font-size:0; width:30px; height:30px; position:relative; cursor: pointer; } #header .area-gnb.active { float:left; margin-left:15%; } /* button trigger */ #header .menu-trigger { cursor: pointer; } #header .menu-trigger span { width:100%; height:2px; display:inline-block; box-sizing:border-box; position:absolute; left:0; transition: all .4s; border-radius: 2px; background-color:#c5c5c5; cursor: pointer; } #header .menu-trigger span:nth-of-type(1) { top: 5px; } #header .menu-trigger span:nth-of-type(2) { top: 14px; } #header .menu-trigger span:nth-of-type(3) { bottom: 5px; } #header .active .menu-trigger span:nth-of-type(1) { -webkit-transform: translateY(9px) rotate(-45deg); transform: translateY(9px) rotate(-45deg); } #header .active .menu-trigger span:nth-of-type(2) { opacity: 0; } #header .active .menu-trigger span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(45deg); transform: translateY(-9px) rotate(45deg); } /* sub menu */ #header .area-gnb .gnb-menus { width:70%; height:100vh; overflow-y:auto; position:absolute; right:-71%; top:0px; z-index: 20; background-color:#222222; padding:50px 0 0; box-sizing:border-box; transition:right 0.2s ease-in; } #header .area-gnb.active .gnb-menus { right:0; transition:right 0.2s ease-in; } #header .area-gnb .gnb-menus li { display:block; padding:0; border-top:1px solid #434343; } #header .area-gnb .gnb-menus li a { font-size:12px; font-family:'Noto Sans'; font-weight:500; display:block; line-height:49px; color:#fff; vertical-align: middle; padding:0 20px; cursor: pointer; } #header .area-gnb .gnb-menus > li > a { background:url('../img/common/ico_arrow_down.png') 90% center no-repeat; background-size: 10px auto; letter-spacing: 0.04em; } #header .area-gnb .gnb-menus > li.current > a { color:#ffcd34; background:url('../img/common/ico_arrow_up.png') 90% center no-repeat; background-size: 10px auto; } #header .area-gnb .gnb-menus > li.only a { background:none; } /* social menu */ #header .area-gnb .gnb-menus > li.social { width:100%; position:absolute; top:0; right:0; text-align:right; padding:0; } #header .area-gnb .gnb-menus > li.social a { width:24px; height:24px; display:inline-block; background-color:#fff; box-sizing:content-box; margin:0; border-radius: 50%; padding:12px 5px; } #header .area-gnb .gnb-menus > li.social a img { display:none; } #header .area-gnb .gnb-menus > li.social .ico_blog { background:url('../img/common/ico_social_blog_m.png') center no-repeat; background-size:24px auto; } #header .area-gnb .gnb-menus > li.social .ico_insta { background:url('../img/common/ico_social_insta_m.png') center no-repeat; background-size:24px auto; margin-right:10%; } /* lnb menu */ #header .area-gnb .lnb-menus { position:static; padding:0; } #header .area-gnb .lnb-menus li { text-align:left; } #header .area-gnb .lnb-menus li a { font-size:10px; color:#c5c5c5; font-weight:400; padding:0 30px; } #header .area-gnb .current .lnb-menus { display:block; } /* ---------- 최상단배너 ---------- */ #header .wide-top { display:block; position:relative; width: 100%; background-color: #ffcc35; } #header .wide-top .wide-top-con { display:block; text-align:center; padding-top:0px; /* 수정 padding-top:10px */ width:100%; margin:0 auto; } #header .top-pc { display:none; } /* 랜딩 최상단배너 */ .wide-top { display:block; position:relative; width: 100%; background-color: #ffcc35; } .wide-top .wide-top-con { display:block; text-align:center; padding-top:0px; /* 수정 padding-top:10px */ width:100%; margin:0 auto; } .top-pc { display:none; } /* bg black */ .bgblack { background:rgba(0,0,0,0.75); opacity: 0; transition:opacity 0.2s ease-in; } .bgblack.on { width:100%; height:100vh; position:absolute; z-index:5; opacity: 1; transition:opacity 0.2s ease-in; } /* --------------------------------------- FOOTER --------------------------------------- */ #footer { background-color:#222; padding:60px 0; } #footer .inner { } #footer .copyright { text-align:center; font-size:0; } #footer .copyright .logo { height:30px; margin:0 auto; text-align:center; margin:0 0 20px; } #footer .copyright .logo img { height:100%; } #footer .copyright .social { margin-bottom:20px; } #footer .copyright .social a { width:30px; height:30px; display:inline-block; margin:0 5px; } #footer .copyright .social a img { } #footer .copyright span { font-size:10px; line-height:1.7em; color:#a0a0a0; } #footer .copyright span:before { content: ''; display: inline-block; width:1px; height:10px; background-color:#a0a0a0; vertical-align:-1px; margin:0 10px; } #footer .copyright span:nth-of-type(1):before { display:none; } #footer .copyright span:nth-of-type(2):before { display:block; width:0; height:0; } #footer .copyright span:nth-of-type(3):before { display:block; width:0; height:0; } #footer .copyright span:nth-of-type(5):before { display:block; width:0; height:0; } #footer .copyright p { font-size:10px; color:#7e7e7e; margin-top:10px; } /* top btn */ /* #footer .wrap-btn { width:44px; height:44px; background-color:#000; border-radius: 50%; position:fixed; right:10px; bottom:100px; } #footer .wrap-btn a { width:100%; height:100%; display:block; text-indent:-9999px; background:url('../img/main/ico_arrow_white.png') center no-repeat; background-size:auto 10px; } #footer .wrap-btn-call { width:44px; height:44px; background-color:#355f54; border-radius: 50%; position:fixed; left:10px; bottom:100px; z-index:2; } #footer .wrap-btn-call a { width:100%; height:100%; display:block; text-indent:-9999px; background:url('../img/main/ico_call_white.png') center no-repeat; background-size:auto 20px; } #footer .wrap-btn-kakao { width:44px; height:44px; background-color:#fae100; border-radius: 50%; position:fixed; left:62px; bottom:100px; z-index:2; } #footer .wrap-btn-kakao a { width:100%; height:100%; display:block; text-indent:-9999px; background:url('../img/main/ico_kakao_m.png') center no-repeat; background-size:auto 25px; } */ /* --------------------------------------- MODAL --------------------------------------- */ .modal-wrap { background-color:rgba(0,0,0,0.75); width:100%; height:100%; position:fixed; left:0; top:0; z-index:20; text-align:center; overflow-y: auto; display:none; } .modal-wrap:before { content: ''; display: inline-block; width: 1px; height: 100%; min-height: 100%; margin-right: -5px; vertical-align: middle; opacity: 0; } .modal { display:inline-block; position:relative; margin:0px 0; vertical-align: middle; background-color:#fff; border-radius: 0; } .modal500 { width:100%; height:auto; min-height:100%; } /* close */ .modal .close { position: relative; width: 40px; height: 40px; position: absolute; right: 15px; top: 20px; cursor: pointer; } .modal .close:before { content: ''; position: absolute; display: block; background: #ddd; width: 1px; height: 40px; left: 19px; transform: rotate(-45deg); } .modal .close:after { content: ''; position: absolute; display: block; background: #ddd; width: 40px; height: 1px; top: 19px; transform: rotate(-45deg); } /* --------------------------------------- PAGING --------------------------------------- */ /* .paging { margin:30px 0 0; font-size:0; text-align:center; } .paging > a { width:20px; height:20px; border:1px solid #d7d7d7; display:inline-block; margin:0 2px; background:url('../img/common/ico_paging.png') center no-repeat; background-size:auto 10px; cursor: pointer; } .paging .btn-first { background-position-x:0px; } .paging .btn-prev { background-position-x:-18px; } .paging .btn-next { background-position-x:-37px; } .paging .btn-last { background-position-x:-56px; } .paging .number { display:inline-block; } .paging .number li { width:20px; height:20px; line-height:20px; border:1px solid #d7d7d7; float:left; text-align:center; margin:0 2px; } .paging .number li a { font-size:10px; color:#333; display:block; } .paging .number li.active { background-color:#464646; } .paging .number li.active a { color:#fff;; } */ /* --------------------------------------- QUICK --------------------------------------- */ /* --------------------------------------- MAIN POP --------------------------------------- */ .modal-popup { background-color:rgba(0,0,0,0.3); width:100%; height:100%; position:fixed; left:0; top:0; z-index:20; text-align:center; overflow-y: auto; display:none; } .modal-popup:before { content: ''; display: inline-block; width: 1px; min-height: 100vh; margin-right: -5px; vertical-align: middle; opacity: 0; } .popup { width:90%; display:inline-block; position:relative; margin:30px 0; vertical-align: middle; background-color:#fff; border-radius: 1em; } .popup .modal-cont { } .popup .modal-cont img { width:100%; max-width:none; } /* close */ .popup .btn-wrap { } .popup .btn-wrap > p { width:50%; float:left; text-align:center; font-size:18px; background-color:#000; color:#fff; cursor: pointer; padding:20px 0; } .popup .btn-wrap > p:first-child { box-sizing:border-box; border-right:1px solid #333; } /* ************************************************************************************ MAIN ************************************************************************************ */ /* --------------------------------------- SECTION - COMMON --------------------------------------- */ .container.main { } .main { font-family:'GmarketSans'; } .main .inner { box-sizing:border-box; } .main .wrap-txt { } .main .wrap-txt h4 { font-weight:700; line-height:1em; } .main .wrap-txt h5 { font-weight:700; line-height:1em; } .main .wrap-txt .desc { line-height:1.5em; } .main .wrap-txt .caption { line-height:1.5em; } .main .wrap-btn { } /* .main .wrap-btn a { display:inline-block; padding:12px 24px; background-color:#262626; border-radius:0.5em; line-height:auto; } */ .main .wrap-btn span { font-size:14px; color:#fff; line-height:auto; } /* --------------------------------------- MODAL --------------------------------------- */ .privacy-pop .modal-cont { padding:20px 20px; } .privacy-pop .modal-cont h6 { font-size:20px; text-align:left; line-height:40px; } .privacy-pop .modal-cont dl { padding:20px 0; text-align:left; font-size:12px; } .privacy-pop .modal-cont dl dt { font-weight:500; margin-top:10px; color:#333; } .privacy-pop .modal-cont dl dd { font-weight:300; padding-left:10px; margin:3px 0 0; color:#666; } /* --------------------------------------- SECTION - VISUAL --------------------------------------- */ .main .visual { width:100%; position:relative; padding-top:0px; } .main .visual .visual-pagination { display:none; } .main .visual .visual-button-prev { width:20px; height:20px; top:50%; left:10px; background-size:auto 20px; } .main .visual .visual-button-prev:focus { outline: none; } .main .visual .visual-button-next { width:20px; height:20px; top:50%; right:10px; background-size:auto 20px; } .main .visual .visual-button-next:focus { outline: none; } /* .main .visual .slick-arrow { box-sizing:border-box; background:url('../img/main/ico_arrow_r.png') center no-repeat; text-indent: -9999px; font-size:0; position:absolute; top:50%; z-index: 2; } .main .visual .slick-prev { left:10px; transform: translateY(-50%); transform: rotate(180deg); } .main .visual .slick-next { right:10px; } */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .main .sec01 { padding-top: 86px; background: #ffdb35; } .main .sec01 .inner-box { width: 360px; margin: 0 auto; padding: 0; text-align: center; } .main .sec01 h2 { margin-bottom: 44px; color: #000; font-size: 56px; line-height: 1.125; } .main .sec01 h2 span { color: #fff; } .main .sec01 p { position: relative; color: #000; font-size: 22px; line-height: 1.25; letter-spacing: -0.04em; } .main .sec01 p:after { display: block; content: ''; position: absolute; bottom: -94px; left: 50%; width: 1px; height: 67px; background: #000; } .main .sec01 p b { display: inline-block; height: auto; font-weight: 500; line-height: 1; box-shadow: inset 0 -19px 0 #fff; } .main .sec01 small { display: block; margin: 116px auto 32px; color: #000; font-weight: 300; font-size: 19px; line-height: 1.35; letter-spacing: -0.04em; } .main .sec01 small b { position: relative; font-weight: 500; } .main .sec01 small b::after { left: -22px; top:-5px; width: 76px; height: 30px; background:url('../img/main/sec01_obj.png')no-repeat center/cover; } .main .sec01 small u { font-weight: 500; text-underline-position : under; } .main .sec01 a { width: 108px; height: 38px; line-height: 40px; margin: 0 auto; font-weight: 500; color: #000; background: #fff; font-size: 12px; border-radius: 10px; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .main .sec02 { background: #fff; } .main .sec02 .sec02-inner { max-width: 360px; margin:0 auto; padding: 95px 18px 45px; } .main .sec02 .inner-box { padding: 0 } .main .sec02 h2 { margin-bottom: 44px; color: #181818; font-size: 56px; } .main .sec02 ul li { margin-bottom: 0; padding-left: 13px; font-size: 18px; line-height: initial; } .main .sec02 ul li:nth-of-type(2) { margin: 3px 0; } .main .sec02 ul li:after { top: 4px; left:0; width:10px; height:10px; } .main .sec02 ul li span { position: relative; display:inline-block; line-height: 1.3; box-shadow: inset 0 0px #18634e; z-index: 2; } .main .sec02 ul li span:before { content: ''; position: absolute; left:-1px; top: -2px; display: block; width: calc(100% + 2px); height: 22px; background: #18634e; z-index: -1; } .main .sec02 p { margin: 36px auto 0; font-size: 18px; line-height: 1.2; letter-spacing: -0.04em; } .main .sec02 p span { box-shadow: inset 0 -14px 0 #ffdb35; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .main .sec03 .sec03-inner { padding: 60px 0; } .main .sec03 h3 { padding: 0 19px; } .main .sec03 h3 img { padding: 0; } .main .sec03 p { margin: 18px 0 25px; font-size: 18px; } .main .sec03 p b { font-weight: 700; } .main .sec03 .wrap-img { padding: 0 7px 0 15px; } .main .sec03 img { width: 100%; max-width: 360px; } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .main .sec04 { background: url('../img/main/mo_sec04_bg.png')no-repeat center/cover; } .main .sec04 .sec04-inner { padding: 60px 7px 60px 0; } .main .sec04 h3 { padding: 0 46px; } .main .sec04 h3 img { width: 100%; max-width: 360px; } .main .sec04 p { margin: 18px 0 12px; font-size: 18px; } .main .sec04 .wrap-img { padding: 0 6px 0 1px; } .main .sec04 .sec04-inner > img { max-width: 360px; margin: 0 auto; } /* --------------------------------------- SECTION - 05 --------------------------------------- */ .main .sec05 { background: url('../img/main/mo_sec05_bg.png')no-repeat center/cover; } .main .sec05 .sec05-inner { max-width: 360px; margin: 0 auto; padding: 85px 0 68px; text-align: center; } .main .sec05 h2 { font-size: 46px; line-height: 1; letter-spacing: -0.04em; text-align: center; } .main .sec05 h2 span { font-size: 56px; letter-spacing: -0.04em; } .main .sec05 p { margin: 70px 0 46px; color: #fff; font-size: 18px; line-height: 1.7; letter-spacing: -0.04em; } .main .sec05 strong { display: inline; margin: 0 auto 20px; line-height: 1.7; font-size: 20px; box-shadow: inset 0 -20px 0 #ff5a00; } /* --------------------------------------- SECTION - 06 --------------------------------------- */ .main .sec06 { background: url('../img/main/mo_sec06_bg.png')no-repeat center/cover; } .main .sec06 .sec06-inner { width: fit-content; margin: 0 auto; padding: 80px 15px 17px; } .main .sec06 p { width: 234px; height: 44px; line-height: 48px; margin: 0 auto 20px; font-size: 18px; border-radius: 40px; } .main .sec06 h2 { margin-bottom: 18px; font-size: 56px; } .main .sec06 h2 span { font-size: 46px; } .main .sec06 img { box-shadow: 5px 9px 10px 0px rgba(65, 54, 5, 0.1); border-radius: 20px; } .main .sec-profit { width: 100%; background: transparent; } .main .sec-profit .profit-inner { max-width: 360px; margin: 0 auto; padding: 72px 0 44px; text-align: left; } .main .sec-profit h2 { max-width: 360px; margin: 0 auto 30px; padding-left: 18px; font-size: 56px; } .main .sec-profit p { max-width: 360px; margin: 0 0 50px; padding-left: 18px; color: #000; font-size: 17px!important; } .main .sec-profit .wrap-img { max-width: 360px; padding: 0 30px } .main .sec-side .side-inner { display: flex; flex-wrap: wrap; flex-direction: column-reverse; } .main .sec-side .side-inner .bottom-left { width: 100%; } .main .sec-side .side-inner .bottom-right { width: 100%; border-radius: 35px 0 0 0; } .main .sec-side .side-inner .bottom-right a { bottom: 13%; left: 5%; width: 108px; height: 37px; line-height: 40px; padding: 0; font-size: 12px; border-radius: 10px; } .main .sec-review { padding: 90px 0 72px; background: url('../img/main/mo_review_bg.png')no-repeat center/cover; } .main .sec-review .review-inner { max-width: 360px; } .main .sec-review .review-inner > p { width: 174px; height: 43px; line-height: 46px; font-size: 18px; border-radius: 38px; } .main .sec-review .review-inner > h4 { margin-top: 32px; padding: 0 32px; font-size: 40px; line-height: initial } .main .sec-review img { max-width: 300px; margin: 0 auto; } .main .sec-review .title02 { margin-bottom: 40px; } .main .sec-review .review-info { display: block; max-width: 360px; margin: 70px auto 0; text-align: center; } .main .sec-review .review-info .wrap-btn { text-align: center; } .main .sec-review .review-info .wrap-btn p span { font-size: 40px; } .main .sec-review .review-info p { font-size: 40px; } .main .sec-review .review-info strong { font-size: 56px; } .main .sec-review .info-inner { padding: 0 54px; margin-top: 60px; } .main .sec-review .info-inner b { margin: 0 auto 20px; font-size: 36px; box-shadow: inset 0 -27px 0 #ffeebb; } .main .sec-review .info-inner img { width: 100%; margin: 20px auto 54px; } .main .sec-review .info-inner p { color: #000; font-size: 20px; } /* --------------------------------------- SECTION - 12 --------------------------------------- */ .main .sec12 { width: 100%; margin:0 auto; color: #000; } .main .sec12 .sec12-inner01 { margin: 0 auto; padding: 60px 0 12px; } .main .sec12 .sec12-inner01 p { width: 130px; height: 43px; line-height: 46px; margin: 0 auto 40px; font-size: 20px; } .main .sec12 .sec12-inner01 h4 { font-size: 56px; text-align: center; } .main .sec12 .sec12-inner01 h4 span { font-size: 56px; } .main .sec12 .sec12-inner01 h4 span:after { left: -10px; bottom: 0; width: 168px; height: 87px; background:url('../img/main/sec12_obj01.png')no-repeat; background-size: cover; } .main .sec12 .sec12-inner01 h6 { margin: 0 auto; font-size: 36px; } .main .sec12 .sec12-inner01 img { max-width: 360px; margin: 0 auto; } .main .sec12 .sec12-inner02 { padding: 65px 16px 0 12px; } .main .sec12 .sec12-inner02 p { margin: 0 auto 18px; font-size: 20px; } .main .sec12 .sec12-inner02 p span { box-shadow: inset 0 -16px 0 #ffee35; } .main .sec12 .sec12-inner02 img { max-width: 320px; margin: 0 auto; padding: 0 0 46px; } .main .sec12 .wrap-img02 img { margin: 0 auto; } .main .sec00 { height: 363px; color: #000; } .main .sec00 .sec00-inner { padding-top: 80px; padding-left: 22px; } .main .sec00 .wrap-txt { display: flex; max-width: 360px; height: 98px; flex-direction: column; border-left: 3px solid #000; } .main .sec00 h3 { top: 3px; font-size: 46px; } .main .sec00 h4 { bottom: -10px; font-size: 56px; } .main .sec00 img { position: absolute; top: auto; bottom: -86px; right: 50%; width: 87.5vw; max-width: 360px; transform: translateX(50%); } .main .sec19 { padding-top: 138px; background: #fffdf5; } .main .sec19 .sec19-list small { font-size: 18px; border-bottom: 1px solid #d4d4d4 } .main .sec19 .sec19-list h5 { font-size: 50px; } .main .sec19 .sec19-list:nth-of-type(1) { margin-bottom: 60px; padding: 0 18px } .main .sec19 .sec19-list:nth-of-type(1) h5 { margin: 12px auto 26px; } .main .sec19 .sec19-list:nth-of-type(2) h5 { margin: 12px auto 26px; } .main .sec19 .sec19-list strong { margin-bottom: 20px; font-size: 40px; box-shadow: inset 0 -16px 0 #ffdb35; } .main .sec19 .sec19-list p { padding: 0 16px; font-size: 18px; line-height: 1.4em; } .main .sec19 .sec19-list p span { display: inline; box-shadow: inset 0 -14px 0 #ffdb35; } .main .sec19 .sec19-list:nth-of-type(1) img { width: 100%; max-width: 360px; margin-top: 28px; } .main .sec19 .sec19-list:nth-of-type(2) img { margin-top: 36px; margin-left: 0; } .main .sec19 a { bottom: 10.75%; left: calc(50% - 54px); width: 108px; height: 43px; line-height: 46px; font-size: 12px; border-radius: 10px; } .main .sec-blend { padding: 68px 0; } .main .sec-blend .sec-title { width: 263px; height: 42px; line-height: 44px; margin: 0 auto 50px; font-size: 18px; border-radius: 40px; } .main .sec-blend h3 { font-size: 46px; } .main .sec-blend h4 { font-size: 46px; } .main .sec-blend .wrap-img { padding: 0 32px; } .main .sec-blend img { width: 100%; max-width: 360px; margin: 40px auto 90px; } .main .sec-blend p { padding: 0 10px; font-size: 18px; letter-spacing: -0.05em; line-height: 1.47em; } .main .sec-blend p span { box-shadow: inset 0 12px 0 #ffee35; } .main .sec-blend p:before { left: calc(50% - 22px); top: -52px; width: 45px; height: 5px; background: #ffee35; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .main .blend02 { padding: 78px 0 30px; background:url('../img/main/blend02_bg.png')no-repeat center/cover; } .main .blend02 h4 { color: #181818; padding-top: 5px; font-size: 33px; font-weight: 700; letter-spacing: -0.04em; text-align: center; } .main .blend02 h4 i { position: relative; font-size: 43px; } .main .blend02 h4 i:after { top: -10px; left: calc(50% - 2px); width: 5px; height: 5px; } .main .blend02 .wrap-cont { margin: 0 auto; } .main .blend02 .wrap-cont ul { flex-direction: column; } .main .blend02 .wrap-cont ul li { width: 192px; margin: 30px 0; border-radius: 15px; box-shadow: 6px 6px 0 #e1e1e1; padding:25px 0 15px; } .main .blend02 .wrap-cont ul li:nth-of-type(3) { margin: 66px 0 30px; } .main .blend02 .wrap-cont ul li:before { left: calc(50% - 18px); top:-44px; width: 36px; height: 26px; } .main .blend02 .wrap-cont ul li:nth-of-type(3):before { top:-81px; } .main .blend02 .wrap-cont .tit { font-size:17px; } .main .blend02 .wrap-cont .tit b { font-size:31px; } .main .blend02 .wrap-cont .desc { font-size:18px; } .main .blend02 .wrap-cont .desc span { display:block; margin-bottom: 6px; } .main .blend02 .wrap-cont .desc span b { font-size:32px; } .main .blend02 .wrap-cont .desc > .caption b { font-size: 18px; } .main .blend02 .wrap-cont .active { box-shadow: 6px 6px 0 #252525; } .main .blend02 .wrap-cont .active .tit b { font-size:25px; } .main .blend02 .wrap-cont .active .desc b { font-size: 45px; } .main .blend02 .wrap-cont .desc > .caption b { font-size: 18px; vertical-align: baseline; } .main .blend02 .wrap-cont .active:after { position:absolute; top:-40px; width: 122px; height: 33px; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .main .blend03 { background:#fffae1; } .main .blend03 .inner { padding: 85px 20px 64px; text-align: center; } .main .blend03 h4 { font-size: 43px; } .main .blend03 .wrap-cont { margin:16px 0 8px; } .main .blend03 .wrap-cont ul { flex-direction: column; } .main .blend03 .wrap-cont ul li { width:100%; margin: 16px auto; } .main .blend03 .wrap-cont .wrap-img { margin: 0 auto; width: 290px; border: 1px solid #000; border-radius: 16px; box-shadow: 2px 3px 10px 0px rgba(50, 67, 39, 0.75); } .main .blend03 .wrap-cont .wrap-img img { width: 100%; border-radius: 15px; } .main .blend03 .wrap-cont .wrap-txt { margin: 8px 0 0; } .main .blend03 .wrap-cont .wrap-txt .desc { font-size: 18px; } .main .blend03 .wrap-cont .wrap-txt .desc span { display:inline-block; border:2px solid #c00000; vertical-align:text-bottom; } .main .blend03 .wrap-cont .wrap-txt .desc img { height: 38px; } .main .blend03 .inner > .wrap-img img { height: 44px; } .main .blend03 .subtitle { max-width: 320px; margin:20px auto 0; font-size:30px; } .main .blend03 .subtitle b { box-shadow: inset 0 -24px 0 rgba(255,234,0,0.4); } .main .blend03 a { width: 110px; height: 38px; line-height: 41px; font-weight: 500; margin: 34px auto 0; font-size: 12px; border-radius: 10px; } /* --------------------------------------- SECTION - 07 --------------------------------------- */ .main .sec07 { padding: 90px 0 44px; background:url('../img/main/mo_sec07_bg.png')no-repeat center/cover; } .main .sec07 .sec07-inner { max-width: 360px; padding: 0 15px; text-align: center; } .main .sec07 h4 { font-size: 36px; font-weight: 700; } .main .sec07 h4 span { font-weight: 300; } .main .sec07 h5 { margin: 26px 0 34px; font-size: 46px; box-shadow: inset 0 -36px 0 #f2571b; } .main .sec07 p { padding-top: 40px; font-size: 18px!important; letter-spacing: -0.04em; } .main .sec07 p u { margin-top: 24px; font-size: 20px; } .main .sec07 p:after { top: 0; right: calc(50% - 12px); width: 24px; height: 2px; background: #fff; } .main .sec07 a { float: none; width: 108px; height: 43px; height: 38px; line-height: 41px; font-weight: 500; margin: 42px auto 0; font-size: 12px; border-radius: 10px; } .main .sec07 img { margin-top: 40px; margin-left: -16px; } /* --------------------------------------- SECTION - 08 --------------------------------------- */ .main .sec08 { padding: 73px 0 210px; background:url('../img/main/img_sec08_bg_m.jpg') right center no-repeat; background-size:cover; } .main .sec08 .inner { max-width: 360px; padding: 0; overflow: visible; } .main .sec08 .wrap-txt { text-align:center; } .main .sec08 .wrap-txt h4 { margin-bottom: 0; font-size: 56px; } .main .sec08 .wrap-txt strong { display: block; margin:10px 0 20px; font-size: 25px; } .main .sec08 a { display: flex; padding: 0; width: 110px; height: 38px; line-height: 41px; margin: 0 auto; font-size: 12px; border-radius: 10px; flex-wrap: wrap; align-items: center; justify-content: center; } /* --------------------------------------- SECTION - 09 --------------------------------------- */ .main .wrap-btn-top { width:44px; height:44px; background-color:#000; border-radius: 50%; position:absolute; right:10px; bottom:100px; } .main .wrap-btn-top a { width:100%; height:100%; display:block; text-indent:-9999px; background:url('../img/main/ico_arrow_white.png') center no-repeat; background-size:auto 10px; } .main .wrap-btn-call { width:44px; height:44px; background-color:#355f54; border-radius: 50%; position:absolute; left:10px; bottom:100px; z-index:2; } .main .wrap-btn-call a { width:100%; height:100%; display:block; text-indent:-9999px; background:url('../img/main/ico_call_white.png') center no-repeat; background-size:auto 20px; } .main .wrap-btn-kakao { width:44px; height:44px; background-color:#fae100; border-radius: 50%; position:absolute; left:62px; bottom:100px; z-index:2; } .main .wrap-btn-kakao a { width:100%; height:100%; display:block; text-indent:-9999px; background:url('../img/main/ico_kakao_m.png') center no-repeat; background-size:auto 25px; } .main .sec09 { background:#ffcc35; } .main .sec09 .inner { padding:6px 8px 2px; } .main .sec09 .wrap-txt { width:100%; float:none; padding:0; } .main .sec09 .wrap-txt h4 { display:none; } .main .sec09 .wrap-txt h5 { float:none; margin:0; padding:0; text-align:left; } .main .sec09 .wrap-txt h5 .tel { font-family: 'S coredream'; font-size:16px; font-weight:900; margin:0 0 5px; line-height:1em; color:#111; } .main .sec09 .wrap-txt h5 p { font-family:'Noto Sans'; font-weight:300; font-size:12px; display:inline-block; } .main .sec09 .wrap-txt h6 { float:none; font-size:15px; margin-bottom:40px; } .main .sec09 .wrap-txt h6 .title { line-height:180%; } .main .sec09 .wrap-txt h6 .contents-time { line-height:140%; } .main .sec09 .wrap-txt h6 .holiday { line-height:140%; } /* form */ .main .sec09 .wrap-form { width:100%; float:none; position:relative; margin:3px 0; } .main .sec09 .wrap-form .item-input { width:25%; float:none; margin:0 0 0 2px; float:left; } .main .sec09 .wrap-form .item-input.name { width:20%; margin:0; } .main .sec09 .wrap-form .item-input.questions { display:none; } .main .sec09 .wrap-form .item-input input[type="text"], .main .sec09 .wrap-form .item-input input[type="tel"] { width:100%; height:30px; line-height:30px; box-sizing:border-box; padding:3px 10px; font-size:12px; color:#222; border-color:#b7b7b7; } .main .sec09 .wrap-form .questions { width:100%; resize: none; } .main .sec09 .wrap-form .questions textarea { display:block; height:60px; box-sizing:border-box; padding:10px; font-size:16px; color:#222; resize: none; line-height:1.2em; border-color:#b7b7b7; } .main .sec09 .wrap-form .item-btn { margin:0; position:absolute; right:0px; bottom:25px; width:28%; } .main .sec09 .wrap-form .item-btn a { height:30px; width:100%; margin:0; background-color:#000; font-family: 'S coredream'; font-size:12px; color:#fff!important; font-weight:600; border-radius:0px; line-height:30px; } .main .sec09 .wrap-form .item-chk { width:100%; margin:0; clear:both; float:none; font-family:'Noto Sans'; font-weight:300; font-size:14px; } .main .sec09 .wrap-form .item-chk input { width:15px; height:15px; border:1px solid #b7b7b7; margin-top:5px; cursor: pointer; } .main .sec09 .wrap-form .item-chk label { cursor: pointer; color:#dc0000; } .main .sec09 .wrap-form .item-chk a { vertical-align: middle; color:#111; } /* --------------------------------------- SECTION - 10 --------------------------------------- */ .main .sec10 { background:url('../img/main/img_sec10_bg_m.jpg') top no-repeat; position:relative; background-size:200% auto; } .main .sec10 .inner { padding:80px 0 0; } .main .sec10 .wrap-txt { text-align:center; } .main .sec10 .wrap-txt h5 { font-size: 25px; } .main .sec10 .wrap-txt h4 { font-size: 56px; } .main .sec10 .pc-view { display:none } .main .sec10 .atab { margin:0 auto; max-width:380px; padding:28px 0 26px; overflow:hidden; padding-bottom: 10%; margin-left:5%;} .main .sec10 .atab li { float:left; width:24%; box-sizing:border-box; } .main .sec10 .atab li a { display:block; font-size:12px; color:#333; background:#fff; border:1px solid #bcbcbc; line-height:46px; text-align:center; } .main .sec10 .atab li:fitst-child { border-left:1px solid #bcbcbc; } .main .sec10 .atab li.on a { color:#fff; background:#e14242; border:1px solid #820f0f; } .main .sec10 .in_yt {margin-bottom:-49px;} .main .sec10 .in_yt iframe { width:100%; height:230px; } #tab_area5 { width: fit-content; margin: 0 auto; } /* --------------------------------------- SECTION - 11 --------------------------------------- */ .main .sec11 { background:url('../img/main/img_sec11_bg_m.jpg') center no-repeat; background-size:cover; } .main .sec11 .wrap-txt { text-align:center; } .main .sec11 .pc-view { display:none } .main .sec11 .wrap-txt .title01 { margin-top:25px; } .main .sec11 .wrap-txt h5 { font-size:16px; } .main .sec11 .wrap-txt h5 p { padding:6px 20px; line-height:20px; } .main .sec11 .wrap-txt h4 { line-height:38px; } .main .sec11 .wrap-txt .mb-view { margin:0 auto; margin-top:20px; width:65%; text-align:center; } .main .sec11 .wrap-img .insta { margin-top:40px; } /* --------------------------------------- SECTION - 13 --------------------------------------- */ .main .sec13 { padding: 74px 0 44px; background:url('../img/main/mo_sec13_bg.png')no-repeat center/cover; } .main .sec13 .sec13-inner { max-width: 360px; padding: 0 12px; } .main .sec13 h3 { margin: 0 auto 14px; background: url('../img/main/sec13_obj01.png') no-repeat bottom 10px center / 100% auto; font-size: 56px; } .main .sec13 h4 { margin: 0 auto 45px; font-size: 36px; } .main .sec13 h4 b:after { bottom: 0; left: 0; width: 105px; height: 44px; background: url('../img/main/sec13_obj02.png')no-repeat center/cover; } .main .sec13 strong { display: block; margin: 0 auto 16px; font-size: 25px; line-height: initial; } .main .sec14 { padding: 80px 0 62px; background:url('../img/main/mo_sec14_bg.png')no-repeat center/cover; } .main .sec14 .sec14-inner { width: fit-content; } .main .sec14 h2 { margin: 0 auto 32px; font-size: 25px; } .main .sec14 h3 { font-size: 46px; } .main .sec14 h3 span { box-shadow: inset 0 -32px 0 #fff; } .main .sec14 h4 { font-size: 36px; } .main .sec14 img { max-width: 360px; margin: 36px auto 20px; } .main .sec14 p { font-size: 25px; font-weight: 500; } .main .sec14 strong { font-size: 36px; } .main .sec14 strong span { box-shadow: inset 0 -25px 0 #fff; } /* ************************************************************************************ SUB ************************************************************************************ */ /* --------------------------------------- COMMON --------------------------------------- */ /* sub whole */ .container.sub { } .sub { } .sub .section { } .sub .inner { padding:70px 20px 50px; box-sizing:border-box; text-align:center; } .sub h2 { display:none; } .sub .subvisual { display:none; } .sub .area-snb { display:none; } /* about */ .about .inner { } .about .wrap-txt { } .about .wrap-txt h4 { font-size:26px; font-weight:500; line-height:1em; } .about .wrap-txt .subtitle { font-size:19px; font-weight:500; line-height:1em; } .about .wrap-txt .desc { font-size:15px; font-weight:300; line-height:1.8em; letter-spacing: -0.02em; } /* menu */ .menu .inner { } .menu .subvisual { background:url('../img/menu/img_visual.jpg') top right no-repeat; } .menu h2 { font-size:0; margin:0 auto 90px; } /* franchisee */ .franchisee .inner { } .franchisee .subvisual { background:url('../img/franchisee/img_visual.jpg') top right no-repeat; } .franchisee h2 { font-size:0; margin:0 auto 120px; } /* store */ .store .inner { } .store .subvisual { background:url('../img/store/img_visual.jpg') top right no-repeat; } .store h2 { font-size:0; margin:0 auto 120px; } /* news */ .news .inner { } .news .subvisual { background:url('../img/news/img_visual.jpg') top right no-repeat; } .news h2 { font-size:14px; display:block; margin:0; padding:30px 0 0; } /* ************************************************************************************ ABOUT - BRAND ************************************************************************************ */ .brand .inner { padding:120px 0; } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .brand .sec04 { background:url('../img/about/bg_brand04_m.jpg') center top no-repeat; background-size:cover; } .brand .sec04 .wrap-txt h4 span { font-weight:600; font-size:34px; } .brand .sec04 .wrap-txt h4 b { box-shadow: inset 0 -21px 0 #e2eef5; } .brand .sec04 .wrap-txt .desc { margin:60px 0 30px; line-height:1.7em; } .brand .sec04 .wrap-txt .subtitle b { box-shadow:inset 0 -18px 0 #e2eef5 } /* --------------------------------------- SECTION - 05 --------------------------------------- */ .brand .sec05 .inner { padding:100px 0 280px; } .brand .sec05 { background:url('../img/about/bg_brand05_m.jpg') center top no-repeat; background-size:cover; } .brand .sec05 .wrap-txt .desc { margin:50px 0 40px; line-height:1.7em; } /* --------------------------------------- SECTION - 06 --------------------------------------- */ .brand .sec06 .wrap-txt h4 b { box-shadow: inset 0 -21px 0 white; } .brand .sec06 .wrap-txt img { width:90%; margin-top:50px; } .brand .sec06 .wrap-txt .desc { margin:60px 0 30px; line-height:1.7em; } .brand .sec06 .wrap-txt .subtitle b { box-shadow:inset 0 -18px 0 white; } .brand .sec06 .wrap-img { margin-top:60px; } .brand .sec06 .wrap-img .img_pc { display:none; } .brand .sec06 .wrap-img .img_m { display:inline; width:90%; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ /* .brand .sec01 { background:url('../img/about/bg_brand01_m.jpg') center top no-repeat; background-size:cover; } .brand .sec01 .inner { padding:200px 20px 50px; } .brand .sec01 .wrap-txt { color:#fff; } .brand .sec01 .wrap-txt .subtitle { line-height:1.5em; font-weight:300; } .brand .sec01 .wrap-txt .subtitle b { font-weight:500; } .brand .sec01 .wrap-txt .desc { margin:30px 0 20px; } */ /* --------------------------------------- SECTION - 02 --------------------------------------- */ /* .brand .sec02 { background:url('../img/about/bg_brand02.jpg') center no-repeat; background-size:cover; } .brand .sec02 .inner { position:relative; padding:70px 20px 250px; overflow: visible; } .brand .sec02 .wrap-txt { color:#2f2f2f; text-align:center; } .brand .sec02 .wrap-txt h4 b { box-shadow: inset 0 -14px 0 #f2ef7f; padding:0 5px; } .brand .sec02 .wrap-txt .subtitle { line-height:1.5em; margin-bottom:20px; } .brand .sec02 .wrap-txt .subtitle b { font-weight:700; color:#bc040b; position:relative; display:inline-block; } .brand .sec02 .wrap-txt .subtitle b:before, .brand .sec02 .wrap-txt .subtitle b:after { content:''; display:block; position:absolute; } .brand .sec02 .wrap-txt .subtitle b:before { width:18px; height:12px; background:url('../img/about/img_brand_star.png') center no-repeat; background-size:auto 12px; right:3px; top:-7px; } .brand .sec02 .wrap-txt .subtitle b:after { width:100%; height:8px; background:url('../img/about/img_brand_line.png') center no-repeat; background-size:auto 8px; left:0px; bottom:-5px; } .brand .sec02 .wrap-txt .desc { margin:40px 0 20px; } .brand .sec02 .wrap-img { width:70%; max-width:260px; position:absolute; left:50%; top:inherit; bottom:-50px; transform: translateX(-50%); } */ /* --------------------------------------- SECTION - 03 --------------------------------------- */ /* .brand .sec03 { background:url('../img/about/bg_brand03.jpg') center no-repeat; background-size:cover; } .brand .sec03 .inner { padding:80px 20px 60px; } .brand .sec03 .wrap-txt { color:#fff; text-align:center; } .brand .sec03 .wrap-txt h4 { position:relative; margin:10px auto 40px; display:block; padding:0; } .brand .sec03 .wrap-txt h4:before, .brand .sec03 .wrap-txt h4:after { content:''; display:block; position:absolute; width:30%; height:1px; background:#fff; top:0%; } .brand .sec03 .wrap-txt h4:before { left:0; } .brand .sec03 .wrap-txt h4:after { right:0; } .brand .sec03 .wrap-txt h4 b { color:#d50000; } .brand .sec03 .wrap-txt .desc { margin:20px 0 0; padding:0 10%; } */ /* ************************************************************************************ ABOUT - BI ************************************************************************************ */ .bi .inner { padding:30px 20px 60px; } .bi h2 { } .bi h4 { margin:0 0 30px; font-size:14px; font-weight:900; color:#000; letter-spacing:0.085em; border-bottom:2px solid #000; text-align:left; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .bi .sec01 { } .bi .sec01 .wrap-img { text-align:center; } .bi .sec01 .wrap-img img { display:block; margin:0 auto 30px; width:160px; } .bi .sec01 .wrap-txt { margin:40px 0 0; text-align:center; } .bi .sec01 .wrap-txt .desc { font-size:12px; letter-spacing:-0.04em; padding:0 10%; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .bi .sec02 .inner { text-align:center; } .bi .sec02 .inner h4 { text-align:left; } .bi .sec02 .wrap-object { display:inline-block; } .bi .sec02 .wrap-object dl { width:105px; float:left; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.12); text-align:left; } .bi .sec02 .wrap-object dt { font-size:0; width:100%; height:120px; } .bi .sec02 .wrap-object dd { font-size:10px; letter-spacing:-0.08em; color:#8f8b8b; line-height:1em; padding:12px; } .bi .sec02 .wrap-object dd:first-of-type { font-size:12px; color:#252525; font-weight:500; padding-bottom:0; } .bi .sec02 .wrap-object .yellow { margin-right:8px; } .bi .sec02 .wrap-object .yellow dt { background-color:#ffcd34; } .bi .sec02 .wrap-object .gray { margin-right:8px; } .bi .sec02 .wrap-object .gray dt { background-color:#65666b; } .bi .sec02 .wrap-txt { display:inline-block; width:100%; text-align:center; margin:30px 0 0; } .bi .sec02 .wrap-txt .subtitle { font-size:14px; font-weight:900; color:#65666b; margin:0 0 10px; } .bi .sec02 .wrap-txt .subtitle b { color:#ffcd34; } .bi .sec02 .wrap-txt .desc { font-size:12px; letter-spacing:-0.04em; padding:0 10%; } /* ************************************************************************************ ABOUT - VISIT ************************************************************************************ */ .visit h2 { font-size:0; margin:0 0 70px; } .visit .inner { padding:0px 20px 60px; } /* tab */ .visit .area-visit { padding:30px 20px 0; } .visit .area-visit.inner { padding-bottom:0; } .visit .area-visit .visit-tabs { text-align:right; font-size:0; margin-left:-10px; } .visit .area-visit .visit-tabs li { display:block; width:calc(33.3333% - 10px); float:left; margin-left:10px; text-align:center; border:1px solid #828282; border-radius: 20px; margin-bottom:20px; box-sizing:border-box; } .visit .area-visit .visit-tabs li a { display:block; line-height:30px; font-size:12px; font-weight:500; letter-spacing: -0.04em; color:#171717; cursor: pointer; } .visit .area-visit .visit-tabs li.current { background:#feb914; border-color:#feb914; } .visit .area-visit .visit-tabs li.current a { color:#fff; } .visit .section { display:none; } .visit .section.current { display:block; } /* section common */ .visit .wrap-map { } .visit .wrap-map .map { height:200px; } .visit .wrap-txt { margin:0; } .visit .wrap-txt ul { } .visit .wrap-txt ul li { padding:20px 0; text-align:left; } .visit .wrap-txt .address { width:100%; float:none; } .visit .wrap-txt .tel { width:100%; float:none; border-top:1px solid #ebebeb; } .visit .wrap-txt .subway { width:100%; clear:both; border-top:1px solid #ebebeb; } .visit .wrap-txt .tit { font-size:14px; font-weight:700; color:#2f2f2f; line-height:1em; margin:0 0 10px; } .visit .wrap-txt .desc { font-size:12px; font-weight:300; color:#2f2f2f; line-height:1.8em; } .visit .wrap-txt .desc span { display:inline-block; padding:0 5px; margin-right:2px; line-height:14px; font-size:8px; letter-spacing:0; vertical-align:middle; margin-top:-2.5px; } .visit .wrap-txt .desc .ico { background-color:#448ccb; color:#fff; border-radius:2em; } .visit .wrap-txt .desc .lot { padding:0 5px; font-size:10px; border:1px solid #5b5b5b; color:#5b5b5b; line-height:14px; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .visit .sec02 .wrap-txt .desc .ico:nth-of-type(1) { padding:0 5px; background:#e41e6e; } .visit .sec02 .wrap-txt .desc .ico:nth-of-type(2) { background:#f7ba21; } /* ************************************************************************************ MENU - menu01 ************************************************************************************ */ .menu01 .inner { padding:60px 20px; box-sizing:border-box; letter-spacing:-0.04em; } .menu01 .subvisual { margin:0; } .menu01 h2 { margin:0; } .menu01 h4 { font-size:20px; color:#fff; line-height:1em; font-weight:500; } .menu01 .subtitle { font-size:14px; line-height:1.5em; letter-spacing: -0.04em; color:#fff; font-weight:500; } .menu01 .desc { font-size:12px; line-height:1.8em; letter-spacing: -0.04em; color:#fff; font-weight:300; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .menu01 .sec01 { background:url('../img/menu/bg_menu0101.jpg') center no-repeat; background-size:cover; } .menu01 .sec01 .inner { padding:60px 20px; text-align:center; } .menu01 .sec01 h4 { padding:10px 30px; display:inline-block; background-color:rgba(255,255,255,0.3); border-radius: 10px; margin:0 0 60px; } .menu01 .sec01 .wrap-txt { } .menu01 .sec01 .wrap-txt .desc { margin:30px 0 20px; } .menu01 .sec01 .wrap-txt .desc u { font-weight:500; } .menu01 .sec01 .wrap-txt .subtitle { } .menu01 .sec01 .wrap-txt .subtitle b { color:#ffcd34; font-size:18px; font-weight:500; } .menu01 .sec01 .wrap-txt .subtitle.quotation { color:#fff; font-weight:300; font-size:12px; line-height:2em; } .menu01 .sec01 .wrap-txt .subtitle.quotation b { font-size:14px; } .menu01 .sec01 .wrap-txt .subtitle .quot { } .menu01 .sec01 .wrap-txt .subtitle .quot { display:inline-block; width:7px; height:5px; background:url('../img/franchisee/ico_quot_yellow.png') left no-repeat; background-size:7px auto; vertical-align:6px; padding-right:5px; } .menu01 .sec01 .wrap-txt .subtitle .quot:nth-of-type(2n) { transform: rotate(180deg); vertical-align: 6px; margin-right:5px; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .menu01 .sec02 { background:url('../img/menu/bg_menu0102_m.jpg') center bottom no-repeat; background-size:cover; } .menu01 .sec02 .inner { padding:60px 20px 300px; text-align:center; } .menu01 .sec02 .wrap-txt { text-align:center; } .menu01 .sec02 .wrap-txt h4 { line-height:1.7em; } .menu01 .sec02 .wrap-txt h4 b { font-weight:700; color:#ffcd34; font-size:35px; } .menu01 .sec02 .wrap-txt h4 b:before { content:''; display:block; } .menu01 .sec02 .wrap-txt .desc { margin:30px 0 20px; } .menu01 .sec02 .wrap-txt .subtitle { font-weight:200; line-height:1em; } .menu01 .sec02 .wrap-txt .subtitle b { font-weight:500; } .menu01 .sec02 .wrap-txt .subtitle .em { font-weight:500; color:#2b679a; background:#ffcd34; padding:2px 5px 4px; margin:5px 0; display:inline-block; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .menu01 .sec03 { background:url('../img/menu/bg_menu0103_m.jpg') center no-repeat; background-size:cover; } .menu01 .sec03 .inner { padding:160px 0; text-align:center; } .menu01 .sec03 .wrap-txt { } .menu01 .sec03 .wrap-txt h4 { color:#1e1e1e; line-height:1.5em; } .menu01 .sec03 .wrap-txt h4 b { display:block; letter-spacing: 0.2em; font-size:24px; } .menu01 .sec03 .wrap-txt .desc { color:#1e1e1e; margin:30px 0 10px; } .menu01 .sec03 .wrap-txt .subtitle { color:#1e1e1e; } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .menu01 .sec04 { background:url('../img/menu/bg_menu0104_m.jpg') center bottom no-repeat; background-size:cover; } .menu01 .sec04 .inner { padding:60px 20px 230px; text-align:center; } .menu01 .sec04 .wrap-txt { } .menu01 .sec04 .wrap-txt h4 { color:#1e1e1e; } .menu01 .sec04 .wrap-txt .desc { color:#1e1e1e; margin:30px 0 10px; } .menu01 .sec04 .wrap-txt .subtitle { color:#1e1e1e; } /* ************************************************************************************ MENU - menu02 ************************************************************************************ */ .menu02 .inner { padding:0 20px 160px; box-sizing:border-box; letter-spacing:-0.04em; } .menu02 .subvisual { margin:0; } .menu02 h2 { margin:0; } .menu02 h4 { font-size:32px; line-height:1em; font-weight:500; color:#fff; } .menu02 .subtitle { font-size:24px; line-height:1.5em; letter-spacing: -0.04em; font-weight:500; color:#232323; } .menu02 .desc { font-size:16px; line-height:1.8em; letter-spacing: -0.04em; font-weight:300; color:#232323; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .menu02 .sec01 { background:url('../img/menu/bg_menu02.jpg') center no-repeat; background-size:cover; } .menu02 .sec01 .inner { padding:60px 0 30px; text-align:center; } .menu02 .sec01 .wrap-txt { } .menu02 .sec01 .wrap-txt h4 { display:inline; box-shadow: inset 0 -25px 0 #e7541a; line-height:1.2em; padding:0px; } .menu02 .sec01 .wrap-txt .subtitle { margin:40px 0 10px; } .menu02 .sec01 .wrap-txt .desc { } .menu02 .sec01 .wrap-img { margin:40px 20px; } .menu02 .sec01 .wrap-img .line { width:1px; height:130px; background-color:#000000; display:block; margin:30px auto 30px; } /* ************************************************************************************ MENU - NEW ************************************************************************************ */ .new .inner { padding:0px 20px 0; box-sizing:border-box; letter-spacing:-0.04em; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .new .sec01 { } .new .sec01 .wrap-txt { margin:30px 0 20px; padding:5px 0; background-color:#f2f2f2; border-top:2px solid #666666; border-bottom:1px solid #d7d7d7; text-align:center; } .new .sec01 .wrap-txt h4 { font-size:14px; font-weight:500; } .new .sec01 .wrap-img { text-align:center; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .new .sec02 { margin:30px 0 0; } .new .sec02 .inner { padding-bottom:50px; } .new .sec02 .wrap-list { border-top:1px solid #ebebeb; padding:30px 0 0; } .new .sec02 .wrap-list ul { margin-left:-10px; } .new .sec02 .wrap-list ul li { width:calc(50% - 10px); float:left; margin-left:10px; margin-bottom:30px; cursor:pointer; } .new .sec02 .wrap-list ul li:nth-child(5n+1) { clear:inherit; } .new .sec02 .wrap-list ul li:nth-child(2n+1) { clear:both; } .new .sec02 .wrap-list .wrap-img { border:1px solid #eeeeee; position:relative; } .new .sec02 .wrap-list .wrap-txt { margin:10px 0 0; text-align:center; font-size:12px; } .new .sec02 .wrap-list .end .wrap-img:before { content:'시즌\A종료'; white-space:pre; position:absolute; left:0; top:0; background-color:rgba(0,0,0,0.6); width:100%; height:100%; display:flex; flex-direction: column; justify-content: center; align-items: center; color:#fff; font-size:30px; font-weight:500; line-height:1.1em; } /* ************************************************************************************ MENU - drink ************************************************************************************ */ .drink h2 { padding:30px 0 10px; margin:0; display:block; font-size:20px; letter-spacing: 0.1em; } .drink .inner { padding:0px 20px 50px; box-sizing:border-box; letter-spacing:-0.04em; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .drink .sec01 { } .drink .sec01 .wrap-list { border-top:1px solid #ebebeb; padding:50px 0 0; } .drink .sec01 .wrap-list ul { margin-left:-10px; } .drink .sec01 .wrap-list ul li { width:calc(50% - 10px); float:left; margin-left:10px; margin-bottom:50px; } .drink .sec01 .wrap-list ul li:nth-child(5n+1) { clear:inherit; } .drink .sec01 .wrap-list ul li:nth-child(2n+1) { clear:both; } .drink .sec01 .wrap-list .wrap-img { position:relative; text-align:center; } .drink .sec01 .wrap-list .wrap-img img { max-height:130px; } .drink .sec01 .wrap-list .wrap-ico { position:absolute; left:0; top:0; } .drink .sec01 .wrap-list .wrap-ico span { display:block; width:35px; height:35px; line-height:35px; border-radius:50%; text-align:center; font-size:8px; color:#fff; margin-bottom:10px; letter-spacing:0.1em; font-weight:500; } .drink .sec01 .wrap-list .wrap-ico .ico-best { background:#437f46; } .drink .sec01 .wrap-list .wrap-ico .ico-new { background:#b80000; } .drink .sec01 .wrap-list .wrap-txt { margin:10px 0 0; text-align:center; font-size:12px; } /* ************************************************************************************ FRANCHISEE - blending ************************************************************************************ */ .blending .inner { padding:70px 20px; letter-spacing:-0.04em; text-align:center; } .blending h4 { font-size:20px; font-weight:500; color:#000; } .blending .wrap-txt { } .blending .wrap-txt .desc { font-size:12px; font-weight:300; line-height:1.8em; } .blending .wrap-img { text-align:center; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .blending .sec01 { background:url('../img/franchisee/bg_blending01.jpg') center no-repeat; background-size:cover; } .blending .sec01 .inner { background:url('../img/franchisee/img_blending_coffee01_m.png') center 130% no-repeat; background-size:340px; padding:70px 0; } .blending .sec01 .wrap-txt { color:#fff; } .blending .sec01 .wrap-txt h4 { margin:0 0 40px; color:#fff; } .blending .sec01 .wrap-txt .desc { } .blending .sec01 .wrap-txt .quotation { margin:20px 0; color:#ffcd34; font-size:0; } .blending .sec01 .wrap-txt .quotation span { display:inline-block; position:relative; padding:0 16px; line-height:1em; font-weight:500; font-size:14px; } .blending .sec01 .wrap-txt .quotation span b { font-size:16px; } .blending .sec01 .wrap-txt .quotation span:before, .blending .sec01 .wrap-txt .quotation span:after { content:''; display:block; width:10px; height:10px; position:absolute; background:url('../img/franchisee/ico_quot_yellow.png') center no-repeat; background-size:8px auto; } .blending .sec01 .wrap-txt .quotation span:before { left:0; top:0px; } .blending .sec01 .wrap-txt .quotation span:after { right:0; top:0px; transform: rotate(180deg); } .blending .sec01 .wrap-txt .quotation span:first-of-type { margin-left:0px; margin-bottom:10px; } .blending .sec01 .wrap-txt .quotation span:last-of-type { margin-left:0px; } .blending .sec01 .wrap-txt .line { width:1px; height:130px; background-color:#fff; display:block; margin:30px auto 160px; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .blending .sec02 { background:#ffcd34; } .blending .sec02 h4 { } .blending .sec02 .wrap-cont { margin:40px 0 0; } .blending .sec02 .wrap-cont ul { margin:0px; } .blending .sec02 .wrap-cont ul li { width:60%; float:none; margin:0 auto 50px; background-color:#fff; border:1px dashed #959595; border-radius: 20px; box-sizing:border-box; box-shadow: 5px 5px 0 #e1e1e1; padding:20px 30px; position:relative; } .blending .sec02 .wrap-cont ul li:before { content:'Vs'; font-size:20px; font-weight:bold; color:#000; position:absolute; left:50%; top:-50%; transform: translate(-50%, 50%); } .blending .sec02 .wrap-cont ul li:first-child:before { display:none; } .blending .sec02 .wrap-cont .tit { font-size:14px; font-weight:bold; line-height:1em; margin:0 0 5px; letter-spacing: 0.03em; color:#000; } .blending .sec02 .wrap-cont .tit b { font-size:20px; } .blending .sec02 .wrap-cont .desc { font-size:12px; color:#000; } .blending .sec02 .wrap-cont .desc span { display:block; } .blending .sec02 .wrap-cont .desc span b { font-size:20px; color:#aa0000; } .blending .sec02 .wrap-cont .active { background:#333333; border-color:#000; box-shadow: 5px 5px 0 #252525; margin:100px auto 0; } .blending .sec02 .wrap-cont .active:before { transform: translate(-50%, -50%); } .blending .sec02 .wrap-cont .active .tit { color:#ffcd34; } .blending .sec02 .wrap-cont .active .desc { color:#fff; } .blending .sec02 .wrap-cont .active .desc b { color:#ffcd34; } .blending .sec02 .wrap-cont .active:after { content:'★★★'; position:absolute; top:-40px; left:50%; transform: translateX(-50%); color:#d71313; font-size:28px; -webkit-text-stroke: 2px #333; letter-spacing: 0.2em; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .blending .sec03 { background:url('../img/franchisee/pattern_paper.png'), #f0e9d5; } .blending .sec03 h4 { } .blending .sec03 .wrap-cont { margin:40px 0 30px; } .blending .sec03 .wrap-cont ul { margin:0px; } .blending .sec03 .wrap-cont ul li { width:80%; margin:0 auto; float:none; } .blending .sec03 .wrap-cont .wrap-img { } .blending .sec03 .wrap-cont .wrap-txt { margin:10px 0 30px; } .blending .sec03 .wrap-cont .wrap-txt .desc { color:#242424; } .blending .sec03 .wrap-cont .wrap-txt .desc span { display:inline-block; border:2px solid #c00000; vertical-align:bottom; margin:0 2px; } .blending .sec03 .wrap-cont .wrap-txt .desc span img { height:30px; } .blending .sec03 .subtitle { margin:20px 0 30px; font-size:14px; font-weight:500; color:#000; } .blending .sec03 .subtitle b:before { content:''; display:block; } .blending .sec03 .subtitle b { box-shadow: inset 0 -14px 0 rgba(255,234,0,0.4); } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .blending .sec04 { } .blending .sec04 .inner { padding:70px 0; } .blending .sec04 .wrap-img { padding:0 20px; } .blending .sec04 .wrap-img img { margin:0 auto; } .blending .sec04 .wrap-txt { } .blending .sec04 .wrap-txt h4 { margin:40px 0 20px; } .blending .sec04 .wrap-txt .desc { color:#000; } /* ************************************************************************************ FRANCHISEE - different ************************************************************************************ */ .different .inner { padding:60px 20px 80px; letter-spacing:-0.04em; text-align:center; } .different h4 { font-size:20px; font-weight:500; color:#000; } .different .wrap-txt { } .different .wrap-txt .desc { font-size:12px; font-weight:300; line-height:1.8em; color:#242424; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .different .sec01 { background:url('../img/franchisee/bg_differentiation01.jpg') 90% center no-repeat; background-size:cover; } .different .sec01 .wrap-txt { } .different .sec01 h4 { line-height:1.35em; } .different .sec01 h4 b { font-weight:500; color:#bd0000; } .different .sec01 .desc { margin:40px 0 20px; } .different .sec01 .subtitle { font-size:14px; color:#242424; line-height:1.8em; } .different .sec01 .subtitle b:before { content:''; display:block; } .different .sec01 .subtitle b { box-shadow: inset 0 -14px 0 rgba(255,234,0,0.4); } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .different .sec02 { background:linear-gradient(#000 30%, transparent 40%), url('../img/franchisee/bg_differentiation02_m.jpg') center bottom no-repeat; background-size:auto, 100% auto; } .different .sec02 h4 { text-align:center; margin-bottom:200px; font-size:0; position:relative; display:inline-block; padding:0 30px; } .different .sec02 h4 span:nth-child(2) { line-height:1.5em; display:inline-block; font-size:20px; color:#fff; } .different .sec02 .quot { display:inline-block; width:20px; height:20px; background:url('../img/main/ico_quot.png') left no-repeat; background-size:20px auto; vertical-align: top; padding-right:10px; position:absolute; left:0; top:10px; } .different .sec02 .quot:last-of-type { transform: rotate(180deg); vertical-align: 0px; left:inherit; right:0; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .different .sec03 { background:#edecec; } .different .sec03 h4 { } .different .sec03 .subtitle { margin:20px 0 40px; font-size:14px; font-weight:500; letter-spacing: -0.04em; color:#000; } .different .sec03 .subtitle b { box-shadow: inset 0 -24px 0 rgba(255,234,0,0.4); } .different .sec03 .wrap-cont { } .different .sec03 .wrap-cont ul { margin-left:0px; } .different .sec03 .wrap-cont ul li { width:100%; height:auto; margin-left:0px; margin-bottom:10px; box-sizing:border-box; float:none; display:flex; justify-content: center; align-items: center; background-color:#fff; box-shadow: 5px 5px 0 #d7d6d6; border-radius: 20px; border:1px dashed #959595; padding:20px 0; position:relative; } .different .sec03 .wrap-cont ul li:nth-child(2n+1) { clear: both; margin-top:40px; } .different .sec03 .wrap-cont ul li:nth-child(2n+1):after { content:''; width:30px; height:30px; background:url('../img/franchisee/ico_arrow_white.png') center no-repeat, #2d2d2d; background-size:auto 10px; border-radius: 50%; position:absolute; left:50%; top:50px; transform: translateX(-50%) rotate(90deg); z-index: 5; } .different .sec03 .wrap-cont ul li:nth-child(1):after { top:70px; } .different .sec03 .wrap-cont .desc { font-size:12px; font-weight:300; color:#000; padding:0px; line-height:1.6em; } .different .sec03 .wrap-cont ul li:nth-child(2) b {background: url('../img/franchisee/img_differenrt_line01.png') right bottom no-repeat, url('../img/franchisee/img_differenrt_star01.png') 0px 10px no-repeat;display:block; padding: 5px 0 5px 20px; background-size: 95% auto, auto 12px; } .different .sec03 .wrap-cont ul li:nth-child(4) b {background: url('../img/franchisee/img_differenrt_line02.png') right 55% no-repeat, url('../img/franchisee/img_differenrt_star02.png') right 0px no-repeat, url('../img/franchisee/img_differenrt_line03.png') 20% bottom no-repeat;display:inline-block; padding: 5px 0 3px 0px; background-size: 32% auto, auto 10px, 40% auto; } /* ************************************************************************************ FRANCHISEE - competitive ************************************************************************************ */ .competitive .inner { padding:50px 20px; letter-spacing:-0.04em; text-align:center; } .competitive h4 { font-size:20px; font-weight:500; color:#2f2f2f; } .competitive .wrap-txt { } .competitive .wrap-txt .desc { font-size:12px; font-weight:300; line-height:1.8em; color:#2f2f2f; } .competitive .number img { height:20px; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .competitive .sec01 { background:url('../img/franchisee/bg_competitive01.jpg') center no-repeat; background-size:cover; position:relative; } .competitive .sec01 h4 { } .competitive .sec01 h4 span:nth-child(2) { display:inline-block; font-size:20px; color:#ffcd34; } .competitive .sec01 .quot { display:inline-block; width:20px; height:20px; background:url('../img/franchisee/ico_quot_yellow.png') left no-repeat; background-size:24px auto; vertical-align:top; padding-right:10px; opacity: 0.3; } .competitive .sec01 .quot:last-of-type { transform: rotate(180deg); } .competitive .sec01 .wrap-txt { margin: 20px 0 0; color:#fff; font-weight:300; } .competitive .sec01 .wrap-txt .desc { font-size:14px; color:#fff; } .competitive .sec01 .wrap-txt .subtitle { border-bottom:1px solid #fff; display:inline-block; font-size:16px; } .competitive .sec01 .wrap-txt .subtitle b { color:#ffcd34; } .competitive .sec01:after { content:''; display:block; width:20px; height:20px; position:absolute; left:50%; bottom:-10px; transform: translateX(-50%); background:url('../img/franchisee/ico_plus.png') center no-repeat, #000; background-size:10px auto; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .competitive .sec02 { background:#e8e1cf; } .competitive .sec02 .wrap-cont { margin:0px; background:url('../img/franchisee/pattern_check.jpg') repeat, #fff; border:5px solid #ffcd34; border-radius: 50px; padding:40px 20px; } .competitive .sec02 .wrap-cont h4 { margin:10px 0 30px; line-height:1em; } .competitive .sec02 .wrap-cont .desc { line-height:1.5em; } .competitive .sec02 .wrap-cont .subtitle { margin:10px 0 30px; font-size:14px; font-weight:500; box-shadow: inset 0 -14px 0 rgba(255,216,12,0.4); display:inline-block; padding:0 5px; } .competitive .sec02 .wrap-img img { margin-left:-20%; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .competitive .sec03 { background:url('../img/franchisee/bg_competitive02.jpg') left bottom no-repeat; background-size:cover; } .competitive .sec03 .inner { padding:50px 0; } .competitive .sec03 h4 { color:#fff; margin:10px 0 40px; } .competitive .sec03 .wrap-txt .desc { color:#fff; } .competitive .sec03 .wrap-txt .subtitle { font-size:14px; color:#fff; font-weight:500; padding:5px 10px 5px; display:inline-block; background:url('../img/franchisee/img_competitive_line01.png') 5px bottom no-repeat, url('../img/franchisee/img_differenrt_star01.png') left top no-repeat; background-size:70% auto, 17px auto; } .competitive .sec03 .wrap-img { margin:30px 20px; } .competitive .sec03 .wrap-img ul { margin-left:0px; } .competitive .sec03 .wrap-img li { width:180px; margin:0px auto 10px; float:none; } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .competitive .sec04 { } .competitive .sec04 .inner { } .competitive .sec04 h4 { color:#000; padding:10px 0 40px; background:url('../img/franchisee/img_competitive_beansillust.png') 70% 30% no-repeat; background-size:60px auto; } .competitive .sec04 .wrap-txt { width:100%; float:none; text-align:center; padding-top:0px; } .competitive .sec04 .wrap-txt .subtitle { margin:15px 0 20px; font-size:14px; font-weight:500; line-height:1.64em; } .competitive .sec04 .wrap-img { float:none; margin:0px auto; } .competitive .sec04 .wrap-img img { margin-left:10%; } /* --------------------------------------- SECTION - 05 --------------------------------------- */ .competitive .sec05 { background:url('../img/franchisee/bg_competitive03.jpg') center no-repeat; background-size:cover; } .competitive .sec05 .inner { background:url('../img/franchisee/img_competitive_stamp.png') center no-repeat; background-size:90%; } .competitive .sec05 h4 { color:#fff; margin:10px 0 40px; } .competitive .sec05 .wrap-txt { } .competitive .sec05 .wrap-txt .desc { color:#fff; } .competitive .sec05 .wrap-txt .subtitle { font-size:14px; line-height:1.8em; color:#fff; font-weight:500; padding:0 0px 0px; display:inline-block; background:none; } .competitive .sec05 .wrap-txt .subtitle b { font-weight:500; box-shadow: inset 0 -12px 0 rgba(255,255,0,0.3); } /* --------------------------------------- SECTION - 06 --------------------------------------- */ .competitive .sec06 { background:#f0e9d5; } .competitive .sec06 .inner { padding:50px 0; } .competitive .sec06 h4 { color:#1e1e1e; margin:10px 0 40px; } .competitive .sec06 .wrap-img { padding:0 20px; } .competitive .sec06 .wrap-img ul { margin:0 0 0 -10px; } .competitive .sec06 .wrap-img ul li { width:calc(33.33% - 10px); float:left; margin-left:10px; } .competitive .sec06 .wrap-img ul li:nth-child(2) { padding-top:20px; } .competitive .sec06 .wrap-txt .desc { margin:30px 0 30px; } .competitive .sec06 .wrap-txt .subtitle { font-size:14px; font-weight:300; line-height:1.8em; } .competitive .sec06 .wrap-txt .subtitle b { font-weight:500; box-shadow: inset 0 -14px 0 rgba(255,255,0,0.4); } /* --------------------------------------- SECTION - 07 --------------------------------------- */ .competitive .sec07 { } .competitive .sec07 h4 { color:#1e1e1e; margin:10px 0 40px; } .competitive .sec07 .wrap-cont { padding:0 20px; } .competitive .sec07 .wrap-cont ul { margin:0; } .competitive .sec07 .wrap-cont ul li { width:100%; height:auto; margin-left:0; float:none; background-color:#ffcd34; border-radius:300px; box-sizing:border-box; padding:10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); clear:both; display:flex; justify-content: center; align-items: center; margin-bottom:10px; } .competitive .sec07 .wrap-cont ul li:after { content:''; display:block; clear:both; } .competitive .sec07 .wrap-cont ul li .img { float:left; width:100px; height:100px; } .competitive .sec07 .wrap-cont ul li .wrap-txt { float:right; width:calc(100% - 100px); text-align:left; box-sizing:border-box; padding-left:10px; } .competitive .sec07 .wrap-cont ul li .tit { margin:0 0 10px; font-size:14px; font-weight:500; } .competitive .sec07 .wrap-cont ul li .desc { font-size:12px; font-weight:300; } .competitive .sec07 .wrap-cont .black { background:url('../img/franchisee/pattern_check_black_03.jpg'); } .competitive .sec07 .wrap-cont .black .tit { color:#fff; } .competitive .sec07 .wrap-cont .black .desc { color:#fff; } /* --------------------------------------- SECTION - 08 --------------------------------------- */ .competitive .sec08 { background:url('../img/franchisee/bg_competitive04_m.jpg') center bottom no-repeat; background-size:cover; } .competitive .sec08 .inner { text-align:right; padding:60px 20px 260px; text-align:center; } .competitive .sec08 h4 { color:#fff; margin:10px 0px 0; } .competitive .sec08 .wrap-img { margin:40px 0 10px; } .competitive .sec08 .wrap-img img { height:34px; } .competitive .sec08 .desc { color:#fff; margin:0 0 50px; } /* --------------------------------------- SECTION - 09 --------------------------------------- */ .competitive .sec09 { background:url('../img/franchisee/bg_competitive05.jpg') center no-repeat; background-size:cover; } .competitive .sec09 h4 { color:#fff; margin:20px 0 40px; } .competitive .sec09 h4 b { color:#ffcd34; } .competitive .sec09 .wrap-cont { margin:0; } .competitive .sec09 .wrap-cont ul { margin-left:-20px; } .competitive .sec09 .wrap-cont ul li { width:calc(50% - 20px); margin-left:20px; float:left; margin-bottom:20px; background-color:#262626; color:#ffcd34; border-radius: 30px; padding:20px; box-sizing:border-box; } .competitive .sec09 .wrap-cont li .tit { text-transform: uppercase; letter-spacing:0.2em; font-size:12px; font-weight:700; margin:0 0 10px; } .competitive .sec09 .wrap-cont li .img img { width:76px; } .competitive .sec09 .wrap-cont .yellow { background:#ffcd34; } .competitive .sec09 .wrap-cont .yellow .tit { color:#242424 } /* ************************************************************************************ FRANCHISEE - procedure ************************************************************************************ */ .procedure .inner { padding:0px; letter-spacing:-0.04em; text-align:center; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .procedure .sec01 { background:url('../img/franchisee/bg_procedure.jpg') center no-repeat; background-size:cover; } .procedure .sec01 .inner { padding:50px 20px; } .procedure .sec01 h4 { color:#fff; text-transform: uppercase; font-size:24px; font-weight:900; letter-spacing: 0.04em; padding:0 20%; } .procedure .sec01 h4 b { color:#ffcd34; font-weight:900; } .procedure .sec01 .wrap-txt { color:#fff; } .procedure .sec01 .wrap-txt .desc { font-size:14px; font-weight:300; letter-spacing: -0.04em; margin:30px 0 0; } .procedure .sec01 .wrap-txt .desc b { font-weight:300; color:#ffcd34; display:block; } /* ************************************************************************************ FRANCHISEE - cost ************************************************************************************ */ .cost .inner { padding:50px 20px; letter-spacing:-0.04em; text-align:center; } .cost h4 { font-size:20px; font-weight:500; color:#2f2f2f; } .cost .wrap-txt .desc { font-size:12px; font-weight:300; line-height:1.8em; color:#2f2f2f; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .cost .sec01 { background:url('../img/main/img_sec05_bg.png') center 110% no-repeat, #508fc2; background-size:360px auto; padding:0; } .cost .sec01 .inner { padding-bottom:220px; } .cost .sec01 h4 { color:#fff; text-transform: uppercase; font-size:20px; font-weight:500; padding-top:0px; position:relative; display:inline-block; } .cost .sec01 h4:after { content:'. . . .'; position:absolute; top:-20px; right:1px; letter-spacing:0.215em; } .cost .sec01 h4 b { color:#ffdbdb; font-weight:500; } .cost .sec01 .subtitle { margin:30px 0 20px; font-size:14px; font-weight:500; color:#fff; } .cost .sec01 .desc { font-size:12px; font-weight:300; line-height:1.8em; color:#fff; } .cost .sec01 .desc b { font-weight:500; font-size:14px; } .cost .sec01 .wrap-txt:after { content:''; width:1px; height:130px; display:block; background-color:#fff; margin:20px auto 100px; } .cost .sec01 .line { display:none; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .cost .sec02 { background:#eeeeee; } .cost .sec02 h4 { font-weight:500; line-height:1em; } .cost .sec02 h4 b { color:#da0000; font-weight:500; } .cost .sec02 .subtitle { margin:20px 0; font-size:14px; font-weight:500; color:#383838; line-height:1em; } .cost .sec02 .subtitle b { font-size:20px; } .cost .sec02 .wrap-cont { margin:0 20px; } .cost .sec02 .wrap-cont ul { margin-left:0px; } .cost .sec02 .wrap-cont ul li { width:100%; margin-left:0px; float:none; border:2px solid #383838; border-radius: 10px; box-sizing:border-box; overflow: hidden; margin-bottom:10px; background:#fff; } .cost .sec02 .wrap-cont li .tit { width:30%; float:left; background-color:#383838; font-size:14px; color:#fff; padding:10px 0; line-height:1em; } .cost .sec02 .wrap-cont li .desc { font-size:14px; color:#383838; padding:10px 0; font-weight:300; line-height:1em; } .cost .sec02 .wrap-cont li:nth-child(4n+0) .tit { color:#fff; } .cost .sec02 .wrap-cont li:nth-child(4n+1) .tit { color:#fff; } .cost .sec02 .wrap-cont li:nth-child(2n+1) .tit { color:#ffcd34; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .cost .sec03 h4 { margin-bottom:40px; } /* ************************************************************************************ FRANCHISEE - interior ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .interior .sec01 { } .interior .sec01 .inner { text-align:left; } .interior .sec01 h4 { font-size:20px; font-weight:900; color:#65666b; text-transform:uppercase; } .interior .sec01 h4 b { font-weight:900; color:#ffcd34; } .interior .sec01 .wrap-txt { margin:0px; } .interior .sec01 .desc { margin:10px 0 0px; font-size:14px; letter-spacing: -0.04em; line-height:1.8em; color:#5b5b5b; font-weight:300; } .interior .sec01 .desc b { font-weight:500; display:block; margin:10px 0 0; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .interior .sec02 { } .interior .sec02 .inner { padding:0 20px 60px; } .interior .sec02 .wrap-slider { margin:0; } .interior .sec02 .wrap-slider .interior-slider-nav { position:relative; margin:40px 50px 0; } .interior .sec02 .slick-slide { margin: 0 5px; } .interior .sec02 .slick-list { margin: 0 -5px; } .interior .sec02 .slick-arrow { width:30px; height:30px; box-sizing:border-box; background:url('../img/franchisee/ico_arrow_slide.png') center no-repeat, #ededed; background-size:6px auto; text-indent: -9999px; font-size:0; position:absolute; top:50%; } .interior .sec02 .slick-prev { left:-50px; transform: translateY(-50%); } .interior .sec02 .slick-next { transform: rotate(180deg); right:-50px; margin-top:-15px; } /* ************************************************************************************ FRANCHISEE - contact ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .contact .sec01 { } .contact .sec01 .inner { text-align:left; } .contact .sec01 .wrap-contact { margin:0px; } .contact .sec01 .wrap-contact .tit { font-size:14px; font-weight:300; color:#5b5b5b; letter-spacing: -0.04em; margin:0 0 10px; } .contact .sec01 .wrap-contact .wrap-form { border-top:2px solid #666; } .contact .sec01 .wrap-contact .wrap-form .item-input { border-bottom:1px solid #d7d7d7; font-size:0; } .contact .sec01 .wrap-contact .wrap-form .label { width:100px; display:inline-block; text-align:center; line-height:60px; background:#f2f2f2; font-size:12px; color:#000; } .contact .sec01 .wrap-contact .wrap-form input { width:200px; margin-left:10px; display:inline-block; vertical-align: sub; font-size:14px; box-sizing:border-box; padding:3px 5px; color:#000; } .contact .sec01 .wrap-contact .wrap-form .tel input { width:53.3333px; margin-left:0; } .contact .sec01 .wrap-contact .wrap-form .tel input:first-of-type { margin-left:10px; } .contact .sec01 .wrap-contact .wrap-form .tel .bar { width:20px; font-size:14px; color:#000; padding:0; display:inline-block; text-align:center; } .contact .sec01 .wrap-contact .wrap-form .store label { font-size:14px; color:#000; padding-left:5px; cursor: pointer; line-height:42px; display:inline-block; } .contact .sec01 .wrap-contact .wrap-form .store input { cursor: pointer; width:14px; display:inline-block; vertical-align: -3px; } .contact .sec01 .wrap-contact .wrap-form .questions .label { height:5em; font-size:12px; height:140px; line-height:140px; } .contact .sec01 .wrap-contact .wrap-form .questions textarea { width:200px; height:120px; font-size:14px; color:#000; display:inline-block; vertical-align: top; margin:10px 10px; box-sizing:border-box; padding:5px 5px; resize:none; } .contact .sec01 .wrap-contact .privacy-policy { margin:20px 0 0; } .contact .sec01 .wrap-contact .privacy-policy .tit { margin:0 0 10px; color:#5b5b5b; } .contact .sec01 .wrap-contact .privacy-policy .wrap-txt { height:160px; overflow-y: scroll; border:1px solid #e0e0e0; box-sizing:border-box; padding:10px; color:#696969; margin-bottom:10px; font-size:10px; } .contact .sec01 .wrap-contact .privacy-policy .wrap-chk { } .contact .sec01 .wrap-contact .privacy-policy .wrap-chk input { display:none; } .contact .sec01 .wrap-contact .privacy-policy .wrap-chk input + label { color:#5b5b5b; cursor: pointer; font-size:12px; } .contact .sec01 .wrap-contact .privacy-policy .wrap-chk input + label span { display:inline-block; width:12px; height:12px; border:1px solid #d7d7d7; border-radius: 50%; cursor: pointer; margin-right:5px; vertical-align:sub; } .contact .sec01 .wrap-contact .privacy-policy .wrap-chk input:checked + label span { background:url('../img/franchisee/ico-chk.png') center no-repeat, #333; background-size:auto 10px; } .contact .sec01 .wrap-btn { margin:40px 0; } .contact .sec01 .wrap-btn a { width:120px; height:40px; line-height:40px; background:#3a3a3a; color:#fff; font-size:14px; font-weight:500; margin:0 auto; display:block; } /* ************************************************************************************ FRANCHISEE - interview ************************************************************************************ */ .interview .inner { padding: 30px 0px 0px 0px; letter-spacing: -0.04em; text-align: center; } .interview h4 { font-size:20px; font-weight:500; color:#2f2f2f; } .interview .wrap-txt { } .interview .wrap-txt .desc { font-size:20px; font-weight:300; line-height:1.8em; color:#2f2f2f; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .interview .section01_bg { background:url('../img/franchisee/bg_interview01_m.jpg') center top no-repeat; position:relative; background-size:135%; } .interview .section02_bg { background:url('../img/franchisee/bg_interview01_m.jpg') center top no-repeat; position:relative; background-size:135%; } .interview .sec01 h4 { font-size:30px; color:#ffcd34; } .interview .sec01 .wrap-txt { margin:10px 0 0; color:#fff; font-weight:300; } .interview .sec01 .wrap-txt .desc { font-size:15px; color:#fff; } .interview .sec01 .wrap-txt .desc strong { font-size:20px; color:#ffcd34; } .interview .sec01 .pc-view { display:none } .interview .sec01 .atab { margin:0 auto; max-width:380px; /*padding:33px 0px;*/ padding-top:33px; padding-bottom:30px; overflow:hidden; margin-top:-6px; } .interview .sec01 .atab li { float:left; width:24.5%; box-sizing:border-box; } .interview .sec01 .atab #mo {position: relative; /*left: 12%;*/ width:24.5%; margin-top: -1px;} .interview .sec01 .atab li a { display:block; font-size:13px; color:#333; background:#fff; border:1px solid #bcbcbc; line-height:46px; text-align:center; } .interview .sec01 .atab li:fitst-child { border-left:1px solid #000; } .interview .sec01 .atab li.on a { color:#fff; background:#e14242; border:1px solid #820f0f; } .interview .sec01 .in_yt {margin-bottom:-4px;} .interview .sec01 .in_yt iframe {width:100%; height:230px;} /* ************************************************************************************ FRANCHISEE - faq ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .faq .sec01 .inner { padding-bottom:60px; text-align:left; } .faq .sec01 .wrap-faq { margin:0; } .faq .sec01 .wrap-faq .subject { padding:10px 2px; margin:30px 0 0; border-top:1px solid #a1a1a1; border-bottom:1px solid #a1a1a1; cursor: pointer; } .faq .sec01 .wrap-faq li:first-child .subject { margin-top:0; } .faq .sec01 .wrap-faq .subject .ico { width:24px; height:24px; background-color:#434343; color:#ffcd34; text-align:center; line-height:22px; font-weight:900; font-size:12px; border-radius: 50%; float:left; } .faq .sec01 .wrap-faq .subject .tit { width:calc(100% - 44px); padding-left:10px; float:left; box-sizing:border-box; line-height:22px; font-size:14px; color:#222; letter-spacing: -0.04em; } .faq .sec01 .wrap-faq .desc { clear:both; font-size:12px; line-height:1.8em; color:#5b5b5b; padding:20px 10px; } .faq .sec01 .wrap-faq li:nth-child(2n+1) .ico { background-color:#ffcd34; color:#434343; } /* ************************************************************************************ STORE - store list ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .store-list .inner { padding-bottom:60px; letter-spacing: -0.04em; } /* search */ .store-list .wrap-search { padding:20px 0px; border-top:2px solid #666; border-bottom:2px solid #666; } .store-list .wrap-search .tit { font-size:14px; color:#000; line-height:1em; display:block; vertical-align: middle; margin-right:0px; font-weight:500; margin-bottom:20px; } .store-list .wrap-search .area-wrap { display:block; width:100%; font-size:0; } .store-list .wrap-search .area-wrap select { width:calc(50% - 5px); box-sizing:border-box; padding:0 10px; background-position:90% center; display:inline-block; font-size:12px; margin-right:0px; margin-bottom:10px; } .store-list .wrap-search .area-wrap select:first-child { margin-right:10px; } .store-list .wrap-search .area-wrap input[type="text"] { width:calc(100% - 70px); margin-right:10px; box-sizing:border-box; padding:0 10px; font-size:12px; } .store-list .wrap-search .area-wrap .btn { width:60px; height:42px; padding:0; line-height:42px; color:#fff; background:#444; font-size:12px; vertical-align: middle; } /* list */ .store-list .wrap-table { } .store-list .wrap-table table { table-layout:fixed; width:100%; } .store-list .wrap-table table col:nth-child(1) { width:80px; } .store-list .wrap-table table col:nth-child(2) { width:auto; } .store-list .wrap-table table col:nth-child(3) { width:80px; } .store-list .wrap-table caption { display:none; } .store-list .wrap-table th { font-size:10px; color:#000; background-color:#f7f7f7; padding:10px; } .store-list .wrap-table tr { border-bottom:1px solid #e0e0e0; } .store-list .wrap-table td { font-size:10px; color:#000; text-align:center; } .store-list .wrap-table td a { display:inline-block; font-size:10px; color:#000; padding:5px 10px; } /* ************************************************************************************ STORE - store view ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .store-view .inner { letter-spacing: -0.04em; padding:60px 20px; box-sizing:border-box; } .store-view .tit { font-size:14px; color:#000; font-weight:500; } /* map */ .store-view .wrap-map { margin:20px 0 30px; } /* table */ .store-view .wrap-table { border-top:2px solid #666; } .store-view .wrap-table table { table-layout:fixed; width:100%; } .store-view .wrap-table caption { display:none; } .store-view .wrap-table col:nth-child(1) { width:100px; } .store-view .wrap-table col:nth-child(2) { width:auto; } .store-view .wrap-table th { font-size:12px; color:#000; background-color:#f7f7f7; } .store-view .wrap-table tr { border-bottom:1px solid #e0e0e0; } .store-view .wrap-table td { font-size:12px; color:#000; padding:10px 20px; text-align:left; } /* ************************************************************************************ NEWS - notice list ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .notice-list .inner { padding:30px 20px 60px; letter-spacing: -0.04em; } /* list */ .notice-list .wrap-table { border-top:2px solid #666; } .notice-list .wrap-table table { table-layout:fixed; width:100%; } .notice-list .wrap-table caption { display:none; } .notice-list .wrap-table col:nth-child(1) { width:40px; } .notice-list .wrap-table col:nth-child(2) { width:auto; } .notice-list .wrap-table col:nth-child(3) { width:60px; } .notice-list .wrap-table th { font-size:10px; color:#000; background-color:#f7f7f7; padding:10px 0px; } .notice-list .wrap-table tr { border-bottom:1px solid #e0e0e0; } .notice-list .wrap-table td { font-size:10px; color:#000; text-align:center; padding:10px 0px; } .notice-list .wrap-table td.subject { text-align:left; padding:0 10px; } .notice-list .wrap-table td a { display:inline-block; font-size:10px; color:#000; } /* search */ .notice-list .wrap-search { text-align: center; margin:30px 0 0; } .notice-list .wrap-search .area-wrap { display:block; font-size:0; } .notice-list .wrap-search .area-wrap input[type="text"] { width:calc(100% - 70px); margin-right:10px; box-sizing:border-box; padding:0 10px; font-size:12px; } .notice-list .wrap-search .area-wrap .btn { width:60px; height:42px; padding:0; height:42px; line-height:42px; color:#fff; background:#444; font-size:12px; } /* ************************************************************************************ STORE - notice view ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .notice-view .inner { letter-spacing: -0.04em; padding:30px 20px 60px; } .notice-view .wrap-title { padding:10px 20px; border-top:2px solid #666; text-align:left; } .notice-view .wrap-title h4 { width:calc(100%); font-size:14px; color:#000; font-weight:400; float:none; line-height:1.3rem; margin:0 0 5px; } .notice-view .wrap-title .date { width:100%; font-size:12px; color:#666; font-weight:300; float:none; line-height:1rem; text-align:left; } .notice-view .wrap-cont { border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding:20px 20px; } .notice-view .wrap-move { border-bottom:1px solid #e0e0e0; display:table; width:100%; } .notice-view .wrap-move dt { width:10%; display:table-cell; vertical-align:middle; text-align:center; padding:10px 0px; color:#222; font-size:10px; } .notice-view .wrap-move dd { width:20%; display:table-cell; vertical-align:middle; text-align:center; padding:10px 0px; color:#666; font-size:10px; } .notice-view .wrap-move dd.link { width:70%; text-align:left; padding:10px 10px; } .notice-view .wrap-move dd.link a { display:inline-block; color:#333; font-size:10px; } .notice-view .wrap-btn { margin:50px auto 0; text-align:center; } .notice-view .wrap-btn a { min-width:100px; padding:10px 20px; display:inline-block; cursor: pointer; text-align:center; border:1px solid #666; font-size:14px; color:#333; font-weight:300; box-sizing:border-box; } /* ************************************************************************************ NEWS - press list ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .press-list .inner { padding:30px 20px 60px; letter-spacing: -0.04em; } /* list */ .press-list .wrap-table { border-top:2px solid #666; } .press-list .wrap-table table { table-layout:fixed; width:100%; } .press-list .wrap-table caption { display:none; } .press-list .wrap-table col:nth-child(1) { width:40px; } .press-list .wrap-table col:nth-child(2) { width:auto; } .press-list .wrap-table col:nth-child(3) { width:60px; } .press-list .wrap-table th { font-size:10px; color:#000; background-color:#f7f7f7; padding:10px 0px; } .press-list .wrap-table tr { border-bottom:1px solid #e0e0e0; } .press-list .wrap-table td { font-size:10px; color:#000; text-align:center; padding:10px 0px; } .press-list .wrap-table td.subject { text-align:left; padding:0 10px; } .press-list .wrap-table td a { display:inline-block; font-size:10px; color:#000; } /* search */ .press-list .wrap-search { text-align: center; margin:30px 0 0; } .press-list .wrap-search .area-wrap { display:block; font-size:0; } .press-list .wrap-search .area-wrap input[type="text"] { width:calc(100% - 70px); margin-right:10px; box-sizing:border-box; padding:0 10px; font-size:10px; } .press-list .wrap-search .area-wrap .btn { width:60px; height:42px; padding:0; height:42px; line-height:42px; color:#fff; background:#444; font-size:10px; } } /* 320px 이하 */ @media screen and (max-width:320px){ .interview .section01_bg { background-size:124% auto } .interview .section02_bg { background-size:124% auto } }