@charset "utf-8";
body, html {
    height: 100%;
}
body {
    font-size: 15px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    color: #393939;
}
* {
	font-size: 15px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
}
a {
    color: #393939;
}
footer {
	margin-top: 50px;
}
/*
a:hover {
    color: #393939;
}
a:active {
    color: #393939;
}*/

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.container { /* 내용은 항상 스크린 가운데, 좌우 20px 여백 */
    margin: 0 auto;
    padding: 0 20px;    
    max-width: 960px;   
}
@media screen and (max-width: 768px) {/* 0 ~ 767px */
    .container {
        padding: 0 10px;
    }
}
.flex {
	display: flex;
}
.flex-center {
	display: flex;
	align-items: center;
}
.flex-top {
	display: flex;
	align-items: flex-start;
}
.margin-b-30 {
	margin-bottom: 30px;
}
.margin-b-10 {
	margin-bottom: 10px;
}
.margin-b-16 {
	margin-bottom: 16px;
}
.margin-t-16 {
	margin-top: 16px;
}
.font-weight-400 { font-weight:400; }
.font-weight-500 { font-weight:500; }

.text-align-center {text-align:center;}

/*-------------------------------------------*/
/* 버튼 스타일 */
/*-------------------------------------------*/

.basic-btn {
		border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
}
.btn-full {width:100%;}
.btn-bgcolor-teal {background-color:#009688;}	/* 버튼 배경 초록색 */
.btn-bgcolor-white {background-color:#fff;}
.btn-color-white {color: #fff;}
.btn-color-gray {color: #9e9e9e;}
.btn-color-teal {color: #009688;}
.btn-border-teal {border: solid 1px #009688;}
.btn-border-gray {border: solid 1px #9e9e9e;}
.btn-padding-lg {padding: 12px 16px;}

.btn-opacity:hover{opacity: 0.8;}



/*-------------------------------------------*/






/* ========== 헤더 ========== */
header {
    border-bottom: 1px solid #dddddd;
}
.top-container {
	background:#f8f9fa;border-bottom:solid 1px #e5e5e6;
}
.header-flex {
    padding: 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.header-flex2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.header-logo {
	flex: 0 0 180px;
}
.header-flex2 nav {
	flex: 1 1 auto;
}
.header-logo a {
    font-weight: 800;
    font-size: 2rem;
    display: block;
    margin: 0;
}
.header-nav-mob { /*우측 상단 작은화면 아이콘메뉴*/
    display: none;
}
.header-nav, .header-nav-mob, .country-nav {
    overflow: hidden;    
}
.header-nav li, .header-nav-mob li, .country-nav li {
    float: left;
}
.header-nav a {
    display: block;
    padding: 5px 5px;
    font-size: 0.9rem;
}
.header-nav a:hover {
    opacity: 0.5;
}
.header-nav-mob a {
    display: block;
    padding: 0 0.4rem;
    font-size: 24px;
}
.country-nav {
	margin-left: 140px;
	margin-top:-1px;
	margin-bottom: -1px;
}
.country-nav a {
    display: block;
    padding: 5px 8px;
    font-size: 0.9rem;
    color: #000;
}
.country-nav a > img {	/*국기*/
	width: 24px;
	margin-right:5px;
	border: solid 1px #e5e5e6;
}
.country-nav a.act {
	background: #fff;
	border: solid 1px #e5e5e6;
    border-bottom: 0;
}

/* ========== 내비게이션 ========== */

.navbar {
    display: flex;
    justify-content: space-between;
    max-width: 650px;
    margin: 0 auto;
}

.navbar a {
    display: inline-block;
    padding: 12px 20px 12px 20px;
    font-weight: 500;
    font-size: 1.3rem;
    border-bottom: 3px solid #ffffff;
}
.navbar a:hover {
    color: darkcyan;
    border-bottom: 3px solid darkcyan;
}
.navbar a.active {
	background-color: #ffffff;
    color: darkcyan;
    border-bottom: 3px solid darkcyan;
}
.hamburger { /*좌측슬라이드메뉴 버튼*/
    display: none;
}
@media screen and (max-width: 768px) {/* 0 ~ 767px */
    .navbar, .header-nav, .country-nav, .top-container {        
        display: none;
    }   
    .hamburger, .header-nav-mob, .sidenav {
        display: inline;
    }
    .header-flex2 {
        align-items: center;
        justify-content: space-between;
        width:100%;
    }
    .header-logo a {
        font-size: 1.5rem;
    }
}

/* 모바일일때 좌측슬라이드메뉴
-------------------------------*/
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
/*-------------------------------------------*/





/* ========== main 기본레이아웃(내용없을때) ========== */

.main-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* ========== 푸터 ========== */

footer {
    background: #e9e9e9;
    font-size: 0.9rem;
}
.footer-container {
    padding: 20px 0;
}
.footer-nav {
    color: #474747;
}
.footer-nav li {
    display: inline;
    padding: 0 1rem 0 0;
}
.footer-nav a:hover {
    opacity: 0.5;
}


/* ========== keyvisual 메인이미지 ========== */

.keyvisual {
	border-radius: 8px;
	display:none;
    background-repeat: no-repeat;
    height: 350px;
    position: relative;
}
.keyvisual-content {
    text-align: center;
    color: #fff;
    position: absolute;
    font-size: 20px;
}
.keyvisual-content p {        
    font-weight: 500;
    color: #fff;
   /* text-shadow: 2px 2px 4px #00000067;*/
}


@media screen and (max-width: 768px) {
	.keyvisual {
		height: 270px;
	}
	.keyvisual-content {
		font-size: 15px;
	}
}

.key-icon {
    color:rgb(158, 158, 158);
    padding: 0 5px;
    font-size:20px;
    margin-top: 4px;
}
.key-input {
    border: none;
    width: 90%;
    margin-bottom: 4px;
}
.key-input:focus { 
    outline: none;
}
@media screen and (max-width: 768px) {/* 0 ~ 767px */
    .key-input {
        width: 70%;
    }
}
.title-flex {
 	align-items: flex-end;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 16px;
 	}
  	.row {
  display: flex;
  position: relative;
}

.column {
  flex: 25%;
  padding: 5px;
  
}
.column:first-child {
	padding-left: 0;
}
.mcard {
	width:100%;
	border-radius: 8px;
	border: solid 1px #e9e9e9;
	cursor: pointer;
}


.main-card {
					margin-left: -15px;
				}
				.main-card > .mcard {
					width: calc(33% - 15px);
					float: left;
					margin: 0 0 25px 15px;
				}
				.main-card:after {
				  content: "";
				  display: table;
				  clear: both;
				}
			
			@media screen and (max-width: 768px) {
			  .main-card > .mcard {
			    width: calc(50% - 15px);
			  }
			}
			
			@media screen and (max-width: 425px) {
			  .main-card > .mcard {
			    width: calc(100% - 15px);
			  }
			}

.mcard-img {  		/* 사진 div */ 
  		overflow:hidden;
  		width: 100%;
  		height: 166px;
  		border-radius: 8px 8px 0 0;
  		background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #e9e9e9;
  	}
.mcard-detail {
	position: relative;
	height: 140px;
	
    padding: 10px 14px;
}  	
.m-title {	/*상품명*/
    font-weight: 500;
    font-size: 1.13rem;
    line-height:1.3;
    height: 44px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/*
.box {
    height: 200px;
    line-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}*/
.m-score {	/*평점*/
	position: absolute;
	bottom: 35px;	
}
.m-score > .fa-star {	/* 별 아이콘 */
	color: #fd7e14;
	font-size: 0.8rem;
}
.m-score > span:nth-child(2) {	/* 평점 */
	font-weight: 400;
  margin-left: 3px;
  font-size: 0.91rem;
}
.m-score > span:nth-child(3) {	/* 인원 */
	margin-left: 3px;
	color: #9ca3a9;
	font-size: 0.91rem;
}

.m-price {	/*가격*/
	font-weight:500;
	position: absolute;
	bottom: 12px;
	color: #f2640a;
}

.mcard  .m-txt {	/*상품설명요약*/
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 12px;
    color: #848c94;
    text-align: justify;
    line-height: 1.2;
    padding-top: 8px;
}
.mcard-detail-height2 {
	height: 170px;
}

.round {	/* 슬라이드카드 방향버튼 */
	cursor: pointer;
	position: absolute;
	top: 47%;
	z-index: 50;
  border-radius: 50%;
  font-size:1.3rem;
  border: solid 1px #f7f7f7;
   padding: 8px 16px;
   background-color: #fff;
  		box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.1) ;
}
.round-left {
	left: 0px;
}
.round-right {
	right: 0px;
}


.swiper-button-next, .swiper-button-prev {	/* 슬라이드카드 방향버튼 */
	cursor: pointer !important;
	position: absolute !important;
	top: 50% !important;
	z-index: 50 !important;
	border-radius: 50% !important;
	font-size:1.3rem !important;
	border: solid 1px #f7f7f7 !important;
	padding: 12px 16px !important;
	background-color: #fff !important;
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.1) !important;
	color: #393939 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
}
.swiper-button-prev {
	left: 0px !important;
}
.swiper-button-next {
	right: 0px !important;
}
.swiper-button-next:after, .swiper-button-prev:after{
	content: '' !important;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  /*position: absolute;
  top: 50%;
  width: auto;*/
  margin: 0 20px;
  padding: 5px;  
  color: #e6e6e6;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 50%;  
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #e6e6e6;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #808080;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media screen and (max-width: 768px) {
  .prev, .next,.text {font-size: 11px}
  .dot {height: 9px;
  width: 9px;}
}

/* ========== /airticket/ ========== */



/* 왕복.편도 선택 탭
-----------------------*/
.tab {
    overflow: hidden;
    float: left;
    margin-right: 20px;
    margin-bottom: 5px;
}
.tab button {    
    float: left;
    border:1px solid  #ccc;
    background-color: #e9e9e9;
    outline: none;
    cursor: pointer;
    padding: 8px 10px;
    transition: 0.3s;    
}
.tab button:first-child {
    border-radius: 6px 0 0 6px;
}
.tab button:last-child {
    border-radius: 0 6px 6px 0;
}
.tab button:hover {
    background-color: #ddd;
}
.tab button.active {
    background-color: #009688;
    color: #ffffff;
}



/*검색input 플렉스 배치
-----------------------*/
.flex-container {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.flex-between {    
    justify-content: space-between;	/*주축 기준 배치방법/시작점끝점에딱붙여서배치후 나머지는 같은 간격으로*/
}
.flex-container>div{
    margin: 5px 0;
}
@media screen and (max-width: 768px) {/* 0 ~ 767px */   
    .flex-container .btn-div {
        width: 356px;
    }
    
}
/*input박스*/
.input-brd-none {
    border: none;
    width: 120px;
}
.input-calendar {
    padding: 6px 2px 4px 2px;
    font-size: 20px;
    color: #c0c0c0;
}
/* 인원수 선택 드롭박스 
----------------------- */
.dropdown {
    position: relative;
    display: inline-block;
}  
.dropdown-content {
    display: none;
    position: absolute;    
    background-color: #fff;
    min-width: 260px;
    padding: 10px 16px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.show {display: block;}
/*드롭박스 항목*/
.dropdown-content > div {
    padding: 8px 0;
}
.dropdown-content p {
    display: inline-block;
    margin-right: 30px;
}
.dropdown-content span {
    color: silver;
    font-size: 12px;
}
.dropdown-content input[type=text] {
    width: 20px;
    margin: 0 10px;
    text-align: center;
    border: none;
}
/* + - 아이콘 */
.dropdown-content i {
    vertical-align: middle;
    color: #c0c0c0;
    cursor: pointer;
}
.dropdown-content i:hover {color: #009688;}

/* 검색결과 목록 */
.flex-wrapper {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    flex-direction: row;
    flex-wrap: no-wrap;
    justify-content: space-between;	/*주축 기준 배치방법/시작점끝점에딱붙여서배치후 나머지는 같은 간격으로*/
    align-items: center; /*교차축 기준 배치방법/교차축중앙기준*/
}

/* 상세항공요금테이블 */
.table-wrapper{
	margin-bottom: 30px;
}
.table-price {
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
  font-size:0.85rem;
}
.table-price th, .table-price td {  
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
.table-price th {
	border-top: 1px solid #ddd;
	background-color: #f2f2f2; 
}
/*
th, td:nth-child(1) {
	text-align: center;
}*/
.table-price td:last-child {
	font-weight: bold;
}
.table-price tr:last-child td {
	border: 0px;
}
.t-title, .t-price {
	font-weight: bold;
	display: inline-block;
}
.t-price {
	font-size: 1.5rem;
	padding-top: 2rem;
	padding-right: 1rem;
	padding-left: 4rem;
}




/* ========== /hotel/ ========== */


/* 검색바 include_once(search_bar.php) */
.h-search {	/* 검색항목 container */
    padding: 24px 16px;
    border:solid 1px #dae1e6;
    border-radius: 8px;
    background: #f7f9fa;
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
}
.h-search-2 {	/* 검색항목 container  배경너비 100%, 화면 상단 고정 검색바*/
    padding: 24px 0;
    background: #f7f9fa;
    box-shadow: /*0 0 0 1px rgba(52,58,64,.1),*/ 0 2px 4px 0 rgba(52,58,64,.1);
}
.h-search-ul {	/* 검색항목 ul */
	height: 40px;	
}
.h-search-li {	/* 검색항목 li */
	position: relative;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	height: 100%;
	overflow:hidden;
}
.dest-li, .cal-li, .room-li {
    border: 1px solid #DADFE6;
    border-radius: 4px;
	background: #fff;
}
.dest-li {	/* 지역,호텔이름*/
	width:300px;
}
.cal-li {	/* 달력*/
	width:330px;	
	cursor:pointer;
}
.room-li {	/* 룸,인원*/
	width:180px;	
	cursor:pointer;
}
.btn-li {	/* 검색버튼*/
}
.h-search-i {	/* icons */
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left:5px;
	font-size: 20px;
	color: #c0c0c0;
}
.h-search-input {	/* input박스 전체 */
    font-size: 16px;
    padding-top: 6px;
    padding-left:28px;
    border: none;
    cursor:pointer;
    width: 100%;
}
.cal-li .h-search-input {	/* 날짜input box 너비값 고정 */
	width: 130px;
}
.room-btn { /* 룸,인원드롭다운버튼*/
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 960px) {/* 0 ~ 958px */
	.dest-li {
		width:100%;
		margin-bottom: 4px;
	}
}
/* 검색바 include_once(search_bar.php) */


/* 호텔리스트 list.php */
.hotel-filter {
  		float: left;
  		flex: 25%;
  		margin-right: 30px;
  	} 	
  	
  	.filter-title {	/* 필터 타이틀 */
  		font-size: 18px;
  		font-weight: 500;
  		margin-bottom: 10px;
  	}
  	.filter-row {	/* 필터항목 한줄 / 숙소유형,호텔등급  */
  		display:flex;
  		align-items: center;
  		margin-bottom: 2px;
  	}
  	.filter-check {
  		width: 17px;
  		height: 17px;
  		cursor:pointer;
  		top:0;	
  	}
  	.filter-item {  		
  		display: inline-block;
  		cursor: pointer;
  		width: 150px;
  		padding: 0 8px;
  		text-align: left;  		
  	}
  	
  	.hotel-map {
  		background-color: #fff;
		  border: 1px solid #dadfe6;
		  border-radius: 8px;
		  margin-bottom: 20px;
		  cursor: pointer;
		  height:80px;
		  text-align:center;
  	}
  	
  	
  	
  	.filter-price > span {
  		color: #848c94;
  		font-size: 13px;
  	}
  	.filter-price > input {
  		width: 70px;
  		border: solid 1px #dadfe6;
  		padding-bottom: 2px;
  	}
  	.service-btn, .city-btn {
  		background-color: #fff;
		  border: 1px solid #dadfe6;
		  border-radius: 13px;
		  padding: 4px 15px;  
		  margin: 0 2px 4px 0;;
		  cursor: pointer;
  	}
  	.city-btn {	/*도시 버튼*/
  		width: 100%;
  		border-radius: 8px;
  		margin: 0 0 5px 0;
  		display: block;
  		text-align: left;
  		position: relative;
  	}
  	.city-btn:hover {
  		border-color: #009688;
  		color: #006f64;
  	}
  	.city-btn span {
  		position: absolute;
  		top: 7px;
  		right:10px;
  		font-size: 12px; 
  		color:#a6a7a6; 		
  	}
  	.city-btn span:hover {
  		color: #495056;
  		background-color: #eff3f5;
  		border-bottom: solid 1px #495056;
  	}
  	
  	
  	.hotel-list {
  		flex:75%;
  		float: left;
  	}
  	
  	.hotel-list-top {
  		display: flex;
    	justify-content: space-between;
    	margin-bottom: 20px;
  	}
  	
  	.hotel-list-top > p {	/* 검색된 숙소 0개 */
  		display: inline-block;
  		font-weight: 500;
  		font-size:18px;
  	}
  	.hotel-list-sort {	/* 정렬조건 */
  		display: flex;
    	justify-content: space-between;
    	align-items: flex-end;
  	}
  	.hotel-list-sort a {
  		color: #c0c0c0;
  		display: inline-block;
    	padding: 0 8px;
  	}
  	
  	.hotel-list-sort a.active {
  		font-weight:500;
  		color: #393939;
  	}
  	
  	.hotel-card {	/* 호텔정보 카드 */
  		display: flex;
  		border-radius: 8px;
  		border: solid 1px #e9e9e9;
  		margin-bottom:15px;
  		cursor:pointer;
  		height: 160px;
  	}
  	.hotel-card:hover {
  		margin-bottom:16px;
  	}
  	.hotel-card:hover, .card:hover, .detail-item-cell:hover { 
  		border-color: #d7d7d7;
  		box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.1) ;
  		margin-top:-1px;
  	}
  	.hotel-card-img {  		/* 호텔사진 div */ 
  		overflow:hidden;
  		width: 200px;
  	}
  	.hotel-card-img img {
  		height: 100%;
    	border-radius: 8px 0 0 8px;
  	}
  	.hotel-card-detail{  		/* 호텔상세 div */    	
    	padding: 15px;	
    	width: 300px;
  	}
  	.h-title {	/* 호텔명 */
  		font-weight: 500;
  		font-size: 18px;
  	}
  	.hotel-card-price {	/* 호텔 가격 div */  		 
  		position:relative;
  		border-left: solid 1px #e9e9e9; 	
  		margin: 15px;
  		width: 160px;
  	}
  	.hotel-card-price > div {
  		position: absolute;
  		bottom: 0;
  		width: 100%;
  		text-align: right;
  		font-size:13px;
  		color: #848c94;
  	}
  	.hotel-card-price span {	/* 가격숫자 */
  		font-weight: 700;
  		font-size: 22px;
  		color: #393939;
  	}
  	.filter-item, .city-btn {	/* 체크박스 옆 텍스트*/
  		color: #495056;
			font-size: 16px;
  	}
  	.hotel-card-detail, .service-btn  {	/* 테두리있는 버튼 텍스트 / 호텔명 아래 텍스트 */
  		color: #495056;
  		font-size:14px;	
  	}
  	.star {color: #fbc302;}
/* 호텔리스트 list.php */


/* 호텔상세 detail.php */
	.hotel-name {
		font-size: 32px;
    font-weight: 700;
    margin: 0;
	}
	.hotel-ename {
    font-size: 15px;
    color: #666d75;
	}
	.hotel-location {
		font-size: 15px;
		color: #848c94;
	}
	
	.hotel-location i {
		font-size:16px; 
	}
	.hotel-detail {
		display: flex;
		flex-wrap: wrap;
	}
	.hotel-detail li {
		font-size: 13px;
		padding: 4px 6px;
		border: solid 1px #eaeced;
		border-radius: 4px;
		margin: 4px; 
	}
	
	.img-container {
		margin-top:20px;
  position: relative;
  height: 460px;
  max-width: 700px;
  overflow:hidden;
}
.img-container img {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.room-card {
	/*max-width: 700px;*/
	display: flex;
	padding: 16px;
	
	margin-top: 16px;
	border: 1px solid #e8ebee;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
    background-color: #fff;
}
.room-card:hover {
	
	border-color: #d7d7d7;
  		box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.1) ;
  		
}
.c-1 {
	flex:1 1 auto;
}
.c-2 {
	flex:1 1 auto;
	text-align:right;
	font-size: 14px;
	align-self:flex-end;
	color: #848c94;
}
.c-3 {
	margin-left: 20px;
	flex: 0 0 70px;
	align-self:center;	
}
.c-4 {	/*사진*/
	flex:0 0 200px;
	margin-right: 16px;
}
.c-2 span {
	font-weight: 700;
  font-size: 22px;
  color: #393939;
}
.info {
	/*max-width: 700px;*/
	padding: 15px 0;
	border-bottom: solid 1px #e9ecef;
}
.info-title {
	font-weight: bold;
	margin-right: 20px;
	flex: 0 0 110px;
}
.info-text {
	flex: 1 1 auto;
	line-height: 1.8em;
}
.room-card button {
  background-color: #e0f8eb;
  color: #119e51;
  font-size: 1.1rem;
}
.p-detail {
	color: #525252;
}
.p-detail > i {
	font-size: 12px;
	margin-right: 8px;
	margin-bottom: 10px;
}
.p-bt-detail {	/*객실정보보기*/
	cursor: pointer;
	border-radius: 4px;
    border: 1px solid #f1f3f5;
    background-color: #f6f4f3;
    padding: 2px 5px;
    display: inline-block;
    color: #535a61;
    font-weight: 400;
    font-size: 13px;
  }
.room-photo {
	width: 200px;
	height: 135px;
	position: relative;
}
.room-photo img {
	width: 100%;
	height: 100%;
	border-radius: 3px;
	cursor:pointer;
}
.photo-count {
	margin: 4px;
  bottom: 0;
  right: 0;
  position: absolute;
  display: flex;
  align-items: center;
  background-color: #1a1c1b;
  color:#fff;
  font-size: 12px;
  padding: 1px 4px;
}
.room-card h4 {
	line-height: 1;
}
.photo-count > i {
	font-size: 13px;
	margin-right: 3px;
}

/* 룸별 상세 인포 팝업 */
.room-info-modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 70px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.room-info-modal-content {
	position: relative;
  background-color: #fefefe;
  margin: auto;
  border: 1px solid #888;
  width: 80%;
  max-width: 670px;
  max-height: calc(100vh - 128px);
  border-radius: 8px;
  overflow: auto;
}
.room-info-modal-close {
  color: #aaaaaa;
  position: absolute;
  right: 16px;
  top: 10px;
  font-size: 20px;
  font-weight: bold;
}
.room-info-modal-close:hover,
.room-info-modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
#room_content {
	width: 100%;
	height: 100%;
}
.room-info-header {
	padding: 12px 12px;	
	border-bottom: solid 1px #e8ebee;
	min-height: 50px;
}
.room-info-header > * {
	font-weight: 500;
	font-size: 17px;
}
.room-info-header > p {
	padding-right: 30px;
}
.room-info-body {
	padding: 16px;
    overflow: auto;
}
.room-info-text {
	margin-top: 16px;
	padding-top: 16px;
	border-top: solid 1px #e8ebee;
font-size: 14px;
line-height: 26px;
    font-weight: 400;
    min-height: 200px;
}
.room-info-photo-container {
	width: 100%;
	max-width: 600px;
	min-width: 200px;
	margin: 0 auto;
}
.room-info-photo {
	position: relative;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio */
   background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 3px;
}



.room-info-photo-alt {
	margin: 4px;
  bottom: 0;
  left: 0;
  position: absolute;
  display: flex;
  align-items: center;
  background-color: #1a1c1b;
  color:#fff;
  font-size: 12px;
  padding: 1px 4px;
}
.room-info-photo-count {
	margin: 4px;
  bottom: 0;
  right: 0;
  position: absolute;
  display: flex;
  align-items: center;
  background-color: #1a1c1b;
  color:#fff;
  font-size: 12px;
  padding: 1px 4px;
}


/* 호텔상세 detail.php */



.card-grid {
	display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;  
}

.card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: solid 1px #e9e9e9;
    cursor: pointer;
    width: 200px;
}
.card-img {  		/* 사진 div */ 
  		overflow:hidden;
  		width: 100%;
  		height: 166px;
  		border-radius: 8px 8px 0 0;
  		background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  	}
.card-detail {
	height: 160px;
	flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 16px 14px;
}  	


.notice-1 {
	border: solid 1px #bce8f1;
	background: #f5f7f9;
	padding: 20px;
}

.notice-1 p {
	line-height: 1.8em;
}
.notice-1 .p-sub-1 {
	margin-left: 6px;
}
.notice-1 .p-sub-2 {
	margin-left: 12px;
}
.notice-1 > p:not([class]){
	margin-top:14px;
}



/*******************
상세페이지 사진 그리드
************************/
.grid-outer {
   position: relative;
   overflow: hidden;
   background:white;
   width: 100%;   
   padding-top: 50%; /* 56.25% 16:9 Aspect Ratio */
   margin-top: 10px;
}
.grid-container {
	width: 100%;
	height:100%;
	position:  absolute;
   top: 0;
   left: 0;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 6px;
}
.grid-container .item1 {
  grid-column-start: 1;
  grid-column-end: 3;  
  grid-row-start: 1;
  grid-row-end: 3;  
}
.grid-container .item1 > div {
	border-radius: 10px 0 0 10px;
}
.grid-container .item3 > div {
	border-radius: 0 10px 0 0;
}
.grid-container .item5 > div {
	border-radius: 0 0 10px 0;
}

@media screen and (max-width: 740px) {/* 0 ~ 767px */
    .grid-container > div:not(:first-child)/*.item2, .item3, .item4, .item5*/ {
        display: none;
    }
    .grid-container .item1 > div {
    	border-radius: 0;
    }
    .grid-container {
    	grid-template-columns: auto;
  		grid-template-rows: auto;
  		grid-gap: 0;
    }
    .grid-outer {
    	padding-top: 56.25%; /* 56.25% 16:9 Aspect Ratio */
    }
}

.grid-container > div > div {	/*사진div*/
	width: 100%;
	height: 100%;
	cursor:pointer;
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.grid-container > div> div:hover {
	opacity: 0.78;
}
.grid-btn {	/*사진전체보기 버튼*/
	position: absolute;
	bottom: 14px;
	right: 24px;
	z-index: 5;
	background-color: #fff;
	border: solid 1px #666;
	border-radius: 5px;
	padding: 5px 8px;
	font-size: 13px;
	color: #333;
	cursor: pointer;
}
.grid-btn:hover {
	background-color: #f1f3f4;
}
.grid-btn i {
	font-size:18px;
	margin-right: 3px;
}

/* 전체사진보기 modal */
.gallery-modal-content {
	position: fixed;
	left:0;
	top:0;
	display: none;
	overflow: auto;
	z-index: 999;
  background-color: #fff;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
@-webkit-keyframes animatetop {
  from {top:300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:300px; opacity:0}
  to {top:0; opacity:1}
}

.gallery-modal-header {	
	padding: 12px 12px;
    border-bottom: solid 1px #e8ebee;
}
.gallery-modal-body > div {	
	margin: 0 auto;
	max-width: 700px;
}
.gallery-modal-close {
  color: #aaaaaa;
  font-size: 20px;
  font-weight: bold;
}
.gallery-modal-close:hover,
.gallery-modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.body-scrolling-modal-active {
	touch-action: none;
	-webkit-overflow-scrolling: none;
	overflow: hidden;
	overscroll-behavior: none;
}

/* ========== /golf/ ========== */

.golf-bg { /*검색영역bg*/
		height: 190px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
.g-s-container {
	margin-top: -118px;
	z-index: 1;
}
  .g-search-h1 {/*검색영역title*/
	font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 4px #00000067;
}
  .g-search-2 {	
    background: #f7f9fa;
    box-shadow: /*0 0 0 1px rgba(52,58,64,.1),*/ 0 2px 4px 0 rgba(52,58,64,.1);
    padding: 20px 20px;
    margin-bottom: 40px;
    border-radius: 8px;
}
.g-search-flex {/*검색요소flexbox*/
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start;
}
/*
.g-search-flex > div:nth-of-type(1) {
    width: 300px;
    margin-right: 8px;
}
.g-search-flex > div:nth-of-type(2) {
    width: 260px;
    margin-right: 8px;
}
.g-search-flex > div:nth-of-type(3) {
    width: 260px;
    margin-right: 8px;
}*/
/*
아이콘들어간 input */
.input-with-i {
	position: relative;
}
.input-with-i > i {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 8px;
	font-size: 1.4rem;
	color: #59636a;
	cursor:pointer;
}
.input-with-i > input {
	box-sizing: border-box;
	font-weight: 400;
	font-size: 1.1rem;
	padding: 10px 10px 10px 36px;
	border: 1px solid #DADFE6;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	width: 100%;
  }
.input-with-i > input:hover {
	border-color: #59636a;
}
/*
아이콘들어간 input */

.bt-with-input {	/* input 옆 button */
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.1rem;
}

.g-dropdown {	/* input dropdown */
	position: relative;
}

.g-dropdown-content {
  display: none;
  position: absolute;
  top: 48px;
  background-color: #fff;
  min-width: 200px;  
  padding: 16px;
  overflow: auto;
  box-shadow: /*0 0 0 1px rgba(52,58,64,.1),*/ 0 2px 4px 0 rgba(52,58,64,.1);
  border: solid 1px #e4e7e8;
  z-index: 999;
  border-radius: 14px;
}
.g-show {display: block;}
.dropdown-time {
	padding: 0;
	margin: 0 1px;
}
.dropdown-time > a {
	display: block;
	border-bottom: solid 1px #f1f4f6;
	padding: 12px 12px;
	color: #000;
	font-size: 1rem;
}
.dropdown-time > a:last-child {
	border-bottom: 0;
}
.dropdown-time > a:hover {
	background-color: #f9fafb;
}

.guest-count-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-width: 230px;
}
.guest-count-inner:not(:last-child) {
	border-bottom: 1px solid rgb(235, 235, 235) !important;
	padding-bottom: 16px;
}
.guest-count-inner:not(:first-child) {
	padding-top: 16px;
}
.guest-count-inner-f1 {
	flex-grow: 1;
}
.guest-count-inner-f2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 96px;
	height: 30px;
}
.guest-count-inner-f1 > p:first-child {
	font-weight: 500;
}
.guest-count-inner-f1 > p:last-child {
	font-size: 14px;
}

/****** + - 둥근 버튼 ****/
.round-btn {
	width: 30px;
	height: 30px;
	flex-grow: 0;
	flex-shrink: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border: solid 1px #b1b1b1;
	border-radius: 50%;
}
.round-btn:hover {
	border-color: #000;
}
.round-btn > i {
	color: #59636a;
	font-size: 18px;
}
/****** + - 둥근 버튼 ****/



.card-title { /* 카드 슬라이드 타이틀 */
	font-size: 1.5rem;
	font-weight:600;
	margin:0 0 16px 0;
}


.detail-search-wrapper {
	padding: 24px;
	background-color: #fafbfc;
	border-radius: 2px;
}
@media screen and (max-width: 740px) {
	.detail-search-wrapper {
		margin-left: -10px;
		margin-right: -10px;
		padding: 24px 10px;
	}
}
.detail-search-flex {	/* 상세페이지 재검색 input 영역 */
	display: flex;
    margin-bottom: 16px;
}
.detail-search-flex > div:not(:first-child){
	margin-left: 10px;
}
.detail-search-flex > button {	/*상세페이지 재검색 버튼*/
	margin-left: 10px;
	background-color: #f8f9fa;
	color: #009688;
	border: solid 1px;
	border-color: #dadce0;
}
.detail-search-flex > button:hover {
	border: none;
	background-color: #009688;
	color: #fff;
}
.detail-search-flex i {
color: #009688;
}
.detail-search-flex input {
	/*background-color: #f8f9fa;*/
}
.detail-item {	/*상세페이지 아이템 영역*/
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
    margin-right: 0px;    
}
.detail-item-cell { /*상세페이지 아이템*/
	width: calc(50% - 10px);
  margin-left: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
  cursor: pointer;
	/*border-radius: 8px;
  border: solid 1px #e9e9e9;
  
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 0 0 1px #e9ecef;
  */
  border: 1px solid #e8ebee;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
    background-color: #fff;
}
.detail-item-cell:hover {
	margin-bottom: 11px;
}
@media screen and (max-width: 700px) {
.detail-item-cell { 
	width: calc(100% - 20px);
	margin-right: -10px;
}
}

.detail-item-cell-flex {
	display: flex;
	align-items: center;
	margin: 22px 14px 22px 20px;
}
.detail-item-cell-flex .c-1 {
	margin-right: 12px;
}
.detail-item-cell-flex button {	/*선택버튼*/
	background-color:#e0f8eb;
	color: #119e51;
	font-size: 1.1rem;
}

.detail-item-cell-flex .item-price {	/*가격*/
    font-weight: 500;
    font-size: 1.33rem;
    color: #393939;
}
.detail-item-cell-flex .item-opt-1 {
		font-weight: 500;
    font-size: 1.2rem;
}

/* 후기
**********************************/

.offer-review-rating {	/* 별점 영역 */
	width: 25%;
	height:158px;
	padding: 24px;
float: left;
background-color: #fafbfc;
border-radius: 2px;
margin-right: 10px;
    text-align: center;
}
.offer-review-stats {
	width: calc(75% - 10px);
	padding: 24px;
float: left;
background-color: #fafbfc;
border-radius: 2px;
    text-align: center;
}


.offer-review-rating .fa {	/* 별 */
  font-size: 1.3rem;
  color: #dadfe3;
}
.offer-review-rating p {	/* 평점 */
  font-size: 2.5rem;
    font-weight: 600;
}
.offer-review-rating .checked {
  color: orange;
}
.offer-review-rating .count {
	margin-top: 4px;
	font-weight: 500;
	font-size: 1.2rem;
	color: #7f8f9d;"
}


.offer-review-stats .fa {	/* 별 */
  font-size: 0.66rem;
  color: #7f8f9d;
  margin-left:1px;
}
.offer-review-stats .o-side {	/*별 영역*/
  float: left;
  width: 17%;
  text-align: right;
}

.offer-review-stats .o-middle {	/*그래프 영역*/
  margin-top: 10px;
  margin-left: 20px;
  float: left;
  width: 60%;  
}
.offer-review-stats .o-right {	/*인원 영역*/
  text-align: right;
  width: 13%;
  font-size: 13px;
}


.offer-review-stats .bar-container {
  width: 100%;
  background-color: #f1f1f1;
  text-align: center;
  color: white;
  border-radius: 5px;
}

.offer-review-stats .bar {
	height: 8px;
	background-color: #2196F3;
	border-radius: 5px;
}


.offer-review-sort {	/* 후기 정렬조건*/
	display: flex;
	justify-content: flex-end;
	margin-top: 30px;
	font-size: 0.94rem;
}
.offer-review-sort a {
    color: #c0c0c0;
    display: inline-block;
    padding: 0 8px;
}
.offer-review-sort a.active {
    font-weight: 500;
    color: #393939;
}

.offer-review-list {
	margin-top: 16px;
}
.offer-review-list li {	/* 후기 리스트*/
	display: flex;
	align-items: flex-start;
	padding: 20px 0;	
	color: #212529;
	min-height: 100px;
}
.offer-review-list li:not(:first-child) {
	border-top: solid 1px #e9ecef;
}
.offer-review-list li > div:nth-of-type(1) { /* 별점,아이디,날짜 영역 */
	flex: 0 0 80px;
}
.offer-review-list li > div:nth-of-type(2) {	/* 후기텍스트,이미지 영역 */
	flex: 1 1 auto;
	align-items: flex-start;
	display: flex;
	margin-left: 20px;
	margin-top: 3px;
}

.offer-review-list .fa {	/* 별 */
  font-size: 0.8rem;
  color: #dadfe3;
  margin-right: -3px;
}
.offer-review-list .checked {
  color: orange;
}
.reviewer-id {
font-size: 12px;
    font-weight: 700;
  }
.review-date {
  color: #808991;
    font-size: 12px;
    line-height: 16px;
  }
.review-content {	/* 후기 텍스트 <p> */
	flex: 1 1 auto;
    color: #212529;
    line-height: 1.7em;
    word-break: break-all;   
}
.review-content .hidden {
    display: none;
}
.review-content .review-read-more {
	-webkit-appearance: none;
    background: 0 0;
    border: none;
    font-size: 13px;
    padding-left: 3px;
    line-height: 1.5em;
    box-shadow: none;
    color: #738096;
    -webkit-transition: color .2s;
    transition: color .2s;
    cursor: pointer;
  }
.review-thumbnail {	/* 후기사진<div> */
    overflow: hidden;
    flex: 0 0 100px;
    height: 100px;
    margin-left: 20px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    cursor: pointer;
}
.offer-review-more-button-wrapper {
		margin-top: 15px;
  }
.offer-review-more-button {
display: block;
cursor: pointer;
    padding: 13px 0;
    width: 100%;
    border: 1px solid #dadce0;;
    background: #fff;
    border-radius: 3px;
    text-align: center;
    color: #808991;
    font-size: 13px;
    font-weight: 700;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
  }
.offer-review-more-button:hover {
	background: #f8f9fa;
	
}
/* 종료 /후기
**********************************/


.floating-menu-wrapper {
	position: fixed;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
}
.floating-menu-list {
	background: linear-gradient(rgb(86, 152, 255) 0%, rgb(86, 152, 255) 50%, rgb(86, 113, 255) 100%);
    border-radius: 25px;
    min-width: 100px;
    text-align: center;
    padding:5px;
}
.list-title {
	
}

.list-item:not(:first-child) {
	border-top: 1px solid hsla(0,0%,100%,.2);
}

.list-title p {
	font-size: 1.5rem;
	font-weight: 500;
	color: #fff;
}
.list-item a {
	display: block;
	padding: 10px 10px;
	color: #fff;
}


/* 예약하기
**********************/
.order-wrapper-1 h2 {
	margin-top: 46px;
    margin-bottom: 24px;
}
.order-wrapper-1 {
	margin-bottom: 100px;
	margin-right: -20px;
}
.order-wrapper-2 {
	width: calc(50% - 20px);
	margin-right: 20px;	
	float: left;	
}

@media screen and (max-width: 767px){
	.order-wrapper-1 {
		margin-right: 0;
	}
	.order-wrapper-2 {
	    margin-right: 0;
	    width: 100%;
	}
}
.order-card {	/* 카드 테두리 */
	padding-bottom: 16px;
  margin-bottom: 10px;  
  border: 1px solid #e8ebee;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
    background-color: #fff;
    color: #424242;
	font-size: 15px;
}

.order-title {	/* 각각 카드 제목 */
	font-size: 1.5rem;
  margin: 16px 0 16px 16px;
}

.order-item-img {	/* 상품 썸네일 */
    overflow: hidden;   
    border-radius: 8px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    float:left;
    margin-right: 15px;
     width: 86px;
    height: 86px;
}

.order-card ul {
	margin: 0 16px;
	
}
.order-card li:not(:last-child) {
	border-bottom: solid 1px #f0f0f0;
}
.order-card li {
	padding: 14px 0;
}
.order-card-title-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.order-card-title-flex > p {
	margin-right: 16px;
}
.item-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item-flex > div {
	min-width: 60px;
}

.order-item-title {	/* 상품명 */
	font-size: 1.36rem;
	font-weight: 500;
	line-height: 1.2;
}
.order-price {	/* 금액표시 */
	padding: 20px;
	background-color: #e0f8eb;
	color: #119e51;	
	margin-bottom: -16px;
}
.order-price > span {
	font-weight: 500;
	font-size: 1.3rem;
}
.help-msg {
	color: #009688;
	font-size: 14px;
	margin-top: 2px;
}
.opt-group {	/* 옵션 - 인원 선택 */
	margin-top: 12px;
}
.opt-group input[type="radio"]{
	display:none;
}
  .opt-group label {
  	cursor: pointer;
    margin-right: 6px;
    padding: 6px 16px;
    border: 0;
    border-radius: 20px;
    background-color: #f5f6f7;
    background-color: #fff;
    border:solid 1px #cacdd1;
    letter-spacing: -0.4px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
  }
  
.opt-group label.active {
	background-color: #e0f8eb;
	color: #119e51;
	border-color: #e0f8eb;
}

.card-inner {
	margin: 24px 16px 8px 16px;
	color: #000;
	line-height: 1;
}
.order-card input[type="text"] {
	background-color: #fff;
	border: solid 1px #DADFE6;
	border-radius: 4px;
	width: 100%;
	margin: 8px 0 20px 0;
	padding: 8px 8px;
}
.order-card .fas {	/* 아이콘 */
	cursor: pointer;
	font-size:20px;
	margin-right:6px;
	color:#c0c7cd;
}
.order-card .fa-bell {
	font-size:18px;
	margin-right:6px;
}

.order-card .agree-wrapper {	/* 약관동의 영역 */
	margin: 12px 16px;
}
.agree-wrapper .agree-inner {
	background-color: #fafafa;
	padding: 10px;
}

.order-card .nots {	/*안내사항*/
	margin-top: 26px;
	padding: 16px;
	border: 1px solid #ebeef1;
	background-color: #f8f9fb;
	word-break: break-all;
}
.order-card .nots>p {
	line-height: 1.7;
}

/************
로그인, 회원가입
********************/
.sign-bg {
	background-color:#f8f9fa;
}
.sign-in-container {	
	width: 400px;
	padding: 40px;
	margin: 70px auto 200px auto;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	-webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
	box-shadow: 0 1px 1px 0 rgb(0 0 0 / 3%);
	background-color: #fff;
}
@media screen and (max-width: 425px){
	.sign-bg {
		background-color:#fff;
	}
	.sign-in-container {
		width: 100%;
		padding: 20px;
		margin: 0;
		margin-top: 40px;
		border: 0;
		box-shadow: none;
	}
}
.sign-in-input {
	background-color: #fff;
	border: solid 1px #DADFE6;
	border-radius: 4px;
	width: 100%;
	margin: 4px 0 20px 0;
	padding: 8px 8px;
}
.sign-in-container h3, .sign-in-container h4 {
	margin: 0;
	margin-bottom: 16px;
	line-height: 1;
}

.sign-flex {
	display: flex;
  align-items: center;
  justify-content: flex-end;
	margin-top: -15px;
	margin-bottom: 16px;
}
.left-bar {
	border-left: 1px solid #dfdfdf;
}
.sign-link {
	display: block;
	padding: 0 6px;
	color: #738096;
	font-size: 14px;
	letter-spacing: -.03em;
	line-height:1em;
}
.sign-link:hover {
	color: #495056;
	background-color: #eff3f5;
}

.agreements {
	margin-top: 16px;
    border: 1px solid #d6deeb;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 16px;
}
.agreements p {
	display: inline-block;
	line-height:1;
}
.all-agree {
	border-bottom: 1px solid #d6deeb;
	padding: 10px;
	
}
.agreements li {
	display: flex;
	align-items: center;
	padding: 10px;
	padding-bottom: 0;
}
.agreements li:last-child {
	padding-bottom: 10px;
}
.agreements li div {
	flex: 1;
}
.agreements li {
	font-size: 13px;
}
.agreements .fa-check-circle {	/* 체크아이콘 */
	color: #ced5d9;
	font-size: 18px;
	margin-right: 8px;
}
.agreements .fa-angle-right {
	color: #b0b7bc;
	float: right;
	font-size: 15px;
	margin-top: 4px;
}

.find-pw-flex {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 5px;
}


.opt_container {
	
}
.opt_container > h3 {	
    font-weight: 600;  
}

.opt_container > button {
	background-color: #ffffff;
	border-radius: 4px;
	border: 1px solid #cccccc;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 8px 16px;
	cursor:pointer;
}

.opt_container > button:hover {
	border-color: darkcyan;
	color: darkcyan;
}


.opt_container > button.selected {
	background-color: darkcyan;
	color: #ffffff;
	border-color: darkcyan;
}