/* 공통 */
.flex{display: flex;}
.wrap{width: 1450px; max-width: 100%; margin: 0 auto; padding: 10em 0}
.pc{display: block;}
.mo{display: none}
.blind{display:block; position:absolute; top:-999999px; width:0; height:0; font-size:0; overflow:hidden;}

h2.h_title{font-size: 92px; letter-spacing: -2px; margin-bottom: 0;}
h2{font-size: 50px; margin-bottom: 2em; letter-spacing: -2px}
h3{font-size: 30px; letter-spacing: -2px}
p{font-size: 20px; letter-spacing: -1px}
.eng{color: #0cd3cc; font-weight: 700; font-family: 'Outfit', sans-serif; margin-bottom: 1em; font-size: 24px; letter-spacing: -0.5px;}
html{scroll-behavior:smooth;}
.sub{padding-top:0; margin-top:100px;}
.contactUsWrap{display:none !important;}
footer{height:auto;}

/******** 헤더 
header{position: fixed; width: 100%; top: 0; left: 0; padding:3em 3.5em; z-index: 1000; transition:all 0.3s ease;}
header .flex{width: 100%; justify-content: space-between; align-items: center;}
header a{display: block;}
header .logo img{width: 280px; transition:all 0.3s ease;}
header .call{ border: 1px solid #fff; transition: all .3s ease-in-out }
header .call.pc{ border: none; color:#fff; display: flex; align-items: center; justify-content: space-between; font-size:20px; padding-right:1em; font-weight: 800;}
header .call img{width: 60px;padding: 1.3em;}
header .call.pc img{padding: 1em;}
header .call:hover{background: #0cd3cc; border: 1px solid #0cd3cc}
header .call.pc:hover{background: none; border: none}
header .logo_b{display: none}
header .logo_w{display: block}
#header.scroll{background: #fff; padding: 1.5em; border-bottom: 1px solid #e8e8e8}
#header.scroll .logo img{width: 250px}
#header.scroll .logo .logo_b{display: block}
#header.scroll .logo .logo_w{display: none}
#header.scroll .call{background: #0cd3cc; border: 1px solid #0cd3cc}
#header.scroll .call.pc{background: #0cd3cc; border: 1px solid #0cd3cc}

#header .logo{position:relative;}
*********/

/*******푸터
footer{background: #fff; text-align: center; padding: 3em 0}
footer .f_company{font-weight: 700; font-size: 16px; margin-bottom: 10px}
footer .f_txt{font-size: 14px; color:#666666}
footer .f_txt span{color:#b4b4b4}
footer .f_txt span.pc{display: inline-block;}
footer .f_logo{ display: block; width: 216px; margin: 40px auto 0;}
footer .f_logo img{width: 100%}
.flt_fixed{position: fixed; right: 2em; bottom: 2em; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10000}
.flt_fixed a{ display: flex; justify-content: center; align-items: center; cursor: pointer;}
.flt_fixed a.top{background: #f5f5f5; width: 80px; height: 80px; border-radius: 100px; position: relative; z-index: 10; opacity: .8;}
.flt_fixed a.contact{ display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; color:#fff; font-weight: 700; border-radius: 100px; font-size: 18px; font-family: 'Outfit', sans-serif;  ;background: rgb(18,255,176); background: linear-gradient(304deg, rgba(18,255,176,1) 0%, rgba(12,211,204,1) 100%); margin-top: -1em}
*********/

#imagesequence{width: 100%; height: 100%}
#imagesequence img{width: 100% ;; transition: all 1s linear}
#sec1 .wrap{height: 100%; margin: 0 auto}
#sec1.visual{/*background-image: url(../img/sec1_bg.jpg);*/ background: #000; width:100%; height:100vh; background-size: cover; position: relative; overflow: hidden;}
#sec1.visual{background-image: none}
#sec1.visual .source {position: relative;}
#sec1.visual .source img{width: 100%;}
#sec1.visual .source img.pc{display: block;}
#sec1.visual .source img.tablet{display: none}
#sec1.visual .source img.mo{display: none}
#sec1.visual .source::before { content: ''; position: absolute; top: 0; left: 0; width: 8%; height: 27px; background: #000; display: block; z-index: 100; }
#sec1.visual .container.flex{justify-content: space-between;align-items: center; width: 100%; height: 100%}
#sec1.visual .container .flexitem{width: 100%; height: 70vh; text-align: center}
#sec1.visual .container .flexitem img{display: block; text-align: center; margin: 0 auto; width: 100%}
#sec1.visual .container .flexitem img.pc{display: block}
#sec1.visual .container .flexitem img.mo{display: none}
.visual .scroll{ position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, -50%); }
#sec1.visual .scroll a{display: block;}
#sec1.visual .scroll a .scroll_icon{display: flex; gap:15px;; justify-content: center; align-items: center; margin-bottom: 10px;}
#sec1.visual .scroll a span{width: 1px; height: 20px; background: #fff;}
#sec1.visual .scroll a span:nth-child(2){width: 1px; height: 20px; background: #0cd3cc;margin-bottom:-20px; transition: all .3s ease-in-out}
#sec1.visual .scroll a:hover span:nth-child(2){margin-bottom:10px}
#sec1.visual .scroll p{color:#fff;text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-family: 'Outfit', sans-serif; padding-top: 10px}


/***** video *****/
.video_wrap {width:100vw; height:100vh; overflow: hidden; /*padding-bottom:56.25%; */box-sizing:border-box; position:relative;  /*margin: 20px 0;*/ border:0;}
.video_wrap video, .video_wrap iframe, .video_wrap embed {position:absolute; left:0; top:0; width:100%; height:100%; object-fit: cover;   object-position: center; border:0; outline:0;}

