@charset "utf-8";
/* @import "font.css"; */ /* 방식1*/
/* 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #333;
}
ul,
li {
    list-style: none;
}
img {
    vertical-align: top;
}
::-webkit-scrollbar {
    width: 8px;
    height: 5px;
    border-radius: 0;
    background-color: #f7f7f7;
}
::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 2px;
}

/* 공통클래스 */
body {
    color: #333;
    font-family: "Open Sans", GmarketSansMedium, GmarketSansLight, GmarketSansBold, "맑은 고딕", "돋움", Dotum, "굴림", Gulim, Sans-serif;
}
.container {
    max-width: 1400px;
    margin: 0 auto;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
/* typo */
h3 {
    margin-bottom: 25px;
    font-size: 22px;
    color: #0e62b2;
    font-weight: 400;
}
/* btn */
.btn-more {
    position: absolute;
    top: 40px;
    right: 30px;
    padding-left: 18px;
    background: url('../images/plus-black.png') no-repeat left center;
}
/* 전체메뉴 마스크 */
.all-menu-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0b0b0b;
    opacity: 0.7;
    z-index: 99;
    display: none;
}
.all-menu-mask.active {
    display: block;
}
/* 전체메뉴 */
.all-menu-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    overflow-y: auto;
    padding: 0 8px;
    display: none;
}
.all-menu-wrapper.active {
    display: block;
}
.all-menu-wrapper .menu-content {
    position: relative;
    max-width: 1500px;
    margin: 180px auto 0;
    padding: 80px 86px 90px;
    background: #fff;
}
.all-menu-wrapper .menu-content h2 {
    font-size: 32px;
    padding-left: 15px;
    color: #222;
    font-weight: 400;
    line-height: 48px;
}
.all-menu-wrapper .menu-content h2 strong {
    color: #2578de;
    letter-spacing: -1.6px;
    margin-right: 15px;
    font-weight: 700;
}
.all-menu-wrapper .menu-content .all-menu-nav {
    border-bottom: 1px solid #dedede;
    /* 자간 제거 */
    font-size: 0;
}
.all-menu-wrapper .menu-content .all-menu-nav > li {
    display: inline-block;
    width: calc(100% / 6);
    padding: 45px 15px;
    font-size: 15px;
    vertical-align: top;
}
.all-menu-wrapper .menu-content .all-menu-nav > li > a {
    display: block;
    min-height: 76px;
    font-size: 19px;
    border-bottom: 2px solid #444;
    padding-bottom: 15px;
    color: #222;
    word-break: keep-all;
    transition: color .3s;
}
.all-menu-wrapper .menu-content .all-menu-nav > li:hover > a {
    color: #2578de;
    border-bottom: 2px solid #2578de;
}
.all-menu-wrapper .menu-content .all-menu-submenu {
    margin-top: 30px;
}
.all-menu-wrapper .menu-content .all-menu-submenu li {
    margin-top: 5px;
    line-height: 1.8;
}
.all-menu-wrapper .menu-content .all-menu-submenu li:first-child {
    margin-top: 0;
}
.all-menu-wrapper .menu-content .all-menu-submenu li a {
    display: block;
    color: #666;
    line-height: 27px;
    font-weight: 500;
    word-break: keep-all;
    transition: color .3s;
}
.all-menu-wrapper .menu-content .all-menu-submenu li:hover a {
    color:#2578de;
}
/* 전체 메뉴 닫기 버튼 */
.all-menu-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    padding: 22px;
    background: #2578de;
}
.all-menu-close .menu-btn {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.all-menu-close .menu-btn .btn-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: transform 0.6s ease;
}
.all-menu-close .menu-btn .line01 {
    transform: rotate(-45deg);
}
.all-menu-close .menu-btn .line02 {
    transform: rotate(45deg);
}
.all-menu-close:hover .menu-btn .line01 {
    transform: rotate(45deg);
}
.all-menu-close:hover .menu-btn .line02 {
    transform: rotate(135deg);
}
/* 전체메뉴 반응형 */
@media screen and (max-width: 1580px) {
    .all-menu-wrapper {
        padding: 0 30px;
    }
    .all-menu-wrapper .menu-content {
        padding: 68px 62px;
    }
    .all-menu-wrapper .menu-content h2 {
        font-size: 28px;
    }
    .all-menu-wrapper .menu-content .all-menu-nav {
        margin-top: 25px;
    }
    .all-menu-wrapper .menu-content .all-menu-nav > li {
        font-size: 14px;
        padding: 35px 15px;
    }
    .all-menu-wrapper .menu-content .all-menu-nav > li > a {
        font-size: 18px;
    }
    .all-menu-wrapper .menu-content .all-menu-submenu {
        margin-top: 24px;
    }
    .all-menu-close {
        width: 60px;
        height: 60px;
    }
}
@media all and (max-width: 1220px) {
    .all-menu-wrapper {
        display: none;
    }
    .all-menu-mask {
        display: none;
    }
}


