@charset "utf-8";

/** common **/
.main_content{width: 100%; overflow: hidden;}
.row1{margin-top: 29rem;}
.flexbox{position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.flexbox .wrap{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 99;}
.flexbox.row1::before{content: ''; display: block; width: 50%; height: 34.5rem; background: #eaf3f0; position: absolute; right: 0; top:-29rem;}
.flexbox.row1::after{content: ''; display: block; width: 50%; height: 34.5rem; background: #fff; position: absolute; right: 0; top:-29rem; border-radius: 0 35rem 0 0; }
.flexbox.row1 .bg{position: absolute; left: 0; top: 0; width: 100%;}
.flexbox.row1 .bg::before{content:''; display: block; width: 43rem; height: 31.8rem; background: url(../images/main/bg_main_01.png) no-repeat center / 42.9rem; position: absolute; left: 0; top: -20rem; -webkit-animation: dong 2s infinite alternate; animation: dong 2s infinite alternate;  -webkit-animation-timing-function: linear;  animation-timing-function: linear; }
.flexbox.row1 .bg::after{content:''; display: block; width: 18.3rem; height: 17.5rem; background: url(../images/main/bg_main_02.png) no-repeat center / 18.3rem; position: absolute; right: -7rem; top: 37rem; -webkit-animation-name: rotate; animation-name: rotate; -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; }
@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0); }
}
@keyframes rotate {
    from { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
    to { -webkit-transform: rotate(0); transform: rotate(0); }
}
@-webkit-keyframes dong{
    0%{-webkit-transform:translate(0,0);transform:translate(0,0);}
    100%{-webkit-transform:translate(0,2rem);transform:translate(0,2rem);}
  }
@keyframes dong{
    0%{-webkit-transform:translate(0,0);transform:translate(0,0);}
    100%{-webkit-transform:translate(0,2rem);transform:translate(0,2rem);}
  }

/** main_visual **/
.main_visual{border-radius: 0 0 0 35rem; background: #eaf3f0; position: relative; overflow: hidden; padding-top: 10rem;}
.main_visual::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0;}
.webp .main_visual::before{background: url(../images/main/bg_main_visual.webp) no-repeat left bottom;}
.no_webp .main_visual::before{background: url(../images/main/bg_main_visual.png) no-repeat left bottom;}
.main_visual .wrap{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 99;}
/* .main_visual .txt_wrap */
.main_visual .txt_wrap{position: relative; padding-bottom: 41rem;}
.main_visual .txt_wrap h3{font-size: 6.8rem; font-weight: 700; font-family: 'Gsans'; color: #07485b; letter-spacing: -0.05em; line-height: 1; margin-bottom: 1rem;}
.main_visual .txt_wrap h3 i{color: var(--green);}
.main_visual .txt_wrap b{display: block; font-size: 2.7rem; font-weight: 500; letter-spacing: -0.05em; font-family: 'Gsans'; margin-bottom: 3rem;}
.main_visual .txt_wrap p{font-size: 2.2rem; font-weight: 500; color: #3e3e3e; line-height: 1.3; letter-spacing: -0.05em;}
.main_visual .img_wrap{position: absolute; left: 0; bottom: 0; opacity: 0; -webkit-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s; bottom: -10rem;}
.main_visual .img_wrap > *{display: block; position: absolute; bottom: 0;}
.main_visual .img_wrap img{display: block;}
.main_visual .img1{left: -20rem; bottom: -1rem;}
.main_visual .img1 img{width: 85.7rem; }
.main_visual .txt_wrap.aos-init .img_wrap{opacity: 1; bottom: 0;}
/* .main_visual .sale_list */
.main_visual .sale_list{width: 93.5rem; overflow: hidden; position: relative;}
.sale_slider .swiper-slide {opacity: 0.2;width: 100%;height: 100%;background: var(--bdr);-webkit-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s; width: 78rem !important; height: 47rem;  position: relative; background: transparent;}
.sale_slider .swiper-slide::before{content: ''; display: block; width: 100%; height: 100%; border-radius: 5rem; -webkit-box-shadow: 0 3rem 3.2rem rgba(44,47,62,0.2); box-shadow: 0 3rem 3.2rem rgba(44,47,62,0.2); position: absolute; left: 0; top: 0; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; opacity: 0;}
.sale_slider .swiper-slide:hover::before{opacity: 1;}
.sale_slider .swiper-slide-prev,
.sale_slider .swiper-slide-next {opacity: 0.6; -webkit-filter:blur(0.3rem); -moz-filter:blur(0.3rem); -o-filter:blur(0.3rem); -ms-filter:blur(0.3rem); filter:blur(0.3rem);}
.sale_slider .swiper-slide-active {opacity: 1;}
/*.sale_slider .swiper-slide-active{left: -71% !important;}
.sale_slider .swiper-slide-next{margin-left:-71%;}
.sale_slider .swiper-slide-prev{margin-left: 71%;}*/
.sale_slider .swiper-slide a{display: block; width: 100%; height: 100%; padding: 4.5rem 5.7rem; position: relative; border-radius: 5rem; overflow: hidden;}
.sale_slider .swiper-slide a::before{content: ''; display: block; width: 90rem; height: 90rem; border-radius: 100rem; position: absolute; left: -38rem; bottom: -4rem; z-index: 1;}
.sale_slider .swiper-slide a::after{content: '%';font-size: 30rem;line-height: 1;font-weight: 600;position: absolute;right: 1rem;bottom: -5.5rem;z-index: 1;}
.sale_slider .swiper-slide a *{position: relative; z-index: 9;}
.sale_slider .swiper-slide .tit{display: block;font-size: 2.7rem;color: #fff;line-height: 1;padding-left: 2.3rem;position: relative;margin-bottom: 3.4rem;}
.sale_slider .swiper-slide .tit::before{content: ''; display: block; width: 0.7rem; height: 0.7rem; background: #fff; border-radius: 100rem; position: absolute; left: 0; top: 1rem;}
.sale_slider .swiper-slide .top{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: end; position: static;}
.sale_slider .swiper-slide .title{display: block; font-weight: 200; color: #fff; font-size: 5.8rem; line-height: 1.17;}
.sale_slider .swiper-slide .title i{font-weight: 800;}
.sale_slider .swiper-slide .date{font-size: 2.5rem; font-weight: 600; color: #fff; line-height: 1; margin-bottom: 1rem;}
.sale_slider .swiper-slide .count{position: absolute; right: 5.7rem; top: 4.5rem; width: 12rem; height: 12rem; border-radius: 100rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff;}
.sale_slider .swiper-slide .count b{font-size: 6.2rem; font-weight: 700;}
.sale_slider .swiper-slide .count span{font-size: 2.7rem; position: relative; top: 1.2rem;}
/* .sale_slider .swiper-slide .list{max-width: 100%;margin-left: -0.3rem;margin-top: 7.2rem;max-height: 11.8rem;overflow: hidden;} */
.sale_slider .swiper-slide .list{max-width: 100%;margin-left: -0.3rem;margin-top: 3.2rem;max-height: 11.8rem;overflow: hidden;}
.sale_slider .swiper-slide .list li{display: inline-block; padding: 1.3rem 2.5rem; border-radius: 1rem; line-height: 1; font-size: 2.5rem; font-weight: 700;  margin: 0 0.3rem; margin-top: 0.8rem; height: 5.1rem;}
.sale_slider .swiper-slide .list li.more{font-size: 0; width: 7rem; padding: 0; vertical-align: top; text-align: center; line-height: 4rem;}
.sale_slider .swiper-slide .list li.more::before{content: '. . .'; vertical-align: top; font-size: 2.5rem; font-weight: 900; }
.sale_slider .thisweek a{background: #513dff;}
.sale_slider .thisweek a::before{background: #4633f0;}
.sale_slider .thisweek a::after{color: #4936f1;}
.sale_slider .thisweek .count{background: #3924ed; }
.sale_slider .thisweek .list li{background: #e5e2fd; color: #0a0061;}
.sale_slider .nextweek a{background: #e84c4c;}
.sale_slider .nextweek a::before{background: #e13e3e;}
.sale_slider .nextweek a::after{color: #ee5959;}
.sale_slider .nextweek .count{background: #e13e3e; }
.sale_slider .nextweek .list li{background: #ffcece; color: #b62525;}
.sale_slider .lastweek a{background: #008662;}
.sale_slider .lastweek a::before{background: #007a59;}
.sale_slider .lastweek a::after{color: #007a59;}
.sale_slider .lastweek .count{background: #12ae75; }
.sale_slider .lastweek .list li{background: #c2ffe9; color: #073423;}
.main_visual .sale_list .controls{position: relative; width: 78rem; margin: 0 auto;}
.main_visual .sale_list .controls button{display: block; width: 6.5rem; height: 6.5rem; border-radius: 100rem; background: #fff url(../images/main/i_slider_arrow.svg) no-repeat center / 1.7rem; font-size: 0; -webkit-box-shadow: 0 2.2rem 3.2rem rgba(0,0,0,0.1); box-shadow: 0 2.2rem 3.2rem rgba(0,0,0,0.1); position: absolute; top: -23.5rem; margin-top: -3.2rem; -webkit-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s;}
.main_visual .sale_list .controls button:hover,
.main_visual .sale_list .controls button:focus-visible{background: #121c26 url(../images/main/i_slider_arrow_on.svg) no-repeat center / 1.7rem;}
.main_visual .sale_list .controls .btn_prev{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg); -webkit-box-shadow: 0 -2.2rem 3.2rem rgba(0,0,0,0.1); box-shadow: 0 -2.2rem 3.2rem rgba(0,0,0,0.1); left: -3rem;}
.main_visual .sale_list .controls .btn_next{right: -3rem;}

/** quick_menu **/
.quick_menu{position: relative; z-index: 999;}
.quick_menu .inner{width: 80%; max-width: 112.5rem; border-radius: 1000rem; background: #008c77 url(../images/main/bg_quick_menu.png) no-repeat left top; position: relative; position: absolute; top: -8rem; right: 0; z-index: 99; display: -webkit-box; display: -ms-flexbox; display: flex; height: 26rem; padding: 0 8rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden;}
.quick_menu .title{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-right: 1rem; width: 25%;}
.quick_menu .title h3{font-size: 3.2rem; font-weight: 500; font-family: 'Gsans'; color: #fff; letter-spacing: -0.05em; margin-bottom: 2rem; line-height: 1;}
.quick_menu .title p{font-size: 2.1rem; font-family: 'Gsans'; color: #fff; opacity: 0.6; line-height: 1.28; font-weight: 400;}
.quick_menu ul{display: -webkit-box;display: -ms-flexbox;display: flex; width: 75%;}
.quick_menu ul li{-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}
.quick_menu .img_area{display: -webkit-box;display: -ms-flexbox;display: flex; width: 9.8rem; height: 9.8rem; border-radius: 10rem 10rem 10rem 1.5rem; background: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto 2rem; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
.quick_menu .img_area img{-webkit-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s; }
.quick_menu ul li span{display: block; font-size: 1.8rem; font-weight: 500; text-align: center; line-height: 1; color: #fff; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; text-indent: -0.5rem;}
.quick_menu ul li:hover .img_area{-webkit-box-shadow: 0 2.2rem 3.2rem rgba(44,47,45,0.3);box-shadow: 0 2.2rem 3.2rem rgba(44,47,45,0.3);}
.quick_menu ul li:hover .img_area img{-webkit-transform:rotateY(360deg);transform:rotateY(360deg);}
.quick_menu ul li:hover span{font-weight: 600;}

/** recent_list **/
.recent_list{width: clamp(0px,63.5%, 95rem); height: 50rem; background: rgba(255,255,255,0.5); border: 1px solid #eeeeee; position: relative; z-index: 99; border-radius: 2.5rem; padding: 4.5rem 3.8rem;}
.recent_list .title{position: relative; border-bottom: 1px solid #ddd;}
.recent_list .title h3{font-size: 2.8rem; font-weight: 500; font-family: 'Gsans'; letter-spacing: -0.05em; line-height: 1; padding-bottom: 3rem;}
.recent_list .tab_menu{position: absolute; right: 4.5rem; bottom: 0;}
.recent_list .tab_menu li{display: inline-block; position: relative; margin-left: 4rem;}
.recent_list .tab_menu li::before{content: ''; display: block; width: 2px; height: 1.5rem; background-color: #dddddd; -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); position: absolute; left: -2rem; top: 0.8rem;}
.recent_list .tab_menu li:first-of-type::before{display: none;}
.recent_list .tab_menu li a{font-size: 2.2rem; font-weight: 500; font-family: 'Gsans'; letter-spacing: -0.05em; display: block; padding-bottom: 3.3rem; position: relative;} 
.recent_list .tab_menu li a:not(.on):hover{text-decoration: underline;}
.recent_list .tab_menu li a::after{content: ''; display: block; width: 100%; height: 0.3rem; background: var(--green); position: absolute; bottom: 0; left: 0; opacity: 0;}
.recent_list .tab_menu li a.on{color: var(--green);}
.recent_list .tab_menu li a.on::after{opacity: 1;}
.recent_list .tab_cont{margin-top: 0; position: relative;}
.recent_list .tab_cont .btn_more{font-size: 0; width: 3rem; height: 3rem; background: url(../images/main/i_btn_more.png) no-repeat center / 1.5rem; border: 0; position: absolute; right: -1rem; top: -6.7rem; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.recent_list .tab_cont .btn_more:hover{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.recent_list .tab_cont ul{}
.recent_list .tab_cont ul li{border-bottom: 1px solid #f5f4f4; height: 6.25rem;}
.recent_list .tab_cont ul li:last-of-type{border-bottom: 0;}
.recent_list .tab_cont ul li a{display: block; padding: 2rem 0;}
.recent_list .tab_cont ul li a > b{font-size: 1.9rem; font-weight: 600; line-height: 1; max-width: 80%; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block;}
.recent_list .tab_cont ul li a > span{font-size: 1.5rem; color: #777777; font-weight: 500; font-family: 'Gsans'; float: right; line-height: 1; position: relative; top: 0.3rem;}
.recent_list .tab_cont ul li .i_new{display: inline-block; width: 2rem; height: 2rem; border-radius: 100rem; background: #e03a3a; font-size: 0; vertical-align: top; margin-left: 0.5rem;}
.recent_list .tab_cont ul li .i_new::before{content: 'N'; color: #fff; display: inline-block; font-size: 1.2rem; width: 2rem; height: 2rem; text-align: center; line-height: 2rem; font-weight: 700; font-family: 'Pretendard';}
.recent_list .tab_cont ul li .i_file{display: inline-block; width: 1.7rem; margin-left: 0.5rem; vertical-align: -0.1rem;}
.recent_list .tab_cont ul li a:hover > b{text-decoration: underline;}
.recent_list .tab_cont ul li.first{height: auto;}
.recent_list .tab_cont ul li.first a{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.recent_list .tab_cont ul li.first .date{width: 8.5rem; height: 9rem; border-radius: 1rem; background: #3dac89; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center;}
.recent_list .tab_cont ul li.first .date *{font-family: 'Gsans'; font-weight: 500; color: #fff; letter-spacing: -0.05em; line-height: 1; display: block;}
.recent_list .tab_cont ul li.first .date b{font-size: 4rem; position: relative; margin-bottom: 0.3rem;}
.recent_list .tab_cont ul li.first .date b i{position: absolute; right: -1rem; top: -0.5rem;}
.recent_list .tab_cont ul li.first .date span{font-size: 1.5rem;}
.recent_list .tab_cont ul li.first .txt{width: calc(100% - 8.5rem); padding-left: 2rem;}
.recent_list .tab_cont ul li.first .txt *{font-weight: 600; line-height: 1; max-width: 95%; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;}
.recent_list .tab_cont ul li.first .txt b{font-size: 2.2rem; margin-bottom: 1.6rem; font-weight: 700;}
.recent_list .tab_cont ul li.first .txt p{font-weight: 500; color: #777777; font-size: 1.7rem;}
.recent_list .tab_cont ul li.first a:hover .txt b{text-decoration: underline;}

/** card_new **/
.card_news{width: clamp(0px,33.3%, 50rem); height: 50rem; position: relative; z-index: 99; border-radius: 2.5rem; overflow: hidden; border: 1px solid #dddddd;}
.card_news .card_slider{height: 42rem; overflow: hidden;}
.card_news .bottom{background: #fbf9f9; height: 8rem; padding: 3rem 4rem 3rem 3.2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.card_news .bottom h3{font-size: 2.2rem; font-family: 'Gsans'; font-weight: 500; letter-spacing: -0.05em; line-height: 1;}
.card_news .card_slider .swiper-slide a{display: block; height: 42rem;}
.card_news .card_slider .swiper-slide a:focus-visible{outline: auto; outline-offset: -2px;}
.card_news .card_slider img{width: 100%; height:100%;}
.card_news .controls{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.card_news .controls *{display: inline-block;}
.card_news .controls .card_pagination{width: auto; color: #777; font-size: 1rem; margin-right: 0.5rem;}
.card_news .controls .card_pagination span{font-size: 2.1rem; font-weight: 800; margin: 0 0.5rem;}
.card_news .controls .card_pagination span.swiper-pagination-current{color: var(--green);}
.card_news .controls .btn_control{width: 2.5rem; height: 2.5rem; font-size: 0; border: 0; margin-left: 0.3rem;}
.card_news .controls button:focus-visible{outline: auto;}
.card_news .controls .btn_prev,
.card_news .controls .btn_next{background: url(../images/main/i_popup_arrow.svg) no-repeat center / 1.3rem;}
.card_news .controls .btn_prev{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.card_news .controls .btn_next{background-position: top 0.4rem center;}
.card_news .controls .btn_playcontrol.pause{background: url(../images/main/i_popup_pause.svg) no-repeat center / 0.9rem;}
.card_news .controls .btn_playcontrol.play{background: url(../images/main/i_popup_play.svg) no-repeat center / 0.9rem;}
.card_news .controls .btn_card_more{background: url(../images/common/i_sitemap.png) no-repeat center / 1.6rem; margin-left: 1.3rem;}
.layer_pop .card_list{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 2%;}
.layer_pop .card_list li{width: 32%; border-radius: 2rem; overflow: hidden;}
.layer_pop .card_list li:nth-of-type(n+4){margin-top: 1%;}
.layer_pop .card_list li a{display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative;}
.layer_pop .card_list li a:focus-visible img{outline: 2px solid #000; outline-offset: -2px;}
.layer_pop .card_list li a img{width: 100%; position: absolute; left: 0; top: 0;}

/** zeropay **/
.zeropay{margin-top: 8rem; height: 15rem; border-radius: 2.5rem; background-color:#00b398; background-image:url(../images/main/img_zeropay_01.png), url(../images/main/img_zeropay_02.png); background-position:left 1.3rem center, right 1.3rem center;  background-size: auto; background-repeat: no-repeat; position: relative; margin-bottom: 13rem;}
.zeropay a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; padding-right: 37.6rem; font-family: 'Gsans';}
.zeropay p{font-size: 2.8rem; font-weight: 700; letter-spacing: -0.05em; color: #fff;}
.zeropay p b{font-size: 4rem; font-weight: 700;}
.zeropay p b span{color: #ebff65;}
.zeropay p img{display: inline-block; margin-left: 4rem; vertical-align: -1.5rem;}
.zeropay .img_app{position: absolute; right: 10rem; bottom: 0; width: 27.6rem;}

/** promotion **/
.promotion{width: clamp(0px,63.5%, 95rem); position: relative; padding-top: 2.7rem;}
.promotion h3{font-size: 5rem; font-weight: 500; font-family: 'Gsans'; letter-spacing: -0.05em; position: relative; display: inline-block; line-height: 1; margin-bottom: 5rem;}
.promotion h3 .bubble{position: absolute; padding: 1.8rem 3rem 1.2rem; background: var(--green); font-size: 2rem; color: #fff; border-radius: 130rem 100rem 100rem 12rem; white-space: nowrap; letter-spacing: -0.03em; right: -36.5rem; bottom:0; line-height: 1.2; display: block;}
.promotion .promotion_slider{overflow: hidden; padding-top: 0.2rem;}
.promotion .swiper-slide{}
.promotion .swiper-slide a{display: block; width: 100%; height: 100%;}
.promotion .swiper-slide a:hover b{text-decoration: underline;}
.promotion .swiper-slide b{display: block; font-size: 2.5rem; font-family: 'Gsans'; font-weight: 500; line-height: 1; margin-bottom: 1.5rem; letter-spacing: -0.05em;}
.promotion .swiper-slide p{font-size: 2rem; font-family: 'Gsans'; color: #777777; font-weight: 500; line-height: 1; margin-bottom: 2rem;}
.promotion .swiper-slide .thumb_wrap{height: 28rem; border-radius: 2rem; border: 1px solid #ddd; position: relative;}
.promotion .swiper-slide .thumb_wrap img{width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 2rem; overflow: hidden;}
.promotion .swiper-slide .thumb_wrap::after{content: ''; display: block; width: 7rem; height: 7rem; border-radius: 10rem 10rem 10rem 1.5rem; background: #e03a3a url(../images/main/i_video_play.png) no-repeat center / 1.8rem; position: absolute; right: 1rem; top: -4rem; }
.promotion .controls{position: absolute; right: 0; top: 1.5rem;}
.promotion .controls button{display: inline-block; width: 6.5rem; height: 6.5rem; border-radius: 100rem; background: #fff url(../images/main/i_slider_arrow.svg) no-repeat center / 1.7rem; font-size: 0; -webkit-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; border: 1px solid #ddd;}
.promotion .controls button:hover{background: #121c26 url(../images/main/i_slider_arrow_on.svg) no-repeat center / 1.7rem;}
.promotion .controls .btn_prev{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.promotion .controls .btn_next{margin-left: 2rem;}


/** cs_info **/
.cs_info{width: clamp(0px,33.3%, 50rem); background: #f6f9fd; border: 1px solid #e0e4ff; border-radius: 1rem 5rem 5rem 5rem; padding: 5.8rem 5rem 4rem;}
.cs_info h3,
.cs_info h3 + a{display: block; font-family: 'Gsans';  color: #0d1960;  line-height: 1;}
.cs_info h3{font-weight: 500; font-size: 3rem; margin-bottom: 2.5rem; letter-spacing: -0.05em;}
.cs_info h3 + a{font-size: 5rem;  font-weight: 700; margin-bottom: 3.3rem; cursor: default;}
.cs_info .detail{margin-bottom: 3.5rem;}
.cs_info .detail dl{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.cs_info .detail dl *{font-size: 1.9rem; color: #30365e; font-weight: 600; line-height: 1;}
.cs_info .detail dl dt{width: 50%;}
.cs_info .detail dl dd{width: 50%; text-align: right;}
.cs_info .detail dl dd b{font-family: 'Gsans'; padding-right: 0.5rem; vertical-align: 1px;}
.cs_info .detail dl *:nth-of-type(n+2){margin-top: 1rem;}
.cs_info .detail p{color: #30365e; font-size: 1.7rem; font-weight: 500; margin-top: 2rem;}
.cs_info .btns{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; /*justify-content: space-between;*/}
.cs_info .btns li a{display: block; text-align: center;}
.cs_info .btns li a .img_area{width: 9rem; height: 9rem; border-radius: 100rem; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 1.4rem; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.cs_info .btns li a span{display: block; line-height: 1; font-size: 1.7rem; font-weight: 700; color: #4646a9;}
.cs_info .btns li.c1 img{width: 4.6rem;}
.cs_info .btns li.c2 img{width: 5.1rem;}
.cs_info .btns li.c3 img{width: 3.5rem;}
.cs_info .btns li a:hover .img_area{-webkit-box-shadow: 0 1.5rem 1.6rem rgba(110,139,178,0.16);box-shadow: 0 1.5rem 1.6rem rgba(110,139,178,0.16);}

/** company_list **/
.company_list{background: #e7faef url(../images/main/bg_wave.png) repeat-x top; padding-top: 12rem; margin-top: 10rem; padding-bottom: 9rem; }
.company_list h3{font-family: 'Gsans'; font-size: 5rem; font-weight: 500; text-align: center; line-height: 1; letter-spacing: -0.05em; margin-bottom: 1.3rem;}
.company_list h3 + p{font-size: 2rem; font-family: 'Gsans'; text-align: center; line-height: 1; margin-bottom: 5rem;}
.company_list .company_menu{margin-bottom: 4rem;}
.company_list .company_menu ul{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.company_list .company_menu li{margin: 0 0.7rem;}
.company_list .company_menu li button{min-width: 17rem; padding: 0 1rem; font-size: 2rem; font-family: 'Gsans'; font-weight: 500; height: 5.7rem; line-height: 6rem; border: 1px solid var(--green); background: #fff; color: var(--green); border-radius: 2.8rem 2.8rem 2.8rem 0.5rem; position: relative; bottom: 0; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.company_list .company_menu li button:hover{bottom: 0.4rem;}
.company_list .company_menu li button.mixitup-control-active{background: var(--green); color: #fff;}
.company_list .company_cont{background: #fff; border-radius: 5rem; border: 1px solid #e5e9ee; min-height: 57.2rem; -webkit-box-shadow: 0 1rem 1rem rgba(0,0,0,0.05); box-shadow: 0 1rem 1rem rgba(0,0,0,0.05); padding: 4rem;}
.company_list .company_cont ul{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.company_list .company_cont ul li{width: 12.5%; height: 7rem;}
.company_list .company_cont ul li a{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%;}
.company_list .company_cont ul li img{max-width: 50%; max-height: 35%;}


@media screen and (max-width: 1500px) {  
    /* 작은 pc버전 */
}
@media screen and (max-width: 1024px) { 
    /* 태블릿 버전 스타일 (모바일~태블릿 공통 스타일) */ 
    .flexbox,
    .flexbox .wrap{display: block;}
    .flexbox.row1::before,
    .flexbox.row1 .bg,
    .flexbox.row1::after{display: none;}
    .flexbox.row2{padding: 0;}
    .row1{margin-top: 3rem;}

    .main_visual{background: #fff; padding:0; border-radius: 0; overflow: visible;}
    .main_visual::before{display: none;}
    .main_visual .wrap{display: block; padding: 0;}
    .main_visual .txt_wrap{padding-top: 5rem;text-align: center;padding-bottom: 30.2rem;border-radius: 0 0 0rem 10rem;background: #eaf3f0;overflow: hidden;}
    .main_visual .txt_wrap h3{font-size: 5rem; margin-bottom: 0.7rem;}
    .main_visual .txt_wrap b{font-size: 2rem;margin-bottom: 2rem;}
    .main_visual .txt_wrap p{font-size: 1.7rem; line-height: 1.4;}
    .main_visual .img_wrap,
    .main_visual .img1{width: 100%;}
    .main_visual .img1{left:0; bottom:0;}
    .main_visual .img1 img{width: auto; height: 27rem; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0;}
/*     .main_visual .sale_list{width: 100%; top: -5rem; position: relative; padding-bottom: 3rem;} */
    .main_visual .sale_list{width: 100% !important; top: -5rem; position: relative; padding-bottom: 3rem;}
    .sale_slider .swiper-slide{width: calc(100% - 4rem) !important; height: 27.5rem;}
    .sale_slider .swiper-slide::before{-webkit-box-shadow: 0 1.5rem 1.5rem rgba(44,47,62,0.2);box-shadow: 0 1.5rem 1.5rem rgba(44,47,62,0.2); opacity: 1 !important;}
    .sale_slider .swiper-slide a{border-radius: 3rem; padding: 2.5rem 3rem;}
    .sale_slider .swiper-slide a::before{width: 40rem; height: 40rem; left: -20rem;bottom: -1rem;}
    .sale_slider .swiper-slide a::after{font-size: 15rem; bottom: -2rem;}
    .sale_slider .swiper-slide .tit{font-size: 1.6rem; padding-left: 1.5rem; margin-bottom: 2.5rem;} 
    .sale_slider .swiper-slide .tit::before{width: 0.5rem; height: 0.5rem; top: 0.6rem;}
    .sale_slider .swiper-slide .top{display: block;}
    .sale_slider .swiper-slide .title{font-size: 3.5rem; }
    .sale_slider .swiper-slide .count{right: 3rem; top: 2.5rem; width: 7rem; height: 7rem;}
    .sale_slider .swiper-slide .count b{font-size: 3.5rem;}
    .sale_slider .swiper-slide .count span{font-size: 1.5rem; top: 0.6rem; margin-left: 0.2rem;}
    .sale_slider .swiper-slide .date{font-size: 1.5rem; margin-top: 1rem;}
    .sale_slider .swiper-slide .list{margin-top: 4rem; }
    .sale_slider .swiper-slide .list li{font-size: 1.5rem; padding: 0.8rem 1.2rem; border-radius: 0.7rem; height: 3rem;}
    .sale_slider .swiper-slide .list li:nth-of-type(8){display: none;}
    .sale_slider .swiper-slide .list li.more{width: 5rem; line-height: 1;}
    .sale_slider .swiper-slide .list li.more::before{font-size: 2rem; line-height: 2.2rem;}
    .main_visual .sale_list .controls{width: 100%;}
    .main_visual .sale_list .controls button{width: 4rem; height: 4rem; background-size: 1.3rem; top: -15rem;}
    .main_visual .sale_list .controls .btn_prev{left: 0.5rem;}
    .main_visual .sale_list .controls .btn_next{right: 0.5rem;}

    .quick_menu{ margin-top: -5rem;}
    .quick_menu .inner{width: 100%; border-radius: 3rem; position: static; display: block; height: auto; padding: 2.5rem 2rem; background: #008c77;}
    .quick_menu .title{display: block; width: 100%; text-align: center; margin-bottom: 1.5rem; position: relative; z-index: 1;}
    .quick_menu .title h3{font-size: 2.3rem; margin-bottom: 1rem;}
    .quick_menu .title p{font-size: 1.7rem;}
    .quick_menu .title p br{display: none;}
    .quick_menu ul{width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 1;}
    .quick_menu ul li{-webkit-box-flex: 1;-ms-flex: auto;flex: auto;width: 20%;max-width: 20%;margin: 1rem 0;}
    .quick_menu .img_area{width: 7rem; height: 7rem; border-radius: 10rem 10rem 10rem 1rem; margin-bottom: 1rem;}
    .quick_menu ul li span{font-size: 1.6rem;}
    .quick_menu ul li.q1 img{width: 3.5rem;}
    .quick_menu ul li.q2 img{width: 3.5rem; margin-top: 0.3rem;}
    .quick_menu ul li.q3 img{width: 2.5rem;}
    .quick_menu ul li.q4 img{width: 3.8rem;}
    .quick_menu ul li.q5 img{width: 3rem; margin-top: 0.5rem;}

    .recent_list{width: 100%; height: auto; min-height: 43.1rem; border-radius: 1.5rem; padding: 2.5rem 2rem 1rem; margin-bottom: 3rem;}
    .recent_list .title h3{visibility: hidden; position: absolute; opacity: 0;}
    .recent_list .tab_menu{position: static;}
    .recent_list .tab_menu li a{font-size: 2rem; padding-bottom: 1.5rem;}
    .recent_list .tab_menu li{margin-left: 0;}
    .recent_list .tab_menu li + li{margin-left: 3rem;}
    .recent_list .tab_menu li::before{left: -1.5rem;}
    .recent_list .tab_cont .btn_more{top: -4.8rem; right: -1rem;}
    .recent_list .tab_cont ul li{height: 6.45rem;}
    .recent_list .tab_cont ul li a{padding: 1.5rem 0;}
    .recent_list .tab_cont ul li.first .date{width: 6rem; height: 6rem; border-radius: 0.5rem;}
    .recent_list .tab_cont ul li.first .date b{font-size: 2rem;}
    .recent_list .tab_cont ul li.first .date span{font-size: 1.3rem;}
    .recent_list .tab_cont ul li .i_new::before{font-size: 1rem; }
    .recent_list .tab_cont ul li.first .date b i{right: -2.3rem; top: -1.8rem;}
    .recent_list .tab_cont ul li.first .txt{width: calc(100% - 6rem); padding-left: 1.5rem;}
    .recent_list .tab_cont ul li.first .txt b{font-size: 1.8rem; margin-bottom: 1rem;}
    .recent_list .tab_cont ul li.first .txt p{font-size: 1.5rem;}
    .recent_list .tab_cont ul li a > b{font-size: 1.7rem; max-width: 90%;}
    .recent_list .tab_cont ul li a > span{font-size: 1.3rem; float: none; display: block;}
    .recent_list .tab_cont ul li .i_file{width: 1.5rem;}

    .card_news{width: 100%; border-radius: 1.5rem; position: relative; padding-top: 90%; height: auto; }
    .card_news .card_slider{position: absolute; left: 0; top: 0; height: calc(100% - 5rem); width: 100%; overflow: hidden;}
    .card_news .bottom{height: 5rem; padding: 1rem 2rem; font-size: 2rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} 
    .card_news .controls .card_pagination span{font-size: 1.6rem;}
    .card_news .controls .btn_control{width: 2.3rem; height: 2.3rem; margin-left: 0.2rem;}
    .card_news .controls .btn_playcontrol.pause,
    .card_news .controls .btn_playcontrol.play{background-size: 0.8rem;}
    .card_news .controls .btn_control{background-size: 1.3rem;}
    .card_news .controls .btn_prev, .card_news .controls .btn_next{background-size: 1.1rem;}
    .layer_pop .card_list{gap: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
    .layer_pop .card_list li{width: 47%; border-radius: 1rem; margin: 0;}
    .layer_pop .card_list li:nth-of-type(n+3){margin-top: 1rem;}

    .zeropay{max-width: calc(100% - 4rem); margin:  3rem auto 4rem; background-size: auto 80%;}
    .zeropay a{padding: 0;}
    .zeropay .img_app{display: none;}
    .zeropay p{font-size: 2rem; text-align: center;}
    .zeropay p b{font-size: 2.5rem; display: block;}
    .zeropay p img{display: block; margin: 1rem auto 0; width: 12rem;}

    .promotion{padding-top: 4rem; width: 100%; margin-bottom: 3rem;} 
    .promotion h3{font-size: 2.3rem; margin-bottom: 2rem; padding:0 2rem;}
    .promotion .controls{display: none;}
    .promotion h3 .bubble{right: -21rem; font-size: 1.4rem; padding: 1.3rem 2rem 0.8rem;}
    .promotion .promotion_slider{margin-left: 2rem; margin-right: -2rem;}
    .promotion .swiper-slide{width: 85% !important;}
    .promotion .swiper-slide b{font-size: 2rem; margin-bottom: 0.7rem;}
    .promotion .swiper-slide p{font-size: 1.6rem; margin-bottom: 1.2rem;}
    .promotion .swiper-slide .thumb_wrap{height: 30rem; border-radius: 1.5rem;}
    .promotion .swiper-slide .thumb_wrap img{border-radius: 1.5rem;}
    .promotion .swiper-slide .thumb_wrap::after{display: none;}


    .cs_info{width: calc(100% - 4rem); margin: 0 auto; padding: 3rem 2rem; border-radius: 0.5rem 2rem 2rem 2rem;}
    .cs_info h3{font-size: 2.3rem; margin-bottom: 1rem;}
    .cs_info h3 + a{font-size: 3rem; margin-bottom: 2rem;}
    .cs_info .detail dl *{font-size: 1.6rem; line-height: 1.2;}
    .cs_info .detail dl dd{padding-top: 0.2rem;}
    .cs_info .detail p{font-size: 1.5rem; margin-top: 1rem;}
    .cs_info .detail{margin-bottom: 2rem;}
    .cs_info .btns{-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }
    .cs_info .btns li{width: 33%; max-width: 20rem;}
    .cs_info .btns li a .img_area{margin:0 auto; margin-bottom: 1rem; width: 7rem; height: 7rem;}
    .cs_info .btns li a span{font-size: 1.6rem;}
    .cs_info .btns li.c1 img{width: 3.5rem;}
    .cs_info .btns li.c2 img{width: 3.8rem;}
    .cs_info .btns li.c3 img{width: 2.8rem;}

    .company_list{margin-top: 4rem; padding-top: 4rem; background-size: 8rem; padding-bottom: 4rem;}
    .company_list h3{font-size: 2.3rem; margin-bottom: 1rem;}
    .company_list h3 + p{font-size: 1.7rem; font-weight: 500; line-height: 1.3; margin-bottom: 2rem;}
    .company_list .company_menu{margin-bottom: 2rem;}
    .company_list .company_menu ul{-ms-flex-wrap: wrap;flex-wrap: wrap;}
    .company_list .company_menu li{margin: 0.5rem 0.3rem;}
    .company_list .company_menu li button{min-width: 0; font-size: 1.6rem; height: auto; line-height: 1; padding:1rem 2rem 0.8rem}
    .company_list .company_cont{border-radius: 2rem; padding: 2rem 1rem; min-height: 0;}
    .company_list .company_cont ul li{width: 33%; height: 7rem;}
    .company_list .company_cont ul li img{max-width: 70%; max-height: 40%;}
    .card_news .card_slider img{width: 100%; height:auto;}
}
@media screen and (max-width: 767px) { 
    /* 모바일 버전 스타일 (태블릿 대비 모바일에서 달라지는 스타일) */
    .sale_slider .swiper-slide{height: 31.5rem;}
    .company_list .company_cont ul li{width: 25%; height: 5rem;}  
    .quick_menu ul li{width: 33%; max-width: 33%;}
    .promotion .swiper-slide .thumb_wrap{height: 20rem;}
    .zeropay{background-size: auto;}

}
@media screen and (max-width: 480px) { 
    /* 모바일 버전 스타일2 (모바일 작은 화면에서 달라지는 스타일) */
}

/**/