@import url(default.css);
@import url(common.css);
@import url(layout.css);

/* 
    파일명 : main.css 
    작성자 : 이윤정
    작성일 : 24.05.10
    설  명 : 메인페이지에만 들어가는 스타일을 저장
            ( header와 footer 빼고 전부 다 )
*/

.visual {
    height: 800px;
    background: url(../images/visual_bg.png) no-repeat center center / cover;
    color: #fff;
    padding-top: 100px;
    text-align: center;
}
.visual .v_logo {
    margin-top: 170px;
    width: 247px;
    height: 115px;
    text-align: center;
    margin-left: 50%;
    transform: translate(-50%, 0);
}
.visual .v_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.visual h2 {
    font-size: 60px;
    font-weight: 700;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.visual span {
    font-size: 20px; /*단국대체로 지정해야됨*/
}

.quick_menu {
    position: fixed;
    right: 20px;
    top: 240px;
    z-index: 100;
}
.quick_menu ul {
    position: relative;
    background-color: #F4F7FC;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    padding: 15px 10px;
    border-radius: 180px;
}
.quick_menu::before {
    position: absolute;
    left: 0;
    top: -100px;
    width: 100px;
    height: 233px;
    content: "";
    background: url(../images/q_menu_icon.png) no-repeat center center / contain;
    animation-name: quick_menu_move; 
    animation-duration:3s; 
    animation-iteration-count:infinite; 
    animation-timing-function:linear;
}
@keyframes quick_menu_move { /* 애니메이션을 효과를 미리 설정함 */
	0% { transform:translate(0, 0) }  /* 애니메이션을 시작할때의 속성 */
	50% { transform:translate(0, 20px) } /* 중간값은 %를 조절하여 추가/삭제 가능 */
	100% { transform:translate(0, 0) } /* 애니메이션이 종료될때의 속성 */
}
.quick_menu ul li a {
    position: relative;
    display: block;
    font-size: 12px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background-color: #273D88;
    color: #fff;
    text-align: center;
    padding-top: 45px;
    margin-bottom: 10px;
}
.quick_menu ul li.q_top a {
    height: 40px;
    border-radius: 5px 5px 40px 40px;
    padding: 12px 0 0 20px;
    background-color: #FF97B0;
    margin-bottom: 0;
}
.quick_menu ul li a::after {
    position: absolute;
    left: 50%;
    top: 15px;
    transform: translate(-50%, 0);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    content: "";
}
.quick_menu ul li.q_search a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.155 17.1212L22.4377 21.4039L21.0235 22.8181L16.7408 18.5354C15.2009 19.7674 13.248 20.5044 11.124 20.5044C6.15602 20.5044 2.12402 16.4724 2.12402 11.5044C2.12402 6.53639 6.15602 2.50439 11.124 2.50439C16.092 2.50439 20.124 6.53639 20.124 11.5044C20.124 13.6284 19.387 15.5813 18.155 17.1212ZM16.1487 16.3792C17.3715 15.119 18.124 13.4 18.124 11.5044C18.124 7.63689 14.9915 4.50439 11.124 4.50439C7.25652 4.50439 4.12402 7.63689 4.12402 11.5044C4.12402 15.3719 7.25652 18.5044 11.124 18.5044C13.0196 18.5044 14.7386 17.7519 15.9988 16.5291L16.1487 16.3792Z' fill='white'/%3E%3C/svg%3E%0A");
}
.quick_menu ul li.q_student a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.2693 14.4443V16.4443C8.95558 16.4443 6.26929 19.1306 6.26929 22.4443H4.26929C4.26929 18.026 7.85101 14.4443 12.2693 14.4443ZM12.2693 13.4443C8.95429 13.4443 6.26929 10.7593 6.26929 7.44434C6.26929 4.12934 8.95429 1.44434 12.2693 1.44434C15.5843 1.44434 18.2693 4.12934 18.2693 7.44434C18.2693 10.7593 15.5843 13.4443 12.2693 13.4443ZM12.2693 11.4443C14.4793 11.4443 16.2693 9.65434 16.2693 7.44434C16.2693 5.23434 14.4793 3.44434 12.2693 3.44434C10.0593 3.44434 8.26929 5.23434 8.26929 7.44434C8.26929 9.65434 10.0593 11.4443 12.2693 11.4443ZM18.2693 21.9443L15.3304 23.4894L15.8917 20.2168L13.514 17.8992L16.7998 17.4218L18.2693 14.4443L19.7388 17.4218L23.0246 17.8992L20.6469 20.2168L21.2082 23.4894L18.2693 21.9443Z' fill='white'/%3E%3C/svg%3E%0A");
}
.quick_menu ul li.q_prospect a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.2693 14.4344V16.5238C13.6437 16.3027 12.9706 16.1824 12.2693 16.1824C8.95558 16.1824 6.26929 18.8687 6.26929 22.1824H4.26929C4.26929 17.7641 7.85101 14.1824 12.2693 14.1824C12.9599 14.1824 13.6301 14.2699 14.2693 14.4344ZM12.2693 13.1824C8.95429 13.1824 6.26929 10.4974 6.26929 7.18237C6.26929 3.86737 8.95429 1.18237 12.2693 1.18237C15.5843 1.18237 18.2693 3.86737 18.2693 7.18237C18.2693 10.4974 15.5843 13.1824 12.2693 13.1824ZM12.2693 11.1824C14.4793 11.1824 16.2693 9.39237 16.2693 7.18237C16.2693 4.97237 14.4793 3.18237 12.2693 3.18237C10.0593 3.18237 8.26929 4.97237 8.26929 7.18237C8.26929 9.39237 10.0593 11.1824 12.2693 11.1824ZM18.2693 17.1824V14.1824H20.2693V17.1824H23.2693V19.1824H20.2693V22.1824H18.2693V19.1824H15.2693V17.1824H18.2693Z' fill='white'/%3E%3C/svg%3E%0A");
}

