@charset "utf-8";

/*
default layout
*/

.grid {
    max-width: 1100px;
}

.linebreak {
    display: block;
}

.bar {
    display: inline-block;
    vertical-align: top;
}

/*
default form
*/

input,
button {
    font-family: "NanumSquare", sans-serif;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
}

/*
padding & margin setting
*/

.paddTopNo {
    padding-top: 0 !important;
}

.paddBtmNo {
    padding-bottom: 0 !important;
}

.mrgTopNo {
    margin-top: 0 !important;
}

.mrgBtmNo {
    margin-bottom: 0 !important;
}

.mrgRtNo {
    margin-right: 0 !important;
}

/*
font color setting
*/

.fntWhite {
    color: #fff;
}

.fntTenderGray {
    color: #888;
}

.fntGray {
    color: #666;
}

.fntRed {
    color: #ed1c24;
}

.fntOrange {
    color: #ff841c;
}

.fntGreen {
    color: #15894c;
}

.fntBlue {
    color: #1e34a2;
}

/*
background color setting
*/

.bgWhite {
    background: #fff;
}

.bgTenderGray {
    background: #888;
}

.bgRed {
    background: #ed1c24;
}

.bgOrange {
    background: #ff841c;
}

.bgGreen {
    background: #15894c;
}

.bgBlue {
    background: #1e34a2;
}

/*
header
*/

header .grid {
    padding: 20px 0;
}

header ul li {
    width: 33.3333333%;
}

header ul li:nth-child(2) {
    text-align: center;
}

header ul li:last-child {
    text-align: right;
}

/*
header - gnb
*/

header nav {
    padding: 15px 0;
}

header nav .gnbOpen {
    width: 24px;
    cursor: pointer;
}

header nav p {
    display: inline-block;
    padding: 5px 0 5px 20px;
    font-size: 15px;
}

/*
header - logo
*/

header h1 img {
    width: 56px;
}

/*
header - 모든기사보기
*/

header ul li:last-child a {
    display: inline-block;
    padding: 20px 0;
    font-size: 15px;
}

/*
opened gnb
*/

.openNav {
    overflow-y: hidden;
    position: fixed;
    top: 0;
    left: -50%;
    padding: 35px 50px;
    width: 38%;
    z-index: 20;
}

.openNav .inner {
    float: right;
    width: 240px;
}

.openNav .gnbClose{
    width: 24px;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

.openNav .gnbClose:hover {
    transform: rotate(90deg);
}

.openNav ul {
    padding-top: 30px;
}

.openNav li {
    display: block;
    width: 100%;
    border-top: 1px solid #e0e0e0;
}

.openNav li:last-child {
    border-bottom: 1px solid #e0e0e0;
}

.openNav li a {
    display: block;
    padding: 20px 0;
    font-size: 18px;
}

.openNav li a:hover {
    font-weight: 700;
    color: #ed1c24;
    background: url("../images/ico_nav_arrow.png") no-repeat right center;
}

.openNav .btnWrap {
    padding: 40px 0 30px;
}

.openNav .btnWrap a {
    display: block;
    margin-bottom: 10px;
    padding: 20px 0;
    font-size: 18px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.openNav .sns a {
	margin-left: 15px;
	margin-right: 15px;
}

.openNav .sns img {
    width: 50px;
}

/*
wrap mask
*/

#maskWrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    cursor: pointer;
}

/*
footer
*/

footer {
    border-top: 1px solid #e0e0e0;
}

footer .grid {
    padding: 30px 0;
}

footer p,
footer a {
    padding: 13px 0;
    font-size: 14px;
}

footer a {
    display: inline-block;
}

footer a b {
    font-size: 17px;
}

footer .bar {
    margin: 15px 15px 0;
    width: 1px;
    height: 12px;
    background: #999;
}

footer li:first-child {
    width: 65.7272727%;
}

footer li:first-child img {
    margin-right: 20px;
    width: 40px;
}

footer li:last-child {
    width: 34.2727272%;
    text-align: right;
}

/*
main - 비주얼 슬라이드
*/

main {
    text-align: center;
}

.mainSlider .owl-theme .owl-dots {
    position: absolute;
    bottom: 8.3333333%;
    left: 50%;
    transform: translateX(-50%);
}

.mainSlider .owl-theme .owl-dots .owl-dot span {
    margin: 0 5px;
    background: transparent;
    border: 2px solid #fff;
}

.mainSlider .owl-theme .owl-dots .owl-dot.active span,
.mainSlider .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff;
}

