body { /*font-family: Helvetica,Tahoma;*/ } *, *:before, *:after { box-sizing: border-box; } .aos-all { width: 1000px; max-width: 98%; margin: 10vh auto 0 auto; } .aos-item { /*display: inline-block; float: left; width: 33.3333%; height: 300px; padding: 20px;*/ } .aos-item__inner { position: relative; width: 100%; height: 100%; float: left; background: #1da4e2; line-height: 260px; text-align: center; color: #fff; } @media screen and (max-width: 800px) { .aos-item { /*width: 50%;*/ } } @charset "utf-8"; .typo { text-align: center; color:#542623; font-size: 2.125em; margin-bottom: 1em; } .ptBG { position: relative; width: 100%; } .ptBG::before { left:0; bottom:0; background: url("/images/main/instaBG_l.png") no-repeat left bottom; } .ptBG::after { right:0; bottom:0; background: url("/images/main/instaBG_r.png") no-repeat left top; } .ptBG::before, .ptBG::after { content:''; width: 410px; height: 100%; position: absolute; z-index:1; } .menu-tit { position: relative; text-align: center; color:#f4b01b; font-size: 3em; margin: -0.5em 0 0.3em; } .menu-tit span { position: relative; display: inline-block; background: #e04b31; color:#fff; padding: 0 0.6em; border-radius: 50px; vertical-align: baseline; height: 52px; margin: 0; } /*.menu-tit::before { content:'['; margin-right: 0.5em; font-weight: 400; } .menu-tit::after { content:']'; margin-left: 0.5em; font-weight: 400; }*/ .menu-tit2 { position: relative; text-align: center; margin: -2% 0 1%; } .menu1_top { margin-bottom: 5%; padding-bottom: 2%; border-bottom: 1px solid #e5e5e5; } @media all and (max-width:1480px) { .menu-tit span { height: 49px; } } @media all and (max-width:1280px) { .menu-tit span { height: 47px; } } @media all and (max-width:976px) { .menu-tit span { height: 45px; } } @media all and (max-width:767px) { .menu-tit span { height: 2.5rem; } .menu-tit2 img { height: 40px; } .menu1_top { margin-bottom: 8%; padding-bottom: 2%; } } @media all and (max-width:480px) { .menu-tit2 img { height: 35px; } } @media all and (max-width:1280px) { .ptBG::before, .ptBG::after { width: 25%; background-size: 100% auto;} } @media all and (max-width:767px) { .typo { font-size: 1.8em; } .ptBG::before, .ptBG::after { width: 40%; } .ptBG::after { bottom: inherit; top: -10%; } } #menuList { position: relative; overflow: hidden; text-align: center; } #menuList li { float: left; width: calc(25% - 30px); margin-left: 40px; margin-bottom:40px; border:0px solid #e5e5e5; } #menuList li:nth-child(4n+1) { margin-left:0; } #menuList li .menu-img img { width: 100%; } #menuList li .menu-txt { padding: 10% 3%; } #menuList li .menu-txt h4 { color:#542623; font-size: 1.875em; } #menuList li .menu-txt p { color:#989898; } #menuList li .menu-txt a.more { display: inline-block; color:#e04b32; border:1px solid rgba(224, 75, 50, 0.4); border-radius: 40px; line-height: 38px; padding: 0 3.5em; box-sizing: border-box; font-size: 0.875em; margin-top: 1.8em; } #menuList li .menu-txt a.more:hover { color:#fff; background: #e04b32; } #menuList.col3 { margin: 0 auto;} #menuList.col3 li { width: calc(20% - 0px); margin-left: 0px; margin-bottom:0px; } #menuList.col3.menu1_menuList li { width: calc(33% - 0px);} /*#menuList.col3 li { width: calc(33.33% - 26.66px); margin-left: 40px; margin-bottom:40px; }*/ #menuList.col3 li .menu-img img { max-width: 368px; } #menuList.col3.imgBig li .menu-img img { max-width: 100%; } #menuList.no-img li { height: 250px; } #menuList.no-img li .menu-txt { position: relative; } #menuList.no-img li .menu-txt::before { content:''; width: 100%; height: 70px; display: inline-block; margin-bottom: 0.7em; background: url("/images/main/symbolmark.png") no-repeat center; background-size: auto 100%; } #menuListm { position: relative; overflow: hidden; text-align: center; } #menuListm li { float: left; width: calc(25% - 0px); margin-left:0px; margin-bottom:0px; border:0px solid #e5e5e5; } #menuListm li:nth-child(4n+1) { margin-left:0; } #menuListm li .menu-img img { width: 100%; } #menuListm.no-img li { height: 250px; } #menuListm.no-img li .menu-txt { position: relative; } #menuListm.no-img li .menu-txt::before { content:''; width: 100%; height: 70px; display: inline-block; margin-bottom: 0.7em; background: url("/images/main/symbolmark.png") no-repeat center; background-size: auto 100%; } @media all and (max-width:480px) { #menuList li { width: calc(33.3% - 0px) !important; } #menuList li .menu-txt { padding: 10% 7%; } #menuList li .menu-txt h4 { font-size: 1.5em; } #menuList li .menu-txt p { min-height: 30px; overflow-y: auto;} #menuList li .menu-txt a.more { line-height: 2.7em; padding: 0 2.5em; font-size: 0.7em; } } @media all and (max-width:400px) { #menuList li .menu-txt h4 { font-size: 1.3em; margin-bottom: 0.1em; } #menuList li .menu-txt p { line-height: 1.2em; } } .menuSlide { position: relative; width: 100%; text-align: center; overflow: hidden; } .menuSlide .slick-slide { max-width: 500px; border:1px solid #e5e5e5; outline: 0; transform-origin:50% 50%; transform:scale(0.9); transition:transform .5s linear; } .menuSlide .slick-center { transform:scale(1); transition:transform .5s linear; } .menuSlide .menu-img img { width: 100%; } .menuSlide .menu-txt { padding: 10% 3%; } .menuSlide .menu-txt h4 { color:#542623; font-size: 1.875em; } .menuSlide .menu-txt p { color:#989898; } .menuSlide .menu-txt a.more { display: inline-block; color:#e04b32; border:1px solid rgba(224, 75, 50, 0.4); border-radius: 40px; line-height: 38px; padding: 0 3.5em; box-sizing: border-box; font-size: 0.875em; margin-top: 1.8em; } .menuSlide .menu-txt a.more:hover { color:#fff; background: #e04b32; } @media all and (max-width:1280px) { .menuSlide .slick-slide { max-width: 380px; } } @media all and (max-width:976px) { .menuSlide .slick-slide { max-width: 320px; } } @media all and (max-width:767px) { .menuSlide .slick-slide { max-width: 60vw; } .menuSlide .menu-txt { padding: 8% 3%; } .menuSlide .menu-txt a.more { line-height: 2.5em; padding: 0 2.5em; font-size: 0.7em; } .menuSlide .menu-txt h4 { font-size: 1.5em; } .menuSlide .menu-txt p { display: none; } } #menuList2 { overflow: hidden; /*background: rgba(246, 234, 186,0.3);*/ border-top: 3px solid #e04b31; border-bottom: 1px solid #e04b31; padding: 4% 2%; } #menuList2 li { float: left; width: 48%; padding: 1em 0; vertical-align: top; background: url("/images/sub/dotline.png") repeat-x bottom; } #menuList2 li:nth-child(even) { float: right; } #menuList2 li .menu-txt { position: relative; display: table; overflow: hidden; width: 100%; } #menuList2 li .menu-txt h4, #menuList2 li .menu-txt p { display: table-cell; vertical-align: middle; } #menuList2 li .menu-txt h4 { color:#542623; font-size: 1.5em; width: 40%; } #menuList2 li .menu-txt p { color:#989898; width: 60%; } @media all and (max-width:1280px) { #menuList2 li { width: 100%; } #menuList2 li .menu-txt h4 { width: 35%; } #menuList2 li .menu-txt p { width: 65%; } } @media all and (max-width:568px) { #menuList2 li .menu-txt h4 { width: 45%; } #menuList2 li .menu-txt p { width: 55%; } } @media all and (max-width:480px) { #menuList2 { padding: 4% 5%; } #menuList2 li .menu-txt h4, #menuList2 li .menu-txt p { width: 100%; display: block; } } #menuView { display: table; width: 100%; position: relative; background: #fdfaf0; } #menuView > div { display: table-cell; vertical-align: middle; } #menuView .menu-img { width: 42%; text-align: center; } #menuView .menu-img img { max-width: 100%; } #menuView .menu-img.small img { margin-left: 15%; } #menuView .menu-txt { width: 58%; padding: 0 7%; box-sizing: border-box; position: relative; z-index:2; } #menuView .menu-txt h4 { font-size: 4.5em; font-weight: 400; color:#e04b32; letter-spacing: -0.02em; } #menuView .menu-txt p.t1 { font-size: 1.625em; color:#542623; margin-top: 0.5em; } #menuView .menu-txt p.t2 { font-size: 2.125em; color:#f4b01b; font-weight: 600; margin-top: 1.5em; } #menuView .menu-txt p.t2.fs-s { font-size: 1.625em; } .btnList { display: inline-block; background: #e04b32; color:#fff; font-size: 1.45em; text-align: center; line-height: 2.4em; padding: 0 3.2em; } @media all and (max-width:1380px) { #menuView .menu-txt p.t2 { font-size: 1.8em; } } @media all and (max-width:1080px) { #menuView .menu-txt { font-size: 0.85em; } } @media all and (max-width:976px) { #menuView .menu-txt { padding: 0 5%; } #menuView .menu-txt h4 { font-size: 4em; } } @media all and (max-width:767px) { #menuView { max-width: 500px; margin: 0 auto; } #menuView .menu-img, #menuView .menu-txt { width: 100%; display: block; } #menuView .menu-txt { padding: 8% 7%; } #menuView .menu-img.small img { margin: 0 auto; max-width: 80%; } } /*개설절차*/ #stepList { overflow: hidden; width: 100%; max-width: 1200px; margin: 0 auto; } #stepList li { position: relative; counter-increment: number; float: left; width: calc(33.33% - 26.66px); height: 350px; margin: 0 0 40px 40px; border:10px solid transparent; box-sizing: border-box; padding: 30px 40px; background: rgba(246, 234, 186, 0.3); border-radius: 50px; } #stepList li:nth-child(3n+1) { margin-left:0; } #stepList li::before { content:''; width: 40px; height: 40px; border-radius: 100%; position: absolute; left: -50px; top:50%; margin-top: -20px; background: url("/images/sub/step_arr.png") no-repeat center; } #stepList li:nth-child(3n+1)::before { display: none; } #stepList li dl::before { content: 'step 'counter(number, decimal-leading-zero); color:#f4b01b; line-height: 60px; display: block; text-transform: uppercase; font-size: 1.0em; margin-bottom: 1.7em; font-weight: 600; } #stepList li img { position: absolute; top: 20px; right: 7%; background: #f6de7e; border-radius: 100%; width: 60px; height: 60px;} #stepList li dl { position: relative; width: 100%; display: block; } #stepList li dl dt { font-size: 2em; color:#f4b01b; font-weight: 600; line-height: 1.1em; margin-bottom: 0.7em; } #stepList li dl dd { font-size: 1.125em; color:#542623; line-height: 1.5em; } #stepList li:last-child img { display: none; background: none; border-radius: 0; width: auto;} /*#stepList li:last-child { border-color:#e04b32; } #stepList li:last-child img { background: none; border-radius: 0; width: auto;} #stepList li:last-child dl::before { color:#e04b32; } #stepList li:last-child dl dt { color:#e04b32; }*/ .csPro { padding: 7% 0 0; } .csPro h4 { margin-bottom:1.5em; font-size: 1.8em; color:#542623; text-align: center; } #stepList.csProcess { max-width: 1600px; } #stepList.csProcess li { width: calc(20% - 32px); height: 280px; padding: 0 20px; margin: 0 0 0 40px !important; text-align: center; background: #f4b01b; border-radius: 280px; display: table; } #stepList.csProcess li:first-child { margin-left:0 !important; } #stepList.csProcess li:nth-child(3n+1)::before { display: block; } #stepList.csProcess li:first-child:before { display: none; } #stepList.csProcess li dl { display: table-cell; vertical-align: middle; } #stepList.csProcess li dl dt { font-size: 1.8em; color:#fff; } #stepList.csProcess li dl::before { line-height: 1.0em; color:#fff; } #stepList.csProcess li dl dd {color:#fff;} @media all and (max-width:1380px) { #stepList.csProcess li { height: 250px; } #stepList.csProcess li dl dt { font-size: 1.5em; } #stepList.csProcess li dl dd { font-size: 1.0em; } } @media all and (max-width:1280px) { #stepList li { height: 320px; } #stepList.csProcess li { width: calc(20% - 24px); height: 230px; margin: 0 0 0 30px !important; padding: 3% 1%; } #stepList.csProcess li::before { width: 30px; left: -40px; background-size: 70% auto; } } @media all and (max-width:1080px) { #stepList.csProcess li { width: calc(33.33% - 20px); height: 21vw; margin: 0 0 30px 30px !important;} #stepList.csProcess li:nth-child(3n+1) { margin-left:0 !important; } #stepList.csProcess li:nth-child(3n+1)::before { display: none; } #stepList.csProcess li dl dt br { display: none; } #stepList.csProcess li dl dd { line-height: 1.3em; } } @media all and (max-width:976px) { #stepList li { height: 280px; padding: 20px 3%; } #stepList li img { width: 50px; height: 50px; } #stepList li dl::before { line-height: 50px; margin-bottom: 1.2em; } } @media all and (max-width:767px) { #stepList li { width: calc(50% - 20px); margin: 0 0 30px 30px; height: 250px; } #stepList li:nth-child(3n+1) { margin-left:30px; } #stepList li:nth-child(3n+1)::before { display: block; } #stepList li:nth-child(odd) { margin-left:0; } #stepList li:nth-child(odd)::before { display: none; } #stepList li::before { width: 30px; left: -40px; background-size: 70% auto; } #stepList li dl dt { font-size: 1.8em; } #stepList.csProcess li:nth-child(odd)::before { display: block; } #stepList.csProcess li:nth-child(3n+1)::before { display: none; } } @media all and (max-width:640px) { #stepList.csProcess li { width: calc(50% - 20px); margin: 0 0 30px 30px !important; height: 140px; border-width: 8px; padding: 4% 2%; } #stepList.csProcess li:nth-child(3n+1) { margin-left:30px !important; } #stepList.csProcess li:nth-child(odd) { margin-left:0 !important; } #stepList.csProcess li:nth-child(3n+1)::before { display: block; } #stepList.csProcess li:nth-child(odd)::before { display: none; } } @media all and (max-width:480px) { #stepList li { width: 100%; margin: 0 0 25px 0 !important; height: auto; padding: 10px 7% 10%; border-width: 8px; } #stepList li dl dt br, #stepList li dl dd br { display: none; } #stepList li img { right: 3%; } #stepList li::before { width: 100%; height: 25px; background-size: auto 30%; left:0; top: inherit; bottom: -33px; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); } #stepList li:nth-child(odd)::before { display: block; } #stepList li:last-child::before { display: none; } #stepList.csProcess li { width: 100%; margin: 0 0 25px 0 !important; height: auto; padding: 7%; } #stepList.csProcess li::before { width: 100%; height: 25px; background-size: auto 30%; left:0; top: inherit; bottom: -33px;} #stepList.csProcess li:nth-child(3n+1) { margin-left:0 !important; } #stepList.csProcess li:nth-child(odd)::before { display: block; } #stepList.csProcess li:last-child::before { display: none; } } .stit { font-size: 2.2em; color:#212121; text-align: center; margin-bottom: 0.7em; } .stit2 { font-size: 1.8em; color:#542623; text-align: center; margin-bottom: 0.7em; } .lineth { color:#bdbdbd; text-decoration: line-through; font-weight: 400;} .tb-style1 { width: 100%; max-width: 1200px; margin: 0 auto; text-align: center; } .tb-style1 thead th { background: #f4b01b; color:#fff; padding: 1em 0; font-size: 1.35em; line-height: 1.0em; } .tb-style1 tbody th, .tb-style1 tbody td { padding: 1.4em 0; border-bottom: 1px solid #ede8d9; font-size: 1.2em; } .tb-style1 tbody th { color:#542623; font-weight: 600; } .tb-style1 tfoot { background: #e04b32; color:#fff; } .tb-style1 tfoot th, .tb-style1 tfoot td { padding: 0.8em 0; color:#fff; font-size: 1.35em; } .tb-style1 tfoot .total { color:#f6de7e; font-weight: 600; font-size: 1.45em; } /*찾아오시는 길*/ #sMap .locaApi { position: relative; z-index:-1; margin-top: -20px; } #sMap .locaApi .root_daum_roughmap .wrap_map { height: 600px !important; } .wrap_controllers { display: none; } .map_border { display: none; } .locaInfo { position: relative; padding: 2% 4%; border:1px solid #e5e5e5; border-top:0; overflow: hidden; } .locaInfo::before { content:''; width: 70px; height: 70px; display: inline-block; vertical-align: middle; margin-right: 1.5%; background: url("/images/sub/ico_map.png") no-repeat center; background-size: 100% auto;} .locaInfo dl { position: relative; overflow: hidden; display: inline-block; vertical-align: middle; width: calc(98% - 70px); float: right; } .locaInfo dl dt { font-size: 1.875em; color:#f4b01b; font-weight: 600; margin-bottom: 0.3em; } .locaInfo dl dd { display: inline-block; margin-right: 30px; color:#542623; font-size: 1.125em;} .locaInfo dl:nth-child(2) { margin-top: 1em; } @media all and (max-width:1080px) { #sMap .locaApi .root_daum_roughmap .wrap_map { height: 50vw !important; } .locaInfo { padding: 5%;} .locaInfo::before { width: 60px; height: 60px; margin-right: 2%; } .locaInfo dl { width: calc(95% - 60px)} } @media all and (max-width:767px) { #sMap .locaApi .root_daum_roughmap .wrap_map { height: 60vw !important; } .locaInfo::before { width: 50px; height: 50px; } } /*브랜드소개*/ #brandWrap { overflow: hidden; } #brandWrap h4 { font-size: 3.43em; line-height: 1.1em; } #brandWrap p { font-size: 1.25em; line-height: 1.5em; } .brand-info { position: relative; width: 100%; display: table; height: 550px; overflow: hidden; } .brand-info > div { display: table-cell; vertical-align: middle; } .brand-info .img { width: 60%; } .brand-info .img img { max-width: 100%; position: absolute; top:50%; transform:translateY(-50%);} .brand-info .cont { width: 40%; } .brand-info .cont > p { margin-top: 2em; } .brand-info.even { direction: rtl; } .brand-info.even .cont { direction: ltr; padding-left: 5%; } #brand1 { background:#ffa206; color:#fff; } #brand2 { background:#e04b32; color:#fff; } #brand3 { background:#542623; color:#fff; height: 650px; } #brand3_1 { background:#542623; color:#fff; text-align: center; padding: 0% 5% 5%; } #brand4 { background:#dad0c7; color:#212121; text-align: center; padding: 7% 4%; } #brand5 { background: #3d3838; color:#fff; text-align: center; padding: 7% 4%; } #brand6 { background: url("/images/sub/brand6_BG.png") no-repeat center; background-size: cover; color:#fff; text-align: center; padding: 7% 0; } #brand7 { background:#c21920; color:#fff; height: 650px; } @media all and (max-width:1480px) { .brand-info { height: 35vw; } #brand3 { height: 45vw; } #brand7 { height: 40vw; } } @media all and (max-width:1180px) { #brandWrap h4 { font-size: 3em; } #brand7 { height: 45vw; } } @media all and (max-width:976px) { .brand-info .img { width: 55%; } .brand-info .cont { width: 45%; } .brand-info .cont > p { margin-top: 1em; } #brand4, #brand5 { padding: 10% 4%; } #brand6 { padding: 10% 0; } #brand3 { height: 55vw; } #brand3 .img { width: 50%; } #brand3 .img img { max-width: 120%; margin-left: -10%; } #brand3 .cont { width: 50%; } #brand7 { height: 50vw; } #brand7 .img img { max-width: 140%; margin-right: -20%; } } @media all and (max-width:767px) { #brandWrap h4 { font-size: 2.7em; } .brand-info { height: auto !important; } .brand-info .img { width: 45%; } .brand-info .cont { width: 55%; padding: 10% 5%; } .brand-info .cont > p br { display: none; } #brand3 .img { width: 45%; } #brand3 .cont { width: 55%; } #brand3 .img img { max-width: 140%; margin-left: -20%; } #brand7 .img img { max-width: 100%; margin-right: 0; } } @media all and (max-width:640px) { .brand-info { display: block; padding: 3% 0; } .brand-info > div { display: inline-block; width: 100% !important; } .brand-info .img {text-align: center; } .brand-info .img img { max-width: 80%; transform: none; position: relative; } .brand-info .cont { padding: 7% !important; text-align: center; } #brand3 .img img { max-width: 100%; margin-left: 0; } #brand3 .cont { padding-top: 0 !important; } #brand4, #brand5 { padding: 12% 4%; } #brand6 { padding: 12% 0; } } #brand3 .sales { position: relative; margin-top: 3%; } #brand3 .sales .sales_graph, #brand3 .sales .sales_txt { display: inline-block; vertical-align: middle; text-align: center; max-width:48%;} #brand3 .sales .sales_graph { position: relative; display: inline-block; } #brand3 .sales .sales_graph li { display: inline-block; width: 50px; margin-right: 30px;} #brand3 .sales .sales_graph li .bar { display: inline-block; width: 100%; height: 200px; position: relative; } #brand3 .sales .sales_graph li .bar span { background: #ffa206; display: block; width: 100%; position: absolute;bottom:0; } #brand3 .sales .sales_graph li .bar span p { text-align: center; line-height: 20px; font-size: 0.85em; color:#ffa206; position: absolute; top: -32px; left: 50%; transform:translateX(-50%);} #brand3 .sales .sales_graph li p { color:#fff; margin-top: 1em; font-size: 0.875em; } #brand3 .sales .sales_graph li.a .bar span { height: 45%; } #brand3 .sales .sales_graph li.b .bar span { height: 60%; } #brand3 .sales .sales_graph li.c .bar span { height: 90%; } #brand3 .sales .sales_txt { position: relative; margin-left: 2%; } #brand3 .sales .sales_txt::before { content:''; display:inline-block; width: 100%; height: 30px; margin-bottom: 0.2em; background: url("/images/sub/brand3_img2.png") no-repeat center top; } #brand3 .sales .sales_txt::after { content:''; display:inline-block; width: 100%; height: 50px; margin-top: 0.7em; background: url("/images/sub/brand3_img3.png") no-repeat center top; } #brand3 .sales .sales_txt p { font-weight: 600; line-height: 1.4em;} #brand3 .sales .sales_txt .t1 { font-size: 1.5em; } #brand3 .sales .sales_txt .t2 { font-size: 1.875em; } #brand3 .sales .sales_txt .t2 .em { font-size: 1.2em; color:#ffa206; } @media all and (max-width:1380px) { #brand3 .sales .sales_graph li { width: 40px; margin-right: 20px; } #brand3 .sales .sales_txt { font-size: 0.9em; } #brand3 .sales .sales_txt::before, #brand3 .sales .sales_txt::after { background-size: 70% auto; } } @media all and (max-width:1080px) { /* #brand3 .sales .sales_graph li { width: 30px; margin-right: 15px; } */ #brand3 .sales .sales_graph li .bar { height: 180px; } } @media all and (max-width:820px) { #brand3 .sales .sales_graph li { width: 30px; margin-right: 15px; } } @media all and (max-width:767px) { /* #brand3 .sales .sales_graph li { margin-right: 10px; } */ #brand3 .sales .sales_graph li .bar { height: 160px; } #brand3 .sales .sales_txt .t2 { font-size: 1.7em; } } @media all and (max-width:640px) { #brand3 .sales .sales_txt { font-size: 1em; margin-left: 5%;} } #brand3_1 ul { overflow: hidden; } #brand3_1 ul li { float: left; width:calc(33.33% - 20px); margin-left: 30px; } #brand3_1 ul li:first-child { margin-left:0; } #brand3_1 ul li img { max-width: 100%; } @media all and (max-width:1180px) { #brand3_1 ul li { width:calc(33.33% - 13.33px); margin-left: 20px; } } @media all and (max-width:976px) { #brand3_1 { padding: 0 3% 5% 3%; } #brand3_1 ul li { width:calc(33.33% - 8px); margin-left: 12px; } } @media all and (max-width:640px) { #brand3_1 ul li { width:calc(50% - 10px); margin: 5px !important; } } @media all and (max-width:480px) { #brand3_1 { padding: 0 5% 5% 5%; } #brand3_1 ul li { width:100%; margin: 3px !important; } } #brand4 ul { position: relative; margin: 3% 0; } #brand4 ul li { display: inline-block; margin :0 10px; border-bottom:0 !important; width: 600px; max-width: calc(50% - 25px); } #brand4 ul li img { max-width: 100%; } #brand4 ul li p { line-height: 60px; color:#fff; } #brand4 ul li:first-child { background: #542623; border: 7px solid #542623; } #brand4 ul li:last-child { background: #e04b32; border: 7px solid #e04b32; } #brand4 p.vs { font-size: 1.8em; } @media all and (max-width:767px) { #brand4 ul li { margin: 0 5px; } #brand4 ul li p { line-height: 3.5em; } } @media all and (max-width:568px) { #brand4 h4 { padding: 0 15%; } #brand4 ul { margin: 5% 0; } #brand4 ul li { width: 90%; max-width: 100%; margin: 5px 0; } } #brand5 { position: relative; width: 100%; text-align: center; } #brand5::before { left:0; top:0; background: url("/images/sub/brand5_ptt1.png") no-repeat left top; } #brand5::after { right:-5%; top:15%; background: url("/images/sub/brand5_ptt2.png") no-repeat right top; } #brand5::before, #brand5::after { content:''; width: 410px; height: 100%; position: absolute; z-index:1; } #brand5 ul { margin :4% 0 0 ; position: relative; z-index: 2; } #brand5 ul li { display: inline-block; margin :0 10px; width: 600px; vertical-align: middle;} #brand5 ul li img { max-width: 100%; } #brand5 ul li p { margin-top: 1.5em; } #brand5 ul li.contL { width: 340px; font-size: 0.8em; position: absolute; left:8%; bottom:3%;} #brand5 ul li.contR { width: 340px; font-size: 0.8em; position: absolute; right: 8%; top: 12%; } @media all and (max-width:1480px) { #brand5 ul li { width: calc(46% - 23px);} #brand5 ul li.contL, #brand5 ul li.contR { width: calc(27% - 23px); } #brand5 ul li.contL { left:5%; } #brand5 ul li.contR { right: 5%; } } @media all and (max-width:1280px) { #brand5::before, #brand5::after { width: 25%; background-size: 100% auto;} #brand5 ul li.contL p br { display: none; } #brand5 ul li.contL { left:3%; } #brand5 ul li.contR { right: 3%; } } @media all and (max-width:976px) { #brand5 ul li.contL { left:2%; bottom:0;} #brand5 ul li.contR { right: 2%; top: 15%;} } @media all and (max-width:767px) { #brand5::before, #brand5::after { width: 40%; } #brand5 ul li { width: 100% !important; padding-top: 7%; margin: 0; } #brand5 ul li p br { display: none; } #brand5 ul li.contL, #brand5 ul li.contR { position: relative; left:inherit; right:inherit; top: inherit; bottom: inherit; font-size: 1.0em; width: 48% !important; padding: 7% 1% 0; vertical-align: top; } #brand5 ul li.contL img, #brand5 ul li.contR img { width: 100%; max-width: 295px; } } #brand6 { overflow: hidden; } #brand6 .rankingSlide { margin-top: 4%; position: relative; width: 100%; text-align: center; overflow: hidden; } #brand6 .rankingSlide .slick-slide { outline:none; max-width: 300px; border-radius: 10px; overflow: hidden; transform-origin:50% 100%; transform:scale(0.85); transition:transform .5s linear; } #brand6 .rankingSlide .slick-center { transform:scale(1); transition:transform .5s linear; } #brand6 .rankingSlide .slick-slide .img { } #brand6 .rankingSlide .slick-slide img { width: 100%; display: block; } #brand6 .rankingSlide .slick-slide , #brand6 .rankingSlide .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] { transform:scale(0.85); transition:transform .5s linear; } #brand6 .rankingSlide .slick-center, #brand6 .rankingSlide .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] { transform: scale(1, 1); } @media all and (max-width:1280px) { #brand6 .rankingSlide .slick-slide { max-width: 250px; } } @media all and (max-width:976px) { #brand6 .rankingSlide .slick-slide { max-width: 200px; } } @media all and (max-width:767px) { #brand6 .rankingSlide .slick-slide { max-width: 22vw; } } @media all and (max-width:568px) { #brand6 .rankingSlide .slick-slide { max-width: 28vw; } } #brand7 .brand-link { margin-top: 7%; } #brand7 .brand-link a { margin-right: 30px; } #brand7 .brand-link a:last-child { margin-right:0; } #brand7 .brand-link a img { height: 7vw; } @media all and (max-width:1280px) { #brand7 .brand-link a { margin-right: 20px; } #brand7 .brand-link a img { height: 8vw; } #brand7.brand-info .cont p br { display: none; } } @media all and (max-width:976px) { #brand7 .brand-link a img { height: 9vw; } } @media all and (max-width:640px) { #brand7 .brand-link a img { height: 14vw; } } .member { border: 10px solid #f6eaba; padding: 3%; } .member p { line-height: 1.7em; } .member ul { line-height: 1.7em; } .member .stit1 { color:#212121; font-weight: 600; font-size: 1.2em; } .member .stit2 { color:#212121; font-weight: 600; } .member h4 { color:#212121; margin: 2em 0 0.5em; } .member .bgBox { background: #fdfaf0; padding: 2% 3%; margin: 1em 0; } .member .bgBox ul { margin-top: 1em; } .member .bgBox ul li { display: inline-block; width: 40%;} @media all and (max-width:1080px) { .member .bgBox ul li { width: 100%; } }