/* CSS Document */


html {
    letter-spacing: -0.5px;
}

a, a:hover {
    cursor:pointer
}

body.index {
  background: #222;
  min-width: 1140px;
}

body.sub {
  background: #eee;
  min-width: 1140px;
}


/*p{
	clear: both;
}
*/
#comment_top.fixed {
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1002;
height: 60px;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
background-color: rgba(0, 0, 0, 0.7);
}
#comment_top.fixed .logoW{display: none;}
#comment_top.fixed > .line{display: none;}

.top{
	/*height: 70px;*/
	position: fixed;
	background-color: #111;
  width: 100%;
  z-index: 9999;
}

.top:after {
	content: "";
	display: block;
	clear: both;
}
.top h1.logo {
	display: block;
	position: relative;
	width: 200px;
	padding: 10px 0;
  float: left;

}
.top h1.logo img {
	width: 100%;
}

.top .tRight {
  position: absolute;
  right:0;
  margin-top: 10px;
}
.top .tRight:after {
  content: "";
  display: block;
  clear: both;
}
.top .tRight .leftM {
  margin-right: 15px;
}
.top .tRight .leftM:after {
  content: "";
  display: block;
  clear: both;
}

.top .quickkMenu {
/*	position: absolute;
	top: 20px;
	right: 0;*/
  float: right;
  line-height:100%;
}

.quickkMenu:after {
    display: block;
    content: "";
    clear: both;
}
.quickkMenu li{
    /* float: left; */
    display: inline-block;
    font-size: 11px;
    line-height: 14px;
    margin-left: 15px;
}

.quickkMenu li > a {
    color: #fff;
    display: inline-block;
    /* float: left; */
    letter-spacing: 0;
}

.quickkMenu li:nth-child(2) > a {
  color: #ff2f63;
}

.quickkMenu li > a:after {
    content: "";
    display: block;
    background: url(/images/inc/icon_bullet_line.png) top center no-repeat;
    width: 2px;
    height: 8px;
    float: right;
    margin-left: 15px;
    margin-top: 3px;
}

.quickkMenu li > a.end:after {
	display: none;
}


.quickkMenu li > a:hover {
    color: #fff;
}

.top .button {
  float: right;
  margin-top: 10px;
  overflow: hidden;
  clear: both;
}
.top .button:after{
  content: "";
  display: block;
  clear: both;
}

.button ul:after {
  content: "";
  display: block;
  clear: both;
}

.button li {
  float: left;
  margin-left: 8px;
  width: 25px;
  height: 25px;
  background-size: 100%;
}

.button li a {
  display: block;
  cursor: pointer;
  width: 100%; 
  height: 100%;
}

.button li:first-chlid {
  margin-left: 0;
}

.button li.facebook {
  background-image: url(/images/inc/icon_facebook.png);
}

.button li.instagram {
  background-image: url(/images/inc/icon_instagram.png);
}

.button li.blog {
  background-image: url(/images/inc/icon_blog.png);
}

.top .button li.ect {
  width: 130px;
  border: 1px solid #37c6ec;
  line-height: 25px;
  font-size: 13px;
  text-align: center;
}

.button li.ect a {
  color: #37c6ec;
}
.button2 {
  height: 100%;
}
.button2 a{
  display: inline-block;
  background: #ff2f63;
  color: #fff;
  text-align: center;
  line-height: 20px;
  width: 80px;
  font-size: 15px;
  height: 100%;
  padding: 8px 0;}


.top .line {
  position: relative; width: 100%; height: 1px; background-color: #333 !important;
}


.textContainer{
	clear: both;
	width: 100%;
}

.text{
	text-align: center;
	vertical-align: middle;
}

.text .num {
  display: inline-block;
  padding: 5px 10px;
  background:#ff2f63;
  color: #fff; 
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 10px;
}

.text .num2 {
  display: inline-block;
  padding: 5px 10px;
  background:#ff2f63;
  color: #fff; 
  font-size: 18px;
  line-height: 18px;
}

.text .title {
	font-size: 45px;
  line-height: 50px;
	margin-bottom: 50px;
  color: #fff;
  font-weight: 300;
}

.index .title {
  font-weight: 700;
  letter-spacing: 0;
}

.text .line {
	width: 50px;
	height: 2px;
	background-color: #666;
	text-align: center;
	margin: 0 auto;
	display: block;
	margin-bottom: 50px;

}

.text .stit {
  font-size: 18px;
}

