@charset "UTF8";

/*visual*/
.visual{position: relative; overflow: hidden;}
.visual-swiper{height: 960px;}
.visual-swiper .swiper-wrapper{transition-timing-function: cubic-bezier(0.73, 0.02, 0.26, 1);}
.visual-swiper .swiper-slide{height: 960px; position: relative;}
.visual-swiper .swiper-slide a{display:block; width:100%; height: 100%;}
.visual-swiper .swiper-slide a .pc-img, .visual-swiper .swiper-slide a .m-img{height:100%; background-position: center; background-repeat: no-repeat; background-size: cover;}
.visual-swiper .swiper-slide video{width:100%; height: 100%;   object-fit: cover; }
.visual-swiper .swiper-slide a .m-img{display:none}
.visual-txtbox{position: absolute; top:50%; left:50%; max-width:1600px; width: 100%;  padding: 0 20px; transform: translate(-50%, -50%);  z-index:1; box-sizing: border-box; text-align: center;}
.visual-txtbox strong{color:#fff; font-size:9.6rem; font-style: normal;font-family: 'Poppins'; font-weight: 600; display: none; }
/* 유지보수: 관리자에서 입력한 캡션의 Enter(개행)를 사용자 화면에서 줄바꿈으로 표시한다. */
.visual-txtbox p{color:#fff; font-weight: 500; font-size:2.2rem; line-height: 1.6; white-space: pre-line; display: none;}
.visual-page-wrap{max-width:1640px; width:100%; position: absolute; bottom:80px; left:50%;  transform: translate(-50%, 0); z-index: 2; display: flex; justify-content: space-between; align-items: center; padding:0 2rem; box-sizing: border-box;} 
.visual-page-wrap .controller {position: relative; display: flex; align-items: center;}
.visual-page-wrap .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal{width:120px; margin:0 10px; position: relative;    transition: opacity .5s; background: rgba(255, 255, 255, 0.5); height: 3px; }
.visual-page-wrap .swiper-pagination-progressbar-fill{background: #fff !important;}
.visual .controller {font-family: 'Poppins';}
.visual .controller .v-pagination { display: flex; align-items: center; }
.visual .controller .current{color:#fafafa; font-size: 2rem; font-weight: 600; min-width: 25px;;}
.visual .controller .total{font-size: 2rem; font-weight: 600; color: rgba(250, 250, 250, 0.5);  min-width: 25px;}
.visual .controller .btn-pause {margin-left:15px; display: inline-block;width: 16px;height: 17px; background: url(/ux/common/images/btn/btn_main_visual_stop.png) no-repeat center; background-size: 100%; margin-top: -1px;}
.visual .controller .btn-pause.play {background: url(/ux/common/images/btn/btn_main_visual_play.png) no-repeat center;}
.scroll-bar {display: flex; align-items: center; }
.scroll-bar p{color:#fff; font-family: 'Poppins'; font-weight: 500; font-size: 1.6rem;}
.scroll-bar i{width:11px; height: 33px; display:inline-block; vertical-align: middle; margin-left:2rem; background: url(/ux/common/images/ico/ico_scroll_bar.png) no-repeat center; background-size: 100%; ;}

/*product*/
.product{width: 100%; height:100%; padding: 130px 0; background: url(/ux/common/images/bg/bg_main_product.png) no-repeat center; background-size: cover;}
.product .tit{text-align: center;}
.product .tit strong{color:#2551ff; font-size: 2.4rem; font-weight: 600; font-family: 'Poppins';}
.product .tit p{color:#000; font-size:4.6rem; font-weight: 500; margin:1rem 0 6rem 0}
.product .product-swiper .swiper-slide{width: 330px; height: 337px; margin: 0 2.5rem; transition: 0.5s; border-radius: 40px; display: flex; flex-direction: column; 
  justify-content: center; align-items: center; transform: translateX(-75px);}
.product .product-swiper .swiper-slide:last-child{margin-right: 0;}
.product .product-swiper .swiper-slide a{padding: 7.5rem 0; width:100%; display: block;}
.product .product-swiper .swiper-slide.item1{background: url(/ux/common/images/bg/bg_pro_img1.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide.item2{background: url(/ux/common/images/bg/bg_pro_img2.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide.item3{background: url(/ux/common/images/bg/bg_pro_img3.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide.item4{background: url(/ux/common/images/bg/bg_pro_img4.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide.item5{background: url(/ux/common/images/bg/bg_pro_img5.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide.item6{background: url(/ux/common/images/bg/bg_pro_img6.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide.item7{background: url(/ux/common/images/bg/bg_pro_img7.png) no-repeat center; background-size: cover;}

.product .product-swiper .swiper-slide-active.item1{background: url(/ux/common/images/bg/bg_pro_img1_on.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide-active.item2{background: url(/ux/common/images/bg/bg_pro_img2_on.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide-active.item3{background: url(/ux/common/images/bg/bg_pro_img3_on.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide-active.item4{background: url(/ux/common/images/bg/bg_pro_img4_on.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide-active.item5{background: url(/ux/common/images/bg/bg_pro_img5_on.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide-active.item6{background: url(/ux/common/images/bg/bg_pro_img6_on.png) no-repeat center; background-size: cover;}
.product .product-swiper .swiper-slide-active.item7{background: url(/ux/common/images/bg/bg_pro_img7_on.png) no-repeat center; background-size: cover;}


.product .product-swiper .swiper-slide-active{width: 480px; height: 597px; transition: 0.5s; box-shadow: 0px 17px 22px rgba(28,24,105,0.2);border-radius: 40px; position: relative;margin-bottom: 32px;}
.product .product-swiper .swiper-slide .logo-item img{ transform: scale(0.7); transition: transform 0.3s; text-align:center; display: block; margin:0 auto;}
.product .product-swiper .swiper-slide-active .logo-item img{transform: scale(1); transition: transform 0.3s;}
.product .product-swiper .swiper-slide-active a{padding: 11rem 0;}
.product .product-swiper .swiper-slide-active .info-txt{display: block;}
.product .product-swiper .info-txt{color:#fff; font-size: 2rem; font-weight: 500; line-height:1.5; text-align: center; display: none;}
.product .product-swiper .info-txt p{margin:4rem 0 6rem 0}
.product .product-swiper .info-txt span{font-size: 1.8rem;}
.product .product-swiper .info-txt span img{display:inline}
.product-page-wrap{margin-top: 25px; display: flex; align-items: center; justify-content: center;}
.product-page-wrap .swiper-pagination{width:240px !important; background: #efefef; border-radius: 30px; position: relative; bottom: 0 !important; padding: 11px 0 16px 0;}
.product-page-wrap .swiper-pagination .swiper-pagination-bullet{width:8px; height:8px; background: #787878; opacity: 1;   transition: 0.3s; margin:0 8px !important}
.product-page-wrap .swiper-pagination .swiper-pagination-bullet-active{width:30px; height:8px; border-radius: 10px;}
.product-page-wrap .btn-pause {margin-left:10px; display: inline-block;width: 48px;height:48px; background: url(/ux/common/images/btn/btn_main_pro_stop.png) no-repeat center; background-size: 100%; }
.product-page-wrap .btn-pause.play {background: url(/ux/common/images/btn/btn_main_pro_play.png) no-repeat center;}
.product .swiper-wrapper{height:660px;}

/*reference*/
.reference {width: 100%; height:100%; padding-bottom: 16rem; background: url(/ux/common/images/bg/bg_main_reference.png) no-repeat center; background-size: cover;}
.inner-reference{max-width: 1600px; padding: 0 20px; margin: 0 auto; display: flex; justify-content: space-between;}
.reference .l-section {padding-top: 150px; width: calc(100% - 960px); box-sizing: border-box;}
.reference .l-section strong{color:#2551ff; font-size: 2.4rem; font-weight: 600; font-family: 'Poppins';}
.reference .l-section p{color:#000; font-size:4.6rem; font-weight: 500; margin:1rem 0 5rem 0}
.reference .l-section p:last-child{color:#222; font-size:2rem; font-weight: 400; line-height:1.5}
.reference .r-section{width: 960px; padding-top: 150px; overflow:visible}
.reference .r-section .card-list{ display:grid;grid-template-columns:repeat(2, 1fr);  gap:40px;}
.reference .r-section .card-list li a{background: rgba(255, 255, 255, 0.6); display: block; border-radius: 30px; padding:0 40px 44px 40px; box-sizing: border-box; box-shadow: 0px 17px 22px rgba(28,24,105,0.2); transition: all 0.3s;}
.reference .r-section .card-list li .logo-box{width: 100%;padding-top: 51%;box-sizing: border-box;overflow: hidden;position: relative;display: inline-block; border-bottom:1px solid #cfcfcf}
.reference .r-section .card-list li .logo-box img{max-width: 100%;max-height: 100%; object-fit: cover;display: block;position: absolute;top: 50%;left: 50%;  transform: translate(-50%, -50%);}
.reference .r-section .card-list > li{height: auto;}
.reference .r-section .card-list > li:nth-child(odd) {transform: translateY(120px)}
.reference .r-section .card-list .txt-box{margin-top: 3rem;}
.reference .r-section .card-list .txt-box strong{color:#000; font-size: 2.6rem; font-weight: 600; line-height:1.5; ; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.reference .r-section .card-list li a:hover {background: rgba(255, 255, 255, 1);}
.reference .r-section .card-list li a:hover .txt-box strong{color:#2551ff;}
.reference .r-section .card-list .txt-box p{color:#333; font-size:1.8rem; line-height: 1.5; margin-top: 2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 50px;}
.symbol-box{margin-top:5.8rem; display: flex;; align-items: center;}
.symbol-box li{margin-right: 5px;}
.symbol-box li img{width: 29px;}
.reference-list{max-width: 1600px; padding: 0 20px; margin: 22rem auto 0 auto;}
.reference-list ul{display:grid;grid-template-columns:repeat(8, 1fr);  gap:50px; align-items: center;}
.reference-list ul li img{display: block; margin: 0 auto; max-width: 100%;}

/*news*/
.news{background: #fff; width: 100%;}
.inner-news{max-width: 1600px; padding:14rem 2rem; margin: 0 auto; display:flex;}
.inner-news .news-section{width:440px; box-sizing: border-box;}
.news-section strong{color: #2551ff; font-size: 2.4rem; font-weight: 600; font-family: 'Poppins';}
.news-nav-swiper .swiper-wrapper{width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center;}
.news-nav-swiper .swiper-slide{margin-top:3rem}
.news-nav-swiper a{color: #9a9a9a; font-size:4.2rem; font-weight: 400;  font-family: 'Poppins'; line-height: 1;}
.news-nav-swiper .swiper-slide-active a, .news-nav-swiper  .swiper-slide a.on{color:#000000;font-weight: 500; position: relative; }
.news-nav-swiper .swiper-slide.all a.on, .news-nav-swiper .swiper-slide-active.all a{font-weight: 600;}
.news-nav-swiper .swiper-slide-active a::after{position: absolute; width:100%; height:12px; background: #2551ff; border-bottom:1px solid #e2e8ff; content: ""; bottom:8px; left: 0; z-index: -1;}

.newsBox .btn-more-area{display: flex; justify-content: end; margin-bottom: 2.5rem;}
.newsBox .btn-more-area.m-more{display: none;}
.newsBox .btn-more{display: inline-block; padding:6px 16px; border-radius: 20px; border:1px solid #000; font-size: 1.5rem; color:#000; font-weight: 500;}
.newsBox .btn-more i{width:12px; height: 9px; content: ""; display: inline-block; vertical-align: middle; margin-left:5px;; background: url(/ux/common/images/ico/ico_view_more.png) no-repeat center; }


.inner-news .newsBox{width: calc(100% - 440px); box-sizing: border-box;}
.inner-news .newsBox .top-box{background: #edeffd; padding:40px 30px; box-sizing: border-box; border-radius: 20px 20px 0 0;}
.inner-news .newsBox .label-item{color:#2551ff; font-size:1.5rem; font-family: 'Poppins'; font-weight: 600; margin-bottom: 2rem;}
.inner-news .newsBox strong{color:#000; font-size: 2rem; font-weight: 600;line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; height: 60px;}
.inner-news .newsBox .post-date{color:#787878; font-size: 1.6rem; font-weight: 500; margin-top: 4.5rem;}

.inner-news .newsBox .swiper-slide{width:366px;margin-right:30px; border-radius: 6px; box-sizing: border-box;}
.inner-news .newsBox .swiper-slide:last-child{margin-right:0}
.inner-news .newsBox .swiper-slide .img-box{width: 100%;padding-top: 66%;box-sizing: border-box;overflow: hidden;position: relative;display: inline-block;border-radius: 0 0 20px 20px;  overflow: hidden;}
.inner-news .newsBox .swiper-slide .img-box img{width: 100%;height: 100%; object-fit: cover;display: block;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%) scale(1);  transition: transform 0.5s ease;}
.inner-news .newsBox .swiper-slide a:hover .img-box img {  transform: translate(-50%, -50%) scale(1.08);;}
.inner-news .newsBox .swiper-slide a {display: block; position: relative;}
.inner-news .newsBox .swiper-slide a::before {content: "";position: absolute; inset: 0; background: rgba(37, 81, 255, 0.8); border-radius: 20px; opacity: 0;  transition: 0.3s;
  z-index: 1;}
.inner-news .newsBox .swiper-slide a:hover::before {opacity: 1;}
.inner-news .newsBox .swiper-slide a .label-item,
.inner-news .newsBox .swiper-slide a strong,
.inner-news .newsBox .swiper-slide a .post-date {transition: 0.3s;position: relative; z-index: 2; }
.inner-news .newsBox .swiper-slide a:hover .label-item, .inner-news .newsBox .swiper-slide a:hover strong{color:#fff;;}
.inner-news .newsBox .swiper-slide a:hover .post-date{color:#d8d8d8;}
.news-tab{display: none;}
.inner-news .newsBox .news-btn{display: flex; justify-content: end; margin-top:20px}
.inner-news .newsBox .swiper-button-next, .inner-news .newsBox .swiper-button-prev{position: relative; top:auto;}
.inner-news .newsBox .swiper-button-next{width:48px; height:48px; margin:0; background: url(/ux/common/images/btn/btn_main_news_next.png) no-repeat center; right:0;transition: 0.3s; }
.inner-news .newsBox .swiper-button-prev{width:48px; height:48px; margin:0; margin-right:7px; background: url(/ux/common/images/btn/btn_main_news_prev.png) no-repeat center; left: 0;transition: 0.3s; }
.inner-news .newsBox .swiper-button-next:hover{width:48px; height:48px; background: url(/ux/common/images/btn/btn_main_news_next_on.png) no-repeat center; }
.inner-news .newsBox .swiper-button-prev:hover{width:48px; height:48px; background: url(/ux/common/images/btn/btn_main_news_prev_on.png) no-repeat center;  }
.swiper-button-next svg, .swiper-button-prev svg {display: none;}
.news-banner a{display: block; width: 100%; height: 100%; ;}
.news-banner a img{display: block; width: 100%; height: 100%;}
.news-banner .m-img{display: none;}

.news-banner-swiper{width: 100%; border-radius: 20px;margin-top: 4rem}
.inner-news .newsBox .news-banner-swiper .swiper-slide{margin:0; width:100%}
.inner-news .newsBox .news-banner-swiper .swiper-slide a::before{display: none;}

.no-data{padding:30px; font-size: 1.6rem; text-align: center;}

.loader-wrap{min-height:300px;}
.news-loader { width: 48px; height: 48px; border: 5px solid #cacaca; border-bottom-color: #4067fe; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

/*help*/
.help {width: 100%; height:100%; padding:15.5rem 0; background: url(/ux/common/images/bg/bg_main_help.png) no-repeat center; background-size: cover;}
.inner-help{max-width: 1600px; padding: 0 20px; margin: 0 auto;}
.inner-help ul.item1{ display: grid; grid-template-columns: 520px 1fr 1fr 1fr; gap:20px; margin-bottom: 20px;;}
.inner-help ul.item1 li.first{background: #4067fe; padding:40px 40px 60px 40px; box-sizing: border-box;}
.inner-help ul.item2{ display: grid; grid-template-columns: 1fr 1fr 1fr 520px; gap:20px;}
.inner-help ul.item2 li.last{background: #3fcde0; padding:40px 40px 60px 40px; box-sizing: border-box;}

.inner-help ul li strong{color:#fff; font-size: 4.8rem; font-family: 'Poppins'; font-weight: 600; display: block;}
.inner-help ul li p{color:#fff; font-size:2rem; line-height: 1.5;}

.inner-help ul li{display: flex;  flex-direction: column;  height: 100%; border-radius: 20px; overflow: hidden;}
.inner-help ul li a{ background: rgba(255, 255, 255, 0.8); display: block; width: 100%; height:100%; padding:50px 40px 30px 40px; box-sizing: border-box; position: relative; }
.inner-help ul li a .tit{color:#000; font-weight: 600; font-size: 2.8rem; font-family: 'Pretendard'; margin-bottom:12.5rem; }
.inner-help ul li a .tit span{display: block; font-size: 2rem; margin-top: 0.5rem;}
.inner-help ul li a .icon{ position: absolute; bottom: 30px; right:40px; z-index: 2;}
.inner-help ul li a .icon.type1 i{width:63px; height:63px; content:""; display: block; background: url(/ux/common/images/ico/ico_main_help_img1_2.png) no-repeat center; background-size: 100%;}
.inner-help ul li a .icon.type2 i{width:72px; height:72px; content:""; display: block; background: url(/ux/common/images/ico/ico_main_help_img2_1.png) no-repeat center;background-size: 100%; ;}
.inner-help ul li a .icon.type3 i{width:79px; height:61px; content:""; display: block; background: url(/ux/common/images/ico/ico_main_help_img3.png) no-repeat center;background-size: 100%; ;}
.inner-help ul li a .icon.type4 i{width:63px; height:76px; content:""; display: block; background: url(/ux/common/images/ico/ico_main_help_img4.png) no-repeat center; background-size: 100%;;}
.inner-help ul li a .icon.type5 i{width:67px; height:76px; content:""; display: block; background: url(/ux/common/images/ico/ico_main_help_img5.png) no-repeat center; background-size: 100%;;}
.inner-help ul li a .icon.type6 i{width:74px; height:74px; content:""; display: block; background: url(/ux/common/images/ico/ico_main_help_img6_1.png) no-repeat center; background-size: 100%;;}
.inner-help ul.item1 li a::before {content: "";position: absolute; inset: 0; background: #222222; border-radius: 20px; opacity: 0;  transition: 0.3s;
z-index: 1;}
.inner-help ul.item2 li a::before {content: "";position: absolute; inset: 0; background:#222222; border-radius: 20px; opacity: 0;  transition: 0.3s;
z-index: 1;}

.inner-help ul li a:hover::before {opacity: 1;}
.inner-help ul li a strong{position: relative; z-index: 2;}
.inner-help ul li a:hover strong{color:#fff;;}


/* top banner */
.m-topbanner{display: none;}
.topbanner{display: none; background: #fff; overflow: hidden}
.m-textbanner{display: none;}
.topbanner{position: relative;}
.topbanner .topbanner-area {width: 100%; height:140px; margin:0 auto; overflow: hidden;}
.topbanner .topbanner-area a div.imgbanner img{max-width:100%; margin:0 auto; object-fit: contain; width: 100%; height: 100%;}
.topbanner .topbanner-area a div.textbanner{width:100%; height:100%; color:#222; flex-direction: column; text-align: center; display: flex; align-items: center; justify-content: center; font-weight: 500;}
.topbanner button{font-size:1.4rem; padding:0.7rem 0.6rem; color:#fff; position: absolute; top:15px; right:30px; background:rgba(0,0,0,0.3); border-radius:3px; display: flex; align-items: center; line-height: 1; z-index: 10;}
.topbanner button i{width:8px; height:8px; background:url('/ux/common/images/btn/banner_close.png')no-repeat center; background-size:100%; display: inline-block; margin-left:0.8rem;}


@media all and (max-width:1660px){
.inner-news{padding-right: 0;}
.news-banner-swiper{padding-right: 2rem !important; box-sizing: border-box;}
}

@media all and (min-width: 991px) and (max-width:1450px){
.reference .l-section p{font-size: 4rem;}
.reference .l-section p:last-child{font-size: 1.8rem;}
.reference .r-section{width: 66.20vw;}
.reference .l-section{width: calc(100% - 66.20vw)}

.inner-news .news-section{width: 26.82vw;}
.inner-news .newsBox{width: calc(100% - 26.82vw)}

.inner-help ul.item1{grid-template-columns: 35.86vw 1fr 1fr 1fr;}
.inner-help ul.item2{grid-template-columns: 1fr 1fr 1fr 35.86vw;}
.inner-help ul li a .tit{font-size:1.9vw ;}
.inner-help ul li strong{font-size:3.31vw ;}
.inner-help ul li p{font-size:1.6vw ;}
.inner-help ul li a{padding:3.44vw 2.75vw 2vw 2.75vw ;}

}
@media all and (max-width:1200px){
  
.reference .r-section .card-list li a{padding:2rem}
.reference .l-section p{font-size:3.6rem}
.reference .r-section .card-list .txt-box strong{font-size: 2.2rem; height: 60px;}
.reference .r-section .card-list .txt-box p{font-size: 1.6rem;}

.news-nav-swiper a{font-size:3.6rem ;}

}

@media (min-width: 992px) {
  .reference .swiper-wrapper {
    transform: none !important;
    
  }
    .news-nav-swiper .swiper-wrapper{
        transform: translate3d(0,0,0) !important;
    }
}

@media all and (max-width:991px){
.visual-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0, 0, 0.15, 1); }
.visual-txtbox strong{font-size: 7rem; line-height: 1.2;}
.visual-inner .visual-txtbox p{font-size:2.8rem; margin-top: 2rem; white-space: pre-line;}
.product .product-swiper .swiper-slide-active a{padding: 8rem;}

.inner-reference{display: block; padding:8rem 0 0 2rem}
.reference .l-section{width: 100%; padding-top: 0;}
.reference .l-section p{margin:1rem 0 2rem 0}
.reference .r-section{width: 100%; padding: 6rem 0 3rem 0; overflow: hidden;}
.reference .r-section .card-list > li:nth-child(odd){transform: none;}
.reference .r-section .card-list{display: flex; gap: 0; }
.reference .r-section .card-list > li{width: 360px; margin-right:3rem ;}
.reference .r-section .card-list > li a{padding: 2.5rem;}
.reference-list{margin:2rem auto 0 auto}
.reference-list ul{grid-template-columns: repeat(4, 1fr);}

.inner-news{display: block; padding: 8rem 0 8rem 2rem;}
.news-section strong{text-align: center; display: block;}
.news-nav-swiper .swiper-wrapper{flex-direction: row; justify-content: normal;}
.news-nav-swiper a{line-height: 1.5;}
.inner-news .news-section{width: 100%; text-align: center;}
.inner-news .newsBox{width: 100%; margin-top: 3rem;}
.news-nav-swiper .swiper-slide{width: auto; margin-right: 2.5rem;}
.newsBox .btn-more{margin:3rem 0 1rem 0}
.newsBox .btn-more-area{justify-content: center;}
.newsBox .btn-more-area.pc-more{display: none;}
.newsBox .btn-more-area.m-more{display: flex;}
.inner-news .newsBox .news-btn{display: none;}
.inner-help ul.item1, .inner-help ul.item2{display: block; margin-bottom: 1rem;}
.inner-help ul.item1 li.first, .inner-help ul.item2 li.last{display: none;}
.inner-help ul li a{padding:50px 30px; display: flex; justify-content: space-between;}
.inner-help ul li{margin-bottom: 10px;;}
.inner-help ul li a .tit{margin-bottom:0;}
.inner-help ul li a .icon{position: relative; bottom: auto; right: auto;;}
.help{padding: 8rem 0; background: url(/ux/common/images/bg/bg_m_main_help.png) no-repeat center; background-size: cover;}


 /* top banner */
.m-topbanner{display: block;}
.pc-topbanner{display: none;}
.m-textbanner{display: block;}
.pc-textbanner{display: none;}

}

@media all and (max-width:767px){
.visual-swiper{height: 640px;}
.visual-swiper .swiper-slide{height:640px;}
.visual-inner .visual-txtbox strong{font-size: 4.8rem; line-height: 1.2;}
.visual-inner .visual-txtbox p{font-size: 1.7rem; margin-top: 2rem; white-space: pre-line;}
.scroll-bar p{display: none;}
.visual-page-wrap{bottom: 3.5rem;}
.visual-page-wrap .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {width: 90px;}

.product{padding: 8rem 0; background: url(/ux/common/images/bg/bg_m_main_product.png) no-repeat center; background-size: cover;}
.product .tit p{font-size: 2.8rem; margin:0.5rem 0 3rem 0; line-height:1.5}
.product .tit strong{font-size: 1.5rem;}
.product .swiper-wrapper{height:450px}
.product .product-swiper .swiper-slide{width: 240px; height:250px; margin-right: 2.5rem; border-radius: 20px; transform: translateX(-25px);}
.product .product-swiper .swiper-slide-active{width: 290px; height:380px }
.product .product-swiper .swiper-slide a{padding: 3rem 0}
.product .product-swiper .swiper-slide-active a{padding: 4.2rem 0}
.product .product-swiper .info-txt{font-size: 1.6rem;}
.product .product-swiper .info-txt p{margin:0 0 2rem 0}
.product .product-swiper .info-txt span{font-size: 1.5rem;}
.product .product-swiper .info-txt span img{margin-left: 10px; width: 10px;}
.product .product-swiper .swiper-slide .logo-item img{transform: scale(0.6);}
.product .product-swiper .swiper-slide-active .logo-item img{transform: scale(0.8);}

.product-page-wrap .swiper-pagination{width:175px !important; padding: 5px 0 10px 0;}
.product-page-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 25px; height: 5px;}
.product-page-wrap .swiper-pagination .swiper-pagination-bullet{width: 6px; height: 6px;}
.product-page-wrap .btn-pause{width: 37px; height: 37px; background-size: 100%;}
.product-page-wrap .btn-pause.play{width: 37px; height: 37px; background-size: 100%;}

.reference .l-section strong{font-size: 1.5rem;}
.reference .l-section p{font-size: 2.8rem; margin:2rem 0 1.5rem 0; line-height:1.2}
.reference .l-section p:last-child{font-size: 1.6rem; margin-bottom: 0;}
.reference .r-section{padding:2.5em 0 6rem 1rem;}
.reference .r-section .card-list > li{width: 280px; margin-right: 1.5rem;}
.reference .r-section .card-list .txt-box{margin-top: 2rem;}
.reference .r-section .card-list .txt-box strong{font-size: 1.8rem; height: 53px;}
.reference .r-section .card-list .txt-box p{margin-top:1rem; font-size: 1.4rem; height:42px;}
.symbol-box{margin-top: 3.5rem;}
.reference-list ul{gap: 20px 30px;}
.reference{padding-bottom: 6rem;}
.reference-list ul li.type img{max-width: 60%;}
.reference-list ul li.type2 img{max-width: 35%;}
.reference .r-section .card-list li .logo-box{padding-top: 60%;}
.reference .r-section .card-list li .logo-box img{max-width: 80%; max-height: 80%;}

.news-section strong{font-size: 1.5rem; margin-bottom: 1.5rem;}
.news-nav-swiper a{font-size: 2.8rem;}
.news-nav-swiper .swiper-slide{margin-top: 0;}
.inner-news{padding: 6rem 0 6rem 2rem;}
.newsBox .btn-more{margin:2rem 0 3rem 0; font-size: 1.2rem;}
.inner-news .newsBox .swiper-slide{width: 220px; margin-right: 10px;}
.inner-news .newsBox .top-box{padding: 20px 15px;     border-radius: 10px 10px 0 0;}
.inner-news .newsBox .swiper-slide .img-box{border-radius: 0 0 10px 10px;}
.inner-news .newsBox .label-item{font-size: 1.4rem; margin-bottom: 1rem;}
.news-nav-swiper .swiper-slide-active a::after{height: 6px; bottom: 6px;}
.inner-news .newsBox strong{font-size: 1.6rem; height: auto;}
.inner-news .newsBox .swiper-slide a::before{border-radius: 10px;}
.inner-news .newsBox .post-date{font-size: 1.3rem; margin-top: 2.5rem;}

.help{padding:5rem 0}
.inner-help ul li a .tit{font-size: 1.6rem}
.inner-help ul li a .tit span{font-size: 1.4rem}

.news-banner .pc-img{display: none;}
.news-banner .m-img{display: block;}
.inner-help ul li a{padding:25px 20px}

.inner-help ul li a .icon.type1 i{width: 50px; height: 50px;}
.inner-help ul li a .icon.type2 i{width: 52px; height: 56px;}
.inner-help ul li a .icon.type3 i{width: 59px; height: 46px;}
.inner-help ul li a .icon.type4 i{width:43px; height:56px}
.inner-help ul li a .icon.type5 i{width:47px; height:56px}
.inner-help ul li a .icon.type6 i{width:54px; height:54px}

.reference-list ul li img{max-width: 80%;}
/* top banner */
.topbanner .topbanner-area{height:120px}
.topbanner .topbanner-area .textbanner > div{padding:0 2rem}
.topbanner button{font-size:1.2rem; right:15px}
.topbanner button i{width:7px; height:7px;}


}