.quick_menu ul li.q_employee a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.8356 16.4324L18.0116 16.6094L18.1891 16.4324C19.0678 15.5537 20.4924 15.5537 21.3711 16.4324C22.2498 17.3111 22.2498 18.7357 21.3711 19.6144L18.0124 22.9731L14.6536 19.6144C13.7749 18.7357 13.7749 17.3111 14.6536 16.4324C15.5323 15.5537 16.9569 15.5537 17.8356 16.4324ZM11.9946 14.7734V16.7734C8.68092 16.7734 5.99463 19.4597 5.99463 22.7734H3.99463C3.99463 18.4385 7.44247 14.9089 11.7454 14.7772L11.9946 14.7734ZM11.9946 1.77344C15.3096 1.77344 17.9946 4.45844 17.9946 7.77344C17.9946 11.0131 15.4303 13.651 12.2196 13.7693L11.9946 13.7734C8.67963 13.7734 5.99463 11.0884 5.99463 7.77344C5.99463 4.53378 8.55897 1.89581 11.7696 1.77758L11.9946 1.77344ZM11.9946 3.77344C9.7842 3.77344 7.99463 5.56301 7.99463 7.77344C7.99463 9.98387 9.7842 11.7734 11.9946 11.7734C14.205 11.7734 15.9946 9.98387 15.9946 7.77344C15.9946 5.56301 14.205 3.77344 11.9946 3.77344Z' fill='white'/%3E%3C/svg%3E%0A");
}
.quick_menu ul li.q_top a::after {
    left: 12px;
    top: 8px;
    transform: translate(0, 0);
    background-size: 24px auto;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='25' viewBox='0 0 26 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.6806 15.625L7.86337 15.625L13.272 7.13151L18.6806 15.625Z' fill='white'/%3E%3C/svg%3E%0A");
}

.service {
    margin-bottom: 130px;
}
.service .wrapper {
    position: relative;
    height: 170px;
}
.service .inner {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 260px;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #DFF6FF;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    padding: 0 70px;
}
.service h2 {
    font-size: 50px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 10px;
}
.service p {
    margin-bottom: 30px;
}
.service .tap_menu ul {
    display: flex;
}
.service .tap_menu ul li {
    font-size: 20px;
    display: block;
    padding: 5px 20px;
    border-radius: 18px;
    background-color: #fff;
    color: #1d1d1d;
    margin-right: 10px;
    cursor: pointer;
}
.service .tap_menu ul li.on {
    background-color: #004999;
    color: #DFF6FF;
}
.service .detail ul {
    display: flex;
}
.service .detail ul li {
    margin-right: 20px;
}
.service .detail ul li a {
    position: relative;
    display: block;
    width: 130px;
    height: 155px;
    background-color: #fff;
    font-size: 20px;
    text-align: center;
    color: #1d1d1d;
    border-radius: 20px;
    padding-top: 110px;
    transition: 0.5s;
}
.service .detail ul li a::before {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%, 0);
    width: 80px;
    height: 60px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
}
.service .detail ul li.library a::before {
    background-image: url(../images/service_library.png);
    background-size: 79px auto;
}
.service .detail ul li.lifelong_edu a::before {
    background-image: url(../images/service_lifelong_edu.png);
    background-size: 56px auto;
}
.service .detail ul li.dorm a::before {
    background-image: url(../images/service_dorm.png);
    background-size: 61px auto;
}
.service .detail ul li.certificate a::before {
    background-image: url(../images/service_certificate.png);
    background-size: 59px auto;
}
.service .detail ul li.cooperation a::before {
    background-image: url(../images/service_cooperation.png);
    background-size: 58px auto;
}
.service .detail ul li a:hover {
    font-weight: 700;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    transform: translate(0, -10px); 
}


