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

Layout : sub

login_form
sub2_smith
sub4_cafe
sub5_faq

-*-*-*-*-*-*-

media query
pc : 1600, 1440, 1280
tablet : 1024, 834, 768
mobile : 580, 414, 360

color
Background
- F7F7F9, rgb 247,247,249
Khaki light
- B7BAA9
Khaki dull
- 817E6B, rgb 129,126,107
Khaki dark
- 67665E
Black
- 383838
error
- fd6d5e

font
Adobe Caslon Pro, Playfair Display, serif
Avenir Next LT Pro, Noto Sans KR, sans-serif

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

/* --- popup --- */
button.popup{
	margin-bottom:1rem;
}
#pop_wrap{
	width:100vw; height:100vh;
	background:rgba(0,0,0,0.4);
	position:absolute;
	z-index:1000000;
	display:none;
}
#pop_wrap #popup{
	width:471px; height:692px;
	position:relative;
	top:50%; left:50%;
	margin-top:-346px; margin-left:-235.5px;
}
#pop_wrap #popup button{
	padding:10px;
	background:none;
	position:absolute;
	font-size:2rem;
	line-height:2rem;
	color:#383838;
	top:0; right:0;
}
#pop_wrap #popup img{
	width:100%;
}
@media only screen and (max-width: 471px) {
  #pop_wrap #popup{
	  width:100%; height:auto;
	  top:4rem; left:0;
	  margin-top:0; margin-left:0;
  }
}

/* ================================================
Layout : sub
================================================ */

@media only screen and (max-width: 1025px) {
  #login_form, #sub2_smith, #sub4_cafe, #sub5_faq{
	height:auto;
	padding-top:4rem;
	padding-bottom:140px;
  }
}
@media only screen and (max-width: 580px) {
  #login_form, #sub2_smith, #sub4_cafe, #sub5_faq{
	height:auto;
	padding-top:4rem;
	padding-bottom:13.5rem;
  }
}

/* -----------------------------------------------------------------
    login_form
----------------------------------------------------------------- */

#login_form{
	margin:0 7% 0 13%;
}
#contact-form {
  margin-bottom: 6rem;
}
@media only screen and (max-width: 1280px) {
  #contact-form .btn{
	  width:48%; padding: 1rem 2rem;
  }
}
@media only screen and (max-width: 991px) {
  #contact-form .btn{
	  width:49.7%;
	  margin-bottom:2rem;
  }
}
@media only screen and (max-width: 1025px) {
  #login_form{
	margin:0;
  }
  #contact-form {
    margin-top: 8.14rem;
    margin-bottom: 5.57rem;
  }
}
@media only screen and (max-width: 834px) {
  #contact-form .btn {
    width: 100%;
	margin-bottom:0.5rem;
  }
  #contact-form .btn:last-child {
	margin-bottom:2rem;
  }
}
@media only screen and (max-width: 580px) {
  #contact-form {
    margin-top: 2.14rem;
    margin-bottom: 3rem;
  }
}
#contact-form button[type="reset"]{
  background-color:#B7BAA9;
}
#contact-form button[type="reset"]::before{
  background-color:#e4e5df;
}
.border-bottom {
  border-bottom: 1px solid #383838;
  margin-bottom: 1.6rem;
}

/* -----------------------------------------------------------------
    sub2_smith
----------------------------------------------------------------- */

