@charset "utf-8";
br.pc-none { display: none; }

/* 메인 비주얼 */
.main-video { overflow: hidden; position: relative; height: 600px; } 
.main-video::before { content:''; position: absolute; top: 0; left: 0; width: 80px; height: 100%; background: linear-gradient(90deg, #040007 0%, rgba(4, 0, 7, 0) 100%); z-index: 1; } 
.main-video::after { content:''; position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(270deg, #040007 0%, rgba(4, 0, 7, 0) 100%); z-index: 1; } 
.main-video * { letter-spacing: normal; } 
.main-video img,
.main-video iframe,
.main-video video { position: absolute; top: 0; left: 50%; width: 1920px; height: 100%; transform: translate(-50%,0); z-index: 1; } 
.main-video .video { z-index: 2; opacity: 0; }
.main-video .video.on { opacity: 1; transition: opacity 2s ease; }
.main-video .mo { display: none; } 
.main-video .txt-wrap { opacity: 0; position: absolute; top: 50%; left: 0; width: 100%; text-align: center; z-index: 2; transform: translate(0,-50%); } 
.main-video .txt-wrap.on { opacity: 1; }
.main-video .txt-wrap .tit { display: block; margin-top: -16px; font-family: 'Montserrat'; font-size: 48px; font-weight: 600; line-height: 130%; color:var(--color-white); } 
.main-video .txt-wrap .tit span { opacity: 0; transition: opacity 0.5s ease-in; } 
.main-video .txt-wrap .txt { display: block; margin-top: 8px; font-family: 'Pretendard'; font-size: 22px; font-weight: 400; line-height: 180%; color:var(--color-white); } 
.main-video .txt-wrap .txt span { opacity: 0; transition: opacity 0.5s ease-in; }
.main-bg { background:url('/html/_skin/1/images/main_tpl01/main-bg-pc.png') center top/1920px auto repeat; } 

/* 메인 하단 비주얼 */
.main-video2 { overflow: hidden; position: relative; height: 640px; padding-top: 140px; } 
.main-video2 * { letter-spacing: normal; } 
.main-video2 img,
.main-video2 iframe,
.main-video2 video { position: absolute; top: 0; left: 50%; width: 1920px; height: 100%; z-index: 1; transform: translate(-50%,0); } 
.main-video2 .mo { display: none; } 
.main-video2 .txt-wrap { position: relative; text-align: center; z-index: 2; } 
.main-video2 .txt-wrap .tit { font-family: 'Montserrat'; font-size: 32px; font-weight: 600; line-height: 130%; letter-spacing: -0.2px; color:var(--color-white); } 
.main-video2 .txt-wrap .txt { margin-top: 17px; font-family: 'Pretendard'; font-size: 20px; font-weight: 400; line-height: 145%; color:var(--color-white); } 

/* 메인 카테고리 */
.main-cate-wrap { max-width: 1240px; padding-top: 64px; text-align: center; margin: 0 auto;} 
.main-cate { display: inline-flex; align-items: center; gap:42px; } 
.main-cate > li {min-width: 100px; width: auto !important; }
.main-cate > li .img { overflow: hidden; display: block; width: 86px; height: 86px; border-radius:50%;margin: 0 auto; } 
.main-cate > li .img img { display: block; width: 100%; height: 100%; object-fit: cover;  } 
.main-cate > li .tit { display: block; margin-top: 11px; font-family: 'Montserrat'; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; color: var(--color-white); text-align: center; font-style: normal; } 
.main-cate > li:hover .tit { color: rgba(255, 255, 255, 0.85); } 
.main-cate > li.divider { position: relative; margin-left: 45px; } 
.main-cate > li.divider::before { content:''; position: absolute; top: 50%; left: -44px; width: 1px; height: 110px; background: rgba(255, 255, 255, 0.15); transform: translate(0,-50%); } 

/* 베스트 강의 */
.main-tit1 { display: block; font-family: 'Montserrat'; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: #8A45E1; text-align: center; } 
.main-tit2 { display: block; margin-top: 7px; font-family: 'Pretendard'; font-size: 24px; font-weight: 600; line-height: 145%; color: var(--color-white); text-align: center; } 
.main-best { padding-top: 161px; } 
.lecture-list-slider { position: relative; margin-top: 39px; } 
.lecture-list-slider .lecture-item .image-box { aspect-ratio: 384 / 230; } 
.lecture-list-slider .in { overflow: hidden; } 
.lecture-list-slider .btn-arr { display: flex; justify-content: center; align-items: center; position: absolute; top:50%; width: 40px; height: 40px; padding: 0; background: #1B1B1F; border: 0.5px solid rgba(255, 255, 255, 0.2); border-radius:50%; z-index: 10; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05); } 
.lecture-list-slider .btn-arr img { width: 18px; } 
.lecture-list-slider .btn-prev { left: 0; transform: translate(-50%,-50%); } 
.lecture-list-slider .btn-prev img { transform: scaleX(-1); } 
.lecture-list-slider .btn-next { right:0; transform: translate(50%,-50%); } 
.lecture-list-slider .btn-arr.swiper-button-disabled { display: none; } 
.lecture-list-slider .lecture-item .item-info { padding-top:16px; } 
.main-class { padding-top: 160px; }

/* 무료 강의 */
.main-free { padding-top: 160px; } 
.main-free * { letter-spacing: normal; } 
.main-free .inner { display: flex; } 
.main-free .left { width: 39%; padding-top: 40px; padding-right: 20px; } 
.main-free .main-tit1 { text-align: left; } 
.main-free .main-tit2 { margin-top: 13px; text-align: left; } 
.main-free .link-pc { display: inline-flex; align-items: center; gap:8px; margin-top: 28px; font-family: 'Pretendard'; font-size: 16px; font-weight: 600; color: var(--color-white); } 
.main-free .link-pc::after { content:''; width: 28px; height: 28px; margin-top: -1px; background:var(--color-white) url('/html/_skin/1/images/main_tpl01/main-free-link.png') center/14px no-repeat; border-radius:50%; } 
.main-free .link-pc:hover { color: rgba(255, 255, 255, 0.85); } 
.main-free .link-pc:hover::after { background-color: rgba(255, 255, 255, 0.85); } 
.main-free .main-free-slider { position: relative; max-width: 354px; margin-top: 80px; } 
.main-free .main-free-slider::before,
.main-free .main-free-slider::after { content:''; position: absolute; top: 0; width: 49px; height: 100%; z-index: 10; opacity: 0; pointer-events: none; } 
.main-free .main-free-slider::before { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, var(--color-black) 100%); } 
.main-free .main-free-slider::after { right: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--color-black) 100%); } 
.main-free .main-free-slider:not(:has(.btn-prev.swiper-button-disabled))::before,
.main-free .main-free-slider:not(:has(.btn-next.swiper-button-disabled))::after { opacity: 1; } 
.main-free .main-free-slider .in { overflow: hidden; } 
.main-free .main-free-list > li a { display: block; } 
.main-free .main-free-list > li .img { overflow: hidden; display: block; position: relative; aspect-ratio: 122/72; border-radius:4px; } 
.main-free .main-free-list > li .img img { width: 100%; height: 100%; object-fit: cover; } 
.main-free .main-free-list > li .img::after { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: all .4s cubic-bezier(.215,.61,.355,1); } 
.main-free .main-free-list > li:hover .img::after { opacity: 1; } 
.main-free .main-free-list > li .tit { overflow: hidden; display: block; margin-top: 11px; font-family: 'Pretendard'; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.7); white-space: nowrap; text-overflow: ellipsis; } 
.main-free .main-free-list > li:hover .tit { color: var(--color-white); } 
.main-free .main-free-slider .btn-arr { position: absolute; top: 50%; width: 20px; height: 20px; padding: 0; background: none; z-index: 20; transform: translate(0,-50%); } 
.main-free .main-free-slider .btn-arr img { width: 100%; height: 100%; } 
.main-free .main-free-slider .btn-arr.btn-prev { left: -6px; } 
.main-free .main-free-slider .btn-arr.btn-prev img { transform: scaleX(-1); } 
.main-free .main-free-slider .btn-arr.btn-next { right: -6px; } 
.main-free .main-free-slider .btn-arr.swiper-button-disabled { display: none; } 
.main-free .right { width: 61%; } 
.main-free .main-free-video { overflow: hidden; display: block; aspect-ratio: 732/411; border-radius:8px; font-size: 0; } 
.main-free .main-free-video img,
.main-free .main-free-video iframe,
.main-free .main-free-video video { width: 100%; height: 100%; object-fit: cover; } 
.main-free .mobile { display: none; } 

/* 메인 배너 */
.main-banner { position: relative; max-width: 1248px; margin: 160px auto 0; padding: 0 24px; } 
.main-banner-slider { overflow: hidden; position: relative; border-radius:8px; font-size: 0; }  
.main-banner-list > li { aspect-ratio: 1200 / 180; } 
.main-banner-list > li > a { display: block; position: relative; height: 100%; } 
.main-banner-list > li > a::after { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); opacity: 0; transition: all .4s cubic-bezier(.215,.61,.355,1); } 
.main-banner-list > li > a:hover:after { opacity: 1; } 
.main-banner-list > li img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.main-banner-list > li img.mo { display: none; } 
.main-banner-slider .pagination { position: absolute; bottom: 16px !important; left: 50% !important; width: auto !important; z-index: 1; transform: translate(-50%,0); } 
.main-banner-slider .pagination span { width: 8px; height: 8px; margin:0 6px!important; background: rgba(255, 255, 255, 0.3); border-radius:4px; opacity: 1; } 
.main-banner-slider .pagination span.swiper-pagination-bullet-active { background:rgba(255, 255, 255, 1); } 

/* 디자인 자소서 인강 */
.main-design {padding-top: 160px;}

/* 현직 디자이너의 스토리 */
.main-stroy-wrap { padding-top: 160px; padding-bottom: 126px; } 
.main-stroy { position: relative; margin-top: 39px; } 
.main-stroy .stroy-list-wrap { position: absolute; top: 0; right: 0; width: 32%; height: 100%; } 
.main-stroy .stroy-list-wrap::before,
.main-stroy .stroy-list-wrap::after { content: ''; position: absolute; left: 0; width: 100%; z-index: 10; pointer-events: none;  } 
.main-stroy .stroy-list-wrap::before { top: 0; height: 20.56%; background: linear-gradient(0, rgba(0, 0, 0, 0) 0%, var(--color-black) 100%); opacity: 0;} 
.main-stroy:has(.stroy-scroll.scroll) .stroy-list-wrap::before { opacity: 1; } 
.main-stroy .stroy-list-wrap::after { bottom: 0; height: 20.56%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--color-black) 100%); } 
.main-stroy:has(.stroy-scroll.bottom) .stroy-list-wrap::after { opacity: 0; } 
.main-stroy .stroy-list-wrap .icon { position: absolute; bottom: 2px; left: 50%; width: 24px; height: 37px; z-index: 11; transform: translate(-50%,0); } 
.main-stroy .stroy-list-wrap .icon img { width: 100%; height: 100%; object-fit: contain; } 
.main-stroy .stroy-scroll { height: 100%; overflow-y: auto; scrollbar-width:none; } 
.main-stroy .stroy-scroll::-webkit-scrollbar{display:none;}
.main-stroy .stroy-list { display: grid; gap:24px; grid-template-columns: repeat(2, 1fr); } 
.main-stroy .stroy-list > li > a { overflow: hidden; display: block; position: relative; background:#1d1d22; aspect-ratio: 180 / 180; width: 180px; border-radius:8px; } 
.main-stroy .stroy-list > li.active > a,
.main-stroy .stroy-list > li:hover > a { background: var(--color-primary-500); } 
.main-stroy .stroy-list > li > a::after { content:''; position: absolute; bottom: 0; left: 0; width: 100%; height: 76.115%; background: linear-gradient(180deg, rgba(29, 29, 34, 0) 4.23%, #1D1D22 77.01%); z-index: 2; pointer-events: none; } 
.main-stroy .stroy-list > li.active > a::after,
.main-stroy .stroy-list > li:hover > a::after { background: linear-gradient(180deg, rgba(134, 63, 224, 0) 11.31%, #863FE0 77.01%); } 
.main-stroy .stroy-list > li .con { display: flex; align-items: flex-end; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.main-stroy .stroy-list > li .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; } 
.main-stroy .stroy-list > li .tit { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 16px 19px; font-family: 'Pretendard'; font-size: 14px; font-weight: 600; line-height: 150%; color: rgba(255, 255, 255, 0.3); z-index: 3; } 
.main-stroy .stroy-list > li.active .tit,
.main-stroy .stroy-list > li:hover .tit { color: var(--color-white); } 
.main-stroy .stroy-con-wrap { overflow: hidden; position: relative; width: 65.167%;  } 
.main-stroy .stroy-con .txt-wrap { overflow: hidden; height: 443px; border-radius:8px; display: flex; position: relative; padding: 47px 47px 43px; border: 0.8px solid rgba(138, 69, 225, 0.3); border-radius: 8px; flex-direction: column; backdrop-filter: blur(10px); } 
.main-stroy .stroy-con .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; } 
.main-stroy .stroy-con .bg.mo { display: none; } 
.main-stroy .stroy-con .tit { position: relative; display: block; font-family: 'Pretendard'; font-size: 20px; font-weight: 600; line-height: 155%; color: var(--color-white); z-index: 2; word-break: keep-all; } 
.main-stroy .stroy-con .tit::before { content:''; display: block; width: 36px; height: 20px; margin-bottom: 27px; background:url('/html/_skin/1/images/main_tpl01/stroy-con-tit.png') center/contain no-repeat; } 
.main-stroy .stroy-con .txt { position: relative; margin-top: 19px; font-family: 'Pretendard'; font-size: 16px; font-weight: 400; line-height: 155%; color: rgba(255, 255, 255, 0.6); z-index: 2; word-break: keep-all; } 
.main-stroy .stroy-con .name { position: relative; display: flex; align-items: center; gap:3px; z-index: 2; } 
.main-stroy .stroy-con .name > li { display: flex; align-items: center; gap:3px; font-family: 'Pretendard'; font-size: 14px; font-weight: 600; line-height: 150%; color: var(--color-white); } 
.main-stroy .stroy-con .name > li::after { content:''; width: 3px; height: 3px; background: var(--color-white); } 
.main-stroy .stroy-con .name > li:last-child::after { display: none; } 
.main-stroy .stroy-con .bottom { padding-top: 28px; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; margin-top: auto; z-index: 2; } 
.main-stroy .stroy-con .view-link-pc { display: flex; justify-content: center; align-items: center; gap:4px; width: 138px; height: 44px; background: var(--color-white); border-radius: 40px; font-family: 'Pretendard'; font-size: 15px; font-weight: 600; color: #1D1D22; } 
.main-stroy .stroy-con .view-link-pc::after { content:''; width: 12px; height: 12px; background:url('/html/_skin/1/images/main_tpl01/main-stroy-link.png') center/contain no-repeat; } 
.main-stroy .view-link-mo { display: none; } 


/* 메인페이지 상단 소개 */
.main-about-cont { position: relative; } 
.main-about-wrap { position: relative; } 
.main-about-wrap .in_Layer { overflow: hidden; } 
.main-about { height: auto !important; } 
.main-about > li .link {position:absolute; inset:0; z-index:2;}

.main-about > li.swiper-slide-duplicate-active,
.main-about > li.swiper-slide-active { opacity: 1 !important; }  
.main-about > li .in_Layer { max-width: 1240px; margin: 0 auto; padding: 0 20px; position:absolute; bottom:48px; left:50%; width:100%; transform:translateX(-50%); z-index:1;} 
.main-about > li .txt1 { display: none; position: relative; font-family: 'Pretendard'; font-size: 34px; font-weight: 700; letter-spacing: normal; color:#FFF; line-height:1.55em; z-index: 1; animation:none; transform: translateY(53px); opacity: 0; transform: translateY(0); transition: 0.6s ease-out; } 
.main-about > li .txt2 { position: relative; margin-top: 4px; font-family: 'Pretendard'; font-size: 20px; font-weight: 400; letter-spacing: normal; color:rgba(255,255,255,0.9); line-height:1.55em; z-index: 2; padding-right: 80px; word-break: keep-all; } 
.main-about > li .txt2 span { color: var(--color-primary); } 
.main-about > li .img { overflow: hidden; display: block; position: relative; height: 600px; } 
.main-about > li .img img { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; transform: translate(-50%,0); object-fit: cover; } 
.main-about > li .img img.mo { display: none; }
@keyframes fadeIn { 
    0% { opacity:1; transform: translateY(53px); } 
    100% { opacity: 1; transform: translateY(0); } 
}
@keyframes fadeOut { 
    0% { opacity: 1; transform: translateY(0); } 
    100% { opacity: 1; transform: translateY(-53px); } 
}
.main-about-wrap .control { display: flex; align-items: center; position: absolute; bottom: 44px; right: 50%; margin-right:-600px; text-align:right; z-index: 1; } 
.main-about-wrap .control .pagination { width: auto; font-size:15px; font-weight:600; color:#FFF; text-align:center; letter-spacing:-.01em; line-height:1.5em;} 
/* .main-about-wrap .control .pagination span { width: 8px; height: 8px; margin: 0 3px; background: var(--color-gray-300); border-radius:4px; opacity: 1; }  */
/* .main-about-wrap .control .pagination span.swiper-pagination-bullet-active { width: 24px; background: var(--color-primary-500); }  */
.main-about-wrap .control .prev,
.main-about-wrap .control .next { width: 16px; height: 16px; background:url('/html/_skin/1/images/main_tpl01/main-about-arr02.png') center center no-repeat; background-size: contain; font-size: 0; } 
.main-about-wrap .control .prev {margin-right:7px;}
.main-about-wrap .control .next { transform: scaleX(-1); margin-left:7px;} 
/* .main-about-wrap .control .prev.disabled,
.main-about-wrap .control .next.disabled { background-image: url('/html/_skin/1/images/main_tpl01/main-about-arr-disabled.png'); }  */
.main-about-top { overflow: hidden; height: 53px; max-width: 1240px; margin: 0 auto; padding: 0 20px; position:absolute; bottom:77px; left:50%; width:100%; transform:translateX(-50%); z-index:2}
.main-about-top.has-multiline { bottom: calc(77px + (var(--txt2-lines) - 1) * 31px); }
.main-about-txt > li .txt1 { font-size: 34px; font-weight: 700; color:#FFF; z-index: 1; letter-spacing:normal; } 
.main-about-txt > li .txt2 { display: none; }

/* 노트북 사이즈 */
@media only screen and (max-width:1200px) {
    /* 메인페이지 상단 소개 ~1200px */
    .main-about-wrap .control {right: 20px;left: auto;margin-right: 0;}
    .main-about > li .img { height: auto; padding-bottom:48.387%; } 
    .main-about > li .img img { width: 100%; object-fit: cover; }
}
@media only screen and (max-width:1080px) {
    /* 메인 카테고리 ~1080px */
    .main-cate-wrap { padding-top: 5.926vw; } 
    .main-cate { gap: 3.888vw; } 
    .main-cate > li { min-width: 9.259vw; }
    .main-cate > li .img { width: 7.963vw; height: 7.963vw; } 
    .main-cate > li .tit { margin-top: 1.019vw; font-size: clamp(12px, 1.389vw, 15px); letter-spacing: -0.019vw; }
    .main-cate > li.divider { margin-left: 4.167vw; } 
    .main-cate > li.divider::before { left: -4.074vw; height: 10.185vw; }
    /* 무료 강의 ~1080px */
    .main-free .left { padding-top: 3.704vw; padding-right: 1.852vw; } 
    .main-free .main-free-slider { margin-top: 7.407vw; }

    /* 현직 디자이너의 스토리 ~1080px */
    .main-stroy .stroy-list-wrap { position: relative; width: calc(100% + 40px); margin: 0 -20px; } 
    .main-stroy .stroy-list-wrap::before { left: 0; width: 80px; height: 100%; background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); } 
    .main-stroy .stroy-list-wrap::after { right: 0; left: auto; width: 80px; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); } 
    .main-stroy:has(.stroy-scroll.scroll-x) .stroy-list-wrap::before { opacity: 1; } 
    .main-stroy:has(.stroy-scroll.bottom) .stroy-list-wrap::after { opacity: 1; } 
    .main-stroy:has(.stroy-scroll.bottom-x) .stroy-list-wrap::after { opacity: 0; } 
    .main-stroy .stroy-list-wrap .icon img { display: none; } 
    .main-stroy .stroy-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 20px; } 
    .main-stroy .stroy-list { display: flex; gap:0; } 
    .main-stroy .stroy-list > li { padding-right: 20px; } 
    .main-stroy .stroy-con-wrap { width: 100%; margin-top: 20px; } 
    .main-stroy .stroy-con .txt-wrap { height: auto; }
    .main-stroy .stroy-con .bottom { display: none; } 
    .main-stroy .stroy-con-wrap .bg.pc { display: none; } 
    .main-stroy .stroy-con-wrap .bg.mo { display: block; } 
    .main-stroy .view-link-mo { display: flex; justify-content: center; align-items: center; height: 46px; margin-top: 20px; background: #1D1D22; border-radius: 6px; font-family: 'Pretendard'; font-size: 16px; font-weight: 500; color: var(--color-white); } 
}

/* 태블릿 사이즈 */
@media only screen and (max-width:767px) {
    br.pc-none { display: block; }
    br.ta-none { display: none; }

    /* 메인 비주얼 ~767px */
    .main-video {height: 420px;}
    .main-video .mo {display: block;}
    .main-video .pc {display: none;}
    .main-video img { width:767px; }
    .main-video.bottom {display: none;}
    .main-video .txt-wrap {top: 82px;transform: translate(0,0);}
    .main-video .txt-wrap .tit { margin-top: 0; font-size: 30px; } 
    .main-video .txt-wrap .txt { margin-top: 8px; font-size: 16px; } 


    /* 메인 카테고리 ~767px */
    .main-cate-wrap { overflow-x: auto; padding: 20px 3px 15px; transition: all 0.3s; } 
    .main-cate { gap: 6px; } 
    .main-cate > li {min-width: 87px;}
    .main-cate > li .img { width: 60px; height: 60px; } 
    .main-cate > li .tit { margin-top: 9px; font-size: 12px; letter-spacing: -0.2px; }
    .main-cate > li.divider { margin-left: 6px; } 
    .main-cate > li.divider::before { left: -6px; height: 68px; }

    /* 베스트 강의 ~767px */
    .main-tit1 { font-size: 11px; } 
    .main-tit2 { margin-top: 6px; font-size: 16px;line-height: 155%; } 
    .main-best { padding-top: 65px; } 
    .lecture-list-slider { margin-top: 20px; } 
    .lecture-list-slider .lecture-item .image-box { border-radius:6px; } 
    .lecture-list-slider .btn-arr { width: 26px; height: 26px; } 
    .lecture-list-slider .btn-arr img { width: 14px; } 
    .lecture-list-slider .lecture-item .item-info { padding-top:11px; } 
    .lecture-list-slider .lecture-item .item-info .tag-box { margin-top: 7px; }
    .lecture-list-slider .lecture-item .item-info:has(>.sub-image-box) { padding-top: 20px; }
    .lecture-list-slider .lecture-item .sub-image-box {width: 28px;height: 28px;right: 8px;top:-14px;}
    .main-class { padding-top: 56px; }

    /* 무료 강의 ~767px */
    .main-free { padding-top: 56px; } 
    .main-free .inner { display: block; } 
    .main-free .left { width: 100%; padding: 0; } 
    .main-free .main-tit1 { text-align: center; } 
    .main-free .main-tit2 { margin-top: 6px; text-align: center; } 
    .main-free .link-pc { display: none; } 
    .main-free .right { display: none; } 
    .main-free .main-free-slider { display: none; } 
    .main-free .mobile { display: block; margin-top: 18px; } 
    .main-free .main-free-slider-mo .in { overflow: hidden; width: 100%; border-radius:6px; } 
    .main-free .main-free-list-mo > li { aspect-ratio: 727/408; } 
    .main-free .main-free-list-mo > li img, 
    .main-free .main-free-list-mo > li iframe, 
    .main-free .main-free-list-mo > li video { width: 100%; height: 100%; object-fit: cover; } 
    .main-free .main-free-list-mo > li .img { position: relative; z-index: 1; }
    .main-free .main-free-list-mo > li .main-free-video-mo { position: absolute; top: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
    .main-free .main-free-list-mo > li .main-free-video-mo.play { z-index: 2; }
    .main-free .main-free-slider-mo .control { display: flex; justify-content: center; align-items: center; margin-top: 12px; } 
    .main-free .main-free-slider-mo .control .swiper-button-lock,
    .main-free .main-free-slider-mo .control .swiper-pagination-lock { display: block !important; }
    .main-free .main-free-slider-mo .btn-arr { width: 24px; height: 24px; padding: 0; background: none; } 
    .main-free .main-free-slider-mo .btn-arr.swiper-button-disabled { background:url('/html/_skin/1/images/main_tpl01/main-free-arr-mo-disabled.png') center/contain no-repeat; } 
    .main-free .main-free-slider-mo .btn-arr img { width: 100%; height: 100%; } 
    .main-free .main-free-slider-mo .btn-arr.swiper-button-disabled img { opacity: 0; } 
    .main-free .main-free-slider-mo .btn-arr.btn-prev { transform: scaleX(-1); } 
    .main-free .main-free-slider-mo .pagination { margin: 0 8px; width: auto; font-family: 'Montserrat'; font-size: 14px; font-weight: 500; letter-spacing: -0.2px; color: var(--color-white); } 
    .main-free .link-mo { display: flex; justify-content: center; align-items: center; width: 100%; height: 40px; margin-top: 12px; background: #1D1D22; border-radius: 4px; font-family: 'Pretendard'; font-size: 14px; font-weight: 500; color: var(--color-white); } 

    /* 메인 배너 ~767px */
    .main-banner { margin: 56px auto 0; padding: 0 20px; } 
    .main-banner-slider {  border-radius:6px;  } 
    .main-banner-list > li { aspect-ratio: 727 / 212; } 
    .main-banner-list > li img.pc { display: none; } 
    .main-banner-list > li img.mo { display: block; } 
    .main-banner-slider .pagination { bottom: 8px !important; } 
    .main-banner-slider .pagination span { width: 6px; height: 6px; margin:0 3px!important;  } 

    /* 디자인 자소서 인강 ~767px */
    .main-design {padding-top: 59px;}

    /* 현직 디자이너의 스토리 ~767px */
    .main-stroy-wrap { padding: 56px 0;} 
    .main-stroy { margin-top: 19px; } 
    .main-stroy .stroy-list-wrap::before,
    .main-stroy .stroy-list-wrap::after { width: 57px; }
    .main-stroy .stroy-list-wrap .icon { bottom: 2px; width: 24px; height: 37px; }  
    .main-stroy .stroy-list > li { padding-right: 16px; border-radius:6px; } 
    .main-stroy .stroy-list > li:last-child { padding-right: 20px; }
    .main-stroy .stroy-list > li .tit { margin: 8px 10px; font-size: 10px; } 
    .main-stroy .stroy-list > li > a { width: 125px; }
    .main-stroy .stroy-con-wrap { margin-top: 16px; border-radius:6px; } 
    .main-stroy .stroy-con .txt-wrap { padding: 23px 20px; border-radius: 6px; } 
    .main-stroy .stroy-con .tit { font-size: 16px; } 
    .main-stroy .stroy-con .tit::before { width: 25px; height: 14px; margin-bottom: 14px; } 
    .main-stroy .stroy-con .txt { margin-top: 7px; font-size: 14px;line-height: 150%; } 
    .main-stroy .view-link-mo { height: 40px; margin-top: 16px; border-radius: 4px; font-size: 14px; } 

    /* 메인 하단 비주얼 ~767px */
    .main-video2 { height: 386px; padding-top: 110px; } 
    .main-video2 img,
    .main-video2 iframe,
    .main-video2 video { top: auto; bottom: 0; width: 767px; height: 256px; } 
    .main-video2 .pc { display: none; } 
    .main-video2 .mo { display: block; } 
    .main-video2 .txt-wrap .tit { font-size: 24px; } 
    .main-video2 .txt-wrap .txt { margin-top: 13px; font-size: 16px; line-height: 155%; } 

    /* 메인페이지 상단 소개 ~767px */
    .main-about > li .in_Layer {bottom:32px;}
    .main-about > li { opacity: 0; } 
    .main-about > li.swiper-slide-duplicate-active,
    .main-about > li.swiper-slide-active { opacity: 1; } 
    .main-about > li .txt1 { font-size: 22px; transform: translateY(15px); } 
    .main-about > li .txt2 { margin-top: 2px; font-size: 14px; } 
    .main-about > li .img {padding-bottom: 118%; } 
    .main-about > li .img img.pc { display: none; } 
    .main-about > li .img img.mo { display: block; } 
    /* .main-about-wrap .control { display: none; }  */
    .main-about-wrap .control {bottom:32px;}
    .main-about-wrap .control .pagination {font-size:14px;}
    .main-about-top { height: 34px; bottom:52px; }
    .main-about-top.has-multiline { bottom: calc(52px + (var(--txt2-lines) - 1) * 22px); }
    .main-about-txt > li .txt1 { font-size: 22px; } 
}

@media only screen and (max-width:480px) {
    /* 현직 디자이너의 스토리 ~480px */
    .main-stroy .stroy-list-wrap { width: calc(100% + 32px); margin: 0 -16px; }
    .main-stroy .stroy-list > li:last-child { padding-right: 16px; }
    .main-stroy .stroy-scroll { padding: 0 16px; }
}

/* 모바일 사이즈 */
@media only screen and (max-width:360px) {
    br.pc-none { display: block; }
    br.ta-none { display: block; }
    br.mo-none { display: none; }

    /* 무료 강의 ~360px */
    .main-free .main-free-slider-mo .in {border-radius:6px;}

    /* 메인 비주얼 ~767px */
    .main-video img {width: 360px;}

    /* 메인 배너 ~360px */
    .main-banner {padding: 0 16px;}

    /* 메인 하단 비주얼 ~360px */
    .main-video2 { height: 386px; padding-top: 110px; } 
    .main-video2 img,
    .main-video2 iframe,
    .main-video2 video { top: auto; bottom: 0; width: 767px; height: 256px; } 
    .main-video2 .pc { display: none; } 
    .main-video2 .mo { display: block; } 
    .main-video2 .txt-wrap .tit { font-size: 24px; } 
    .main-video2 .txt-wrap .txt { margin-top: 13px; font-size: 16px; line-height: 155%; } 

    /* 디자이너 스토리 ~360px */
    .main-stroy .stroy-list > li { padding-right: 12px; }
    .main-stroy .stroy-list > li > a { width: 96px; }
    
}

/*Popup*/
.main-popup-wrap.dim{position:fixed;top:0;left:0;bottom:0;right:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center;}
.main-popup-wrap .bg {position: absolute;background: rgba(0, 0, 0, 0.5);top: 0;left: 0;width: 100%;height: 100%;}
.main-popup{/*position:absolute;*/z-index:120;background-color:#fff;line-height:20px; border-radius:12px; overflow:hidden;}
.main-popup .popup-bottom .popup-bottom-inner{display:flex; height:62px;}
.main-popup .popup-bottom .popup-btn{display:flex; justify-content:center; align-items:center; width:50%; height:100%; text-align:center; color:var(--color-dark-gray); font-size:16px;}
.main-popup .popup-bottom .popup-btn + .popup-btn {border-left:1px solid #F0F4F8;}
.main-popup .popup-bottom label{display:flex; justify-content:center; align-items:center; height:100%; color:var(--color-dark-gray); font-size:16px; cursor:pointer;}
.main-popup .popup-bottom input[type="checkbox"]{margin:0}
/* .main-popup.center{position:fixed;top:50%!important;left:50%!important;transform:translate(-50%,-50%); border:1px solid #F0F4F8;} */
.main-popup .ck-content .image{margin:0}
.top-popup{position:relative;overflow-y:hidden}
.top-popup .popup-control{position:absolute;top:20%;right:10px;display:flex;align-items:center}
.top-popup .popup-control label{color:var(--color-dark-gray,#333)}
.top-popup .popup-control .close{position:relative;display:block;width:20px;height:20px;margin-left:7px;font-size:0}
.top-popup .popup-control .close:before,.top-popup .popup-control .close:after{content:'';position:absolute;top:50%;left:0;z-index:1;width:100%;height:1px;border-radius:5px;background:var(--color-dark-gray,#333)}
.top-popup .popup-control .close:before{transform:rotate(45deg)}
.top-popup .popup-control .close:after{transform:rotate(-45deg)}


@media only screen and (max-width:767px) {
    .top-popup .popup-control label{display:none}
    .top-popup .popup-control .close{width:30px;height:30px}
    .top-popup .popup-control .close:before,.top-popup .popup-control .close:after{height:2px}
	.main-popup.center {max-width:100%; margin:0 36px;}
	.main-popup .ck-content .image img {width:100%;}
    .main-popup .popup-bottom .popup-bottom-inner {height:52px;}
    .main-popup .popup-bottom .popup-btn {font-size:14px;}
}