/* size */ @media screen and (max-width: 1250px) { } /* tablet */ @media screen and (max-width: 650px) { } /* mobile */ /* default */ *{ font-size: inherit; font-weight: inherit; font-family: inherit; color : inherit; box-sizing: border-box; letter-spacing: inherit; line-height: inherit; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } select{ /*ios대응*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Firefox */ input[type='number'] { -moz-appearance: textfield; } body{ font-family: 'Noto Sans KR', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; overflow: hidden; } section{ display:block; } a{ color:inherit; } .inner{ width:1200px; margin:0 auto; } .sec_top{ padding-top: 78.06px; } .paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; } .subPad{ padding: 100px 0; } @media screen and (max-width: 1250px) { .inner{ width:100%; padding:0 10px; } .subPad{ padding: 50px 0; } } /* tablet */ @media screen and (max-width: 650px) { .paging_box{ font-size: 13px; } .sec_top{ padding-top: 112.06px; } } /* mobile */ @media screen and (max-width: 500px) { .sec_top{ padding-top: 136.06px; } .subPad{ padding: 14vw 0; } } /* header */ header { background-color: #000; color: #fff; padding: 13px 0; position: fixed; left: 0; top: 0; width: 100%; z-index: 999; transition: background-color 0.5s, border 0.5s; border-bottom: 1px solid #000; } header .menuList{ display: flex; align-items: center; justify-content: space-between; } header .menuList .whiteLogo{ display: none; } header .menuList .logo{ width: 93px; } header .menuList .menu{ font-size: 18px; font-weight: 500; } header .menuList .menu.active{ color: #F6DDAB; } @media screen and (max-width: 1250px) { header .menuList{ justify-content: center; gap: 50px; } header .menuList .menu{ font-size: 16px; } } @media screen and (max-width: 800px) { header .menuList{ flex-wrap: wrap; gap: unset; justify-content: space-between; } header .menuList > .logoBox{ order: 0; flex-grow: 1; padding-bottom: 10px; width: 100%; display: flex; align-items: center; justify-content: center; } header .menuList > .menu{ order: 1; font-weight: 600; } } @media screen and (max-width: 500px) { header{ padding: 10px 0; } header .menuList{ gap: 10px; justify-content: center; } header .menuList > .logoBox{ padding-bottom: 6px; } header .menuList > .menu{ font-size: 13px; font-weight: 500; text-align: center; width: calc((100% - 40px) / 4); } } header.main.on{ background-color: transparent; border-bottom: 1px solid #fff; } header.main.on .menuList .whiteLogo{ display: block; } header.main.on .menuList .defaultLogo{ display: none; } /* @media screen and (max-width: 500px) { header.main.on{ background-color: #000; } } */ @media screen and (max-width: 650px) { header.main.on{ top: 0; } header.main{ top: -68px; } } /* footer */ footer{ background-color: #222; padding: 46px 0 60px 0; position: relative; } footer::after{ content:''; display: block; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 37px; background-image: url('../img/common/footerBg.png'); background-size: auto 365px; background-position: bottom center; } footer .logo{ width: 234px; margin: 0 auto; display: block; } footer .footerInfo{ margin: 28px auto 0 auto; max-width: 750px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 18px; gap: 2px; } footer .copyRight{ margin-top: 33px; text-align: center; color: rgba(255,255,255,0.2); font-size: 14px; } @media screen and (max-width: 1250px) { footer .logo{ width: 180px; } footer .footerInfo{ font-size: 14px; } footer .copyRight{ font-size: 13px; } } @media screen and (max-width: 500px) { footer { padding: 30px 0 50px 0; } footer .logo{ width: 100px; } footer .footerInfo{ font-size: 13px; } footer .copyRight{ font-size: 12px; } } /*============================ privacy ============================*/ .f_popup_bg{ background-color:rgba(0,0,0,0.5); position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; display:flex; align-items: center; justify-content: center; padding:10px; font-family: 'Noto Sans KR', sans-serif; opacity:0; visibility: hidden; transition: all 0.5s; } .f_popup_bg.on{ opacity:1; visibility: visible; } .f_popup_bg .popup_box{ width:90%; max-width:480px; } .f_popup_bg .btn_wrap{ width:100%; display:flex; justify-content: flex-end; } .f_popup_bg .btn_wrap .btn{ width:30px; height:30px; cursor:pointer; padding:0; } .f_popup_bg .btn_wrap .btn span{ display:block; width:100%; height:2px; background-color:#fff; } .f_popup_bg .btn_wrap .btn span:nth-child(1){ transform: translateY(14px) rotate(-45deg); -webkit-transform: translateY(14px) rotate(-45deg); } .f_popup_bg .btn_wrap .btn span:nth-child(2){ transform: translateY(12px) rotate(45deg); -webkit-transform: translateY(12px) rotate(45deg); } .f_popup_bg .content_wrap{ background-color:#fff; overflow-y: scroll; max-height: 60vh; padding:40px 30px; margin-top:10px; } .f_popup_bg .content_wrap p.title{ text-align:center; font-weight: 600; font-size: 20px; } .f_popup_bg .content_wrap p.content{ font-size: 16px; margin-top:30px; font-weight: 300; } @media screen and (max-width: 650px) { .f_popup_bg .content_wrap p.content{ font-size: 14px; margin-top: 20px; } .f_popup_bg .content_wrap{ padding: 20px 15px; } } @media screen and (max-width: 400px) { .f_popup_bg .btn_wrap .btn{ width: 7.5vw; height: 7.5vw; } .f_popup_bg .content_wrap{ margin-top: 2.5vw; padding: 5vw 3.75vw; } .f_popup_bg .content_wrap p.title{ font-size: 5vw; } .f_popup_bg .content_wrap p.content{ font-size: 4vw; margin-top: 7.5vw; } } /* pc floatingApply */ .RightFloatingSec{ position: fixed; z-index: 999; transition: right 0.5s; right: 0; top: calc(50% - 50px); display: flex; align-items: flex-start; } .RightFloatingSec .showHideBtn{ background-color: #222; border-radius: 2px 0 0 2px; padding: 10px; display: flex; align-items: center; justify-content: center; border: none; } .RightFloatingSec .showHideBtn .icon{ width: 10px; transform: rotate(180deg); } .RightFloatingSec.hide .showHideBtn .icon{ transform: rotate(0deg); } .floatingPc{ background-color: #222; padding: 20px 10px; border-radius: 0 4px 4px 4px; width: 245px; } .RightFloatingSec .applyWrap{ position: absolute; right: 0; display: flex; align-items: flex-start; transition: right 1s; } .RightFloatingSec.hide .applyWrap{ right: -245px; } .floatingPc .titleBox{ text-align: center; font-family: 'Ttangsbudaejjigae'; color: #fff; } .floatingPc .titleBox .t1{ font-size: 24px; } .floatingPc .titleBox .t1 span{ color: #F6DDAB; } .floatingPc .titleBox .bar{ width: 110px; max-width: 100%; } .floatingPc .titleBox .telBox{ font-size: 34px; font-weight: 500; } .floatingPc .formList > li .ipt{ width: 100%; padding: 10px; border-radius: 4px; font-size: 14px; border: 1px solid #fff; } .floatingPc .formList > li select.ipt{ background-image: url('../img/common/selectArrow.svg'); background-position: right 10px center; padding-right: 30px; background-repeat: no-repeat; } .floatingPc .formList > li .ipt::placeholder{ color: #222; } .floatingPc .formList > li + li{ margin-top: 6px; } .floatingPc .agreeBox{ display: block; margin-top: 6px; color: #fff; font-size: 14px; cursor: pointer; } .floatingPc .agreeBox input[type="checkbox"]{ display: none; } .floatingPc .agreeBox .txt{ position: relative; padding-left: 26px; } .floatingPc .agreeBox .txt::before{ content:''; position: absolute; display: block; width: 20px; height: 20px; border: 1px solid #9C1B19; background-color: #fff; left: 0; } .floatingPc .agreeBox input[type="checkbox"]:checked + .txt::before{ background-image: url('../img/common/checkIcon.svg'); background-size: 70%; background-repeat: no-repeat; background-position: center; } .floatingPc .submitBtn{ width: 100%; margin-top: 10px; border-radius: 1000px; padding: 8px; padding-top: 9px; background-color: #9C1B19; border: 1px solid #9C1B19; font-size: 18px; font-weight: 700; color: #fff; } @media screen and (max-width: 900px) { .RightFloatingSec{ pointer-events : none; } .RightFloatingSec .showHideBtn{ pointer-events: auto; } .floatingPc{ pointer-events: auto; } .RightFloatingSec .showHideBtn .icon{ transform: rotate(0deg); } .RightFloatingSec.hide .showHideBtn .icon{ transform: rotate(180deg); } .RightFloatingSec .applyWrap{ right: -245px; } .RightFloatingSec.hide .applyWrap{ right: 0; } } @media screen and (max-width: 650px) { /* 모바일에서도 사용할 경우 현재 줄 주석 해주세요. .RightFloatingSec{ display: none; } */ .RightFloatingSec{ display: none; } .RightFloatingSec{ top: calc(50% - 150px); } } @media screen and (max-width: 500px) { .floatingPc{ width: 200px; } .floatingPc .titleBox .t1{ font-size: 18px; } .floatingPc .titleBox .telBox{ font-size: 26px; } .floatingPc .formList{ margin-top: 6px; } .floatingPc .formList > li .ipt{ font-size: 13px; padding: 5px; } .floatingPc .agreeBox .txt{ font-size: 13px; padding-left: 20px; } .floatingPc .agreeBox .txt::before{ width: 15px; height: 15px; top: 2px; } .floatingPc .submitBtn{ font-size: 14px; } } /* moBottomFloatingSec */ .moBottomFloatingSec{ display: none; } @media screen and (max-width: 650px) { .moBottomFloatingSec{ display: block; position: fixed; width: 100%; left: 0; bottom: 0; z-index: 999; background-color: #222; transition: bottom 1s; } .moBottomFloatingSec.hide{ bottom: calc(-339.5px + 69px ); } .moBottomFloatingSec.hidden { bottom: -339.5px; } .moBottomFloatingSec .titleBox{ gap: 2vw; height: 86px; position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px 0; color: #fff; text-align: center; font-family: 'Ttangsbudaejjigae'; } .moBottomFloatingSec .titleBox span{ color: #F6DDAB; } .moBottomFloatingSec .titleBox .telBox{ font-size: 30px; } .moBottomFloatingSec .titleBox .titleBox .title{ font-size: 6vw; } .moBottomFloatingSec .titleBox .showHideBtn{ border: none; position: absolute; right: 0; padding: 10px; background-color: transparent; } .moBottomFloatingSec .titleBox .showHideBtn .icon{ transform: rotate(-90deg); width: 10px; } .moBottomFloatingSec.hide .titleBox .showHideBtn .icon{ transform: rotate(90deg); } .moBottomFloatingSec .formList{ margin-top: 6px; width: 100%; } .moBottomFloatingSec .formList > li .ipt{ font-size: 13px; padding: 8px; width: 100%; border: 1px solid #fff; border-radius: 4px; } .moBottomFloatingSec .formList > li select.ipt{ background-image: url('../img/common/selectArrow.svg'); background-position: right 10px center; padding-right: 30px; background-repeat: no-repeat; } .moBottomFloatingSec .formList > li + li{ margin-top: 6px; } .moBottomFloatingSec .agreeBox{ color: #fff; display: block; margin-top: 10px; } .moBottomFloatingSec .agreeBox input[type="checkbox"]{ display: none; } .moBottomFloatingSec .agreeBox .txt{ position: relative; font-size: 13px; padding-left: 20px; } .moBottomFloatingSec .agreeBox .txt::before{ content:''; position: absolute; display: block; width: 15px; height: 15px; top: 2px; border: 1px solid #9C1B19; background-color: #fff; left: 0; } .moBottomFloatingSec .agreeBox input[type="checkbox"]:checked + .txt::before{ background-image: url('../img/common/checkIcon.svg'); background-size: 70%; background-repeat: no-repeat; background-position: center; } .moBottomFloatingSec .submitBtn{ margin-bottom: 20px; width: 100%; margin-top: 10px; border-radius:4px; padding: 8px; background-color: #9C1B19; border: 1px solid #9C1B19; font-weight: 700; color: #fff; font-size: 14px; } } @media screen and (max-width: 500px){ .moBottomFloatingSec .titleBox .telBox{ font-size: 8vw; } } /* 📢 .main [메인페이지 퍼블리싱] */ /* .main .catchArti */ .main .catchArti{ background-image: url('../img/main/catchArti/background.png'); background-size:100% 100%; background-repeat: no-repeat; background-position: center; background-color: #1A577F; padding: 140px 0; position: relative; } .main .catchArti::before{ content:''; display: block; width: 100%; height: 37px; background-image: url('../img/main/catchArti/line.png'); background-size: auto 100%; background-position: center; position: absolute; left: 0; top: 0; } .main .catchArti::after{ content:''; display: block; width: 100%; height: 37px; background-image: url('../img/main/catchArti/line.png'); background-size: auto 100%; background-position: center; position: absolute; left: 0; bottom: 0; } .main .catchArti .titleBox{ display: flex; align-items: center; justify-content: center; } .main .catchArti .titleBox .icon{ width: 190px; max-width: 100%; } .main .catchArti .halfBox{ display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; } .main .catchArti .halfBox > div{ width: calc(100% / 3); } .main .catchArti .halfBox > div img{ width: 100%; } .main .catchArti .halfBox .textBox{ display: flex; align-items: center; justify-content: center; } .main .catchArti .halfBox .textBox img{ box-shadow: 15px 17px 11px 0px rgba(0, 0, 0, 0.15); } .main .catchArti .halfBox .dishDiv{ height: 363px; display: flex; position: relative; align-items: center; justify-content: center; } .main .catchArti .halfBox .dishDiv .dish{ position: absolute; } .main .catchArti .halfBox .dishDiv .icon1{ width: 120%; } .main .catchArti .halfBox .dishDiv .icon2{ position: absolute; bottom: 0; } .main .catchArti .halfBox .dishDiv .title{ position: absolute; top: 0; } .main .catchArti .halfBox .dishDiv.dish2 .title{ right: -15%; width: 139%; } .main .catchArti .halfBox .dishDiv.dish2 .icon2{ width: 117%; } @media screen and (max-width: 1250px) { .main .catchArti{ padding: 100px 0; } .main .catchArti .halfBox{ gap: 25px; } .main .catchArti .halfBox .dishDiv{ height: 31vw; } .main .catchArti .halfBox .dishDiv.dish2 .icon2{ width: 107%; } .main .catchArti .halfBox .dishDiv.dish1 .icon2{ width: 24vw; } /* .main .catchArti .halfBox .dishDiv .title{ width: 32vw; } */ /* .main .catchArti .halfBox .dishDiv .dish{ width: 32vw; } */ /* .main .catchArti .halfBox .dishDiv .icon1{ width: 43vw; } */ /* .main .catchArti .halfBox .dishDiv .icon2{ width: 26vw; } */ /* .main .catchArti .halfBox .textBox .icon{ width: 20vw; } */ } @media screen and (max-width: 900px) { .main .catchArti{ background-size: 100% 120%; } .main .catchArti .halfBox{ flex-wrap: wrap; gap: 4vw; } .main .catchArti .halfBox .dishDiv{ width: 100%; order: 0; height: 64vw; } .main .catchArti .halfBox .dishDiv .title{ width: 66vw; } .main .catchArti .halfBox .dishDiv .dish{ width: 66vw; } .main .catchArti .halfBox .dishDiv .icon1{ width: 100%; } .main .catchArti .halfBox .dishDiv .icon2{ width: 47vw; } .main .catchArti .halfBox .dishDiv .icon1{ width: 110%; } .main .catchArti .halfBox .dishDiv.dish2{ order: 3; } .main .catchArti .halfBox .dishDiv.dish2 .title{ right: unset; margin-right: 4%; } .main .catchArti .halfBox .textBox{ order: 1; width: 100%; } .main .catchArti .halfBox .textBox .icon{ width: 28vw; } .main .catchArti .halfBox .dishDiv.dish1 .icon2{ width: 47vw; } .main .catchArti .halfBox .dishDiv.dish2 .icon2{ width: 58vw; } .main .catchArti .halfBox .dishDiv.dish2 .title{ right: 3vw; width: 81vw; } } @media screen and (max-width: 500px) { .main .catchArti{ padding: 15vw 0; } .main .catchArti::before{ height: 5vw; } .main .catchArti::after{ height: 5vw; } .main .catchArti .titleBox .icon{ width: 33vw; } .main .catchArti .halfBox{ margin-top: 10vw; } .main .catchArti .halfBox .dishDiv .icon2{ width: 66vw; } .main .catchArti .halfBox .textBox .icon{ width: 50vw; } .main .catchArti .halfBox .dishDiv.dish1 .icon2{ width: 54vw; } .main .catchArti .halfBox .dishDiv.dish2 .icon2{ width: 67vw; } } .main .catchArti.type2 .halfBox{ gap: 40px; } .main .catchArti.type2 .halfBox .textBox img{ box-shadow: unset; width: 100%; } .main .catchArti.type2 .halfBox .icon.mo{ display: none; } .main .catchArti.type2 .halfBox .textBox .icon svg{ width: 100%; height: auto; filter: drop-shadow(14px 12px 18px rgba(0, 0, 0, 0.20)); overflow: unset; } @media screen and (max-width: 1250px) { .main .catchArti.type2 .halfBox{ gap: 5vw; } .main .catchArti.type2 .halfBox .textBox .icon{ width: 40vw; } } @media screen and (max-width: 900px) { .main .catchArti.type2 .halfBox .textBox .icon{ width: 60vw; max-width: 800px; } .main .catchArti .halfBox .dishDiv .icon1{ width: 89vw; } .main .catchArti.type2 .halfBox .icon.pc{ display: none; } .main .catchArti.type2 .halfBox .icon.mo{ display: block; width: 70vw; max-width: 500px; } } /* .main .successRateArti */ .main .successRateArti{ position: relative; padding: 45px 0; background-image: url('../img/main/successRateArti/background.png'); background-position: center; } .main .successRateArti .inner{ position: relative; z-index: 2; } .main .successRateArti .leftTop{ position: absolute; left: 0; top: 0; } .main .successRateArti .rightTop{ position: absolute; right: 0; top: 0; } .main .successRateArti .leftBottom{ position: absolute; left: 0; bottom: 0; } .main .successRateArti .rightBottom{ position: absolute; right: 0; bottom: 0; } .main .successRateArti .titleBox{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .main .successRateArti .titleBox .title{ width: 233px; max-width: 100%; } .main .successRateArti .titleBox .bar{ width: 100%; } .main .successRateArti .contentBox{ margin-top:36px; } .main .successRateArti .contentBox .title{ display: block; margin: 0 auto; width: 100%; max-width: 608px; } .main .successRateArti .contentBox .titleWrap{ text-align: center; margin-top: 24px; font-family: 'Ttangsbudaejjigae' ; font-size: 50px; line-height: 1.5em; } .main .successRateArti .contentBox .titleWrap span{ color: #9A1C19; } .main .successRateArti .contentBox .graphBox{ margin: 25px auto 0 auto; max-width: 570px; } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(1){ order: 0; } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(2){ order: 2; } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(3){ order: 1; } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(1) .icon{ transform: translateX(20px); } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(3) .icon{ position: relative; z-index: 2; } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(2) .icon{ transform: translateX(-30px); } .main .successRateArti .contentBox .graphBox .graphWrap{ display: flex; align-items: center; } .main .successRateArti .contentBox .graphBox .graphWrap > li{ display: flex; align-items: center; justify-content: center; position: relative; } .main .successRateArti .contentBox .graphBox .graphWrap > li.big{ z-index: 2; } .main .successRateArti .contentBox .graphBox .graphWrap > li .percent{ margin-top: 30px; position: absolute; z-index: 3; font-family: 'Ttangsbudaejjigae'; font-size: 60px; color: #9A1C19; } .main .successRateArti .contentBox .graphBox .notice{ text-align: center; margin-top: 48px; } @media screen and (max-width: 1837px) { .main .successRateArti .leftTop{ width: 12vw; } .main .successRateArti .rightTop{ width: 15vw; } .main .successRateArti .leftBottom{ width: 30vw; } .main .successRateArti .rightBottom{ width: 30vw; } } @media screen and (max-width: 1250px) { .main .successRateArti{ padding: 50px 0; } .main .successRateArti .titleBox .title{ width: 190px; } .main .successRateArti .titleBox .bar{ max-width: 680px; } .main .successRateArti .contentBox .title{ max-width: 510px; } .main .successRateArti .contentBox .titleWrap{ font-size: 45px; } .main .successRateArti .contentBox .graphBox{ margin-top: 20px; } .main .successRateArti .contentBox .graphBox .notice{ margin-top: 0; font-size: 14px; } .main .successRateArti .contentBox .graphBox .graphWrap{ justify-content: center; } .main .successRateArti .contentBox .graphBox .graphWrap > li{ width: 15vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li.big{ width: 20vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li .icon{ width: 100%; } .main .successRateArti .contentBox .graphBox .graphWrap > li .percent{ font-size: 5vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(1) .icon{ transform: translateX(1.5vw); } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(2) .icon{ transform: translateX(-2.3vw); } } @media screen and (max-width: 900px) { .main .successRateArti{ padding-bottom: 44vw; } .main .successRateArti .leftBottom{ width: 52vw; } .main .successRateArti .rightBottom{ width: 52vw; } .main .successRateArti .contentBox .titleWrap{ font-size: 7vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li{ width: 30vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li.big{ width: 40vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li .percent{ font-size: 7vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(1) .icon{ transform: translateX(4vw); } .main .successRateArti .contentBox .graphBox .graphWrap > li:nth-child(2) .icon{ transform: translateX(-6vw); } } @media screen and (max-width: 500px) { .main .successRateArti{ padding-top: 10vw; padding-bottom: 52vw; } .main .successRateArti .leftTop{ width: 15vw; } .main .successRateArti .rightTop{ width: 20vw; } .main .successRateArti .titleBox{ gap: 4vw; } .main .successRateArti .titleBox .title{ width: 33vw; } .main .successRateArti .contentBox{ margin-top: 6vw; } .main .successRateArti .contentBox .titleWrap{ font-size: 8vw; margin-top: 4vw; } .main .successRateArti .contentBox .graphBox{ margin-top: 4vw; } .main .successRateArti .contentBox .graphBox .notice{ font-size: 3vw; } .main .successRateArti .contentBox .graphBox .graphWrap > li .percent{ font-size: 9.5vw; margin-top: 3vw; } } /* .main .rateInfoArti */ .main .rateInfoArti{ overflow: hidden; padding: 80px 0 0 0; background-color: #1A577F; background-image: url('../img/main/rateInfoArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: bottom center; } .main .rateInfoArti .moBr{ display: none; } .main .rateInfoArti .halfBox{ display: flex; align-items: flex-end; justify-content: center; gap: 45px; } .main .rateInfoArti .halfBox .graphBox .title{ text-align: center; color: #fff; font-weight: 400; text-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25); } .main .rateInfoArti .halfBox .graphBox .title .t1{ font-weight: 500; font-size: 32px; } .main .rateInfoArti .halfBox .graphBox .title .t1 .yello{ color: #F6DDAB; } .main .rateInfoArti .halfBox .graphBox .title .t1 .dot{ color: #F6DDAB; position: relative; display: inline-block; } .main .rateInfoArti .halfBox .graphBox .title .t1 .dot::before{ content:''; position: absolute; bottom: calc(100%); left: 10px; display: block; width: 7px; height: 7px; background-color: #F6DDAB; border-radius: 50%; position: absolute; } .main .rateInfoArti .halfBox .graphBox .title .t2{ font-weight: 100; line-height: 1.5em; margin-top: 10px; font-family: 'Ttangsbudaejjigae'; font-size: 36px; } .main .rateInfoArti .halfBox .graphBox .title .t2 .big{ font-size: 50px; } .main .rateInfoArti .halfBox .graphBox .imgBox{ max-width: 545px; margin: 0 auto; margin-top: 30px; display: flex; align-items: center; justify-content: center; } .main .rateInfoArti .halfBox .graphBox .imgBox .icon{ width: 545px; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt{ text-align: center; color: #fff; position: absolute; margin-right: 17px; margin-bottom: 62px; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .small{ font-size: 28px; font-weight: 500; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .price{ font-family: "JS Arirang"; font-size: 60px; } .main .rateInfoArti .halfBox .receipt{ width: 419px; } @media screen and (max-width: 1250px) { .main .rateInfoArti .halfBox{ gap: 5vw; } .main .rateInfoArti .halfBox .receipt{ width: 40vw; } .main .rateInfoArti .halfBox .graphBox .title .t1{ font-size: 20px; } .main .rateInfoArti .halfBox .graphBox .title .t2{ font-size: 4vw; } .main .rateInfoArti .halfBox .graphBox .title .t2 .moBr{ display: inline-block; } .main .rateInfoArti .halfBox .graphBox .title .t2 .big{ font-size: 5vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .icon{ width: 50vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt{ margin-right: 1.5vw; margin-bottom: 6vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .small{ font-size: 2.5vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .price{ font-size: 5vw; } } @media screen and (max-width: 900px) { .main .rateInfoArti .halfBox .graphBox .title .t1 .dot::before{ left: 7px; width: 5px; height: 5px; } .main .rateInfoArti .halfBox{ flex-direction: column; align-items: center; } .main .rateInfoArti .halfBox .receipt{ width: 80%; } .main .rateInfoArti .halfBox .graphBox .title .t2{ font-size: 7vw; } .main .rateInfoArti .halfBox .graphBox .title .t2 .big{ font-size: 10vw; } .main .rateInfoArti .halfBox .graphBox .imgBox{ margin-top: 40px; } .main .rateInfoArti .halfBox .graphBox .imgBox .icon{ width: 80%; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt{ margin-right: 3.5%; margin-bottom: 8vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .small{ font-size: 2.5vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .price{ font-size: 5vw; } } @media screen and (max-width: 500px) { .main .rateInfoArti{ padding-top: 10vw; } .main .rateInfoArti .halfBox .graphBox .title .t1 .dot::before { left: 1.5vw; width: 1vw; height: 1vw; } .main .rateInfoArti .halfBox .graphBox .title .t1{ font-size: 4vw; } .main .rateInfoArti .halfBox .graphBox .imgBox{ margin-top: 5vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .small{ font-size: 4vw; } .main .rateInfoArti .halfBox .graphBox .imgBox .txt .price{ font-size: 7.5vw; } } /* .main .noodleArti */ .main .noodleArti{ overflow: hidden; padding: 80px 0; background-image: url('../img/main/noodleArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .main .noodleArti + .noodleArti{ padding-top: 0; } .main .noodleArti .bgTitle{ display: flex; align-items: center; justify-content: center; } .main .noodleArti .bgTitle .bgBox{ font-weight: 100; padding: 10px 28px; background-color: #19577E; color: #fff; font-family: 'Ttangsbudaejjigae'; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); font-size: 22px; border-radius:100px; } .main .noodleArti .bgTitle .bgBox .big{ font-size: 32px; } .main .noodleArti .title{ text-align: center; margin-top: 26px; font-family: 'Ttangsbudaejjigae'; line-height: 1.5em; font-size: 64px; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); } .main .noodleArti .title .blue{ color: #19577E; } .main .noodleArti .title .red{ color: #9A1C19; } .main .noodleArti .title .small{ font-size: 32px; line-height: 1em; font-weight: 100; } .main .noodleArti .moBr{ display: none; } .main .noodleArti .stickerList{ margin-top: 20px; display: flex; flex-wrap: wrap; width: calc(100% + 50px); margin-left: -25px; } .main .noodleArti .stickerList > li{ position: relative; padding: 25px; } .main .noodleArti .stickerList > li.half{ width: calc((100% / 2)); } .main .noodleArti .stickerList > li.four{ width: calc((100% / 4)); display: flex; align-items: center; justify-content: center; } .main .noodleArti .stickerList > li.three{ width: calc(100% / 3); display: flex; align-items: center; justify-content: center; } .main .noodleArti .stickerList > li.half .img{ width: 107%; } .main .noodleArti .stickerList .img{ width: 100%; } .main .noodleArti .stickerList .tape{ position: absolute; z-index: 2; } .main .noodleArti .stickerList > li.full .tape{ width: 144px; top: 0; left: -20px; } .main .noodleArti .stickerList > li.half .tape{ width: 103px; left: -10px; top: -20px; } .main .noodleArti .stickerList > li.four .tape{ top: -10px; } .main .noodleArti .stickerList > li.three .tape{ top: -10px; } @media screen and (max-width: 1250px) { .main .noodleArti .bgTitle .bgBox{ font-size: 18px; } .main .noodleArti .bgTitle .bgBox .big{ font-size: 27px; } .main .noodleArti .title{ font-size: 50px; } .main .noodleArti .title .small{ font-size: 24px; margin-bottom: 40px; } .main .noodleArti .stickerList{ max-width: 90%; margin: 0px auto 0 auto; } .main .noodleArti .stickerList > li{ padding: 10px; } .main .noodleArti .stickerList > li.full .tape{ width: 8vw; top: 0; left: -2vw; } .main .noodleArti .stickerList > li.half .tape{ width: 6vw; top: -1vw; left: -1vw; } .main .noodleArti .stickerList > li.four .tape { top: -.5vw; width: 2vw; } .main .noodleArti .stickerList > li.three .tape{ top: -.5vw; width: 2vw; } } @media screen and (max-width: 900px) { .main .noodleArti .stickerList{ max-width: 95%; } .main .noodleArti .title{ font-size: 7vw; } .main .noodleArti .stickerList > li{ padding: 1vw; } .main .noodleArti .moBr{ display: inline-block; } .main .noodleArti .title .small{ font-size: 3vw; margin-bottom: 2vw; } } @media screen and (max-width: 500px) { .main .noodleArti{ padding: 15vw 0; } .main .noodleArti .bgTitle .bgBox{ font-size: 3vw; padding: 2vw 6vw 1vw 6vw; border-radius: 5vw; } .main .noodleArti .bgTitle .bgBox .big{ font-size: 6vw; } .main .noodleArti .title{ margin-top: 4vw; } .main .noodleArti .title .small{ font-size: 4vw; margin-top: 2vw; margin-bottom: 6vw; } .main .noodleArti .stickerList{ width: 100%; max-width: 100%; } .main .noodleArti .stickerList > li{ padding: 1vw; } .main .noodleArti .stickerList > li.half{ width: 100%; } .main .noodleArti .stickerList > li.half .img{ width: 105%; } .main .noodleArti .stickerList > li.four{ width: calc(100% / 2); } .main .noodleArti .stickerList > li.three{ width: calc(100% / 2); } } /* .main .whyArti */ .main .whyArti{ padding: 80px 0; background-color: #222; position: relative; } .main .whyArti .leftBottom{ position: absolute; left: 0; bottom: 0; } .main .whyArti .rightTop{ position: absolute; right: 0; top: 0; } .main .whyArti .inner{ position: relative; } .main .whyArti .titleBox{ text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); text-align: center; color: #fff; font-family: 'Ttangsbudaejjigae'; line-height: 1.5em; position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; } .main .whyArti .titleBox::after{ content:''; display: block; width: 38px; height: 38px; background-image: url('../img/main/whyArti/twinkle2.png'); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; right: 60px; } .main .whyArti .titleBox::before{ content:''; display: block; width: 80px; height: 90px; background-image: url('../img/main/whyArti/twinkle1.png'); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; left: 40px; } .main .whyArti .titleBox .t1{ font-size: 36px; } .main .whyArti .titleBox .t2{ margin-top: 20px; text-shadow: -3px -3px 0 #fff, 0px -3px 0 #fff, 3px -3px 0 #fff, -3px 0px 0 #fff, 3px 0px 0 #fff, -3px 3px 0 #fff, 0px 3px 0 #fff, 3px 3px 0 #fff, /* 1px 간격의 그림자 */ -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; /* 외곽선 색상 */ line-height: 1.5em; font-size: 64px; color: #19577E; } .main .whyArti .titleBox .t2 .big{ color: #9C1B19; font-size: 1.2em; } .main .whyArti .itemList{ margin-top: 40px; display: flex; flex-wrap: wrap; } .main .whyArti .itemList > li{ width: calc(100% / 5); height: 240px; background-color: #000; color: #fff; display: flex; align-items: center; justify-content: center; background-size: cover; background-repeat: no-repeat; background-position: center; transition: background-color 0.2s, color 0.2s; } .main .whyArti .itemList > li:hover{ background-color: #fff; color:#000; } .main .whyArti .itemList > li .item{ text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); text-align: center; font-family: 'Ttangsbudaejjigae'; } .main .whyArti .itemList > li .item .numberBox{ text-align: center; } .main .whyArti .itemList > li .item .numberBox .t1{ font-size: 32px; display: flex; align-items: center; justify-content: center; } .main .whyArti .itemList > li .item .numberBox .t1 span{ border-bottom: 1px solid #fff; } .main .whyArti .itemList > li:hover .item .numberBox .t1 span{ border-color: #000; } .main .whyArti .itemList > li .item .numberBox .txt{ margin-top: 18px; line-height: 1.5em; font-size: 32px; font-weight: 500; } .main .whyArti .itemList > li .item .numberBox .txt span{ color: #9C1B19; } .main .whyArti .itemList > li:nth-child(7) .item .numberBox .txt span{ color: #19577E; } .main .whyArti .itemList > li:nth-child(9) .item .numberBox .txt span{ color: #19577E; } .main .whyArti .itemList > li.img1{ background-image: url('../img/main/whyArti/img1.png'); } .main .whyArti .itemList > li.img2{ background-image: url('../img/main/whyArti/img2.png'); } .main .whyArti .itemList > li.img3{ background-image: url('../img/main/whyArti/img3.png'); } .main .whyArti .itemList > li.img4{ background-image: url('../img/main/whyArti/img4.png'); } .main .whyArti .itemList > li.img5{ background-image: url('../img/main/whyArti/img5.png'); } .main .whyArti .moBr{ display: none; } @media screen and (max-width: 1250px) { .main .whyArti .titleBox .t1{ font-size: 24px; } .main .whyArti .titleBox .t2{ font-size: 52px; } .main .whyArti .itemList > li{ height: 20vw; } .main .whyArti .itemList > li .item .numberBox .t1{ font-size: 3vw; } .main .whyArti .itemList > li .item .numberBox .txt{ font-size: 2.3vw; margin-top: 1vw; } } @media screen and (max-width: 900px) { .main .whyArti .moBr{ display: inline-block; } .main .whyArti .leftBottom{ width: 50vw; } .main .whyArti .rightTop{ width: 30vw; } .main .whyArti .titleBox{ font-weight: 800; } .main .whyArti .titleBox .t1{ font-size: 4vw; } .main .whyArti .titleBox .t2{ font-size: 7vw; margin-top: 1vw; text-shadow: unset; -webkit-text-stroke: .3vw white; } .main .whyArti .titleBox::before{ width: 8vw; height: 8vw; left: 0; top: 4vw; } .main .whyArti .titleBox::after{ width: 4vw; height: 4vw; right: 0; } .main .whyArti .itemList{ max-width: 600px; margin: 40px auto 0 auto; } .main .whyArti .itemList > li{ width: calc(100% / 3); height: 200px; } .main .whyArti .itemList > li:last-child{ display: none; } .main .whyArti .itemList > li .item .numberBox .t1{ font-size: 30px; } .main .whyArti .itemList > li .item .numberBox .txt{ font-size: 24px; } } @media screen and (max-width: 600px) { /* .main .whyArti .itemList > li:hover{ background-color: #000; color:#fff; } */ /* .main .whyArti .itemList > li:hover .item .numberBox .t1 span{ border-color: #fff; } */ .main .whyArti .itemList > li{ height: 32vw; } .main .whyArti .itemList > li .item .numberBox .t1{ font-size: 4vw; } .main .whyArti .itemList > li .item .numberBox .txt{ font-size: 4vw; margin-top:1vw; } } @media screen and (max-width: 500px) { .main .whyArti{ padding: 10vw 0; } .main .whyArti .itemList{ margin-top: 5vw; } } /* .main .applyArti */ .main .applyArti{ padding: 100px 0; background-color: #19577E; position: relative; } .main .applyArti::before{ content:''; display: block; width: 100%; height: 37px; background-image: url('../img/main/catchArti/line.png'); background-size: auto 100%; background-position: center; position: absolute; left: 0; top: 0; } .main .applyArti::after{ content:''; display: block; width: 100%; height: 37px; background-image: url('../img/main/catchArti/line.png'); background-size: auto 100%; background-position: center; position: absolute; left: 0; bottom: 0; } .main .applyArti .moBr{ display: none; } .main .applyArti .titleBox{ font-weight: 100; text-align: center; color: #fff; font-family: 'Ttangsbudaejjigae'; } .main .applyArti .titleBox .t1{ font-size: 45px; } .main .applyArti .titleBox .t2{ font-size: 60px; margin-top: 8px; } .main .applyArti .titleBox .t2 .yello{ color: #F6DDAB; } .main .applyArti .halfBox{ display: flex; gap: 28px; margin-top: 20px; } .main .applyArti .halfBox .leftBox{ background-color: #fff; padding: 30px 50px; border-radius: 10px; width: 520px; } .main .applyArti .halfBox .leftBox .title{ text-align: center; font-size: 32px; font-family: 'Ttangsbudaejjigae'; } .main .applyArti .halfBox .leftBox .iptList{ margin-top: 13px; } .main .applyArti .halfBox .leftBox .iptList li + li{ margin-top: 13px; } .main .applyArti .halfBox .leftBox .iptList .label .red{ color: #EB5757; } .main .applyArti .halfBox .leftBox .iptList .ipt{ width: 100%; margin-top: 10px; padding: 10px; border-radius: 4px; border: 1px solid #E4E4E4; } .main .applyArti .halfBox .leftBox .iptList select.ipt{ background-image: url('../img/common/selectArrow.svg'); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; color: #7F7F7F; } .main .applyArti .halfBox .leftBox .iptList .ipt::placeholder{ color: #7F7F7F; } .main .applyArti .halfBox .rightBox{ background-color: #000; flex-grow: 1; border-radius: 10px 10px 0 0; overflow: hidden; display: flex; flex-direction: column; } .main .applyArti .halfBox .rightBox .imgBox{ flex-grow: 1; background-image: url('../img/main/applyArti/img1.png'); background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; justify-content: center; align-items: center; } .main .applyArti .halfBox .rightBox .imgBox .icon{ width: 80%; max-width: 337px; } .main .applyArti .halfBox .rightBox .calBox{ padding: 28px 0; background-color: #fff; display: flex; align-items: center; justify-content: center; } .main .applyArti .halfBox .rightBox .calBox .telBox{ display: flex; align-items: center; gap: 26px; } .main .applyArti .halfBox .rightBox .calBox .telBox .icon{ width: 105px; } .main .applyArti .halfBox .rightBox .calBox .telBox .txt{ font-size: 60px; color: #9C1B19; font-family: 'Ttangsbudaejjigae'; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); } .main .applyArti .agreeBox { margin-top: 10px; display: block; } .main .applyArti .agreeBox .txt{ display: flex; align-items: center; color: #7F7F7F; position: relative; padding-left: 26px; } .main .applyArti .agreeBox .txt .privacy_view{ color: #222; } .main .applyArti .agreeBox .txt::before{ content:''; position: absolute; display: block; width: 20px; height: 20px; border: 1px solid #9C1B19; background-color: #fff; left: 0; } .main .applyArti .agreeBox input[type="checkbox"]{ display: none; } .main .applyArti .agreeBox input[type="checkbox"]:checked + .txt::before{ background-image: url('../img/common/checkIcon.svg'); background-size: 70%; background-repeat: no-repeat; background-position: center; } .main .applyArti .submitBtn{ display: block; border-radius: 30px; border: 1px solid #9A1C19; width: 100%; margin: 0 auto; margin-top: 20px; max-width: 312px; padding: 10px; background-color: #9C1B19; color: #fff; text-align: center; font-weight: 700; } @media screen and (max-width: 1250px) { .main .applyArti .titleBox .t1{ font-size: 32px; } .main .applyArti .titleBox .t2{ font-size: 50px; } .main .applyArti .halfBox .rightBox .calBox .telBox .icon{ width: 6vw; } .main .applyArti .halfBox .rightBox .calBox .telBox .txt{ font-size: 4vw; } .main .applyArti .halfBox .leftBox .iptList{ font-size: 14px; } .main .applyArti .agreeBox{ font-size: 13px; } .main .applyArti .agreeBox{ font-size: 14px; } } @media screen and (max-width: 900px) { .main .applyArti .moBr{ display: inline-block; } .main .applyArti .titleBox .t2{ font-size: 7vw; } .main .applyArti .halfBox{ gap: 2vw; flex-direction: column; max-width: 500px; margin: 2vw auto 0 auto; } .main .applyArti .halfBox .leftBox{ width: 100%; order: 1; } .main .applyArti .halfBox .rightBox .imgBox{ height: 200px; } } @media screen and (max-width: 500px) { .main .applyArti{ padding: 15vw 0; } .main .applyArti::before{ height: 5vw; } .main .applyArti::after{ height: 5vw; } .main .applyArti .titleBox .t1{ font-size: 7vw; } .main .applyArti .titleBox .t2{ font-size: 8vw; margin-top: 1vw; } .main .applyArti .halfBox{ margin-top: 4vw; } .main .applyArti .halfBox .leftBox{ padding: 9vw; } .main .applyArti .halfBox .leftBox .title{ font-size: 7vw; } .main .applyArti .halfBox .leftBox .iptList{ margin-top: 2vw; } .main .applyArti .halfBox .leftBox .iptList li + li{ margin-top: 2vw; } .main .applyArti .halfBox .leftBox .iptList .ipt{ margin-top: 2vw; } .main .applyArti .halfBox .rightBox .imgBox{ height: 50vw; } .main .applyArti .halfBox .rightBox .calBox .telBox{ gap: 4vw; } .main .applyArti .halfBox .rightBox .calBox .telBox .icon{ width: 14vw; } .main .applyArti .halfBox .rightBox .calBox .telBox .txt{ font-size: 8vw; } } @media screen and (max-width: 400px) { .main .applyArti .halfBox .leftBox .iptList{ font-size: 3.5vw;} .main .applyArti .halfBox .leftBox .iptList .ipt{ padding: 1vw; } .main .applyArti .agreeBox .txt{ margin-top: 2vw; font-size: 3.5vw; padding-left: 5vw; } .main .applyArti .agreeBox input[type="checkbox"]:checked + .txt::before{ width: 4.3vw; height: 4.3vw; } .main .applyArti .submitBtn{ margin-top: 4vw; padding: 2.5vw; font-size: 4vw; border-radius: 8vw; } } /* .main .mainBanner */ .main .mainBanner{ padding: 150px 0; min-height: 100vh; background-color: #000; position: relative; display: flex; align-items: center; } .main .mainBanner .blackBg{ background-color: rgba(0,0,0,0.7); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .main .mainBanner .inner{ display: flex; justify-content: center; position: relative; z-index: 5; } .main .mainBanner .titleBox .title{ max-width: 100%; width: 485px; } .main .mainBanner .ScrollBox{ position: absolute; left: 0; bottom: 0; z-index: 5; padding: 20px 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 14px; } @media screen and (max-width: 1250px) { .main .mainBanner .titleBox .title{ width: 400px; } } @media screen and (max-width: 650px) { .main .mainBanner{ padding: 250px 0; } .main .mainBanner .ScrollBox{ bottom:75px; font-size: 13px; } .main .mainBanner .ScrollBox .mouse{ width: 20px; } .main .mainBanner .ScrollBox .arrow{ width: 8px; } } @media screen and (max-width: 500px) { .main .mainBanner .titleBox{ max-width: 80%; } .main .mainBanner .titleBox .title{ margin: 0 auto; } .main .mainBanner .ScrollBox{ font-size: 3vw; gap: 1vw; } .main .mainBanner .ScrollBox .mouse{ width: 5vw; } .main .mainBanner .ScrollBox .arrow{ width: 2vw; } } /* .main .brandStoryArti */ .main .brandStoryArti{ background-color: #222; padding: 92px 0 0 0; overflow: hidden; color: #fff; } .main .brandStoryArti .titleBar{ font-family: 'Ttangsbudaejjigae'; font-size: 30px; border-bottom: 4px solid #fff; } .main .brandStoryArti .halfBox{ display: flex; align-items: flex-end; gap: 50px; margin-top: 50px; } .main .brandStoryArti .halfBox .textBox{ display: flex; align-items: center; justify-content: flex-end; background-color: #1A577F; overflow: hidden; width: 50%; padding: 117px 60px; padding-left: 0; position: relative; border-radius: 0 40px 0 0; } .main .brandStoryArti .halfBox .textBox .textWrap{ position: relative; z-index: 2; flex-grow: 1; max-width: 512px; } .main .brandStoryArti .halfBox .textBox .icon{ position: absolute; width: 610px; right: 480px; } .main .brandStoryArti .halfBox .textBox .titleWrap{ text-align: center; } .main .brandStoryArti .halfBox .textBox .titleWrap .t1{ font-family: 'JS Arirang'; font-size: 68px; } .main .brandStoryArti .halfBox .textBox .titleWrap .t1 span{ font-size: 0.8em; } .main .brandStoryArti .halfBox .textBox .titleWrap .t2{ font-weight: 100; font-family: 'Ttangsbudaejjigae'; font-size: 26px; line-height: 1.3em; margin-top: 5px; } .main .brandStoryArti .halfBox .textBox .contentWrap{ line-height: 1.5em; position: relative; z-index: 2; margin-top: 26px; text-align: center; padding: 50px 28px; border-radius: 20px; border: 2px solid #fff; } .main .brandStoryArti .halfBox .textBox .contentWrap .big{ color: #FFD600; font-weight: 100; margin-top: 20px; font-family: 'Ttangsbudaejjigae'; font-size: 28px; } .main .brandStoryArti .halfBox .textBox .contentWrap .moBr{ display: none; } .main .brandStoryArti .halfBox .slideWrap{position: relative; width: 50%; overflow: hidden; } .main .brandStoryArti .halfBox .slideWrap .imgBox{ width: 100%; height: 782px; background-size: cover; background-repeat: no-repeat; background-position: center; } .main .brandStoryArti .halfBox .slideWrap .imgBox.img1{ background-image: url('../img/main/brandStoryArti/img1.png'); } .main .brandStoryArti .halfBox .slideWrap .imgBox.img2{ background-image: url('../img/main/brandStoryArti/img2.png'); } .main .brandStoryArti .halfBox .slideWrap .imgBox.img3{ background-image: url('../img/main/brandStoryArti/img3.png'); } .main .brandStoryArti .halfBox .slideWrap .imgBox.img4{ background-image: url('../img/main/brandStoryArti/img4.png'); } .main .brandStoryArti .halfBox .slideWrap .imgBox.img5{ background-image: url('../img/main/brandStoryArti/img5.png'); } .main .brandStoryArti .halfBox .slideWrap .slideNavigation{ position: absolute; left: 10px; bottom: 0; z-index: 4; margin-bottom: 10px; display: flex; gap: 40px; } .main .brandStoryArti .halfBox .slideWrap .slideNavigation .pnBtn{ background-color: transparent; border: none; } .main .brandStoryArti .halfBox .slideWrap .slideNavigation .nextBtn{ transform: rotate(180deg); } @media screen and (max-width: 1250px) { .main .brandStoryArti .titleBar{ font-size: 25px; } .main .brandStoryArti .halfBox{ gap: 30px; } .main .brandStoryArti .halfBox .textBox{ padding: 40px 20px; } .main .brandStoryArti .halfBox .slideWrap .imgBox{ height: 641px; } .main .brandStoryArti .halfBox .textBox .contentWrap{ padding: 30px; font-size: 15px; } .main .brandStoryArti .halfBox .textBox .contentWrap br{ display: none; } .main .brandStoryArti .halfBox .textBox .contentWrap .moBr{ display: inline-block; } .main .brandStoryArti .halfBox .textBox .contentWrap .big{ font-size: 20px; } .main .brandStoryArti .halfBox .slideWrap .slideNavigation{ margin-bottom: 20px; } } @media screen and (max-width: 1230px) { .main .brandStoryArti .halfBox .textBox{ width: 60%; } } @media screen and (max-width: 900px) { .main .brandStoryArti .halfBox{ flex-direction: column; } .main .brandStoryArti .halfBox .textBox{ width: 100%; } .main .brandStoryArti .halfBox .slideWrap{ width: 100%; } .main .brandStoryArti .halfBox .slideWrap .imgBox{ height: 47vw; } .main .brandStoryArti .halfBox .slideWrap .slideNavigation{ justify-content: center; display: none; } .main .brandStoryArti .halfBox .slideWrap .slideNavigation .pnBtn .icon{ display: block; width: 10px; } } @media screen and (max-width: 500px) { .main .brandStoryArti{ padding: 14vw 0 0 0; } .main .brandStoryArti .titleBar{ padding-bottom: 1vw; border-bottom: .5vw solid #fff;} .main .brandStoryArti .halfBox{ gap: 5vw; margin-top: 8vw; } .main .brandStoryArti .halfBox .slideWrap .imgBox{ height: 64vw; } .main .brandStoryArti .halfBox .textBox{ padding: 5vw; border-radius: 0 10vw 0 0; } .main .brandStoryArti .halfBox .textBox .titleWrap .t1{ font-size: 14vw; } .main .brandStoryArti .halfBox .textBox .titleWrap .t2{ font-size: 5vw; margin-top: 1vw; } .main .brandStoryArti .halfBox .textBox .contentWrap{ margin-top: 5vw; border-radius: 5vw; padding: 5vw; font-size: 3.1vw; } .main .brandStoryArti .halfBox .textBox .contentWrap .big{ margin-top: 2vw; font-size: 5vw; } } /* .main .threePointArti */ .main .threePointArti{ overflow: hidden; padding: 166px 0; background-image: url('../img/main/threePointArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .main .threePointArti .titleBox{ display: flex; align-items: center; justify-content: center; } .main .threePointArti .titleBox .title{ width: 100%; max-width: 1104px; } .main .threePointArti .dishList{ margin: 0 auto; margin-top: 55px; display: flex; justify-content: space-between; max-width: 1157px; } .main .threePointArti .dishList > li{ position: relative; display: flex; align-items: center; justify-content: center; } .main .threePointArti .dishList > li .dish{ width: 358px; max-width: 100%; } .main .threePointArti .dishList > li .hover{ position: absolute; width: 358px; transition: opacity 0.5s; } .main .threePointArti .dishList > li:hover .hover{ opacity: 0; } @media screen and (max-width: 1250px) { .main .threePointArti{ padding: 100px 0; } .main .threePointArti .titleBox .title{ max-width: 750px; } .main .threePointArti .dishList{ gap: 10px; } .main .threePointArti .dishList > li .dish{ width: 30vw; } .main .threePointArti .dishList > li .hover{ width: 30vw; } } @media screen and (max-width: 900px) { .main .threePointArti .dishList{ flex-wrap: wrap; } .main .threePointArti .dishList > li{ width: calc((100% - 20px) / 2); } .main .threePointArti .dishList > li:nth-child(1){ width: 100%; } .main .threePointArti .dishList > li .dish{ width: 45vw; } .main .threePointArti .dishList > li .hover{ width: 45vw; } /* .main .threePointArti .dishList > li:hover .hover{ opacity: 1; } */ } @media screen and (max-width: 500px) { .main .threePointArti{ padding: 14vw 0; } .main .threePointArti .dishList{ gap: 0; margin-top: 4vw; } .main .threePointArti .dishList > li .dish{ width: 42vw; } .main .threePointArti .dishList > li .hover{ width: 42vw; } } /* .main .fiveMinuteArti */ .main .fiveMinuteArti{ padding: 85px 0; background-image: url('../img/main/fiveMinuteArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .main .fiveMinuteArti .titleBox{ display: flex; align-items: flex-end; justify-content: space-between; } .main .fiveMinuteArti .titleBox .title{ font-family: 'Ttangsbudaejjigae'; color: #fff; font-size: 54px; } .main .fiveMinuteArti .titleBox .title p{ font-size: 1.2em; } .main .fiveMinuteArti .titleBox .title .yello{ color: #FFD600; } .main .fiveMinuteArti .titleBox .content{ color: #fff; text-align: right; font-size: 20px; } .main .fiveMinuteArti .titleBox .content .yello{ font-weight: 500; color: #FFD600; } .main .fiveMinuteArti .growBox{ margin-top: 87px; height: 514px; position: relative; display: flex; flex-direction: column; justify-content: center; } .main .fiveMinuteArti .growBox .dish{ opacity: 0; position:absolute; left: 0; width: 740px; z-index: 2; padding-bottom: 42px; /*transition: opacity 0.5s;*/ } .main .fiveMinuteArti .growBox .dish2{ opacity: 0; } .main .fiveMinuteArti .growBox .dish3{ opacity: 0; } .main .fiveMinuteArti .itemList{ padding-left: 480px; } .main .fiveMinuteArti .itemList > li + li{ margin-top: 20px; } .main .fiveMinuteArti .itemList .blackBox{ background-color: #000; padding: 10px; color: #fff; font-family: 'Ttangsbudaejjigae'; } .main .fiveMinuteArti .itemList .blackBox .halfBox{ padding: 12px 65px 12px 0; border: 1px solid #fff; font-size: 32px; display: flex; align-items: center; gap: 50px; justify-content: flex-end; } .main .fiveMinuteArti .itemList .blackBox .halfBox .arrowBox{ flex-grow: 1; display: flex; align-items: center; position: relative; } .main .fiveMinuteArti .itemList .blackBox .halfBox .arrowBox .bar{ width: 100%; height: 2px; background-color: #fff; } .main .fiveMinuteArti .itemList .blackBox .halfBox .arrowBox .arrow{ position: absolute; right: 0; } .main .fiveMinuteArti .itemList .blackBox .halfBox .arrowBox .arrow.active{ opacity: 0; } .main .fiveMinuteArti .itemList .blackBox .halfBox .txt{ font-size: 1.5em; color: #fff; } .main .fiveMinuteArti .textWrap{ font-weight: 100; text-align: right; margin-top: 44px; line-height: 1.5em; font-family: 'Ttangsbudaejjigae'; font-size: 33px; color: #fff; } .main .fiveMinuteArti .textWrap .big{ font-size: 1.2em; color:#FFD600; } .main .fiveMinuteArti .textWrap .moBr{ display: none; } .main .fiveMinuteArti .itemList .on .blackBox .halfBox{ border-color: #FF2421; color: #FF2421; } .main .fiveMinuteArti .itemList .on .blackBox .halfBox .arrowBox .bar{ background-color: #FF2421; } .main .fiveMinuteArti .itemList .on .blackBox .halfBox .arrowBox .arrow{ opacity: 0; } .main .fiveMinuteArti .itemList .on .blackBox .halfBox .arrowBox .arrow.active{ opacity: 1; } .main .fiveMinuteArti .itemList .on .blackBox .halfBox .txt{ color: #FF2421; } @media screen and (max-width: 1250px) { .main .fiveMinuteArti .titleBox .title{ font-size: 40px; } .main .fiveMinuteArti .titleBox .content{ font-size: 18px; } .main .fiveMinuteArti .growBox{ height: 50vw; } .main .fiveMinuteArti .growBox .dish{ width: 62vw; padding-bottom: 0; } .main .fiveMinuteArti .textWrap{ font-size: 30px; } .main .fiveMinuteArti .itemList{ padding-left: 41vw; margin-top: 10vw; } .main .fiveMinuteArti .itemList > li + li{ margin-top: 2vw; } .main .fiveMinuteArti .itemList .blackBox{ padding: 1vw; } .main .fiveMinuteArti .itemList .blackBox .halfBox{ font-size: 3vw; padding: 1vw 4vw 1vw 0; gap: 3vw; } .main .fiveMinuteArti .textWrap{ font-size: 2.8vw; margin-top: 5vw; } } @media screen and (max-width: 900px) { .main .fiveMinuteArti{ padding: 14vw 0; } .main .fiveMinuteArti .titleBox{ flex-wrap: wrap; flex-direction: column; align-items: center; } .main .fiveMinuteArti .titleBox .title{ font-size: 8vw; } .main .fiveMinuteArti .titleBox .content{ font-size: 16px; } .main .fiveMinuteArti .titleBox .content{ text-align: center; margin-top: 10px; } .main .fiveMinuteArti .textWrap{ position: static; margin-top: 12vw; text-align: center; font-size: 4vw; } .main .fiveMinuteArti .growBox{ height: auto; margin-top: 5vw; } .main .fiveMinuteArti .growBox .dish{ top: 2vw; } } @media screen and (max-width: 500px) { .main .fiveMinuteArti .textWrap{ font-size: 5.5vw; } .main .fiveMinuteArti .titleBox .content{ font-size: 3.5vw; margin-top: 5vw; } .main .fiveMinuteArti .itemList .blackBox .halfBox .arrowBox .arrow{ width: 2vw; } .main .fiveMinuteArti .itemList .blackBox .halfBox .arrowBox .bar{ height: .3vw; } .main .fiveMinuteArti .textWrap .moBr{ display: inline-block; } } /* .main .specialtyStoreArti */ .main .specialtyStoreArti{ position:relative; background-color: #000; padding: 300px 0; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; } .main .specialtyStoreArti .bgVideo{ filter: saturate(3); width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .main .specialtyStoreArti .inner{ position: relative; } .main .specialtyStoreArti .textBox{ text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 26px; } .main .specialtyStoreArti .textBox .t1{ font-family: 'Ttangsbudaejjigae'; font-size: 54px; line-height: 1.3em; } .main .specialtyStoreArti .textBox .t1.big{ font-size: 72px; } /* .main .specialtyStoreArti .textBox .t1 .stroke{ color: transparent; -webkit-text-stroke: 2px white; } */ .main .specialtyStoreArti .textBox .bar{ background-color: #fff; width: 2px; height: 50px; } .main .specialtyStoreArti .dish{ width: 38%; position: absolute; } .main .specialtyStoreArti .dish.dish1{ left: -12%; } .main .specialtyStoreArti .dish.dish2{ right: -12%; } @media screen and (max-width: 1570px) { .main .specialtyStoreArti{ padding: 13vw 0; } .main .specialtyStoreArti .textBox .t1{ font-size: 3.2vw; } .main .specialtyStoreArti .textBox .t1.big{ font-size: 4.2vw; } .main .specialtyStoreArti .textBox .t1 .stroke{ -webkit-text-stroke: .15vw white; } } @media screen and (max-width: 900px) { .main .specialtyStoreArti{ padding: 13vw 0 75vw 0; } .main .specialtyStoreArti .textBox{ gap: 2vw; } .main .specialtyStoreArti .textBox .t1{ font-size: 6.5vw; } .main .specialtyStoreArti .textBox .t1.big{ font-size: 9vw; } .main .specialtyStoreArti .textBox .bar{ width: .3vw; height: 7vw; } .main .specialtyStoreArti .dish{ width: 72vw; } .main .specialtyStoreArti .dish.dish1{ left: -24vw; bottom: 0; } .main .specialtyStoreArti .dish.dish2{ right: -24vw; bottom: 0; } } /* .main .successOfficialArti */ .main .successOfficialArti{ padding: 140px 0; background-image: url('../img/main/successOfficialArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .main .successOfficialArti .moBr{ display: none; } .main .successOfficialArti .titleBox{ font-weight: 100; text-align: center; color: #fff; font-family: 'Ttangsbudaejjigae'; } .main .successOfficialArti .titleBox .t1{ font-size: 64px; line-height: 1.3em; } .main .successOfficialArti .titleBox .yello{ color: #F6DDAB; } .main .successOfficialArti .titleBox .t2{ font-size: 36px; line-height: 1.3em; } .main .successOfficialArti .itemList{ margin-top: 29px; display: flex; width: calc(100% + 18px); margin-left: -9px; } .main .successOfficialArti .itemList > li{ padding: 9px; width: calc(100% / 5); } .main .successOfficialArti .itemList .item{ font-family: 'Ttangsbudaejjigae'; display: flex; align-items: flex-end; justify-content: center; background-color: #000; color: #fff; text-align: center; height: 473px; padding: 50px 0; background-size: cover; background-repeat: no-repeat; background-position: center; } .main .successOfficialArti .itemList .item.img1{ background-image: url('../img/main/successOfficialArti/img1.png'); } .main .successOfficialArti .itemList .item.img2{ background-image: url('../img/main/successOfficialArti/img2.png'); } .main .successOfficialArti .itemList .item.img3{ background-image: url('../img/main/successOfficialArti/img3.png'); } .main .successOfficialArti .itemList .item.img4{ background-image: url('../img/main/successOfficialArti/img4.png'); } .main .successOfficialArti .itemList .item.img5{ background-image: url('../img/main/successOfficialArti/img5.png'); } .main .successOfficialArti .itemList .item .textBox .numberBox{ color: #F6DDAB; font-size: 40px; } .main .successOfficialArti .itemList .item .textBox .numberBox span{ border-bottom: 2px solid #F6DDAB; } .main .successOfficialArti .itemList .item .textBox .txt{ font-weight: 100; margin-top: 13px; font-size: 24px; height: 100px; display: flex; align-items: center; } @media screen and (max-width: 1250px) { .main .successOfficialArti .titleBox .t1{ font-size: 50px; } .main .successOfficialArti .titleBox .t2{ font-size: 28px; } .main .successOfficialArti .itemList{ width: calc(100% + 1vw); margin-left: -.5vw; } .main .successOfficialArti .itemList > li{ padding: .5vw; } .main .successOfficialArti .itemList .item{ height: 38vw; padding: 3vw 0; } .main .successOfficialArti .itemList .item .textBox .numberBox{ font-size: 3.5vw; } .main .successOfficialArti .itemList .item .textBox .txt{ font-size: 2vw; height: 9vw; margin-top: 1vw; } } @media screen and (max-width: 900px) { .main .successOfficialArti .moBr{ display: inline-block; } .main .successOfficialArti .titleBox .t1{ font-size: 7.5vw; } .main .successOfficialArti .titleBox .t2{ font-size: 5vw; } .main .successOfficialArti .itemList{ flex-wrap: wrap; justify-content: center; } .main .successOfficialArti .itemList > li{ width: calc(100% / 3); } .main .successOfficialArti .itemList .item{ height: 50vw; } .main .successOfficialArti .itemList .item .textBox .numberBox{ font-size: 5.5vw; } .main .successOfficialArti .itemList .item .textBox .numberBox span{ border-bottom: .3vw solid #F6DDAB; } .main .successOfficialArti .itemList .item .textBox .txt { font-size: 3vw; height: 15vw; margin-top: 1vw; } } @media screen and (max-width: 500px) { .main .successOfficialArti{ padding: 17vw 0; } .main .successOfficialArti .itemList .item .textBox .txt{ font-size: 3.4vw; } } /* .main .systemArti */ .main .systemArti{ position: relative; background-color: #9C1B19; padding: 60px 0; display: flex; align-items: center; overflow: hidden; } .main .systemArti .dish{ display: block; width: 20%; position: absolute; } .main .systemArti .dish.dish1{ left: 0%; top: -1%; } .main .systemArti .dish.dish2{ right: -15%; width: 40%; bottom: -4%; } .main .systemArti .moBr{ display: none; } .main .systemArti .titleBox{ display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; text-align: center; } .main .systemArti .titleBox .logo{ max-width: 100%; width: 225px; } .main .systemArti .titleBox .t1{ font-weight: 100; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); font-family: 'Ttangsbudaejjigae'; font-size: 24px; margin-top: 30px; line-height: 1.5em; } .main .systemArti .titleBox .t2{ text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); font-family: 'Ttangsbudaejjigae'; font-size: 48px; line-height: 1.5em; } .main .systemArti .itemList{ display: flex; flex-wrap: wrap; justify-content: center; width: calc(100% + 60px); margin-left: -30px; margin-top: 15px; } .main .systemArti .itemList > li{ padding: 15px 30px; width: calc(100% / 3); text-align: center; } .main .systemArti .itemList > li .item{ background-color: #9C1B19; box-shadow: 12px 16px 16px 0px rgba(0, 0, 0, 0.10); border: 4px solid #fff; padding: 30px 10px; height: 100%; font-family: 'Ttangsbudaejjigae'; color: #fff; } .main .systemArti .itemList > li .item .icon{ margin: 0 auto; width: 90px; height: 90px; background-size: contain; background-repeat: no-repeat; background-position: center; } .main .systemArti .itemList > li .item .icon.icon1{ background-image: url('../img/main/systemArti/icon1.png'); } .main .systemArti .itemList > li .item .icon.icon2{ background-image: url('../img/main/systemArti/icon2.png'); } .main .systemArti .itemList > li .item .icon.icon3{ background-image: url('../img/main/systemArti/icon3.png'); } .main .systemArti .itemList > li .item .icon.icon4{ background-image: url('../img/main/systemArti/icon4.png'); } .main .systemArti .itemList > li .item .icon.icon5{ background-image: url('../img/main/systemArti/icon5.png'); } .main .systemArti .itemList > li .item .txt{ font-weight: 100; margin-top: 23px; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); font-size: 24px; line-height: 1.5em; } @media screen and (max-width: 1780px) { .main .systemArti .dish{ width: 19vw; } .main .systemArti .dish.dish1 { left: 0; bottom: 2vw; top: -10vw; } .main .systemArti .dish.dish2 { width: 26vw; max-width: 400px; top: 0; right: -8vw; bottom: 2vw; } } @media screen and (max-width: 1250px) { .main .systemArti .titleBox .t1{ font-size: 20px; } .main .systemArti .titleBox .t2{ font-size: 40px; } .main .systemArti .itemList{ width: calc(100% + 20px); margin-left: -10px; } .main .systemArti .itemList > li{ padding: 10px; } .main .systemArti .itemList > li .item .icon{ width: 70px; height: 70px; } .main .systemArti .itemList > li .item .txt{ font-size: 20px; } } @media screen and (max-width: 1000px) { .main .systemArti .moBr{ display: inline-block; } } @media screen and (max-width: 900px) { .main .systemArti{ padding: 14vw 0; padding-bottom: 60vw; } .main .systemArti .dish{ width: 70vw; } .main .systemArti .dish.dish1 { top: -10vw; width: 28vw; left: 0; } .main .systemArti .dish.dish2 { width: 97vw; max-width: unset; top: unset; bottom: -5vw; right: -10vw; } .main .systemArti .titleBox .logo{ width: 30vw; max-width: 150px; } .main .systemArti .titleBox .t1{ font-size: 4vw; } .main .systemArti .titleBox .t2{ font-size: 6vw; margin-top: 2vw; } .main .systemArti .itemList{ width: calc(100% + 2vw); margin-left: -1vw; margin-top: 3vw; } .main .systemArti .itemList > li{ padding: 1vw 1vw; } .main .systemArti .itemList > li .item{ border-width: .5vw; padding: 5vw 0; } .main .systemArti .itemList > li .item .icon{ width: 10vw; height: 10vw; } .main .systemArti .itemList > li .item .txt{ font-size: 3vw; } } /* .main .freeArti */ .main .freeArti{ background-color: #19577E; overflow: hidden; background-image: url('../img/main/freeArti/background.png'); padding: 66px 0; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; } .main .freeArti .scrollBar{ display: flex; flex-direction: column; position: absolute; width: 157px; } .main .freeArti .scrollBar .bar{ width: 100%; } .main .freeArti .leftScrollEffect{ left: 0; top: 0; } .main .freeArti .rightScrollEffect{ right: 0; top: 0; } .main .freeArti .titleBox{ color: #fff; font-size: 64px; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); font-family: 'Ttangsbudaejjigae'; display: flex; align-items: center; gap: 18px; justify-content: center; } .main .freeArti .titleBox .redBg{ margin-top: -1%; display: flex; align-items: center; justify-content: center; background-color: #9C1B19; border-radius: 20px; padding: 16px 33px 5px 33px; } .main .freeArti .itemList{ margin-top: 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; } .main .freeArti .itemList > li{ padding: 20px 0; position: relative; } .main .freeArti .itemList > li .itemImg.free{ position: absolute; left: -27px; top: -60px; } .main .freeArti .itemList > li .itemImg{ width: 335px; max-width: 100%; } .main .freeArti .itemList > li .label{ width: 335px; max-width: 100%; position: absolute; left: 0; top: 0; } @media screen and (max-width: 1500px) { .main .freeArti .scrollBar{ width: 100px; } } @media screen and (max-width: 1250px) { .main .freeArti .scrollBar{ width: 8vw; } .main .freeArti .titleBox{ font-size: 50px; } .main .freeArti .titleBox .redBg{ padding: 10px 20px 5px 20px; } .main .freeArti .itemList{ margin-top: 2vw; } .main .freeArti .itemList > li { padding: 2vw 0; } .main .freeArti .itemList > li .itemImg{ width: 24vw; } .main .freeArti .itemList > li .label{ width: 24vw; } .main .freeArti .itemList > li .itemImg.free { left: -2vw; top: -4vw; } } @media screen and (max-width: 900px) { .main .freeArti .titleBox{ font-size: 7vw; } .main .freeArti .titleBox .redBg{ padding: 2vw 4vw .8vw 4vw; border-radius: 3vw; } .main .freeArti .itemList{ gap: 1vw; } .main .freeArti .itemList > li .itemImg{ width: 30vw; } .main .freeArti .itemList > li .label{ width: 30vw; } .main .freeArti .itemList > li .itemImg.free { left: -3vw; top: -5vw; } } @media screen and (max-width: 500px) { .main .noodleArti{ padding: 14vw 0; } } /* .main .supportArti */ .main .supportArti{ overflow: hidden; padding: 150px 0; background-color: #9A1C19; background-image: url('../img/main/supportArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .main .supportArti .moBr{ display: none; } .main .supportArti .titleBox{ text-align: center; font-family: 'Ttangsbudaejjigae'; color: #fff; } .main .supportArti .titleBox .t1{ font-size: 36px; font-weight: 100; } .main .supportArti .titleBox .t2{ margin-top: 17px; color: #fff; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); font-size: 42px; /*-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #FFF;*/ } .main .supportArti .titleBox .t2 .red{ color: #9A1C19; font-size: 1.5em; } .main .supportArti .titleBox .t2 .blue{ color: #19577E; font-size: 1.5em; } .main .supportArti .snsList{ display: flex; flex-wrap: wrap; margin-top: 20px; width: calc(100% + 14px); margin-left: -7px; } .main .supportArti .snsList > li{ padding: 10px 7px; width: calc(100% / 5); } .main .supportArti .snsList > li .itemImg{ width: 100%; filter: drop-shadow(8px 12px 14px rgba(0, 0, 0, 0.15));} @media screen and (max-width: 1250px) { .main .supportArti .titleBox .t2{ font-size: 50px; } .main .supportArti .moBr{ display:inline-block; } .main .supportArti .snsList{ justify-content: center; max-width: 700px; margin: 20px auto 0 auto; } .main .supportArti .snsList > li{ width: calc(100% / 3); } } @media screen and (max-width: 900px) { .main .supportArti .titleBox .t1{ font-size: 4vw; } .main .supportArti .titleBox .t2{ font-size: 7.5vw; margin-top: 2vw; } .main .supportArti .snsList{ margin-top: 5vw; } } @media screen and (max-width: 500px) { .main .supportArti{ padding: 14vw 0; } .main .supportArti .titleBox .t2{ font-weight: 700; font-size: 6.5vw; } .main .supportArti .titleBox .t1{ font-size: 5vw; } .main .supportArti .snsList{ width: calc(100% + 1vw); margin-left: -.5vw; } .main .supportArti .snsList > li{ padding: .5vw; } } /* .main .blackBackgroundArti */ .main .blackBackgroundArti{ background-image: url('../img/main/blackBackgroundArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } /* .main .agreeArti */ .main .agreeArti{ padding: 80px 0; } .main .agreeArti .moBr{ display: none; } .main .agreeArti .titleBox{ text-align: center; font-family: 'Ttangsbudaejjigae'; color: #fff; } .main .agreeArti .titleBox .t1{ font-weight: 100; font-size: 32px; line-height: 1.5em; } .main .agreeArti .titleBox .t2{ font-size: 56px; line-height: 1.5em; } .main .agreeArti .titleBox .red{ color: #9C1B19; } .main .agreeArti .titleBox .blue{ color: #19577E; } .main .agreeArti .imgBox{ margin-top: 28px; display: flex; gap: 30px; position:relative; } .main .agreeArti .imgBox img{ width: 100%; display: block; } .main .agreeArti .imgBox .rightBox{ position: relative; display: flex; justify-content: center; align-items: flex-end; } .main .agreeArti .imgBox .rightBox .phoneShowBox{ position: absolute; z-index: 2; overflow: hidden; width: 500px; height: 420px; } @media screen and (max-width: 1250px) { .main .agreeArti .titleBox .t1{ font-size: 24px; } .main .agreeArti .titleBox .t2{ font-size: 50px; } .main .agreeArti .imgBox .rightBox .phoneShowBox{ width: 35vw; height: 34vw; } } @media screen and (max-width: 900px) { .main .agreeArti .moBr{ display: inline-block; } .main .agreeArti .titleBox .t1{ font-size: 4vw; } .main .agreeArti .titleBox .t2{ font-size: 8vw; } .main .agreeArti .imgBox{ margin: 20px auto 0 auto; flex-direction: column; max-width: 600px; } .main .agreeArti .imgBox .leftBox img{ width: 90%; margin: 0 auto; } .main .agreeArti .imgBox .rightBox .phoneShowBox { max-width: 460px; max-height: 430px; width: 74vw; height: 69vw; } } @media screen and (max-width: 500px) { .main .agreeArti { padding: 14vw 0; } .main .agreeArti + .agreeArti{ padding-top: 0; } .main .agreeArti .imgBox{ margin-top: 4vw; overflow: hidden; } } .main .agreeArti .slideBox{ margin-top: 40px; position: relative; display: flex; align-items: center; justify-content: center; } .main .agreeArti .slideBox .btnList{ position: absolute; display: flex; width: calc(100% + 100px); justify-content: space-between; } .main .agreeArti .slideBox .btnList .slideBtn{ border: none; background-color: transparent; } .main .agreeArti .slideBox .btnList .slideBtn.nextBtn{ transform: rotate(180deg); } .main .agreeArti .instagramSlide{ overflow: hidden; width: 100%; } .main .agreeArti .instagramSlide .imgBoxWrap { display: flex; flex-direction: column; gap: 10px; } .main .agreeArti .instagramSlide .imgBoxWrap .item{ width: 100%; background-color: #000; height: 287px; background-size: cover; background-repeat: no-repeat; background-position: center; } .main .agreeArti .instagramSlide .imgBoxWrap .item.img1{ background-image: url('../img/main/instagramArti/img1.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img2{ background-image: url('../img/main/instagramArti/img2.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img3{ background-image: url('../img/main/instagramArti/img3.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img4{ background-image: url('../img/main/instagramArti/img4.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img5{ background-image: url('../img/main/instagramArti/img5.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img6{ background-image: url('../img/main/instagramArti/img6.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img7{ background-image: url('../img/main/instagramArti/img7.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img8{ background-image: url('../img/main/instagramArti/img8.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img9{ background-image: url('../img/main/instagramArti/img9.png'); } .main .agreeArti .instagramSlide .imgBoxWrap .item.img10{ background-image: url('../img/main/instagramArti/img10.png'); } @media screen and (max-width: 1326px) { .main .agreeArti .slideBox{ flex-direction: column; position: relative; } .main .agreeArti .slideBox .btnList{ width: 100%; max-width: 1200px; position: static; justify-content: flex-end; gap: 10px; padding: 10px 0; } } @media screen and (max-width: 1250px) { .main .agreeArti .instagramSlide .imgBoxWrap .item{ height: 24vw; } } @media screen and (max-width: 900px) { .main .agreeArti .instagramSlide .imgBoxWrap .item{ height: 30vw; } .main .agreeArti .slideBox .btnList{ gap: 5px; } .main .agreeArti .slideBox .btnList .slideBtn img{ width: 35px; } } @media screen and (max-width: 500px) { .main .agreeArti .instagramSlide .imgBoxWrap .item{ height: 50vw; } .main .agreeArti .slideBox{ margin-top: 5vw; } .main .agreeArti .slideBox .btnList{ gap: .5vw; padding: 1vw 0; } .main .agreeArti .slideBox .btnList .slideBtn img{ width: 7vw; } } /* .main .grandOpenFlow */ .main .grandOpenFlow{ overflow: hidden; padding: 130px 0; background-image: url('../img/main/grandOpenFlow/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; } .main .grandOpenFlow .moBr{ display: none; } .main .grandOpenFlow .titleBox{ text-align: center; text-shadow: 6px 5px 8px rgba(0, 0, 0, 0.15); font-family: 'Ttangsbudaejjigae'; color: #fff; } .main .grandOpenFlow .titleBox .t1{ font-weight: 100; line-height: 1.5em; font-size: 26px; } .main .grandOpenFlow .titleBox .t2{ line-height: 1.5em; color: #19577E; font-size: 64px; text-shadow: rgb(255, 255, 255) -3px -3px 0px, rgb(255, 255, 255) 0px -3px 0px, rgb(255, 255, 255) 3px -3px 0px, rgb(255, 255, 255) -3px 0px 0px, rgb(255, 255, 255) 3px 0px 0px, rgb(255, 255, 255) -3px 3px 0px, rgb(255, 255, 255) 0px 3px 0px, rgb(255, 255, 255) 3px 3px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px 1px 0px; } .main .grandOpenFlow .itemList{ margin-top: 40px; width: calc(100% + 20px); margin-left: -10px; display: flex; flex-wrap: wrap; } .main .grandOpenFlow .itemList > li{ padding: 10px; width: calc(100% / 4); } .main .grandOpenFlow .itemList > li .item{ width: 100%; display: block; } .main .grandOpenFlow .itemList > li .item.change{ display: none; } @media screen and (max-width: 1250px) { .main .grandOpenFlow .titleBox .t1{ font-size: 20px; } .main .grandOpenFlow .titleBox .t2{ font-size: 54px; } .main .grandOpenFlow .itemList{ width: calc(100% + 1vw); margin-left: -.5vw; justify-content: center; } .main .grandOpenFlow .itemList > li{ width: calc(100% / 3); padding: .5vw; } .main .grandOpenFlow .itemList > li .item.default{ display: none; } .main .grandOpenFlow .itemList > li .item.change{ display: block; } } @media screen and (max-width: 900px) { .main .grandOpenFlow .moBr{ display: inline-block; } .main .grandOpenFlow .titleBox .t1{ font-size: 6vw; } .main .grandOpenFlow .titleBox .t2{ font-size: 8vw; } .main .grandOpenFlow .itemList{ width: calc(100% + 10px); margin: 40px auto 0 auto; margin-left: -5px; max-width: 800px; } .main .grandOpenFlow .itemList > li{ width: calc(100% / 3); padding: 5px; } } @media screen and (max-width: 500px) { .main .grandOpenFlow{ padding: 14vw 0; } .main .grandOpenFlow .itemList{ margin-top: 4vw; width: calc(100% + 2vw); margin-left: -1vw; } .main .grandOpenFlow .itemList > li{ width: calc(100% / 2); padding: 1vw; } } /* .main .storePriceArti */ .main .storePriceArti { overflow: hidden; background-color: #F0F0F0; overflow: hidden; padding: 116px 0; } .main .storePriceArti .titleBox{ text-align: center; font-family: 'Ttangsbudaejjigae'; color: #222; } .main .storePriceArti .titleBox .t1{ font-size: 64px; line-height: 1.5em; } .main .storePriceArti .titleBox .t2{ font-size: 26px; } .main .storePriceArti .titleBox .red{ color: #9C1B19; } .main .storePriceArti .titleBox .blue{ color: #19577E; } .main .storePriceArti .tableWrap{ position: relative; margin-top: 20px; } .main .storePriceArti .tableWrap .smallText{ text-align: right; color: #7F7F7F; } .main .storePriceArti .tableWrap .tableBox{ position: relative; } .main .storePriceArti .tableWrap .tableBox .icon{ position: absolute; left: 0; bottom: calc(100% - 5px); width: 288px; } .main .storePriceArti .tableWrap .tableBox .tableList{ margin-top: 10px; position: relative; z-index: 1; border-radius: 20px; text-align: center; } .main .storePriceArti .tableWrap .tableBox .tableList > li{ display: flex; align-items: center; } .main .storePriceArti .tableWrap .tableBox .tableList > li > div{ display: flex; align-items: center; justify-content: center; position: relative; padding: 18px 20px; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box1{ width: 260px; flex-shrink: 0; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box2{ flex-grow: 1; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box3{ width: 260px; flex-shrink: 0; } .main .storePriceArti .tableWrap .tableBox .tableList > li span.del{ position: relative; display: inline-block; margin-right: 10px; text-decoration: line-through; } .main .storePriceArti .tableWrap .tableBox .tableList > li span.del::after{ content: '▸'; position: absolute; right: -4px; top: -2px; } .main .storePriceArti .tableWrap .tableBox .tableList > li span.red{ color: #9C1B19; } .main .storePriceArti .tableWrap .tableBox .tableList .blackBox{ border-radius: 20px 20px 0 0; background-color: #222222; color: #fff; font-size: 20px; } .main .storePriceArti .tableWrap .tableBox .tableList .whiteBox{ background-color: #fff; text-align: center; font-size: 22px; border-top: 1px solid #E4E4E4; } .main .storePriceArti .tableWrap .tableBox .tableList .blueBox{ border-radius: 0 0 20px 20px; background-color: #19577E; font-size: 28px; font-weight: 700; color: #fff; } .main .storePriceArti .tableWrap .notice{ color: #7F7F7F; line-height: 1.5em; margin-top: 20px; word-break: keep-all; } .main .storePriceArti .tableWrap .icon2{ width: 105px; position: absolute; } .main .storePriceArti .tableWrap .people{ width: 288px; bottom: calc(100% - 10px); left: 0; position: absolute; } @media screen and (max-width: 1250px) { .main .storePriceArti .tableWrap .tableBox .icon{ width: 25vw; } .main .storePriceArti .tableWrap .people{ width: 25vw; } .main .storePriceArti .titleBox .t1{ font-size: 50px; } .main .storePriceArti .titleBox .t2{ font-size: 25px; } .main .storePriceArti .tableWrap .tableBox .tableList .blackBox{ font-size: 20px; } .main .storePriceArti .tableWrap .tableBox .tableList .whiteBox{ font-size: 18px; } .main .storePriceArti .tableWrap .tableBox .tableList .blueBox{ font-size: 22px; } .main .storePriceArti .tableWrap .smallText{ font-size: 14px; } .main .storePriceArti .tableWrap .notice{ font-size: 14px; } } @media screen and (max-width: 1040px) { .main .storePriceArti .tableWrap .people{ width: 23vw; } .main .storePriceArti .tableWrap .tableBox .tableList > li > div{ padding: 10px; } .main .storePriceArti .tableWrap .tableBox .icon{ display: none; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box1{ width: 200px; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box2{ word-break: keep-all; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box3{ width: 200px; } } @media screen and (max-width: 900px) { .main .storePriceArti{ padding: 14vw 0; } .main .storePriceArti .tableWrap .people{ display: none; } .main .storePriceArti .titleBox .t1{ font-size: 8vw; } .main .storePriceArti .titleBox .t2{ font-size: 5vw; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box1{ width: 25vw; } .main .storePriceArti .tableWrap .tableBox .tableList > li .box3{ width: 25vw; } .main .storePriceArti .tableWrap .tableBox .tableList > li span.del::after{ top: -1px; } .main .storePriceArti .tableWrap .tableBox .tableList > li > div{ padding: 2vw; } .main .storePriceArti .tableWrap .tableBox .tableList .blackBox{ font-size: 18px; } .main .storePriceArti .tableWrap .tableBox .tableList .whiteBox{ font-size: 16px; } .main .storePriceArti .tableWrap .tableBox .tableList .blueBox{ font-size: 20px; } .main .storePriceArti .tableWrap .icon2{ width: 15vw; } } @media screen and (max-width: 500px) { .main .storePriceArti .tableWrap{ margin-top: 5vw; } .main .storePriceArti .tableWrap .tableBox .tableList .blackBox{ font-size: 3vw; border-radius: 3vw 3vw 0 0; } .main .storePriceArti .tableWrap .tableBox .tableList .whiteBox{ font-size: 2.8vw; } .main .storePriceArti .tableWrap .tableBox .tableList .blueBox{ font-size: 3.2vw; border-radius: 0 0 3vw 3vw; } .main .storePriceArti .tableWrap .tableBox .tableList > li span.del::after{ top: 0; } .main .storePriceArti .tableWrap .smallText{ font-size: 3vw; } .main .storePriceArti .tableWrap .notice{ font-size: 3vw; margin-top: 4vw; } } /* .main .kindArti */ .main .kindArti{ position: relative; background-color: #000; padding: 75px 0; color: #fff; overflow: hidden; } .main .kindArti .inner{ position: relative; z-index: 2; } .main .kindArti .bgBox{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .main .kindArti .bgBlack{ display: none; background-color: rgba(0,0,0,0.8); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; } .main .kindArti .BgLeftBox{ overflow: hidden; position: absolute; left: 0; top: 0; width: 50% !important; height: 100%; z-index: 1; background-color: #9A1C19; } .main .kindArti .titleBox{ display: flex; align-items: center; justify-content: center; } .main .kindArti .titleBox .logo{ width: 100%; max-width: 225px; } .main .kindArti .threeBox{ text-align: center; margin: 103px 0; display: flex; align-items: center; justify-content: center; } .main .kindArti .threeBox .lineBox{ position: relative; width: 50%; flex-grow: 1; display: flex; flex-direction: column; gap: 18px; justify-content: center; align-items: center; } .main .kindArti .threeBox .lineBox.leftBox{ align-items: flex-end; } .main .kindArti .threeBox .lineBox.rightBox{ align-items: flex-start; } .main .kindArti .threeBox .lineBox .t1{ width: 100%; font-size: 22px; } .main .kindArti .threeBox .lineBox .bar{ width: 100%; height: 2px; background-color: #fff; position: relative; display: flex; align-items: center; } .main .kindArti .threeBox .lineBox .t2{ width: 100%; font-family: 'Ttangsbudaejjigae'; font-size: 46px; } .main .kindArti .threeBox .lineBox.leftBox .bar::before{ content:''; position: absolute; display: block; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; left: -1px; } .main .kindArti .threeBox .lineBox.rightBox .bar::before{ content:''; position: absolute; display: block; width: 6px; height: 6px; background-color: #fff; border-radius: 50%; right: -1px; } .main .kindArti .threeBox .centerBox{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } .main .kindArti .threeBox .centerBox .circle{ width: 296px; height: 296px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .main .kindArti .threeBox .centerBox .circle1{ background-color: rgba(0,0,0,0.2); } .main .kindArti .threeBox .centerBox .circle2{ background-color: rgba(0,0,0,0.4); position: absolute; } .main .kindArti .threeBox .centerBox .circle3{ background-color: #9C1B19; border: 2px solid #fff; position: absolute; } .main .kindArti .threeBox .centerBox .circle3 .text1{ font-size: 28px; } .main .kindArti .threeBox .centerBox .circle3 .text2{ font-size: 140px; font-family: "JS Arirang"; line-height: 0.9em; } .main .kindArti .threeBox .centerBox .circle3 .text3{ font-size: 18px; } .main .kindArti .bottomBox{ text-align: center; } .main .kindArti .bottomBox .t1{ font-family: "JS Arirang"; font-size: 60px; } .main .kindArti .bottomBox .txt{ margin-top: 10px; font-size: 24px; color: #FFD600; } @media screen and (max-width: 1250px) { .main .kindArti .titleBox .logo{ max-width: 170px; } .main .kindArti .threeBox{ padding: 80px 0; } .main .kindArti .threeBox .centerBox .circle{ width: 26vw; height: 26vw; } .main .kindArti .threeBox .centerBox .circle3 .text1{ font-size: 2.5vw; } .main .kindArti .threeBox .centerBox .circle3 .text2{ font-size: 12vw; } .main .kindArti .threeBox .centerBox .circle3 .text3{ font-size: 2vw; } .main .kindArti .threeBox .lineBox .t1{ font-size: 2.5vw; } .main .kindArti .threeBox .lineBox .t2{ font-size: 5vw; } } @media screen and (max-width: 900px) { .main .kindArti{ padding: 14vw 0; } .main .kindArti .bgBlack{ display: block; } .main .kindArti .threeBox{ flex-direction: column; padding: 0; gap: 20vw; margin: 12vw 0; } .main .kindArti .threeBox .lineBox{ width: 100%; } .main .kindArti .threeBox .lineBox .bar{ display: none; } .main .kindArti .threeBox .lineBox .t1{ font-size: 4.5vw; } .main .kindArti .threeBox .lineBox .t2{ font-size: 8vw; } .main .kindArti .threeBox{ gap: 7vw; } .main .kindArti .threeBox .centerBox .circle{ width: 40vw; height: 40vw; } .main .kindArti .threeBox .centerBox .circle3 .text1{ font-size: 4vw; } .main .kindArti .threeBox .centerBox .circle3 .text2{ font-size: 19vw; } .main .kindArti .threeBox .centerBox .circle3 .text3{ font-size: 3vw; } .main .kindArti .threeBox .centerBox .circle3{ border-width: .5vw; } .main .kindArti .bottomBox .t1{ font-size: 8vw; } .main .kindArti .bottomBox .txt{ margin-top: 1vw; font-size: 3.5vw; } } /* .main .interiorArti */ .main .interiorArti{ background-color: #9C1B19; } .main .interiorArti img{ width: 100%; display: block; } .main .interiorArti .halfBox{ display: flex; width: 100%; flex-wrap: wrap; } .main .interiorArti .halfBox > div{ width: 50%; padding: 60px 0; flex-shrink: 0; } .main .interiorArti .halfBox > div .inner{ width: 100%; } .main .interiorArti .halfBox .leftBox{ padding-left: calc((100% - 1200px) / 2); } .main .interiorArti .halfBox .leftBox .inner{ display: flex; align-items: center; justify-content: center; flex-direction: column; } .main .interiorArti .halfBox .leftBox .imgWrap{ width: 100%; max-width: 486px; position: relative; } .main .interiorArti .halfBox .leftBox .imgWrap img{ display: flex; align-items: center; justify-content: center; } .main .interiorArti .halfBox .leftBox .imgWrap .bubble{ position: absolute; left: 0; top: 0; } .main .interiorArti .halfBox .leftBox .imgWrap .icon1{ position: absolute; left: 0; top: 0; } .main .interiorArti .halfBox .leftBox .imgWrap .icon2{ position: absolute; left: 0; top: 0; } .main .interiorArti .halfBox .leftBox .txt{ font-weight: 100; margin-top: 15px; margin-right:25px; font-size: 22px; line-height: 1.5em; text-align: center; margin-top: 15px; text-align: center; font-family: 'Ttangsbudaejjigae'; color: #fff; } .main .interiorArti .halfBox .rightBox{ background-color: #8E1917; padding-right: calc((100% - 1200px) / 2); background-image: url('../img/main/interiorArti/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; padding-left: 46px; } .main .interiorArti .halfBox .rightBox .inner{ height: 100%; } .main .interiorArti .halfBox .rightBox .snsSlideWrap{ position: relative; padding: 0 40px; } .main .interiorArti .halfBox .rightBox .snsSlideWrap .slideBtnWrap{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; } .main .interiorArti .halfBox .rightBox .snsSlideWrap .slideBtnWrap .slideBtn{ border: none; background-color: transparent; } .main .interiorArti .halfBox .rightBox .snsSlideWrap .slideBtnWrap .slideBtn img{ position: relative; z-index: 2; } .main .interiorArti .halfBox .rightBox .snsSlideWrap .slideBtnWrap .slideBtn.nextBtn img{ display: block; transform: rotate(180deg); } .main .interiorArti .halfBox .rightBox .snsSlide{ position: relative; height: 100%; overflow: hidden; } .main .interiorArti .halfBox .rightBox .snsSlide .imgBox{ height: 707px; background-size: cover; background-repeat: no-repeat; background-position: center; } .main .interiorArti .halfBox .rightBox .swiper-pagination{ display: flex; align-items: center; justify-content: center; width: 100%; gap: 5px; left: 0; bottom: -30px; } .main .interiorArti .halfBox .rightBox .swiper-pagination-bullet{ opacity: 1; border-radius: 50%; background-color: #D9D9D9; width: 12px; height: 12px; } .main .interiorArti .halfBox .rightBox .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: #fff; } .main .interiorArti .halfBox .rightBox .snsSlide .img1{ background-image: url('../img/main/interiorArti/img1.png'); } .main .interiorArti .halfBox .rightBox .snsSlide .img2{ background-image: url('../img/main/interiorArti/img2.png'); } .main .interiorArti .halfBox .rightBox .snsSlide .img3{ background-image: url('../img/main/interiorArti/img3.png'); } .main .interiorArti .halfBox .rightBox .snsSlide .img4{ background-image: url('../img/main/interiorArti/img4.png'); } .main .interiorArti .halfBox .rightBox .snsSlide .img5{ background-image: url('../img/main/interiorArti/img5.png'); } .main .interiorArti .halfBox .rightBox .snsSlide .img6{ background-image: url('../img/main/interiorArti/img6.png'); } .main .interiorArti .halfBox .rightBox .snsSlide .img7{ background-image: url('../img/main/interiorArti/img7.png'); } @media screen and (max-width: 1250px) { .main .interiorArti .halfBox .leftBox .imgWrap{ max-width: 40vw; } .main .interiorArti .halfBox .rightBox .snsSlide .imgBox{ height: 60vw; } .main .interiorArti .halfBox .leftBox .txt { margin-right: 4vw; font-size: 2vw; } } @media screen and (max-width: 900px) { .main .interiorArti .halfBox{ flex-direction: column; } .main .interiorArti .halfBox .leftBox{ width: 100%; padding: 5vw 0; } .main .interiorArti .halfBox .rightBox{ width: 100%; padding: 8vw 0; } .main .interiorArti .halfBox .leftBox .imgWrap{ max-width: 70vw; margin-right: -7vw; } .main .interiorArti .halfBox .leftBox .txt { margin-top: 2vw; font-size: 4.4vw; margin-right: 0; } .main .interiorArti .halfBox .rightBox{ padding: 8vw 0; } .main .interiorArti .halfBox .rightBox .snsSlideWrap{ padding: 0 5vw; } .main .interiorArti .halfBox .rightBox .snsSlideWrap .slideBtnWrap .slideBtn img{ width: 3vw; } .main .interiorArti .halfBox .rightBox .swiper-pagination{ bottom: -3vw; } .main .interiorArti .halfBox .rightBox .swiper-pagination-bullet{ width: 1.5vw; height: 1.5vw; } } @media screen and (max-width: 500px) { .main .interiorArti .halfBox .rightBox .snsSlide .imgBox{ height: 123vw; } } #hd_pop{ width: 100%; max-width: 1200px; } .hd_pops_con{ height: auto !important; } @media screen and (max-width: 1250px) { .hd_pops_con{ max-width: 100%; height:auto !important; min-height: unset !important; } .hd_pops{ max-width: 95%; left: 2.5% !important; height: auto !important; min-height: unset !important; } } /* .main .professorArti */ .main .professorArti{ overflow: hidden; background-image: url('../img/main/professorArti/background.png'); background-color: #9C1B19; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 50px 0; } .main .professorArti .title{ display: block; margin: 0 auto; width: 722px; max-width: 100%; } .main .professorArti .memberList{ display: flex; margin-top: 30px; flex-wrap: wrap; justify-content: center; } .main .professorArti .memberList > li{ padding: 5px; width: calc(100% / 5); } .main .professorArti .memberList > li .item{ width: 100%; } @media screen and (max-width: 1250px) { .main .professorArti .title{ width: 600px; } } @media screen and (max-width: 900px) { .main .professorArti .memberList > li{ width: calc(100% / 3); } } @media screen and (max-width: 650px) { .main .professorArti .memberList{ margin-top: 6vw; } .main .professorArti .memberList > li{ padding: 1vw; } } @media screen and (max-width: 500px) { .main .professorArti{ padding: 14vw 0; } }