/* ·¹À̾ƿô ¸®½ºÆ®
1.ÆùÆ®
2.»ó´Ü(Çì´õ)¸Þ´º
3.ÇÏ´Ü(DzÅÍ)¿µ¿ª
4.¼­ºê»ó´Ü ÇÏÀ§¸Þ´º/ŸÀÌƲ/¼­ºêÄÁÅÙÃ÷ ·¹À̾ƿô
5.¼­ºêÄÁÅÙÃ÷ ¿µ¿ª °øÅë
*/



/*****************1.ÆùÆ®*******************/
@font-face{font-family:"Metropolis-ExtraBold";src:local(¡Ø),
url("../../img/font/Metropolis-ExtraBold.eot?#iefix")
format("embedded-opentype"),url("../../img/font/Metropolis-ExtraBold.woff") format("woff"),
url("../../img/font/Metropolis-ExtraBold.woff2") format("woff2"),
url("../../img/font/Metropolis-ExtraBold.ttf")
format("truetype");font-weight:normal;font-style:normal}

@font-face{font-family:"NotoSansKR";src:local(¡Ø),
url("../../img/font/NotoSansKR-Light.eot?#iefix")
format("embedded-opentype"),url("../../img/font/NotoSansKR-Light.woff")
format("woff"),url("../../img/font/NotoSansKR-Light.woff2")
format("woff2"),url("../../img/font/NotoSansKR-Light.ttf")
format("truetype");font-weight:300;font-style:normal}

@font-face{font-family:"NotoSansKR";src:local(¡Ø),
url("../../img/font/NotoSans-Bold.eot?#iefix")
format("embedded-opentype"),url("../../img/font/NotoSans-Bold.woff")
format("woff"),url("../../img/font/NotoSans-Bold.woff2") format("woff2"),
url("../../img/font/NotoSans-Bold.otf")
format("opentype");font-weight:900;font-style:normal}

@font-face{font-family:"NotoSansKR-bold";src:local(¡Ø),
url("../../img/font/NotoSans-Bold.eot?#iefix") format("embedded-opentype"),
url("../../img/font/NotoSans-Bold.woff") format("woff"),
url("../../img/font/NotoSans-Bold.woff2") format("woff2"),
url("../../img/font/NotoSans-Bold.otf") format("opentype");font-weight:400;font-style:normal}




.down_btn {width:100%; display:block;}
.down_btn ul li {display:inline-block; padding:10px;}

@media screen and (max-width:767px) {
.down_btn ul li {padding:2px;}
.down_btn ul li img {width:90px;}
}







/* CSS reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small,
strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,figure
{margin:0;padding:0;border:0;vertical-align:baseline; font-family:"NotoSansKR"; list-style:none; font-size:13px; line-height:160%;   }

em,address{font-style:normal;}hr{display:none;}.fR{float:right;}.fL{float:left;}.t_5 {padding-top:5px;}.t_10 {padding-top:10px;}.t_20 {padding-top:20px;}.t_30 {padding-top:20px;}.t_40 {padding-top:40px;}ol, ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0; word-break:break-all;}
table th, table td{vertical-align:middle;}
caption{visibility:hidden;width:0;height:0;font-size:0;line-height:0;zoom:1;}


legend{overflow:hidden;width:0;height:0;font-size:0;visibility:visible;}
a {color:#787878; text-decoration:none;}
a:hover {color:#787878; text-decoration:none;}
img,input {vertical-align:middle;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption{display:block}
.floatBox:after {content:"";display:block;clear:both;}
.floatBox {*zoom:1;}


.mo_view {display:none;}
html {min-width:320px; width:100%; overflow-y:scroll;}
body {min-width:320px; width:100%; height:100%; white-space: normal;background:#EEEDED url('../../img/bg.jpg') center 0 no-repeat fixed; background-size:cover;}
div.wrapper {min-width:320px; width:100%; }
.d_wrap { width:100%; overflow: hidden; }


 



/*****************2.»ó´Ü(Çì´õ)¸Þ´º*******************/
#header{ width:100%; z-index:100; text-align:center; }
#header .header{position:relative; margin:0 auto; z-index:1000; height:240px; width:100%; }
#header h1 {z-index:1000; padding:25px 0;}


/*»ó´Ü´ë¸Þ´º*/
#header .gnb_wrap{  margin:0 auto; max-width:1220px;  background:#F34841;  box-shadow: 10px  10px 15px  #BBBABA;   }
#header .gnb_wrap > ul  {padding:0; margin:0;}
#header .gnb_wrap > ul > li{display:inline-block; float:left;  width:25%;   }
 
#header .gnb_wrap > ul > li a h2 {  font-weight:bold;   color:#fff; line-height:100%;  font-size:17px; letter-spacing:0.02em; font-weight:600; height:44px; padding-top:16px; }
#header .gnb_wrap > ul > li a h2 span { font-size:17px;  color:#fff; }
#header .gnb_wrap > ul > li a:hover h2,
#header .gnb_wrap > ul > li a.on_box_gnb h2 {display:inline-block; color:#000; width:100%; background:#fff;   }
#header .gnb_wrap > ul > li a:hover h2 span,
#header .gnb_wrap > ul > li a.on_box_gnb h2 span {color:#000;} 
#header .gnb_wrap > ul:after {content:" ";display:block;clear:both;overflow:hidden;}

/* »ó´Ü °í°´¼¾ÅÍ */
#header .header .top_tel {position:absolute;right:50%; margin:0 -610px 0 0; top:25px;box-shadow: 10px  10px 15px  #BBBABA;   z-index:100000;}
 

 
/* ¸ð¹ÙÀÏ */

