@charset "utf-8";

#footer {margin-top: 0;}
section:last-child {margin: 0;}
.main-visual {position: relative; margin: 0; background-color: #ebebeb; overflow: hidden; visibility: hidden;}
.main-visual > div {position: relative; margin: 0 auto; padding: 60px 20px 130px; max-width: 1000px; overflow: hidden;}
.main-visual .mv-bg {display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 230px; background-color: #7fe6a3;}
.main-visual img {position: relative; width: 100%; z-index: 2;}
.main-visual .mv-img-2 {position: absolute; bottom: 0; left: 50%; max-width: 783px; transform: translate(-50%, 31%); transform: translate(calc(-50% + 8px), 31%); z-index: 3;}

.vertical-rolling {height: 90px;background: #efefef;}
.vertical-rolling ul {position: relative;margin: 0 auto;padding: 0 20px;max-width: 1024px;height: 100%;}
.vertical-rolling .roll-item {display: block;padding: 0 20px;width: 100%;height: 90px;font-size: 16px;color: #222;}
.vertical-rolling .roll-item > div {display: block;position: relative;padding-top: 26px;padding-left: 70px;padding: 20px 0 20px 70px;width: 100%;height: 100%;opacity: 0;}
.vertical-rolling .roll-item div:before {content: "공지";position: absolute;top: 50%;left: 0;width: 50px;height: 30px;line-height: 28px;font-size: 16px;font-weight: 700;color: #fff;text-align: center;background-color: #34aedd;border-radius: 5px;transform: translateY(-60%);}
.vertical-rolling .roll-item span {display: block;font-weight: 700;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.vertical-rolling .roll-item em {font-size: 14px;color: #345ccd;}
.vertical-rolling .roll-item em:after {content: ""; display: inline-block; width: 8px; height: 8px; border-right: 1px solid #345ccd; border-top: 1px solid #345ccd; transform: rotate(45deg) translateY(-1px);}

.intro-sec {margin-top: 90px; margin-bottom: 120px;}
.intro-sec > div {position: relative;}
.intro-sec h3 {font-size: 30px;}
.intro-sec h3 span {display: block;}
.figure-item {padding: 60px 0;}
.figure-item:after {content: ""; display: block; clear: both;}
.figure-item > div {margin: 20px 0;}
.figure-item .fg-left {float: left; text-align: right;}
.figure-item .fg-right {float: right;}
.fg-img img {width: 100%;}
.fg-desc small {display: block; font-size: 14px; color: #33bb51;}
.fg-desc h4 {margin-top: 15px; font-size: 30px; letter-spacing: -2px;}
.fg-desc p {margin-top: 20px;}
.fg-desc a {display: inline-block; margin-top: 15px; color: #345ccd;}
.intro-1 > div {padding-bottom: 40px;}
.intro-1 > div:after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #222;;}
.intro-1 .figure-item > div {padding: 0 30px; width: 50%;}
.intro-1 .fg-desc h4 span {display: block;}
.intro-2 .grid:after {content: ""; display: block; clear: both;}
.intro-2 .grid li {float: left; padding: 0 10px; width: 20%; text-align: center;}
.intro-2 .fg-img {height: 111px; vertical-align: middle; display: flex; align-items: center;}
.intro-2 .fg-img img {margin: 0 auto;}
.intro-2 .fg-img.img-1 img {width: 105px;}
.intro-2 .fg-img.img-2 img {width: 96px;}
.intro-2 .fg-img.img-3 img {width: 116px;}
.intro-2 .fg-img.img-4 img {width: 145px;}
.intro-2 .fg-img.img-5 img {width: 117px;}
.intro-2 .fg-desc {font-size: 14px; letter-spacing: -1.6px;}
.intro-2 .fg-desc p {margin-top: 35px;}
.intro-2 .fg-desc strong {display: block;}
.intro-2 .fg-desc h4 {font-size: 26px;}

.photo-video-sec {margin-bottom: 0; background-color: #fafafa;}
.photo-video-sec > div {padding: 100px 20px 125px;}
.photo-video-sec .photo-video-list li {margin: 50px 0 0;}
.photo-video-sec .photo-video-list .fg-caption {background-color: #fff;}
.is-online .photo-video-list li > a:hover, .is-online .photo-video-list li > a:focus {box-shadow: 0 0 16px 4px rgba(1, 0, 0, 0.12) !important;}

.site-sec {background-color: #35b0e0;}
.site-sec > div {padding: 55px 20px 80px;}
.site-sec h3 {font-size: 30px; color: #fff; text-align: center;}
.site-sec ul {margin-top: 30px; text-align: center;}
.site-sec li {display: inline-block; padding: 8px 5px; width: 30%; min-width: 100px; max-width: 145px; vertical-align: middle;}
.site-sec a {display: block; padding: 5px; height: 55px; line-height: 45px; font-weight: 500; color: #35b0e0; text-align: center; border-radius: 5px; background-color: #fff;}
/*.site-sec li:last-child a {line-height: 1.4;}*/
.site-sec a span {display: block;}

@media all and (max-width: 1024px){
     .main-visual > div {padding: 8% 20px 15%;}
     .main-visual .mv-bg {height: 40%;}
     .intro-sec h3 span {display: inline-block;}
     .intro-1 {margin-bottom: 60px;}
     .intro-1 > div:after {left: 20px; right: 20px; width: calc(100% - 40px);}
     .intro-1 .figure-item > div {float: none; padding: 0; width: 100%; text-align: left;}
     .intro-1 .figure-item:nth-of-type(1) {margin-top: 30px;}
     .intro-1 .figure-item img {margin: 0 auto; width: 60vw;}
     .intro-1 .fg-desc {margin-top: 40px;}
     .intro-1 .fg-desc h4 span {display: inline-block;}
     .intro-2 .grid {margin-top: 30px;}
     .intro-2 .grid li {width: 33.33%;}
     .intro-2 .figure-item {padding: 20px 0;}
     .intro-2 .fg-desc p {margin-top: 0;}
}
@media all and (max-width: 640px){
     .intro-2 .grid li {width: 50%;}
}
@media all and (max-width: 440px){
     .vertical-rolling .roll-item {padding: 0 10px;}
     .intro-2 .grid li {float: none; width: 100%;}
     .intro-2 .fg-desc strong {display: inline-block;}
}
@media all and (max-width: 400px){
     .site-sec > div {padding-bottom: 55px;}
     .site-sec ul {margin-top: 20px;}
     .site-sec li {display: block; margin: 0 auto; width: 80%; max-width: 100%;}
     .site-sec a {line-height: 45px !important;}
     .site-sec a span {display: inline-block;}
}

@media all and (min-width: 401px){
     .is-online .site-sec a {-webkit-box-reflect: below 0px linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.2));}
}