@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* mobile style */
*{-webkit-text-size-adjust:none;}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{margin:0;padding:0; font-family: 'Noto Sans KR', 'nanumsquare' , 'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;font-weight:normal; }
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0); margin:0 auto;}
li{list-style:none}
a{text-decoration:none;}
a[href^="tel"]{ font-style:normal}
address, caption, em, var{font-style:normal;font-weight:normal}
input, textarea, select{letter-spacing:normal}
ol, ul, dl{list-style:none}
fieldset, img{border:0}
legend, caption{display:none}
img{border:0;vertical-align:top}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
br{letter-spacing:normal}
p{letter-spacing:normal;}
input{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none; padding:5px;}
input[type="checkbox"]{-webkit-appearance:;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{border:none;-webkit-appearance:none}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:none; -moz-appearance:none; appearance:none; color:#666; }
input[type="file"] {display: none;}
input:checked {}

#main {overflow:hidden;}
#head {height:70px; width:100%; min-width:1400px; background:rgba(255,255,255,0.7); margin:0% 0; position:absolute; z-index:2; padding:10px 0}
#head img.logoimg {margin: 0px 10px 0 25px;}
#head p {float:right; font-size:15px; color:#444; display:inline-block; margin-right:30px; margin-top:22px;}
#head p.mypp {float:right; font-size:15px; color:#444; display:inline-block; margin-right:30px; margin-top:0px;}

.root_daum_roughmap {width:100% !important; height:100% !important; min-width:1400px; min-height:880px;}
.root_daum_roughmap .wrap_map {height:100% !important;}

.add {width:368px; height:auto; max-height:87%; overflow-x:hidden; padding:7px 0 0; background:#fff; position:absolute; z-index: 2; top: 65px; margin:30px 25px 0; border:1px solid #12ae69; box-shadow:1px 5px 15px 4px rgba(0,0,0,0.2);}
.add b {margin:0px 5px 0 20px; width:auto; position:relative; top:8px;}
.add input {padding:12px 2px;border:none; width:260px; font-size:14px; margin:0 5px 0 0; outline:none;}
.add input:focus {-webkit-box-shadow:none; -moz-box-shadow:none; border:0 !important; outline:none;}
.add button {border:none; background:transparent;  position:relative;top:0; outline:none; display: inline-grid;} 
.add input::placeholder, add input:-ms-input-placeholder, add input::-ms-input-placeholder {color:#999}

.area {width:100%; height:; background:#f5f5f5; z-index: 2; padding:7px 5px 12px 18px; border-top:1px solid #e7e7e7;}
.areabut {font-size:16px; width:14.7%; color:#2f2f2f;}
.areanext, .areadown {width:22px;}

.sec01 ul li {background:none !important; height:auto !important; border-top:none !important; border-bottom:none !important; padding: 7px 20px;     font-size: 15px !important;}
.sec01 ul li p {}
.sec01 ul li:hover {color:#333 !important;}

.sec08 ul li {background:none !important; height:auto !important; border-top:none !important; border-bottom:none !important; padding:4px 20px;     font-size: 15px !important;     width: 95% !important; margin:20px 0 5px 0;}
.sec08 ul li p {}
.sec08 ul li:hover {color:#333 !important;}
#se_08 {width:100%;height:auto; padding:7px 20px; display:none;background-color:#fff;     color: #000;    margin-top: 45px;    font-size: 20px;}
.j_but08 a {color:#fff;  background:#13ae69; font-size:15px; padding:7px 15px; font-weight:300;  position:relative;border-radius:30px; top:55px;}
.snum { width:62%; float:right; text-align:left;}
.sunnum {display:inline-block; font-size: 8px; padding-left:57px;}

.sunline {background:#e1e1e1; width:60%; height:7px;     float: right;    margin: 7px;}
.sunline .space {background:#e1e1e1; width:50%; height:100%; float:left;}
.sunline p {background:#f5ce18; width:50%; height:100%; float:left;}

#add_box {height:100%;}
.sec01 {    margin: 0 auto 50px;}
#se_01 {width:100%;height:auto; padding:7px 20px; display:none;background-color:#fff;border-top:1px solid #dadada;border-bottom:1px solid #dadada; color:#929292; margin-top:5px;}
#se_02 {width:100%;height:auto; display:none;background-color:#fff;color:#666; margin-top:5px;}
#se_03 {width:%;height:100%; padding:0px 0px 0px 0px; display:none;background-color:#fff;color:#666;}
#se_03 ul {}
#se_02 ul li {margin: 7px 0; font-family:'Noto Sans KR'; height:90px; font-size:18px; color:#444; background:#f5f5f5; border-top:1px solid #efefef;  border-bottom:1px solid #efefef;}
#se_02 ul li p {font-size:14px; color:#333333; padding:3px 24px 0px;}
#se_02 ul li p.tit {font-size:19px; color:#333;}
#se_02 ul li.active p.tit {color:#13ae69;}
#se_02 ul li.active p {color:#333;}
#se_02 ul li:hover {background:#333; color:#fff;}
#se_02 ul li:hover p {color:#fff;}
#se_02 ul li:hover p.tit {color:#13ae69;}
#se_02 ul li strong {font-size: 16px;    font-weight: 500;    padding: 0 0 0 5px;}


#se_03 ul li {margin: 7px 0 0; font-family:'Noto Sans KR'; height:90px; font-size:18px; color:#444; background:#f5f5f5; border-top:1px solid #efefef;  border-bottom:1px solid #efefef;}
#se_03 ul li span img {margin:0px 0 0; float:right !important; overflow:hidden; height:88px;}
#se_03 ul li strong {font-size: 16px;    font-weight: 500;    padding: 0 0 0 5px;}
#se_02 ul li img, #se_03 ul li img {float:left;}
#se_03 ul li.active {color:#fff; background:#373737;}
#se_03 ul li:hover {background:#333; color:#fff;}
#se_03 ul li:hover p {color:#fff;}
#se_03 ul li:hover p.tit {color:#13ae69;}
#se_03 ul li p {font-size:14px; color:#333333; padding:3px 24px 0px;}
#se_03 ul li p img.hea {display:inline-block; float:right;     margin-top: -10px; cursor:pointer;}

#se_03 ul li h1 {color:#13ae69; font-size:20px; padding:15px 24px 0px;}
#se_03 ul li p.tit {font-size:18px; color:#333;}
#se_03 ul li.active p.tit {color:#13ae69;}
#se_03 ul li.active p {color:#fff;}


#se_04 ul li {margin:0px 15px 15px 0px; font-family:'Noto Sans KR'; height:270px; font-size:18px; color:#444; background:#f5f5f5; border-top:1px solid #efefef;  border-bottom:1px solid #efefef; width:23.4%; display:inline-block;}
#se_04 ul li span img {margin:0px 0 0; float:right !important; overflow:hidden; height:155px; width:100%;}
#se_04 ul li strong {font-size: 16px;    font-weight: 500;    padding: 0 0 0 5px;}
#se_04 ul li img.mar {float:left; position:absolute;}
#se_04 ul li.active {color:#fff; background:#373737;}
#se_04 ul li:hover {background:#333; color:#fff;}
#se_04 ul li:hover p {color:#fff;}
#se_04 ul li:hover p.tit {color:#13ae69;}
#se_04 ul li p {font-size:14px; color:#333333; padding:9px 24px 0px; display:inline-block;}
#se_04 ul li p img.hea {display:inline-block; float:right;     margin-top: -10px; cursor:pointer;}

#se_04 ul li h1 {color:#13ae69; font-size:20px; padding:15px 24px 0px;}
#se_04 ul li p.tit {font-size:18px; color:#333;}
#se_04 ul li.active p.tit {color:#13ae69;}
#se_04 ul li.active p {color:#fff;}

.hea.touch {position:absolute; margin:75px;}


#viewbut {     width: 100%;    height: 100px;    margin: 0 auto;    text-align: center;}
#viewbut ul {    display: inline-block;}
#viewbut li {width:auto;}
.viewbutli button {width:100px; display:inline-block; font-size:15px; color:#000; background:#eee; border:1px solid #c1c1c1; border-radius:30px; padding:6px 0; margin:4px;}
#viewbut li a {color:#444;}
#viewbut li:hover a {color:#fff;}
#viewbut li:hover button {background:#12ae69;}

.w3-button.left {    text-align: center;    font-size: 35px;    color: #7d7c7c;    position: relative;    display: inline-block;    top: -105px; float: left;    left: 10px; cursor:pointer;	}
.w3-button.right {    text-align: center;    font-size: 35px;    color: #7d7c7c;    position: relative;    display: inline-block;    top: -105px;    right: 10px; float: right; cursor:pointer;	}



#menu02_box { width:1200px; margin:0px auto 0; background:#fff; border:2px solid #f2f2f2}
.menu02_tit {background:#; font-size:16px; width:; padding:20px 0 20px 40px; color:#6c6c6c; font-weight:300; float: left;}

.table_box table {padding:20px; margin: 40px; width:1142px;}
.table_box {border-bottom:1px solid #dcdcdc;}
.table_box.aa, .table_box.ab, .table_box.ac {border-bottom:0px;}
.table_box th {width:; line-height:23px; padding:15px 10px; background:#f7f7f7; border-bottom:1px solid #f2f2f2; text-align:left; color:#6c6c6c; border-right: 1px solid #efefef;}
.table_box th:last-child {border-right:0px solid #efefef;}
.table_box td {width:; line-height:23px; padding:10px; color:#6c6c6c; font-weight:300; text-align:center; border-right: 1px solid #f1f1f1;}
.table_box td:last-child {border-right:0px solid #efefef;}
.table_box td.dcenter {text-align:left;}
.table_box tr {border-bottom:1px solid #f2f2f2}
.delton {background:#f5f5f5; color:#555; padding:5px 10px; font-size:16px; border:0px;     margin: 15px 47px 0 -1px; float:right; border:1px solid #e5e5e5}
.writeon {background:#f5f5f5; color:#555; padding:5px 10px; font-size:16px; border:0px;     margin: 15px 15px 0 5px; float:right; border:1px solid #e5e5e5}
.addord {    background: #fff;    color: #5b5b5b;    font-size: 14px;    border: 0px;    margin: 28px 11px 0 0px;    float: left;    line-height: 10px;}
.addord.active {color:#13ae69;}

#myp {width: 100%; min-width:1200px; height: 92.8%;    background: #f1f1f1;    border-top: 1px solid #e5e5e5;    margin-top: 70px;    display: inline-block;}
#myp_head {    width: 100%;    height: 135px;}
#myp_head ul { width:1200px; margin:30px auto 0;}
#myp_head ul li { width:350px; display:inline-block; border-right:1px solid #dedede;     margin: 20px 25px;     height: 90px;}
#myp_head ul li:last-child { border-right:0px solid #dedede;}

#myp_head.not ul li {margin:0px 0 0 25px !important; border-right:0px solid #fff; }
#myp_head.not ul {margin:0 auto 0 !important;}

#myp_head ul li.widss {width:180px;}
#myp_head ul li p.poico {width:25px; height:25px; background:#c22121; color:#fff; font-weight:bold; border-radius:5px; text-align:center;     display: inline-block;     margin-top: 20px;}
#myp_head ul li p.dayico {position:relative; width:25px; background:#2180c2; color:#fff; font-weight:bold; border-radius:5px; text-align:center;     display: inline-block;     margin-top: 20px; top:-4px; padding:3px;}
#myp_head ul li strong {font-weight:500; color:#444; font-size: 24px;    padding: 0 6px;}
#myp_head ul li h3 {font-size:29px; color:#13ae69;} 
#myp_head ul li p {color:#7a7a7a; width:100%;}
#myp_head ul li button.myp_but01 {background:#fff; border:1px solid #e1e1e1; padding:5px 15px; color:#858585; top: 10px;    position: relative;}
#myp_head ul li button.myp_but02 {position:relative; background:#bbbbbb; color:#fff; padding:5px 15px; border:0;     margin: 0 0 0 20px; top:-6px;}

.poico {width:25px; height:25px; background:#c22121; color:#fff; font-weight:bold; border-radius:5px; text-align:center;     display: inline-block;     margin-top: 20px;}
.dayico {  width:25px; height:25px; background:#2180c2; color:#fff; font-weight:bold; border-radius:5px; text-align:center;     display: inline-block;     margin-top: 20px;}

p.cha {    display: inline-block;    border: 2px solid #13ae69;    border-radius: 5px;    padding: 1px 6px;    margin: 0;    color: #13ae69;    font-weight: 500;    font-size: 14px;}
span.cha_nu {color:#13ae69}
p.use {    display: inline-block;    border: 2px solid #c22121;    border-radius: 5px;    padding: 1px 6px;    margin: 0;    color: #c22121;    font-weight: 500;    font-size: 14px;}
span.use_nu {color:#c22121}

.tcenter {text-align:center !important;}

.j_but {width:100%; padding:px; text-align:center;  background:#fff; margin-top:10px;     height: 150px; position:relative;}
.j_but  img {text-align:center;}
.j_but a {color:#fff;  background:#13ae69;font-size:16px; padding:7px 15px; font-weight:300;  position:relative;    top: 62px; border-radius:0px;}
.j_buta {position: relative;    margin: 0 auto;    width: 100%;    margin: 30px auto 30px;    text-align: center;}
.j_buta a {color:#fff;  background:#13ae69; font-size:16px; padding:7px 15px; font-weight:300;  position:relative;border-radius:0px;}
.j_but a:hover {color:#fff; opacity:0.5;}
.j_but_box {width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.5); margin:0 auto; position:absolute;}
.area02 {width:100%; height:; background:#fff; z-index: 2; padding:3px 5px 17px 18px;}
.area02 .areabut {font-size:16px; width:40px; color:#2f2f2f;}
.area02 .areabut.active {width:40px; height:30px; background:#13ae69; color:#fff;text-align:center; border-radius:5px; }

.jo {width:100%; top:0px; overflow:hidden;background:#fff; position:absolute; z-index:2; margin:30px 45px 0; margin-left:;border:1px solid #13ae69; box-shadow:1px 5px 15px 4px rgba(0,0,0,0.2);}
.popup9 {    width: 100%;    margin: 0 auto;    text-align: center;}
.popup10 {    width: 100%;    margin: 0 auto;    text-align: center;}
.jojo {top:0px; width:1040px; overflow:hidden;background:#fff; position:relative; z-index:2; margin:30px auto 0; margin-left:;border:1px solid #13ae69; box-shadow:1px 5px 15px 4px rgba(0,0,0,0.2);}
.jojo .aa img {margin:0 auto 50px;}
.jojo .aa ul li {width:50%; float:left;}
.jojo h1 {font-size:19px; margin:50px auto 23px ;}
.jo_box {width:95%; height:61vh; background:rgba(0,0,0,0.8); margin:0 auto; border: 1px solid #e9e9e9; position: absolute; text-align:center; }
.jo_box_txt {margin-top:15%;}
.jo_box p {color:#fff; font-size:16px; text-align:center; margin-top:10px; padding-left:0 !important;}
.jo_box0 {width:95%; height:61vh; margin:0 auto; border: 1px solid #e9e9e9; position: absolute; text-align:center; }
.jo_box0 p {color:#fff; font-size:16px; text-align:center; margin-top:10px; padding-left:0 !important;}
#j_box { width:95%; height:61vh; margin: 15px auto 25px;overflow:hidden; }
.j_img img {width:100%; }
.j_img { margin:0 auto; width:100%; height:100%;background:url('../img/jo.jpg') center center no-repeat; background-size:cover;}
.j_img0 img {width:100%; }
.j_img0 { margin:0 auto; width:100%; height:100%;background:url('../sample/pano1.jpg') center center no-repeat; background-size:cover;}
#add_txt {width:100%; padding:9px 0px;}
#add_txt p {padding:10px 0 10px 20px; line-height:28px; font-size:15px; }
.add select {width:45%; background:url('../img/arrow_down.png') 95% center no-repeat;padding: 7px 10px; margin:3% 2% 0% 2.2%; border:1px solid #ccc; border-radius:3px; font-size:16px;}

.root_daum_roughmap .border1, .root_daum_roughmap .border2, .root_daum_roughmap .border3, .root_daum_roughmap .border4 {height:0px !important;}

/* 조감도 보기 */
.jo h1 {color:#13ae69;padding:30px 0 20px 40px; font-size:22px;}
.jo h1 b {width:15px; height:3px; background:#15db81; display:block;}
.jo p {padding-left:40px;}

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px 0;
  color: #444;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button.not img {     margin: 0 !important;    padding: 20px 5px 0 5px;}
.button.pay {background:#13ae69; color:#fff; border:none; padding:5px 30px; border-radius:50px; font-size:16px; margin-top:30px;     margin: 0 auto 50px;    display: inline-block;}
.button:hover.pay {color:rgba(215,215,215,0.5)}
/*.button:hover {
  color:#13ae69;
}*/

p.id {width:100%;}
p.id input {width:235px !important;}
p.id span {font-size:14px; float:left; width:95px; line-height:42px;}
.overlay.bgnone {background:rgba(0,0,0,0) !important; top:65px;}
.overlay {
  visibility: hidden;
  position: absolute;
  top: -120px;
  min-width:1400px;
  bottom: 0;
  left: 0; overflow:hidden;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 500ms;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1; z-index: 10;
  min-height:1000px;
}
.popup.pay {margin:0; padding:0; width:100%; height: 100%;}
.popup.pay a.button.a3 {background: #12ae69; color: #fff; font-size: 18px; padding: 15px 40px; border-radius: 30px; border: none; text-align: center; margin: 50px auto 0; display: block; width:150px;}
.popup.pay select {width:45%; background:url('../img/arrow_down.png') 95% center no-repeat;padding: 7px 10px; margin:3% 0% 5% 0%; border:1px solid #ccc; border-radius:3px; font-size:16px;}
.popup.pay .content ul li {width: 33.3%; height: auto;border: 1px solid #e9e9e9; padding: 10px; float: left;margin: 5% 0px 0% 0; text-align:center;}
.popup.pay .content ul li:last-child {float:none;     display: inline-block;}
.popup.pay .content ul li a {color:#444}
.popup.pay .content ul li:hover {border:1px solid  #15db81; margin: 5% 0px 0% 0;}
.popup.pay .content {padding:30px; overflow:hidden;}
.paynum {font-size: 24px;    color: #12ae69;    letter-spacing: -1px;    padding: 26px 0;    font-weight: 800;    font-family: 'nanumsquare';}
.paynum0 {color:#000; font-size:20px; font-family:'nanumsquare'}
.paytotal {margin:50px 0 0; display: inline-block;}
.paytotal input {padding:5px; border:1px solid #ccc; border-radius:5px; color:#444; font-size: 16px;    margin: 0 10px;}

.popup {
  margin:150px auto;
  padding: 0px;
  background: #fff;
  border-radius: 1px;
  width: 410px;
  position: relative;
  /*transition: all 5s ease-in-out;*/
}


.popup0, .popup8 {
  margin: 10px 0 0;
  padding: 0px;
  background: transparent; margin:0;
  border-radius: 0px; height:92%;
  width: 70%; float:left; left:357px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 , .popup0 h2 , .popup8 h2 { background:#12ae69; border:2px solid #12ae69;
  margin-top: 0;  
  color: #fff; width:100%; padding:10px 0 10px 20px; text-align:left;
  font-family: 'Noto Sans KR', sans-serif; font-size: 20px;
}
.popup .close {
  position: absolute;
  top: 4px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}
.popup0 .close {
  position: absolute;
  top: 14px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #444;
}
.popup8 .close0 {
  position: absolute;
  top: 14px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #444;
}
.popup9 .close {
  position: absolute;
  top: 14px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #444;
}
.popup10 .close {
  position: absolute;
  top: 14px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #444;
}
.popup .close:hover , .popup0 .close:hover , .popup8 .close:hover {
  color: orange;
}
.popup .content, .popup0 .content, .popup8 .content {
  max-height: 100%;     line-height: 10px;
  overflow: auto; font-family: 'Noto Sans KR', sans-serif;
  padding:35px 35px 20px;
}
.popup .content p.id input, .popup .content p.password input {border:1px solid #e8e8e8; background:#f6f6f6; color:#b5b5b5; padding:10px; text-align:left; margin-bottom:0px; width:100%;}
.popup .content p.password input {border-top:px solid #fff;}
.popup .content p.save { margin-top:20px; font-size:14px; width:100%;}
.popup .content p.joingo { margin-top:18px; font-size:15px; text-align:center;}
.popup .content p.joingo a {color:#666;}
.popup .content p.save span { float:right; font-size:14px;}
.popup .content p.save span a {color:#666}

.popup .content input.login { background:#12ae69; color:#fff; font-size:18px; padding:5px 25px; border-radius:30px; border:none; text-align:center; margin:30px auto 0;     display: block; cursor:pointer;}
.popup .content input.passward { background:transparent; color:#333; font-size:15px; padding:px; text-align:center; margin:0px auto 0;     display: block; border:none; cursor:pointer;}

.popup .content textarea {width:100%; border:1px solid #e9e9e9; padding:5px; color:#666; background:#f6f6f6;     min-height:45px;}

.login_01 { width:100%; padding:10px 0; margin:12px 0; text-align:center; color:#fff; background:#475993; border-radius:5px;     line-height: 28px;}
.login_02 { width:100%; padding:10px 0; margin:12px 0; text-align:center; color:#302238; background:#faed00; border-radius:5px;     line-height: 28px;}
.login_03 { width:100%; padding:10px 0; margin:12px 0; text-align:center; color:#fff; background:#00c73c; border-radius:5px;     line-height: 28px;}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

.paging {margin: 10px auto 40px;    display: inline-block;    width: 100%;    text-align: center;}
.paging img {    margin: 6px 0 0;}
.paging span {color:#ccc; padding:0 10px; line-height:px; margin: 12px;}
.paging span b.active {color:#000; font-weight:normal;}

/* The container */
.container {
    position: relative;
    padding-left: 23px;
    cursor: pointer;     color: #666;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container input {
    position:;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0px; border-radius:50px;
    left: 0;
    height: 20px;
    width: 20px; border:1px solid #c7c7c7;
    background-color: #f7f7f7;
}

.container:hover input ~ .checkmark {
    background-color: #ccc;
}
.container input:checked ~ .checkmark {
    background-color: #12ae69;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container input:checked ~ .checkmark:after {
    display: block;
}
.container .checkmark:after {
    left: 5px;
    top:2px;
    width: 8px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.container .checkmark:before {
    left: 9px;
    top: 5px;
    width: 5px; 
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}