@charset "utf-8";

#courseInfo {background-color:#ffffff;}
#courseInfo .inner {padding: 115px 0 120px;}
#courseInfo .title {margin-bottom: 59px; text-align: center;}
#courseInfo .title h3 {font-size: 50px; letter-spacing: -.05em; line-height: 1.5; color:#121212; font-family: "Gmarket Bold";}
#courseInfo .title h3 span {color:#D6817C;}
#courseInfo .list {position: relative; margin: 0 -20px;}
#courseInfo .courseInfo-slider li {padding: 0 17.5px;}
#courseInfo .courseInfo-slider li a {position: relative; width: 100%; display: block; border-top: 2px solid #1D2020;}
#courseInfo .courseInfo-slider li a:hover .subject::after {width: 100%;}
#courseInfo .desc {padding: 35px 0 45px;}
#courseInfo .desc .subject {position: relative; display: inline-block;}
#courseInfo .desc .subject::after {content: ''; position: absolute; left: 0; bottom: 3px; width: 0; height: 30%; background: rgb(214,129,124, 0.25); transition: width 0.3s;}
#courseInfo .desc .subject strong {position: relative; font-size: 24px; color: #000; letter-spacing: -.05em; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-family: "Noto Medium"; z-index: 1; word-break: break-all;}
#courseInfo .desc .info {margin-top: 10px;}
#courseInfo .desc .info p {font-size: 16px; color: #555; line-height: 1.5; padding: 2px 0;}
#courseInfo .thumb {width: 100%; height: 350px; overflow: hidden; background-color: #fdfdfd;}
#courseInfo .thumb img {object-fit: contain;position: relative;top: 0}

#courseInfo .controls .prevnext button {position: absolute; top: 45%; transform: translateY(95px); width: 50px; height: 50px; border-radius: 50%; border: 1px solid #BCBCBC; text-indent: -9999px; z-index: 1; transition: .3s;}
#courseInfo .controls .prevnext button:hover {box-shadow: 0 0 10px rgba(0,0,0,0.2);}
#courseInfo .controls .prevnext .prev {left: -5px; background: #fff url('../images/slide-arrow-prev.png') center no-repeat;}
#courseInfo .controls .prevnext .next {right: -5px; background: #fff url('../images/slide-arrow-next.png') center no-repeat;}

@media (max-width: 1600px) {
#courseInfo .list {margin: 0;}
}


@media (max-width: 1260px) {
#courseInfo .inner {}
#courseInfo .thumb {height: 260px;}
}

@media (max-width: 1023px) {
#courseInfo .inner {padding: 95px 0 80px;}
#courseInfo .title h3 {font-size: 43px;}
#courseInfo .thumb {height: 320px;}
}

@media (max-width: 768px) {
#courseInfo .inner {padding: 55px 0 80px;}
#courseInfo .title {margin-bottom: 30px;}
#courseInfo .title h3 {font-size: 30px;} 
#courseInfo .list {margin: 0; padding: 0 25px;}
#courseInfo .courseInfo-slider li {padding: 0 10px;}
#courseInfo .desc {padding: 20px 0 35px;}
#courseInfo .desc .subject strong {font-size: 26px;}
#courseInfo .desc .info p {font-size: 18px;}
#courseInfo .thumb {height: 230px;}
#courseInfo .controls .prevnext button {transform: translateY(60px);}
#courseInfo .controls .prevnext .prev {left: 0;}
#courseInfo .controls .prevnext .next {right: 0;}
}

@media (max-width: 500px) {
#courseInfo .thumb {height: auto;max-height:300px;}
#courseInfo .thumb img{top: unset;transform: translateY(0);}
#courseInfo .desc .subject strong{padding-left: 20px;}
#courseInfo .desc .info p{font-size: 20px;padding-left: 20px;}

}