@charset "utf-8";
/*-------------------------------------------------
Author : siin
Create date : 2018-11-02
-------------------------------------------------*/
/* 아이콘폰트 */
@import url(/webroot/fonts/xeicon/xeicon.min.css);
/* 국문 font-family: 'Noto Sans KR'; font-weight:300,500,700; */
@import url(/webroot/fonts/webfonts_NotoSansKR/webfonts_NotoSansKR.css);
/* 국문 font-family:'Nanum Square'; font-weight:400,700; */
@import url(/webroot/fonts/webfonts_NanumSquare/webfonts_NanumSquare.css);

/* reset.css(plan-i standard) */
html{font-size:20px;box-sizing:border-box;}
*,*:before,*:after{box-sizing:inherit;}
body {margin:0; padding:0; font-size:.8rem; font-family:'Noto Sans KR'; line-height:1.25;  color:#555; font-weight: 300; overflow-x:hidden;}
ul,ol,li,dl,dt,dd{margin:0; padding:0; list-style: none;}
p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
a {color:inherit; text-decoration:none;}
img {border: 0;	vertical-align:middle; font-size:0;}
table{border-collapse:collapse; border-spacing:0; width:100%;}
caption,legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
select, input, textarea{color: #555; font-size: 1.6rem;}
select, input {vertical-align: middle;}
b, strong{font-weight:normal;}
address,em,i{font-style:normal;}
button{border:0; background:none; cursor:pointer;}
hr{margin: 0; border: none; padding: 0; display:block;}
figure, figcaption{padding:0; margin:0;}
fieldset{border: none; padding: 0; margin: 0;}
input[type="submit"] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
header, footer, article, section, aside, nav, main {display: block;}
button,input,optgroup,select,textarea { font-family: inherit; font-size: inherit; font-weight:inherit; margin: 0;}

/* Skip to content */
.skip-to { position: absolute; top: -99px; left: 0; background: #333; color: #fff; width: 100%; padding: 10px 0; text-align: center; text-decoration: none; z-index: 999; }
.skip-to:hover,.skip-to:focus,.skip-to:active { display: block; top: 0; }
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.container{width:60rem; margin:0 auto;}
.container::after{content:""; clear:both; display:block;}
.container.sm {width:37rem; margin: 0 auto;}

/* Align */
.txt-left {text-align:left !important;}
.txt-center {text-align:center !important;}
.txt-right {text-align:right !important;}

.float-left {float:left !important;}
.float-right {float:right !important;}



.clearfix { position: relative; }
.clearfix::after { content: ""; display: block; clear: both; }

.form-control { display: inline-block; width: 100%; height: 2rem; padding:.3rem 1rem; font-size: .8rem; line-height: 1.42857143; color: #666; background-color: #fff; background-image: none; border: 1px solid #e0dede; font-family: 'Ubuntu', sans-serif; }
textarea.form-control { height: inherit; resize: none; }
.form-control.xs { width: 4.5rem; }
.form-control.sm { width: 6.5rem; }
.form-control.md { width: 11.75rem; }
.form-control.lg { width: 17rem; }
.form-control.xl { width: 300px; }
.form-control.xxl { width: 700px; }
.form-control.normal { width: auto; }
.form-control::placeholder{color:#b7b7b7;}

.btn {display: inline-block; margin-bottom: 0; font-size:.8rem; font-weight: normal; line-height: 1.42857143; text-align:left; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; color: #333; background-color: #fff; transition: all .25s ease; border: 1px solid #ddd; padding:.5rem 1rem; font-weight:300; }
.btn:hover, .btn:focus { transition: all .25s ease; -webkit-transition: all .25s ease;}
.btn.xs { width: 75px; }
.btn.sm { width: 100px; }
.btn.md { width: 125px; }
.btn.lg { width: 150px; }
.btn.xl { width: 185px; }
.btn.xxl { width: 230px; }
.btn.normal { width: auto; }


/* 반응형 아이프레임, 오브젝트, 엠베디드 */
.embed-container { position: relative; padding-bottom: 40%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe,.embed-container object,.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.img-responsive{max-width:100%; display:block; margin:0 auto;}
.mobile {display:none;}



@media (max-width:1200px) {
  html {font-size:18px;}
  #wrap {overflow-x: hidden;}
  .container {width: 100%; padding: 0 15px;}
}



@media (max-width: 768px) {
  html{font-size:16px;}
  .web {display:none;}
  .mobile {display:block;}
}

@media (max-width:740px) {
  .container.sm {width: 100%;}
}