/*스타일*/

.main {width:100%; position:relative; z-index:10;}

.main .visual {width:100%; position:relative;}

.main .visual .key-visual {width:100%; background:#224b71;}
.main .visual .key-visual .key-visual-wrap {width:100%; max-width:1920px; margin:0 auto; position:relative;}
.main .visual .key-visual .key-visual-slide {width:100%; line-height:0;}
.main .visual .key-visual .key-visual-slide .key-visual-box {width:100%;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box {width:100%; position:relative; line-height:1.5;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box {width:64%; position:relative; z-index:0;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box:before {content:""; width:90%; height:315px; border-radius:0 300px 300px 0; background:rgba(0,0,0,0.55); position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:10;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box span {display:block; width:100%; height:550px; position:relative; overflow:hidden;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box {width:100%; height:100%; position:absolute; left:0; top:0; z-index:20; display:flex; align-items:center;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box > .inner {width:90%; height:315px; max-width:var(--max-w); margin:0 auto; display:flex; align-items:center;}

.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts {width:100%; display:flex; align-items:center; gap:0 var(--gap-16);}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .symbol {width:70px;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .symbol img {max-width:100%; display:block;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts {flex-shrink:1; font-family:var(--Paperlogy); width:44%;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts p {font-size:var(--font-30); color:var(--white); font-weight:800;}
.main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts .txt {font-size:var(--font-36); color:var(--light-blue); font-weight:700; line-height:1.3;}

.main .visual .key-visual .key-visual-slide .key-visual-box[data-id="key-visual-1"] .key-visual-conts-box .conts-box .key-visual-conts .conts .txt {margin-bottom:5px;}
.main .visual .key-visual .key-visual-slide .key-visual-box[data-id="key-visual-1"] .key-visual-conts-box .conts-box .key-visual-conts .conts span {width:fit-content; padding:0 var(--gap-16); height:var(--n-40); background:var(--light-blue); font-size:var(--font-20); color:var(--white); font-weight:700; display:flex; align-items:center; justify-content:center;}

.main .visual .key-visual .key-visual-slide .key-visual-box[data-id="key-visual-3"] .key-visual-conts-box .conts-box .key-visual-conts .conts p {font-size:var(--font-24);}
.main .visual .key-visual .key-visual-slide .key-visual-box[data-id="key-visual-3"] .key-visual-conts-box .conts-box .key-visual-conts .conts span {font-size:var(--font-18); color:var(--white); font-weight:700;}


@media screen and (max-width: 1600px) {
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box {width:68%;}
}

@media screen and (max-width: 1320px) {
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .symbol {width:55px;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts {width:50%;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts p {font-size:var(--font-24);}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts .txt {font-size:var(--font-30);}

    .main .visual .key-visual .key-visual-slide .key-visual-box[data-id="key-visual-1"] .key-visual-conts-box .conts-box .key-visual-conts .conts span {font-size:var(--font-16);}

    .main .visual .key-visual .key-visual-slide .key-visual-box[data-id="key-visual-3"] .key-visual-conts-box .conts-box .key-visual-conts .conts span {font-size:var(--font-16);}
}

@media screen and (max-width: 1024px) {
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box {width:100%;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box:before {display:none;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .img-box span {height:400px;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box {align-items:flex-end;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box > .inner {width:100%; height:auto; padding:var(--gap-60) 0; background:rgba(0,0,0,0.55);}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts {width:90%; margin:0 auto;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .symbol {display:none;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts {width:100%;}
    .main .visual .key-visual .key-visual-slide .key-visual-box .key-visual-conts-box .conts-box .key-visual-conts .conts .blank {display:block;}
}


.main .visual .key-visual .key-visual-slide .slick-arrow {width:70px; height:70px; font-size:0; display:block; cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); z-index:50;}
.main .visual .key-visual .key-visual-slide .slick-arrow:after {content:""; width:100%; height:100%; background:url(/theme/oklass20/img/main/slide_arrow.png) center no-repeat; background-size:auto 100%; position:absolute; left:0; top:0;}
.main .visual .key-visual .key-visual-slide .slick-prev {left:5%;}
.main .visual .key-visual .key-visual-slide .slick-prev:after {transform:scaleX(-1);}
.main .visual .key-visual .key-visual-slide .slick-next {right:5%;}
.main .visual .key-visual .pagination {width:90%; max-width:var(--max-w); position:absolute; left:50%; top:calc(50% + 157px - 25px); transform:translate(-50%,-50%);}
.main .visual .key-visual .pagination .slick-dots {width:100%; display:flex; align-items:center; gap:5px;}
.main .visual .key-visual .pagination .slick-dots li .dot {width:25px; height:25px; display:flex; align-items:center; justify-content:center; font-size:var(--font-14); background:var(--white); border:2px solid var(--white); cursor:pointer;}
.main .visual .key-visual .pagination .slick-dots .slick-active .dot {background:transparent; font-weight:600; color:var(--white);}

@media screen and (max-width: 1600px) {
    .main .visual .key-visual .key-visual-slide .slick-arrow {width:50px; height:50px;}
    .main .visual .key-visual .key-visual-slide .slick-prev {left:10px;} 
    .main .visual .key-visual .key-visual-slide .slick-next {right:10px;}
}

@media screen and (max-width: 768px) {
    .main .visual .key-visual .key-visual-slide .slick-arrow {width:40px; height:40px;}
}

@media screen and (max-width: 480px) {
    .main .visual .key-visual .key-visual-slide .slick-arrow {width:30px; height:30px;}
}


.main .visual .dir-button {width:400px; position:absolute; left:calc(50% + (var(--max-w) / 2) - 200px); top:50%; transform:translate(-50%,-50%);}
.main .visual .dir-button .dir-button-wrap {width:100%; display:flex; align-items:center; flex-wrap:wrap;}
.main .visual .dir-button .dir-button-wrap .dir-button-box {width:200px; height:200px; display:block; padding:var(--gap-32) var(--gap-24); display:flex; position:relative; font-family:var(--Pretendard);}
.main .visual .dir-button .dir-button-wrap .dir-button-box:before {content:""; width:80px; height:80px; background-repeat:no-repeat; background-size:cover; background-position:center; position:absolute; right:var(--gap-16); bottom:var(--gap-24); z-index:2;}
.main .visual .dir-button .dir-button-wrap .dir-button-box:after {content:""; width:80px; height:80px; border-radius:50%; background:var(--white); position:absolute; right:var(--gap-16); bottom:var(--gap-24); z-index:1; display:none;}
.main .visual .dir-button .dir-button-wrap .dir-button-box .conts {width:100%;}
.main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt {font-size:var(--font-24); font-weight:700; position:relative; line-height:1.3;}
.main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt:after {content:""; width:28px; height:7px; background:var(--black); position:absolute; left:0; bottom:-20px;}
.main .visual .dir-button .dir-button-wrap .dir-button-box .conts a {display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:5;}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='course-1'] {background:var(--white); border:1px solid #45475c;}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='course-2'] {background:#7778c7; color:var(--white);}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='classroom'] {background:#45475c; color:var(--white);}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='progress'] {background:var(--white);}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='course-2'] .conts .tlt:after,
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='classroom'] .conts .tlt:after {background:var(--white);}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='course-1']:before {background-image:url(/theme/oklass20/img/main/icon_dir_01.png);}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='course-2']:before {background-image:url(/theme/oklass20/img/main/icon_dir_02.png);}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='classroom']:before {background-image:url(/theme/oklass20/img/main/icon_dir_03.png); background-size:70% auto;}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='classroom']:after {display:block;}
.main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='progress']:before {background-image:url(/theme/oklass20/img/main/icon_dir_04.png);}

@media screen and (max-width: 1320px) {
    .main .visual .dir-button {left:calc(50% + ((var(--max-w) * 0.9) / 2) - 200px);}
}

@media screen and (max-width: 1280px) {
    .main .visual .dir-button {width:340px; left:calc(50% + (90vw / 2) - 170px);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box {width:170px; height:170px; padding:20px 10px;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box:before,
    .main .visual .dir-button .dir-button-wrap .dir-button-box:after {width:60px; height:60px;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt {font-size:var(--font-18);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt:after {height:5px; bottom:-15px;}
}

@media screen and (max-width: 1024px) {
    .main .visual .dir-button {width:100%; position:relative; top:auto; left:auto; transform:none; padding:var(--gap-60) 0; background:var(--light-baby-blue);}
    .main .visual .dir-button .dir-button-wrap {width:90%; margin:0 auto; gap:10px; flex-wrap:nowrap; justify-content:center;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box {width:calc((100% - 30px) / 4); height:200px; padding:0 5px; background:var(--white) !important; border:none !important; border-radius:var(--gap-32);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box:before {display:none;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box:after {display:none !important;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts {width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt {font-size:var(--font-28); color:var(--black) !important; text-align:center; padding-top:calc(var(--n-80) + 10px);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt:before {content:""; width:var(--n-80); height:var(--n-80); background-repeat:no-repeat; background-size:cover; background-position:center; position:absolute; left:50%; top:0; transform:translateX(-50%);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt:after {display:none;}

    .main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='course-1'] .conts .tlt:before {background-image:url(/theme/oklass20/img/main/icon_dir_01.png);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='course-2'] .conts .tlt:before {background-image:url(/theme/oklass20/img/main/icon_dir_02.png);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='classroom'] .conts .tlt:before {background-image:url(/theme/oklass20/img/main/icon_dir_03.png);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box[data-id='progress'] .conts .tlt:before {background-image:url(/theme/oklass20/img/main/icon_dir_04.png);}
}

@media screen and (max-width:648px) {
    .main .visual .dir-button .dir-button-wrap .dir-button-box {height:140px;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt {font-size:var(--font-20); padding-top:calc(var(--n-60) + 10px);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt:before {width:var(--n-60); height:var(--n-60);}
}

@media screen and (max-width:480px) {
    .main .visual .dir-button .dir-button-wrap {gap:8px;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box {width:calc((100% - 24px) / 4); height:90px;}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt {font-size:12px; padding-top:calc(var(--n-40) + 5px);}
    .main .visual .dir-button .dir-button-wrap .dir-button-box .conts .tlt:before {width:var(--n-40); height:var(--n-40);}
}



.main .section-wrap {width:100%;}
.main .section-wrap section {width:100%; padding-top:var(--gap-40);}
.main .section-wrap section:last-child {padding-bottom:calc(var(--gap-40) * 2);}
.main .section-wrap section > .wrap {width:90%; margin:0 auto; max-width:var(--max-w);}
.main .section-wrap section .section-title {width:100%; position:relative; margin-bottom:var(--gap-40);}
.main .section-wrap section .section-title h2 {font-size:var(--font-36); font-weight:700; text-align:center;}
.main .section-wrap section .btn-more {width:fit-content; height:28px; font-size:var(--font-16); font-weight:700; position:relative; padding-right:calc(var(--gap-8) + 28px); display:flex; align-items:center;}
.main .section-wrap section .btn-more:after {content:""; width:28px; height:28px; background:url(/theme/oklass20/img/com/icon_more.png) center no-repeat; background-size:cover; position:absolute; right:0; top:0;}

@media screen and (max-width: 1024px) {
    .main .section-wrap {background:var(--light-baby-blue);}
}



.main .course .section-title .btn-more {position:absolute; right:0; bottom:0;}
.main .course .course-wrap {width:100%; display:flex; gap:20px;}
.main .course .course-wrap .course-box {width:calc((100% - 60px) / 4); position:relative;}
.main .course .course-wrap .course-box.regular {background:#7a81c5;}
.main .course .course-wrap .course-box.irregular {background:#7ec859;}

.main .course .course-wrap .course-box .title-wrap {width:100%;}
.main .course .course-wrap .course-box .title-wrap > .inner {width:100%;}
.main .course .course-wrap .course-box .title-wrap span {width:fit-content; height:var(--n-32); font-size:var(--font-14); font-weight:700; color:var(--white); padding:0 10px; margin-left:auto; margin-right:0; display:flex; align-items:center; background:var(--purple);}
.main .course .course-wrap .course-box .title-wrap .title-box {width:100%; height:100px; padding:0 var(--gap-24); display:flex; align-items:center; gap:0 var(--gap-16);}
.main .course .course-wrap .course-box .title-wrap .title-box .icon {width:var(--n-40); height:var(--n-40); background:url(/theme/oklass20/img/main/icon_course.png) center no-repeat; background-size:cover;}
.main .course .course-wrap .course-box .title-wrap .title-box .title {width:calc(100% - (var(--n-40) + var(--gap-16))); height:52px; font-size:var(--font-20); font-weight:700; color:var(--white); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.main .course .course-wrap .course-box .info-wrap {width:100%; height:70px; background:#373737; display:flex; align-items:center; padding:0 var(--gap-24); color:var(--white); font-size:var(--font-16);}
.main .course .course-wrap .course-box .info-wrap .info-box {width:100%;}
.main .course .course-wrap .course-box .info-wrap .info-box .conts-box {width:100%; display:flex; align-items:center; gap:5px; margin-top:3px;}
.main .course .course-wrap .course-box .info-wrap .info-box .conts-box:first-child {margin-top:0;}
.main .course .course-wrap .course-box .info-wrap .info-box .conts-box .label {width:fit-content; height:var(--n-24); border-radius:5px; background:var(--black); font-size:12px; display:flex; align-items:center; justify-content:center; padding:0 10px;}
.main .course .course-wrap .course-box .info-wrap .info-box .conts-box.class {justify-content:space-between;}

.main .course .course-wrap .course-box a {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}

@media screen and (max-width: 1280px) {
    .main .course .course-wrap {max-width:800px; margin:0 auto; flex-wrap:wrap;}
    .main .course .course-wrap .course-box {width:calc((100% - 20px) / 2);}

    .main .course .course-wrap .course-box .title-wrap .title-box .title {height:auto;}
}

@media screen and (max-width: 648px) {
    .main .course .section-title .btn-more {display:none;}

    .main .course .course-wrap {gap:10px;}
    .main .course .course-wrap .course-box {width:100%; border-radius:var(--gap-32); overflow:hidden;}
    .main .course .course-wrap .course-box.regular {background:var(--light-purple);}
    .main .course .course-wrap .course-box.irregular {background:#a4c25e;}

    .main .course .course-wrap .course-box .title-wrap {height:80px; display:flex; align-items:center; padding:0 var(--gap-32);}
    .main .course .course-wrap .course-box .title-wrap span {background:transparent; margin-left:0; margin-right:auto; padding:0;}
    .main .course .course-wrap .course-box .title-wrap .title-box {height:auto; padding:0;}
    .main .course .course-wrap .course-box .title-wrap .title-box .title {display:block; white-space:nowrap;}

    .main .course .course-wrap .course-box .info-wrap {height:55px; padding:0 var(--gap-32);}
    .main .course .course-wrap .course-box .info-wrap .info-box .conts-box {justify-content:space-between; margin-top:0;}
    .main .course .course-wrap .course-box .info-wrap .info-box .conts-box .label {width:50px; font-size:10px;}
    .main .course .course-wrap .course-box.regular .info-wrap .info-box .conts-box .label {background:var(--light-purple);}
    .main .course .course-wrap .course-box.irregular .info-wrap .info-box .conts-box .label {background:#a4c25e;}
}



.main .current-board {width:100%;}
.main .current-board .board-wrap {width:100%; display:flex; gap:var(--gap-32);}
.main .current-board .board-wrap .board-box {width:calc((100% - (var(--gap-32) * 2)) / 3);}
.main .current-board .board-wrap .board-box .title-wrap {width:100%; display:flex; align-items:flex-end; justify-content:space-between; position:relative; padding-bottom:var(--gap-16); border-bottom:1px solid var(--black); margin-bottom:var(--gap-32);}
.main .current-board .board-wrap .board-box .title-wrap:after {content:""; width:120px; height:5px; background:var(--black); position:absolute; left:0; bottom:0;}
.main .current-board .board-wrap .board-box .title-wrap .title {font-size:var(--font-30); font-weight:700;}
.main .current-board .board-wrap .board-box .board-conts {width:100%;}
.main .current-board .board-wrap .board-box .board-conts ul.tb {width:100%;}
.main .current-board .board-wrap .board-box .board-conts ul.tb li {width:100%; height:30px; position:relative; font-size:var(--font-16); font-weight:200; display:flex; align-items:center; justify-content:space-between;}
.main .current-board .board-wrap .board-box .board-conts ul.tb li .subject {width:calc(100% - 80px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main .current-board .board-wrap .board-box .board-conts ul.tb li .subject span.notice {color:#7a81c5; font-weight:700;}
.main .current-board .board-wrap .board-box .board-conts ul.tb li .date {width:80px; text-align:center;}
.main .current-board .board-wrap .board-box .board-conts ul.tb li a {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}

@media screen and (max-width: 1024px) {
    .main .current-board .board-wrap {max-width:800px; margin:0 auto; display:block;}
    .main .current-board .board-wrap .board-box {width:100%; background:var(--white); display:none;}
    .main .current-board .board-wrap .board-box.active {display:block;}
    .main .current-board .board-wrap .board-box .title-wrap {display:none;}
    .main .current-board .board-wrap .board-box .board-conts ul.tb {border-bottom:1px solid #b7b7b7;}
    .main .current-board .board-wrap .board-box .board-conts ul.tb li {height:auto; flex-direction:column; gap:10px; padding:var(--gap-32) var(--gap-24); border-top:2px solid var(--light-baby-blue); padding-right:calc(var(--gap-24) + var(--n-24));}
    .main .current-board .board-wrap .board-box .board-conts ul.tb li:before {content:""; width:var(--n-24); height:var(--n-24); background:url(/theme/oklass20/img/main/arrow_down.png) center no-repeat; background-size:100% auto; position:absolute; right:var(--gap-24); top:50%; transform:translateY(-50%);}
    .main .current-board .board-wrap .board-box .board-conts ul.tb li .subject {width:100%; font-size:var(--font-20); font-weight:600;}
    .main .current-board .board-wrap .board-box .board-conts ul.tb li .date {width:100%; text-align:left; font-weight:500; color:#6e6e6e;}
}


.main .current-board .board-tab {width:100%; max-width:800px; margin:0 auto; display:none;}
.main .current-board .board-tab.active {display:block;}
.main .current-board .board-tab .tab-wrap {width:100%; height:var(--n-80); display:flex; background:#f5f8fc; border-top:1px solid var(--light-purple);}
.main .current-board .board-tab .tab-wrap .tab {flex:1; height:100%; display:flex; align-items:center; justify-content:center; font-size:var(--font-30); font-weight:700; color:#4a4a4a; cursor:pointer; position:relative;}
.main .current-board .board-tab .tab-wrap .tab.active:after {content:""; width:100%; height:7px; background:var(--light-purple); position:absolute; left:0; bottom:0;}
.main .current-board .board-tab .tab-wrap .tab span {position:relative;}
.main .current-board .board-tab .tab-wrap .tab span.new:after {content:""; width:6px; height:6px; border-radius:50%; background:var(--red); position:absolute; right:-15px; top:1px;}




@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}