/* 모바일 메뉴 버튼 */
.mb-bt {
    position: fixed;
    right: 20px;
    top: 25px;
    width: 24px;
    height: 14px;
    z-index: 101;
    display: none;
}
.mb-bt::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
}
.mb-bt .line {
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 100%;
    height: 2px;
    background-color: #333;
}
.mb-bt::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    /* top: calc(100% - 2px); */
    /* bottom: 0; */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #333;
}
.mb-bt.active::before {
    top: 50%;
    transform: rotate(45deg);
}
.mb-bt.active .line {
    width: 0;
}
.mb-bt.active::after {
    top: 50%;
    transform: rotate(-45deg);
}
/* 모바일 메뉴 */
.mb-nav {
    position: fixed;
    top: 0;
    right: 0;
    right: -360px;
    width: 360px;
    height: 100%;
    background-color: #fff;
    z-index: 100;
    transition: 0.3s;
}
.mb-nav.active {
    right: 0;
}
.mb-nav .mb-nav-top {
    padding: 70px 20px 18px;
}
.mb-nav .mb-nav-top a {
    display: inline-block;
    font-size: 13px;
    color: #999;
    padding: 6px 10px;
    min-width: 90px;
    text-align: center;
    border-radius: 20px;
    border: 2px solid #eee;
}
.mb-nav .mb-nav-top a:hover {
    background-color: #f5f5f5;
    transition: 0.3s;
}
.mb-nav .mb-nav-top a + a {
    margin-left: 4px;
}

/* main */
.mb-nav .mb-nav-main {
    padding: 21px 0 11px;
    height: calc(100% - 123px);
    overflow-y: auto;
}
.mb-nav .mb-nav-main .mb-menu {}
.mb-nav .mb-nav-main .mb-menu > li {
    height: 55px;
    overflow: hidden;
    transition: height .5s;
}
.mb-nav .mb-nav-main .mb-menu > li .mb-mainMenu {
    display: block;
    font-size: 18px;
    line-height: 27px;
    color: #444;
    background-color: #fff;
    padding: 14px 20px;
}
/* mb-subMenu */
.mb-nav .mb-nav-main .mb-menu > li .mb-subMenu {
    padding: 11px 20px;
    margin: 0 20px;
    background-color: #f5f5f5;
}
.mb-nav .mb-nav-main .mb-menu > li .mb-subMenu li {
    border-top: 1px solid #e9e9e9;
}
.mb-nav .mb-nav-main .mb-menu > li .mb-subMenu li:first-child {
    border-top: 1px solid transparent;
}
.mb-nav .mb-nav-main .mb-menu > li .mb-subMenu li a {
    display: block;
    padding: 15px 0;
    font-size: 14px;
    line-height: 21px;
    color: #666;
}
/* 모바일 메뉴 마스크 */
.mb-menu-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 99;
    display: none;
}
.mb-menu-mask.active {
    display: block;
}

