/* ========================================================= */
/*                           font                            */
/* ========================================================= */
@font-face { font-family: 'font'; src: url('/www/assets/fonts/Pretendard-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Pretendard'; src: url('/www/assets/fonts/Pretendard-Regular.ttf') format('truetype'); }
@font-face { font-family: 'title'; src: url('/www/assets/fonts/SCDream4.otf') format('truetype'); }
@font-face { font-family: 'title2'; src: url('/www/assets/fonts/SCDream8.otf') format('truetype'); }
@font-face { font-family: 'baby'; src: url('/www/assets/fonts/HakgyoansimKkokkomaR.ttf') format('truetype'); }
@font-face { font-family: 'paper'; src: url('/www/assets/fonts/HakgyoansimBunpil.ttf') format('truetype'); }


/* ========================================================= */
/*                      default/reset                        */
/* ========================================================= */
ul, li { margin: 0; padding: 0; list-style: none; }
ol { margin: 0; }
p { margin-bottom: 0; }
a, a:link, a:visited, a:hover, a:active, a:focus { color:#333; text-decoration: none; }
a:hover { color:#111; font-weight:500; }
a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.10) !important; }
hr { color:#8c0f96; border-width:2px; }
th, td { vertical-align: middle; text-align: center; }
.text-center { text-align: center; justify-content: center;}
.text-left { text-align: left; justify-content: flex-start; }
.text-right { text-align: right; justify-content: flex-end; }

img.logo { width: 200px; cursor: pointer; }
.selectpicker.form-select { background-color: #f4eff8; }
.form-select:disabled { background-color: #cbcdcf; }
.space { justify-content: space-between; }

.d-flex { vertical-align: middle; align-items: center; }


/* ========================================================= */
/*                          layout                           */
/* ========================================================= */
html { height:100% }
body { position: relative; height: 100%; font-family: 'font'; }
body.swal2-height-auto { height: 100% !important; }
section { width:100%; }
.container { width:100%; padding: 40px; max-width: 1100px; margin:0 auto; }
.page { padding-top: 100px; }
.page-admin { padding-top: 150px; background: #F5F6FA; min-height: 100vh; }
.section { width:100%; padding: 20px; max-width: 1800px; margin:0 auto; }


/* ========================================================= */
/*                          button                           */
/* ========================================================= */
.btn-group button, .btn-group button:hover { border: 1px solid #D5D5D5; }
.btn-group .reset, .btn-group .reset:hover { color: #EA0234; }
.reset .material-symbols-outlined { font-size: 15px; color: #EA0234!important; }
.new .material-symbols-outlined { color: #4880FF!important; }

.btn-default { border: 1px solid #3C3C3C; color: black; }
.btn-default:hover { border-color: #3C3C3C; color: black; }
.btn-white  { background-color: #fff; color: black; border-color: #D5D5D5; }
.btn-white:hover, .btn-white:active { background-color: #fcfcfc; }
.btn-purple { background-color: #8c0f96; color: #fff; }
.btn-purple:hover, .btn-purple:active { background-color: #a723b1; color:#fff; }
.btn-pink   { background-color: #f4eff8; color: #8c0f96; }
.btn-pink:hover, .btn-pink:active { background-color: #efe9f5; color:#8c0f96; }
.btn-lightgray  { background-color: #F9F9FA; color: black; }
.btn-lightgray:hover, .btn-lightgray:active { background-color: #F9F9FA; color: black; }
.btn-gray  { background-color: #4d4d4d; color: #fff; }
.btn-gray:hover, .btn-gray:active { background-color: #333; color: #fff; }
.btn-red  { background-color: #ff4a4a; color: #fff; }
.btn-red:hover, .btn-red:active { background-color: #f04646; color: #fff; }
.btn-yellow { background-color: #F7E600; color: #3A1D1D; }
.btn-yellow:hover, .btn-yellow:active { background-color: #F7E600; color: #3A1D1D; }
.btn-green { background-color: #59ba41; color: #fff; }
.btn-green:hover, .btn-green:active { background-color: #52ac3c; color:#fff; }
.btn-aqua { background-color: #66b1d7; color: #fff; }
.btn-aqua:hover, .btn-aqua:active { background-color: #3cb5c0; color:#fff; }
.btn-blue { background-color: #1265a8; color: #fff; }
.btn-blue:hover, .btn-blue:active { background-color: #125d9b; color:#fff; }
.btn-darkblue { background-color: #372F81; color: #fff; }
.btn-darkblue:hover, .btn-darkblue:active { background-color: #372F81; color:#fff; }
.btn-black { background-color: #111111; color: #fff; }
.btn-black:hover, .btn-black:active { background-color: #252424; color:#fff; }

.btn-xs { --bs-btn-padding-y: 3px; --bs-btn-padding-x: 10px; --bs-btn-font-size:  10px; --bs-btn-font-weight:400; height:25px; }
.btn-sm { --bs-btn-padding-y: 4px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 12px; --bs-btn-font-weight:400; height:28px; font-weight: 500; }
.btn-md { --bs-btn-padding-y: 5px; --bs-btn-padding-x: 12px; --bs-btn-font-size: 13px; --bs-btn-font-weight:400; height:30px; font-weight: 500; }

button.delete .material-symbols-outlined { color: #ff4a4a!important; }

.material-symbols-outlined { color: #202224; vertical-align: middle; }
.btn-xs .material-symbols-outlined { font-size: 15px; }
.btn-sm .material-symbols-outlined { font-size: 18px; }


/* ========================================================= */
/*                        paginate                           */
/* ========================================================= */
.active>.page-link, .page-link.active { z-index: 3; color: var(--bs-pagination-active-color); background-color: #8c0f96; border-color: #8c0f96; }


/* ========================================================= */
/*                          header                           */
/* ========================================================= */
header {  position: fixed; top:0; left:0; right:0; z-index: 100; width:100%; height: 100px;  display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background-color: white; box-shadow: 0px 2px 12px 4px rgba(0, 0, 0, 0.25); }
header img.logo { margin: 0 30px 10px 10px; }
header .gnb { flex: 1 1 0%; display: flex; justify-content: center; height: 100%; }
header .gnb>ul.main-menu { display: flex; flex-direction: row; height: 100%; }
header .gnb>ul.main-menu>li>.menu-wrap { position: relative; height: 100%; }
header .gnb>ul.main-menu>li>.menu-wrap>p { padding: 35px 10px 10px; margin-right: 30px; position: relative;  display: flex; align-items: center; font-size: 20px; cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease; color: #333;} 

header .gnb>ul.main-menu>li>.menu-wrap>p::before {content: ""; position: absolute; left: 0; top: 0;  width: 100%; height: 100%; background: #f4eff8; z-index: -1; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease;}
header .gnb>ul.main-menu>li:hover>.menu-wrap>p::before { transform: scaleY(1);}
/* header .gnb>ul.main-menu>li>.menu-wrap>p::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 0%; height: 3px; background-color: #8c0f96; transition: all 0.3s ease; transform: translateX(-50%);} */
/* header .gnb>ul.main-menu>li:hover>.menu-wrap>p::after { width: 100%; } */

header .gnb>ul.main-menu>li>.menu-wrap>ul { display: flex; flex-direction: row; align-items: center; column-gap: 32px; white-space: nowrap; position: absolute; z-index: 99; left: 0px; top: calc(100% + 1px); height: 61px; padding: 0px 20px; }
header .gnb>ul.main-menu>li:not(:hover):not(:has(:focus-visible)) ul.sub-menu:not(:focus):not(:focus-within):not(caption) { position: absolute !important; }
header .gnb>ul.main-menu>li:not(:hover) ul.sub-menu { width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }
header .gnb>ul.main-menu>li:not(:hover) ul.sub-menu { display: none; }
/* header .gnb>ul.main-menu>li:hover p { border-bottom: 3px solid #8c0f96; } */
header .gnb>ul.main-menu>li.show:hover::after { overflow: hidden; content: ""; position: absolute; background-color: rgb(255, 255, 255); inset: 100% 0px -62px; height: 62px; border-top: 1px solid rgb(230, 230, 230); box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.25); }
header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li { margin-right: 20px; }
header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li>a:hover { background-color: #8c0f96; color: white; padding: 5px 15px; border-radius: 20px; }
/* Smooth background and padding transition for sub-menu links */
header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li>a {transition: all 0.3s ease;}
header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li:not(:first-child)>a::before { content: "";  display: inline; width: 1px; height: 12px; background-color: #717171; position: absolute; top: 0; bottom: 0; margin: auto -25px; }
header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li:not(:first-child)>a:hover::before { margin: auto -40px; }

header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li>a {
  position: relative;
  display: inline-block;
  color: #333;
  padding: 5px 15px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease;
}

header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li>a::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #8c0f96;
  border-radius: 20px;
  transform: scaleX(0);            /* default collapsed */
  transform-origin: center;        /* animate from center */
  transition: transform 0.3s ease; 
  z-index: -1;
}

header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li>a:hover {
  color: white;
}
/* 


Use ::after for active underline
header .gnb>ul.main-menu>li.active>.menu-wrap>p::after {
  width: 100%; /* keep the underline always visible */
/* } */
header button { position: relative; }
header button:not(:last-child):not(:first-child):after { content: ""; display: inline; width: 1px; height: 12px; background-color: black; position: absolute; top: 0; bottom: 0; margin: auto 15px; }

body.modal-open>header { width: calc(100% - 17px); }

header .menu { display: none; }

header .snb { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; overflow-y: scroll; z-index: 1000; background-color: white; }
header .snb button.bt-close { position: absolute; top: 15px; right: 15px; }
header .snb .bt-close:before, header .snb .bt-close:after { border-color: #8c0f96; }
header .snb .container { padding: 3rem 0rem; }
header .snb ul.main-menu>li { position: relative; padding-left: 20%; }
header .snb ul.main-menu>li:first-child::before { content:''; width: 20%; height: 1px; background-color: #8c0f96; position: absolute; top:10px; left:0; }
header .snb ul.main-menu>li div.menu-wrap { padding-left: 8%; margin-bottom: 40px; }
header .snb ul.main-menu>li div.menu-wrap>a>p { cursor: default; color:#fff; font-size: 2.5vw; font-weight: 500; line-height: 2.5vw; margin-bottom: 30px; margin-top: 0; }
header .snb ul.main-menu>li div.menu-wrap>ul.sub-menu>li { margin-bottom: 10px; }
header .snb ul.main-menu>li div.menu-wrap>ul.sub-menu>li>a { color:#8c0f96; font-size: 12px; }
header .snb ul.main-menu>li div.menu-wrap>ul.sub-menu>li>a:hover { color:#fff; text-decoration: underline; background-color: rgba(0, 0, 0, 0.289); }


/* ========================================================= */
/*                        selectpiker                        */
/* ========================================================= */
.bootstrap-select>.dropdown-toggle.bs-placeholder { background-color: #F9F9FA; color: black; }
.bootstrap-select>.dropdown-toggle, .bootstrap-select>.dropdown-toggle:hover, .bootstrap-select>.dropdown-toggle:focus { border: none; background-color: #F9F9FA; outline: none !important; padding: 0; }
.bootstrap-select { width: auto!important; padding: 2px; }

.modal .bootstrap-select>.dropdown-toggle.bs-placeholder { background: rgba(213, 213, 213, 0.45); color: #9B9B9B; padding: 2px 10px; font-size: 15px; }
.modal .bootstrap-select { width: 50%!important; }
.modal .bootstrap-select>.dropdown-toggle, .modal .bootstrap-select>.dropdown-toggle:hover, .modal .bootstrap-select>.dropdown-toggle:focus { border: none; background: rgba(213, 213, 213, 0.45); outline: none !important; padding: 2px 10px; font-size: 15px; }

.table-th-pink .bootstrap-select>.dropdown-toggle.bs-placeholder { background: rgba(213, 213, 213, 0.45); color: #9B9B9B; padding: 2px 10px; font-size: 15px; }
.table-th-pink .bootstrap-select { width: 50%!important; }
.table-th-pink .bootstrap-select>.dropdown-toggle, .table-th-pink .bootstrap-select>.dropdown-toggle:hover, .table-th-pink .bootstrap-select>.dropdown-toggle:focus { border: none; background: rgba(213, 213, 213, 0.45); outline: none !important; padding: 2px 10px; font-size: 15px; }


/* ========================================================= */
/*                          search                           */
/* ========================================================= */
.search .bootstrap-select>.dropdown-toggle.bs-placeholder { font-size: 15px; }
.search .material-symbols-outlined { color: #646464; }
.search .btn-group .material-symbols-outlined { color: #202224; vertical-align: middle; }
.search input, .search-input input { border: none; outline: none; font-size: 14px; background-color: #F5F6FA; margin-left: 10px; }
.search-group { background-color: #F9F9FA; border: 1px solid #D5D5D5; border-left: none; padding: 6px; }
.search .d-flex.text-right .new { font-size: 15px; height: 40px; }
.search .d-flex.text-right .new:hover { font-size: 15px; }

.search-input { background-color: #F5F6FA; align-items: center; display: flex; width: 300px; padding: 5px 10px; border-radius: 20px; border: 0.60px #D5D5D5 solid; }

.search-section { width: 100%; padding: 10px 30px 30px; }
.search-section .search-menu { display: flex; }
.search-section .search-menu > li { margin-right: 50px; cursor: pointer; }
.search-section .search-menu p { font-size: 20px; }
.search-section ul.search-menu { margin-bottom: 10px; }
.search-section ul.search-menu>li>.menu-wrap { position: relative; height: 100%; }
.search-section ul.search-menu>li>.menu-wrap>ul { display: flex; flex-direction: row; align-items: center; column-gap: 20px; white-space: nowrap; position: absolute; z-index: 99; left: 0px; top: calc(100% + 1px); height: 61px; }
.search-section ul.search-menu>li:not(:hover) ul.sub-menu { display: none; }
.search-section ul.search-menu>li:hover { border-bottom: 3px solid #8c0f96; }
/* .search-section ul.search-menu>li:hover::after { overflow: hidden; content: ""; position: absolute; background-color: rgb(255, 255, 255); inset: 100% 0px -62px; height: 62px; border-top: 1px solid rgb(230, 230, 230); box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.25); background-color: red;  } */

.search-section ul.search-menu>li.add:not(:hover) ul.sub-menu { display: flex; }
/* .search-section ul.search-menu>li.add::after { overflow: hidden; content: ""; position: absolute; background-color: rgb(255, 255, 255); inset: 100% 0px -62px; height: 62px; border-top: 1px solid rgb(230, 230, 230); box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.25); } */

.search-section ul.search-menu>li>.menu-wrap>ul li { border: 1px solid #E8DCFF; border-radius: 20px; padding: 3px 20px; }
.search-section .text-right {  display: flex; justify-content: flex-end; width: 100%; }


/* ========================================================= */
/*                          modal                            */
/* ========================================================= */
.modal-header { border-bottom: none; display: block; text-align: right; padding: 30px 50px 0 50px; }
.modal-body { padding: 0 50px; }
.modal .title { font-size: 25px; padding: 0; }
.modal-body hr { color:black; border-width: 2px; }


/* ========================================================= */
/*                           index                           */
/* ========================================================= */
.index .container { width: 800px; }
.index .title { color: #8c0f96; font-size: 25px!important; font-weight: 700; padding: 10px; }
.index button { padding: 10px 50px; font-size: 25px; border-radius: 50px; }
.index img { width: 200px; }
.index .thumbnail { justify-content: space-between; margin-bottom: 30px; }

.top { background-image: url("/www/images/image_top.png"); background-repeat: no-repeat; background-size: cover; background-position:center; }
.top .container { width: 100%; max-width: 1300px; padding: 80px 100px 30px 100px; }
.top .top-text-1 { font-family: 'title'; color: #8c0f96; font-weight: 500; font-size: 70px; line-height: 75px; }
.top .top-text-1 span { font-size: 40px; font-weight: 700; line-height: 60px; }
.top .top-text-1 b.fw-bold { font-family: 'title2'; }
.top .top-image-1 img { width: 500px; }
.top .top-image-2 img { width: 350px; }
.top .top-text-2 { font-family: 'title'; color: white; font-weight: 500; font-size: 70px; line-height: 80px; }
.top .top-text-2 span { font-size: 40px; font-weight: 700; line-height: 60px; }

.platform p { font-size: 12px; margin-top: 5px; }
.platform-1 { background-color: #f4eff8; margin-top: -60px; border-radius: 20px; padding: 50px 50px 20px 50px; }
.platform-1 .title p { background-color: #8c0f96; border-radius: 30px; width: 300px; color: #f4eff8; margin: auto; padding: 10px 0; font-size: 20px; }
.platform-1 p { color: #8c0f96; }

.person { margin-top: -200px; }
.person img { width: 150px; }
.person .senior { margin-left: -100px; }
.person .couple { margin-right: -150px; margin-top: 120px; }
.person .couple img:first-child { margin-right: -80px; margin-top: -200px; }

.platform-2 { background-color: #eff3f8; margin-top: -120px; border-radius: 20px; padding: 50px 50px 20px 50px; }
.platform-2 .title p { background-color: #004e82; border-radius: 30px; width: 300px; color: #eff3f8; margin: auto; padding: 10px 0; font-size: 20px; }
.platform-2 p { color: #004e82; }

.machine { margin-top: -80px; margin-right: -150px; }

.platform-3 { background-color: #f2f8ef; margin-top: -70px; border-radius: 20px; padding: 50px 50px 20px 50px; }
.platform-3 .title p { background-color: #2a7c11; border-radius: 30px; width: 300px; color: #f2f8ef; margin: auto; padding: 10px 0; font-size: 20px; }
.platform-3 p { color: #2a7c11; }

.heart { margin-top: -120px; margin-left: -100px; }

.platform-4 { background-color: #fff5d4; margin-top: -70px; border-radius: 20px; padding: 50px 50px 20px 50px; }
.platform-4 .title p { background-color: #ed860c; border-radius: 30px; width: 300px; color: #fff5d4; margin: auto; padding: 10px 0; font-size: 20px; }
.platform-4 p { color: #ed860c; }

.moon { margin-top: -80px; margin-right: -140px; }

.stylus img { width: 1200px; margin-left: -350px; }

.eduspace { background-color: #EDDCFE; margin-top: -250px; padding: 80px 80px 30px 80px; }
.eduspace .eduspace-text .title:first-child { font-size: 50px; }
.eduspace .zSpace { font-size: 20px; }
.eduspace .zSpace a { color: #8c0f96; font-weight: 700; }
.eduspace .thumbnail { margin-bottom: 15px; }
.eduspace .thumbnail img { width: 240px; }
.eduspace button { width: 350px; }

.cursor { margin-right: 200px; margin-top: -20px; }
.cursor img { width: 100px; }

.contents { background-color: #8c0f96; border-bottom-left-radius: 300px; border-bottom-right-radius: 300px; }
.contents .container { padding: 100px 0; }
.contents .youtube img { width: 60px; }
.contents .title { color: #f4eff8; }
.contents iframe { height: 420px; }
.contents .swiper img { width: 220px; cursor: pointer; }
.contents button { width: 350px; }
.contents .swiper-slide { opacity: 0.3; cursor: pointer; }
.contents .swiper-slide-prev,
.contents .swiper-slide-active ,
.contents .swiper-slide-next { opacity: 1; } 
.contents .swiper-button-prev { color: #f4eff8; margin-left: -5px; }
.contents .swiper-button-next { color: #f4eff8; margin-right: -5px }

.studioA3 .container { padding: 100px 0; }
.studioA3 .studioA3-text .title:first-child { font-size: 50px; }
.studioA3 .image img { width: 100%; }
.studioA3  button { width: 350px; }

.bottom { background-image: url("/www/images/image_bottom_back.png"); background-repeat: no-repeat; background-size: cover;  background-position:center; height: 1000px; }
.bottom .bottom-text { font-size: 80px; font-weight: 900; padding-top: 330px; color: #8c0f96; font-family: 'title2'; line-height: 90px; }
.bottom .bottom-text p:first-child { font-weight: 500; font-family: 'title'; font-size: 50px; letter-spacing: 13px; margin-left: 10px; }
.bottom .more-btn { background-image: url("/www/images/btn_start_eduspace.png"); background-repeat: no-repeat; background-size: cover;  background-position:center; background-size: 450px;  padding: 30px;}
.bottom button { color: white; }
.bottom button:hover { color:#EDDCFE; }


/* ========================================================= */
/*                          footer                           */
/* ========================================================= */
footer { padding: 50px 0; }
footer a:not(:last-child) { margin-right: 20px; color: #8c0f96!important; }
footer .text-right a:first-child img { width: 50px; height: 100%; padding: 2px; }
footer #to-top { background-color: #8c0f96; color: #f4eff8; width: 42px; height: 42px; border: 2px solid #f4eff8; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 30px; right: -50px; z-index: 9; }
footer .material-symbols-outlined { color: #f4eff8; }

/* ========================================================= */
/*                           etc...                          */
/* ========================================================= */
.container .ibox { font-family: 'Pretendard'; padding: 50px 40px; }
.container .ibox .title { font-size: 25px; }
.container .ibox .sub-title { font-size: 20px; font-weight: 600; }
.container .ibox > div:first-of-type { margin-bottom: 30px; }
.container .ibox hr { border-color: black; border-width: 1px; opacity: 1; }
.container .ibox .form-check { padding: 10px 0 10px 30px; }
.container .ibox .btn-default { width: 100px; border-color: #3C3C3C; color: black; }
.container .ibox .btn-darkblue { width: 150px; border-radius: 20px; margin-top: 30px; }
.container .ibox .form-check .form-check-input { width: 1.6rem; height: 1.6rem; border-radius: 50%; margin-top: 0; box-shadow: none; position: relative; cursor: pointer; }
.container .ibox .form-check .form-check-input::before { content: ''; position: absolute; top: 4px; left: 8px; width: 7px; height: 12px; border: solid #999; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.container .ibox .form-check .form-check-input:checked { background-color: #1F3878; border-color: #1F3878; }
.container .ibox .form-check .form-check-input:focus { border-color: #8D8D8D; }
.container .ibox .form-check .form-check-input:checked::before { border: none; }
.container .ibox .form-check .form-check-label { margin-left: 1rem; }
.container .ibox .form-check .form-check-select .form-check-label { color: #6F6F6F; }
.container .ibox table { margin-bottom: 0; }
.container .ibox table tr { border-bottom: 1px solid #D2CDCD; }
.container .ibox table th, .container .ibox table td { text-align: left; }
.container .ibox table th::before { content: "*"; color: #C60000; margin-right: 5px; } 
.container .ibox table input, .container .ibox table input:focus { border: 1px solid #B9B9B9; margin-right: 15px; outline: none; }
.container .ibox table .btn-default { border-color: #B9B9B9; color: #616161; margin-right: 15px; }
.container .ibox table .phone { width: 80px; }

.term { border: 1px solid #C0C0C0; border-radius: 10px; margin: 1.5rem 0; padding: 1rem; }
.term > div { margin-bottom: 1.5rem; }
.check-term { width: 120px; border-radius: 20px; }

.container .ibox .table-darkblue th { background-color: #372F81; text-align: center; color: white; }
.container .ibox .table-darkblue th::before { content: ""; }
.modal-body.ibox .table-gray input { outline: none; border: none; padding: 3px 10px; }
.modal-body.ibox .table-gray .btn-default { border-color: #909090; color: black; border-radius: 20px; width: 120px; }
.modal-body.ibox .btn-darkblue { margin-bottom: 20px; }

.container-lg .ibox { font-family: 'Pretendard'; padding: 50px 40px; }
.container-lg .ibox .title { font-size: 25px; padding-left: 0; }
.container-lg .ibox .info { color: #C60000; }
.container-lg .ibox .table-bordered.table-gray td { text-align: center; }

.modal-body.ibox .d-flex { margin-bottom: 20px; }
.modal-body.ibox .d-flex .btn-default { padding: 2px 20px; border-radius: 20px; }
.modal-body.ibox .d-flex .btn-default:not(:last-child) { margin-right: 10px; }
.modal-body.ibox .d-flex .btn-default.add { border-radius: 5px; padding: 5px 10px; }
.modal-body.ibox .d-flex .btn-default.add .material-symbols-outlined { margin: -2px 7px 0 0; color: #372F81; }
.modal-body.ibox .table-no-input input { background-color: white; box-shadow: none; }
.modal-body.ibox .table-bordered.table-gray:not(.table-no-input) td { text-align: center; }

.modal-info-header { display: flex; justify-content: space-between; background-color: #372F81; color: white; padding: 40px 50px 30px 50px; }
.modal-info-header .modal-title { text-align: left; font-size: 25px; line-height: normal; }
.modal-info-header .btn-close { position: absolute; top: 30px; right: 30px; }
.modal-info-body { padding: 40px; }
.modal-info-body > div:not(:last-child) { margin-bottom: 30px; }
.modal-info-body .info { color: #B70000; }
.modal-info-body .btn-default { border-color: #372F81; color: #372F81; border-radius: 20px; text-align: center; width: 150px; padding: 5px; margin-bottom: 10px; }
.modal-info-body span { display: inline-block; width: 7px;height: 7px; transform: rotate(42.407deg); background: #372F81; margin: 0 10px 0 5px; }
.modal-info-body .btn-darkblue { border-radius: 20px; width: 150px; }





.intro .sub-title { font-size: 25px; font-weight: 700; margin-top: 30px; margin-bottom: 50px; }

.intro-top { position: relative; }
.intro-top p { font-size: 30px; }
.intro-top p span { background-color: #372F81; color: white; }
.intro-top .intro-img { position: absolute; width: 380px; top: -100px; right: 0; }

.head { display: flex; align-items: flex-end; margin-bottom: 30px; margin-top: 30px; }
.head p { font-size: 25px; }
.head img { margin: 0 5px 3px 0; width: 300px; }

.paper-container img { width: 100px; }
.paper-container { margin-top: 70px; }
.paper-container .logo { position: absolute; top: 50px; right: 50px; }
.paper-container .clip { position: absolute; top: -26px; left: 120px; }
.paper-container .clip img { width: 30px; }
.paper { background-color: #f5f5f5; padding: 80px; border-radius: 5px; box-shadow: 0px 4px 20.1px 3px rgba(0, 0, 0, 0.25); position: relative; width: 100%; }
.paper::before { content: ""; position: absolute; top: 10px; left: 10px; width: 100%; height: 100%; transform: rotate(3deg); background: #D9D9D9; border-radius: 5px; box-shadow: 0px 4px 24.5px 11px rgba(0, 0, 0, 0.25); z-index: -1; }
.text-content { font-family: 'paper'; margin: 80px 0; line-height: 2; font-size: 16px; }
.text-content div:not(:last-child) { border-bottom: 1px solid black; margin-top: 10px; }

.back { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; }
.back img { width: 150px; }
.back-preminum { background: linear-gradient(90deg, #FFFDE3, rgba(255, 106, 0, 0.20)); }
.back-preminum .premium-box { position: relative; }
.back-preminum .title { margin-top: 30px; }
.back-preminum img.crown { width: 60px; position: absolute; left: 40px; }
.back-content { background: linear-gradient(90deg, #F1F0FF, rgba(161.50, 0, 255, 0.20)); }
.back-activity { background: linear-gradient(90deg, #FFF0FB, rgba(255, 0, 161.50, 0.20)); }
.back-activity img { width: 200px; }
.back-model { background: linear-gradient(90deg, #F0F9FF, rgba(0, 89.25, 255, 0.20)); }
.back-faq { background: linear-gradient(90deg, #F1F0FF, rgba(255, 0, 0, 0.20)); }
.back-notice { background: linear-gradient(90deg, #F1F0FF, rgba(0, 255, 106.25, 0.20)); }
.back-inquiry { background: linear-gradient(90deg, #F1F0FF, rgba(255, 165.75, 0, 0.20)); }
.back-intro { background: linear-gradient(90deg, #F1F0FF, rgba(0, 229.50, 255, 0.20)); }
.back-exper { background: linear-gradient(90deg, #F1F0FF, rgba(0, 255, 106.25, 0.20)); }
.back-download { background: linear-gradient(90deg, #F1F0FF, rgba(0, 255, 106.25, 0.20)); }
.back-info { background: linear-gradient(90deg, #FFEFC5, rgba(255, 0, 4, 0.20)); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }
.back-mypage { background: linear-gradient(90deg, #F0F9FF, rgba(0, 89, 255, 0.20)); }

.content-info > div { margin-top: 30px; }
.content-info .material-symbols-outlined { color: #372F81; transform: scaleY(1.5); }
.content-info .sub-title { font-weight: 700; font-size: 25px; }
.content-info .table { border-top: 2px solid #7C7C7C; }
.content-info .table-bordered.table-gray td { text-align: center; padding: 20px 0; }
.content-info .table-bordered.table-gray tr *:first-child { border-right: 1px solid #D5D5D5; }
.content-info .circle { position: relative; }
.content-info .d-flex > div { width: 250px; margin-bottom: 50px; }
.content-info .d-flex > div:nth-child(odd) { margin-right: 100px; }
.content-info .circle p { position: absolute; font-size: 50px; color: rgba(0, 0, 0, 0.11); top: -25px; left: 15px; }
.content-info .image { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background-color: #F1F0FF; margin: 0 auto; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }
.content-info .image img { width: 50px; height: auto; object-fit: cover; margin-right: 0; }

.title { font-size: 30px; padding: 20px; }
.page-admin .title { padding: 0; margin: 20px 0px; }
.sub-title { margin-bottom: 10px; }

.title.blue { color: #3434A9; }
.title small { font-size: 18px; color: black; margin-left: 5px; }

.baby-title { font-family: 'baby'; margin-top: 50px; font-size: 25px; }
.baby-title span { font-size: 50px; }
.baby-title.sub-title span { font-size: 35px; }
.baby-title span.blue { color: #372F81; }

.page-menu { box-shadow: 0px 2px 12px 4px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px; font-size: 18px; }
.page-menu .sub-menu { display: flex; position: relative; }
.page-menu .sub-menu li a:hover { background-color: #8c0f96; color: white; padding: 5px 15px; border-radius: 20px; }
.page-menu .sub-menu li:not(:last-child) { margin-right: 40px; }
.page-menu .sub-menu li:not(:first-child)::before { content: "";  display: inline; width: 1px; height: 12px; background-color: #717171; position: absolute; top: 0; bottom: 0; margin: auto -20px; }

.col .card { margin-right: 30px; margin-bottom: 50px; border-radius: 30px; height: 350px; box-shadow: 4px 4px 10.100000381469727px rgba(0, 0, 0, 0.25); }
.card img { height: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; display: block; width: 100%; }
.card .image-wrapper { position: relative; display: inline-block; }
.card .pre-button { display: flex; vertical-align: middle; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 3px 25px; background-color: white; color: #FFBB00; border: none; border-radius: 20px; font-size: 18px; }
.card .pre-button img { width: 30px; margin-right: 7px; }
.card .free-button { display: flex; vertical-align: middle; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 3px 50px; background-color: white; color: #2980EB; border: 1px solid #2980EB; border-radius: 20px; font-size: 18px; }
.card .card-body { padding: 25px; }
.card .card-title { font-size: 18px; }
.card .card-text { margin-bottom: 20px; height: 45%; font-size: 15px; font-weight: 400; }
.card button { border-radius: 20px; height: 25px; font-size: 15px; font-weight: 400; padding: 0; }

.h-card img { height: 180px; }
.h-card .card-text { height: 35%; }

input.no-line { border: none; }

.table { margin-bottom: 50px; }
.table td, .table th { padding: 15px; border: none; font-weight: 500!important; }
.table .title { font-size: 20px; padding-left: 15px; font-weight: 700!important; }

.table-gray { margin-bottom: 30px; }
.table-gray th { background-color: #F8F8F8; }
.table-gray th, .table-gray td { padding: 8px; }

.table-bordered.table-gray td { text-align: left; }
.table-bordered.table-gray input { border-radius: 15px; background: rgba(216, 216, 216, 0.80); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; }

.table-pink { background-color: #fff; border-radius: 15px; border: 0.3px solid #D5D5D5; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-top: 30px; }
.table-pink thead th:first-child { border-top-left-radius: 15px; }
.table-pink thead th:last-child { border-top-right-radius: 15px; }
.table-pink td, .table-pink th { border-bottom: 0.3px solid #D5D5D5; }
.table-pink tr:last-child td { border-bottom: none; }
.table-pink thead { background: #F2EFFF; }

.table-th-pink th { background: #F2EFFF; }

.table-bordered.table-pink td, .table-bordered.table-pink th { border-left: 0.3px solid #D5D5D5; }
.table-bordered.table-pink td:first-child, .table-bordered.table-pink th:first-child { border-left: none; }
.table-bordered.table-pink .text-left { padding-left: 25px; }

.table-blue thead { background-color: #372F81; color: white; border-radius: 20px; }
.table-blue thead td:first-child { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.table-blue thead td:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
.table-blue tbody tr:first-child td, .table-blue tbody tr:first-child th { padding-top: 25px; }
.table-image img { width: 120px; margin-right: 15px; }
.image img { width: 200px; margin-right: 15px; }
table .content { padding: 50px!important; }

.table-cs { border-collapse: separate; border-spacing: 0 10px; }
.table-cs th { background-color: #372F81; color: white; width: 120px; }
.table-cs td { border-bottom: 1px solid #EEEEEE; border-top: 1px solid #EEEEEE; padding: 5px 0; }
.table-cs tbody tr:first-child th, .table-cs tbody tr:first-child td { padding: 5px 0; }
.table-cs input, .table-cs textarea { border: none; box-shadow: none!important; outline: none; padding-left: 20px; }
.table-cs textarea { height: 200px; resize: none; }
.table-cs .bootstrap-select>.dropdown-toggle { background-color: #D5D5D573; margin-left: 15px; border-radius: 20px; width: 150%; }
.table-cs .bootstrap-select>.dropdown-toggle.bs-placeholder { padding: 5px 10px; }
.table-cs .dropdown-menu.show { width: 150%; }

.table-head { border-collapse: separate; border-spacing: 10px 0!important; margin-top: 30px; margin-bottom: 0; }
.table-download { border-collapse: separate; border-spacing: 0 5px; }
.table-download th { background-color: #372F81; color: white; }
.table-download thead td { background-color: white; border-radius: 0; }
.table-download tbody th { width: 150px; }
.table-download tbody tr:first-child td, .table-download tbody tr:first-child th { padding: 15px; }
.table-download tbody td { border-bottom: 1px solid #EEEEEE; }
.table-download tbody tr:first-child td { border-top: 1px solid #EEEEEE; }

.table-board { margin-top: 30px; }

.container .title { font-size: 40px; font-weight: 600; padding: 0; }
.container .studio-image img { width: 100%; margin-top: 30px; }

iframe { width: 100%; height: 600px; }

.N { border-radius: 5px; background: #dfeede; color: #169506; padding: 2px; }
.Y { border-radius: 5px; background: #f7cbcb; color: #FC0000; padding: 2px; }
.state-Y { border-radius: 5px; background: #dfeede; color: #169506; padding: 2px; }
.state-D { border-radius: 5px; background: #f7cbcb; color: #FC0000; padding: 2px; }
.state-N { border-radius: 5px; background: #ffd7c6; color: #FF4C00; padding: 2px; }

.input-group-text { border-radius: 0; }
.input-group input { background-color: #F9F9FA!important; border: 1px solid #ced4da!important; padding: 0 5px; }

/* sweet alert custrom */
.swal2-popup { width: initial; min-width: 22rem; border-radius: 20px; padding: 15px 100px 30px; }
.swal2-popup .swal2-title { color: black; font-weight: 500; margin-top: 10px; }
.swal2-popup .swal2-icon { zoom: 0.60; margin: 2.25em auto 0em; }
.swal2-popup .swal2-close { height: 1.2em; padding: 0; }
.swal2-popup .swal2-actions { margin: 1em auto 0; }
.swal2-popup .swal2-actions>button { margin: 0 10px; padding: 0; min-width: 80px; background-color: #8c0f96; border-radius: 20px; box-shadow: none!important; }
.swal2-styled.swal2-confirm:hover { background-color: #8c0f96; }
.swal2-popup .swal2-html-container { font-size: 15px; margin: 0.5em 1.6em; }
.swal2-popup .swal2-styled.swal2-cancel { border-color: #545b62; background-color: #a8aeb3; }

/* toast custom */
.jq-toast-wrap { width: auto!important; }
.jq-toast-wrap .jq-toast-single { background-color: #8c0f96; padding: 12px 20px 8px 12px; }


/* ========================================================= */
/*                         notebook                          */
/* ========================================================= */
@media (max-width: 1400px) 
{
  header { position: fixed; top:0; left:0; right:0; z-index: 100; width:100%; height: 100px;  display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background-color: white; box-shadow: 0px 2px 12px 4px rgba(0, 0, 0, 0.25); }
  header img.logo { margin: 0 20px 10px 10px; width: 150px; }
  header .gnb { flex: 1 1 0%; display: flex; justify-content: center; height: 100%; }
  header .gnb>ul.main-menu { display: flex; flex-direction: row; height: 100%; }
  header .gnb>ul.main-menu>li>.menu-wrap { position: relative; height: 100%; }
  header .gnb>ul.main-menu>li>.menu-wrap>p { padding: 38px 10px 10px; margin-right: 10px; position: relative;  display: flex; align-items: center; font-size: 15px; cursor: pointer; transition: color 0.3s ease;}
  header .gnb>ul.main-menu>li>.menu-wrap>ul { display: flex; flex-direction: row; align-items: center; column-gap: 32px; white-space: nowrap; position: absolute; z-index: 99; left: 0px; top: calc(100% + 1px); height: 51px; padding: 0px 20px; }
  header .gnb>ul.main-menu>li:not(:hover):not(:has(:focus-visible)) ul.sub-menu:not(:focus):not(:focus-within):not(caption) { position: absolute !important; }
  /* header .gnb>ul.main-menu>li:not(:hover) ul.sub-menu { width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; } */
  header .gnb>ul.main-menu>li:not(:hover) ul.sub-menu { display: none; }
  header .gnb>ul.main-menu>li:hover p { border-bottom: 3px solid #8c0f96; }
  header .gnb>ul.main-menu>li.show:hover::after { overflow: hidden; content: ""; position: absolute; background-color: rgb(255, 255, 255); height: 52px; border-top: 1px solid rgb(230, 230, 230); box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.25); }
  header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li { margin-right: 0; font-size: 15px; }
  header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li>a:hover { background-color: #8c0f96; color: white; padding: 5px 15px; border-radius: 20px; }
  header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li:not(:first-child)>a::before { content: "";  display: inline; width: 1px; height: 12px; background-color: #717171; position: absolute; top: 0; bottom: 0; margin: auto -15px; }
  header .gnb>ul.main-menu>li>.menu-wrap>ul.sub-menu>li:not(:first-child)>a:hover::before { margin: auto -30px; }
  header button { position: relative; font-size: 13px!important; }
  header button:not(:last-child):not(:first-child)::after { content: ""; display: inline; width: 1px; height: 12px; background-color: black; position: absolute; top: 0; bottom: 0; margin: auto 15px; }

  .search-input { background-color: #F5F6FA; align-items: center; display: flex; width: 200px; padding: 5px 10px; border-radius: 20px; border: 0.60px #D5D5D5 solid; }
  .search .material-symbols-outlined, .search-input .material-symbols-outlined { color: #646464; font-size: 18px; }
  .search input, .search-input input { border: none; outline: none; font-size: 12px; background-color: #F5F6FA; margin-left: 0; }

  .index .title { color: #8c0f96; font-size: 20px; font-weight: 700; padding: 10px; }

  .top .container { width: 100%; max-width: 1300px; padding: 50px 100px 50px 100px; }
  .top .top-text-1 { font-family: 'title'; color: #8c0f96; font-weight: 500; font-size: 60px; line-height: 65px; }
  .top .top-text-1 span { font-size: 40px; font-weight: 700; line-height: 60px; }
  .top .top-image-1 img { width: 400px; }
  .top .top-image-2 img { width: 300px; }
  .top .top-text-2 { font-family: 'title'; color: white; font-weight: 500; font-size: 70px; line-height: 80px; }
  .top .top-text-2 span { font-size: 40px; font-weight: 700; line-height: 60px; }

  .act-card { width: 290px; }
}


/* ========================================================= */
/*                          mobile                           */
/* ========================================================= */
@media (max-width: 800px)
{
  .container { width:100%; padding: 20px; margin:0 auto; }
  .section { width:100%; padding: 20px; max-width: 1800px; margin:0 auto; }
  section { width:100%; padding: 5px!important; }
  .ibox { width:90%; background-color: #fff; border-radius: 20px; margin:15px auto; padding: 20px; }

  .btn { font-size: 10px; }

  header { padding: 0 5px; height: 65px; }
  header .gnb, header .search-input { display: none; }
  header .menu { display: block; }
  header .menu button { width: 26px; height: 21px; border-top: 3px solid #333; border-bottom: 3px solid #333; position: relative; top: -2px; margin-left: 20px; }
  header .menu button:after { content: ''; width: 100%; height: 3px; background-color: #333; position: absolute; top:0; bottom: 0; left:0; margin: auto; }
  header .menu button.bt-snb { margin: 5px 12px 0 0; background-color: white; border-left: none; border-right: none; }
  header .login { position: absolute; right:50px; }
  header .snb button.bt-close { right:15px; }
  header img.logo { width: 90px; margin-top: 7px; }
  header button.bt-close::after { display: none; }

  .page { padding-top: 65px; }

  .index .container { width: 100%; }
  .index button { padding: 7px 20px; font-size: 10px; border-radius: 50px; }
  .index img { width: 110px; }
  .index .thumbnail { justify-content: space-between; margin-bottom: 15px; }

  .top { background-image: url("/www/images/image_top.png"); background-repeat: no-repeat; background-size: cover; background-position:center; }
  .top .container { width: 100%; padding: 20px; }
  .top .top-text-1 { font-family: 'title'; color: #8c0f96; font-weight: 500; font-size: 23px; line-height: 27px; margin-top: 0; }
  .top .top-text-1 span { font-size: 13px; font-weight: 700; line-height: 0; }
  .top .top-image-1 img { width: 170px; }
  .top .top-image-2 img { width: 150px; margin-top: 20px; }
  .top button { margin-top: -35px; }
  .top .top-text-2 { font-family: 'title'; color: white; font-weight: 500; font-size: 23px; line-height: 27px; margin-top: 20px; }
  .top .top-text-2 span { font-size: 13px; font-weight: 700; line-height: 0; }
  
  .platform .container { margin-top: 10px!important; }
  .platform p { font-size: 8px; margin-top: 5px; }
  .platform .space { font-size: 10px; }
  .platform .space .mt-60 { margin-top: 30px!important; }
  .platform .title { font-size: 12px!important; }
  .platform-1 { background-color: #f4eff8; margin-top: -13px; border-radius: 20px; padding: 30px 10px 10px 10px; }
  .platform-1 .title p { background-color: #8c0f96; border-radius: 30px; width: 70%; color: #f4eff8; margin: auto; padding: 10px 0; font-size: 10px; }
  
  .person { margin-top: -20px; }
  .person img { width: 50px; }
  .person .senior { margin-left: -20px; }
  .person .couple { margin-right: -20px; margin-top: 45px; }
  .person .couple img:first-child { margin-right: -40px; margin-top: -100px; }

  .platform-2 { background-color: #eff3f8; margin-top: -70px; border-radius: 20px; padding: 30px 10px 10px 10px; }
  .platform-2 .title p { background-color: #004e82; border-radius: 30px; width: 70%; color: #eff3f8; margin: auto; padding: 10px 0; font-size: 10px; }

  .machine { margin-top: -30px; margin-right: -10px; }

  .platform-3 { background-color: #f2f8ef; margin-top: -40px; border-radius: 20px; padding: 30px 10px 10px 10px; }
  .platform-3 .title p { background-color: #2a7c11; border-radius: 30px; width:  70%; color: #f2f8ef; margin: auto; padding: 10px 0; font-size: 10px; }

  .heart { margin-top: -40px; margin-left: -30px; }

  .platform-4 { background-color: #fff5d4; margin-top: -50px; border-radius: 20px; padding: 30px 10px 10px 10px; }
  .platform-4 .title p { background-color: #ed860c; border-radius: 30px; width: 70%; color: #fff5d4; margin: auto; padding: 10px 0; font-size: 10px; }
  .platform-4 p { color: #ed860c; }
  
  .moon { margin-top: -30px; margin-right: -20px; }

  .stylus img { width: 105%; margin-left: -10px; }

  .eduspace { background-color: #EDDCFE; margin-top: -80px; padding: 0; }
  .eduspace .eduspace-text { margin-bottom: 10px!important; }
  .eduspace .eduspace-text .title { font-size: 10px; }
  .eduspace .eduspace-text .title:first-child { font-size: 15px; }
  .eduspace .zSpace { font-size: 7px; margin-bottom: 10px!important; }
  .eduspace .zSpace p { margin-right: 5px!important; }
  .eduspace .zSpace a { color: #8c0f96; font-weight: 700; }
  .eduspace .thumbnail { margin-bottom: 5px; }
  .eduspace .thumbnail img { width: 120px; }
  .eduspace .text-center.mt-80 { margin-top: 30px!important; }
  .eduspace button { width: 70%; }

  .cursor { margin-right: 50px; margin-top: -15px; }
  .cursor img { width: 30px; }

  .contents { background-color: #8c0f96; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; }
  .contents .container { padding: 20px 10px; }
  .contents .container .mb-20 { margin-bottom: 10px!important; }
  .contents .youtube { margin-right: 5px!important; margin-top: -6px; }
  .contents .youtube img { width: 20px; }
  .contents .title { color: #f4eff8; font-size: 10px; }
  .contents iframe { height: 170px; }
  .contents .slide.mt-20 { margin-top: 5px!important; }
  .contents .swiper img { width: 110px; cursor: pointer; }
  .contents .text-center.mt-80 { margin-top: 30px!important; }
  .contents button { width: 70%; }
  .contents .swiper-slide { opacity: 0.3; cursor: pointer; }
  .contents .swiper-slide-prev,
  .contents .swiper-slide-active ,
  .contents .swiper-slide-next { opacity: 1; } 
  .contents .swiper-button-prev { color: #f4eff8; margin-left: -17px; }
  .contents .swiper-button-next { color: #f4eff8; margin-right: -17px }
  .contents .swiper-button-prev:after, .contents .swiper-button-next:after { font-size: 15px; }
  
  .studioA3 .container { padding: 60px 50px; }
  .studioA3 .studioA3-text.mb-30 { margin-bottom: 15px!important; }
  .studioA3 .studioA3-text .title { font-size: 13px; }
  .studioA3 .studioA3-text .title:first-child { font-size: 20px; }
  .studioA3 .image img { width: 100%; }
  .studioA3  button { width: 80%; }
  .studioA3 .text-center.mt-80 { margin-top: 30px!important; }
  .studioA3 .cursor { margin-right: 30px; margin-top: -15px; }
  
  .bottom { background-image: url("/www/images/image_bottom_back.png"); background-repeat: no-repeat; background-size: cover;  background-position:center; height: 300px; }
  .bottom .bottom-text { font-size: 26px; font-weight: 900; padding-top: 80px; color: #8c0f96; font-family: 'title2'; line-height: 30px; }
  .bottom .bottom-text.mb-50 { margin-bottom: -10px!important; }
  .bottom .bottom-text p:first-child { font-weight: 500; font-family: 'title'; font-size: 20px; letter-spacing: 1px; margin-left: 5px; }
  .bottom .more-btn { background-image: url("/www/images/btn_start_eduspace.png"); background-repeat: no-repeat; background-size: cover;  background-position:center; background-size: 60%;  padding: 30px;}
  .bottom button { color: white; }
  .bottom button:hover { color:#EDDCFE; }
  
  footer { padding: 0; font-size: 7px; }
  footer .mt-20 { margin-top: 10px!important; }
  footer a:not(:last-child) { margin-right: 5px; color: #8c0f96!important; }
  footer .text-right a img { width: 20px; }
  footer .text-right a:first-child img { width: 30px; height: 100%; padding: 2px; margin-right: 2px; }
  footer .text-right a:last-child img { margin-left: 3px; }
  footer #to-top { background-color: #8c0f96; color: #f4eff8; width: 30px; height: 30px; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 100px; right: -70px; z-index: 9; }
  footer .material-symbols-outlined { font-size: 15px; }

  .login-page .title, .join-page .title { font-size: 15px; }
  .login-page input, .join-page input { font-size: 8px; }
  .login-page .text, .join-page .text { font-size: 10px!important; }


  section > .container .sub-title { font-size: 12px; }
  .page-menu { font-size: 12px; }
  .page-menu .sub-menu li:not(:last-child) { margin-right: 25px; }
  .page-menu .sub-menu li:not(:first-child)::before { margin: auto -14px; }
  .search-section { padding: 0; }
  .search-section .search-menu { margin-bottom: 50px!important; }
  .search-section form[name="contents-form"] { display: flex; justify-content: space-between; }
  .search-section .text-right { width: auto; }
  .search-section .search-menu p { font-size: 12px; }
  .search-section .search-menu > li { margin-right: 15px; }
  .search { width: 140px; margin-top: -5px; height: 30px; }
  .search input { font-size: 10px; width: 100px; }
  .search-section ul.search-menu>li>.menu-wrap>ul li { font-size: 12px; padding: 3px 10px; }
  .search-section ul.search-menu>li>.menu-wrap>ul { column-gap: 10px; }

  .col .card { margin-right: 0; margin-bottom: 20px; border-radius: 15px; height: 240px; }
  .card img { border-top-left-radius: 15px; border-top-right-radius: 15px; height: 35%; }
  .card .card-body { padding: 10px; }
  .card .card-title { font-size: 11px; }
  .card .card-text { font-size: 9px; margin-bottom: 10px; height: auto; }
  .card button { font-size: 10px; height: 17px; width: 70px!important; }
  .act-card { width: auto; }
  .h-card { height: 150px!important; }

  .page-link { font-size: 2px; }
  .active>.page-link, .page-link.active { z-index: 3; color: var(--bs-pagination-active-color); background-color: #8c0f96; border-color: #8c0f96; }

  .table { font-size: 10px; margin-bottom: 20px; }
  .table th { padding: 5px; }
  .table td { padding: 5px; }
  .table .w-120 { width: 60px!important; }
  .table .w-150 { width: 100px!important; }
  .table .table-title { width: 170px; }
  .table-download { font-size: 10px; }
  .table-download tbody th { width: 100px; }
  .table-board .w-150 { width: 70px!important; }
  .table-blue .text-left { font-size: 8px; }
  .table-cs th { width: 50px; }
  .table-cs input { font-size: 6px; padding-left: 5px;}
  .table-cs .bootstrap-select>.dropdown-toggle { margin-left: 5px; width: 100%; }

  .container .title { font-size: 30px; }

  .baby-title { font-family: 'baby'; margin-top: 30px; font-size: 18px; }
  .baby-title span { font-size: 25px; }
  section > .container .baby-title.sub-title { font-size: 18px; }
  .baby-title.sub-title span { font-size: 18px; }
  .baby-title span.blue { color: #372F81; }

  .intro .sub-title { font-size: 25px; font-weight: 700; margin-top: 30px; margin-bottom: 30px; }

  .intro-top { position: relative; }
  .intro-top p { font-size: 15px; }
  .intro-top p span { background-color: #372F81; color: white; }
  .intro-top .intro-img { position: absolute; width: 150px; top: -60px; right: 0; }

  .head { display: flex; align-items: flex-end; margin-bottom: 10px; margin-top: 10px; }
  .head p { font-size: 15px; }
  .head img { margin: 0 5px 3px 0; width: 130px; }

  .paper-container img { width: 50px; }
  .paper-container { margin-top: 70px; }
  .paper-container .logo { position: absolute; top: 50px; right: 50px; }
  .paper-container .clip { position: absolute; top: -16px; left: 50px; }
  .paper-container .clip img { width: 20px; }
  .paper { background-color: #f5f5f5; padding: 80px 20px; border-radius: 5px; box-shadow: 0px 4px 20.1px 3px rgba(0, 0, 0, 0.25); position: relative; width: 100%; }
  .paper::before { content: ""; position: absolute; top: 10px; left: 0; width: 100%; height: 100%; transform: rotate(1deg); background: #D9D9D9; border-radius: 5px; box-shadow: 0px 4px 24.5px 11px rgba(0, 0, 0, 0.25); z-index: -1; }
  .text-content { font-family: 'paper'; margin: 20px 0; line-height: 2; font-size: 10px; }
  .text-content div:not(:last-child) { border-bottom: 1px solid black; margin-top: 10px; }

  .content-info { font-size: 10px; }
  .content-info > div { margin-top: 30px; }
  .content-info .material-symbols-outlined { color: #372F81; transform: scaleY(1.5); }
  .content-info .sub-title { font-weight: 700; font-size: 25px; }
  .content-info .table { border-top: 2px solid #7C7C7C; }
  .content-info .table-bordered.table-gray td { text-align: center; padding: 5px 0; }
  .content-info .table-bordered.table-gray tr td:first-child { border-right: 1px solid #D5D5D5; }
  .content-info .table-bordered.table-gray .w-200 { width: 80px!important; }
  .content-info .circle { position: relative; }
  .content-info .d-flex > div { width: 200px; margin-bottom: 50px; }
  .content-info .d-flex > div:nth-child(odd) { margin-right: 10px; }
  .content-info .circle p { position: absolute; font-size: 35px; color: rgba(0, 0, 0, 0.11); top: -25px; left: 15px; }
  .content-info .image { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background-color: #F1F0FF; margin: 0 auto; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }
  .content-info .image img { width: 50px; height: auto; object-fit: cover; margin-right: 0; }

  /* sweet alert custrom */
  .swal2-popup { width: initial; min-width: 22rem; border-radius: 20px; padding: 15px 100px 30px; }
  .swal2-popup .swal2-title { color: black; font-weight: 500; margin-top: 10px; }
  .swal2-popup .swal2-icon { zoom: 0.60; margin: 2.25em auto 0em; }
  .swal2-popup .swal2-close { height: 1.2em; padding: 0; }
  .swal2-popup .swal2-actions { margin: 1em auto 0; }
  .swal2-popup .swal2-actions>button { margin: 0 10px; padding: 0; min-width: 80px; background-color: #8c0f96; border-radius: 20px; box-shadow: none!important; }
  .swal2-styled.swal2-confirm:hover { background-color: #8c0f96; }
  .swal2-popup .swal2-html-container { font-size: 15px; margin: 0.5em 1.6em; }
  .swal2-popup .swal2-styled.swal2-cancel { border-color: #545b62; background-color: #a8aeb3; }

  /* sweet alert custrom */
  /* .swal2-popup { width: initial; min-width: 80%; border: 2px solid #8c0f96; }
  .swal2-popup .swal2-title { color: #8c0f96; font-size: 15px; }
  .swal2-popup .swal2-icon { zoom: 0.60; margin: 2.25em auto 0em; }
  .swal2-popup .swal2-close { height: 1.2em; padding: 0; }
  .swal2-popup .swal2-actions { margin: 1em auto 0; }
  .swal2-popup .swal2-actions>button { margin: 0; padding: 0; min-width: 50px; font-size: 10px; }
  .swal2-popup .swal2-html-container { font-size: 10px; }
  .swal2-popup .swal2-styled.swal2-cancel { border-color: #545b62; background-color: #a8aeb3; } */
}