/*
@import url("style.css");
@import url("main2.css");
@import url("main.css");
@import url("../bootstrap-3.3.2-dist/css/bootstrap.css");
@import url("fontawesome-all.css");
@import url("cssmenu.css");
*/
@import url("font.css");
@import url("board.css");/*게시판*/
@import url("member.css");/*member.php 회원페이지*/

/* HTML 요소의 기본 글꼴 크기 설정 (브라우저 기본값 16px) */
html {
    font-size: 100%; /* 16px */
}

/* 미디어 쿼리를 사용해 루트 요소의 글꼴 크기를 조정 */
@media (max-width: 768px) {
    html {
        font-size: 87.5%; /* 14px */
    }
}

body {
	width:100%; margin:0; padding:0; word-break:keep-all; word-wrap:break-word;
	scrollbar-face-color: #1bb7b5; scrollbar-shadow-color: #1bb7b5; scrollbar-highlight-color: #1bb7b5; scrollbar-3dlight-color: white; scrollbar-darkshadow-color: white; scrollbar-track-color: white; scrollbar-arrow-color: #1bb7b5;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	font-family: 'Noto Sans KR', sans-serif; font-size:1rem; line-height:+1.5; color:#333;
}
	
/*
face = 스크롤바의 색
shadow = 스크롤바 오른쪽 외각선
highlight = 스크롤 왼쪽 외각선
3dlight = 스크롤바 왼쪽 그림자
darkshadow = 스크롤 오른쪽 그림자↙
track = 스크롤바 없는 바탕색
arrow = 화살*/

/*드래그*/
::selection {color: inherit; background: rgb(255, 234, 46);}
::-moz-selection {color: inherit; background: rgb(255, 234, 46);} /* firefox */
/*드래그 끝*/

.text_hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: polygon(0 0, 0 0, 0 0);
}

.text-letter-spacing1 {letter-spacing: -1px;}
.text-letter-spacing2 {letter-spacing: -2px;}

