@charset 'utf-8';

/* =====================================CSS RESET================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;}body {line-height:1;width: 100%;height: 100%;font-family: 'noto_l';-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}ul li {list-style: none;}ol li {list-style: none;}a {margin: 0;padding: 0;border: 0;vertical-align: baseline;background: transparent;text-decoration: none;color: inherit;display: inline-block;}img {vertical-align: middle;}table {border-collapse: collapse;}* {box-sizing: border-box;}

/* ===========================GRID SYSTEM========================= */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.center {
    width: 1200px;
    margin: 0 auto;
}
[class*="col-"] {
    width: 100%;
    float: left;  
    box-sizing: border-box;
    padding: 0px 0px;
}
@media (min-width:1024px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 12%;}
    .col-3 {width: 24%;}
    .col-4 {width: 31.33%;}
    .col-5 {width: 40%;}
    .col-6 {width: 48%;}
    .col-7 {width: 60%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 88%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 50%;}
    .col-13 {width: 20%;}
    .col-14 {width: 100%;}
    .col-15 {width:  30.6666666667%;}
    .col-aboutimg{width: 30%}
    .col-about_text{width: 70%}

}
.col-fit {padding: 0;}.col-right {float: right;}* {margin: 0;padding: 0;}
html,body {width: 100%;height: 100%;overflow-y: hidden;overflow-x: hidden}ul,ol,li {list-style: none;}a {text-decoration: none;color: #000000;}body {height: 100%;}
::-webkit-scrollbar {
  width: 5px;  /* 세로축 스크롤바 길이 */
  height: 20px;  /* 가로축 스크롤바 길이 */
}
::-webkit-scrollbar-track {
  background-color: #eaeaea;
}
::-webkit-scrollbar-track-piece {
  background-color: #ebebeb;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #919191;
}

/* ===========================GRID SYSTEM END===================== */

/*navigation START================================================*/

.navi_wrap{width: 100%;height: 100%;position: relative}
.overlay {height: 100%;width: 100%;position: fixed;z-index: 150;top: 0;left: -100%;background-color:rgba(0, 0, 0, 1);overflow-x: hidden;transition: 0.8s;color:#fff;font-family: 'mont_b'; }
.overlay p{font-family: 'mont_l'!important;font-size: 16px;color:#fff;padding: 20px 0;line-height: 28px;opacity: 0.8}
.overlay-content {position: relative;top: 15%;width: 98%;padding:  0  0  0 10% ;}
.overlay a {padding: 8px 0;text-decoration: none;font-size: 56px;color: #ffffff;display: block;transition: 0.3s;}
.overlay a>img{width: 100%}
.overlay a:hover, .overlay a:focus {color: #404044;}
.overlay .closebtn {position: absolute;top: 50%;display: block;padding-left: 25px;z-index: 150}
.overlay .logo.navi{position: absolute;left: 42px!important}
.telfax {font-size: 20px!important;line-height: 30px!important;margin-top: 20px}


@media (max-width:800px) {
    .overlay a {font-size: 30px!important}
    .overlay a.closebtn{width: 40px;top: 15px!important;right:20px!important;width:50px}
    .overlay {}
    .navi_wrap .logo img {left: 0px}
    .overlay p{font-size: 12px;line-height: 16px}
    .overlay-content {position: relative;top: 15%;width: 100%;padding: 7%;padding-top: 30px;}
}

@media (max-width:330px) {
    .overlay a {font-size: 30px!important}
    .overlay a.closebtn{width: 40px;top: 15px!important;right:0px!important;}
    .overlay {}
    .navi_wrap .logo img {left: 0px}
     .overlay p{font-size: 12px;line-height: 16px}
    .overlay-content {position: relative;top: 9%;width: 100%;padding: 7%;}
	.overlay .closebtn {position: absolute;top: 50%;display: block;padding-left: 25px;z-index: 150;margin-right: 20px}
}

/*navigation END==================================================*/

/*font css START*/

 @font-face {font-family: 'noto_t';font-style: normal;font-weight: 100;src: url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}



@font-face {font-family: 'noto_l';font-style: normal;font-weight: 300;src: url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}



@font-face {font-family: 'noto_r';font-style: normal;font-weight: 400;src: url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}



@font-face {font-family: 'noto_m';font-style: normal;font-weight: 500;src: url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}



@font-face {font-family: 'noto_b';font-style: normal;font-weight: 700;src: url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(http://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {
    font-family: 'mont_b';
    font-style: normal;
    font-weight: 600;
    src: url('font/Montserrat-Bold.ttf');
}

@font-face {
    font-family: 'mont_l';
    font-style: normal;
    font-weight: 100;
    src: url('font/Montserrat-Light.ttf');
}

@font-face {
    font-family: 'mont_m';
    font-style: normal;
    font-weight: 400;
   src: url('font/Montserrat-Medium.ttf');
}


/*
@font-face {font-family: 'noto_b';font-style: normal;font-weight: 700;src: url('font/NotoSansCJKkr-Bold.otf');}@font-face {font-family: 'noto_l';font-style: normal;font-weight: 300;src: url('font/NotoSansCJKkr-Light.otf');}@font-face {font-family: 'noto_r';font-style: normal;font-weight: 500;src: url('font/NotoSansCJKkr-Regular.otf');}@font-face {font-family: 'noto_t';font-style: normal;font-weight: 100;src: url('font/NotoSansCJKkr-Thin.otf');}@font-face {font-family: 'spoqa_b';font-style: normal;font-weight: 700;src: url('font/Spoqa Han Sans Bold.ttf');}*/
/*font css END*/



/*basic layout start */
#wrap{width: 100%;height: 100%;}
.left_section{height: 100%;float:left;position: fixed;z-index: 30;transition: width 1s}
.header{height: 100%;background-color: #fff;float: left}
.left_container{height: 100%;float: left;background:#fff}
.container{height: 100%;float:left;background-color: #fff;overflow-y: scroll;position: fixed;right: 0;top:0;max-width: 2000px;}
.left_container.col-10{display:block}
.header.col-2{position:relative}
.logo img {
    width: 92px;
    left: 44.234px/*2.3039vw*/;
    position: absolute;
    top: 25px
}
.logo.navi img {
    left: 0vw;
}
.nav_wrap{width:32px;position:absolute;height:101px;left:48%;transform: translateX(-40%);top:45%;padding: 20px;box-sizing: border-box;background: url(../images/0_common/btn_menu.png)no-repeat 50%;background-size: contain;opacity: 1}
.nav_wrap:hover{opacity: 0.5}
.leftcontents{width:90%;margin: auto;padding-left: 70px;margin-top: 180px}
.leftcontents h3{font-size: 22px;font-family: 'mont_b';line-height: 28px;margin-bottom: 12px;letter-spacing: -0.3px}
.leftcontents h1{font-size: 24px;font-family: 'noto_t';font-weight: 100;;margin-bottom: 100px;line-height: 28px}
.leftcontents h5{font-size: 24px;font-family: 'noto_t';font-weight:200;line-height: 32px;margin-top: 0px}
.main_wrap{width: 100%;margin: auto;padding-right: 10%;}
#content{padding-top: 170px; }
.small_title{font-family: 'noto_b';font-size: 49px;font-weight: bold;letter-spacing: -0.5px;margin-top: 25px}
.title{font-family: 'mont_b';font-size: 56px;line-height: 60px;margin-top: 80px;letter-spacing: -0.5px;margin-left:3%;font-weight: 600}
.main_vrar{width: 100%;height:417px;;;position: relative}
.colorbox{background:	
linear-gradient( to right, #C1D6DC,#8FB8C4 );width: 100%;height: 315px;display: block;position: absolute;bottom: 0;transition: all 1s}

/*footer start*/

#footer{margin-top: 100px;position: relative;padding-bottom: 20px;width :100%;}
#footer .line{width: 100%;margin-bottom: 25px;background-color: #8A979F;height: 1px;}
#footer .footwrap{max-width: 670px;width: 100%;width: 90%;margin-left:23px}
#footer ul>li>p:nth-child(1){font-family: 'mont_b';font-size:16px;line-height: 32px }
#footer ul>li>p:nth-child(2){font-family: 'noto_l';font-size: 13px;line-height: 20px}
#footer ul>li>p:nth-child(3){font-family: 'noto_l';font-size: 13px;line-height: 20px;margin-top: 10px}
#footer ul>li:nth-child(1)>p:nth-child(1){font-size:24px }
#footer ul>li:nth-child(1)>p:nth-child(2){line-height: 15px;margin-top: 6px}
#footer ul>li:nth-child(2){margin-right: 5%}
#footer .twit>img{height: 24px;width:25px;}
#footer .faceb>img{height: 22px;width:25px;}
#footer .youtube>img{height: 22px;width:25px;}
.introduction_down{width:190px;text-align: center; font-size: 16px;font-family: 'noto_l';padding: 7px 0px;border:1px solid #151515;margin-top: 32px;margin-bottom: 35px;color:#151515;background: #fff;}
.introduction_down:hover{background: #eee;}
.footer_link_wrap{position: absolute;top:30px;right:3px}
/*.footwrap ul li b{color:#4f4faa;font-weight: 600;font-family: 'noto_b';}*/
/*210201 Visit us 수정함*/

.news_wrap .clearfix .col-12 .date {
  font-size: 15px;
  font-weight: 400;
  color:#8A979F;
  padding-top: 2%;
}

/*footer end*/

@media (max-width:1267px) {
    .content1-3 .col-6{width: 80%}
.download {
    width: 208px;
    height: 208px;background-position: center}
	  .brwrap{display: none}
}
input ,textarea {-webkit-appearance: none;-webkit-border-radius: 0;}
@media (max-width:1024px) {
    body{overflow-y: auto}
    #wrap{width: 100%;height: auto}
    .left_section.col-5{height: 80px;position:fixed;width: 100%!important}
    .left_container.col-10{display: none}
    .container.col-7{margin-top: 0px;position:static!important;height: auto;overflow-y: visible}
    .container{position:static }
     #content {padding-top: 120px;}
     .title {font-size: 38px;line-height: 50px;margin-top: 30px;}
    .header.col-2{position:relative}
    .logo img{width: 68px;left:37px;position:absolute;top: 25px}
    .logo.navi img {
        left: -5px;/*로고 x값 보정*/
    }
    .nav_wrap {
        width: 70px;position:absolute;height:50px;left:90.8%;top:17px;padding: 20px;background: url(../images/0_common/btn_mobile_menuOpen.png)no-repeat 50%;background-size: contain;opacity: 1
    }
    .nav_{width: 30px;height: 2px;background-color:#888;float:none;}
    .nav_:nth-child(1){margin-bottom: 4px;}
    .container{width: 100%;margin-left: 0%;margin-right: 0%}
    .main_wrap{width: 100%;margin: auto;padding-right: 0%;}
    .download{display: none}
    .sub.title{font-size: 32px;}
    .content1-3{margin-left: 0%}
    .btns .btn{width: 100%;height:176px}   
    .btn.media{width:45%;height: 200px;margin-left: 0%;background-size:100%;background-position: left;margin-bottom: 20px}
    .btn.enter{width:55%;margin-left: 45%;background-size: cover;background-position: left}
    .btn.medi{height: 243px;float:left;background-color:#E7EAEF;}
    .btn.acroContent{background: url(../images/1_home/mobile/mobile_img_6.png)no-repeat 50%;background-size:cover;height: 242px}
   .pic{width: 100%;height:296px;background: url(../images/1_home/mobile/mobile_img_7.png)no-repeat 50%;background-position: top left;background-size: cover}
    #footer ul>li.col-4.half{width: 49%}
    #footer ul>li:nth-child(3){width: 40%!important}
    #footer ul>li.col-4.half>p:nth-child(2){font-size: 10px;line-height: 15px}
		#footer ul>li.col-4.half>p:nth-child(3) {font-size: 10px;line-height: 15px;}
    #footer ul>li:nth-child(1){margin-bottom: 30px;}
    #footer ul>li:nth-child(2){margin-right: 10%}
    #footer ul>li.right{padding-left: 7%}
    #footer .twit>img{height: 30px;width:30px;}
    #footer .faceb>img{height: 29px;width:29px;}
    #footer .youtube>img{height: 30px;width:30px;}
 
}
/*200701 인증서 추가*/
.mark__{ width: 255px;height: 55px;background: url(../images/0_common/img_iafkab.png)no-repeat; 50%;background-size:contain;position: absolute;right: 0px;bottom: 40px;}
.brwrap{display:block}



@media (max-width:514px) {
    .nav_wrap{left:90%}
    .menus_wrap{width: 100%;background-color:#fff;margin-top: 0px;position: relative}
    .main_vrar{width: 100%;height:317px;!important;position: relative}
     .colorbox {height: 215px;}
     .btn_imgs {height: 317px;background: url(../images/1_home/web/web_img_1.png)no-repeat 65%;background-size: cover;}
    .newstext{width: 90%}
     .nav_wrap{left:88%}
    .title{font-size: 38px;line-height: 50px}
     .sub.title{font-size: 27px;line-height: 32px}
    .text{left:20px}
    .btn.video .btn_imgs {left:20px}
    .video .btn_subtitle {left:20px;}
    .video{width: 60%}
     .footer_link_wrap{position: absolute;right: 50px}
    .telfax {font-size: 14px!important;line-height: 30px!important;margin-top: 20px}
 	 #footer .footwrap {max-width: 670px;width: 100%;width: 90%;margin-left: 23px;margin-bottom: 70px;}
	.mark__{left: 25px;}
	
}
@media (max-width:375px){
     .footer_link_wrap{position: absolute;right: 33px}
}
@media (max-width:320px) {
    .content1-3 .col-6{width: 100%}
    .nav_wrap{left:88%}
    .title{font-size: 38px;line-height: 50px}
    .sub.title{font-size: 27px;line-height: 32px}
    .btn.medi{height: 243px;float:left;background: url(../images/1_home/mobile_se/se_mobile_img_3.png)no-repeat left;background-size: cover}
     .btn_imgs {height: 217px;bottom:0}
    .colorbox {height: 175px;}
    .main_vrar{height:257px;!important;}
    .text{left:15px}
    .btn.video .btn_imgs {left:15px}
    .video .btn_subtitle {left: 15px;}
    .video{width: 65%}
     .footer_link_wrap{position: absolute;right: 10px}
        #footer ul>li:nth-child(2){margin-right: 4%}
}