.tabDepth>a, .lastDepth>a, .depth3>a, .depth3>a>span:before, .faq_list>li .q, .faq_list>li .q>.bul, #mVisual .visualRoll .slider>div, #mVisual .vTxtArea .ii, #mVisual .slick-dots>li button, #mVisual .slick-dots>li button:before, #mVisual .vTxt .ii, #mVisual .iconMenu .inConts>a, .mSolution .mSolutionBox .mSolution_txt .btns>a, .mQuick>* .btns>a, #mRoute .routeMap #routeBtn>a, #mAbout .linkAbout>a .thumb img, .mProduct>.list a>.lay, .cont_img .btns>a{transition: all .3s ease-out; transform-origin: 50% 50%;} .historyArea .history_box>.logo>span, .historyArea .history_box>.list:before, #mVisual .vTxt .ii{transition: all .5s ease-out; transform-origin: 50% 50%;} #mVisual .visualRoll .slider .photoBox p{transition: all 1s ease-out; transform-origin: 50% 50%;} /*[s] All Style */ .bg_thumb_box{width:100%; height:100%; background-repeat: no-repeat; background-position: center center; box-sizing: border-box;} img.bg_thumb{opacity: 0;} img.ofi{width:100%; height:100%; object-fit:cover; object-position: center center; font-family: 'object-fit: cover; object-position: center center;';} .tbLayout{width:100%; display:table;} .tbLayout.fixed{table-layout: fixed;} .tbLayout>*{display:table-cell; vertical-align: middle; box-sizing: border-box;} .tbLayout.vat>.td{vertical-align: top;} .tbLayout.full{width:1920px; margin-left:-960px; position: relative; left:50%;} .nTable{width:100%; border-top:2px solid #333; font-size:0; line-height:0;} .nTable>table{width:100%; border-spacing:0; table-layout : fixed;} .nTable>table th, .nTable>table td{padding:3rem 4.5rem; background-color: #fff; border-bottom:1px solid #dadada; font-size:1.7rem; line-height:1.5; color:#666; text-align:left; vertical-align: middle; border-collapse:collapse; empty-cells:show; box-sizing: border-box; word-break:keep-all; word-wrap:break-word;} .nTable>table th{height:5rem; padding:0; border-right:1px solid #dadada; font-size:1.8rem; color: #333; text-align: center;} .nTable>table>thead>tr>th{background-color: #f8f9fb; font-weight: 500;} .nTable>table>tbody>tr>th{} .nTable>table .inT{margin-right:2rem; display:inline-block;} .nTable>table .transportation{} .nTable>table .transportation>li{padding-left:7.5rem; position: relative;} .nTable>table .transportation>li+li{margin-top:2rem;} .nTable>table .transportation>li>p{font-weight: bold; font-size:1.8rem; line-height:3rem; color: #333; position: absolute; left:0; top:0;} .nTable>table .transportation>li>dl{display: flex; justify-content: space-between;} .nTable>table .transportation>li>dl+dl{margin-top:1rem;} .nTable>table .transportation>li>dl>dt{padding-right:1rem; white-space: nowrap;} .nTable>table .transportation>li>dl>dt>span{padding:0 0.8rem; background-color: #a2133f; font-size:1.5rem; line-height:3rem; color: #fff; display:inline-block; border-radius:3px;} .nTable>table .transportation>li>dl>dt.g>span{background-color: #48a824;} .nTable>table .transportation>li>dl>dt.b>span{background-color: #205cc0;} .nTable>table .transportation>li>dl>dt.h>span{background-color: #2faebd;} .nTable>table .transportation>li>dl>dt.r>span{background-color: #da352d;} .nTable>table .transportation>li>dl>dd{width:100%;} .nTable>table .transportation>li>dl>dd .inT{margin-right:1.5rem; font-size:1.6rem; line-height:3rem;} .nTable.en>table .transportation>li{padding-left:8.5rem;} .nTable>table .tit{padding-bottom:0.5rem; font-weight: 400; color: #1b1b1b;} .nTable>table ul.bul{} .nTable>table ul.bul>li{font-weight: 300; font-size:1.7rem; line-height:1.6; color: #666;} .nTable>table .icon{width:14.5rem; margin:0 auto; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left;} .nTable>table .icon>dt{width:5.8rem;} .nTable>table .icon .i01{width:3.3rem;} .nTable>table .icon .i02{width:3.8rem;} .nTable>table .icon .i03{width:3.5rem;} .nTable>table .icon .i04{width:2.7rem;} .nTable>table .icon .i05{width:3.4rem;} .nTable>table .icon .i06{width:3.6rem;} .nTable.small{margin-top:1.5rem; border:1px solid #2f3334; overflow:hidden;} .nTable.small>table{width:calc(100% + 3px); margin:-1px; background-color: #bcbcbc; border-spacing:1px;} .nTable.small>table th, .nTable.small>table td{padding:10px; border:none; font-weight: 400; font-size:15px; line-height:20px; color: #595959; text-align: center;} .nTable.small>table>thead>tr>th{background-color: #e9e9e9; font-size:16px; color: #262626;} .nTable.small>table>tbody>tr>th{width:auto; border-right:none;} .nTable +.nTable{margin-top:40px;} .tabDepth{width:100%; margin-bottom:35px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden;} .tabDepth>a{width:19rem; height:46px; background-color: #fdfdfd; border:1px solid #e2e2e2; font-size:18px; line-height:1.2; color: #737373; display:inline-block; vertical-align: top; box-sizing: border-box;} .tabDepth>a+a{margin-left:-1px;} .tabDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .tabDepth>a:hover, .tabDepth>a.active{background-color: #1b54aa; border-color:#1b54aa; color: #fff; z-index:2;} .depth3{width:100%; margin-bottom:70px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; position: relative;} .depth3:before{content: ""; width: 100%; height: 1px; background-color: #b0b0b0; display: inline-block; position:absolute; left: 0; top:50%;} .depth3>a{width:260px; height:54px; min-height:5.4rem; background-color: #1952a7; border:1px solid #0c3879; font-size:19px; line-height:1.2; color: #fff; display:inline-block; vertical-align: top; box-sizing: border-box; position: relative; z-index:2;} .depth3>a+a{margin-left:-1px;} .depth3>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%); word-break:keep-all; word-wrap:break-word;} .depth3>a>span:before{content: ""; width: 0; height:2.1rem; margin-top:0.2rem; background:url("../img/bul_d3.png") no-repeat left top; background-size: 2.1rem; display: inline-block; vertical-align: top; position: relative; left:-3.1rem; opacity: 0;} .depth3>a:hover, .depth3>a.active{background-color: #0091db; border-color:#0086cb; z-index:3;} .depth3>a:hover>span:before, .depth3>a.active>span:before{width: 3.1rem; left:0rem; opacity: 1;} .lastDepth{width:100%; margin-bottom:50px; font-size:0; line-height:0; text-align: center; box-sizing: border-box; overflow:hidden; display: flex; justify-content: space-between; } .lastDepth>a{width:100%; height:60px; background-color: #fff; border:1px solid #d3d3d3; font-size:18px; line-height:1.2; color: #666; display:inline-block; vertical-align: top; box-sizing: border-box;} .lastDepth>a+a{margin-left:-1px;} .lastDepth>a>span{display:inline-block; position: relative; top:50%;-webkit-transform: translateY(-50%); transform: translateY(-50%);} .lastDepth>a:hover, .lastDepth>a.active{background-color: #f192a6; border-color:#f192a6; color: #fff; z-index:2;} .lastDepthConts{font-size:0; line-height:0; display:none; overflow:hidden;} .groupTit{padding-bottom:3.5rem;} .groupTit .step{padding-bottom:1rem; font-weight: bold; font-size:2.2rem; line-height:1; color: #23abaf;} h4.txt{font-weight: bold; font-size:2.6rem; line-height:1; color: #1b1b1b;} .nTxt{padding-top:2.5rem; font-size:1.7rem; line-height:2.6rem; color: #888;} ul.bul{} ul.bul>li{padding-left:1rem; font-size:1.8rem; line-height:3.2rem; color: #333; position: relative;} ul.bul>li:before{content: "-"; position:absolute; left: 0; top:0px;} ul.star{} ul.star>li{padding-left:2.2rem; font-size:1.7rem; line-height:3.2rem; color: #666; position: relative;} ul.star>li:before{content: "※"; position:absolute; left: 0.4rem; top:0px;} ul.etc{} ul.etc>li{padding-left:3.3rem; font-size:1.7rem; line-height:3.2rem; color: #666; position: relative;} ul.etc>li:before{content: attr(data-title); position:absolute; left: 0; top:0px;} h4.line{margin-bottom:50px; padding-top:2.2rem; font-size:2rem; line-height:1; color: #636363; text-align: center; letter-spacing: -0.03em; position: relative;} h4.line:before{content: ""; width: 2.1rem; height: 0.2rem; background-color: #3a3a3a; display: block; position:absolute; left:50%; top:0; transform: translateX(-50%);} h4.line>strong{font-weight: bold; font-size:4rem; color: #000; display:block;} h4.line>p{padding-top:0.9rem;} h4.line.mt{margin-top:8rem;} h5.bul{margin:6rem 0 2.5rem; padding-left:2.2rem; font-weight: 500; font-size:2.4rem; line-height:1; color: #000; letter-spacing: -0.03em; position: relative;} h5.bul:before{content: ""; width: 1.4rem; height: 1.4rem; border:0.3rem solid #1952a7; display: block; position:absolute; left:0; top:0.5rem; border-radius:999px;} h5.bul .more{padding:0.5rem 1rem; border:1px solid #dadada; font-weight: 400; font-size:1.4rem; color: #666; position: absolute; right:0; top:-0.2rem; display:inline-block;} h6.bul{margin-top:3.5rem;padding:0 0 1rem 1rem; font-weight: 500; font-size:2rem; line-height:1; color: #1b1b1b; letter-spacing: -0.03em; position: relative;} h6.bul:before{content: "-"; position:absolute; left:0; top:0;} h5.bul + .nTxt{margin-top:-1rem;} .f0{font-size:0; line-height:0; text-align: center;} .scrollTb{display:inline-block; font-size:0; line-height:0; } .scrollTb img{max-width:none;} .nTable.scrollTb{padding-bottom:2rem;} .scroll_info{width:100%; padding:2rem 0; font-size:0; line-height:0; position: relative; display:none;} .scroll_info:before{content:"← scroll →"; margin-top:-1rem; font-size:2rem; line-height:1; color: #ff0000; display:inline-block; position: absolute; left:44%; top:50%; animation-duration: 1s; animation-iteration-count:infinite; animation-name: scrollMove; animation-timing-function:ease-In-Out;animation-direction:alternate;} @keyframes scrollMove { from {color: #ff0000; left:42%;} to {color: #006cb7; left:46%;} } .wideFrame{height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative;} .wideFrame>video, .wideFrame>iframe{width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .wideKakao{width: 100%; margin: 0 auto; position: relative;} .wideKakao>.root_daum_roughmap{width: 100%; height:54rem;} .wideKakao>.root_daum_roughmap .wrap_map{height:100%; position: absolute; left: -1px; right: -1px; top: -1px;} .wideKakao .hide {display: none;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:10px 20px; background-color:#f00; font-size:16px; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .admGos{padding:0.5rem 1rem; background-color:#f00; font-size:1.6rem; line-height:1.2; color:#fff; display:inline-block; position: absolute; right:0; top:0; z-index:7;} .arrBtn{padding:0 1.8rem; border:0.2rem solid #fff; font-size:16px; line-height:4rem; color: #fff; display:inline-block; border-radius:99px;} .arrBtn>span{padding-right:6rem; background: url("../img/main/arr_mBtns_w.png") no-repeat right center; background-size:3.1rem; display:inline-block;} .arrBtn.black{border-color:#333; color: #333;} .arrBtn.black>span{background-image: url("../img/main/arr_mBtns.png");} select.base{width:100%; height:4rem; padding:0 4rem 0 2rem; background:#fff url('/theme/prix/img/bg_select_arr_m.png') no-repeat right center; background-size:3.3rem; border:1px solid #666; font-weight: 400; font-size:1.5rem; line-height:3.8rem; color: #666; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:5px; box-sizing:border-box;} select.base::-ms-expand{display:none;} /*[e] All Style */ /* [s] Intro */ .intro_wrap{display:flex; flex-flow:row wrap;} .intro_wrap .int_wr{width:50%; height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; color:#fff; position:relative; z-index:1;} .intro_wrap .int_wr .cont_wr{transition: all 0.3s ease-out;} .intro_wrap .int_wr .en_tit{display:block; margin:0 auto 2.2rem; width:fit-content; padding:0 1.5rem; font-size:2.6rem; line-height:4rem; font-weight:700; border-radius:3rem; box-shadow:1rem 1rem 1.5rem rgba(0,0,0,0.21);} .intro_wrap .int_wr em{font-size:7.2rem; line-height:1.3; font-weight:900; text-shadow:0.4rem 0.4rem 1.7rem rgba(0,0,0,0.21); } .intro_wrap .int_wr p{margin-top:3.7rem; font-size:2.7rem; line-height:3.5rem; font-weight:400; color:#fff; transition:all 0.3s ease-out;} .intro_wrap .int_wr p b{font-weight:900;} .intro_wrap .int_wr .btn_box{margin-top:5.5rem;} .intro_wrap .int_wr .btn_box a{display:inline-block; padding:1.7rem; min-width:17rem; font-size:2rem; line-height:1.3; font-weight:700; color:#fff; border-radius:3rem;} .intro_wrap .int_wr .bg_box{position:absolute; inset:0 0 0 0; z-index:-1;} .intro_wrap .int_wr .bg_box img{width:100%; height:100%; object-fit:cover;} .intro_wrap .int_wr .bg_box::after{content:""; display:block; background-color:rgba(0,0,0,0.7); position:absolute; inset:0 0 0 0; z-index:1; opacity:1; transition:all 0.3s ease-out;} .intro_wrap .int_brand .en_tit{background-color:#962d25; color:#fff} .intro_wrap .int_brand em{color:#8e0101} .intro_wrap .int_brand p{color:#fff} .intro_wrap .int_brand .btn_box a{background-color:#1d2bc2;} .intro_wrap .int_franchise .en_tit{background-color:#faf7ec; color:#962d25} .intro_wrap .int_franchise em{color:#fff} .intro_wrap .int_franchise .btn_box a{background-color:#ae1e23;} @media (hover: hover) and (pointer: fine) { .intro_wrap .int_wr:hover .cont_wr{transform:translateY(-20rem);} .intro_wrap .int_wr:hover .bg_box::after{opacity:0;} .intro_wrap .int_brand:hover p{color:#221815} } /* [e] Intro */ /*[s] Main Popup Style */ #hd_pop {z-index:101;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops{width:auto !important; max-width:100%; height:auto !important; background-color:#fff; border:1px solid #333; position:absolute; display:block; overflow:hidden; box-sizing:border-box;} .hd_pops img{width:100%} .hd_pops_con{} .hd_pops_footer{padding:0; background-color:#333; font-size:1.4rem; color:#fff; text-align:left;position:relative} .hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button{padding:1rem; border:0; color:#fff} .hd_pops_footer .hd_pops_reject{text-align:left} .hd_pops_footer .hd_pops_close{position:absolute;top:0;right:0} /*[e] Main Popup Style */ /*[s] Main Style */ .mScrolls{width:100%; font-size:0; line-height:0; text-align: center; position: absolute; left:0; bottom:40px; z-index:8; display:block; animation-duration: .7s; animation-iteration-count:infinite; animation-name: scrollDown; animation-timing-function:ease-in-out; animation-direction:alternate; } @keyframes scrollDown { from {bottom:50px; opacity:1;} to {bottom:30px; opacity:0.5} } .mTitle{margin-bottom:7rem; color: #fff; text-align: center;} .mTitle>dt{margin-bottom:3.5rem; padding-bottom:4rem; background: url("../img/line_white.png") no-repeat center bottom; background-size: 7.8rem; font-family:"S-CoreDream-9Black"; font-size:4.8rem; line-height:1;} .mTitle>dd{font-family: 'S-CoreDream-4Regular'; font-size:2rem; line-height:1.6;} .mTitle.black{color: #111;} .mTitle.black>dt{background-image: url("../img/line_black.png");} .main_btn_box a{display:inline-block; min-width:19rem; padding:2rem 3rem 1.9rem; font-size:2rem; line-height:1.3; color:#fff; font-weight:600; text-align:left; background-color:var(--point); border-radius:3.5rem; position:relative;} .main_btn_box a::after{content:""; display:block; margin-top:-0.65rem; width:0.8rem; height:1.3rem; background:url("/images/main/main_btn_arrw.svg") no-repeat center; background-size:contain; position:absolute; top:50%; right:2.3rem;} .main_sect_top h3{font-size:5.6rem; line-height:1.3; font-weight:700;} .main_sect_top p{margin-top:2rem; font-size:2.8rem; line-height:1.4;} /* visual */ #main-visual, #main-visual .main-slider, #main-visual .main-slider .slick-slide, #main-visual .main-slider .slide-media, #main-visual .main-slider .mobile_in{height:1030px !important;} #main-visual .main-slider .mobile_in{width: 242vw; position: relative; left:50%; transform: translateX(-50%);} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{width:100% !important; height:110% !important; position: absolute; left:0 !important; top:0 !important; transform: translate(0%, 0%);} #main-visual{width:100%; margin-bottom: 5rem; background:#36465d url('/theme/prix/img/loading.gif') no-repeat center center; background-size: contain; font-size:0; line-height:0; position: relative; overflow:hidden;} #main-visual .main-slider{width: 100%; background-color:#36465d; position: relative; opacity: 0; visibility: hidden; transition:all 3s ease;} #main-visual .main-slider.slick-initialized{opacity: 1; visibility: visible;} #main-visual .main-slider .slick-slide{position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider .slick-slide:before{content: ''; width: 100%; height: 100%; background-color: #000; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .3; z-index: 1;} #main-visual .main-slider video {width: auto; height: auto; min-width: 100%; min-height: 100%; display: block; position: absolute; left: 50%; top: 50%; transform:translate(-50%, -50%);} #main-visual .main-slider iframe {position: relative; pointer-events: none;} #main-visual .main-slider figure {height: 100%; margin:0; position: relative;} #main-visual .main-slider .slide-image {height: 100%; background-size: cover; background-position: center; opacity: 0; transition:all .8s ease;} #main-visual .main-slider .slide-image{opacity: 1;} #main-visual .main-slider .image-entity {width: 100%; opacity: 0; visibility: hidden;} #main-visual .main-slider .loading {width: 100%; position: absolute; left: 0; top: 44%;} #main-visual .main-slider .slide-media {background-repeat: no-repeat; background-position: center center; background-size: cover; animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .caption{position: absolute; left: 5%; top: 44%; text-align: center; padding: 20px; border: 3px solid; color: #fff; margin: 0; font-size: 40px; font-weight: bold; letter-spacing: .02em; opacity: 0; z-index: 1; transition:all .3s ease; transform:translateY(100px); -webkit-backface-visibility: hidden; backface-visibility: hidden;} #main-visual .main-slider .slick-active{z-index: 1;} #main-visual .main-slider .slick-active .slide-media{animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);} #main-visual .main-slider .slick-active .caption{opacity: 1; transform:translateY(0); transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;} #main-visual .slick-arrow{width:47px; height:90px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer;} #main-visual .slick-prev{background-image: url("../img/main/btn_slick_prev.png"); left:100px;} #main-visual .slick-next{background-image: url("../img/main/btn_slick_next.png"); right:100px;} #main-visual .slick-arrow:hover{opacity:1;} #main-visual .controll{width:260px; padding-top:0; margin-left:-130px; position: absolute; left: 50%; bottom: 5rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between;} #main-visual .controll .dot{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{display:inline-block; vertical-align: middle;} #main-visual .controll .auto{padding-left:10px;} #main-visual .controll .auto button{width:27px; height:27px; background:transparent url("../img/btn_slick_pause.png") no-repeat left top; border:none;} #main-visual .controll .auto button.off{background-image:url("../img/btn_slick_play.png");} #main-visual .slick-dots{display:flex; flex-wrap: nowrap; justify-content: flex-start;} #main-visual .slick-dots>li{width:auto !important; padding:0 !important; display:inline-block; vertical-align: top;} #main-visual .slick-dots>li+li{margin-left:0;} #main-visual .dot_Line, #main-visual .dot_Line>dt, #main-visual .dot_Line>dd .line{transition: all .3s ease-out; transform-origin: 50% 50%;} #main-visual .dot_Line>dd .line>span{} #main-visual .vTxt.first .dot_Line>dd .line>span{} #main-visual .dot_Line{padding-right:10px; box-sizing: border-box; position: relative;} #main-visual .dot_Line>dt{font-weight: 500; font-size:15px; line-height:1; color: rgba(255,255,255,0.3); white-space: nowrap;} #main-visual .dot_Line>dd{position: absolute; left:27px; right:10px; top:50%;} #main-visual .dot_Line>dd .line{width:100%; height:2px; background-color: rgba(255,255,255,0.3); display:inline-block; vertical-align: middle; position: relative; overflow:hidden;} #main-visual .dot_Line>dd .line>span{width:100%; height:2px; background-color: rgba(255,255,255,1); display:inline-block; position: absolute; left:-100%; top:0;} #main-visual .slick-dots>li.slick-active .dot_Line{padding-right:120px;} #main-visual .slick-dots>li.slick-active .dot_Line>dt{color: rgba(255,255,255,1);} #main-visual .slick-dots>li.slick-active .dot_Line>dd .line{width:100%;} #main-visual .slick-dots>li.slick-active .dot_Line>dd .line>span{} @keyframes slideIn { from { filter:blur(15px); } to { filter:blur(0); } } @keyframes slideOut { from { filter:blur(0); } to { filter:blur(15px); } } /* visual */ #mVisual{width:100%; font-size:0; line-height:0; position: relative; overflow:hidden;} #mVisual .visualRoll{white-space: nowrap;} #mVisual .visualRoll .slider{width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; font-size:0; line-height:0; position: relative; overflow:hidden; display:inline-block; vertical-align: top;} #mVisual .visualRoll .slider img{width:100%; max-width:none; height:100vh; min-height:70rem; object-fit: cover;} #mVisual .slick-arrow{width:35px; height:63px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; border:none; font-size:0; line-height:0; position: absolute; top:50%; z-index:7; transform: translateY(-50%); cursor: pointer; opacity:1;} #mVisual .slick-prev{background-image: url("/images/main/btn_slick_prev.png"); left:4.25%;} #mVisual .slick-next{background-image: url("/images/main/btn_slick_next.png"); right:4.25%;} #mVisual .slick-arrow:hover{opacity:1;} #mVisual .vTxtArea{width:100%; height:100%; max-width:1400px; text-align: left; position: absolute; left:50%; top:0; transform: translateX(-50%); z-index:5; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; box-sizing: border-box;} #mVisual .vTxtArea::before {content: ""; position: absolute; bottom: -1px; right: 10rem; background: url("/images/main/main__btm.png") no-repeat center; width: 29.5rem; height: 24.2rem; background-size: contain; } #mVisual .vTxtArea .vTxt_in{width:100%; position: relative;} #mVisual .vTxt{width:100%; position: absolute; left:0; top:-999px; text-align: center;} #mVisual .vTxt .ii{top:50px; text-align: center; display:block; opacity: 0; position: relative; word-break:keep-all; word-wrap:break-word;} #mVisual .vTxt .i01{-webkit-transition-delay: .4s; transition-delay: .4s;} #mVisual .vTxt .i02{-webkit-transition-delay: .45s; transition-delay: .45s;} #mVisual .vTxt .i03{-webkit-transition-delay: .5s; transition-delay: .5s;} #mVisual .vTxt .i04{-webkit-transition-delay: .55s; transition-delay: .55s;} #mVisual .vTxt .i05{-webkit-transition-delay: .6s; transition-delay: .6s;} #mVisual .vTxt .i06{-webkit-transition-delay: .65s; transition-delay: .65s;} #mVisual .vTxt .i07{-webkit-transition-delay: .7s; transition-delay: .7s;} #mVisual .vTxt .ii.logo{} #mVisual .vTxt .ii.logo.i01{} #mVisual .vTxt .ii.logo.i01 img{height:16.4rem;} #mVisual .vTxt .ii.logo.i02{margin-top:2rem;} #mVisual .vTxt .ii.logo.i02 img{height:4.7rem;} #mVisual .vTxt .ii.tit{font-weight: 600; font-size:5.2rem; line-height:1.7; color: #f8f8f8; text-shadow:0 0 10px rgba(0,0,0,0.5);} #mVisual .vTxt .ii.tit span {position: relative; font-weight: 700; color: #c8030a;} #mVisual .vTxt .ii.tit span::before {position: absolute; content: ""; background-color: #faad08; border-radius: 99%; width: 1rem; height: 1rem; top: -1.5rem; left: 1.9rem; } #mVisual .vTxt .ii.tit span::after {position: absolute; content: ""; background-color: #faad08; border-radius: 99%; width: 1rem; height: 1rem; top: -1.5rem; right: 1.9rem; } #mVisual .vTxt .ii.txt{padding-top:3rem; font-size:3.6rem; font-weight:500; line-height:1.7; color: rgba(255,255,255,1);} #mVisual .vTxt .ii.tip a {transition: .3s ease; width: 16rem; height: 5rem; border-radius: 3rem; margin: 7rem auto 0; font-size:1.6rem; line-height:1.7rem; color: rgba(255,255,255,1);display: inline-flex;gap: 1.5rem; justify-content: center; align-items: center; background-color: #ae1e23;} #mVisual .vTxt .ii.tip a:hover { font-weight: 500; background-color: rgba(247,247,219,0.95); color: #ae1e23; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);} #mVisual .vTxt .ii.tip a:hover img { filter: invert(19%) sepia(100%) saturate(2735%) hue-rotate(345deg) brightness(71%) contrast(94%); } #mVisual .slick-dots{width:100%; text-align: center; position: absolute; left:0; bottom:4rem; z-index:3; display:none !important;} #mVisual .slick-dots>li{display:inline-block; vertical-align: top;} #mVisual .slick-dots>li+li{margin-left:1.5rem;} #mVisual .slick-dots>li button{width:2rem !important; height:2rem; margin:0; padding:0; background-color:#cdcdcc; border:none; font-size:0; line-height:0; cursor: pointer; box-sizing: border-box; border-radius:99px;} #mVisual .slick-dots>li.slick-active button{background-color:#ae1e23; } #mVisual .vTxt.active{position: static; top:0px;} #mVisual .vTxt.active .ii{top:0px; opacity:1;} /* visual */ #mainVisual .video_wr{width:100%; height:94rem; overflow:hidden; position:relative;} #mainVisual .video_wr::after{content:""; display:block; position:absolute; inset:0 0 0 0; z-index:2;} #mainVisual .video_wr iframe{position:absolute; top:50%; left:50%;z-index:1; transform:translate(-50%, -50%); width:100%; height:100%; min-width:2000px; min-height:1360px; vertical-align:middle; object-fit:cover;} /* 브랜드 */ .main_brand{padding:10rem 0 17rem; text-align:center;} .main_brand .symbol_box img{width:19.3rem;} .main_brand .logo_li{max-width:73rem; margin:6.3rem auto 0; display:flex; gap:3rem 17.6rem; flex-flow:row wrap; align-items:center;} .main_brand .logo_li li:nth-child(1) img{width:29.5rem;} .main_brand .logo_li li:nth-child(2) img{width:19.7rem;} .main_brand .cont_txt{margin-top:8rem; font-size:3rem; line-height:1.5; color:#222; font-weight:700;} .main_brand .main_btn_box{margin-top:4rem;} /* 열정 스토리 */ .main_story{padding:8rem 0 5.5rem; background:url("/images/main/main_story_bg.jpg") no-repeat center / cover;} .main_story .main_sect_top{text-align:center; color:#fff;} .main_story .main_sect_top h3{color:#fff;} .main_story .m-tab{margin:7.5rem 0 5.5rem; display:flex; justify-content:center; gap:4rem;} .main_story .m-tab a{display:inline-block; width:12rem; height:6.5rem; line-height:6.3rem; font-size:2rem; font-weight:700; color:#fff; text-align:center; border-radius:3.5rem; border: 1px solid #fff; transition:all 0.3s ease-out;} .main_story .m-tab a.active{background-color:rgba(255,255,255,0.5);} .main_story .main_story_bo{display:none;} .main_story .main_story_bo .sw_container{max-width:116.2rem; margin:0 auto; overflow:hidden;} .main_story .main_story_bo .swiper-slide-active::after, .main_story .main_story_bo .swiper-slide-next::after{content:""; display:block; width:1px; height:100%; background-color:rgba(255, 255, 255, 0.3); position:absolute; top:0; right:-5rem;} .main_story .main_story_bo .swiper-slide a{display:block;} .main_story .main_story_bo .swiper-slide .thumb{border-radius:1rem; overflow:hidden; background-color:#fff;} .main_story .main_story_bo .swiper-slide .thumb img{vertical-align:top; width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;} .main_story .main_story_bo .swiper-slide a > p{display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break:break-all !important;} .main_story .main_story_bo .swiper-slide .lt_bo_tit{margin-top:1.5rem; font-size:2.2rem; line-height:1.3; font-weight:600; color:#fff;} .main_story .main_story_bo .swiper-slide .lt_bo_txt{margin-top:1rem; font-size:2rem; line-height:1.3; font-weight:500; color:#ccc;} .main_story .main_story_bo .view_btn{margin-top:5.5rem; text-align:center;} .main_story .main_story_bo .view_btn a{font-size:1.8rem; line-height:1.3; font-weight:700; color:#fff;} .main_story .main_story_bo .view_btn a::before{content:""; display:inline-block; margin-right:0.8rem; width:1.4rem; height:1.4rem; background:url("/images/main/view_plus_ico.svg") no-repeat center / contain;} @media (hover: hover) and (pointer: fine) { .main_story .m-tab a:hover{background-color: rgba(255, 255, 255, 0.3);} } /* 인스타그램 */ .main_insta{padding:17rem 0 20rem; background:url("/images/main/main_insta_bg.jpg") no-repeat center / cover;} .main_insta .main_sect_top{text-align:center;} .main_insta .main_sect_top h3{color:#e4141b} .main_insta .main_sect_top p{margin-top:0; font-size:3rem; line-height:1.3; font-weight:600;} .main_insta .m_insta_sw{max-width:140rem; margin:11rem auto 0; padding:0 7rem; position:relative;} .main_insta .m_insta_sw .sw_container{max-width:117rem; margin:0 auto; overflow:hidden;} .main_insta .m_insta_sw .swiper-slide{border-radius:1rem; overflow:hidden;} .main_insta .m_insta_sw .swiper-slide img{width:100%; height:100%; vertical-align:top; aspect-ratio:260/345; object-fit:cover;} .main_insta .m_insta_sw .swiper-button{width:auto; height:auto; opacity:1;} .main_insta .m_insta_sw .swiper-button-prev{left:0;} .main_insta .m_insta_sw .swiper-button-next{right:0} .main_insta .m_insta_sw .swiper-button::after{width:5rem; height:5rem; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center; background-size:contain;} .main_insta .m_insta_sw .swiper-button-prev::after{background-image:url("/images/main/sw_btn_prev.svg");} .main_insta .m_insta_sw .swiper-button-next::after{background-image:url("/images/main/sw_btn_next.svg");} .main_insta .m_insta_sw .swiper-pagination{width:100%; display:none; justify-content:center; gap:0.8rem; position:absolute; left:0; top:0; z-index: 1;} .main_insta .m_insta_sw .swiper-pagination .swiper-pagination-bullet{width:0.5rem; height:0.5rem; background-color:#1d2bc2; opacity:0.5;} .main_insta .m_insta_sw .swiper-pagination .swiper-pagination-bullet-active{opacity:1;} /* 가맹문의 */ .main_frchs{padding:28rem 0 19rem; position:relative; overflow:hidden;} .main_frchs::after{content:""; display:block; width:calc(100% - 50rem); max-width:120.5rem; height:114.7rem; border-radius:57.4rem 0 0 57.4rem; background:url("/images/main/main_frchs_bg.jpg") no-repeat center / cover; position:absolute; right:0; top:50%; transform:translateY(-50%);} .main_frchs .cont_wr{width:50rem;} .main_frchs .main_sect_top h3{color:var(--point)} .main_frchs .main_sect_top p{color:#222} .main_frchs .main_sect_top p span{font-weight:700;} .main_frchs .main_btn_box{margin-top:17.2rem;} /* 메뉴 소개 */ #menu_introduction{width:100%; padding:12rem 0 13rem; position: relative;} #menu_introduction:before{content: ""; width: 50%; height: 100%; background-color: #7cb640; display:block; position:absolute; left: 0; top:0px;} #menu_introduction .inConts{display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; z-index:2;} #menu_introduction .inConts .mTitle{width:34.64%; margin-bottom:0; text-align: left;} #menu_introduction .inConts .mTitle>dt{background-position: left bottom;} #menu_introduction .inConts .photo_list{width:65.36%;} #menu_introduction .slickArr{margin-top:4.5rem; position: relative;} #menu_introduction .slick-arrow{width:6rem; height:6rem; background-color: transparent; border:1px solid #fff; font-family: 'Noto Sans KR'; font-size:2.2rem; line-height:1; color: #fff; text-align: center; display:inline-block; vertical-align: top; cursor: pointer; opacity:1; border-radius:99px;} #menu_introduction .slick-prev{} #menu_introduction .slick-next{margin-left:1.2rem;} #menu_introduction .slick-arrow:hover{background-color: #fff; color: #7cb640;} /* 메뉴 갤러리 */ #menu_gallery{width:100%; height:93.9rem; background: url("../img/main/bg_menuGallery.jpg") no-repeat center top; background-size: cover; display: flex; flex-direction: row; align-items: center; justify-content: center;} #menu_gallery .menu_in{width:100%;} #menu_gallery .swiper-button{width:162px; height:32px; background-color: transparent; background-repeat: no-repeat; border:none; font-size:1.7rem; line-height:3.2rem; color: #fff; position: absolute; left:50%; top:50%; z-index:7; transform: translate(-50%, -50%); cursor: pointer; opacity:1;} #menu_gallery .swiper-button-prev{background-image: url("../img/main/btn_slick_prev2.png"); background-position: right top; margin-left:-350px; text-align: left; justify-content: flex-start;} #menu_gallery .swiper-button-next{background-image: url("../img/main/btn_slick_next2.png"); background-position: left top; margin-left:350px; text-align: right; justify-content: flex-end;} #menu_gallery .swiper-button:after{display:none !important;} #menu_gallery .performanceSlide{padding-top:3.5rem;} #menu_gallery .performanceSlide .swiper-wrapper{} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide{width:50rem; transform: scale(0.76) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide .thumb:before{content: ""; background-color:rgba(0,0,0,0.5); display:block; position:absolute; left: 0; top:0px; right: 0; bottom:0px; z-index:2;} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-prev{transform: translateX(-50px) scale(0.76) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-next{transform: translateX(50px) scale(0.76) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-active{transform: scale(1.2) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-active .thumb:before{background-color:rgba(0,0,0,0);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-active .gall_cont .area .in_area .title{top:0rem; opacity:1;} #menu_gallery .swiper-pagination{display:none !important;} /* 창업문의 */ #startup_inquiry{padding:16rem 0; background:#f8f8f8 url("../img/main/bg_startup_inq.png") no-repeat -5px bottom; position: relative;} #startup_inquiry .startup_info{margin-bottom:7rem; text-align: center; display: flex; justify-content: center;} #startup_inquiry .startup_info>dl{padding:0 4rem;} #startup_inquiry .startup_info>dl>dt{} #startup_inquiry .startup_info>dl>dt>span{width:3.8rem; height:3.8rem; background-color: #ae1e23; font-size:1.8rem; line-height:3.8rem; color: #fff; border-radius:99px; display:inline-block;} #startup_inquiry .startup_info>dl>dd{min-width:32rem; min-height:7.6rem; margin-top:-1.9rem; padding:2rem 4rem; background-color: #f8f8f8; border:2px solid #e5e5e5; font-size:2.2rem; line-height:1.4; color: #222; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius:99px;} #startup_inquiry .startup_map{width:100%; text-align: center; border-radius:20px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow:hidden; box-shadow:5px 5px 20px rgba(0,0,0,0.1);} #startup_inquiry .startup_map .img{width:37%; background-color: #ae1e23;} #startup_inquiry .startup_map .store{width:63%;} #startup_inquiry .startup_map .store select, #startup_inquiry .startup_map .store input[type=text], #startup_inquiry .startup_map .store input[type=submit]{width:100%; height:4.9rem; padding:0 1.5rem; background-color: #fff; border:2px solid #ededed; font-size:1.6rem; line-height:4.5rem; color: #888; display:inline-block; vertical-align: top; border-radius:4px;} #startup_inquiry .startup_map .store select{padding:0 6rem 0 1.5rem; background-image: url('/theme/prix/img/board/bg_select.svg'); background-repeat: no-repeat; background-position:calc(100% - 1rem) center; background-size: 1.7rem; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #startup_inquiry .startup_map .store select::-ms-expand{display:none;} #startup_inquiry .startup_map .store input[type=text]{width:100%; border-right:none; border-radius:4px 0 0 4px;} #startup_inquiry .startup_map .store input[type=submit]{width:5.5rem; padding:0; background:#aaa url('/theme/prix/img/btn_search.png') no-repeat center center; background-size: 1.9rem; border-left:none; font-size:0; line-height:0; border-radius:0 4px 4px 0; cursor: pointer;} #startup_inquiry .startup_map .store select + select{margin-left:2rem;} #startup_inquiry .startup_map .store .tit{padding-bottom:3.5rem; font-size:2.8rem; line-height:1; color: #111;} #startup_inquiry .startup_map .store .form{width:73%; margin:0 auto;} #startup_inquiry .startup_map .store .form_re{padding:1rem 0; display: flex; justify-content: space-between;} /*[e] Main Style */ /*[s] Sub Style */ .pg_top_bann{margin-top:-6rem; position:relative;} .pg_top_bann .img_area{overflow:hidden;} .pg_top_bann .img_area img{width:100%; height:65rem; object-fit:cover; vertical-align:top;} .pg_top_bann .pg_top_txt{width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; color:#fff; text-align:center; position:absolute; left:0; top:0; z-index:1;} .pg_top_bann .pg_top_txt .txt_b{font-size:5.6rem; line-height:1.3; font-weight:600;} .pg_top_bann .pg_top_txt .txt_s{margin-top:3rem; font-size:2.8rem; line-height:1.4;} .cmmn_tit{font-size:3.6rem; line-height:1.3; font-weight:700; color:#222} .bl_c{color:var(--point) !important} /* HISTORY */ .historyArea{font-size:0; line-height:0; position: relative;} .historyArea:before{content: ""; width: 0.6rem; margin-left:-0.3rem; background-color: rgba(221,221,221,0.8); display: inline-block; position:absolute; left: 50%; top:1.5rem; bottom:10rem;} .historyArea>li{text-align: right; position: relative; z-index:2;} .historyArea .txt_wrap{width:50%; padding:0 4rem; text-align: left; display:inline-block; vertical-align: top; box-sizing: border-box; position: relative;} .historyArea .txt_wrap:before{content: ""; width: 2.4rem; height:2.4rem; background-color:#333; border:4px solid #fff; display: inline-block; position:absolute; left: -1.2rem; top:1rem; border-radius:999px; box-sizing: border-box;} .historyArea .txt_wrap>strong{font-weight: 500; font-size:3.6rem; line-height:1; color: #333; display:block;} .historyArea .txt_wrap>ul{margin:2rem 0 4rem;} .historyArea .txt_wrap>ul>li{margin-top:1rem; padding-left:1.2rem; font-size:1.6rem; line-height:1.6; color: #666; position: relative;} .historyArea .txt_wrap>ul>li:before{content: "-"; position:absolute; left: 0; top:0px;} .historyArea>li:nth-child(even){text-align: left;} .historyArea>li:nth-child(even) .txt_wrap{text-align: right;} .historyArea>li:nth-child(even) .txt_wrap:before{left:auto; right: -1.2rem;} .historyArea>li:nth-child(even) .txt_wrap>ul>li{padding:0 1.2rem 0 0;} .historyArea>li:nth-child(even) .txt_wrap>ul>li:before{left:auto; right:0;} .historyArea.month .txt_wrap>ul>li{padding-left:4.3rem;} .historyArea.month .txt_wrap>ul>li:before{content: attr(data-month)"월"; color: #333;} .historyArea.month>li:nth-child(even) .txt_wrap>ul>li{padding:0 4.3rem 0 0;} .historyArea.admin .txt_wrap>ul>li{padding:0 3rem !important;} .historyArea.admin .txt_wrap>ul>li:before{display:none;} .historyArea.admin .txt_wrap>ul>li .checkIn.noTxt{position: absolute; left:0; top:0rem;} .historyArea.admin>li:nth-child(even) .txt_wrap>ul>li .checkIn.noTxt{left:auto; right:0;} .etc_clause{width:90%; margin:0 auto; padding:60px 80px 80px; background-color: #fdfdfd; border:1px solid #cecece; font-size:0; line-height:0; text-align: center; box-sizing:border-box; border-radius:10px; position: relative;} .etc_clause:before, .etc_clause:after{content:"";position:absolute;z-index:-1;top:2%;bottom:0;left:10px;right:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8);-moz-border-radius:100px / 10px; border-radius:100px / 10px;} .etc_clause:after{right:10px;left:auto;-webkit-transform:skew(8deg) rotate(3deg);-moz-transform:skew(8deg) rotate(3deg);-ms-transform:skew(8deg) rotate(3deg);-o-transform:skew(8deg) rotate(3deg);transform:skew(8deg) rotate(3deg);} .etc_clause .logo{margin:0;} .etc_clause .logo img{} .etc_clause .txt{padding:15px 0 55px; font-weight: 300; font-size:18px; line-height:1; color: #636363;} .etc_clause .txt>span{font-weight: 400; color: #1b1b1b;} .etc_clause .scroll{font-weight:300; font-size:16px; line-height:1.8; color: #626262; text-align: left;} .etc_select{width:90%; margin:0 auto 2rem;} .etc_select select.base{width:17rem;} /*[e] Sub Style */ /*[s] Plugin Style */ /* Layer Style */ /*.layerArea .layerIn .layerBgIn{width:0px; height:0px; background-color: rgba(255,255,255,0.7); position:absolute; left:50%; top:50%; z-index:100; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;}*/ .layerCell{display:none;} .layerArea{width:0px; height:0px; background-color: rgba(0,0,0,0.7); position:fixed; left:50%; top:50%; z-index:99; overflow:hidden; overflow-y:auto; -webkit-transition: .5s; transition: .5s; transform-origin: 50% 50%;} .layerArea.one, .layerArea.two{width:100%; height:100%; left:0%; top:0%;} .layerArea.two .layerBgIn{width:100%; height:100%; left:0%; top:0%;} .layerArea .closeLy{width:1.7rem; height:1.7rem; display:inline-block; position: absolute; right:0; top:0;} .layerArea .closeLy:before, .layerArea .closeLy:after{content: ""; background-color: #080808; position: absolute; left:50%; top:50%;} .layerArea .closeLy:before{width: 100%; height: 2px; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy:after{width: 2px; height: 100%; transform:translate(-50%, -50%) rotate(45deg);} .layerArea .closeLy.type02{width:2.3rem; height:2.3rem; right:3rem; top:3rem;} .layerArea .closeLy.type02:before, .layerArea .closeLy.type02:after{background-color: #676767;} .layerArea .layerIn{width:100%; height:100%; display: table; position:relative;} .layerArea .layerIn .layerCell{width:100%; height:100%; padding:70px 0; display: table-cell; vertical-align:middle; position:relative; box-sizing: border-box;} .layerArea .layerIn .layerBox{margin:0 auto; background-color: #fff; font-size:0; line-height:0; display:none; position: relative; box-sizing: border-box; z-index:99; border-radius:1rem;} /* .layerArea .layerIn .layerBox>.tit_lay{padding:25px 25px 15px;} .layerArea .layerIn .layerBox>.tit_lay>strong{font-size:16px; line-height:1; color:#00a9cc;} */ .layerArea .layerIn .layerBox .contLy{position: relative;} .downlay{width:100%; padding:10rem 0; border-radius:0 !important;} .downlay .closeLy{top:-5rem;} .downlay>.contLy{width:64.5rem; margin:0 auto; text-align: center;} .downlay .title{padding-bottom:5rem; font-weight: bold; font-size:3rem; line-height:1; color: #000;} .downlay .title>strong{color: #23abaf;} .downlay .utllBox{width:47.6rem; margin:0 auto; display:table; table-layout: fixed;} .downlay .utllBox>*{width:50%; display:table-cell; vertical-align: top; box-sizing: border-box;} .downlay .utllBox .tit{font-size:1.5rem; line-height:1; color: #666;} .downlay .utllBox .txt{margin-top:2.5rem; font-size:1.2rem; line-height:1; color: #888;} .downlay .utllBox .icon{height:15rem; margin-top:3rem; display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center;} .downlay .utllBox .icon>p+p{margin-top:2rem;} .downlay .utllBox>.qr{border-left:1px solid #dadada;} .downlay .utllBox>.store img{width:16.8rem;} .downlay .utllBox>.qr img{width:15rem;} .formLay{width:62rem; padding:7rem 5rem 6rem; border-radius:1rem;} .formLay input[type=text]{width:100%; height:5.4rem; padding:0; background-color:#fff; border-bottom:2px solid #e8e8e8; font-size:1.8rem; line-height:5.2rem; color:#666; box-sizing: border-box; vertical-align:middle; display:inline-block;} .formLay .title{padding-bottom:3.5rem; border-bottom:1px solid #333; font-weight: 500; font-size:2.6rem; line-height:1; color: #1b1b1b;} .formLay .textBox{width:62rem; margin:-1px 0 0 -5rem; padding:4rem 0; background-color: #f6f7fa; border-top:1px solid #ececec; border-bottom:1px solid #ececec; font-size:1.9rem; line-height:1; color: #1b1b1b; letter-spacing: -0.08em; text-align: center; position: relative; z-index:2;} .formLay .textBox>span{color: #149699;} .formLay .launchingForm{margin-top:1rem;} .formLay .launchingForm>li{padding-top:4rem;} .formLay .launchingForm>li>dl{} .formLay .launchingForm>li>dl>dt{font-weight: 500; font-size:1.9rem; line-height:1; color: #1b1b1b;} .formLay .launchingForm>li>dl>dd{height:6.4rem; padding-top:1rem; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: flex-start; box-sizing: border-box;} .formLay .launchingForm>li>dl>dd.two{flex-wrap: nowrap; justify-content: space-between; white-space: nowrap;} .formLay .launchingForm>li>dl .checkIn{} .formLay .launchingForm>li.two{display: flex; justify-content: space-between;} .formLay .launchingForm>li.two>dl{width:48%;} .formLay .launchingForm>li .clauseView{font-size:1.7rem; line-height:1; color: #989898;display:inline-block;} .formLay .launchingForm>li .clauseView>span{border-bottom:1px solid #999; padding:0.2rem 0 0.3rem; display:inline-block;} .formLay .btnArea{margin-top:6rem;} .privacylay{width:62rem; padding:7rem 5rem;} .privacylay .title{padding-bottom:3.5rem; font-weight: 500; font-size:2.8rem; line-height:1; color: #000; text-align: center;} .privacylay .clauseArea .scroll{padding:3.5rem 3.9rem; background-color: #f8f9fb; border:1px solid #eee; font-weight: 300; font-size:1.7rem; line-height:2.6rem; color: #666;} /* Img Over Bg Style */ #photo{width:960px;margin:0 auto; position:relative; overflow:hidden;} #photo>li{width:150px; height:150px; margin:5px; float:left; display:inline; overflow:hidden; } #photo>li>a{width:100%; height:100%; position: relative; display:block; overflow:hidden;} #photo>li>a>img{width:100%; height:100%; display:block; border-radius:5px;} #photo>li>a>.bg_l{width:100%; height:100%; background-color:red; position: absolute; left:0; top:0; display:none; opacity:0.3; border-radius:5px;} /* Notice One Line Style */ .mNoticeList{width:100%; height:60px; margin-top:25px; overflow:hidden; position: relative;} .mNoticeList>ul{width:100%; position: absolute; left:0; top:-60px;} .mNoticeList>ul>li{height:60px; position: relative;} .mNoticeList>ul>li>a{padding-left:73px; display:block; position: relative;} .mNoticeList .day{width:41px; padding-right:15px; border-right:1px solid #d5d1cc; font-weight: 600; font-size:12px; line-height:1; color: #b99764; text-align: center; position: absolute; left:0; top:0;} .mNoticeList .day>strong{font-weight: 700; font-size:32px; line-height:1; display:block;} .mNoticeList dl.list{font-size:16px; line-height:20px; color: #876e49; word-break:keep-all; word-wrap:break-word;} .mNoticeList dl.list>dt{padding-bottom:6px; font-weight: 600; font-size:12px; line-height:1; color: #b99764;} /*[e] Plugin Style */ .cate_ul{ display: flex; align-items: center; gap: 1.5rem; justify-content: center; margin-bottom: 7rem;} .cate_ul>li{ flex:0 1 18rem; display:inline-block; vertical-align: top; position: relative;} .cate_ul>li a{transition: .3s ease; width:100%; height:5rem; padding:0 2rem; border:1px solid #ae1e23; font-weight: 400; font-size:1.8rem; line-height:1.4; color: #ae1e23; display:table; white-space: nowrap; border-radius:99px;} .cate_ul>li a>span{display:table-cell; vertical-align: middle; word-break:keep-all; word-wrap:break-word;} .cate_ul>li a.active {color: #fff; background-color: #ae1e23;} .sec1 {display: flex; } .sec1 > div {width: 50%;} .sec1 .left {position: relative; font-size: 0;} .sec1 .left .mySwiper {position: absolute; width: 100%; bottom: 13rem; left: 10rem;} .sec1 .left .mySwiper .swiper-wrapper {display: block;} .sec1 .left .mySwiper .swiper-slide {width: 10rem !important; height: 10rem; cursor: pointer; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);} .sec1 .left .mySwiper .swiper-slide + .swiper-slide {margin-top: 2rem;} .sec1 .left .mySwiper .swiper-slide-thumb-active {border: 1px solid #ae1e23;} .sec1 .left .mySwiper2 .swiper-pagination {color: #fff; font-size: 1.6rem ; width: 10rem; bottom: 9rem; left: 10rem;} .sec1 .left .mySwiper2.swiper-container {height: 100%;} .sec1 .left .mySwiper2.swiper-container img { object-fit: cover; height: 100%;} .sec1 .right {padding: 10rem 0; background: url('/images/main/sec1__bg.jpg') no-repeat bottom right;} .sec1 .right .txt {margin-right: 3rem; background: url('/images/main/sec1__icon.png') no-repeat top 9rem right 13rem #fff; position: relative; z-index: 2; display: inline-block; margin-left: -10rem; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2); padding: 17rem 13rem 15rem 13rem;} .sec1 .right .txt h5 {font-size: 4rem; font-weight: 500; color: #222; line-height: 1.3;} .sec1 .right .txt >b {font-size: 2.2rem; width: 600; color: #222; display: block; padding: 4rem 0 2rem;} .sec1 .right .txt >p {font-size: 1.9rem; width: 400; color: #555555;} .sec1 .swiper-button-next, .sec1 .swiper-button-prev {padding-bottom: 0.1rem; margin-top: 7rem; display: flex; align-items: center; justify-content: center; transition: .3s ease; position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 5.5rem; height: 5.5rem; border-radius: 99%; background-color: #fff; border: 1px solid #222;} .sec1 .swiper-button {display: flex ;align-items: center; gap: 2rem; } .sec1 .swiper-button-next:hover, .sec1 .swiper-button-prev:hover {background-color: #ae1e23; border-color: #ae1e23; } .sec1 .swiper-button-next:hover img, .sec1 .swiper-button-prev:hover img {filter: brightness(0) invert(1);} .sec1 .swiper-button-next:after, .sec1 .swiper-button-prev:after {display: none;} .tabs {display: flex; justify-content: center; text-align: center; gap: 2rem; width: 100%; padding: 5rem 0 4rem; } .tabs li {transition: .3s ease; display: flex; justify-content: center; align-items: center; background: transparent; border: 1px solid #eee; color: #eee; width: 17rem; height: 6rem; cursor: pointer; font-size: 1.7rem; font-weight: 600; border-radius: 3rem; } .tabs li.current{background: #ae1e23; border-color: #ae1e23;} .tabs li:hover {background: #ae1e23; border-color: #ae1e23;} .tab-content{display: none; } .tab-content.current{ display: block;} .sec2 {padding: 12rem 0; background: url('/images/main/sec2__bg.jpg') no-repeat center; background-size: cover; font-size: 0;} .sec2 .inConts {overflow: hidden;} .sec2 .sec2__Slide {position: relative;} .sec2 .sec2__Slide .swiper-button-next, .sec2 .sec2__Slide .swiper-button-prev {transition: .3s ease; margin-top: -6rem ; width: 5rem; height: 5rem; background-color: #fff; border: 1px solid #ddd;} .sec2 .sec2__Slide .swiper-button-prev {left: -2.5rem;} .sec2 .sec2__Slide .swiper-button-next {right: -2.5rem;} .sec2 .sec2__Slide .swiper-button-next:after, .sec2 .sec2__Slide .swiper-button-prev:after {color: #222; font-size: 1.5rem; font-weight: 900;} .sec2 .sec2__Slide .swiper-button-next:hover, .sec2 .sec2__Slide .swiper-button-prev:hover {background-color: #ae1e23; border-color: #ae1e23; } .sec2 .sec2__Slide .swiper-button-next:hover:after, .sec2 .sec2__Slide .swiper-button-prev:hover:after {color: #fff; } .sec2 .sec2__Slide .swiper-slide img {aspect-ratio: 54/38;} .sec2 .sec2__Slide p {text-align: center; font-size: 2.5rem; font-weight: 600; color: #fff; padding: 2rem 2rem 0; transition: .3s ease; opacity: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .sec2 .sec2__Slide .swiper-slide-active p {opacity: 1;} .main__txt {text-align: center;} .main__txt b {text-transform: uppercase; font-size: 2.6rem; font-weight: 700; color: #e6e6e6; display: block; } .main__txt h4 {font-size: 4.4rem; font-weight: 700; color: #fff; padding: 5rem 0 1rem; } .main__txt p {font-size: 2.4rem; font-weight: 400; color: #fff; } .mainBorder {position: relative; } .mainBorder::before {content: "" ; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0.8px; height: 8rem; background-color: rgba(255,255,255,0.5);} .sec3 {padding: 12rem 0 17rem;} .sec3.mainBorder::before {background-color: #5c5c5c;} .sec3 .main__txt b {color: #ae1e23;} .sec3 .main__txt h4 {color: #222;} .sec3 .main__txt p {color: #333333;} .sec3__flex {display: flex; gap: 4rem; padding: 8rem 0 0;} .sec3__flex > a {transition: .3s ease; flex: 1; gap: 1rem; display: flex; justify-content: space-between; align-items: center; padding: 7rem 6rem 7rem 9rem ;} .sec3__flex .left {background-color: #ae1e23; color: #fff;} .sec3__flex .right {background-color: #501315; color: #fff;} .sec3__flex .right .txt img {transition: .3s ease; filter: grayscale(100%) brightness(0);} .sec3__flex a .txt strong {font-size: 2.6rem; } .sec3__flex a .txt strong span {font-weight: 400; } .sec3__flex a .txt p {font-size: 1.9rem; font-weight: 400; padding: 1rem 0 2rem; } .sec3__flex a .txt b { font-size: 1.6rem; font-weight: 500; display: flex; gap: 1rem; align-items: center; } .sec3__flex > a:hover {box-shadow: 0 13px 20px 0 rgba(0,0,0,0.4);} /* .sec3__flex > a:hover {background-color: #111; color: #fff;} .sec3__flex > a.right:hover .txt img {filter:none} */ .sec4 {display: flex; font-size: 0;} .sec4 .sec4__box {flex: 1 50%; } .sec4 .sec4__box a {position: relative; display: block; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center;} .sec4 .sec4__box a b {position: absolute; z-index: 2; font-size: 3rem; font-weight: 700; color: #fff;} .sec4 .sec4__box a > div {display: flex; align-items: center; justify-content: center; overflow: hidden;} .sec4 .sec4__box a img {transition: .3s ease; object-fit: cover; height: 25rem;} .sec4 .sec4__box a:hover img {transform: scale(1.1);} /* .sec4 .sec4__box.left {background: url("/images/main/sec4__box01.jpg") no-repeat center; background-size: cover;} .sec4 .sec4__box.right {background: url("/images/main/sec4__box02.jpg") no-repeat center; background-size: cover} */ /* sub */ .znum_li{counter-reset:num_li;} .znum_li li{counter-increment:num_li;} .znum_li li::before{content:"0"counter(num_li); display:inline-block;} .asterisk_li li{position:relative; padding-left:1.5rem;} .asterisk_li li::before{content:"*"; display:block; position:absolute; left:0; top:0;} /*.story { background: url('/images/sub/story__bg.png') no-repeat bottom right #f5f5f5; padding: 10rem 0; background-size: 27%;}*/ .story { background-color:#f5f5f5; padding: 10rem 0; background-size: 27%; position: relative; overflow: hidden;} .story .img{width: 53.7rem; position:absolute; right: 0; bottom:-5rem;} .story section {display: flex; gap: 12rem; align-items: center; } .story section > div {width: calc((100% - 12rem)/2);} .story .swiper-pagination-bullet {width: 10px !important; height: 10px; background-color: #fff; opacity: 1;} .story .swiper-pagination-bullet-active {background-color: #ae1e23;} .story .swiper-button-next, .story .swiper-button-prev {background-color: #ae1e23; border-color: #ae1e23; width: 5rem; height: 5rem;} .story .swiper-button-next:after, .story .swiper-button-prev:after {color: #fff; font-size: 1.5rem; font-weight: 900; } .story__txt {padding: 18rem 0 0; position: relative;z-index:2;} .story__txt b {position: relative; font-size: 2.4rem; color: #222; display: block;} .story__txt b::before {content: ""; position: absolute; background: url('/images/sub/story__icon.png') no-repeat center; background-size: contain; width: 4.9rem; height: 7.9rem; left: 28rem; top: -6rem;} .story__txt strong {font-size: 3.4rem; color: #222; line-height: 1.2; display: block; padding: 1rem 0 3rem;} .story__txt strong span {color: #a52124;} .story__txt p {font-size: 2rem; color: #222; font-weight: 300;} .concept .swiper-slide {font-size: 0;} .concept .mySwiper2 .swiper-slide {margin-bottom: 2rem;} .concept .swiper-button-next, .concept .swiper-button-prev {background-color: #ae1e23; border-color: #ae1e23; width: 5rem; height: 5rem;} .concept .swiper-button-next:after, .concept .swiper-button-prev:after {color: #fff; font-size: 1.5rem; font-weight: 900; } .concept .mySwiper2 .swiper-slide img {aspect-ratio: 128/60;} .conc__Sec1 h4 {margin-bottom: 7rem; font-size: 5rem; font-weight: 700; color: #222; text-align: center; line-height: 1.2;} .conc__Sec1 h4 span {color: #ae1e23;} .conc__Sec1 .box {border: 1px solid #ddd;} .conc__Sec1 .flex {display: flex; font-size: 0;} .conc__Sec1 .flex >div {flex: 1 50%;} /* .conc__Sec1 .flex.btm {border-top: 1px solid #ddd;} */ .conc__Sec1 .flex .txt {padding-top: 9rem;} .conc__Sec1 .flex.top .txt {color: #222; text-align: right; padding-right: 7rem;} .conc__Sec1 .flex.btm .txt {color: #fff; background-color: #ae1e23; padding-left: 7rem;} .conc__Sec1 .flex .txt b {font-size: 4.5rem; line-height: 1.2;} .conc__Sec1 .flex .txt b span {font-weight: 400;} .conc__Sec1 .flex .txt p {font-size: 2.3rem; font-weight: 300; padding:3rem 0 0;} .conc__Sec1 .flex.top .txt p { color: #666666;} .conc__Sec1 .flex .txt a {transition: .3s ease; width: 16rem; height: 5rem; font-size: 1.8rem; border-radius: 3rem; color: #fff; line-height: 1.7rem; display: inline-flex; gap: 1rem; justify-content: center; align-items: center; background-color: #ae1e23;} .conc__Sec1 .flex.btm .txt a {background-color: #fff; color: #ae1e23;} .conc__Sec1 .flex.btm .txt a img {filter: invert(19%) sepia(100%) saturate(2735%) hue-rotate(345deg) brightness(71%) contrast(94%);} .conc__Sec1 .flex .txt a:hover { background-color: rgba(247,247,219,0.95); color: #ae1e23; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2);} .conc__Sec1 .flex .txt a:hover img {filter: invert(19%) sepia(100%) saturate(2735%) hue-rotate(345deg) brightness(71%) contrast(94%);} /* .conc__Sec1 .flex.btm .txt a:hover {background-color: rgba(255,255,255,0.9); } */ .conc__Sec2 {padding: 12rem 0;} .conc__Sec2 .img {text-align: center;} .conc__Sec2 h5 {font-size: 4rem; font-weight: 700; color: #222; text-align: center; margin-bottom: 7rem;} .conc__Sec2 .flex { display: flex; } .conc__Sec2 .flex > div {flex: 1 50%; padding: 6rem 9rem 0; color: #111;} .conc__Sec2 .flex .bg_color {width: 100%; height: 8rem; margin-bottom: 2rem;} .conc__Sec2 .flex b {font-size: 2.8rem;} .conc__Sec2 .flex p {font-size: 1.8rem; margin-top: 0.5rem;} .conc__Sec3 {text-align: center;} .conc__Sec3 h5 { font-size: 4rem; font-weight: 700; color: #222; text-align: center; margin-bottom: 7rem;} .conc__Sec3 .img {text-align: center;} .conc__Sec3 p {font-size: 2.2rem; color: #222;} .conc__Sec3 p.mg {margin: 5rem 0;} .conc__Sec3 .line {width: 70rem; height: 2px; background-color: #ebc7c8; margin: 5rem auto;} .conc__Sec3 ul {display: flex ; margin: 5rem 0 7rem;} .conc__Sec3 ul > li {flex: 1;} .conc__Sec3 ul > li b {display: inline-block; margin-bottom: 2rem; border-radius: 3rem; font-size: 2.2rem; font-weight: 400; color: #fff; width: 8rem; height: 4.8rem; line-height: 4.8rem; text-align: center; background-color: #ae1e23;} .conc__Sec4 {padding-bottom: 15rem;} .franchise_250122 .competitiveness {padding-bottom: 10rem;} .franchise_250122 .competitiveness ul {padding: 0 4rem;} .franchise_250122 .competitiveness ul li {display: flex; align-items: center; justify-content: center; gap: 8rem; } .franchise_250122 .competitiveness ul li + li {margin-top: 8rem;} .franchise_250122 .competitiveness ul li:nth-of-type(2n) {flex-direction: row-reverse;} .franchise_250122 .competitiveness ul li:nth-of-type(2n-1) .txt {text-align: right;} .franchise_250122 .competitiveness ul li > div {flex: 1} .franchise_250122 .competitiveness ul li .txt b {display: block; font-weight: 700; font-size: 3.4rem; color: #ae1e23;} .franchise_250122 .competitiveness ul li .txt strong {font-size: 2.8rem; color: #222; display: block; margin:1rem 0 2.5rem; line-height: 3.5rem;} .franchise_250122 .competitiveness ul li .txt p {font-size: 1.9rem; font-weight: 400; color: #666666; line-height: 2.7rem;} .franchise_250122 .competitiveness ul li:first-of-type {background: url('/images/sub/compet__bg01.png') no-repeat bottom left 7rem; background-size: 42rem ;} .franchise_250122 .competitiveness ul li:nth-of-type(2n) {background: url('/images/sub/compet__bg02.png') no-repeat bottom right 7rem; } .franchise_250122 .competitiveness ul li:last-of-type {background: url('/images/sub/compet__bg03.png') no-repeat bottom left 7rem;} .franchise_250122 .procedure {padding-bottom: 10rem;} .franchise_250122 .procedure ul {display: flex; flex-wrap: wrap; gap: 8rem 17rem;} .franchise_250122 .procedure ul li {position: relative; width: calc((100% - 34rem)/3); color: #ae1e23; text-align: center; padding: 8.5rem 0 3rem; border: 1rem solid #ae1e23; border-radius: 2rem; } .franchise_250122 .procedure ul li .num {position: absolute; top: -1rem; left: -1rem; background-color: #fff; padding: 3rem 3rem 1.5rem;} .franchise_250122 .procedure ul li .num span {display: block ; font-size: 1.6rem; font-weight: 800;} .franchise_250122 .procedure ul li .num b {display: block ; font-size: 4.5rem; font-weight: 800; line-height: 1;} .franchise_250122 .procedure ul li p {font-size: 2.2rem; font-weight: 600; margin-top: 1rem; line-height: 1.2;} .franchise_250122 .procedure ul li:last-of-type {background-color: #ae1e23; color: #fff;} .franchise_250122 .procedure ul li:last-of-type .num {background-color: transparent;} .franchise_250122 .procedure ul li::before {position: absolute; content: ""; width: 4rem; height: 4rem; top: 50%; right: -11rem; transform: translateY(-50%) ; background: url('/images/sub/procedure__arr.png') no-repeat center; background-size: contain ;} .franchise_250122 .procedure ul li:nth-of-type(3n)::before {display: none;} .franchise_250122 .expense {padding-bottom: 10rem;} .franchise_250122 .expense ul {display: flex; gap: 3rem;} .franchise_250122 .expense ul li {flex: 1; padding: 8rem 5rem 0; height: 34rem; border-radius: 3rem; border: 1px solid #999; color: #333;} .franchise_250122 .expense ul li b {font-size: 3.2rem; font-weight: 700; display: block; margin-bottom: 1rem; } .franchise_250122 .expense ul li p {font-size: 2.8rem; font-weight: 600;} .franchise_250122 .expense ul li:first-of-type {background-color: #ae1e23; color: #fff; border: none;} .franchise_250122 .expense ul li:nth-of-type(2) {background: url('/images/sub/expense__bg01.png') no-repeat bottom 3rem right 3rem;} .franchise_250122 .expense ul li:last-of-type {background: url('/images/sub/expense__bg02.png') no-repeat bottom 3rem right 3rem;} .franchise_250122 .expense .img {padding: 13rem 0 7rem;} .franchise_250122 .expense .tableWrap table{margin-top:3rem;} .franchise_250122 .expense .tableWrap table{border-top:3px solid #1b1b1b; border-collapse:collapse;} .franchise_250122 .expense .tableWrap table th, .franchise_250122 .expense .tableWrap table td{padding:1rem 2rem; font-size: 1.9rem; color:#333; text-align:center; border:1px solid #ddd;} .franchise_250122 .expense .tableWrap table th{font-weight:500; font-size: 2.2rem; color:#fff; background:#1e2e5c;} .franchise_250122 .expense .tableWrap table td:last-of-type {border-right: none;} .franchise_250122 .expense .tableWrap table td:last-of-type {background-color: #f7f4f4;} .franchise_250122 .expense .tableWrap table tr:last-of-type td {color: #fff; background-color: #a52124 !important;} .franchise_250122 .inquiry {padding-bottom: 15rem; } .franchise_250122 .inquiry .sec3__flex {padding-top: 0;} /* .inquiry {padding-bottom: 10rem; text-align: center;} .inquiry .img {padding-bottom: 8rem;} .inquiry p {font-size: 3.2rem; color: #333;} .inquiry h5 {font-size: 4rem; color: #333; padding: 5rem 0;} .inquiry .flex {display: flex; justify-content: center; gap: 2rem;} .inquiry .flex a {transition: .3s ease; color: #fff; width: 16rem; height: 5rem; font-size: 1.8rem; border-radius: 3rem; color: #fff; line-height: 1.7rem; display: inline-flex; gap: 1rem; justify-content: center; align-items: center; background-color: #ae1e23; } .inquiry .flex a:last-of-type { background-color: #fff; color: #ae1e23; border: 1px solid #ae1e23;} .inquiry .flex a:last-of-type img {filter: invert(19%) sepia(100%) saturate(2735%) hue-rotate(345deg) brightness(71%) contrast(94%);} .inquiry .flex a:hover { background-color: rgba(247,247,219,0.95); color: #ae1e23; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2); border: none;} .inquiry .flex a:hover img {filter: invert(19%) sepia(100%) saturate(2735%) hue-rotate(345deg) brightness(71%) contrast(94%);} */ /* franchise new 250113 */ .franchise.new{margin-top:-6rem;} .franchise em{font-style:normal;} .franchise img{vertical-align:top;} .franchise .pnt_txt{color:#e4141b !important} .franchise .bg_wr{background-repeat:no-repeat; background-position:center; background-size:cover;} .franchise .fcs_nav{margin-bottom:4rem; text-align:center; height:11rem;} .franchise .fcs_nav .cate_ul{margin-bottom:0; padding:3rem 0; background-color:#fff;} .franchise .cate_ul.fix{position:fixed; top:10rem; left:0; z-index:2; width:100%; border-top:1px solid #e6e6e6;} .franchise .content_area{padding-top:18rem; padding-bottom:18rem} .franchise .bg_wr .sect_tit{color:#fff;} .franchise .sect_tit{padding-bottom:1.7rem; font-size:3.5rem; line-height:4.5rem; font-weight:700; color:#111; text-align:center; position:relative} .franchise .sect_tit::after{content:""; display:block; margin-left:-2.5rem; width:5rem; height:0.4rem; background-color:var(--point); position:absolute; left:50%; bottom:0;} .franchise .cptvs_area_01{padding-top:0;} .franchise .cptvs_area_01 .bg_wr{padding:18rem 0 28rem; background-image:url("/images/sub/cptvs01_bg.jpg");} .franchise .cptvs_area_01 .cont_tit{margin-top:4rem; font-size:6rem; line-height:7rem; font-weight:700; text-align:center; color:#fff;} .franchise .cptvs_area_01 .cont_tit .pnt_txt{font-weight:800;} .franchise .fcs_cptvs01_intro{margin:6.6rem auto 0; padding:0 0 9.4rem; display:flex; max-width:128rem;} .franchise .fcs_cptvs01_intro li{margin-top:0; width:25%; display:block; text-align:center;} .franchise .fcs_cptvs01_intro li+li{border-left:0.2rem dotted #666;} .franchise .fcs_cptvs01_intro li p{margin-top:1.4rem; font-size:3rem; line-height:3.5rem; font-weight:600; color:#fff;} .franchise .fcs_cptvs01_intro li p .pnt_txt{font-size:5.5rem; line-height:6rem; font-weight:800;} .franchise .cptvs_area_01 .cont_main{margin-top:-28rem; display:flex; border-radius:2rem; overflow:hidden;} .franchise .cptvs_area_01 .cont_main dl{width:50%; background-color:#ae1e23; padding:13rem 0 13rem 22rem; color:#fff;} .franchise .cptvs_area_01 .cont_main dt{font-size:4.2rem; line-height:5.5rem; font-weight:700;} .franchise .cptvs_area_01 .cont_main dt::before{content:''; display:inline-block;margin-right:-0.5rem; width:1.6rem; height:1.5rem; vertical-align:top; background:url("/images/sub/double_quotes_l.png") no-repeat center; background-size:contain;} .franchise .cptvs_area_01 .cont_main dt::after{content:''; display:inline-block; margin-left:-0.5rem; width:1.6rem; height:1.5rem; vertical-align:top; background:url("/images/sub/double_quotes_r.png") no-repeat center; background-size:contain;} .franchise .cptvs_area_01 .cont_main dd{margin-top:2.6rem; font-size:2.6rem; line-height:3.6rem;} .franchise .cptvs_area_01 .cont_main dd p{font-weight:600; margin-top:1.8rem;} .franchise .cptvs_area_01 .cont_main .img_box{width:50%;} .franchise .cptvs_area_01 .cont_main .img_box img{width:100%; height:100%; object-fit:cover;} .franchise .cptvs_area_02{background-image:url("/images/sub/cptvs02_bg.jpg"); color:#fff;} .franchise .cptvs_area_02 .key_pnt{margin-top:5rem; display:flex; padding:0} .franchise .cptvs_area_02 .key_pnt li{display:block; width:calc((100% + 10rem)/3); padding:4.5rem 5rem; font-size:4rem; line-height:5rem; text-align:center; border-radius:7rem; position:relative;} .franchise .cptvs_area_02 .key_pnt li em{font-weight:600;} .franchise .cptvs_area_02 .key_pnt li em .top_dot{position:relative;} .franchise .cptvs_area_02 .key_pnt li em .top_dot::before{content:"";display:block; margin-left:-0.3rem; width:0.6rem; height:0.6rem; background-color:#fff; border-radius:50%; position:absolute; left:50%; top:-0.9rem;} .franchise .cptvs_area_02 .key_pnt li+li{margin-left:-5rem; margin-top:0;} .franchise .cptvs_area_02 .key_pnt li+li::before{content:""; display:block; width:2rem; height:2.1rem; background:url("/images/sub/cptvs_plus_ico.png") no-repeat center; background-size:contain; position:absolute; left:1.5rem; top:50%; margin-top:-1rem;} .franchise .cptvs_area_02 .key_pnt li:nth-child(1){background-color:rgba(174, 30, 35, 0.9);} .franchise .cptvs_area_02 .key_pnt li:nth-child(2){background-color:rgba(228, 20, 27, 0.9);} .franchise .cptvs_area_02 .key_pnt li:nth-child(3){background-color:rgba(227, 17, 16, 0.9);} .franchise .cptvs_area_02 .cont_main{text-align:center; margin-top:8rem;} .franchise .cptvs_area_02 .cont_main dt{display:flex; align-items:center; justify-content:center; font-size:5rem; line-height:6rem; position:relative;} .franchise .cptvs_area_02 .cont_main dt::before{content:""; order:2; display:block; margin:0 1.9rem; width:12.1rem; height:12.1rem; border-radius:50%; box-shadow:0.5rem 0.5rem 0.5rem rgba(0,0,0,0.75); background:url("/images/sub/cptvs02_simbol.png") no-repeat center; background-size:contain;} .franchise .cptvs_area_02 .cont_main dt span{order:1} .franchise .cptvs_area_02 .cont_main dt em{order:3; font-weight:600;} .franchise .cptvs_area_02 .cont_main dd{margin-top:0.8rem; font-size:3rem; line-height:4.5rem;} .franchise .cptvs_area_02 .cont_main dd em{font-weight:600;} .franchise .cptvs_area_02 .cont_main dd .wb_bbtm{color:#ffed00; /*text-decoration:underline wavy #e4141b; text-decoration-thickness:0.2rem; text-underline-offset:0.5rem*/} .franchise .cptvs_area_02 .key_pnt2{margin-top:6rem; padding:0; display:flex; border:1px solid #222; border-radius:2rem; overflow:hidden; background-color:rgba(0,0,0,0.5);} .franchise .cptvs_area_02 .key_pnt2 li{display:flex; align-items:center; justify-content:flex-start; gap:3.5rem 3.8rem; width:50%; padding:4rem 7rem; font-size:3.5rem; line-height:4.5rem;} .franchise .cptvs_area_02 .key_pnt2 li+li{border-left:1px solid #222; margin-top:0;} .franchise .cptvs_area_02 .key_pnt2 li::before{content:""; display:block; width:8.1rem; height:8.1rem; background-position:center; background-repeat:no-repeat; background-size:contain;} .franchise .cptvs_area_02 .key_pnt2 li:nth-child(2){flex-direction:row;} .franchise .cptvs_area_02 .key_pnt2 li:nth-child(1)::before{background-image:url("/images/sub/fcs_cptvs_ico_0201.png")} .franchise .cptvs_area_02 .key_pnt2 li:nth-child(2)::before{background-image:url("/images/sub/fcs_cptvs_ico_0202.png")} .franchise .cptvs_area_02 .key_pnt2 li p em{font-weight:600;} .franchise .cptvs_area_03{} .franchise .cptvs_area_03 .cont_tit{margin-top:4rem; font-size:6rem; line-height:7rem; color:#111; text-align:center;} .franchise .cptvs_area_03 .cont_tit em{font-weight:700; color:#ae1e23;} .franchise .cptvs_area_03 .compare_wr{margin-top:4rem; display:flex; gap:6rem 2rem;} .franchise .cptvs_area_03 .store_box{width:calc(50% - 1rem); border:1px solid #cecece; border-radius:2rem; overflow:hidden;} .franchise .cptvs_area_03 .store_box .str_name{padding:2.5rem 0; font-size:3rem; line-height:4rem; font-weight:600; color:#fff; text-align:center;} .franchise .cptvs_area_03 .store_box .img_box{text-align:center;} .franchise .cptvs_area_03 .store_box .img_box img{width:100%;} .franchise .cptvs_area_03 .str_cont{padding:2.1rem 1.7rem 2.5rem;} .franchise .cptvs_area_03 table{border-collapse:collapse; width:100%;} .franchise .cptvs_area_03 table thead th{padding:1.4rem 3.5rem; font-size:2.2rem; line-height:3.2rem; font-weight:600; color:#fff; text-align:right; background-color:#555;} .franchise .cptvs_area_03 table thead th:nth-child(2){width:53%;} .franchise .cptvs_area_03 table thead th span{font-weight:300;} .franchise .cptvs_area_03 table tbody{text-align:right;} .franchise .cptvs_area_03 table tbody tr:nth-child(2n){background-color:#f7f7f7;} .franchise .cptvs_area_03 table tbody td{padding:0.9rem 3.5rem; font-size:2.2rem; line-height:3.2rem; color:#111; border-bottom:1px solid #ddd;} .franchise .cptvs_area_03 table tbody td:nth-child(2){font-weight:800; border-left:1px solid #ddd;} .franchise .cptvs_area_03 .str_cont dl{padding:3rem 0 0 6rem; display:flex; align-items:flex-start; gap:1.5rem;} .franchise .cptvs_area_03 .str_cont dt{padding-left:8.2rem; font-size:3rem; line-height:5rem; color:#111; font-weight:600; position:relative;} .franchise .cptvs_area_03 .str_cont dt::before{content:""; display:block; width:6.2rem; height:7.1rem; background:url("/images/sub/fcs_cptvs_ico_0301.png") no-repeat center; background-size:contain; position:absolute; left:0; top:50%; margin-top:-3.55rem;} .franchise .cptvs_area_03 .str_cont dd{color:#111;} .franchise .cptvs_area_03 .str_cont .str_proceeds{padding-left:1.5rem; font-size:2.5rem; font-weight:500;} .franchise .cptvs_area_03 .str_cont .str_proceeds .amount{font-size:4.5rem; line-height:5rem; font-weight:700;} .franchise .cptvs_area_03 .str_cont .str_margin{display:inline-block; margin-top:0.5rem; padding:0.5rem 0; width:15rem; font-size:2.2rem; line-height:3rem; font-weight:600; text-align:center; border-radius:2rem; background-color:#f4f6f8;} .franchise .cptvs_area_03 .str_cont .str_margin em{font-weight:800;} .franchise .cptvs_area_03 .store_box.store01 .str_name, .franchise .cptvs_area_03 .store_box.store01 thead th:nth-child(2){background-color:#e4141b;} .franchise .cptvs_area_03 .store_box.store02 .str_name, .franchise .cptvs_area_03 .store_box.store02 thead th:nth-child(2){background-color:var(--point);} .franchise .cptvs_area_03 .store_box.store02 .str_cont .str_proceeds .amount, .franchise .cptvs_area_03 .store_box.store02 .str_cont .str_margin{color:var(--point)} .franchise .cptvs_area_04{padding-bottom:0; background-image:url("/images/sub/cptvs04_bg.jpg"); color:#fff; text-align:center;} .franchise .cptvs_area_04 .sect_tit span{font-weight:300;} .franchise .cptvs_area_04 .cont_tit{margin-top:4.8rem; padding-bottom:20rem;} .franchise .cptvs_area_04 .cont_tit .txt1{font-size:6rem; line-height:7.5rem; font-weight:300;} .franchise .cptvs_area_04 .cont_tit .txt1 span{display:block; font-size:6.5rem; font-weight:700; text-decoration:underline #ae1e23; text-decoration-thickness:0.8rem; text-underline-offset:0.2rem} .franchise .cptvs_area_04 .cont_tit .txt2{margin-top:5rem; font-size:5rem; line-height:8rem; font-style:italic; font-weight:300;} .franchise .cptvs_area_04 .cont_tit .txt2 em{font-weight:700;} .franchise .cptvs_area_04 .cont_tit .txt2 span{font-weight:700; font-size:6.5rem;} .franchise .cptvs_area_04 .cont_tit .txt2 span.top_dot{position:relative;} .franchise .cptvs_area_04 .cont_tit .txt2 span.top_dot::before{content:""; margin-left:0.6rem; display:block; width:0.8rem; height:0.8rem; border-radius:50%; background-color:#fff; position:absolute; left:50%; top:-1rem;} .franchise .cptvs_area_04 .cont_tit .txt2 span.txt_c{color:#ff0000} .franchise .cptvs_area_04 .detail{padding-bottom:17rem; background-color:rgba(0,0,0,0.5);} .franchise .cptvs_area_04 .detail .tit_box{max-width:92rem; margin:0 auto; padding:3.75rem 0; font-size:5.5rem; line-height:6.5rem; background-color:#e4141b; border-radius:2rem; position:relative; top:-7rem} .franchise .cptvs_area_04 .detail .tit_box span{font-weight:700;} .franchise .cptvs_area_04 .detail .tit_box::before{content:""; display:block; margin-left:-7rem; width:14rem; height:7rem; background-color:#e4141b; border-radius:7rem 7rem 0 0; position:absolute; left:50%; bottom:calc(100% - 0.7rem);} .franchise .cptvs_area_04 .detail .tit_box::after{content:""; display:block; margin-left:-2.8rem; width:6rem; height:6.6rem; background:url("/images/sub/fcs_cptvs_ico_04.png") no-repeat center; background-size:contain; position:absolute; left:50%; top:-4rem;} .franchise .cptvs_area_04 .detail_li{display:flex; padding:0;} .franchise .cptvs_area_04 .detail_li li{width:25%; padding:0 1rem; display:block; margin-top:0;} .franchise .cptvs_area_04 .detail_li li::before{display:block; font-size:2.5rem; line-height:1; font-weight:700; text-decoration:underline #fff; text-underline-offset:0.2rem;} .franchise .cptvs_area_04 .detail_li li+li{border-left:2px dotted #666;} .franchise .cptvs_area_04 .detail_li .ico_box{margin-top:3rem;} .franchise .cptvs_area_04 .detail_li dt{margin-top:2.3rem; font-size:2.6rem; line-height:3.6rem;} .franchise .cptvs_area_04 .detail_li dd{margin-top:1.3rem; font-size:2rem; line-height:3rem;} .franchise .expense{background:url("/images/sub/expense_bg.png") repeat left top; background-size:1rem;} .franchise .expense .sect_top{padding:8rem 2rem; text-align:center; background-image:url("/images/sub/expense_top_bg.jpg"); border-radius:2rem; overflow:hidden;} .franchise .expense .sect_top dl{margin-top:3rem; color:#fff;} .franchise .expense .sect_top dt{font-size:6rem; line-height:7rem; font-weight:700;} .franchise .expense .sect_top dd{margin-top:1.4rem; font-size:3rem; line-height:4rem; font-weight:300;} .franchise .expense .sect_top dd span{font-weight:500; text-decoration:underline var(--point) 0.8rem; text-underline-offset:0;} .franchise .expense .table_wr{} .franchise .expense .table_wr .scroll_info2{display:none; gap:1rem; align-items:center; justify-content:flex-end;} .franchise .expense .table_wr .scroll_info2::before{content:"SCROLL"; display:block; font-size:2.6rem; line-height:1; color:#111; font-weight:500;} .franchise .expense .table_wr .scroll_info2::after{content:""; display:block; width:4.1rem; height:1.9rem; background:url("/images/scroll_arrow.png") no-repeat center; background-size:contain; animation-duration: 0.8s; animation-iteration-count:infinite; animation-name: scrollMove; animation-timing-function:ease-In-Out;animation-direction:alternate;} @keyframes scrollMove { from { transform:translateX(0); } to { transform:translateX(10%); } } .franchise .expense .table_wr{margin-top:5rem;} .franchise .expense .table_wr .scroll_box{overflow-x:auto;} .franchise .expense .table_wr .scroll_box > table{min-width:1024px;} .franchise .expense .table_wr .unit{padding:0.8rem 0; text-align:right; font-size:2.2rem; line-height:3.2rem; color:#111;} .franchise .expense .table_wr .table_box{} .franchise .expense .table_wr .table_box table{width:100%; border-collapse:collapse; text-align:right;} .franchise .expense .table_wr .table_box thead th{height:6rem; padding:0 5rem; font-size:2.2rem; color:#fff; font-weight:600;} .franchise .expense .table_wr .table_box thead th:nth-child(1){background-color:#333; text-align:left;} .franchise .expense .table_wr .table_box thead th:nth-child(2){background-color:#555;} .franchise .expense .table_wr .table_box thead th:nth-child(3){background-color:#ae1e23;} .franchise .expense .table_wr .table_box thead th:nth-child(4){background-color:#ae1e23;} .franchise .expense .table_wr .table_box tbody{background-color:#fff;} .franchise .expense .table_wr .table_box tbody tr:nth-child(even){background-color:#f6f6f6;} .franchise .expense .table_wr .table_box tbody td{padding:0 5rem; height:6rem; font-size:2.2rem; font-weight:700; color:#111; border-bottom:1px solid #ddd; border-left:1px solid #ddd;} .franchise .expense .table_wr .table_box tbody td:nth-child(1){text-align:left; font-weight:400; border-left:none;} .franchise .expense .table_wr .table_box tbody td.t_center{text-align:center;} .franchise .expense .table_wr .table_box tfoot tr{background-color:#e4141b;} .franchise .expense .table_wr .table_box tfoot td{height:6.9rem; padding:0 5rem; font-size:3rem; line-height:4rem; font-weight:700; color:#fff;} .franchise .expense .table_wr .table_box tfoot td:nth-child(1){text-align:left;} .franchise .expense .asterisk_li{margin-top:2rem;} .franchise .expense .asterisk_li li{font-size:2.2rem; line-height:3.2rem; color:#111;} .franchise .procedure{background:#fbf2f2 url("/images/sub/procedure_bg_ico.png") no-repeat center -2rem; background-size:63.4rem;} .franchise .procedure .cont_tit{font-size:6rem; line-height:7.2rem; color:#111; font-weight:700; text-align:center;} .franchise .procedure .cont_tit span{display:block; color:var(--point); font-weight:400;} .franchise .procedure .img_cont{margin-top:5.2rem; text-align:center;} .franchise .inquiry{padding:17rem 0 18rem;} .franchise .inquiry .sect_top{text-align:center; margin-bottom:5.3rem;} .franchise .inquiry .sect_top h3{margin-bottom:1.4rem; font-size:6rem; line-height:7.5rem; color:#111; font-weight:800} .franchise .inquiry .sect_top p{font-size:2.5rem; line-height:3.5rem; font-weight:600; text-align:center; color:var(--point);} .franchise .inquiry .board_write{border-top:1px solid #111;} .franchise .inquiry .board_write>table th{text-align:left; padding:0 2rem; width:24rem; font-size:1.8rem; line-height:2.6rem; font-weight:600; border-right:none} .franchise .inquiry .board_write>table td{padding-right:2rem;} .franchise .inquiry .check-new input[type=radio]+label>.graphic:before{opacity:0;} .franchise .inquiry .check-new input[type=radio]:checked+label>.graphic:before{opacity:1;} .franchise .inquiry .board_write .file>.file_wrap>.btnFile{background-color:#222;} .franchise .inquiry .clauseArea .check-new{margin-top:2rem;} .franchise .inquiry .board_write .small{max-width: 35rem;} .franchise .inquiry .board_write .mini{max-width: 12rem;} .franchise .inquiry .board_btn.long{padding:3rem 0 0;} .franchise .inquiry .board_btn .click{padding:2rem; font-size:2rem; font-weight:600;} .franchise .inquiry .board_write .tel_actual{width:100%;} .franchise .inquiry .board_write .tel_actual input[type=text]{} .franchise .inquiry .board_write .tel_actual .actual_btn{width:17rem; height:4.3rem; font-size:1.6rem; line-height:2.4rem; color:#fff; font-weight:600; text-align:center; border-radius:1rem; background-color:var(--point); font-family:inherit} .franchise .inquiry .board_write .tel_actual .actual_btn.sendComplete .resendTxt{display:block; font-size:1.3rem; line-height:1.5rem; font-weight:400;} /* renew */ /* company */ .company .intro_sect{margin-top:10rem; display:flex; gap:5.5rem 7rem; align-items:center; flex-flow:row wrap;} .company .intro_sect .img_box{padding:0 0 2rem 2rem; width:calc(100% - 64rem); } .company .intro_sect .img_box img{width:100%; vertical-align:top; border-radius:2rem; box-shadow:-2rem 2rem 0 #ffbbb6;} .company .intro_sect .int_cont p{font-size:2.4rem; line-height:1.6; font-weight:500; color:#444;} .company .intro_sect .int_cont p+p{margin-top:4rem;} .company .core_val_sect{margin-top:12rem;} .company .core_val_sect .core_val_tit{margin-bottom:3.5rem; font-size:2.8rem; line-height:1.3; color:#c6c6c6; font-weight:700;} .company .core_val_sect > ul{} .company .core_val_sect > ul li{display:flex; flex-flow:row wrap;} .company .core_val_sect > ul li:nth-child(even){flex-direction:row-reverse;} .company .core_val_sect > ul li > *{width:50%;} .company .core_val_sect .c_val{position:relative;} .company .core_val_sect .c_val p{width:100%; padding:0 2rem; font-size:5rem; line-height:1.3; font-weight:700; color:#fff; text-align:center; position:absolute; left:0; top:50%; transform:translateY(-50%);} .company .core_val_sect .c_val img{width:100%; vertical-align:top;} .company .core_val_sect dl{padding:0 3rem; display:flex; justify-content:center; flex-direction:column; text-align:center;} .company .core_val_sect dt{font-size:3.6rem; line-height:1.3; font-weight:700; color:var(--point); /*text-decoration:underline; text-decoration-thickness:1.2rem; text-decoration-color:#ffbbb6; text-underline-offset:-0.2rem;*/} .company .core_val_sect dd{margin-top:4rem; font-size:2.2rem; line-height:1.6; color:#444; font-weight:500;} /* frchs_yj */ .frchs_yj .brd_mission{padding:13rem 0; text-align:center;} .frchs_yj .brd_mission p{margin-top:4rem; font-size:2.4rem; line-height:1.6; font-weight:500; color:#444;} .frchs_yj .brd_story{display:flex; flex-flow:row wrap; position:relative;} .frchs_yj .brd_story::after{content:""; border:1px solid var(--point); position:absolute; inset:5rem; z-index:2;} .frchs_yj .brd_story .video_box{flex:1; height:80rem; position:relative; overflow:hidden;} .frchs_yj .brd_story .video_box::after{content:""; position:absolute; inset:0 0 0 0; z-index:1;} .frchs_yj .brd_story .video_box iframe{width:100%; height:100%; min-width:1900px; min-height:950px; object-fit:cover; position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%, -50%);} .frchs_yj .brd_story .cont_wr{padding:6rem; width:45%; display:flex; flex-direction:column; justify-content:center; background-color:#f7f7f7;} .frchs_yj .brd_story .cont_wr dl{margin-top:4rem; font-size:2.2rem; line-height:1.6; color:#444;} .frchs_yj .brd_story .cont_wr dt{font-weight:700;} .frchs_yj .brd_story .cont_wr dd{} .frchs_yj .brd_story .cont_wr dd p{margin-top:3rem;} .frchs_yj .core_val{padding:17.5rem 0 17.9rem; text-align:center; background:url("/images/sub/frchs_yj_cv_bg.jpg") repeat center / auto;} .frchs_yj .core_val ul{margin-top:7.5rem;; display:flex; justify-content:space-between; gap:6rem 0; flex-flow:row wrap} .frchs_yj .core_val ul li{width:calc((100% - 17rem) / 3);} .frchs_yj .core_val ul li .img_box{border-radius:2rem; overflow:hidden;} .frchs_yj .core_val ul li .img_box img{vertical-align:top; width:100%;} .frchs_yj .core_val ul li p{margin-top:2.5rem; font-size:2.2rem; line-height:1.3; font-weight:700; color:#444;} .frchs_yj .promise{padding:11.8rem 0 13rem; text-align:center;} .frchs_yj .promise ol{margin-top:5.5rem;} .frchs_yj .promise ol li{font-size:2.4rem; font-weight:500; color:#444;} .frchs_yj .promise ol li+li{margin-top:2rem;} .frchs_yj .brand_identity{padding:10rem 0 13.2rem; text-align:center; background-color:#f7f7f7;} .frchs_yj .brand_identity .idtt_tit{font-size:2.6rem; line-height:1.3; font-weight:700; color:#444;} .frchs_yj .brand_identity .idtt_txt{margin-top:2rem; font-size:2.4rem; line-height:1.3; font-weight:500; color:#444;} .frchs_yj .brand_identity .logo_wr{margin-top:7rem;} .frchs_yj .brand_identity .logo_wr .logo_box{margin-top:3rem;} .frchs_yj .brand_identity .color_wr{margin-top:6rem;} .frchs_yj .brand_identity .color_wr{margin-top:6rem;} .frchs_yj .brand_identity .color_cont{margin-top:3rem; display:flex; flex-flow:row wrap;} .frchs_yj .brand_identity .color_cont li{padding:2rem 2rem 4.5rem; width:calc(100% / 3); font-size:1.8rem; line-height:1.3; font-weight:500; color:#fff; text-align:left;} .frchs_yj .brand_identity .color_cont li p+p{margin-top:0.3rem;} .frchs_yj .brand_identity .color_cont li:nth-child(1){background-color:#ae1e23;} .frchs_yj .brand_identity .color_cont li:nth-child(2){background-color:#f7edd7; color:#222} /* .frchs_yj .brand_identity .color_cont li:nth-child(3){background-color:#1d2bc2;} */ .frchs_yj .brand_identity .color_cont li:nth-child(3){background-color:#000000;} .frchs_yj .interior{padding:13rem 0 0; text-align:center;} .frchs_yj .interior .top_box{margin-top:7rem;} .frchs_yj .interior .top_box em{display:block; font-size:2.4rem; line-height:1.3; font-weight:700; color:#444;;} .frchs_yj .interior .top_box p{margin-top:2rem; font-size:2.4rem; line-height:1.3; font-weight:500; color:#444;;} .frchs_yj .interior .cont_wr{margin-top:6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6rem 0;} .frchs_yj .interior .cont_wr dl{width:calc(50% - 3rem);} .frchs_yj .interior .cont_wr dt{margin:0 auto; max-width:61rem; height:28rem; display:flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:center; background-size:cover;} .frchs_yj .interior .cont_wr dt span{display:inline-block; min-width:14rem; padding:1rem 2.6rem 0.9rem; font-size:2.2rem; line-height:1.4; font-weight:700; color:#222; text-align:center; background-color:#fff; border-radius:3rem;} .frchs_yj .interior .cont_wr dd{margin-top:2rem; font-size:2rem; line-height:1.4; font-weight:500; color:#444;} .frchs_yj .interior .cont_wr dl:nth-child(1) dt{background-image:url("/images/sub/frchs_yj_interior_img_01.jpg");} .frchs_yj .interior .cont_wr dl:nth-child(2) dt{background-image:url("/images/sub/frchs_yj_interior_img_02.jpg");} .frchs_yj .interior .interior_sw{margin-top:11rem;} .frchs_yj .interior .interior_sw_wr .swiper-slide {font-size: 0;} .frchs_yj .interior .interior_sw_wr .swiper-button-next, .frchs_yj .interior .interior_sw_wr .swiper-button-prev {background-color: #ae1e23; border-color: #ae1e23; width: 5rem; height: 5rem;} .frchs_yj .interior .swiper-button-next:after, .frchs_yj .interior .swiper-button-prev:after {color: #fff; font-size: 1.5rem; font-weight: 900; } .frchs_yj .interior .interior_sw_b .swiper-slide {margin-bottom: 2rem;} .frchs_yj .interior .interior_sw_b .swiper-slide img {aspect-ratio: 128/60;} /* yj_gall */ .yj_gall > .inConts{max-width:148rem;} .yj_gall .cont_sect{padding:10rem 0 9rem; text-align:center;} .yj_gall .cont_sect dl{margin-top:5rem; color:#444;} .yj_gall .cont_sect dt{font-size:2.6rem; font-weight:700; line-height:1.3; font-weight:700;} .yj_gall .cont_sect dd{font-size:2.4rem; line-height:1.6; font-weight:500;} .yj_gall .cont_sect dd p{margin-top:3rem;} .yj_gall .exhibit{padding:8rem 0 0; text-align:center;} .yj_gall .exhibit .exhibit_sw{margin-top:5rem; padding:0 7rem; position:relative;} .yj_gall .exhibit .exhibit_sw .sw_container{overflow:hidden; position:relative;} .yj_gall .exhibit .exhibit_sw .thumb{border-radius:2rem; overflow:hidden;} .yj_gall .exhibit .exhibit_sw .thumb img{width:100%; vertical-align:top;} .yj_gall .exhibit .exhibit_sw .swiper-slide > div{line-height: 1.3; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; word-break:break-all !important;} .yj_gall .exhibit .exhibit_sw .bo_tit{margin-top:2rem; font-size:2rem; font-weight:700; color:#222;-webkit-line-clamp: 2;} .yj_gall .exhibit .exhibit_sw .bo_txt{margin-top:0.5rem; font-size:1.6rem; font-weight:500; color:#444; -webkit-line-clamp: 1;} .yj_gall .exhibit .exhibit_sw .swiper-button{width:5rem; height:5rem; border:1px solid #d3d3d3; border-radius:50%; margin-top:-2.5rem; top:40%} .yj_gall .exhibit .exhibit_sw .swiper-button-prev{left:0;} .yj_gall .exhibit .exhibit_sw .swiper-button-next{right:0;} .yj_gall .exhibit .exhibit_sw .swiper-button::after{width:5rem; height:5rem; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center; background-size:auto;} .yj_gall .exhibit .exhibit_sw .swiper-button-prev::after{background-image:url("/images/sub/sw_btn_prev.svg");} .yj_gall .exhibit .exhibit_sw .swiper-button-next::after{background-image:url("/images/sub/sw_btn_next.svg");} .yj_gall .exhibit .link_box{margin-top:10rem; text-align:center;} .yj_gall .exhibit .link_box a{display:inline-block; padding:2rem 6.1rem 1.9rem 3rem; font-size:2rem; font-weight:600; color:#fff; border-radius:3.8rem; background-color:var(--point); position:relative;} .yj_gall .exhibit .link_box a::after{content:""; display:block; margin-top:-0.65rem; width:0.8rem; height:1.3rem; background:url("/images/main/main_btn_arrw.svg") no-repeat center; background-size:contain; position:absolute; top:50%; right:3.3rem;} /* greet */ .greet .cmmn_tit{text-align:center;} .greet .cont_box{margin-top:7rem; display:flex; justify-content:space-between; flex-direction:row-reverse; gap:6rem 0} .greet .cont_box::after{content:""; max-width:59.5rem; width:calc(50% - 4.5rem); height:100%; aspect-ratio:595/407;} .greet .cont_box dl{padding-top:2rem; width:50%; color:#444} .greet .cont_box dt{font-size:2.6rem; line-height:1.3; font-weight:700;} .greet .cont_box dd{margin-top:4rem; font-size:2rem; line-height:1.6; font-weight:500;} .greet .cont_box dd p+p{margin-top:2.5rem;} /* history */ .history{margin:0 0 6rem; text-align:center;} .history-area{font-size:0; line-height:0; position: relative;} .history-area:before{content: ""; width: 0.2rem; margin-left:-0.1rem; background-color: rgba(221,221,221,0.8); display: inline-block; position:absolute; left: 50%; top:1.5rem; bottom:0;} .history-area #his_progress{content: ""; width: 0.2rem; margin-left:-0.1rem; background-color:var(--point); display: inline-block; position:absolute; left: 50%; top:1.5rem; border-radius: 0 0 9px 9px;} .history-area>li{text-align: right; display: flex; justify-content: space-between; position: relative; z-index:2;} .history-area>li+li{margin-top:10rem;} .history-area .history-in{width:50%; padding:0 4rem; text-align: left; display:inline-block; vertical-align: top; position: relative; cursor: default; order:2;} .history-area .history-in[href]{cursor: pointer !important;} .history-area .history-in:before{content: ""; width: 1.2rem; height:1.2rem; background-color:var(--point); display: inline-block; position:absolute; left: -0.6rem; top:0.5rem; border-radius:999px; box-sizing: border-box;} .history-area .history-in>strong{font-weight: 600; font-size:3.6rem; line-height:1; color: #111; display:block;} .history-area .txt_wrap{margin-top:3rem; } .history-area .txt_wrap>p{padding:0 0 0 1.2rem; font-size:1.7rem; line-height:1.5; color: #666; position: relative;} .history-area .txt_wrap>p:before{content: "ㆍ"; position:absolute; left: -0.3rem; top:0px;} .history-area .txt_wrap>p+p{margin-top:1rem;} /*.history-area .txt_wrap>ul>li:before{content: "-"; position:absolute; left: 0; top:0px;}*/ .history-area>li .thumb{width:50%; margin-top:0; padding:0 4rem; position: relative; order:1;} .history-area>li .thumb img{width:calc(100% - 8rem); /*height:calc(100%);*/ object-fit:cover; object-position: center center; /*position: absolute; left:4rem; right:4rem; top:0; bottom:0;*/} .history-area>li:nth-child(even){text-align: left;} .history-area>li:nth-child(even) .history-in{text-align: right; order:1;} .history-area>li:nth-child(even) .history-in:before{left:auto; right: -0.6rem;} .history-area>li:nth-child(even) .thumb{order:2;} .history-area>li:nth-child(even) .txt_wrap>p{padding:0 1.2rem 0 0;} .history-area>li:nth-child(even) .txt_wrap>p:before{left:auto; right: -0.3rem;} /* location */ .location{margin-top:10rem; text-align:center;} .location .wideKakao{margin-top:4rem;} .location .wideKakao .wrap_btn_zoom{z-index:1;} .location .loca_txt{margin-top:4rem; display:flex; justify-content:center; align-items:flex-start; gap:1rem; font-size:2rem; line-height:1.3; font-weight:700; color:#444; } .location .loca_txt::before{content:""; display:block; margin-top:0.3rem; width:1.7rem; height:2rem; background:url("/images/sub/loca_addr_ico.svg") no-repeat center / contain;} .mb840 {display: none;} @media only screen and (max-width : 1780px){ .story .img{width: 27%;} } @media only screen and (max-width : 1600px){ /*[s] Main Style */ /*[e] Main Style */ /* franchise*/ .franchise .cptvs_area_01 .cont_main dl{padding-left:5rem;} } @media only screen and (max-width : 1440px){ /*[s] Main Style */ #mVisual .vTxtArea{padding:0 2rem;} /*[e] Main Style */ } @media only screen and (max-width : 1320px){ /*[s] Main Style */ /* 창업문의 */ #startup_inquiry .startup_info>dl{padding:0 2rem;} /*[e] Main Style */ /*[s] Sub Style */ .procedure ul {gap: 8rem 10rem;} .procedure ul li { width: calc((100% - 20rem)/3);} .procedure ul li::before {right: -8rem;} .procedure ul li .num {padding: 2rem 2rem 1.5rem;} /*[e] Sub Style */ } @media only screen and (max-width : 1280px){ .sec1 .right .txt {padding: 10rem 8rem; background: url('/images/main/sec1__icon.png') no-repeat top 5rem right 6rem #fff; background-size: 5.3rem;} .sec1 .right .txt h5 {font-size: 3.6rem;} .sec1 .right .txt >p br {display: none;} .conc__Sec1 .flex .txt {padding-top: 5rem;} .conc__Sec1 .flex >div { height: 40rem;} .conc__Sec1 .flex >div.img img {object-fit: cover; height: 100%;} .conc__Sec1 .flex.top .txt {padding-right: 3rem;} .conc__Sec1 .flex.btm .txt {padding-left: 3rem;} .story section {gap: 5rem;} .story section > div {width: calc((100% - 5rem)/2);} /* franchise */ .franchise .cptvs_area_01 .bg_wr{background-color:#1d0707; background-position:left top; background-size:contain;} .franchise .fcs_cptvs01_intro{flex-wrap:wrap; gap:6rem 0} .franchise .fcs_cptvs01_intro li{width:50%;} .franchise .fcs_cptvs01_intro li:nth-child(3){border-left:none;} .franchise .cptvs_area_01 .cont_main{flex-direction:column;} .franchise .cptvs_area_01 .cont_main dl{width:100%;} .franchise .cptvs_area_01 .cont_main .img_box{width:100%;} .franchise .cptvs_area_02 .key_pnt li{border-radius:10rem} .franchise .cptvs_area_02 .key_pnt li em .top_dot::before{display:none;} .franchise .cptvs_area_02 .cont_main dt{flex-direction:column;} .franchise .cptvs_area_02 .cont_main dt::before{order:1} .franchise .cptvs_area_02 .cont_main dt span{order:2; margin-top:-2rem;} .franchise .cptvs_area_02 .cont_main dd{margin-top:3.5rem;} .franchise .cptvs_area_02 .key_pnt2 li{flex-direction:column; text-align:center;} .franchise .cptvs_area_02 .key_pnt2 li:nth-child(2){flex-direction:column;} .franchise .cptvs_area_04 .detail_li{flex-wrap:wrap; gap:8.4rem 0} .franchise .cptvs_area_04 .detail_li li{width:50%;} .franchise .cptvs_area_04 .detail_li li+li{border-left:none} .franchise .inquiry .board_write>table th{width:17rem;} /* frchs_yj */ .frchs_yj .brd_story .video_box{width:100%; flex:none;} .frchs_yj .brd_story .cont_wr{width:100%; padding:6rem 8rem 8rem;} /* .frchs_yj .brand_identity .color_cont li{width:50%;} */ /* greet */ .greet .cont_box{flex-direction:column-reverse;} .greet .cont_box dl, .greet .cont_box::after{width:100%;} .greet .cont_box::after{align-self:center;} } @media only screen and (max-width : 1240px){ .scroll_info{display:block;} .scrollTb{width:100%; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:1200px !important;} /*[s] Main Style */ /* 창업문의 */ #startup_inquiry .startup_info>dl{padding:0 1rem;} /*[e] Main Style */ /*[s] Sub Style */ .stackArea .stack_re>.textBox{padding-right:4rem;} .stackArea .stack_re:nth-child(even)>.textBox{padding:0 0 0 4rem;} /*[e] Sub Style */ } @media only screen and (max-width : 1200px){ .scroll_info{display:block;} .scrollTb{width:100%; display:block; overflow:hidden; overflow-x:scroll;} .scrollTb>*{width:1200px;} .expense ul li p {font-size: 2.6rem;} /*[s] Sub Style */ /*[e] Sub Style */ } @media only screen and (max-width : 1024px){ /* [s] Intro */ .intro_wrap{display:flex; flex-flow:row wrap;} .intro_wrap .int_wr{width:100%; height:50vh; min-height:48rem;} .intro_wrap .int_wr .bg_box img{object-position:center top;} /* [e] Intro */ .sec4 .sec4__box a {font-size: 0;} .sec4 .sec4__box a:hover img {transform: scale(1);} .conc__Sec1 .flex.btm {border-top: none;} .sec1 {display: block;} .sec1 > div {width: 100%;} .sec1 .left .mySwiper2.swiper-container img {width: 100%; min-height: 480px;} .sec1 .left .mySwiper2.swiper-container .mySwiper img {min-height: auto;} .sec1 .swiper-button {display: none;} .sec2 .swiper-button {display: none;} .sec1 .right {padding: 0 0 10rem; background-size: 40%;} .sec1 .right .txt {margin-left: 3rem; margin-top: -4rem;} .sec3__flex {display: block; padding: 8rem 0 0;} .sec3__flex a + a {margin-top: 4rem;} .sec3 {padding: 12rem 0 10rem;} .sec4 {display: block;} .sec4 .sec4__box a img {height: 30rem; width: 100%;} .sec4 .sec4__box a >div {width: 100%;} .story section {gap: 5rem; flex-wrap: wrap;} .story section > div { width: 100%;} .story__txt {padding-top: 4rem;} .story .swiper-slide img {width: 100%;} .story { /*background: url('/images/sub/story__bg.png') no-repeat bottom right #f5f5f5; padding: 10rem 0;*/ background-size: 40%; } .story .img{width: 40%; bottom:-10rem;} .competitiveness ul li:first-of-type {background: url('/images/sub/compet__bg01.png') no-repeat bottom left 0rem; background-size: 24% ;} .competitiveness ul li:nth-of-type(2n) {background: url('/images/sub/compet__bg02.png') no-repeat bottom right 0rem; background-size: 15%;} .competitiveness ul li:last-of-type {background: url('/images/sub/compet__bg03.png') no-repeat bottom left 0rem; background-size: 15% ;} .procedure ul {gap: 5rem 3rem;} .procedure ul li { width: calc((100% - 3rem)/2);} .procedure ul li::before {right: -2rem;} .procedure ul li .num {padding: 2rem 2rem 1.5rem;} .procedure ul li:last-child {width: 100%;} .procedure ul li:nth-of-type(3n)::before {display: block;} .procedure ul li:last-of-type:before {display: none;} .procedure ul li .num {border-radius: 0 0 99rem 0;} .expense ul {flex-wrap: wrap;} .expense ul li {flex: 1 100%;} .conc__Sec1 .box {display: block; border: none} .conc__Sec1 .flex {display: flex; flex-wrap: wrap; margin: 0 auto; max-width:640px ; } .conc__Sec1 .flex.top .txt {text-align: left; padding: 5rem 3rem 5rem;} .conc__Sec1 .flex.btm .txt {text-align: left; padding: 5rem 3rem 5rem; order: 2; } .conc__Sec1 .flex > div {flex: 1 100%; height: auto;} .conc__Sec1 .flex >div.img img {object-fit: initial; height: auto; max-width: 100%;} .conc__Sec2 {padding: 10rem 0;} .conc__Sec2 .flex > div {padding: 5rem 0 0;} .conc__Sec3 ul {display: block;} .conc__Sec3 ul li +li{ margin-top: 3rem} .conc__Sec3 .img {text-align: center; padding: 0 3rem;} .conc__Sec3 .img img {width:47rem;} .conc__Sec3 .line {width: 100%; max-width: 70rem;} /* franchise */ .franchise .cptvs_area_03 .compare_wr{flex-direction:column;} .franchise .cptvs_area_03 .store_box{width:100%;} .franchise .cptvs_area_03 .str_cont dl{padding-left:20%;} .franchise .expense .table_wr .scroll_info2{display:flex;} .franchise .inquiry .board_write>table, .franchise .inquiry .board_write>table tbody, .franchise .inquiry .board_write>table th, .franchise .inquiry .board_write>table td:not(.flex){display:block; height:auto;} .franchise .inquiry .board_write>table tr{display:flex; flex-wrap:wrap;} .franchise .inquiry .board_write>table th{padding-top:3rem; background-color:transparent; border-bottom:none;} .franchise .inquiry .board_write>table td{width:100%; padding-bottom:3rem; height:auto;} /* frchs_yj */ .frchs_yj .brand_identity .color_cont li{width:100%;} /*[s] All Style */ .depth3{margin-bottom:6rem; display: flex; justify-content: space-between;} .depth3:before{display:none;} .depth3>a{width:100%; height:auto; padding:1rem 2rem;} .depth3>a+a{margin-left:-1px;} .depth3>a>span:before{display:none;} /*[e] All Style */ /*[s] Main Popup Style */ .hd_pops{position: absolute; left:2rem !important; top:2rem !important;} .hd_pops_con{width:auto !important;} .globalPop{max-width:100%; left:50% !important; top:2rem !important; transform:translateX(-50%);} .globalPop .GpopCon{max-width:100%; width:auto !important; height:auto !important;} /*[e] Main Popup Style */ /*[s] Main Style */ /* visual */ #mVisual .visualRoll .slider img{} #mVisual .slick-arrow{display:none !important;} #mVisual .slick-dots{display:block !important;} /* 열정 스토리 */ .main_story .main_story_bo .swiper-slide-active::after, .main_story .main_story_bo .swiper-slide-next::after{right:-2rem;} /* 가맹문의 */ .main_frchs .cont_wr{width:100%;} .main_frchs .main_sect_top{text-align:center;} .main_frchs .main_btn_box{margin-top:5rem; text-align:center;} .main_frchs{padding:7rem 0 0 0;} .main_frchs::after{margin-top:5rem; max-width:none; width:100%; height:auto; aspect-ratio:64/50; border-radius:64rem 64rem 0 0; position:static; transform:none;} /* 메뉴 소개 */ #menu_introduction{padding:12rem 0 12rem;} #menu_introduction:before{ width: 100%; height: 62%;} #menu_introduction .inConts{display: block;} #menu_introduction .inConts .mTitle{width:100%; margin-bottom:6rem; text-align:center;} #menu_introduction .inConts .mTitle>dt{background-position: center bottom;} #menu_introduction .inConts .photo_list{width:100%;} #menu_introduction .slickArr{margin-top:0; position: static;} #menu_introduction .slick-arrow{background-color: #fff; border-color:#7cb640; color: #7cb640; position: absolute; top:66%; transform: translateY(-50%); z-index:7;} #menu_introduction .slick-prev{left:2rem;} #menu_introduction .slick-next{margin-left:0; right:2rem;} /* 메뉴 갤러리 */ #menu_gallery .swiper-button{font-size:0; line-height:0;} /* 창업문의 */ #startup_inquiry{padding:12rem 0; background-position: -16rem 10rem;} #startup_inquiry .startup_info{margin-bottom:6rem; justify-content: space-between;} #startup_inquiry .startup_info>dl{width:31%; padding:0rem;} #startup_inquiry .startup_info>dl>dt{} #startup_inquiry .startup_info>dl>dt>span{} #startup_inquiry .startup_info>dl>dd{width:100%; min-width:auto; min-height:14rem; padding:0; border-radius:5px;} #startup_inquiry .startup_map{padding:5.5rem 2rem 8rem; background-color: #fff; display: block;} #startup_inquiry .startup_map .img{display:none;} #startup_inquiry .startup_map .store{width:100%;} /*[e] Main Style */ /*[s] Sub Style */ /* company */ .company .intro_sect{max-width:64rem; margin-left:auto; margin-right:auto;} .company .intro_sect .img_box{width:100%; max-width:55rem;} .company .intro_sect .int_cont{width:100%;} .company .core_val_sect .core_val_tit{max-width:64rem; margin-left:auto; margin-right:auto;} .company .core_val_sect > ul li{max-width:64rem; margin:0 auto;} .company .core_val_sect > ul li+li{margin-top:8rem;} .company .core_val_sect > ul li > *{width:100%;} .company .core_val_sect dl{margin-top:4rem;} .company .core_val_sect dd{margin-top:3rem;} /* frchs_yj */ .frchs_yj .interior .cont_wr dl{width:100%;} /*[e] Sub Style */ } @media only screen and (max-width : 840px){ .sec1 .right .txt >b {font-size: 2.4rem;} .sec1 .right .txt >p {font-size: 2.1rem} .tabs li, .sec3__flex a .txt p, .story__txt p, .conc__Sec2 .flex p, .sec3__flex a .txt b {font-size: 2.1rem;} .sec3__flex a .txt strong {font-size: 3rem;} .sec4 .sec4__box a b {font-size: 3.4rem;} .conc__Sec1 .flex .txt p {font-size: 2.2rem;} .conc__Sec1 .flex .txt p br {display: none;} .conc__Sec1 .flex .txt a {font-size: 2rem; width: 18rem;} .conc__Sec3 p {font-size: 2.4rem;} .cate_ul>li a {font-size: 2.2rem; height: 7rem;} .mb840 {display: block;} .pc840 {display: none;} #mVisual .vTxtArea::before {display: none;} .sec1 .left .mySwiper {left: 8rem; bottom: 8rem;} .sec1 .left .mySwiper2 .swiper-pagination {display: none;} .sec1 .right .txt {padding: 10rem 3rem; background: url('/images/main/sec1__icon.png') no-repeat top 5rem right 4rem #fff; background-size: 5.3rem;} .sec3__flex > a {padding: 6rem 4rem;} .competitiveness ul li {max-width: 600px; margin: 0 auto; gap: 4rem;} .competitiveness ul li {flex-wrap: wrap; align-items: flex-start;} .competitiveness ul li >div {flex: none;} .competitiveness ul li:nth-of-type(1n) {flex-direction: column-reverse;} .competitiveness ul li:nth-of-type(2n-1) .txt {text-align: left; } .competitiveness ul li .txt p {font-size: 2.1rem; line-height: 1.4; } .competitiveness ul li:first-of-type {background: url('/images/sub/compet__bg01.png') no-repeat bottom right 0rem; background-size: 27% ;} .competitiveness ul li:nth-of-type(2n) {background: url('/images/sub/compet__bg02.png') no-repeat bottom right 0rem; background-size: 15%;} .competitiveness ul li:last-of-type {background: url('/images/sub/compet__bg03.png') no-repeat bottom right 0rem; background-size: 15% ;} .procedure ul li .num { padding: 1rem 1rem 0.5rem; } .expense ul li:nth-of-type(2) {background-size: 14.7rem;} .expense ul li:nth-of-type(3) {background-size: 12.1rem;} .inquiry h5 {font-size: 3rem;} .story__txt b::before {top: -2rem; right: 2rem; left: auto;} .conc__Sec2 .flex {display: block; max-width: 600px; margin: 0 auto;} /*[s] All Style */ .nTable{} .nTable>table{} .nTable>table th, .nTable>table td{padding:3rem; font-size:2.2rem; line-height:3.2rem;} .nTable>table th{height:8rem; padding:0; font-size:2.4rem;} .nTable>table ul.bul>li{font-size:2rem; line-height:1.6;} .nTable>table .transportation>li{padding-left:0;} .nTable>table .transportation>li>p{padding-bottom:1rem; font-size:2.2rem; line-height:1; position: relative;} .nTable>table .transportation>li>dl>dt>span{font-size:2rem; line-height:4rem;} .nTable>table .transportation>li>dl>dd .inT{font-size:2rem; line-height:4rem;} .nTable +.nTable{margin-top:4rem;} .tabDepth{margin-bottom:3rem;} .tabDepth>a{height:5.2rem; font-size:2rem;} .depth3>a{font-size:2rem; line-height:1.4;} .groupTit{padding-bottom:4rem;} .groupTit .step{font-size:2.4rem;} h4.txt{font-size:3rem;} .nTxt{font-size:2rem; line-height:2.8rem;} ul.bul{} ul.bul>li{padding-left:1.5rem; font-size:2rem;} ul.star{} ul.star>li{padding-left:2.9rem; font-size:2rem;} ul.etc{} ul.etc>li{padding-left:4rem; font-size:2rem;} h4.line{margin-bottom:4rem;} h4.line.mt{margin-top:6rem;} h5.bul{margin:6rem 0 3rem; padding-left:2.6rem; font-size:2.8rem;} h5.bul:before{width: 1.8rem; height: 1.8rem; border-width:0.4rem;} h5.bul .more{padding:1rem 1.5rem; font-size:1.8rem; top:-0.7rem;} .scrollTb>*{width:120rem;} .nTable.scrollTb>*{width:840px !important;} .introduceArea .scrollTb>*{width:111.8rem;} .admGo{font-size:0; line-height:0; position: relative; z-index:7;} .admGo>a{padding:0.625rem 1.25rem; background-color:#f00; font-size:1.25rem; line-height:1.2; color:#fff; display:inline-block; position:absolute; left:0; bottom:0;} .admGos{font-size:1.8rem;} .arrBtn{font-size:2rem; line-height:4.6rem;} .arrBtn>span{padding-right:60px;} select.base{height:5rem; background-size:4.3rem; font-size:2rem; line-height:4.8rem;} .main_sect_top h3{font-size:4.8rem;} .main_sect_top p{font-size:2.4rem;} /*[e] All Style */ /* [s] Intro */ .intro_wrap .int_wr em{font-size:4rem;} .intro_wrap .int_wr p{font-size:2.2rem;} /* [e] Intro */ /*[s] Main Popup Style */ .hd_pops{left:2rem !important; right:2rem !important;} .hd_pops_con{} .globalPop{width:calc(100% - 6rem) !important;} .globalPop .GpopCon{width:100% !important;} .globalPop tr:last-child{height:4.5rem;} .globalPop tr:last-child img{height:1.6rem;} /*[e] Main Popup Style */ /*[s] Main Style */ .mTitle{margin-bottom:5.5rem !important;} .mTitle>dt{margin-bottom:3rem; padding-bottom:3.5rem;} .mTitle>dd{font-size:2.2rem;} /* visual */ #main-visual, #main-visual .main-slider, #main-visual .main-slider .slick-slide, #main-visual .main-slider .slide-media, #main-visual .main-slider .mobile_in{height:70vh !important;} #main-visual .main-slider .mobile_in{width: 242vw;} #main-visual .main-slider .mobile_in video, #main-visual .main-slider .mobile_in iframe{height:100% !important;} /* visual */ #mVisual .visualRoll .slider img{max-height:none; min-height: auto; height: auto; aspect-ratio: 1/1;} #mVisual .vTxtArea .vTxt_in{padding-bottom:0;} #mVisual .vTxt .ii.logo.i01 img{height:12rem;} #mVisual .vTxt .ii.logo.i02{margin-top:2rem;} #mVisual .vTxt .ii.logo.i02 img{height:3.6rem;} #mVisual .vTxt .ii.txt{padding-top:2.5rem; font-size:2.4rem;} #mVisual .vTxt .ii.tip a {font-size: 2rem; width: 18rem;} #mVisual .slick-dots>li+li{margin-left:2rem;} #mVisual .slick-dots>li button{width:2.8rem !important; height:2.8rem;} /* visual */ #mainVisual .video_wr iframe{min-width:1300px; min-height:884px;} /* 브랜드 */ .main_brand .logo_li{justify-content:center;} /* 열정 스토리 */ .main_story .main_story_bo .swiper-slide-active::after, .main_story .main_story_bo .swiper-slide-next::after{right:-30px;} /* 인스타그램 */ .main_insta .m_insta_sw{padding-top:2rem;} .main_insta .m_insta_sw .swiper-pagination{display:flex} /* 메뉴 소개 */ #menu_introduction .slick-arrow{width:6.5rem; height:6.5rem; font-size:2.6rem;} /* 메뉴 갤러리 */ #menu_gallery{height:auto; padding:12rem 0;} #menu_gallery .swiper-button{display:none !important;} #menu_gallery .performanceSlide{padding:3rem 2rem 0;} #menu_gallery .performanceSlide .swiper-wrapper{} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide{width:29rem; transform: scale(1) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide .thumb:before{display:none;} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-prev{transform: translateX(0) scale(1) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-next{transform: translateX(0) scale(1) rotate(.001deg);} #menu_gallery .performanceSlide .photo_list.mGallery ul.list li.swiper-slide-active{transform: scale(1) rotate(.001deg);} #menu_gallery .swiper-pagination {margin-top:4rem; position: static !important; display:block !important;} #menu_gallery .swiper-pagination .swiper-pagination-bullet{width:2.8rem; height:2.8rem; margin:0 0.7rem; background-color: #a0a0a0; border-radius:99px;} #menu_gallery .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #7cb640;} /* 창업문의 */ #startup_inquiry{} #startup_inquiry .startup_info{} #startup_inquiry .startup_info>dl{} #startup_inquiry .startup_info>dl>dt{} #startup_inquiry .startup_info>dl>dt>span{} #startup_inquiry .startup_info>dl>dd{font-size:2.1rem;} #startup_inquiry .startup_map{} #startup_inquiry .startup_map .store{} #startup_inquiry .startup_map .store select, #startup_inquiry .startup_map .store input[type=text], #startup_inquiry .startup_map .store input[type=submit]{height:5.2rem; padding:0 2rem; border-width:1px; font-size:2.1rem; line-height:5rem;} #startup_inquiry .startup_map .store select{padding:0 6rem 0 2rem;} #startup_inquiry .startup_map .store input[type=submit]{font-size:0; line-height:0;} #startup_inquiry .startup_map .store .tit{font-size:3.2rem;} #startup_inquiry .startup_map .store .form{width:100%;} #startup_inquiry .startup_map .store .form_re{} /*[e] Main Style */ /*[s] Sub Style */ .pg_top_bann .pg_top_txt .txt_b{font-size:4rem;} .pg_top_bann .pg_top_txt .txt_s{font-size:2.4rem;} /* HISTORY */ .historyArea{} .historyArea:before{margin-left:0; left: 0%;} .historyArea>li{} .historyArea .txt_wrap{width:100%; padding:0 0 0 4rem;} .historyArea .txt_wrap:before{width: 3rem; height:3rem; left: -1.2rem; top:0.5rem;} .historyArea .txt_wrap>strong{font-size:3.2rem;} .historyArea .txt_wrap>ul{} .historyArea .txt_wrap>ul>li{padding-left:1.2rem; font-size:2rem;} .historyArea>li:nth-child(even){text-align: left;} .historyArea>li:nth-child(even) .txt_wrap{text-align: left;} .historyArea>li:nth-child(even) .txt_wrap:before{left: -1.2rem; right:auto;} .historyArea>li:nth-child(even) .txt_wrap>ul>li{padding:0 0 0 1.2rem;} .historyArea>li:nth-child(even) .txt_wrap>ul>li:before{left:0; right:auto;} .historyArea.month .txt_wrap>ul>li{padding-left:5rem;} .historyArea.month .txt_wrap>ul>li:before{} .historyArea.month>li:nth-child(even) .txt_wrap>ul>li{padding:0 0 0 5rem;} .historyArea.admin .txt_wrap>ul>li{padding:0 5rem !important;} .historyArea.admin>li:nth-child(even) .txt_wrap>ul>li .checkIn.noTxt{left:0; right:auto;} .etc_clause{width:100%; margin:0 auto; padding:5rem 4rem; border-radius:1rem;} .etc_clause .logo{margin:0;} .etc_clause .txt{padding:2rem 0 6rem; font-size:2.2rem;} .etc_clause .scroll{font-size:2rem;} .etc_select{width:100%;} .etc_select select.base{width:22rem;} /* franchise */ .franchise .inConts1280, .franchise .inConts1720{padding-left:2rem; padding-right:2rem;} .franchise .cptvs_area_01 .cont_tit{margin-top:5rem;} .franchise .cptvs_area_01 .bg_wr{padding-bottom:61.3vw; background-size:130%;} .franchise .fcs_cptvs01_intro{margin-top:8.6rem; padding-bottom:7.2rem;} .franchise .fcs_cptvs01_intro li .ico_box img{height:8.1rem;} .franchise .cptvs_area_01 .cont_main{flex-direction:column-reverse; margin-top:-58.3vw;} .franchise .cptvs_area_01 .cont_main dl{padding:6.4rem 3rem} .franchise .cptvs_area_02 .key_pnt{margin-top:6rem;} .franchise .cptvs_area_02 .key_pnt li{font-size:2.8rem; line-height:3.8rem; display:flex; align-items:center; gap:0;} .franchise .cptvs_area_02 .cont_main dd{font-size:3.5rem;} .franchise .cptvs_area_02 .cont_main dd p+p{margin-top:2.7rem;} .franchise .cptvs_area_02 .key_pnt2 li{padding:4rem 1rem} .franchise .cptvs_area_03 .cont_tit{margin-top:5rem;} .franchise .cptvs_area_03 .compare_wr{margin-top:5rem;} .franchise .cptvs_area_03 .store_box .str_name{padding:2rem; font-size:3.5rem; line-height:4.5rem;} .franchise .cptvs_area_03 .str_cont{padding:2rem 2rem 3rem} .franchise .cptvs_area_03 table thead th{padding:1.3rem 3.5rem; font-size:2.4rem; line-height:3.4rem;} .franchise .cptvs_area_03 table tbody td{padding:1.3rem 3.5rem; font-size:2.4rem; line-height:3.4rem;} .franchise .cptvs_area_03 .str_cont dl{padding-left:0;justify-content:center;} .franchise .cptvs_area_03 .str_cont dt{margin-left:-1rem; font-size:3.5rem; line-height:4.8rem;} .franchise .cptvs_area_03 .str_cont .str_margin{padding:1rem 0; width:16rem; font-size:2.4rem; border-radius:3rem;} .franchise .cptvs_area_04 .detail .tit_box{top:-10rem} .franchise .cptvs_area_04 .detail_li{margin-top:-2rem;} .franchise .cptvs_area_04 .detail_li .ico_box img{height:6.4rem;} .franchise .expense .table_wr .scroll_box > table{min-width:740px;} .franchise .expense .table_wr .unit{font-size:2.4rem;} .franchise .expense .table_wr .table_box thead th{height:7rem; font-size:2.4rem;} .franchise .expense .table_wr .table_box tbody td{font-size:2.4rem;} .franchise .expense .asterisk_li li{font-size:2.4rem; line-height:3.4rem;} .franchise .inquiry .board_write input[type=text], .franchise .inquiry .board_write select, .franchise .inquiry .board_write textarea{width:100%; max-width:none;} .franchise .inquiry .board_write>table th{font-size:2.2rem;} .franchise .inquiry .board_write .mini{width:50%;} .franchise .inquiry .board_write td.flex .mini{width:calc(50% - 0.5rem); max-width:none;} .franchise .inquiry .board_write .tel_actual input[type=text]{width:calc(100% - 15rem);} .franchise .inquiry .board_write .tel_actual .actual_btn{height:7rem; font-size:1.8rem;} .franchise .inquiry .board_write .tel_actual .actual_btn.sendComplete .resendTxt{font-size:1.6rem;} .franchise .inquiry .captcha_Area input[type="text"]{max-width:36rem;} /* renew */ /* company */ .company .intro_sect{max-width:none;} .company .intro_sect .int_cont p{font-size:2rem;} .company .intro_sect .int_cont p+p{margin-top:2.5rem;} .company .core_val_sect .core_val_tit{max-width:none; font-size:2rem;} .company .core_val_sect > ul li{max-width:none;} .company .core_val_sect dl{padding:0} .company .core_val_sect dt{font-size:3rem;} .company .core_val_sect dd{font-size:2rem;} /* frchs_yj */ .frchs_yj .brd_story::after{inset:3rem} .frchs_yj .brd_story .video_box{height:50rem;} .frchs_yj .brd_story .video_box iframe{min-width:900px; min-height:450px;} .frchs_yj .brd_story .cont_wr{padding:6rem 5rem} .frchs_yj .core_val ul{max-width:37rem; margin-left:auto; margin-right:auto;;} .frchs_yj .core_val ul li{width:100%;} /* history */ .history-area{} .history-area:before{margin-left:0; left: 0%;} .history-area #his_progress{margin-left:0; left: 0%;} .history-area>li{text-align: left !important; display: block;} .history-area .history-in{width:100%; padding-right:0; text-align: left !important;} .history-area .history-in:before{width: 1.4rem; height:1.4rem; left: -0.6rem; top:0.5rem;} .history-area .history-in>strong{font-size:3.2rem;} .history-area .txt_wrap{} .history-area .txt_wrap>p{padding:0 0 0 1.5rem; font-size:2.2rem;} .history-area .txt_wrap>p:before{content: "ㆍ"; position:absolute; left: -0.3rem; top:0px;} .history-area .txt_wrap>p+p{margin-top:1rem;} .history-area>li .thumb{width:100%; margin-top:3rem; padding-right:0; position: relative;} .history-area>li .thumb img{width:100%; height:auto; position: static; } .history-area>li:nth-child(even) .history-in:before{left:-0.6rem; right:auto;} .history-area>li:nth-child(even) .txt_wrap>p{padding:0 0 0 1.5rem;} .history-area>li:nth-child(even) .txt_wrap>p:before{left: -0.3rem; right:auto;} /*[e] Sub Style */ } @media only screen and (max-width : 540px) { /* 열정 스토리 */ .main_story .inConts{padding-right:0;} .main_story .main_sect_top, .main_story .m-tab, .main_story .main_story_bo .view_btn{padding-right:3rem;} } @media only screen and (max-width : 480px) { .franchise .cptvs_area_02 .key_pnt2{flex-wrap:wrap;} .franchise .cptvs_area_02 .key_pnt2 li{width:100%;} .franchise .cptvs_area_02 .key_pnt2 li+li{border-left:none; border-top:1px solid #222} .franchise .cptvs_area_04 .detail_li li{width:100%;} .franchise .cptvs_area_04 .detail_li dd{max-width:32rem; margin-left:auto; margin-right:auto; font-size:2.2rem; line-height:3.2rem;} /* frchs_yj */ .frchs_yj .brand_identity .color_cont li{width:100%;} } /* transform: scale(1.1) 부분을 transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요 display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; -ms-flex-align:center; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; -ms-flex-align:center; 맨 앞에 정렬 justify-content: flex-start; ​ 맨 끝에 정렬 justify-content: flex-end; 가운데 정렬 justify-content: center; 서로 같은 간격으로 박스들이 조정됨. justify-content: space-between;​ 컨텐츠 뿐만 아니라 그 주변도 같은 간격으로 조정됨. justify-content: space-around; ​ * 수직으로 적용 align-items 컨테이너의 꼭대기로 정렬 justify-content: flex-start ​ 컨테이너의 바닥으로 정렬 flex-end​ 가운데로 정렬 center 컨테이너의 시작 위치에 정렬 baseline​ 컨테이너에 맞도록 늘린다. stretch .list_ol_01 {counter-reset:item; margin-bottom:10px;} .list_ol_01 > li {position: relative; font-size: 16px; line-height: 1.75; margin-bottom:4px; color: #636363; padding-left:26px;} .list_ol_01 > li:last-child {margin-bottom: 0;} .list_ol_01 > li:before {counter-increment: item; content: counter(item); width: 18px; height: 18px; display: inline-block; background: #fff; border:1px solid #636363; color: #636363; border-radius: 50%; text-align: center; line-height:18px; font-size: 10px; position: absolute; top: 5px; left: 0; font-weight:400;} -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); filter:grayscale(100%) blur(0px); -webkit-filter:grayscale(100%) blur(0px); transition: all .5s linear; transition: all .5s ease-out; transform:rotate(180deg); -webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear; -webkit-transition-delay: .8s; transition-delay: .8s; :before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;} display: flex; justify-content: space-between; // 양쪽 끝 정렬 display: flex; justify-content: space-around; // 센터 정렬 display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기 display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기 active :first-child text-indent:-99999px; !important display:table; table-layout:fixed; display:table-row; display:table-cell; box-sizing:border-box; word-break:keep-all; word-wrap:break-word; border-radius:2px; */ @media only screen and (max-width : 480px){ .expense .tableWrap table td {padding: 1rem 0.5rem;} .expense .tableWrap table td span {font-size: 1.4rem;} }