/* ================= 헤더영역 ================= */
.header {
    position: relative;
    width: 100%;
    background-color: #fff;
    z-index: 98;
}
.header .container {
    height: 98px;
    position: relative;
    /* border: 1px solid darkgreen; */
}
/* logo */
.header .logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.header .logo a {
    display: block;
}
.header .logo a img {}
/* navigatino */
.header nav {
    position: absolute;
    right: 275px;
    top: 0;
    white-space: nowrap;
}
.header nav .menu {}
.header nav .menu > li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    transition: .3s;
}
.header nav .menu > li:hover > a {
    color: #2578de;
}
.header nav .menu > li > a {
    display: block;
    margin: 20px 0 5px;
    padding: 0 15px;
    height: 60px;
    line-height: 60px;
    font-size: 19px;
    color: #333;
}
.header nav .menu > li:last-child > a {
    font-size: 0;
}
.header nav .menu > li > a > span {
    /* letter-spacing: -4px; */
    font-size: 19px;
    letter-spacing: 0;
}
.header nav .menu > li > ul {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 182px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.08);
    border: 1px solid rgba(255,255,255,.3);
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-in;
    /* z-index: 98; */
}
.header nav .menu > li > ul li {
    border-top: 1px solid #eaeaea;
    box-sizing: content-box;
}
.header nav .menu > li:hover > ul {
    opacity: 1;
    visibility: visible;
    top: 88%;
}
.header nav .menu > li > ul li:first-child {
    /* border-top: 0; */
    border-top-color: transparent;
}
.header nav .menu > li > ul li a {
    display: block;
    width: 100%;
    padding: 12px 15px 13px;
    font-size: 14.4px;
    text-align: center;
    line-height: 1.5;
    font-weight: 300;
    transition: .3s;
}
.header nav .menu > li > ul li:hover a {
    color: #2578de;
}
/* util */
.header .gnb-util {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
}
.header .gnb-util .gnb-wrap {
    float: left;
}
.header .gnb-util .gnb-wrap li {
    float: left;
    margin-left: 20px;
    margin-top: 10px;
}
.header .gnb-util .gnb-wrap li a {
    color: #666;
    font-weight: bold;
    font-family: 'GmarketSansLight';
}
.header .gnb-util .all-menu {
    float: left;
    margin-left: 19px;
}
.header .gnb-util .all-menu img {}

/* 헤더영역 반응형 */
/* breakPoint - 1500px */
@media all and (max-width: 1500px) {
    .header .container {
        height: 90px;
        margin: 0 50px;
    }
    /* logo */
    .header .logo {
        bottom: 25%;
        transform: translateY(-50%);
    }
    .header .logo a img {
        width: 123px;
        height: 40px;
    }
    /* navigation */
    .header nav {
        position: absolute;
        right: 85px;
        padding: 12px 0 12px 0; /* top: 0 값은 그대로 둠 */
    }
    
    .header nav .menu > li > a {
        margin: 18px 0 5px 0;
        padding: 0 20px;
        font-size: 17px;
    }
    /* util */
    .header .gnb-util {
        top: 7px;
        transform: translateY(0);
    }
    .header .gnb-util .gnb-wrap li {
        margin-left: 15px;
        margin-top: 7px;
    }
    .header .gnb-util .gnb-wrap li a {
        font-size: 14px;
    }
    .header .gnb-util .all-menu {
        margin-left: 15px;
    }
    .header .gnb-util .all-menu img {
        width: 35px;
        height: 35px;
    }
}
/* breakPoint - 1220px */
@media all and (max-width: 1220px) {
    /* 모바일 메뉴 버튼 */
    .mb-bt {
        display: block;
    }
    /* header */
    .header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
    }
    .header .container {
        height: 70px;
        margin: 0 20px;
    }
    /* logo */
    .header .logo {
        bottom: 0;
        transform: translateY(-50%);
    }
    .header .logo a img {
        width: 123px;
        height: 40px;
    }
    /* navigation */
    .header nav {
        display: none;
    }
    /* util */
    .header .gnb-util {
        display: none;
    }
    
}
/* breakPoint - 768px */
@media all and (max-width: 768px) {
    .header .container {
        height: 62px;
        margin: 0 15px;
    }
}
/* breakPoint - 385px */
@media all and (max-width: 385px) {
    .header .container {
        margin: 0 10px;
    }
}