@media screen and (max-width:1000px){
#header .header{ height:130px;}
#header h1 {z-index:10000; padding:10px 0;}
#header h1 img {width:150px;}

/*»ó´Ü´ë¸Þ´º*/
#header .gnb_wrap > ul > li a h2 {font-size:14px;  height:51px; padding-top:9px; }
#header .gnb_wrap > ul > li a h2 span { font-size:14px; display:block; }

/* »ó´Ü °í°´¼¾ÅÍ */
#header .header .top_tel {right:13px; margin:0; top:17px;  width:32px; height:32px; background:#fff; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; }
#header .header .top_tel img {width:25px; padding-top:4px; }
.mo_view {display:block;}
.pc_view {display:none;}
}









/*****************3.ÇÏ´Ü(DzÅÍ)¿µ¿ª*******************/
#footer {position:relative; width:100%; background:#212121;}
.f_menu {border-bottom:1px solid #484848; padding:20px;}
.f_menu ul {max-width:1200px; margin:0 auto;}
.f_menu ul li {display:inline-block; padding-right:15px;}
.f_menu ul li a {color:#eee; font-size:15px; }
.f_menu ul li a:hover {color:#fff;}

.f_text { max-width:1200px; margin:0 auto; padding:30px 20px;}
.f_text p{color:#757575; padding:5px 0; font-size:11px;}
.f_text p span {color:#eee; padding-right:15px; font-size:13px; }

.ftop {position:absolute; right:50px; bottom:50px;}

@media screen and (max-width:767px) {
.f_menu ul li a {color:#eee; font-size:12px; }
.f_text p span {padding:0; display:block; font-size:11px;}
.ftop { right:20px; bottom:20px;}
}




.customer {font-size:21px;  }
.customer b {color:#000; font-weight:600;  font-size: inherit;}
.customer strong {color:#E50D0D;  font-weight:600;  font-size: inherit;}

@media screen and (max-width:1000px) {
.customer {font-size:15px;  }
}


/****************4.¼­ºê»ó´Ü ÇÏÀ§¸Þ´º/ŸÀÌƲ/¼­ºêÄÁÅÙÃ÷ ·¹À̾ƿô*******************/
#container {width:100%;  width:100%;  }
 


#container h2 {width:100%; dispaly:block; text-align:center;   }
#container h2 span { font-size:16px; opacity:0.7; color:#000; display:block; letter-spacing:-0.07em; margin:10px 0; }


/* ¼­ºêÄÁÅÙÃ÷ ·¹À̾ƿô */
#container .sub_content{z-index:1000000000; margin:0 auto ; max-width:1120px; padding:30px 50px;    background:#fff;  box-shadow: 10px  10px 15px  #BBBABA;  }
#container .sub_content:after {display:block; clear:both; content:" ";}
#container .contArea {width:100%;  min-height:400px; }

#container .contArea h2 {font-size:35px; border-bottom:1px solid #eee; padding-bottom:20px; margin-bottom:30px; font-weight:400; text-align:center;}


 

#container .contArea img {max-width:100%;}
#container .contArea p,#container .contArea dd { word-wrap: break-word; word-break:keep-all;}



/*** ¼­ºê ÇÏÀ§¸Þ´º***/
.sub_menu {width:100%; height:100px; display:block; margin-bottom:30px;}
.sub_menu ul { text-align:center;  margin:0 auto; width:300px; }
.sub_menu ul:after  {content:"";display:block;clear:both;}
.sub_menu ul li {line-height:140%;float:left; display:inline-block;  border:1px solid #CACACA; margin:7px;   border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;}
.sub_menu ul li a {float:left; width:80px; height:55px; display:inline-block; font-size:13px; padding-top:25px; color:#000; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;}
.sub_menu ul li a:hover,.sub_menu ul a.on_box {   display:inline-block; color:#fff; font-weight:600; background:#F34841; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;}
 


 




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

#container {width:100%;  width:100%;}
 


#container h2 {width:100%; dispaly:block; text-align:center;   }
#container h2 span { font-size:16px; opacity:0.7; color:#000; display:block; letter-spacing:-0.07em; margin:10px 0; }


/* ¼­ºêÄÁÅÙÃ÷ ·¹À̾ƿô */
#container .sub_content{ padding:20px;  }
 
#container .contArea h2 {font-size:27px;  padding-bottom:10px; margin-bottom:20px;}

 
}








 
/* ŸÀÌƲ */
.con_style { margin:50px auto ; max-width:1100px;}
.con_title1{font-size:21px; color:#3B3B3B; line-height:120%; padding:27px 0 20px 24px; background:url(../../img/h_dot1.gif) no-repeat 0 30px ; }

@media screen and (max-width:767px) {
.con_style,{padding:10px;}
.con_style {padding:20px 10px;}
}


/* °øÅë ¸®½ºÆ®*/
ul.list_01 li {font-size:15px; padding-left:8px; background:url('../../img/dot_1.gif') 0 9px no-repeat;}
@media screen and (max-width:1000px) {
ul.list_01 li {font-size:11px; padding-left:6px; background:url('../../img/dot_1.gif') 0 7px no-repeat;}

}







.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}





.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn;}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-13%, 0, 0);
transform: translate3d(-13%, 0, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}


@keyframes slideInRight {
from {
-webkit-transform: translate3d(13%, 0, 0);
transform: translate3d(13%, 0, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}



@keyframes slideInBottom {
from {
-webkit-transform: translate3d(0, 13%, 0);
transform: translate3d(0, 13%, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}


@keyframes slideInTop {
from {
-webkit-transform: translate3d(0, -13%, 0);
transform: translate3d(0, -13%, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft;}
.slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight;}
.slideInBottom { -webkit-animation-name: slideInBottom; animation-name: slideInBottom;}
.slideInTop { -webkit-animation-name: slideInTop; animation-name: slideInTop;}