@charset "UTF-8";
/*-------------------------------------------------
title       : 메인
Author      : ㅈㅁㅈ
Create date : 2019-09-03
-------------------------------------------------*/
.visual { position: relative; z-index: 0; height: 41.75rem; }

.visual .controller { display: none; }

.visual #visual { height: 100%; }

.visual #visual .btn { display: none; }

.visual #visual li { position: relative; z-index: 0; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; display: block !important; width: 100% !important; height: 100%; text-align: center; }

.visual #visual li::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; left: 0; width: 0; height: 1px; margin-left: 0; background-color: #ddd; }

.visual #visual li .img { overflow: hidden; height: 100%; }

.visual #visual li .img img { display: inline-block; position: relative; top: -26rem; width: auto; max-width: inherit !important; height: 100%; vertical-align: top; opacity: 0; -webkit-transition: all 1s 0s; transition: all 1s 0s; }

.visual #visual li.active { opacity: 1; }

.visual #visual li.active::before { width: 100%; -webkit-transition: all 0.5s 0s; transition: all 0.5s 0s; }

.visual #visual li.active .img img { top: 0; opacity: 1; }

.visual #visual li.active .desc img { top: 0; opacity: 1; -webkit-transition: all 0.5s 0.3s; transition: all 0.5s 0.3s; }

.visual #visual li.active .desc .label + span { opacity: 1; -webkit-transition: all 0.5s 0s; transition: all 0.5s 0s; }

.visual #visual li.active .desc > strong { top: 0; opacity: 1; -webkit-transition: all 0.5s 0s; transition: all 0.5s 0s; }

.visual #visual li.active .desc > strong span::before { width: 0; -webkit-transition: all 0.5s 1s; transition: all 0.5s 1s; }

.visual #visual li.active .desc > strong + p { margin-top: 0; opacity: 1; -webkit-transition: all 0.5s 0s; transition: all 0.5s 0s; }

.visual #visual li.active .desc::before { margin-right: 0; opacity: 1; -webkit-transition: all 0.5s 0.3s; transition: all 0.5s 0.3s; }

.visual > .bx-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; height: 26rem; }

.visual > .bx-wrapper .bx-loading { display: none; }

.visual > .bx-wrapper .bx-viewport { overflow: visible !important; z-index: -1; height: 100%; }

.visual > .bx-wrapper .bx-viewport li:nth-child(1) .visual1, .visual > .bx-wrapper .bx-viewport li:nth-child(2) .visual2, .visual > .bx-wrapper .bx-viewport li:nth-child(3) .visual3 { display: block; }

.visual > .bx-wrapper .bx-controls { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; position: absolute; top: -3rem; z-index: 5; height: calc(100% + 3rem); }

.visual > .bx-wrapper .bx-controls-direction { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); position: absolute; bottom: 50%; width: 96rem; margin-bottom: -1.5rem; }