.index .text .stit {color: #fff;}

.text .stit2 {
  font-size: 25px;
}

.text2{
  text-align: center;
  vertical-align: middle;
}

.text2 .title {
  font-size: 27px;
  line-height: 27px;
  margin-bottom: 30px;
  font-weight: 300;
  color: #fff;
}

.text2 .line {
  width: 50px;
  height: 2px;
  background-color: #666;
  text-align: center;
  margin: 0 auto;
  display: block;
  margin-bottom: 30px;

}

.text3 {
  text-align: left;
}

.text3 .title  { 
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  }

.sub .title {
  color: #333;
}


.sub .line {
  background-color: #666;

}

.conW {
  background-color: #fff !important;
}

.conG {
  background-color: #f8f8f8 !important;
}

.conB {
  background-color: #000 !important;
  /* border-top: 1px solid #444; */
}

.conB .text .title {
  color: #fff;
}

.conB .text .line  {
  background-color: #666;

}

.topD {border-top: 1px solid #ddd;}
.bottomD {border-bottom: 1px solid #ddd;}

.thumb {
	overflow: hidden;

}

.thumb:after {
	content: "";
	display: block;
	clear: both;
}

/* line4 */
.cont {
  width: 100%;
  background: #ebebec;
  font-weight: 200;
  text-align: center;
}
.cont .bg {
  position: relative;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-4.jpg) 50% 0 no-repeat fixed;;
  background-size: cover;
  background-repeat: no-repeat;
  /*height: 500px;*/
}

.cont .bg .overlay {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
}

.cont .title {
  color: #fff;
}

.cont .list {
}

.cont .list:after {
  content: "";
  display: block;
  clear: both;
}

.cont li {
  float: left;
  width: 25.87%;
  border: 1px solid #fff;
  overflow: hidden;
  padding: 50px 30px;
  margin: 0 10px;
  position: relative;
}

.cont .number {
  font-size: 42px;
  line-height: 42px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100 !important;
}
.cont .txt {
  font-size: 18px;
  line-height: 25px;
  margin-top: 30px;
}
.cont .txt2 {
  font-size: 20px;
  line-height: 30px;
}
.cont p {
  color: #fff;
}

.index .cont p  {
  color: #fff !important;
}



.cont2 .con .content-left {
  float: left;
  font-weight: 200;
}
.cont2 .con .content-left p {
  margin-bottom: 30px;
  color: #fff;
  font-size: 60px;
  line-height: 60px;
}
.cont2 .con .content-left .word-rotate {
  color: #fff;
  font-size: 60px;
  line-height: 60px;
  height: 60px;
  max-height: 60px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0;
}
.cont2 .con .content-right {
  float: right;
  width: 590px;
}
.cont2 .con .content-right ul > li {
  padding: 0;
  margin-bottom: 25px;
  display: block;
  height: 84px;
  border-bottom: 1px solid #ff2f63;
}
.cont2 .con .content-right ul > li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.cont2 .con .content-right ul > li .tit {
  float: left;
  color: #fff;
  font-size: 20px;
  letter-spacing: 0;
}
.cont2 .con .content-right ul > li .txt {
  margin: 0;
  float: right;
  width: 400px;
  color: #fff;
  font-weight: 200;
  font-size: 18px;
  line-height: 26px;
}

.cont2:after {
  content: "";
  display: block;
  clear: both;
}

.foot {background-color: transparent; border: none; color: #ddd;}
.foot tr, .foot th, .foot td {border:none;}
.foot td {padding: 0 15px; vertical-align: top;}
.foot .con {height: 250px; position: relative;}
.foot .con .bottom {position: absolute; bottom: 0;}
.foot h4{color: #fff; font-size: 18px; line-height: 25px; font-weight: 400;}
.foot p.txt {font-size: 15px; line-height: 20px; font-weight: 300;}
.foot p.txt2 {font-size: 13px; line-height: 18px; font-weight: 300;}
.foot p.phone {font-size: 35px; line-height: 35px; font-weight: 700; letter-spacing: 0;}
.foot p.num {font-size: 25px; line-height: 25px; font-weight: 700; letter-spacing: 0;}
.foot .list3 li > p{font-size: 12px;}

.foot .bank {position: relative;}
.foot .logo {width: 100px;}
.foot .logo img {width: 100%;}

.foot .btn {display: inline-block; width: 100%; line-height: 45px; height: 45px; text-align: center;}
.foot .btn a {color: #fff;  font-size: 16px; cursor: pointer; display: inline-block; width: 100%; height: 100%;}
.foot li {letter-spacing: 0;}
.foot li > h5 {width: 70px; float: left;}
.foot li > p {float: left;}


.foot li > {float: left; color: #aaa; font-size: 13px;}
.foot li:after {content: ""; display: block; clear: both;}

.foot .line {width: 100%; height: 1px; display: block; background-color: #666;}

.db {
	background-color: #eee;
}
.db h2.title {
	text-align: center;
	font-size: 30px;
    color: #333 !important;
}
.db .stitle {
	text-align: center;
	font-size: 15px;
	line-height: 22px;

}
.db .formBox {
    max-width: 1160px;
    margin: 0 auto;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.db .formBox:after {
    content: "";
    display: block;
    clear: both;
}
.db .formBox .left {
    width: 50%;
    float: left;
}

.db .formBox .right {
    width: 435px;
    margin: 0 auto;
    color: #ad081d;
    font-size: 14px;
}

.db .formBox .right .email {
	float: left;
   }

.db .formBox .right .phone {
	float: left;
}

.db .formBox1 dd, .db .formBox2 dd{
	position: relative;
    display: block;
    float: left;
    width: 48%;
    margin-bottom: 15px;
}

.db .formBox1 dd:nth-child(3),
.db .formBox1 dd:nth-child(5),
.db .formBox1 dd:nth-child(7){
	margin-left: 4%;
}
.db .formBox1 label, .db .formBox2 label { 
    width: 25.2%;
    color: #666;
    cursor: default;
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
}
.db .formBox2 label {
	width: 12%;
}

.db .formBox2 dd {
	width: 100%;
}

.db .formBox1:after, .db .formBox2:after  {
    content: "";
    display: block;
    clear: both;
}

.db dd input[type=text],
.db dd input[type=file],
.db dd select {
	width: 74%;
    border: none;
    height: 40px;
    color: #000;
    padding-left: 5px;
    background: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
    vertical-align: middle;
}

.db .formBox2 dd input[type=file]{
	width:80%;
    background-color: #fff;
}

.db .formBox2 dd textarea {
	margin-left: 6px;
	width: 84.9%;
}

.db .formBox2 a.cancel {
    display: block;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
    background:#757575;
    width: 5%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    border-radius: 5px;
}
.db .btn {
    margin: 0 auto;
    text-align: center;
}
.db .btn button {
    background: #fc3d64;
    padding: 15px 40px;
    color: #fff;
    etter-spacing: -2px;
    font-size: 16px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

footer {background-color: #111; text-align: center; padding: 30px 0;  color: #666;}
#admin footer {
  background-color: #111;
}


.footerTop { /* 상위 메뉴의 a 태그에 공통으로 설정할 스타일 */ 
    /*height: 45px;*/
    text-decoration:none; /* a 태그의 꾸밈 효과 제거 */ 
    font-size: 18px; /* 폰트 사이즈를 12px로 설정 */ 
    color: black; /* 상위 메뉴의 글씨색을 흰색으로 설정 */
    /*background-color: white;*/
    font-weight: normal; /* 폰트를 굵게 설정 */ 
    /*font-family: "Trebuchet MS", Dotum;*/ /* 기본 폰트를 영어/한글 순서대로 설정 */ 
}


.footerTop .quickkMenu {
    /* width: 235px; */
    text-align: center;
}

.footerTop .quickkMenu li{
    float: left;
    display: inline-block;
    font-size: 13px;
    line-height: 16px;
    margin-left: 15px;
}
.footerTop .quickkMenu li:first-child {
  margin-left: 0;
}
footer .contents:after{
  content: "";
  display: block;
  clear: both;
}

footer address {
  text-align: left;
  font-size: 14px;
  line-height: 22px;
  font-style: normal;
}

footer .copyright {
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  letter-spacing: 0;
}
footer .contents .con .list3 li{padding-bottom: 0px;}

footer .iconList {width: 350px; margin-top: -2px;}
footer .iconList:after {content: ""; display: block; clear: both;}
footer .iconList li {float: left; padding-bottom: 0px; line-height: 50px; margin-right: 0; margin-bottom: 15px; width: 47%;}
footer .iconList li:nth-child(even){margin-left: 15px;}
footer .iconList li a {display: inline-block; float:left;}
footer .iconList li .icoTxt .txt {padding-top: 0px; color: #ccc;}
footer .iconList li .icoTxt {margin-top: 0px; line-height: 50px;}




/* Main */
/* Line1 */
.snip1273 {
  /*font-family: 'Raleway', Arial, sans-serif;*/
  position: relative;
  /*float:left;
  left: 50%;*/
  margin-top: 0px;
  /*min-width: 260px;*/ /* box size */
  /*max-width: 260px;*/ /* box size */
  width: 24.99%;
  float:left;
  color: #ffffff;
  text-align: left;
  background-color: #000000;
  font-size: 16px;  /* Head Font */
}
.snip1273 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
.snip1273 img {
  position: relative;
  max-width: 100%;
  width: 100%;
  vertical-align: top;
}
.snip1273 figcaption {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  padding: 20px 30px;
  
}
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  width: 1px;
  height: 0;
}
.snip1273 figcaption:before {
  right: 0;
  top: 0;
}
.snip1273 figcaption:after {
  left: 0;
  bottom: 0;
}
.snip1273 h3,
.snip1273 p {
  line-height: 1.5em;
}
.snip1273 h3 {
  margin: 0 0 5px;
  font-weight: 500;
  text-transform: uppercase;
}
.snip1273 p {
  font-size: 0.9em; /* second font */
  font-weight: 300;
  margin: 0 0 15px;
}
.snip1273 a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.snip1273:before,
.snip1273:after,
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  position: absolute;
  content: '';
  background-color: #ffffff;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0.8;
}
.snip1273:before,
.snip1273:after {
  height: 1px;
  width: 0%;
}
.snip1273:before {
  top: 0;
  left: 0;
}
.snip1273:after {
  bottom: 0;
  right: 0;
}
.snip1273:hover img,
.snip1273.hover img {
  opacity: 0.4;
}
.snip1273:hover figcaption,
.snip1273.hover figcaption {
  opacity: 1;
}
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  height: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after {
  width: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after,
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  opacity: 0.1;
}
/* Demo purposes only */



/* Line3 */
.snip1384 {
  /*font-family: 'Raleway', Arial, sans-serif;*/
  position: relative;
  /*float:left;
  left: 50%;*/
  margin-top: 0px;
  /*min-width: 260px;*/ /* box size */
  /*max-width: 260px;*/ /* box size */
  width: 24.99%;
  float:left;
  color: #ffffff;
  text-align: left;
  background-color: #000000;
  font-size: 16px;  /* Head Font */
}
figure.snip1384 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
figure.snip1384 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}
figure.snip1384:after,
figure.snip1384 figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figure.snip1384:after {
  content: '';
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}
figure.snip1384 figcaption {
  z-index: 1;
  padding: 40px;
}
figure.snip1384 h3,
figure.snip1384 .links {
  width: 100%;
  margin: 5px 0;
  padding: 0;
}
figure.snip1384 h3 {
  line-height: 1.1em;
  font-weight: 500;
  font-size: 1.2em;
  text-transform: uppercase;
  opacity: 0;
}
figure.snip1384 p {
 /* font-size: 0.9em; *//* second font */
  font-weight: 300;
  /*letter-spacing: 1px;*/
  opacity: 0;
  top: 50%;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}
figure.snip1384 i {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 20px 25px;
  font-size: 34px;
  opacity: 0;
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}
figure.snip1384 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
figure.snip1384:hover img,
figure.snip1384.hover img {
  zoom: 1;
  filter: alpha(opacity=50);
  -webkit-opacity: 0.5;
  opacity: 0.5;
}
figure.snip1384:hover:after,
figure.snip1384.hover:after {
  opacity: 1;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}
figure.snip1384:hover h3,
figure.snip1384.hover h3,
figure.snip1384:hover p,
figure.snip1384.hover p,
figure.snip1384:hover i,
figure.snip1384.hover i {
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  opacity: 1;
}
/* Demo purposes only */

figure{
  display: inline-block;
}
.iconList li:after {content: ""; display: block; clear: both;}
.iconList li{}
.iconList li h5.icon {width: 50px; height:50px; float: left; background-size: 100% 100%; margin-right: 10px;}
.iconList li h5.talk { background-image:url(/images/inc/icon_talktalk.jpg); }
.iconList li h5.kakao { background-image:url(/images/inc/icon_kakao_talk.jpg); }
.iconList li h5.contract { background-image:url(/images/inc/icon_contract.png); }
.iconList li h5.xpread { background-image:url(/images/inc/icon_xpread.png); }
.iconList li h5.adcenter { background-image:url(/images/inc/icon_adcenter.png); }
.iconList li h5.pay { background-image:url(/images/inc/icon_pay.png); }
.iconList li .icoTxt {float: left; letter-spacing: -0.5px; margin-top: 6px;}
.iconList li .icoTxt .on {display: block; width: 25px; font-size: 9px; color: #fff; line-height: 18px; text-align: center; letter-spacing: 0;}
.iconList li .icoTxt .txt {padding-top: 6px; display: block;}


.quickBtn{
  display: block;
  cursor: pointer;
  width: 60px;
  height: 60px;
  position: fixed;
  right: 24px;
  bottom: 90px;
  background: url(/images/inc/ico_top.png) 0 0 no-repeat;
  font-size: 0;
  text-indent: -9999px;
  background-size: cover;
  z-index: 100;
}

.quickBtn:hover{background-position: -60px 0;}