*{box-sizing:border-box; margin:0; padding:0;}
body{font-family: sans-serif; color:#fff; background-image:url('img/background_05.jpg'); }
.footer,.header,.container{margin:0 auto; text-align:center; background:rgba(0, 0, 0, 0.8);}
.ov{overflow:hidden;}
.bg_02{background:rgba(0, 65, 131, 0.5);}
a{display: block;}

/* 상단의 메뉴 */

/* object-fit:cover;  img에 사용한다. 알아보 적용 사이트:http://artisticbit.tistory.com/78*/

.header{background:#fff;}
.header .container{width:300px; background:#fff; line-height:50px;}
.header .container .img_box{float:left;}
.header .container .img_box img{vertical-align:top; }
.header .container .header_menu{float:right;  font-family:'Righteous'; vertical-align:top; padding:0; margin:0;
/* border: 1px solid #000; */
}
.header .container .header_menu span{height: 54px; font-size:20px;color:#000;display:inline-block; margin: 0; padding:0 10px;;
  /* border: 1px solid #f00; */
  }
/*질문!1 하단의 공간이 왜 사이가 비는지 모르겠어요..
답:height: 54px; 앞에 있는 이미지의 높이 값 때문에 밑에 상단이 뜨는 경우이다. img의 높이값을 같게 해주었다.
*/
/* .menu-button:hover,.login-button:hover{background:#026ad2; color:#fff; cursor:pointer;} */
/*질문!2 나머지 효과는 되는데 칼라 값이 한번에 안되어서 따로따로 줬는데 이유를 모르겠어여 왜 안되는지..  */
/* .header .container .header_menu .login-button:hover{background:#026ad2;color:#fff;cursor:pointer;} */
/* .header .container .header_menu .menu-button:hover{background:#026ad2;color:#fff;cursor:pointer;} */

.header .container .header_menu .menu-button:hover,.header .container .header_menu .login-button:hover{background:#026ad2;color:#fff;cursor:pointer;}

/* 답:간혹(a,span) 경우 경로 전체를 써 줬야 되는 경우가 있다.  */

/*하단의 메뉴*/
  #nav-menu-dropdown {display: none;}
  #nav-menu-dropdown .container .out_box{width:300px;margin:10px auto;}
  #nav-menu-dropdown .container .out_box ul{float:left; width:150px; font-family:sans-serif; font-size: 15px; }
  #nav-menu-dropdown .container .out_box ul li{margin:10px;text-align:left;}
  #nav-menu-dropdown .container .out_box ul li:hover{color:#7abbfc; cursor:pointer;}
  #nav-menu-dropdown .container .out_box ul li:nth-child(1){color:#ff0;font-weight:bold;}

/*인포박스*/
#login_input{display:none;}
.container .login-form {padding:0 0 20px;}
.container .login-form .box_form{display:inline-block; width:300px;}
.container .login-form .box_form input,h4{margin-top:10px;}
.container .login-form .box_form h4{text-align:left; font-family:'Righteous'; font-size: 20px;}
.container .login-form .box_form input{width:300px; height:30px; border:none;}
.container .login-form .box_form input[type='submit']
{color:#ff0; font-weight:bold; background:#026ad2; height:40px; font-family:'Righteous'; font-size:18px; margin-top:30px;}

/*하단의 내용*/
.con{margin:20px auto; width:400px;}
  .con h4{font-size:20px; font-family:sans-serif; margin-bottom:30px; }
  .con .product-card {width:300px; margin: 0 auto; font-family:'Righteous', cursive;}
  .con .product-card .more-details-button{margin-bottom: 30px;}
  .con .product-card .more-details-button img{width: 100%;}
  .con .product-card h2{background:#054585; color:#ff0; font-size:15px; padding:10px 0;}
  .con .product-card .product-top{background:#026ad2;}
  .con .product-card .product-top img{vertical-align:top;  width:300px; height: 218px;
    /* transform:scale(1); transition:transform .5s; */
  }
  .con .product-card .product-top img:hover{
    /* transform:scale(1.5); transition:transform .5s; */
    /* filter: opacity(30%); */
  }
  .con .product-card .product-top .img_txt{float:left; width:260px; color:#222;}
  .con .product-card .product-top em,span{padding-top:6px; margin-left: 10px; color:#fff;}
  .con .product-card .product-top span{float:left;}
  .con .product-card .product-top em{float:right;}
  .con .product-card .product-top p{width:40px; background:#333; padding:8px; display:inline-block; float:right;}
  .con .product-card .product-top .p_details{cursor:pointer;}
  .con .product-card .product-details{display:none; padding-top:10px; background:hsla(210, 86%, 17%, 0.5);}
  .con .product-card .product-details p,em{text-align:left; padding:10px 20px;}
  .con .product-card .product-details p{display:inline-block;}
  .con .product-card .product-details em{display:block;}
  .con .product-card .product-details .c_buttom{padding:10px 20px;}
  .con .product-card .product-details .c_buttom button:hover{color:#042546;}
  .con .product-card .product-details .c_buttom button{float:left; background:#026ad2; color:#fff; padding:3px 19px; margin-right:2px;}

.footer{background:#131313;}
.footer .container{width:300px; background:#131313; }
.f_l{float:left;}
.f_r{float:right;line-height:65px;color:#fff;}
@media screen and (min-width:993px){.container{width:70%;}
.con_img_main{display:none;}}
@media screen and (max-width:700px){.container{width:100%;}}
@media screen and (max-width: 500px) {.con_img_main{display:none;}}