/* ================= 본문영역 ================= */
/* 비쥬얼영역 */
.visual {
    width: 100%;
    height: 475px;
}
.visual .sw-visual {
    width: 100%;
    height: 100%;
    position: relative;
}
.visual .swiper-slide {
    width: 100%;
    height: 100%;
}
.visual .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.visual .swiper-slide .sw-slide01 {
    background: url('../images/banner_1_20200915_0.jpg') no-repeat 70% 50%;
    background-size: cover;
}
.visual .swiper-slide .sw-slide02 {
    background: url('../images/banner_4_20200915_0.jpg') no-repeat 70% 50%;
    background-size: cover;
}
.visual .swiper-slide a i {
    display: block;
    width: 100%;
    padding-top: 50%;
}

.visual .sw-visual-control {
    position: absolute;
    width: 112px;
    bottom: 30px;
    left: 50.8%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}
.visual .sw-visual-control .sw-pagination {
    width: 50%;
}
.visual .sw-visual-control .sw-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: rgba(255,255,255,1);
    margin: 0 12px 0 0;
}
.visual .sw-visual-control .sw-pagination .swiper-pagination-bullet-active {}
.visual .sw-visual-control .swiper-start {
    width: 9px;
    height: 12px;
}
.visual .sw-visual-control .swiper-start a {
    display: block;
}
.visual .sw-visual-control .swiper-start a span {
    display: block;
    width: 2px;
    height: 12px;
    background-color: #fff;
}
.visual .sw-visual-control .swiper-start a span:nth-child(1) {
    float: left;
}
.visual .sw-visual-control .swiper-start a span:nth-child(2) {
    float: right;
}
/* visual 반응형 버전 */
@media screen and (max-width: 1400px) {
    .visual {
      height: auto;  /* 위에서 높이 선언했기 때문에 auto로 설정 */
    }
    .visual .swiper-slide .sw-slide01 {
      background-image: none;
    }
    .visual .swiper-slide .sw-slide02 {
      background-image: none;
    }
    /* mb-main banner */
    .visual .swiper-slide .sw-slide01 i {
      background: url('../images/bannerm_1_20200915_0.jpg') no-repeat center center;
      background-size: cover;
    }
    .visual .swiper-slide .sw-slide02 i {
      background: url('../images/bannerm_4_20200915_0.jpg') no-repeat center center;
      background-size: cover;
    }
  }  
@media screen and (max-width: 1220px) {
    .visual .swiper-slide a i {
      margin-top: 70px;
    }
  }
  @media screen and (max-width: 768px) {
    .visual .swiper-slide a i {
      margin-top: 62px;
    }
}
/* 퀵메뉴영역 */
.quick-menu {
    width: 100%;
    background-color: #f2f4f7;
    padding: 14px 0 12px;
    /* 높이값 없음. padding으로 처리 */
}
.quick-menu .container {}
.quick-menu ul {}
.quick-menu ul li {
    float: left;
    width: calc( 100% / 5);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    
}

