@font-face {
    font-family: 'Cafe24Ohsquare';
    src: url('/popup/fonts/Cafe24OhsquareAir-v2.0.ttf') format('truetype');
}
.gamja-flower-regular {
  font-family: "Gamja Flower", serif;
}
#preloading{background-color:#630aaf; background-image:url(/common/img/logo-vodaedu-wh.svg); background-size:10rem; background-repeat:no-repeat; background-position:center; z-index:100000; position:fixed; top:0; left:0; right:0; bottom:0}
html{
	font-size:17px;
}
body{
	color:#0a1b3f;
	font-family: 'Poppins','Noto Sans KR', sans-serif;
	word-break: keep-all;
	 user-select: none;	
}
/*
html {
  widht: 100%;
  height: 100%!important;
  overflow: hidden!important;
}

body {
  width: 100%;
  height: 100%!important;
  overflow: hidden!important;
}

#wrapper{
	position:fixed!important;
	left:0!important;
	right:0!important;
	bottom:0!important;
	top:0!important;
	overflow-x:hidden!important;
	overflow-y:scroll!important;
	height:100%!important;
}
*/

/* 크롬 & 엣지의 눈 아이콘 숨기기 */
input[type="password"]::-ms-reveal, 
input[type="password"]::-webkit-reveal, 
input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