.boder-b-white {border-bottom: 1px solid #fff;}


/*------------------------------------------------------------------------------------------------------
skip
---------------------------------------------------------------------------------------------------------*/
#skipNavi {position:absolute; left:0; top:-1000px; width:100%; height: 0px; z-index:1000; line-height:1px; font-size:1px;}
#skipNavi a{display:block; text-align:center; width: 100%;  line-height:1px; font-size:1px;}
#skipNavi a:focus, #skipnavigation a:hover, #skipnavigation a:active {position:absolute; left:0px; top:1000px; padding: 8px 0;  display:block; height:20px; background:#20262c; font-size:12px; font-weight:bold; line-height:18px; color:#fff;}
.hide{position:absolute; left:-9999px; top:-9999px; font-size:0; line-height:0; height:0; overflow:hidden; }
/*#skipNavi #topNaviSkip {margin:0; padding:0;}*/

#skipContent {}/*본문으로 바로가기*/
#skipMenu {}/*주메뉴로 바로가기*/

/*------------------------------------------------------------------------------------------------------
폰트
---------------------------------------------------------------------------------------------------------*/
.noto_sans {font-family: 'Noto Sans KR', sans-serif;}
.noto_serif {font-family: 'Noto Serif KR', serif;}
.classictype {font-family: 'Cafe24 Classic Type', sans-serif;}
.ridibatang {font-family: 'RIDI Batang', serif;}

.dark_roast_fc {color:#4A2B1A;}
.dark_roast_bg {background-color: #4A2B1A;}
.dark_roast_border {border-color: #4A2B1A !important;}
.coffee_bean_fc {color:#543e31;}
.coffee_bean_bg {background-color: #543e31;}
.coffee_bean_border {border-color: #543e31 !important;}
.coffee_bean2_fc {color:#7E5940;}
.coffee_bean2_bg {background-color: #7E5940;}
.coffee_bean2_border {border-color: #7E5940 !important;}
.crema_fc {color:#EBDAC8;}
.crema_bg {background-color: #EBDAC8;}
.crema_border {border-color: #EBDAC8 !important;}
.cremapink_fc {color:#faf6f3;}
.cremapink_bg {background-color: #faf6f3;}
.cremapink_border {border-color: #faf6f3 !important;}
.warm_gray_fc {color:#B3A08D;}
.warm_gray_bg {background-color: #B3A08D;}
.warm_gray_border {border-color: #B3A08D !important;}
.text_black_fc {color:#2C2C2C;}
.text_black_bg {background-color: #2C2C2C;}
.text_black_border {border-color: #2C2C2C !important;}
.darkgray_fc {color:#616161;}
.darkgray_bg {background-color: #616161;}
.darkgray_border {border-color: #616161 !important;}
.fresh_green_fc {color:#094531;}
.fresh_green_bg {background-color: #094531;}
.fresh_green_border {border-color: #094531 !important;}
.warm_orange_fc {color:#FF7F50;}
.warm_orange_bg {background-color: #FF7F50;}
.warm_orange_border {border-color: #FF7F50 !important;}

.gray_fc {color: #858585;}
.gray_bg {background-color: #858585;}
.gray_border {border: 1px solid #858585;}
.gray_light_fc {color: #efefef;}
.gray_light_bg {background-color: #efefef;}
.gray_light_border {border: 1px solid #efefef;}
.gray_dark_fc {color: #333;}
.gray_dark_bg {background-color: #333;}
.gray_dark_border {border: 1px solid #333;}
.gray_deep_fc {color: #202020;}
.gray_deep_bg {background-color: #202020;}
.gray_deep_border {border: 1px solid #202020;}

/*------------------------------------------------------------------------------------------------------
기타요소_타이틀및라인외
---------------------------------------------------------------------------------------------------------*/
.section_bottom_line {border-bottom: 4px solid #6b3b27;}

/*------------------------------------------------------------------------------------------------------
적용 서체 크기
---------------------------------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
h2 {font-size:3rem;}/*48px*/
h3 {font-size:2.25rem;}/*36px*/
h4 {font-size:1.5rem;}/*24px*/
	/*@media all and (min-width: 320px) and (max-width: 56.25em) {
		h1 {font-size:26px; line-height:36px;}
		h2 {font-size:22px; line-height:33px;}
		h3 {font-size:20px; line-height:30px;}
		h4 {font-size:16px; line-height:26px;}
	}*/

.ys48 {font-size:3rem;}
.ys36 {font-size:2.25rem;}
.ys24 {font-size:1.5rem;}
/*------------------------------------------------------------------------------------------------------
적용 서체 크기 끝
---------------------------------------------------------------------------------------------------------*/

.con_pre {white-space: pre-line;}
.w_23 {width: 23%;}
.w_30 {width: 30% !important;}
.w_600px {width: 600px;}
/*
  게시판 테이블 너비 
  Bootstrap의 md (Medium) breakpoint는 768px
  따라서 768px 이상에서 600px 너비를 적용.
*/
@media (min-width: 768px) {
    .w-md-600px {
        width: 600px !important; /* Bootstrap의 다른 클래스를 덮어쓰기 위해 !important 사용 */
    }
}

/*
  게시판 테이블 너비 lg (Large) breakpoint는 992px.
  992px 이상에서 100% 너비를 적용하여 600px 설정을 덮어씀.
*/
@media (min-width: 992px) {
    /* lg 이상의 화면에서 100% 너비 적용 */
    .w-lg-100 {
        width: 100% !important;
    }
}

.bg_opacity_005 {--bs-bg-opacity: 0.05;}
.rounded_2r {border-radius: 2rem}

.fs_55 {font-size: 3.44rem;}
.fs_45 {font-size: 2.8rem;}
.fs_39 {font-size: 2.4rem;}
.fs_36 {font-size:2.25rem;}
.fs_34 {font-size: 2rem;}
.fs_30 {font-size: 1.875rem;}
.fs_24 {font-size: 1.5rem;}
.fs_22 {font-size: 1.375rem;}
.fs_18 {font-size: 1.125rem;}
.fs_7 {font-size: .7rem !important;}
.fs_8 {font-size: .8rem !important;}
.fs_9 {font-size: .9rem !important;}
.fs_20px {font-size: 20px;}
	@media all and (min-width: 320px) and (max-width: 992px) {
		.fs_20px {font-size: 15px;}
	}
.fs_28px {font-size: 28px;}
	@media all and (min-width: 320px) and (max-width: 992px) {
		.fs_28px {font-size: 24px;}
	}
.fs_36px {font-size: 36px;}
	@media all and (min-width: 320px) and (max-width: 992px) {
		.fs_28px {font-size: 28px;}
	}

.fw_100 {font-weight: 100;}
.fw_400 {font-weight: 400;}
.fw_500 {font-weight: 500;}
.fw_700 {font-weight: 700;}
.fw_900 {font-weight: 900;}
.lh-14px {line-height: 14px !important;}

/*------------------------------------------------------------------------------------------------------
마진
---------------------------------------------------------------------------------------------------------*/
.no_margin {margin:0;}
.no_margin_left {margin-left:0;}
.no_margin_right {margin-right:0;}
.no_margin_top {margin-top:0;}
.no_margin_bottom {margin-bottom:0;}

.margin10 {margin:10px auto;}
.margin15 {margin:15px auto;}
.margin20 {margin:20px auto;}
.margin25 {margin:25px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin25 {margin:20px auto;}
	}
.margin30 {margin:30px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin30 {margin:20px auto;}
	}
.margin35 {margin:35px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin35 {margin:20px auto;}
	}
.margin40 {margin:40px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin40 {margin:20px auto;}
	}
.margin45 {margin:45px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin45 {margin:20px auto;}
	}
.margin50 {margin:50px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin50 {margin:20px auto;}
	}
	
.margin75 {margin:75px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin80 {margin:35px auto;}
	}
	
.margin100 {margin:100px auto;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.margin100 {margin:50px auto;}
	}

.marginTop0 {margin-top:0px;}
.marginTop10 {margin-top:10px;}
.marginTop15 {margin-top:15px;}
.marginTop20 {margin-top:20px;}
.marginTop25 {margin-top:25px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop25 {margin-top:20px;}
	}
.marginTop30 {margin-top:30px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop30 {margin-top:20px;}
	}
.marginTop35 {margin-top:35px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop35 {margin-top:20px;}
	}
.marginTop40 {margin-top:40px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop40 {margin-top:20px;}
	}
.marginTop45 {margin-top:45px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop45 {margin-top:20px;}
	}
.marginTop50 {margin-top:50px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop50 {margin-top:20px;}
	}
	
.marginTop75 {margin-top:75px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop75 {margin-top:35px;}
	}
	
.marginTop100 {margin-top:100px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginTop100 {margin-top:50px;}
	}

.marginBottom10 {margin-bottom:10px;}
.marginBottom15 {margin-bottom:15px;}
.marginBottom20 {margin-bottom:20px;}
.marginBottom25 {margin-bottom:25px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom25 {margin-bottom:20px;}
	}
.marginBottom30 {margin-bottom:30px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom30 {margin-bottom:20px;}
	}
.marginBottom35 {margin-bottom:35px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom35 {margin-bottom:20px;}
	}
.marginBottom40 {margin-bottom:40px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom40 {margin-bottom:20px;}
	}
.marginBottom45 {margin-bottom:45px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom45 {margin-bottom:20px;}
	}
.marginBottom50 {margin-bottom:50px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom50 {margin-bottom:20px;}
	}
	
.marginBottom75 {margin-bottom:75px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom75 {margin-bottom:35px;}
	}
	
.marginBottom100 {margin-bottom:100px;}
	@media all and (min-width: 320px) and (max-width: 56.25em) {
		.marginBottom100 {margin-bottom:50px;}
	}
/*------------------------------------------------------------------------------------------------------
마진 끝
---------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------
순서
---------------------------------------------------------------------------------------------------------*/
.order_1 {order:1; margin:0; padding:0;}
.order_2 {order:2; margin:0; padding:0;}
.order_3 {order:3; margin:0; padding:0;}
.order_4 {order:4; margin:0; padding:0;}
.order_5 {order:5; margin:0; padding:0;}
.order_6 {order:6; margin:0; padding:0;}
.order_7 {order:7; margin:0; padding:0;}
.order_8 {order:8; margin:0; padding:0;}
.order_9 {order:9; margin:0; padding:0;}
.order_10 {order:10; margin:0; padding:0;}
/*------------------------------------------------------------------------------------------------------
순서 끝
---------------------------------------------------------------------------------------------------------*/

#allWrap {
	width:100%; margin:0; padding:0;/* text-align:center;*/
	font-family: 'Noto Sans KR', sans-serif;
}
.allContainer {width:1280px; margin-left:auto; margin-right:auto; position:relative; word-break:keep-all;}
	/* 모바일 화면에서 적용될 CSS */	
	@media screen and (max-width: 575px) {
		.allContainer {width:100%; margin-left:auto; margin-right:auto;}
	}
	/* 태블릿 화면에서 적용될 CSS */
	@media screen and (min-width: 576px) and (max-width: 767px) {
		.allContainer {width:100%; margin-left:auto; margin-right:auto;}
	}
	/* 노트북 화면에서 적용될 CSS */
	@media screen and (min-width: 768px) and (max-width: 991px) {
		.allContainer {width:100%; max-width:1280px; margin-left:auto; margin-right:auto;}
	}
	/* 데스크톱 화면에서 적용될 CSS */
	@media screen and (min-width: 992px) {
		.allContainer {width:100%; max-width:1280px; margin-left:auto; margin-right:auto;}
	}

.wrap-com {padding: 0 9rem;}/*9rem= 162px*/
	@media (max-width: 768px) {
		.wrap-com {padding: 0 0.2rem;}
	}
	@media all and (min-width: 769px) and (max-width: 1462px) {
		.wrap-com {padding: 0 1rem;}
	}
.container-com {width: 100%;}

/*main {margin-top: 90px;}
	@media (max-width: 768px) {
		main {margin-top: -50px;}
	}
	@media all and (min-width: 769px) and (max-width: 1462px) {
		main {margin-top: 90px;}
	}*/

/*------------------------------------------------------------------------------------------------------
bootstrap 해상도 및 편집
---------------------------------------------------------------------------------------------------------*/
/*@media (min-width: 1280px) {
	.container {
	  width: 1280px!important;
	}
}*/
/*@media (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width:1280px;
	}
}*/

a {
	color:inherit; text-decoration: none;
	transition: color 0.3s ease-in-out;
}
/*a:link, a:visited {color:inherit;}*/
a:hover, a:active {
	transition: color 0.3s ease-in-out; color:#c4c4c4;
}

/*.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}*/

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
}

	  /*-----------------------
	  테이블
	  -----------------------*/
table {border-collapse:collapse;}
.table > thead > tr > th {vertical-align:middle;}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {vertical-align:middle;}
  /*------------------------------------------------------------------------------------------------------
  bootstrap 해상도 및 편집 끝
  ---------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------------
탑
---------------------------------------------------------------------------------------------------------*/
header {z-index: 3!important;}
.navbar {background-color:#543e31;}
	/*@media screen and (min-width: 320px) and (max-width: 991px) {
		.navbar {opacity: 1;}
	}
	@media screen and (min-width: 992px) {
		.navbar {opacity: .8;}
	}*/
#cssmenu {z-index: 2 !important;}
#cssmenu ul {justify-content: start !important;}
#cssmenu > ul > li > a {color: #fff;}
#cssmenu > ul > li:hover > a {color: #EBDAC8 !important;}
#cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover {
	background-color: #EBDAC8 !important;
	color: inherit !important; font-weight: bold !important;
}
#cssmenu.small-screen #menu-button::before {background: #EBDAC8 !important;}
#cssmenu.small-screen #menu-button::after {border-color: #EBDAC8 !important;}
#cssmenu.small-screen #menu-button.menu-opened::after {background: #EBDAC8 !important;}

	/*-----------------------
	헤더/내비게이션
	-----------------------*/
.cd-auto-hide-header {background: none!important;}
	@media screen and (max-width: 575px) {
		.cd-auto-hide-header {position: relative!important;}
	}
	@media screen and (min-width: 576px) and (max-width: 767px) {
		.cd-auto-hide-header {position: relative!important;}
	}
	@media screen and (min-width: 768px) and (max-width: 991px) {
		.cd-auto-hide-header {position: relative!important;}
	}
#navigation {top: 20px!important;}
	/*@media screen and (max-width: 575px) {
		#navigation {top: 60px;}
	}*/
	@media screen and (min-width: 320px) and (max-width: 991px) {
		#navigation {top: 60px!important;}
	}
	/*@media screen and (min-width: 992px) {
		#navigation {}
	}*/
/*#toggle-nav, #toggle-search {height:50px!important; line-height:50px!important; background-color: #fff;}*/
.sub_top #top-bar {background: rgba(255, 255, 255, 0.5);}

	/*-----------------------
	로고
	-----------------------*/
.top_logo {padding-top: .5rem; padding-bottom: .5rem;}
	@media screen and (min-width: 320px) and (max-width: 991px) {
		.top_logo {padding-top:0;}
	}
.top_logo h1 {font-size: 0;}

/*@media screen and (min-width: 320px) and (max-width: 991px) {
	#top-bar {height: 64px;}
	.logo_img {width: 150px!important;}
}*/

/*------------------------------------------------------------------------------------------------------
OUR MISSION
---------------------------------------------------------------------------------------------------------*/
.ourmission_wrap {background-color: #c3a892;}

/*------------------------------------------------------------------------------------------------------
Our Partnership
---------------------------------------------------------------------------------------------------------*/
.jurapartner_wrap {padding: 100px 0; background: #543e31 url(../images/partnership_bg.jpg) center top / cover no-repeat;}
.jurapartner_title {font-size: 4.5rem;}
	@media screen and (max-width: 768px) {
		.jurapartner_wrap {padding: 50px 0;}
		.jurapartner_title {font-size: 2.5rem;}
	}

/*------------------------------------------------------------------------------------------------------
관련사이트
---------------------------------------------------------------------------------------------------------*/
/*.family_wrap {background-color: #dadada;}*/

/*------------------------------------------------------------------------------------------------------
푸터
---------------------------------------------------------------------------------------------------------*/
	/*-----------------------
	SNS공유
	-----------------------*/
.link-icon { position: relative; display: inline-block; width: auto; font-size: 14px; font-weight: 500; color: #333; margin-right: 10px; padding-top: 50px; }
.link-icon.twitter { background-image: url(../images/icon/icon-twitter.png); background-repeat: no-repeat; background-position: center top;}
.link-icon.facebook { background-image: url(../images/icon/icon-facebook.png); background-repeat: no-repeat; background-position: center top;} 
.link-icon.kakao { background-image: url(../images/icon/icon-kakao.png); background-repeat: no-repeat; background-position: center top;}
.link-icon.naver { background-image: url(../images/icon/icon-naver.png); background-repeat: no-repeat; background-position: center top;}

/*footer {background-color: #282930;}
footer .wrap-com {background: none;}*/

@media (max-width: 768px) {
	.fot_top {text-align: center;}
}
.family_wrap {text-align: right;}
	@media (max-width: 768px) {
		.family_wrap {text-align: center;}
	}

footer {background-color: #f4f4f4;}

/*------------------------------------------------------------------------------------------------------
팝업
---------------------------------------------------------------------------------------------------------*/
#pop {
	border:1px solid #CCCCCC; background:#fff; text-align:center; color:#3d3d3d;
	position:absolute; top:0; left:0px; z-index:998;
  }
  @media all and (min-width: 320px) and (max-width: 56.25em) {
	#pop, #pop2, #pop3, #pop4, #pop5 {left:0; top:0;}
	#pop img, #pop2 img, #pop3 img, #pop4 img, #pop5 img {max-width: 100%;}
}

.close {border-top:1px solid #ccc;}
.close div {float:left; height:30px; line-height:30px; margin:0; padding:0; text-align:right; font-size:12px; font-family: 'Noto Sans Korean', 'Noto Sans KR', 'Noto Sans', sans-serif;}
#check input {margin:0 10px 0 0; vertical-align:middle;}
#close {float:right; font-style:oblique; font-weight:bold;}
#close a {display:block; height:100%; background-color:#333; padding:0 15px; text-decoration:none; text-transform:lowercase; color:#fff;}