.quick-menu ul li:last-child {
    border: 0;
}
.quick-menu ul li a {
    display: block;
    width: 100%;
    font-size: 17px;
    text-align: center;
    padding: 30px 0 30px 75px;
    transition: .3s;
}
.quick-menu ul li:hover a {
    transform: translateX(-5px);
}
.quick-menu ul li:nth-child(1) a {
    background: url('../images/img_icon01.svg') no-repeat 24% center;
    background-size: 56px 56px;
}
.quick-menu ul li:nth-child(2) a {
    background: url('../images/img_icon02.svg') no-repeat 30% center;
    background-size: 56px 56px;
}
.quick-menu ul li:nth-child(3) a {
    background: url('../images/img_icon03.svg') no-repeat 27% center;
    background-size: 56px 56px;
}
.quick-menu ul li:nth-child(4) a {
    background: url('../images/img_icon04_new.png') no-repeat 24% center;
    background-size: 56px 56px;
}
.quick-menu ul li:nth-child(5) a {
    background: url('../images/img_icon05_new.png') no-repeat 30% center;
    background-size: 56px 56px;
}
/* 퀵메뉴반응형 */
@media screen and (max-width: 1300px) {
    .quick-menu {
        padding: 0;
    }
    .quick-menu ul li {
        width: calc( 100% / 3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .quick-menu ul li:nth-child(3) {
        border-right: 0;
    }
    .quick-menu ul li:nth-child(4) {
        border-bottom: 0;
        margin-left: 16.8%;
    }
    .quick-menu ul li:nth-child(5) {
        border-bottom: 0;
    }
}
@media screen and (max-width: 768px) {
    .quick-menu ul li a {
        font-size: 16px;
        line-height: 24px;
        text-align: left;
        padding: 20px 0 18px 92px;
        background-size: 35px 35px !important;
        background-position: 35px center !important;
        /* background-size, background-position 설정한 곳이 우선순위가 더 강하기 때문에 !important 사용 */
    }
}
@media screen and (max-width: 600px) {
    .quick-menu ul li {
        width: calc( 100% / 2);
    }
    .quick-menu ul li:nth-child(3) {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
    .quick-menu ul li:nth-child(4) {
        margin-left: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .quick-menu ul li:nth-child(2n) {
        border-right: 0;
    }
    .quick-menu ul li a {
        font-size: 16px;
        line-height: 24px;
        padding: 20px 0 18px 62px;
        background-position: 15px center !important;
    }
}
/* notice영역 */
.notice {
    width: 100%;
    padding: 70px 0 60px;
}
.notice .container {}
/* left-box */
.notice .notice-left {
    position: relative;
    float: left;
    width: 470px;
    height: 372px;
    margin-right: 20px;
    border: 1px solid #e6e8eb;
    padding: 36px 30px;
}
.notice .notice-left h3 {
    padding-bottom: 20px;
    background: url('../images/img_bg_line.png') repeat-x left bottom;
}
.notice .notice-left ul {}
.notice .notice-left ul li {
    border-bottom: 1px solid #e6e6e6;
    padding: 14px 0;
    overflow: hidden;
}
.notice .notice-left ul li:last-child {
    border-bottom: 0;
}
.notice .notice-left ul li a {
    display: block;
    float: left;
    width: 68%;
    font-size: 16px;
    line-height: 24px;
    color: #444;
    font-weight: 200;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notice .notice-left ul li .date {
    float: right;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #444;
    cursor: pointer;
}
/* right-box */
.notice .notice-right {
    position: relative;
    float: right;
    width: 390px;
    /* height: 372px; */
    border: 1px solid #e6e8eb;
    padding: 36px 30px;
}
.notice .notice-right h3 {
    margin-bottom: 14px;
    padding-left: 10px;
}
.notice .notice-right .cal-top {
    width: calc(100% - 6px);
    margin: 0 auto 10px auto;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    /* border: 1px solid green; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notice .notice-right .cal-top span {
    display: block;
    width: 34px;
    height: 34px;
    font-size: 0;
    text-indent: -9999px;
    background: url('../images/img_arrow01.svg') no-repeat center center/6px 10px;
    border: 1px solid #e1e1e1;

}
.notice .notice-right .cal-top .prev-month {}
.notice .notice-right .cal-top .next-month {
    transform: rotate(-180deg);
}
/* table */
.notice .notice-right .cal-table {
    width: 100%;
}
.notice .notice-right .cal-table .calender {
    width: 100%;
    border-collapse: collapse;
    color: #333;
    background: #fff;
}
.notice .notice-right .cal-table .calender thead {}
.notice .notice-right .cal-table .calender thead tr {}
.notice .notice-right .cal-table .calender thead tr th {
    padding: 5px 0;
    background-color: #fff;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    font-size: 15px;
    font-weight: 400;
    line-height: 22.5px;
}

.notice .notice-right .cal-table .calender tbody {}
.notice .notice-right .cal-table .calender tbody::before {
    content: '@';
    display: block;
    text-indent: -999999px;
    line-height: 5px;
}
.notice .notice-right .cal-table .calender tbody tr {}
.notice .notice-right .cal-table .calender tbody tr td {}
.notice .notice-right .cal-table .calender tbody tr td span {
    display: block;
    width: 30px;
    height: 30px;
    margin: 2px auto;
    background-color: #f7f7f7;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    font-weight: 600;
}
.notice .notice-right .cal-table .calender tbody tr .day-on span {
    color: #fff !important;
    background-color: #e50e6a;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.sun {
    color: #ff3333;
}
.sat {
    color: #0066ff;
}
.notice .notice-right .btn-more {}
/* notice 반응형 */
@media screen and (max-width: 1500px) {
    .notice .container {
        margin: 0 50px;
    }
}
@media screen and (max-width: 1300px) {
    /* left-box */
    .notice .notice-left {
        width: 49%;
        height: auto;
        margin-bottom: 40px;
        margin-right: 0;
    }
    /* right-box */
    .notice .notice-right {
        width: 49%;
        height: auto;
    }
}
@media screen and (max-width: 1280px) {
    .notice .container {
        margin: 0 20px;
    }
}
@media screen and (max-width: 1199px) {
    .notice .notice-left h3,
    .notice .notice-right h3 {
        font-size: 20px;
    }
}
@media screen and (max-width: 768px) {
    .notice {
        padding: 20px 0 25px;
    }
    .notice .container {
        margin: 0 15px;
    }
    /* left-box */
    .notice .notice-right,
    .notice .notice-left {
        width: 100%;
        margin-bottom: 25px;
        padding: 25px 15px;
    }
    .notice .notice-left ul li a {
        font-size: 14px;
    }
}
@media screen and (max-width: 600px) {
    .notice .notice-left h3,
    .notice .notice-right h3 {
        font-size: 18px;
    }
}
@media screen and (max-width: 385px) {
    
}
/* 갤러리영역 */
.gallery {
    width: 100%;
    padding: 70px 0 90px;
    background: url('../images/img_bottombg.jpg') no-repeat center;
    background-size: cover;
}
.gallery .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 활동갤러리 */
.gallery .act-gallery {
    width: calc(100% - 460px);
    position: relative;

}
.gallery .act-gallery h3 {
    color: #fff;
}
.gallery .act-gallery .gallery-boxes {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}
.gallery .act-gallery .gallery-box {
    width: 32%;
    background-color: #fff;
}
.gallery .act-gallery .gallery-box .gallery-card {}
.gallery .act-gallery .gallery-box .gallery-card .gallery-pic {
    width: 100%;
    padding-top: 66%;
    position: relative;
}
.gallery .act-gallery .gallery-box .gallery-card .gallery-pic img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery .act-gallery .gallery-box .gallery-card .gallery-desc {
    padding: 25px 15px 15px;
}
.gallery .act-gallery .gallery-box .gallery-card .gallery-desc p {
    font-size: 16px;
    color: #444;
    line-height: 1.5;
    height: 47px;
    text-align: center;
    font-weight: 400;
    margin-bottom: 25px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
}
.gallery .act-gallery .gallery-box .gallery-card .gallery-desc span {
    display: block;
    text-align: center;
    font-size: 15px;
    color: #5f5f5f;
    font-weight: 600;
    line-height: 22.5px
}

.gallery .gallery-more.btn-more {
    position: absolute;
    top: 6px;
    right: 0;
    color: #fff;
    background: url('../images/plus-white.png') no-repeat;
    background-position: left;
}

/* 동영상갤러리 */
.gallery .clip-gallery {
    width: 400px;
    position: relative;
}
.gallery .clip-gallery h3 {
    color: #fff;
}
.gallery .clip-gallery .clip {
    width: 100%;
    height: 330px;
}
.gallery .clip-gallery .clip #vedioPlayer {
    width: 100%;
    height: 100%;
}
.gallery .clip-gallery .gallery-more.btn-more {}

/* 갤러리영역 반응형 */
@media screen and (max-width: 1500px){
    .gallery .container {
        margin: 0 50px;
    }
}
@media screen and (max-width: 1300px){
    .gallery {
        padding: 40px 0 20px;
    }
    .gallery .container {
        display: block;
    }
    /* 활동갤러리 */
    .gallery .act-gallery {
        width: 100%;
        margin-bottom: 40px;
    }
    /* 동영상갤러리 */
    .gallery .clip-gallery {
        width: 100%;
        margin-bottom: 40px;
    }
    .gallery .clip-gallery .clip {
        width: 100%;
        height: auto;
        padding: 40px;
        background-color: rgba(0, 0, 0, 0.2);
        text-align: center;
    }
    .gallery .clip-gallery .clip #vedioPlayer {
        width: 60%;
        height: 450px;
    }
}
@media screen and (max-width: 1280px){
    .gallery .container {
        margin: 0 20px;
    }
}
@media screen and (max-width: 1200px) {
    .gallery .act-gallery h3 {
        font-size: 20px;
    }
    .gallery .clip-gallery h3 {
        font-size: 20px;
    }
    .gallery .act-gallery .gallery-box .gallery-card .gallery-desc p {
        font-size: 15px;
    }
}
@media screen and (max-width: 1023px){
    .gallery .clip-gallery .clip #vedioPlayer {
        width: 70%;
        height: 400px;
    }
}
@media screen and (max-width: 768px){
    .gallery .container {
        margin: 0 15px;
    }
    .gallery .clip-gallery .clip #vedioPlayer {
        width: 80%;
        height: 350px;
    }

    .gallery .act-gallery .gallery-box .gallery-card .gallery-desc {
        padding: 10px 15px 15px;
    }
    .gallery .act-gallery .gallery-box .gallery-card .gallery-desc p {
        font-size: 14px;
        margin-bottom: 0;
    }
}
@media screen and (max-width: 600px){   
    .gallery .clip-gallery .clip #vedioPlayer {
        width: 100%;
        height: 250px;
    }
}
@media screen and (max-width: 485px){
    .gallery .act-gallery .gallery-boxes {
        display: block;
    }
    .gallery .act-gallery .gallery-box {
        width: 100%;
        margin: 5px 0;
    }
}
@media screen and (max-width: 385px){
    .gallery .container {
        margin: 0 10px;
    }
}
/* ================= 배너 영역 ================= */
.banner {
    background-color: #f6f6f6;
    padding: 25px 0;
}
.banner .container {}
/* 컨트롤 영역 */
.banner .banner-control {
    float: left;
    width: 166px;
    height: 57px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner .banner-control h3 {
    margin-bottom: 0;
    font-size: 20px;
    color: #3d3d3d;
    line-height: 30px;
}
.banner .banner-control .banner-control-box {
    float: right;
    width: 72px;
    height: 25px;
}
.banner .banner-control .banner-control-box ul {
    display: flex;
}
.banner .banner-control .banner-control-box ul li {
    width: 24px;
    height: 25px;
    cursor: pointer;
    border: 1px solid #ececec;
    text-align: center;
}
.banner .banner-control .banner-control-box ul .banner-back {
    background: url('../images/img_banner_prev.png') no-repeat center;
}
.banner .banner-control .banner-control-box ul .banner-play {
    background: url('../images/img_banner_play.png') no-repeat center 40%;
}
.banner .banner-control .banner-control-box ul .banner-play.active {
    background: url('../images/img_banner_stop.png') no-repeat center;
}
/* .banner .banner-control .banner-control-box ul .banner-play .material-icons {
    font-size: 14px;
    color: #979797;
    vertical-align: -2px;
} */
.banner .banner-control .banner-control-box ul .banner-forward {
    background: url('../images/img_banner_prev.png') no-repeat center;
    transform: rotateY(180deg);
}
/* 슬라이드영역 */
.banner .sw-banner {
    float: right;
    width: 1167px;
}
.banner .sw-banner .swiper-slide {
    border: 1px solid #e9e9e9;
    width: 184px;
    height: 57px;
    margin-right: 13px;
}
.banner .sw-banner .swiper-slide img {
    width: 100%;
    height: 100%;
}

/* 배너모음영역 반응형 */
@media screen and (max-width: 1500px) {
    .banner {
        padding: 30px 0 40px;
    }
    .banner.container {
        margin: 0 50px;
    }
    .banner .sw-banner {
        width: 1100px;
    }
    .banner .sw-banner .swiper-slide {
        width: 160px;
        height: 50px;
        margin-right: 10px;
    }
}
@media screen and (max-width: 1400px) {
    .banner .sw-banner {
        width: 980px;
    }
}
@media screen and (max-width: 1280px) {
    .banner.container {
        margin: 0 20px;
    }  
}
@media screen and (max-width: 1199px) {
    .banner .sw-banner {
        width: 800px;
    }
}
@media screen and (max-width: 1023px) {
    .banner {
        padding: 20px 0 30px 0;
    }
    .banner .sw-banner {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .banner .container {
        margin: 0 15px;
    }
}
@media screen and (max-width: 385px) {
    .banner.container {
        margin: 0 10px;
    }
}
/* ================= 푸터영역 ================= */
.footer {
    background: url('../images/img_footer.jpg') repeat center;
}
/* 푸터상단영역 */
.footer .footer-top {
    padding: 15px 0 30px;
}
.footer .footer-top .container {
    position: relative;
}
.footer .footer-top .btns {
    padding: 15px 0 10px;
}
.footer .footer-top .btns .btn {
    padding: 4px 10px;
    font-size: 13px;
    color: #888;
    border: 1px solid rgba(238,238,238,0.2);
    border-radius: 4px;
    outline: none;
    background-color: transparent;
    margin-right: 10px;
    font-family: "Open Sans", GmarketSansMedium, GmarketSansLight, GmarketSansBold, "맑은 고딕", "돋움", Dotum, "굴림", Gulim, Sans-serif;
    transition: 0.5s ease;
}
.footer .footer-top .btns .btn:hover {
    background-color: rgba(255,255,255,0.08);
}
.footer .footer-top p {
    font-size: 14px;
    color: #888;
    line-height: 21px;
    font-weight: 400;
    margin-top: 7px;
}
.footer .footer-top .openTime {
    margin-top: 13px;
}
.footer .footer-top .openTime em {
    font-style: normal;
    margin-right: 10px;
    margin-left: 10px;
    color: #555;
}
.footer .footer-top .address {}
.footer .footer-top .address em {
    font-style: normal;
    margin-right: 10px;
    color: #555;
}

/* gotop 버튼 */
.footer .footer-top .gotop {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    font-size: 0;
    text-indent: -99999px;
    background-color: #f74141;
    border-radius: 3px;
}
.footer .footer-top .gotop::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 6px;
    height: 10px;
    background: url('../images/img_arrow04.svg') no-repeat center;
}

/* 푸터 하단영역 */
.footer .footer-bottom {
    padding: 30px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.footer .footer-bottom .container {}
.footer .footer-bottom p {
    font-size: 14px;
    letter-spacing: 0.2px;
    font-weight: 400;
    line-height: 21px;
    color: #888;
}

/* 푸터영역 반응형 */
@media screen and (max-width: 1500px) {
    .footer .footer-top {
        padding: 42px 0 78px;
    }
    .footer .footer-top .container,
    .footer .footer-bottom .container {
        margin: 0 50px;
    }
    .footer .footer-top .gotop {
        /* right: 0; */
        top: 0;
        transform: translateY(0);
        width: 48px;
        height: 48px;
    }
}
@media screen and (max-width: 1300px) {}
@media screen and (max-width: 1280px) {
    .footer .footer-top {
        padding: 25px 0 25px;
    }
    .footer .footer-top .container,
    .footer .footer-bottom .container {
        margin: 0 20px;
    }
    .footer .footer-bottom {
        padding: 20px 0;
    }
}
@media screen and (max-width: 1023px) {}
@media screen and (max-width: 768px) {
    .footer .footer-top .container,
    .footer .footer-bottom .container {
        margin: 0 15px;
    }
    .footer .footer-top p,
    .footer .footer-bottom p {
        line-height: 19.5px;
    }
}
@media screen and (max-width: 600px) {}
@media screen and (max-width: 450px) {
    /* btns */
    .footer .footer-top .btns {
        padding: 20px 0 10px 0;
    }
    .footer .footer-top .btns .btn {
        padding: 2px 6px;
    }
    .footer .footer-top p,
    .footer .footer-bottom p {
        line-height: 19.5px;
        padding: 1px 0;
    }
    .footer .footer-top .openTime span {
        display: block;
        margin-bottom: 7px;
    }
    .footer .footer-top .openTime em {
        margin-left: 0px;
    }
    /* gotop 버튼 */
    .footer .footer-top .gotop {
        right: -10px;
        top: -25px;
        border-radius: 0 0 0 3px;
    }
}
@media screen and (max-width: 385px) {
    .footer .footer-top .btns,
    .footer .footer-top p,
    .footer .footer-bottom p {
        font-size: 12px;
    }
    .footer .footer-top .container,
    .footer .footer-bottom .container {
        margin: 0 10px;
    }
}