.notice .wrapper {
    display: flex;
    justify-content: space-between;
    height: 500px;
}
.notice .tit {
    display: flex;
    background-color: #004999;
    z-index: 1;
    color: #fff;
    padding: 40px 0 30px 40px;
    border-radius: 60px;
    margin-right: 60px;
}
.notice .tit h2 {
    position: relative;
    font-size: 50px;
    font-weight: 700;
    margin-right: 60px;
}
.notice .tit h2::after {
    position: absolute;
    left: 0;
    top: 150px;
    width: 160px;
    height: 246px;
    content: "";
    background: url(../images/notice_icon.png) no-repeat center center / contain;
}
.notice .tit .tap_menu ul li {
    position: relative;
    font-size: 25px;
    line-height: 60px;
    padding: 0 45px 0 20px;
    white-space: nowrap;
    cursor: pointer;
}
.notice .tit .tap_menu ul li::before {
    position: absolute;
    right: 0;
    top: 11px;
    width: 37px;
    height: 37px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg width='37' height='38' viewBox='0 0 37 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.0479 18.9243C23.0479 19.1298 23.0158 19.3225 22.9516 19.5024C22.8873 19.6822 22.7781 19.8493 22.624 20.0034L15.5323 27.0951C15.2497 27.3777 14.8899 27.519 14.4531 27.519C14.0163 27.519 13.6566 27.3777 13.374 27.0951C13.0913 26.8124 12.95 26.4527 12.95 26.0159C12.95 25.5791 13.0913 25.2194 13.374 24.9368L19.3865 18.9243L13.374 12.9117C13.0913 12.6291 12.95 12.2694 12.95 11.8326C12.95 11.3958 13.0913 11.0361 13.374 10.7534C13.6566 10.4708 14.0163 10.3295 14.4531 10.3295C14.8899 10.3295 15.2497 10.4708 15.5323 10.7534L22.624 17.8451C22.7781 17.9993 22.8873 18.1663 22.9516 18.3461C23.0158 18.526 23.0479 18.7187 23.0479 18.9243Z' fill='white'/%3E%3C/svg%3E%0A");
}
.notice .tit .tap_menu ul li.on::before {
    right: -50px;
    background-image: url("data:image/svg+xml,%3Csvg width='37' height='38' viewBox='0 0 37 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.0479 19.1743C23.0479 19.3798 23.0158 19.5725 22.9516 19.7524C22.8873 19.9322 22.7781 20.0993 22.624 20.2534L15.5323 27.3451C15.2497 27.6277 14.8899 27.769 14.4531 27.769C14.0163 27.769 13.6566 27.6277 13.374 27.3451C13.0913 27.0624 12.95 26.7027 12.95 26.2659C12.95 25.8291 13.0913 25.4694 13.374 25.1868L19.3865 19.1743L13.374 13.1617C13.0913 12.8791 12.95 12.5194 12.95 12.0826C12.95 11.6458 13.0913 11.2861 13.374 11.0034C13.6566 10.7208 14.0163 10.5795 14.4531 10.5795C14.8899 10.5795 15.2497 10.7208 15.5323 11.0034L22.624 18.0951C22.7781 18.2493 22.8873 18.4163 22.9516 18.5961C23.0158 18.776 23.0479 18.9687 23.0479 19.1743Z' fill='%23004999'/%3E%3C/svg%3E%0A");
}
.notice .tit .tap_menu ul li.on {
    color: #004999;
}
.notice .tit .tap_menu ul li.on::after {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 230px;
    height: 60px;
    border-radius: 35px;
    content: "";
    background-color: #DFF6FF;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.notice .tit .more a {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: 30px;
    padding: 10px 40px 10px 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: all .5s;
}
.notice .tit .more a::before {
    position: absolute;
    right: 15px;
    top: 12px;
    width: 16px;
    height: 16px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_30_5)'%3E%3Cpath d='M8.46767 8.56255H5.13434C4.99267 8.56255 4.87392 8.51462 4.77809 8.41875C4.68226 8.32287 4.63434 8.20407 4.63434 8.06235C4.63434 7.92061 4.68226 7.80189 4.77809 7.70616C4.87392 7.61044 4.99267 7.56258 5.13434 7.56258H8.46767V4.22925C8.46767 4.08758 8.5156 3.96883 8.61147 3.873C8.70735 3.77716 8.82615 3.72925 8.96787 3.72925C9.1096 3.72925 9.22833 3.77716 9.32405 3.873C9.41978 3.96883 9.46764 4.08758 9.46764 4.22925V7.56258H12.801C12.9426 7.56258 13.0614 7.61051 13.1572 7.70638C13.2531 7.80226 13.301 7.92106 13.301 8.06278C13.301 8.20451 13.2531 8.32324 13.1572 8.41896C13.0614 8.51469 12.9426 8.56255 12.801 8.56255H9.46764V11.8959C9.46764 12.0375 9.4197 12.1563 9.32384 12.2521C9.22796 12.348 9.10916 12.3959 8.96744 12.3959C8.8257 12.3959 8.70698 12.348 8.61125 12.2521C8.51553 12.1563 8.46767 12.0375 8.46767 11.8959V8.56255Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_30_5'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.967651 0.0626221)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: 16px auto;
    transition: all .5s;
}
.notice .tit .more a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    border-radius: 20px;
    content: "";
    background-color: #fff;
    transition: all .5s;
}
.notice .tit .more a:hover {
    color: #004999;
}
.notice .tit .more a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_30_5)'%3E%3Cpath d='M8.46767 8.56255H5.13434C4.99267 8.56255 4.87392 8.51462 4.77809 8.41875C4.68226 8.32287 4.63434 8.20407 4.63434 8.06235C4.63434 7.92061 4.68226 7.80189 4.77809 7.70616C4.87392 7.61044 4.99267 7.56258 5.13434 7.56258H8.46767V4.22925C8.46767 4.08758 8.5156 3.96883 8.61147 3.873C8.70735 3.77716 8.82615 3.72925 8.96787 3.72925C9.1096 3.72925 9.22833 3.77716 9.32405 3.873C9.41978 3.96883 9.46764 4.08758 9.46764 4.22925V7.56258H12.801C12.9426 7.56258 13.0614 7.61051 13.1572 7.70638C13.2531 7.80226 13.301 7.92106 13.301 8.06278C13.301 8.20451 13.2531 8.32324 13.1572 8.41896C13.0614 8.51469 12.9426 8.56255 12.801 8.56255H9.46764V11.8959C9.46764 12.0375 9.4197 12.1563 9.32384 12.2521C9.22796 12.348 9.10916 12.3959 8.96744 12.3959C8.8257 12.3959 8.70698 12.348 8.61125 12.2521C8.51553 12.1563 8.46767 12.0375 8.46767 11.8959V8.56255Z' fill='%23004999'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_30_5'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.967651 0.0626221)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.notice .tit .more a:hover::after {
    width: 100%;
    z-index: -1;
}
.notice .detail .item {
    display: none;
}
.notice .detail .item[data-name="n_common"] {
    display: block;
}
.notice .detail ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.notice .detail ul li {
    height: 240px;
    width: calc(33.33% - 40px);
    margin-left: 20px;
    border: 1px solid #999;
    border-radius: 30px;
}
.notice .detail ul li:nth-child(1),
.notice .detail ul li:nth-child(2),
.notice .detail ul li:nth-child(3) {
    margin-bottom: 20px;
}
.notice .detail ul li a {
    display: block;
    position: relative;
}
.notice .detail ul li a:hover::after {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 227px;
    height: 106px;
    z-index: -1;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 227px auto;
}
.notice .detail ul li.n_genaeral a:hover::after {
    background-image: url(../images/notice_genaeral.png);
}
.notice .detail ul li.n_lecture a:hover::after {
    background-image: url(../images/notice_lecture.png);
}
.notice .detail ul li.n_event a:hover::after {
    background-image: url(../images/notice_event.png);
}
.notice .detail ul li.n_recruit a:hover::after {
    background-image: url(../images/notice_recruit.png);
}
.notice .detail ul li.n_purchase a:hover::after {
    background-image: url(../images/notice_purchase.png);
}
.notice .detail ul li a strong {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 50px;
    color: #1d1d1d;
    padding-left: 20px;
}
.notice .detail ul li a strong::before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 120px;
    height: 50px;
    content: "";
    border-radius: 28px 0;
}
.notice .detail ul li.n_genaeral a strong::before {
    background-color: #FDD154;
}
.notice .detail ul li.n_lecture a strong::before {
    background-color: #FF97B0;
}
.notice .detail ul li.n_event a strong::before {
    background-color: #F7A185;
}
.notice .detail ul li.n_recruit a strong::before {
    background-color: #C6B3E1;
}
.notice .detail ul li.n_purchase a strong::before {
    background-color: #8EE6D6;
}
.notice .detail ul li a h3 {
    font-size: 20px;
    height: 120px;
    margin: 20px 20px 0 20px;
}
.notice .detail ul li a span {
    display: block;
    text-align: right;
    color: #666;
    margin-right: 20px;
}

