.sub0101 .section1 {position: relative;}
.sub0101 .label-box span+span {margin-left:6px}
.sub0101 .section1 .tab-wrap {position: absolute; bottom: 1.25rem; right: 0; display: flex;}
.sub0101 .section1 .tab-wrap li a.on {color: #fff; background-color: var(--color-sub-red)}
.sub0101 .section1 .tab-wrap li a{padding: 0.3rem 1.2rem; font-size: 1.125rem; border-radius: 12px; border: 1px solid var(--color-sub-red); box-sizing: border-box; }
.sub0101 .tab-wrap li + li {margin-left: 0; padding-left: 0.6rem;}
.sub0101 .tab-wrap li + li:before{content: none}
.sub0101 .section1 .sub-title-wrap {display: flex; gap: 12px; align-items: center; padding: 1.6rem 0;}
.sub0101 .section1 .sub-title-box {position: relative; width: 210px;}
.sub0101 .section1 .sub-title-wrap .img-box {background-color: var(--color-main-bg); width: 56px; height: 56px; border-radius: 100%; border: 1px dashed var(--color-sub-red); position: relative; z-index: 9;}
.sub0101 .section1 .sub-title-wrap .img-box img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)}
.sub0101 .section1 .sub-title-wrap .title-box {padding: 0.3rem 1.4rem; border-radius: 30px; background-color: var(--color-sub-red); color: #fff; padding-left: 68px; position: absolute; top: 50%; transform: translateY(-50%); font-size:1.125rem}
.sub0101 .section1 .best {padding-bottom: 2rem; border-bottom: 1px solid #ddd;}
.sub0101 .section1 .best-list {display: flex; align-items: center; align-items: stretch;}
.sub0101 .section1 .best-list .box {position:relative;border: 1px solid #ddd; border-radius: 12px; width: calc((100% - (20px*3) ) / 4); padding: 4px; box-sizing: border-box; box-shadow: 2px 3px 5px #f1f1f1;  transition:0.2s all linear;}
.sub0101 .section1 .best-list .box + .box {margin-left: 20px;}
.sub0101 .section1 .best-list .box:hover {border-color: var(--color-main-red); transition:0.2s all linear;}
.sub0101 .section1 .best-list .box .img-box {padding-bottom: 64%; position: relative; overflow:hidden; border-radius: 12px; border: 1px solid #ddd;}
.sub0101 .section1 .best-list .box .img-box img {position: absolute; left: 50%;top: 50%; transform: translate(-50%,-50%); /*object-fit: cover;*/ width: 100%;height: 100%;}
.sub0101 .section1 .best-list .box .text-box {padding: 0.5rem}
.sub0101 .section1 .best-list .box .text-box .label { border-radius: 9.8px; padding: 2px 12px; font-size: 14px; }
.sub0101 .section1 .best-list .box .text-box .label.kor {background-color: var(--color-kor); color: #fff;}
.sub0101 .section1 .best-list .box .text-box .label.eng {background-color: var(--color-eng); color: #fff;}
.sub0101 .section1 .best-list .box .text-box .label.math {background-color: var(--color-math); color: #fff;}
.sub0101 .section1 .best-list .box .text-box .dec {display: block; color: #888;  padding: 2px 0}
.sub0101 .section1 .best-list .box .text-box .tit {font-size: 1.125rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.sub0101 .section1 .best-list .box .writer {text-align: right; font-size: 14px;  color: #666; padding: 0 0.5rem; cursor: pointer;}
.sub0101 .section1 .best-list .box .writer:hover {text-decoration: underline;}
.sub0101 .section1 .best-list .box .writer img {max-width: 24px; max-height: 24px;}
.sub0101 .section1 .best-list .box .sns-zone {display: flex; justify-content: space-between; padding: .5rem;}
.sub0101 .section1 .best-list .box .sns-zone .left {display: flex; gap: 10px; font-size: 15px; color: #666 ; }
.sub0101 .section1 .best-list .box .sns-zone .left > div {display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer}
.sub0101 .section1 .best-list .box .sns-zone .right {position: absolute; right: .5rem; bottom: .5rem}


.sub0101 .section2 .select-box {margin: 2rem 0; border: 1px solid #ddd; border-radius: 12px; padding: 2rem 4rem; box-sizing: border-box; background-color: #f8f8f8;}
.sub0101 .section2 .select-box > div {display: flex; padding: .5rem 0; align-items: flex-start}
.sub0101 .section2 .select-box > div p{width: 100px; padding: 6px 0}
.sub0101 .section2 .select-box  ul {display: flex; flex-wrap: wrap; gap: 10px; width:calc(100% -  100px)}
.sub0101 .section2 .select-box ul li:hover {background-color: var(--color-sub-red); color: #fff; transition: 0.2s linear;}
.sub0101 .section2 .select-box ul li.on {background-color: var(--color-sub-red); color: #fff; transition: 0.2s linear;}
.sub0101 .section2 .select-box  ul li {background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: .3rem 1.2rem; cursor: pointer;transition: 0.2s linear;}
.sub0101 .section2 .fliter-zone {padding: 1rem 0 3rem 0; display: flex; justify-content: flex-end; gap: 10px; }
.sub0101 .section2 .fliter-zone > a {padding: .4rem 2.2rem; border-radius: 20px}
.sub0101 .section2 .class-zone .top {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #666666; padding-bottom: 1rem}
.sub0101 .section2 .class-zone .tab-wrap {margin-bottom: 0; display: flex}
.sub0101 .section2 .class-zone .tab-wrap li a{color: #888; transition: 0.2s linear}
.sub0101 .section2 .class-zone .tab-wrap li a:hover {color: var(--color-main-red); transition: 0.2s linear}
.sub0101 .section2 .class-zone .tab-wrap li a.on {color: var(--color-main-red)}
.sub0101 .section2 .class-zone .tab-wrap li + li {padding-left: 2rem}
.sub0101 .section2 .class-zone .top .right {display: flex; gap: 1rem;}
.sub0101 .section2 .class-zone .top .right .input-box {position: relative;}
.sub0101 .section2 .class-zone .top .right .input-text {padding: 10px 20px; border: 1px solid #ddd; border-radius: 30px; box-sizing: border-box; outline: none;}
.sub0101 .section2 .class-zone .top .right .select {border: 1px solid #ddd; padding: 10px 20px; border-radius: 30px; padding-right: 50px; box-sizing: border-box;}
.sub0101 .section2 .class-zone .top .right button {background-color: transparent; position: absolute; top: 10px; right: 10px}
.sub0101 .section2 .class-zone .class-list {margin-top: 2rem;}
.sub0101 .section2 .class-zone .class-list .box {position: relative}
.sub0101 .section2 .class-zone .class-list .box + .box {margin-top: 2rem}
.sub0101 .section2 .class-zone .class-list > .box > a {padding: 1.5rem; box-sizing: border-box; border-radius: 12px; background-color: #f8f8f8; display: flex; gap: 2rem; transition: 0.2s linear; border: 1px solid #f8f8f8;}
.sub0101 .section2 .class-zone .class-list .box:hover > a{background-color: #fff; border: 1px solid var(--color-sub-red); transition: 0.2s linear;}
.sub0101 .section2 .class-zone .class-list .box > a .img-box {padding-bottom: 20%; position: relative; width: 30%; border: 1px solid #ddd; border-radius: 12px; overflow: hidden;}
.sub0101 .section2 .class-zone .class-list .box > a .img-box img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); /*object-fit: cover;*/ width: 100%; height: 100%;}


.sub0101 .section2 .class-zone .class-list .box > a .text-box {width:calc(70% - 2rem);}
.sub0101 .section2 .class-zone .class-list .box > a .text-box .dec {display: block; color: #888; padding: 6px 0; font-size: 1.125rem;}
.sub0101 .section2 .class-zone .class-list .box > a .text-box .label { padding: .2rem 1.1rem; border-radius: 13.5px}
.sub0101 .section2 .class-zone .class-list .box > a .text-box .title {font-size: 1.375rem; padding-bottom: .5rem; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.sub0101 .section2 .class-zone .class-list .box > a .tag-box {margin-top: .5rem; margin-bottom: 2rem;}
.sub0101 .section2 .class-zone .class-list .box > a .tag-box span {border: 1px solid #ddd; border-radius:20px; background-color: #fff; color: #666; padding: 3px 10px;}
.sub0101 .section2 .class-zone .class-list .box > a .bottom {margin-top: 2rem; display: flex; justify-content: space-between}
.sub0101 .section2 .class-zone .class-list .box > a .bottom .left, .sub0101 .section2 .class-zone .class-list .box .bot_data .left {display: flex; gap: 1.2rem; color: #666;  font-size: 14px; align-items: center;}
.sub0101 .section2 .class-zone .class-list .box > a .bottom .left .writer, .sub0101 .section2 .class-zone .class-list .box .bot_data .writer  {display: flex; align-items: center; gap: 4px;position: relative;
    z-index: 10;}
.sub0101 .section2 .class-zone .class-list .box > a .bottom .left .writer::after, .sub0101 .section2 .class-zone .class-list .box .bot_data .writer::after {position: absolute; right: -10px; width: 1px; height: 14px; top: 6px; background-color: #ddd; content: ''; }
.sub0101 .section2 .class-zone .class-list .box > a .bottom .left .writer img, .sub0101 .section2 .class-zone .class-list .box .bot_data .writer img {max-width: 26px; max-height: 26px}
.sub0101 .section2 .class-zone .class-list .box .bot_data { width: calc(70% - 4rem); position: absolute; bottom:1.5rem; right:1.5rem; display: flex; justify-content: space-between; z-index: 100;}
.sub0101 .section2 .class-zone .class-list .box .bot_data .writer {cursor: pointer;}
.sub0101 .section2 .class-zone .class-list .box .bot_data .writer:hover span {text-decoration: underline;}
.sub0101 .section2 .class-zone .class-list .box .right {display: flex; gap: 1rem; /* position: absolute; right: 1.5rem; bottom: 1.5rem*/}
.sub0101 .section2 .class-zone .class-list .box .right > div:not(.share-list) {display: flex; align-items: center; justify-content: center; gap: 4px; color: #666;  cursor: pointer; }
.sub0101 .section2 .class-zone .class-list .box .right .like img {transition: 0.2s linear;}


.sub0101 .section2 .class-zone .top .right .select {background: #fff; color:#333; font-weight: 600; box-sizing:border-box; border-radius:30px; margin-left: 2rem; position: relative; padding: 8px 20px; padding-right: 50px;position: relative;}
.sub0101 .section2 .class-zone .top .right .select::after {position: absolute; content: ''; background: url(../../img/withsam/sub/slide-down.png) no-repeat; right: 20px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; transition: 0.2s linear;}
.sub0101 .section2 .class-zone .top .right .select.on::after {background: url(../../img/withsam/sub/slide-up.png) no-repeat; transition: 0.2s linear;}
.sub0101 .section2 .class-zone .top .right .select:hover {border-color: var(--color-sub-red); transition: 0.2s linear;}
.sub0101 .section2 .class-zone .top .right .select .blank { position: relative; font-size: 15px; cursor: pointer;}

.sub0101 .section2 .class-zone .top .right .select-list {z-index: 9; box-sizing:border-box; background: #fff; width: 100%; border:1px solid var(--color-main-red); position: absolute; left: 0; top: 50px; border-radius: 26px;}
.sub0101 .section2 .class-zone .top .right .select  li a { padding:10px; font-size: 15px; padding-left: 20px;}
.sub0101 .section2 .class-zone .top .right .select  li + li {border-top:1px dashed var(--color-main-red);}
.sub0101 .section2 .class-zone .top .right .select  li a:hover {color: var(--color-main-red); transition:0.2s all linear;}
.sub0101 .section2 .class-zone .top .right .input-text:hover {border-color: var(--color-main-red); transition: 0.2s linear; outline: none;}
.sub0101 .section2 .class-zone .top .right .input-text:focus {border-color: var(--color-main-red); transition: 0.2s linear; outline: none;}
.sub0101 .btn-zone {margin-top: 2rem;display: flex; align-items: center; justify-content: flex-end;}
.sub0101 .btn-zone a {background-color: var(--color-sub-red); color: #fff; padding: .3rem 1.2rem;border-radius: 8px; border: 1px solid var(--color-sub-red); transition: 0.2s linear;}
.sub0101 .btn-zone a:hover {background-color: #fff; color: var(--color-sub-red); border: 1px solid var(--color-sub-red); transition: 0.2s linear;}




/* 반응형 */
@media(max-width:1360px){

}

@media(max-width:1200px){
    .sub0101 .section2 .select-box {padding:2rem 3rem;}
    .sub0101 .section1 .sub-title-box {width: 200px;}

    .sub0101 .section2 .class-zone .class-list .box > a .tag-box {margin-bottom: 2.5rem;}
}

@media(max-width:1024px){

}

@media(max-width:970px){
    .sub0101 .section1 .sub-title-wrap .title-box {font-size: 1rem;}
}

@media(max-width:768px){
    .sub0101 .section1 .best-list {flex-wrap: wrap; gap: 20px}
    .sub0101 .section1 .best-list .box + .box {margin-left: 0}
    .sub0101 .section1 .best-list .box {width: calc(50% - 10px);}
    .sub0101 .section2 .class-zone .top .right button {top: 7px;}
    .sub0101 .section2 .select-box {padding: 2rem; margin-bottom: 0rem}
    .sub0101 .section2 .select-box ul {width: 100%}
    .sub0101 .section2 .select-box ul li {padding: .3rem 1rem;}
    .sub0101 .section2 .class-zone .top {flex-direction: column-reverse; gap: 20px; padding-bottom: 0.5rem;align-items: flex-end}
    #select {width: 150px}
    .sub0101 .section2 .class-zone .tab-wrap li + li {padding-left: 16px}
    .sub0101 .section2 .class-zone .class-list {display: flex;flex-wrap: wrap; gap: 20px}
    .sub0101 .section2 .class-zone .class-list .box {width: calc((100% - 20px) / 2); height: 100%}
    .sub0101 .section2 .class-zone .class-list > .box > a {flex-direction: column;padding:.8rem ;padding-bottom: 2.5rem; gap: 1rem}
    .sub0101 .section2 .class-zone .class-list .box > a .img-box {width: 100%; padding-bottom: 64%}
    .sub0101 .section2 .class-zone .class-list .box > a .text-box {width: 100%}
    .sub0101 .section2 .class-zone .class-list .box > a .bottom {margin-top: 1rem; justify-content: flex-end}
    .sub0101 .section2 .class-zone .class-list .box > a .text-box .dec {padding-bottom: 0}
    .sub0101 .section2 .class-zone .class-list .box > a .tag-box {margin-top: 0; display: flex; align-items: center;gap: 2px; flex-wrap: wrap}
    .sub0101 .section2 .class-zone .class-list .box + .box {margin-top: 0}
    .sub0101 .section2 .class-zone .class-list .box .right {bottom: .5rem; right: .8rem}
    .sub0101 .section1 .tab-wrap {bottom: -4.375rem; width: 100%;}
    .sub0101 .section1 .tab-wrap li {width: calc((100% - 1rem) / 2);}
    .sub0101 .tab-wrap li + li {padding-left: 0; margin-left: 1rem;}
    .sub0101 .section1 .tab-wrap li a {font-size: 16px; padding: 0.375rem 1rem; border-radius: 8px; text-align: center; font-weight: 600;}
    .sub0101 .section1 .sub-title-wrap {padding-top: 6rem}
    .sub0101 .section2 .fliter-zone > a {padding: 0.3rem 1.2rem;}
    .sub0101 .section1 .best-list .box .text-box .tit {font-size: 1.1rem}
    .sub0101 .section1 .best-list .box .text-box .dec {font-size: 14px}
    .sub0101 .section1 .best-list .box .text-box .label {font-size: 13px}
    .sub0101 .section2 .class-zone .class-list .box > a .text-box .label {font-size: 13px;}
    .sub0101 .section2 .class-zone .class-list .box > a .text-box .dec {font-size: 14px}
    .sub0101 .section2 .class-zone .class-list .box > a .text-box .title {font-size: 1.1rem}
    .sub0101 .section2 .class-zone .tab-wrap li + li {font-size: 0.9rem}
    .sub0101 .btn-zone a {padding: .3rem .8rem}
    .sub0101 .section2 .class-zone .class-list .box > a .bottom .left {flex-direction: column; align-items: flex-end; gap: 0}
    .sub0101 .section2 .class-zone .class-list .box > a .bottom .left .writer::after {content: none}

    .sub0101 .section2 .class-zone .class-list .box .bot_data {width: calc(100% - 1.5rem);flex-wrap: wrap;}
    .sub0101 .section2 .class-zone .class-list .box > a .bottom .left, .sub0101 .section2 .class-zone .class-list .box .bot_data .left,
    .sub0101 .section2 .class-zone .class-list .box .right {width: 100%;}

}

@media(max-width:640px){
    .sub0101 .section2 .select-box {padding:1rem 1.5rem;}

    .sub0101 .section2 .class-zone .class-list .box > a .bottom .left, .sub0101 .section2 .class-zone .class-list .box .bot_data .left {letter-spacing: -0.5px; gap:1rem;}


}
@media(max-width:580px){

    .sub0101 .section1 .sub-title-wrap {flex-direction: column; align-items: flex-start; gap: 6px}
    .sub0101 .section1 .sub-title-wrap .title-box {font-size: .9rem; padding-left: 58px}
    .sub0101 .section1 .sub-title-wrap .img-box {width: 46px; height: 46px}
    .sub0101 .section1 .sub-title-wrap .img-box img {max-width:26px}

}
@media(max-width:480px){
    .sub0101 .section1 .sub-title-wrap {padding-top: 5.625rem;}
    .sub0101 .section1 .tab-wrap {bottom: -4.125rem;}
    .sub0101 .section1 .tab-wrap li a {font-size: 15px;}
    .sub0101 .section1 .best-list .box {width: 100%; padding: .8rem}
    .sub0101 .section2 .class-zone .class-list .box {width: 100%}
    /*.sub0101 .section2 .select-box {padding: 1rem}*/
    .sub0101 .section2 .class-zone .top .right {width: 100%; justify-content: center; gap: 4px}
    .sub0101 .section2 .class-zone .top .right input {width: 200px}
    .sub0101 .section2 .class-zone .class-list .box >  a .bottom .left {gap: 1.2rem; align-items: center; flex-direction: row}
    .sub0101 .section2 .class-zone .class-list .box >  a .bottom .left .writer  {display: flex; align-items: center; gap: 4px;position: relative;}
    .sub0101 .section2 .class-zone .class-list .box >  a .bottom .left .writer::after {position: absolute; right: -10px; width: 1px; height: 14px; top: 6px; background-color: #ddd; content: ''; }
    .sub0101 .section2 .class-zone .class-list .box >  a .bottom .left .writer img {max-width: 26px; max-height: 26px}

}

@media(max-width:360px){

}