#sub2_smith .container p{
	word-break:keep-all;
}
@media only screen and (max-width: 1600px){
  #sub2_smith .container {
	  padding-left:6%;
  }
}
@media only screen and (max-width: 1440px){
  #sub2_smith .container {
	  padding-left:10%;
  }
  #sub2_smith .container-first .col__caption .title_h2{
	  font-size:3rem;
  }
}
@media only screen and (max-width: 1280px){
  #sub2_smith .container {
	  padding-left:12%;
  }
  #sub2_smith .container-first .col__caption .title_h2{
	  font-size:2.5rem;
  }
}
@media only screen and (max-width: 1025px){
  #sub2_smith .container {
	  padding-left:1rem;
  }
}
.eighty_bg {
  padding-top: 7.14rem;
  position: relative;
  overflow:visible;
}
.eighty_bg::before, .eighty_bg::after {
  content: '';
  background-color: #F7F7F9;
  height: 80%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -10;
}
.eighty_bg::after {
  margin-left: -100%;
}
@media only screen and (max-width: 1025px) {
  .eighty_bg {
    padding-top: 5rem;
  }
  .eighty_bg::before, .eighty_bg::after {
    height: 70%;
  }
}
@media only screen and (max-width: 580px) {
  .eighty_bg {
    padding-top: 2rem;
  }
  .eighty_bg::before, .eighty_bg::after {
    height: 60%;
  }
}
#sub2_smith .eighty_bg::before, #sub2_smith .eighty_bg::after{
	background-color: #67665E;
}
#sub2_smith .eighty_bg .about_bg{
	background-image:url(../image/visual/steven_smith_bg.png);
	background-repeat:no-repeat;
	background-size:cover;
	position: absolute;
	top: 0;
	right: 0;
	width:150%; height:105%;
	z-index:-1;
}
@media only screen and (max-width: 1025px) {
  #sub2_smith .eighty_bg .about_bg{
    height:102.5%;
  }
}
@media only screen and (max-width: 580px) {
  #sub2_smith .eighty_bg .about_bg{
    height:104%;
  }
}
#sub2_smith .eighty_bg .title_h3,
#sub2_smith .eighty_bg p{
	color:#ffffff;
}
@media only screen and (max-width: 1600px){
  #sub2_smith .floating-box {
    right: -5rem;
  }
}
@media only screen and (max-width: 1440px){
  #sub2_smith .floating-box {
    right: 0;
	margin-bottom:-12rem;
  }
}
@media only screen and (max-width: 1025px){
  #sub2_smith .floating-box {
	margin-bottom:-10rem;
  }
}
@media only screen and (max-width: 991px){
  #sub2_smith .floating-box {
	right: -3rem;
	margin-bottom:-10rem;
  }
}
@media only screen and (max-width: 834px){
  #sub2_smith .floating-box {
	right: 0;
	margin-bottom:-10rem;
  }
}
@media only screen and (max-width: 768px) {
  #sub2_smith .floating-box {
    padding: 1.5rem 2rem;
    width: 16rem;
	right: -3rem;
    margin-bottom:-7rem;
  }
  #sub2_smith .floating-box p{
	display:none;
  }
  #sub2_smith .outer_top-bottom_20 {
    margin-top:10rem;
  }
}
@media only screen and (max-width: 580px) {
  #sub2_smith .floating-box {
	padding: 1rem 2rem;
	right: 0rem;
	width: 14rem;
    margin-bottom:-5.3rem;
  }
  #sub2_smith .outer_top-bottom_20 {
    margin-top:7rem;
  }
}

/* -----------------------------------------------------------------
    sub4_cafe
----------------------------------------------------------------- */

#sub4_cafe{
	margin-left:10%;
}
@media only screen and (max-width: 1440px){
  #sub4_cafe{
	margin-left:13%;
  }
}
@media only screen and (max-width: 1025px){
  #sub4_cafe{
	margin-left:0;
  }
}
#sub4_cafe .title_h3{
	position:relative;
	top:0rem; left:0;
}

.title_contact {
  color: #787d86;
  font-family: "Avenir Next LT Pro", "Noto Sans KR", sans-serif;
  font-size: 1.28rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
@media only screen and (max-width: 1280px) {
  .title_contact {
    font-size: 1.14rem;
  }
}
@media only screen and (max-width: 580px) {
  .title_contact {
    margin-bottom: .6rem;
  }
}
.list-info {
  font-size: 1.25rem;
  line-height: 1.6;
  list-style: none;
  padding-left: 0;
  padding-right: 1rem;
  margin-bottom: 0;
}
@media only screen and (max-width: 1280px) {
  .list-info {
	font-size: 1rem;
    margin-bottom: 4.28rem;
  }
}
@media only screen and (max-width: 1025px) {
  .list-info {
    margin-bottom: 2.85rem;
	padding-right: 0;
  }
}
@media only screen and (max-width: 768px) {
  .list-info {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
}
.list-info_last-child {
  margin-top: 4.28rem;
}
@media only screen and (max-width: 1280px) {
  .list-info_last-child {
    margin-top: 0;
  }
}
.list-info li{
	padding-right:1rem;
	word-break:keep-all;
}
@media only screen and (max-width: 1025px) {
  .list-info li{
	padding-right:0;
  }
}
.map-block {
  height: 40rem;
  margin-right: 0;
}
@media only screen and (max-height: 1000px) {
  .map-block {
    height: calc(100vh - 360px);
	margin-bottom:0;
  }
}
@media only screen and (max-width: 1025px) {
  .map-block {
    height: 50vh;
    margin-right: 0;
    margin-bottom: 4.28rem;
  }
}
@media only screen and (max-width: 580px) {
  .map-block {
    margin-bottom: 2.2rem;
  }
}
.map-block div {
  z-index: 1;
}

/* -----------------------------------------------------------------
    sub5_faq
----------------------------------------------------------------- */

#sub5_faq{
    padding-right:7%;
	padding-left:13%;
}
@media only screen and (max-width: 1600px){
  #sub5_faq{
    padding-right:12%;
	padding-left:18%;
  }
}
@media only screen and (max-width: 1025px){
  #sub5_faq{
    padding-right:5%;
	padding-left:5%;
  }
}
@media only screen and (max-width: 580px){
  #sub5_faq{
	padding-right:1rem;
	padding-left:1rem;
  }
}
#sub5_faq .title_h3{
	position:absolute;
	top:100px; left:0;
}
@media only screen and (max-width: 1025px){
  #sub5_faq .title_h3{
	top:3rem;
  }
  #sub5_faq .outer_top-bottom_20{
	margin-top:6rem;
  }
}