.mo .video_wrap{width:100%; height:auto; background:#fff; }
.mo .video_wrap video, .mo .video_wrap iframe, .mo .video_wrap embed{position:relative; left:0; top:0;width:100%; height:100%;}

#sec2{}
#sec2 .wrap { justify-content: center; margin-bottom: 3em; gap: 8em; }
#sec2 h2{font-weight: 800; line-height: 1.2}
#sec2 p{line-height: 1.8; font-weight: 700}
#sec2 .content { width: 55%; }
#sec2 .content ul li{background-image: url('../img/sec_p_bg1.png'); background-size: 100% 100%; background-repeat: no-repeat; padding: 2em 2em 4em; font-size: 20px; font-weight: 700; width: max-content; animation: boxmotion 1.4s infinite ease-in-out alternate; max-width: 100%}
#sec2 .content ul li:nth-child(2){background-image: url('../img/sec_p_bg2.png'); background-size: 100% 100%; background-repeat: no-repeat; padding: 2em 2em 4em; margin: 0 0 0 auto;}
#sec2 .content ul li:nth-child(3){background-image: url('../img/sec_p_bg3.png'); background-size: 100% 100%; background-repeat: no-repeat; padding: 2em 2em 4em;}
#sec2 .content ul li:nth-child(4){background-image: url('../img/sec_p_bg4.png'); background-size: 100% 100%; background-repeat: no-repeat; padding: 2em 2em 4em; margin: 0 6em 0 auto;}
#sec2 .content ul li:nth-child(5){background-image: url('../img/sec_p_bg5.png'); background-size: 100% 100%; background-repeat: no-repeat; padding: 2em 2em 4em;}
#sec2 .content ul li p{ position: relative; z-index: 2; font-size: 20px;}
#sec2 .content ul li span.underline{  position: absolute; bottom: 0; left: 0; width: 0; height:10px; transition: width 0.5s ease; background-color: #ffc34f; z-index: -1;}

#sec3{}
#sec3 .title{text-align: center}
#sec3 .title h2.h_title{font-weight: 800; color: #e9e9e9}
#sec3 .title h2.h_title span{color: #111111}
#sec3 .title h2.h_title +img{padding: 3em 0}
#sec3 .wrap{width: 1200px; padding: 0em; padding-bottom: 7em}
#sec3 .tabs{ display: flex; gap: 40px; align-items: center; }
#sec3 .tab { width: 20%; height: 80px; cursor: pointer; display: flex; align-items: center; justify-content: center; background-size: contain; background-repeat: no-repeat; background-position: center center; }
#sec3 .tab.active{ height: 120px;}
#sec3 .tab:nth-child(1){background-image: url('../img/01_default.png'); }
#sec3 .tab.active:nth-child(1){background-image: url('../img/01.png');}
#sec3 .tab:nth-child(2){background-image: url('../img/02_default.png');}
#sec3 .tab.active:nth-child(2){background-image: url('../img/02.png');}
#sec3 .tab:nth-child(3){background-image: url('../img/03_default.png');}
#sec3 .tab.active:nth-child(3){background-image: url('../img/03.png');}
#sec3 .tab:nth-child(4){background-image: url('../img/04_default.png');}
#sec3 .tab.active:nth-child(4){background-image: url('../img/04.png');}
#sec3 .tab:nth-child(5){background-image: url('../img/05_default.png');}
#sec3 .tab.active:nth-child(5){background-image: url('../img/05.png');}
#sec3 .tab p{background: #bdbdbd; color: #fff; text-align: center;padding: .5em;  font-weight: 700; font-size: 20px; width: 100%}
#sec3 .tab.active p{background: #111; padding: .5em; font-size: 24px}
#sec3 .tab-content { display: none; padding: 8em; margin-top: 10px; border-radius: 20px; box-shadow: 0px 0px 30px #00000014; margin-top: 2em}
#sec3 .tab-content.active { display: block; }
#sec3 .tab-content.active .flex{animation: fadeIn 1s ease;}
#sec3 .tab-content .flex{justify-content: space-between; gap: 4em;}
#sec3 .tab-content .num{transform: skew(-10deg); font-weight: 600; font-size: 22px}
#sec3 .tab-content .tab_txt_tit{color:#0cd3cc; font-weight: 700; margin:.3em 0 1em;}
#sec3 .tab-content .tab_img{width: 40%; text-align: center;}
#sec3 .tab-content .tab_img img{}
#sec3 .tab-content .tab_txt{width: 60%}
#sec3 .tab-content .tab_txt p{font-size: 18px; line-height: 1.7}


#sec4{}
#sec4 .wrap{}
#sec4 .wrap .title{width: 40%}
#sec4 h2{font-weight: 800; line-height: 1.2}
#sec4 p{line-height: 1.8; font-weight: 700}
#sec4 .wrap .content { width: 60%; display: flex; position: relative;}
#sec4 .wrap .content .content_box h5{font-size: 30px; font-weight: 700}
#sec4 .wrap .content .content_box p{font-size: 24px; font-weight: 600}
#sec4 .wrap .content img{ position: absolute; right: 0; top: 70%;width: 100%;  animation: boxmotion 1.4s infinite ease-in-out alternate; }


#sec5{margin-top: 15em }
#sec5 .title{text-align: center}
#sec5 .title h2.h_title{font-weight: 800; color: #e9e9e9; line-height: 1.2}
#sec5 .title h2.h_title span{color: #111111}
#sec5 .wrap{justify-content: center; gap:13em; position: relative; width: 100%;    padding: 10em 0; }
#sec5 .mobileswiper { height: 630px; width: fit-content; max-width: 300px; background-image: url(../img/sec5_img_device.png); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; padding: 10px; position: relative;}
#sec5 .wrap.cont1:after { background-image: url('../img/app_bg1.png'); background-size: 100% 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ''; width: 100%; height: 100%; position: absolute; z-index: -2; top: 0; animation: backgroundmotion 1.4s infinite ease-in-out alternate; }
#sec5 .wrap.cont2:after { background-image: url('../img/app_bg2.png'); background-size: 100% 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ''; width: 100%; height: 100%; position: absolute; z-index: -2; top: 0; animation: backgroundmotion 1.4s infinite ease-in-out alternate; }
#sec5 .wrap.cont3:after { background-image: url('../img/app_bg3.png'); background-size: 100% 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ''; width: 100%; height: 100%; position: absolute; z-index: -2; top: 0; animation: backgroundmotion 1.4s infinite ease-in-out alternate; }
#sec5 .wrap.cont4:after { background-image: url('../img/app_bg4.png'); background-size: 100% 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ''; width: 100%; height: 100%; position: absolute; z-index: -2; top: 0; animation: backgroundmotion 1.4s infinite ease-in-out alternate; }
#sec5 .wrap.cont5:after { background-image: url('../img/app_bg5.png'); background-size: 100% 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ''; width: 100%; height: 100%; position: absolute; z-index: -2; top: 0; animation: backgroundmotion 1.4s infinite ease-in-out alternate; }
#sec5 .wrap.cont6:after { background-image: url('../img/app_bg6.png'); background-size: 100% 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ''; width: 100%; height: 100%; position: absolute; z-index: -2; top: 0; animation: backgroundmotion 1.4s infinite ease-in-out alternate; }
#sec5 .wrap.cont6 .mobileswiper:after{ content: ''; background-image: url('../img/app_bg6_2.png'); width: 400px; height: 400px; display: block; z-index: 100; position: absolute; left: 100px; bottom: -100px; background-repeat: no-repeat; background-size: contain; z-index: -2; }
#sec5 .wrap.cont7:after { background-image: url('../img/app_bg7.png'); background-size: 100% 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; content: ''; width: 100%; height: 100%; position: absolute; z-index: -2; top: 0; animation: backgroundmotion 1.4s infinite ease-in-out alternate; }

#sec5 .mobileswiper .bgtext{position: absolute; left: -40%; top:10%; z-index: -1; height: 540px}
#sec5 .mobileswiper .swiper + .bgtext{position: absolute; left:auto ; right: -40%; top:10%; z-index: -1; height: 540px}
#sec5 .moSwiper { height: 100%; width: 100%;  overflow: hidden; border-radius: 44px;}
#sec5 .moSwiper .mo_notch{position: absolute; z-index: 100; left: 50%; top: 10px; transform: translate(-50%, -0%); width: 40%}
#sec5 .moSwiper .swiper-wrapper{height: 100%; border-radius: 40px; width: 100%;}
#sec5 .swiper-slide { text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; }
#sec5 .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
#sec5 .swipertit{ text-align: center; width: 20%; max-width: 340px; position: relative;}
#sec5 .swipertit h2{font-size: 50px; color: #8a8a8a; font-weight: 700; margin-bottom: 20px}
#sec5 .swipertit ul li{background: #fff; width: 100%;  font-size: 18px; font-weight: 700; border-radius: 10px; height:70px; display: flex; justify-content: center; align-items: center; border: 1px solid #a6a6a6; margin-bottom: 10px; box-shadow: 4px 4px 0 #e2e2e2; cursor:pointer;}
#sec5 .swipertit ul li.active{ font-size: 24px; color:#fff; background: #111111}
#sec5 .swiper-pagination { position: relative; text-align: center; transition: .3s opacity; transform: translate3d(0,0,0); z-index: 10; right: auto !important; top: inherit !important; transform: none !important; }
/*#sec5 .swiper-pagination:before{content:''; background: #eaeaea; width: 10px; height:-webkit-fill-available; border-radius: 100px; display: block; top: 0; position: absolute; left: -50px}*/
#sec5 .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{ width: 100%; display: flex; align-items: center; justify-content: flex-start; border-radius: 0; background: none; background: #fff; width: 100%; font-size: 18px; font-weight: 700; border-radius: 10px; height: 70px; display: flex; justify-content: center; align-items: center; border: 1px solid #a6a6a6; margin-bottom: 10px; box-shadow: 4px 4px 0 #e2e2e2; cursor: pointer; opacity: 1 }
#sec5 .swiper-pagination-bullet-active{font-size: 24px !important; color:#fff; background: #111111 !important; position: relative;}
/*#sec5 .swiper-pagination-bullet-active:before { content: ''; background-image: url(../img/swiperbar.png); display: block; position: absolute; top: 0; left: -59px; width: 30px; height: 80px; background-repeat: no-repeat; background-size: contain; }*/
#sec5 .swiper-pagination.left{ width: 100%; margin: 0 auto;}
/*#sec5 .swiper-pagination.left::before{ content:''; background: #eaeaea; width: 10px; height:-webkit-fill-available; border-radius: 100px; display: block; top: 0; position: absolute; left: inherit; right: -50px }*/
/*#sec5 .swiper-pagination.left .swiper-pagination-bullet-active:before { content: ''; background-image: url(../img/swiperbar.png); display: block; position: absolute; top: 0; left: inherit; right: -59px; width: 30px; height: 80px; background-repeat: no-repeat; background-size: contain; }*/
#sec5 .cont7 .mobileswiper .bgtext{ transform: rotate(180deg);}
#sec5 .cont4 .mobileswiper .bgtext{ transform: rotate(180deg);}
#sec5 .swiper-scrollbar.swiper-scrollbar-vertical, #sec5 .swiper-vertical>.swiper-scrollbar { background: #eaeaea; position: absolute; left: -30%; right: auto; top: 13%; z-index: 50; width: 10px; height: 500px; }
#sec5 .swiper-scrollbar-drag{height: 83.3333px; background: transparent}
#sec5 .swiper-scrollbar-drag:before { content: ''; background-image: url(../img/swiperbar.png); display: block; position: absolute; top: 0; left: -8px; width: 30px; height: 100%; background-repeat: no-repeat; background-size: contain; }
#sec5 .swiper-pagination.left+.swiper-scrollbar.swiper-scrollbar-vertical, #sec5 .swiper-pagination.left+.swiper-vertical>.swiper-scrollbar{ left: auto; right: -30%;}

#sec6{margin-top: 6em }
#sec6 .title{text-align: center}
#sec6 .title h2.h_title{font-weight: 800; color: #e9e9e9; line-height: 1.3}
#sec6 .title h2.h_title span{color: #111111; line-height: 1}
#sec6 .title p{font-size: 20px ; font-weight: 700; margin-top: 2em; line-height: 1.8;}
#sec6 .wrap{padding-top: 40px ; padding-bottom: 0}
#sec6 ul.tabs{ margin: 0px; padding: 0px; list-style: none; display: flex; gap: 12px}
#sec6 ul.tabs li{ font-size: 18px ; position: relative; background: none; color: #222; display: flex; flex-direction: column; align-items: center; justify-content: center ; gap: 14px; padding:3.5em 0.2em 1em; cursor: pointer; text-align: center; width: 10%; margin: 0 auto; border-radius: 20px; background-image: url('../img/sec7_boxbg.jpg'); background-size: 100% 100%; background-repeat: no-repeat; border: 1px solid #dedede; letter-spacing: -1px}
#sec6 ul.tabs li::before{content:'1'; font-size: 14px; border-radius: 100px; height: 40px; width: 40px; background: #111; color:#fff; font-family: 'Outfit' ; display: flex; align-items: center; justify-content: center; position: absolute; top:1em; left: 1em}
#sec6 ul.tabs li:nth-child(2)::before{content:'2';}
#sec6 ul.tabs li:nth-child(3)::before{content:'3';}
#sec6 ul.tabs li:nth-child(4)::before{content:'4';}
#sec6 ul.tabs li:nth-child(5)::before{content:'5';}
#sec6 ul.tabs li:nth-child(6)::before{content:'6';}
#sec6 ul.tabs li:nth-child(7)::before{content:'7';}
#sec6 ul.tabs li:nth-child(8)::before{content:'8';}
#sec6 ul.tabs li:nth-child(9)::before{content:'9';}
#sec6 ul.tabs li:nth-child(10)::before{content:'10';}
#sec6 ul.tabs li.current::before{background: #fff; color: #111}
#sec6 ul.tabs li *{display: block; text-align: center}
#sec6 ul.tabs li.current{ background-image: url('../img/sec7_boxbg_active.jpg'); color:#fff }
#sec6 ul.tabs li img{height: 60px}
#sec6 .tab-content{ display: none; padding: 15px 0; padding: 4em; margin-top: 3em; box-shadow: 0 0 20px #dedede; border-radius: 20px}
#sec6 .tab-content.current{ display: flex; align-items: center; justify-content: space-between; gap:60px}
#sec6 .tab-content .tab_img{width: 50%}
#sec6 .tab-content .tab_img img{width: 100%}
#sec6 .tab-content .tab_txt{ width:50% }
#sec6 .tab-content .tab_txt .num{transform: skew(-10deg); font-weight: 600; font-size: 22px}
#sec6 .tab-content .tab_txt .tab_txt_tit{color:#0cd3cc; font-weight: 700; margin:.3em 0 1em;}
#sec6 .tab-content .tab_txt p{font-size: 18px; margin-bottom: 10px;/* word-break: keep-all;*/ line-height: 2}

#sec7{position: relative;}
#sec7 .wrap{justify-content: space-around ;}
#sec7 .title{width: 50%}
#sec7 .title h2{font-weight: 800; line-height: 1.2}
#sec7 .title p{ font-size: 20px; font-weight: 700; line-height: 1.8; }
#sec7 .right{width: 60%; position: relative;}
#sec7 .right .img_cont{text-align: center;}
#sec7 .right .img_cont img{margin:0 auto;   width: 80%;}
#sec7 .right .img_cont2{position: absolute; top: 0 ; left: 0; width: 100%; height: 100%}

#sec7 .right .img_cont2 img{position: absolute; }
#sec7 .right .img_cont2 img:nth-child(1){ bottom: -60px; left:-100px; width: 130px; animation: boxmotion 1.4s infinite ease-in-out alternate;}
#sec7 .right .img_cont2 img:nth-child(2){ bottom: -60px; left: 50px; width: 130px; animation: boxmotion 1.4s infinite ease-in-out alternate;}
#sec7 .right .img_cont2 img:nth-child(3){top:0px; right:70px; animation: boxmotion 1.4s infinite ease-in-out alternate;}
#sec7 .right .img_cont2 img:nth-child(4) { bottom: 130px; left: -300px; }
#sec7 .right .img_cont2 img:nth-child(5){bottom:-20px; right:0}
#sec7 .right .img_cont2 img:nth-child(6){top:60px; right: 0}
#sec7 .bg1{position: absolute; bottom: -100px; right:100px; z-index: 10}
#sec7 .right .bubble_txt { padding: 4em 4em 4em; background-image: url('../img/bubble_txt_bg1.png'); background-size: 100% 100%; position: absolute; left: -240px; bottom: 20%;background-repeat: no-repeat; width:fit-content}
#sec7 .right .bubble_txt.text2 { background-image: url(../img/bubble_txt_bg3.png); padding: 5em 4em 4em; position: absolute; right: 0; top: 10%; left: auto; height: fit-content; width: max-content;}
#sec7 .right .bubble_txt.text3 { background-image: url(../img/bubble_txt_bg2.png); padding: 5em 5em 4em; width: fit-content; position: absolute; right: 0; bottom: -14%; left: auto; }
#sec7 .right .bubble_txt h3{color:#0cd3cc; margin-bottom: 16px; font-size: 24px}
#sec7 .right .bubble_txt ul li{font-size: 18px; line-height: 2; position: relative; padding-left: 12px; letter-spacing: -1px}
#sec7 .right .bubble_txt ul li::before{content:' · '; position: absolute; left: 0; }

#sec8{background: #f7f7f7; position: relative; min-height: 1080px; overflow: hidden;}
#sec8 .wrap{justify-content: space-between; }
#sec8 .title h2{font-weight: 800; line-height: 1.2}
#sec8 .title p{font-size: 20px; font-weight: 700; line-height: 1.8}
#sec8 .right{position: absolute; width: 1080px; height: 1080px; right: 0; top: 0;}
#sec8 .cicle_tab{position: relative; height: inherit;}
#sec8 .cicle_tab li{position: absolute; transform: scale(1);transition: all 0.3s ease; cursor: pointer;}
#sec8 .cicle_tab li img{ display: block; width: 230px ; transition: all 0.3s ease; }
#sec8 .cicle_tab li img:nth-child(2){ display: none; }
#sec8 .cicle_tab li.active img:nth-child(2) { display: block; transition: all 0.3s ease; width: 250px ;}
#sec8 .cicle_tab li.active img:nth-child(1) { display: none; }
#sec8 .cicle_tab li:nth-child(1) { bottom: 12%; left: -9%; z-index: 10; }
#sec8 .cicle_tab li:nth-child(2) { bottom: 45%; left: -7%; z-index: 10; }
#sec8 .cicle_tab li:nth-child(3) { top: 11%; left: 20%; z-index: 10; }
#sec8 .cicle_tab li:nth-child(4) { top: 16%; right: 22%; z-index: 10; }
#sec8 .right .cicle_tab_content_wrap {top: 41%; background: #fffffffa; border-radius: 1000px 0px 0px 1000px; padding: 6em 0em 6em 11em; position: absolute; right: 0; width: 80%; z-index: 100;    margin-top: 3em; }
#sec8 .right .cicle_tab_content{display: none}
#sec8 .right .cicle_tab_content p{ line-height: 2; font-size: 18px}
#sec8 .right .cicle_tab_content.current{display: block}
#sec8 .cicle_tab li.current {transform: scale(1.2);transition: all 0.2s ease; }
#sec8 .cicle_tab li.current img:nth-child(1){display: none;}
#sec8 .cicle_tab li.current img:nth-child(2){display: block;}
#sec8 .right .cicle_tab_content h3{color: #0cd3cc; font-weight: 700; margin-bottom: 40px}
#sec8 .right .cicle_bg { background-image: url('../img/sec8_cicle.png'); width: 970px; height: 970px; position: absolute; background-size: 100% 100%; z-index: 0; bottom: -90px; right: 15%; z-index: 1; }
#sec8 .bg2{position: absolute; left: 180px; bottom:10%}
#sec8 .bg3{position: absolute; right: 100px; bottom:10%}

#sec9 {padding: 10em 0; overflow: hidden;}
#sec9 .title{text-align: center}
#sec9 .title h2.h_title{font-weight: 800; color: #e9e9e9; line-height: 1.2;}
#sec9 .title h2.h_title span{color: #111111; line-height: 1}
#sec9 .title h2.h_title .count-box{display: inline-block;}
#sec9 .rolling_swiper{margin: 30px 0}
#sec9 .swiper-slide{width: 320px}
#sec9 a.btn{width: 600px; margin: 0 auto; display: block; margin-top: 100px}

#sec10{background-image: url('../img/sec10_bg.jpg'); background-size: 100% 100%}
#sec10 h2{color: #fff; font-weight: 800; font-size: 50px; margin-bottom: 50px}
#sec10 form{color:#fff; background: #292929; border-radius: 20px; border: 1px solid #ddd; padding: 5em;}
#sec10 form h5{font-size: 24px; font-weight: 700; margin-bottom: 10px; color:#fff;}
#sec10 form h5+p{font-size: 16px; opacity: .5}
#sec10 form .guide_bar{background: #3b3b3b; width: 100%; height: 30px; border-radius: 5px; position: relative; margin: 40px 0 70px}
#sec10 form .guide_bar .guide_txt{ position: absolute; width:80%; height: 100%; left:60px; justify-content: flex-end; background: rgb(18,255,176); background: linear-gradient(90deg, rgba(18,255,176,1) 0%, rgba(10,219,204,1) 49%, rgba(0,178,237,1) 72%, rgba(108,0,241,1) 100%);}
#sec10 form .guide_bar .guide_txt::before{content:''; width: 2px ; height:46px; background: #fff; display: block; position: absolute; left:0%; top: 50%; transform: translate(-50%, -50%);}
#sec10 form .guide_bar .guide_txt p{text-align: center; margin-top: -24px; font-weight: 700; font-size: 20px}
#sec10 form .guide_bar .guide_txt p span{color: #7d7d7d; font-size: 16px; display: block;}
#sec10 form .guide_bar .guide_txt p span.price{color: #fff; font-size: 18px}
#sec10 form .guide_bar .guide_txt p::before{content:''; background-image: url('../img/sec10_guide_line1.png'); height:64px; width: 8px; background-size: 100% 100% ; background-repeat: no-repeat; display: block; margin: 0 auto; margin-bottom: 10px}
#sec10 form .guide_bar .guide_txt p:nth-child(2)::before{background-image: url('../img/sec10_guide_line2.png');}
#sec10 form .guide_bar .guide_txt p:nth-child(3)::before{background-image: url('../img/sec10_guide_line3.png');}
#sec10 form .guide_bar .guide_txt p:nth-child(1){position: absolute; left:40%; top:0;}
#sec10 form .guide_bar .guide_txt p:nth-child(2){position: absolute; right:20%; top:0;}
#sec10 form .guide_bar .guide_txt p:last-child{position: absolute; right:0; top:0; margin-right: -47px;}
#sec10 form .form_cont{width: 100% ; margin-top: 8em; }
#sec10 form .form_cont p{font-size: 16px; margin-bottom: 4px}
#sec10 form .form_cont ul{gap:20px; margin-bottom: 20px !important}
#sec10 form .form_cont ul li{width: -webkit-fill-available}
#sec10 form .form_cont ul li .check{width: 100%; padding: 1em; background: #3e3e3e; border-radius: 5px; border: 1px solid #585858}
#sec10 form .form_cont ul li .check:hover{border: 1px solid #2cb9b4}
#sec10 form .check input[type="checkbox"] { -webkit-appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; width: 30px; height: 30px; border-radius: 3px; cursor: pointer; outline: none !important; border: 1px solid #9999; vertical-align: middle; background: #fff }
#sec10 form .check input[type="checkbox"]::before { content: ""; background-image: url('../img/check_g.png'); width: 20px; height: 15px; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: scale(1) translate(-50%, -50%); line-height: 1; }
#sec10 form .check input[type="checkbox"]:checked { background-color: #2cb9b4; color: #fff; border: 1px solid #2cb9b4 }
#sec10 form .check input[type="checkbox"]:checked::before { border-radius: 4px; transform: scale(1) translate(-50%, -50%); background-image: url('../img/check_w.png'); }
#sec10 form .check input[type="checkbox"]:checked + label{color: #2cb9b4}
#sec10 form .check label{font-size: 18px; font-weight: 600; cursor: pointer; margin-left: 10px; line-height: 30px}
#sec10 form .form_cont ul li input[type="text"]{ padding: 1em; height:65px;  background: #3e3e3e; border-radius: 5px; border: 1px solid #585858; width: 100%; font-size: 18px; color: #2cb9b4; font-weight: 700}
#sec10 form .form_cont ul li input[type="text"]:focus{outline: none; border: 1px solid #2cb9b4}
#sec10 form .form_cont ul li input[type="text"]::placeholder{color: #8d8d8d; font-weight: 400}
#sec10 form .form_cont ul li textarea{ padding: 1em; background: #3e3e3e; border-radius: 5px; border: 1px solid #585858; width: 100%; font-size: 18px; color: #2cb9b4; font-weight: 700; height: 300px}
#sec10 form .form_cont ul li textarea:focus{outline: none; border: 1px solid #2cb9b4}
#sec10 form .form_cont ul li textarea::placeholder{color: #8d8d8d; font-weight: 400}
#sec10 form .btn{background: none; background-image: url('../img/form_btn.png'); padding: 1em; width: 300px; height: 90px;  color:#fff; font-size: 24px; font-weight: 700; margin: 0 auto; text-align: center; display: block;}
#sec10 form .filebox{position: relative;}
#sec10 form .filebox .upload-name { display: block; padding: 0 10px; vertical-align: middle; border: 1px solid #dddddd; color: #999999; padding: 1em; background: #3e3e3e; border-radius: 5px; border: 1px solid #585858; width: 100%; font-size: 18px; }
#sec10 form .filebox .upload-name:focus{outline: none; border: 1px solid #2cb9b4}
#sec10 form .filebox .upload-name::placeholder{color: #8d8d8d; font-weight: 400}
#sec10 form .filebox label { position: absolute; right: 10px; top:13px; padding:0; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 5px }
#sec10 form .filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; }
#sec10 form .privacy_check{display: block; width: 100%; text-align: center; margin: 2em auto; }
#sec10 form .privacy_check a{background: #000000; color: #fff; font-size: 12px; border-radius: 4px; padding: 8px}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes boxmotion {
  0% {
      -webkit-transform: translateY(-50%);
      -ms-transform: translatey(-50%);
      transform: translatey(-50%);
  }
  100% {
      -webkit-transform: translateY(-44.5%);
      -ms-transform: translatey(-44.5%);
      transform: translatey(-44.5%);
  }
}

