/*
* Base Template
* Combines HTML5 Boilerplate & Boostrap. Includes some basic templating.
* Authored by Stephen Shaw (shshaw@gmail.com)
*/

/* @group Basics */

*,
*:before,
*:after {
  box-sizing: border-box;
}

@font-face {
font-family: 'NanumSquareL';
 src: url(../fonts/NanumSquareL.eot);
 src: url(../fonts/NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(../fonts/NanumSquareL.woff) format('woff'),
      url(../fonts/NanumSquareL.ttf) format('truetype');
}
ul, ul li{list-style: none;padding:0;margin:0;}
html,
body {
  margin: 0;
  padding: 0;
  /*height: 100%;
  overflow: hidden;*/
  position: relative;
    border:none
}

body {
    font-family:'NanumSquareL','sans-serif';
    background:#111;
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; }
.container {
    width:640px;
    margin:0 auto;
    margin-top:20px;
    position: relative;
}

.container h1 {
  text-align: center;
  font-size: 32px;
  margin:0% auto 2%;
    color:#ffb9b4;
    line-height: 1.6;
    font-family:'NanumSquareL','arial';
    font-weight: bold;
}
.container h2{text-align: center;
  word-break: keep-all;
  font-size: 34px;
  margin:0 auto 40px;
    color:#fff;
    line-height: 1.6;
    font-family:'NanumSquareL','arial';
    font-weight: bold;}
.container2 {
    width:640px;
    margin:0 auto;
    margin-top:20px;
    position: relative;
}

.container2 h1 {
  text-align: center;
  font-size: 30px;
  margin:0% auto;
    color:#ffb9b4;
    line-height: 1.6;
    font-family:'NanumSquareL','arial';
    font-weight: bold;
}
.container2 h2{text-align: center;
  font-size: 30px;
  margin:0 auto 40px;
    color:#fff;
    line-height: 1.6;
    font-family:'NanumSquareL','arial';
    font-weight: bold;}
.container .box{background:#1e2024;padding:40px 30px; width:640px; box-sizing: border-box; margin:0 auto;}
.container .box h3{color:#aaa;font-size:26px;line-height: 1.6;margin:0;}
.container .box .clearfix{overflow: hidden;}
.float{float:left;font-size: 16px;font-weight: bold;}
.box-list{width:424px; margin:0 auto;}
.container .box .box-list#device a{width:192px;height:192px;display: block;transition: .2s; float: left; margin:10px;}
.container .box .box-list#device a:nth-child(1){background:url(../img/TV.png) no-repeat;}
.container .box .box-list#device a:nth-child(1):hover{background:url(../img/TV_w.png) no-repeat;}
.container .box .box-list#device a:nth-child(2){background:url(../img/airwash.png) no-repeat;}
.container .box .box-list#device a:nth-child(2):hover{background:url(../img/airwash_w.png) no-repeat;}
.container .box .box-list#device a:nth-child(3){background:url(../img/fan.png) no-repeat;}
.container .box .box-list#device a:nth-child(3):hover{background:url(../img/fan_w.png) no-repeat;}
.container .box .box-list#device a:nth-child(4){background:url(../img/aircon.png) no-repeat;}
.container .box .box-list#device a:nth-child(4):hover{background:url(../img/aircon_w.png) no-repeat;} 
.container .box-list{}
.box2 .box-list{width:520px;}
.box2 .box-list h3 {padding:50px 0 0;}
.container2 .box{background:none;}
.container2 .box-list {width:520px; margin:0 auto;float:none;}
.container2 .box-list {margin-top:40px;display: flex;padding:0;}
.container2 .box-list a{width:49%;color:#fff;background:#262626;border:1px solid #484848;padding:10px;font-size:22px;cursor: pointer;text-align: center;}
.container2 .box-list button{width:100%;color:#fff;background:#262626;border:1px solid #484848;padding:10px;font-size:22px;cursor: pointer;text-align: center;font-weight: bold;}
.container2 .box-list a{margin-right:2%;}
.container2 .box-list button:first-child{margin-right:2%;}
.container2 .box-list button:disabled{color:#5e5e5e;font-weight: bold;}
.container2 .box-list button:disabled:hover{color:#5e5e5e;font-weight: bold;background:#262626;}
/*고정 btn style*/
.box-list a,.box-list button{font-weight: bold;transition:.2s;}
.box-list a:hover,.box-list button:hover{color:#5e5e5e;font-weight: bold;background:#fff;}

.container2 .box-list .input-design{width:100%;text-align: center}
.container2 .box3 {margin-top:60px;}
.container2 .box3 .box-list a{width:100%;margin:0;}
.container2 .box4 {margin-top:60px;}

/*popup*/
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.94);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.popup{padding-top:20px; position: relative; width: 640px; margin:0 auto;}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.target {
  visibility: visible;
  opacity: 1;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 100ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #ccc;
    cursor: pointer;
}
.popup .close:hover {
  color: #fff;
}

.box-list .input-design{width:95%;height:70px;background:#0f0f0f;border:5px solid #fff;color:#767677;font-weight: bold;font-size:28px;text-align: center;}
.input-design:focus{}
.box-list a{margin:0 34px 34px 0; float:left;cursor: pointer;}
.box2 .keyword_box{height:200px;overflow-y:auto;margin-top:20px;-webkit-overflow-scrolling:touch;}
.box2 .keyword_box::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
  background-color: #555;
  border-radius:20px;
}

.box2 .keyword_box::-webkit-scrollbar
{
  width: 12px;
  background-color: #555;
  border-radius:20px;
}

.box2 .keyword_box::-webkit-scrollbar-thumb
{ 
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #F5F5F5;
  border-radius:20px;
}
.box2 .box-list ul li{height:50px;line-height:50px;color:#aaa;border:none;font-size:30px;padding:0px;cursor: pointer;margin-bottom:10px;}
.box2 .box-list ul li a{width:100%;height:100% !important;;display:block;background:none !important;height:20px;margin:0;padding-left:12px;}
.box2 .box-list a{transition:none;}
.box2 .box-list ul li:hover{background:#fff;color:#333;}
#popup2 .popup {width:640px; margin:0 auto; position: relative;}
#popup2 .popup .container2{margin-top:40px;}
.popup .container2 .box4 ul {height:330px; overflow-y:auto;-webkit-overflow-scrolling:touch;}
.popup .container2 .box4 ul::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
  background-color: #555;
  border-radius:20px;
}

.popup .container2 .box4 ul::-webkit-scrollbar
{
  width: 12px;
  background-color: #555;
  border-radius:20px;
}

.popup .container2 .box4 ul::-webkit-scrollbar-thumb
{ 
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #F5F5F5;
  border-radius:20px;
}


.popup .container2 .box4 ul li {font-size: 30px; line-height: 1.6; color:#fff;height:50px;line-height:50px; margin-bottom: 40px;list-style-type: square;}
.popup .container2 .box4 ul li:before {content:''; display: inline-block; width: 10px; height: 10px; border-radius:6px; background-color:#fff; vertical-align: middle; margin-right: 10px;}
@media screen and (max-width: 639px){
  .container {width: 100%; height: 100%;}
  .container h1 {font-size: 26px;}
  .container h2 {font-size: 24px; word-break: keep-all;}
  .box{width: 100% !important; }
  .box-list{width:300px; box-sizing: border-box;padding-left:inherit;}
  .box2 .box-list {width: 100%; box-sizing: border-box;}
  .container .box .box-list#device a{width:130px;height:130px;display: block;transition: .2s; margin:10px;}
  .container .box .box-list#device a:nth-child(1){background:url(../img/TV.png) no-repeat;background-size:contain; }
  .container .box .box-list#device a:nth-child(1):hover{background:url(../img/TV_w.png) no-repeat;background-size:contain; }
  .container .box .box-list#device a:nth-child(2){background:url(../img/airwash.png) no-repeat;background-size:contain; }
  .container .box .box-list#device a:nth-child(2):hover{background:url(../img/airwash_w.png) no-repeat;background-size:contain; }
  .container .box .box-list#device a:nth-child(3){background:url(../img/fan.png) no-repeat;background-size:contain; }
  .container .box .box-list#device a:nth-child(3):hover{background:url(../img/fan_w.png) no-repeat;background-size:contain; }
  .container .box .box-list#device a:nth-child(4){background:url(../img/aircon.png) no-repeat;background-size:contain; }
  .container .box .box-list#device a:nth-child(4):hover{background:url(../img/aircon_w.png) no-repeat;background-size:contain; } 
  .popup{width: 100%; }
  .box-list .input-design{width:100%; height:60px; font-size: 24px;}
  .box2 .box-list ul li {font-size: 18px; height:40px;}
  .box2 .keyword_box{height:260px;overflow-y:auto;margin-top:20px;}
  .container .box h3 {font-size: 22px; text-align: center;}
  .box2 .box-list h3 {padding-top: 10px;}
  .container2 h1 {font-size: 26px;}
  .container2 h2 {font-size: 24px; word-break: keep-all; padding:0 20px;}
  .container2 .box-list .input-design{width:100%; height:60px; font-size: 24px;}
  .container2 .box-list {width:300px; box-sizing: border-box;}
  .popup, .popup .container2, .container2 {width: 100% !important;}
  .popup .container2 h1 {font-size: 24px; padding:0 20px; word-break: keep-all}
  .popup .container2 .box4 {margin-top: 10px; }
  .popup .container2 .box4 ul {height:250px; overflow-y:auto;}
  .popup .container2 .box4 ul li {height:50px;line-height:50px;color:#fff;border:none;font-size:22px;padding:0px;cursor: pointer;margin-bottom:10px; margin-bottom: 20px; list-style-type: square; }
  .popup .container2 .box4 ul li:before {content:''; display: inline-block; width: 6px; height: 6px; border-radius:6px; background-color:#fff; vertical-align: middle; margin-right: 10px;}
  .box2 .keyword_box li a {width: 100% !important; overflow-y: hidden;}  

  .box2 .keyword_box::-webkit-scrollbar, .popup .container2 .box4 ul::-webkit-scrollbar
  {
    width: 6px;
    background-color: #555;
    border-radius:20px;
  }
}