.mainSlider .item {
    position: relative;
    height: 720px;
}

.mainSlider .item .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.mainSlider .item img {
    width: auto;
    height: 100%;
}

.mainSlider .item .txt { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1100px;
}

.mainSlider .item .txt > a {
    display: block;
}

.mainSlider h1 {
    font-size: 42px;
    color: #fff;
}

.mainSlider p {
    padding: 25px 0 55px;
    line-height: 1.6;
    font-size: 20px;
    color: #fff;
}

.mainSlider .animated  {
    -webkit-animation-duration : 1.5s;
    animation-duration : 1.5s;
}

.mainSlider .animate-out {
    -webkit-animation-delay : 0;
    animation-delay : 0;
}

.mainSlider .fadeIn{
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration : 0;
    animation-duration : 0;
    -webkit-animation-delay : 0.5s;
    animation-delay : 0.5s;
}
@-webkit-keyframes fadeIn{
    0%{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
@keyframes fadeIn{
    0%{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.mainSlider .fadeOut{
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration : 0;
    animation-duration : 0;
    -webkit-animation-delay : 0.5s;
    animation-delay : 0.5s;
}
@-webkit-keyframes fadeOut{
    0%{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

.mainSlider .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp{
    0%{
        opacity: 0;
        transform: translate3d(0,30%,0)
    }
    to{
        opacity: 1;
        transform: none
    }
}
@keyframes fadeInUp{
    0%{
        opacity: 0;
        transform: translate3d(0,30%,0)
    }
    to{
        opacity: 1;
        transform: none
    }
}

.mainSlider .fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDown{
    0%{
        opacity: 1;
        transform: none
    }
    to{
        opacity: 0;
        transform: translate3d(0,50%,0);
    }
}
@keyframes fadeOutDown{
    0%{
        opacity: 1;
        transform: none
    }
    to{
        opacity: 0;
        transform: translate3d(0,50%,0);
    }
}

.mainSlider .tagArea {
    overflow: hidden;
    height: 45px;
}

/*
main - 검색영역
*/

main .searchArea .grid {
    padding: 50px 0 60px;
}

main .searchArea p {
    font-size: 20px;
}

main .searchArea p a {
    display: inline-block;
    padding-left: 1.8181818%;
    color: #fff;
}

main .searchArea p .bar {
    padding: 0;
    margin: 1px 0 0 1.8181818%;
    width: 1px;
    height: 18px;
}

main .searchArea .search {
    position: relative;
    padding-bottom: 30px;
}

main .searchArea .search input[type="text"] {
    padding: 8px 10px;
    width: 350px;
    font-size: 20px;
    border-bottom: 1px solid #fff;
    background: transparent; 
}

main .searchArea .search button {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    background: url("../images/btn_search_01.png") no-repeat center;
    background-size: 100%;
    vertical-align: top;
}

/*
main - article
*/

main article .grid {
    padding-bottom: 100px;
}

main article .title {
    padding-bottom: 40px;
}

main article .title h2 {
    font-size: 32px;
}

main article .title p {
    padding-top: 25px;
    font-size: 20px;
}

/*
main - #이주의 FOCUS #인기글
*/

main .focus .grid {
    padding-top: 80px;
}

main .focus li {
    position: relative;
    margin-right: 2%;
    width: 49%;
}

main .focus li .thumb {
    display: block;
    position: relative;
    overflow: hidden;
    padding-bottom: 66.32%;
    height: 0;
}

main .focus li .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: 100%;
}

main .focus li .txt {
    position: absolute;
    left: 0;
    bottom: 30px;
    padding: 0 30px;
    width: 100%;
}

main .focus li .txt h3 {
    height: 52px;
    line-height: 1.3;
    font-size: 20px;
    text-align: left;
}

main .focus li .ctgBox {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    width: 90px;
    font-size: 17px;
    cursor: pointer;
}

main .focus li .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.4));
}

/*
main - 최신글
*/

main .new li {
    position: relative;
    margin-bottom: 30px;
    margin-right: 3%;
    width: 31.3333333%;
}

main .new li a {
    display: block;
}

main .new li .thumb {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%;
    height: 0;
}

main .new li .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: 100%;
}

main .new li .txt {
    padding: 20px;
    text-align: left;
    border: 1px solid #e6e6e6;
}

main .new li .txt p {
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
}

main .new li .txt h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 2.6em;
    line-height: 1.3em;
    font-size: 18px;
    word-wrap: break-word;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

main .new li .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

main .new li a:hover .mask {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #ed1c24;
}

/*
main - 인스타그램
*/

main .instagram .instaFeed {
    padding-bottom: 30px;
}

main .instagram .instaFeed li {
    width: 12.5%;
}

main .instagram .instaFeed li img {
    width: 100%;
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

main .instagram .instaFeed li.brdBtm img {
    border-bottom: 1px solid #e0e0e0;
}

main .instagram .instaFeed li.brdRt img {
    border-right: 1px solid #e0e0e0;
}

main .instagram .event {
    position: relative;
}

main .instagram .event p {
    padding: 15px 0 15px 95px;
    font-size: 18px;
    text-align: left;
    border: 1px solid #ed1c24;
    border-radius: 2em;
}

main .instagram .event a {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    padding: 13px 55px; 
    font-size: 22px;
    border: 1px solid #ed1c24;
    border-radius: 2em;
}

/*
main - 그리고 롯데
*/

main .andLotte li {
    margin-right: 3%;
}

main .andLotte li:first-child {
    width: 67%;
}

main .andLotte li:last-child {
    width: 30%;
}

main .andLotte .uccThumb {
    position: relative;
    cursor: pointer;
}

main .andLotte .uccThumb img {
    width: 100%;
}

main .andLotte .uccThumb .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

main .andLotte .uccThumb .playBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
}

main .andLotte .uccThumb h3 {
    position: absolute;
    left: 4%;
    bottom: 8%;
    font-size: 20px;
}

main .andLotte .ucc {
    display: none;
    background: #000;
}

main .andLotte .sns {
    padding: 44px 0;
    margin-bottom: 30px;
    background: #f0f0f0;
}

main .andLotte .sns p {
    padding-bottom: 25px;
    font-size: 20px;
}

main .andLotte .sns a {
    margin: 0 10px;
}

main .andLotte .sns a img {
    width: 60px;
}

/*
section - element common styles
*/

section.sub .title .grid {
    padding: 50px 0;
    text-align: center;
}

section.sub .title.single .grid {
    padding: 75px 0;
}

section.sub .title h1 {
    font-size: 40px;
}

section.sub .title p {
    padding-top: 30px;
    font-size: 20px;
}

.tagArea .tag a,
.tagArea .tag span
 {
    display: inline-block;
    padding: 8px 20px;
    margin: 5px 10px 5px 0;
    font-size: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 2em;
    cursor: pointer;
}

.tagArea .tag a:hover,
.tagArea .tag span:hover {
    font-family: "NanumSquareBold", sans-serif;
    color: #fff;
    background: #ed1c24;
    border: 1px solid #ed1c24;
}

.ctgBox {
    display: inline-block;
}

.ctgBox.fntRed {
    border: 1px solid #e9002f;
}

.ctgBox.fntOrange {
    border: 1px solid #ff841c;
}

.ctgBox.fntGreen {
    border: 1px solid #15894c;
}

.ctgBox.fntBlue {
    border: 1px solid #1e34a2;
}

.ctgBox.fntTenderGray {
    border: 1px solid #888;
}

.owl-carousel {
    position: relative;
}

.owl-theme .owl-nav {
    position: absolute;
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next {
    padding: 0;
    margin: 0;
    font-size: 0;
    border-radius: 0;
}

.owl-theme .owl-nav .owl-prev {
    float: left;
}

.owl-theme .owl-nav .owl-next {
    float: right;
}

.ucc {
    position: relative;
    padding-bottom: 56.25%;
}

.ucc iframe {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/*
section - 리스트영역 공통 스타일
*/

section.conList .tagArea .grid {
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}

section.conList .tagArea .tag {
    overflow: hidden;
    position: relative;
    width: 69.0909090%;
    height: 100px;
}

section.conList .tagArea .tag > div {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

section.conList .tagArea .search {
    padding: 35px 0;
    width: 30.9090909%;
    text-align: right;
}

section.conList .tagArea .search input[type="text"] {
    padding: 3px 10px;
    width: 120px;
    line-height: 21px;
    font-size: 17px;
}

section.conList .tagArea .search .btn,
section.conList .tagArea .search button {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url("../images/btn_search_02.png") no-repeat;
    background-size: 100%;
    cursor: pointer;
}

section.conList .tagArea .search button {
    display: none;
}

section.conList .tab {
    padding: 20px 0;
    text-align: right;
}

section.conList .tab span {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 1px solid #e6e6e6;
    cursor: pointer;
}

section.conList .tab .thumb {
    background: url("../images/btn_list_01_off.png") no-repeat center;
}

section.conList .tab .thumb.active {
    background: url("../images/btn_list_01_on.png") no-repeat center;
}

section.conList .tab .list {
    background: url("../images/btn_list_02_off.png") no-repeat center;
}

section.conList .tab .list.active {
    background: url("../images/btn_list_02_on.png") no-repeat center;
}

section.conList article a {
    position: relative;
    display: block;
}

section.conList .tab .thumb {
    margin-right: 5px;
}

section.conList article .thumb {
    position: relative;
    overflow: hidden;
    padding-bottom: 74%;
    height: 0;
}

section.conList article .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: 100%;
}

section.conList article a .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.3s;
}

section.conList article a:hover .mask {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #ed1c24;
}

section.conList article .btnWrap {
    text-align: center;
}

section.conList article .btnWrap a {
    display: block;
    padding: 20px 0;
    border: 1px solid #e6e6e6;
}

/*
section - 썸네일 리스트
*/

section.conList article.thumnail {
    padding-bottom: 60px;
}

section.conList article.thumnail li {
    margin-bottom: 30px;
    margin-right: 3%;
    width: 31.3333333%;
}

section.conList article.thumnail .txt {
    padding: 20px;
    border: 1px solid #e6e6e6;
}

section.conList article.thumnail .txt h2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 2.6em;
    line-height: 1.3em;
    font-size: 18px;
    word-wrap: break-word;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

section.conList article.thumnail .btnWrap a {
    width: 31.3333333%;
}

/*
section - 목록형 리스트
*/

section.conList article.list {
    /* display: none; */
    padding-bottom: 80px;
}

section.conList article.list li {
    display: block;
    margin-bottom: 40px;
    width: 100%;
}

section.conList article.list .thumb,
section.conList article.list .txt {
    display: inline-block;
    vertical-align: top;
}

section.conList article.list .thumb {
    position: relative;
    width: 31.5454545%;
    padding-bottom: 22.85%;
    height: 0;
    margin-right: 2.35%;
}

section.conList article.list .thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto !important;
    height: 100%;
}

section.conList article.list .txt {
    position: relative;
    padding-bottom: 22.65%;
    width: 66%;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

section.conList article.list .txt .txtBox {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
}

section.conList article.list .txt h2 {
    overflow: hidden;
    font-size: 18px;
    white-space: nowrap; 
    text-overflow: ellipsis;
}

section.conList article.list .txt p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin: 25px 0;
    height: 3.9em;
    line-height: 1.3em;
    font-size: 15px;
    word-wrap: break-word;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}

section.conList article.list .txt span {
    font-size: 14px;
}

/*
section - 포스트영역
*/

section.post {
    border-top: 1px solid #e0e0e0;
}

section.post .postArea .grid {
    padding: 0;
}

section.post .postArea .title {
    position: relative;
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

section.post .postArea .title h1 {
    padding-bottom: 0;
    font-size: 36px;
}

section.post .postArea .title p {
    padding-top: 0;
    padding-bottom: 30px;
    font-size: 18px;
}

section.post .postArea .title .ctgBox {
    position: relative;
    top: auto;
    right: auto;
    padding: 8px 0;
    margin-right: 20px;
    width: 120px;
    font-size: 20px;
}

section.post .postArea .title .shareList {
    position: absolute;
    top: 40px;
    right: 0;
}

section.post .postArea .title .shareList ul {
    display: none;
    position: absolute;
    width: 230px;
    top: 0;
    right: 45px;
    z-index: 1;
}

section.post .postArea .title .shareList ul li img {
    width: 37px;
}

section.post .postArea .title .shareList ul li .close {
    width: 43px;
    cursor: pointer;
}

section.post .postArea .title .shareList > img {
    width: 40px;
    cursor: pointer;
}

section.post .postArea .content {
    padding: 40px 0 80px;
}

section.post .postArea .content p {
    font-size: 18px;
    line-height: 1.7;
}

section.post .postArea .content img {
    max-width: 100%;
}

section.post .postArea .content .titImg {
    padding-bottom: 40px;
}

section.post .postArea .content .titTxt {
    padding-bottom: 60px;
}

section.post .postArea .content .subTit {
    padding: 40px 0 20px;
    font-size: 20px;
}

section.post .postArea .content .subTit .bar {
    display: block;
    margin: 0;
    margin-bottom: 15px;
    width: 40px;
    height: 2px;
}

section.post .postArea .content .qst h3 {
    padding: 40px 0 10px;
    font-size: 18px;
}

section.post .postArea .content .qst h3 img {
    margin-top: -10px;
    margin-right: 10px;
    width: 36px;
}

section.post .postArea .content .last {
    padding-bottom: 100px;
}

section.post .postArea .content .owl-theme .owl-nav .owl-prev,
section.post .postArea .content .owl-theme .owl-nav .owl-next {
    width: 50px;
    height: 50px;
    background-size: 100% !important;
}

section.post .postArea .content .owl-theme .owl-nav .owl-prev {
    background: url("../../content/images/btn_prev_01.png");
}

section.post .postArea .content .owl-theme .owl-nav .owl-next {
    background: url("../../content/images/btn_next_01.png");
}

section.post .postArea .content .owl-theme .owl-dots {
    padding: 20px 0;
}

section.post .postArea .content .owl-theme .owl-dots .owl-dot span {
    margin: 0 5px;
    background: #999;
}

section.post .postArea .content .owl-theme .owl-dots .owl-dot.active span,
section.post .postArea .content .owl-theme .owl-dots .owl-dot:hover span {
    background: #ed1c24;
}

section.post .postArea .content .tagArea {
    padding: 80px 0;
}

section.post .postArea .content .btnWrap {
    text-align: center;
}

section.post .postArea .content .btnWrap span {
    position: relative;
    display: inline-block;
    padding: 20px 0;
    margin: 0 5px;
    width: 220px;
    height: 66px;
    vertical-align: top;
    cursor: pointer;
}

section.post .postArea .content .btnWrap span.fntRed {
    border: 1px solid #ed1c24;
}

section.post .postArea .content .btnWrap span.fntGray {
    border: 1px solid #666;
}

section.post .postArea .content .btnWrap b {
    font-size: 24px;
}

section.post .postArea .content .btnWrap ul {
    display: none;
    margin-top: -5px;
    vertical-align: top;
}

section.post .postArea .content .btnWrap li img {
    width: 37px;
}

section.post .related {
    padding: 60px 0;
    border-top: 1px solid #e0e0e0;
}

section.post .related li {
    display: block;
    margin-bottom: 40px;
    width: 100%;
}

section.post .related a .thumb,
section.post .related a .txt {
    display: inline-block;
    vertical-align: top;
}

section.post .related a .thumb {
    width: 31.5454545%;
    margin-right: 2.35%;
}

section.post .related a .thumb img {
    width: 100%;
}

section.post .related a .txt {
    position: relative;
    padding-bottom: 22.5%;
    width: 66%;
}

section.post .related .txt div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

section.post .related .txt h3 {
    font-family: "NanumSquare", sans-serif;
    font-size: 15px;
}

section.post .related .txt h3 .bar {
    display: block;
    margin: 0;
    margin-bottom: 20px;
    width: 40px;
    height: 2px;
}

section.post .related .txt h2 {
    overflow: hidden;
    padding: 35px 0 15px;
    font-size: 18px;
    white-space: nowrap; 
    text-overflow: ellipsis;
}

section.post .related .txt p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 8em;
    line-height: 1.6em;
    font-size: 17px;
    word-wrap: break-word;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
}

/*
section - 태그검색결과 및 일반검색결과
*/

section.searchResult article.list {
    display: block;
    padding: 80px 0;
}

section.searchResult article.list a {
    display: inline-block;
    width: 100%;
}

section.searchResult .tagArea .tag {
    width: auto;
    height: 33px;
}

section.searchResult .txt .tagArea .tag span,
section.searchResult .txt .tagArea .tag a {
    display: inline-block;
    margin-top: 0;
    width: auto;
    font-size: 15px;
}

section.searchResult article .btnWrap a {
    display: block;
}

section.searchResult article.none .grid {
    padding: 120px 0 360px;
    text-align: center;
}

section.searchResult article.none h2 {
    padding-bottom: 60px;
    font-size: 24px;
    line-height: 1.3;
}

section.searchResult article.none .searchArea {
    padding: 50px 15px 60px;
    background: #f6f6f6;
}

section.searchResult article.none .searchArea .search {
    position: relative;
    padding-bottom: 40px;
}

section.searchResult article.none .searchArea .search input[type="text"] {
    padding: 8px 10px;
    width: 350px;
    font-size: 20px;
    border-bottom: 1px solid #121212;
    background: transparent;
}

section.searchResult article.none .searchArea .search button {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    background: url("../images/btn_search_03.png") no-repeat center;
    background-size: 100%;
    vertical-align: top;
}

section.searchResult article.none .searchArea p {
    font-size: 20px;
}

section.searchResult article.none .searchArea p a {
    padding-left: 1.8181818%;
}

section.searchResult article.none .searchArea p .bar {
    padding: 0;
    margin: 1px 0 0 1.8181818%;
    width: 1px;
    height: 18px;
    background: #121212;
}


/*
section - 블로그 소개
*/

section.intro .visual h2 {
    padding: 60px 0;
    font-size: 24px;
    text-align: center;
}

section.intro .visual img {
    width: 100%;
    padding-bottom: 80px;
}

section.intro article {
    padding-bottom: 120px;
}

section.intro article h2 {
    padding-bottom: 40px;
    font-size: 28px;
}

section.intro article .bar {
    display: block;
    margin: 0;
    margin-bottom: 20px;
    width: 40px;
    height: 2px;
}

section.intro article p {
    font-size: 17px;
    line-height: 1.6;
}

section.intro .greet p {
    padding-top: 40px;
    line-height: 1.7;
}

section.intro .category li {
    display: block;
    width: 100%;
    padding-top: 20px;
}

section.intro .category li > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

section.intro .category li .ctg {
    width: 11%;
}

section.intro .category li .ctg h3 {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
}

section.intro .category li .ctg h3 span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

section.intro .category li .txt {
    padding-left: 20px;
    width: 89%;
    padding-bottom: 11%;
}

section.intro .category li .txt .txtBox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

section.intro .category li .txt .txtBox b {
    display: inline-block;
    padding-bottom: 15px;
    font-size: 18px;
}

section.intro .usage li {
    width: 50%;
    text-align: center;
    border-left: 1px solid #e0e0e0;
}

section.intro .usage li:last-child {
    border-right: 1px solid #e0e0e0;
}

section.intro .usage li h3 {
    padding: 60px 0 20px;
    font-size: 18px;
    background-position: center top 10px !important;
}

section.intro .usage li:first-child h3 {
    background: url("../images/ico_intro_01.png") no-repeat;
    background-size: 32px;
}

section.intro .usage li:last-child h3 {
    background: url("../images/ico_intro_02.png") no-repeat;
    background-size: 90px;
}

section.intro .inquiry h3 {
    padding: 20px;
    margin: 20px 0 120px;
    font-size: 24px;
    text-align: center;
    background: #f3f3f3;
}

section.intro .inquiry .eGreet {
    font-size: 22px;

    text-align: center;
}

section.intro .inquiry .eGreet .fntRed {
    display: inline-block;
    padding-top: 20px;
}

/*
section - 계열사 홈페이지 & SNS
*/

section.familysite article .grid {
    padding: 55px 0;
    border-bottom: 1px solid #e0e0e0;
}

section.familysite article.first .grid {
    padding-top: 75px;
}

section.familysite article.last .grid {
    padding-bottom: 120px;
    border-bottom: 0;
}

section.familysite article h2,
section.familysite article ul {
    display: inline-block;
    vertical-align: top;
}

section.familysite article h2 {
    padding: 13px 0;
    width: 31%;
    font-size: 24px;
}

section.familysite article ul {
    width: 69%;
}

section.familysite article li {
    display: block;
    padding-top: 20px;
}

section.familysite article li p,
section.familysite article li .sns {
    display: inline-block;
    vertical-align: top;
}

section.familysite article li p {
    padding: 15px 0;
    width: 40%;
    font-size: 20px;
}

section.familysite article li .sns {
    width: 60%;
}

section.familysite article li .sns a {
    display: inline-block;
    width: 50px;
    margin-right: 20px;
}

section.familysite article li .sns a.none {
    cursor: none;
}

section.familysite article li .sns a img {
    width: 50px;
}

/*
section - 블로그 운영정책
*/

section.terms article .grid {
    padding: 100px 0;
    line-height: 1.7;
}

section.terms article p {
    font-size: 17px;
}

section.terms article .greet {
    padding-bottom: 100px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

section.terms article .title {
    padding-bottom: 70px;
    text-align: center;
}

section.terms article .title b {
    display: block;
    padding-bottom: 10px;
    font-size: 28px;
}

section.terms article .pack {
    padding-bottom: 50px;
}

section.terms article .pack p {
    position: relative;
    padding-left: 25px;
}

section.terms article .pack .numMark {
    position: absolute;
    top: 0;
    left: 0;
}

/*
section - 에러페이지
*/

section.error article {
    border-top: 1px solid #e0e0e0;
}

section.error article .grid  {
    padding: 250px 0;
    text-align: center;
}

section.error h1 {
    padding-bottom: 40px;
    font-size: 34px;
    line-height: 1.3;
}

section.error p {
    font-size: 18px;
    line-height: 1.7;
}