/*@import url(font-awesome/font-awesome.css);*/
/*@import url(fontawesome-web/css/all.min.css);*/
@import url(fontawesome-free-5.12.0-web/css/all.min.css);
html , body {
	width:100%;
	padding:0px;
	margin:0px;
	height:100%;
	font-family:'Kanit',tahoma,verdana,arial,sans-serif,"lucida grande"!important;
}
body {
	color:#333333;
	/*background-color:#519600;*/
  font-size:11px; line-height:1.4;
  background:url(../img/bg.jpg) center no-repeat #bf0029;
  background-attachment: fixed;
  font-weight: 300;
}

body , input , textarea , select , button {
	font-size:15px;
	font-family:'Kanit',tahoma,verdana,arial,sans-serif,"lucida grande";
  outline:none;
}

img { border:none;vertical-align:bottom }

h1,h2,h3,h4,h5 {	padding:0px;margin:0px; 	}

a { text-decoration:none; color:#fff; }

.clearfix { clear:both  }
.text-center { text-align:center; }


.input-select { display:block;width:100%;box-sizing:border-box;border:1px #ccc solid;color:#333;background-color:#fff;position: relative; }
.input-select::after { content:'';height:0px;width:0px;border:6px transparent solid;border-top-color:#777;position: absolute;right:10px;top:18px;  }
.input-select::before { content:'';border-left:1px #ddd solid;position: absolute;right:30px;top:5px;bottom:5px;  }
.input-select select { appearance: none;-webkit-appearance: none; background:none;border:none;padding:0px;width:100%;padding:7px 17px;color:#333;position: relative;z-index:1; }

.swiper-pagination { z-index:1!important}
.swiper-pagination-bullet { margin:0px 3px!important;height:10px!important;width:10px!important;border:none;opacity:1!important;background:#c0c0c0!important; }
.swiper-pagination-bullet-active { background-color:#322708!important; }


.web-header { background-color:#000000;color:#fff;padding:10px 0px 10px 0; }
.web-header > .wrapper { max-width:1300px; margin:0px auto; display:flex; align-items: center; justify-content: space-between;}
.web-header .logo { height:55px; }
.web-header .logo img { height:100%; }
.web-header .menu-area { float:right; }
.web-header .menu-area > ul { margin:0px;padding:0px;display:flex; align-items: center; list-style-type:none;font-size:16px;font-weight:bold;  }
.web-header .menu-area > ul > li { margin:0px 10px;padding:0px; }
.web-header .menu-area > ul > li.donate {}
.web-header .menu-area > ul > li.donate a.icon { font-size: 18px; display: flex; align-items: center; background-color: #a97e06; border: 1px solid #322708; border-radius: 5px;}
.web-header .menu-area > ul > li.donate a.icon span { margin-left: 5px;}
.web-header .menu-area > ul > li.donate a.icon img { display: block; width: 22px;}
.web-header .menu-area > ul > li.free {}
.web-header .menu-area > ul > li.free a.icon { font-size: 18px; display: flex; align-items: center; background-color: #a97e06; border: 1px solid #322708; border-radius: 5px;}
.web-header .menu-area > ul > li.free a.icon span { margin-left: 5px;}
.web-header .menu-area > ul > li.free a.icon img { display: block; width: 22px;}

.web-header .menu-area a { color:#fff;display:block;padding:12px 5px;position: relative; }
/*
.web-header .menu-area a.icon { padding-left:37px }
.web-header .menu-area a.icon .icon { position: absolute;left:5px;top:15px;width:26px }
*/
.web-header .menu-area a.active { color:#d9cd11 }

.web-header .menu-area-mob { float:right; padding-right:50px;width: 250px;position: absolute;top: 15px;right: 5px; }
.web-header .menu-area-mob > ul { display:flex;list-style-type:none;font-size:15px;font-weight:bold;  }
.web-header .menu-area-mob > ul > li { margin:0px 10px;padding:0px; }
.web-header .menu-area-mob a { color:#fff;display:block;/*padding:15px 5px;*/position: relative; }
.web-header .menu-area-mob a.icon { padding-left:25px }
.web-header .menu-area-mob a.icon .icon { position: absolute;left:-4px;/*top:15px;*/width:22px }
.web-header .menu-area-mob a.active { color:#d9cd11 }
.web-header .menu-area-mob { display:none; }



.web-search {
  background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.web-search > .wrapper {
  max-width:1300px;margin:0px auto;padding:20px 0px;
}
.web-search .box { width:100%;max-width:600px;background-color:#fff;display:flex;margin:0px auto; }
.web-search .box > * { padding:12px 25px;border:none;font-size:15px;   }
.web-search .box input[type='text'] { width:100%; }
.web-search .box .btn { background-color:#f2b134;color:#333;white-space: nowrap; cursor: pointer;}
.web-search .box .btn-adv { width:180px;color:#c20c33;font-size:14px;background:url(../img/icon/gear.png) left 10px center no-repeat;padding-left:35px;padding-right:10px; }
.web-search .box-adv { max-width:600px;display:flex;margin:0px auto;margin-top:10px;display:none; }
.web-search .box-adv .input-select:first-child { margin-right:10px; }

.web-search.show-adv { background-color:#222 }
.web-search.show-adv .box-adv { display:flex; }

.web-banner { padding:0px;  }
.web-banner > .wrapper { max-width:1030px;margin:0px auto; }
.web-banner .banner { width:100%; }

#web-banner{
    margin-left: 0px; width:1030px;
}
.web-banner-2{
    width: 300px;  position: relative;overflow: hidden;z-index: 1;box-sizing: border-box;flex-flow: row wrap; padding:0 0 0 5px;
}
.web-banner #web-banner img{
    height:160px;
}
.web-banner-2 img{
    height:160px;
}



.web-footer { background-color:#6d1919;text-align:center;color:#fff;font-size:16px;line-height:2;position: relative;  }
.web-footer > .wrapper { max-width:1300px;margin:0px auto;padding:40px 0px; }
.web-footer .logo { margin-bottom:20px; }
.web-footer p { opacity:.8;margin:0px;margin-top:20px;padding:0px; }
.web-footer .compname { font-size:20px;display:block; }
.web-footer .contact-area { font-size:16px;opacity:.8; }
.web-footer .contact-area a { display:inline-block;margin:0px 15px; }
.web-footer .contact-area .icon { display:inline-block;vertical-align:middle;margin-top:-2px;margin-right:4px; }
.web-footer .btn-go-top { position:absolute;top:-55px;right:0%;  }


.modal { display:none;position:fixed;top:0px;left:0px;bottom:0px;right:0px;z-index:100; }
.modal > .bg { position:fixed;top:0px;left:0px;bottom:0px;right:0px;background-color:#212121;opacity:.9; }
.modal > .body { position:fixed;top:0px;left:0px;bottom:0px;right:0px;display:flex;align-items:center;justify-content:center   }
.modal > .body > .wrapper { background-color:#fff;border:5px #b10022 solid;border-radius:10px;padding:20px;position: relative; }
.modal > .body > .wrapper > .btn-close-modal { position:absolute;top:20px;right:20px; }
.modal.show { display:block; }


.register-area { text-align:center;padding:20px 20px;  }
.register-area h2 { margin:20px 0px; }
.register-area .list { text-align:left; }
.register-area .btn { display:block;margin:10px 0px; }
.register-area .link { color:#111;font-size:16px;display:inline-block;margin-bottom:3px;border-bottom:1px #333 solid;font-weight:bold;  }



#nav-btn-hbg {
  display:none;
	position:fixed; right:10px;top:20px; z-index:3;
  width: 40px;
  height: 40px;
  margin:7px 6px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-btn-hbg span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #d9cd11;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
	box-shadow: 0px 0px 2px #cccccc;
}

#nav-btn-hbg span:nth-child(1) {
  top: 0px;
}

#nav-btn-hbg span:nth-child(2),#nav-btn-hbg span:nth-child(3) {
  top: 10px;
}

#nav-btn-hbg span:nth-child(4) {
  top: 20px;
}
#nav-btn-hbg.open span { box-shadow:none; }
#nav-btn-hbg.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-btn-hbg.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-btn-hbg.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-btn-hbg.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.layer_popup{
	font-size:17px;
	font-weight: 400;

	position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; text-align:left; display:flex; align-items:center;}
.layer_popup .bg_black{position:fixed; top:0; left:0;  width:100%; height:100%;  background:#000; opacity:.7; filter:alpha(opacity=70);}
.popClosed{
	position:absolute;
	top:-10px;
	right:-10px;
	width:32px;
	height:32px;
	line-height:32px;
	color:#fff;
	text-align:center;
	background:#ff4b4b;
	border-radius:4px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	z-index:999;
	}
.popClosed:hover{background:#f33a3a; color:#fff;}
.popClosed:before{font-size:14px; color:#fff;}

.popContents{
	width:calc(100% - 50px);
	height:auto;
	margin:auto;
	background:#fff;
	border-radius: 25px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	position:relative;
	}
.popContents .header{
	line-height:1.4em;
	padding:20px 15px;
	border-top:none; border-left:none; border-right:none;
	border-bottom:1px solid rgba(0,0,0,0.2);
	background:rgba(0,0,0,0.04);
	}
.popContents .header .cate{display:block; font-size:16px; color:#5b5b5b;}
.popContents .header .tit{font-size:21px; font-weight:400; color:#2a2a2a;}

.popContents .body{
	position:relative;
	font-family:'Nanum Gothic';
	font-size:12px;
	line-height:1.5em;
	width:100%;
	max-height:400px;
	padding:20px;
	overflow-y: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
.popContents .body:after{content:''; margin-bottom:20px; display:block;}

.popContents .con{padding:25px; position:relative; line-height:1.5em;}
.popContents .con h1,
.popContents .con h2,
.popContents .con h3,
.popContents .con h4,
.popContents .con h5,
.popContents .con h6{line-height:1.5em;}
.popContents .con h2{font-size:18px; letter-spacing:-0.02em; font-weight:500;}
.popContents .con h3{font-size:16px; letter-spacing:-0.02em; font-weight:500;}

.popContents .icon_copy:before{content:'\e183'; font-family:'intaeFont'; font-size:14px; vertical-align:top; margin-right:7px; margin-top:-2px; display:inline-block;}
.popContents .icon_copy:after{content:'\e184'; font-family:'intaeFont'; font-size:14px; vertical-align:top; margin-left:7px; margin-top:-2px; display:inline-block;}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fcf;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

.popLoadingContents {
    width: calc(100% - 50px);
    height: auto;
    margin: auto;
    position: relative;
	text-align:center;
}
@media screen and (max-width:1200px) {
  .web-header { padding-bottom:10px }
  .web-header .logo { display:block;text-align:center; }
  .web-header .menu-area { float:none;text-align:center;margin-top:10px;  }
  .web-header .menu-area > ul > li { width:100%; white-space:nowrap  }
  .web-header .menu-area-mob { display:none; }
}

@media screen and (max-width:950px) {

  .web-banner #web-banner img{ height:100px;}
  .web-banner-2 img{height:100px;}
}

@media screen and (max-width:900px) {
  #nav-btn-hbg { display:block;  }
  .web-header {  position: relative;padding:0px;height:70px;  }
  .web-header .logo { position: fixed; top:0px;left:0px;right:0px;background-color:#000;z-index:3;padding:10px 20px;text-align:left }
  .web-header .menu-area { display:none; position: fixed; top:0px;left:0px;right:0px;bottom:0px; margin:0px; background-color:#000;z-index:2;opacity:.9; }
  .web-header .menu-area-mob { display:block; z-index:100;top: 30px;width: 250px;position: absolute;top: 15px;right: 5px; }
  .web-header .menu-area > ul { display:block;padding-top:25%; }
  .web-header .menu-area > ul > li { text-align:center;border-bottom:1px rgba(255,255,255,0.2) solid; margin:0px 40px;width:auto;padding-bottom:0;  }
  .web-header .menu-area > ul > li a { display:inline-block;}
  .web-header .menu-area > ul > li a.icon { min-width:180px;box-sizing:border-box;padding-right:30px; display: flex; justify-content: center;}

  .web-banner { margin:0px 30px }

  #web-banner{
        padding:0px;
        padding-top:5px;
    }

  body.nav-open { overflow: hidden; }
  body.nav-open .web-header .menu-area { display:block; }


  .web-banner #web-banner img{ height:90px;}
  .web-banner-2 img{height:90px;}
}

@media screen and (max-width:600px) {
  .web-header .logo { height:35px;padding:20px;text-align:left   }

  .web-footer { line-height:1.5;font-size:14px  }
  .web-footer > .wrapper { margin:0px 10px }
  .web-footer .contact-area { margin-top:10px }
  .web-footer .contact-area a { margin-top:5px; }
.web-search > .wrapper
  .web-search { margin:0px;margin-top:10px; }
  .web-search > .wrapper { padding:10px; padding-bottom: 5px; }
  .web-search .box .btn-adv { font-size:0px; width:0px }

  .web-banner { margin:0px 0px }
	.web-banner picture { width: 100%;}
	.web-banner picture img { display: block; width: 100%;}
  .web-banner #web-banner img{ height:80px;}
  .web-banner-2 {
      display: none;
  }

  .modal > .body > .wrapper{
      padding: 5px;
      margin: 10px;
  }
  .modal > .body > .wrapper  .register-area{
    padding: 5px;
  }

  .modal > .body > .wrapper  .register-area img{
      width: 60px;
  }
  .modal > .body > .wrapper  .register-area .list img{
    width: 19px;
  }
  .register-area h2{
      font-size:18px;
      margin: 10px 0px;
  }

  .modal > .body > .wrapper .register-area .btn img{
      width: 100%;

  }

}

@media screen and (max-width:490px) {
    .web-banner #web-banner img{
        height:68px;
        }
        .web-banner-2 img{
            height:68px;
        }
}