@charset "utf-8"; /*메인 신규작업*/ #main_visual {position:relative; overflow:hidden; text-align:center; color:#333; margin-top: 100px;} #main_visual .swiper-slide { background:no-repeat center top; background-size:cover;} #main_visual .swiper-slide.slide01 {background-image:url('../images/main/main_visual01.png');} #main_visual .swiper-slide.slide02 {background-image:url('../images/main/main_visual02.jpg');} #main_visual .tbox {padding: 15% 0; color: #fff; font-family: 'Noto Sans KR', serif; line-height: normal;} #main_visual .t01 {font-size: 26px; font-weight: 300;} #main_visual .t02 {margin-top: .7%; font-size: 48px; font-weight:700;} #main_visual .t03 {margin-top: 2%; font-size: 20px; text-transform: uppercase;} #main_visual .t01, #main_visual .t02, #main_visual .t03, #main_visual .brand {transform: translateY(40px); opacity:0;} #main_visual .swiper-slide-active .t01 {transform: translateY(0px); opacity:.8;} #main_visual .swiper-slide-active .t02, #main_visual .swiper-slide-active .t03, #main_visual .swiper-slide-active .brand {transform: translateY(0px); opacity:1;} #main_visual .swiper-slide-active .t01 {transition:transform 1s 0.4s, opacity 1s 0.4s;} #main_visual .swiper-slide-active .t02 {transition:transform 1s 0.8s, opacity 1s 0.8s;} #main_visual .swiper-slide-active .t03 {transition:transform 1s 1.2s, opacity 1s 1.2s;} #main_visual .swiper-slide-active .brand {transition:transform 1s 1.2s, opacity 1s 1.2s;} #main_visual .swiper-pagination {bottom:50px; height:4px;} #main_visual .swiper-pagination-bullet {margin:0 3; width:103px; height:4px; border-radius:0; } #main_visual .swiper-pagination-bullet-active {background:#fff;} #main_visual .swiper-button-next, #main_visual .swiper-button-prev {width:80px; height:80px; margin-top:-40px; border-radius: 40px; background-size:42px; background-color:rgba(255,255,255,0.3); border:1px solid rgba(204,204,204,0.1); background-position:center; background-repeat:no-repeat; outline:none; transition:0.2s linear} #main_visual .swiper-button-next:hover, #main_visual .swiper-button-prev:hover {background-color:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.3);} #main_visual .swiper-button-next {left:auto; right:160px; background-image:url('../images/main/icon_main_visual_next.svg');} #main_visual .swiper-button-prev {left:160px; right:auto; background-image:url('../images/main/icon_main_visual_prev.svg');} #main_visual .swiper-button-next:after, #main_visual .swiper-button-prev:after {border:0; background:none;} #main-quick {position: relative; z-index: 100; background:#F8F9FD} #main-quick .q_link {display: flex; justify-content: center; background: #fff; border-radius: 4px; transform: translateY(-50%); margin: 0 auto; width: fit-content; box-shadow: 0 5px 10px rgba(0,0,0,0.19); overflow:hidden} #main-quick .q_link li {flex: 0 0 auto; width: 230px; padding: 27px 0; box-sizing: border-box; text-align: center; border-left: 1px solid #eee; align-items:center} #main-quick .q_link li:first-child {border-left: 0;} #main-quick .q_link li span {display: block; font-size: 14px; color: #949494; text-transform: capitalize; letter-spacing: -0.14px;} #main-quick .q_link li em {font-size: 18px; color: #333; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0} #main-quick .q_link li em::before {content: ''; display: inline-block; width: 36px; height: 36px; border: 1px solid #ccc; border-radius: 50%; background: url(../images/main/ico-qmenu01.svg) no-repeat center; margin-right: 8px; box-shadow: 0 2px 3px rgba(0,0,0,0.16);} #main-quick .q_link li.s2 em::before {background-image: url(../images/main/ico-qmenu02.svg);} #main-quick .q_link li.s3 em::before {background-image: url(../images/main/ico-qmenu04.svg);} #main-quick .q_link li.s4 em::before {background-image: url(../images/main/ico-qmenu03.svg);} #main-quick .q_link li.s5 em::before {background-image: url(../images/main/ico-qmenu05.svg);} #main-quick .q_link li.s6 em::before {background-image: url(../images/main/ico-qmenu06.svg);} #main-quick .q_link li:hover {background: linear-gradient(270deg, #72A10D -4.89%, #ACCA6A 144.89%); backdrop-filter: blur(7px); /* border-top: 1px solid rgba(255, 255, 255, 0.70); padding-top: 26px;*/} #main-quick .q_link li:hover span, #main-quick .q_link li:hover em {color: #fff} #main-quick .new-quick .q_link li:hover em::before {border-color: #fff; filter: brightness(100);} #main-best {position:relative; padding:60px 0 120px 0; text-align:center; background:#F8F9FD} #main-best .inner{width:1400px; display:flex; flex-direction: column; align-items: flex-start; margin:auto; } #main-best h2 { font-size:38px; color:#333; text-align: left; display:flex; align-items: center; position:relative; width:100%} #main-best h2 span{ color:#77A80F; font-weight:bold; padding-right:8px} #main-best h2 a.link{ color:#333; font-size:16px; font-weight:400; position:absolute; right:0; top:50%; transform:translateY(-50%); padding-right:24px;} #main-best h2 a.link:after{ content:""; width:20px; height:20px; background:url(../images/icon/icon_all_plus.svg) no-repeat center / cover; position:absolute; right:0; top:50%; transform: translateY(-50%);} #main-best .swiper-container {margin-top:40px; position:relative; } #main-best .best_item {position:relative; width:100%; margin:0 auto; } /*#main-best .swiper-wrapper { display:flex; align-items: stretch;}*/ #main-best .swiper-slide { margin-bottom:44px; background:#fff; box-shadow:5px 5px 25px rgba(0,0,0,0.06); display:flex; align-items: stretch; height:unset} #main-best .box { width:100%; overflow:hidden; display:flex; flex-direction: column; justify-content: stretch; } #main-best .box a {display: block; overflow: hidden;} #main-best .img_wrap {position:relative; display:flex; flex-direction: column; width:100%} #main-best .img_wrap .flag{ position:absolute; left:0; top:0; z-index:2; display:flex; justify-content: flex-start;} #main-best .img_wrap .flag em{ padding:5px 8px; display:flex; justify-content: center; align-items: center; font-size:14px; font-weight:500; color:#fff} #main-best .img_wrap .flag .new { background-color:#121212 } #main-best .img_wrap .flag .best{ background-color:#B5994E} #main-best .img_wrap img {width:100%; height: 100%;} #main-best .tbox {position:relative; padding:20px; color:#333; display:flex; flex-direction: column; align-items: flex-start; } #main-best .t01 { font-size:20px; font-weight:bold; text-align: left;} #main-best .t02 {margin-top:8px; font-size:16px; line-height:1.33; font-weight:400; height:40px; text-overflow: ellipsis; display:flex; text-align: left; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} #main-best .t03 {margin-top:20px; display:flex; justify-content: flex-start; column-gap: 8px;} #main-best .t03 span{ display:inline-flex; justify-content: center; align-items: center; border-radius: 4px; background:#f4f4f4; color:#767676; font-size:14px; padding:4px 6px; } #main-best .swiper-button-next, #main-best .swiper-button-prev {width:60px; height:60px; margin-top:-30px; background-size:32px; background-position:center; background-repeat:no-repeat; outline:none; background-color:rgba(0,0,0,0.2); border-radius: 30px; transition:background-color 0.4s ease} #main-best .swiper-button-next:hover, #main-best .swiper-button-prev:hover {background-color:rgba(0,0,0,0.7)} #main-best .swiper-button-next {left:auto; right:-100px; background-image:url('../images/main/icon_best_next.svg');} #main-best .swiper-button-prev {left:-100px; right:auto; background-image:url('../images/main/icon_best_prev.svg');} #main-best .swiper-button-next:after, #main-best .swiper-button-prev:after {border:0; background:none;} #main-best .swiper-scrollbar { width:100%; height:2px; border-radius: 0; background:rgba(0,0,0,0.1); position:absolute; bottom:0; left:0} #main-best .swiper-scrollbar .swiper-scrollbar-drag{ background:#000} #main-banner-count {width: 100%; background: url(../images/main/main-mid-bg.png) no-repeat 0 0 / cover; color: #fff; padding:120px 0; display:block;} #main-banner-count .block-top { position:relative; width:1400px; margin:0 auto} #main-banner-count .block-top .main-text {font-size: 38px; font-weight: 700; line-height:1.47} #main-banner-count .block-top .sub-text {font-size: 16px; margin-top:24px} #main-banner-count .block-text {display: grid; grid-template-columns: repeat(4,1fr); width:1400px; margin:60px auto 0 auto} #main-banner-count .block-text .text-wrap {display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height:220px;} #main-banner-count .block-text .text-wrap + .text-wrap{ border-left:1px solid rgba(255,255,255,0.6)} #main-banner-count .block-text .text-wrap span { font-size:16px; text-align: center; display:block} #main-banner-count .block-text .text-wrap strong { display:flex; margin-top:24px; align-items: flex-end; column-gap: 12px;} #main-banner-count .block-text .text-wrap:nth-child(3) strong { column-gap: 8px;} #main-banner-count .block-text .text-wrap:nth-child(3) strong em { margin-top:-10px} #main-banner-count .block-text .text-wrap strong em {font-size:20px; line-height:1.3} #main-banner-count .block-text .text-wrap strong em img{width:24px; height:24px;} #main-banner-count .block-text .text-wrap strong > span {font-size:48px; line-height:1.04} #main-banner-count .block-text .text-wrap strong var {font-size:20px; line-height:1.3; margin-left:4px; font-style: normal;} #main-intro-cont{ width:100%; padding:120px 0; position:relative; text-align: center;} #main-intro-cont:before{ content:""; width:762px; height:143px; background:url("../images/main/special_bg.png") no-repeat center / auto 100%; position:absolute; right:-18px; top:132px; } #main-intro-cont .title{ color:#333; font-size:38px; width:1400px; margin:0 auto; text-align: left; display:block; font-weight:700} #main-intro-cont .tab-wrap{ width:1400px; display:flex; flex-direction: column; align-items: flex-start; margin:40px auto 0 auto; } #main-intro-cont .tab-ul{ display:flex; justify-content: flex-start; column-gap: 12px;} #main-intro-cont .tab-ul button{ border:1px solid #ddd; height:40px; padding:6px 16px 8px; border-radius: 20px; color:#666; font-size:16px; background:#fff; transition:background 0.2s linear} #main-intro-cont .tab-ul button:hover, #main-intro-cont .tab-ul button.is-active{ border:1px solid #333; color:#fff; background:#333} #main-intro-cont .tab-cont{ width:100%; border-top:1px solid #333; margin-top:32px; padding-top:32px} #main-intro-cont .tab-cont .tab-layer{ display:none; width:100%} #main-intro-cont .tab-cont .tab-layer.is-active{ display:block; text-align: left;} #main-intro-cont .tab-cont .tab-layer .go-link{ margin:40px auto 0 auto; color:#333; font-size:16px; font-weight:400; padding-right:24px; display:inline-flex; position:relative; left:50%; transform: translateX(-50%);} #main-intro-cont .tab-cont .tab-layer .go-link:after{ content:""; width:20px; height:20px; background:url(../images/icon/icon_all_plus.svg) no-repeat center / cover; position:absolute; right:0; top:50%; transform: translateY(-50%);} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-title{ font-size:48px; font-weight:700; color:#333 } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-title span{ color:#77A80F} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-text{ font-size:16px; line-height:1.75; color:#767676; margin-top:20px } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-text + .in-text{ margin-top:0} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul{ display:flex; justify-content: center; align-items: center; margin:60px 0 0 50px; position:relative} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul:after{ content:""; width:calc(100% - 80px); height:1px; background:url(../images/main/main-new-cont-leaf-line.svg) repeat-x 0 center; position:absolute; left:20px; top:50%; z-index:2} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li{ display:flex; justify-content: center; align-items: center; position:relative; z-index:3; color:#333} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li img{ width:100%} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li p{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); text-align: center; font-weight:bold; font-size:20px} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li p strong{ color:#77A80F} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li:nth-child(2){ padding:0 60px 0 60px; color:#fff} #main-intro-cont .tab-cont .tab-layer .system-ul{display:grid; grid-template-columns: repeat(2, 1fr);} #main-intro-cont .tab-cont .tab-layer .system-ul > li{ display:flex; flex-direction:column; align-items: stretch; padding-bottom:32px; border-bottom:1px solid #eee; min-height:268px} #main-intro-cont .tab-cont .tab-layer.tab-layer-2 .system-ul > li{ min-height:200px} #main-intro-cont .tab-cont .tab-layer .system-ul > li:nth-child(n + 3){ padding-top:32px } #main-intro-cont .tab-cont .tab-layer .system-ul li span{ color:#77A80F; font-size:16px; font-weight:500} #main-intro-cont .tab-cont .tab-layer .system-ul li .in-title{ color:#333; font-size:24px; font-weight:700; letter-spacing:-0.2% } #main-intro-cont .tab-cont .tab-layer .system-ul li ul{ display:flex; flex-direction: column; align-items: flex-start; margin-top:12px} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li{ color:#767676; font-size:16px; display:flex; align-items: center; flex-direction: row; padding-bottom:0; border-bottom:0; min-height:unset; position:relative; line-height:1.5; padding-left:14px} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li + li{ margin-top:8px} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li:before{ content:""; width:6px; height:6px; border-radius: 3px; background:#CCCCCC; display:flex; position:absolute; top:9px; left:0} #main-intro-cont .tab-cont .tab-layer:not(.tab-layer-0) .in-title{ font-size:24px; font-weight:700; color:#333; margin-top:8px } #main-intro-cont .tab-cont .tab-layer:not(.tab-layer-0) .in-text{ font-size:16px; line-height:1.75; color:#767676; margin-top:12px } #main-slogan-cont{ background:#F8F9FD; padding:120px 0; position:relative} #main-slogan-cont:before{ content:""; width:740px; height:143px; background:url("../images/main/system_bg.png") no-repeat center / auto 100%; position:absolute; right:-35px; top:152px; } #main-slogan-cont .inner{ width:1400px; margin:0 auto; display:flex; flex-direction: column; align-items: flex-start;} #main-slogan-cont .inner .title{ font-size:38px; color:#333; font-weight:bold; line-height:1.47; text-align: left;} #main-slogan-cont .inner .info-wrap{ display:grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top:40px} #main-slogan-cont .inner .info-wrap li{ display:flex; flex-direction: column; background:#fff; box-shadow: 8px 8px 25px rgba(0,0,0,0.06); padding:0 32px 48px 32px; border-radius: 4px; overflow: hidden;} #main-slogan-cont .inner .info-wrap li .thumb{ display:block; margin:0 -32px; overflow:hidden} #main-slogan-cont .inner .info-wrap li .in-title{ margin-top:32px; color:#333; font-size:28px; font-weight:bold} #main-slogan-cont .inner .info-wrap li dl{ margin-top:24px;} #main-slogan-cont .inner .info-wrap li dt{ position:relative; padding-left:24px; font-size:20px; font-weight:bold; color:#333; line-height:1.5} #main-slogan-cont .inner .info-wrap li dt:before{ content:""; width:15px; height:15px; display:block; background:url(../images/icon/icon_list_dot.svg) no-repeat center / cover; position:absolute; left:0; top:7px} #main-slogan-cont .inner .info-wrap li dd{ padding-left:24px; font-size:16px; color:#767676; margin-top:8px} #main-slogan-cont .inner .info-wrap li dd + dt{ margin-top:20px} #main-banner-more{width:100%; background:url(../images/main/moreInfo_bg.png) no-repeat center / auto 100%, linear-gradient(to right, rgba(95,67,52,1) 0%, rgba(113, 83,67,1) 25%, rgba(116,90,78,1) 100%); text-align: center;} #main-banner-more .inner{ width:1400px; display:flex; flex-direction: column; align-items: flex-start; color:#fff; margin:0 auto; padding:80px 0} #main-banner-more .inner .title{ color:rgba(255,255,255,0.5); font-size:24px; font-weight:500; letter-spacing:-0.01em; text-align: left; margin-bottom:0} #main-banner-more .inner .text{ color:#fff; font-size:38px; font-weight:bold; letter-spacing:-0.01em; text-align: left; margin-top:12px; line-height:1.47} #main-banner-more .inner .text span{ color:#FFC34F} #main-banner-more .inner a.link{ margin-top:40px; border-radius: 24px; border:1px solid rgba(255,255,255,0.6); padding:12px 24px} #main-banner-more .inner a.link span{ font-size:16px; color:#fff; padding-right:24px; position:relative; display:flex} #main-banner-more .inner a.link span:after{ content:""; width:16px; height:16px; display:block; position:absolute; right:0; top:50%; transform: translateY(-50%); background:url(../images/icon/icon_brand_arrow_16x16.svg) no-repeat center / cover} /*템플릿 영역*/ @media all and (max-width:1440px) { /*메인 신규작업*/ #main_visual { margin-top: 6.94vw;} #main_visual .t01 {font-size: 1.81vw; } #main_visual .t02 {font-size: 3.33vw; } #main_visual .t03 {font-size: 1.39vw; } #main_visual .swiper-pagination {bottom:3.47vw; height:0.28vw;} #main_visual .swiper-pagination-bullet {margin:0 3; width:7.15vw; height:0.28vw; } #main_visual .swiper-button-next, #main_visual .swiper-button-prev {width:5.56vw; height:5.56vw; margin-top:-2.78vw; border-radius: 2.78vw; background-size:2.92vw; } #main_visual .swiper-button-next {right:11.11vw; } #main_visual .swiper-button-prev {left:11.11vw; } #main-quick .q_link {border-radius: 0.28vw;} #main-quick .q_link li {width: 15.97vw; padding: 1.88vw 0;} #main-quick .q_link li span {font-size: 0.97vw; } #main-quick .q_link li em {font-size: 1.25vw; margin-top: 0.56vw} #main-quick .q_link li em::before {width: 2.50vw; height: 2.50vw; margin-right: 0.56vw; } #main-quick .q_link li.s2 em::before {background-image: url(../images/main/ico-qmenu02.svg);} #main-best { padding:4.17vw 0 8.33vw 0; } #main-best .inner{width:97.22vw; } #main-best h2 { font-size:2.64vw; width:100%} #main-best h2 span{ padding-right:0.56vw} #main-best h2 a.link{ font-size:1.11vw; padding-right:1.67vw;} #main-best h2 a.link:after{ width:1.39vw; height:1.39vw; } #main-best .swiper-container {margin-top:2.78vw; } #main-best .swiper-slide { margin-bottom:3.06vw; } #main-best .img_wrap .flag{ } #main-best .img_wrap .flag em{ padding:0.35vw 0.56vw;font-size:0.97vw; } #main-best .tbox { padding:1.39vw; } #main-best .t01 { font-size:1.39vw; } #main-best .t02 {margin-top:0.56vw; font-size:1.11vw; height:2.78vw; } #main-best .t03 {margin-top:1.39vw; column-gap: 0.56vw;} #main-best .t03 span{ font-size:0.97vw; padding:0.28vw 0.42vw; } #main-best .swiper-button-next, #main-best .swiper-button-prev {width:4.17vw; height:4.17vw; margin-top:-2.08vw; background-size:2.22vw; border-radius: 2.08vw; } #main-best .swiper-button-next {right:-6.94vw;} #main-best .swiper-button-prev {left:-6.94vw; } #main-banner-count { padding:8.33vw 0; } #main-banner-count .block-top { width:97.22vw; } #main-banner-count .block-top .main-text {font-size: 2.64vw; } #main-banner-count .block-top .sub-text {font-size: 1.11vw; margin-top:1.67vw} #main-banner-count .block-text {width:97.22vw; margin:4.17vw auto 0 auto} #main-banner-count .block-text .text-wrap { height:15.28vw;} #main-banner-count .block-text .text-wrap span { font-size:1.11vw; } #main-banner-count .block-text .text-wrap strong { margin-top:1.67vw; column-gap: 0.83vw;} #main-banner-count .block-text .text-wrap:nth-child(3) strong { column-gap: 0.56vw;} #main-banner-count .block-text .text-wrap strong em {font-size:1.39vw; } #main-banner-count .block-text .text-wrap strong em img{width:1.67vw; height:1.67vw;} #main-banner-count .block-text .text-wrap strong > span {font-size:3.33vw; } #main-banner-count .block-text .text-wrap strong var {font-size:1.39vw; margin-left:0.28vw; } #main-intro-cont{ padding:8.33vw 0; } #main-intro-cont:before{ width:52.92vw; height:9.93vw; right:-1.25vw; top:9.17vw; } #main-intro-cont .title{ font-size:2.64vw; width:97.22vw; } #main-intro-cont .tab-wrap{ width:97.22vw; margin:2.78vw auto 0 auto; } #main-intro-cont .tab-ul{ column-gap: 0.83vw;} #main-intro-cont .tab-ul button{ height:2.78vw; padding:0.42vw 1.11vw 0.56vw; border-radius: 1.39vw; font-size:1.11vw; } #main-intro-cont .tab-cont{ margin-top:2.22vw; padding-top:2.22vw} #main-intro-cont .tab-cont .tab-layer .go-link{ margin:2.78vw auto 0 auto; font-size:1.11vw; padding-right:1.67vw; } #main-intro-cont .tab-cont .tab-layer .go-link:after{ width:1.39vw; height:1.39vw;} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-title{ font-size:3.33vw; } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-text{ font-size:1.11vw; margin-top:1.39vw } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul{ margin:4.17vw 0 0 3.47vw; } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul:after{ width:calc(100% - 5.56vw); left:1.39vw; } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li p{ font-size:1.39vw} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li:nth-child(2){ padding:0 4.17vw 0 4.17vw; } #main-intro-cont .tab-cont .tab-layer .system-ul > li{ padding-bottom:2.22vw; min-height:18.61vw} #main-intro-cont .tab-cont .tab-layer.tab-layer-2 .system-ul > li{ min-height:13.89vw} #main-intro-cont .tab-cont .tab-layer .system-ul > li:nth-child(n + 3){ padding-top:2.22vw } #main-intro-cont .tab-cont .tab-layer .system-ul li span{ font-size:1.11vw; } #main-intro-cont .tab-cont .tab-layer .system-ul li .in-title{font-size:1.67vw; } #main-intro-cont .tab-cont .tab-layer .system-ul li ul{ margin-top:0.83vw} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li{ font-size:1.11vw; padding-left:0.97vw} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li + li{ margin-top:0.56vw} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li:before{ width:0.42vw; height:0.42vw; border-radius: 0.21vw; top:0.63vw; left:0} #main-intro-cont .tab-cont .tab-layer:not(.tab-layer-0) .in-title{ font-size:1.67vw; margin-top:0.56vw } #main-intro-cont .tab-cont .tab-layer:not(.tab-layer-0) .in-text{ font-size:1.11vw; margin-top:0.83vw } #main-slogan-cont{ padding:8.33vw 0; } #main-slogan-cont:before{ width:51.39vw; height:9.93vw; right:-2.43vw; top:10.56vw; } #main-slogan-cont .inner{ width:97.22vw; } #main-slogan-cont .inner .title{ font-size:2.64vw; } #main-slogan-cont .inner .info-wrap{ column-gap: 1.67vw; margin-top:2.78vw} #main-slogan-cont .inner .info-wrap li{ padding:0 2.22vw 3.33vw 2.22vw; border-radius: 0.28vw; } #main-slogan-cont .inner .info-wrap li .thumb{ margin:0 -2.22vw; } #main-slogan-cont .inner .info-wrap li .in-title{ margin-top:2.22vw; font-size:1.94vw; } #main-slogan-cont .inner .info-wrap li dl{ margin-top:1.67vw;} #main-slogan-cont .inner .info-wrap li dt{ padding-left:1.67vw; font-size:1.39vw; } #main-slogan-cont .inner .info-wrap li dt:before{ width:1.04vw; height:1.04vw; top:0.49vw} #main-slogan-cont .inner .info-wrap li dd{ padding-left:1.67vw; font-size:1.11vw; margin-top:0.56vw} #main-slogan-cont .inner .info-wrap li dd + dt{ margin-top:1.39vw} #main-banner-more .inner{ width:97.22vw; padding:5.56vw 0} #main-banner-more .inner .title{ font-size:1.67vw;} #main-banner-more .inner .text{ font-size:2.64vw; margin-top:0.83vw; } #main-banner-more .inner a.link{ margin-top:2.78vw; border-radius: 1.67vw; padding:0.83vw 1.67vw} #main-banner-more .inner a.link span{ font-size:1.11vw; padding-right:1.67vw; } #main-banner-more .inner a.link span:after{ width:1.11vw; height:1.11vw; } } /*모바일 영역*/ @media all and (max-width:1280px) { #main_visual { margin-top: 6.4rem} #main_visual .swiper-slide { } #main_visual .swiper-slide.slide01 {background-image:url('../images/main/mobile/main_visual01.png');} #main_visual .tbox {padding: 20.5% 0 62%; } #main_visual .t01 {font-size: 1.6rem;} #main_visual .t02 {margin-top: 1.6%; font-size: 3.4rem; line-height:1.41} #main_visual .t03 {margin-top: 3.2%; font-size: 1.4rem; } #main_visual .t01, #main_visual .t02, #main_visual .t03, #main_visual .brand {transform: translateY(2rem); opacity:0;} #main_visual .swiper-slide-active .t01 {transform: translateY(0px); opacity:.8;} #main_visual .swiper-slide-active .t02, #main_visual .swiper-slide-active .t03, #main_visual .swiper-slide-active .brand {transform: translateY(0px); opacity:1;} #main_visual .swiper-button-next, #main_visual .swiper-button-prev {width:4.2rem; height:4.2rem; margin-top:0; border-radius: 2.1rem; background-size:2.24rem; top:unset; bottom:30.78%; border:1px solid rgba(255,255,255,0.3); background-color:rgba(204,204,204,0.1); backdrop-filter: blur(7px);} #main_visual .swiper-button-next { right:37%; background-image: url(../images/main/mobile/icon_main_visual_next.svg); } #main_visual .swiper-button-prev {left:37%; background-image: url(../images/main/mobile/icon_main_visual_prev.svg); } #main-quick {} #main-quick .q_link {border-radius: 4px; overflow:hidden; transform: translateY(-7.3rem); width: calc(100% - 4rem); box-shadow: 0.5rem 0.5rem 3rem rgba(0,0,0,0.07); flex-wrap: wrap;} #main-quick .q_link li {flex: 0 0 50%; width: 50%; padding: 2rem 0; justify-content: center; align-items: center; border-bottom:1px solid #EEEEEE} #main-quick .q_link li:nth-child(odd) {border-left: 0;} #main-quick .q_link li:nth-last-child(-n+2) {border-bottom: 0;} #main-quick .q_link li:first-child {border-left: 0;} #main-quick .q_link li span { display:none} #main-quick .q_link li em {font-size: 1.6rem; display: flex; align-items: center; justify-content: center; margin-top: 0} #main-quick .q_link li em::before {content: ''; display: inline-block; width: 3.2rem; height: 3.2rem; margin-right: 0.8rem; box-shadow: 1px 2px 4px rgba(0,0,0,0.12);} #main-quick .q_link li:hover {background: linear-gradient(270deg, #72A10D -4.89%, #ACCA6A 144.89%); backdrop-filter: blur(7px); /* border-top: 1px solid rgba(255, 255, 255, 0.70); padding-top: 26px;*/} #main-quick .q_link li:hover span, #main-quick .q_link li:hover em {color: #fff} #main-quick .new-quick .q_link li:hover em::before {border-color: #fff; filter: brightness(100);} #main-best {padding:0.8rem 0 8rem 0; } #main-best .inner{width:100%; } #main-best h2 { font-size:2.4rem; padding:0 2rem; letter-spacing:-0.1rem} #main-best h2 span{ padding-right:0.8rem} #main-best h2 a.link{ font-size:1.4rem; padding-right:2.4rem; right:2rem} #main-best h2 a.link:after{ content:""; width:2rem; height:2rem; } #main-best .swiper-container {margin-top:2.4rem; position:relative; } #main-best .best_item {position:relative; width:100%; margin:0 auto; padding-bottom:2.6rem; } #main-best .swiper-slide { border-radius: 4px; overflow:hidden; width:40% !important} #main-best .box { } #main-best .img_wrap .flag{ position:absolute; left:0; top:0; z-index:2; display:flex; justify-content: flex-start;} #main-best .img_wrap .flag em{ padding:0.5rem 0.8rem; font-size:1.2rem} #main-best .tbox {position:relative; padding:2rem 2rem 3.2rem 2rem; } #main-best .t01 { font-size:1.8rem; } #main-best .t02 {margin-top:0.8rem; font-size:1.4rem; line-height:1.57; height:4rem; } #main-best .t03 {margin-top:1.6rem; column-gap: 0.8rem;} #main-best .t03 span{ font-size:1.2rem; padding:0.4rem 0.6rem; } #main-best .swiper-button-next, #main-best .swiper-button-prev { display:none } #main-best .swiper-scrollbar { width:calc(100% - 4rem); height:2px; left:2rem} #main-banner-count {background: url(../images/main/mobile/main-mid-bg.png) no-repeat 0 0 / cover; padding:8rem 0 3.8rem 0;} #main-banner-count .block-top { width:100%; padding:0 2rem} #main-banner-count .block-top .main-text {font-size: 2.4rem; line-height:1.41} #main-banner-count .block-top .sub-text {font-size: 1.4rem; margin-top:1.6rem; line-height:1.57} #main-banner-count .block-text {grid-template-columns: repeat(2,1fr); width:100%; margin:4rem auto 0 auto} #main-banner-count .block-text .text-wrap { justify-content: space-between; height:9rem; } #main-banner-count .block-text .text-wrap + .text-wrap{ border-left:1px solid rgba(255,255,255,0.6)} #main-banner-count .block-text .text-wrap span { font-size:1.4rem; font-weight:400; line-height:1.2 } #main-banner-count .block-text .text-wrap strong { margin-top:0; column-gap: 0.8rem;} #main-banner-count .block-text .text-wrap:nth-child(-n+2) { padding-bottom:2.4rem} #main-banner-count .block-text .text-wrap:nth-child(n+3) { border-top:1px solid rgba(255,255,255,0.6); padding-top:2.4rem} #main-banner-count .block-text .text-wrap:nth-child(3) strong { column-gap: 0.8rem;} #main-banner-count .block-text .text-wrap strong em {font-size:1.4rem; } #main-banner-count .block-text .text-wrap strong em img{width:2rem; height:2rem; margin-bottom:0.6rem} #main-banner-count .block-text .text-wrap strong > span {font-size:3.2rem; line-height:1.125; font-weight:700} #main-banner-count .block-text .text-wrap strong var {font-size:1.4rem; line-height:1.625; margin-left:0; } #main-intro-cont{ padding:8rem 2rem} #main-intro-cont:before{ content:""; width:31rem; height:5.7rem; background:url("../images/main/special_bg.png") no-repeat center / auto 100%; position:absolute; right:-0.6rem; top:4.5rem; } #main-intro-cont .title{ font-size:2.4rem; width:100%; } #main-intro-cont .tab-wrap{ width:100%; margin:2.4rem auto 0 auto; } #main-intro-cont .tab-ul{ column-gap:0.8rem; overflow-x:auto } #main-intro-cont .tab-ul button{ height:3.8rem; padding:0.8rem 1.2rem; border-radius: 2rem; font-size:1.4rem; white-space: nowrap;} #main-intro-cont .tab-cont{ border-top:0; margin-top:2rem; padding-top:0} #main-intro-cont .tab-cont .tab-layer{ display:none; width:100%} #main-intro-cont .tab-cont .tab-layer.is-active{ display:block; text-align: left;} #main-intro-cont .tab-cont .tab-layer .go-link{ margin:3.2rem auto 0 auto; font-size:1.4rem; padding-right:2.4rem; } #main-intro-cont .tab-cont .tab-layer .go-link:after{ content:""; width:2rem; height:2rem; } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-title{ font-size:3.2rem; } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-title em{ line-height:4rem} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-title span{margin-left:5.5rem} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-text{ font-size:1.4rem; line-height:1.57; margin-top:3.2rem } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 .in-text + .in-text{ margin-top:0} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul{ flex-direction: column; margin:2rem 0 0 0; width:100%; position:relative} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul:after{ display:none} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li{ width:100%; } #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li p{ font-size:1.8rem; transform: translate(-50%,calc(-50% - 1.2rem)); width:100%} #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul li:nth-child(2){ padding:0;} #main-intro-cont .tab-cont .tab-layer .system-ul{grid-template-columns:1fr;} #main-intro-cont .tab-cont .tab-layer .system-ul > li{ padding-bottom:2rem; min-height:unset} #main-intro-cont .tab-cont .tab-layer.tab-layer-2 .system-ul > li{ min-height:unset} #main-intro-cont .tab-cont .tab-layer .system-ul > li:nth-child(2), #main-intro-cont .tab-cont .tab-layer .system-ul > li:nth-child(n + 3){ padding-top:2rem } #main-intro-cont .tab-cont .tab-layer .system-ul li span{ font-size:1.4rem} #main-intro-cont .tab-cont .tab-layer .system-ul li .in-title{ font-size:1.8rem} #main-intro-cont .tab-cont .tab-layer .system-ul li ul{ margin-top:1.2rem} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li{ font-size:1.4rem; padding-left:1rem; word-break: keep-all;} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li + li{ margin-top:0.8rem} #main-intro-cont .tab-cont .tab-layer .system-ul li ul li:before{ content:""; width:0.6rem; height:0.6rem; border-radius: 0.3rem; top:0.7rem; left:0} #main-intro-cont .tab-cont .tab-layer:not(.tab-layer-0) .in-title{ font-size:1.8rem; margin-top:0.4rem } #main-intro-cont .tab-cont .tab-layer:not(.tab-layer-0) .in-text{ font-size:1.4rem; line-height:1.57; margin-top:0.8rem; word-break: keep-all; } #main-slogan-cont{ padding:8rem 0; position:relative} #main-slogan-cont:before{ content:""; width:30rem; height:5.8rem; position:absolute; right:-1.5rem; top:4.6rem; } #main-slogan-cont .inner{ width:100%; padding:0 2rem} #main-slogan-cont .inner .title{ font-size:2.4rem; line-height:1.42; margin-bottom:0 } #main-slogan-cont .inner .info-wrap{ width:100%; grid-template-columns:1fr; column-gap:0; row-gap: 2.4rem; margin-top:2.4rem} #main-slogan-cont .inner .info-wrap li{ box-shadow: 8px 8px 30px rgba(0,0,0,0.07); padding:0 2rem 3.2rem 2rem} #main-slogan-cont .inner .info-wrap li .thumb{ margin:0 -2rem; width:calc(100% + 4rem) } #main-slogan-cont .inner .info-wrap li .thumb img{ width:100%} #main-slogan-cont .inner .info-wrap li .in-title{ margin-top:2rem; font-size:1.8rem;} #main-slogan-cont .inner .info-wrap li dl{ margin-top:1.2rem;} #main-slogan-cont .inner .info-wrap li dt{ padding-left:2.4rem; font-size:1.6rem; } #main-slogan-cont .inner .info-wrap li dt:before{ content:""; width:1.5rem; height:1.5rem; top:0.5rem} #main-slogan-cont .inner .info-wrap li dd{ padding-left:0; font-size:1.4rem; margin-top:0.4rem} #main-slogan-cont .inner .info-wrap li dd + dt{ margin-top:1.2rem} #main-banner-more{ position:relative; width:100%; background:url(../images/main/mobile/moreInfo_bg.png) no-repeat right calc(100% - 1.5rem) / 26.3rem auto, url(../images/main/mobile/moreInfo_bg0.png) no-repeat center / cover; text-align: left; overflow:hidden;} #main-banner-more .inner{ width:100%; padding:4rem 2rem 20.8rem 2rem} #main-banner-more .inner .title{ font-size:1.6rem; } #main-banner-more .inner .text{ font-size:2.4rem; margin-top:0.8rem; line-height:1.41} #main-banner-more .inner a.link{ margin-top:2.4rem; border-radius: 1.8rem; padding:0.8rem 1.6rem} #main-banner-more .inner a.link span{ font-size:1.4rem; padding-right:2rem; } #main-banner-more .inner a.link span:after{ content:""; width:1.6rem; height:1.6rem; } } @media all and (max-width:990px){ #main-intro-cont .tab-cont .tab-layer.tab-layer-0 ul{ margin:2rem auto 0 auto; width:60%} #main-best .swiper-slide { width:80% !important} } /*팝업추가*/ #popupMultiArea .dimd{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6);z-index:1000} #popupMultiArea .popupInner{ width:1495px; position:relative; color:#fff} #popupMultiArea .popupInner .swiper-container{ width:1295px; height:auto; max-height:465px; overflow:hidden} #popupMultiArea .popupInner .swiper-container .swiper-slide a, #popupMultiArea .popupInner .swiper-container .swiper-slide p{ width:100%; height:100%; display:flex; overflow:hidden; flex-direction: column; justify-content: flex-start; align-items: center;} #popupMultiArea .popupInner .swiper-container .swiper-slide p br{ display:none !important} #popupMultiArea .popupInner .swiper-container .swiper-slide p img, #popupMultiArea .popupInner .swiper-container .swiper-slide a img{ width:100%} #popupMultiArea .popupInner .swiper-button-area { width:1295px; height:60px; display:flex; justify-content: flex-end; align-items: center; position:absolute; top:-84px; left:50%; transform:translateX(-50%); column-gap: 12px;} #popupMultiArea .popupInner .swiper-button-next, #popupMultiArea .popupInner .swiper-button-prev{ width:60px; height:60px; border-radius: 30px; background-repeat: no-repeat; background-position: center; background-size:cover; position:static; margin-top:0} #popupMultiArea .popupInner .swiper-button-next {background-image:url(../images/popup/icon_button_pc_next.svg)} #popupMultiArea .popupInner .swiper-button-prev {background-image:url(../images/popup/icon_button_pc_prev.svg)} #popupMultiArea .popupInner .swiper-button-next.swiper-button-disabled{opacity:.4} #popupMultiArea .popupInner .button-area{ width:1295px; display:flex; justify-content: space-between; align-items: center; color:#fff; margin:12px auto 0;} #popupMultiArea .popupInner .button-area .check_area{ } #popupMultiArea .popupInner .button-area .check_area label{ position:relative; padding-left:36px; display:flex; align-items:center; justify-content: flex-start; color:#fff; cursor:pointer } #popupMultiArea .popupInner .button-area .check_area label:before{ content:""; width:24px; height:24px; background:url(../images/popup/icon_check_off.svg) no-repeat center / cover; position:absolute; left:0; top:0;} #popupMultiArea .popupInner .button-area .check_area input[type="checkbox"]{ display:none } #popupMultiArea .popupInner .button-area .check_area input[type="checkbox"]:checked + label:before{ background-image:url(../images/popup/icon_check_on.svg)} #popupMultiArea .popupInner .button-area .check_close{ padding-right:28px; color:#fff; position:relative} #popupMultiArea .popupInner .button-area .check_close:after{ content:""; width:24px; height:24px; background:url(../images/popup/icon_close.svg) no-repeat center / cover; display:inline-block; position:absolute; right:0; top:0;} @media all and (max-width:1440px){ #popupMultiArea .popupInner{ width:103.82vw; } #popupMultiArea .popupInner .swiper-container{ width:89.93vw; max-height:32.29vw } #popupMultiArea .popupInner .swiper-button-area { width:89.93vw; height:4.17vw; top:-5.83vw; column-gap: 0.83vw;} #popupMultiArea .popupInner .swiper-button-next, #popupMultiArea .popupInner .swiper-button-prev{ width:4.17vw; height:4.17vw; border-radius: 2.08vw; } #popupMultiArea .popupInner .button-area{ width:89.93vw; margin:0.83vw auto 0} #popupMultiArea .popupInner .button-area .check_area label{ padding-left:2.50vw; } #popupMultiArea .popupInner .button-area .check_area label:before{ width:1.67vw; height:1.67vw; } #popupMultiArea .popupInner .button-area .check_close:after{ width:1.67vw; height:1.67vw; } } @media all and (max-width:1200px){ #popupMultiArea .popupInner{ width:calc(100% - 4rem); max-height:calc(100vh - 4rem)} #popupMultiArea .popupInner .swiper-container{ width:calc(100% - 10.4rem); max-height:50vh; } #popupMultiArea .popupInner .swiper-container .swiper-slide { display:flex; align-items: center;} #popupMultiArea .popupInner .swiper-container .swiper-slide a { text-align:center; width:auto; max-width:100%} #popupMultiArea .popupInner .swiper-container .swiper-slide img, #popupMultiArea .popupInner .swiper-container .swiper-slide a img{ max-width:100%; height:100%; width:auto} #popupMultiArea .popupInner .swiper-button-area { width:100%; height:2.4rem; top:50%; margin-top:-1.2rem; justify-content: space-between;} #popupMultiArea .popupInner .swiper-button-next, #popupMultiArea .popupInner .swiper-button-prev{ width:2.4rem; height:2.4rem; border-radius: 1.2rem; } #popupMultiArea .popupInner .swiper-button-next { background-image:url(../images/popup/icon_button_next.svg)} #popupMultiArea .popupInner .swiper-button-prev { background-image:url(../images/popup/icon_button_prev.svg)} #popupMultiArea .popupInner .button-area{ width:calc(100% - 10.4rem);margin:1.2rem auto 0} #popupMultiArea .popupInner .button-area .check_area{ height:2rem; font-size:1.2rem} #popupMultiArea .popupInner .button-area .check_area label{ padding-left:2.8rem; height:100%} #popupMultiArea .popupInner .button-area .check_area label:before{ content:""; width:2rem; height:2rem } #popupMultiArea .popupInner .button-area .check_close{ padding-right:2.4rem; font-size:1.2rem} #popupMultiArea .popupInner .button-area .check_close:after{ content:""; width:2rem; height:2rem; } }