@font-face {
     font-family: "Jalnan2";
     src: url("../fonts/Jalnan2.woff") format("woff");
 }

 @font-face {
     font-family: "OneMobilePop";
     src: url("../fonts/ONE-Mobile-POP.woff") format("woff");
 }

 @font-face {
     font-family: "SCDream4";
     src: url("../fonts/SCDream4.woff") format("woff");
 }

 @font-face {
     font-family: "SCDream5";
     src: url("../fonts/SCDream5.woff") format("woff");
 }

 html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
     font-family: 'Pretendard-Medium', sans-serif;
     /*background: #f9f9f9;*/
     background-color: #1656A7;
     color: #474747;
     -webkit-tap-highlight-color: transparent;
 }

 body {
     display: flex;
     flex-direction: column;
 }

 header {
     display: flex;
     background-color: #1656A7;
     color: white;
     padding: 1rem 1rem 1rem 1rem;
     text-align: center;
 }

 /*
    header h1 {
      margin-top: 0.56rem;
      font-size: (1.5rem + 1vw);
    }
*/
 header .head-logo {
     display: flex;
 }

 header .head-logo img {
     width: calc(8rem + 7vw);
 }

 header .head-title {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: flex-end;
     font-family: 'Jalnan2';
     font-size: calc(0.7rem + 1.2vw);
     opacity: 0.5;
 }

 .tab-buttons {
     display: flex;
     justify-content: center;
     gap: 2px;
     padding: 10px;
     background-color: #1656A7;
 }

 .tab-buttons button {
     /*padding: 0.5rem 1rem;*/
     border: none;
     background-color: #FFFFFF;
     cursor: pointer;
     color: #5287C9;
     font-family: 'Jalnan2';
     /*font-weight: bold;*/
     width: 25%;
     height: calc(3rem + 1vw);
     /*font-size: calc(0.9rem + 0.2vw);*/
     font-size: calc(0.7rem + 1vw);
     padding-top: 15px;
     padding-bottom: 15px;
     line-height: calc(0.8rem + 1vw);
 }

 .tab-buttons button:first-child {
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
 }

 .tab-buttons button:last-child {
     border-top-right-radius: 15px;
     border-bottom-right-radius: 15px;
 }

 .tab-buttons button.active0 {
     background-color: #05BEF2;
     color: white;
     text-shadow: 1px 0px 0px #0498C2, 0px 1px 0px #0498C2, -1px 0px 0px #0498C2, 0px -1px 0px #0498C2, 1px 1px 0px #0498C2, -1px 1px 0px #0498C2, -1px -1px 0px #0498C2, 1px -1px 0px #0498C2,
         2px 0px 0px #0498C2, 0px 2px 0px #0498C2, -2px 0px 0px #0498C2, 0px -2px 0px #0498C2, 2px 2px 0px #0498C2, -2px 2px 0px #0498C2, -2px -2px 0px #0498C2, 2px -2px 0px #0498C2;
 }

 .tab-buttons button.active1 {
     background-color: #F16EAA;
     color: white;
     text-shadow: 1px 0px 0px #B5527F, 0px 1px 0px #B5527F, -1px 0px 0px #B5527F, 0px -1px 0px #B5527F, 1px 1px 0px #B5527F, -1px 1px 0px #B5527F, -1px -1px 0px #B5527F, 1px -1px 0px #B5527F,
         2px 0px 0px #B5527F, 0px 2px 0px #B5527F, -2px 0px 0px #B5527F, 0px -2px 0px #B5527F, 2px 2px 0px #B5527F, -2px 2px 0px #B5527F, -2px -2px 0px #B5527F, 2px -2px 0px #B5527F;
 }

 .tab-buttons button.active2 {
     background-color: #6CC063;
     color: white;
     text-shadow: 1px 0px 0px #51904a, 0px 1px 0px #51904a, -1px 0px 0px #51904a, 0px -1px 0px #51904a, 1px 1px 0px #51904a, -1px 1px 0px #51904a, -1px -1px 0px #51904a, 1px -1px 0px #51904a,
         2px 0px 0px #51904a, 0px 2px 0px #51904a, -2px 0px 0px #51904a, 0px -2px 0px #51904a, 2px 2px 0px #51904a, -2px 2px 0px #51904a, -2px -2px 0px #51904a, 2px -2px 0px #51904a;
 }

 .tab-buttons button.active3 {
     background-color: #F58542;
     color: white;
     text-shadow: 1px 0px 0px #b86431, 0px 1px 0px #b86431, -1px 0px 0px #b86431, 0px -1px 0px #b86431, 1px 1px 0px #b86431, -1px 1px 0px #b86431, -1px -1px 0px #b86431, 1px -1px 0px #b86431,
         2px 0px 0px #b86431, 0px 2px 0px #b86431, -2px 0px 0px #b86431, 0px -2px 0px #b86431, 2px 2px 0px #b86431, -2px 2px 0px #b86431, -2px -2px 0px #b86431, 2px -2px 0px #b86431;
 }

 main {
     flex: 1;
     overflow: hidden;
     padding: 10px 0px 0px 10px;
     margin: 0 10px;
     background-color: #FFFFFF;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
 }

 .cont {
     height: 100%;
     overflow-y: auto;
     background-color: #FFFFFF;
     padding: 0 10px 0 0;

 }

 .group-section {
     margin: 2rem 0;
 }





 .thumbnail-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: 1rem;
 }

 .thumbnail-card {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     border: 1px solid #DDDDDD;
     /*--------------------*/
 }

 .thumbnail-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .thumbnail-link {
     display: block;
     text-decoration: none;
     color: inherit;
 }

 .thumbnail-image {
     position: relative;
     width: 100%;
     padding-top: 56.25%;
     overflow: hidden;
 }

 .thumbnail-image img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .thumbnail-info {
     font-family: 'SCDream5';
     display: inline-flex;
     align-items: center;
     padding: 1rem;
     /*border-top: 1px solid #f0f0f0;*/
 }

 .video-page {
     display: flex;
     align-items: center;
     font-size: 1rem;
     color: #FFFFFF;
     background-color: #1656A7;
     border-radius: 1rem;
     padding: 4px 12px 2px 12px;
     margin-right: 0.5rem;
     line-height: 1.4rem;
 }

 .video-title {
     padding: 4px 0 2px 0;
     font-size: 1rem;
     line-height: 1.4rem;
 }

 .tab-content {
     display: none;
     margin-top: -30px;
 }

 .tab-content.active {
     display: block;
 }

 .cont::-webkit-scrollbar {
     width: 12px;
 }

 .cont::-webkit-scrollbar-track {
     background: #eee;
     border-radius: 6px;
 }

 .cont::-webkit-scrollbar-thumb {
     background-color: #1656A7;
     border-radius: 6px;
     border: 3px solid #eee;
 }

 .cont::-webkit-scrollbar-thumb:hover {
     background-color: #5189d1;
 }

 .group-section.group-1 .unit-title {
     font-size: calc(1.5rem + 0.5vw);
     font-family: 'OneMobilePop';
     text-align: center;
     margin-bottom: 1rem;
     padding-top: 0.8rem;
     padding-bottom: 0.2rem;
     color: #00AEEE;
     background-color: #BCF0FF;
     border-top-left-radius: 0.7rem;
     border-top-right-radius: 0.7rem;
     text-shadow: 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 1px 0px #ffffff, -1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff,
         2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff, 2px 2px 0px #ffffff, -2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff;
 }

 .group-section.group-1 .unit-title img {
     height: calc(2rem + 2vw);
 }

 .group-section.group-2 .unit-title {
     font-size: calc(1.5rem + 0.5vw);
     font-family: 'OneMobilePop';
     text-align: center;
     margin-bottom: 1rem;
     padding-top: 0.8rem;
     padding-bottom: 0.2rem;
     color: #EF569C;
     background-color: #FAC8DF;
     border-top-left-radius: 0.7rem;
     border-top-right-radius: 0.7rem;
     text-shadow: 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 1px 0px #ffffff, -1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff,
         2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff, 2px 2px 0px #ffffff, -2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff;
 }

 .group-section.group-2 .unit-title img {
     height: calc(2rem + 2vw);
 }

 .group-section.group-3 .unit-title {
     font-size: calc(1.5rem + 0.5vw);
     font-family: 'OneMobilePop';
     text-align: center;
     margin-bottom: 1rem;
     padding-top: 0.8rem;
     padding-bottom: 0.2rem;
     color: #49AF3E;
     background-color: #C4FDBD;
     border-top-left-radius: 0.7rem;
     border-top-right-radius: 0.7rem;
     text-shadow: 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 1px 0px #ffffff, -1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff,
         2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff, 2px 2px 0px #ffffff, -2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff;
 }

 .group-section.group-3 .unit-title img {
     height: calc(2rem + 2vw);
 }

 .group-section.group-4 .unit-title {
     font-size: calc(1.5rem + 0.5vw);
     font-family: 'OneMobilePop';
     text-align: center;
     margin-bottom: 1rem;
     padding-top: 0.8rem;
     padding-bottom: 0.2rem;
     color: #EE7B37;
     background-color: #FFCFB2;
     border-top-left-radius: 0.7rem;
     border-top-right-radius: 0.7rem;
     text-shadow: 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 1px 0px #ffffff, -1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff,
         2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff, 2px 2px 0px #ffffff, -2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff;
 }

 .group-section.group-4 .unit-title img {
     height: calc(2rem + 2vw);
 }

 .contFooter {
     display: flex;
     align-items: center;
     gap: 1rem;
     background-color: #F4F4F4;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     padding: 15px 25px;
     margin-top: 50px;
 }

 .contFooter img {
     width: calc(6.5rem + 4vw);
     border-right: 1px solid #C9C9C9;
     padding-right: 15px;
 }

 .contFooter div {
     font-family: 'SCDream4';
     color: #999999;
     /*font-size: 0.8rem;*/
     font-size: calc(0.5rem + 0.4vw);
     word-break: keep-all;
 }

 .contCat {
     position: absolute;
     top: 10px;
     right: 10px;
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 15px;
     padding: 4px 10px 2px 10px;
     color: #FFFFFF;
     font-family: 'SCDream5';
     font-size: 0.8rem;
     line-height: 1.2rem;
 }