.visual > .bx-wrapper .bx-controls-direction a { width: 2.2rem; height: 2.2rem; top: auto; margin: 0 3rem -1.1rem; border-bottom: 1px solid #fff; border-left: 1px solid #fff; background: none; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.visual > .bx-wrapper .bx-controls-direction a.bx-next { border: 0 none; border-top: 1px solid #fff; border-right: 1px solid #fff; }

.visual > .bx-wrapper .bx-pager { display: inline-block; width: auto !important; padding: 0 0 0 5.5rem; vertical-align: top; }

.visual > .bx-wrapper .bx-pager div { display: inline-block; vertical-align: top; }

.visual > .bx-wrapper .bx-pager .bx-pager-link { font-size: 1.25rem; display: inline-block; overflow: hidden; width: 0.5rem; height: 0.5rem; margin: 0 0 0 1rem; border-radius: 100%; background-color: #cfcfcf; font-family: "Gotham"; font-weight: 700; color: transparent; text-indent: 0; line-height: 0.8; }

.visual > .bx-wrapper .bx-pager .bx-pager-link::before { content: '0'; }

.visual > .bx-wrapper .bx-pager .bx-pager-link.active { width: 1.8rem; height: 1.5rem; border-radius: 0; background: none; color: #9c1c2b; }

.visual > .bx-wrapper .bx-controls-auto { display: inline-block; overflow: hidden; position: relative; width: 1.5rem; height: 1.5rem; margin-left: 1rem; line-height: 1.2; vertical-align: top; }

.visual > .bx-wrapper .bx-controls-auto a { font-size: 1rem; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: none; }

.visual > .bx-wrapper .bx-controls-auto a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; color: #a6a6a6; content: ''; text-indent: 0; }

.visual > .bx-wrapper .bx-controls-auto a.bx-stop::before { content: ''; }

.visual > .bx-wrapper .bx-controls-auto a.active { display: none; }

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

.visual .group .box { position: absolute; right: 0; z-index: 6; width: 22rem; padding: 1.8rem 2rem; color: #fff; }

.visual .group .title { font-size: 1rem; margin-bottom: 1rem; font-family: 'Times New Roman', serif; }

.visual .group .bx-wrapper .bx-controls-direction { position: absolute; right: 0; top: -2.5rem; width: 1.8rem; }

.visual .group .bx-wrapper .bx-controls-direction::before { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; width: 1px; height: 0.8rem; background-color: rgba(255, 255, 255, 0.5); content: ''; }

.visual .group .bx-wrapper .bx-controls-direction a { position: static; float: left; width: 0.8rem; height: 0.8rem; margin: 0 -1rem 0 0; border-left: 1px solid #fff; border-bottom: 1px solid #fff; background: none; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.visual .group .bx-wrapper .bx-controls-direction a.bx-next { float: right; margin: 0 0 0 -1rem; border: 0 none; border-right: 1px solid #fff; border-top: 1px solid #fff; }

.visual .desc { width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 1.25rem; position: absolute; bottom: 100%; height: calc(41.75rem - 26rem - 2.75rem); padding: 0 25rem 0 6.5rem; font-weight: 400; color: #333; text-align: left; line-height: 1.4; word-break: keep-all; display: none; }

.visual .desc img { position: relative; top: -0.5rem; width: 5rem; opacity: 0; }

.visual .desc::before { position: absolute; right: 20rem; bottom: 1rem; width: 10.75rem; height: 10rem; margin-right: -1rem; background: url("/grad/img/main/bg_visual.png") no-repeat center bottom; background-size: 100% auto; content: ''; opacity: 0; }

.visual .desc > strong { font-size: 2.25rem; line-height: 1.22222; display: block; position: relative; top: 2rem; margin: 0.25rem 0; font-weight: 300; letter-spacing: -0.1rem; opacity: 0; }

.visual .desc > strong span { display: inline-block; overflow: hidden; position: relative; top: 0; width: 1.85rem; height: 2.75rem; font-weight: 500; vertical-align: top; line-height: 2.75rem; white-space: nowrap; }

.visual .desc > strong span::before { display: inline-block; width: 100%; height: 100%; content: ''; vertical-align: middle; -webkit-transition: all 0s; transition: all 0s; }

.visual .desc > strong + p { font-size: 1rem; margin-top: 2rem; font-weight: 300; color: #666; opacity: 0; }

.visual .label { position: absolute; left: 0; top: 0; width: 4.25rem; height: 100%; }

.visual .label span { font-size: 0.65rem; display: inline-block; width: 100%; height: 4.25rem; padding-top: 1.3rem; border-radius: 100%; background-color: #9c1c2b; font-weight: 600; color: #fff; text-align: center; line-height: 1.2; opacity: 0; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.visual .label span strong { font-size: 0.9rem; display: block; }

.visual .label::before { position: absolute; left: 50%; bottom: 0; z-index: -1; width: 1px; height: 0; background-color: #ddd; content: ''; }

.visual .label.disable::before { height: 100%; -webkit-transition: all 0s; transition: all 0s; -webkit-transition-delay: 0s; transition-delay: 0s; }

.visual .label.disable span { -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; -webkit-transition: all 0s; transition: all 0s; -webkit-transition-delay: 0s; transition-delay: 0s; }

.visual .label.active::before { height: 100%; -webkit-transition: all 0.8s; transition: all 0.8s; -webkit-transition-delay: 0s; transition-delay: 0s; }

.visual .label.active span { -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

.visual .label + span { font-size: 1.25rem; font-weight: 600; color: #9c1c2b; opacity: 0; -webkit-transition: all 0s; transition: all 0s; }

.calender { top: 3.5rem; height: calc(100% - 3.5rem); background-color: #1a3759; }

.calender .item > li { position: relative; padding-left: 6.5rem; }

.calender .item > li .title { font-size: 1.5rem; position: absolute; left: 0; top: 0; width: 4rem; font-weight: 400; color: #c3a988; text-align: center; line-height: 0.8; }

.calender .item > li .title span { font-size: 2.95rem; display: block; margin-bottom: 0.25rem; color: #fff; }

.calender .item > li .list li + li { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }

.calender .item > li .list strong { display: block; color: #fff; }

.calender .item > li .list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.calender .more { font-size: 0.65rem; position: absolute; left: 2rem; bottom: 2rem; width: 4rem; height: 1.25rem; border-radius: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.5); font-weight: 600; text-align: center; line-height: 1.15rem; }

.calender .more::after { font-size: 0.75rem; display: inline-block; position: relative; top: -1px; margin: 0 -0.25rem 0 0.25rem; font-family: "xeicon"; content: ''; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

.calender .more:hover::after { top: -3px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.links { top: 100%; width: 22rem; background-color: #162b48; }

.links .bx-wrapper .bx-viewport { height: auto !important; }

.links .bx-wrapper .bx-controls-direction { display: none; }

.links .list { max-width: calc(100% + 2rem); margin: 0 -1rem; }

.links .list li { float: left; width: 33.333% !important; color: rgba(255, 255, 255, 0.8); text-align: center; }

.links .list li:nth-child(n+4) { margin-top: 1rem; }

.links .list li .icon { display: block; overflow: hidden; width: 3rem; height: 3rem; margin: 0 auto; }

.links .list li .icon img { display: block; }

.links .list li a { display: block; -webkit-transition: all 0.2s; transition: all 0.2s; }

.links .list li a:hover { color: #fff; }

.links .list li a:hover .icon img:first-child { margin-top: -3rem; -webkit-transition: all 0.3s; transition: all 0.3s; }

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

.BoardWrap { float: left; position: relative; width: calc(50% - 1.5rem); margin: 4.5rem 0; }

.BoardWrap h3 { font-size: 1.5rem; height: 1.25rem; margin-bottom: 1.25rem; padding-left: 0.6rem; border-left: 0.35rem solid #9c1c2b; color: #000; line-height: 1.25rem; }

.BoardWrap .bbs_more a { font-size: 0.75rem; position: absolute; right: 0; top: 0.5rem; font-weight: 600; }

.BoardWrap .bbs_more a::after { display: inline-block; position: relative; top: -0.1rem; margin-left: 0.25rem; font-family: "xeicon"; content: ''; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

.BoardWrap .bbs_more a:hover::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.BoardWrap .no-data { padding: 1rem 0; border-bottom: 1px solid #ddd; text-align: center; }

.BoardWrap.notice .article { border-top: 2px solid #202020; }

.BoardWrap.notice .article li a { display: block; position: relative; padding: 0.5rem 0 0.5rem 1rem; border-bottom: 1px solid #ddd; }

.BoardWrap.notice .article li a::before { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); position: absolute; left: 0; width: 0.15rem; height: 0.15rem; border-radius: 100%; background-color: #a7a7a7; content: ''; }

.BoardWrap.notice .article li a .date { font-size: 0.75rem; position: absolute; right: 0; top: auto; font-weight: 400; color: #777; }

.BoardWrap.notice .article li a .date strong { font-weight: 400; }

.BoardWrap.notice .article li a .date strong::before { margin-left: -0.15rem; content: '.'; }

.BoardWrap.notice .article li a .desc { display: block; padding-right: 4.5rem; }

.BoardWrap.notice .article li a .desc strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-weight: 300; }

.BoardWrap.notice .article li a .desc span { display: none; }

.BoardWrap.notice .article li:first-child a { padding: 1.5rem 0 1.5rem 4.25rem; }

.BoardWrap.notice .article li:first-child a::before { display: none; }

.BoardWrap.notice .article li:first-child a .date { right: auto; left: 0; top: 1.5rem; width: 2.75rem; padding-top: 2.25rem; font-weight: 600; color: #989898; text-align: center; }

.BoardWrap.notice .article li:first-child a .date strong { font-size: 2.4rem; position: absolute; left: 0; top: 0; width: 100%; font-weight: 600; color: #000; line-height: 1; }

.BoardWrap.notice .article li:first-child a .date strong::before { display: none; }

.BoardWrap.notice .article li:first-child a .desc { padding-right: 0; }

.BoardWrap.notice .article li:first-child a .desc strong { font-size: 1rem; margin-bottom: 0.5rem; font-weight: 400; color: #000; }

.BoardWrap.notice .article li:first-child a .desc span { display: block; overflow: hidden; max-height: 2.5rem; color: #767676; }

.BoardWrap.photo { float: right; }

.BoardWrap.photo ul > li { float: left; width: calc(50% - 0.5rem); }

.BoardWrap.photo ul > li:nth-child(2) { float: right; }

.BoardWrap.photo ul > li:nth-child(n+3) { display: none; }

.BoardWrap.photo ul > li a { display: block; }

.BoardWrap.photo ul > li a:hover .img img { width: 120%; min-height: 120%; opacity: 0.8; }

.BoardWrap.photo ul > li .img { overflow: hidden; position: relative; width: 100%; height: 0; padding-top: 58%; background-color: #000; }

.BoardWrap.photo ul > li .img img { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; width: 101%; max-width: inherit; min-height: 101%; -webkit-transition: all 0.2s; transition: all 0.2s; }

.BoardWrap.photo ul > li .desc { padding: 1.5rem 1.5rem 0; border: 1px solid #ddd; border-top: 0 none; font-weight: 600; color: #cfcfcf; }

.BoardWrap.photo ul > li .desc strong { font-size: 1rem; line-height: 1.25; display: block; overflow: hidden; height: 2.5rem; margin: 0.5rem 0 1rem; font-weight: 400; color: #000; }

.BoardWrap.photo ul > li .desc p { font-size: 0.75rem; display: block; position: relative; padding: 0.75rem 0 1rem; border-top: 1px solid #ddd; font-weight: 500; color: #777; }

.BoardWrap.photo ul > li .desc p::after { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1rem; position: absolute; right: 0; font-family: "xeicon"; content: ''; }

.IconQuick { position: relative; z-index: 0; font-size: 1rem; display: inline-block; clear: both; width: 100%; margin-bottom: -0.5rem; padding: 3.75rem 0; font-weight: 600; color: #fff; }

.IconQuick::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background: url("/grad/img/main/quick.jpg") no-repeat center 0 #193658; }

.IconQuick .title { float: left; width: 16rem; background: url("/grad/img/main/quick.png") no-repeat center 0; background-size: 100% auto; font-weight: 400; text-align: center; }

.IconQuick .title h3 { font-size: 2.5rem; line-height: 1.2; padding: 0.5rem 0; font-family: 'Times New Roman', serif; font-weight: 400; }

.IconQuick .title h3 span { display: block; color: #c3a988; }

.IconQuick .title > span::before { display: block; width: 2.5rem; height: 0.15rem; margin: 0.75rem auto; background-color: #fff; content: ''; }

.IconQuick .icon_quick { display: table; float: right; width: calc(100% - 20rem); height: 10.25rem; table-layout: fixed; }

.IconQuick .icon_quick li { display: table-cell; float: none !important; width: auto !important; vertical-align: middle; }

.IconQuick .icon_quick a { display: block; text-align: center; white-space: nowrap; }

.IconQuick .icon_quick a:hover .icon { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.IconQuick .icon_quick .icon { display: block; width: 3.5rem; height: 3.5rem; margin: 0 auto 2rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

.IconQuick .bx-wrapper { float: right; width: calc(100% - 20rem); }

.IconQuick .bx-wrapper .icon_quick { float: none; width: 100% !important; }

.IconQuick .bx-wrapper .bx-pager { display: none; }

.course { position: relative; z-index: 0; padding: 7rem 0; }

.course::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background: url("/grad/img/main/course.png") no-repeat right bottom #f1f1f1; background-attachment: fixed; }

.course h2.title { font-size: 2.25rem; overflow: hidden; position: absolute; right: 0; top: auto; width: 33rem; font-weight: 400; color: #000; line-height: 1; }

.course h2.title::after { position: absolute; left: 0; top: 16px; z-index: -1; width: 100%; height: 0.7rem; background-color: #a2907c; content: ''; }

.course h2.title span { padding-right: 0.5rem; background-color: #f1f1f1; }

.course h2.title strong { padding-right: 1rem; background-color: #f1f1f1; font-weight: 600; color: #9c1c2b; }

.course .group { position: relative; height: 28.7rem; padding: 10rem 4.75rem 0 0; padding-left: calc(100% - 33rem); word-break: keep-all; }

.course .group::before { position: absolute; right: 0; top: 16px; width: 0.7rem; height: calc(100% - 16px); background-color: #a2907c; content: ''; }

.course .group::after { position: absolute; right: 0; bottom: 0; width: 3.25rem; height: 0.7rem; background-color: #a2907c; content: ''; }

.course .group .title { font-size: 1.75rem; display: block; margin: 1.5rem 0; line-height: 1.2; }

.course .group .title span { font-size: 0.9rem; padding-left: 0.1rem; font-weight: 400; color: rgba(129, 111, 92, 0.3); letter-spacing: 0.2rem; }

.course .img { overflow: hidden; position: absolute; left: 0; top: 0; width: calc(100% - 38rem); height: 28.7rem; }

.course .img img { max-width: inherit; height: 100%; }

.course .txt { font-size: 0.9rem; height: 6.5rem; border-bottom: 1px solid #ddd; }

.course .btns { position: absolute; left: auto; bottom: 0; width: 29rem; }

.course .btns a { height: 2.6rem; border: 1px solid #a2907c; line-height: 2.5rem; float: left; position: relative; width: calc(50% - 0.15rem); padding-left: 1.25rem; color: #7a6044; -webkit-transition: all 0.2s; transition: all 0.2s; }

.course .btns a::after { position: absolute; right: 1rem; top: 0; font-family: "xeicon"; content: ''; }

.course .btns a + a { float: right; }

.course .btns a:hover { background-color: #a2907c; color: #fff; }

.course .pager { position: absolute; right: 3rem; top: 11.75rem; width: 30rem; }

.course .pager a { font-size: 0.8rem; line-height: 1.25; display: table; float: left; position: relative; width: 5rem; height: 5rem; margin-right: 1.25rem; border-radius: 100%; background-color: #fff; text-align: center; vertical-align: top; -webkit-transition: all 0.2s; transition: all 0.2s; }

.course .pager a span { display: table-cell; vertical-align: middle; }

.course .pager a span::after { position: absolute; left: 5rem; top: 2.5rem; width: 0; height: 1px; margin-left: 1rem; background-color: #ddd; content: ''; }

.course .pager a.active { margin-right: 6rem; background-color: #9c1c2b; color: #fff; }

.course .pager a.active span::after { width: 4rem; -webkit-transition: all 5s; transition: all 5s; }

@media (max-width: 1350px) { .visual { height: auto; padding-top: 15.75rem; }
  .visual > .bx-wrapper { position: relative; }
  .visual .group { overflow: hidden; margin-top: -6.25rem; padding: 0; }
  .visual .group .box { float: left; position: relative; height: 12.5rem; }
  .visual .group .box.links { width: calc(100% - 22rem); }
  .visual .desc { padding-right: 0; }
  .visual .desc::before { right: 1rem; }
  .calender { top: 0; }
  .links .list li { width: 16.666% !important; padding-top: 0.4rem; }
  .links .list li:nth-child(n+4) { margin-top: 0; }
  .links .list li .icon { margin-bottom: 0.5rem; }
  .links .list li a { width: 3.5rem; margin: 0 auto; line-height: 1.2; word-break: keep-all; }
  .IconQuick .title { width: 14rem; }
  .IconQuick .bx-wrapper { width: calc(100% - 16rem); } }

@media (max-width: 1024px) { .visual #visual li:nth-child(2) .img img { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  .links .bx-wrapper .bx-controls-direction { display: block; }
  .links .list { max-width: inherit; }
  .links .list li { width: 6rem !important; }
  .links .list li a { width: 100%; }
  .BoardWrap { overflow: hidden; float: none !important; width: 100%; margin: 2rem 0; }
  .IconQuick { margin-bottom: -0.25rem; padding: 2rem 0; }
  .IconQuick::before { background: none #1a3759; }
  .IconQuick .title { float: none; width: 22rem; margin: 0 auto; background-size: 100% 100%; }
  .IconQuick .title h3 span { display: inline; margin-right: 0.5rem; }
  .IconQuick .title > span::before { display: none; }
  .IconQuick .bx-wrapper { width: 100%; padding: 2rem 0 1rem; }
  .IconQuick .icon_quick { height: auto; }
  .course { padding: 3rem 0 2rem; }
  .course::before { background-size: 20rem auto; }
  .course h2.title { width: 31rem; }
  .course .group { padding-left: calc(100% - 31rem); }
  .course .img { width: calc(100% - 33rem); }
  .course .pager { right: 1rem; top: 7.75rem; }
  .course .btns { width: 27rem; } }

@media (max-width: 768px) { .visual { padding-top: 13rem; }
  .visual .label { display: none; }
  .visual .group .box { padding: 1.5rem; }
  .visual .group .box.calender { width: 18rem; }
  .visual .group .box.links { width: calc(100% - 18rem); }
  .visual .desc { padding: 1.75rem 0 0; text-align: center; }
  .visual .desc::before { bottom: -2rem; right: -1rem; }
  .visual .desc img { display: inline-block; }
  .visual .desc > strong { font-size: 2rem; }
  .visual .desc > strong span { height: 2.5rem; line-height: 2.5rem; }
  .visual > .bx-wrapper { height: 20rem; }
  .visual > .bx-wrapper .bx-controls { top: -2.25rem; text-align: center; }
  .visual > .bx-wrapper .bx-pager { padding-left: 0; }
  .calender .item > li { padding-left: 5.5rem; }
  .IconQuick { font-size: 0.8rem; }
  .IconQuick .icon_quick .icon { margin-bottom: 0.5rem; }
  .course { padding-top: 2rem; }
  .course h2.title { width: 25rem; }
  .course .group { height: 25rem; padding: 7rem 2rem 0 0; padding-left: calc(100% - 25rem); }
  .course .img { width: calc(100% - 27rem); height: 25rem; }
  .course .btns { width: 21rem; }
  .course .pager { top: 6rem; width: 24rem; }
  .course .pager a { width: 4rem; height: 4rem; }
  .course .pager a span::after { top: 2rem; left: 4rem; margin-left: 0.5rem; }
  .course .pager a.active { margin-right: 4rem; }
  .course .pager a.active span::after { width: 3rem; } }

@media (max-width: 530px) { .visual #visual li:nth-child(1) .img img { left: 50%; -webkit-transform: translateX(-32%); transform: translateX(-32%); }
  .visual #visual li:nth-child(3) .img img { left: 50%; -webkit-transform: translateX(-25%); transform: translateX(-25%); }
  .visual .desc { font-size: 0.8rem; padding-top: 1.2rem; }
  .visual .desc br { display: none; }
  .visual .desc > strong { font-size: 2rem; width: 18rem; margin: 0 auto; line-height: 1; }
  .visual .desc > strong span { width: auto; height: auto; line-height: inherit; }
  .visual > .bx-wrapper .bx-controls { top: -1.75rem; }
  .visual .group .title { margin-bottom: 0.5rem; }
  .visual .group .box { float: none; width: 100% !important; height: auto !important; padding: 1rem 1.5rem; }
  .visual .group .box.links { padding-bottom: 1.5rem; }
  .visual .group .bx-wrapper .bx-controls-direction { top: -1.75rem; }
  .calender .more { bottom: 1rem; left: 1.5rem; }
  .BoardWrap.photo ul > li .desc { padding: 0.75rem 1rem 0; }
  .BoardWrap.photo ul > li .desc strong { font-size: 0.9rem; height: 2.4rem; margin: 0.25rem 0 0.5rem; }
  .BoardWrap.photo ul > li .desc p { padding: 0.5rem 0; }
  .IconQuick { padding: 1.5rem 0 1rem; }
  .IconQuick .bx-wrapper { width: 28rem !important; margin: 0 auto; }
  .IconQuick .bx-wrapper .icon_quick { width: 200% !important; }
  .IconQuick .bx-wrapper .icon_quick li { float: left !important; width: 7rem !important; }
  .IconQuick .bx-wrapper .bx-pager { display: block; padding-top: 2rem; }
  .IconQuick .bx-wrapper .bx-pager .bx-pager-link { background-color: #78899e; }
  .IconQuick .bx-wrapper .bx-pager .bx-pager-link.active { background-color: #fff; }
  .course h2.title { width: 100%; }
  .course .group { height: auto; padding-left: 0; padding-bottom: 3.5rem; }
  .course .group .title span { letter-spacing: 0; }
  .course .txt { font-size: 0.8rem; overflow: hidden; height: 5.5rem; }
  .course .img { display: none; }
  .course .btns { width: calc(100% - 4rem); }
  .course .pager { left: 0; right: auto; } }

@media (max-width: 410px) { .IconQuick .title { width: 18rem; padding-bottom: 0.25rem; }
  .IconQuick .title h3 { font-size: 2.25rem; }
  .course .group::after { width: 2rem; }
  .course .btns { width: calc(100% - 2.5rem); }
  .course .btns a { padding-left: 0; text-align: center; }
  .course .btns a::after { display: none; }
  .course .pager a { margin-right: 0.25rem; }
  .course .pager a::after { display: none; }
  .course .pager a.active { margin-right: 0.25rem; } }