@charset "UTF-8";

@keyframes character-hover {
	0%{transform: translateY(0);}
	50%{transform: translateY(-5%);}
	100%{transform: translateY(0);}
}

@keyframes foot1-animate {
	0%{transform: translate(-58%, 30%) scaleX(-1) rotate(19deg);}
	50%{transform: translate(-58%, 30%) scaleX(-1) rotate(29deg);}
	100%{transform: translate(-58%, 30%) scaleX(-1) rotate(19deg);}
}

@keyframes foot2-animate {
	0%{transform: translate(-60%, 0) scaleX(-1) rotate(19deg);}
	50%{transform: translate(-60%, 0) scaleX(-1) rotate(9deg);}
	100%{transform: translate(-60%, 0) scaleX(-1) rotate(19deg);}
}

@keyframes foot3-animate {
	0%{transform: translate(61%, 30%) scaleX(-1) rotate(-3deg);}
	50%{transform: translate(61%, 30%) scaleX(-1) rotate(-13deg);}
	100%{transform: translate(61%, 30%) scaleX(-1) rotate(-3deg);}
}

@keyframes foot4-animate {
	0%{transform: translate(66%, 0) rotate(59deg);}
	50%{transform: translate(66%, 0) rotate(49deg);}
	100%{transform: translate(66%, 0) rotate(59deg);}
}

@keyframes twinkle-animate {
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}

