@charset "utf-8";

/*
	#기능: 메인 사용
*/

/* 메인공통 */
.main-wrap .container {max-width: 1500px;margin: 0 auto;padding: 0 10px;}
.main-wrap .more-btn i {transition: all 0.1s ease-in-out;}
.main-wrap .more-btn:hover i {transform: translateX(5px);}
.main-wrap .image-thumbnail {width:100%;padding-top:135%;position:relative;overflow:hidden;border: 1px solid #ededed;}
.main-wrap .image-thumbnail .thumbnail {position:absolute;top:0;left:0;right:0;bottom:0;}
.main-wrap .image-thumbnail .thumbnail img {width:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}
.main-wrap .image-thumbnail .thumbnail::after {content:'';width:130px;height:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:url("../img/main/no-image.png") no-repeat center;}
@media screen and (max-width:767px) {
  .main-wrap .container {padding: 0 15px;}
  .main-wrap .more-btn {font-size: var(--font-size-14);}
  .main-wrap .image-thumbnail .thumbnail::after {width: 100%;background-size: 60%;}
}


/* 메인배너 */
.main-banner {position: relative;overflow-x: hidden;}
.main-banner .swiper-slide {width:100%;background-size:cover;background-position:center;}
.main-banner .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: contain;}
.main-banner .swiper-control {width: 100%;position: absolute;bottom: 40px;z-index: 5;display: flex;align-items: center;justify-content: center;gap: 15px;}
.main-banner .swiper-pagination {position: initial;width: auto !important;}
.main-banner .swiper-pagination .swiper-pagination-bullet {width: 40px;height: 12px;border-radius: 20px;background-color: #fff;border: 1px solid #555;}
.main-banner .swiper-pagination .swiper-pagination-bullet-active {width: 110px;background-color: var(--primary-color);border-color: var(--primary-color);}
.main-banner .swiper-button {display: flex;align-items: center;gap: 5px;}
.main-banner .swiper-button button {display: block;width: 20px;font-size: var(--font-size-18);color: #999;}
@media screen and (max-width:767px) {
  .main-banner .swiper-control {bottom: 10px;}
  .main-banner .swiper-pagination .swiper-pagination-bullet {width: 20px;height: 8px;}
  .main-banner .swiper-pagination .swiper-pagination-bullet-active {width: 40px;}
  .main-banner .swiper-button {display: none;}
}


/* 인기컨텐츠 */
.main-best {padding: 70px 0;background: transparent linear-gradient(119deg, #FFFCF3 0%, #ECE9FD 100%) 0 0 no-repeat padding-box; overflow: hidden;}
.main-best .title {display: flex;align-items: center;justify-content: space-between;margin-bottom: 50px;}
.main-best .title h2 {font-size: 2.5em;font-weight: 700;letter-spacing: -0.05em;}
.main-best .contents .list li a {display: block;}
.main-best .contents .list li a .image {position: relative;transition: all 0.2s ease-in-out;}
.main-best .contents .list li a .image::before {content:'';width:100%;height:100%;position:absolute;top:0;left:0;background: #E3E3E3;transform: rotate(5deg);transition: all .3s;}
.main-best .contents .list li a .image-thumbnail {background: #f5f5f5;}
.main-best .contents .list li a .text {margin-top: 20px;}
.main-best .contents .list li a .text .subject {display: block;font-size: var(--font-size-18);font-weight: 500;letter-spacing: -0.05em;min-height: 51px;overflow: hidden;text-overflow: ellipsis;word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;}
.main-best .contents .list li a .text .author-wrap {margin-top: 5px;display: flex;font-size: var(--font-size-14);color: #777;}
.main-best .contents .list li a .text .author-wrap .category {display: block;white-space: nowrap;}
.main-best .contents .list li a .text .author-wrap .author {display: block;position: relative;padding-left: 10px;margin-left: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main-best .contents .list li a .text .author-wrap .author::before {content: '';position: absolute;top: 5px;left: 0;width: 1px;height: 11px;background-color: #999;}
.main-best .swiper {overflow: visible;}
@media (min-width:1024px) {
  .main-best .contents .list {display: flex;flex-wrap: wrap;gap: 30px 0;}
  .main-best .contents .list li {position: relative;width: calc(100% / 5);height: 400px;margin-bottom: 50px;}
  .main-best .contents .list li::after {content: '';width: 100%;height: 10px;position: absolute;bottom: 0;left: 0;background-color: #fff;box-shadow: 3px 3px 6px #00000029;opacity: .5;}
  .main-best .contents .list li a {margin: 0 45px;transition: all .2s;}
  .main-best .contents .list li a .image {transition: all .5s .15s;}
  .main-best .contents .list li a:hover .image {transform:translateY(-5px);box-shadow: 0 0 15px rgba(0,0,0,.1);}
  .main-best .contents .list li a:hover .image::before {transform: rotate(0);}
}
@media (min-width:1024px) and (max-width:1299px) {
  .main-best .contents .list li a {margin: 0 20px;}
}
@media screen and (max-width:1023px) {
  .main-best .title h2 {font-size: 2em;}
  .main-best .contents::after {content: '';width: 100%;height: 10px;display: block;margin-top: 7px;background-color: #fff;box-shadow: 3px 3px 6px #00000029;border-radius: 10px;opacity: .5;}
  .main-best .swiper-slide {transition: all .3s;}
  .main-best .swiper-slide-active {transform: translateY(-20px) !important;transition: all .3s;transition-delay: .3s;}
}
@media screen and (max-width:767px) {
  .main-best {padding: 30px 0 35px;}
  .main-best .title {justify-content: center;}
  .main-best .title h2 {font-size: var(--font-size-20);}
  .main-best .title .more-btn {display: none;}
  .main-best .contents .list li a .image {box-shadow: 0 0 6px rgba(0,0,0,.15);}
  .main-best .contents .list li a .image::before {display: none;}
  .main-best .contents .list li a .text .subject {font-size: 1em;min-height: auto;}
  .main-best .contents .list li a .text .author-wrap {font-size: var(--font-size-13);}
  .main-best .contents .list li a .text .author-wrap .author {padding-left: 6px;margin-left: 6px;}
  .main-best .contents .list li a .text .author-wrap .author::before {height: 9px;}
}
/* 효과 */
@keyframes shaking {
  0% {transform: rotate(7deg);}
  20% {transform: rotate(0deg);}
  50% {transform: rotate(-7deg);}
  70% {transform: rotate(0deg);}
  100% {transform: rotate(7deg);}
}


/* 니가 참 궁금해 */
.main-guide {margin: 60px;padding: 60px 0;background: #fefbdc;border-radius: 10px;}
.main-guide .title {text-align: center;margin-bottom: 50px;}
.main-guide .title h2 {font-size: 2.5em;font-weight: 700;letter-spacing: -0.05em;margin-bottom: 15px;}
.main-guide .title p {font-size: var(--font-size-20);letter-spacing: -0.05em;word-break: keep-all;}
.main-guide .contents {display: flex;}
.main-guide .contents li {flex: 1 1 0;margin: 0 30px;background-color: #fff;border: 1px solid #fff;border-radius: 15px;transition: all .2s ease-in-out;}
.main-guide .contents li a {display: flex;align-items: center;gap: 30px;padding: 40px 15px 40px 30px;}
.main-guide .contents li a .image {width: 70px;height: 70px;display: flex;align-items: center;justify-content: center;}
.main-guide .contents li a .image img {max-width: 100%;}
.main-guide .contents li a .text span {display: block;color: #555;letter-spacing: -0.05em;}
.main-guide .contents li a .text strong {display: block;font-size: var(--font-size-24);font-weight: 600;letter-spacing: -0.05em;}
.main-guide .contents li a .text strong i {display: inline-block;padding-left: 10px;transition: all .2s ease-in-out;}
.main-guide .contents li:hover {border-color: var(--primary-color);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);}
.main-guide .contents li:hover a .text strong i {transform: translateX(8px);}
@media screen and (max-width:1479px) {
  .main-guide {margin: 20px;}
  .main-guide .contents li {margin: 0 5px;}
  .main-guide .contents li a {gap: 15px;padding: 30px 10px 30px 15px;}
  .main-guide .contents li a .image {width: 40px;height: 40px;}
  .main-guide .contents li a .text span {font-size: var(--font-size-13);}
  .main-guide .contents li a .text strong {font-size: var(--font-size-18);}
}
@media screen and (max-width:1023px) {
  .main-guide {margin: 0;}
  .main-guide .title h2 {font-size: 2em;}
  .main-guide .title p {font-size: 1em;}
  .main-guide .contents li a {justify-content: center;}
  .main-guide .contents li a .image {width: 35px;height: 35px;}
  .main-guide .contents li a .text span {display: none;}
}
@media screen and (max-width:767px) {
  .main-guide {padding: 30px 0;}
  .main-guide .title {margin-bottom: 20px;}
  .main-guide .title h2 {font-size: var(--font-size-20);}
  .main-guide .title p {display: none;}
  .main-guide .contents {flex-direction: column;gap: 15px;}
  .main-guide .contents li a {padding: 20px 10px 20px 15px;}
}

/* 주제별로 쏙쏙 */
.main-subject {margin: 80px 0 100px;}
.main-subject .container {display: flex;}
.main-subject .left {width: 32%;margin-right: 8%;}
.main-subject .left h2 {font-size: 2.8em;font-weight: 700;letter-spacing: -0.05em;margin-bottom: 35px;}
.main-subject .left .subject-tab {display: flex;flex-wrap: wrap;gap: 12px 8px;margin-bottom: 25px;}
.main-subject .left .subject-tab li button {display: block;border: 1px solid #EFEFEF;border-radius: 30px;padding: 4px 12px;font-size: var(--font-size-18);letter-spacing: -0.05em;color: #777;transition: all .1s;}
.main-subject .left .subject-tab li:hover button {border-color: var(--primary-color);color: var(--primary-color);}
.main-subject .left .subject-tab li.active button {background-color: var(--primary-color);border-color: var(--primary-color);color: #fff;}
.main-subject .left .btn-default {margin-top: 30px;}
.main-subject .right {position: relative;width: calc(60% - 80px);margin: 0 auto;}
.main-subject .right .image-thumbnail {transition: transform .6s cubic-bezier(.13,.77,.35,1), box-shadow .6s cubic-bezier(.13,.77,.35,1);background: #f5f5f5;}
.main-subject .right .text {margin-top: 25px;}
.main-subject .right .text .category {display: block;color: var(--primary-color);}
.main-subject .right .text .subject {display: block;font-size: var(--font-size-20);font-weight: 500;letter-spacing: -0.05em;margin: 5px 0 10px;overflow: hidden;text-overflow: ellipsis;word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;}
.main-subject .right .text .hashtag {display: flex;flex-wrap: wrap;gap: 3px 16px;font-size: var(--font-size-14);color: #999999;}
.main-subject .right .swiper-slide {padding: 15px 0;}
.main-subject .right .swiper-slide-active .image-thumbnail {box-shadow: 0 0 20px rgba(0,0,0,.15);}
.main-subject .right .swiper-control button {position: absolute;top: 50%;transform: translateY(-50%);z-index: 9;}
.main-subject .right .swiper-control button::after {font-size: 3em;color: var(--primary-color);}
.main-subject .right .swiper-control .swiper-btn-prev {left: -40px;}
.main-subject .right .swiper-control .swiper-btn-next {right: -40px;}
@media screen and (max-width:1023px) {
  .main-subject {margin: 40px 0 60px;}
  .main-subject .left h2 {font-size: 2em;margin-bottom: 20px;}
  .main-subject .left .subject-tab {gap: 6px 8px;}
  .main-subject .left .subject-tab li button {font-size: var(--font-size-13);}
  .main-subject .right .text {margin-top: 15px;}
  .main-subject .right .text .category {font-size: var(--font-size-13);}
  .main-subject .right .text .subject {font-size: var(--font-size-18);}
  .main-subject .right .text .hashtag {gap: 3px 7px;font-size: var(--font-size-13);}
}
@media screen and (max-width:767px) {
  .main-subject {margin: 20px 15px;}
  .main-subject .container {position: relative;flex-direction: column;border: 1px solid #eee;border-radius: 10px;padding: 25px 15px;padding-bottom: 60px;}
  .main-subject .left {width: 100%;margin-right: 0;}
  .main-subject .left h2 {font-size: var(--font-size-20);text-align: center;}
  .main-subject .left h2 br {display: none;}
  .main-subject .left .subject-tab {flex-wrap: nowrap;padding-bottom: 10px;overflow-x: auto;gap: 0 3px;}
  .main-subject .left .subject-tab li button {white-space: nowrap;}
  .main-subject .left .btn-default {position: absolute;bottom: 15px;left: 15px;width: calc(100% - 30px);text-align: center;margin-top: 0;}
  .main-subject .right {width: 100%;}
  .main-subject .right .text .subject {font-size: 1em;}
  .main-subject .right .swiper-control {display: none;}
}

/* 문피디 시작하기 */
.main-start .container {display: flex;}
.main-start .left {width: 32%;margin-right: 8%;}
.main-start .left h2 {font-size: 2.25em;font-weight: 700;letter-spacing: -0.05em;margin-bottom: 40px;}
.main-start .left h2 span {color: var(--primary-color);}
.main-start .left .count-wrap dl {display: flex;align-items: center;justify-content: space-between;}
.main-start .left .count-wrap dl:not(:last-child) {margin-bottom: 15px;}
.main-start .left .count-wrap dl dt {width: 150px;font-size: var(--font-size-18);font-weight: 700;letter-spacing: -0.05em;color: #555555;}
.main-start .left .count-wrap dl dt img {margin-right: 5px;}
.main-start .left .count-wrap dl dd {position: relative;text-align: right;font-size: 3em;font-weight: 700;display: flex;}
.main-start .left .count-wrap dl dd::after {content: '+';display: block;font-size: 0.8em;margin-top: -10px;}
.main-start .right {width: 60%;display: flex;justify-content: space-between;background-color: var(--primary-color);border-radius: 20px;padding: 60px;}
.main-start .right .title {width: 45%;}
.main-start .right .title h2 {font-size: 2.5em;font-weight: 700;letter-spacing: -0.05em;line-height: 1.2;color: #fff;margin-bottom: 40px;word-break: keep-all;}
.main-start .right .title p { font-size: var(--font-size-18);color: #fff;letter-spacing: -0.05em;word-break: keep-all;}
.main-start .right .contents {width: 50%;display: flex;flex-direction: column;justify-content: space-between;}
.main-start .right .contents ul {display: flex;justify-content: space-between;}
.main-start .right .contents ul li .image {width: 70px;height: 70px;margin: 0 auto;background-color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.main-start .right .contents ul li .image img {max-width: 100%;}
.main-start .right .contents ul li span {display: block;margin-top: 10px;letter-spacing: -0.05em;color: #fff;}
.main-start .right .contents .start-btn {display: flex;align-items: center;justify-content: space-between;margin-top: 15px;background-color: #fff;border-radius: 8px;padding: 15px 20px;font-size: var(--font-size-18);font-weight: 700;letter-spacing: -0.05em;}
.main-start .right .contents .start-btn i {transform: translateX(-8px); transition: all .2s ease-in-out;}
.main-start .right .contents .start-btn:hover i {transform: translateX(0);}
@media screen and (max-width:1023px) {
  .main-start .container {flex-direction: column;}
  .main-start .left {width: 100%;margin-right: 0;order: 2;margin-top: 40px;}
  .main-start .left h2 {font-size: 2em;margin-bottom: 30px;}
  .main-start .left .count-wrap dl dt {font-size: 1em;}
  .main-start .left .count-wrap dl dd {font-size: 2.5em;}
  .main-start .right {width: 100%;padding: 40px;}
  .main-start .right .title h2 {font-size: 2em;}
  .main-start .right .contents ul li .image {width: 60px;height: 60px;}
  .main-start .right .contents ul li span {font-size: var(--font-size-13);}
  .main-start .right .contents .start-btn {font-size: 1em;}
}
@media screen and (max-width:767px) {
  .main-start {padding-top: 20px;}
  .main-start .left h2 {font-size: var(--font-size-20);text-align: center;}
  .main-start .left .count-wrap {display: flex;justify-content: center;gap: 30px;}
  .main-start .left .count-wrap dl {flex-direction: column;}
  .main-start .left .count-wrap dl:not(:last-child) {margin-bottom: 0;}
  .main-start .left .count-wrap dl dt {width: 100%;font-size: var(--font-size-13);font-weight: 400;text-align: center;}
  .main-start .left .count-wrap dl dt img {display: none;}
  .main-start .left .count-wrap dl dd {text-align: center;font-size: var(--font-size-28);}
  .main-start .right {flex-direction: column;padding: 30px 20px;}
  .main-start .right .title {width: 100%;}
  .main-start .right .title h2 {font-size: var(--font-size-20);font-weight: 500;text-align: center;}
  .main-start .right .title p {display: none;}
  .main-start .right .contents {width: 100%;}
  .main-start .right .contents ul li span {font-size: 0.75em;letter-spacing: -0.1em;}
  .main-start .right .contents .start-btn {margin-top: 30px;padding: 12px 15px;font-size: var(--font-size-13);justify-content: center;}
  .main-start .right .contents .start-btn i {display: none;}
}

/* 문피디 함께하기 */
.main-partners {background: #F6F6F6;padding: 40px 0 70px;margin-top: -40px;}
.main-partners .container {position: relative;}
.main-partners .title {display: flex;align-items: center;gap: 25px; margin-bottom: 30px;}
.main-partners .title h2 {font-size: var(--font-size-24);font-weight: 700;letter-spacing: -0.05em;}
.main-partners ul {display: flex;flex-wrap: wrap;border: 1px solid #EFEFEF;}
.main-partners ul li {display: flex;align-items: center;justify-content: center;height: 80px;background-color: #fff;border-right: 1px solid #EFEFEF;border-bottom: 1px solid #EFEFEF;}
.main-partners .swiper {width: 100%;height: 100%;border-radius: 10px;}
.main-partners .swiper-grid-column > .swiper-wrapper {flex-direction: row;}
.main-partners .swiper-control {display: flex;}
.main-partners .swiper-control button {display: inline-block;width: 25px;height: 25px;}
.main-partners .swiper-control .swiper-btn-next::after {font-size: var(--font-size-20);font-weight: 600;color: #555;}
.main-partners .swiper-control .swiper-btn-prev::after {font-size: var(--font-size-20);font-weight: 600;color: #555;}
.main-partners .swiper-pagination {bottom: -25px !important;}

@media screen and (max-width:1023px) {
  .main-partners {padding: 30px 0 50px;margin-top: 30px;}
  .main-partners .title {margin-bottom: 15px;}
  .main-partners .title h2 {font-size: var(--font-size-20);}
}
@media screen and (max-width:767px) {
  .main-partners {background: none;margin-top: 10px;}
  .main-partners .title {justify-content: center;}
  .main-partners .title h2 {font-size: 1em;font-weight: 400;}
  .main-partners ul li {height: 60px}
  .main-partners .swiper-control {display: none;}
}

/* faq */
.main-faq {padding: 80px 0;}
.main-faq .title {display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;}
.main-faq .title h2 {font-size: 2.5em;font-weight: 700;letter-spacing: -0.05em;}
.main-faq .faq-wrap {display: flex;flex-wrap: wrap;gap: 22px 40px;}
.main-faq .faq-wrap li {width: calc((100% - 40px) / 2);}
.main-faq .faq-wrap li .faq-que {display: flex;align-items: center;justify-content: space-between;gap: 10px;background-color: #f5f6f9;border-radius: 5px;padding: 22px 25px;cursor: pointer;margin-bottom: 3px;}
.main-faq .faq-wrap li .faq-que p {font-size: var(--font-size-18);font-weight: 600;letter-spacing: -0.05em;color: #555555;transition: all .3s;}
.main-faq .faq-wrap li .faq-que i {transition: all .3s;}
.main-faq .faq-wrap li .faq-que.active p {font-weight: 700;}
.main-faq .faq-wrap li .faq-que.active i {transform: rotate(180deg);}
.main-faq .faq-wrap li .faq-anw {display: none;background-color: #f5f6f9;border-radius: 5px;padding: 22px 25px;}
@media screen and (max-width:1023px) {
  .main-faq {padding: 40px 0;}
  .main-faq .title h2 {font-size: 2em;}
  .main-faq .faq-wrap {gap: 15px 10px;}
  .main-faq .faq-wrap li {width: calc((100% - 10px) / 2);}
  .main-faq .faq-wrap li .faq-que {padding: 20px 15px;}
  .main-faq .faq-wrap li .faq-que p {font-size: 1em;}
  .main-faq .faq-wrap li .faq-anw {padding: 20px 15px;}
}
@media screen and (max-width:767px) {
  .main-faq {padding: 20px 0 40px;}
  .main-faq .title h2 {font-size: var(--font-size-20);}
  .main-faq .faq-wrap {gap: 12px 0;}
  .main-faq .faq-wrap li {width: 100%;}
  .main-faq .faq-wrap li .faq-que {padding: 15px 15px;}
  .main-faq .faq-wrap li .faq-que p {font-size: var(--font-size-13);}
  .main-faq .faq-wrap li .faq-que i {font-size: var(--font-size-13);}
  .main-faq .faq-wrap li .faq-anw {padding: 15px 15px;}
  .main-faq .faq-wrap li .faq-anw p {font-size: var(--font-size-13);}
}

/* 탑버튼 */
.top-btn {position: fixed;right: 50px;bottom: 50px;z-index: 99;opacity: 0;visibility: hidden; transition: all .3s;}
.top-btn a {width: 60px;height: 60px;border-radius: 50%;background-color: #181818;color: #fff;display: flex;align-items: center;justify-content: center;}
.top-btn.active {opacity: 1;visibility: visible;}
@media screen and (max-width:767px) {
  .top-btn {right: 10px;bottom: 40px;}
  .top-btn a {width: 50px;height: 50px;}
}

/* 문피디 BEST채널 */
.main-channel {margin-bottom: 120px;}
.main-channel .container {display: flex;max-width: 1620px;}
.main-channel .title {display: flex;flex-direction: column;justify-content: center;width: 360px;padding-left: 60px;background-color: #252f91;border-radius: 25px 0 0 25px;}
.main-channel .title h2 {margin-bottom: 30px;font-size: 2.5em;line-height: 1.1;color: #fff;}
.main-channel .title h2 strong {display: block;font-weight: 700;}
.main-channel .title p {font-size: var(--font-size-18);color: #a6ace3;}
.main-channel .contents {position: relative;width: calc(100% - 360px);padding: 60px 100px;background-color: #2e3899;border-radius: 0 25px 25px 0;}
.main-channel .channel {display: flex;flex-direction: column;align-items: center;}
.main-channel .channel .image {width: 125px;height: 125px;border-radius: 50%;background: rgba(255,255,255,0.04);border: 1px solid #252f91;overflow: hidden;}
.main-channel .channel .image img {width: 100%;height: 100%;object-fit: contain;}
.main-channel .channel .text {width: 100%;margin-top: 15px;color: #fff;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.main-channel .swiper-control button {position: absolute;top: 50%;transform: translateY(-50%);z-index: 9;}
.main-channel .swiper-control button::after {font-size: 2.5em;font-weight: 100;color: #fff;}
.main-channel .swiper-control .swiper-btn-prev {left: 70px;}
.main-channel .swiper-control .swiper-btn-next {right: 70px;}
@media screen and (max-width:1399px) {
  .main-channel .title {width: 280px;padding-left: 40px;}
  .main-channel .contents {width: calc(100% - 280px);padding: 60px 40px;}
  .main-channel .channel .image {width: 100px;height: 100px;}
  .main-channel .swiper-control .swiper-btn-prev {left: 20px;}
  .main-channel .swiper-control .swiper-btn-next {right: 20px;}
}
@media screen and (max-width:1023px) {
  .main-channel {margin-bottom: 70px;}
  .main-channel .title {width: 230px;padding-left: 30px;}
  .main-channel .title h2 {font-size: 2em;}
  .main-channel .title p {font-size: 1em;}
  .main-channel .contents {width: calc(100% - 230px);padding: 60px 30px;}
  .main-channel .channel .image {width: 80px;height: 80px;}
  .main-channel .channel .text {font-size: var(--font-size-14);}
  .main-channel .swiper-control button::after {font-size: 2em;}
  .main-channel .swiper-control .swiper-btn-prev {left: 10px;}
  .main-channel .swiper-control .swiper-btn-next {right: 10px;}
}
@media screen and (max-width:767px) {
  .main-channel {margin-bottom: 0;}
  .main-channel .container {flex-direction: column;}
  .main-channel .title {width: 100%;padding: 20px 0;border-radius: 20px 20px 0 0;text-align: center;}
  .main-channel .title h2 {margin-bottom: 0;font-size: var(--font-size-20);}
  .main-channel .title h2 strong {display: inline-block;}
  .main-channel .title p {display: none;}
  .main-channel .contents {width: 100%;padding: 20px 5px 25px;border-radius: 0 0 20px 20px;}
  .main-channel .channel .image {width: 65px;height: 65px;}
  .main-channel .channel .text {font-size: 0.75em;}
  .main-channel .swiper-control {display: none;}
}