@charset "utf-8";
/*####################
Detail Contents
######################*/
/* section */
#wrap:not(.enroll) #container .section{display:flex; flex-direction:column; gap:24px; width:100%;}
#wrap:not(.enroll) #container .section-header{display:flex; flex-direction:column; gap:4px; padding:0 4px;}


/*####################
Course List
######################*/
.course-list{display:flex; flex-direction:column; gap:40px 24px;}
.course-list:is(.product-card-c4, .product-card-c3){display:grid; grid-template-columns:repeat(4, 1fr);}
.course-list:is(.product-card-c2){display:grid; grid-template-columns:repeat(2, 1fr);}
.course-list-item{display:flex; flex-direction:row; gap:16px; position:relative; border-radius:8px; transition:all 0.2s ease;}
.course-item-thumb{flex-shrink:0; align-self:flex-start; display:flex; justify-content:center; transition:all 0.2s ease;}
.course-list-item .course-item-thumb::after{content:''; position:absolute; inset:0 0 0 0; border-radius:8px; border:1px solid rgb(0 0 0 / 5%);}
.course-item-thumb>span{justify-content:center; border-radius:8px; aspect-ratio:16 / 9;}
.course-label{display:flex; position:absolute; z-index:3; top:0; left:0;}
.course-label>:is(span, em){padding:3px 6px 4px 6px;  color:rgb(255 255 255 / 80%); font-weight:500; font-style:normal;}
.course-label>:is(span, em):empty{display:none;}
[data-brand="fluenc"] .course-label>span{background-color:var(--dark-lavender);}
[data-brand="jls"] .course-label>span{background-color:var(--bluejeans-normal);}
.course-label>em{color:rgb(255 255 255 / 80%);}
[data-course="kindergarten"] .course-label>em{background-color:var(--sunflower-normal);}
[data-course="phonics"] .course-label>em{background-color:var(--bittersweet-light);}
.course-label>*:first-child{padding-left:8px;}
.course-label>*:last-child{border-radius:0 0 8px 0;}
.course-item-info{flex-grow:1; display:flex; flex-direction:column; gap:8px; position:relative; padding:4px;}
.course-item-info .title-text{flex-direction:column; align-items:flex-start; gap:4px; word-break:keep-all;}
.modal-layer.full.form .course-item-info>.title-text{margin:0;}
.course-item-info>.title-text>:is(h5, h6){display:flex; align-items:center; gap:2px 8px; flex-wrap:wrap; color:#000; font-weight:400; letter-spacing:-0.5px;}
.course-item-info>.title-text>h5{font-size:21px;}
.course-item-info>.title-text>h6{font-size:17px;}
.course-item-info>.title-text>:is(h5, h6)>.tags{display:flex; gap:4px; letter-spacing:0;}
.course-item-info>.title-text>:is(h5, h6)>.tags>span{padding:4px 6px; border-radius:4px; background-color:rgb(0 0 0 / 8%); color:#555; font-size:11px; font-weight:500; font-style:normal; white-space:nowrap;}
.course-item-info>.title-text>p{color:#777; font-size:14px;}
.course-item-info>div{display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.course-item-info>.module-title{flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:4px;}
.course-item-info>.module-title>h6{display:flex; align-items:center; gap:8px; color:#000; font-size:14px; font-weight:400; letter-spacing:-0.5px; word-break:keep-all;}
.course-item-info>.module-title>p{color:#777; font-size:12px;}
.course-item-info>.period>span{color:#777; font-size:14px;}
.course-item-info>.price{gap:2px 8px; margin-top:8px;}
.course-item-info>.price>em{width:100%; color:#999; font-size:14px; font-weight:300; text-decoration:line-through;}
.course-item-info>.price>span{color:var(--vivid-pink); font-size:15px; font-weight:600;}
.course-item-info>.price>b{color:#333; font-size:16px; font-weight:600;}
.course-item-info>:is(.tags, .benefit){align-items:flex-start;}
.course-item-info>.tags>:is(span, em){padding:4px 6px; border-radius:4px; background-color:rgb(0 0 0 / 8%); color:#555; font-size:11px; font-weight:500; font-style:normal;}
.course-item-info>.tags>em{background-color:rgb(117 75 157 / 8%); color:var(--dark-lavender); font-weight:600;}
.course-item-info>.tags>span.kindergarten{background-color:var(--sunflower-normal); color:rgb(255 255 255 / 80%); font-size:11px; font-weight:500;}
.course-item-info>.tags>span.fluenc{background-color:var(--dark-lavender); color:rgb(255 255 255 / 80%); font-size:11px; font-weight:500;}
.course-item-info>.benefit>span.coupon{display:flex; align-items:center; gap:4px; position:relative; padding:4px 8px 4px 6px; color:var(--vivid-pink); font-weight:500;}
.course-item-info>.benefit>span.coupon::before{content:''; position:absolute; inset:0; border-radius:4px; background-color:var(--vivid-pink); opacity:0.1;}
.course-item-info>.apply{gap:8px;}
.course-item-info>.apply>span{color:var(--dark-lavender);}
.course-item-function{display:flex; gap:8px; position:absolute; top:4px; right:4px; opacity:0;}
.course-list-item:hover .course-item-function{opacity:0.81;}

/* course title module */
.course-list-title{display:flex; flex-direction:column; gap:4px; position:relative; border-radius:8px; background-color:var(--lightgray-normal); overflow:hidden;}
.course-list-title::before{content:''; position:absolute; inset:0; background-image:radial-gradient(farthest-corner at 0% 0%,rgb(255 255 255 / 56%), rgb(255 255 255 / 40%));}
.product-card-c3 .course-list-title .title-text::after{content:''; display:block; margin-top:24px; width:80%; max-width:160px; min-width:104px; aspect-ratio:3 / 2; background-image:url(img/product-card-graphic-c3.png); background-size:contain; background-repeat:no-repeat; background-position:center;}
.course-list-title .course-item-info{justify-content:center; align-items:center;}
.course-list-title .title-text{align-items:center; gap:12px; padding:16px 8px; width:100%; text-align:center;}
.course-list-title .title-text>h5{color:#333;}
.course-list-title .title-text>p{color:#555;}

/* sale status */
.course-list-item[data-sale-status] .course-item-thumb>span::after{display:flex; justify-content:center; align-items:center; position:absolute; z-index:2; background-color:rgb(0 0 0 / 56%); color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);}
.course-list-item:is([data-sale-status="prepare"], [data-sale-status="ended"],[data-sale-status="soldout"] ) .course-item-thumb>span::after{left:0; right:0; top:0; bottom:0; border-radius:8px; font-size:24px}
.course-list-item[data-sale-status="prepare"] .course-item-thumb>span::after{content:'판매예정';}
.course-list-item[data-sale-status="ended"] .course-item-thumb>span::after{content:'판매종료';}
.course-list-item[data-sale-status="limitedstock"] .course-item-thumb>span::after{content:'품절임박'; bottom:0; padding:6px 12px; border-radius:8px 8px 0 0; background-color:var(--grapefruit-light); font-size:16px; opacity:0.9;}
.course-list-item[data-sale-status="soldout"] .course-item-thumb>span::after{content:'Sold Out'; background-color:rgb(36 58 102 / 72%); font-weight:600;}

/* module style - 4 column */
:is(.product-card-c4, .product-card-c3) .course-list-item{flex-direction:column;}
:is(.product-card-c4, .product-card-c3) .course-item-thumb,
:is(.product-card-c4, .product-card-c3) .course-item-thumb>span{width:100%;}
/* module style - 2 column */
.product-card-c2 .course-list-item{background-color:var(--lightgray-bg);}
.product-card-c2 .course-item-thumb{flex-basis:0; flex-grow:1;}
.product-card-c2 .course-item-info{flex-basis:0; flex-grow:1; justify-content:center; padding:12px 16px 12px 8px;}
/* module style - 1 column */
.product-card-c1{background-color:var(--lightgray-bg);}
.product-card-c1 .course-list-item:not(:empty){gap:32px; padding:24px 0;}
.product-card-c1 .course-item-thumb>span{width:240px;}
.product-card-c1 .course-item-info{justify-content:center; padding:16px 0;}
.product-card-c1 .course-item-info>.price{display:none;}
.product-card-c1 .course-item-button{display:flex; align-items:center; padding-right:8px;}
/* module style - link */
.product-link-c1 .course-list-item{padding:24px 32px; background-color:var(--dark-lavender);}
.product-link-c1 .course-list-item::before{content:''; flex-shrink:0; display:block; width:64px; aspect-ratio:1 / 1; background-image:url(img/product-link-graphic-c1.png); background-size:contain; background-repeat:no-repeat; background-position:center;}
.product-link-c1 .course-item-info{justify-content:center;}
.product-link-c1 .course-item-info>.title-text>h5{color:#fff;}
.product-link-c1 .course-item-info>.title-text>p{color:rgb(255 255 255 / 72%);}
.product-link-c1 .course-item-button{display:flex; align-items:center;}



/*####################
Screen size
######################*/
@media (hover: none) {

   .course-list-item:hover {transform:none !important; }
   
}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = 769px to higher resolution */
@media (min-width: 769px) {

   :is(.product-card-c4, .product-card-c3) .course-list-item::before{content:''; position:absolute; inset:0 0 0 0; border-radius:12px; border:1px solid #ddd; background-color:#fff; box-shadow:0 0 16px rgb(0 0 0 / 5%); opacity:0; transition:all 0.2s ease;}
   :is(.product-card-c4, .product-card-c3) .product-side .course-list-item::before{content:none;}
   :is(.product-card-c4, .product-card-c3) .course-list-item:hover::before{opacity:1; transform:scale(1.06); transform-origin:top;}
   :is(.product-card-c4, .product-card-c3) .course-list-item:hover .course-item-thumb{transform: scale(1.06); transform-origin:bottom;}
   :is(.product-card-c4, .product-card-c3) .course-list-item:hover .course-item-thumb::after{border-radius:8px 8px 0 0;}
   :is(.product-card-c4, .product-card-c3) .course-list-item:hover .course-item-thumb>span{border-radius:8px 8px 0 0;}

}
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 1024px */
@media (max-width: 1024px) {

   .course-list{gap:24px 16px;}
   .course-item-info>.title-text>h5{font-size:18px;}
   .course-list .course-item-info>.title-text>h6{font-size:15px;}
   .product-card-c1 .course-item-info{padding:4px 16px 4px 0;}

}

/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w Less than 768px */
@media (max-width: 768px) {

   .course-list:is(.product-card-c4, .product-card-c3){grid-template-columns:repeat(2, 1fr);}
   .product-card-c2 .course-list-item{flex-direction:column; background-color:transparent;}
   .product-card-c2 .course-item-info{padding:4px;}
   .product-card-c1 .course-item-thumb>span{width:40vw;}
   .product-card-c1 .course-list-item{gap:16px !important; border-radius:0;}
   .product-card-c1 .course-item-button{display:none;}
   .product-link-c1 .course-list-item{padding:24px;}
   .product-link-c1 .course-list-item::before{width:56px;}
   
}

/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (max-width: 480px) {

   .course-item-info>.title-text>p,
   .course-item-info>.period>span{font-size:12px;}
   .course-item-info>.price>span{font-size:13px;}
   .course-item-info>.price>b{font-size:14px;}
   .course-item-info>:is(.price, .tags){margin-top:4px;}
   .product-card-c2 .course-list-item{background-color:transparent;}
   :is(.product-card-c2, .product-card-c1) .course-item-thumb>span{width:160px;}
   .product-card-c2 .course-item-info{padding:4px 0;}
   .product-link-c1 .course-list-item{gap:8px; padding:16px;}
   .product-link-c1 .course-list-item::before{width:48px;}
   .product-link-c1 .course-item-info>.title-text>h5{font-size:16px;}
   .product-link-c1 .course-item-info>.title-text>p{color:rgb(255 255 255 / 72%);}
   .product-link-c1 .course-item-button{display:none;}
   .course-item-info>.module-title>h6{font-size:12px;}
   .course-list .course-item-info>.title-text>h6{font-size:14px;}

}