@charset "utf-8";

/* 기본색 */
:root {
    --main-color:#5d9ab2;
    --accent-color:#bf6a7a;
    --dark-main-color:#2b5566;
    --text-bright-color:#fff;
    --icon-color:#fff;
    --icon-bk-color:#ddd;
    --gray-color:#ddd;
    --large-width:1000px;
    --middle-width:800px;
}

/* 기본설정 : 폰트크기 */
@media (max-width:599px) {
    :root {
        font-size: 14px;
    }
}

@media (min-width:600px) and (max-width:799px) {
    :root {
        font-size: 16px;
    }
}

@media (min-width:800px) {
    :root {
        font-size: 18px;
    }
}



/* 기본설정 : 페이지 전체 */

/* 해더 */
header {position: absolute; left: 0; top: 0; width: 100%; background: rgba(255,255,255,0.9);}
.nohero header {position: static; border-bottom: 1px solid #ddd; border-bottom:1px solid var(--gray-color);}

/*  해더A: 사이트이름*/
.headA {display: inline-block; height: 70px; line-height: 70px; padding-left: 20px; padding-right: 20px; background:#5d9ab2;  
background:  var( --main-color); font-family: 'Montserrat', sans-serif; font-size: 24px; color: #fff; color: var(--text-bright-color); text-decoration: none;}

/* 해더B: 네비게이션 메뉴*/
.headB ul {margin: 0; padding: 0; list-style: none;}
.headB a {display: block; padding: 15px; text-decoration: none; font-size: 12px; color: inherit;}
.headB a:hover {background: rgba(0,0,0,0.3);}



/* 콘텐츠 A : 히어로 이미지 */
.conA {display: flex; align-items: center; justify-content: center; height: 100vh; min-height:450px; text-align: center; background-image:linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../img/fruits.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; color:#fff; color:var(--text-bright-color);}
.conA.compact {height: 450px; min-height: 0; background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../img/balloon.jpg);}

.conA h1 {margin-top: 0; margin-left: 0.2em; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; font-size:15vw; letter-spacing:0.2em;}
/* vw 단위
1vw=화면너비/100 
320px 기준 : 1vw = 3.2px
*/
.conA p {margin-top:0; margin-bottom: 0; font-size:18px;}
.conA img {width: 20%;}
.conA a {display: inline-block; margin-top: 20px; padding: 10px 30px; background-color:#bf6a7a; background-color: var(--accent-color); border-radius: 6px; border:3px solid currentColor; color:#fff; color:var(--text-bright-color); text-decoration: none; font-size:14px;}
.conA a:hover {background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));}


/* 콘텐츠B:개요(아이콘+글자) */
.conB .container {padding-top: 80px; padding-bottom: 20px;}
.conB .text {padding-left: 20px; padding-right: 20px; padding-bottom: 60px; text-align: center;}
.conB h2 {margin-top: 0; margin-bottom: 10px; font-size: 20px;}
.conB p {margin-top: 0; margin-bottom: 20px; font-size: 14px; line-height: 1.8; opacity: 0.8;}
.conB a {color: #5d9ab2; color: var(--main-color); text-decoration: none;}
.conB a:hover {text-decoration: underline;}
.conB .icon {display: inline-block; width: 2em; line-height: 2em; margin-bottom: 20px; background: #ddd; background: var(--icon-bk-color); font-size: 40px; text-align: center; color: #fff; color: var(--icon-color); border-radius: 50%;}

/* 콘텐츠C:개요(이미지+글자) */
.conC {background-color:#5d9ab2; background-color: var(--main-color); color: #fff; color: var(--text-bright-color); }
.conC .photo {min-height: 200px; background: url(../img/note.jpg) no-repeat center/cover;}
.conC .text {padding: 20px;}
.conC h2 {margin-top: 0; margin-bottom: 10px; font-size: 20px;}
.conC p {margin-top: 0; margin-bottom: 20px; font-size: 14px; line-height: 1.8; opacity: 0.8;}
.conC a {display: inline-block; margin-top: 20px; padding: 10px 30px; background-color:#bf6a7a; background-color: var(--accent-color); border-radius: 6px; border:3px solid currentColor; color:#fff; color:var(--text-bright-color); text-decoration: none; font-size:14px;}
.conC a:hover {background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));}

/* 콘텐츠D:개요(이미지+글자:반대로 배치하기) */
.conD {/*background-color:#5d9ab2; background-color: var(--main-color); color: #fff; color: var(--text-bright-color);*/ }
.conD .container {padding-top: 2px;}
.conD .photo {min-height: 200px; background: url(../img/life.jpg) no-repeat center/cover;}
.conD .text {padding: 20px;}
.conD h2 {margin-top: 0; margin-bottom: 10px; font-size: 20px;}
.conC p {margin-top: 0; margin-bottom: 20px; font-size: 14px; line-height: 1.8; opacity: 0.8;}
.conD a {display: inline-block; margin-top: 20px; padding: 10px 30px; background-color:#bf6a7a; background-color: var(--accent-color); border-radius: 6px; border:3px solid currentColor; color:#fff; color:var(--text-bright-color); text-decoration: none; font-size:14px;}
.conD a:hover {background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));}

/* 푸터A:사이트 정보 */
footer {color: #fff; color:var(--text-bright-color); background-color: #2b5566; background-color: var(--dark-main-color);}
footer .container {padding: 40px 20px;}
.footA {margin-bottom: 30px;}
.footA h2 {margin-top: 0; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; font-size: 30px; letter-spacing: 0.2em;}
.footA P {margin-top: 0; margin-bottom: 0; font-size: 14px;}
.footA a {text-decoration: none; color: inherit;}

/* 푸터B: 푸터메뉴*/
.footB div {margin-bottom: 20px;}
.footB h3 {margin-top: 0; margin-bottom: 10px; font-size: 14px; border-bottom: 1px solid currentColor;}
.footB ul {margin: 0; padding: 0; list-style: none;}
.footB a {display: block; padding: 5px; text-decoration: none; color: inherit; font-size: 12px;}
.footB a:hover { background-color: rgba(0,0,0,0.3);}

/* 푸터C : 저작권 */
.footC {font-size: 12px; text-align: center; font-family: 'Montserrat', sans-serif;}

/* 푸터D : SNS 메뉴*/
.footD {margin-top: 20px;}
.footD ul {display: flex; margin: 0; padding: 0; list-style: none;}
.footD a {display: block; width: 2em; line-height: 2em; border-radius: 50%; text-align: center; border: 1px slid currentColor; margin-right: 8px; padding: 5px; text-decoration: none; color: inherit; font-size: 16px;}
.footD a:hover {background-color: rgba(0,0,0,0.3);}

/* 콘텐츠 페이지: 기사 */
.post .container {max-width: 800px; max-width: var(--middle-width); margin-left: auto; margin-right: auto; padding: 30px 10px;}

.post h1 {padding-left: 0.5rem; font-size: 2rem; border-left: 0.75rem solid #bf6a7a; border-left: 0.75rem solid var(--accent-color);}
.post p {font-size: 1rem; line-height: 2;/* 글자 크기의 두배 */}
.post img {max-width: 100%;}

/* 콘텐츠 페이지 : 빵 부스러기 리스트 */
.bread ol {display: flex; margin: 0; padding: 0; list-style: none;}
.bread a {display: block; padding: 5px; color: inherit; font-size: 0.875rem; text-decoration: none;}
/*.bread a:after {margin-left: 10px; content: "f054"; font-family: "fontAwesome"; opacity: 0.3;}*/
.bread .fa-chevron-right {margin-left: 10px; opacity: 0.3;}
.bread a:hover {background: rgba(0,0,0,0.3);}

/* 소개페이지 : 이미지와 연혁 */
.history {background-color: #5d9ab2; background-color: var(--main-color); color: #fff; color: var(--text-bright-color);}
.history .photo {min-height: 300px; background-image: url(../img/plant.jpg); background-position: center; background-size: cover;}
.history .text {padding: 20px;}
.history h2 {margin-top: 0; margin-bottom: 10px; font-size: 1.5rem;}
.history table {border-top: 1px solid #ddd; border-top: 1px solid ver(--gray-color); border-collapse: collapse; font-size: 0.875rem;}
.history th, .history td {padding-top: 1.8rem; padding-bottom: 1.8rem; border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--gray-color);}
.history th {white-space: nowrap; word-break: keep-all; text-align: left; padding-right: 1rem;}

/* 문의페이지: 문의대상 */
.contact {margin-top: 20px; margin-bottom: 20px; padding: 20px; border: 1px solid #ddd; border: 1px solid var(--gray-color); text-align: center;}
.contact span {display: inline-block; margin-bottom: 20px; width: 2em; line-height: 2em; border-radius: 50%; background-color: #5d9ab2; background-color: var(--main-color); color: #fff; color: var(--icon-color); font-size: 2.2rem;}
.contact h2 {margin-top: 0; font-size: 1.2rem;}
.contact a {font-size: 1.4rem; color: inherit; text-decoration: none;}

/* 문의페이지: 지도 */
.location h2 {margin: 0; padding-top: 20px; padding-bottom: 20px; background-color: #5d9ab2; background-color: var(--main-color); color: #fff; color: var(--icon-color); font-size: 1.5rem; text-align: center;}
.location iframe {width: 100%; height: 400px; vertical-align: bottom;}

/* 기사목록 A */
.listA .container {display: flex; flex-wrap: wrap; max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto;}
.listA h1 {text-align: center;}
.listA article {flex: 1 1 300px; display: flex;}
.listA a {flex: 1; display: block; margin: 10px; border: 1px solid #ddd; border: 1px solid var(--gray-color); color: inherit; text-decoration: none;}
.listA a:hover {opacity: 0.8;}
.listA .photo {min-height: 150px; background-position: center; background-size: cover;}
.listA .text {margin: 10px;}

/* 기사목록B */
.listB h1 {text-align: center;}
.listB .container {display: flex; flex-wrap: wrap; max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto;}

.listB article {flex: 1 1 384px; display: flex;}
.listB a {flex: 1; display: flex; margin: 10px; border: 1px solid #ddd; border: 1px solid var(--gray-color); color: inherit; text-decoration: none;}
.listB a:hover {opacity: 0.8;}
.listB .photo {flex: 2; min-height: 0; background-position: center; background-size: cover;}
.listB .text {flex: 3; margin: 10px;}

/* 기사목록C */
.listC .container {display: flex; flex-wrap: wrap; max-width: none;margin: 2px auto;}
.listC h1 {text-align: center;}
.listC article {flex: 1 1 250px; display: flex;}
.listC a {position: relative; flex: 1; display: block; margin: 2px; margin: 10px; border: 1px solid #ddd; border: 1px solid var(--gray-color); color: inherit; text-decoration: none; background-color: currentColor;}
.listC a:hover {opacity: 0.8;}
.listC .photo {min-height: 250px; background-position: center; background-size: cover; opacity: 0.6;}
.listC .text {position: absolute; left: 0; bottom: 0; margin: 10px; color: #fff; color: var(--text-bright-color);}
.listC h2 {font-size: 18px; margin: 0;}
.listC p {font-size: 14px; margin: 0;}




/* 대체 글자를 브라우저 화면에 출력하지 않기 위한 설정 */
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border:0;}


@media (max-width:384px) {
    .listB .photo {flex: 1;}
    .listB p {display: none;}
}

@media (max-width:767px){
    /* 작은 화면 전용 설정 */
    header .container-small {display: flex; justify-content: space-between; align-items: center;}
    
    .headC {margin-right: 10px; padding: 0; border: none; outline: none; background: none; font-size: 28px; opacity: 0.5; cursor: pointer;}
    .headC:hover {opacity: 0.3;}
    .headB {display: none;}
}

@media (min-width:768px) {
    header .container {display: flex; align-items: center; justify-content: space-between;  max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto;}
    .headB {display: block!important;}
    .headB ul {display: flex;}
    /* 큰 화면 전용 */
    .headC {display: none;}
    /* ********** */
    
    .conA h1 {font-size:115px;}  
    .conA p {font-size:24px}
    
    .conB .container {display: flex; max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto;}
    .conB .text {flex: 1;}
    
    .conC .container {display: flex; flex; max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto; }
    .conC .photo {flex:3;}
    .conC .text {flex:2; padding: 50px;}
    
    .conD .container {display: flex; flex-direction: row-reverse; flex; max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto; padding-top: 40px; padding-bottom: 40px;}
    .conD .photo {flex:0 0 400px;}
    .conD .text {flex:1; padding: 50px;}
    
    footer .container {display: flex; flex-wrap: wrap; max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto;}
    .footA {flex: 0 0 40%;}
    .footB {flex: 0 0 60%;}
    .footC {flex: 0 0 100%;}
    .footB {display: flex;}
    .footB div {flex: 1; }
    .footB div:not(:first-child) {margin-left: 40px;}
    
    .history .container {display: flex; flex; max-width: 1000px; max-width: var(--large-width); margin-left: auto; margin-right: auto;}
    .history .photo {flex: 3;}
    .history .text {flex: 2; padding: 50px;}
    
    .contact-wrap {display: flex;}
    .contact {flex: 1;}
    .contact:first-child {margin-right: 20px;}
}

@media (min-width:1000px) {
    .listC article {flex: 1 1 25%;}
    .listC article:nth-child(4n+1) {flex: 1 1 50%;}
}