@charset "UTF-8";
/* ******************** 공통부분 ******************** */
.cl_round {height: 40px; padding: 0 15px;  color:#fff; border-radius:30px; box-sizing: border-box;}
.cl_pink {background-color: #f6a6b8;}
.cl_green {background-color: #66d1a2;}
.cl_skyblue {background-color: #91c1fa;}
.cl_purple {background-color: #b1a2f1;}
.cl_gray {background-color: #b6c2c8;}
.cl_orange {background-color: #ef9874;}
.cl_pitch {background-color: #fa9c92;}


/* ******************** layout ******************** */
/*.contentWrap {width: 100%; max-width: 1200px; margin: 0 auto;}*/

/* ******************** header ******************** */
.header-m {display: none;}
header {display: inline-block; width: 300px; /*width: 15%;*/}
header .headerWrap {width: inherit; padding: 0 30px; box-sizing: border-box;}
header .headerTop {display: flex; justify-content: center; align-items: center; height: 45px; margin-top: 15px; margin-bottom: 40px}
header .headerTop a {font-size: 14px; color: #707070;white-space: nowrap;}
header .headerTop a:after {content: ''; display: inline-block; width: 1px; height: 11px; margin: 0 5px; background-color: #e1e1e1;}
header .headerTop a:last-child:after {content: none;}

header .logo {margin-bottom: 86px;}
header .logo img {width: 100%;}
header .menu {}
header .menu li  {margin-bottom: 50px;}
header .menu li:last-child  {margin-bottom: 0;}
header .menu li a {display: flex; align-items: center; color: #252525; font-size: 22px;font-weight: 500; white-space: nowrap;}
header .menu li img {margin-right: 15px;}
/* ******************** footer ******************** */
.footer-a-wrap {display: flex; justify-content: space-between;}
.footer-a-wrap .fl-item-l {display: block !important;}
.footer-a-wrap .fl-item-r {float: none!important; margin-left: auto;}
.footer-a-wrap {max-width: 1620px !important; margin: unset;}
.footer-a-wrap a {color: #707070; font-size: 12px;}
.footer-a-wrap .fl-item-r span {color: #959595; font-size: 11px;}

/* ******************** 본문 ******************** */
.sectionInner {display: flex; height: calc(100vh - 60px);}
.section {overflow-x: auto; width: 100%; border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; box-sizing: border-box;}
.section .sectionInnerCon { width: 100%; max-width: 1325px; }
/*
    본문 상단부
*/
.section .sectionTop {}
.section .sectionTop .searchArea {position: relative; display: flex; height: 420px;}

.section .sectionTop .searchArea .mainSwiper {position: relative; overflow: hidden; width: 883px; height: inherit;}
.section .sectionTop .searchArea .mainSwiper .swiper-wrapper {position: relative;}
.section .sectionTop .searchArea .mainSwiper .swiper-slide {background: url("../../resources/images/common/slideImg01.jpg") no-repeat center;
    width: 100%; height: inherit; background-size: cover; }


.section .sectionTop .searchArea .pagenationInner {position: absolute; bottom: 40px; left: -33px; display: flex; justify-content: flex-end; align-items: center;
width: 100%; z-index: 10;}
.pagenationInner .controlBox {position: relative !important; display: flex; right: 10px;}
.pagenationInner .btnToggle {position: relative;}
.pagenationInner .btnToggle i {display: block; cursor: pointer; color: #fff; font-size: 30px;}



.section .sectionTop .searchInner {z-index: 10; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;}
.section .sectionTop .searchInner .slogan {margin-bottom: 56px; text-align: center; font-size: 23px; color: #fff; font-weight: 200;}
.section .sectionTop .searchInner .slogan strong {font-weight: 600; font-size: 35px;}

.section .sectionTop .searchInner .search-wrap .search-normal {position: relative; width: 500px; height: 60px; background-color: #fff; border-radius: 30px;
    padding: 10px; margin-bottom: 48px; box-sizing: border-box;}
.section .sectionTop .searchInner .search-wrap input[type="text"] {width: 100%; background-color: #fff; font-size: 20px;
    color: #999; font-weight: 400; padding: 5px; box-sizing: border-box;border: none; }
.section .sectionTop .searchInner .search-wrap input::placeholder {font-size: inherit; color: inherit; font-weight: inherit;}
.section .sectionTop .searchInner .search-wrap .search-normal .btn-search {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
    background: url("../../resources/images/common/icon_search.png") no-repeat center;}

.section .sectionTop .searchInner .search-Bottom {display: flex; justify-content: center; align-items: center;}
.section .sectionTop .searchInner .search-Bottom p {margin-right: 5px; font-size: 15px; color: #d7d7d7; font-weight: 400;}
.section .sectionTop .searchInner .search-Bottom button {text-align: center; background-color: #88a156;}
.section .sectionTop .searchInner .search-Bottom button span {color: #fff; font-size: 16px; font-weight: 500;}
/* 페이지네이션 */
.section .sectionTop .swiper-pagination-fraction,
.section .sectionTop .swiper-pagination-custom,
.section .sectionTop .swiper-container-horizontal > .swiper-pagination-bullets {width: auto; bottom: 36px; left: 84%;}

/* 페이지네이션 색깔 수정 */
.swiper-pagination-bullet {margin-right: 15px; opacity:0.5 !important;  background:#ffffff !important;}
.swiper-pagination-bullet:last-child {margin-right: 0;}
.swiper-pagination-bullet-active {opacity:1 !important; background: #fff !important;}

/* 검색어 */
.section .sectionTop .labelArea {overflow: hidden; max-width: 33.3333%; background-color: #745540; padding: 15px; box-sizing: border-box;}
.section .sectionTop .labelArea .tit {margin-bottom: 40px; font-size: 22px; color: #fff; font-weight: 500;}
.section .sectionTop .labelArea .labelInner {overflow: hidden; display:flex; flex-wrap:wrap; align-items: flex-start; padding:10px 0 0 10px; margin:-10px;}
.section .sectionTop .labelArea .labelInner .gridCell {
    box-sizing:border-box;
    border:0 solid transparent;
    border-width:0 10px 20px 0;}

.section .sectionTop .labelArea .labelInner a {display: inline-flex; justify-content: center; align-items: center;
    font-weight: 600;}


/*
    본문 하단부
*/
.section .sectionBottom {display: flex; height:calc(100vh - 480px); overflow-y: hidden;}

/* 타이틀부분 */
.cl_list .tit {position: relative; height: 25px; font-weight: 600; color: #745540; margin-bottom: 15px;}
.cl_list .tit:after {position: absolute; content: ''; display: block; left: 0; top: 25px; width: 20px; height: 1px;
    background: #745540;}

/* list */
.cl_list {width: calc(100% /3); height:100%; overflow-y: auto;}
.cl_list .swiper-container {display: none;}
.cl_list {display: flex; border-right: 1px solid #d7d7d7; box-sizing: border-box;}
.cl_list .listInner {display: flex; flex-direction: column; padding: 15px; box-sizing: border-box;}
.cl_list .listInner .contents {display: inline-flex; flex-direction: column; margin-bottom: 20px;}
.cl_list .listInner .contents span {display: inline-block; margin-bottom: 15px;}
.cl_list .listInner .contents span:last-child {margin-bottom: 0;}
.cl_list .listInner .contents .mainTit {color: #252525; font-size: 20px; font-weight: 500;}
.cl_list .listInner .contents .subTit {color: #777; font-size: 14px; font-weight: 400;}
/* pcVer 이미지 */
.cl_list .listInner .pcVer .contents img {width: 100%;}

/* 본문 대제목, 소제목이 상단으로 와야할 경우 .typeReverse */
.cl_list .contents.typeReverse {display: flex; flex-direction: column-reverse; margin-bottom: 0;}
.cl_list .contents.typeReverse .subTxtBox span {margin-bottom: 15px;}
.cl_list .contents.typeReverse > span img {margin-bottom: 0;}

/* 버튼 삭제 */
.cl_list .swiper-button-prev,
.cl_list .swiper-container-rtl .swiper-button-next {display: none;}
.cl_list .swiper-button-next:after,
.cl_list .swiper-container-rtl .swiper-button-prev:after{display: none;}

/* ******************** 반응형 진입 ******************** */


@media (max-width: 1480px) {
    .cl_round {height: 35px;}

    /* 검색어 */
    .section .sectionTop .labelArea {padding: 15px;}
    .section .sectionTop .labelArea .tit {margin-bottom: 20px; font-size: 22px; color: #fff; font-weight: 500;}
    .section .sectionTop .labelArea .labelInner {padding:10px 0 0 10px; margin:-10px;}
    .section .sectionTop .labelArea .labelInner .gridCell {border-width:0 1vw 1vw 0;}
    .section .sectionTop .labelArea .labelInner a {font-size: 15px; font-weight: 600;}
}

@media (max-width: 1200px){

    /* ******************** header ******************** */
    header {display: block; width: 100%; height: 113px; /*z-index: 20; position: fixed;*/}
    header .headerWrap {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; height: inherit;}
    header .headerTop {height: auto; margin-top: 0; margin-bottom: 0; margin-left: 5px;}
    header .headerTop a {font-size: 1.3232514177693762vw;}
    header .logo {order: 1; width: 230px; margin-bottom: 0; margin-right:8.41209829867675vw;}
    header .logo img {width: 100%;}
    header .menu {display: flex; align-items: center; margin-right: auto; height: inherit;}
    header .menu li  {margin-bottom: 0; margin-right: 25px;}
    header .menu li:last-child {margin-right: 0;}
    header .menu li a {/*font-size: 20px;*/ font-size: 1.890359168241966vw; }
    header .menu li img {margin-right: 1.4vw;}

    /* ******************** footer ******************** */

    .footer-a-wrap {max-width: 1625px !important; margin: unset;}
    .footer-a-wrap a {color: #707070; font-size: 12px;}
    .footer-a-wrap .fl-item-r span {color: #959595; font-size: 11px;}


    /* ******************** 본문 ******************** */
    .sectionInner {display: block; flex-flow: row; height: auto;}
    .section {overflow-x: auto; width: 100%; border: none;}
    /*
        본문 상단부
    */
    .section .sectionTop .searchInner {width: 100%; padding: 0 15px; box-sizing: border-box;}

    .section .sectionTop .searchArea .mainSwiper {/*width: 60vw;*/ width: 100%;}
    .section .sectionTop .searchArea .mainSwiper .swiper-slide {background: url("../../resources/images/common/slideImg01.jpg") no-repeat center left;
        background-size: cover; width: 100%; height: 420px;}
    .section .sectionTop .searchInner .slogan {font-size: 2.3vw;}
    .section .sectionTop .searchInner .slogan strong {font-size: 3.5vw; font-weight: 600;}
    .section .sectionTop .searchInner .slogan .hidden {display: none;}

    .section .sectionTop .searchInner .search-wrap {width: 100%;}
    .section .sectionTop .searchInner .search-wrap .search-normal {width: inherit; height: 60px; margin-bottom: 24px;}
    .section .sectionTop .searchInner .search-wrap input[type="text"] {width: 100%; font-size: 20px;}
    .section .sectionTop .searchInner .search-wrap input::placeholder {font-size: inherit; color: inherit; font-weight: inherit;}
    .section .sectionTop .searchInner .search-wrap .search-normal .btn-search {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
        background: url("../../resources/images/common/icon_search.png") no-repeat center;}
    /* 검색어 */
    .section .sectionTop .labelArea {max-width: 33.3333%; /*max-width: 40vw; max-width: calc(100% - 400px);*/ min-height: 420px;}
    /*.section .sectionTop .labelArea .labelInner .gridCell {border-width:0 1vw 1vw 0;}*/
    /*
        본문 하단부
    */
    .cl_list:last-child {border-right: none;}
    .cl_list .listInner .contents .mainTit {font-size: 18px;}
    .cl_list .listInner .contents .subTit {font-size: 13px;}
}

@media (max-width: 768px){
    .cl_round {height: 30px;}
    /* ******************** header ******************** */
    header {display: none;}
    .header-m {display: flex; width: 100%; height: 60px; justify-content: space-between; align-items: center; padding: 0 15px; box-sizing: border-box;}
    .header-m .logo {display: inline-block; margin: 0 auto;}
    .header-m .logo img {display: block; width: 130px; height: auto;}
    .header-m .headerNav {display: flex;}
    .header-m .headerNav > a {display: block; width: 27px; height: 27px; margin-right: 5px;}
    .header-m .headerNav > a:last-child {margin-right: 0;}
    .header-m .headerNav img {}
    .header-m .headerNav i {font-size: 27px;}


    /* ******************** footer ******************** */
    .footer-a {background: #fff !important;}
    .footer-a-wrap {display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
    .footer-a-wrap .fl-item-l {display: flex !important; justify-content: center; float: none;}
    .footer-a-wrap a {font-size:11px; padding: 5px 0;}
    .footer-a-wrap .fl-item-r {margin: 0 auto;}
    .footer-a-wrap .fl-item-r span {font-size: 8px !important;}
    /* ******************** 본문 ******************** */
    .section {overflow-x: auto; width: 100%; border: none;}
    /*
        본문 상단부
    */
    .section .sectionTop .searchArea {flex-flow: column; height: auto;}
    .section .sectionTop .searchArea .mainSwiper {width: 100%;}
    .section .sectionTop .searchArea .mainSwiper .swiper-slide {background: url("../../resources/images/common/m_slideImg01.jpg") no-repeat center center;
        background-size: cover; width: 100%; height: 0; padding-top: 75%;}

    .section .sectionTop .searchArea .pagenationInner {bottom: 20px; left: auto; justify-content: center;}
    .pagenationInner .controlBox {position: relative !important; display: flex; right: 10px;}
    .pagenationInner .btnToggle i {font-size: 20px;}
    .section .sectionTop .searchInner .slogan {font-size: 17px; margin-bottom: 28px;}
    .section .sectionTop .searchInner .slogan strong {font-size: 25px;}

    .section .sectionTop .searchInner .search-wrap {}
    .section .sectionTop .searchInner .search-wrap .search-normal {width: inherit; height: 35px; margin-bottom: 15px;}
    .section .sectionTop .searchInner .search-wrap form {position: absolute; top: 0; left: 0; width: 100%; height: inherit; }
    .section .sectionTop .searchInner .search-wrap input[type="text"] {width: 100%; height: inherit; font-size: 14px; border-radius: 30px;}
    .section .sectionTop .searchInner .search-wrap input::placeholder {font-size: inherit; color: inherit; font-weight: inherit;}
    .section .sectionTop .searchInner .search-wrap .search-normal .btn-search {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px;
        background: url("../../resources/images/common/icon_search.png") no-repeat 0 0 / cover;}

    .section .sectionTop .searchInner .search-Bottom p {font-size: 11px; letter-spacing: -1px;}
    .section .sectionTop .searchInner .search-Bottom button span {font-size: 13px;}
    /* 검색어 */
    .section .sectionTop .labelArea {max-width: 100%; min-height: auto; width: 100%;}
    .section .sectionTop .labelArea .labelInner {overflow: hidden; /*overflow: scroll;*/ height: 100px;}
    .section .sectionTop .labelArea .labelInner .gridCell {border-width:0 10px 20px 0;}
    .section .sectionTop .labelArea .labelInner .gridCell a {font-size: 13px;}
    .section .sectionTop .labelArea .tit {display: none;}
    /*
        본문 하단부
    */
    .section .sectionBottom {flex-flow: column; height:auto;}
    .cl_list .listInner .contents .mainTit {font-size: 20px;}

    /* 타이틀부분 */
    .cl_list .tit {position: relative; height: 25px; font-size: 17px; font-weight: 600; color: #745540; margin-bottom: 15px;}
    .cl_list .tit:after {content: none;}

    /* list */
    .cl_list {position: relative; width: calc(100% / 1); border-bottom: 1px solid #d7d7d7; border-right: 0;}
    .cl_list .pcVer {display: none;}

    .cl_list .listInner {width: 100%; padding: 30px 30px;}
    .cl_list .listInner .swiper-container {display: block; width: inherit;}
    .cl_list .listInner .swiper-container img {width: 100%; margin-bottom: 15px;}
    .cl_list .listInner .swiper-container .contents .subTxtBox {display: flex; flex-direction: column;}
    .cl_list .listInner .swiper-container .contents .subTit {flex-flow: column; font-size: 15px; line-height:1.8;}

    /* 버튼 삭제 */
    .cl_list .swiper-button-prev,
    .cl_list .swiper-container-rtl .swiper-button-next {display: block; color: #b0b0b0 !important;}
    .cl_list .swiper-button-next:after,
    .cl_list .swiper-container-rtl .swiper-button-prev:after{display: block; color: #b0b0b0 !important;}

    .cl_list .swiper-button-prev {background: url("../../resources/images/common/prevBtn.png") no-repeat center; background-size: 50% auto;}
    .cl_list .swiper-button-next {background: url("../../resources/images/common/nextBtn.png") no-repeat center; background-size: 50% auto;}

    .cl_list .swiper-button-prev::after,
    .cl_list .swiper-button-next::after {display: none;}

    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 0px !important;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 0px !important;}
}