@charset "utf-8";

/*
Large devices
*/

@media screen and (max-width: 1100px) {

    /* default layout */
    .grid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* opened gnb */
    .openNav {
        left: -100%;
        width: 100%;
        padding: 20px 15px;
    }
    .openNav ul {
        padding-top: 20px;
    }
    .openNav .inner {
        width: 100%;
    }
    .openNav .sns a {
        display: inline-block;
        margin-right: 0;
        width: 25%;
        text-align: center;
    }
    .openNav .btnWrap {
        padding: 20px 0 10px;
    }

    /* main - 비주얼 슬라이드 */
    .mainSlider .item .txt {
        width: 100%;
    }

    /* main - 인스타그램 */
    main .instagram .event {
        padding: 10px 10px 20px;
        border: 1px solid #ed1c24;
    }
    main .instagram .event p {
        padding: 15px 0 15px;
        line-height: 1.3;
        text-align: center;
        border: 0;
    }
    main .instagram .event a {
        position: relative;
        top: auto;
        right: auto;
        display: block;
        padding: 13px 0;
        width: 280px;
    }

    /* main - 그리고 롯데 */
    main .andLotte li {
        display: block;
        margin-right: 0;
        width: 100% !important;
    }
    main .andLotte li:last-child {
        padding-top: 30px;
    }

    /* section - 포스트영역 */
    section.post .postArea .title .shareList {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 20px;
        text-align: right;
    }
    section.post .related .txt h2 {
        padding: 15px 0;
    }
    section.post .related .txt p {
        height: 3.2em;
        -webkit-line-clamp: 2;
    }

    /* section - 블로그 소개 */
    section.intro .category li .ctg {
        width: 15%;
    }
    section.intro .category li .txt {
        width: 85%;
        padding-bottom: 0;
    }
    section.intro .category li .txt .txtBox {
        position: relative;
        top: auto;
        transform: translateY(0);
    }

}

/*
Small devices
*/
@media screen and (max-width: 767px) {

    /* font size */
    section.sub .title h1 {
        font-size: 30px;
    }
    .mainSlider h1 {
        font-size: 25px;
    }
    main article .title h2 {
        font-size: 20px;
    }
    .mainSlider p,
    main .searchArea p,
    main article .title p,
    main .searchArea .search input[type="text"],
    main .focus li .txt h3,
    main .new li .txt h3,
    main .instagram .event a,
    main .andLotte .sns p,
    section.sub .title p,
    section.searchResult article.none .searchArea .search input[type="text"],
    section.searchResult article.none .searchArea p{
        font-size: 17px;
    }    
    header nav p,
    header ul li:last-child a,
    footer a b,
    .tagArea .tag a,
    section.searchResult .txt .tagArea .tag span,
    section.searchResult .txt .tagArea .tag a {
        font-size: 14px;
    }
    footer p,
    footer a {
        font-size: 12px;
    }

    /* header */
    header .grid {
        padding: 10px 0;
    }
    header h1 img {
        width: 37.3333333px;
    }
    header nav {
        padding: 5px 0;
    }
    header ul li:last-child a {
        padding: 10px 0;
    }

    /* footer */
    footer .grid {
        padding: 20px 0;
    }
    footer p,
    footer a {
        padding: 6px 0;
    }
    footer .bar {
        margin: 7px 10px 0;
    }
    footer li {
        display: block;
        width: 100% !important;
        text-align: center !important;
    }
    footer li:first-child {
        padding-bottom: 5px;
    }
    footer li:first-child img {
        margin-right: 10px;
        width: 26.6666666px;
    }

    /* main - 비주얼 슬라이드 */
    .mainSlider .item {
        height: 550px;
    }
    .mainSlider .tagArea {
        height: 36px;
    }

    /* main - #이주의 FOCUS #인기글 */
    main .focus li .txt h3 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        height: 2.6em;
        word-wrap: break-word;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
    }

    /* section - element common styles */
    section.sub .title .grid {
        padding: 30px 0;
    }
    section.sub .title.single .grid {
        padding: 45px 0;
    }
    section.sub .title p {
        padding-top: 15px;
    }
    .tagArea .tag a {
        padding: 5px 10px;
    }

    /* section - 리스트영역 공통 스타일 */
    section.conList .tagArea .grid {
        padding: 10px 0;
    }
    section.conList .tagArea ul li {
        display: block;
        width: 100% !important;
    }
    section.conList .tagArea .tag {
        height: 72px;
    } 
    section.conList .tagArea .tag > div {
        position: relative;
        top: auto;
        left: auto;
        transform: translateY(0);
    }
    section.conList .tagArea .search {
        position: relative;
        padding: 0;
        text-align: left;
    }
    section.conList .tagArea .search .btn,
    section.conList .tagArea .search button {
        position: absolute;
        top: 0;
        right: 0;
    }
    section.conList .tagArea .search input[type="text"] {
        width: 100%;
    }

    /* section - 목록형 리스트 */
    section.conList article.list .txt p {
        margin: 5px 0;
    }

    /* section - 태그검색결과 및 일반검색결과 */
    section.searchResult .txt .tagArea .tag {
        height: 30px;
    }

    /* section - 계열사 홈페이지 & SNS */
    section.familysite article h2,
    section.familysite article ul {
        display: block;
        width: 100% !important;
    }
    section.familysite article h2 {
        padding: 13px 0 30px;
    }

}

