header.desktop_header,
header.mobile_header .inner { background-color: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } 

.swiper-wrapper { height : auto }
#mainSwiper { position : relative; height: calc(100vh - 4rem); padding-top: 3rem; } 
#section1 > .container { width : 100%; } 
#mainSwiper .swiper-slide { background-size : cover; background-position : center center; background-repeat: no-repeat; height: 100%; border-radius : 1.5rem; overflow : hidden; color : var(--white); } 
#mainSwiper .flex { height: 100%; padding : 2rem; gap : 1rem } 
#mainSwiper .swiper-slide h2 { font-size : 4.2rem } 
#mainSwiper .swiper-slide h2 span { position : relative; font-weight: bold; } 
#mainSwiper .swiper-slide h2 span:after { content : url('../img/main/bul_visual.png'); position : absolute; top : -4rem; right : -3rem; z-index: -1; } 
#mainSwiper .swiper-slide p { margin-top : 2rem; font-size : 1.2rem } 
#mainSwiper .visual_card { max-width : 31rem } 
#mainSwiper .visual_card { display : flex; gap : 1rem; flex-wrap : wrap } 
#mainSwiper .visual_card li { flex : 1 1 40% } 
#mainSwiper .visual_card a { display : flex; flex-direction: column; position : relative; padding : 1rem; border-radius : 1rem; overflow: hidden; width : 100%; height : 16.5rem; background-color: var(--white); justify-content: end; transition : all .3s ease; font-size : 1.3rem; font-weight: 500; } 
#mainSwiper .visual_card a span { font-size : 1.6rem; font-weight: 600; } 
#mainSwiper .visual_card a b { font-size : 6rem; font-weight: 600; } 
#mainSwiper .visual_card a:hover { background-color: var(--point); } 
#mainSwiper .visual_card a img { position : absolute; top : -1rem; right : -1rem; } 
#mainSwiperCtrl { display : none !important; } 
#mainSwiper .swiper_ctrl_wrap { position : absolute; bottom : 6rem; left : 2rem; z-index: 5; display : flex; align-items: center; gap : .5rem } 
#mainSwiper .swiper_ctrl_wrap .button_ctrl { width : 3rem; height : 3rem; border-radius: 100%; border : 1px solid #ccc; display : flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } 
#mainSwiper .swiper_ctrl_wrap .button_prev,
#mainSwiper .swiper_ctrl_wrap .button_next { background-color: var(--white); } 
#mainSwiper .swiper_ctrl_wrap .button_stop,
#mainSwiper .swiper_ctrl_wrap .button_play { background-color: rgba(0, 0, 0, 0.7); } 
#mainSwiper .swiper_ctrl_wrap .button_play { display : none } 
#mainSwiper .swiper_ctrl_wrap .pagination { margin-left : 1rem; margin-top : -1rem } 
#mainSwiper .swiper_ctrl_wrap.active .button_play { display : flex } 
#mainSwiper .swiper_ctrl_wrap.active .button_stop { display : none } 


#mainSwiper .swiper-pagination-bullet { width : 3rem; height : 3px; background-color: rgba(255, 255, 255, 0.5); border-radius: 0; } 
#mainSwiper .swiper-pagination-bullet-active { background-color: var(--white); } 

#mainScroll { position : absolute; bottom : 1.5rem; left : 0; width : 100%; z-index: 8; text-align: center; font-size : .7rem; color :var(--white); font-weight: 500; } 
#mainScroll span { position : relative; display : block; margin : 0 auto; width : 15px; height : 39px; background : url('../img/main/scroll_bg.png') no-repeat center center } 
#mainScroll span img { position:absolute; left : 0; animation: bounce 1s; transform: translateY(0px); animation-iteration-count: infinite; } 

@keyframes bounce { 
 0% { top: 0; -webkit-animation-timing-function: ease-in; } 
 50% { top: 5px; -webkit-animation-timing-function: ease-out; } 
 55% { top: 30px; -webkit-animation-timing-function: ease-in; } 
 65% { top: 10px; -webkit-animation-timing-function: ease-out; } 
 95% { top: 0; -webkit-animation-timing-function: ease-in; } 
 100% { top: 0; -webkit-animation-timing-function: ease-in; } 
 }