.news {
    margin-top: 180px;
    text-align: center;
}
.news h2 {
    font-size: 50px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 50px;
}
.news ul {
    display: flex;
    justify-content: space-between;
}
.news ul li {
    margin-right: 20px;
}
.news ul li:last-child {
    margin-right: 0;
}
.news ul li a {
    display: block;
    width: 385px;
    height: 500px;
    background-color: #F4F7FC;
    border-radius: 30px;
    transition: 00.5s;
}
.news ul li a:hover {
    transform: translate(0, -20px);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
}
.news ul li .photo {
    width: 385px;
    height: 372px;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
}
.news ul li .photo img {
    width: 100%;
    object-fit: contain;
}
.news ul li h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1d;
    padding: 20px 20px 15px 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.news .more a {
    position: relative;
    display: inline-block;
    margin-top: 30px;
    padding: 10px 40px 10px 20px;
    border: 1px solid #1d1d1d;
    border-radius: 20px;
    color: #3d3d3d ;
    transition: all .5s;
    overflow: hidden;
}
.news .more a::before {
    position: absolute;
    right: 15px;
    top: 12px;
    width: 16px;
    height: 16px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_27_170)'%3E%3Cpath d='M7.72066 8.8557H4.38733C4.24566 8.8557 4.12691 8.80777 4.03108 8.7119C3.93525 8.61602 3.88733 8.49722 3.88733 8.3555C3.88733 8.21377 3.93525 8.09504 4.03108 7.99932C4.12691 7.90359 4.24566 7.85573 4.38733 7.85573H7.72066V4.5224C7.72066 4.38073 7.7686 4.26198 7.86446 4.16615C7.96034 4.07032 8.07914 4.0224 8.22086 4.0224C8.3626 4.0224 8.48132 4.07032 8.57705 4.16615C8.67277 4.26198 8.72063 4.38073 8.72063 4.5224V7.85573H12.054C12.1956 7.85573 12.3144 7.90367 12.4102 7.99953C12.506 8.09541 12.554 8.21421 12.554 8.35593C12.554 8.49767 12.506 8.61639 12.4102 8.71212C12.3144 8.80784 12.1956 8.8557 12.054 8.8557H8.72063V12.189C8.72063 12.3307 8.6727 12.4494 8.57683 12.5453C8.48095 12.6411 8.36215 12.689 8.22043 12.689C8.0787 12.689 7.95997 12.6411 7.86425 12.5453C7.76852 12.4494 7.72066 12.3307 7.72066 12.189V8.8557Z' fill='%233D3D3D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_27_170'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.220642 0.355713)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: 16px auto;
    transition: all .5s;    
}
.news .more a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    border-radius: 20px;
    content: "";
    background-color: #004999;
    transition: all .5s;
}
.news .more a:hover {
    color: #fff;
}
.news .more a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_30_5)'%3E%3Cpath d='M8.46767 8.56255H5.13434C4.99267 8.56255 4.87392 8.51462 4.77809 8.41875C4.68226 8.32287 4.63434 8.20407 4.63434 8.06235C4.63434 7.92061 4.68226 7.80189 4.77809 7.70616C4.87392 7.61044 4.99267 7.56258 5.13434 7.56258H8.46767V4.22925C8.46767 4.08758 8.5156 3.96883 8.61147 3.873C8.70735 3.77716 8.82615 3.72925 8.96787 3.72925C9.1096 3.72925 9.22833 3.77716 9.32405 3.873C9.41978 3.96883 9.46764 4.08758 9.46764 4.22925V7.56258H12.801C12.9426 7.56258 13.0614 7.61051 13.1572 7.70638C13.2531 7.80226 13.301 7.92106 13.301 8.06278C13.301 8.20451 13.2531 8.32324 13.1572 8.41896C13.0614 8.51469 12.9426 8.56255 12.801 8.56255H9.46764V11.8959C9.46764 12.0375 9.4197 12.1563 9.32384 12.2521C9.22796 12.348 9.10916 12.3959 8.96744 12.3959C8.8257 12.3959 8.70698 12.348 8.61125 12.2521C8.51553 12.1563 8.46767 12.0375 8.46767 11.8959V8.56255Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_30_5'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.967651 0.0626221)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.news .more a:hover::after {
    width: 100%;
    z-index: -1;
}