/*
Extra small devices
*/
@media screen and (max-width: 575px) {

    /* font size */
    section.post .postArea .title h1 {
        font-size: 25px;
    }
    section.post .postArea .content .subTit,
    section.post .postArea .content .btnWrap b,
    section.searchResult article.none h2,
    section.intro .visual h2,
    section.intro article h2,
    section.intro .inquiry h3,
    section.familysite article h2,
    section.terms article .title b,
    section.error h1 {
        font-size: 17px;
    }
    .mainSlider p,
    main article .title p,
    main .searchArea p,
    main .focus li .txt h3,
    main .new li .txt h3,
    main .instagram .event p,
    main .instagram .event a,
    main .andLotte .uccThumb h3,
    section.conList article.thumnail .txt h2,
    section.conList article.list .txt h2,
    section.conList article.list .txt p,
    section.post .postArea .title .ctgBox,
    section.post .postArea .title p,
    section.post .postArea .content p,
    section.post .postArea .content .qst h3,
    section.post .related .txt h2,
    section.post .related .txt p,
    section.searchResult article.none .searchArea .search input[type="text"],
    section.searchResult article.none .searchArea p,
    section.intro article p,
    section.intro .category li .ctg h3 span,
    section.intro .category li .txt .txtBox b,
    section.intro .usage li h3,
    section.intro .inquiry .eGreet,
    section.familysite article li p,
    section.terms article p,
    section.terms article .greet,
    section.error p  {
        font-size: 14px;
    }
    main .focus li .ctgBox,
    main .new li .txt p,
    section.post .related .txt h3 {
        font-size: 12px;
    }
    section.conList article.list .txt span {
        font-size: 10px;
    }

    /* header */
    header nav p {
        display: none;
    }

    /* main - article */
    main article .grid {
        padding-bottom: 70px;
    }
    main article .title {
        padding-bottom: 20px;
    }
    main article.new .grid {
        padding-bottom: 40px;   
    }

    /* main - 비주얼 슬라이드 */
    .mainSlider .item .txt {
        padding: 0 15px;
    }
    .mainSlider h1 {
        line-height: 1.3;
    }
    .mainSlider p {
        padding: 15px 0 30px;
        letter-spacing: -1px;
    }

    /* main - 검색영역 */
    main .searchArea .grid {
        padding: 30px 0 40px;
    }
    main .searchArea .search input[type="text"] {
        width: 100%;
    }
    main .searchArea .search button {
        position: absolute;
        top: 8px;
        right: 0;
        width: 20px;
        height: 20px;
    }
    main .searchArea p a {
        padding: 5px 0 0 1.8181818%; 
    }
    main .searchArea p b {
        display: block;
        padding-bottom: 10px;
    }
    main .searchArea p .bar {
        display: none;
    }
    main .searchArea p span {
        padding: 0 1%;
        line-height: 1.3;
    }

    /* main - #이주의 FOCUS #인기글 */
    main .focus li {
        display: block;
        margin: 0 0 30px;
        width: 100%;
    }
    main .focus li .txt {
        padding: 0 20px;
    }
    main .focus li .ctgBox {
        padding: 8px 0;
        width: 70px;
    }

    /* main - 최신글 */
    main .new li {
        display: block;
        width: 100%;
        margin-right: 0;
    }

    /* main - 인스타그램 */
    main .instagram .instaFeed li {
        width: 25%;
    }
    main .instagram .event a {
        width: 200px;
    }

    /* main - 그리고 롯데 */
    main .andLotte .uccThumb .playBtn {
        width: 12.2116689%;
    }
    main .andLotte .sns {
        padding: 25px 0;
    }

    /* section - element common style */
    section.conList .tab,
    section.conList article.thumnail + .list {
        display: none;
    }
    .owl-theme .owl-nav {
        top: 45%;
    }

    /* section - 썸네일형 리스트 */
    section.conList article.thumnail {
        padding: 20px 0 60px;
    }
    section.conList article.thumnail li {
        display: block;
        width: 100%;
    }
    section.conList article.thumnail .btnWrap a {
        width: 100%;
    }

    /* section - 목록형 리스트 */
    section.conList article.list .thumb,
    section.conList article.list .txt {
        display: block;
        width: 100% !important;
    }
    section.conList article.list .thumb {
        padding-bottom: 66.32%;
    }
    section.conList article.list .txt {
        padding: 20px;
        border: 1px solid #e6e6e6;
    }
    section.conList article.list .txt .txtBox {
        position: relative;
        top: auto;
        left: auto;
        transform: translateY(0);
    }
    section.conList article.list .txt p {
        margin: 10px 0;
    }

    /* section - 포스트영역 */
    section.post .postArea .title .ctgBox {
        padding: 5px 0;
        width: 90px;
    }
    section.post .postArea .title {
        padding: 30px 0;
    }
    section.post .postArea .title p {
        padding-bottom: 15px;
    }
    section.post .postArea .title .ctgBox {
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    section.post .postArea .title h1 {
        line-height: 1.2;
    }
    section.post .postArea .title .shareList {
        margin-top: 15px;
    }
    section.post .postArea .content p {
        line-height: 1.5;
    }
    section.post .postArea .content .last {
        padding-bottom: 70px;
    }
    section.post .postArea .content .titTxt {
        padding-bottom: 30px;
    }
    section.post .postArea .content .qst h3 {
        padding: 20px 0 10px;
    }
    section.post .postArea .content .owl-theme .owl-nav .owl-prev,
    section.post .postArea .content .owl-theme .owl-nav .owl-next {
        width: 25px;
        height: 25px;
    }
    section.post .postArea .content .tagArea {
        padding: 50px 0;
    }
    section.post .postArea .content .btnWrap span {
        padding: 15px 0;
        margin: 1% 0;
        width: 100%;
        height: auto;
    }
    section.post .postArea .content .btnWrap ul {
        margin-top: 0;
    }
    section.post .related a .thumb,
    section.post .related a .txt {
        display: block;
        width: 100%;
    }
    section.post .related a .txt {
        padding: 20px 0;
    }
    section.post .related .txt div {
        position: relative;
        top: auto;
        transform: translateY(0);
    }
    section.post .related .txt h3 .bar {
        margin-bottom: 10px;
        width: 25px;
    }

    /* section - 태그검색결과 및 일반검색결과 */
    section.searchResult article.none .grid {
        padding: 70px 0 210px;
    }
    section.searchResult article.none h2 {
        padding-bottom: 30px;
    }
    section.searchResult article.none .searchArea {
        padding: 30px 15px 40px;
    }
    section.searchResult article.none .searchArea .search input[type="text"] {
        width: 100%;
    }
    section.searchResult article.none .searchArea .search button {
        position: absolute;
        top: 8px;
        right: 0;
        width: 20px;
        height: 20px;
    }
    section.searchResult article.none .searchArea p b {
        display: block;
        padding-bottom: 10px;
    }
    section.searchResult article.none .searchArea p .bar {
        display: none;
    }

    /* section - 블로그 소개 */
    section.intro article {
        padding-bottom: 60px;
    }
    section.intro article .bar {
        margin-bottom: 15px;
        width: 30px;
    }
    section.intro .visual h2 {
        padding: 45px 0;
    }
    section.intro .visual img {
        padding-bottom: 65px;
    }
    section.intro article h2 {
        padding-bottom: 30px;
    }
    section.intro .greet p {
        padding-top: 30px;
    }
    section.intro .category li .ctg {
        width: 25%;
    }
    section.intro .category li .txt {
        width: 75%;
    }
    section.intro .usage li {
        display: block;
        padding: 20px 0;
        width: 100%;
        border-top: 1px solid #e0e0e0;
        border-left: 0;
    }
    section.intro .usage li:last-child {
        border-bottom: 1px solid #e0e0e0;
        border-right: 0;
    }
    section.intro .usage .linebreak {
        display: inline;
    }
    section.intro .inquiry h3 {
        margin: 20px 0 60px;
    }

    /* section - 계열사 홈페이지 & SNS */
    section.familysite article .grid {
        padding: 30px 0;
    }
    section.familysite article.first .grid {
        padding-top: 55px;
    }
    section.familysite article.last .grid {
        padding-bottom: 70px;
    }
    section.familysite article li p,
    section.familysite article li .sns {
        display: block;
        width: 100% !important;
    }
    section.familysite article li .sns a.none {
        display: none;
    }

    /* section - 블로그 운영정책 */
    section.terms article .grid {
        padding: 70px 0;
        line-height: 1.5;
    }
    section.terms article .linebreak {
        display: inline;
    }
    section.terms article .greet {
        padding-bottom: 70px;
    }
    section.terms article .title {
        padding-bottom: 50px;
    }
    section.terms article .pack {
        padding-bottom: 30px;
    }

    /* section - 에러페이지 */
    section.error article .grid  {
        padding: 150px 0;
    }


}