/*--------------------
invesume home base
----------------------*/

@charset "utf-8";
@import url(materialdesignicons.css);
@import url(animate.css);
@import url(bootstrap.css);


@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(fonts/NotoSansKR-Thin.woff2) format('woff2'),
       url(fonts/NotoSansKR-Thin.woff) format('woff'),
       url(fonts/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(fonts/NotoSansKR-Light.woff2) format('woff2'),
       url(fonts/NotoSansKR-Light.woff) format('woff'),
       url(fonts/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(fonts/NotoSansKR-Regular.woff2) format('woff2'),
        url(fonts/NotoSansKR-Regular.woff) format('woff'),
        url(fonts/NotoSansKR-Regular.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(fonts/NotoSansKR-Medium.woff2) format('woff2'),
        url(fonts/NotoSansKR-Medium.woff) format('woff'),
        url(fonts/NotoSansKR-Medium.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(fonts/NotoSansKR-bold.woff2) format('woff2'),
        url(fonts/NotoSansKR-bold.woff) format('woff'),
        url(fonts/NotoSansKR-bold.otf) format('opentype');
 }



ul, dl,dt,dd {margin:0;padding:0;list-style:none}

html, body { 
    margin:0; padding:0;border: 0; 
    font-family:'Noto Sans KR', Helvetica, '맑은 고딕', sans-serif;
    font-size: 15px;
    line-height: 25px;
    vertical-align: baseline;
   	text-decoration:none;
	color: #4c5c6f;
    font-weight:400;
    word-break:keep-all;
}


a:hover, a:active {outline: 0;text-decoration: none; -webkit-transition-duration: 0.5s; transition-duration: 0.5s;cursor: pointer; transition: all 0.5s; color: #4936bb}
a {color:#4c5c6f}
p {margin: 0; padding: 0}
em {font-style: normal}

.txt_center {text-align: center}
.w500 {width: 500px; margin: 0 auto}


header.masthead {padding-top: 10rem;padding-bottom: calc(10rem - 4.5rem);background:url("../images/top_bg.png") center bottom no-repeat;background-attachment: scroll; background-size: cover; margin-top: 70px;}

.container {position: relative; padding-left:0!important; padding-right:0!important; margin: 0 auto; position: relative;text-align: left; width: 1000px!important; }
h2 {font-weight: 24px!important; color: #333!important; font-weight: 500}

.navbar { background-color: #fff!important}
#mainNav .navbar-nav .nav-item .nav-link {color:#555!important; }

.navbar-brand img {width: 160px}
.visual_text01 { color: #fff; text-align: left;  line-height: 40px;}
.visual_text01 em{font-size:27px; font-style: normal; font-weight: 400}
.visual_text01 span {font-weight: 500px!important; display: block;font-size:40px}
.visual_text02 {color: #fff; width: 400px; opacity: 0.8; line-height: 24px; padding:50px 0}


.btn_download {padding:10px 30px 10px 60px; color: #fff;  border-radius: 3px; background: #111 url("../images/GitHub-Mark-Light-32px.png") left 15px center no-repeat;}
 a.btn_download { color: #fff; }
 a:hover.btn_download{ opacity: 0.7}


.visual .v01 {position: absolute; right:0; top:0}
.visual .v02 {position: absolute; right:-13px; top:50px}
.visual .v03 {position: absolute; right:0; top:80px;  font-size: 12px}
.visual .v03 li {display: inline-block; width: 115px; color: #fff; margin-right: 12px; padding: 40px 5px 0 10px; vertical-align: top; line-height: 16px;  }
.visual .v03 li span {display: block; font-size: 13px;}
.visual .v03 li em {font-size: 9px;line-height: 13px;}
.visual .v03 li a {color: #fff}
.visual .v03 li a:hover {opacity: 0.5}

.page-section-1 {margin-top: -150px; margin-bottom: 100px}
.page-section-1 h2{padding-top: 50px}
.about {margin-top:100px;display: inline-block;}
.about .about_01 {display: inline-block; float: left; width: 400px;}
.about .about_02 {display: inline-block; width: 500px; margin-left: 50px}
.about .about_03 {display: inline-block; float: center; width: 400px;}
.about .about_02 li{display:block; padding-left: 80px; line-height: 20px; font-size: 13px; margin-bottom: 30px}
.about .about_02 li span {color:#4936bb; display: block; font-size: 17px; font-weight: 500; line-height: 30px}
.about_02 li.num1  {background: url(../images/num1.png) no-repeat; }
.about_02 li.num2  {background: url(../images/num2.png) no-repeat; }
.about_02 li.num3  {background: url(../images/num3.png) no-repeat; }

.bg_gray {background: #f0f1f4}

.features_list { text-align: center}
.features_list  li {width: 270px; background: #fff; border-radius: 5px;margin: 0 15px; padding:20px; text-align: left; font-size: 12px; color: #888; line-height: 15px; display: inline-block; word-break: break-all;box-shadow: 2px 2px 10px rgba(51,51,51,0.1); }
.features_list  li span {display: block; margin:30px 0; font-size: 15px; color: #4c5c6f;line-height: 22px; }
.features_list  li img {width: 180px}
.features_list  li a { color: #888;}
.features_list  li a:hover {color:#4936bb;}

.features_list2 {background: url(../images/main_04.png) center center no-repeat; text-align: left; height: 400px;  }
.features_list2 li {display: inline-block; width: 300px;font-size: 13px;line-height: 20px;  margin-bottom: 30px; vertical-align: top }
.features_list2 li span {color:#4936bb; display: block; font-size: 17px; font-weight: 500; line-height: 30px; }
.features_list2 li.num1  {background: url(../images/icon_01.png) right top no-repeat; text-align: right; padding-right: 70px;}
.features_list2 li.num2  {background: url(../images/icon_02.png) left top no-repeat; text-align: left; padding-left: 70px; margin-left:380px}
.features_list2 li.num3  {background: url(../images/icon_03.png) right top no-repeat; text-align: right; padding-right: 70px;}
.features_list2 li.num4  {background: url(../images/icon_04.png) left top no-repeat; text-align: left; padding-left: 70px; margin-left:380px}


.download {background: url(../images/main_02.jpg) center bottom no-repeat;  height: 370px; background-size: cover }
.contact  {background: url(../images/main_03.png) center top no-repeat;  height: 400px; }

.count {font-size: 70px; font-weight: 500; color: #fff; line-height: 70px}
.down_text1 {font-size: 26px; color: #46cef2; line-height: 50px; margin-bottom: 50px }
.down_text2 {font-size: 20px; color: #fff; line-height: 50px; margin-top: 15px }

.btn_download2 {padding:20px 50px 20px 90px;  border-radius: 8px; background: #46cef2 url("../images/icon_email2.png") left 50px center no-repeat; font-size: 20px}
a.btn_download2 { color: #333; }
a:hover.btn_download2{ opacity: 0.7}

.page-section2 {padding:50px 0 0 0}
.con_btn {margin-top: 30px}
.btn_contact {padding:15px 30px 15px 70px;  border-radius: 4px; font-size: 18px;  margin: 0 5px}
a.btn_contact { color: #fff; }
a:hover.btn_contact{ background-color: #653dab;}
.num1 {background: #8353d7 url("../images/icon_05.png") left 30px center no-repeat;}
.num2 {background: #8353d7 url("../images/icon_06.png") left 30px center no-repeat;}

.ha-footer {background: #373c4f; padding: 30px 0;  color: #bbb; font-size: 13px}





/*--------------------
해상도별
----------------------*/


 @media (max-width: 1024px) {
    
.container {width:100%!important; }   
header.masthead {height: 700px!important}
.features_list2 li {width: 280px; }

   

}



 @media (max-width: 812px) {
header.masthead {height: 900px!important}
   
.page-section-1 {margin-top: -200px; margin-bottom: 50px}
   
.visual_text02 { width: 100%;  padding:20px 0}

.visual .v01 { top:250px}
.visual .v01 img {width: 300px }
.visual .v02 { right:auto; left: 0;  top:270px}
.visual .v03 { right:auto; left: 0; top:270px;  font-size: 15px}
.visual .v03 li { padding: 50px 5px 0 30px; line-height: 22px; }
.visual .v03 li span {font-size: 15px;}
.visual .v03 li em { display: none}

.about .about_01 { float: none; width: 100%; text-align: center;  margin:0 auto; margin-bottom: 50px}
.about .about_02 {display: block; width: 100%; margin-left: 0}
   
.features_list2 {background: url(../images/main_04.png) center top no-repeat; text-align: left; height: auto; padding-top: 250px; background-size: 250px }
.features_list2 li {display:block; width: 100%; }
.features_list2 li.num1  {background: url(../images/icon_01.png) left top no-repeat; text-align: left; padding-left: 70px; padding-right: 0}
.features_list2 li.num2  { margin-left:0}
.features_list2 li.num3  {background: url(../images/icon_03.png) left top no-repeat; text-align: left; padding-left: 70px;padding-right: 0}
.features_list2 li.num4  { margin-left:0}
   

}




@media (max-width: 520px) {

.container {padding:0 20px!important }  
.w500 {width: 100%}
.page-section-1 {margin-top: -250px; }
  
.navbar  {padding:15px 0!important } 

  
.masthead .container {padding:0 40px!important } 
header.masthead {padding-top: 50px;padding-bottom: 0; background:url("../images/top_bg.png") center top -50px no-repeat;  margin-top: 70px;}
  
.visual_text01 em {font-size: 20px;}
.visual_text01 span {font-size:30px;}
  .visual_text02 {font-size: 14px; line-height: 20px}
  
.visual .v01 { top:320px; right: auto; left:40px}
.visual .v01 img {width: 150px }
.visual .v02 {display: none}
.visual .v03 { right:auto; left:150px; top:370px;  font-size: 15px}
.visual .v03 li { padding: 10px; text-align: center;  line-height: 22px; display: block; background: #402289; width: 200px; margin-bottom: 5px; border-radius: 5px; font-size: 14px }
.visual .v03 li span {font-size: 15px; display: inline-block}
  
  
.features_list  li {width: 100%; margin: 10px 0; padding:20px;  }
  
.count {font-size: 40px;  line-height: 50px}
.down_text1 {font-size: 22px; line-height: 40px; margin-bottom: 30px }
.down_text2 {font-size: 17px; line-height: 30px; }

.btn_download2 {padding:10px 30px 10px 70px;  border-radius: 4px; background: #46cef2 url("../images/icon_download2.png") left 30px center no-repeat; font-size: 17px}
.download {height: 300px}
.contact  {background: url(../images/main_03.png) left top no-repeat;  height: 350px; background-size: cover}
  
.btn_contact {padding:10px 20px 10px 50px;  border-radius: 4px; font-size: 15px;  margin: 0 5px}

.num1 {background: #8353d7 url("../images/icon_05.png") left 15px center no-repeat;}
.num2 {background: #8353d7 url("../images/icon_06.png") left 15px center no-repeat;}
  
.ha-footer {padding: 10px 0;  color: #bbb; font-size: 12px}
.ha-footer .container {padding: 0!important} 
  
.about .about_01 img{ width: 250px;}
  
  
}