#section2 { background : url('../img/main/bg_company.png') no-repeat bottom center / cover; } 
.company_intro_wrap { padding : 9rem 0 7rem 0 } 
.company_intro_wrap .tab_wrap ul a { width : 100px; line-height : 45px; } 

.company_intro_wrap .container { padding-left: 10rem } 
.company_txt_wrap { position : absolute; top : 5rem; width : 24rem; font-size : 1.2rem; line-height: 130%; word-break : keep-all } 
.company_txt_wrap span { display : block } 
.company_intro_wrap .tab_wrap { padding-left : 28rem; margin-bottom : 2rem } 
.company_intro_wrap .tab_content { height : 24rem } 
.company_intro_wrap .swiper-slide { width : 16rem } 
.company_txt_wrap h2 { font-size : 3rem; font-weight: 600; margin-bottom : 1rem } 
.company_content { padding-left : 28rem } 
.company_content a { display : block; border-radius : 1rem; overflow : hidden; height : 24rem; padding : 3rem 2rem; font-size : .85rem } 
.company_content a.card_orange { background-color: rgba(233, 80, 64, .75); color : var(--white) } 
.company_content a.card_black { background-color: rgba(0, 0, 0, .85); color : var(--white) } 
.company_content a.card_white { background-color: rgba(255, 255, 255, .7); } 

.company_content a.card_black *,
.company_content a.card_orange * { color : var(--white) } 
.company_content a p { position : relative } 
.company_content a p span { display : block; position : absolute; top : 1rem; right : -3rem; transform : rotate(-90deg); font-size : 4rem; opacity: .1; font-weight: 500; } 
.company_content a h2 { font-size : 1.4rem; margin : 2rem 0; } 
.company_content a .company_card_desc { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } 
.company_content .swiper_btn_wrap { position : absolute; display : flex; gap : 1rem; bottom : 5rem; left : 0 } 
.company_content .swiper { transform : translateY(30px); transition : all .3s ease; } 
.company_content .swiper.active { transform : translateY(0); } 