.contents {
    margin-top: 180px;
}
.contents .wrapper {
    display: flex;
    justify-content: space-between;
}
.contents .popupzon {
    position: relative;
    width: 50%;
}
.contents .popupzon::before {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -2;
    width: 150%;
    height: 700px;
    content: "";
    background-color: #DFF6FF;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0 100px 100px 0;
}
.contents .popupzon .top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-right: 80px;
}
.contents .popupzon h2 {
    font-size: 50px;
    font-weight: 700;
    margin: 50px 0 40px 0;
}
.contents .popupzon .page {
    display: flex;
    align-items: center;
}
.contents .popupzon .pagination {
    font-size: 25px;
    color: #333;
    width: auto;
    margin-right: 30px;    
}
.contents .popupzon .pagination .swiper-pagination-current {
    font-weight: 700;
    color: #1d1d1d;
}

.contents .popupzon .prev,
.contents .popupzon .next {
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.contents .popupzon .prev {
    background-image: url("data:image/svg+xml,%3Csvg width='39' height='39' viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0873 19.9356L24.3706 12.6522L23.25 11.5316L14.8461 19.9356L23.25 28.3395L24.3706 27.2189L17.0873 19.9356Z' fill='%233D3D3D'/%3E%3C/svg%3E%0A");
}
.contents .popupzon .next {
    background-image: url("data:image/svg+xml,%3Csvg width='39' height='39' viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_29_288)'%3E%3Cpath d='M21.1795 19.5864L13.8961 12.3031L15.0167 11.1825L23.4207 19.5864L15.0167 27.9904L13.8961 26.8698L21.1795 19.5864Z' fill='%233D3D3D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_29_288'%3E%3Crect width='38' height='38' fill='white' transform='translate(0.133362 0.586426)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.contents .popupzon .swiper { 
    width: 720px;
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
    margin-left: 0;
}
.contents .popupzon .swiper-slide img {
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 

.contents .donate {
    position: relative;
    width: 50%;
    margin-top: 200px;
}
.contents .donate::before {
    position: absolute;
    left: -20%;
    top: 0;
    z-index: -10;
    width: 150%;
    height: 620px;
    content: "";
    background-color: #F4F7FC;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    border-radius: 100px 0 0 100px;
}
.contents .donate::after {
    position: absolute;
    left: 50px;
    top: -150px;
    width: 825px;
    height: 171px;
    background: url(../images/donate_txt.png) no-repeat center center / contain;
    content: "";

}
.contents .donate .inner {
    padding: 75px 0 0 50px;
}
.contents .donate .tit span {
    display: block;
    font-size: 20px;
    color: #3d3d3d;
    margin-bottom: 15px;
}
.contents .donate .tit h2 {
    font-size: 50px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 40px;
}
.contents .donate .detail {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 40px;
}
.contents .donate .detail .person {
    margin-bottom: 10px;
}
.contents .donate .detail .person span,
.contents .donate .detail .money span { 
    position: relative;
    font-size: 50px;
    padding: 0 10px 0 60px; 
}
.contents .donate .detail .person span {
    color: #FF97B0;
}
.contents .donate .detail .money span {
    font-size: 50px;
    color: #F6B44F;
}
.contents .donate .detail .person span::before,
.contents .donate .detail .money span::before { 
    position: absolute;
    left: 0;
    top: 5px;
    width: 45px;
    height: 40px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.contents .donate .detail .person span::before {
    background-image: url(../images/donate_person_icon.png);
}
.contents .donate .detail .money span::before {
    background-image: url(../images/donate_money_icon.png);
}
.contents .donate .link {
    position: relative;
}
.contents .donate .link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 247px;
    height: 256px;
    content: "";
    background: url(../images/donate_cha.png) no-repeat center center / contain;
}
.contents .donate .link a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1;
    width: 465px;
    height: 145px;
    padding: 0 20px 0 10px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.contents .donate .link .txt span {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 10px;
} 
.contents .donate .link .txt span strong.c_yellow {
    color: #F6B44F;
} 
.contents .donate .link .txt span strong.c_pink {
    color: #FF97B0;
} 
.contents .donate .link .bts strong {
    display: block;
    position: relative;
    text-align: center;
    color: #fff;
}
.contents .donate .link .bts strong::before {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    width: 85px;
    height: 85px;
    content: "";
    background-color: #444E69;
    border-radius: 100%;
    transition: 0.5s;
}
.contents .donate .link .bts strong:hover::before {
    background-color: #FF97B0;
}
.schedule {
    position: relative;
    color: #fff;
    padding: 250px 0 180px 0;
}
.schedule::before {
    position: absolute;
    left: 0;
    top: -50px;
    z-index: -20;
    width: 100%;
    height: 700px;
    content: "";
    background: url(../images/schedule_bg.png) no-repeat center center;
}
.schedule .wrapper {
    display: flex;
    align-items: flex-end;
}
.schedule .tit {
    margin-right: 100px;
}
.schedule .tit h2 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
}
.schedule .tit .date {
    background-color: #fff;
    color: #1d1d1d;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
}
.schedule .tit .date strong {
    margin-right: 8px;
}
.schedule .tit .bts {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.schedule .tit .bts .page {
    display: flex;
    justify-content: space-between;
}
.schedule .tit .next,
.schedule .tit .prev,
.schedule .tit .stop,
.schedule .tit .start {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid #fff;
    margin-right: 10px;
}
.schedule .tit .start {
    display: none;
}
.schedule .tit .next::before,
.schedule .tit .prev::before,
.schedule .tit .stop::before,
.schedule .tit .start::before  {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 32px auto;
}
.schedule .tit .prev::before {
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.4102 16L20.5436 9.86664L19.5999 8.92297L12.5229 16L19.5999 23.077L20.5436 22.1333L14.4102 16Z' fill='white'/%3E%3C/svg%3E%0A");
}
.schedule .tit .next::before {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_27_187)'%3E%3Cpath d='M17.7231 16L11.5897 9.86664L12.5334 8.92297L19.6104 16L12.5334 23.077L11.5897 22.1333L17.7231 16Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_27_187'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.schedule .tit .stop::before {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8667 18V6H18.3667V18H14.8667ZM7.3667 18V6H10.8667V18H7.3667Z' fill='white'/%3E%3C/svg%3E%0A");
}
.schedule .tit .start::before {
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.5667 22.923V9.07703L23.4383 16L12.5667 22.923Z' fill='white'/%3E%3C/svg%3E%0A");
}
.schedule .tit .more a {
    position: relative;
    display: inline-block;
    margin: 30px 0 0 20px;
    padding: 10px 40px 10px 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    transition: all .5s;
    overflow: hidden;
}
.schedule .tit .more a::before {
    position: absolute;
    right: 15px;
    top: 12px;
    width: 16px;
    height: 16px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_30_5)'%3E%3Cpath d='M8.46767 8.56255H5.13434C4.99267 8.56255 4.87392 8.51462 4.77809 8.41875C4.68226 8.32287 4.63434 8.20407 4.63434 8.06235C4.63434 7.92061 4.68226 7.80189 4.77809 7.70616C4.87392 7.61044 4.99267 7.56258 5.13434 7.56258H8.46767V4.22925C8.46767 4.08758 8.5156 3.96883 8.61147 3.873C8.70735 3.77716 8.82615 3.72925 8.96787 3.72925C9.1096 3.72925 9.22833 3.77716 9.32405 3.873C9.41978 3.96883 9.46764 4.08758 9.46764 4.22925V7.56258H12.801C12.9426 7.56258 13.0614 7.61051 13.1572 7.70638C13.2531 7.80226 13.301 7.92106 13.301 8.06278C13.301 8.20451 13.2531 8.32324 13.1572 8.41896C13.0614 8.51469 12.9426 8.56255 12.801 8.56255H9.46764V11.8959C9.46764 12.0375 9.4197 12.1563 9.32384 12.2521C9.22796 12.348 9.10916 12.3959 8.96744 12.3959C8.8257 12.3959 8.70698 12.348 8.61125 12.2521C8.51553 12.1563 8.46767 12.0375 8.46767 11.8959V8.56255Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_30_5'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.967651 0.0626221)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: 16px auto;
    transition: all .5s;
}
.schedule .tit .more a::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    border-radius: 20px;
    content: "";
    background-color: #fff;
    transition: all .5s;
}
.schedule .tit .more a:hover {
    color: #1d1d1d;
}
.schedule .tit .more a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_27_170)'%3E%3Cpath d='M7.72066 8.8557H4.38733C4.24566 8.8557 4.12691 8.80777 4.03108 8.7119C3.93525 8.61602 3.88733 8.49722 3.88733 8.3555C3.88733 8.21377 3.93525 8.09504 4.03108 7.99932C4.12691 7.90359 4.24566 7.85573 4.38733 7.85573H7.72066V4.5224C7.72066 4.38073 7.7686 4.26198 7.86446 4.16615C7.96034 4.07032 8.07914 4.0224 8.22086 4.0224C8.3626 4.0224 8.48132 4.07032 8.57705 4.16615C8.67277 4.26198 8.72063 4.38073 8.72063 4.5224V7.85573H12.054C12.1956 7.85573 12.3144 7.90367 12.4102 7.99953C12.506 8.09541 12.554 8.21421 12.554 8.35593C12.554 8.49767 12.506 8.61639 12.4102 8.71212C12.3144 8.80784 12.1956 8.8557 12.054 8.8557H8.72063V12.189C8.72063 12.3307 8.6727 12.4494 8.57683 12.5453C8.48095 12.6411 8.36215 12.689 8.22043 12.689C8.0787 12.689 7.95997 12.6411 7.86425 12.5453C7.76852 12.4494 7.72066 12.3307 7.72066 12.189V8.8557Z' fill='%233D3D3D'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_27_170'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.220642 0.355713)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.schedule .tit .more a:hover::after {
    width: 100%;
    z-index: -1;
}
.schedule  ul li:nth-child(even) {
    transform: translate(0, -20px);
}
.schedule  ul li a {
    display: block;
    position: relative;
    margin-top: 55px;
}
.schedule  ul li .top span {
    position: absolute;
    left: 30px;
    top: -35px;
    display: block;
    text-align: center;
    width: 75px;
    height: 75px;
    border-radius: 100%;
    background-color: #fff;
    color: #1d1d1d;
    padding-top: 10px;
}
.schedule  ul li .top span strong {
    font-size: 25px;
    font-weight: 700;
}
.schedule  ul li .detail {
    font-size: 20px;
    text-align: center;
    height: 160px;
    border-radius: 30px;
    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 35px 20px;
}
.schedule  ul li .detail h3 {
    font-weight: 700;
    margin-top: 20px;
}


