*, *::after, *::before{ margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box;}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, table, th, td,  form, address, pre, caption, cite,dfn, var{
    font-family: 'Titillium Web', 'KoPub Dotum', 'xeicon','돋움',sans-serif;
    font-style:normal !important;
    text-decoration: none; 
    font-weight: 400;
    font-size: 15px
}
html, body { width: 100%; height: 100%; }
a, span, p, li, div, button {color: #141414}
i, cite, em, var, address{font-style:normal !important}
a{text-decoration: none}
a, a:hover, a:focus { display: block;}
article, aside, details, figcaption, footer, header, hgroup, menu, nav, section { display: block; }


h1{font-size: 45px; font-weight: bold; line-height: 1;margin:10px 0 ;}
h2{font-size: 24px; font-weight: bold; line-height: 1;}
h3{font-size: 18px; font-weight: 400}
p{font-size: 18px; font-weight:400; line-height: 1.5; }
span{font-size: 13px; font-weight: 400;}

textarea{
  width:100%; 
  border:1px solid #ccc;  
  border-radius: 5px;
  -webkit-border-radius:5px;
  -moz-border-radius: 5px;
  margin:0 0 10px 0;
}
select::-ms-expand { display: none; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

input, select, textarea, button { font: inherit; color: inherit; vertical-align: middle; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #f6f8f9 inset !important; }

ul, li, ol, dl{padding:0; margin:0; font-size: 0; height: auto; list-style: none; }
li{padding: 0; margin:0; list-style: none; font-size: 15px}

div{
  -webkit-overflow-scrolling: touch;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
   
/* input css-----------------------------------------------------------------------------------------------------------*/

input {
  border: 1px solid #141414;
  height: 38px;
  line-height: 38px;
  color: #141414;
  font: inherit;
  margin:0;
  outline: 0;
  padding: 0 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -moz-transition: background-color .3s;
  -webkit-transition: background-color .3s;
          transition: background-color .3s;
  position: relative;
  width:50%;
}

input:hover{ box-shadow: inset 2px 2px 2px rgba(0,0,0,.075)}
input:focus, input:active{ box-shadow: inset 2px 2px 2px rgba(0,0,0,.075); border:1px solid #2e3092;}

/* wrap css-----------------------------------------------------------------------------------------------------------*/

.bg{background: url(../img/bg.jpg) center fixed no-repeat; overflow: hidden;}
.container{width: 100%;max-width: 1200px;margin:0 auto;padding-top:30px;}
.box{max-width: 600px;padding:15px; position: relative;margin-left:50%; }
@media screen and (max-width:1180px) {
  .bg{overflow: auto;}
  .box{margin-left:30%; }
}
@media screen and (max-width:840px) {
  .box{margin-left:10% ; }
}

/* display css-----------------------------------------------------------------------------------------------------------*/
.inblock{display: inline-block;}
.inblock:hover, .inblock:focus{display: inline-block;}
.block{display:block;}
.fl-left{float: left}
.fl-right{float: right}

.relative{position: relative;}

#checkbox span{font-size: 15px}
#checkbox input[type="checkbox"] + span {
  display: block;
  position: relative;
  vertical-align: middle;
  padding: 5px;
  cursor: pointer;
}
#checkbox input[type="checkbox"] + span:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #dadddd;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin: 0 5px -3px 0;
  transition: border .25s ease-in-out, background-color .25s ease-in-out;
}
#checkbox input[type="checkbox"]:checked + span:before {
  content: "\e929";
  color: #fff;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  display: inline-block;
  border: 1px solid #2e3092;
  background-color: #2e3092

}
#checkbox input[type="checkbox"] {
  visibility: hidden;
  display: none;
}
/* padding css-----------------------------------------------------------------------------------------------------------*/
.pad0{padding:0px !important;}
.pad10{padding:10px !important;}
.pad20{padding:20px !important;}
.pad30{padding:30px !important;}
.pad40{padding:40px !important;}
.pad50{padding:50px !important;}

.pad2040{padding:20px 40px !important;}

.pad-t20{padding-top:20px !important;}
.pad-t30{padding-top:30px !important;}
.pad-t40{padding-top:40px !important;}
.pad-t60{padding-top:60px !important;}

.pad-b10{padding-bottom:10px !important;}
.pad-b15{padding-bottom:15px !important;}
.pad-b20{padding-bottom:20px !important;}
.pad-b30{padding-bottom:30px !important;}
.pad-b40{padding-bottom:40px !important;}

.pad-h10{padding:0 10px !important;}
.pad-h20{padding:0 20px !important;}
.pad-h30{padding:0 30px !important;}
.pad-h40{padding:0 40px !important;}

.pad-v05{padding:5px 0 !important;}
.pad-v20{padding:20px 0 !important;}
.pad-v30{padding:30px 0 !important;}
.pad-v40{padding:40px 0 !important;}

/* margin css-----------------------------------------------------------------------------------------------------------*/
.mar-t10{margin-top:10px !important;}
.mar-t20{margin-top:20px !important;}
.mar-t30{margin-top:30px !important;}
.mar-t40{margin-top:40px !important;}

.mar-b10{margin-bottom:10px !important;}
.mar-b15{margin-bottom:15px !important;}
.mar-b20{margin-bottom:20px !important;}
.mar-b30{margin-bottom:30px !important;}
.mar-b40{margin-bottom:40px !important;}
.mar-b60{margin-bottom:60px !important;}
.mar-b80{margin-bottom:80px !important;}

.mar-h10{margin:0 10px !important;}
.mar-h20{margin:0 20px !important;}
.mar-h30{margin:0 30px !important;}
.mar-h40{margin:0 40px !important;}

.mar-v10{margin:10px 0 !important;}
.mar-v20{margin:20px 0 !important;}
.mar-v30{margin:30px 0 !important;}
.mar-v40{margin:40px 0 !important;}

.num_btn{margin:50px 0 ;}
.num_btn ul li{
  padding:0 15px; 
  width: 100px; 
  line-height: 90px; 
  border:1px solid #333; 
  display: inline-block;
  border-radius: 5px;
  margin-right:10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  background-color:  rgb(255,255,255,.2);
  box-shadow: 0px 3px rgb(0,0,0,.5);
  position: relative;
    top: 0;
    user-select: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    vertical-align: top;
}
.num_btn ul li:hover{background-color:#2e3092; border:1px solid #121353; color:#fff; box-shadow: 0px 3px rgb(18,19,83,.9); }
.num_btn ul li:hover a{color:#fff;}
.num_btn ul li:active{    
  top: 2px;
  box-shadow: 0px 0px #121353;
}
.num_btn ul li a{display: block; width: 100%}
#footer ul li:first-child{margin:0 10px 0 0;}
#footer ul li{display: inline-block;margin:0 10px; border:1px solid #2e3092; background-color: #2e3092; padding:3px 10px;border-radius: 5px}
#footer ul li a{color: #fff} 
#footer ul li:hover{background-color: #15175e}

/* font css-----------------------------------------------------------------------------------------------------------*/

/* titillium-web-300 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/titillium-web-v6-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web Light'), local('TitilliumWeb-Light'),
       url('../fonts/titillium-web-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v6-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v6-latin-300.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-regular - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/titillium-web-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
       url('../fonts/titillium-web-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v6-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-600 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/titillium-web-v6-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'),
       url('../fonts/titillium-web-v6-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v6-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v6-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v6-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v6-latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/titillium-web-v6-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
       url('../fonts/titillium-web-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titillium-web-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titillium-web-v6-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/titillium-web-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titillium-web-v6-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'KoPub Dotum';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/KoPubDotumLight.eot');
  src: url('../fonts/KoPubDotumLight.woff2') format('woff2'),
       url('../fonts/KoPubDotumLight.woff') format('woff'),
       url('../fonts/KoPubDotumLight.ttf') format('truetype'),
       url('../fonts/KoPubDotumLight.svg#KoPubDotumLight') format('svg'),
       url('../fonts/KoPubDotumLight.eot?#iefix') format('embedded-opentype');
}

@font-face {
  font-family: 'KoPub Dotum';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/KoPubDotumMedium.eot');
  src: url('../fonts/KoPubDotumMedium.woff2') format('woff2'),
       url('../fonts/KoPubDotumMedium.woff') format('woff'),
       url('../fonts/KoPubDotumMedium.ttf') format('truetype'),
       url('../fonts/KoPubDotumMedium.svg#KoPubDotumMedium') format('svg'),
       url('../fonts/KoPubDotumMedium.eot?#iefix') format('embedded-opentype');
}

@font-face {
  font-family: 'KoPub Dotum';
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/KoPubDotumBold.eot');
  src: url('../fonts/KoPubDotumBold.woff2') format('woff2'),
       url('../fonts/KoPubDotumBold.woff') format('woff'),
       url('../fonts/KoPubDotumBold.ttf') format('truetype'),
       url('../fonts/KoPubDotumBold.svg#KoPubDotumBold') format('svg'),
       url('../fonts/KoPubDotumBold.eot?#iefix') format('embedded-opentype');
}