.font-Poppins{
	font-family: 'Poppins', sans-serif;
}
.font-roboto-noto{
	font-family: 'Poppins','Noto Sans KR', sans-serif;	
}
.font-Righteous{font-family: 'Righteous', cursive;}	
a{
	color:#0a1b3f;
	text-decoration:none;
	cursor:pointer;
}
a:hover{
	color:#fb6c46;
	text-decoration:none;
}
 input:focus, input:active, .form-control:focus, .form-control:active, .form-select:focus, .form-select:active{
     outline: 0 !important;
     box-shadow: none !important;
}
input:-webkit-autofill,  input:-webkit-autofill:hover, input:-webkit-autofill:focus, .input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px rgb(255,255,255) inset !important;
    -webkit-text-fill-color: #212121 !important;
}
 .btn.focus, .btn:focus, button:focus{
     outline: 0!important;
     box-shadow: none!important;
}
 .btn{
     cursor:pointer;
}
 .btn-ss{font-size:.87rem;}
 .form-control:focus, .form-control:active{
     border:1px dotted #333333;
}
 .form-control[disabled]:focus, .form-control[disabled]:active{
     border:1px solid #e9ecef;
}
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: .12em;
}
.form-check-input:checked {
    background-color: #6711b1;
    border-color: #6711b1;
}
.form-check-input:focus {
    border-color: #6711b1;
}
.overflow-hidden{overflow:hidden}
.form-control:focus{
	  border: 1px solid #23cbe0!important;
}
.letter {
  /*This will let you apply transforms to the span char elements.*/
  display: inline-block;
  min-width:1rem;
}
textarea{
  resize: none; 
}
input[type=checkbox]~.custom-control-label, input[type=radio]~.custom-control-label{
	cursor: pointer;
	padding-left: 0.1rem;
}
table thead th{font-weight:400}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: var(--bs-gutter-x,1rem);
    padding-left: var(--bs-gutter-x,1rem);
}	
.sticky-top{background-color:rgba(255,255,255,.8)}
.modal-notice{max-width:1000px;}
.text-main{color:#630aaf}
.text-sub{color:#00c8d0}
.text-point1{color:#ffc82c}
.text-point3{color:#f99494}
.text-point4{color:#1a4a69}
.text-point5{color:#f77172}
.text-gray{color:#bdc6c6}
.bg-main{background-color:#630aaf; color:#ffffff}
.bg-sub{background-color:#00c8d0;  color:#ffffff}
.bg-point1{background-color:#ffc82c}
.bg-point2{background-color:#ffa7a7}
.bg-light-gray{background-color:#e7e7e7}
.btn-main{padding:0.7rem 2.5rem; background-color:#630aaf; color:#ffffff}
.btn-main:hover{background-color:#49078e; color:#ffffff}
.btn-sub{padding:.7rem 2.5rem; background-color:#00c8d0; color:#ffffff}
.btn-sub:hover{background-color:#00c8d0; color:#ffffff}
.btn-point1{padding:.7rem 2.5rem; background-color:#ffc82c; color:#ffffff}
.btn-point1:hover{background-color:#ff952c; color:#ffffff}
.btn-point5{padding:.7rem 2.5rem; background-color:#b29183; color:#ffffff}
.btn-point5:hover{background-color:#b27d6b; color:#ffffff}
.btn-line-main{border:1px solid #630aaf; background-color:#ffffff; color:#630aaf}
.btn-line-main:hover{border:1px solid #630aaf; background-color:#630aaf; color:#ffffff}
.btn-hide-login{
	width:0;
	height:0;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
.btn-point2 {
    padding: 0.7rem 2.5rem;
    background-color: #ffa7a7;
    color: #ffffff;
}
.btn-point2:hover {
    background-color: #ff8b8b;
    color: #ffffff;
}
.font-weight-400{font-weight:400}
.font-weight-600{font-weight:600}
.font-weight-700{font-weight:700}
.opcity-90{opacity:.9}
.opcity-80{opacity:.8}
.opcity-60{opacity:.7}
.opcity-60{opacity:.6}
.opcity-40{opacity:.4}
.opcity-20{opacity:.2}
.grayscale{filter: grayscale(90%); opacity:.9}
.icon-size-s{width:1rem;}
.mgb-8rem{
	margin-bottom:8rem;
}
 .swal-button {
     border:0;
     background-color:#FFC107;
     color: #ffffff!important;
     box-shadow: none;
     border-radius: 0;
     font-weight: 600;
     font-size: .97rem;
     padding: 10px 1.9rem;
     margin: 0;
     cursor: pointer;
     font-weight: 500;
     font-size: 1rem;
}
 .swal-button:hover{
     border:0;
     background-color:#ffa407!important;
     color:#ffffff!important;
}
 .swal-button:focus {
     box-shadow: none;
}
 .swal-button--cancel{
     background-color:#969faa;
     color:#ffffff;
}
 .swal-button--cancel:hover{
     background-color:#7e8996!important;
     color:#ffffff;
}
 .swal-button--danger{
     background-color:#df5763;
     ;
}
 .swal-button--danger:hover{
     background-color:#c64655!important;
}
 .swal-text{
     color: rgba(0,0,0,.9);
     font-size: 1.15rem;
}
 .swal-overlay--show-modal .swal-modal {
     will-change: unset;
}
.overNav-wrapper{position: fixed;
    bottom: 1rem;
    width: 30rem;
    /* left: 0; */
    /* right: 0; */
    left: 50%;
    z-index: 100;
    justify-content: center;
    align-items: center;
    display: flex;
    transform: translateX(-50%);}
.overNav{border-radius:.6rem; background: linear-gradient(0deg, rgba(99,10,175,.95) 0%, rgba(59,6,105,.95) 100%); padding:1rem;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
}
.overNav-wrapper .go-top img{width: calc(6rem + 2vw); transform:scale(.95); transition: all .15s; max-width: 7rem;}
.overNav-wrapper .go-top:hover img{color:#ffffff; transform:scale(1); transition: all .15s;}
.overNav-wrapper .robot img{ transform:scale(1); transition: all .15s; width: calc(1rem + 2vw); max-width:2rem;  }
.overNav-wrapper .robot:hover img{transform:scale(1.1); transition: all .15s; }
.overNav-wrapper .go-login{padding:.65rem 1.5rem; font-size:1rem; background-color:#05dfe7; color:#ffffff; border-radius:.3rem;}
.overNav-wrapper .go-login:hover{ background-color:#05cae7; color:#ffffff;}
.overNav-wrapper .go-logout{padding:.65rem .8rem; font-size:1rem; background-color:#efefef; color:#aaaaaa; border-radius:.3rem;}
.overNav-wrapper .go-logout:hover{ background-color:#efefef; color:#565656;}
.hero-wrapper{
    z-index: 1;
    height: 100vh;
	height: 100svh;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
}
section{
	height: 100vh;
	height: 100svh;  
	position:relative;  
	scroll-snap-align: start;
}
.section1{
  overflow:hidden;
  position:relative;
  position:sticky;
  display:flex;
}
.mh-110{height:calc(100vh - 110px - 3.5rem); height:calc(100svh - 110px - 3.5rem)}

.in-absolute-box-2{position:absolute; left:0; top:0; width:100%; height:100%;}
.topBgVideo{
position:absolute;
left:0;
top:0; 
overflow:hidden; 
background-image:url(../img/cookie.jpg);
background-size:cover;
filter: blur(0);
}
.video-overlay{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}
.video-option{
	position:absolute;
	right:1.5rem;
	top:1.5rem;
	z-index:2;
}
.video-click{
	position:absolute;
	right:3.7rem;
	top:3rem;
	
}
.video-click img{width:calc(1.5rem + 1vw);}

/*
.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0 ;
  }
  10% {
    -webkit-transform: translateY(-100px) opacity:1;
            transform: translateY(-100px) opacity:1;
  }
  50% {
    -webkit-transform: translateY(-100px) opacity:1;
            transform: translateY(-100px) opacity:1;
  }  
  60%, 100% {
    -webkit-transform: translateY(0) opacity:0;
            transform: translateY(0) opacity:0;
  }  
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
}
*/
.btn-video-muted, .btn-video-sound{
	width:2.4rem;
	height:2.4rem;
	border:2px solid #f77463;
	background-color:#fae2de;
	border-radius:50%;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
	position:relative;
	padding:0;
	display:block;
}
.btn-video-sound{
	display:none;
}
.btn-video-muted .in{
	width:calc(2.4rem - 4px);
	height:calc(2.4rem - 4px);	
	border-radius:50%;
	box-shadow: 0 0 5px rgba(255,184,177,1) inset;	
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.60282 10.0001L10 7.22056V16.7796L6.60282 14.0001H3V10.0001H6.60282ZM2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z' fill='rgba(232,122,116,1)'%3E%3C/path%3E%3C/svg%3E");
	background-position:center;
	background-size:1.3rem;
	background-repeat:no-repeat;
	display:inline-block;
	
}
.btn-video-sound .in{
	width:calc(2.4rem - 4px);
	height:calc(2.4rem - 4px);	
	border-radius:50%;
	box-shadow: 0 0 5px rgba(255,184,177,1) inset;	
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 7.22056L6.60282 10.0001H3V14.0001H6.60282L10 16.7796V7.22056ZM5.88889 16.0001H2C1.44772 16.0001 1 15.5524 1 15.0001V9.00007C1 8.44778 1.44772 8.00007 2 8.00007H5.88889L11.1834 3.66821C11.3971 3.49335 11.7121 3.52485 11.887 3.73857C11.9601 3.8279 12 3.93977 12 4.05519V19.9449C12 20.2211 11.7761 20.4449 11.5 20.4449C11.3846 20.4449 11.2727 20.405 11.1834 20.3319L5.88889 16.0001ZM20.4142 12.0001L23.9497 15.5356L22.5355 16.9498L19 13.4143L15.4645 16.9498L14.0503 15.5356L17.5858 12.0001L14.0503 8.46454L15.4645 7.05032L19 10.5859L22.5355 7.05032L23.9497 8.46454L20.4142 12.0001Z' fill='rgba(232,122,116,1)'%3E%3C/path%3E%3C/svg%3E");
	background-position:center;
	background-size:1.3rem;
	background-repeat:no-repeat;
	display:inline-block;
}



.typo-box{
	top:0;
	position:sticky;
	display:block;	
}
#voda-intro{
	width: 100vw;
	height: 100vh;
	height: 100svh;	
	justify-content: center;
	align-items: center;
	position:sticky;
	top:0;
	display:flex;
}
.section2 {
	width: 100vw;
	height: 100vh;
	height: 100svh;	
	justify-content: center;
	align-items: center;
	display: block;
	top:0;
	position: sticky;	
	overflow:hidden;
}
.split-line {
  overflow: hidden; z-index:2;
}
#voda-intro  .headCopy1{
	font-size: calc(1.5rem + 1.5vw);	
	font-weight:400;
}
#voda-intro .headCopy2 {
    font-size: calc(2rem + 1.5vw);
    font-weight: 700;
}
#voda-intro .headCopy1{
color:#a99588;
}
#voda-intro .headCopy1 .color{
color:#dd7f66;
position:relative;
}
#voda-intro .headCopy1 .point{
	position:relative;
}
#voda-intro .headCopy1 .point:before{
	content:'';
	position:absolute;
	top:0;
	width:5px;
	height:5px;
	border-radius:50%;
	left:50%;
	margin-left:-2.5px;
	background-color:#ff926f
}
#voda-intro .headCopy1 .color .point:before{
	background-color:#dd7f66
}
.journeys-wrapper-box{
	position:fixed;
	height: calc(9rem + 10vw);
	width:100%;
}
.journeys-wrapper {
  width: calc(9rem + 10vw);
  height: calc(9rem + 10vw);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.journeys-wrapper .symbol{
  width: calc(9rem + 10vw);
  height: calc(9rem + 10vw);
	background-image:url(../img/symbol.svg);
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
}
video {
object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
}
.video-wrapper {
	width: calc(7rem + 8vw);
	height: calc(7rem + 8vw);
	position: absolute;
	overflow: hidden;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius:50%;
	background-size:cover  
}

.copy-wrapper{
	width:100%;
	height:100vh;
	height: 100svh;	
}

.section3{
	width: 100vw;
	overflow: hidden;
	position:relative;
	position: sticky;
	overflow: hidden	
}
.mockup-gallery-box{
    width: 100vw;
    height: auto;
    justify-content: center;
    align-items: center;
    display: flex;
    position:  absolute;
    top: 0;
    overflow: visible;
    transform:translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) skew(0deg, 0deg);
	top: 50%;
	transform: translate(0, -50%);	
}
.mockup-gallery-wrapper {
    height: 100vh;
	height: 100svh;	
    max-height: 500px !important;
    align-items: center;
    display: flex;
	transform-style: preserve-3d;
	will-change: transform;	
	transform:rotateZ(-4deg);	
	
}
.mockup-gallery-wrapper img{
    width: 100%;
    object-fit: cover;
}
.mockup-gallery-wrapper .img-wrapper{
	width: 300px;
	height: 100%;
	display: flex;
	border-radius: .8rem;
	overflow: hidden;
	margin-right: 30px;	
	position: relative;
}
.section4{height:100vh; height: 100svh; z-index:10; 
}
.owl-carousel .item{
	width:100%;
	min-height:100%;
	width:100%;
	height:100%;
}
.horizontal-outer{
	position: -webkit-sticky;
	position: sticky; 
  display: flex;	
}
.horizontal-inner{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.horizontal-wrapper {
  width: 100%;
  height: 100vh;
  height: 100svh;  
}

.horizontal-container {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-wrap: nowrap;
  }

.panel {
  width: 100%;
  height: 100vh;
  height: 100svh;
  flex: 1 0 100%;
}
.owl-carousel .h-100{height:100%}
.carousel-img{height:100%;}
.carousel-img .best-img{height: 100%;
    object-fit: cover;
    display: inline-block;}
.carousel-img .img1, .carousel-img .img2{
    position: relative;
    right: 0;
    width: calc(10rem + 22vw);
    height: calc(10rem + 22vw);
    display: inline-block;
    margin-left: auto;
	}	
.carousel-img .img1 .imgT, .carousel-img .img2 .imgT{
	text-align: center;
	border-radius: 50%;
	display: block;
	overflow: hidden;
	transform: scale(.5);
}		
.carousel-img .img1 .imgT{background-color: #44bd75;}
.carousel-img .img2 .imgT{background-color: #db2b8c;}
.owl-carousel .booktitle{font-weight:700;}
.owl-carousel .booktitle1{color:#44bd75; margin-top:-.5rem}
.owl-carousel .booktitle2{color:#db2b8c; margin-top:-.5rem}
.owl-carousel .owl-item{overflow:hidden;}
.owl-carousel .container-fluid{z-index:2}
.owl-carousel .sticker1{width:calc(4rem + 2.5vw);  }
.owl-carousel .sticker2{width:calc(6rem + 4vw); }
.carousel-btn{    position: absolute;
    top: 1rem;
    right: 2rem; z-index:4}
.owl-theme .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 5px 5px;
}	
.owl-carousel .section-title{font-family: 'Gamja Flower', cursive; font-size:calc(1.1rem + .5vw);}
.owl-carousel .book1 .section-title{color:#aad278}
.owl-carousel .book2 .section-title{color:#299af0}
.carousel-btn .btn{width:2.2rem; height:2.2rem; border:1px solid #d6d6d6; color:#d6d6d6; padding:0; margin-left:-1px; border-radius:0!important;}
.carousel-btn .btn:hover, .carousel-btn .btn.active{border:1px solid #869791; color:#869791; z-index:5}
.carousel-btn .btn svg{width:20px;}
.owl-carousel .head-title1, .owl-carousel .head-title2{
	position: absolute;
	top: 0;
	bottom: 0;
	left:20px;
}
.btn-go-course {position:relative; padding-left:4rem; padding-right:3rem;}
.btn-go-course  svg{height:1.5rem; position:absolute; left:1rem; top:50%; margin-top:-.75rem;  transform: translate(0, 0); transition: all .15s;}
.btn-go-course:hover svg{
	  transform: translate(10px, 0); transition: all .15s;
}
.small, small {
    font-size: calc(.6rem + .5vw);
}
.teacher-name{font-size:calc(1.5rem + .5vw); line-height:1; position:relative}
.teacher-name img{width: 1.8rem;
    position: absolute;
    right: -1.5rem;
    top: -.6rem;}
.section5{
    height:auto;
    position: relative;
    padding-top: 90px;
    min-height: calc(100vh - 110px);
	min-height: calc(100svh - 110px);
    padding-bottom: 110px;
	}
.smile-wrapper{height:calc(100% - 110px)}
.smile-box{width:80%; max-width:43rem; position:relative}
.smile-box svg{width:100%;}
.smile-box .text-point{color:#fd999a}
.smile-wrapper{    left: 50%;
    transform: translate(-50%, 0%);
    position: absolute;}
.circle-smail{position:absolute; bottom:0; left:0; width:100%;}
.circle-text{position:absolute; left:10%; right:10%; top:50%;     transform:translateY(-46%); }
.faceSlide{padding-left:calc(2.4rem + 2vw); padding-right:calc(2.4rem + 2vw);}
.faceSlide .eyeslide{width:calc(4rem + 1.5vw); height:calc(4rem + 1.5vw); border-radius:50%; background-color:#b29183; overflow:hidden;}
.section6{height:auto!important}
#members{height:auto!important}	
.welcome-box{position:relative}
.my-box-wrapper{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 110px;
    display: flex;
    overflow: hidden;	
	margin-bottom:2rem;
}
.section6 .list-group a{max-width:100%}
.section6 .list-group-item{padding-left:0; padding-right:0}
.my-box{
	background-color:#05dfe7;
	color:#ffffff;
	padding:3rem 2rem;
	border-radius:3rem;
	}
.my-box .welcome{font-family: 'Righteous', cursive;}	
.my-box	.login-img{width:calc(5rem + 3vw);     transform: scale(.9);}
.login-box .form-control{
	border-radius:100px;
	background-color:#05dfe7;
	border:2px solid #ffffff;
	color:#ffffff;
	padding:.7rem 1.5rem;
	font-weight:500;
}
.login-box .form-control:focus{
	border:2px solid #ffffff!important;
}
.login-box .form-control::placeholder{
	color:#ffffff;
}
.login-box .btn-login{
	border-radius:100px;
	background-color:#ffffff;
	border:0;
	color:#05dfe7;
	padding:.7rem 1.5rem;	
	width:100%;
}
.login-box .btn-login:hover{
	background-color:#ffffff;
	border:0;
	color:#fb6c46;
}
.service-box{
	font-size:.94rem;
}
.service-box .btn{font-size:1em}
.service-box .btn-outline-secondary:hover{
	color:#ffffff;
	background-color:#ff952c;
	border:1px solid #ff952c;
}
.my-hello{
    position: relative;
    width: 100%;
    z-index: 2;
    height: calc(7rem + 5vw);
    max-height: 13rem;
}
.my-hello lottie-player{
	width:100%;
}
.my-hello .talk-bubble {
	margin: -3rem;
	display: inline-block;
	position: absolute;
	width: 100%;
	height: auto;
	padding: 15% 1rem 15% 1rem;
	background-color: #847ef5;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	color: #ffffff;
	border: 3px solid #090649;
	top: 10%;
	right: -60%;
}
.my-hello .talk-bubble:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: -12px;
	right: auto;
	top: 45%;
	bottom: auto;
	border: 10px solid;
	border-color: transparent #090649 #090649 transparent;
	z-index:-1;
}

.login-box input:-webkit-autofill,  .login-box input:-webkit-autofill:hover{
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px #05dfe7 inset !important;
    -webkit-text-fill-color: #ffffff !important;
}
.password-box{
	position:relative;
}
.password-box .eye-icon{
	position:absolute;
	right:1rem;
	top:50%;
	margin-top:-.6rem;
	z-index:10;
}
.password-box .eye-icon img{
	width:1.2rem
}
.myBox-member{text-align:left!important}
.user-name{
	color: #fffae9;
	font-family: 'Cafe24Ohsquare';
}
.lookGood{
	font-family: 'Cafe24Ohsquare';	
}
.btn-membership {
  color:#ffffff;
  font-size: 17px;
  font-family: 'Gamja Flower', cursive;
}
.btn-membership:hover{
  color:#194679;
}
.btn-my {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.btn-my.my-page {
  width: 10rem;
  height: auto;
}
.btn-my.my-page .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  top:0;
  left:0;
  width: 3rem;
  height: 3rem;
  background: #282936;
  border-radius: 1.625rem;
}
.btn-my.my-page .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
.btn-my.my-page .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.btn-my.my-page .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
.btn-my.my-page .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 0 0 1.85rem;
  color: #282936;
  font-weight: 700;
  line-height: 3rem;
  height:3rem;
  text-align: center;
  text-transform: uppercase;
}
.btn-my:hover .circle {
  width: 100%;
}
.btn-my:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}
.btn-my:hover .button-text {
  color: #fff;
}

.btn-my.btn-logout {
  width: 10rem;
  height: auto;
}
.btn-my.btn-logout .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  top:0;
  left:0;
  width: 3rem;
  height: 3rem;
  background: #ffffff;
  border-radius: 1.625rem;
}
.btn-my.btn-logout .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
.btn-my.btn-logout .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.btn-my.btn-logout .circle .icon.arrow::before {
  position: absolute;
  content: "";
top: -0.6rem;
    right: -0.4rem;
    width: 1.3rem;
    height: 1.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.38938 16.5386C5.33894 15.0901 4 12.7014 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 12.7014 18.6611 15.0901 16.6106 16.5386L18.6936 21.2996C18.8043 21.5526 18.6889 21.8474 18.4359 21.9581C18.3727 21.9857 18.3045 22 18.2355 22H5.76451C5.48837 22 5.26451 21.7761 5.26451 21.5C5.26451 21.431 5.27878 21.3628 5.30643 21.2996L7.38938 16.5386ZM14.1246 15.846L15.4567 14.905C17.041 13.7858 18 11.9752 18 10C18 6.68629 15.3137 4 12 4C8.68629 4 6 6.68629 6 10C6 11.9752 6.95901 13.7858 8.54335 14.905L9.87539 15.846L8.05803 20H15.942L14.1246 15.846ZM8.11851 10.9704L10.0593 10.4852C10.2761 11.3553 11.0628 12 12 12C12.9372 12 13.7239 11.3553 13.9407 10.4852L15.8815 10.9704C15.4478 12.7106 13.8745 14 12 14C10.1255 14 8.55217 12.7106 8.11851 10.9704Z' fill='rgba(0,0,0,1)'%3E%3C/path%3E%3C/svg%3E");
 background-size: 1.3rem;
background-repeat:no-repeat; 
background-color:#ffffff;
}
.btn-my.btn-logout .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 0 0 1.85rem;
  line-height: 3rem;
  height:3rem;  
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.btn-logout:hover .circle {
  width: 100%;
}
.btn-logout:hover .circle .icon.arrow {
  background: #ffffff;
  transform: translate(1rem, 0);
}
.btn-logout:hover .button-text {
  color: #282936;
}


.btn-my.btn-study {
  width: 15rem;
  height: auto;
}
.btn-my.btn-study .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  top:0;
  left:0;
  width: 5rem;
  height: 5rem;
  background: #ffc8c8;
  border-radius: 2.5rem;
}
.btn-my.btn-study .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ffc8c8;
}
.btn-my.btn-study .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}
.btn-my.btn-study .circle .icon.arrow::before {
	position: absolute;
	content: "";
	top: -2.7rem;
	right: -3.9rem;
	width: 4rem;
	height: 4rem;
	background-image: url(../img/letGo.svg);
	background-size: 4rem;
	background-repeat: no-repeat;
}
.btn-my.btn-study .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 0 0 3rem;
	line-height: 5rem;
	height: 5rem;
	color: #ffffff;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}
.btn-study:hover .circle {
  width: 100%;
}
.btn-study:hover .circle .icon.arrow {
  background: #ffc8c8;
  transform: translate(1rem, 0);
}
.btn-study:hover .button-text {
  color: #6B1E38;
}



.teacher-menu{
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	display: inline-block;
	padding: 0;
	font-size:.93rem;
}
.teacher-menu svg{width:1.2rem;}
.teacher-menu span{display:block; margin-top:.3rem;}
.modal-notice{max-width:1000px;}


.learn-more {
  font-weight: 600;
  color: #382b22;
  max-width: 14rem;
  text-transform: uppercase;
  height:4.2rem;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}
.learn-more::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #00b6bd;
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
.learn-more:hover {
  background: #ffe9e9;
  transform: translate(0, 0.25em);
}
.learn-more:hover::before {
  box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #00b6bd;
  transform: translate3d(0, 0.5em, -1em);
}
.learn-more:active {
  background: #ffe9e9;
  transform: translate(0em, 0.75em);
}
.learn-more:active::before {
  box-shadow: 0 0 0 2px #b18597, 0 0 #00b6bd;
  transform: translate3d(0, 0, -1em);
}

/*****
고객센터
*****/
.custom-btn1{
	padding-left:2.2rem;
	background-size:1rem auto;
	background-position:left .8rem center;
	background-repeat:no-repeat;
	position:relative;
	display:block
}
.custom-btn2{
	padding-left:2.2rem;
	background-size:1rem auto;
	background-position:left .8rem center;
	background-repeat:no-repeat;
	position:relative;
	display:block
}
.custom-btn3, .custom-btn4{
	padding-left:1.2rem;
	background-size:.9rem auto;
	background-position:left top .2rem;
	background-repeat:no-repeat;
	position:relative;
	display:block
}
.custom-btn1{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.9381 8H21C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8ZM3 10V14H4V10H3ZM20 10V14H21V10H20ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z' fill='rgba(125,132,142,1)'%3E%3C/path%3E%3C/svg%3E");
}
.custom-btn1:hover{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.9381 8H21C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8ZM3 10V14H4V10H3ZM20 10V14H21V10H20ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E");
}
.custom-btn2{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3643 15.5353L16.95 14.1211L18.3643 12.7069C20.3169 10.7543 20.3169 7.58847 18.3643 5.63585C16.4116 3.68323 13.2458 3.68323 11.2932 5.63585L9.87898 7.05007L8.46477 5.63585L9.87898 4.22164C12.6127 1.48797 17.0448 1.48797 19.7785 4.22164C22.5121 6.95531 22.5121 11.3875 19.7785 14.1211L18.3643 15.5353ZM15.5358 18.3638L14.1216 19.778C11.388 22.5117 6.9558 22.5117 4.22213 19.778C1.48846 17.0443 1.48846 12.6122 4.22213 9.87849L5.63634 8.46428L7.05055 9.87849L5.63634 11.2927C3.68372 13.2453 3.68372 16.4112 5.63634 18.3638C7.58896 20.3164 10.7548 20.3164 12.7074 18.3638L14.1216 16.9496L15.5358 18.3638ZM14.8287 7.75717L16.2429 9.17139L9.17187 16.2425L7.75766 14.8282L14.8287 7.75717Z' fill='rgba(125,132,142,1)'%3E%3C/path%3E%3C/svg%3E");
}
.custom-btn2:hover{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3643 15.5353L16.95 14.1211L18.3643 12.7069C20.3169 10.7543 20.3169 7.58847 18.3643 5.63585C16.4116 3.68323 13.2458 3.68323 11.2932 5.63585L9.87898 7.05007L8.46477 5.63585L9.87898 4.22164C12.6127 1.48797 17.0448 1.48797 19.7785 4.22164C22.5121 6.95531 22.5121 11.3875 19.7785 14.1211L18.3643 15.5353ZM15.5358 18.3638L14.1216 19.778C11.388 22.5117 6.9558 22.5117 4.22213 19.778C1.48846 17.0443 1.48846 12.6122 4.22213 9.87849L5.63634 8.46428L7.05055 9.87849L5.63634 11.2927C3.68372 13.2453 3.68372 16.4112 5.63634 18.3638C7.58896 20.3164 10.7548 20.3164 12.7074 18.3638L14.1216 16.9496L15.5358 18.3638ZM14.8287 7.75717L16.2429 9.17139L9.17187 16.2425L7.75766 14.8282L14.8287 7.75717Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E");
}
.custom-btn3{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z' fill='rgba(125,132,142,1)'%3E%3C/path%3E%3C/svg%3E");
}
.custom-btn3:hover{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z' fill='rgba(251,108,70,1)'%3E%3C/path%3E%3C/svg%3E");
}
.custom-btn4{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM19 20V4H5V20H19ZM8 9H16V11H8V9ZM8 13H16V15H8V13Z' fill='rgba(125,132,142,1)'%3E%3C/path%3E%3C/svg%3E");
}
.custom-btn4:hover{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM19 20V4H5V20H19ZM8 9H16V11H8V9ZM8 13H16V15H8V13Z' fill='rgba(251,108,70,1)'%3E%3C/path%3E%3C/svg%3E");
}
/*****
notice
*****/
.sub-container{    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: 8rem;}
.sub-header {padding:3rem 0 3rem 0}
.sub-header-s {
    padding: 3rem 0 1rem 0;
}
.sub-header .sub-logo, .sub-header-s  .sub-logo{
	max-width:16rem;
	width:25%;
	min-width:10rem;
}
.notice-contents{
	margin:1.5rem 0;
	min-height:40vh;
}
 .post-box .new{
     padding: 3px 10px;
     font-size: 10px;
     border-radius: 50px;
}
.post-box {
    border: 1px solid #dee2e6;
    padding: 1.5rem;
    width: 100%;
}
.btn-list-file, .btn-list-file:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath style='fill: %23ffffff;' d='M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z'%3E%3C/path%3E%3C/svg%3E");
}
 .btn-list-file{
     width:35px;
     height:35px;
     padding: 0;
     background-size:18px auto;
     background-position:center;
     background-repeat:no-repeat;
     border-radius: 50%;
     position:relative;
}
 .btn-list-file label{
     position:absolute;
     right:0;
     top:-28px;
     padding:3px 10px;
     border-radius:5px;
     font-size:12px;
     max-width:320px;
	background-color: #f7851e;
	color: #ffffff;	
	visibility: hidden;
	white-space : nowrap; 
}
 .btn-list-file:hover label{
	 visibility: visible;
}
.text-muted {
    color: #8d8a8a!important;
}
.post-meta {
    font-size: 12px;
    font-family: 'Raleway', sans-serif;
}
.btn-list-more {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath style='fill: %23ffffff;' d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z'%3E%3C/path%3E%3C/svg%3E");
	padding: 0.8rem 5rem;
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: left 20px center;	
}
.notice-empty{
	width:6rem;
}
/*****
메인갤러리
*****/
#container {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  height:100vh;
  height: 100svh;  
  transform-origin: center;
  transform: rotate(-4deg);
  max-width: 3100px;
  max-height: 500px !important;
}
#container  img {
  width: 100%;
  object-fit: cover;
}
#scroll-container {
  height: 100vh;
  height: 100svh;
  overflow:hidden;
  padding-bottom:110px;
}
.module{
	width: 300px;
	height: 100%;
	display: flex;
	border-radius: .8rem;
	overflow: hidden;
	margin-right: 10px;
}
/*****
지식공유 선생님
******/
.sharing-teacher{
	background-image:url(../img/apply.png);
	background-repeat:no-repeat;
	background-size:auto 80%;
	background-position:bottom right;
}
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 1.925rem;
    padding-bottom: .925rem;
}
.form-floating>.form-control, .form-floating>.form-select {
    height: calc(4.1rem + 2px);
    line-height: 1.25;
}
.form-floating>label {
    padding: 1.3rem .75rem;
	font-size:14px;
}	


#navbarEBOOK .navbar-nav {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
/*****이북******/
 .book-box{
     border:1px solid #dee2e6;
     padding: 1rem;
     width: 100%;
     background-color: rgba(255,255,255,.95);
     position:relative;
     overflow: hidden;
}
 .book-box .date{
     font-size:.9rem;
}
 .book-box .book-img{
     width:100%;
     min-width:60px;
     max-width:70px;
}
 .book-box .book-title{
     font-size:16px;
     font-weight:500;
}
.book-box .btn-sm{padding:.3rem 1rem; font-size:13px;}
.book-box  .form-select{padding:.3rem 1rem; font-size:13px;}
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
}
.form-group {
    margin-bottom: 1rem;
	position: relative;
}
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.btn-zip-search {
    padding: 0.5rem 1.2rem;
}
.board-notic img {
    width: 3rem;
}
.form-group label{
	margin-bottom:.5rem;
}
.board-form .star{
	position:absolute;
	bottom:2rem;
	right:.1rem;
	width:1rem;
	height:1rem;
}
.board-form .memo .star{
	position:absolute;
	bottom:7.8rem;
	right:.1rem;
	width:1rem;
	height:1rem;
}
.gj-textbox-md {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
}
.gj-picker-md [role=header] {
    background: #630aaf!important;
}
.gj-picker-md .arrow-begin, .gj-picker-md [role=body] [role=arrow] {
    background-color: #630aaf!important;
}
.gj-picker [role=body] [role=hour].selected {
    color: rgba(255, 255, 255, 1);
	background-color: #630aaf!important;
	border-radius:50%;
}
.gj-picker-md [role=footer] button.gj-button-md {
    color: #630aaf!important;
}
/*****footer*****/
.footer{
	color:#efefef;
	padding-top:3rem;
	padding-bottom:8rem;
    margin: 0 auto;
	position:relative;
	background-color:#a5afb3;
	height:auto;
}
.footer .copyright {
	background-repeat:no-repeat;
	background-position:left top;	
}
.footer .logo-highfive {
	background-image:url(../img/logo-vodaedu.svg);
	background-size:7rem auto;	
	padding-top:3rem;	
}
.footer .logo{width:7rem}
.footer .footer-menu-top a{
	color:#ffd24c;
	white-space: nowrap;
	position:relative;
	padding-left:1.2rem;
	padding-right:.8rem;
	display:block;
}
.footer .footer-menu-side{
	position:relative;
	padding-right:0
}
.footer .footer-menu-side a{
	color:#630aaf;
	white-space: nowrap;
    padding:.2rem .2rem .2rem 1.2rem;
	display:block;
	position:relative;
}
.footer .footer-menu-side a:hover{
	color:#90e6f7;
}
.footer-menu-wrapper{
	border:1px solid rgba(255,255,255,.3);
	border-radius:.5rem;
	padding:.5rem 1rem;
}
.footer-menu-wrapper a:before{
	content:'';
	width:1rem;
	height:1rem;
	background-size:1rem;
	background-position:center;
	top:50%;
	margin-top:-.5rem;
	left:0;
	position:absolute;
}
.footer-menu-wrapper .img01:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'  fill='%23ffd24c'%3E%3Cpath d='M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM5.76282 17H20V5H4V18.3851L5.76282 17ZM11.2929 12.1213L15.5355 7.87868L16.9497 9.29289L11.2929 14.9497L7.40381 11.0607L8.81802 9.64645L11.2929 12.1213Z'%3E%3C/path%3E%3C/svg%3E");
}
.footer-menu-wrapper .img01:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'  fill='%2390e6f7'%3E%3Cpath d='M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM5.76282 17H20V5H4V18.3851L5.76282 17ZM11.2929 12.1213L15.5355 7.87868L16.9497 9.29289L11.2929 14.9497L7.40381 11.0607L8.81802 9.64645L11.2929 12.1213Z'%3E%3C/path%3E%3C/svg%3E");
}
.footer-menu-wrapper .img02:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd24c'%3E%3Cpath d='M7.29117 20.8242L2 22L3.17581 16.7088C2.42544 15.3056 2 13.7025 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.2975 22 8.6944 21.5746 7.29117 20.8242ZM7.58075 18.711L8.23428 19.0605C9.38248 19.6745 10.6655 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 13.3345 4.32549 14.6175 4.93949 15.7657L5.28896 16.4192L4.63416 19.3658L7.58075 18.711ZM7 12H9C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z'%3E%3C/path%3E%3C/svg%3E");
}
.footer-menu-wrapper .img02:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2390e6f7'%3E%3Cpath d='M7.29117 20.8242L2 22L3.17581 16.7088C2.42544 15.3056 2 13.7025 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C10.2975 22 8.6944 21.5746 7.29117 20.8242ZM7.58075 18.711L8.23428 19.0605C9.38248 19.6745 10.6655 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 13.3345 4.32549 14.6175 4.93949 15.7657L5.28896 16.4192L4.63416 19.3658L7.58075 18.711ZM7 12H9C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z'%3E%3C/path%3E%3C/svg%3E");
}
.footer-menu-wrapper .img03:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd24c'%3E%3Cpath d='M21 3C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.455L2 22.5V4C2 3.44772 2.44772 3 3 3H21ZM20 5H4V18.385L5.76333 17H20V5ZM10.5153 7.4116L10.9616 8.1004C9.29402 9.0027 9.32317 10.4519 9.32317 10.7645C9.47827 10.7431 9.64107 10.7403 9.80236 10.7553C10.7045 10.8389 11.4156 11.5795 11.4156 12.5C11.4156 13.4665 10.6321 14.25 9.66558 14.25C9.12905 14.25 8.61598 14.0048 8.29171 13.6605C7.77658 13.1137 7.5 12.5 7.5 11.5052C7.5 9.75543 8.72825 8.18684 10.5153 7.4116ZM15.5153 7.4116L15.9616 8.1004C14.294 9.0027 14.3232 10.4519 14.3232 10.7645C14.4783 10.7431 14.6411 10.7403 14.8024 10.7553C15.7045 10.8389 16.4156 11.5795 16.4156 12.5C16.4156 13.4665 15.6321 14.25 14.6656 14.25C14.1291 14.25 13.616 14.0048 13.2917 13.6605C12.7766 13.1137 12.5 12.5 12.5 11.5052C12.5 9.75543 13.7283 8.18684 15.5153 7.4116Z'%3E%3C/path%3E%3C/svg%3E");
}
.footer-menu-wrapper .img03:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2390e6f7'%3E%3Cpath d='M21 3C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.455L2 22.5V4C2 3.44772 2.44772 3 3 3H21ZM20 5H4V18.385L5.76333 17H20V5ZM10.5153 7.4116L10.9616 8.1004C9.29402 9.0027 9.32317 10.4519 9.32317 10.7645C9.47827 10.7431 9.64107 10.7403 9.80236 10.7553C10.7045 10.8389 11.4156 11.5795 11.4156 12.5C11.4156 13.4665 10.6321 14.25 9.66558 14.25C9.12905 14.25 8.61598 14.0048 8.29171 13.6605C7.77658 13.1137 7.5 12.5 7.5 11.5052C7.5 9.75543 8.72825 8.18684 10.5153 7.4116ZM15.5153 7.4116L15.9616 8.1004C14.294 9.0027 14.3232 10.4519 14.3232 10.7645C14.4783 10.7431 14.6411 10.7403 14.8024 10.7553C15.7045 10.8389 16.4156 11.5795 16.4156 12.5C16.4156 13.4665 15.6321 14.25 14.6656 14.25C14.1291 14.25 13.616 14.0048 13.2917 13.6605C12.7766 13.1137 12.5 12.5 12.5 11.5052C12.5 9.75543 13.7283 8.18684 15.5153 7.4116Z'%3E%3C/path%3E%3C/svg%3E");
}
.footer-menu-wrapper .img04:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23630aaf'%3E%3Cpath d='M20 6H23V8H22V19H23V21H1V19H2V8H1V6H4V4C4 3.44772 4.44772 3 5 3H19C19.5523 3 20 3.44772 20 4V6ZM20 8H4V19H7V12H9V19H11V12H13V19H15V12H17V19H20V8ZM6 5V6H18V5H6Z'%3E%3C/path%3E%3C/svg%3E");
}
.footer-menu-wrapper .img04:hover:before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2390e6f7'%3E%3Cpath d='M20 6H23V8H22V19H23V21H1V19H2V8H1V6H4V4C4 3.44772 4.44772 3 5 3H19C19.5523 3 20 3.44772 20 4V6ZM20 8H4V19H7V12H9V19H11V12H13V19H15V12H17V19H20V8ZM6 5V6H18V5H6Z'%3E%3C/path%3E%3C/svg%3E");
}
@media (min-width: 768px) {
	.footer .footer-menu-side a{
		padding:0 0 0 1.2rem;
		margin-top:0rem;
	}
	.footer .footer-menu-top a:last-child{
		margin-right:1.5rem;
	}
    .footer .footer-menu-top a:last-child:after{
		content:'';
		position:absolute;
		width:1px;
		height:14px;
		top:50%;
		margin-top:-7px;
		right:-1.4rem;
		left:auto;
		margin-right:1rem;
		background-color:rgba(255,255,255,.3);
    }
}
@media (max-width: 767px) {
	.footer-menu-wrapper{
		border:1px solid rgba(255,255,255,.3);
		border-radius:.5rem;
		padding:1rem;
	}
}
@media (max-width: 575px) {
	.footer .footer-menu-top a{
		padding:.2rem .2rem .2rem 1.2rem;
	}
}
.footer .footer-menu-top a:hover{
	color:#90e6f7;
}
.footer .footer-menu{
	color:#efefef;
	text-decoration:none;
}
.footer .footer-menu:hover{
	color:#ffffff;
}
.footer .small, .footer small {
    font-size: 90%;
}
@media (max-width: 991px){
	.carousel-btn{right:1rem;}
	.owl-theme .owl-nav.disabled + .owl-dots{right:6rem;}
	.horizontal-wrapper {
		width: 100%;
		height: auto;
		overflow: none;
	}	
	.horizontal-container {
		height: auto;
		display: block;
	}	
	.panel {
		width: 100%;
		height: 100vh;
		height: 100svh;
		flex: none;
	}	
	.section4, .section41{
		display: flex;
		align-content: center;
		justify-content: center;
	}
	.intro-img {
		position: relative;
		width: 80%;
		margin-top: 4rem;
		max-width: 50rem;
	}	
	.mockup-gallery-wrapper .img-wrapper, .mockup-gallery-wrapper .img-wrapper .inner {
		width: 200px;
		height: 300px;
	}
	.mockup-gallery-wrapper {
		max-height: 300px !important;
	}		
	.owl-carousel .sticker2 {
		transform: scale(1);
	}	
	.owl-carousel{
		height: auto;
		display: flex;
		align-items: center;
		width:100%;
	}
}
@media (max-width: 767px){
	.my-box {
    padding: 3rem 2rem;
	}
	.myBox-member {
		text-align:center!important;
	}	
	.city{height:120px; min-width: 250px; margin-top: 3rem;}	
}
@media (max-width: 575px){
	.section5{padding-bottom:0; height:auto; min-height:auto;     padding-top: 110px;}
	.section6{padding-top:110px}	
	.my-hello .talk-bubble {
		position: relative;
	}	
	.my-hello .talk-bubble:after {
		left: 10px;
		top: 70%;
	}	
	.smile-box-copyOut{display:block}	
	.intro-img {
		width: 100%;
	}
	.mockup-gallery-wrapper .img-wrapper, .mockup-gallery-wrapper .img-wrapper .inner {
		width: 180px;
		height: 280;
		margin-right: 20px;
	}
	.mockup-gallery-wrapper {
		max-height: 300px !important;
	}	
	.faceSlide .eyeslide {
		width: calc(3rem + 1.5vw);
		height: calc(3rem + 1.5vw);
	}	
	.faceSlide {
		padding-left: calc(2rem + 3vw);
		padding-right: calc(2rem + 3vw);
		    margin-bottom: 1rem!important;
	}	
	.btn-my.btn-study{
		background: #ffc8c8;
		border-radius:100px;
		width: 13rem;
	}
	.btn-my.btn-study .button-text {
		margin: 0 0 0 3rem;
	}
}
@media (min-width: 575px){
	.smile-box-copyOut{display:none}	
	.smile-box-copyIn{display:block}	
#members{height:auto!important}	
}
@media (min-width: 1980px){
	.hello{
		font-family: 'Poppins', sans-serif;
		font-size: 5rem;
		    width: 25rem;
	}		
	.owl-item .head-title{
		font-size: 3rem;
	}	
	#voda-intro  .headCopy1{
		font-size: 3.2rem;	
	}
	#voda-intro .headCopy2 {
		font-size: 3.8rem;
	}
	.carousel-img .img1, .carousel-img .img2 {
		width: 34rem;
		height: 34rem;
	}	
	.my-box .login-img {
    width: 9rem;
	}
.journeys-wrapper-box{
	position:fixed;
	height: calc(20rem);
	width:100%;
}
.journeys-wrapper {
	width: calc(20rem);
	height: calc(20rem);
}
.journeys-wrapper .symbol{
	width: calc(20rem);
	height: calc(20rem);
}
.video-wrapper {
	width: calc(16rem);
	height: calc(16rem);
}
.overNav-wrapper .go-top img {
    width: 8rem;
}
.small, small {
    font-size: .85rem;
}
.teacher-name {
    font-size: 2.2rem;
}
}		
@media (max-width: 1199px) and (orientation: landscape){	
	.owl-carousel .item{
		height:calc(100vh - 110px);
		height:calc(100svh - 110px);
	}	
.section4 {
    padding-bottom: 55px;
}	
	.smile-box {
		width: 70%;
	}	
	.section5 {
		padding-top: 55px;
		min-height: calc(100vh - 110px);
		min-height: calc(100svh - 110px);
		padding-bottom: 55px;
	}			
}
@media (max-width: 1199px) and (orientation: portrait){	
	.carousel-img{background-position:center bottom; }	
	.owl-carousel .item{
		height:calc(100vh - 110px);
		height:calc(100svh - 110px);
	}
	.carousel-img{background-size:75vh auto}
	.sharing-teacher {
		background-position: top right -100%;
	}	
	.section5 {
    height: auto;
	}
	.my-box-wrapper{
		padding-top:0;
	}	
	.owl-carousel .carousel-img, .owl-carousel .title-box {
		width:100%;
		flex: auto;
		height:50%;
	}
	.owl-carousel .head-title1, .owl-carousel .head-title2{
		top:50%!important;
		text-align:center;
		display: block!important;
		left: 0;
		right: 0;
	}
	.owl-carousel .sticker-box{
		display:flex;
		justify-content: center;
	}
	.owl-carousel .title-box{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		height: 100%;
		text-align: center
	}
.carousel-img .img1, .carousel-img .img2 {
    position: absolute;
    top: auto;
    text-align: center;
    bottom: 0;
	width: calc(9rem + 20vw);
    height: calc(9rem + 20vw);
    display: block;
    right: 50%!important;
    margin-right: calc( (-4.5rem) + (-10vw))!important;
  }	
	.carousel-img .img1, .carousel-img .img2, .owl-carousel .head-title1, .owl-carousel .head-title2, .owl-carousel .title-box{
		position: relative;
	}	  
	.visual-img, .visual-text{
		width:100%;
		flex: none;
	}
	.visual-img{
		align-items: end!important;
		height:50%;
	}	
	.visual-text{
		align-items: start!important;
		height:50%;
	}		
	.intro-img {
		position: relative;
		width: 75%;
		margin-top: 0;
		max-width: 50rem;
	}	
	.city {
		min-width: 350px;	
	}
}
@media (max-width: 991px) and (orientation: landscape){
	.city {
		width: 50%;
		min-width: 250px;
		margin-top: 2rem;
		height: 120px;
	}
	.hello {
		font-size: calc(1.8rem + 1.5vw);
	}	
	.voda-han {
    font-size: calc(1.5rem + 1vw);
	}
	.carousel-img{background-position:center bottom;  background-size:contain}	
	.smile-box {
		width: 50%;
		max-width: 24rem;
	}
	.faceSlide {
		padding-left: calc(2vw);
		padding-right: calc(2vw);
	}
	.sharing-teacher {
		background-position: top right 50%;
	}	
	.visual-img, .visual-text{
		width:50%;
		flex: 0 0 auto;
		align-items: center!important;
	}
	.intro-img {
		position: relative;
		width: 100%;
		margin-top: 0;
		max-width: 50rem;
	}
	.owl-carousel .item {
		height: 100vh;
		height: 100svh;
	}
}
@media (max-width: 1005px) and (orientation: landscape){		
	.city{
		width: 50%;
		height:130px;
	}
	.hello {
		font-size: calc(1.8rem + 2vw);
	}	
	.smile-box {
		width: 60%;
		max-width: 30rem;
		position: relative;
	}
	.faceSlide .eyeslide {
		width: calc(3rem + 1.5vw);
		height: calc(3rem + 1.5vw);
	}	
	.faceSlide {
		padding-left: calc(2rem + 3vw);
		padding-right: calc(2rem + 3vw);
		    margin-bottom: .5rem!important;
	}	
	.smile-box .eyebrow{display:none!important}
	.owl-carousel .head-title{display:none}	
	.carousel-img .img1, .carousel-img .img2 {
		width: calc(5rem + 18vw);
		height: calc(5rem + 18vw);
	}
	.carousel-img .img1, .carousel-img .img2{
		position: absolute;
		top: 50%;
		bottom: 0;
		right:50%!important;
		margin-right: calc((-2rem) + (-9vw))!important;
		margin-top: calc((-2rem) + (-9vw))!important;
	}		
	.carousel-img .img1 .imgT, .carousel-img .img2 .imgT{
		text-align: center;
		border-radius: 50%;
		display: block;
		overflow: hidden;
	}	
}
@media (max-width: 991px) and (orientation: portrait){		
.section1{padding-bottom:110px;}
	.hero-logo-wrapper{
		width:100%;
	}	
	.sharing-teacher {
		background-position: top right 45%;
	}	
	.section5 {
    height: 100vh;
	height: 100svh;
	}
	.my-box-wrapper{
		padding-top:0;
	}
	.city {
		height: 170px;
		width: 100%;
		min-width: 300px;
		margin-top: 3rem;
	}	
	.visual-img.pc, .visual-text.pc{
		width:100%;
		height: 50%;
		flex: none;
	}
	.visual-img.pc{
		align-items: end!important;
	}	
	.visual-text.pc{
		align-items: start!important;
		padding-top:2rem;
	}			
	.city.pc {
		height: 170px;
		width: 100%;
		min-width: 250px;
		margin-top: 1rem;
	}
	.intro-img.pc {
		position: relative;
		width: 50%;
		margin-top: 0;
		max-width: 40rem;
	}	
	.owl-carousel .item, .owl-carousel .h-100, .panel{
    height: auto!important;
	min-height:auto;
   }  
   .section4, .section41{padding-top:0; padding-bottom:110px}
	.carousel-img .img1, .carousel-img .img2, .owl-carousel .head-title1, .owl-carousel .head-title2{
		position: relative;
	}	
	.owl-carousel .title-box {
		position: relative!important;
	}	
	.section5{
		padding-top:0; padding-bottom:110px;
		}
	.section6 {padding-bottom:110px}
	#members {padding-top:60px}	
}
@media (max-width: 800px) and (orientation: portrait){
	.sharing-teacher {
		background-position: top right -20rem;
	}
}

@media (max-width: 768px) and (orientation: portrait){
	.sharing-teacher {
		background-position: top right 40%;
	}
	.section5 {
	}	
	.my-box-wrapper{
		padding-top:0;
	}		
}
@media (max-width: 712px) and (orientation: portrait){
	/*.sharing-teacher {
		background-position: top right -20rem;
	}*/
}
@media (max-width: 575px) and (orientation: portrait) {	
	.city{
		width: 50%;
		min-width: 200px;
		margin-top: 1rem;
		height: 130px;
	}	
	.smile-box {
		width: 100%;
		min-width: 18rem;
	}	
	.sharing-teacher {
		background-image:none;
	}	
	.smile-box-copyOut{display:block}		
	.section5{
		align-items: flex-start!important;	
	}
	.carousel-img .img1, .carousel-img .img2 {
		top: auto;
		bottom: 0;
		height: 15rem;
		width: 15rem;
		display: inline-block;
		right: 50%!important;
		margin-right: -7.5rem!important
	}		
	.owl-carousel .carousel-img {
		height: 45%;
		position:relative;
	}	

	.owl-carousel .head-title1, .owl-carousel .head-title2 {
		top: 45%!important;
		padding-bottom: 0!important;
	}
	.visual-img {
		height:45%;
	}
	.visual-text{
		height:55%
	}
	.teacher-name img{width: 1.3rem;
		position: absolute;
		right: -1rem;
		top: -.3rem;}	
}
@media (max-width: 412px) and (orientation: portrait) {	
	.sharing-teacher {
		background-position: top right 150%;
	}	
}
@media (max-width: 400px) and (orientation: portrait) {	
	.sharing-teacher {
		background-position: top right 120%;
	}
    .btn-my.my-page {
    width: 8rem;
	}
	.btn-my.btn-logout {
    width: 8rem;
	}
	.btn-my.my-page .circle, .btn-my.btn-logout .circle {
		top: .2rem;
		width: 2.4rem;
		height: 2.4rem;
	}	
	.btn-my.my-page .button-text, .btn-my.btn-logout .button-text {
		margin: 0 0 0 2.2rem;
	}	
	.btn-my.my-page .circle .icon.arrow::before {
		top: -0.1rem;
		right: 0.4rem;
		width: 0.4rem;
		height: 0.4rem;
		
	}	
	.btn-my.btn-logout .circle .icon.arrow::before{
        top: -.4rem;
        right: 0.1rem;
        width: 1rem;
        height: 1rem;
        background-size: 1rem;	
	}
	.btn-my:hover .circle .icon.arrow{
	  transform: translate(0, 0);
	  background-color: transparent;
	}	
}