#section3 { background : url('../img/main/bg_software.png') no-repeat center center / cover; overflow: hidden; } 
#section3 .fp-overflow { overflow : hidden } 
.software_wrap { padding: 6rem 0 0 0; } 
.main_title { font-size : 2.1rem; line-height: 120%; } 
.main_title span { display : block; color : var(--point); font-size : 1.3rem; font-weight: 500; } 
.slider_tab { position: relative; overflow: hidden auto; width: 400px; margin-top: 4rem; height : 430px; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(to bottom, white 60%, transparent 100%); mask-image: linear-gradient(to bottom, white 60%, transparent 100%); z-index: 7; } 
.slider_tab::-webkit-scrollbar { display : none } 
.slider_tab .swiper-slide { margin : .6rem 0; height : initial !important } 
.slider_tab a { display : block; font-size : 1.3rem; color : #999; font-weight: 500; } 
.slider_tab .on a { color : #000 } 
.slider_tab .swiper-wrapper { transition-timing-function: ease; height: auto; } 

.slider_tab .swiper-slide { height: auto; } 
.slider_countent { position : absolute; top : 5rem; left : 0; width: 100%; } 
.slider_countent .swiper-slide { transition-property: transform; transition-property: transform, -webkit-transform; overflow : visible } 
.slider_countent .swiper-slide .title { margin-bottom: 15px; font-size: 30px; text-align: center; } 
.slider_countent .swiper_inner { transform: scale(0.6); transition: transform 1s cubic-bezier(0.5, 0, 0, 1); overflow: visible; } 
.slider_countent .swiper-slide-prev { position : relative; left : -5rem } 
.slider_countent .swiper-slide-active .swiper_inner { transform : scale(1); text-align: right; overflow: visible; } 
.slider_countent a { display : block; text-align: right } 
.slider_countent a > div { position : relative; display : inline-block; } 
.slider_countent .inner { background-color: rgba(255, 255, 255, 0.5); border-radius : 2rem 6rem 2rem 2rem; overflow: hidden; width : 29rem; height : 25rem; display : flex; flex-direction: column; padding : 2rem; justify-content: end; text-align: left; } 
.slider_countent .inner h2 { font-size : 2.5rem; } 
.slider_countent .inner p { font-size : 1.2rem; margin : 2rem 0 5rem 0; font-weight: 500; line-height: 150%; } 
.slider_countent .inner p.main_specsw_intro { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } 
.slider_countent .inner b { display : inline-flex; padding-bottom : .5rem; border-bottom : 2px solid #000; gap : 2rem; align-items: center; } 
.slider_countent a > div > img { position : absolute; top : -4.5rem; left : -3rem } 
.slider_countent a i { position : absolute; display : flex; align-items : center; justify-content : center; padding-left : 1rem; bottom : -5rem; right : -5rem; background : url('../img/main/bg_software_ic.png') no-repeat center center / contain; width : 236px; height : 236px } 
/* 관리자 업로드 '대표 이미지'는 크기가 제각각이므로 원형 아이콘 영역 안에 비율 유지하며 맞춘다. (기본 아이콘 img 는 기존 규칙 그대로 두기 위해 .specsw_thumb 로 한정) */
.slider_countent a i img.specsw_thumb { width : 70%; height : 70%; object-fit : contain; } 
/* 위 padding-left 는 기본 아이콘 아트에 맞춘 값이라 업로드 이미지는 오른쪽으로 치우친다. 업로드 이미지일 때만 해제하여 원형 배경 정중앙에 맞춘다. */
.slider_countent a i.has_thumb { padding-left : 0 } 


#section4 { position : relative } 
#section4:before { content : ''; width : 100%; height : 27rem; background-color: var(--lightpoint); position : absolute; top : 0; left : 0; z-index: -1; } 
.select_label { display : none } 
.success_wrap { padding-top : 5rem } 
.success_wrap .tab_wrap { border : 2px solid #ffe4e1; border-radius : .7rem; background-color: var(--white); margin : 2rem 0 1rem } 
.success_wrap .tab_wrap ul { display : flex; justify-content: space-between; padding : 5px } 
.success_wrap .tab_wrap ul li { position : relative; flex-grow : 1 } 
.success_wrap .tab_wrap ul li a { display : block; text-align: center; border : none; line-height : 3rem; border-radius: .7rem; } 
.success_wrap .tab_wrap ul li ~ li:before { content : ''; width : 1px; height : 1rem; background-color: #ccc; position : absolute; top : 50%; left : 0; transform : translateY(-50%) } 
.success_wrap .tab_wrap ul li.active:before { background-color: var(--point); } 
.success_wrap .tab_content { border : 2px solid #ffe4e1; padding : 4rem 3rem; border-radius : .7rem; background-color: var(--white); /* min-height : 500px; */height: 520px; } 
.success_wrap .tab_content .flex { gap : 2rem; height : 100% } 
.success_wrap .tab_content .flex > div { width : 50% } 
.success_wrap .tab_content .flex > div:last-child { position : relative; display : flex; align-items : center; justify-content : center; min-width : 0; height : 100%; overflow : visible; padding : 1rem; border-radius : 1.6rem; background : linear-gradient(145deg, #30353c, #11151a); box-shadow : 0 18px 36px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .12) } 
.success_wrap .tab_content .flex > div:last-child:before { content : ''; position : absolute; inset : .45rem; z-index : 2; border : 1px solid rgba(255, 255, 255, .18); border-radius : 1.1rem; pointer-events : none } 
.success_wrap .tab_content .flex > div:last-child:after { content : ''; position : absolute; left : 50%; bottom : -1.5rem; z-index : 0; width : 34%; height : 1.5rem; transform : translateX(-50%); border-radius : 0 0 .7rem .7rem; background : linear-gradient(180deg, #252a31, #11151a); box-shadow : 0 .8rem 1.2rem rgba(0, 0, 0, .12) } 
.success_wrap .tab_content .flex > div:last-child img { position : relative; z-index : 1; display : block; width : 100%; height : 100%; max-width : 100%; border-radius : .9rem; background-color : var(--white); object-fit : contain } 
.success_wrap .tab_content h3 { color : var(--point); font-size : 1rem; font-weight: 500; } 
.success_wrap .tab_content h2 { font-size : 1.8rem; margin : 1rem 0 2rem } 
.success_wrap .tab_content p { color : #333 } 
.success_wrap .tab_link { margin-top : 3rem; display : flex; flex-wrap : wrap; gap : 1.2rem } 
.success_wrap .tab_link a { padding-bottom : 1rem; border-bottom : 2px solid #000; font-weight: 500; display : inline-flex; align-items: center; gap : 1.2rem; white-space : nowrap } 
.success_wrap .tab_link a:hover { color : var(--point); border-color :var(--point) } 
.success_wrap .tab_link a svg { fill : #000; width : 25px; height : 30px; transition : all .3s ease } 
.success_wrap .tab_link a:hover svg { fill : var(--point) } 


.news_wrap { gap : 4rem; margin: 5rem auto 0; padding: 0 0 0 1rem; width: 100%; } 
.news_wrap .left { flex-shrink: 0 } 
.news_wrap .swiper_btn_wrap { display : flex; gap : 1rem; margin-top : 4rem } 
.news_wrap .swiper_btn_wrap.is-hidden { display : none } 
.news_wrap .news_swiper { flex : 1; min-width : 0 } 
.news_wrap .swiper-slide { width : 15rem; } 
.news_wrap .news_swiper a { display : flex; flex-direction: column; justify-content: space-between; height : 20rem; border-radius : 1.5rem 4rem 1.5rem 1.5rem; border : 1px solid #cccccc; padding : 2rem; background-color: var(--white); transition : all .3s ease } 
.news_wrap .news_swiper a:hover { border-color : var(--point) } 
.news_wrap .news_swiper h2 { font-size : 1.2rem; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; } 
.news_wrap .news_swiper p { display : flex; gap : .5rem; align-items: center; font-size : .9rem; font-weight: 500; } 
.news_wrap .news_swiper p span { display : block; border-radius: 1rem; background-color: #000; color : var(--white); font-size : .8rem; padding : 0.1rem 0.7rem; transition : all .3s ease; letter-spacing: -2px; } 
.news_wrap .news_swiper a:hover p span { color : var(--white); background-color: var(--point); } 
.news_wrap .news_swiper .swiper-slide:nth-child(even) a { background-color : var(--point); border-color : var(--point); color : var(--white) } 
.news_wrap .news_swiper .swiper-slide:nth-child(even) a h2 { color : var(--white) } 
.news_wrap .news_swiper .swiper-slide:nth-child(even) a p span { color : var(--point); background-color : var(--white) } 
.news_wrap .news_swiper .swiper-slide:nth-child(even) a:hover { background-color : var(--white); border-color : var(--point); color : #000 } 
.news_wrap .news_swiper .swiper-slide:nth-child(even) a:hover h2 { color : #000 } 
.news_wrap .news_swiper .swiper-slide:nth-child(even) a:hover p span { color : var(--white); background-color : var(--point) } 



footer { background : url('../img/main/bg_footer.png') no-repeat center center / cover; margin-top : -3rem; padding : 8rem 0 0 0; border-bottom :1.5rem solid #000; text-align: center; color : var(--white) } 
footer .top { margin-bottom : 6rem } 
footer .top h2 { font-size : 2.1rem; margin-bottom : 2rem } 
footer .top a { display : inline-flex; align-items: center; color : var(--white); border-bottom : 2px solid var(--white); padding-bottom : 1rem; gap : 3rem } 
footer .top a:hover { color : var(--point); border-color : var(--point) } 
footer .top a svg { fill : var(--white); width : 25px; height : 25px } 
footer .top a:hover svg { fill : var(--point) } 
footer .top a + a { margin-left : 1.5rem } 
footer .btm { display : flex; background-color: var(--white); border-radius : 1rem; padding : 2rem; gap : 2rem; color : #000; font-size : .9rem; justify-content: space-between; align-items: end; } 
footer .btm > div { flex : 1 } 
footer ul { display : flex; gap : 4rem; flex : 50% } 
footer ul + ul { margin-top : .5rem } 
footer ul p { display : flex; align-items: center; gap : .5rem; font-weight: 500; } 
footer ul p + p { margin-top : .5rem; gap : 1rem } 
footer .btm > p br { display : none } 
#type2 { position : relative; white-space: pre-line; border-right: 2px solid #000; padding-right: 4px; height : 100px } 
#type2:after { content : ''; display : inline-block; width : 1px; height : 2rem; background-color: var(--white); animation: blink 0.6s step-end infinite; } 


.main_title a { display : flex; margin : 1rem auto; padding : .1rem 1rem; font-size : 1rem; border : 1px solid transparent; color : #fff; align-items : center; justify-content : space-between; width : 130px; border-radius : .5rem; font-weight : 600; background-color : var(--point) } 
.main_title a svg { width : 20px; height : 20px; fill : #fff } 


@keyframes blink { from, to { opacity: 0; } 
 50% { opacity: 1; } 
 }


 @media ( max-width : 1700px ){
 .company_intro_wrap .container { padding-left : 2rem } 
.company_txt_wrap { width : 21rem } 
.company_content { padding-left : 24rem } 
 }

 @media ( max-width : 1600px ){
 .slider_countent { left : -5rem } 
 }

 @media ( max-width : 1500px ){
 .company_txt_wrap h2 { font-size : 2.5rem } 
.company_txt_wrap { width : 17rem } 
.company_content { padding-left : 20rem } 

.slider_countent .inner { width : 24rem } 
footer .btm { padding : 2rem 1rem } 
footer ul,
footer .btm { gap : 1rem } 
footer ul p { white-space: nowrap; } 
 }


 @media ( max-width : 1400px ){
 .main_title { font-size : 1.9rem } 
 .main_title span { font-size : 1.1rem } 
#mainSwiper .swiper-slide h2 { font-size : 3.5rem } 
#mainSwiper .visual_card a { height : 14rem } 
#mainSwiper .visual_card a b { font-size : 4rem } 
#mainSwiper .swiper_ctrl_wrap { bottom : 6rem } 
.slider_countent { left : -7rem } 
.slider_countent .inner { width : 24rem } 
.slider_countent .inner h2 { font-size : 2.5rem } 
.slider_countent .inner p { font-size : 1.1rem } 
.slider_countent .inner b { font-size : .9rem } 
.slider_countent a i { width : 200px; height : 200px } 
.slider_countent a i img { width : 70% } 
.slider_countent a > div > img { width : 6.5rem; top : -4rem; left : -3rem } 
 }

 @media ( max-width : 1200px ){
 #mainScroll { display : none } 
#mainSwiper .swiper-slide h2 { font-size : 3rem } 
#mainSwiper .visual_card a { height : 12rem } 
#mainSwiper .visual_card a b { font-size : 3.5rem } 
#mainSwiper .visual_card a img { width : 7rem } 
#mainSwiper .swiper_ctrl_wrap { bottom : 9rem } 
 }


 @media ( max-width : 1100px ){
 .company_intro_wrap { padding : 5rem 0 8rem 0 } 
.company_txt_wrap { position : static; width : 100%; text-align: center; } 
.company_intro_wrap .tab_wrap { padding-left : 0; margin : 3rem 0; overflow : auto hidden; white-space: nowrap; text-align: center; } 
.tab_wrap ul { display : inline-flex; } 
.company_content { padding-left : 0 } 
.company_content .swiper_btn_wrap { position : static; margin : 2rem 0; justify-content: center; } 
.main_title { text-align: center; padding : 0 1rem; word-break: keep-all; } 
.slider_countent { position: static; /* position: relative; *//* left: 0; *//* width: 100%; *//* position: absolute; *//* top: 13rem; */ } 
.slider_countent a { text-align: center; } 
.slider_tab { width : 100%; height : auto; margin-top : 3rem; } 
.slider_tab .swiper-slide { width : auto !important } 
.slider_tab .swiper-slide a { padding-right : 2rem } 
.slider_countent .swiper_inner { padding : 5rem 0 } 
.slider_countent .swiper-slide-prev { position :static } 

.success_wrap .tab_content .flex { flex-direction: column; } 
.success_wrap .tab_content .flex > div { width : 100%; text-align: center; } 
.success_wrap .tab_link { justify-content: center; } 

.news_wrap .main_title { text-align: left; padding : 0 } 
 .news_wrap { margin : 0 } 

 footer { background : url('../img/main/bg_footer_m.png') no-repeat center center / cover } 
 footer .btm { flex-direction: column; align-items: start; padding : 3rem 2rem } 
 footer h1 a img { width : initial } 
 footer ul { display : block } 
 footer ul li + li { margin-top : .5rem } 
 footer ul + ul { margin-top : 1rem } 
 footer .btm > p { justify-content: center; display: flex; width: 100%; } 
footer .btm > p br { display : block } 
footer ul p { white-space: inherit; text-align: left; } 
footer ul p span { white-space: nowrap; } 
.fp-section { height: auto !important; min-height: auto !important; } 
 .software_wrap { padding : 6rem 0 } 
 .slider_countent,
 .slider_countent .swiper-slide { height : auto } 
 .success_wrap .tab_content { height : auto; min-height : 500px; margin-bottom : 5rem } 
 }


 @media ( max-width : 1000px ){
 #mainSwiper { height : auto; margin : 0 -1rem } 
 #mainSwiper .flex { flex-direction: column; padding : 6rem 1rem 4rem; gap : 9rem } 
 #mainSwiper .swiper-slide { border-radius: 0; text-align: center; } 
 #mainSwiper .swiper-slide h2 { font-size : 2.7rem } 
 #mainSwiper .swiper-slide p { margin-top : 1rem; line-height: 120%; } 
 #mainSwiper .swiper_ctrl_wrap { bottom : inherit; left : 50%; transform : translateX(-50%); flex-wrap : wrap; justify-content: center; } 
 #mainSwiper .swiper_ctrl_wrap .pagination { width : 100%; margin : 0 auto !important; text-align: center; } 
 #mainSwiper .visual_card a { text-align: left; height : 9rem; justify-content: space-between; } 
 #mainSwiper .visual_card a img { width : 4rem } 
 .success_wrap .tab_content * { word-break: keep-all; } 
 .success_wrap .tab_content h2 { font-size : 1.5rem } 
#fullpage,
.fp-table { display : block; min-height: initial; height : auto !important } 
.fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]), .fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]), .fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]) { min-height : auto !important } 
#mainSwiper { padding-top : 0 } 
 }


 @media ( max-width : 900px ){
 .news_wrap .main_title { text-align: center; } 
.success_wrap .tab_content .flex { flex-direction: column; } 
.success_wrap .tab_content .flex > div { width : 100%; text-align: center; } 
.success_wrap .tab_link { justify-content: center; } 
.success_wrap .tab_content .flex > div:last-child { max-width : 38rem; height : 20rem; margin : 0 auto } 
.news_wrap { display : block; margin : 0; padding : 0 1rem } 
.news_wrap .left { padding-bottom : 1rem } 
.news_wrap .swiper_btn_wrap { justify-content: center; margin : 1.5rem 0 } 
.success_wrap .tab_link { flex-wrap : wrap } 
.news_wrap .news_swiper a { height : 17rem } 
 }

 @media ( max-width : 800px ){
 #mainSwiper .flex { gap : 6rem } 
 .success_wrap .tab_content p br { display : none } 
 .success_wrap .tab_content h2 br { display : none } 
 .success_wrap .tab_content { padding : 3rem 2rem } 
}

 @media ( max-width : 700px ){
 .slider_countent .inner { width : 20rem; border-radius : 1rem 5rem 1rem 1rem; height : 20rem; background-color : rgba(255, 255, 255, .9) } 
 .slider_countent .inner h2 { font-size : 2.2rem } 
 .slider_countent a i { width : 130px; height : 130px; bottom : -3rem; right : -3rem } 
 .slider_tab a { font-size : 1.1rem } 
.slider_countent a > div > img { width : 3rem; top : -2.5rem; left : -2rem; }
 .success_wrap .tab_wrap { border : none } 
 .select_label { display : flex; width : 100%;; background-color: var(--point); color : #fff; border-radius : 1rem; font-size : 1rem; padding : 1rem; align-items: center; justify-content: space-between; } 
 .select_label.active { border : 1px solid var(--point); color : var(--point); background-color: var(--white); border-bottom : none; border-radius : 1rem 1rem 0 0 } 
 .select_label.active svg { transform :rotate(-180deg); fill : var(--point) } 
 .select_label svg { width : 25px; height : 25px } 
 .success_wrap .tab_wrap ul { display : none; border : 1px solid var(--point); border-top : none } 
 .select_label.active + ul { display : block; padding : 0 } 
 .success_wrap .tab_wrap ul li a { border-radius : 0 } 
 .success_wrap .tab_wrap ul li ~ li:before { display : none } 
 .success_wrap .tab_wrap ul li ~ li { border-top : 1px solid var(--point) } 
#type2 { font-size : 1.58rem } 
 }

 @media ( max-width : 600px ){
     .slider_countent a > div > img { width : 3rem; top: -1rem; left: 0 } 
 .company_content .swiper { max-width : 320px; margin : 0 auto } 
 }

@media ( max-width : 500px ){
 #mainSwiper .visual_card a { font-size : 1rem; height : 8rem } 
 #mainSwiper .visual_card a img { width : 3rem } 
 #mainSwiper .visual_card a span { font-size : 1.4rem } 
 #mainSwiper .visual_card a span b { font-size : 3rem } 

 #mainSwiper .swiper-slide h2 { font-size : 2.4rem } 
 #mainSwiper .swiper-slide p { font-size : 1.1rem } 

 #mainSwiper .swiper_ctrl_wrap .button_ctrl { width : 2.5rem; height : 2.5rem } 
 #mainSwiper .swiper_ctrl_wrap .button_ctrl svg { width : 1.5rem } 
 .company_txt_wrap h2,
 .main_title { font-size : 1.8rem } 

 .slider_countent .inner h2 { font-size : 2.2rem } 
 .slider_countent a i { width : 130px; height : 130px; bottom : -3rem; right : -3rem } 
 .slider_countent .inner { width : 300px; padding : 2rem 1.5rem; height : 15rem; justify-content: space-between; margin : 0 auto } 
 .slider_countent .inner h2 { font-size : 1.4rem } 
 .slider_countent .inner p { margin : -.5rem 0 2rem 0; font-size : .9rem } 
  .slider_countent a > div > img { width : 3rem; top: -1rem; left: -1rem } 
 .slider_countent a i { width : 80px; height : 80px; right: -1.5rem; bottom: -1.5rem; } 
 .slider_countent .swiper_inner { padding : 3rem 0 } 
 .slider_tab { margin-top : 1rem } 
 .success_wrap .tab_content h2 { font-size : 1.3rem } 
 .success_wrap .tab_content p { font-size : .9rem } 
 .success_wrap .tab_content { padding : 2rem 1rem } 
 .success_wrap .tab_content .flex > div:last-child { height : 14rem; padding : .7rem } 
 .success_wrap .tab_content .flex > div:last-child:after { bottom : -1rem; height : 1rem } 
 .success_wrap .tab_link { margin-top : 1rem } 
 footer .top a { gap : 1rem } 
 footer h1 a img { width : 200px } 
 }

 @media ( max-width : 450px ){
.slider_countent a i { width : 80px; height : 80px; bottom : -1.5rem; right : -1.5rem }
 }

 @media ( max-width : 420px ){
.slider_countent a i { right : 0 }
 }

@media ( max-width : 400px ){
 #mainSwiper .swiper-slide h2 { font-size : 2rem } 
 #mainSwiper .swiper-slide p { font-size : 1rem } 
#mainSwiper .visual_card a { height : 7rem; font-size : .8rem } 
 #mainSwiper .visual_card a img { width : 2.5rem; top : -.5rem; right : -.5rem } 
#mainSwiper .visual_card a span b { font-size : 2.4rem } 
.success_wrap .tab_link a { gap : 2rem } 
 }

 @media ( max-width : 350px ){
    .slider_countent .inner { width : 250px }
 .company_txt_wrap h2,
 .main_title { font-size : 1.5rem } 
 .slider_tab .swiper-slide a { font-size : 1rem; padding-right : 1rem } 
 .slider_countent a > div > img { top : -1.5rem; left : -1.5rem } 
 .slider_countent a i { right : -1.5rem } 
 .slider_countent .inner h2 { font-size : 1.3rem; margin-bottom : 10px  }
 .slider_countent .inner p { margin-top : 0;  }
 .slider_countent .inner p.main_specsw_intro { -webkit-line-clamp : 2 } 
 }

 .fp-watermark { display : none !important }