/* 硫붿씤鍮꾩＜�� */ #main .main-visual {background: #000; height: 100vh; position: relative;} #main .main-visual .swiper-slide {height: 100vh; position: relative; display: grid; align-items: center;} #main .main-visual .container {position: absolute; left: 150px; padding-top: 50px;} #main .main-visual .tit {position: relative; animation: fadeInUp 2s;} #main .main-visual .tit h2 {font-size: 24px; font-weight: 600; color: #fff; padding-bottom: 30px; filter: drop-shadow(0px 0px 7px rgba(0,0,0,.4));} #main .main-visual .tit h3 {color: #fff; font-size: 90px; font-family: 'master'; font-weight: normal; line-height: 1.2; letter-spacing: 0; filter: drop-shadow(0px 0px 7px rgba(0,0,0,.4));} #main .main-visual .tit .advan-list {padding-top: 30px;} #main .main-visual .tit .advan-list li {color: #ccc; font-size: 22px; line-height: 46px; filter: drop-shadow(0px 0px 7px rgba(0,0,0,.4));} #main .main-visual .tit .advan-list li.on {color: #fff; font-weight: 600; display: inline-block;} #main .main-visual .tit .advan-list li.on:before {content: ''; display: inline-block; width: 100%; padding: 0 5px; height: 15px; background: var(--maincolor); z-index: -1; margin-left: -5px; position: absolute; bottom: 3px;} #main .main-visual img {object-fit: cover; height: 100%;} #main .main-visual .swiper-pagination {bottom: 40px;} #main .main-visual .swiper-pagination-bullet {width: 10px; height: 10px; background: rgba(255,255,255,0.6); transition: 0.3s; opacity: 1; border-radius: 50px;} #main .main-visual .swiper-pagination-bullet-active {width: 30px; height: 10px; border-radius: 10px; background: #fff; border-radius: 100px;} @media all and (max-width: 1200px) { #main .main-visual .container {left: 60px;} } @media all and (max-width: 1024px) { #main .main-visual .container {padding-top: 100px;} #main .main-visual img {width: 100%;} } @media all and (max-width: 768px) { #main .main-visual, #main .main-visual .fp-tableCell {height: auto !important;} #main .main-visual .container {left: 0; padding: 80px 20px 0;} #main .main-visual .tit h2 {font-size: 19px; padding-bottom: 20px;} #main .main-visual .tit h3 {font-size: 50px; padding: 15px 30px; margin: -15px;} #main .main-visual .tit .advan-list li {font-size: 19px; line-height: 1.6; margin-bottom: 7px;} #main .main-visual .tit .advan-list li.on:before {content: none;} } /* 鍮꾨뵒�� */ #main .video {background: url('/img/main/video_bg.png') center center/cover no-repeat; position: relative; margin-bottom:-150px;} #main .video .play {display: block; margin: 0 auto; background: url('/img/main/play.png') center center no-repeat; width: 95px; height: 95px;} #main .video .play:hover {background: url('/img/main/play-on.png') center center no-repeat;} #main .video .video_modal_popup.reveal {position: absolute;} #main .video .video_modal_popup-closer {position: absolute;} #main .video .video-wrapper {position: absolute; width: 65%; padding-bottom: 35%; top: calc(50% + 50px); left: 50%; transform: translate(-50%, -50%);} @media all and (max-width: 1200px) { } @media all and (max-width: 768px) { #main .video .play {width: 65px; height: 65px; background-size: contain;} #main .video .play:hover {width: 65px; height: 65px; background-size: contain;} #main .video .video-wrapper {width: calc(100% - 40px); padding-bottom: 55%;} } /* 諛곗옱�� */ #main .paichain {background: url('/img/main/paichain-bg.jpg') center center/cover no-repeat; position: relative;} #main .paichain:after {content: ''; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); position: absolute; bottom: 0; left: 0; width: 100%; height: 13%; z-index: 1;} #main .paichain .container {max-width: 1660px; width: 100%; margin: 0 auto; padding: 20px 20px 0 20px;} #main .paichain .top {display: grid; grid-template-columns: 1.5fr auto;} #main .paichain .top .tit {display: grid; align-content: space-between;} #main .paichain .top .tit h2 {color: #f3c974; font-size: 60px; font-weight: 600; margin-right: 15px;} #main .paichain .top .tit li {color: #fff; line-height: 1.6;} #main .paichain .top .tit li b {margin-right: 10px;} #main .paichain .top .imgs ul {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px;} #main .paichain .bottom {padding-top: 95px; text-align: center;} #main .paichain .bottom ul {display: grid; grid-template-columns: repeat(3,1fr); max-width: 830px; width: 100%; margin: 0 auto; padding-right: 38px;} #main .paichain .bottom li {transition: 0.5s;} #main .paichain .bottom li h3 {font-size: 20px; font-weight: 600; color: #aaa; padding-bottom: 10px;} #main .paichain .bottom li h4 {font-family: 'Butler'; font-weight: bold; transition: 0.6s; color: transparent; font-size: 80px;} #main .paichain .bottom li h4 span {font-family: 'Butler'; color: #f3c974; font-size: 80px;} #main .paichain .bottom h5 {color: #fff; font-size: 37px; font-weight: 600; padding-top: 40px; position: relative; opacity: 0;} #main .paichain .bottom h5.on {animation: fadeInUp 2s; opacity: 1;} #main .paichain .btns {position: relative; z-index: 2; text-align: center; padding-top: 50px;} #main .paichain .btns a {display: inline-block; width: 235px; height: 46px; line-height: 46px; border-radius: 50px; background: rgba(0,0,0,0.8); font-weight: 600; color: #fff; text-align: center; margin: 0 15px;} #main .paichain .btns a:hover {background: var(--maincolor);} #main .paichain .animated-title {font-size:60px; color: rgba(255,255,255,0.2); position: relative; width: 100%; max-width:100%; height: auto; padding:60px 0; overflow-x: hidden; overflow-y: hidden; position: absolute; bottom: 10px; z-index: 2;} #main .paichain .animated-title .track {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite;} #main .paichain .animated-title .content {font-family: 'KoPubWorldBatang';} #main .paichain .hide {opacity: 0;} @keyframes fadeInUp { 0% {opacity: 0;transform: translate3d(0, 20%, 0);} to {opacity: 1; transform: translateZ(0);} } @keyframes marquee { from {transform: translateX(0);} to {transform: translateX(-50%);} } @media (hover: hover) and (min-width: 700px) { #main .paichain .animated-title .content {-webkit-transform: translateY(calc(100% - 8rem)); transform: translateY(calc(100% - 8rem)); font-family: 'KoPubWorldBatang';} } @media all and (max-width: 1200px) { #main .paichain .top {display: block;} #main .paichain .top .tit {padding-bottom: 40px;} #main .paichain .top .imgs ul {grid-gap: 20px;} #main .paichain .bottom {padding-top: 80px;} #main .paichain .animated-title .track {bottom: 20%;} } @media all and (max-width: 1024px) { #main .paichain .bottom h5 {line-height: 1.4;} #main .paichain .btns a {margin: 0; width: 232px;} } @media all and (max-width: 768px) { #main .paichain .container {padding: 80px 20px 80px 20px;} #main .paichain .top .tit h2 {font-size: 30px; padding-bottom: 20px;} #main .paichain .top .tit h2 img {height: 29px;} #main .paichain .top .tit li {font-size: 14px;} #main .paichain .top .imgs ul {grid-template-columns: repeat(2, 1fr); grid-gap: 10px;} #main .paichain .bottom {padding-top: 60px;} #main .paichain .bottom ul {grid-template-columns: repeat(2,1fr); padding-right: 0;} #main .paichain .bottom li:last-child {grid-column: span 2; padding-top: 20px;} #main .paichain .bottom li h3 {font-size: 14px; padding-bottom: 0;} #main .paichain .bottom li h4 {font-size: 45px;} #main .paichain .bottom li h4 span {font-size: 45px;} #main .paichain .bottom h5 {font-size: 22px;} #main .paichain .btns a {margin: 5px 0; width: 100%; font-size: 14px;} #main .paichain .animated-title {display: none;} } /* �꾨━移쇰━吏� */ #main .education .container {max-width: 1420px; width: 100%; margin: 0 auto; padding: 100px 0;} #main .education .tit {padding-bottom: 50px;} #main .education .tit h2 {font-size: 60px; font-weight: bold; text-align: center;} #main .education .tit h2 b {color: var(--maincolor);} #main .education .edu-slide {position: relative;} #main .education .con {display: grid; grid-template-columns: repeat(2, 1fr); padding-top: 130px;} #main .education .con .txt {position: relative;} #main .education .con {padding: 40px 100px 100px 100px; background: url('/img/main/edu-txt-bg.png') left bottom no-repeat, url('/img/main/edu-txt-bg2.png') right 50px top no-repeat;} #main .education .con .txt h3 {font-size: 36px; font-weight: 700; color: var(--maincolor); line-height: 1.3; color: #222;} #main .education .con .txt h3 b {font-size: 48px;} #main .education .con .txt h4 {font-size: 36px; font-weight: 700; padding-top: 0; color: var(--maincolor);} #main .education .con .txt p {font-weight: 400; line-height: 1.6; padding-top: 135px; font-size: 19px; letter-spacing: -1px;} #main .education .con .img {text-align: center;} /*#main .education .two .con p {padding-top: 160px;}*/ #main .education .swiper-pagination {bottom: 97px; left: 130px; width: auto; font-size: 0;} #main .education .swiper-pagination-current {font-weight: 700; font-size: 18px;} #main .education .swiper-pagination-current:after {content: ''; display: inline-block; background: #ddd; width: 1px; height: 15px; margin: 0 15px;} #main .education .swiper-pagination-total {font-size: 18px;} #main .education .swiper-button-next:after, #main .education .swiper-button-prev:after {content: none;} #main .education .swiper-button-prev {background: url('/img/main/edu-prev.png') center no-repeat; bottom: 85px; top: auto; left: 92px;} #main .education .swiper-button-next {background: url('/img/main/edu-next.png') center no-repeat; left: 191px; top: auto; bottom: 85px;} @media all and (max-width: 1200px) { #main .education .con {background: none; grid-template-columns: 1fr; padding: 0px 20px 0px 20px;} #main .education .con .img {order: 1;} #main .education .con .img img {object-fit: cover; width: 100%;} #main .education .con .txt {order: 2; padding-top: 40px;} #main .education .con .txt p {padding-top: 30px !important;} #main .education .swiper-button-prev {bottom: 0; top: auto; left: auto; right: 124px} #main .education .swiper-button-next {left: auto; top: auto; bottom: 0; right: 20px;} #main .education .swiper-pagination {bottom: 11px; left: auto; right: 59px;} } @media all and (max-width: 768px) { #main .education {height: auto !important;} #main .education .fp-tableCell {height: auto !important;} #main .education .container {padding: 80px 0;} #main .education .con {padding: 0px 20px 30px 20px;} #main .education .tit {padding-bottom: 30px;} #main .education .tit h2 {font-size: 38px;} #main .education .con .txt h3 {font-size: 28px;} #main .education .con .txt h3 b {font-size: 34px;} #main .education .con .txt h4 {font-size: 22px !important;} #main .education .swiper-slide.thr .con .txt h4 img {height: 20px;} #main .education .con .txt p {font-size: 20px;} #main .education .swiper-pagination {bottom: 0;} #main .education .swiper-pagination-current, #main .education .swiper-pagination-total {font-size: 20px;} #main .education .swiper-button-prev, #main .education .swiper-button-next {background-size: contain; height: 20px;} } /* �됱궗 �� 湲고� */ #main .gather .con {display: grid; grid-template-columns: auto 1fr; align-items: end; height: 100vh;} #main .gather .con .banner {max-width: 640px; width: 100%; height: 100%; height: calc(100vh - 100px); background: #f8f8f8;} #main .gather .con .banner .img {/* width: 100%; */height: 100%; position: relative; /* min-width: 554px; */text-align: center;} #main .gather .con .banner .img:after {content: ''; display: block; background: url('/img/main/banner-fix.png') right top/cover no-repeat; width: 423px; height: 131px; position: absolute; top: 0; right: 0;} #main .gather .con .banner .img img {object-fit: cover; height: 100%;} #main .gather .con .banner .img .txt {position: absolute; left: 0px; bottom: 0px; z-index: 1; text-align: right; width: 100%; padding: 0 40px 40px 60px; color: #fff; font-weight: 600; transition: all 0.2s;} #main .gather .con .banner .img .txt {} #main .gather .con .banner a:hover .img .txt {color: #f3c974;} #main .gather .con .event {width: 100%; height: calc(100vh - 100px); display: table;} #main .gather .con .event .wrap {padding: 0 150px 0 100px; width: 100%; height: 100%; vertical-align: middle; display: table-cell;} #main .gather .con .event .list .tit {display: grid; grid-template-columns: repeat(2,1fr); align-content: space-between; padding-bottom: 30px;} #main .gather .con .event .list .tit h2 {font-size: 40px; font-weight: 700;} #main .gather .con .event .list .tit .more {text-align: right;} #main .gather .con .event .list .tit .more a {display: inline-block; transition: all linear 0.19s; background: url('/img/main/more.png') center center no-repeat; width: 30px; height: 30px;} #main .gather .con .event .type1 ul {display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 30px;} #main .gather .con .event .type1 li .img {width: 100%; height: 100%; max-height: 130px; overflow: hidden;} #main .gather .con .event .type1 li .img img {object-fit: cover; width: 100%; transition: all 0.19s;} #main .gather .con .event .type1 li p {font-size: 16px; font-weight: 400; padding-top: 15px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: auto;} #main .gather .con .event .type1 li:hover img {transform: scale(1.1);} #main .gather .con .event .type1 li:hover p {color: var(--maincolor);} #main .gather .con .event .type2 {padding-top: 40px;} #main .gather .con .event .type2 .tit {padding-bottom: 10px;} #main .gather .con .event .type2 li {border-bottom: 1px solid #ddd; line-height: 75px; padding-left: 5px;} #main .gather .con .event .type2 li h3 {font-weight: 400; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; height: auto; font-size: 18px;} #main .gather .con .event .type2 li h3:before {content: ''; display: inline-block; width: 5px; height: 5px; background: var(--maincolor); margin-right: 10px; margin-bottom: 5px;} #main .gather .con .event .type2 li h3 b {color: var(--maincolor); font-weight: 700; margin-right: 30px;} #main .gather .con .event .type2 li:hover h3 {opacity: 0.7;} #main .gather .con .event .btns {padding-top: 40px;} #main .gather .con .event .btns ul {display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px;} #main .gather .con .event .btns li a {display: block; width: 100%; line-height: 46px; background: #fff url('/img/main/btn-arrow.png') right 30px center no-repeat; border: 1px solid #222; padding: 0 30px; border-radius: 50px;} #main .gather .con .event .btns li a:hover {background: var(--maincolor) url('/img/main/btn-arrow-on.png') right 30px center no-repeat; color: #fff; border: 1px solid var(--maincolor);} @media (max-width: 1280px) { #main .gather .con .event .wrap { padding: 0 150px 0 60px; } #main .gather .con .event .list .tit h2 {font-size: 30px;} #main .gather .con .event .btns ul {gap: 10px;} } @media all and (max-width: 1200px) { #main .gather {padding-top:100px;} #main .gather .con {grid-template-columns: 1fr; align-items: baseline;} #main .gather .con .banner {height: auto; padding: 0 20px; text-align: center; background: #fff; max-width: 100%;} #main .gather .con .banner .img {background: #f8f8f8;} #main .gather .con .banner .img img {object-fit: none; height: auto;} #main .gather .con .banner .img .txt a {color: #999;} #main .gather .con .event {display: block; padding-top: 40px;} #main .gather .con .event .wrap {padding: 0 20px; display: block;} } @media all and (max-width: 1024px) { #main .gather .con .event .btns ul {grid-gap: 20px;} } @media all and (max-width: 768px) { #main .gather {padding: 0 0 80px; height: auto !important;} #main .gather .fp-tableCell {height: auto !important;} #main .gather .con {display: block; height: auto;} #main .gather .con .banner .img {min-width: auto;} #main .gather .con .banner .img:after {height: 17.057vw; width: 55.078vw;} #main .gather .con .banner .img img {object-fit: contain;} #main .gather .con .banner .img .txt {padding: 0 20px 20px 20px;} #main .gather .con .banner .img .txt h2 {font-size: 16px; margin-bottom: 10px;} #main .gather .con .banner .img .txt a {font-size: 14px;} #main .gather .con .event {height: 100%;} #main .gather .con .event .list .tit h2 {font-size: 25px;} #main .gather .con .event .list .tit .more a {background-size: contain; height: 22px;} #main .gather .con .event .type1 ul {grid-template-columns: repeat(2,1fr); grid-gap: 15px;} #main .gather .con .event .type1 li .img {height: 85px;} #main .gather .con .event .type1 li p {font-size: 14px; padding-top: 10px;} #main .gather .con .event .type2 li {line-height: 55px;} #main .gather .con .event .type2 li h3 {font-size: 14px;} #main .gather .con .event .type2 li h3:before {margin-bottom: 3px; width: 3px; height: 3px;} #main .gather .con .event .type2 li h3 b {margin-right: 10px;} #main .gather .con .event .btns ul {grid-template-columns: repeat(2,1fr); grid-gap: 10px;} #main .gather .con .event .btns li a {background: #fff url('/img/main/btn-arrow.png') right 20px center/6px no-repeat; padding: 0 20px; font-size: 14px; line-height: 40px;} } /* �댁뒪 */ #main .news {background: url('/img/main/news-bg.jpg') center/cover no-repeat;} #main .news .container {max-width: 1660px; width: 100%; margin: 0 auto; padding: 100px 20px 0;} #main .news .tit {display: grid; grid-template-columns: auto 1fr; align-items: end; margin-bottom: 50px;} #main .news .tit h2 {color: #fff; font-size: 60px; font-weight: 700; display: inline-block; line-height: 1;} #main .news .tit .tab-wrap {display: inline-block; padding-left: 70px;} #main .news .tit .tab {display: inline-block;} #main .news .tit .tab li {display: inline-block; color: #fff; font-weight: 600; border-bottom: transparent; margin: 0 30px; cursor: pointer;} #main .news .tit .tab li.on {color: var(--maincolor); border-bottom: 2px solid var(--maincolor); padding-bottom: 5px;} #main .news .tit .tab li:hover {color: var(--maincolor); border-bottom: 2px solid var(--maincolor); padding-bottom: 5px;} #main .news .news-con {display: none;} #main .news .news-con ul {display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 30px;} #main .news .news-con li.in-none {opacity: 0;} #main .news .news-con li a {display: grid; align-content: space-between; padding: 40px;width: 100%; height: 250px; background: #fff;} #main .news .news-con li a:hover {background: var(--maincolor);} #main .news .news-con li .top .division span {background: var(--maincolor); padding: 5px 15px; color: #fff; font-size: 16px;} #main .news .news-con li:hover .division span {color: var(--maincolor); background: #fff;} #main .news .news-con li .top h3 {font-weight: 600; line-height: 1.4; padding-top: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: auto;} #main .news .news-con li:hover h3 {color: #fff;} #main .news .news-con li p {font-size: 14px; font-weight: 400; color: #666;} #main .news .news-con li:hover p {color: #fff;} #main .news .news-con.on {display: block;} @media all and (max-width: 1200px) { #main .news {margin-top: 64vw;} #main .news .container {padding: 100px 20px;} #main .news .tit .tab-wrap {padding-left: 0; text-align: right;} #main .news .news-con ul {grid-template-columns: repeat(2,1fr);} } @media all and (max-width: 1024px) { #main .news {margin-top: 115vh;} #main .news .tit .tab li {margin: 0 13px;} } @media all and (max-width: 768px) { #main .news {margin-top: 0; height: auto !important;} #main .news .fp-tableCell {height: auto !important;} #main .news .container {padding: 80px 20px;} #main .news .tit {margin-bottom: 50px; display: block;} #main .news .tit h2 {font-size: 30px;} #main .news .tit .tab-wrap {padding: 20px 0 0;} #main .news .tit .tab li {font-size: 14px; margin: 0 6px;} #main .news .news-con ul {grid-template-columns: repeat(1,1fr); grid-gap: 15px;} #main .news .news-con li a {padding: 20px; height: 160px;} #main .news .news-con li .top .division span {font-size: 14px;} #main .news .news-con li .top h3 {font-size: 16px;} #main .news .news-con li:nth-child(5), #main .news .news-con li:nth-child(6), #main .news .news-con li:nth-child(7), #main .news .news-con li:nth-child(8) {display: none;} } @media all and (max-width: 320px) { #main .news .tit .tab li {font-size: 12px; margin: 0 5px;} } .reserv {display: block; width: 150px; height: 45px; line-height: 45px; border-radius: 50px; background: rgba(0,0,0,0.8); font-weight: 400; color: #fff !important; text-align: center; font-size:1rem;} .reserv:hover {background: var(--maincolor); color: #fff !important;} @media (max-width: 768px){ .reserv {margin: 5px 0; width: 100%; font-size: 14px;} } @media (max-width: 1024px){ .reserv {margin: 0; width: 232px;} } /* Wizard Reset */ ._objHtml, ._objWidget{overflow:visible} ._contentBuilder ._obj ._relative{position:relative} .simplemodal-wrap{font-size:13px} .hidden{position:absolute;top:-9999px;left:-9999px;} /* Clear Fix */ .clearfix, .clear-fix {zoom: 1;} .clearfix::after, .clear-fix::after {content: ""; display: block; clear: both;} /* 공지사항 */ #multipleContentsDiv_hufs_734 {overflow: hidden; max-width: 1600px;} #menu11101_obj721 {position: relative; left: -50px; padding-right: 110px; opacity: 0;} #menu11101_obj722 {position: relative; right: -50px; padding-left: 110px; opacity: 0;} #multipleContentsDiv_hufs_633 {width: 100%; height: 100%; margin: 0px auto;} #multipleDiv_hufs_633 {height:auto;} .hidden {position: absolute; top: -9999px; left: -9999px;} .fp-tableCell > div {text-align: left;} @media all and (min-width: 1400px) { .fp-tableCell > div.multipleContentsDiv {height: auto !important; padding-top: 100px;} } #_contentBuilder ._fnctWrap {height: 100%;} ._fnctWrap {line-height: 1.5;} .wrap-today {overflow: hidden;} ._fnctWrap {line-height: 1.5;} ._fnctWrap {position: relative; line-height: 2;} #menu11101_obj660 {width: auto; height: auto; margin: 0px;} .container {max-width: 1600px; margin: 0 auto;} .check .wrap-notice, .edit .wrap-notice {margin: 90px 0 100px 0;} .wrap-notice {position: relative; min-height: 673px; text-align: center;} .wrap-notice .title {position: relative; display: inline-block; text-align: center;} .wrap-notice .title .btn-notice {position: relative; padding: 0 40px; font-family: 'Noto Bold'; font-size: 38px; line-height: 1; color: #212121;} .wrap-notice .title .btn-notice:hover, .wrap-notice .title .btn-notice.on {color: #e63b53;} .wrap-notice .title::after {content: ''; position: absolute; right: -4px; top: 18px; width: 7px; height: 7px; background: #7f7f7f; border-radius: 100%;} .wrap-notice .title.last::after {display: none;} .wrap-notice .list {display: none; position: absolute; left: 0; top: 103px; width: 100%; text-align: left;} .wrap-notice .list.on {display: block;} .wrap-notice .list ul {padding-bottom: 5px; border-top: 1px solid #000; border-bottom: 1px solid #000;} .wrap-notice .list .first {border-bottom: 1px solid #e7e7e7;} .wrap-notice .list .first .box {display: block;} .wrap-notice .list .first .subject {overflow: hidden; display: -webkit-box; margin-bottom: 13px; font-family: 'Noto Medium'; font-size: 25px; line-height: 1.1; color: #323232; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .wrap-notice .list .first .box:hover .subject {color: #008395;} .wrap-notice .list .first .subject span {position: relative;} .wrap-notice .list .first .subject span::after {content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #77afba; transition: width .5s;} .wrap-notice .list .first .box:hover .subject span::after {width: 100%;} .wrap-notice .list .first .con {overflow: hidden; display: -webkit-box; margin-bottom: 10px; font-family: 'Noto Light'; font-size: 17px; color: #565656; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .wrap-notice .list .first .date {font-family: 'Play Regular'; font-size: 16px; color: #666;} .wrap-notice .list li {display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding: 0 30px;} .wrap-notice .list li.first {display: block; margin-bottom: 24px; padding: 20px 30px 15px 30px;} .wrap-notice .list li.nodata {display: block; width: 100%; margin-bottom: 0; padding: 200px 0; text-align: center;} .wrap-notice .list .sub-subject {overflow: hidden; display: -webkit-box; flex: 1; font-family: 'Noto Regular'; font-size: 18px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color: #323232;} .wrap-notice .list .sub-subject:hover {color: #008395;} .wrap-notice .list .sub-subject span {position: relative; background: linear-gradient(to bottom, transparent 96%, #77afba 0) left center no-repeat; background-size: 0; transition: .5s;} .wrap-notice .list .sub-subject:hover span{background-size: 100% auto;} .wrap-notice .list .sub-date {width: 125px; font-family: 'Play Regular'; font-size: 16px; text-align: right; color: #666;} .wrap-notice .list .more {text-align: center;} .wrap-notice .list .more a {display: inline-block; width: 100%; max-width: 210px; height: 60px; margin-top: 45px; background: #fff; border: 1px solid #152c46; font-family: 'Play Bold'; font-size: 15px; line-height: 60px; color: #152c46;} .wrap-notice .list .more a:hover {background: #00284a; border: 1px solid #00284a; color: #fff;} .wrap-notice .list::after {content: ''; position: absolute; right: -110px; top: 0; width: 1px; height: 100%; width: 1px; height: 100%; background: #ccc;} #menu11101_obj722 .wrap-notice .list::after {display: none;} @media all and (max-width: 1620px) { #multipleContentsDiv_hufs_734 {padding: 0 40px;} #menu11101_obj721 {padding-right: 70px;} #menu11101_obj722 {padding-left: 70px;} .wrap-notice .list::after {right: -70px;} } @media all and (max-width: 1450px) { .wrap-notice {min-height: 496px;} #menu11101_obj721 {padding-right: 50px;} #menu11101_obj722 {padding-left: 50px;} .check .wrap-notice, .edit .wrap-notice {margin: 50px 0;} .wrap-notice .title::after {top: 13px;} .wrap-notice .title .btn-notice {padding: 0 30px; font-size: 30px;} .wrap-notice .list {top: 60px;} .wrap-notice .list::after {right: -50px;} .wrap-notice .list li.first {margin-bottom: 16px; padding: 16px 0 12px 0;} .wrap-notice .list li.nodata {padding: 160px 0;} .wrap-notice .list .first .subject {margin-bottom: 10px; font-size: 19px;} .wrap-notice .list .first .con {margin-bottom: -3px; font-size: 16px;} .wrap-notice .list .first .date {font-size: 13px;} .wrap-notice .list li {margin-bottom: 10px; padding: 0 0;} .wrap-notice .list .sub-subject {font-size: 16px;} .wrap-notice .list .sub-date {font-size: 16px;} .wrap-notice .list .more a {max-width: 140px; height: 50px; margin-top: 30px; font-size: 15px; line-height: 50px;} } @media all and (max-width: 1400px) { #menu11101_obj721 {left: 0; opacity: 1;} #menu11101_obj722 {right: 0; opacity: 1;} } @media all and (max-width: 1000px) { .wrap-notice {min-height: 446px;} #menu11101_obj721 {padding-right: 40px;} #menu11101_obj722 {padding-left: 40px;} .wrap-notice {margin: 40px 0;} .wrap-notice .title::after {top: 10px;} .wrap-notice .title .btn-notice {font-size: 25px;} .wrap-notice .list::after {right: -40px;} .wrap-notice .list .first .subject {font-size: 16px;} .wrap-notice .list .first .con {font-size: 13px;} .wrap-notice .list .first .date {font-size: 11px;} .wrap-notice .list .sub-subject {font-size: 13px;} .wrap-notice .list .sub-date {font-size: 11px;} .wrap-notice .list .more a {height: 40px; font-size: 12px; line-height: 40px;} .wrap-notice .list li.nodata {padding: 143px 0;} } @media all and (max-width: 820px) { .wrap-notice .title::after {top: 7px;} .wrap-notice .title .btn-notice {padding: 0 15px; font-size: 22px;} } @media all and (max-width: 660px) { #multipleContentsDiv_hufs_734 {padding: 0 30px;} #menu11101_obj721 {padding-right: 0; border-bottom: 1px solid #ccc;} #menu11101_obj722 {padding-left: 0;} .check .wrap-notice, .edit .wrap-notice {min-height: 436px; margin: 30px 0;} .wrap-notice .list {top: 50px;} .wrap-notice .list::after {display: none;} .wrap-notice .title::after {top: 10px;} .wrap-notice .title .btn-notice {padding: 0 30px; font-size: 25px;} } /* Today */ #multipleDiv_hufs_633 {background: #f8f8f7;} .check .wrap-today, .edit .wrap-today {padding: 94px 0 90px 0;} .wrap-today {overflow: hidden;} .wrap-today .container {position: relative;} .wrap-today .title {position: relative; left: -50px; text-align: center; opacity: 0;} .wrap-today .title .small {font-family: 'Pretendard', sans-serif; font-size: 24px; color: #333;} .wrap-today .title .big {margin-top: 8px; font-family: 'Pretendard', sans-serif; font-size: 80px; line-height: 1; color: #000;} .wrap-today .title .big em {font-family: 'Pretendard', sans-serif; font-size: 70px; color: #008395;} .wrap-today .control {position: absolute; right: -50px; top: 93px; opacity: 0;} .wrap-today .control .state {/*display: inline-block;*/ display: none; font-size: 0;} .wrap-today .control .state .now {position: relative; font-family: 'Play Bold'; font-size: 80px; line-height: 1; color: #c4b7af;} .wrap-today .control .state .now::before {content: '0';} .wrap-today .control .state .slash {margin: 0 7px 0 0; font-family: 'Play Bold'; font-size: 30px; color: #9c9c9c;} .wrap-today .control .state .total {font-family: 'Play Bold'; font-size: 30px; color: #9c9c9c;} .wrap-today .control .state .total::before {content: '0';} .wrap-today .control .button {position: relative; z-index: 50; display: inline-block; margin-left: 75px;} .wrap-today .control .button button {width: 40px; height: 15px; text-indent: -999999px;} .wrap-today .control .button .prev {background: url('/images/main/btn-today-prev.png') no-repeat center;} .wrap-today .control .button .prev:hover {background: url('/images/main/btn-today-prev-on.png') no-repeat center;} .wrap-today .control .button .next {margin-left: 20px; background: url('/images/main/btn-today-next.png') no-repeat center;} .wrap-today .control .button .next:hover {background: url('/images/main/btn-today-next-on.png') no-repeat center;} .wrap-today .control .button .stop, .wrap-today .control .button .play {display: none; width: 9px; height: 16px; margin-left: 20px;} .wrap-today .control .button .stop.on, .wrap-today .control .button .play.on {display: inline-block} .wrap-today .control .button .stop {background: url('/images/main/btn-today-stop.png') no-repeat center bottom;} .wrap-today .control .button .play {background: url('/images/main/btn-today-play.png') no-repeat center bottom;} .wrap-today .control .button .more { font-weight: 200; color: #ccc; font-size: 0; background: url(/images/main/btn-latest-more.png)center center no-repeat; background-size: 25px 25px; width: 40px; height: 40px; display: inline-block; border: 1px solid #f8f8f7; line-height: 50px; margin-left: 10px!important;} .wrap-today .control .button .more:hover{ font-weight: 200; color: #ccc; font-size: 0; background: url(/images/main/btn-latest-more.png)center center no-repeat; background-size: 25px 25px; width: 40px; height: 40px; display: inline-block; border: 1px solid #959393; line-height: 50px; margin-left: 10px!important;border-radius:50%;} .wrap-today .list {margin-top: 5px;} .wrap-today .list ul {display: inline-block; width: 100%; font-size: 0;} .wrap-today .list li {float: left; width: 33.333%; } .wrap-today .list li a {display: block; position: relative; top: 50px; opacity: 0;} .wrap-today .list .text strong {overflow: hidden; display: -webkit-box; margin-top: 38px; font-family: 'Noto Medium'; font-size: 25px; line-height: 1.25; color: #000; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .5s;} .wrap-today .list a:hover .text strong {color: #008395;} .wrap-today .list .text p {overflow: hidden; display: -webkit-box; margin-top: 16px; font-family: 'Noto Light'; font-size: 18px; color: #333; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .wrap-today .slider .slick-slide {margin: 0 62.5px;} .wrap-today .slider .slick-list {margin: 0 -62.5px; padding-top: 30px;} .wrap-today .slider li a {outline: none;} .wrap-today .slider li a:focus-visible::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #000;} .wrap-today .slider .thumb {position: relative; overflow: hidden; display: flex !important; justify-content: center; align-items: center; height: 350px; text-align: center; transition: box-shadow .5s;} .wrap-today .slider .thumb img {width: auto; max-width: none; height: 120% } .wrap-today .slider a:hover .thumb {box-shadow: 1px 1px 13px rgba(0,0,0,.2);} @media all and (max-width: 1620px) { .wrap-today .control {right: 40px !important;} } @media all and (max-width: 1450px) { .check .wrap-today, .edit .wrap-today {padding: 50px 0;} .wrap-today .title .small {font-size: 18px;} .wrap-today .title .big {font-size: 60px;} .wrap-today .title .big em {font-size: 55px;} .wrap-today .control {top: 66px;} .wrap-today .control .button {margin-left: 40px;} .wrap-today .control .state .now {font-size: 60px;} .wrap-today .control .state .total {font-size: 20px;} .wrap-today .list .text strong {margin-top: 25px; font-size: 19px;} .wrap-today .list .text p {margin-top: 10px; font-size: 16px;} .wrap-today .slider .slick-slide {margin: 0 20px;} .wrap-today .slider .slick-list {margin: 0 -20px; padding-top: 28px;} .wrap-today .slider .thumb {height: 280px;} .wrap-today .slider .thumb img {height: 120%;} } @media all and (max-width: 1440px) { .wrap-today .slider .slick-slide {margin: 0 40px;} .wrap-today .slider .slick-list {margin: 0 -40px;} } @media all and (max-width: 1400px) { .wrap-today .title {left: 0; opacity: 1;} .wrap-today .control {right: 0; opacity: 1;} .wrap-today .list li a {top: 0; opacity: 1;} } @media all and (max-width: 1000px) { .check .wrap-today, .edit .wrap-today {padding: 40px 0 23px 0;} .wrap-today .title .small {font-size: 16px;} .wrap-today .title .big {font-size: 50px;} .wrap-today .title .big em {font-size: 45px;} .wrap-today .control {top: 54px;} .wrap-today .list .text strong {font-size: 16px;} .wrap-today .list .text p {margin-top: 10px; font-size: 13px;} .wrap-today .slider .slick-slide {margin: 0 10px;} .wrap-today .slider .slick-list {margin: 0 -10px;} .wrap-today .slider .thumb {height: 230px;} } @media all and (max-width: 660px) { #multipleDiv_hufs_633 {margin-top: -1px;} .check .wrap-today, .edit .wrap-today {padding: 26px 0 23px 0;} .wrap-today .title {text-align: left;} .wrap-today .title .big {margin-top: 1px; font-size: 30px;} .wrap-today .title .big em {font-size: 30px;} .wrap-today .control {right: 30px !important; top: 28px;} .wrap-today .control .state .now {font-size: 20px;} .wrap-today .control .state .slash {font-size: 20px;} .wrap-today .control .button {margin-left: 24px;} .wrap-today .control .button button {width: 32px;} .wrap-today .control .button .prev {background-position: left center !important;} .wrap-today .control .button .next {margin-left: 10px; background-position: right center !important;} .wrap-today .control .button .stop, .wrap-today .control .button .play {margin-left: 10px;} .wrap-today .list ul {width: 140%;} .wrap-today .list .text strong {height: 39px;} .wrap-today .slider .slick-list {padding-top: 15px;} .wrap-today .slider .thumb img {height: 145%;} } @media all and (max-width: 550px) { .wrap-today .slider .thumb img {height: 115%;} } /* footer */ .footer{position:relative;z-index:10;height:auto;background:#121212;color:#999;font-size:16px;font-weight:400; margin-top:150px;} .footer div, .footer ul, .footer li, .footer p, .footer dd, .footer dt{color:#999} .footer a:hover{opacity:0.8} .footer .inner{max-width:1400px;margin:0 auto} .footer .footer_top{display:flex;justify-content:space-between;align-items:center;padding:40px 0;border-bottom:1px solid #2D3234} .footer .terms, .footer .family_gp{border-left:1px solid rgba(255,255,255,0.12)} .footer .service{display:flex;padding-right:50px} .footer .terms{padding-left:50px} .footer .family_gp{padding-left:50px} .footer .remote{padding-left:90px} .footer .remote .tit{font-size:18px;color:#fff} .footer .remote .btn01{margin:10px 0 20px;border:1px solid #FFD723;background:none;color:#FFD723;font-size:14px} .footer .remote .btn01 span{display:inline-block;padding-right:14px;background:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/footer_remote_btn_ic.png) no-repeat 100% 50%} .footer .terms{display:flex;flex-wrap:wrap;flex-direction:column;height:164px;} .footer .terms a{font-size:16px} .footer .terms a strong{font-weight:400;color:#fff} .footer .terms > li{margin-bottom:12px;margin-right:60px} .footer .terms > li:nth-child(5n){margin-bottom:0} .footer .terms .str{border-bottom:1px solid #FFD723;color:#FFD723} .footer .footer_sns{display:flex;align-items:center;} .footer .footer_sns a{display:block;overflow:hidden;width:36px;height:36px;border-radius:50%;background:no-repeat 50% 50%} .footer .footer_sns > li + li{margin-left:15px} .footer .footer_sns .instar{background-image:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/footer_sns_instar.png)} .footer .footer_sns .facebook{background-image:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/footer_sns_facebook.png)} .footer .footer_sns .blog{background-image:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/footer_sns_blog.png)} .footer .footer_sns .post{background-image:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/footer_sns_post.png)} .footer .call dl{color:#fff} .footer .call dt{font-weight:400;font-size:18px} .footer .call dd{margin-top:15px;font-weight:700;font-family:'Montserrat';font-size:26px} .footer .call p{margin-top:20px} .footer .footer_bottom{display:flex;align-items:flex-start;justify-content:space-between;padding:40px 0 80px} .footer .addr{padding-left:160px;font-size:15px;line-height:1.8;background:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/footer_logo.png) no-repeat 0 50%} .footer .addr span{display:inline-block;margin-right:12px} .footer .addr a{text-decoration:underline} .footer .addr .copy{margin-top:20px} .footer .family_select{position:relative;width:100%;} .footer .family_select + .family_select{margin-top:4px;} .footer .family_select .accd_head a{display:flex;align-items:center;position:relative;width:100%;height:52px;border:1px solid #555;border-radius:3px;padding:0 20px;padding-right:60px;color:#fff;} .footer .family_select .accd_head a::before{content:'';display:block;position:absolute;top:50%;right:20px;width:13px;height:7px;margin-top:-3px;background:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/family_select_arrow.png) no-repeat 50% 50%;transition:transform 0.3s} .footer .family_select .accd_cont{max-height:500px;overflow:auto;top:auto;bottom:54px;border:1px solid #bbb;border-radius:3px;background:#fff} .footer .family_select .accd_cont li + li{border-top:1px solid #ddd} .footer .family_select .accd_cont a{display:block;height:50px;padding:13px 20px;font-size:16px;color:#666} .footer .family_select .accd_cont a:hover{background:#FFD723;color:#111;opacity:1} .footer .family_select.active .accd_head a{border-color:#FFD723;color:#FFD723} .footer .family_select.active .accd_head a::before{transform:rotate(180deg);background-image:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/family_select_arrow_on.png)} .side-menu-wrap .sub_right{width:64px;z-index:50} .side-menu-wrap .sub_right > li > a{width:64px;height:64px;padding:8px 0;border-radius:50%;margin:15px 0;background:no-repeat 50% 50%} .side-menu-wrap .sub_right > li > a > span{display:inline-block;} .side-menu-wrap .sub_right .print{display:none} .side-menu-wrap .sub_right .kakao > a{background:#ffd225 url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/sns_kakao.png) 50% 50% no-repeat;} .side-menu-wrap .sub_right .kakao img{opacity:0} .side-menu-wrap .sub_right .sns > a{background-color:#fff;background-image:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/sns_share.png);box-shadow:0px 5px 10px #0400001a} .side-menu-wrap .sub_right .top > a{background:#282A2C;color:#fff;font-size:14px;font-family:'Montserrat', 'Noto Sans Kr';text-align:center} .side-menu-wrap .sub_right .top > a span{padding-top:28px;background:no-repeat 50% 5px url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/top_arrow.png);font-weight:500;line-height:1} .sub_right .share-list{width:auto;height:auto;padding:15px 30px;padding-right:15px;border:0;border-radius:50px;box-shadow:0 0 10px 5px rgba(0,0,0,0.05)} .sub_right .share-list li{margin:0} .sub_right .share-list li + li{margin-left:15px} .sub_right .share-list li:nth-child(4){margin-right:0} .sub_right .share-list a{width:42px;height:42px;border-radius:50%;} .sub_right .share-list a img{display:none} .sub_right .share-list a{box-shadow:none} .sub_right .share-list .facebook{background:#1773EA no-repeat 50% 50% url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/sns_facebook.png)} .sub_right .share-list .naverblog{background:#00C73C no-repeat 50% 50% url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/sns_blog.png)} .sub_right .share-list .kakaostory{background:#FAE300 no-repeat 50% 50% url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/sns_kakaostory.png)} .sub_right .share-list .link-copy-box a{background:#999 no-repeat 50% 50% url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/link_copy.png)} .sub_right .share-list .share-close-btn{background:#fff no-repeat 50% 50% url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/sns_close_ic.png)} .sub_right .kakao_open{position:absolute;top:0;right:0;z-index:1;overflow:hidden;width:320px;padding:15px 30px;border-radius:10px;background:#FAE300;visibility:hidden;opacity:0;transform:translateX(50%);transition:0.3s} .sub_right .kakao_open.on{transform:translateX(0);visibility:visible;opacity:1} .sub_right .kakao_open a{margin:0;box-shadow:none} .sub_right .kakao_open .kakao_close{position:display:block;position:absolute;top:5px;right:5px;width:50px;height:50px;background:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/sns_close_ic.png) no-repeat 50% 50%} .kakao_open .tit{padding:10px 0 20px;padding-left:50px;font-weight:600;color:#391B1B;font-size:20px;background:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/kakao_box_tit.png) no-repeat 0 50%} .kakao_open .kakao_list a{display:block;padding:12px 0;padding-right:20px;font-size:16px;color:#391B1B;font-weight:400;background:url(https://home.sjcu.ac.kr/_res/sjcu/ko/img/common/kakao_go_ic.png) no-repeat 100% 50%} .kakao_open .kakao_list a:hover{font-weight:500} .kakao_open .kakao_list li + li{border-top:1px solid #D5C100}