@charset "utf-8";/* font */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');/* default */
* {margin:0;padding:0;border:0;} 
html, body {width:100%;height: 100%;-webkit-overflow-scrolling: touch;} 
html,
body,
*,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;box-sizing: border-box;word-break:keep-all;} 
ul, ol, li {list-style: none;} 
body {overflow-x: hidden;} 
.jj_wrap {text-align: center;} 
.contents_area {overflow-x: auto !important;}

.jj_wrap .bg {width: 100%;} 
.jj_wrap .inn {max-width: 1903px;margin: 0 auto;position: relative;display: flex;} 
.jj_wrap .inn>img {width: 100%;} 
.jj_wrap a {text-decoration:none;display: inline-block;} 
.areatit {font-size: 48px;line-height: 1;text-align: left;width: 100%;max-width: 1110px;margin: 0 auto 20px;font-weight: 800;} 

/* 로그인 - start */

.jj_wrap em {position:absolute;font-style:normal;top:0.3%;right:3.9%;} 

.jj_wrap em a {color: #5e19cb; font-weight: 800;font-size:15px;}
/* .jj_wrap em a svg.svg-inline--fa.fa-right-to-bracket {width: 30px;display: block;position: relative;left: 4px; color: #5e19cb;} */
.jj_wrap em a svg.svg-inline--fa.fa-right-to-bracket {display: block;position: relative;left: 5px;}
.login_btn {max-width: 1280px;margin: 0 auto;position: relative;right: 0;top: 30px;z-index: 1;}

.text_log_in{display: flex;     align-items: flex-end;}
.text_log_in > a:first-child{margin-right: 20px;}
/* .text_log_in > a:first-child img{display: block; margin: 0 auto;} */
/* .text_log_in > a:first-child svg{display: block;width: 35px;fill: #5e19cb;margin: 0 auto;} */
.text_log_in > a:first-child svg{display: block;margin: 0 auto;position: relative;left:3px; }

/* 로그인 - end */

/* AI 기반 균형 - 미래교육의 핵심 */

.jj_wrap .top_cont .inn {display: block;font-size: 0;}

.block002 {height: 1736px;overflow-x:hidden;} 
.block002 .inn {position:relative;height: 100%;} 
.block002 .inn > img {position:absolute;left: 50%;top: 0;height: 100%;width: 100%;min-width:1903px;object-position:top;object-fit: contain;transform:translateX(-50%);} 

.block002 .contents_area {position: relative;z-index: 1;top: 1123px;}

.tab_area.AI {width: 981px;margin: 0 auto;}
.tab_area.AI .tabs {height: 547px;}

.tab_area.AI .tab_list{position: absolute;top:0;cursor: pointer;}

.tab_area.AI .btn_area{position: relative;display: inline-block;height: 138px;}

.tab_area.AI .tab_btn{display: block;width: 262px;height: 138px;text-indent: -9999em;position: absolute;}
.tab_area.AI .tab_btn.a{background: url(../img/tab/btn_AI.png) no-repeat center;right: 0; z-index: 1;}
.tab_area.AI .tab_btn.b{background: url(../img/tab/btn_bal.png) no-repeat center;left: 0;}

.tab_area.AI .tab_list.active .tab_btn.a, .tab_area.AI .tab_btn.a:hover{background: url(../img/tab/btn_AI_on.png) no-repeat center;}
.tab_area.AI .tab_list.active .tab_btn.b, .tab_area.AI .tab_btn.b:hover{background: url(../img/tab/btn_bal_on.png) no-repeat center;}

.tab_area.AI .tab_contents {width: 981px;height: 377px;}
.tab_area.AI .tab_contents img {display: none;}
.tab_area.AI .tab_list.active .tab_contents img {display: block;}



/* block */
.jj_wrap .block01 {padding: 200px 0 40px;margin-bottom: 180px;overflow: hidden;} 
.jj_wrap .block01 h1 {font-size: 85px;font-family: 'Noto Sans KR';font-weight: 900;margin-bottom: 120px;} 

.contens .inn .mo{display: none;}

/* 첫번째 슬라이드 : 키즈엠 교육 프로그램을 추천합니다 - start */
.rcm_slide_area {position: relative;z-index: 1;height: 670px;display: flex;flex-direction: column;gap: 115px 0;} 
.rcm_slide_area [class*="slideWrap"] {overflow-x: initial;overflow: initial;} 
.rcm_slide_area [class*="slideWrap"] .rcm_area {transition-timing-function: linear !important;position: relative;display:flex;width: auto;flex-direction: row;overflow: initial;} 
.rcm_slide_area [class*="slideWrap"] .rcm_area .rcm_list {width:638px;height:278px;} 
.rcm_slide_area [class*="slideWrap"] .rcm_area .rcm_list img {width:100%;height:100%;} 

.rcm_list {box-shadow: 2px 4px 40px 0 rgba(0,0,0,.2);}
.rcm_list{margin: 0 15px;}
/* 첫번째 슬라이드 : 키즈엠 교육 프로그램을 추천합니다 - end */

/* sticy nav */
/* .jj_wrap .nav_area {max-width: 973px;margin: 0 auto;height: max-content;position: sticky;top: 0;z-index: 9999;}  */
.jj_wrap .nav_area {max-width: 100%;height: max-content;position: sticky;top: 0;z-index: 9999;;background: linear-gradient(to bottom, #ffffffc7, #ffffffc7, #ffffffc7, #ffffff9c, #ffffff00);}

.jj_wrap .nav_area + div {margin-top: 120px;} 
.jj_wrap .nav_list {display: flex;padding: 30px 0 50px;width: 100%;width: 900px;margin: 0 auto;} 
.jj_wrap .nav {width: 100%;height: 160px;} 
.jj_wrap .nav a {cursor: pointer;display: block;width: 100%;height: 100%;text-indent: -9999999px;} 
.nav.kr {background: url(../img/nav/kr.webp) no-repeat center;background-size: contain;}
.nav.book {background: url(../img/nav/book.webp) no-repeat center;background-size: contain;}
.nav.en {background: url(../img/nav/en.webp) no-repeat center;background-size: contain;}
.nav.play {background: url(../img/nav/play.webp) no-repeat center;background-size: contain;}
.nav.kr.active {background: url(../img/nav/kr_on.webp) no-repeat center;background-size: contain;}
.nav.book.active {background: url(../img/nav/book_on.webp) no-repeat center;background-size: contain;}
.nav.en.active {background: url(../img/nav/en_on.webp) no-repeat center;background-size: contain;}
.nav.play.active {background: url(../img/nav/play_on.webp) no-repeat center;background-size: contain;}
/* sticy nav - end */




/* 영상: 한글 어드벤처 - start */



.block03:nth-child(1) {height: 375px;overflow-x:hidden;} 
.block03:nth-child(2) {height: 1690px;overflow-x:hidden;} 
.block03 .inn {position:relative;height: 100%;} 
.block03 .inn > img {position:absolute;left: 50%;top: 0;height: 100%;width: 100%;min-width:1903px;object-position:top;object-fit: contain;transform:translateX(-50%);} 


.video_area {position: absolute;bottom: 20%;left: 0;right: 0;} 
.video_inn {position: relative;margin: 0 auto;max-width: 100%;height: auto;} 
.video_inn::before {display: block;content: '';width: 100%;height: calc(100% + 27px);background: url(../img/video/video_frame.webp) no-repeat center;position: absolute;left: 0;right: 0;bottom: 3px;background-size: contain;} 
.video_area .video {border-radius: 16px;overflow: hidden;z-index: 1;position: relative;} 


/* 영상: 한글 어드벤처 - end */



/* block05 */
.block05 {height:789px;} 
.block05 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block05 .inn > img {position:absolute;left: 0;top: 0;height: 100%;width: 100%;object-position: center;object-fit: contain;} 
.block05 .inn .contents_area {position: relative;z-index: 1;width: 100%;} 
.block05 .inn .contents_area .contens_inn {padding:0 20px;} 
.block05 .tap_box > ul .tap_btn_group > a:hover {background-color: #7091ca;border-color: #5681c1;} 
.block05 .tap_box > ul .tap_btn_group > a.active {background-color: #7091ca;border-color: #5681c1;} 
.block05 [class*="tabSlideWrap"] {background: #7091ca;} 

/* 탭 공통 - start */
.tap_box {width: 100%;max-width: 1110px;margin: 0 auto;} 
.tap_box > ul {display: flex;flex-direction: row-reverse;gap: 0 50px;align-items: center;} 
.tap_box > ul .tap_btn_group {width: 100%;max-width: 365px;display: flex;flex-direction: column;gap: 30px 0;} 
.tap_box > ul .tap_btn_group > a {display: flex;width: 100%;height: 120px;font-size: 24px;color: #ffffff;font-weight: 700;background-color: #9e9e9e;border-bottom: 8px solid #909090;border-radius: 24px;letter-spacing: -0.075em;transition: all .2s ease-in-out;justify-content: center;align-items: center;} 
.tap_box .tap_cont_group {width: 100%;max-width: 695px;height: 470px;overflow: hidden;box-shadow: 0px 2px 11px rgb(151 151 151 / 42%);border-radius: 16px;} 
.tap_box .tap_cont_group > div {opacity: 0;height: 0px;pointer-events: none;} 
.tap_box .tap_cont_group > div.active {height:100%;pointer-events: initial;opacity: 1;} 
.tap_box .tap_cont_group .tab_cont {margin-left: auto;margin-right: auto;position: relative;overflow: hidden;list-style: none;padding: 0;z-index: 1;display: block;} 
.tap_box .tap_cont_group .tab_cont .swiper-wrapper {} 
.tap_box .tap_cont_group .tab_cont .swiper-wrapper .swiper-slide {} 
.tap_box .tap_cont_group .tab_cont .swiper-wrapper .swiper-slide img {width:100%;height: 100%;object-fit: contain;object-position: center center;} 
/* 탭 공통 - end */

.swiper-slide.tabSlideWrap01_01 {background: #e5e8f5;} 
.swiper-slide.tabSlideWrap01_02 {background: #fff;} 
.swiper-slide.tabSlideWrap01_03 {background: #fdeef2;} 
[class*="tabSlideWrap"] {overflow:initial;height: 100%;display: flex;align-items: center;justify-content: center;padding: 10px;border-radius: 15px;} 
.swiper-container[class*="tabSlideWrap"] {border: 5px solid #fff;} 
.swiper-container[class*="tabSlideWrap"] .swiper-wrapper {overflow:initial;} 
.swiper-slide[class*="tabSlideWrap"] {border:0;border-radius: 0;width: 100%;padding: 0;} 
.swiper-slide[class*="tabSlideWrap"] img {width:100%;height:100%;object-fit:contain;object-position:center center;} 


/* 탭:한글어드벤처 - start */
.kr .tab a:hover, .kr .tab.on a {background-color: #7091ca;border-color: #5681c1;} 
.kr .tab.c {line-height: normal;line-height: normal;} 
.kr .tab.c em {bottom: -5px;} 
/* 탭:한글어드벤처 - end */

/* 독서 - start */
.book .tab a:hover, .book .tab.on a {background-color: #383b8a;border-color: #2e347c;} 
.block12 .areatit {color: #383b8a;} 
.block12 {height:876px;} 
.block12 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block12 .inn > img {position:absolute;left: 0;top: 0;height: 100%;width: 100%;object-position: center;object-fit: contain;} 
.block12 .inn .contents_area {position: relative;z-index: 1;width: 100%;} 
.block12 .inn .contents_area .contens_inn {padding:0 20px;} 
.block12 .tap_box > ul .tap_btn_group > a:hover {background-color: #383b8a;border-color: #2e347c;} 
.block12 .tap_box > ul .tap_btn_group > a.active {background-color: #383b8a;border-color: #2e347c;} 
.block12 [class*="tabSlideWrap"] {background: #5cd3d7;} 
/* 독서 - end */

/* block13 */
.block13 .areatit {color: #c09ecf;} 
.block13 {height:876px;} 
.block13 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block13 .inn > img {position:absolute;left: 0;top: 0;height: 100%;width: 100%;object-position: center;object-fit: contain;} 
.block13 .inn .contents_area {position: relative;z-index: 1;width: 100%;} 
.block13 .inn .contents_area .contens_inn {padding:0 20px;} 
.block13 .tap_box > ul .tap_btn_group > a:hover {background-color: #7091ca;border-color: #5681c1;} 
.block13 .tap_box > ul .tap_btn_group > a.active {background-color: #7091ca;border-color: #5681c1;} 
.block13 [class*="tabSlideWrap"] {background: #e8d0f3;} 

/* 책보플러스 - start */
.block17 {height:876px;} 
.block17 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block17 .inn > img {position:absolute;left: 0;top: 0;height: 100%;width: 100%;object-position: center;object-fit: contain;} 
.block17 .inn .contents_area {position: relative;z-index: 1;width: 100%;} 
.block17 .inn .contents_area .contens_inn {padding:0 20px;} 
.block17 .tap_box > ul .tap_btn_group {gap:15px 0;} 
.block17 .tap_box > ul .tap_btn_group > a {height:103px;} 
.block17 .tap_box > ul .tap_btn_group > a:hover {background-color: #3eb359;border-color: #28a53f;} 
.block17 .tap_box > ul .tap_btn_group > a.active {background-color: #3eb359;border-color: #28a53f;} 
.block17 [class*="tabSlideWrap"] {background: #46c476;} 
/* 책보플러스 - end */

/* block21 */
.block21 {position:relative;} 
.block21 .video_area {bottom: initial;top: 50%;transform: translateY(-50%);} 

.block21 {height: 921px;overflow-x:hidden;} 
.block21 .inn {position:relative;height: 100%;} 
.block21 .inn > img {position:absolute;left: 50%;top: 0;height: 100%;width: 100%;min-width:1903px;object-position:top;object-fit: contain;transform:translateX(-50%);} 


.video_area {position: absolute;bottom: 20%;left: 0;right: 0;} 
.video_inn {position: relative;margin: 0 auto;max-width: 100%;height: auto;} 
.video_inn::before {display: block;content: '';width: 100%;height: calc(100% + 20px);background: url(../img/video/video_frame.webp) no-repeat center;position: absolute;left: 0;right: 0;bottom: -7px;background-size: contain;} 
.video_area .video {border-radius: 16px;overflow: hidden;z-index: 1;position: relative;width: 1085px;
    height: 611px;} 



/* 잉글리시크레용 - start */
.block25 {height:876px;} 
.block25 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block25 .inn > img {position:absolute;left: 0;top: 0;height: 100%;width: 100%;object-position: center;object-fit: contain;} 
.block25 .inn .contents_area {position: relative;z-index: 1;width: 100%;} 
.block25 .inn .contents_area .contens_inn {padding:0 20px;} 
.block25 .tap_box > ul .tap_btn_group {gap:15px 0;} 
.block25 .tap_box > ul .tap_btn_group > a {height:103px;} 
.block25 .tap_box > ul .tap_btn_group > a:hover {background-color: #ef4c79;border-color: #e04474;} 
.block25 .tap_box > ul .tap_btn_group > a.active {background-color: #ef4c79;border-color: #e04474;} 
.block25 [class*="tabSlideWrap"] {background: #ef4c79;} 
/* 잉글리시크레용 - end */

/* 플레이콩 - start */
.block31 {height:1055px;} 
.block31 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block31 .inn > img {position:absolute;left: 0;top: 0;height: 100%;width: 100%;object-position: center;object-fit: contain;} 
.block31 .inn .contents_area {position: relative;z-index: 1;width: 100%;} 
.block31 .inn .contents_area .contens_inn {padding:0 20px;} 
.block31 .tap_box > ul .tap_btn_group {gap:15px 0;} 
.block31 .tap_box > ul .tap_btn_group > a {height:103px;} 
.block31 .tap_box > ul .tap_btn_group > a:hover {background-color: #ef834c;border-color: #e07444;} 
.block31 .tap_box > ul .tap_btn_group > a.active {background-color: #ef834c;border-color: #e07444;} 
.block31 [class*="tabSlideWrap"] {background: #ee834c;} 
/* 플레이콩 - end */

/* block32 */
.block32 {height: 1590px;overflow-x:hidden;} 
.block32 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block32 .inn > img {position:absolute;left: 50%;top: 0;height: 100%;width: 100%;min-width:1903px;object-position:top;object-fit: contain;transform:translateX(-50%);} 

.block32 .inn .contents_area {position: relative;z-index: 1;width: 100%;} 
.block32 .inn .contents_area .contens_inn {padding:0 20px;} 
.block32 .inn .contents_area .contens_inn .tap_box {padding-top:130px;max-width: 968px;} 
.block32 .inn .contents_area .contens_inn .tap_box ul {display: flex;flex-direction: column;gap: 60px 0;justify-content: flex-end;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li {display: flex;flex-wrap: wrap;flex-direction: row;max-width: 100%;gap: 30px 45px;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a {width: calc((100% / 4) - 34px);height: 88px;text-indent: -999999px;background: none;border-radius: 0;border-bottom: 0;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(1) {width: 100%;background: url(../img/screenshot/btn/btn00.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(2) {background: url(../img/screenshot/btn/btn01.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(3) {background: url(../img/screenshot/btn/btn02.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(4) {background: url(../img/screenshot/btn/btn03.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(5) {background: url(../img/screenshot/btn/btn04.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(6) {background: url(../img/screenshot/btn/btn05.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(7) {background: url(../img/screenshot/btn/btn06.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(8) {background: url(../img/screenshot/btn/btn07.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(9) {background: url(../img/screenshot/btn/btn08.webp)center center/contain no-repeat;} 

.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(2):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(2) {background: url(../img/screenshot/btn/btn01_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(3):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(3) {background: url(../img/screenshot/btn/btn02_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(4):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(4) {background: url(../img/screenshot/btn/btn03_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(5):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(5) {background: url(../img/screenshot/btn/btn04_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(6):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(6) {background: url(../img/screenshot/btn/btn05_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(7):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(7) {background: url(../img/screenshot/btn/btn06_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(8):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(8) {background: url(../img/screenshot/btn/btn07_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(9):hover,
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(9) {background: url(../img/screenshot/btn/btn08_on.webp)center center/contain no-repeat;} 
.block32 .inn .contents_area .contens_inn .tap_box>ul>li a {width: calc((100% / 4) - 34px);height: 88px; gap: 0;background:url(../img/screenshot/frame.webp)center center/contain no-repeat;padding: 20px 14px;overflow:hidden;} 
.block32 .inn .contents_area .contens_inn .tap_box .tap_cont_group > div .screenshot_cont {width:100%;height:100%;display: inline-block;overflow: hidden;border-radius: 18px;} 
.block32 .inn .contents_area .contens_inn .tap_box .tap_cont_group > div .screenshot_cont img {width:100%;height:auto;} 



/* block33 */
.block33 {height: 1393px;overflow-x:hidden;} 
.block34 {height: 197px;overflow-x:hidden;} 
.block34 .inn, .block33 .inn {position:relative;height: 100%;display: flex;justify-content: center;align-items: center;} 
.block34 .inn > img, .block33 .inn > img {position:absolute;left: 50%;top: 0;height: 100%;width: 100%;min-width:1903px;object-position:top;object-fit: contain;transform:translateX(-50%);} 



.call_btn a {  
    left: 50%;
    display: inline-block;
    width: 820px;
    height: 110px;
    position: absolute;
    margin-left: -412px;
    font-size: 0;}
.call_btn {position: absolute;left: 0;right: 0;bottom: 333px;}
.block05 {height:789px;} 

/* block34 */


/* background color - start*/

.jj_wrap .top_cont .bg:nth-child(1) {background: #a6ecfb;} 
.jj_wrap .top_cont .bg:nth-child(2) {background: #792cf2;} 
.jj_wrap .top_cont .bg:nth-child(3) {background: #fff5d9;} 
.jj_wrap .top_cont .bg:nth-child(4) {background: #ffffff;} 
.jj_wrap .top_cont .bg:nth-child(5) {background: #f5ff89;} 
.jj_wrap .top_cont .bg:nth-child(6) {background: #ffdc62;} 
.jj_wrap .top_cont .bg:nth-child(7) {background: #fff5d9;} 



.jj_wrap .cont .bg:nth-child(1) {background: #fbd5e0;} 
.jj_wrap .cont .bg:nth-child(2) {background: #ffffff;} 
.jj_wrap .cont .bg:nth-child(3) {background: #ffb2c8;} 
.jj_wrap .cont .bg:nth-child(4) {background: #ffeef4;} 
.jj_wrap .cont .bg:nth-child(5) {background: #e4e8f4;} 

.jj_wrap .cont .bg:nth-child(6) {background: #393b88;} 
.jj_wrap .cont .bg:nth-child(7) {background: #ffffff;} 

.jj_wrap .cont .bg:nth-child(8) {background: #fffab6;} 
.jj_wrap .cont .bg:nth-child(9) {background: #ffffff;} 
.jj_wrap .cont .bg:nth-child(10) {background: #5dd3d7;} 
.jj_wrap .cont .bg:nth-child(11) {background: #d1f3f4;} 
.jj_wrap .cont .bg:nth-child(12) {background: #ffeef4;} 
.jj_wrap .cont .bg:nth-child(13) {background: #ee765a;} 
.jj_wrap .cont .bg:nth-child(14) {background: #ffffff;} 

.jj_wrap .cont .bg:nth-child(15) {background: #ffea3f;} 
.jj_wrap .cont .bg:nth-child(17) {background: #01b7ab;} 
.jj_wrap .cont .bg:nth-child(18) {background: #01b7aa;} 

.jj_wrap .cont .bg:nth-child(18) {background: #f6f6f6;} 
.jj_wrap .cont .bg:nth-child(19) {background: #ffffff;} 
.jj_wrap .cont .bg:nth-child(20) {background: #5adfd5;} 
.jj_wrap .cont .bg:nth-child(21) {background: #f6f6f6;} 
.jj_wrap .cont .bg:nth-child(22) {background: #ffffff;} 
.jj_wrap .cont .bg:nth-child(23) {background: #58cdc4;} 
.jj_wrap .cont .bg:nth-child(24) {background: #cef5e9;} 
.jj_wrap .cont .bg:nth-child(25) {background: #f3d55a;} 
.jj_wrap .cont .bg:nth-child(26) {background: #ffffff;} 
.jj_wrap .cont .bg:nth-child(27) {background: #f6c0d8;} 
.jj_wrap .cont .bg:nth-child(28) {background: #ffffff;} 
.jj_wrap .cont .bg:nth-child(29) {background: #bdd97f;} 
.jj_wrap .cont .bg:nth-child(30) {background: #e7eeb0;} 
.jj_wrap .cont .bg:nth-child(31) {background: #9f88d3;} 
.jj_wrap .cont .bg:nth-child(32) {background: #a6ecfb;} 
.jj_wrap .cont .bg:nth-child(33) {background: #fef17c;} 


/* background color - end */



.contents .inn .mo{display: none;} 
.block32 .inn .contents_area .contens_inn .tap_box .tap_cont_group {display: block !important;height: 100%;}

@media all and (max-width:1280px) {
    
    .block03:nth-child(1) {height: 255px;}
    .block03:nth-child(2) {height: 1148px;margin-top: -1px;}
    .video_inn::before {height: calc(100% + 20px);bottom: -8px;}
    .video_area .video {border-radius: 16px;width: 896px;height: 500px;}
    

    .block21 {height: 670px;}



    .tap_box > ul {flex-direction: column-reverse;gap: 20px 0;}
    .tap_box > ul .tap_btn_group{flex-direction: row;gap: 0 20px;max-width: 920px;}
    .tap_box > ul .tap_btn_group > a {padding: 0 10px;}
    .tap_box .num{display: block;}
    
    .areatit {font-size: 40px;text-align: center;margin-bottom: 15px;}
    
    .block17 .tap_box > ul .tap_btn_group,
    .block25 .tap_box > ul .tap_btn_group,
    .block31 .tap_box > ul .tap_btn_group {gap: 0 10px;}
        

    .block05, .block05 .inn {height: 700px;}
    .block12, .block12 .inn {height: 750px;}
    .block13, .block13 .inn {height: 750px;}
    .block17, .block17 .inn {height: 700px;}
    .block25, .block25 .inn {height: 700px;}
    .block31, .block31 .inn {height: 700px;}
    .block32, .block32 .inn {height: 1450px;}

    .block32 .inn .contents_area .contens_inn .tap_box>ul>li {gap: 30px 45px;}
    .block32 .inn .contents_area .contens_inn .tap_box {padding-top: 80px;max-width: 885px;}
           
    .block002 {height: 1300px;}
    .block002 .inn {height: 80%;}
    .block002 .inn > img {max-width:1903px;}
    .block002 .contents_area {top: 703px;}
    .tab_area.AI {width: 882px;}
    .tab_area.AI .tabs {height: 517px;}
    .tab_area.AI .tab_contents{zoom: .9;}

    .block33 {height: 780px;}
    .block34 {height: 110px;}
    .call_btn {bottom: 186px;}
    .call_btn a {width: 456px;height: 60px;margin-left: -229px;}


} 


@media all and (max-width:976px){

    .block001{min-width: 1000px;}
    .block003{min-width: 1000px;}
    .block004{min-width: 1000px;}
    .block005{min-width: 1000px;}
    .block006{min-width: 1000px;}
    .block007{min-width: 1000px;}


    .block03:nth-child(1) {height: 205px;}
    .block03:nth-child(2) {height: 925px;}
    .video_area .video {border-radius: 12px;width: 682px;height: 380px;}
    .video_inn::before {height: calc(100% + 14px);bottom: -5px;}


    .block21 {height: 530px;}
    
    .jj_wrap {overflow-x: hidden;height: 100%;}
    .jj_wrap .block01 h1 {font-size: 55px;}
    .rcm_slide_area {zoom: .6;gap: 85px 0;}
    .jj_wrap .nav_area {max-width: 100%;}        
    .jj_wrap .nav_list {gap: 0 30px;width: 90%;}
    .jj_wrap .bg {max-width: 1160px;position: relative;left: 50%;overflow-x: hidden;transform:translateX(-50%);}
    .jj_wrap .nav {height: 140px;}


    .tap_box {max-width: 722px !important;}
    .tap_box .tap_cont_group{height: 470px;}
    .tap_box > ul .tap_btn_group > a {font-size: 18px;}

    .block32, .block32 .inn {height: 1180px;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li {gap: 20px 32px;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(1) {width: 100% !important;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a {width: calc((100% / 4) - 24px) !important;height: 67px;}   

    
    .tab_area.AI {zoom: .8;}
    .block002 {height: 1180px;}
    .block002 .inn {height: 90%;}    
    .block002 .contents_area {top: 680px;}
    .tab_area.AI .tabs {height: 480px;}


    .block33 {height: 780px;}
    .block34 {height: 109px;}

    

 }

@media all and (max-width:780px) {/* .jj_wrap em {top:0.2%;} */

    .login_btn {top: 20px;}

    .text_log_in > a:first-child img{display: none; }
    .text_log_in > a:first-child img:last-child{display: block; 
        transform: translateX(-0.5px);
        position: relative;
        backface-visibility: hidden;
        transform: translateZ(0);
        width: 100%;
        max-width: 32px;
        /* image-rendering: pixelated; */
        }
    .text_log_in > a:first-child svg{width: 28px;height: 28px;}



    .block001,
    .block003,
    .block004,
    .block005,
    .block006,
    .block007{min-width: 140%;transform: translateX(-14%) !important;}

    .block002{height: 840px !important;}
    .tab_area.AI {zoom: .5;}
    .block002 .contents_area {top: 490px;}

    

    .jj_wrap .block01{padding-top: 120px;margin-bottom: 100px;}
    .jj_wrap .block01 h1 {font-size: 30px;margin-bottom: 100px;}
    .rcm_slide_area {zoom: .5;}

    .block03:nth-child(1) {height: 165px;}
    .block03:nth-child(2) {height: 742px;}
    
    
    
    .block21 {height: 330px;}
    
    .video_inn::before {height: calc(100% + 6px);bottom: -1px;}
    .video_area .video {border-radius: 10px;width: 433px;height: 241px;}
    .video_area {bottom: 23%;}
    

    
    .contents .inn .pc{display: none;}
    .top_cont .contents .inn .pc{display: block !important;}
    .contents .inn .mo{display: block;} 

    .jj_wrap .block01 h1 {font-size: 39px;}
    .jj_wrap .nav {height: 100px;}
    .jj_wrap .nav_area + div {margin-top: 40px;}   
    .jj_wrap .nav_list {gap: 0 15px;}
    
    .jj_wrap .bg {position: static;margin-left: 0;width: 100%;transform:initial;}

    .areatit {font-size: 26px;margin-bottom: 10px;}

    .tap_box .tap_cont_group {height: auto;width: 90%;}
    .tap_box > ul .tap_btn_group {gap: 0 10px;}
    .tap_box > ul .tap_btn_group > a {font-size: 16px;height: 100px;border-radius: 16px;font-weight: 600;letter-spacing: -0.098em;word-break: keep-all;}
    .tap_box {max-width: 490px !important;}
    .block17 .inn .contents_area .contens_inn {padding: 0 10px}

    
    .block05, .block05 .inn {height: 485px;}
    .block12, .block12 .inn {height: 520px;}
    .block13, .block13 .inn {height: 520px;}
    .block17, .block17 .inn {height: 520px;}
    .block25, .block25 .inn {height: 465px;}
    .block31, .block31 .inn {height: 465px;}
    .block32, .block32 .inn {height: 748px;}
    
    /* .block32 .inn > img {min-width: 500px;} */
    
    .block32 .inn .contents_area .contens_inn .tap_box {width: 445px;padding-top: 80px;}  
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li {gap: 10px 20px;}
    .block32 .inn .contents_area .contens_inn .tap_box .tap_cont_group {display: block !important;width: 100%;height: 254px;border-radius: 8px;}

    .block32 .inn .contents_area .contens_inn .tap_box ul {gap: 45px 0;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a {width: calc((100% / 3) - 14px) !important;height: 80px;z-index: 1;}       
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(1) {width: 100% !important;height: 50px;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(6) {margin-left: 155px;z-index: 1 !important;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(6)::after {display: block;content: '';width: 132px;height: 72px;background: url(../img/screenshot/logo_cloud.webp) no-repeat center;background-size: contain !important;position: absolute;left: 50%;margin-left: -71px;}
    .block32 .inn .contents_area .contens_inn .tap_box .tap_cont_group > div .screenshot_cont {border-radius: 0;}

    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(2) {background: url(../img/screenshot/btn/mo_btn01.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(3) {background: url(../img/screenshot/btn/mo_btn02.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(4) {background: url(../img/screenshot/btn/mo_btn03.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(5) {background: url(../img/screenshot/btn/mo_btn04.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(6) {background: url(../img/screenshot/btn/mo_btn05.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(7) {background: url(../img/screenshot/btn/mo_btn06.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(8) {background: url(../img/screenshot/btn/mo_btn07.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(9) {background: url(../img/screenshot/btn/mo_btn08.webp)center center/contain no-repeat;} 
    
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(2) {background: url(../img/screenshot/btn/mo_btn01_on.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(3) {background: url(../img/screenshot/btn/mo_btn02_on.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(4) {background: url(../img/screenshot/btn/mo_btn03_on.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(5) {background: url(../img/screenshot/btn/mo_btn04_on.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(6) {background: url(../img/screenshot/btn/mo_btn05_on.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(7) {background: url(../img/screenshot/btn/mo_btn06_on.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(8) {background: url(../img/screenshot/btn/mo_btn07_on.webp)center center/contain no-repeat;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a.active:nth-of-type(9) {background: url(../img/screenshot/btn/mo_btn08_on.webp)center center/contain no-repeat;} 
    
    
    .block33 {height: 570px;}
    .block34 {height: 100px;}
    .call_btn {bottom: 134px;}
    .call_btn a {width: 335px;height: 40px;margin-left: -167px;}

 }

 @media all and (max-width:500px) {

 
    .login_btn {top: 15px;}
    .jj_wrap em a{font-size:13px;}
    .text_log_in > a:first-child {margin-right: 12px;}
    .text_log_in > a:first-child svg,
    .jj_wrap em a svg.svg-inline--fa.fa-right-to-bracket {width: 26px;height: 26px;}

    .block002{height: 630px !important;}
    .tab_area.AI {zoom: .4;}
    .block002 .contents_area {top: 360px;}

    .jj_wrap .nav_list {padding: 10px 0 20px;}

    .block03:nth-child(1) {height: 112px;}
    .block03:nth-child(2) {height: 500px;}
    .video_area .video {border-radius: 6px;width: 343px;height: 193px;}
    .video_inn::before {height: calc(100% + 3px);bottom: 1px;}
    .block21 {height: 320px;}

    
    .block32, .block32 .inn {height: 584px;}
    .block32 .inn .contents_area .contens_inn .tap_box {width: 347px;padding-top: 70px;} 
    .block32 .inn .contents_area .contens_inn .tap_box ul {gap: 35px 0;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li {gap: 10px 15px;} 
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a {width: calc((100% / 3) - 10px) !important;height: 58px;z-index: 1;}      
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(6) {margin-left: 120px;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(6)::after {width: 105px;height: 57px;margin-left: -56px;}
    .tap_box > ul .tap_btn_group > a {font-size: 14px;height: 100px;border-radius: 16px;font-weight: 600;letter-spacing: -0.098em;word-break: keep-all;}


    .block32 .inn .contents_area .contens_inn .tap_box .tap_cont_group {height: 200px;}
    .block32 .inn .contents_area .contens_inn .tap_box>ul>li a:nth-of-type(1) {height: 40px;}

    .block05 .inn .contents_area .contens_inn,
    .block12 .inn .contents_area .contens_inn,
    .block13 .inn .contents_area .contens_inn,
    .block17 .inn .contents_area .contens_inn,
    .block25 .inn .contents_area .contens_inn,
    .block31 .inn .contents_area .contens_inn,
    .block32 .inn .contents_area .contens_inn {padding: 0 10px;}


    .block33 {height: 430px;}
    .block34 {height: 60px;}
    .call_btn {bottom: 102px;}
    .call_btn a {width: 252px;height: 32px;margin-left: -126px;}


 }