@keyframes boxmotion2 {
  0% {
      -webkit-transform: translateY(-50%);
      -ms-transform: translatey(-50%);
      transform: translatey(-50%);
  }
  100% {
      -webkit-transform: translateY(-44.5%);
      -ms-transform: translatey(-44.5%);
      transform: translatey(-44.5%);
  }
}

@keyframes backgroundmotion{
  0% {
      -webkit-transform: translateY(0%);
      -ms-transform: translatey(0%);
      transform: translatey(0%);
  }
  100% {
      -webkit-transform: translateY(-2.5%);
      -ms-transform: translatey(-2.5%);
      transform: translatey(-2.5%);
  }
}

.modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: -webkit-fill-available; overflow: auto; background-color: rgba(0, 0, 0, 0.9);    justify-content: center; align-items: center; }
.modal-content { background-color: #ffffff40; margin: 0 auto; padding: 5em; border-radius: 20px; border: 1px solid #ffffff69; width: 940px; max-width: 90%; color: #fff; position: relative;}
.modal-content h3{font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 1em}
.modal-content .privacy{height: 520px; overflow-y: scroll; padding-right: 2em}
.modal-content p{font-size: 16px; line-height: 1.8; letter-spacing:-0.1px}
.modal-content p b{font-weight: 800}
.close { color: #aaa; font-size: 28px; font-weight: bold; position: absolute;right: 1em; top:1em;}
.modal-content .privacy::-webkit-scrollbar {
  width: 3px;
}
.modal-content .privacy::-webkit-scrollbar-thumb {
  background-color: #686868;
}
.modal-content .privacy::-webkit-scrollbar-track {
  background-color: #3d3d3d;
}

@media (min-width:1921px) {
  #sec8 .right .cicle_bg{    right: 35%;}
  #sec8 .right .cicle_tab_content_wrap{    width: 100%;}
  #sec8 .cicle_tab li:nth-child(1) { bottom: 13%; left: -29%; z-index: 10; }
  #sec8 .cicle_tab li:nth-child(2) { bottom: 45%; left: -28%; z-index: 10; }
  #sec8 .cicle_tab li:nth-child(3) { top: 13%; left: -2%; z-index: 10; }
  #sec8 .cicle_tab li:nth-child(4) { top: 19%; right: 45%; z-index: 10; }
  #sec10 { background-image: url('../img/sec10_bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
}
@media (max-width:1500px) and (min-width:769px) {
  #sec1.visual .container .flexitem{height: auto}
  .wrap { margin: 0 1em; width: 90%; margin: 0 auto; }
  h2.h_title{font-size: 36px}
  h2{font-size: 30px; margin-bottom: 1em}
  h3{font-size: 24px}
  p{font-size: 14px}

  #sec2 .wrap{gap: 5em;}
  #sec2 .content ul li p{ font-size: 15px;}

  #sec3 .wrap{ width: 90%;}
  #sec3 .tab-content.active .flex{display: block;}
  #sec3 .tab-content .tab_img{width: 100%}
  #sec3 .tab-content .tab_txt{width: 100%; text-align: center;}
  #sec3 .tab-content{padding:3em}
  #sec3 .tabs{gap: 10px;}
  #sec3 .tab p{font-size: 15px;}
  #sec3 .tab.active p{font-size: 18px;}

  #sec5 .wrap{margin: 0; gap: 5em;}
  #sec5 .swipertit{width: auto}
  #sec5 .mobileswiper .bgtext {left: -25%;  height: 340px; }
  #sec5 .mobileswiper .swiper + .bgtext{right: -25%; height: 340px;}
  #sec5 .swiper-scrollbar.swiper-scrollbar-vertical, #sec5 .swiper-vertical>.swiper-scrollbar{left: -19%;}
  #sec5 .swiper-pagination.left+.swiper-scrollbar.swiper-scrollbar-vertical,
  #sec5 .swiper-pagination.left+.swiper-vertical>.swiper-scrollbar{ right: -12%;}
  #sec6 .wrap { padding-top: 40px; padding-bottom: 0; width: 95%; margin: 0 auto; }
  #sec6 ul.tabs{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; display: grid}
  #sec6 ul.tabs li { width: 100%; flex-direction: row; padding: 1em 0em 1em 1em; }
  #sec8 .wrap{display: block; padding-bottom: 0;}
  #sec8 .right { width: 770px; height: 770px; position: relative; margin: -178px 0 auto auto; }
  #sec8 .right .cicle_bg { width: 100%; height: 100%; bottom: 0px; right: 0%; }
  #sec8 .cicle_tab li:nth-child(1) { bottom: 4%; left: 1%; z-index: 10; }
  #sec8 .cicle_tab li:nth-child(2) { bottom: 40%; left: -12%; z-index: 10; }
  #sec8 .cicle_tab li:nth-child(3) { top: -9%; left: 14%; z-index: 10; }
  #sec8 .cicle_tab li:nth-child(4) { top: -10%; right: 16%; z-index: 10; }
  #sec8 .right .cicle_tab_content_wrap { top: 26%; padding: 6em 0em 6em 6em; margin-top: 0; }
  #sec7 .right .bubble_txt ul li{font-size: 16px}
  #sec7 .right .bubble_txt h3{font-size: 20px; margin-bottom: 10px}
  #sec5 .wrap.cont6 .mobileswiper:after{ left: 40px;}
}
@media (max-width:1100px) and (min-width:769px) {
  #sec8 .right { width: 610px; height: 610px; margin: 60px 0 auto auto; }
  #sec8 .cicle_tab li img{width: 180px}
  #sec8 .right .cicle_tab_content_wrap { top: 23%; padding: 4em 0em 4em 5em; margin-top: 0; }
  #sec8 .right .cicle_tab_content h3{ margin-bottom: 10px;}
  #sec8 .right .cicle_tab_content p { line-height: 2; font-size: 16px; }
}
@media (max-width:768px) {
  header{padding: 1em }
  header .logo img{width: 210px; margin-left: 16px}
  #header.scroll .logo img{width: 210px; }
  #header.scroll{padding: 0}
     
  #sangsangsol_logo{left:220px !important; height:60px !important; top:-8px !important;}   
  footer .f_txt{font-size: 13px}
  footer .f_txt span.pc{display: none;}
  .flt_fixed { position: fixed; right: 16px; bottom: 16px}
  .flt_fixed a.top {  width: 50px; height: 50px;}
  .flt_fixed a.top img{width: 10px}
  .flt_fixed a.contact{width: 70px; height: 70px; font-size: 14px;}
  .eng{font-size: 14px; margin-bottom: 0.5em; letter-spacing: -.1px;}
  .modal-content{padding: 2em}
  .modal-content h3 { font-size: 20px; text-align: left}
  .modal-content img{width: 36px}
  .modal-content .privacy { height: 440px; overflow-y: scroll; padding-right: 1em; }
  .modal-content p { font-size: 13px; line-height: 1.8; letter-spacing: -0.1px; }
  h2.h_title{font-size: 40px}
  h2{font-size: 34px; margin-bottom: 1em; line-height: 1.2;}
  h3{font-size: 20px}
  p{font-size: 15px}
     header .call.pc{display: none}
  .pc{display: none}
  .mo{display: block}
  .wrap { width: 100%; padding: 5em 0; margin:0 16px; max-width: -webkit-fill-available; }
  .title h2.h_title + img{ width: 50%; margin-top: 1em; }

  #sec1 .wrap { padding: 10em 0 1em; }
  #sec1.visual{/*background-image: url('../img/sec1_bg_mo.jpg');*/ height: 100%; background-position: center}
  #sec1.visual .container .flexitem{height: 100%; width: 70%; margin: 0 auto}
  #sec1.visual .container .flexitem img.pc{display: none}
  #sec1.visual .container .flexitem img.mo{display: block; width:-webkit-fill-available; height: 100%}
  #sec1.visual .source img.pc{display: none;}
  #sec1.visual .source img.tablet{display: block}
  #sec1.visual .source img.mo{display: none}

  #sec1.visual .scroll{display: none}
  #sec2 .wrap{display: block; text-align: center;}
  #sec2 h2{ font-weight: 700; }
  #sec2 .title p{line-height: 1.8}
  #sec2 .content { width: 70%; margin:0 auto; margin-top: 3em; }
  #sec2 .content ul li{padding: 1.2em 0.8em 2.5em !important; width: max-content;}
  #sec2 .content ul li p{ font-size: 15px;letter-spacing: -1px;}
  #sec2 .content ul li:nth-child(1){}
  #sec2 .content ul li:nth-child(2){width: 90%; max-width: fit-content;}
  #sec2 .content ul li:nth-child(3){}
  #sec2 .content ul li:nth-child(4){ margin: 0 0 0 auto;}
  #sec3 .wrap{padding-bottom: 0}
  #sec3 .tabs{gap: 10px; margin-bottom: 1em}
  #sec3 .tab{height: 30px}
  #sec3 .tab:nth-child(1){background-image: url('../img/01_default_mo.png');}
  #sec3 .tab:nth-child(2){background-image: url('../img/02_default_mo.png');}
  #sec3 .tab:nth-child(3){background-image: url('../img/03_default_mo.png');}
  #sec3 .tab:nth-child(4){background-image: url('../img/04_default_mo.png');}
  #sec3 .tab:nth-child(5){background-image: url('../img/05_default_mo.png');}
  #sec3 .tab.active { height: 50px; width: 34%; }
  #sec3 .tab p{display: none}
  #sec3 .tab.active p{ display: block; font-size: 12px; padding: 3px;}
  #sec3 .tab-content{margin-top: 0; padding: 2em}
  #sec3 .tab-content.active .flex{display: flex;}
  #sec3 .tab-content .tab_img{width: 100%}
  #sec3 .tab-content .tab_img img { width: 70%; height:150px; object-fit: contain; }
  #sec3 .tab-content .tab_txt{width: 100%}
  #sec3 .tab-content .tab_txt_tit {margin: 0em 0 0.5em; }
  #sec3 .tab-content .num{font-size: 20px;}
  #sec3 .tab-content .tab_txt p{font-size: 14px; line-height: 1.7}
  #sec3 .tab-content .tab_txt p br{display: none}
  #sec4 .wrap{display: block}
  #sec4 .wrap .title{width: 100%; text-align: center}
  #sec4 .wrap .title p{line-height: 1.8}
  #sec4 .wrap .content{width: 100%; display: block; margin-top: 4em}
  #sec4 .wrap .content .content_box{display: none}
  #sec4 .wrap .content .mo { animation: boxmotion 1.4s infinite ease-in-out alternate; width: 60%; position: relative; margin: 0 auto; }
  #sec4 h2 { font-weight: 700; }
  #sec5 {overflow: hidden; margin-top: 0}
  #sec5 .wrap{align-items: center ; gap: 10px; flex-direction: column-reverse;}
  #sec5 .wrap.cont1, #sec5 .wrap.cont2,#sec5 .wrap.cont3,#sec5 .wrap.cont4, #sec5 .wrap.cont5, #sec5 .wrap.cont6, #sec5 .wrap.cont7{display: none}
  #sec5 .title h2.h_title span:nth-child(1){font-size: .8em}
  #sec5 .title h2.h_title span{line-height: 1}
  #sec5 .swipertit{width: 100%}
  #sec5 .swiper-pagination{ font-size: 14px !important; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 1em}
  #sec5 .swiper-pagination-bullet-active { font-size: 14px !important; }
  #sec5 .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{width: auto; margin: 0; height: 44px; font-size: 14px}
  #sec5 .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet span{padding: 0 16px; display: block;}
  #sec5 .swiper-pagination-bullet-active:before{display: none;}
  #sec5 .swiper-pagination.left::before{display: none;}
  #sec5 .swiper-pagination.left .swiper-pagination-bullet-active:before{display: none;}
  #sec5 .tab-content .swiper-pagination{bottom: 5%;}
  #sec5 .tab-content .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { height: 10px; width: 10px; background: #e3e3e3; box-shadow: none !important; border: 0}
  #sec5 .tab-content .swiper-pagination-bullet-active{background: #ff0000 !important; }
  #sec5 .wrap.cont2:after, #sec5 .wrap:after{display: none;}
  #sec5 .mocont{margin: 0; padding-top: 2em; padding-bottom: 0}
  #sec5 .mocont .tabs{display: flex; flex-wrap: wrap; gap: 4px; justify-content: center}
  #sec5 .mocont .tabs li{ padding: 12px 20px; font-size: 13px; border-radius: 10px; border: 1px solid #a6a6a6; box-shadow: 2px 2px 0 #ddd;}
  #sec5 .mocont .tabs li.current{background: #111; color:#fff;}
  #sec5 .mocont .tab-content{display: none; padding: 3em 0 7em; width: 100%;  margin-top: 3em; background-size: cover ; background-repeat: no-repeat; background-position: top center}
  #sec5 .mocont .tab-content.current{display: flex; justify-content: center;}
  #sec5 .mocont .mobileswiper { width: 60%; height: 500px; max-width: max-content; }
  #sec5 .moSwiper{ border-radius: 34px;}

  #sec5 .mocont #tab-11:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; top: 20%; left: 0; z-index: -2; animation: backgroundmotion 2.4s infinite ease-in-out alternate; background-repeat: no-repeat; background-image: url('../img/sec5_1_bg_mo.png'); background-position:center;}
  #sec5 .mocont #tab-12:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; top: 20%; left: 0; z-index: -2; animation: backgroundmotion 2.4s infinite ease-in-out alternate; background-repeat: no-repeat; background-image: url('../img/sec5_2_bg_mo.png'); background-position:center;}
  #sec5 .mocont #tab-13:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; top: 20%; left: 0; z-index: -2; animation: backgroundmotion 2.4s infinite ease-in-out alternate; background-repeat: no-repeat; background-image: url('../img/sec5_3_bg_mo.png'); background-position:center;}
  #sec5 .mocont #tab-14:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; top: 20%; left: 0; z-index: -2; animation: backgroundmotion 2.4s infinite ease-in-out alternate; background-repeat: no-repeat; background-image: url('../img/sec5_4_bg_mo.png'); background-position:center;}
  #sec5 .mocont #tab-15:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; top: 20%; left: 0; z-index: -2; animation: backgroundmotion 2.4s infinite ease-in-out alternate; background-repeat: no-repeat; background-image: url('../img/sec5_5_bg_mo.png'); background-position:center;}
  #sec5 .mocont #tab-16:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; top: 20%; left: 0; z-index: -2; animation: backgroundmotion 2.4s infinite ease-in-out alternate; background-repeat: no-repeat; background-image: url('../img/sec5_6_bg_mo.png'); background-position:center;}
  #sec5 .mocont #tab-17:after{content: ''; display: block; width: 100%; height: 100%; position: absolute; background-size: contain; top: 20%; left: 0; z-index: -2; animation: backgroundmotion 2.4s infinite ease-in-out alternate; background-repeat: no-repeat; background-image: url('../img/sec5_7_bg_mo.png'); background-position:center;}

  #sec6{margin: 0; padding: 6em 0 0}
  #sec6 .container{}
  #sec6 .wrap{margin:0}
  #sec6 .tabcontainer{width: 100%; overflow-x: scroll;}
  #sec6 ul.tabs { gap: 10px;  display: flex; width: 1400px;  margin-left: 16px ;}
  #sec6 ul.tabs li { font-size: 16px; padding: 3.5em 0.2em 2em}
  #sec6 .tab-content{ flex-direction: column; gap: 10px !important; padding: 1.5em; margin: 0 16px; margin-top: 1em}
  #sec6 .tab-content .tab_img{width: 100%}
  #sec6 .tab-content .tab_txt{width: 100%; padding: 8px}
  #sec6 .tab-content .tab_txt .tab_txt_tit{ margin: 0.3em 0 0.5em;}
  #sec6 .tab-content .tab_txt .num{ line-height: 1; font-size: 17px; font-weight: 900;}
  #sec6 .tab-content .tab_txt p{font-size: 14px;}
  #sec6 .tab-content .tab_txt p br{display: none}

  #sec7 .wrap{flex-direction: column;}
  #sec7 .title p{font-size: 15px; font-weight: 500;     line-height: 1.8;}
  #sec7 .right {width:100%; position: relative; margin: 0 auto; text-align: center; margin-top: 3em }
  #sec7 .right .img_cont img { width: 100%; margin: 0; padding-left: 5em; }
  #sec7 .right .img_cont2{display: none}
  #sec7 .img_pointer{ width: 100%; position: absolute; top: 0; left: 0; height: 100%}
  #sec7 .img_pointer .tabs{height: 100%}
  #sec7 .img_pointer .tabs li img{width: 45px; animation: flash 0.4s infinite ease-in-out alternate;}
  #sec7 .img_pointer .tabs li:nth-child(1) { position: absolute; left: 20%; top: 51%; }
  #sec7 .img_pointer .tabs li:nth-child(2){position: absolute; right: 21%; top: 6%; }
  #sec7 .img_pointer .tabs li:nth-child(3) { position: absolute; right: 22%; bottom: 12%; }
  #sec7 .img_pointer .tab-content { display: none; position: absolute; width: 100%; height: initial; top: 0; left: 0}
  #sec7 .img_pointer .tab-content img { width: 70%; max-width: 240px; position: absolute; }
  #sec7 .img_pointer #tab-22 img {left: 13%; top: 0; }
  #sec7 .img_pointer #tab-23 img {left: 0%; top: 60px;}
  #sec7 .img_pointer #tab-24 img {right: 28%; bottom: -310px;}
  #sec7 .img_pointer .tab-content.current{display: block; width: auto}
  #sec7 .right .bubble_txt ul li{font-size: 16px}
  #sec7 .right .bubble_txt h3{font-size: 20px; margin-bottom: 10px}
  #sec7 .right .bubble_txt { padding: 3em 3em 3.5em; background-image: url('../img/bubble_txt_bg1_mo.png'); background-size: 100% 100%; position: initial; text-align: left; }
  #sec7 .right .bubble_txt.text2 { background-image: url(../img/bubble_txt_bg2_mo.png); padding: 5em 4em 4em; position: initial; }
  #sec7 .right .bubble_txt.text3 { background-image: url(../img/bubble_txt_bg3_mo.png); padding: 5em 4em 7em; width: fit-content; position: initial; }
  #sec7 .right #tab-22 { bottom: 0; height: fit-content; left: 12%; position: inherit; top: 12%; }
  #sec7 .right #tab-23 { right: 11%; left: auto; top: 17%; }
  #sec7 .right #tab-24 { right: 10%; left: auto; }
  #sec8 { background-image: url('../img/sec8_bg_mo.jpg'); background-size: contain; background-repeat: no-repeat; background-position: top; height: auto; min-height: auto}
  #sec8 .wrap{padding-bottom: 1em}
  #sec8 .title p{font-size: 15px; font-weight: 500}
  #sec7 .title{width:100%}
  #sec8 .good_tab{}
  #sec8 .good_tab .tabs { display: grid; flex-wrap: wrap; gap: 4px; justify-content: center; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 0 16px; }
  #sec8 .good_tab .tabs li{ background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; font-size: 13px; border-radius: 10px; border: 1px solid #a6a6a6; box-shadow: 2px 2px 0 #ddd; text-align: center; font-weight: 700}
  #sec8 .good_tab .tabs li.current{background: #111; color:#fff;}
  #sec8 .good_tab .tab-content { display: none; padding: 3em 2em 7em; width: 100%; margin-top: 3em; background-size: cover; background-repeat: no-repeat; background-position: center; word-break: keep-all; }
  #sec8 .good_tab .tab-content.current{display: block; text-align: center; margin: 0 auto}
  #sec8 .good_tab .tab-content img{width: 50%}
  #sec8 .good_tab .tab-content h3{color:#0cd3cc; font-weight: 700; margin-bottom: 10px}
  #sec8 .good_tab .tab-content p { font-size: 14px; line-height: 1.8; }

  #sec9{ padding: 6em 0 5em;}
  #sec9 .swiper-slide { width: 150px; }
  #sec9 .swiper-slide img{width : 100%}
  #sec9 a.btn{width: 80%; margin-top: 2em;}
  #sec9 a.btn img{width: 100%}
  #sec9 .title h2.h_title:nth-child(2){ font-size: 30px;}

  #sec10 { background-image: url(../img/sec10_bg_mo.jpg); background-size: cover; background-repeat: no-repeat; }
  #sec10 h2{font-size: 26px; margin-bottom: 1em; }
  #sec10 form { color: #fff; background: #9a9a9a29; padding: 1.5em; }
  #sec10 .guide_mo{width: 100%; margin-top: 2em}
  #sec10 .guide_mo img{width: 100%; margin-bottom:2em}
  #sec10 form h5{font-size: 15px}
  #sec10 form h5 span{font-weight: 300}
  #sec10 form h5+p{font-size: 12px}
  #sec10 form .form_cont{margin-top: 3em}
  #sec10 form .form_cont ul{flex-wrap: wrap; gap: 10px; }
  #sec10 form .form_cont ul li{width: 48%;}
  #sec10 form .form_cont ul li .check{padding: 10px}
  #sec10 form .form_cont .fp_2 li,
  #sec10 form .form_cont .fp_3 li,
  #sec10 form .form_cont .fp_4 li,
  #sec10 form .form_cont .fp_5 li,
  #sec10 form .form_cont .fp_6 li{width: 100%; margin-bottom:0.5em}
  #sec10 form .form_cont ul li input[type="text"],
  #sec10 form .form_cont ul li textarea,
  #sec10 form .check label,
  #sec10 form .filebox .upload-name{font-size: 14px}
  #sec10 form .check label{font-size: 12px}
  #sec10 form .form_cont ul li input[type="text"]{padding: 10px}
  #sec10 form .filebox label{ height: 30px; width: 30px; top: 10px; padding: 10px 10px;}
  #sec10 form .form_cont ul li textarea{height: 230px}
  #sec10 form .privacy_check label{font-size: 13px}
  #sec10 form .form_cont p{margin-bottom: 10px; font-size: 14px}
  #sec10 form .check label{margin-left: 0px; line-height: 1.5}
  #sec10 form .check input[type="checkbox"]{ width: 20px; height: 20px;}
  #sec10 form .check input[type="checkbox"]::before { width: 14px; height: 14px; background-size: contain; background-position: center center; background-repeat: no-repeat; position: absolute; }
  #sec10 form .btn{max-width: 100%; width: 80%; height: 50px; background-size: contain ; background-position: center center; background-repeat: no-repeat; padding: 0; font-size:17px}
  #sec10 form .privacy_check a { font-size: 10px; border-radius: 4px; padding: 5px; display: inline-block;}
  @keyframes flash {
    0% {
      opacity: .5
    }
    100% {
      opacity: 1
    }
  }
  @keyframes boxmotion {
    0% {
        -webkit-transform: translateY(-0%);
        -ms-transform: translatey(-0%);
        transform: translatey(-0%);
    }
    100% {
        -webkit-transform: translateY(-4.5%);
        -ms-transform: translatey(-4.5%);
        transform: translatey(-4.5%);
    }
  }
}

@media (max-width: 500px) {
#sec1.visual .source img.pc{display: none;}
#sec1.visual .source img.tablet{display: none}
#sec1.visual .source img.mo{display: block}
#sec2 .wrap{ text-align: left;}
#sec2 .content { width: 100%;}
#sec3 .tab-content.active .flex{display: block}
#sec4 .wrap .title{width: 100%; text-align: left;}
#sec4 .wrap .content .mo { animation: boxmotion 1.4s infinite ease-in-out alternate; width: 100%; position: relative; }
#sec5 .mocont #tab-11:after{background-position:unset;}
#sec5 .mocont #tab-12:after{background-position:unset; top: 26%;}
#sec5 .mocont #tab-13:after{background-position:unset; top: 26%;}
#sec5 .mocont #tab-14:after{background-position:unset; top: 26%;}
#sec5 .mocont #tab-15:after{background-position:unset; top: 26%;}
#sec5 .mocont #tab-16:after{background-position:unset; top: 26%;}
#sec5 .mocont #tab-17:after{background-position:unset; top: 26%;}

#sec3 .tab-content .tab_img img { width: 70%; margin-bottom: 20px; height: 140px; object-fit: contain; }
#sec7 .right .img_cont img{    padding-left: 2em;}
#sec7 .img_pointer .tabs li:nth-child(1) { position: absolute; left: 12%; top: 51%; }
#sec7 .right #tab-22 { top: -1%; }
#sec7 .right #tab-24 { right: 3%; left: auto; top: auto; bottom: 15%; }
#sec7 .right .bubble_txt ul li { font-size: 14px; line-height: 1.4; padding-left: 9px; margin-bottom: 10px}
#sec7 .right .bubble_txt { padding: 3em 2.5em 3.5em; }
#sec7 .right .bubble_txt.text2 { padding: 4.5em 3em 3.5em; }
#sec7 .right .bubble_txt.text3 { padding: 5em 3em 6em; width: max-content; }

     .mo .video_wrap{width:120%; margin-left:-10%;}
     header .logo img{margin-left:0; width:200px;}
     header .call img{width:46px; padding:1rem;}
     
     #sangsangsol_logo{left:208px !important; height:50px !important; top:-5px !important;}   

}

@media (max-width: 320px) {
  #sec10 form {  padding: 1em; }
  #sec5 .mocont .mobileswiper{    width: 100%;}
  #sec5 .mocont #tab-11:after{    top: 28%;}
  #sec7 .right .bubble_txt{width: fit-content;}
}