.youtube {
    margin-top: 180px;
}
.youtube .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}
.youtube .tit span {
    font-size: 20px;
    color: #3d3d3d;
}
.youtube .tit h2 {
    font-size: 50px;
    font-weight: 700;
    color: #1d1d1d;
}
.youtube .link strong {
    position: relative;
    font-weight: 700;
    padding-left: 30px;
    color: #FF0000;
}
.youtube .link strong::before {
    position: absolute;
    left: -10px;
    top: -8px;
    width: 32px;
    height: 32px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='23' viewBox='0 0 32 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_28_251)'%3E%3Cpath d='M31.3312 3.93554C30.9627 2.58373 29.8784 1.51874 28.502 1.15689C26.0067 0.5 15.9995 0.5 15.9995 0.5C15.9995 0.5 5.99326 0.5 3.49799 1.15689C2.12161 1.51874 1.03725 2.58373 0.668825 3.93554C0 6.38627 0 11.4995 0 11.4995C0 11.4995 0 16.6127 0.668825 19.0645C1.03725 20.4163 2.12161 21.4813 3.49799 21.8431C5.99326 22.5 15.9995 22.5 15.9995 22.5C15.9995 22.5 26.0057 22.5 28.501 21.8431C29.8773 21.4813 30.9617 20.4163 31.3301 19.0645C31.9989 16.6137 31.999 11.4995 31.999 11.4995C31.999 11.4995 31.9989 6.38627 31.3301 3.93451L31.3312 3.93554Z' fill='%23FF0000'/%3E%3Cpath d='M12.7998 16.2138L21.1135 11.5005L12.7998 6.78613V16.2138Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_28_251'%3E%3Crect width='32' height='22' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.youtube .link button {
    position: relative;
    display: inline-block;
    margin: 30px 0 0 20px;
    padding: 10px 40px 10px 20px;
    border: 1px solid #FF0000;
    color: #FF0000;
    border-radius: 20px;
    transition: all .5s;
    overflow: hidden;
}
.youtube .link button::before {
    position: absolute;
    right: 15px;
    top: 12px;
    width: 16px;
    height: 16px;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_30_5)'%3E%3Cpath d='M8.46767 8.56255H5.13434C4.99267 8.56255 4.87392 8.51462 4.77809 8.41875C4.68226 8.32287 4.63434 8.20407 4.63434 8.06235C4.63434 7.92061 4.68226 7.80189 4.77809 7.70616C4.87392 7.61044 4.99267 7.56258 5.13434 7.56258H8.46767V4.22925C8.46767 4.08758 8.5156 3.96883 8.61147 3.873C8.70735 3.77716 8.82615 3.72925 8.96787 3.72925C9.1096 3.72925 9.22833 3.77716 9.32405 3.873C9.41978 3.96883 9.46764 4.08758 9.46764 4.22925V7.56258H12.801C12.9426 7.56258 13.0614 7.61051 13.1572 7.70638C13.2531 7.80226 13.301 7.92106 13.301 8.06278C13.301 8.20451 13.2531 8.32324 13.1572 8.41896C13.0614 8.51469 12.9426 8.56255 12.801 8.56255H9.46764V11.8959C9.46764 12.0375 9.4197 12.1563 9.32384 12.2521C9.22796 12.348 9.10916 12.3959 8.96744 12.3959C8.8257 12.3959 8.70698 12.348 8.61125 12.2521C8.51553 12.1563 8.46767 12.0375 8.46767 11.8959V8.56255Z' fill='%23FF0000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_30_5'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.967651 0.0626221)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-size: 16px auto;
    transition: all .5s;
}
.youtube .link button::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0%;
    height: 100%;
    border-radius: 20px;
    content: "";
    background-color: #FF0000;
    transition: all .5s;
}
.youtube .link button:hover {
    color: #fff;
}
.youtube .link button:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_30_5)'%3E%3Cpath d='M8.46767 8.56255H5.13434C4.99267 8.56255 4.87392 8.51462 4.77809 8.41875C4.68226 8.32287 4.63434 8.20407 4.63434 8.06235C4.63434 7.92061 4.68226 7.80189 4.77809 7.70616C4.87392 7.61044 4.99267 7.56258 5.13434 7.56258H8.46767V4.22925C8.46767 4.08758 8.5156 3.96883 8.61147 3.873C8.70735 3.77716 8.82615 3.72925 8.96787 3.72925C9.1096 3.72925 9.22833 3.77716 9.32405 3.873C9.41978 3.96883 9.46764 4.08758 9.46764 4.22925V7.56258H12.801C12.9426 7.56258 13.0614 7.61051 13.1572 7.70638C13.2531 7.80226 13.301 7.92106 13.301 8.06278C13.301 8.20451 13.2531 8.32324 13.1572 8.41896C13.0614 8.51469 12.9426 8.56255 12.801 8.56255H9.46764V11.8959C9.46764 12.0375 9.4197 12.1563 9.32384 12.2521C9.22796 12.348 9.10916 12.3959 8.96744 12.3959C8.8257 12.3959 8.70698 12.348 8.61125 12.2521C8.51553 12.1563 8.46767 12.0375 8.46767 11.8959V8.56255Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_30_5'%3E%3Crect width='16' height='16' fill='white' transform='translate(0.967651 0.0626221)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.youtube .link button:hover::after {
    width: 100%;
    z-index: -1;
}
.youtube .list {
    display: flex;
    text-align: center;
}
.youtube .list .list_g {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 20px;
}
.youtube .list .best {
    background-color: #DFF6FF;
    border-radius: 30px;
}
.youtube .list .best iframe {
    margin: 40px 35px 15px 35px;
}
.youtube .list .best h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1d1d1d;
}
.youtube .list .best span {
    display: block;
    margin-bottom: 35px;
    color: #2d2d2d;
}
.youtube .list_g .list01,
.youtube .list_g .list02,
.youtube .list_g .list03,
.youtube .list_g .list04 {
    background-color: #F4F7FC;
    border-radius: 15px;
}
.youtube .list_g .list01,
.youtube .list_g .list02 {
    margin-bottom: 20px;
}
.youtube .list_g iframe {
    margin: 20px 20px 10px 20px;
}
.youtube .list_g h3 {
    font-weight: 700;
    color: #1d1d1d;
    text-align: center;
    width: 350px;
    margin-left: 20px;
}