@charset "UTF-8";
/*-------------------------------------------------
title       : 메인
Author      : ㅈㅁㅈ
Create date : 2019-08-05
-------------------------------------------------*/
body { color: #767676; }

.visual { position: relative; z-index: 0; height: 35.5rem; /* padding-left: 4.25rem;  */}

.visual .group { width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; position: relative; height: 100%; }

.visual .list { position: absolute; left: 4.25rem; top: 0; z-index: -1; width: calc(100% - 4.25rem); height: 100%; }

.visual .list::before { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background: url("/ipsi/img/main/bg_visual.png"); content: ''; opacity: 0.3; }

.visual .list::after { background: #000; background: -webkit-gradient(linear, left top, right top, from(#000), to(rgba(0, 0, 0, 0))); background: linear-gradient(to right, #000, rgba(0, 0, 0, 0)); position: absolute; left: 0; top: 0; z-index: 0; width: 50%; height: 100%; content: ''; opacity: 0.35; }

.visual .list .txt { font-size: 0.55rem; position: absolute; left: -19.85rem; top: 50%; width: 35.4rem; height: 4.25rem; margin-top: -2.15rem; font-weight: 400; color: #7d7d7d; text-align: center; line-height: 4.25rem; letter-spacing: 0.5rem; white-space: nowrap; -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.visual .list .txt span { color: #9c1c2b; }

.visual .list .bx-wrapper, .visual .list .bx-viewport, .visual .list ul, .visual .list li { height: 100% !important; opacity: 1; }

.visual .list .bx-wrapper { overflow: hidden; }

.visual .list li { display: block !important; opacity: 0; -webkit-transition: all 0s; transition: all 0s; }

.visual .list li::before, .visual .list li::after, .visual .list li div::before, .visual .list li div::after, .visual .list li p::before, .visual .list li p::after, .visual .list li span::before, .visual .list li span::after { position: absolute; left: 0; top: 0; z-index: 1; width: 12.5%; height: 100%; background-color: #fff; content: ''; -webkit-transition: all 0.3s 0.3s; transition: all 0.3s 0.3s; }

.visual .list li::after { left: 12.5%; }

.visual .list li div::before { left: 25%; }

.visual .list li div::after { left: 37.5%; }

.visual .list li p::before { left: 50%; }

.visual .list li p::after { left: 62.5%; }

.visual .list li span::before { left: 75%; }

.visual .list li span::after { left: 87.5%; }

.visual .list li img { z-index: -1; -webkit-transform: scale(1.1) translate(-50%, -45%); transform: scale(1.1) translate(-50%, -45%); }

.visual .list li.active { opacity: 1; -webkit-transition: all 0s; transition: all 0s; }

.visual .list li.active img { -webkit-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); -webkit-transition: all 35s 0.2s; transition: all 35s 0.2s; }

.visual .list li.active::before, .visual .list li.active::after, .visual .list li.active div::before, .visual .list li.active div::after, .visual .list li.active p::before, .visual .list li.active p::after, .visual .list li.active span::before, .visual .list li.active span::after { width: 0; }

.visual .list iframe, .visual .list img, .visual .list video { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; min-width: 100%; max-width: inherit; min-height: 100%; }

.visual .list iframe, .visual .list video { z-index: 2; }

.visual .list .bx-wrapper .bx-controls-direction a { left: 2.5rem; width: 2.2rem; height: 2.2rem; margin-top: -1.1rem; background: none; border-bottom: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.2s; transition: all 0.2s; }

.visual .list .bx-wrapper .bx-controls-direction a.bx-next { left: auto; right: 2.5rem; border: 0 none; border-top: 1px solid #fff; border-right: 1px solid #fff; }

.visual .slogan { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; left: 0; bottom: 0; width: 100%; height: 4rem; /* margin-left: -2.125rem;  */ background-color: rgba(156, 28, 43, 0.95); font-family: "Noto Sans KR"; font-weight: 500; color: #fff; text-align: center; line-height: 4rem; }

.visual .slogan br { display: none; }

.visual .slogan .btn { height: 1.9rem; border: 2px solid #ffea8a; line-height: 1.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; display: inline-block; min-width: 6.5rem !important; padding: 0 1rem !important; background-color: transparent; color: #ffea8a !important; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; position: relative; top: -1px; margin-left: 0.15rem; border-radius: 2rem; font-weight: 400; letter-spacing: -0.1rem; line-height: 1.65rem; }

.visual .slogan .btn:hover, .visual .slogan .btn:focus { background-color: #fff; color: #ffea8a; }

.visual .slogan .btn:hover, .visual .slogan .btn:focus { background-color: #ffea8a !important; color: #333 !important; }

.visual .slogan .bx-wrapper { padding-right: 3.75rem; }

.visual .slogan .bx-controls-direction { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 1.3rem; width: 1.3rem; height: 2rem; line-height: 1rem; }

.visual .slogan .bx-controls-direction a { display: block !important; overflow: hidden; position: static; height: 50%; margin: 0; background: none; }

.visual .slogan .bx-controls-direction a::before { font-size: 1.15rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #fff; content: ''; text-indent: 0; line-height: inherit; }

.visual .slogan .bx-controls-direction a.bx-next { border-top: 1px solid rgba(255, 255, 255, 0.5); line-height: 1.25rem; }

.visual .slogan .bx-controls-direction a.bx-next::before { content: ''; }

.visual .link { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); overflow: hidden; position: absolute; right: 0; width: 16.5rem; height: 14rem; margin-top: -2rem; }

.visual .link li { display: table; overflow: hidden; float: left; width: calc(50% - 3px); height: calc(50% - 1.5px); margin-left: 3px; table-layout: fixed; }

.visual .link li:nth-child(n + 3) { margin-top: 3px; }

.visual .link li:nth-child(2) a, .visual .link li:nth-child(3) a { background-color: #162b48; }

.visual .link a { font-size: 0.9rem; display: table-cell; overflow: hidden; position: relative; height: 100%; background-color: #1a3759; font-weight: 400; color: #fff; letter-spacing: -0.05rem; text-align: center; vertical-align: middle; word-break: keep-all; }

.visual .link a::before { position: absolute; left: 0; top: -20rem; width: 200%; height: 10rem; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(#fff), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)); content: ''; -webkit-transform: rotate(40deg); transform: rotate(40deg); opacity: 0.1; -webkit-transition: all 0.5s; transition: all 0.5s; }

.visual .link a:hover::before, .visual .link a:focus::before, .visual .link a:active::before { top: 10rem; left: -5rem; }

.visual .link a:hover .btn, .visual .link a:focus .btn, .visual .link a:active .btn { opacity: 1; }

.visual .link .txt { font-size: 0.8rem; line-height: 1.4375; display: block; margin-bottom: 0.5rem; color: #c3a988; word-break: keep-all; }

.visual .link .btn { height: 1.4rem; border: 1px solid #fff; line-height: 1.3rem; font-size: 0.75rem; display: inline-block; border-radius: 1.5rem; padding: 0 0.5rem; color: #fff; opacity: 0.7; -webkit-transition: all 0.2s; transition: all 0.2s; }

.visual .link .icon { display: block; width: 2rem; margin: 0 auto 0.5rem; }

.visual .desc { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0; color: #fff; margin-top: -2rem; word-break: keep-all; }

.visual .desc .img { display: block; overflow: hidden; width: 15rem; margin-bottom: 0.5rem; }

.visual .desc .txt { font-size: 1.5rem; text-shadow: 1px 1px 0.25rem rgba(0, 0, 0, 0.5); letter-spacing: -0.05rem; line-height: 1.2; }

.visual .desc .txt strong { font-weight: 600; }

.visual .desc .txt br { display: none; }

.visual .desc .txt.txt2 { font-size: 2.5rem; }

.visual .desc .btn { display: block; margin-top: 1.5rem; font-weight: 600; }

.visual .desc .btn::before { font-size: 2rem; display: inline-block; position: relative; top: 2px; margin-right: 0.25rem; font-family: "xeicon"; font-weight: 400; content: ''; vertical-align: middle; }

#MainContents { width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; margin-top: 3.5rem; }

#MainContents .ConTop { display: inline-block; width: 100%; margin-bottom: 2rem; }

.latest { float: left; position: relative; width: 60%; height: 19.75rem; margin-bottom: 3.5rem; }

.latest::after { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 2.85rem; border: 1px solid #ddd; border-bottom: 1px solid #b2b2b2; content: ''; }

.latest .group { float: left; }

.latest .group + .group .title::before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0; z-index: -2; width: 1px; height: 0.6rem; background-color: #ddd; content: ''; }

.latest .title { float: left; position: relative; }

.latest .title a { font-size: 0.9rem; float: left; position: relative; height: 2.85rem; padding: 0 1.25rem; font-weight: 400; color: #000; line-height: 2.85rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

.latest .title a::before { position: absolute; left: 0; top: 0; z-index: -1; width: 0; height: 100% !important; background-color: #d53746; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

.latest .title a::after { visibility: hidden; overflow: hidden; height: 0; opacity: 0; font-size: 1rem; display: inline-block; width: 0; font-family: "xeicon"; content: ''; vertical-align: middle; }

.latest .title a:hover, .latest .title a:focus { color: #fff; }

.latest .title a:hover::before, .latest .title a:focus::before { width: calc(100% + 1px); }

.latest .article { visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: absolute; left: 0; top: 2.85rem; width: 100%; max-height: 16.5rem; padding: 0.5rem 0; border-bottom: 1px solid #ddd; }

.latest .article a { font-size: 1rem; display: block; position: relative; padding: 0 5rem 0 0.8rem; line-height: 2.5rem; }

.latest .article a::before { position: absolute; left: 0; top: 1rem; width: 0.25rem; height: 0.25rem; border-radius: 100%; background-color: #ddd; content: ''; }

.latest .article a .date { font-size: 0.8rem; position: absolute; right: 0; top: 0; color: #767676; }

.latest .article a .date strong { font-weight: 400; }

.latest .article a .date strong::before { margin-left: -0.25rem; content: '.'; }

.latest .article a .desc strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-weight: 400; }

.latest .article a .desc span { display: none; }

.latest .article .icon-notice { font-size: 0.7rem; display: inline-block; position: relative; top: -2px; height: 1.25rem; margin-right: 0.15rem; padding: 0 0.25rem; border-radius: 0.25rem; background-color: #333; color: #fff; line-height: 1.25rem; vertical-align: middle; }

.latest .article .no-data { font-size: 1rem; padding: 1.25rem 0; border-bottom: 1px solid #ddd; font-weight: 400; color: #000; text-align: center; }

.latest .more { visibility: hidden; overflow: hidden; height: 0; opacity: 0; font-size: 0.75rem; position: absolute; right: 1rem; top: 0; color: #000; line-height: 2.85rem; }

.latest .more span { font-style: italic; }

.latest .more::after { font-size: 1rem; display: inline-block; position: relative; font-family: "xeicon"; content: ''; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

.latest .more:hover::after, .latest .more:focus::after { top: -1px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.latest .active .article, .latest .active .more { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; }

.latest .active .title a { font-size: 1rem; color: #fff; }

.latest .active .title a::before { width: 100%; }

.latest .active .title a::after { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; width: 1rem; margin-left: 0.15rem; }

.photo { overflow: hidden; float: right; position: relative; width: calc(100% - (60% + 4rem)); height: 19.75rem; margin-bottom: 3.5rem; }

.photo a { display: block; }

.photo a:hover .img img, .photo a:focus .img img { width: 110%; max-width: 110%; opacity: 0.8; }

.photo .img { overflow: hidden; position: relative; padding-top: 55%; background-color: #000; }

.photo .img img { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; width: 100%; min-height: 100%; -webkit-transition: all 0.2s; transition: all 0.2s; }

.photo .desc { margin-top: 1rem; }

.photo .desc span { font-weight: 600; color: #d53746; }

.photo .desc strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-weight: 400; color: #000; }

.photo .desc p { overflow: hidden; height: 2.5rem; margin-top: 0.5rem; }

.photo .bx-wrapper, .photo .bx-viewport { min-height: 100%; }

.photo .bx-wrapper .bx-pager { position: absolute; right: 0; top: 0; padding-top: calc(55% + 1rem); text-align: right; }

.photo .bx-wrapper .bx-pager .bx-pager-link { overflow: hidden; width: 0.4rem; height: 0.4rem; margin: 0 0 0 0.5rem; border-radius: 100%; background-color: #dadada; text-indent: 4rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

.photo .bx-wrapper .bx-pager .bx-pager-link.active { width: 0.5rem; height: 0.5rem; background-color: #d53746; }

.icons { clear: both; float: left; width: calc(100% - 11.75rem); }

.icons .title { display: none; }

.icons ul { display: table; width: 100%; border: 1px solid #ddd; table-layout: fixed; }

.icons li { display: table-cell; vertical-align: middle; }

.icons li + li { border-left: 1px solid #ddd; }

.icons a { display: block; position: relative; padding: 1.25rem 0; color: #555; text-align: center; line-height: 1.2; word-break: keep-all; }

.icons a::before { position: absolute; left: 0; top: 0; width: 0; height: 5px; background-color: #d53746; content: ''; }

.icons a::after { position: absolute; right: 0; top: 0; width: 5px; height: 0; background-color: #d53746; content: ''; }

.icons a:hover::before { width: 100%; -webkit-transition: all 0.1s; transition: all 0.1s; }

.icons a:hover::after { height: 100%; -webkit-transition: all 0.1s; transition: all 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

.icons a:hover .icon::before { width: 100%; -webkit-transition: all 0.1s; transition: all 0.1s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

.icons a:hover .icon::after { height: 100%; -webkit-transition: all 0.1s; transition: all 0.1s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }

.icons .icon { display: block; margin-bottom: 0.3rem; }

.icons .icon img { width: 2.5rem; }

.icons .icon::before { position: absolute; right: 0; bottom: 0; width: 0; height: 5px; background-color: #d53746; content: ''; }

.icons .icon::after { position: absolute; left: 0; bottom: 0; width: 5px; height: 0; background-color: #d53746; content: ''; }

.kakao { font-size: 0.9rem; float: right; position: relative; width: 10.5rem; height: 2.85rem; padding-top: 0.75rem; background-color: #ffca3a; font-weight: 400; color: #412e34; text-align: center; }

.kakao::before { display: inline-block; width: 1.8rem; height: 1.6rem; margin-right: 0.5rem; background: url("/ipsi/img/main/kakao.png") no-repeat center center; background-size: 100% auto; content: ''; vertical-align: middle; }

.adiga { float: right; width: 10.5rem; height: 2.85rem; margin-top: 0.6rem; padding-top: 0.5rem; background-color: #16a1a9; text-align: center; }

.adiga img { height: 1.8rem; }

.calender { position: relative; z-index: 0; float: left; width: 65%; height: 15rem; margin-top: 1.8rem; padding-bottom: 3rem; }

.calender::before { position: absolute; right: 0; top: 0; z-index: -1; width: 1000%; height: 100%; background: url("/ipsi/img/main/calender.jpg") no-repeat right #132b46; background-size: auto 100%; content: ''; }

.calender > .title { font-size: 1rem; width: 6rem; height: 6.05rem; margin: -0.75rem 0 0.5rem -0.25rem; padding: 1.25rem; background: url("/ipsi/img/main/calender.png") no-repeat; background-size: 100% auto; color: #fff; text-align: center; line-height: 1.2; word-break: keep-all; -webkit-transition: all 0.2s; transition: all 0.2s; }

.calender .control { position: absolute; right: 3rem; top: 2.25rem; }

.calender .control a { display: inline-block; overflow: hidden; width: 1.75rem; height: 1.75rem; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.5); text-align: center; vertical-align: top; line-height: 1.75rem; }

.calender .control a::before { font-size: 1rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #fff; content: ''; line-height: inherit; }

.calender .control a.next::before { content: ''; }

.calender .control a.disable { opacity: 0.5; cursor: default; }

.calender .group .title a { font-size: 1rem; position: absolute; left: 7.5rem; top: 2.5rem; font-weight: 400; color: #b6bbc0; }

.calender .group .list { visibility: hidden; overflow: hidden; height: 0; opacity: 0; position: relative; }

.calender .group .list::before { position: absolute; right: 0; top: 2.2rem; width: 0; height: 1px; background-color: #fff; content: ''; opacity: 0.1; }

.calender .group .list ul { position: relative; left: 0; counter-reset: section; white-space: nowrap; }

.calender .group .list li { font-size: 0.75rem; display: inline-block; position: relative; top: 1rem; width: 20%; padding-right: 3rem; color: #fff; text-align: center; vertical-align: top; white-space: nowrap; opacity: 0; }

.calender .group .list li::before { display: block; height: 2.2rem; font-weight: 700; color: #ac9c87; counter-increment: section; content: "STEP0" counter(section); }

.calender .group .list li strong { font-size: 1rem; display: block; position: relative; padding-top: 1rem; font-weight: 400; }

.calender .group .list li strong::before { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; top: -0.225rem; width: 0.45rem; height: 0.45rem; border-radius: 100%; background-color: #cec5b9; content: ''; }

.calender .group .list li strong::after { position: absolute; left: 50%; top: -0.6rem; width: 1.2rem; height: 1.2rem; margin-left: -0.6rem; border-radius: 100%; border: 2px solid #ac9c87; content: ''; opacity: 0; }

.calender .group .list li.active strong::before { background-color: #ac9c87; }

.calender .group .list li.active strong::after { opacity: 1; -webkit-animation: circle 1s infinite; animation: circle 1s infinite; }

.calender .group .list.type1 ul { display: table; width: 100%; table-layout: fixed; }

.calender .group .list.type1 ul li { display: table-cell; }

.calender .group#group2 .title a { left: 13.25rem; }

.calender .group#group3 .title a { left: 19rem; }

.calender .group#group4 .title a { left: 24.5rem; }

.calender .group.active .title a { color: #fff; }

.calender .group.active .title a::after { font-family: "xeicon"; content: ''; }

.calender .group.active .list { visibility: visible; overflow: visible; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; overflow: hidden; }

.calender .group.active .list::before { width: 1000%; -webkit-transition: all 3s; transition: all 3s; }

.calender .group.active .list li { top: 0; opacity: 1; -webkit-transition: all 0.3s; transition: all 0.3s; }

.calender .group.active .list li:nth-child(6) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

.calender .group.active .list li:nth-child(5) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

.calender .group.active .list li:nth-child(4) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }

.calender .group.active .list li:nth-child(3) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }

.calender .group.active .list li:nth-child(2) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

.calender .group.active .list li:nth-child(1) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }

@-webkit-keyframes circle { 0% { -webkit-transform: scale(1); transform: scale(1);
    opacity: 1; }
  100% { -webkit-transform: scale(1.5); transform: scale(1.5);
    opacity: 0; } }

@keyframes circle { 0% { -webkit-transform: scale(1); transform: scale(1);
    opacity: 1; }
  100% { -webkit-transform: scale(1.5); transform: scale(1.5);
    opacity: 0; } }

.tel { position: relative; z-index: 0; float: right; width: 35%; height: 15rem; margin-top:1.8rem; color: #fff; }

.tel::before { position: absolute; left: 0; top: 0; z-index: -1; width: 1000%; height: 100%; background-color: #0c2035; content: ''; }

.tel .group { display: table; width: 100%; height: 100%; padding-left: 3.25rem; table-layout: fixed; }

.tel .title { font-size: 1rem; display: table-cell; width: 5.4rem; font-weight: 500; color: #cec5b9; text-align: center; vertical-align: middle; }

.tel .title::before { display: block; width: 5.4rem; height: 5.4rem; margin: 0 auto 0.25rem; border-radius: 100%; background: url("/ipsi/img/main/tel.png") no-repeat center center #031428; background-size: 2.5rem auto; content: ''; }

.tel .list { display: table-cell; padding-left: 2rem; vertical-align: middle; }

.tel .list li { padding: 1rem 0; }

.tel .list li + li { border-top: 1px solid rgba(255, 255, 255, 0.2); }

.tel .list strong { font-size: 1.15rem; display: block; color: #e7cdaf; }

@-webkit-keyframes round { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(365deg); transform: rotate(365deg); } }

@keyframes round { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(365deg); transform: rotate(365deg); } }

.jbsns { position: relative; z-index: 0; clear: both; padding: 4.5rem 0; background: url("/ipsi/img/main/sns3.png") no-repeat 40% 0; }

.jbsns::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; z-index: -2; background: url("/ipsi/img/main/sns1.png") no-repeat 0 center #ced5df; background-attachment: fixed; }

.jbsns::after { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background: url("/ipsi/img/main/sns2.png") no-repeat right 0 center; background-attachment: fixed; }

.jbsns .list::before { position: absolute; left: 45%; top: 10%; z-index: -1; width: 1.75rem; height: 1.75rem; background: url("/ipsi/img/main/sns3.png") no-repeat; background-size: 100% auto; content: ''; -webkit-animation: round 5s infinite; animation: round 5s infinite; }

.jbsns .list::after { position: absolute; left: -3.75rem; bottom: 2rem; z-index: -1; width: 8.25rem; height: 8.25rem; background: url("/ipsi/img/main/sns4.png") no-repeat; background-size: 100% auto; content: ''; -webkit-animation: round 10s infinite; animation: round 10s infinite; }

.jbsns .list .bx-viewport a { display: block; overflow: hidden; position: relative; padding-top: 100%; }

.jbsns .list .bx-viewport a::before { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-color: #000; content: ''; opacity: 0; -webkit-transition: all 0.2s; transition: all 0.2s; }

.jbsns .list .bx-viewport a img { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; width: 100%; height: 100%; -webkit-transition: all 0.2s; transition: all 0.2s; }

.jbsns .list .bx-viewport a:hover::before, .jbsns .list .bx-viewport a:focus::before { opacity: 0.3; }

.jbsns .list .bx-viewport a:hover img, .jbsns .list .bx-viewport a:focus img { -webkit-transform: scale(1.2) translate(-40%, -40%); transform: scale(1.2) translate(-40%, -40%); }

.jbsns .title { font-size: 1.75rem; margin-bottom: 0.75rem; font-weight: 400; color: #000; }

.jbsns .title strong { font-weight: 600; color: #d53746; }

.jbsns .btns { position: absolute; right: 0; top: 5.2rem; }

.jbsns .btns a { display: inline-block; overflow: hidden; position: relative; width: 2rem; height: 2rem; margin-left: 0.25rem; border-radius: 100%; text-align: center; line-height: 2rem; vertical-align: top; }

.jbsns .btns a::before { font-size: 1rem; display: block; width: 100%; height: 100%; border-radius: 100%; font-family: "xeicon"; color: #fff; content: ''; }

.jbsns .btns a.facebook::before { background-color: #445d99; content: ''; }

.jbsns .btns a.blog::before { background: url("/ipsi/img/layout/sns_blog.png") no-repeat center center #31b24a; background-size: auto 50%; }

.jbsns .btns a.instagram::before { font-size: 1.25rem; background: -webkit-gradient(linear, left top, left bottom, from(#7353a3), color-stop(#ed2c7f), to(#f1af42)); background: linear-gradient(to bottom, #7353a3, #ed2c7f, #f1af42); content: ''; line-height: 2.1rem; }

.jbsns .btns a.youtobe::before { font-size: 1.25rem; background-color: #f00; content: ''; line-height: 2.1rem; }

.jbsns .btns a:hover, .jbsns .btns a:focus { -webkit-animation: snsbtn 0.8s infinite alternate; animation: snsbtn 0.8s infinite alternate; }

.jbsns .bx-wrapper .bx-controls-direction { position: absolute; top: -2rem; left: 12.8rem; width: 4.75rem; }

.jbsns .bx-wrapper .bx-controls-direction a { overflow: hidden; float: left; position: static; width: 2.2rem; height: 2.2rem; margin-top: -1.1rem; border-radius: 100%; background: none #fff; }

.jbsns .bx-wrapper .bx-controls-direction a::before { font-size: 1.25rem; display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #a5a5a5; content: ''; text-indent: 1px; text-align: center; line-height: 2.3rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

.jbsns .bx-wrapper .bx-controls-direction a:hover::before, .jbsns .bx-wrapper .bx-controls-direction a:focus::before { color: #000; }

.jbsns .bx-wrapper .bx-controls-direction a.bx-next { float: right; }

.jbsns .bx-wrapper .bx-controls-direction a.bx-next::before { content: ''; text-indent: 0; }

@-webkit-keyframes snsbtn { 0% { top: 0; }
  100% { top: -0.25rem; } }

@keyframes snsbtn { 0% { top: 0; }
  100% { top: -0.25rem; } }

.campus { position: relative; z-index: 0; }

.campus:after{
	content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 100vw;
    height: 100%;
    background: url(/ipsi/img/main/campus2.jpg) 50% 30% no-repeat;
    z-index: -1;
}

.campus > .title { font-size: 0.9rem; position: relative; padding: 5rem 0; z-index: 1; font-weight: 400;}

.campus > .title h2 { font-size: 1.75rem; font-weight: 700; color: #000; }

.campus > .title h2 span { font-weight: 400; color: #d53746; }

.campus > .title p { font-size: 2.5rem; margin: 0.5rem 0 1rem; font-weight: 300; color: #343434; letter-spacing: -0.05rem; line-height: 1.2; }

.campus-btn{
	position: absolute;
	top:50%;
    transform: translateY(-50%);
	right: 0;
	width: 50%;
	z-index: 1;
}
.campus-btn a{
	display: block;
	padding:1rem 0;
	background: #1a3759;
	color: #fff;
	font-size: 0.8rem;
	text-align: center;
}
.campus-btn  a + a{
	margin-top: 10px;
}
.campus-btn  a.on{
	background: #162b48;
}
.campus-btn a:hover{
	background: #0c2035;
}

/* 
.campus .bx-wrapper, .campus .bx-viewport { overflow: visible !important; position: static !important; }

.campus .bx-wrapper .bx-pager { position: absolute; bottom: 5rem; right: 55%; width: 18rem; height: 2.95rem; margin-right: -7rem; padding-top: 0; }

.campus .bx-wrapper .bx-pager div { float: left; width: 50%; height: 100%; }

.campus .bx-wrapper .bx-pager .bx-pager-link { overflow: hidden; position: relative; left: 0; top: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; background: none #344658; -webkit-transition: all 0.2s; transition: all 0.2s; }

.campus .bx-wrapper .bx-pager .bx-pager-link::before { font-size: 1.5rem; display: block; float: right; width: 3rem; height: 100%; font-family: "xeicon"; color: #fff; content: ''; text-align: center; text-indent: 0; line-height: 2.95rem; }

.campus .bx-wrapper .bx-pager .bx-pager-link::after { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 1rem; color: #fff; content: '국제캠퍼스(충청)'; text-indent: 0; white-space: nowrap; }

.campus .bx-wrapper .bx-pager .bx-pager-link[data-slide-index='1']::before { float: left; content: ''; }

.campus .bx-wrapper .bx-pager .bx-pager-link[data-slide-index='1']::after { left: auto; right: 1rem; content: '창의캠퍼스(고양)'; }

.campus .bx-wrapper .bx-pager .bx-pager-link.active, .campus .bx-wrapper .bx-pager .bx-pager-link:hover, .campus .bx-wrapper .bx-pager .bx-pager-link:focus { background-color: #0c2035; }

.campus > .title { font-size: 0.9rem; position: absolute; left: 0; top: 5rem; z-index: 1; font-weight: 400; }

.campus > .title h2 { font-size: 1.75rem; font-weight: 700; color: #000; }

.campus > .title h2 span { font-weight: 400; color: #d53746; }

.campus > .title p { font-size: 2.5rem; margin: 0.5rem 0 1rem; font-weight: 300; color: #343434; letter-spacing: -0.05rem; line-height: 1.2; }

.campus .group { padding: 5rem 0; }

.campus .desc { float: right; position: relative; width: 55%; height: 23rem; padding: 2rem 2.5rem; -webkit-box-shadow: 0.25rem 0.25rem 0.15rem rgba(0, 0, 0, 0.05); box-shadow: 0.25rem 0.25rem 0.15rem rgba(0, 0, 0, 0.05); background-color: #fff; }

.campus .desc .title { font-size: 1.75rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid #ddd; font-weight: 500; color: #000; line-height: 1.2; }

.campus .desc .title span { font-size: 1rem; display: block; font-family: 'Times New Roman', serif; color: #c1c1c1; }

.campus .desc .btns { font-size: 0.9rem; position: absolute; right: 2.5rem; top: 3rem; line-height: 1.5rem; }

.campus .desc .btns a { display: inline-block; overflow: hidden; position: relative; height: 1.5rem; margin-left: 1.5rem; padding-left: 1.8rem; font-weight: 400; }

.campus .desc .btns a::before { position: absolute; left: 0; top: 0; width: 1.5rem; height: 3rem; background: url("/ipsi/img/main/campus1.png") repeat-y; background-size: 1.5rem auto !important; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

.campus .desc .btns a + a::before { background: url("/ipsi/img/main/campus2.png") repeat-y; }

.campus .desc .btns a:hover::before, .campus .desc .btns a:focus::before { top: -1.5rem; }

.campus .desc .item { display: inline-block; width: calc(100% + 0.75rem) !important; font-size: 0.9rem; }

.campus .desc .item li { float: left !important; width: calc(33.33333% - 0.75rem) !important; margin-right: 0.75rem; }

.campus .desc .item li:nth-child(n + 4) { margin-top: 0.75rem; }

.campus .desc .item a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; height: 3.25rem; border: 1px solid #ddd; background-color: #f8f8f8; font-weight: 400; color: #767676; text-align: center; line-height: 3.25rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

.campus .desc .item a:hover { border-color: #d53746; background-color: #d53746; color: #fff; }

.campus .img { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; overflow: hidden; text-align: center; }

.campus .img img { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; bottom: 0; }
 */
 
@media (max-width: 1530px) { .visual { padding-left: 0; }
  .visual .list { left: 0; width: 100%; }
  .visual .list .txt { display: none; } }

@media (max-width: 1350px) { .visual .list iframe { width: auto !important; }
  .visual .slogan { margin-left: 0; }
  .visual .bx-wrapper .bx-controls-direction a { display: none; }
  .latest { height: 18.2rem; }
  .tel .group { padding-left: 2rem; }
  .tel .group .list { padding-left: 1.5rem; }
  .calender .control { right: 1rem; } }

@media (max-width: 1024px) { .visual .desc { width: 100%; margin-top: -4rem; text-align: center; }
  .visual .desc .img { margin: 0 auto 0.5rem; }
  .visual .desc .btn { margin-top: 1rem; }
  .visual .slogan { left: -1rem; width: calc(100% + 2rem); }
  .visual .link { right: auto; left: 50%; top: auto; bottom: 6rem; width: calc(100% - 2rem); height: 7rem; margin-top: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
  .visual .link li { width: calc(25% - 3px); height: 100%; }
  .visual .link li:nth-child(n+3) { margin-top: 0; }
  #MainContents { margin-top: 2rem; }
  #MainContents .ConTop { margin-bottom: 0; }
  .latest { float: none; width: 100%; height: 21.2rem; margin-bottom: 2rem; }
  .latest::before { font-size: 2rem; display: block; height: 3rem; font-weight: 600; color: #000; content: 'Notice'; text-align: center; line-height: 1; }
  .latest::after { top: 3rem; }
  .latest .article { top: 5.85rem; }
  .latest .more { top: 3rem; }
  .photo { height: auto; margin-bottom: 0; padding-bottom: 1rem; border-bottom: 1px solid #ddd; }
  .icons { clear: none; position: relative; width: calc(60% + 2rem); }
  .icons .title { font-size: 1.5rem; display: block; position: absolute; left: 0; top: 0; font-weight: 600; color: #000; line-height: 1; }
  .icons .title span { display: block; color: #d53746; }
  .icons .title::after { display: block; width: 1.5rem; height: 3px; margin-top: 1rem; background-color: #d53746; content: ''; }
  .icons ul { border-top: 0 none; border-left: 0 none; }
  .icons li { display: block; float: left; width: 25%; border-top: 1px solid #ddd; border-left: 1px solid #ddd; }
  .icons li:first-child { margin-left: 25%; }
  .kakao { float: left; margin: 1rem 1rem 0 0; }
  .adiga { float: left; top: 0; width: calc(60% - 9.5rem); height: 2.85rem; margin-top: 1rem; padding: 0 1rem 0 2rem; border-radius: 4rem; text-align: left; line-height: 2.85rem; -webkit-transform: rotate(0) !important; transform: rotate(0) !important; }
  .adiga::before { position: static; float: right; margin-top: 1.25rem; }
  .adiga img { height: 1.5rem; }
  .calender { float: none; width: 100%; height: auto; margin-top: 3rem; padding-bottom: 1.5rem; }
  .calender::before { right: -1rem; }
  .calender > .title { position: relative; top: -0.75rem; margin-top: 0; }
  .calender .control { right: 0; }
  .calender .group .list li { padding: 0; }
  .tel { float: none; width: 100%; height: auto; margin-top:0; padding: 1rem; }
  .tel::before { left: -1rem; }
  .tel .group { width: 20rem; max-width: 100%; margin: 0 auto; padding-left: 0; }
  .jbsns { padding: 1.5rem 0 2rem; }
  .jbsns .btns { top: 2rem; }
  .jbsns .list li { margin-right: 0.5rem !important; }
  .campus{padding: 5rem 0;}
  .campus > .title { position: relative; top: 0; padding:0rem 0 2rem 0; z-index: 2; text-align: center; line-height: 1.2; }
  .campus > .title > span { display: none; }
  .campus-btn{
  	position: inherit;
    top: auto;
    transform: none;
    margin: 0 auto;
  }
 /*  .campus .group { padding: 0 0 6.475rem; }
  .campus .desc { float: none; width: 40rem; max-width: 100%; height: 19rem; margin: 0 auto; padding: 1.5rem 2.5rem; }
  .campus .desc .title { margin-bottom: 1.2rem; padding-bottom: 0.5rem; }
  .campus .desc .title span { display: none; }
  .campus .desc .btns { top: 1.8rem; }
  .campus .img { top: auto; bottom: 0; height: calc(100% + 11rem); }
  .campus .img img { height: 100%; }
  .campus .bx-wrapper .bx-controls-direction { right: 50%; } */ 
}

@media (max-width: 768px) { .visual .desc { margin-top: -6rem; }
  .visual .link { bottom: 8rem; }
  .visual .slogan { height: auto; }
  .visual .slogan li { height: 5rem; padding: 1rem 4rem 1rem 1.5rem; text-align: left; line-height: 1.2; white-space: normal; }
  .visual .slogan br { display: block; }
  .visual .slogan span { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; position: relative; }
  .visual .slogan .bx-wrapper { padding-right: 3.15rem; }
  .visual .slogan .btn { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; right: 0; width: 3.5rem; min-width: 0 !important; height: 3.5rem; padding: 0.4rem 0.25rem 0.4rem 0.18rem !important; border-radius: 3.5rem; line-height: 1; white-space: normal; word-break: break-all; }
  .photo { width: calc(50% - 1rem); }
  .icons { width: calc(50% - 1rem); }
  .icons li { width: 50%; }
  .icons li:first-child { margin-left: 50%; }
  .kakao { width: 9rem; margin: 2rem 0.5rem 0 2rem; }
  .adiga { float: right; width: calc(50% - 10.5rem); margin-top: 2rem; padding: 0 1rem; text-align: center; } }

@media (max-width: 670px) { .calender { margin-top: 3rem; padding-bottom: 1rem; }
  .calender > .title { margin-bottom: 0; }
  .calender .control { display: none !important; }
  .calender .group .title a .m-hidden { display: none; }
  .calender .group#group2 .title a { left: 11rem; }
  .calender .group#group3 .title a { left: 14.5rem; }
  .calender .group#group4 .title a { left: 17.8rem; }
  .calender .group .list::before { left: 2.7rem; top: -1rem; width: 1px !important; height: calc(100% + 2rem); }
  .calender .group .list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important; width: 100%; height: 2rem; padding-left: 4.5rem; text-align: left; line-height: 2rem; }
  .calender .group .list li::before { float: left; width: 4rem; -webkit-transition: all 0s !important; transition: all 0s !important; }
  .calender .group .list li + li { margin-top: 0.5rem; }
  .calender .group .list li strong { float: left; width: calc(100% - 11rem); padding-top: 0; }
  .calender .group .list li strong::before { left: -6rem; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
  .calender .group .list li strong::after { left: -5.8rem; top: 50%; margin-top: -0.65rem; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
  .calender .group .list li span { float: right; width: 7rem; }
  .calender .group .list li.active::after { position: absolute; left: 3.3rem; top: 50%; z-index: -1; width: 1.75rem; height: 1.75rem; margin-top: -0.25rem; background-color: #0b1f35; content: ''; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); }
  .calender .group .list li.active::before, .calender .group .list li.active strong, .calender .group .list li.active span { background-color: #0b1f35; } }

@media (max-width: 530px) { .visual .desc .txt1 br { display: block; }
  .visual .desc .txt2 { display: none; }
  .visual .desc .btn { margin-top: 0; }
  .visual .slogan li { font-size: 0.8rem; height: 4rem; }
  .visual .slogan li .btn { font-size: 0.8rem; width: 2.5rem; height: 2.5rem; padding: 0.25rem 0.2rem; }
  .visual .desc { margin-top:-9rem; }
  .visual .link { bottom: 6rem; width: 15rem; max-width: calc(100% - 2rem); height: 13.5rem; }
  .visual .link li { width: calc(50% - 1px); height: calc(50% - 0.5px); margin-left: 1px; }
  .visual .link li:nth-child(n+3) { margin-top: 1px; }
  .visual .link a { line-height:1.3; }
  .visual .link .txt, .visual .link .icon { margin-bottom: 0.25rem; }
  .visual .link .icon { width: 1.8rem; }
  .latest { height: 25.5rem; }
  .latest .title a { font-size: 0.8rem; padding: 0 0.6rem; }
  .latest .title a::after { display: none; }
  .latest .active .title a { font-size: 0.9rem; }
  .latest .article a .desc span { height: 2rem; white-space: normal; line-height: 1.4; }
  .latest .more { top: auto; bottom: 0; right: 0; width: 100%; height: 2rem; border: 1px solid #ddd; background-color: #f8f8f8; text-align: center; line-height: 2rem; }
  .latest .more span { font-style: normal; }
  .latest .more::after { display: none; }
  .photo { float: none; width: 100%; margin-bottom: 1.5rem; }
  .icons { float: none; width: 100%; }
  .icons li { float: left; width: 25%; }
  .icons li:first-child { margin-left: 25%; }
  .kakao { display: block; clear: both; float: none; width: 100%; margin: 1rem 0; }
  .adiga { display: block; float: none; width: 100%; height: 3rem; margin-top: 0.5rem; }
  .jbsns .title { margin-bottom: 0; }
  .jbsns .btns { display: none; }
  .jbsns .bx-wrapper .bx-controls-direction { left: auto; right: 0; }
  .jbsns .bx-wrapper .bx-viewport { height: 21rem !important; }
  .jbsns .list li { width: 10rem !important; padding-top: 0.5rem; }
  .jbsns .list li:nth-child(4n + 1) { clear: both; }
  .campus > .title { }
  .campus > .title p { font-size: 1.75rem; line-height: 1; }
  .campus-btn{width: 100%;}
 /*  .campus .desc .title { font-size: 1.5rem; }
  .campus .desc .item { display: inline-block; width: calc(100% + 0.5rem) !important; }
  .campus .desc .item li { float: left !important; width: calc(50% - 0.5rem) !important; margin-right: 0.5rem; }
  .campus .desc .item li:nth-child(n + 3) { margin-top: 0.5rem; }
  .campus .desc .item a { font-size: 0.8rem; height: 2.5rem; line-height: 2.5rem; }
  .campus .desc .btns a { font-size: 0.8rem; height: 1rem; margin-left: 0.5rem; padding-left: 1.25rem; line-height: 1rem; }
  .campus .desc .btns a::before { width: 1rem; background-size: 1rem auto !important; }
  .campus .desc .btns a:hover::before, .campus .desc .btns a:focus::before { top: -1rem; }
  .campus .img { height: calc(100% + 9rem); }  */
  }

@media (max-width: 490px) { .icons li { width: 50%; }
  .icons li:first-child { margin-left: 50%; } }

@media (max-width: 400px) { .calender > .title { width: 4rem; padding: 1.25rem 0; background-size: 100% 100%; }
  .calender .group .title a { font-size: 0.9rem; left: 5.5rem; white-space: nowrap; }
  .calender .group#group2 .title a { left: 8.5rem; }
  .calender .group#group3 .title a { left: 11.4rem; }
  .calender .group#group4 .title a { left: 14.4rem; }
  .calender .group .list::before { margin-left: -1rem; }
  .calender .group .list li { padding-left: 3.5rem; }
  .calender .group .list li::before { width: 3.5rem; }
  .calender .group .list li::after { margin-left: -1rem; }
  .calender .group .list li + li { margin-top: 0.25rem; }
  .calender .group .list li span { width: 6rem; }
  .calender .group .list li strong { font-size: 0.8rem; width: calc(100% - 9.5rem); }
  .calender .group .list li strong::before { margin-left: 0.5rem; }
  .calender .group .list li strong::after { margin-left: -0.05rem; }
  .tel .title { width: 5rem; }
  .tel .title::before { width: 5rem; height: 5rem; }
  .tel .list li { padding: 0.5rem 0; }
  .campus .desc { padding: 1rem; }
  .campus .desc .btns { right: 1rem; top: 0.65rem; }
  .campus .desc .btns a { display: block; margin-bottom: 0.25rem; } }