/* #=============================================# | http://di-dot.com | | Copyright 2020 di-dot all right reserved. | | Licensed under the di-dot bella jo License. | #=============================================# */ @charset "UTF-8"; /* ************************************************************************************ COMMON ************************************************************************************ */ /* --------------------------------------- BASIC --------------------------------------- */ html, body { } #wrap { } .full { overflow:hidden; height:100vh; } #container {} .inner { width:100%; max-width:1200px; margin:0 auto; } .section { } .mb-view { display: none!important; } .over-hidden { overflow:hidden; } .none-item { padding:100px 0; text-align:center; font-size:14px; color:#959595; border-bottom:1px solid #d5d5d5 } .none-item td { padding:50px 0!important; } /* 랜딩페이지 inner*/ .land_inner { width:100%; max-width:1200px; margin:0 auto; } /* --------------------------------------- HEADER --------------------------------------- */ #header { width:100%; z-index: 10; /* position:absolute; 수정 */ position:relative; left:0; top:0; background:#2c2c2c; transition:background 0.2s; } #header h1 { padding:25px 0; float:left; } #header h1 a { width: 180px; height: 50px; text-indent: -9999px; display:block; background: url('../img/logo.png') left center no-repeat; background-size: 180px 50px; } /* #header .inner {margin-top:79px; } */ /* ---------- gnb ---------- */ #header .area-gnb { padding:25px 0; float:right; } #header .area-gnb .menu-trigger { display:none; cursor: pointer; } #header .area-gnb .gnb-menus { font-size:0; } #header .area-gnb .gnb-menus > li { display:inline-block; padding:0 20px; position:relative; } #header .area-gnb .gnb-menus > li > a { font-size:18px; font-family:'NanumSquare'; font-weight:700; display: inline-block; line-height:50px; color:#fff; vertical-align: middle; padding:0 20px; } #header .area-gnb .current a { color:#ffcd34; } #header .area-gnb .gnb-menus > li.social { padding-left:20px; padding-right:0; } #header .area-gnb .gnb-menus > li.social a { width:26px; height:26px; display:inline-block; background-color:#fff; box-sizing:border-box; margin:0 5px; border-radius: 50%; padding:5px 0; text-align:center; } #header .area-gnb .gnb-menus > li.social a img { height:16px; } /* ---------- lnb ---------- */ #header .area-gnb .lnb-menus { display:none; } #header .area-gnb .current .lnb-menus { display:block; } /* ---------- 상담전화 ---------- */ #header .call { position:relative; top:18px; left:1090px; } /* ---------- 최상단배너 ---------- */ #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;} /* #header .wide-top .wide-top-con .wide-top-close{position: absolute; right:0px; top:13px; cursor:pointer} */ /* 랜딩페이지 최상단배너 */ .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;} /* --------------------------------------- FOOTER --------------------------------------- */ #footer { background-color:#222; padding:60px 0; } #footer .inner { } #footer .copyright { text-align:center; font-size:0; } #footer .copyright .logo { height:47px; margin:0 auto; text-align:center; margin:0 0 50px; } #footer .copyright .logo img { height:100%; } #footer .copyright span { font-size:13px; 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(3):before { display:block; width:0; height:0; } #footer .copyright p { font-size:11px; color:#7e7e7e; margin-top:20px; } /* top btn */ #footer .wrap-btn { width:44px; height:44px; background-color:#000; border-radius: 50%; position:fixed; right:40px; bottom:28px; z-index: 3; } #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; cursor: pointer; } /* --------------------------------------- ASIDE --------------------------------------- */ #aside { } .aside-main { position:fixed; right:40px; bottom:100px; z-index:5; font-family:'Noto Sans'; } .aside-main .wrap-form { width:270px; background-color:#2c2c2c; box-sizing:border-box; padding:29px; color:#fff; border-radius: 20px; } .aside-main .wrap-form .wrap-txt h4 { font-family: 'S coredream'; letter-spacing:0.5em; font-size:18px; border-bottom:1px solid #5b5b5b; padding-bottom:5px; } .aside-main .wrap-form .wrap-txt h5 { font-family: 'S coredream'; line-height:1em; margin:10px 0 5px; color:#ffcc35; font-size:34px; font-weight:700; text-align: center; } .aside-main .wrap-form .wrap-txt .desc { font-size:14px; font-weight:200; margin:0 0 10px; } /* form */ .aside-main .wrap-form .item-input { margin:5px 0 0; } .aside-main .wrap-form .item-input input[type="text"], .aside-main .wrap-form .item-input input[type="tel"] { width:100%; height:30px; line-height:30px; box-sizing:border-box; padding:5px; color:#222; font-size:14px; } .aside-main .wrap-form .item-input textarea { display:block; height:60px; resize:none; box-sizing:border-box; padding:2px 5px; font-size:14px; line-height:1.3em; } .aside-main .wrap-form .item-chk { width:100%; font-family:'Noto Sans'; } .aside-main .wrap-form .item-chk input { width:12px; height:12px; border:1px solid #b7b7b7; cursor: pointer; } .aside-main .wrap-form .item-chk label { cursor: pointer; color:#fff; font-size:12px; font-weight:200; } .aside-main .wrap-form .item-time{ margin-top:5px; } .aside-main .wrap-form .time-title { font-size:13px; font-weight:300; color:#ffcc35; line-height:150%} .aside-main .wrap-form .time-contents { font-size:13px; font-weight:100; line-height:130%} .aside-main .wrap-form .time-holiday { font-size:13px; font-weight:100; color:#C3C3C3; line-height:130%} .aside-main .wrap-form .item-chk a { vertical-align: middle; color:#fff; font-size:12px; font-weight:200; cursor: pointer; } .aside-main .wrap-form .item-btn { margin:10px 0 0; text-align:center; } .aside-main .wrap-form .item-btn a { display:block; width:100%; height:40px; line-height:40px; background-color:#ffcc35; font-family: 'S coredream'; font-size:22px; color:#111; font-weight:700; border-radius:5px; } /* kakao btn */ .aside-main .wrap-btn { margin-top:100px; margin-bottom:65px; width:126px; height:126px; background:url('../img/main/ico_kakao.png') center 20% no-repeat, #ffdc00; border-radius: 50%; overflow: hidden; float:right; } .aside-main .wrap-btn a { display:block; width:100%; height:100%; text-align:center; box-sizing:border-box; padding:82px 30px 0; font-size:15px; color:#391b1b; font-weight:900; line-height:1.1em; } /* --------------------------------------- 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:30px 0; vertical-align: middle; background-color:#fff; border-radius: 1em; } .modal500 { width:500px; } /* close */ .modal .close { position: relative; width: 40px; height: 40px; position: absolute; right: 20px; top: 20px; cursor: pointer; } .modal .close:before { content: ''; position: absolute; display: block; background: #ddd; width: 3px; height: 40px; left: 19px; transform: rotate(-45deg); border-radius:1em; overflow:hidden; } .modal .close:after { content: ''; position: absolute; display: block; background: #ddd; width: 40px; height: 3px; top: 19px; transform: rotate(-45deg); border-radius:1em; overflow:hidden; } /* --------------------------------------- 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; height: 100%; min-height: 100%; margin-right: -5px; vertical-align: middle; opacity: 0; } .popup { 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:1600px; max-width:1600px; } /* 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; } /* --------------------------------------- PAGING --------------------------------------- */ /* .paging { margin:60px 0 0; font-size:0; text-align:center;} .paging > a { width:30px; height:30px; border:1px solid #d7d7d7; display:inline-block; margin:0 2px; background:url('../img/common/ico_paging.png') center no-repeat; background-size:auto 16px; cursor: pointer; } .paging .btn-first { background-position-x:-1px; } .paging .btn-prev { background-position-x:-30px; } .paging .btn-next { background-position-x:-60px; } .paging .btn-last { background-position-x:-90px; } .paging .number { display:inline-block;} .paging .number li { width:30px; height:30px; line-height:30px; border:1px solid #d7d7d7; float:left; text-align:center; margin:0 2px; } .paging .number li a { font-size:14px; color:#333; display:block; } .paging .number li.active { background-color:#464646; } .paging .number li.active a { color:#fff;; } */ /* pagenation */ .pagenation { margin:60px 0 0; font-size:0; text-align:center; } .pagenation ul { display:inline-block; font-size:0; } .pagenation ul li { width:30px; height:30px; line-height:30px; border:1px solid #d7d7d7; float:left; text-align:center; margin:0 2px; } .pagenation ul li.paging a { background:url('../img/common/ico_paging.png') center no-repeat; background-size:auto 16px; cursor: pointer; display:block; width:30px; height:30px; } .pagenation ul li.num { width:30px; height:30px; line-height:30px; border:1px solid #d7d7d7; float:left; text-align:center; margin:0 2px; } .pagenation ul li.num a { font-size:14px; color:#333; display:block; } .pagenation ul li.num active { background-color:#464646; } .pagenation ul li.num active a { color:#fff; } .pagenation ul li.first a { background-position-x:-1px; } .pagenation ul li.prev a { background-position-x:-30px; } .pagenation ul li.next a { background-position-x:-60px; } .pagenation ul li.end a { background-position-x:-90px; } /* .pagenation ul li.first a { background:url('../img/basic/pageend.png') center 6px no-repeat; transform: rotate(180deg); } .pagenation ul li.prev a { background:url('../img/basic/pagenext.png') center 6px no-repeat; transform: rotate(180deg); margin:0 5px 0 0px; } .pagenation ul li.next a { background:url('../img/basic/pagenext.png') center 6px no-repeat; margin:0 0 0 5px; } .pagenation ul li.end a { background:url('../img/basic/pageend.png') center 6px no-repeat; } .pagenation ul li.paging a { width:30px; text-indent:-9999px; overflow:hidden; background-size:15px 15px; margin:0 3px; } */ /* ************************************************************************************ MAIN ************************************************************************************ */ /* --------------------------------------- SECTION - COMMON --------------------------------------- */ .container.main {} .main { font-family:'GmarketSans'; } .main .inner { max-width: 1300px; box-sizing:border-box; } /* --------------------------------------- MODAL --------------------------------------- */ .privacy-pop .modal-cont { padding:20px 40px; } .privacy-pop .modal-cont h6 { font-size:24px; text-align:left; line-height:40px; } .privacy-pop .modal-cont dl { padding:20px 0; text-align:left; font-size:14px; } .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:6px; margin:3px 0 0; color:#666; } /* --------------------------------------- SECTION - visual --------------------------------------- */ /* .main .visual { width:100%; height:100vh; position:relative; } */ .main .visual { width:100%; position:relative; /*수정padding-top:100px;*/ overflow: hidden; /*수정 margin-top:79px;*/} .main .visual .swiper-slide img { width:100%; } .main .visual .visual-pagination { width:100%; text-align:center; position:absolute; bottom:30px; left:0; z-index: 2; } .main .visual .visual-pagination .swiper-pagination-bullet { width:10px; height:10px; background:transparent; border:1px solid #fff; opacity: 1; } .main .visual .visual-pagination .swiper-pagination-bullet-active { background-color:#fff; } .main .visual .visual-button-prev { 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; left:40px; transform: translateY(-50%); transform: rotate(180deg); cursor:pointer; } .main .visual .visual-button-next { 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; right:40px; cursor:pointer; } /* .main .visual .slick-list { position:relative; overflow:hidden; } .main .visual .visual-slider { position:relative; width:auto; } .main .visual .visual-slider .slick-slide { height:1005px; } .main .visual .visual-slider .slick-slide > div { position:absolute; left:50%; margin-left:-960px; } .main .visual .visual-slider .slick-slide a { display:block; } .main .visual .visual-slider .slick-slide a:focus { outline:none; } .main .visual .visual-slider .slick-slide img { max-width:inherit; } .main .visual .slick-list .slick-track { height: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:40px; transform: translateY(-50%); transform: rotate(180deg); } .main .visual .slick-next { } */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .main .sec01 { background: url('../img/main/sec01_bg.png')no-repeat center; background-color : #ffdb35;} .main .sec01 .sec01-inner { display: flex; flex-wrap: wrap; justify-content: end; align-items: center;} .main .sec01 .inner-box { padding: 176px 78px 140px 0; } .main .sec01 h2 { margin-bottom: 44px; color: #181818; font-size: 110px; line-height: 1.125; letter-spacing: -0.06em; font-weight: bold; } .main .sec01 h2 span { color: #fff; } .main .sec01 p { color: #181818; font-size: 50px; font-weight: 300; line-height: 1.25; letter-spacing: -0.06em; } .main .sec01 p b { display: inline-block; height: 53px; font-weight: 500; line-height: 53px; box-shadow: inset 0 -39px 0 #fff; border-bottom: 5px solid #ffdb35; } .main .sec01 small { display: block; margin: 55px auto 48px; color: #181818; font-weight: 300; font-size: 34px; line-height: 1.4; letter-spacing: -0.08em; } .main .sec01 small b { position: relative; font-weight: 500; } .main .sec01 small b::after { display: inline-block; content: ""; clear: both; position: absolute; left: -42px; top:-9px; width: 138px; height: 54px; background:url('../img/main/sec01_obj.png')no-repeat center;} .main .sec01 small u { font-weight: 500; text-underline-position : under;} .main .sec01 a { display: block; width: 210px; height: 74px; line-height:78px; text-align: center; color: #181818; background: #fff; font-size: 25px; letter-spacing: 0.04em; border-radius: 18px; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .main .sec02 { background: url('../img/main/sec02_bg.png')no-repeat center; background-size : cover;} .main .sec02 .sec02-inner { max-width: 1550px; margin:0 auto; } .main .sec02 .inner-box { padding: 222px 0 170px 0; } .main .sec02 h2 { margin-bottom: 44px; color: #181818; font-size: 110px; line-height: 1.125; letter-spacing: -0.06em; font-weight: bold; } .main .sec02 h2 span { color: #ffdb35; } .main .sec02 ul { display: flex; flex-wrap: wrap; flex-direction: column;} .main .sec02 ul li { position:relative; margin-bottom: 16px; padding-left: 30px; color: #181818; font-weight: 300; font-size: 40px; line-height: 1.15; letter-spacing: -0.04em; } .main .sec02 ul li:after { content:''; display: block; clear: both; position: absolute; top: 8px; left:0; width:24px; height:24px; background: url('../img/main/sec02_list.png')no-repeat center/cover;} .main .sec02 ul li span{ color: #fff; font-weight: 500; line-height: 1.15; box-shadow: inset 0 40px #18634e; } .main .sec02 p { display: block; margin: 55px auto 48px; color: #181818; font-weight: 300; font-size: 34px; line-height: 1.2; letter-spacing: -0.08em; } .main .sec02 p b { position: relative; font-weight: 500; } .main .sec02 p span { display: inline-block; font-weight: 500; line-height: 1; box-shadow: inset 0 -30px 0 #ffdb35; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .main .sec03 { background: #144f3f; } .main .sec03 .sec03-inner { width: fit-content; margin: 0 auto; padding: 152px 0; } .main .sec03 h3 { width: fit-content; margin: 0 auto; } .main .sec03 p { margin: 25px 0 52px; color: #fff; font-size: 40px; line-height: 1.1; font-weight: 300; letter-spacing: -0.06em; text-align: center; } .main .sec03 p b { font-weight: 700; } .main .sec03 .sec03-inner img { text-align: center;} /* --------------------------------------- SECTION - 04 --------------------------------------- */ .main .sec04 { background: url('../img/main/sec04_bg.png')no-repeat center; background-size : cover;} .main .sec04 .sec04-inner { width: fit-content; margin: 0 auto; padding: 130px 0; } .main .sec04 h3 { width: fit-content; margin: 0 auto; } .main .sec04 p { margin: 25px 0 52px; color: #000; font-size: 40px; line-height: 1.1; font-weight: 300; letter-spacing: -0.06em; text-align: center; } .main .sec04 p b { font-weight: 700; } .main .sec04 .sec04-inner img { text-align: center;} /* --------------------------------------- SECTION - 05 --------------------------------------- */ .main .sec05 { background: url('../img/main/sec05_bg.png')no-repeat center/cover; } .main .sec05 .sec05-inner { max-width: 1200px; margin: 0 auto ; padding: 212px 0 184px; } .main .sec05 h2 { color: #fff; font-size: 110px; font-weight: bold; line-height: 1.125; letter-spacing: -0.06em; text-align: center; } .main .sec05 h2 span { display: block; color: #ffee35; line-height: 1.125; letter-spacing: -0.08em;} .main .sec05 p { margin: 84px 0 64px; color: #fff; font-size: 40px; line-height: 1.35; font-weight: 300; letter-spacing: -0.06em; text-align: center; } .main .sec05 p b { font-weight: 500; } .main .sec05 strong { display: block; width: fit-content; margin: 0 auto 20px; color: #fff; font-weight: 700; line-height: 1; font-size: 50px; letter-spacing: -0.04em; box-shadow: inset 0 -46px 0 #ff5a00; text-align: center; } /* --------------------------------------- SECTION - 06 --------------------------------------- */ .main .sec06 { background: url('../img/main/sec06_bg.png')no-repeat center/cover; } .main .sec06 .sec06-inner { width: fit-content; margin: 0 auto ; padding: 172px 20px 222px; } .main .sec06 p { width: 422px; height: 78px; line-height: 84px; margin: 0 auto 50px; background: #181818; color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -0.04em; border-radius: 40px; text-align: center; } .main .sec06 h2 { margin-bottom: 90px; color: #fff; font-size: 110px; line-height: 1.1; letter-spacing: -0.08em; font-weight: bold; text-align: center; } .main .sec06 h2 span { display: block; color: #18634e; line-height: 1.1; letter-spacing: -0.08em;} .main .sec06 img { box-shadow: 10px 16px 20px 0px rgba(65, 54, 5, 0.1); border-radius: 38px; } /* --------------------------------------- SECTION - profit --------------------------------------- */ .main .sec-profit { background: url('../img/main/profit_bg.png')no-repeat center/cover; } .main .sec-profit .profit-inner { max-width: 1550px; margin: 0 auto; padding: 220px 0 130px; text-align: left; } .main .sec-profit h2 { margin-bottom: 50px; color: #ffcc35; font-size: 110px; line-height: 1.1; letter-spacing: -0.08em; font-weight: bold; } .main .sec-profit h2 span { display: block; color: #18634e; line-height: 1.1; letter-spacing: -0.08em;} .main .sec-profit p { margin: 0 auto 50px; color: #000; font-size: 38px; line-height: 1.35; font-weight: 300; letter-spacing: -0.04em; border-radius: 40px; } .main .sec-profit p b { font-weight: 500; } .main .sec-profit p u { color: #d00000; font-weight: 500; text-underline-position : under; } /* --------------------------------------- SECTION - side --------------------------------------- */ .main .sec-side .side-inner { display: flex; flex-wrap: wrap; } .main .sec-side .side-inner .bottom-left { width: 50%; border-radius: 0 70px 0 0; } .main .sec-side .side-inner .bottom-right { position: relative; width: 50%; background: #ffdb35; border-radius: 70px 0 0 0; } .main .sec-side .side-inner .bottom-right a { position: absolute; bottom: 13.5%; left: 9.5%; display: block; width: 210px; height: 74px; line-height: 78px; background: #181818; color: #fff; font-size: 25px; letter-spacing: 0.04em; border-radius: 20px; text-align: center; font-weight: 500; } /* --------------------------------------- SECTION - review --------------------------------------- */ .main .sec-review { padding: 164px 0 110px; background: url('../img/main/review_bg.png')no-repeat center/cover; text-align: center;} .main .sec-review .review-inner { margin:0 auto; max-width: 1200px; } .main .sec-review .review-inner p { width: 312px; height: 78px; line-height: 82px; margin: 0 auto; color: #ffee35; font-size: 32px; font-weight: 700; border: 1px solid #fffca6; border-radius: 50em; align-items: center; justify-content: center; } .main .sec-review .review-inner h4 { margin-top: 38px; color: #fff; font-size: 70px; letter-spacing: -0.04em; font-weight: bold; } .main .sec-review img { margin: 0 auto; } .main .sec-review .title02 { margin-bottom: 54px; } .main .sec-review .review-info { display: flex; max-width: 1200px; margin: 106px auto 0; flex-wrap: wrap; justify-content: space-between; align-items: center;} .main .sec-review .review-info .wrap-btn { text-align: left; } .main .sec-review .review-info p { color: #000; font-size: 80px; font-weight: 300; line-height: initial; letter-spacing: -0.06em; } .main .sec-review .review-info p span { color: #ffdb35; font-weight: 700; } .main .sec-review .review-info strong { color: #000; font-size: 110px; letter-spacing: -0.06em; line-height: initial; } .main .sec-review .info-inner b { display: block; width: fit-content; margin: 0 auto 20px; color: #000; font-weight: 700; line-height: 1; font-size: 60px; letter-spacing: -0.04em; box-shadow: inset 0 -43px 0 #ffeebb; text-align: center; } .main .sec-review .info-inner img { margin: 30px auto 50px; } .main .sec-review .info-inner p { color: #000; font-size: 38px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.35; text-align: center; } .main .sec-review .info-inner p span { color: #000; font-weight: 500; } .main .sec-review .info-inner p u { color: #d00000; font-weight: 500; letter-spacing: -0.04em; text-underline-position : under; } /* --------------------------------------- SECTION - 12 --------------------------------------- */ .main .sec12 { width: 100%; margin:0 auto; } .main .sec12 .sec12-inner01 { margin: 0 auto; padding: 185px 0 80px; background: #ffdb35; text-align: center; } .main .sec12 .sec12-inner01 p { width: 234px; height: 78px; line-height: 82px; margin: 0 auto 52px; background: #000; color: #fff; font-size: 32px; font-weight: 700; border-radius: 50em; } .main .sec12 .sec12-inner01 h4 { display: block; width: fit-content; margin: 0 auto; font-size: 110px; font-weight: 700; line-height: initial; letter-spacing: -0.04em; } .main .sec12 .sec12-inner01 h4 span { position: relative; color: #fff; font-size: 110px; font-weight: 700; letter-spacing: -0.04em; } .main .sec12 .sec12-inner01 h4 span:after { display: block; content: ''; clear: both; position: absolute; left: -20px; bottom: 5px; width: 318px; height: 166px; background:url('../img/main/sec12_obj01.png')no-repeat;} .main .sec12 .sec12-inner01 h6 { display: block; width: fit-content; margin: 0 auto 54px; color: #fff; font-size: 70px; font-weight: 700; line-height: initial; letter-spacing: -0.04em; } .main .sec12 .sec12-inner01 img { margin: 0 auto; } .main .sec12 .sec12-inner02 { margin: 0 auto; padding: 154px 0 90px; background: #fffdf5; text-align: center; } .main .sec12 .sec12-inner02 p { margin: 0 auto 68px; font-size: 50px; font-weight: 300; line-height: 1.3; letter-spacing: -0.04em; } .main .sec12 .sec12-inner02 p u { color: #d00000; font-weight: 500; letter-spacing: -0.04em; text-underline-position : under; } .main .sec12 .sec12-inner02 p span { display: inline-block; font-weight: 500; line-height: 0.8; letter-spacing: -0.04em; box-shadow: inset 0 -36px 0 #ffee35; } .main .sec12 .sec12-inner02 img { margin: 0 auto 70px; } /* --------------------------------------- SECTION - 00 --------------------------------------- */ .main .sec00 { position: relative; height: 490px; background: #fff; color: #000; } .main .sec00 .sec00-inner { padding-top: 145px; } .main .sec00 .wrap-txt { position: relative; display: flex; max-width: 1200px; height: 200px; margin:0 auto; padding-left: 7px; 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; right: 80px; bottom: -167px; } /* --------------------------------------- SECTION - 07 --------------------------------------- */ .main .sec07{ padding: 176px 0 155px; background:url('../img/main/sec07_bg.png')no-repeat center/cover;} .main .sec07 .sec07-inner { max-width: 1300px; margin:0 auto; text-align: right; } .main .sec07 .sec07-inner:after { display: block; content:''; clear: both; } .main .sec07 h4 { color: #fff; font-size: 70px; font-weight: 300; line-height: 1; letter-spacing: -0.04em; } .main .sec07 h5 { display: inline-block; margin: 30px 0 54px; color: #fff; font-size: 90px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.8; box-shadow: inset 0 -61px 0 #f2571b; } .main .sec07 p { position: relative; padding-top: 54px; color: #fff; font-size: 38px; line-height: 1.35; font-weight: 300; } .main .sec07 p u { display: block; margin-top: 40px; color: #fff; font-weight: 500; line-height: 1.35; text-underline-position : under; } .main .sec07 p :after { display: block; content:''; clear: both; position: absolute; top: 0; right: 0; width: 46px; height: 4px; background: #fff; } .main .sec07 a { float: right; display: block; width: 210px; height: 74px; line-height: 78px; text-align: center; margin-top: 66px; color: #f2571b; background: #fff; font-size: 25px; font-weight: 500; letter-spacing: 0.04em; border-radius: 18px; } /* --------------------------------------- SECTION - 19 --------------------------------------- */ .main .sec19 { padding-top: 154px; background: #fffdf5; color: #000; } .main .sec19 .sec19-list { width: fit-content; margin:0 auto; text-align: center; } .main .sec19 .sec19-list small { color: #d4d4d4; font-size: 36px; font-weight: 500; line-height: 1; border-bottom: 2px solid #d4d4d4} .main .sec19 .sec19-list h5 { font-size: 90px; line-height: 1; letter-spacing: -0.04em; font-weight: 700; } .main .sec19 .sec19-list:nth-of-type(1) { margin-bottom: 90px; } .main .sec19 .sec19-list:nth-of-type(2) { position: relative; } .main .sec19 .sec19-list:nth-of-type(1) h5 { margin: 30px auto 50px; color: #ffdb35; } .main .sec19 .sec19-list:nth-of-type(2) h5 { margin: 30px auto 50px; color: #18634e; } .main .sec19 .sec19-list strong { display: inline-block; margin-bottom: 20px; font-size: 70px; line-height: 0.8; letter-spacing: -0.04em; box-shadow: inset 0 -32px 0 #ffdb35; } .main .sec19 .sec19-list p { font-size: 40px; line-height: 1.3; letter-spacing: -0.04em; font-weight: 300; } .main .sec19 .sec19-list p b { font-weight: 500; } .main .sec19 .sec19-list:nth-of-type(2) p b { font-family: 'GmarketSans'; color: #18634e; } .main .sec19 .sec19-list p u { font-weight: 500; text-underline-position : under;} .main .sec19 .sec19-list p span { display: inline-block; line-height: 1; font-weight: 500; box-shadow: inset 0 -32px 0 #ffdb35;} .main .sec19 .sec19-list:nth-of-type(1) img { margin-top: 57px; } .main .sec19 .sec19-list:nth-of-type(2) img { margin-top: 42px; margin-left: -20px; } .main .sec19 a { position: absolute; bottom: 122px; left: calc(50% - 105px); display: block; width: 210px; height: 74px; line-height: 78px; color: #fff; background: #282828; font-size: 25px; letter-spacing: 0.04em; border-radius: 18px; } /* --------------------------------------- SECTION - blend --------------------------------------- */ .main .sec-blend { padding: 164px 0 140px; color: #000; } .main .sec-blend .blend-inner { margin: 0 auto; text-align: center; } .main .sec-blend .sec-title { width: 454px; height: 78px; line-height: 82px; margin: 0 auto 50px; background: #181818; color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -0.04em; border-radius: 50em; text-align: center; } .main .sec-blend .sec-title:before { display: none; } .main .sec-blend h3 { font-size: 110px; font-weight: 300; line-height: 1.1; letter-spacing: -0.04em; } .main .sec-blend h3 span { color: #d00000; font-weight: 700; } .main .sec-blend h4 { font-size: 80px; font-weight: 300; line-height: 1.1; letter-spacing: -0.04em; } .main .sec-blend h4 span { font-weight: 700; } .main .sec-blend img { margin: 108px auto 124px; } .main .sec-blend p { position: relative; font-size: 40px; line-height:1.45; letter-spacing: -0.04em; font-weight: 300; } .main .sec-blend p b { font-weight: 500; line-height:1.35; letter-spacing: -0.04em; } .main .sec-blend p u { font-weight: 500; line-height:1.35; letter-spacing: -0.04em; text-underline-position : under; } .main .sec-blend p span { display: inline-block; font-weight: 500; line-height: 1; box-shadow: inset 0 -34px 0 #ffee35; } .main .sec-blend p:before { display: block; content:''; clear: both; position: absolute; left: calc(50% - 44px); top: -76px; width: 88px; height: 10px; background: #ffee35; } /* --------------------------------------- SECTION - blend02 --------------------------------------- */ .main .blend02 { padding: 124px 0 182px; background:url('../img/main/blend02_bg.png')no-repeat center/cover; } .main .blend02 h4 { color: #181818; font-size: 80px; font-weight: 700; letter-spacing: -0.04em; text-align: center; } .main .blend02 h4 i { position: relative; font-size: 100px; } .main .blend02 h4 i:after { display: block; content: ''; clear: both; position: absolute; top: -22px; left: 50%; width: 12px; height: 12px; background: #181818; border-radius: 100%; transform: translateX(-50%); } .main .blend02 .wrap-cont { margin:90px 0 0; } .main .blend02 .wrap-cont ul { display: flex; width: fit-content; margin: 0 auto; flex-wrap: wrap; justify-content: space-between; } .main .blend02 .wrap-cont ul li { width: 280px; margin: 0 55px; background-color:#fff; border:1px dashed #959595; border-radius: 20px; box-sizing:border-box; box-shadow: 10px 10px 0 #e1e1e1; padding:34px 0 28px; position:relative; } .main .blend02 .wrap-cont ul li:before { content:''; position:absolute; left: -80px; top:50%; width: 56px; height: 40px; background:url('../img/main/blend02_obj01.png')no-repeat center/cover; } .main .blend02 .wrap-cont ul li:first-child:before { display:none; } .main .blend02 .wrap-cont .tit { font-size:22px; font-weight:bold; line-height: initial; margin:0 auto; letter-spacing: 0.03em; color:#000; text-align: center; } .main .blend02 .wrap-cont .tit b { font-size:42px; } .main .blend02 .wrap-cont .desc { font-size:26px; color:#000; font-weight: 300; line-height: 1; letter-spacing: -0.04em; text-align: center; } .main .blend02 .wrap-cont .desc span { display:block; margin-bottom: 2px; } .main .blend02 .wrap-cont .desc span b { font-family: 'Noto Sans'; font-size:45px; color:#e71a1a; vertical-align: sub; } .main .blend02 .wrap-cont .desc > .caption b { color:#e71a1a; font-size: 26px; vertical-align: baseline; } .main .blend02 .wrap-cont .active { background:#333333; border-color:#000; box-shadow: 10px 10px 0 #252525; } .main .blend02 .wrap-cont .active .tit b{ color:#ffdb35; font-size:36px; letter-spacing: -0.04em; } .main .blend02 .wrap-cont .active .desc { color:#fff; } .main .blend02 .wrap-cont .active .desc b { color:#ffdb35; font-size: 45px; } .main .blend02 .wrap-cont .desc > .caption b { font-size: 26px; font-family: "GmarketSans"; vertical-align: baseline; } .main .blend02 .wrap-cont .active:after { content:''; position:absolute; top:-56px; left:50%; transform: translateX(-50%); width: 178px; height: 48px; background:url('../img/main/blend02_obj02.png')no-repeat center/cover; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .main .blend03 { background: #fffae1; } .main .blend03 .inner { padding: 166px 40px 124px; text-align: center; } .main .blend03 h4 { color: #000; font-size: 80px; font-weight: 700; letter-spacing: -0.06em; line-height: initial; } .main .blend03 h4 span { color: #e71a1a; letter-spacing: -0.06em; } .main .blend03 .wrap-cont { margin:100px 0 40px; } .main .blend03 .wrap-cont ul { display: flex; flex-wrap: wrap; justify-content: space-around; } .main .blend03 .wrap-cont ul li { width:500px; margin: 0 40px; } .main .blend03 .wrap-cont .wrap-img { margin: 0 auto; width: 490px; border: 3px solid #000; border-radius: 33px; box-sizing: border-box; box-shadow: 3px 4px 20px 0px rgba(50, 67, 39, 0.75); } .main .blend03 .wrap-cont .wrap-img img { width: 100%; border-radius: 30px; } .main .blend03 .wrap-cont .wrap-txt { margin:25px 0 0; } .main .blend03 .wrap-cont .wrap-txt .desc { color:#000; font-weight: 500; font-size: 32px; letter-spacing: -0.06em; text-align: center; } .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 b { color: #e71a1a; font-weight: 500; } .main .blend03 .subtitle { margin:20px 0 0; font-size:50px; font-weight:500; line-height: 1.25; color:#000; } .main .blend03 .subtitle b { display: inline; line-height: 1; box-shadow: inset 0 -40px 0 rgba(255,234,0,0.4); } .main .blend03 .subtitle b span { font-weight: 500; } .main .blend03 a { display: block; width: 210px; height: 74px; line-height: 78px; margin: 55px auto 0; color: #181818; background: #ffdb35; font-size: 25px; font-weight: 500; letter-spacing: 0.04em; border-radius: 18px; } .main .sec13 { padding: 190px 0 128px; background:url('../img/main/sec13_bg.png')no-repeat center/cover; } .main .sec13 .sec13-inner { width: fit-content; margin:0 auto; text-align: center; } .main .sec13 h3 { color: #fff; position: relative; width: fit-content; margin: 0 auto 15px; background: url('../img/main/sec13_obj01.png')no-repeat bottom 10px center; font-size: 110px; font-weight: 300; line-height: initial; letter-spacing: -0.04em; } .main .sec13 h3 span { color: #ffdb35; font-weight: 700; } .main .sec13 h4 { color: #fff; width: fit-content; margin: 0 auto 110px; font-size: 80px; font-weight: 700; line-height: initial; letter-spacing: -0.04em; } .main .sec13 h4 b { position: relative; } .main .sec13 h4 b:after { display: block; content:''; clear: both; position: absolute; bottom: 0; left: 0; width: 234px; height: 102px; background: url('../img/main/sec13_obj02.png')no-repeat; } .main .sec13 strong { margin: 0 auto 25px; color: #ffdb35; font-size: 50px; font-weight: 700; letter-spacing: -0.04em; } .main .sec13 .pc-view { display: block; } .main .sec14 { padding: 180px 0 154px; background:url('../img/main/sec14_bg.png')no-repeat center/cover; } .main .sec14 .sec14-inner { width: fit-content; margin:0 auto; text-align: center; } .main .sec14 h2 { margin: 0 auto 42px; color: #000; font-size: 50px; font-weight: 700; line-height: initial; letter-spacing: -0.04em; } .main .sec14 h3 { color: #000; position: relative; width: fit-content; margin: 0 auto; font-size: 110px; font-weight: 700; line-height: initial; letter-spacing: -0.04em; } .main .sec14 h3 span { display: inline-block; color: #18634e; line-height: 0.8; box-shadow: inset 0 -76px 0 #fff; } .main .sec14 h4 { color: #fff; width: fit-content; margin: 0 auto; font-size: 80px; font-weight: 700; line-height: initial; letter-spacing: -0.04em; } .main .sec14 img { margin: 80px auto 54px; } .main .sec14 p { color: #000; font-size: 50px; font-weight: 300; line-height: initial; letter-spacing: -0.06em; } .main .sec14 p b { font-weight: 700; } .main .sec14 strong { color: #000; font-size: 90px; letter-spacing: -0.04em; line-height: initial } .main .sec14 strong span { display: inline-block; color: #18634e; line-height: 0.8; box-shadow: inset 0 -67px 0 #fff; } /* --------------------------------------- SECTION - 08 --------------------------------------- */ .main .section.sec08 { } .main .sec08 { background:url('../img/main/img_sec08_bg.jpg') center no-repeat; background-size:cover; } .main .sec08 .inner { padding: 154px 0 108px;} .main .sec08 .wrap-txt { } .main .sec08 .wrap-txt h4 { margin-bottom: 20px; color: #000; font-size: 90px; font-weight: 700; letter-spacing: -0.04em; line-height: initial; } .main .sec08 .wrap-txt strong { color: #000; font-size: 50px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.25; } .main .sec08 a { display: block; width: 210px; height: 74px; line-height: 78px; margin-top: 55px; color: #fff; background: #000; font-size: 25px; font-weight: 500; letter-spacing: 0.04em; border-radius: 18px; text-align: center; } /* --------------------------------------- SECTION - 09 --------------------------------------- */ .main .section.sec09 { } .foot-contacts { width:100%; position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1; } .main .sec09 { background:#ffcc35; } .main .sec09 .inner { padding:0px 40px; } .main .sec09 .wrap-txt { font-family: 'S coredream'; width:45%; float:left; padding:10px 0; color:#1f1f1f; } .main .sec09 .wrap-txt h4 { display:inline-block; box-sizing:border-box; padding:20px 24px; margin-top:8px; border-radius:20px; font-weight:700; background-color:#1f1f1f; color:#ffcc35; font-size:38px; line-height:42px; float:left; } .main .sec09 .wrap-txt h5 { float:left; margin-left:20px; padding:6px 0; margin-top:23px; } .main .sec09 .wrap-txt h5 .tel { font-family: 'S coredream'; font-size:53px; font-weight:900; margin:0 0 2px; line-height:1em; } .main .sec09 .wrap-txt h5 p { font-family:'Noto Sans'; font-weight:300; font-size:18px; } .main .sec09 .wrap-txt h6 { float:left; margin-left:20px; font-family:'Noto Sans'; font-size:16px; } .main .sec09 .wrap-txt h6 .title { font-weight:600; line-height:160%; } .main .sec09 .wrap-txt h6 .contents-time { font-weight:300; line-height:120%; } .main .sec09 .wrap-txt h6 .contents-time img {margin-top:1px; } .main .sec09 .wrap-txt h6 .holiday { font-weight:300; line-height:120%; color:#cf3131; } /* form */ .main .sec09 .wrap-form { width:54%; float:right; margin-top:12px; } .main .sec09 .wrap-form .item-input { width:calc(33.3333% - 7px); float:left; margin-left:7px; margin-bottom:7px; } .main .sec09 .wrap-form .item-input input[type="text"], .main .sec09 .wrap-form .item-input input[type="tel"] { width:100%; box-sizing:border-box; padding:3px 10px; font-size:16px; color:#222; border-color:#b7b7b7; } .main .sec09 .wrap-form .questions { width:calc(66.6666% - 7px); resize: none; margin-bottom:0px; } .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 { } .main .sec09 .wrap-form .item-btn a { display:inline-block; line-height:60px; text-align:center; cursor:pointer; height:60px; width:calc(33.3333% - 7px); margin-left:7px; background-color:#1f1f1f; font-family: 'S coredream'; font-size:20px; color:#fff; font-weight:600; border-radius:16px; } .main .sec09 .wrap-form .item-chk { width:100%; margin-left:7px; margin-bottom:2px; margin-top:2px; clear:both; float:none; /*font-family:'Noto Sans';*/ font-weight:500; font-size:18px; letter-spacing:-1px;} .main .sec09 .wrap-form .item-chk input { width:24px; height:24px; border:1px solid #b7b7b7; margin:3px 0 5px; cursor: pointer; } .main .sec09 .wrap-form .item-chk label { cursor: pointer; font-weight:500; color:#dc0000; /*box-shadow:inset 0 -15px 0 #fff3d1;*/} .main .sec09 .wrap-form .item-chk a { vertical-align: middle; color:#111; cursor: pointer; } /* --------------------------------------- SECTION - 10 --------------------------------------- */ .main .section.sec10 { } .main .sec10 { background:url('../img/main/img_sec10_bg.jpg') center top no-repeat; background-size:cover; } .main .sec10 .inner { padding: 226px 40px 160px; } .main .sec10 .wrap-txt { text-align:center; } .main .sec10 .wrap-txt h5 { font-size: 70px; color:#fff; letter-spacing: -0.06em; line-height: initial; font-weight: bold; } .main .sec10 .wrap-txt h5 span { color:#ffdb35; } .main .sec10 .wrap-txt h4 { font-size: 110px; color:#ffdb35; letter-spacing: -0.06em; line-height: initial; font-weight: bold; } .main .sec10 .atab {margin:0 auto; max-width:800px; padding:44px 0px 70px; padding-left: 2.2%;} .main .sec10 .atab #mo {position:relative; /*left: 10%;*/ top:-1px;} .main .sec10 .atab:after {display:block; content:""; clear:both;} .main .sec10 .atab li {float:left; width:25%; margin-left:-1px; box-sizing:border-box; z-index:1;} .main .sec10 .atab li a { display:block; font-size:20px; color:#333; background:#fff; border:1px solid #000000; line-height:64px; text-align:center; font-family: 'S coredream'; } .main .sec10 .atab li:fitst-child {margin-left:0px;} .main .sec10 .atab li.on a {color:#fff; background:#e14242; border:1px solid #820f0f;} .main .sec10 .atab li.on #mo {color:#fff; background:#e14242; border:1px solid #820f0f;} .main .sec10 .atab li.on {position:relative; z-index:2} .main .sec10 .tab_area { width: fit-content; margin: 0 auto; } .main .sec10 .atab #mo2 {position:relative; /*left: 10%;*/ top:-2px;} .main .sec10 .in_yt { text-align:center; } .main .sec10 .in_yt iframe {width:700px; height:394px; margin-bottom:40px;} /* --------------------------------------- SECTION - 11 --------------------------------------- */ .main .sec11 { background:url('../img/main/img_sec11_bg.jpg') center top no-repeat;} .main .sec11 .inner { padding:160px 0px 60px 0px; } .main .sec11 .wrap-txt { text-align:center; color:#141414; } .main .sec11 .wrap-txt h5 { font-size:24px; color:#fffca6; } .main .sec11 .wrap-txt h5 p { display:inline-block; box-sizing:border-box; padding:8px 32px; border-radius:40px; letter-spacing:1px; font-weight:700; color:#fffca6; line-height:38px; float:none; border:2px solid #fffca6;} .main .sec11 .wrap-txt h4 { color:#141414; margin-top:43px; } .main .sec11 .wrap-txt h4 { color:#fff; } .main .sec11 .wrap-txt .title02 { margin-top:25px; } .main .sec11 .wrap-img { text-align:center; } .main .sec11 .wrap-img .insta { margin-top:71px; } /* ************************************************************************************ SUB ************************************************************************************ */ /* --------------------------------------- COMMON --------------------------------------- */ /* sub whole */ .container.sub {} .sub { } .sub .section { } .sub .inner { } .sub h2 { margin:90px auto 50px; text-align:center; font-size:40px; font-weight:700; line-height:1em; color:#000; } .sub .subvisual { height:340px; margin:0 0 40px; background:url('../img/about/img_visual.jpg') center no-repeat; background-size:cover; } .sub .area-snb { text-align:center; font-size:0; } .sub .snb-menus { display:inline-block; } .sub .snb-menus li { width:134px; height:40px; text-align:center; float:left; background-color:#fff; box-sizing:border-box; border:1px solid #2f2f2f; margin-left:-1px; } .sub .snb-menus li a { width:100%; height:40px; display:block; font-size:13px; line-height:38px; color:#2f2f2f; } .sub .snb-menus li.current { background-color:#2f2f2f; } .sub .snb-menus li.current a { color:#fff; } /* about */ .about .inner { } .about .subvisual { background-position: top right; } .about .snb-menus { } .about .snb-menus li { } .about .snb-menus li a { } .about .snb-menus li.current { } .about .snb-menus li.current a { } .about .wrap-txt { } .about .wrap-txt h4 { font-size:40px; font-weight:500; line-height:1em; } .about .wrap-txt .subtitle { font-size:28px; font-weight:500; line-height:1em; } .about .wrap-txt .desc { font-size:20px; 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; background-size : cover; } .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; background-size:cover;} .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; background-size : cover;} .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; background-size : cover;} .news h2 { font-size:0; margin:0 auto 120px; } /* ************************************************************************************ ABOUT - BRAND ************************************************************************************ */ .brand .inner { padding:180px 0; } /* --------------------------------------- SECTION - 04 --------------------------------------- */ @font-face { font-family: 'uhbee'; src: url('../fonts/uhbeejaeyoun/UHBEE-JAEYOUN.woff') format('woff'); } .brand .sec04 { background:url('../img/about/bg_brand04.jpg') center no-repeat; background-size:cover; } .brand .sec04 .inner { padding:180px 0 260px; } .brand .sec04 .wrap-txt { color:#252323; text-align:center; } .brand .sec04 .wrap-txt h4 { line-height:1.5em; } .brand .sec04 .wrap-txt h4 span { font-family:'uhbee'; font-weight:600; font-size:52px; } .brand .sec04 .wrap-txt h4 b { box-shadow: inset 0 -26px 0 #e2eef5; padding:0 5px; } .brand .sec04 .wrap-txt .subtitle { line-height:1.5em; font-weight:400; margin-bottom:50px; } .brand .sec04 .wrap-txt .subtitle b { font-weight:500; box-shadow: inset 0 -20px 0 #e2eef5; } .brand .sec04 .wrap-txt .desc { margin:100px 0 40px; line-height:1.8em; } .brand .sec04 .wrap-txt .desc b { font-weight:500; text-decoration:underline; } /* --------------------------------------- SECTION - 05 --------------------------------------- */ .brand .sec05 { background:url('../img/about/bg_brand05.jpg') center no-repeat; background-size:cover; } .brand .sec05 .wrap-txt { color:#2f2f2f; } .brand .sec05 .wrap-txt h4 { line-height:1.5em; } .brand .sec05 .wrap-txt .subtitle { line-height:1.5em; font-weight:400; } .brand .sec05 .wrap-txt .desc { margin:100px 0 40px; } .brand .sec05 .wrap-txt .desc b { font-weight:500; text-decoration:underline; } /* --------------------------------------- SECTION - 06 --------------------------------------- */ .brand .sec06 { background-color:#ffcc35; } .brand .sec06 .wrap-txt { color:#252323; text-align:center; } .brand .sec06 .wrap-txt h4 { line-height:1.5em; } .brand .sec06 .wrap-txt h4 b { box-shadow: inset 0 -26px 0 white; padding:0 5px; } .brand .sec06 .wrap-txt img { margin:90px 0 20px; } .brand .sec06 .wrap-txt .subtitle { line-height:1.5em; font-weight:400; margin-bottom:20px; } .brand .sec06 .wrap-txt .subtitle b { font-weight:500; box-shadow: inset 0 -20px 0 white; } .brand .sec06 .wrap-txt .desc { margin:80px 0 30px; } .brand .sec06 .wrap-txt .desc b { font-weight:500; text-decoration:underline; } .brand .sec06 .wrap-img { text-align:center; margin-top:100px; } .brand .sec06 .wrap-img .img_m { display:none; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ /* .brand .sec01 { background:url('../img/about/bg_brand01.jpg') center no-repeat; background-size:cover; } .brand .sec01 .wrap-txt { color:white; } .brand .sec01 .wrap-txt h4 { line-height:1.5em; } .brand .sec01 .wrap-txt .subtitle { line-height:1.5em; font-weight:400; } .brand .sec01 .wrap-txt .desc { margin:100px 0 40px; } .brand .sec01 .wrap-txt .desc b { font-weight:500; text-decoration:underline; } */ /* .brand .sec01 { background:url('../img/about/bg_brand01.jpg') center no-repeat; background-size:cover; } .brand .sec01 .wrap-txt { color:#fff; } .brand .sec01 .wrap-txt .subtitle { line-height:1.5em; font-weight:400; } .brand .sec01 .wrap-txt .subtitle b { font-weight:500; } .brand .sec01 .wrap-txt .desc { margin:100px 0 40px; } */ /* --------------------------------------- SECTION - 02 --------------------------------------- */ /* .brand .sec02 { background:url('../img/about/bg_brand02.jpg') center no-repeat; background-size:cover; } .brand .sec02 .inner { position:relative; } .brand .sec02 .wrap-txt { color:#2f2f2f; text-align:right; } .brand .sec02 .wrap-txt h4 b { box-shadow: inset 0 -20px 0 #f2ef7f; padding:0 5px; } .brand .sec02 .wrap-txt .subtitle { line-height:1.5em; } .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:35px; height:24px; background:url('../img/about/img_brand_star.png') center no-repeat; background-size:auto 24px; right:5px; top:-12px; } .brand .sec02 .wrap-txt .subtitle b:after { width:287px; height:14px; background:url('../img/about/img_brand_line.png') center no-repeat; background-size:auto 14px; left:0px; bottom:-8px; } .brand .sec02 .wrap-txt .desc { margin:80px 0 40px; } .brand .sec02 .wrap-img { position:absolute; left:0; top:150px; } */ /* --------------------------------------- SECTION - 03 --------------------------------------- */ /* .brand .sec03 { background:url('../img/about/bg_brand03.jpg') center no-repeat; background-size:cover; } .brand .sec03 .inner { padding-bottom:130px; } .brand .sec03 .wrap-txt { color:#fff; text-align:center; } .brand .sec03 .wrap-txt h4 { position:relative; margin:20px auto 80px; display:inline-block; padding:0 260px; } .brand .sec03 .wrap-txt h4:before, .brand .sec03 .wrap-txt h4:after { content:''; display:block; position:absolute; width:215px; height:1px; background:#fff; top:50%; } .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:50px 0 0; } */ /* ************************************************************************************ ABOUT - BI ************************************************************************************ */ .bi .inner { padding:0 130px 170px; box-sizing:border-box; } .bi h2 { margin-bottom:90px; } .bi h4 { margin:0 0 50px; font-size:28px; font-weight:900; color:#000; letter-spacing:0.085em; border-bottom:2px solid #000; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .bi .sec01 { } .bi .sec01 .wrap-img { text-align:center; } .bi .sec01 .wrap-img img { display:inline-block; margin:0 30px; } .bi .sec01 .wrap-txt { margin:40px 0 0; text-align:center; } .bi .sec01 .wrap-txt .desc { font-size:20px; letter-spacing:-0.04em; } /* --------------------------------------- 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:150px; 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:150px; } .bi .sec02 .wrap-object dd { font-size:13px; letter-spacing:-0.02em; color:#8f8b8b; line-height:1em; padding:12px;} .bi .sec02 .wrap-object dd:first-of-type { font-size:18px; color:#252525; font-weight:500; padding-bottom:0; } .bi .sec02 .wrap-object .yellow { margin-right:15px; } .bi .sec02 .wrap-object .yellow dt { background-color:#ffcd34; } .bi .sec02 .wrap-object .gray { margin-right:15px; } .bi .sec02 .wrap-object .gray dt { background-color:#65666b; } .bi .sec02 .wrap-object .bluegreen dt { background-color:#0da27a; } .bi .sec02 .wrap-txt { display:inline-block; width:400px; text-align:left; margin-left:40px; } .bi .sec02 .wrap-txt .subtitle { font-size:28px; font-weight:900; color:#65666b; margin:0 0 30px; } .bi .sec02 .wrap-txt .subtitle b { color:#ffcd34; } .bi .sec02 .wrap-txt .subtitle span { color:#0da27a; } .bi .sec02 .wrap-txt .desc { letter-spacing:-0.04em; } /* ************************************************************************************ ABOUT - VISIT ************************************************************************************ */ .visit h2 { font-size:0; margin:0 0 70px; } .visit .inner { padding-bottom:160px; } /* tab */ .visit .area-visit { } .visit .area-visit.inner { padding-bottom:0; } .visit .area-visit .visit-tabs { text-align:right; font-size:0; } .visit .area-visit .visit-tabs li { display:inline-block; width:150px; text-align:center; border:1px solid #828282; border-radius: 20px; margin-left:18px; margin-bottom:10px; } .visit .area-visit .visit-tabs li a { display:block; line-height:40px; font-size:20px; 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 { width:100%; height:500px; } .visit .wrap-txt { margin:20px 0 0; } .visit .wrap-txt ul { } .visit .wrap-txt ul li { padding:20px 0; } .visit .wrap-txt .address { width:55%; float:left; } .visit .wrap-txt .tel { width:42%; float:right; } .visit .wrap-txt .subway { width:100%; clear:both; border-top:1px solid #ebebeb; } .visit .wrap-txt .tit { font-size:20px; font-weight:700; color:#2f2f2f; line-height:1em; margin:0 0 10px;} .visit .wrap-txt .desc { font-size:20px; font-weight:300; color:#2f2f2f; line-height:1.5em; } .visit .wrap-txt .desc span { display:inline-block; padding:0 10px; margin-right:5px; line-height:16px; font-size:11px; letter-spacing:0; vertical-align:middle; margin-top:-2px; } .visit .wrap-txt .desc .ico { background-color:#448ccb; color:#fff; border-radius:2em; } .visit .wrap-txt .desc .lot { padding:0 5px; font-size:13px; 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:0 70px 160px; box-sizing:border-box; letter-spacing:-0.04em; } .menu01 .subvisual { margin:0; } .menu01 h2 { margin:0; } .menu01 h4 { font-size:40px; color:#fff; line-height:1em; font-weight:500; } .menu01 .subtitle { font-size:28px; line-height:1.5em; letter-spacing: -0.04em; color:#fff; font-weight:500; } .menu01 .desc { font-size:20px; 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:160px 0 130px; text-align:center; } .menu01 .sec01 h4 { padding:10px 30px; display:inline-block; background-color:rgba(255,255,255,0.3); border-radius: 20px; margin:0 0 70px; } .menu01 .sec01 .wrap-txt { } .menu01 .sec01 .wrap-txt .desc { margin:70px 0 40px; } .menu01 .sec01 .wrap-txt .desc u { font-weight:500; } .menu01 .sec01 .wrap-txt .subtitle { } .menu01 .sec01 .wrap-txt .subtitle b { color:#ffcd34; font-size:32px; font-weight:500; } .menu01 .sec01 .wrap-txt .subtitle.quotation { color:#fff; font-weight:300; font-size:20px; line-height:2em; } .menu01 .sec01 .wrap-txt .subtitle .quot { } .menu01 .sec01 .wrap-txt .subtitle .quot { display:inline-block; width:14px; height:14px; background:url('../img/franchisee/ico_quot_yellow.png') left no-repeat; background-size:14px auto; vertical-align: 10px; padding-right:5px; } .menu01 .sec01 .wrap-txt .subtitle .quot:nth-of-type(2n) { transform: rotate(180deg); vertical-align: 10px; margin-right:5px; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .menu01 .sec02 { background:url('../img/menu/bg_menu0102.jpg') center no-repeat; background-size:cover; } .menu01 .sec02 .inner { padding:190px 0; text-align:center; } .menu01 .sec02 .wrap-txt { text-align:right; } .menu01 .sec02 .wrap-txt h4 { } .menu01 .sec02 .wrap-txt h4 b { font-weight:700; color:#ffcd34; } .menu01 .sec02 .wrap-txt .desc { margin:60px 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:10px 0; display:inline-block; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .menu01 .sec03 { background:url('../img/menu/bg_menu0103.jpg') center no-repeat; background-size:cover; } .menu01 .sec03 .inner { padding:200px 0; text-align:center; } .menu01 .sec03 .wrap-txt { } .menu01 .sec03 .wrap-txt h4 { color:#1e1e1e; } .menu01 .sec03 .wrap-txt .desc { color:#1e1e1e; margin:60px 0 20px; } .menu01 .sec03 .wrap-txt .subtitle { color:#1e1e1e; } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .menu01 .sec04 { background:url('../img/menu/bg_menu0104.jpg') center no-repeat; background-size:cover; } .menu01 .sec04 .inner { padding:230px 0; text-align:left; } .menu01 .sec04 .wrap-txt { } .menu01 .sec04 .wrap-txt h4 { color:#1e1e1e; } .menu01 .sec04 .wrap-txt .desc { color:#1e1e1e; margin:60px 0 20px; } .menu01 .sec04 .wrap-txt .subtitle { color:#1e1e1e; } /* ************************************************************************************ MENU - menu02 ************************************************************************************ */ .menu02 .inner { padding:0 70px 160px; box-sizing:border-box; letter-spacing:-0.04em; } .menu02 .subvisual { margin:0; } .menu02 h2 { margin:0; } .menu02 h4 { font-size:54px; line-height:1em; font-weight:500; color:#fff; } .menu02 .subtitle { font-size:34px; line-height:1.5em; letter-spacing: -0.04em; font-weight:500; color:#232323; } .menu02 .desc { font-size:24px; 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:160px 0 130px; text-align:center; } .menu02 .sec01 .wrap-txt { } .menu02 .sec01 .wrap-txt h4 { display:inline-block; box-shadow: inset 0 -30px 0 #e7541a; line-height:1.2em; padding:0 5px;} .menu02 .sec01 .wrap-txt .subtitle { margin:10px 0 10px; } .menu02 .sec01 .wrap-txt .desc { margin-top:70px; } .menu02 .sec01 .wrap-img { margin:120px 0; } .menu02 .sec01 .wrap-img .line { width:1px; height:360px; background-color:#000000; display:block; margin:30px auto 90px; } /* ************************************************************************************ MENU - NEW ************************************************************************************ */ .new .inner { padding:0 70px 160px; box-sizing:border-box; letter-spacing:-0.04em; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .new .sec01 { } .new .sec01 .wrap-txt { margin:0 0 50px; padding:15px 0; background-color:#f2f2f2; border-top:2px solid #666666; border-bottom:1px solid #d7d7d7; text-align:center; } .new .sec01 .wrap-txt h4 { font-size:28px; font-weight:500; } .new .sec01 .wrap-img { text-align:center; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .new .sec02 { } .new .sec02 .wrap-list { } .new .sec02 .wrap-list ul { margin-left:-30px; } .new .sec02 .wrap-list ul li { width:calc(20% - 30px); float:left; margin-left:30px; margin-bottom:50px; cursor:pointer; } .new .sec02 .wrap-list ul li:nth-child(5n+1) { content:''; clear:both; } .new .sec02 .wrap-list .wrap-img { border:1px solid #eeeeee; position:relative; } .new .sec02 .wrap-list .wrap-txt { margin:20px 0 0; text-align:center; } .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 .inner { padding:0 70px 160px; box-sizing:border-box; letter-spacing:-0.04em; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .drink .sec01 { } .drink .sec01 .wrap-list { } .drink .sec01 .wrap-list ul { margin-left:-30px; } .drink .sec01 .wrap-list ul li { width:calc(20% - 30px); float:left; margin-left:30px; margin-bottom:130px; } .drink .sec01 .wrap-list ul li:nth-child(5n+1) { content:''; clear:both; } .drink .sec01 .wrap-list .wrap-img { position:relative; text-align:center; } .drink .sec01 .wrap-list .wrap-img img { height:160px; } .drink .sec01 .wrap-list .wrap-ico { position:absolute; left:0; top:0; } .drink .sec01 .wrap-list .wrap-ico span { display:block; width:42px; height:42px; line-height:42px; border-radius:50%; text-align:center; font-size:10px; color:#fff; margin-bottom:10px; letter-spacing:0.02em; 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:20px 0 0; text-align:center; } .drink .sec01 .wrap-list .wrap-txt p { white-space: normal; word-break:break-all; } /* ************************************************************************************ FRANCHISEE - blending ************************************************************************************ */ .blending .inner { padding:160px 0; letter-spacing:-0.04em; text-align:center; } .blending h4 { font-size:40px; font-weight:500; color:#000; } .blending .wrap-txt { } .blending .wrap-txt .desc { font-size:20px; 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.png') center 155% no-repeat; } .blending .sec01 .wrap-txt { color:#fff; } .blending .sec01 .wrap-txt h4 { margin:0 0 100px; color:#fff; } .blending .sec01 .wrap-txt .desc { } .blending .sec01 .wrap-txt .quotation { margin:50px 0; color:#ffcd34; font-size:0; } .blending .sec01 .wrap-txt .quotation span { display:inline-block; position:relative; padding:0 30px; line-height:1em; font-weight:500; font-size:28px; } .blending .sec01 .wrap-txt .quotation span b { font-size:34px; } .blending .sec01 .wrap-txt .quotation span:before, .blending .sec01 .wrap-txt .quotation span:after { content:''; display:block; width:14px; height:11px; position:absolute; background:url('../img/franchisee/ico_quot_yellow.png') center no-repeat; background-size:auto 10px; } .blending .sec01 .wrap-txt .quotation span:before { left:8px; top:0px; } .blending .sec01 .wrap-txt .quotation span:after { right:8px; top:0px; transform: rotate(180deg); } .blending .sec01 .wrap-txt .quotation span:first-of-type { margin-left:-350px; margin-bottom:20px; } .blending .sec01 .wrap-txt .quotation span:last-of-type { margin-left:320px;} .blending .sec01 .wrap-txt .line { width:1px; height:250px; background-color:#fff; display:block; margin:100px auto 210px; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .blending .sec02 { background:#ffcd34; } .blending .sec02 h4 { } .blending .sec02 .wrap-cont { margin:100px 0 0; } .blending .sec02 .wrap-cont ul { margin-left:-100px; } .blending .sec02 .wrap-cont ul li { width:calc(33.33% - 100px); float:left; margin-left:100px; background-color:#fff; border:1px dashed #959595; border-radius: 20px; box-sizing:border-box; box-shadow: 10px 10px 0 #e1e1e1; padding:40px 0 35px; position:relative; } .blending .sec02 .wrap-cont ul li:before { content:'Vs'; font-size:40px; font-weight:bold; color:#000; position:absolute; left:-20%; top:50%; transform: translateY(-50%); } .blending .sec02 .wrap-cont ul li:first-child:before { display:none; } .blending .sec02 .wrap-cont .tit { font-size:22px; font-weight:bold; line-height:1em; margin:0 0 25px; letter-spacing: 0.03em; color:#000; } .blending .sec02 .wrap-cont .tit b { font-size:40px; } .blending .sec02 .wrap-cont .desc { font-size:20px; color:#000; } .blending .sec02 .wrap-cont .desc span { display:block; } .blending .sec02 .wrap-cont .desc span b { font-size:40px; color:#aa0000; } .blending .sec02 .wrap-cont .active { background:#333333; border-color:#000; box-shadow: 10px 10px 0 #252525; } .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:-80px; left:50%; transform: translateX(-50%); color:#d71313; font-size:50px; -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:100px 0 40px; } .blending .sec03 .wrap-cont ul { margin-left:-80px; } .blending .sec03 .wrap-cont ul li { width:calc(50% - 80px); margin-left:80px; float:left; } .blending .sec03 .wrap-cont .wrap-img { } .blending .sec03 .wrap-cont .wrap-txt { margin:25px 0 0; } .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; } .blending .sec03 .subtitle { margin:20px 0 0; font-size:28px; font-weight:500; color:#000; } .blending .sec03 .subtitle b { box-shadow: inset 0 -20px 0 rgba(255,234,0,0.4); } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .blending .sec04 { } .blending .sec04 .wrap-txt { } .blending .sec04 .wrap-txt h4 { margin:40px 0; } .blending .sec04 .wrap-txt .desc { color:#000; } /* ************************************************************************************ FRANCHISEE - different ************************************************************************************ */ .different .inner { padding:130px 0; letter-spacing:-0.04em; text-align:center; } .different h4 { font-size:40px; font-weight:500; color:#000; } .different .wrap-txt { } .different .wrap-txt .desc { font-size:20px; font-weight:300; line-height:1.8em; color:#242424; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .different .sec01 { background:url('../img/franchisee/bg_differentiation01.jpg') 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:80px 0 40px; } .different .sec01 .subtitle { font-size:28px; color:#242424; } .different .sec01 .subtitle b { box-shadow: inset 0 -24px 0 rgba(255,234,0,0.4); } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .different .sec02 { background:url('../img/franchisee/bg_differentiation02.jpg') center bottom no-repeat; background-size:cover; } .different .sec02 h4 { text-align:left; margin-bottom:300px; font-size:0; } .different .sec02 h4 span:nth-child(2) { line-height:1.5em; display:inline-block; font-size:40px; color:#fff; } .different .sec02 .quot { display:inline-block; width:40px; height:40px; background:url('../img/main/ico_quot.png') left no-repeat; background-size:40px auto; vertical-align: top; padding-right:10px; } .different .sec02 .quot:last-of-type { transform: rotate(180deg); vertical-align: 10px; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .different .sec03 { background:#edecec; } .different .sec03 h4 { } .different .sec03 .subtitle { margin:80px 0 40px; font-size:28px; 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:-20px; } .different .sec03 .wrap-cont ul li { width:calc(50% - 20px); height:110px; margin-left:20px; margin-bottom:30px; box-sizing:border-box; float:left; display:flex; justify-content: center; align-items: center; background-color:#fff; box-shadow: 10px 10px 0 #d7d6d6; border-radius: 20px; border:1px dashed #959595; } .different .sec03 .wrap-cont ul li:nth-child(2n+1) { clear: both; } .different .sec03 .wrap-cont ul li:nth-child(2n+1):after { content:''; width:50px; height:50px; background:url('../img/franchisee/ico_arrow_white.png') center no-repeat, #2d2d2d; background-size:auto 20px; border-radius: 50%; position:absolute; left:50%; transform: translateX(-50%); } .different .sec03 .wrap-cont .desc { font-size:20px; font-weight:300; color:#000; padding:0 30px; line-height:1.6em;} .different .sec03 .wrap-cont ul li:nth-child(2) b { background: url('../img/franchisee/img_differenrt_line01.png') center 40px no-repeat, url('../img/franchisee/img_differenrt_star01.png') 0px 20px no-repeat; display:block; padding: 10px 40px; } .different .sec03 .wrap-cont ul li:nth-child(4) b { background: url('../img/franchisee/img_differenrt_line02.png') right center no-repeat, url('../img/franchisee/img_differenrt_star02.png') right 5px no-repeat, url('../img/franchisee/img_differenrt_line03.png') 30px 80px no-repeat; display:inline-block; padding: 20px 0px; } /* ************************************************************************************ FRANCHISEE - competitive ************************************************************************************ */ .competitive .inner { padding:100px 0; letter-spacing:-0.04em; text-align:center; } .competitive h4 { font-size:40px; font-weight:500; color:#2f2f2f; } .competitive .wrap-txt { } .competitive .wrap-txt .desc { font-size:20px; font-weight:300; line-height:1.8em; color:#2f2f2f; } /* --------------------------------------- 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:40px; color:#ffcd34; } .competitive .sec01 .quot { display:inline-block; width:24px; height:24px; background:url('../img/franchisee/ico_quot_yellow.png') left no-repeat; background-size:24px auto; vertical-align:15px; padding-right:10px; opacity: 0.3; } .competitive .sec01 .quot:last-of-type { transform: rotate(180deg); } .competitive .sec01 .wrap-txt { margin: 40px 0 0; color:#fff; font-weight:300; } .competitive .sec01 .wrap-txt .desc { font-size:24px; color:#fff; } .competitive .sec01 .wrap-txt .subtitle { border-bottom:1px solid #fff; display:inline-block; font-size:30px; } .competitive .sec01 .wrap-txt .subtitle b { color:#ffcd34; } .competitive .sec01:after { content:''; display:block; width:30px; height:30px; position:absolute; left:50%; bottom:-15px; transform: translateX(-50%); background:url('../img/franchisee/ico_plus.png') center no-repeat, #000; background-size:20px auto; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .competitive .sec02 { background:#e8e1cf; } .competitive .sec02 .wrap-cont { margin:0 40px; background:url('../img/franchisee/pattern_check.jpg') repeat, #fff; border:10px solid #ffcd34; border-radius: 50px; padding:50px 0; } .competitive .sec02 .wrap-cont h4 { margin:20px 0 50px; line-height:1em; } .competitive .sec02 .wrap-cont .desc { line-height:1em; } .competitive .sec02 .wrap-cont .subtitle { margin:20px 0 50px; font-size:28px; font-weight:500; box-shadow: inset 0 -24px 0 rgba(255,216,12,0.4); display:inline-block; padding:0 5px; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .competitive .sec03 { background:url('../img/franchisee/bg_competitive02.jpg') center no-repeat; background-size:cover; } .competitive .sec03 h4 { color:#fff; margin:20px 0 80px; } .competitive .sec03 .wrap-txt .desc { color:#fff; } .competitive .sec03 .wrap-txt .subtitle { font-size:28px; color:#fff; font-weight:500; padding:15px 15px 10px; 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; } .competitive .sec03 .wrap-img { margin:60px 0; } .competitive .sec03 .wrap-img ul { margin-left:-40px; } .competitive .sec03 .wrap-img li { width:calc(33.33% - 40px); margin-left:40px; float:left; } /* --------------------------------------- SECTION - 04 --------------------------------------- */ .competitive .sec04 { } .competitive .sec04 .inner { } .competitive .sec04 h4 { color:#000; padding:20px 0 50px; background:url('../img/franchisee/img_competitive_beansillust.png') 25% 0 no-repeat; background-size:120px auto; } .competitive .sec04 .wrap-txt { width:40%; float:left; text-align:left; padding-top:50px; } .competitive .sec04 .wrap-txt .subtitle { margin:30px 0 0; font-size:28px; font-weight:500; line-height:1.4em; } .competitive .sec04 .wrap-img { float:right; margin-right:-50px; } /* --------------------------------------- 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:contain; } .competitive .sec05 h4 { color:#fff; margin:20px 0 80px; } .competitive .sec05 .wrap-txt { } .competitive .sec05 .wrap-txt .desc { color:#fff; } .competitive .sec05 .wrap-txt .subtitle { font-size:28px; line-height:1.8em; color:#fff; font-weight:500; padding:0 20px 0px; display:inline-block; background:url('../img/franchisee/img_differenrt_line01.png') 26% bottom no-repeat, url('../img/franchisee/img_competitive_star01.png') 10% 55px no-repeat; } .competitive .sec05 .wrap-txt .subtitle b { font-weight:500; box-shadow: inset 0 -24px 0 rgba(255,255,0,0.3); } /* --------------------------------------- SECTION - 06 --------------------------------------- */ .competitive .sec06 { background:#f0e9d5; } .competitive .sec06 h4 { color:#1e1e1e; margin:20px 0 30px; } .competitive .sec06 .wrap-img { } .competitive .sec06 .wrap-img ul { margin:0 100px 0 70px; } .competitive .sec06 .wrap-img ul li { width:calc(33.33% - 30px); float:left; margin-left:30px; } .competitive .sec06 .wrap-img ul li:nth-child(2) { padding-top:60px; } .competitive .sec06 .wrap-txt .desc { margin:50px 0 30px; } .competitive .sec06 .wrap-txt .subtitle { font-size:28px; font-weight:300; } .competitive .sec06 .wrap-txt .subtitle b { font-weight:500; box-shadow: inset 0 -24px 0 rgba(255,255,0,0.4); } /* --------------------------------------- SECTION - 07 --------------------------------------- */ .competitive .sec07 { } .competitive .sec07 h4 { color:#1e1e1e; margin:40px 0 60px; } .competitive .sec07 .wrap-cont { } .competitive .sec07 .wrap-cont ul { margin:0 80px 0 60px; } .competitive .sec07 .wrap-cont ul li { width:calc(25% - 20px); height:460px; margin-left:20px; float:left; background-color:#ffcd34; border-radius:300px; box-sizing:border-box; padding:20px; box-shadow: 5px 5px 5px rgba(0,0,0,0.1); } .competitive .sec07 .wrap-cont ul li .tit { margin:30px 0; font-size:26px; font-weight:500; } .competitive .sec07 .wrap-cont ul li .desc { font-size:20px; font-weight:300; line-height:1.5em; } .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.jpg') center bottom no-repeat; background-size:cover; } .competitive .sec08 .inner { text-align:right; padding:180px 50px 220px; } .competitive .sec08 h4 { color:#fff; margin:40px 0 60px; } .competitive .sec08 .desc { color:#fff; margin-bottom:20px; } /* --------------------------------------- SECTION - 09 --------------------------------------- */ .competitive .sec09 { background:url('../img/franchisee/bg_competitive05.jpg') center no-repeat; background-size:cover; } .competitive .sec09 h4 { color:#fff; margin:50px 0 90px; } .competitive .sec09 h4 b { color:#ffcd34; } .competitive .sec09 .wrap-cont { margin:0 300px; } .competitive .sec09 .wrap-cont ul { margin-left:-50px; } .competitive .sec09 .wrap-cont ul li { width:calc(50% - 50px); margin-left:50px; float:left; margin-bottom:40px; background-color:#262626; color:#ffcd34; border-radius: 30px; padding:40px 0; } .competitive .sec09 .wrap-cont li .tit { text-transform: uppercase; letter-spacing:0.2em; font-size:20px; font-weight:700; margin:0 0 30px; } .competitive .sec09 .wrap-cont .yellow { background:#ffcd34; } .competitive .sec09 .wrap-cont .yellow .tit { color:#242424 } /* ************************************************************************************ FRANCHISEE - procedure ************************************************************************************ */ .procedure .inner { padding:100px 0; 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 h4 { color:#fff; text-transform: uppercase; font-size:40px; font-weight:900; } .procedure .sec01 h4 b { color:#ffcd34; } .procedure .sec01 .wrap-txt { color:#fff; } .procedure .sec01 .wrap-txt .desc { font-size:24px; font-weight:300; letter-spacing: -0.04em; margin:60px 0 0; } .procedure .sec01 .wrap-txt .desc b { font-weight:300; color:#ffcd34; } /* ************************************************************************************ FRANCHISEE - cost ************************************************************************************ */ .cost .inner { padding:0 0 160px 0; letter-spacing:-0.04em; text-align:center; } .cost h4 { font-size:40px; font-weight:500; color:#2f2f2f; } .cost .wrap-txt .desc { font-size:20px; font-weight:300; line-height:1.8em; color:#2f2f2f; } /* --------------------------------------- SECTION - 01 --------------------------------------- */ .cost .sec01 { background:url('../img/main/img_sec05_bg.png') center bottom no-repeat, #508fc2; padding:10px 0 500px; } .cost .sec01 h4 { color:#fff; text-transform: uppercase; font-size:40px; font-weight:500; padding-top:10px; position:relative; display:inline-block;} .cost .sec01 h4:after { content:'. . . .'; position:absolute; top:-30px; right:5px; letter-spacing:0.215em; } .cost .sec01 h4 b { color:#ffdbdb; font-weight:500; } .cost .sec01 .subtitle { margin:60px 0 40px; font-size:28px; font-weight:500; color:#fff; } .cost .sec01 .desc { font-size:20px; font-weight:300; line-height:1.8em; color:#fff; } .cost .sec01 .desc b { font-weight:500; font-size:22px; } .cost .sec01 .line { width:1px; height:240px; background-color:#fff; display:block; margin:60px auto 0px; } /* --------------------------------------- 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:50px 0; font-size:28px; font-weight:500; color:#383838; line-height:1em; } .cost .sec02 .subtitle b { font-size:40px; } .cost .sec02 .wrap-cont { margin:0 20px; } .cost .sec02 .wrap-cont ul { margin-left:-20px; } .cost .sec02 .wrap-cont ul li { width:calc(50% - 20px); margin-left:20px; float:left; border:3px solid #383838; border-radius: 20px; box-sizing:border-box; overflow: hidden; margin-bottom:10px; } .cost .sec02 .wrap-cont li .tit { width:20%; float:left; background-color:#383838; font-size:24px; color:#fff; padding:20px 0; line-height:1em; } .cost .sec02 .wrap-cont li .desc { font-size:24px; color:#383838; padding:20px 0; font-weight:300; line-height:1em; } .cost .sec02 .wrap-cont li:nth-child(4n+0) .tit { color:#ffcd34; } .cost .sec02 .wrap-cont li:nth-child(4n+1) .tit { color:#ffcd34; } /* --------------------------------------- SECTION - 03 --------------------------------------- */ .cost .sec03 h4 { margin-bottom:80px; } /* ************************************************************************************ FRANCHISEE - interior ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .interior .sec01 { } .interior .sec01 h4 { font-size:40px; font-weight:900; color:#65666b; text-transform:uppercase; } .interior .sec01 h4 b { font-weight:900; color:#ffcd34; } .interior .sec01 .wrap-txt { margin:0 80px; } .interior .sec01 .desc { margin:20px 0 50px; font-size:20px; letter-spacing: -0.04em; line-height:1.8em; color:#5b5b5b; font-weight:300; } .interior .sec01 .desc b { font-weight:500; } /* --------------------------------------- SECTION - 02 --------------------------------------- */ .interior .sec02 { } .interior .sec02 .inner { padding-bottom:160px; } .interior .sec02 .wrap-slider { margin:0 80px; } .interior .sec02 .wrap-slider .interior-slider-nav { position:relative; margin:40px 0 0; } .interior .sec02 .slick-slide { margin: 0 5px; } .interior .sec02 .slick-list { margin: 0 -5px; } .interior .sec02 .slick-arrow { width:40px; height:40px; box-sizing:border-box; background:url('../img/franchisee/ico_arrow_slide.png') center no-repeat, #ededed; background-size:10px auto; text-indent: -9999px; font-size:0; position:absolute; top:50%; } .interior .sec02 .slick-prev { left:-70px; transform: translateY(-50%); } .interior .sec02 .slick-next { transform: rotate(180deg); right:-70px; margin-top:-20px; } /* ************************************************************************************ FRANCHISEE - contact ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .contact .sec01 { } .contact .sec01 .wrap-contact { margin:0 80px; } .contact .sec01 .wrap-contact .tit { font-size:18px; font-weight:300; color:#5b5b5b; letter-spacing: -0.04em; margin:0 0 20px; } .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:250px; display:inline-block; text-align:center; line-height:60px; background:#f2f2f2; font-size:18px; color:#000; } .contact .sec01 .wrap-contact .wrap-form input { margin-left:20px; display:inline-block; vertical-align: sub; font-size:18px; box-sizing:border-box; padding:3px 5px; color:#000; } .contact .sec01 .wrap-contact .wrap-form .tel input { width:90px; margin-left:0; } .contact .sec01 .wrap-contact .wrap-form .tel input:first-of-type { margin-left:20px; } .contact .sec01 .wrap-contact .wrap-form .tel .bar { font-size:18px; color:#000; padding:0 5px; display:inline-block; } .contact .sec01 .wrap-contact .wrap-form .store label { font-size:18px; color:#000; vertical-align: 0; padding-left:5px; cursor: pointer; } .contact .sec01 .wrap-contact .wrap-form .store input { cursor: pointer; } .contact .sec01 .wrap-contact .wrap-form .questions .label { height:5em; font-size:18px; height:200px; line-height:200px; } .contact .sec01 .wrap-contact .wrap-form .questions textarea { width:calc(100% - 290px); height:160px; font-size:18px; color:#000; display:inline-block; margin-left:20px; vertical-align: top; margin:20px 20px; box-sizing:border-box; padding:5px 5px; resize:none; } .contact .sec01 .wrap-contact .privacy-policy { margin:50px 0 0; } .contact .sec01 .wrap-contact .privacy-policy .tit { margin:0 0 20px; color:#5b5b5b; } .contact .sec01 .wrap-contact .privacy-policy .wrap-txt { height:180px; overflow-y: scroll; border:1px solid #e0e0e0; box-sizing:border-box; padding:28px 24px; color:#696969; margin-bottom: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; } .contact .sec01 .wrap-contact .privacy-policy .wrap-chk input + label span { display:inline-block; width:18px; height:18px; 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; } .contact .sec01 .wrap-btn { margin:80px 0 100px; } .contact .sec01 .wrap-btn a { width:200px; height:60px; line-height:60px; background:#3a3a3a; color:#fff; font-size:20px; font-weight:500; margin:0 auto; display:block; text-align:center; } /* ************************************************************************************ FRANCHISEE - interview ************************************************************************************ */ .interview .inner { padding:100px 0; letter-spacing:-0.04em; text-align:center; } .interview h4 { font-size:40px; 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.jpg') center top no-repeat; position:relative; background-size:cover;} .interview .section02_bg { background:url('../img/franchisee/bg_interview02.jpg') center top no-repeat; position:relative; } .interview .sec01 h4 {font-size:40px; color:#ffcd34; } .interview .sec01 .wrap-txt { margin:10px 0 0; color:#fff; font-weight:300; } .interview .sec01 .wrap-txt .desc { font-size:24px; color:#fff; } .interview .sec01 .wrap-txt .desc strong { font-size:30px; color:#ffcd34; } .interview .sec01 .wrap-txt .subtitle { border-bottom:1px solid #fff; display:inline-block; font-size:30px; } .interview .sec01 .wrap-txt .subtitle b { color:#ffcd34; } .interview .sec01 .atab {margin:0 auto; max-width:800px; padding:70px 0 70px 2.2%; margin-left:19%;} .interview .sec01 .atab #mo {position: relative; /*left: 10%;*/ top:-1px;} .interview .sec01 .atab:after {display:block; content:""; clear:both;} .interview .sec01 .atab li {float:left; width:22%; margin-left:-1px; box-sizing:border-box; z-index:1;} .interview .sec01 .atab li a {display:block; font-size:18px; color:#333; background:#fff; border:1px solid #000000; line-height:64px; text-align:center;} .interview .sec01 .atab li:fitst-child {margin-left:0px;} .interview .sec01 .atab li.on a {color:#fff; background:#e14242; border:1px solid #820f0f;} .interview .sec01 .atab li.on {position:relative; z-index:2} .interview .sec01 .atab #mo2 {position: relative; /*left: 10%;*/ top:-2px;} .interview .sec01 .in_yt {margin-bottom:40px;} .interview .sec01 .in_yt iframe {width:700px; height:394px;} /* ************************************************************************************ FRANCHISEE - faq ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .faq .sec01 .inner { padding-bottom:100px; } .faq .sec01 .wrap-faq { margin:0 80px; } .faq .sec01 .wrap-faq .subject { padding:10px 2px; margin:60px 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:44px; height:44px; background-color:#434343; color:#ffcd34; text-align:center; line-height:40px; font-weight:900; font-size:24px; border-radius: 50%; float:left; } .faq .sec01 .wrap-faq .subject .tit { width:calc(100% - 44px); padding-left:15px; float:left; box-sizing:border-box; line-height:40px; font-size:24px; color:#222; letter-spacing: -0.04em; } .faq .sec01 .wrap-faq .desc { clear:both; font-size:18px; line-height:1.7em; color:#5b5b5b; padding:20px 50px; } .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:120px; letter-spacing: -0.04em; } /* search */ .store-list .wrap-search { padding:20px 60px; border-top:2px solid #666; border-bottom:2px solid #666; text-align: center; } .store-list .wrap-search .tit { font-size:24px; color:#000; line-height:42px; display:inline-block; vertical-align: middle; margin-right:40px; font-weight:500; } .store-list .wrap-search .area-wrap { display:inline-block; } .store-list .wrap-search .area-wrap select { width:170px; margin-right:20px; box-sizing:border-box; padding:0 10px; background-position:90% center; } .store-list .wrap-search .area-wrap input[type="text"] { width:300px; margin-right:20px; box-sizing:border-box; padding:0 10px; } .store-list .wrap-search .area-wrap .btn { padding:0 20px; height:42px; line-height:42px; color:#fff; background:#444; display:inline-block; font-size:14px; } /* list */ .store-list .wrap-table { } .store-list .wrap-table table { table-layout:fixed; width:100%; } .store-list .wrap-table caption { display:none; } .store-list .wrap-table th { font-size:16px; color:#000; background-color:#f7f7f7; padding:10px; } .store-list .wrap-table tr { border-bottom:1px solid #e0e0e0; } .store-list .wrap-table td { font-size:16px; color:#000; text-align:center; } .store-list .wrap-table td a { display:inline-block; font-size:16px; color:#000; padding:10px; } /* ************************************************************************************ STORE - store view ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .store-view .inner { letter-spacing: -0.04em; padding:0 240px 120px; box-sizing:border-box; } .store-view .tit { font-size:24px; 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 th { font-size:16px; color:#000; background-color:#f7f7f7; } .store-view .wrap-table tr { border-bottom:1px solid #e0e0e0; } .store-view .wrap-table td { font-size:16px; color:#000; padding:10px 20px; } .store-view .wrap-btn { margin:50px auto 0; text-align:center; } .store-view .wrap-btn a { min-width:150px; padding:10px 20px; display:inline-block; cursor: pointer; text-align:center; border:1px solid #666; font-size:16px; color:#333; font-weight:300; box-sizing:border-box; } /* ************************************************************************************ NEWS - notice list ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .notice-list .inner { padding-bottom:120px; 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 th { font-size:16px; color:#000; background-color:#f7f7f7; padding:10px 20px; } .notice-list .wrap-table tr { border-bottom:1px solid #e0e0e0; } .notice-list .wrap-table td { font-size:16px; color:#000; text-align:center; padding:10px 20px; } .notice-list .wrap-table td.subject { text-align:left; padding-left:100px; } .notice-list .wrap-table td a { display:inline-block; font-size:16px; color:#000; } /* search */ .notice-list .wrap-search { text-align: center; margin:50px 0 0; } .notice-list .wrap-search .area-wrap { display:inline-block; } .notice-list .wrap-search .area-wrap input[type="text"] { width:300px; margin-right:5px; box-sizing:border-box; padding:0 10px; } .notice-list .wrap-search .area-wrap .btn { padding:0 20px; height:42px; line-height:42px; color:#fff; background:#444; display:inline-block; vertical-align: middle; } /* ************************************************************************************ MEWS - notice view ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .notice-view .inner { letter-spacing: -0.04em; padding:0 0 120px; } .notice-view .wrap-title { padding:20px 40px; border-top:2px solid #666; } .notice-view .wrap-title h4 { width:calc(100% - 180px); font-size:24px; color:#000; font-weight:400; float:left; line-height:2rem;} .notice-view .wrap-title .date { width:180px; font-size:20px; color:#666; font-weight:300; float:right; line-height:2rem; text-align:right; } .notice-view .wrap-cont { border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding:50px 40px; } .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:20px 0px; color:#222; font-size:16px; } .notice-view .wrap-move dd { width:20%; display:table-cell; vertical-align:middle; text-align:center; padding:20px 0px; color:#666; font-size:16px; } .notice-view .wrap-move dd.link { width:70%; text-align:left; padding:20px 40px; } .notice-view .wrap-move dd.link a { display:inline-block; color:#333; font-size:16px; } .notice-view .wrap-btn { margin:50px auto 0; text-align:center; } .notice-view .wrap-btn a { min-width:150px; padding:10px 20px; display:inline-block; cursor: pointer; text-align:center; border:1px solid #666; font-size:16px; color:#333; font-weight:300; box-sizing:border-box; } /* ************************************************************************************ NEWS - press list ************************************************************************************ */ /* --------------------------------------- SECTION - 01 --------------------------------------- */ .press-list .inner { padding-bottom:120px; 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 th { font-size:16px; color:#000; background-color:#f7f7f7; padding:10px 20px; } .press-list .wrap-table tr { border-bottom:1px solid #e0e0e0; } .press-list .wrap-table td { font-size:16px; color:#000; text-align:center; padding:10px 20px; } .press-list .wrap-table td.subject { text-align:left; padding-left:100px; } .press-list .wrap-table td a { display:inline-block; font-size:16px; color:#000; } /* search */ .press-list .wrap-search { text-align: center; margin:50px 0 0; } .press-list .wrap-search .area-wrap { display:inline-block; } .press-list .wrap-search .area-wrap input[type="text"] { width:300px; margin-right:5px; box-sizing:border-box; padding:0 10px; } .press-list .wrap-search .area-wrap .btn { padding:0 20px; height:42px; line-height:42px; color:#fff; background:#444; display:inline-block; vertical-align: middle; } /* 별도 추가 */ /* 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;} @media (min-width: 600px) and (max-width: 1024px) { .reason01_bg {background:url('../img/about/reason/reason_tablet.jpg') center top no-repeat;} .reason01_bg #pcimg {/*opacity: 0%;*/ width: 100%; /*height: 2789px;*/ padding-top: 180px;} } @media (max-width: 767px) { .reason01_bg .mb-view { padding-top: 160px;} } /* ##Device = ##Screen = B/w 1025px to 1156px ##Device = ##Screen = 1025px에서 1156px 사이 */ @media (min-width: 1025px) and (max-width: 1156px) { /* ---------- 상담전화 ---------- */ #header .call { display:none; } } /* 랜딩 */ .landing #pcimg { width:100%; } .support_out_01{background-color:#e75027; padding:50px 0; letter-spacing:-2px;} .support_out_01 .tit {margin:100px 0 50px 0;} .support_out_01 h4 {line-height:1em; font-family:"Elice DX Neolli"; font-size:100pt; color:#fff3c3; text-align:center; font-weight:700;} .support_out_01 span {font-size:70pt; color:#fff;} .support_out_01 .txt {text-align:left;} .support_out_01 .num {margin-bottom:15px;} .support_01 {display:flex; max-width:1500px; margin:0 auto; color:#fff; align-items:center; justify-content:space-between;} .support_01 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:70pt;} .support_01 .txt h3 span {color:#fff3c3;} .support_01{background-color:#e75027; padding:50px 0;} .support_01 p { font-family: 'Pretendard'; font-weight:200; font-size:36px; letter-spacing:-4px;} .support_01 strong { font-family: 'Pretendard'; font-weight:500; font-size:36px; letter-spacing:-4px;} .support_01 .con { margin:10px 0 20px 0;} .support_01 b { font-family: 'Pretendard'; font-weight:300; font-size:20px; } .support_01 .video iframe {border:21px solid #fafafa; box-shadow:0px 20px 30px #b03d1e;} .support_out_02 {background-color:#fff; padding:100px 0; letter-spacing:-2px;} .support_02 {display:flex; max-width:1500px ;background-color:#fff; margin:0 auto; color:#000; align-items:center; justify-content:space-between; } .support_02 .tit {margin-bottom:50px;} .support_02 .video iframe {border:21px solid #fafafa; box-shadow:0px 20px 30px #c2c2c2;} .support_02 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:70pt;} .support_02 .txt h3 span {color:#e75027;} .support_02 .txt {text-align:left;} .support_02 .num {margin-bottom:15px;} .support_02 p { font-family: 'Pretendard'; font-weight:200; font-size:36px; letter-spacing:-4px;} .support_02 strong { font-family: 'Pretendard'; font-weight:500; font-size:36px; letter-spacing:-4px;} .support_02 .con { margin:10px 0 20px 0;} .support_02 b { font-family: 'Pretendard'; font-weight:300; font-size:20px; } .support_out_03 {background-color:#e7f5f0; padding:100px 0; letter-spacing:-2px;} .support_03 {display:flex; max-width:1500px ; margin:0 auto; color:#000; align-items:center; justify-content:space-between; } .support_03 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:70pt;} .support_03 .txt h3 span {color:#144f3f;} .support_03 .con { margin:10px 0 20px 0;} .support_03 .support_img {width:610px; height:343px; border:21px solid #fafafa; box-shadow:0px 20px 30px #afb9b6; } .support_03 b { font-family: 'Pretendard'; font-weight:300; font-size:20px; } .support_out_04 {background:url('../_resources/img/franchisee/support_04_bg.jpg')no-repeat center; padding:100px 0; letter-spacing:-2px;} .support_04 {display:flex; max-width:1500px ; margin:0 auto; color:#000; align-items:center; justify-content:space-between; } .support_04 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:70pt;} .support_04 .txt h3 span {color:#fcc80c;} .support_04 .con { margin:10px 0 20px 0;} .support_04 .support_img {width:610px; height:343px; border:21px solid #fafafa; box-shadow:0px 20px 30px #c2c2c2; } .support_out_05 {background-color:#fcc80c; padding:100px 0; letter-spacing:-2px;} .support_05 {display:flex; max-width:1500px ; margin:0 auto; color:#000; align-items:center; justify-content:space-between; } .support_05 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:70pt;} .support_05 .txt h3 span {color:#fff;} .support_05 .con { margin:10px 0 20px 0;} .support_05 .support_img {width:610px; height:343px; border:21px solid #fafafa; box-shadow:0px 20px 30px #c09809; } .renewal_point_03{background-color:#fdfcf5; padding:50px 0; letter-spacing:-2px;} .renewal_point_03 img {width:95%;} .brand_point {background: url('../img/franchisee/brand_point_bg.jpg') center no-repeat; background-size: cover; width:100%; padding:200px 0;} .brand_point .pc-view .round_box {width:1134px; background-color:#fbfbfb; border-radius:55px; padding:25px; margin-bottom:20px; height:340px; align-items: center; display: flex;} .brand_point .pc-view .round_box img {display:block;} .brand_point .pc-view .brand_point_title { margin: 0 0 100px 0;} .brand_point .pc-view .box_13 .point_text {margin-left:60px;} .brand_point .pc-view .box_24 { display:flex; justify-content:flex-end; } .brand_point .pc-view .box_24 .point_text {margin-right:60px;} .land_menu {background-color:#0f3587; padding:200px 0; text-align: center;} .button-group { display: flex; gap: 16px; justify-content: center; margin: 100px 0 50px 0; } .round-button { width:148px; padding: 12px 24px; border: none; border-radius: 50px; background-color: #fff; color: #0f3587; font-size: 24px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; letter-spacing: -2px; } .round-button.active { background-color: #fcd001; } .btn_all { background-color:#0d1c3c; color:#fff; border-radius:15px; font-size: 24px; width:260px; height:90px; margin-top:50px; } .land_cost { background-color:#0f3587; padding:200px 0; text-align: center; } .button-group-main { display: flex; gap: 16px; justify-content: center; margin: 100px 0 50px 0; } .round-button-main { width: 200px; padding: 12px 24px; border: none; border-radius: 50px; background-color: #fff; color: #0f3587; font-size: 24px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; letter-spacing: -2px; } .round-button-main.active { background-color: #fcd001; } .text-main { width:1500px; margin: 0 auto; color:#fff; font-weight: 200; text-align:left; padding: 10px 0 0 0; } .land_contact { background:url('../img/franchisee/contact_bg.png'); padding:160px 0; } .land_contact .contct_text { float:left; margin:100px 0 0 100px; } .land_contact .h_tit { font-size:100px; font-family:'GmarketSans'; font-weight:800; color:#0f3587; margin:0; text-align:left; } .land_contact .tit { font-size:24px; font-weight:300; color:#0f3587; letter-spacing: -0.04em; margin:30px 0 30px 0; } .land_contact .sec01 { } .land_contact .sec01 .inner { width: 1583px; max-width:1583px; } .land_contact .sec01 .wrap-contact { margin-left: auto; width:635px; border:2px solid #0f3587; background-color:#fff; border-radius: 20px; padding:80px 95px; } .land_contact .sec01 .wrap-contact .wrap-form { } .land_contact .sec01 .wrap-contact .wrap-form .item-input { font-size:0; } .land_contact .sec01 .wrap-contact .wrap-form .label { width:250px; display:inline-block; line-height:60px; font-size:18px; color:#0f3587; } .land_contact .sec01 .wrap-contact .wrap-form input { border:1px solid #0f3587; width:365px; margin-left:20px; display:inline-block; vertical-align: sub; font-size:18px; box-sizing:border-box; padding:3px 5px; color:#000; } .land_contact .sec01 .wrap-contact .wrap-form .tel input { width:110px; margin-left:0; } .land_contact .sec01 .wrap-contact .wrap-form .tel input:first-of-type { margin-left:20px; } .land_contact .sec01 .wrap-contact .wrap-form .tel .bar { font-size:18px; color:#000; padding:0 5px; display:inline-block; } .land_contact .sec01 .wrap-contact .wrap-form .store label { font-size:18px; color:#0f3587; vertical-align: 0; padding-left:5px; cursor: pointer; } .land_contact .sec01 .wrap-contact .wrap-form .store input { cursor: pointer; width:20px; } .land_contact .sec01 .wrap-contact .wrap-form .questions .label { height:5em; font-size:18px; height:200px; line-height:160px; } .land_contact .sec01 .wrap-contact .wrap-form .questions textarea { border:1px solid #0f3587; /*width:calc(100% - 370px);*/ width:365px; height:160px; font-size:18px; color:#000; display:inline-block; margin-left:20px; vertical-align: top; /*margin:20px 20px;*/ box-sizing:border-box; padding:5px 5px; resize:none; } .land_contact .sec01 .wrap-contact .item-chk { text-align:center; margin:20px 0; } .land_contact .sec01 .wrap-contact .item-chk input { } .land_contact .sec01 .wrap-contact .item-chk label { font-size:18px; color:#0f3587; } .land_contact .sec01 .wrap-contact .item-chk a { vertical-align: middle; font-size:18px; color:#0f3587; font-weight:500; } /* .land_contact .sec01 .wrap-contact .privacy-policy { margin:50px 0 0; } .land_contact .sec01 .wrap-contact .privacy-policy .tit { margin:0 0 20px; color:#5b5b5b; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-txt { height:180px; overflow-y: scroll; border:1px solid #e0e0e0; box-sizing:border-box; padding:28px 24px; color:#696969; margin-bottom:10px;} .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk { } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input { display:none; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input + label { color:#5b5b5b; cursor: pointer; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input + label span { display:inline-block; width:18px; height:18px; border:1px solid #d7d7d7; border-radius: 50%; cursor: pointer; margin-right:5px; vertical-align:sub; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input:checked + label span { background:url('../img/franchisee/ico-chk.png') center no-repeat, #333; } */ .land_contact .sec01 .wrap-btn { } .land_contact .sec01 .wrap-btn a { border-radius: 15px; background:#0f3587; width:200px; height:60px; line-height:60px; color:#fff; font-size:20px; font-weight:500; margin:0 auto; display:block; text-align:center; } /* 메인 창업비용 */ .main_cost { text-align: center; font-family:'Noto Sans'; } .main_cost .button-group-main { display: flex; gap: 16px; justify-content: center; margin: 50px 0 50px 0; } .main_cost .round-button-main { width: 200px; padding: 12px 24px; border: none; border-radius: 50px; background-color: #fff; color: #0f3587; font-size: 24px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; letter-spacing: -2px; } .main_cost .round-button-main.active { background-color: #fcd001; } .main_cost .text-main { width:1500px; margin: 0 auto; color:#fff; font-weight: 200; text-align:left; padding: 10px 0 0 0; } /* 매장개설비용 메뉴 */ .fran_cost { text-align: center; font-family:'Noto Sans'; } .fran_cost .button-group-main { display: flex; gap: 16px; justify-content: center; margin: 50px 0 50px 0; } .fran_cost .round-button-main { width: 200px; padding: 12px 24px; border: none; border-radius: 50px; background-color: #0f3587; color: #fff; font-size: 24px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; letter-spacing: -2px; } .fran_cost .round-button-main.active { background-color: #fcd001; color: #0f3587; } .fran_cost .text-main { width:1500px; margin: 0 auto; color:#fff; font-weight: 200; text-align:left; padding: 10px 0 0 0; } @media (max-width: 767px) { .support_out_01 {letter-spacing:-1px; padding:10px 0;} .support_out_01 .tit {margin-bottom:30px;} .support_out_01 h4 {font-size:36pt; } .support_out_01 span {font-size:24pt; } .support_out_01 .txt {text-align:center;} .support_out_01 .num {margin-bottom:15px;} .support_01 {display:block; max-width:360px; margin:0 auto; color:#fff; text-align:center; justify-content:space-between;} .support_01 .txt h3 { font-size:36pt;} .support_01 .txt h3 span {color:#fff3c3; font-size:36pt;} .support_01{background-color:#e75027; padding:50px 0;} .support_01 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_01 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_01 .con { margin:20px 0 5px 0;} .support_01 b { font-weight:300; font-size:13px; } .support_01 .video {width:100%; margin-top:25px;} .support_01 .video iframe {border:10px solid #fafafa; box-shadow:0px 20px 30px #b03d1e; width:94%;height:190px;} .support_out_02 {letter-spacing:-1px; padding:10px 0; } .support_out_02 .tit {margin-bottom:30px;} .support_out_02 h4 {font-size:36pt; } .support_out_02 span {font-size:24pt; } .support_out_02 .num {margin-bottom:15px;} .support_02 {display:block; max-width:360px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_02 .txt_m h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:36pt;} .support_02 .txt_m h3 span {color:#e75027; font-size:36pt;} .support_02{background-color:#fff; padding:50px 0;} .support_02 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_02 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_02 .con { margin:20px 0 17px 0;} .support_02 b { font-weight:300; font-size:13px; } .support_02 .video {width:100%; margin-top:25px;} .support_02 .video iframe {border:10px solid #fafafa; box-shadow:0px 20px 30px #c2c2c2; width:94%;height:190px;} .support_out_03 {letter-spacing:-1px; padding:10px 0; } .support_out_03 .tit {margin-bottom:30px;} .support_out_03 h4 {font-size:36pt; } .support_out_03 span {font-size:24pt; } .support_out_03 .num {margin-bottom:15px;} .support_03 {display:block; max-width:360px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_03 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:36pt;} .support_03 .txt h3 span {color:#144f3f; font-size:36pt;} .support_03{background-color:#e7f5f0; padding:50px 0;} .support_03 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_03 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_03 .con { margin:20px 0 17px 0;} .support_03 b { font-weight:300; font-size:13px; } .support_03 .support_img { margin-top:25px; height:auto; border:10px solid #fafafa; box-shadow:0px 20px 30px #afb9b6; width:94%;} .support_out_04 {letter-spacing:-1px; padding:10px 0; } .support_out_04 .tit {margin-bottom:30px;} .support_out_04 h4 {font-size:36pt; } .support_out_04 span {font-size:24pt; } .support_out_04 .num {margin-bottom:15px;} .support_04 {display:block; max-width:360px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_04 .txt_m h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:36pt;} .support_04 .txt_m h3 span {color:#fcc80c; font-size:36pt;} .support_04{ padding:50px 0;} .support_04 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_04 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_04 .con { margin:20px 0 17px 0;} .support_04 b { font-weight:300; font-size:13px; } .support_04 .support_img { margin-top:25px; height:auto; border:10px solid #fafafa; box-shadow:0px 20px 30px #afb9b6; width:94%;} .support_out_05 {letter-spacing:-1px; padding:10px 0; } .support_out_05 .tit {margin-bottom:30px;} .support_out_05 h4 {font-size:36pt; } .support_out_05 span {font-size:24pt; } .support_out_05 .num {margin-bottom:15px;} .support_05 {display:block; max-width:360px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_05 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:36pt;} .support_05 .txt h3 span {color:#fff; font-size:36pt;} .support_05{ padding:50px 0;} .support_05 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_05 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_05 .con { margin:20px 0 17px 0;} .support_05 b { font-weight:300; font-size:13px; } .support_05 .support_img { margin-top:25px; height:auto; border:10px solid #fafafa; box-shadow:0px 20px 30px #c09809; width:94%;} .renewal_point_03{background-color:#fdfcf5; padding:15px 0; letter-spacing:-2px;} .brand_point {background: url('../img/franchisee/brand_point_bg_m.jpg') center no-repeat; width:100%; padding:80px 0;} .brand_point .mb-view .round_box {width:300px; background-color:#fbfbfb; border-radius:35px; padding:20px; margin-bottom:20px; height:auto; align-items: center; display: block;} .brand_point .mb-view .brand_point_title { width:80%; margin:0 0 40px 0;} .brand_point .mb-view .point_text {margin:30px 0 10px 0;} .land_menu {padding:80px 0;} .land_menu_title {width:80%; display: block; margin: 0 auto; } .button-group { margin: 50px 0 30px 0; } .image-container { width:90%; display: block; margin: 0 auto; } .round-button { width:100px; padding: 12px 24px; border: none; border-radius: 50px; /* 둥근 사각형 */ background-color: #fff; color: #0f3587; font-size: 18px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .btn_all { background-color:#0d1c3c; color:#fff; border-radius:15px; font-size: 18px; width:200px; height:60px; margin-top:50px; } .land_cost {padding:80px 0;} .main_title_m {width:85%; margin:0 auto;} .round-button-main { width:230px; padding: 8px 24px; border: none; border-radius: 50px; /* 둥근 사각형 */ background-color: #fff; color: #0f3587; font-size: 16px; line-height:18px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .button-group-main {margin:0 auto; width:95%; padding:50px 0 30px 0; gap:5px; } .text-main { width:90%; font-size:14px; } /* 메인 창업비용 */ .main_cost {padding:0;} .main_cost .main_title_m {width:85%; margin:0 auto;} .main_cost .round-button-main { width:230px; padding: 8px 24px; border: none; border-radius: 50px; /* 둥근 사각형 */ background-color: #fff; color: #0f3587; font-size: 16px; line-height:18px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .main_cost .button-group-main {margin:0 auto; width:95%; padding:50px 0 30px 0; gap:5px; } .main_cost .text-main { width:100%; font-size:14px; } .main_cost .image-container {width:100%;} /* 매장개설비용 메뉴 */ .fran_cost {padding:0;} .fran_cost .main_title_m {width:85%; margin:0 auto;} .fran_cost .round-button-main { width:230px; padding: 8px 24px; border: none; border-radius: 50px; /* 둥근 사각형 */ background-color: #0f3587; color: #fff; font-size: 16px; line-height:18px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .fran_cost .button-group-main {margin:0 auto; width:95%; padding:0 0 30px 0; gap:5px; } .fran_cost .round-button-main.active { background-color: #fcd001; color: #0f3587; } .fran_cost .text-main { width:100%; font-size:14px; } .fran_cost .image-container {width:100%;} .land_contact { background:url('../img/franchisee/contact_bg_m.png'); padding:80px 0; margin: 0 auto; } .land_contact .contct_text { float:none; margin:100px 0 0 100px; margin: 0 auto; } .land_contact .h_tit { font-size:60px; margin:0; text-align:center; } .land_contact .tit { font-size:15px; font-weight:300; color:#0f3587; letter-spacing: -0.04em; margin:5px 0 10px 0; text-align:center; } .land_contact .sec01 { } .land_contact .sec01 .inner { width: 100%; max-width:100%; padding:30px 20px 50px 20px; } .land_contact .sec01 .wrap-contact { width:auto; padding:20px 20px; margin: 0 auto; } .land_contact .sec01 .wrap-contact .wrap-form .item-input {margin: 10px 0; } .land_contact .sec01 .wrap-contact .wrap-form .label { width:100%; line-height:50px; text-align:left; font-weight:500; } .land_contact .sec01 .wrap-contact .wrap-form input {width:100%; margin-left:0px; padding:3px 5px; } .land_contact .sec01 .wrap-contact .wrap-form .tel input { width:29%; margin-left:0; } .land_contact .sec01 .wrap-contact .wrap-form .tel input:first-of-type { margin-left:0px; } .land_contact .sec01 .wrap-contact .wrap-form .tel .bar { } .land_contact .sec01 .wrap-contact .wrap-form .store { text-align:left; } .land_contact .sec01 .wrap-contact .wrap-form .store label { padding-left:0px; } .land_contact .sec01 .wrap-contact .wrap-form .store input { width:20px; } .land_contact .sec01 .wrap-contact .wrap-form .store_first {margin:0 20px 0 0; } .land_contact .sec01 .wrap-contact .wrap-form .questions .label { height:6em; height:54px; line-height:60px; } .land_contact .sec01 .wrap-contact .wrap-form .questions textarea { width:100%; height:160px; margin-left:0px; padding:5px 5px; } .land_contact .sec01 .wrap-contact .item-chk { text-align:center; margin:20px 0; } .land_contact .sec01 .wrap-contact .item-chk label { } .land_contact .sec01 .wrap-contact .item-chk a { vertical-align: middle; font-size:18px; color:#0f3587; font-weight:500; } /* .land_contact .sec01 .wrap-contact .privacy-policy { margin:50px 0 0; } .land_contact .sec01 .wrap-contact .privacy-policy .tit { margin:0 0 20px; color:#5b5b5b; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-txt { height:180px; overflow-y: scroll; border:1px solid #e0e0e0; box-sizing:border-box; padding:28px 24px; color:#696969; margin-bottom:10px;} .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk { } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input { display:none; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input + label { color:#5b5b5b; cursor: pointer; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input + label span { display:inline-block; width:18px; height:18px; border:1px solid #d7d7d7; border-radius: 50%; cursor: pointer; margin-right:5px; vertical-align:sub; } .land_contact .sec01 .wrap-contact .privacy-policy .wrap-chk input:checked + label span { background:url('../img/franchisee/ico-chk.png') center no-repeat, #333; } */ .land_contact .sec01 .wrap-btn { } .land_contact .sec01 .wrap-btn a { border-radius: 15px; background:#0f3587; width:200px; height:60px; line-height:60px; color:#fff; font-size:20px; font-weight:500; margin:0 auto; display:block; text-align:center; } } @media (min-width: 768px) and (max-width: 1024px) { .support_out_02 .pc-view{display:block;} .support_out_04 .pc-view{display:block;} .support_out_01 {letter-spacing:-1px; padding:10px 0;} .support_out_01 .tit {margin-bottom:30px;} .support_out_01 h4 {font-size:50pt; } .support_out_01 span {font-size:36pt; } .support_out_01 .txt {text-align:center;} .support_out_01 .num {margin-bottom:15px;} .support_01 {display:block; max-width:1000px; margin:0 auto; color:#fff; text-align:center; justify-content:space-between;} .support_01 .txt h3 { font-size:40pt;} .support_01 .txt h3 span {color:#fff3c3; font-size:40pt;} .support_01{background-color:#e75027; padding:50px 0;} .support_01 p { font-family: 'Pretendard'; font-weight:200; font-size:26px; letter-spacing:0px;} .support_01 strong { font-family: 'Pretendard'; font-weight:500; font-size:26px; letter-spacing:-1px;} .support_01 .con { margin:20px 0 5px 0;} .support_01 b { font-weight:300; font-size:18px; } .support_01 .video {width:100%; margin-top:25px;} .support_01 .video iframe {border:10px solid #fafafa; box-shadow:0px 20px 30px #b03d1e; width:94%;height:520px;} .support_out_02 {letter-spacing:-1px; padding:10px 0; } .support_out_02 .tit {margin-bottom:30px;} .support_out_02 h4 {font-size:36pt; } .support_out_02 span {font-size:24pt; } .support_out_02 .num {margin:50px 0 15px 0;} .support_02 {display:block; max-width:1000px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_02 .txt {text-align:center;} .support_02 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:36pt;} .support_02 .txt h3 span {color:#e75027; font-size:36pt;} .support_02{background-color:#fff; padding:50px 0;} .support_02 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_02 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_02 .con { margin:20px 0 17px 0;} .support_02 b { font-weight:300; font-size:18px; } .support_02 .video {width:100%; margin-top:25px;} .support_02 .video iframe {border:10px solid #fafafa; box-shadow:0px 20px 30px #c2c2c2; width:94%;height:520px;} .support_out_03 {letter-spacing:-1px; padding:10px 0; } .support_out_03 .tit {margin-bottom:30px;} .support_out_03 h4 {font-size:36pt; } .support_out_03 span {font-size:24pt; } .support_out_03 .num {margin-bottom:15px;} .support_03 {display:block; max-width:1000px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_03 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:40pt;} .support_03 .txt h3 span {color:#144f3f; font-size:40pt;} .support_03{background-color:#e7f5f0; padding:50px 0;} .support_03 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_03 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_03 .con { margin:20px 0 17px 0;} .support_03 b { font-weight:300; font-size:18px; } .support_03 .support_img { margin-top:25px; height:auto; border:10px solid #fafafa; box-shadow:0px 20px 30px #afb9b6; width:94%;} .support_out_04 {letter-spacing:-1px; padding:10px 0; } .support_out_04 .tit {margin-bottom:30px;} .support_out_04 h4 {font-size:36pt; } .support_out_04 span {font-size:24pt; } .support_out_04 .num {margin:50px 0 15px 0;} .support_04 {display:block; max-width:1000px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_04 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:40pt;} .support_04 .txt h3 span {color:#fcc80c; font-size:40pt;} .support_04{ padding:50px 0;} .support_04 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_04 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_04 .con { margin:20px 0 17px 0;} .support_04 b { font-weight:300; font-size:13px; } .support_04 .support_img { margin-top:25px; height:auto; border:10px solid #fafafa; box-shadow:0px 20px 30px #afb9b6; width:94%;} .support_out_05 {letter-spacing:-1px; padding:10px 0; } .support_out_05 .tit {margin-bottom:30px;} .support_out_05 h4 {font-size:36pt; } .support_out_05 span {font-size:24pt; } .support_out_05 .num {margin-bottom:15px;} .support_05 {display:block; max-width:1000px; margin:0 auto; color:#000; text-align:center; justify-content:space-between;} .support_05 .txt h3 {font-family:"Elice DX Neolli"; font-weight:bold; font-size:40pt;} .support_05 .txt h3 span {color:#fff; font-size:40pt;} .support_05{ padding:50px 0;} .support_05 p { font-family: 'Pretendard'; font-weight:200; font-size:20px; letter-spacing:0px;} .support_05 strong { font-family: 'Pretendard'; font-weight:500; font-size:20px; letter-spacing:-1px;} .support_05 .con { margin:20px 0 17px 0;} .support_05 b { font-weight:300; font-size:13px; } .support_05 .support_img { margin-top:25px; height:auto; border:10px solid #fafafa; box-shadow:0px 20px 30px #c09809; width:94%;} }