.page{padding-top: calc(75px + 58px); padding-bottom: 80px;}
.page > .bg{width: 100%; padding: 100px 0 50px 0; margin-bottom: 80px;}
.page > .bg.company{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/pages/company1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.page > .bg.brand{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/pages/brand.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.page > .bg.notice{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/pages/notice.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.page > .bg.release{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/pages/release.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}
.page > .bg.question{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/pages/question.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}

.page > .bg .page-name{position: relative; opacity: 0; top: 30px; font-family: 'NanumSquareAcl'; color: var(--color1); margin-bottom: 30px;}
.page > .bg .page-description{position: relative; opacity: 0; top: 30px; font-family: 'GongGothicMedium'; font-weight: 100; color: var(--color7);}

.page > .bg.active .page-name{transition: all .5s ease; opacity: 1; top: 0;}
.page > .bg.active .page-description{transition: all .5s ease; transition-delay: .5s; opacity: 1; top: 0;}

#aboutCompany .company-image-wrap{position: relative; opacity: 0; left: -50px;}
#aboutCompany .company-image-wrap > img{width: 100%;}
#aboutCompany .company-description{opacity: 0; font-family: 'NanumSquareAcl'; line-height: 2; word-break: keep-all;}
#aboutCompany .catchphrase{font-family: 'InkLipquid'; color: var(--color1); margin: 40px 0;}
#aboutCompany .catchphrase > span{opacity: 0; font-family: inherit;}
#aboutCompany .catchphrase > .writer{opacity: 0; font-family: 'NanumSquareAceb'; color: var(--color4); margin-top: 20px;}
#aboutCompany .company-image-wrap.active{transition: all .5s ease; opacity: 1; left: 0;}
#aboutCompany .company-description.active{transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#aboutCompany .catchphrase.active > span:nth-of-type(1){transition: all .5s ease; transition-delay: 1s; opacity: 1;}
#aboutCompany .catchphrase.active > span:nth-of-type(2){transition: all .5s ease; transition-delay: 1.5s; opacity: 1;}
#aboutCompany .catchphrase.active > .writer{transition: all .5s ease; transition-delay: 2s; opacity: 1;}
#aboutCompany .image-hr{position: relative; opacity: 0; top: 50px; width: 100%; padding: 100px 0; margin-bottom: 80px; background: linear-gradient(rgba(0,0,0,0.4) 80%, rgba(255,255,255,1)),url('/resources/images/pages/math.jpg');}
#aboutCompany .image-hr .title{opacity: 0; font-family: 'NanumSquareAcr'; color: var(--color7); margin-bottom: 10px;}
#aboutCompany .image-hr .content{opacity: 0; font-family: 'NanumSquareAcl'; color: var(--color7); line-height: 1.4;}
#aboutCompany .image-hr.active{transition: all .5s ease; opacity: 1; top: 0;}
#aboutCompany .image-hr.active .title{transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#aboutCompany .image-hr.active .content{transition: all .5s ease; transition-delay: 1s; opacity: 1;}
#aboutCompany .circle-bar{position: relative; opacity: 0; top: 50px; display: flex; flex-direction: row; align-items: center;}
#aboutCompany .circle-bar > .circle{position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 50%; z-index: 100;}
#aboutCompany .circle-bar > .circle::before{content: ''; position: absolute; width: calc(100% - 25px); height: calc(100% - 25px); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;}
#aboutCompany .circle-bar > .circle::after{content: ''; position: absolute; width: calc(100% - 50px); height: calc(100% - 50px); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;}
#aboutCompany .circle-bar > .content{padding: 40px 30px 30px 30px; border-radius: 10px; line-height: 1.5;}
#aboutCompany .circle-bar.active{transition: all .5s ease; opacity: 1; top: 0;}
#aboutCompany .circle-bar.gray > .circle{background-color: #BEBEBE; color: var(--color7); width: 150px; height: 150px; padding: calc(150px * 0.2); margin-right: -70px;}
#aboutCompany .circle-bar.gray > .circle::before{background-color: #9A9A9A;}
#aboutCompany .circle-bar.gray > .circle::after{background-color: #5B5B5B;}
#aboutCompany .circle-bar.gray > .content{background-color: #F1F1F1; width: calc(100% - (150px - 70px) - 200px);  padding-left: 100px;}
#aboutCompany .circle-bar.gray > .content > strong{color: var(--color3);}
#aboutCompany .circle-bar.blue > .circle{background-color: #AAEAFF; color: var(--color7); width: 400px; height: 400px; padding: calc(250px * 0.2); margin-left: -100px;}
#aboutCompany .circle-bar.blue > .circle::before{background-color: #7FD4F3;}
#aboutCompany .circle-bar.blue > .circle::after{background-color: #57BEF8;}
#aboutCompany .circle-bar.blue > .circle > img{position: absolute; width: calc(100% - 75px); height: calc(100% - 75px); object-fit: cover; object-position: center; border-radius: 50%;}
#aboutCompany .circle-bar.blue > .content{background-color: #EAF5FF; width: calc(100% - (400px - 100px));  padding-right: 130px;}
#aboutCompany .circle-bar.blue > .content > strong{color: #00C6FF;}
#aboutCompany .end-message{position: relative; opacity: 0; top: 50px; margin-top: 50px;}
#aboutCompany .end-message > strong{position: relative; display: inline-block; font-family: 'NanumSquareAceb';}
#aboutCompany .end-message > strong::after{position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 0.3em; background-color: #AAEAFF; z-index: -1;}
#aboutCompany .end-message.active{transition: all .5s ease; opacity: 1; top: 0;}

#aboutBrand .block{margin-bottom: 80px;}
#aboutBrand .block .block-title{position: relative; opacity: 0; top: 50px; font-family: 'GongGothicMedium'; margin-bottom: 30px;}
#aboutBrand .block .block-content{position: relative; opacity: 0; top: 50px; color: var(--color6); line-height: 1.5;}
#aboutBrand .block:last-of-type{margin-bottom: 0;}
#aboutBrand .block.active .block-title{transition: all .5s ease; opacity: 1; top: 0;}
#aboutBrand .block.active .block-content{transition: all .5s ease; transition-delay: .5s; opacity: 1; top: 0;}
#aboutBrand .block1 .block-content{margin-bottom: 50px;}
#aboutBrand .block1 .ci-wrap{position: relative; opacity: 0; left: -50px;}
#aboutBrand .block1 .ci-wrap > img{width: 100%;}
#aboutBrand .block1 .color-graph > .graph{opacity: 0; display: flex; flex-direction: row; align-items: center; gap: 30px;}
#aboutBrand .block1 .color-graph > .graph > .color-circle{width: 180px; height: 180px; border-radius: 50%; display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 20px;}
#aboutBrand .block1 .color-graph > .graph > .color-circle > .name{line-height: 1.5;}
#aboutBrand .block1 .color-graph > .graph > .color-circle.skyblue{background-color: #1BA0D7;}
#aboutBrand .block1 .color-graph > .graph > .color-circle.skyblue > .name{color: white;}
#aboutBrand .block1 .color-graph > .graph > .color-circle.oceanblue{background-color: #034B89;}
#aboutBrand .block1 .color-graph > .graph > .color-circle.oceanblue > .name{color: white;}
#aboutBrand .block1 .color-graph > .graph > .cmyk-list{display: grid; grid-template-columns: repeat(2, minmax(auto, 100px)); width: calc(100% - 180px - 30px); gap: 20px;}
#aboutBrand .block1 .color-graph > .graph > .cmyk-list > li{display: flex; flex-direction: row; justify-content: space-between; font-family: 'NanumSquareAcl';}
#aboutBrand .block1 .color-graph > .graph > .cmyk-list > li > strong{font-family: 'NanumSquareAcb'; margin-right: 1em;}
#aboutBrand .block1.active .ci-wrap{transition: all .5s ease; transition-delay: 1s; opacity: 1; left: 0;}
#aboutBrand .block1.active .color-graph > .graph{transition: all .5s ease; transition-delay: 1.5s; opacity: 1;}
#aboutBrand .block2 .brand-list{display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
#aboutBrand .block2 .brand-list > li{position: relative; top: 50px; opacity: 0;}
#aboutBrand .block2 .brand-list > li > .view{position: relative; width: 100%; padding-top: 56.65%; overflow: hidden; border-radius: 10px; margin-bottom: 20px;}
#aboutBrand .block2 .brand-list > li > .view.abc{background-color: #FFF1EE;}
#aboutBrand .block2 .brand-list > li > .view > *{position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: contain; object-position: center;}
#aboutBrand .block2 .brand-list > li > .description > .name{font-family: 'NanumSquareAcb'; margin-bottom: 0.3em;}
#aboutBrand .block2 .brand-list > li > .description > .content{color: var(--color4); line-height: 1.4;}
#aboutBrand .block2 .brand-list > li > .description > .button-wrap{margin-top: 30px;}
#aboutBrand .block2 .brand-list > li > .description > .button-wrap button{width: 100%; max-width: 200px;}
#aboutBrand .block2 .brand-list > li.active{transition: all .5s ease; top: 0; opacity: 1;}
#aboutBrand .block3 .characters-wrap{position: relative; opacity: 0; top: 50px; padding-top: 56.65%; background-image: url('/resources/images/characters/background.png'); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 30px;}
#aboutBrand .block3 .characters-wrap > .group-name{position: absolute; opacity: 0; left: 50%; top: 3%; width: 20%; padding-top: calc(20% * 0.575); transform: translateX(-50%); background-image: url('/resources/images/characters/title.png'); background-position: center; background-repeat: no-repeat; background-size: cover;}
#aboutBrand .block3 .characters-wrap > .character-list{position: absolute; opacity: 0; left: 0; bottom: -5%; padding: 0 5% 7% 5%; display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; flex-direction: row; align-items: flex-end; justify-content: space-between;}
#aboutBrand .block3 .characters-wrap > .character-list > li{flex: 1; display: flex; flex-direction: column; align-items: center;}
#aboutBrand .block3 .characters-wrap > .character-list > li > .character{position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
#aboutBrand .block3 .characters-wrap > .character-list > li > .name-tag{width: 60%; padding-top: 29%; background-position: center; background-repeat: no-repeat; background-size: contain; margin-top: 10%;} 
#aboutBrand .block3 .characters-wrap > .character-list > li.freddie > .character{width: 90%; padding-top: 142%; background-image: url('/resources/images/characters/freddie.png'); }
#aboutBrand .block3 .characters-wrap > .character-list > li.freddie > .name-tag{background-image: url('/resources/images/characters/freddie-name.png');}
#aboutBrand .block3 .characters-wrap > .character-list > li.tori > .character{width: 90%; padding-top: 142%; background-image: url('/resources/images/characters/tori.png'); }
#aboutBrand .block3 .characters-wrap > .character-list > li.tori > .name-tag{background-image: url('/resources/images/characters/tori-name.png');}
#aboutBrand .block3 .characters-wrap > .character-list > li.rano > .character{width: 65%; padding-top: 130%; background-image: url('/resources/images/characters/rano.png'); }
#aboutBrand .block3 .characters-wrap > .character-list > li.rano > .name-tag{background-image: url('/resources/images/characters/rano-name.png');}
#aboutBrand .block3 .characters-wrap > .character-list > li.rani > .character{width: 80%; padding-top: 129%; background-image: url('/resources/images/characters/rani.png'); }
#aboutBrand .block3 .characters-wrap > .character-list > li.rani > .name-tag{background-image: url('/resources/images/characters/rani-name.png');}
#aboutBrand .block3 .characters-wrap > .character-list > li.lulu > .character{width: 60%; padding-top: 105%; background-image: url('/resources/images/characters/lulu.png'); }
#aboutBrand .block3 .characters-wrap > .character-list > li.lulu > .name-tag{background-image: url('/resources/images/characters/lulu-name.png');}
#aboutBrand .block3 .characters-wrap > .character-list > li.bruno > .character{width: 90%; padding-top: 173%; background-image: url('/resources/images/characters/bruno.png'); }
#aboutBrand .block3 .characters-wrap > .character-list > li.bruno > .name-tag{background-image: url('/resources/images/characters/bruno-name.png');}
#aboutBrand .block3 .characters-wrap.active{transition: all .5s ease; transition-delay: .5s; opacity: 1; top: 0;}
#aboutBrand .block3 .characters-wrap.active > .group-name{transition: all .5s ease; transition-delay: 1s; opacity: 1; top: 5%;}
#aboutBrand .block3 .characters-wrap.active > .character-list{transition: all .5s ease; transition-delay: 1.5s; opacity: 1; bottom: 0;}
#aboutBrand .block3 .characters-wrap.active > .character-list > li:hover > .character{animation: character-hover 1s ease infinite;}
#aboutBrand .block3 .characters-wrap.active > .character-list > li:not(:hover) > .character{transition: all .5s ease; transform: translateY(0);}
#aboutBrand .block3 .characters-wrap.active > .character-list > li:hover > .name-tag{transition: all .5s ease; transform: scale(1.1);}
#aboutBrand .block3 .characters-wrap.active > .character-list > li:not(:hover) > .name-tag{transition: all .5s ease; transform: scale(1);}

#programBbabam .bbabam-universe{width: 100%; overflow: hidden;}
#programBbabam .bbabam-universe > .sky{position: relative; width: 100%; padding: 50px 0 100px 0; background-color: #73C4ED; overflow: hidden;}
#programBbabam .bbabam-universe > .sky > canvas{position: absolute; left: 0; top: 0;}
#programBbabam .bbabam-universe > .sky > .cloud3-wrap{position: absolute; left: 0; bottom: 0; width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
#programBbabam .bbabam-universe > .sky > .cloud3-wrap > .cloud3{position: relative; background-image: url('/resources/images/pages/bbabam/cloud3.png'); width: 40%; height: calc(40vw * 0.282); background-repeat: no-repeat; background-position: -20vw bottom; background-size: cover;}
#programBbabam .bbabam-universe > .sky > .cloud3-wrap > .cloud3:last-of-type{transform: scaleX(-1);}
#programBbabam .bbabam-universe > .sky .logo-wrap{position: relative; top: -50px; opacity: 0;}
#programBbabam .bbabam-universe > .sky .logo-wrap > img{width: 100%; max-width: 300px;}
#programBbabam .bbabam-universe > .sky .logo-wrap > .message{margin-top: 20px; color: var(--color7); opacity: 0;}
#programBbabam .bbabam-universe > .land{position: relative; width: 100%; background-color: #D4DD65;}
#programBbabam .bbabam-universe > .land > .forest1{position: absolute; right: 23%; top: 0; transform: translateY(-65%); width: 30%; height: calc(30vw * 0.1248); background-image: url('/resources/images/pages/bbabam/forest1.png'); background-size: contain; background-position: center bottom; background-repeat: no-repeat;}
#programBbabam .bbabam-universe > .land > .forest2{position: absolute; left: -5%; top: 0; transform: translateY(-80%); width: 37%; height: calc(37vw * 0.0911); background-image: url('/resources/images/pages/bbabam/forest2.png'); background-size: contain; background-position: center bottom; background-repeat: no-repeat;}
#programBbabam .bbabam-universe > .land > .forest3{position: absolute; right: 0; top: 0; transform: translate(45%, -95%); width: 20%; height: calc(20vw * 0.3165); background-image: url('/resources/images/pages/bbabam/forest3.png'); background-size: contain; background-position: center bottom; background-repeat: no-repeat;}
#programBbabam .bbabam-universe > .land > .grass1{width: 100%; min-height: calc(80vw * 0.1253); background-image: url('/resources/images/pages/bbabam/grass1.png'); background-size: 80vmax; background-position: center bottom; background-repeat: no-repeat;}
#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap{position: relative; top: 0; opacity: 0; display: flex; width: 100%; max-width: 500px; margin: 0 auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding: 50px 0;}
#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap > .textbox{width: calc((100% - 40px) / 2 - 20px); background-color: var(--color7); padding: 0.5em; border-radius: 2em; text-align: center; font-size: 20px;}
#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap > .x{position: relative; width: 40px; height: 40px;}
#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap > .x > span{position: absolute; left: 50%; top: 50%; width: 100%; height: 8px; border-radius: 8px; background-color: #85C077;}
#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap > .x > span:nth-of-type(1){transform: translate(-50%, -50%) rotate(45deg);}
#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap > .x > span:nth-of-type(2){transform: translate(-50%, -50%) rotate(-45deg);}
#programBbabam .bbabam-universe > .land > .character-wrapper{position: absolute; left: 0; top: -50px; opacity: 0; width: 100%; transform: translateY(-80%);}
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap{position: relative; display: flex; flex-direction: row; justify-content: space-between;}
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list{display: flex; width: 30%; flex-direction: row; align-items: flex-end; justify-content: space-between;}
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li{flex: 1; display: flex; flex-direction: column; align-items: center;}
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li > .character{position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li > .name-tag{width: 60%; padding-top: 29%; background-position: center; background-repeat: no-repeat; background-size: contain; margin-top: 10%;} 
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.freddie > .character{width: 90%; padding-top: 139%; background-image: url('/resources/images/characters/freddie.png'); }
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.tori > .character{width: 90%; padding-top: 139%; background-image: url('/resources/images/characters/tori.png'); }
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.rano > .character{width: 65%; padding-top: 128%; background-image: url('/resources/images/characters/rano.png'); }
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.rani > .character{width: 80%; padding-top: 129%; background-image: url('/resources/images/characters/rani.png'); }
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.lulu > .character{width: 60%; padding-top: 102%; background-image: url('/resources/images/characters/lulu.png'); }
#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.bruno > .character{width: 90%; padding-top: 172%; background-image: url('/resources/images/characters/bruno.png'); }
#programBbabam .bbabam-universe.active > .sky .logo-wrap{transition: all .5s ease; top: 0; opacity: 1;}
#programBbabam .bbabam-universe.active > .sky .logo-wrap > .message{transition: all .5s ease; transition-delay: .5s; opacity: 1; line-height: 1.4;}
#programBbabam .bbabam-universe.active > .land > .grass1 .textbox-wrap{transition: all .5s ease; transition-delay: 1.5s; top: 0; opacity: 1;}
#programBbabam .bbabam-universe.active > .land > .character-wrapper{transition: all .5s ease; transition-delay: 1s; top: 0; opacity: 1;}
#programBbabam .bbabam-universe.active > .land > .character-wrapper .characters-wrap > .character-list > li:hover > .character{animation: character-hover 1s ease infinite;}
#programBbabam .key-points-wrapper{padding: 20px 0 ; background-color: #D4DD65;}
#programBbabam .key-points-wrapper > .title-wrap{width: 100%; background-image: url('/resources/images/pages/bbabam/forest4.png'); background-position: center; background-repeat: no-repeat; background-size: contain;}
#programBbabam .key-points-wrapper > .title-wrap .bg-title{position: relative; padding-top: 16.2%; background-image: url('/resources/images/pages/bbabam/forest5.png'); background-position: center bottom; background-repeat: no-repeat; background-size: cover; }
#programBbabam .key-points-wrapper > .title-wrap .title{position: absolute; left: 0; bottom: 0; opacity: 0; width: 100%; font-size: 30px; text-align: center;}
#programBbabam .key-points-wrapper > .title-wrap .title > .sub-title{font-size: 50px;}
#programBbabam .key-points-wrapper > .title-wrap .title > .sub-title > span{display: inline-block; opacity: 0; font-family: 'GongGothicMedium'; color: white;}
#programBbabam .key-points-wrapper > .title-wrap .title > .sub-title > span.highlight{position: relative; z-index: 10;}
#programBbabam .key-points-wrapper > .title-wrap .title > .sub-title > span.highlight::after{content: ''; position: absolute; display: block; width: 100%; left: 0; bottom: 0; height: 0.3em; background-color: #15A915; z-index: -1;}
#programBbabam .key-points-wrapper > .title-wrap.active .title{transition: all .5s ease; opacity: 1; bottom: 10px;}
#programBbabam .key-points-wrapper > .title-wrap.active .title > .sub-title > span:nth-child(1){transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#programBbabam .key-points-wrapper > .title-wrap.active .title > .sub-title > span:nth-child(2){transition: all .5s ease; transition-delay: 1s; opacity: 1;}
#programBbabam .key-points-wrapper > .key-points-wrap{margin-top: 20px; background-image: url('/resources/images/pages/bbabam/grass2.png'); background-position: center; background-size: contain; background-repeat: no-repeat; overflow: hidden;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points{position: relative; opacity: 0; width: 100%; padding-top: 60%;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point{position: absolute;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .inner{position: absolute; left: 5%; top: 50%; width: 90%; transform: translateY(-50%); text-align: center;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .inner > .title{font-family: 'GongGothicMedium'; font-size: 40px; margin-bottom: 0.5em;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .inner > .content{color: #636363; line-height: 1.5; font-size: 20px;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .emphasis{position: absolute; opacity: 0; width: 20%; padding-top: 20%; background-color: #F3FCFF; mask-image: url('/resources/images/pages/bbabam/emphasis.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/emphasis.png');}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1){width: 35%; padding-top: 38%; left: 50%; top: 50%; transform: translate(-50%, -60%);}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .bg{background-color: #FFFAEE; mask-image: url('/resources/images/pages/bbabam/AI.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/AI.png');}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .inner{padding-top: 15%;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .inner > .title{color: #FFC42C;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .emphasis{left: 50%; top: 0; transform: translate(-50%, -90%) rotate(-56deg); background-color: #FFC42C;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2){width: 30%; padding-top: 27%; right: 8%; top: 0;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .bg{background-color: #F4F0FF; mask-image: url('/resources/images/pages/bbabam/speech1.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/speech1.png'); transform: scaleX(-1);}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .inner{padding-left: 9%;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .inner > .title{color: #9E80EA;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .emphasis{right: -7%; top: 0; background-color: #9E80EA;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3){width: 30%; padding-top: 27%; left: 8%; top: 0;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .bg{background-color: #F3FCFF; mask-image: url('/resources/images/pages/bbabam/speech1.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/speech1.png');}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .inner{padding-right: 9%;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .inner > .title{color: #73C4ED;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .emphasis{left: -7%; top: 0; transform: scaleX(-1); background-color: #73C4ED;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4){width: 35%; padding-top: 31%; left: 0; bottom: 0;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .bg{background-color: #FFF0F5; mask-image: url('/resources/images/pages/bbabam/speech2.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/speech2.png');}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .inner{padding-right: 11%;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .inner > .title{color: #F47F9E;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .emphasis{left: -7%; top: 0; transform: scaleX(-1); background-color: #F47F9E;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5){width: 35%; padding-top: 31%; right: 0; bottom: 0;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .bg{background-color: #FFF8F3; mask-image: url('/resources/images/pages/bbabam/speech2.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/speech2.png'); transform: scaleX(-1);}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .inner{padding-left: 11%;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .inner > .title{color: #FF7F06;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .emphasis{right: -7%; top: 0; background-color: #FF7F06;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points.active{transition: all .5s ease; opacity: 1;}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points.active > .point:hover > .inner > .title{transition: all .5s ease; transform: scale(1.2);}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points.active > .point:hover > .inner > .content{transition: all .5s ease; transform: scale(1.2);}
#programBbabam .key-points-wrapper > .key-points-wrap .key-points.active > .point:hover > .emphasis{transition: all .5s ease; opacity: 1;}
#programBbabam .program-wrap .program-title{position: relative; padding: 20px 40px; border-radius: 0 0 40px 40px; text-align: center; font-family: 'GongGothicMedium'; font-size: 50px;}
#programBbabam .program-wrap .program-title > img{height: 2em; display: inline-block; vertical-align: text-bottom; margin-bottom: 0.15em; filter: drop-shadow(0 0 0.05em rgba(0,0,0,0.5))}
#programBbabam .program-wrap .program-title.kids{background-image: url('/resources/images/pages/bbabam/kids-title-left.png'), url('/resources/images/pages/bbabam/kids-title-right.png'); background-repeat: no-repeat; background-size: auto 60%, auto 60%; background-position: 15% center, 85% center; background-color: #FFCE4A; border-bottom: 8px solid #FFA015; color: white;}
#programBbabam .program-wrap .program-title.hangul{background-image: url('/resources/images/pages/bbabam/hangul-title-left.png'), url('/resources/images/pages/bbabam/hangul-title-right.png'); background-repeat: no-repeat; background-size: auto 90%, auto 90%; background-position: 15% center, 85% center; background-color: #4DA337; border-bottom: 8px solid #339200; color: white;}
#programBbabam .program-wrap .logo-text-wrap{position: relative; opacity: 0; top: 50px; padding: 30px 0;}
#programBbabam .program-wrap .logo-text-wrap > .container{align-items: center;}
#programBbabam .program-wrap .logo-text-wrap .logo{position: relative; left: 0; background-color: white;}
#programBbabam .program-wrap .logo-text-wrap .container{color: white; line-height: 1.5; font-size: 25px;}
#programBbabam .program-wrap .curriculum{padding-top: 80px;}
#programBbabam .program-wrap .curriculum .curriculum-name{position: relative; top: 50px; opacity: 0; font-family: 'NanumsquareAcb'; font-size: 30px; padding-bottom: 0.7em; margin-bottom: 20px;}
#programBbabam .program-wrap .curriculum .curriculum-name > img{height: 4em; display: inline-block; vertical-align: bottom; margin-bottom: -0.7em;}
#programBbabam .program-wrap .curriculum .table{position: relative; top: 50px; opacity: 0;}
#programBbabam .program-wrap .curriculum .table .row{display: flex; flex-direction: row; text-align: center;}
#programBbabam .program-wrap .curriculum .table .row > div{display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px;}
#programBbabam .program-wrap .curriculum .table .row > div.brt{border-radius: 10px 10px 0 0;}
#programBbabam .program-wrap .curriculum .table .row > div.brb{border-radius: 0 0 10px 10px;}
#programBbabam .program-wrap .curriculum .table .row > div.bra{border-radius: 10px;}
#programBbabam .program-wrap .curriculum .table .row > .foot-wrap{width: 80px;}
#programBbabam .program-wrap .curriculum .table .row > .step{width: calc((100% - 80px) / 3); margin-right: 2px;}
#programBbabam .program-wrap .curriculum .table .row > .step:last-of-type{margin-right: 0;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step{font-size: 25px; border-radius: 20px 20px 0 0; padding: 20px 10px; font-family: 'NanumsquareAcb';}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step1{background-color: #FFCE4A; color: white;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step2{background-color: #62BE62; color: white;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step3{background-color: #2148D0; color: white;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner{background-color: white; border-radius: 20px; padding: 0; overflow: hidden; color: black; justify-content: flex-start;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner > .name{padding: 20px 10px; width: 100%;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner > .content{font-size: 20px; padding: 1em;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner.step1{border: 2px solid #FFCE4A;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner.step1 > .name{background-color: #FFCE4A; color: white;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner.step2{border: 2px solid #62BE62;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner.step2 > .name{background-color: #62BE62; color: white;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner.step3{border: 2px solid #2148D0;}
#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner.step3 > .name{background-color: #2148D0; color: white;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row > .foot-wrap > .foot{width: 60px; height: calc(60px * 1.05); mask-image: url('/resources/images/icons/foot.png'); -webkit-mask-image: url('/resources/images/icons/foot.png'); padding: 29px 10px 10px 10px; font-size: 16px; font-family: 'NanumsquareAcb';}
#programBbabam .program-wrap .curriculum .table > .tbody > .row > .all{width: calc(100% - 80px); background-color: #FFF3F4;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row > .all > .vr{display: inline-block; background-color: #E14F5D; color: white; padding: 0.3em 1.5em; border-radius: 2em; font-family: 'NanumsquareAcb';}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(2n+1) > .step.step1{background-color: #FFFBED;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(2n+1) > .step.step2{background-color: #FAFFF0;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(2n+1) > .step.step3{background-color: #F0FBFF;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(2n) > .step.step1{background-color: #FFF8E3;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(2n) > .step.step2{background-color: #F9FFEB;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(2n) > .step.step3{background-color: #EFFAFF;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(-n+3) > .foot-wrap > .foot{background-color: #62BE62; color: white;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(n+4):nth-child(-n+6) > .foot-wrap > .foot{background-color: #37A9E2; color: white;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(n+7):nth-child(-n+8) > .foot-wrap > .foot{background-color: #FCA50B; color: white;}
#programBbabam .program-wrap .curriculum .table > .tbody > .row:nth-of-type(n+9):nth-child(-n+12) > .foot-wrap > .foot{background-color: #E14F5D; color: white;}
#programBbabam .program-wrap .curriculum .table-caption{position: relative; opacity: 0; top: 50px; font-size: 20px; margin-top: 0.5em;}
#programBbabam .program-wrap .logo-text-wrap.active{transition: all .5s ease; opacity: 1; top: 0;}
#programBbabam .program-wrap .curriculum.active .curriculum-name{transition: all .5s ease; top: 0; opacity: 1;}
#programBbabam .program-wrap .curriculum.active .table{transition: all .5s ease; transition-delay: .5s; top: 0; opacity: 1;}
#programBbabam .program-wrap .curriculum.active .table-caption{transition: all .5s ease; transition-delay: 1s; top: 0; opacity: 1;}
#programBbabam .program-wrap > .bbabam-kids{background-color: #FFFAEE; padding-bottom: 50px;}
#programBbabam .program-wrap > .bbabam-kids .program-title{opacity: 0; top: 50px;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper{position: relative; opacity: 0; margin-top: 20px; margin-bottom: 30px; overflow: hidden;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap{position: relative;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet{position: relative; width: 60%; height: 0; padding-top: calc(60% * 6 / 10); margin: 0 auto; border: 2px solid #FFC217; border-radius: 40px; background-color: white; z-index: 100;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .inner{position: absolute; left: 50%; top: 50%; width: calc(100% - 40px * 2); height: calc(100% - 40px * 2); transform: translate(-50%, -50%); border: 2px solid #FFC217; border-radius: 40px; overflow: hidden;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .inner > ul{position: relative; width: 100%; height: 100%;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .inner > ul > li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .inner > ul > li > img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .inner > ul > li.active{transition: all .5s ease; opacity: 1;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .nav-wrap{position: absolute; left: 50%; bottom: 0; width: calc(100% - 40px * 2); height: 40px; transform: translateX(-50%); text-align: center;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .nav-wrap > ul{display: inline-flex; flex-direction: row; padding: 10px; gap: 20px;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .nav-wrap > ul > li{width: 20px; height: 20px; border-radius: 50%; background-color: #FFEBB8;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .nav-wrap > ul > li.active{background-color: #FFA015;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .foot{position: absolute; mask-image: url('/resources/images/icons/foot.png'); -webkit-mask-image: url('/resources/images/icons/foot.png');}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .foot.foot1{width: 10%; background-color: #FFE6B3; padding-top: calc(10% * 1.05); left: 20%; bottom: 50%; transform: translate(-58%, 30%) scaleX(-1) rotate(19deg); animation: foot1-animate 2s ease-in-out infinite;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .foot.foot2{width: 20%; background-color: #FFF0CF; padding-top: calc(20% * 1.05); left: 20%; bottom: 0; transform: translate(-60%, 0) scaleX(-1) rotate(19deg); animation: foot2-animate 2s ease-in-out infinite;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .foot.foot3{width: 12%; background-color: #FFF0CF; padding-top: calc(12% * 1.05); right: 20%; bottom: 50%; transform: translate(61%, 30%) scaleX(-1) rotate(-3deg); animation: foot3-animate 2s ease-in-out infinite;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .foot.foot4{width: 20%; background-color: #FFE6B3; padding-top: calc(20% * 1.05); right: 20%; bottom: 0; transform: translate(66%, 0) rotate(59deg); animation: foot4-animate 2s ease-in-out infinite;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .twinkle{position: absolute; background-color: white; mask-image: url('/resources/images/icons/twinkle.png'); -webkit-mask-image: url('/resources/images/icons/twinkle.png');}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .twinkle.twinkle1{width: 5%; padding-top: calc(5% * 1.2); left: -5%; top: 50%; transform: translate(0, -50%); animation: twinkle-animate 1s ease-in-out infinite;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .twinkle.twinkle2{width: 5%; padding-top: calc(5% * 1.2); right: 0; top: 30%; transform: translate(0, -50%); animation: twinkle-animate 1.5s ease-in-out infinite;}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .emphasis{position: absolute; background-color: #FFA015; mask-image: url('/resources/images/pages/bbabam/emphasis.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/emphasis.png');}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .emphasis.emphasis1{width: 5%; padding-top: calc(5% * 1.2); left: 17%; top: 10%; transform: translate(-100%, 0) scale(-1) rotate(55deg);}
#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .emphasis.emphasis2{width: 5%; padding-top: calc(5% * 1.2); right: 19%; top: 4%; transform: translate(100%, 0) scaleY(-1) rotate(30deg);}
#programBbabam .program-wrap > .bbabam-kids .description-wrap{display: flex; flex-direction: row; gap: 20px;}
#programBbabam .program-wrap > .bbabam-kids .description-wrap > .description{position: relative; opacity: 0; top: 50px; flex: 1; border-radius: 5px; border: 1px solid #FFA015; overflow: hidden; text-align: center; line-height: 1.5; background-color: white;}
#programBbabam .program-wrap > .bbabam-kids .description-wrap > .description:first-child{border-radius: 5px 5px 5px 50px;}
#programBbabam .program-wrap > .bbabam-kids .description-wrap > .description:last-child{border-radius: 5px 5px 50px 5px;}
#programBbabam .program-wrap > .bbabam-kids .description-wrap > .description > .title{background-color: #FFA015; padding: 10px; color: white; font-size: 20px; font-family: 'NanumsquareAcb';}
#programBbabam .program-wrap > .bbabam-kids .description-wrap > .description > .content{padding: 20px 30px; font-size: 20px;}
#programBbabam .program-wrap > .bbabam-kids.active .program-title{transition: all .5s ease; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-kids.active > .tablet-wrapper{transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#programBbabam .program-wrap > .bbabam-kids.active .description-wrap > .description:nth-of-type(1){transition: all .5s ease; transition-delay: 1s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-kids.active .description-wrap > .description:nth-of-type(2){transition: all .5s ease; transition-delay: 1.25s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-kids.active .description-wrap > .description:nth-of-type(3){transition: all .5s ease; transition-delay: 1.5s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-math > .logo-text-wrap{background-color: #603408;}
#programBbabam .program-wrap > .bbabam-math > .logo-text-wrap .logo{padding-top: 72%; mask-image: url('/resources/images/pages/bbabam/bbabamMath.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/bbabamMath.png');}
#programBbabam .program-wrap > .bbabam-math > .study-method{position: relative; overflow: hidden; padding: 100px 0 50px 0; background-color: #FFFBF8;}
#programBbabam .program-wrap > .bbabam-math > .study-method > .foot{position: absolute; mask-image: url('/resources/images/icons/foot.png'); -webkit-mask-image: url('/resources/images/icons/foot.png');}
#programBbabam .program-wrap > .bbabam-math > .study-method > .foot.foot1{width: 20%; padding-top: calc(20% * 1.05); background-color: #FFF2E6; left: 5%; top: 10%;}
#programBbabam .program-wrap > .bbabam-math > .study-method > .foot.foot2{width: 10%; padding-top: calc(10% * 1.05); background-color: #FFF2E6; right: 8%; top: 10%; transform: rotate(45deg);}
#programBbabam .program-wrap > .bbabam-math > .study-method > .foot.foot3{width: 23%; padding-top: calc(23% * 1.05); background-color: #FFF2E6; right: 5%; bottom: 0; transform: translate(0, 50%) rotate(60deg);}
#programBbabam .program-wrap > .bbabam-math > .study-method .method-title{text-align: center; font-size: 50px; margin-bottom: 50px; z-index: 10;}
#programBbabam .program-wrap > .bbabam-math > .study-method .method-title > span{font-family: 'GongGothicMedium'; font-weight: bold; color: black; opacity: 0;}
#programBbabam .program-wrap > .bbabam-math > .study-method .method-title > span.highlight{color: #FFA015;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list{display: grid; grid-template-columns: repeat(4, 1fr); flex-direction: row; gap: 40px; z-index: 10;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li{position: relative; opacity: 0; top: 50px; text-align: center; background-color: white; border-radius: 30px 30px 10px 10px; overflow: hidden; box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li > .title{font-size: 25px; padding: 1em; color: white; font-family: 'NanumsquareAcb';}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li > .content{padding: 10px;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li > .content > .image-wrap{position: relative; width: 100%; padding-top: calc(100% / 10 * 6); border-radius: 10px; overflow: hidden;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li > .content > .image-wrap > img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li > .content > .name{font-size: 20px; margin: 1em 0;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li:nth-child(1) > .title{background-color: #FFCE4A;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li:nth-child(2) > .title{background-color: #62BE62;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li:nth-child(3) > .title{background-color: #2148D0;}
#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li:nth-child(4) > .title{background-color: #E05A77;}
#programBbabam .program-wrap > .bbabam-math > .curriculum{padding-bottom: 80px;}
#programBbabam .program-wrap > .bbabam-math > .study-method.active .method-title > span:nth-child(1){transition: all .5s ease; opacity: 1;}
#programBbabam .program-wrap > .bbabam-math > .study-method.active .method-title > span:nth-child(2){transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#programBbabam .program-wrap > .bbabam-math > .study-method.active .step-list > li:nth-child(1){transition: all .5s ease; transition-delay: 1s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-math > .study-method.active .step-list > li:nth-child(2){transition: all .5s ease; transition-delay: 1.25s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-math > .study-method.active .step-list > li:nth-child(3){transition: all .5s ease; transition-delay: 1.5s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-math > .study-method.active .step-list > li:nth-child(4){transition: all .5s ease; transition-delay: 1.75s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-hangul .program-title{opacity: 0; top: 50px;}
#programBbabam .program-wrap > .bbabam-hangul > .logo-text-wrap{background-color: #59A54B;}
#programBbabam .program-wrap > .bbabam-hangul > .logo-text-wrap .logo{padding-top: 72%; mask-image: url('/resources/images/pages/bbabam/bbabamHangul.png'); -webkit-mask-image: url('/resources/images/pages/bbabam/bbabamHangul.png');}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point{background-color: #F5FFEC; padding-bottom: 50px;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list{display: flex; flex-direction: row; gap: 40px; margin-top: 50px;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li{position: relative; opacity: 0; top: 50px; flex: 1; text-align: center;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li > .title{padding: 0.5em 1em; width: 100%; max-width: 100px; margin: 0 auto; margin-bottom: 10px; border-radius: 2em;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li > .content-wrap{border-radius: 10px 10px 50px 50px; background-color: white; overflow: hidden;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li > .content-wrap > .image-wrap{padding: 10px;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li > .content-wrap > .image-wrap > .inner{position: relative; width: 100%; padding-top: 56.65%; border-radius: 10px; overflow: hidden;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li > .content-wrap > .image-wrap > .inner > img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li > .content-wrap > .content{padding: 25px; line-height: 1.5; min-height: 10.65em;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(1) > .title{background-color: #FFCE4A; color: white;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(1) > .content-wrap{border: 2px solid #FFCE4A;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(1) > .content-wrap > .image-wrap{background-color: #FFCE4A;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(2) > .title{background-color: #62BE62; color: white;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(2) > .content-wrap{border: 2px solid #62BE62;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(2) > .content-wrap > .image-wrap{background-color: #62BE62;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(3) > .title{background-color: #2148D0; color: white;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(3) > .content-wrap{border: 2px solid #2148D0;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li:nth-child(3) > .content-wrap > .image-wrap{background-color: #2148D0;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point.active .program-title{transition: all .5s ease; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point.active .point-list > li:nth-child(1){transition: all .5s ease; transition-delay: .5s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point.active .point-list > li:nth-child(2){transition: all .5s ease; transition-delay: .75s; opacity: 1; top: 0;}
#programBbabam .program-wrap > .bbabam-hangul > .diff-point.active .point-list > li:nth-child(3){transition: all .5s ease; transition-delay: 1s; opacity: 1; top: 0;}

#programVR{padding-bottom: 0;}
#programVR .vr-bg{height: calc((var(--vh, 1vh) * 100) - (75px + 58px)); min-height: 700px;}
#programVR .vr-bg.bg1{position: relative; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('/resources/images/pages/vr/vr1.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
#programVR .vr-bg.bg1 > .outer{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url('/resources/images/pages/vr/vr1-1.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
#programVR .vr-bg.bg1 > .message-box-wrapper{height: 100%; width: 100%; background-color: rgba(0,0,0,0);}
#programVR .vr-bg.bg1 > .message-box-wrapper > .container{height: 100%;}
#programVR .vr-bg.bg1 > .message-box-wrapper > .container > .message-box-wrap{display: flex; flex-direction: row; align-items: center; justify-content: center;}
#programVR .vr-bg.bg1 > .message-box-wrapper > .container > .message-box-wrap > .message-box{color: white; display: flex; flex-direction: column; align-items: center; text-align: center;}
#programVR .vr-bg.bg1 > .message-box-wrapper > .container > .message-box-wrap > .message-box > .title{position: relative; top: 50px; opacity: 0; font-size: 80px; font-family: 'GongGothicMedium';}
#programVR .vr-bg.bg1 > .message-box-wrapper > .container > .message-box-wrap > .message-box > .line{position: relative; top: 50px; opacity: 0; width: 2px; height: 50px; background-color: white; margin-bottom: 20px;}
#programVR .vr-bg.bg1 > .message-box-wrapper > .container > .message-box-wrap > .message-box > .content{position: relative; top: 50px; opacity: 0; font-size: 20px; line-height: 1.4;}
#programVR .vr-bg.bg1.active > .message-box-wrapper{transition: all .5s ease; background-color: rgba(0,0,0,0.7);}
#programVR .vr-bg.bg1.active > .message-box-wrapper > .container > .message-box-wrap > .message-box > .title{transition: all .5s ease; transition-delay: .5s; top: 0; opacity: 1;}
#programVR .vr-bg.bg1.active > .message-box-wrapper > .container > .message-box-wrap > .message-box > .line{transition: all .5s ease; transition-delay: 1s; top: 0; opacity: 0.5;}
#programVR .vr-bg.bg1.active > .message-box-wrapper > .container > .message-box-wrap > .message-box > .content{transition: all .5s ease; transition-delay: 1.5s; top: 0; opacity: 1;}
#programVR .vr-bg.bg2{background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/resources/images/pages/vr/vr2.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat;}
#programVR .vr-bg.bg2 > .container{height: 100%;}
#programVR .vr-bg.bg2 > .container > .content-wrap{height: 100%; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; overflow: hidden;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper{position: relative; width: 400px; height: 100%; overflow: hidden;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: calc((360px * 6 / 10) + 20px * 2); padding: 20px;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap > ul{display: flex; flex-direction: column; gap: 10px;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap > ul > li{width: 100%; height: calc(360px * 6 / 10); background-color: gray; opacity: 0.5; border-radius: 10px; overflow: hidden;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap > ul > li > img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap > ul > li.active{transition: all .5s ease; transform: scale(1.1); opacity: 1; z-index: 100;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .content{width: calc(100% - 400px - 20px); margin-left: 20px;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .content span{color: var(--color1);}
#programVR .vr-bg.bg2 > .container > .content-wrap > .content > .title{position: relative; left: -50px; opacity: 0; font-size: 50px; color: white; font-family: 'GongGothicMedium'; margin-bottom: 30px;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .content > .title > span{font-family: 'GongGothicMedium';}
#programVR .vr-bg.bg2 > .container > .content-wrap > .content > .message{position: relative; left: -50px; opacity: 0; color: white; font-size: 20px; line-height: 1.5;}
#programVR .vr-bg.bg2 > .container > .content-wrap > .content > .message > .line{opacity: 0.5; height: 70px; width: 2px; margin: 10px 0; background-color: white;}
#programVR .vr-bg.bg2.active > .container > .content-wrap > .content > .title{transition: all .5s ease; left: 0; opacity: 1;}
#programVR .vr-bg.bg2.active > .container > .content-wrap > .content > .message{transition: all .5s ease; transition-delay: .5s; left: 0; opacity: 1;}
#programVR .bg-back{min-height: calc((var(--vh, 1vh) * 100) - (75px + 58px));}
#programVR .bg-back > .vr-bg{position: sticky; left: 0; top: calc(75px + 58px);}

#programVR .category-wrapper{position: relative; padding: 80px 0; background-color: #1A2835; overflow: hidden; z-index: 10;}
#programVR .category-wrapper > .category-bg{position: absolute; background-image: url('/resources/images/bg2.png'); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: -1;}
#programVR .category-wrapper > .category-bg:nth-child(1){left: 0; top: 0; width: 20%; padding-top: calc(30% * 0.53); transform: translateY(-15%);}
#programVR .category-wrapper > .category-bg:nth-child(2){right: 0; top: 50%; height: 50%; padding-left: calc(50% * 0.57); transform: translateY(-50%) rotate(-90deg);}
#programVR .category-wrapper > .title-wrap{margin-bottom: 80px;}
#programVR .category-wrapper > .title-wrap .title{position: relative; left: -50px; opacity: 0; font-size: 30px; color: white;}
#programVR .category-wrapper > .title-wrap .title > .sub-title{position: relative; left: -50px; opacity: 0; font-family: 'GongGothicMedium';  font-size: 50px; color: #1B99D0; font-weight: 100;}
#programVR .category-wrapper > .title-wrap .title > .sub-title > strong{font-family: inherit; font-weight: 800;}
#programVR .category-wrapper > .tablet-wrap{display: flex; flex-direction: row; align-items: flex-start;}
#programVR .category-wrapper > .tablet-wrap > .tablet{position: relative; width: 40%; padding-top: calc(40% * 6 / 10); background-color: black; border-radius: 10px;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .inner{position: absolute; left: 50%; top: 50%; width: calc(100% - 40px * 2); height: calc(100% - 40px * 2); border-radius: 10px; background-color: white; transform: translate(-50%, -50%); overflow: hidden;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .inner > ul{position: relative; width: 300%; height: 100%; display: flex; flex-direction: row;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .inner > ul > li{width: calc(100% / 3); height: 100%;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .inner > ul > li > img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap{position: absolute; right: 0; top: 50%; width: 40px; height: calc(100% - 40px * 2); transform: translateY(-50%); display: flex; flex-direction: row; align-items: center;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap > ul{padding: 10px; display: flex; flex-direction: column; gap: 20px; align-items: center;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap > ul > li{width: 10px; height: 10px; border-radius: 50%; background-color: gray;}
#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap > ul > li.active{width: 20px; height: 20px; background-color: #034B82;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap{width: calc(60% - 50px - 50px); margin: 0 50px;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul{max-width: 700px;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul > li{position: relative; left: -50px; opacity: 0; margin-bottom: 30px;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul > li:last-child{margin-bottom: 0;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul > li > .title{background-color: #1B99D0; color: white; font-size: 25px; padding: 10px 20px; width: 60%; border-radius: 0 50px 0 0;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul > li > .content{background-color: #24576D; color: white; border: 1px solid #1B99D0; font-size: 16px; padding: 16px; border-radius: 0 32px 32px 0; line-height: 1.4;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul > li.active > .title{background-color: #034B82;}
#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul > li.active > .content{background-color: white; color: black; border: 1px solid white;}

#programVR .category-wrapper.active > .title-wrap .title{transition: all .5s ease; left: 0; opacity: 1;}
#programVR .category-wrapper.active > .title-wrap .title > .sub-title{transition: all .5s ease; transition-delay: .5s; left: 0; opacity: 1;}
#programVR .category-wrapper.active > .tablet-wrap > .category-wrap > ul > li:nth-child(1){transition: all .5s ease; transition-delay: 1s; left: 0; opacity: 1;}
#programVR .category-wrapper.active > .tablet-wrap > .category-wrap > ul > li:nth-child(2){transition: all .5s ease; transition-delay: 1.5s; left: 0; opacity: 1;}
#programVR .category-wrapper.active > .tablet-wrap > .category-wrap > ul > li:nth-child(3){transition: all .5s ease; transition-delay: 2s; left: 0; opacity: 1;}

#programABC{padding-bottom: 0;}
#programABC .abc-logo-wrap{background-color: #FFF1EE; padding-top: 50px; background-image: url('/resources/images/pages/abc/forest1.png'); background-repeat: no-repeat; background-size: 30%; background-position: left -26% bottom 0;}
#programABC .abc-logo-wrap > .logo1-wrapper{background-image: url('/resources/images/pages/abc/book1.png'), url('/resources/images/pages/abc/forest1.png'); background-repeat: no-repeat; background-size: 40%, 30%; background-position: left 0 top 0, right -12% bottom 0;}
#programABC .abc-logo-wrap > .logo1-wrapper .logo-wrap{text-align: center;}
#programABC .abc-logo-wrap > .logo1-wrapper .logo-wrap > img{position: relative; top: 50px; opacity: 0; width: 100%; max-width: 400px;}
#programABC .abc-logo-wrap > .logo2-wrapper{position: relative; padding-top: 80px; width: 100%; overflow: hidden;}
#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper{position: relative; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;}
#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .content-wrap{width: calc(100% - 500px); padding-bottom: 80px;}
#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .content-wrap > .title{opacity: 0; width: 100%; max-width: 450px; margin-bottom: 30px;}
#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .content-wrap > .title > img{width: 100%;}
#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .content-wrap > .content{opacity: 0; font-size: 20px; line-height: 1.5;}
#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .child-wrap{position: relative; right: -50px; opacity: 0; width: 600px; margin-left: -100px;}
#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .child-wrap > img{width: 100%;}
#programABC .abc-logo-wrap > .logo1-wrapper.active .logo-wrap > img{transition: all .5s ease; top: 0; opacity: 1;}
#programABC .abc-logo-wrap > .logo2-wrapper.active .content-wrapper > .child-wrap{transition: all .5s ease; transition-delay: .5s; right: 0; opacity: 1;}
#programABC .abc-logo-wrap > .logo2-wrapper.active .content-wrapper > .content-wrap > .title{transition: all .5s ease; transition-delay: 1s; opacity: 1;}
#programABC .abc-logo-wrap > .logo2-wrapper.active .content-wrapper > .content-wrap > .content{transition: all .5s ease; transition-delay: 1.5s; opacity: 1;}
#programABC .way-wrapper{padding-top: 50px; overflow: hidden;}
#programABC .way-wrapper > .milestone-wrap{background-image: url('/resources/images/pages/abc/forest2.png'), url('/resources/images/pages/abc/forest2.png'), url('/resources/images/pages/abc/forest2.png'); background-size: 18%, 20%, 15%; background-position: left -15% top 80px, right -10% top 0, right 10% top 80px; background-repeat: no-repeat;}
#programABC .way-wrapper > .milestone-wrap .milestone{display: flex; flex-direction: row; align-items: flex-start;}
#programABC .way-wrapper > .milestone-wrap .milestone > img{opacity: 0; width: 180px;}
#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap{width: calc(100% - 180px - 20px); margin-left: 20px;}
#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .title{opacity: 0; font-size: 30px; margin-bottom: 10px;}
#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .content{opacity: 0; font-size: 20px; font-family: 'NanumsquareAcl'; line-height: 1.4;}
#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .content > strong{font-family: 'NanumsquareAcb';}
#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .content > strong.yellow{color: #FFBD2C;}
#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .content > strong.red{color: #E1784B;}
#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .content > strong.blue{color: #3980E0;}
#programABC .way-wrapper > .milestone-wrap.active .milestone > img{transition: all .5s ease; opacity: 1;}
#programABC .way-wrapper > .milestone-wrap.active .milestone > .content-wrap > .title{transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#programABC .way-wrapper > .milestone-wrap.active .milestone > .content-wrap > .content{transition: all .5s ease; transition-delay: 1s; opacity: 1;}
#programABC .way-wrapper .way-wrap{background-image: url('/resources/images/pages/abc/forest1.png'), url('/resources/images/pages/abc/forest1.png'); background-size: 30%, 30%; background-position: left -15% bottom 0, right -10% bottom 0; background-repeat: no-repeat;}
#programABC .way-wrapper .way-wrap .way-bg{position: relative; padding-top: 41%; background-image: url('/resources/images/pages/abc/way.png'); background-position: center bottom; background-size: contain; background-repeat: no-repeat;}
#programABC .way-wrapper .way-wrap .way-bg > .circle{position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain;}
#programABC .way-wrapper .way-wrap .way-bg > .circle.yellow{width: 10%; padding-top: 10%; left: 50%; top: 0; background-image: url('/resources/images/pages/abc/circle-yellow.png'); transform: translate(-50%, -70%);}
#programABC .way-wrapper .way-wrap .way-bg > .circle.red{width: 8%; padding-top: 8%; right: 0; top: 20%; background-image: url('/resources/images/pages/abc/circle-red.png'); transform: translate(20px, -50%);}
#programABC .way-wrapper .way-wrap .way-bg > .circle.blue{width: 12%; padding-top: 12%; left: 0; top: 46%; background-image: url('/resources/images/pages/abc/circle-blue.png'); transform: translate(-20px, -50%);}
#programABC .way-wrapper .way-wrap .way-bg > .child-wrap{position: absolute; width: 40%; left: 50%; bottom: -100%; transform: translateX(-45%); padding: 0;}
#programABC .way-wrapper .way-wrap .way-bg > .child-wrap > .child{width: 100%; display: inline-block; vertical-align: bottom;}
#programABC .way-wrapper .way-wrap .way-bg > .child-wrap > .question{opacity: 0; position: absolute; width: 30%; left: 0; top: 0; transform: translate(-30%, -70%);}
#programABC .way-wrapper .way-wrap.active .way-bg > .child-wrap{transition: all .5s ease; bottom: 0;}
#programABC .way-wrapper .way-wrap.active .way-bg > .child-wrap > .question{transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#programABC .program{background-color: #FFF1EE;}
#programABC .program > .title-wrapper{position: relative; top: 50px; opacity: 0; background-color: #FFBD2C; border-radius: 0 0 100px 100px; padding: 20px; margin-bottom: 50px;}
#programABC .program > .title-wrapper .title-wrap{display: flex; flex-direction: row; align-items: flex-end;}
#programABC .program > .title-wrapper .title-wrap > img{width: 180px;}
#programABC .program > .title-wrapper .title-wrap > .title{width: calc(100% - 180px * 2); font-size: 20px; text-align: center; color: white; font-family: 'NanumSquareAcb';}
#programABC .program > .title-wrapper .title-wrap > .title > strong{font-size: 35px; font-family: 'NanumSquareAceb';}
#programABC .program > .title-wrapper .title-wrap > .title > .sub-title{display: inline-block; font-size: 16px; background-color: white; padding: 0.5em 1em; margin-bottom: 20px; border-radius: 2em; color: #E1784B; font-family: 'NanumSquareAceb';}
#programABC .program > .title-wrapper > .arrow-wrap{position: absolute; left: 50%; top: 100%; width: 60px; transform: translate(-50%, -50%); padding: 15px 20px; background-color: #FFBD2C; border-radius: 50%;}
#programABC .program > .title-wrapper > .arrow-wrap > .arrow{width: 100%; padding-top: 100%; background-color: #E1784B; mask-image: url('/resources/images/icons/arrow1.png'); -webkit-mask-image: url('/resources/images/icons/arrow1.png'); transform: rotate(90deg);}
#programABC .program > .title-wrapper.active{transition: all .5s ease; top: 0; opacity: 1;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top{display: flex; flex-direction: row;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet{position: relative; opacity: 0; width: calc(100% - 300px - 20px); padding-top: calc((100% - 300px - 20px) * 6 / 10); border: 2px solid var(--color6); background-color: white; border-radius: 40px;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .inner{position: absolute; width: calc(100% - 40px * 2); height: calc(100% - 40px * 2); left: 50%; top: 50%; border: 2px solid var(--color6); border-radius: 40px; transform: translate(-50%, -50%); overflow: hidden;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .inner > ul{position: relative; width: 100%; height: 100%;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .inner > ul > li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .inner > ul > li > img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .inner > ul > li.active{transition: all .5s ease; opacity: 1;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .nav-wrap{position: absolute; left: 50%; bottom: 0; width: calc(100% - 40px * 2); height: 40px; transform: translateX(-50%); text-align: center;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .nav-wrap > ul{display: inline-flex; flex-direction: row; padding: 10px; gap: 20px;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .nav-wrap > ul > li{width: 20px; height: 20px; border-radius: 50%; background-color: #FFEBB8;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .nav-wrap > ul > li.active{background-color: #FFA015;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap{display: flex; opacity: 0; width: 300px; flex-direction: column; margin-left: 20px; justify-content: center;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav{display: flex; flex-direction: column; gap: 20px;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li{display: flex; flex-direction: row; align-items: center; background-color: white; padding: 20px; border-radius: 60px; gap: 20px;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:hover{cursor: pointer; font-weight: bold;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li > .circle{position: relative; width: 50px; height: 50px; font-size: 25px; z-index: 10;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li > .circle > .inner{position: absolute; width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: row; align-items: center; justify-content: center; }
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li > .circle::after{position: absolute; content: ''; width: calc(100% + 5px * 2); height: calc(100% + 5px * 2); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li > .circle::before{position: absolute; content: ''; width: calc(100% + 10px * 2); height: calc(100% + 10px * 2); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(1){border: 2px solid #FFBD2C;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(1) > .circle > .inner{background-color: #FFBD2C; color: white;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(1):hover{color: #FFBD2C;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(1):hover > .circle::after{background-color: #FFDD99;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(1):hover > .circle::before{background-color: #FFF3DE;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(1).active > .circle::after{background-color: #FFDD99;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(1).active > .circle::before{background-color: #FFF3DE;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(2){border: 2px solid #3980E0;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(2) > .circle > .inner{background-color: #3980E0; color: white;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(2):hover{color: #3980E0;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(2):hover > .circle::after{background-color: #A9D6FF;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(2):hover > .circle::before{background-color: #DCEEFF;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(2).active > .circle::after{background-color: #A9D6FF;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(2).active > .circle::before{background-color: #DCEEFF;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(3){border: 2px solid #E1784B;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(3):hover{color: #E1784B;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(3) > .circle > .inner{background-color: #E1784B; color: white;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(3):hover > .circle::after{background-color: #F4CEBE;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(3):hover > .circle::before{background-color: #F9E4DB;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(3).active > .circle::after{background-color: #F4CEBE;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav > li:nth-child(3).active > .circle::before{background-color: #F9E4DB;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile{display: none;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control{display: flex; flex-direction: row; padding: 10px 0;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li{flex: 1; text-align: center;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li > .circle{position: relative; display: inline-block; width: 50px; height: 50px; font-size: 25px; z-index: 10;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li > .circle > .inner{position: absolute; width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: row; align-items: center; justify-content: center; }
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li > .circle::after{position: absolute; content: ''; width: calc(100% + 5px * 2); height: calc(100% + 5px * 2); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li > .circle::before{position: absolute; content: ''; width: calc(100% + 10px * 2); height: calc(100% + 10px * 2); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(1) > .circle > .inner{background-color: #FFBD2C; color: white;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(1).active > .circle::after{background-color: #FFDD99;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(1).active > .circle::before{background-color: #FFF3DE;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(2) > .circle > .inner{background-color: #3980E0; color: white;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(2).active > .circle::after{background-color: #A9D6FF;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(2).active > .circle::before{background-color: #DCEEFF;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(3) > .circle > .inner{background-color: #E1784B; color: white;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(3).active > .circle::after{background-color: #F4CEBE;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-control > li:nth-child(3).active > .circle::before{background-color: #F9E4DB;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-view{position: relative; width: 100%; height: 100px; margin-top: -40px;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-view > li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; flex-direction: row; align-items: center; justify-content: center; display: none; background-color: white; border-radius: 40px; font-size: 20px; font-weight: bold;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-view > li.active{display: flex;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-view > li:nth-child(1){border: 2px solid #FFBD2C; color: #FFBD2C;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-view > li:nth-child(2){border: 2px solid #3980E0; color: #3980E0;}
#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile > .nav-view > li:nth-child(3){border: 2px solid #E1784B; color: #E1784B;}
#programABC .program > .tablet-wrapper > .bottom{padding: 50px 0; opacity: 0;}
#programABC .program > .tablet-wrapper > .bottom ul{position: relative; width: 100%; height: 300px;}
#programABC .program > .tablet-wrapper > .bottom ul > li{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; padding: 40px 100px; border-radius: 200px; line-height: 1.4;}
#programABC .program > .tablet-wrapper > .bottom ul > li > .arrow{position: absolute; width: 0; left: 30%; top: 0; transform: translate(-50%, -100%);}
#programABC .program > .tablet-wrapper > .bottom ul > li strong{font-family: 'NanumSquareAceb'; font-size: 20px;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(1){background-color: #FFF2CF;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(1) > .arrow{border-bottom: 20px solid #FFF2CF; border-left: 10px solid transparent; border-right: 10px solid transparent;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(2){background-color: #E6F1FF;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(2) > .arrow{border-bottom: 20px solid #E6F1FF; border-left: 10px solid transparent; border-right: 10px solid transparent;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(2) strong{color: #3980E0;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3){background-color: #FFE0D9;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .arrow{border-bottom: 20px solid #FFE0D9; border-left: 10px solid transparent; border-right: 10px solid transparent;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords{display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 1em;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong{display: block; text-align: center;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong:nth-child(1){grid-column: 1 / 2;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong:nth-child(2){grid-row: 2 / 3; grid-column: 2 / 3;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong:nth-child(3){grid-column: 3 / 4;}
#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong{color: #E1784B;}
#programABC .program > .tablet-wrapper > .bottom ul > li.active{transition: all .5s ease; opacity: 1;}
#programABC .program > .tablet-wrapper.active .tablet-wrap > .top > .tablet{transition: all .5s ease; opacity: 1;}
#programABC .program > .tablet-wrapper.active .tablet-wrap > .top > .message-nav-wrap{transition: all .5s ease; transition-delay: .5s; opacity: 1;}
#programABC .program > .tablet-wrapper.active > .bottom{transition: all .5s ease; transition-delay: .5s; opacity: 1;}

#newsNotice .board-wrap > .board .row > .title{width: calc(100% - 5.5em);}
#newsNotice .board-wrap > .board .row > .reg-date{width: 5.5em;}

#contactQuestion .message{font-size: 25px; margin-bottom: 50px; line-height: 1.5;}

#loginPage > .login-wrapper{position: relative; padding: 50px 0;}
#loginPage > .login-wrapper > .login-bg{position: absolute; width: 30%; padding-top: calc(30% * 0.79); background-image: url('/resources/images/bg2.png'); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1;}
#loginPage > .login-wrapper > .login-bg:nth-of-type(1){left: 0; top: 50%; transform: translate(0, -50%) rotate(-90deg);}
#loginPage > .login-wrapper > .login-bg:nth-of-type(2){right: 0; top: 50%; transform: translate(0, -50%) rotate(90deg);}
#loginPage > .login-wrapper .login-wrap{width: 100%; max-width: 700px; margin: 0 auto;}

@media(max-width: 1200px){
	.page{padding-top: 64.55px;}
	.page > .bg{margin-bottom: 50px;}
	
	#aboutCompany .company-image-wrap{grid-column: 1 / 13;}
	#aboutCompany .company-description{grid-column: 1 / 13; margin-top: 1em;}
	#aboutCompany .company-description > br:not(.mobile){display: none;}
	
	#aboutCompany .circle-bar.gray{flex-direction: column; grid-column: 1 / 13; margin-bottom: 50px;}
	#aboutCompany .circle-bar.gray > .circle{margin-right: 0; margin-bottom: -30px;}
	#aboutCompany .circle-bar.gray > .content{padding-left: 30px; width: 100%;}
	
	#aboutCompany .circle-bar.blue{flex-direction: column-reverse;}
	#aboutCompany .circle-bar.blue > .circle{width: 300px; height: 300px; margin-left: 0; margin-bottom: -80px;}
	#aboutCompany .circle-bar.blue > .content{padding-right: 30px; padding-top: 100px; width: 100%; text-align: left;}
	#aboutCompany .circle-bar.blue > .content > br:not(.mobile){display: none;}
	
	#aboutBrand .block1 .ci-wrap{grid-column: 1 / 13;}
	#aboutBrand .block1 .color-graph{grid-column: 1 / 13; width: 100%; max-width: max-content; margin: 0 auto; margin-top: 50px;}
	#aboutBrand .block1 .color-graph > .graph{flex-direction: column; }
	#aboutBrand .block1 .color-graph > .graph:first-child{margin-bottom: 40px;}
	#aboutBrand .block1 .color-graph > .graph > .cmyk-list{width: 100%;}
	
	#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap{flex-direction: column; gap: 10px; padding: 20px 0;}
	#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap > .x{width: 30px; height: 30px;}
	#programBbabam .bbabam-universe > .land > .grass1 .textbox-wrap > .x > span{height: 5px; border-radius: 5px;}
	#programBbabam .key-points-wrapper > .title-wrap .bg-title{margin-top: 50px;}
	#programBbabam .key-points-wrapper > .title-wrap .title{font-size: 20px;}
	#programBbabam .key-points-wrapper > .title-wrap .title > .sub-title{font-size: 30px; margin-top: 30px;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point{position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 20px;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .inner{position: relative; left: 0; top: 0; width: 100%; transform: translateY(0);}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .inner > .title{font-size: 30px;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .inner > .content{font-size: 16px;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point > .inner > .content > br{display: none;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points{padding-top: 0;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1){width: 100%; left: 0; padding-top: 0; padding: 20px; transform: translate(0,0); top: 0;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .bg{mask-image: none; -webkit-mask-image: none;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .inner{padding-top: 0;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .inner > .title{text-align: left;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(1) > .inner > .content{text-align: left;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2){width: 100%; right: 0; padding-top: 0; padding: 20px;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .bg{mask-image: none; -webkit-mask-image: none;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .inner{padding-left: 0;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .inner > .title{text-align: right;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(2) > .inner > .content{text-align: right;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3){width: 100%; left: 0; padding-top: 0; padding: 20px; order: 2;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .bg{mask-image: none; -webkit-mask-image: none;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .inner{padding-right: 0;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .inner > .title{text-align: left;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(3) > .inner > .content{text-align: left;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4){width: 100%; right: 0; padding-top: 0; padding: 20px;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .bg{mask-image: none; -webkit-mask-image: none;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .inner{padding-right: 0;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .inner > .title{text-align: right;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(4) > .inner > .content{text-align: right;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5){width: 100%; left: 0; padding-top: 0; padding: 20px;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .bg{mask-image: none; -webkit-mask-image: none;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .inner{padding-left: 0;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .inner > .title{text-align: left;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points > .point:nth-child(5) > .inner > .content{text-align: left;}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points.active > .point:hover > .inner > .title{transition: all .5s ease; transform: scale(1);}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points.active > .point:hover > .inner > .content{transition: all .5s ease; transform: scale(1);}
	#programBbabam .key-points-wrapper > .key-points-wrap .key-points.active > .point:hover > .emphasis{transition: all .5s ease; opacity: 0;}
	#programBbabam .program-wrap > .bbabam-kids .description-wrap > .description{flex: auto;}
	#programBbabam .program-wrap > .bbabam-math > .study-method .step-list{grid-template-columns: repeat(2, 1fr);}
	
	#programVR .vr-bg{height: calc((var(--vh, 1vh) * 100) - 64.55px);}
	#programVR .bg-back > .vr-bg{top: 64.55px;}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .content{margin-top: 50px;}
	#programVR .vr-bg.bg2 > .container{padding: 0;}
	#programVR .vr-bg.bg2 > .container > .content-wrap{flex-direction: column;}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper{width: 100%; height: calc((360px * 6 / 10) + 20px * 2);}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap{top: 0; left: 50%; transform: translate(-50%, 0); width: 400px; height: 100%; max-width: 100%;}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap > ul{flex-direction: row; width: fit-content;}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .image-list-wrapper > .image-list-wrap > ul > li{width: 360px; max-width: calc(100vw - 20px * 2);}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .content{width: 100%; margin-left: 0; padding: 0 20px;}
	#programVR .category-wrapper > .tablet-wrap > .tablet > .inner{width: calc(100% - 20px * 2); height: calc(100% - 20px * 2);}
	#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap{width: 20px; height: calc(100% - 20px * 2);}
	#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap > ul{padding: 5px; gap: 10px;}
	#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap > ul > li{width: 5px; height: 5px;}
	#programVR .category-wrapper > .tablet-wrap > .tablet > .nav-wrap > ul > li.active{width: 10px; height: 10px;}
	
	#programABC .abc-logo-wrap > .logo1-wrapper{background-image: url('/resources/images/pages/abc/forest1.png'); background-size: 30%; background-position: right -12% bottom 0;}
	#programABC .abc-logo-wrap > .logo2-wrapper{background-image: url('/resources/images/pages/abc/book1.png'); background-repeat: no-repeat; background-size: 60%; background-position: left 0 top 0;}
	#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper{flex-direction: column-reverse;}
	#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .content-wrap{width: 100%;}
	#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .child-wrap{width: 100%; max-width: 600px; margin-left: 0; margin-right: -100px; margin-bottom: 80px;}
	#programABC .way-wrapper > .milestone-wrap .milestone{align-items: center;}
	#programABC .way-wrapper > .milestone-wrap .milestone > img{width: 100%; max-width: 150px;}
	#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap{width: calc(100% - 150px + 20px); margin-left: -20px;}
	#programABC .program > .title-wrapper .title-wrap > img{display: none;}
	#programABC .program > .title-wrapper .title-wrap > .title{width: 100%;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .inner{width: calc(100% - 20px * 2); height: calc(100% - 20px * 2); border-radius: 20px;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .nav-wrap{width: calc(100% - 20px * 2); height: 20px;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .nav-wrap > ul{padding: 5px; gap: 10px;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet > .nav-wrap > ul > li{width: 10px; height: 10px;}
}

@media(max-width: 700px){
	.page > .bg .page-name{font-size: 25px;}
	.page > .bg .page-description{font-size: 30px;}
	
	#aboutCompany .company-description{font-size: 16px;}
	#aboutCompany .catchphrase{font-size: 37px;}
	#aboutCompany .image-hr .title{font-size: 30px;}
	#aboutCompany .image-hr .content{font-size: 20px;}
	#aboutCompany .circle-bar.gray > .content{font-size: 16px;}
	#aboutCompany .circle-bar.blue > .content{font-size: 16px;}
	#aboutCompany .circle-bar.blue > .content > strong{font-size: 20px;}
	#aboutCompany .end-message{font-size: 20px;}
	
	#aboutBrand .block1 .color-graph > .graph > .color-circle{width: 130px; height: 130px;}
	#aboutBrand .block1 .color-graph > .graph > .color-circle > .name{font-size: 16px;}
	#aboutBrand .block2 .brand-list{grid-template-columns: 1fr;}
	#aboutBrand .block3 .characters-wrap{background-image: none; padding-top: 0;}
	#aboutBrand .block3 .characters-wrap > .group-name{position: relative; width: 80%; padding-top: calc(80% * 0.575); top: 0; margin-bottom: 50px;}
	#aboutBrand .block3 .characters-wrap > .character-list{position: relative; padding: 0; grid-template-columns: repeat(2, 1fr);}
	#aboutBrand .block3 .characters-wrap > .character-list > li{margin-bottom: 50px;}
	#aboutBrand .block3 .characters-wrap > .character-list > li.freddie{order: 4;}
	#aboutBrand .block3 .characters-wrap > .character-list > li.tori{order: 3;}
	#aboutBrand .block3 .characters-wrap > .character-list > li.rano{order: 1;}
	#aboutBrand .block3 .characters-wrap > .character-list > li.rani{order: 2;}
	#aboutBrand .block3 .characters-wrap > .character-list > li.lulu{order: 5;}
	#aboutBrand .block3 .characters-wrap > .character-list > li.bruno{order: 6;}
	#aboutBrand .block3 .characters-wrap.active > .group-name{top: 0;}
	
	#programBbabam .bbabam-universe > .sky .logo-wrap > .message{font-size: 16px;}
	#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.freddie{display: none;}
	#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.tori{display: none;}
	#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.lulu{display: none;}
	#programBbabam .bbabam-universe > .land > .character-wrapper .characters-wrap > .character-list > li.bruno{display: none;}
	#programBbabam .program-wrap .program-title-wrap > .container{padding: 0;}
	#programBbabam .program-wrap .program-title{padding: 20px; font-size: 25px;}
	#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet{width: 100%; padding-top: calc(100% * 6 / 10);}
	#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .inner{width: calc(100% - 20px * 2); height: calc(100% - 20px * 2);}
	#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .nav-wrap{width: calc(100% - 20px * 2); height: 20px;}
	#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .nav-wrap > ul{padding: 5px; gap: 10px;}
	#programBbabam .program-wrap > .bbabam-kids > .tablet-wrapper .tablet-wrap > .tablet > .nav-wrap > ul > li{width: 10px; height: 10px;}
	#programBbabam .program-wrap .logo-text-wrap .container{font-size: 16px; text-align: center;}
	#programBbabam .program-wrap > .bbabam-kids .description-wrap{flex-direction: column; justify-content: flex-start;}
	#programBbabam .program-wrap .logo-text-wrap .logo{grid-column: 1 / 13; max-width: 200px; left: 50%; transform: translateX(-50%);}
	#programBbabam .program-wrap .logo-text-wrap .content{grid-column: 1 / 13;}
	#programBbabam .program-wrap .logo-text-wrap .content > br{display: none;}
	#programBbabam .program-wrap > .bbabam-math > .study-method{padding: 70px 0 50px 0;}
	#programBbabam .program-wrap > .bbabam-math > .study-method .method-title{font-size: 25px;}
	#programBbabam .program-wrap > .bbabam-math > .study-method .step-list{grid-template-columns: 1fr; gap: 20px;}
	#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li > .title{font-size: 20px;}
	#programBbabam .program-wrap > .bbabam-math > .study-method .step-list > li > .content > .name{font-size: 16px;}
	#programBbabam .program-wrap .curriculum{padding-top: 60px;}
	#programBbabam .program-wrap .curriculum .curriculum-name{font-size: 20px;}
	#programBbabam .program-wrap .curriculum .table-caption{font-size: 16px;}
	#programBbabam .program-wrap .curriculum .table > .thead{margin-bottom: 20px;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .foot-wrap{padding: 0; width: 0;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step{width: calc(100% / 3); font-size: 16px; border-radius: 20px; padding: 0.5em; margin-right: 10px;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step:last-of-type{margin-right: 0;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step1{border: 1px solid #FFCE4A; background-color: white; color: #FFCE4A;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step2{border: 1px solid #62BE62; background-color: white; color: #62BE62;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step3{border: 1px solid #2148D0; background-color: white; color: #2148D0;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step1.active{background-color: #FFCE4A; color: white;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step2.active{background-color: #62BE62; color: white;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step3.active{background-color: #2148D0; color: white;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner{border-radius: 0; overflow: visible; padding-bottom: 62px;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner > .name{border-radius: 20px; padding: 0.5em;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner > .content{position: absolute; top: 56px; width: 100%; display: none; color: black; padding: 0.5em; border-radius: 2em; font-size: 16px;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.inner.active > .content{left: 0; display: block;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step1.inner{background-color: white; border: none;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step2.inner{background-color: white; border: none;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step3.inner{background-color: white; border: none;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step1.inner > .name{border: 1px solid #FFCE4A; background-color: white; color: #FFCE4A;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step1.inner > .content{border: 1px solid #FFCE4A;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step2.inner > .name{border: 1px solid #62BE62; background-color: white; color: #62BE62;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step2.inner > .content{border: 1px solid #62BE62;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step3.inner > .name{border: 1px solid #2148D0; background-color: white; color: #2148D0;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step3.inner > .content{border: 1px solid #2148D0;}
	#programBbabam .program-wrap .curriculum .table > .tbody > .row > .step{display: none; width: calc(100% - 80px);}
	#programBbabam .program-wrap .curriculum .table > .tbody > .row > .step.active{display: flex;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step1.inner.active > .name{background-color: #FFCE4A; color: white;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step2.inner.active > .name{background-color: #62BE62; color: white;}
	#programBbabam .program-wrap .curriculum .table > .thead > .row > .step.step3.inner.active > .name{background-color: #2148D0; color: white;}
	#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list{flex-direction: column; gap: 20px;}
	#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li{flex: auto;}
	#programBbabam .program-wrap > .bbabam-hangul > .diff-point .point-list > li > .content-wrap > .content{min-height: 0;}
	
	#programVR .vr-bg.bg1 > .message-box-wrapper > .container > .message-box-wrap > .message-box > .title{font-size: 50px;}
	#programVR .vr-bg.bg1 > .message-box-wrapper > .container > .message-box-wrap > .message-box > .content{font-size: 16px;}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .content > .title{font-size: 30px;}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .content > .message{font-size: 16px;}
	#programVR .vr-bg.bg2 > .container > .content-wrap > .content > .message > br:not(.br2){display: none;}
	#programVR .category-wrapper > .title-wrap{margin-bottom: 50px;}
	#programVR .category-wrapper > .title-wrap .title{font-size: 20px;}
	#programVR .category-wrapper > .title-wrap .title > .sub-title{font-size: 30px;}
	#programVR .category-wrapper > .tablet-wrap{flex-direction: column; padding: 0 20px;}
	#programVR .category-wrapper > .tablet-wrap > .tablet{width: 100%; padding-top: calc(100% * 6 / 10);}
	#programVR .category-wrapper > .tablet-wrap > .category-wrap{width: 100%; margin: 0; margin-top: 30px;}
	#programVR .category-wrapper > .tablet-wrap > .category-wrap > ul > li > .title{width: 80%; font-size: 20px;}
	
	#programABC .abc-logo-wrap > .logo2-wrapper .content-wrapper > .content-wrap > .content > br:not(.mobile){display: none;}
	#programABC .way-wrapper > .milestone-wrap{padding-bottom: 80px;}
	#programABC .way-wrapper > .milestone-wrap .milestone{flex-direction: column;}
	#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap{width: 100%; margin-left: 0; margin-top: 20px;}
	#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .content{font-size: 17px;}
	#programABC .way-wrapper > .milestone-wrap .milestone > .content-wrap > .content > strong{font-size: 20px;}
	#programABC .way-wrapper .way-wrap .way-bg{padding-bottom: 30%; background-position: center top;}
	#programABC .way-wrapper .way-wrap .way-bg > .circle.red{top: 12%;}
	#programABC .way-wrapper .way-wrap .way-bg > .circle.blue{top: 27%;}
	#programABC .way-wrapper .way-wrap .way-bg > .child-wrap{width: 80%; max-width: 400px;}
	#programABC .program > .title-wrapper .title-wrap > .title > .sub-title{font-size: 13px;}
	#programABC .program > .title-wrapper .title-wrap > .title{font-size: 16px;}
	#programABC .program > .title-wrapper .title-wrap > .title > strong{font-size: 20px;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top{flex-direction: column;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .tablet{width: 100%; padding-top: calc(100% * 6 / 10);}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap{width: 100%; margin-left: 0; margin-top: 20px;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav{display: none;}
	#programABC .program > .tablet-wrapper .tablet-wrap > .top > .message-nav-wrap > #message-nav-mobile{display: block;}
	#programABC .program > .tablet-wrapper > .bottom{padding: 0; padding-top: 50px;}
	#programABC .program > .tablet-wrapper > .bottom > .container{padding: 0;}
	#programABC .program > .tablet-wrapper > .bottom ul{height: 450px;}
	#programABC .program > .tablet-wrapper > .bottom ul > li{padding: 40px 20px; border-radius: 0;}
	#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords{gap: 20px;}
	#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong:nth-child(1){grid-column: 1 / 4;}
	#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong:nth-child(2){grid-column: 1 / 4;}
	#programABC .program > .tablet-wrapper > .bottom ul > li:nth-child(3) > .keywords > strong:nth-child(3){grid-column: 1 / 4;}
	
	#contactQuestion .message{font-size: 23px;}
}

@media (max-height: 750px) and (orientation: landscape){
}