@charset "utf-8";
/* CSS Document */
html, body, div,  applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,time, mark, audio, video {
 margin: 0; padding: 0;color:#000; border: 0; font-size: 18px;
 font-family: 'arita','Pretendard', '맑은고딕','Malgun Gothic','돋움','Dotum','굴림','Gulim','Arial', Sans-serif;
box-sizing: border-box;font-weight: 300;letter-spacing: -1px;
word-wrap: break-word; word-break: keep-all;line-height:1.5;
}
@media screen and (max-width:1200px){
html, body, div,  applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,time, mark, audio, video {font-size:16px;}
}
@media screen and (max-width:560px){
html, body, div,  applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,time, mark, audio, video {font-size:14px;}
}

strong, b {font-weight:600;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
 display: block; font-family: 'arita','Pretendard', '맑은고딕','Malgun Gothic','돋움','Dotum','굴림','Gulim','Arial', Sans-serif;
}

ol, ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
table { border-collapse:collapse; border-spacing: 0;}
caption{position:absolute; left:-3000%;}
input{transition:all 0.3s;}

a {text-decoration:none; color:#000; transition: all 0.5s ease;cursor: pointer;}
a:hover {text-decoration:none; color:#000;}
button{transition:all 0.5s ease;border: none; cursor: pointer; }
address{ font-style: normal;}
br {opacity:0;}

input[type="checkbox"] {width:0px;height: 0px;opacity: 0;z-index: -999;position: absolute;}
input[type="checkbox"] + label {position: relative;}
input[type="checkbox"] + label:before {content: ""; width:15px;height:15px;border-radius: 2px;
    margin-right:5px;border:1px solid #222;display: inline-block;vertical-align: middle;}
input[type="checkbox"]:checked + label:after {
font-family: 'Material Icons';content: "done";display: block;position: absolute;left: 0px;
font-size: 15px;font-weight: bold;color: #fff;top: 0px; word-wrap:normal;}
input[type="checkbox"]:checked + label:before {background:#0e4574;border-color:#0e4574;}

/* common */
.text_l {text-align:left !important; }
.text_r  {text-align:right !important; }
.text_c {text-align:center !important; }
.fl{float: left;}
.fr{float: right;}
.oh{ overflow: hidden;}
.clearfix:after, .clearfix:before {content: ""; display: block; clear: both;}
.fw500 {font-weight: 500;}

.scroll_style::-webkit-scrollbar { -webkit-appearance: none; }
/* .scroll_style::-webkit-scrollbar:vertical { width:7px; }
.scroll_style::-webkit-scrollbar:horizontal { height:7px; } */
.scroll_style::-webkit-scrollbar-thumb { background-color:#999; border-radius:10px; }
.scroll_style::-webkit-scrollbar-track { border-radius:10px; background-color:#aaa;}

/* select */
select {
    padding: 5px 40px 5px 10px;
    font-family: inherit;
    background: #fff url('../img/ar_down.png') no-repeat;
    background-position: right 10px top 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ddd;
    cursor: pointer;
    color: #000;
    font-size: 1em;
    font-weight: 300;
    border-radius: 0;
    text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
select:hover, select:focus{ color: #000;}
select::-ms-expand {
    display: none;
}

select, button, input, input[type="text"], input[type="password"], input[type="submit"], input[type="number"], .ip_dft,
textarea, a.btn_dft
{height:45px;font-size:0.9em; box-sizing: border-box;
    border:1px solid #ddd;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     font-family: 'arita','Pretendard', '맑은고딕','Malgun Gothic','돋움','Dotum','굴림','Gulim','Arial', Sans-serif;
}
a.btn_dft {display:inline-block;line-height:48px;}
button.btn_dft {color:#fff;border:none;}


@media screen and (max-width:1200px){
select, button, input[type="text"], input[type="password"], input[type="submit"], input[type="number"], .ip_dft,
textarea, a.btn_dft  {font-size:0.9em;}
}

@media screen and (max-width:560px){
    select, button, input[type="text"], input[type="password"], input[type="submit"], input[type="number"], .ip_dft,
    textarea, a.btn_dft{height:40px;}
    select {background-size:auto 7px;}
    input[type="checkbox"]:checked + label:after {top:-10px}
}


.bg1 {background-color:#666;}
.bg2 {background-color:#26518B;}
.bg3 {background-color:#bd4019;}
.bg4 {background-color:#0571ae;}
.bg5 {background-color:#7ba918;}

.w100 {width:100%;}
.w50 {width:50%;}
.w30 {width:30%;}


/*margin*/
.mt0    {margin-top:0px !important ;}
.mt5    {margin-top:5px !important ;}
.mt10   {margin-top:10px !important ;}
.mt15   {margin-top:15px !important ;}
.mt20   {margin-top:20px !important ;}
.mt25   {margin-top:25px !important ;}
.mt30   {margin-top:30px !important ;}
.mt35   {margin-top:35px !important ;}

.mt40   {margin-top:40px !important ;}
.mt45   {margin-top:45px !important ;}
.mt50   {margin-top:50px !important ;}
.mt55   {margin-top:55px !important ;}
.mt60   {margin-top:60px !important ;}
.mt65   {margin-top:65px !important ;}
.mt70   {margin-top:70px !important ;}
.mt75   {margin-top:75px !important ;}
.mt80   {margin-top:80px !important ;}
.mt85   {margin-top:85px !important ;}
.mt90   {margin-top:90px !important ;}
.mt95   {margin-top:95px !important ;}
.mt100  {margin-top:100px !important ;}

.mb0    {margin-bottom:0px !important ;}
.mb5    {margin-bottom:5px !important ;}
.mb10   {margin-bottom:10px !important ;}
.mb15   {margin-bottom:15px !important ;}
.mb20   {margin-bottom:20px !important ;}
.mb25   {margin-bottom:25px !important ;}
.mb30   {margin-bottom:30px !important ;}
.mb35   {margin-bottom:35px !important ;}
.mb40   {margin-bottom:40px !important ;}
.mb45   {margin-bottom:45px !important ;}
.mb50   {margin-bottom:50px !important ;}
.mb55   {margin-bottom:55px !important ;}
.mb60   {margin-bottom:60px !important ;}
.mb65   {margin-bottom:65px !important ;}
.mb70   {margin-bottom:70px !important ;}
.mb75   {margin-bottom:75px !important ;}
.mb80   {margin-bottom:80px !important ;}
.mb85   {margin-bottom:85px !important ;}
.mb90   {margin-bottom:90px !important ;}
.mb95   {margin-bottom:95px !important ;}
.mb100  {margin-bottom:100px !important ;}

.ml0    {margin-left:0px !important ;}
.ml5    {margin-left:5px !important ;}
.ml10   {margin-left:10px !important ;}
.ml15   {margin-left:15px !important ;}
.ml20   {margin-left:20px !important ;}
.ml25   {margin-left:25px !important ;}
.ml30   {margin-left:30px !important ;}
.ml35   {margin-left:35px !important ;}
.ml40   {margin-left:40px !important ;}
.ml45   {margin-left:45px !important ;}
.ml50   {margin-left:50px !important ;}
.ml55   {margin-left:55px !important ;}
.ml60   {margin-left:60px !important ;}
.ml65   {margin-left:65px !important ;}
.ml70   {margin-left:70px !important ;}
.ml75   {margin-left:75px !important ;}
.ml80   {margin-left:80px !important ;}
.ml85   {margin-left:85px !important ;}
.ml90   {margin-left:90px !important ;}
.ml95   {margin-left:95px !important ;}
.ml100  {margin-left:100px !important ;}

.mr0    {margin-right:0px !important ;}
.mr5    {margin-right:5px !important ;}
.mr10   {margin-right:10px !important ;}
.mr15   {margin-right:15px !important ;}
.mr20   {margin-right:20px !important ;}
.mr25   {margin-right:25px !important ;}
.mr30   {margin-right:30px !important ;}
.mr35   {margin-right:35px !important ;}
.mr40   {margin-right:40px !important ;}
.mr45   {margin-right:45px !important ;}
.mr50   {margin-right:50px !important ;}
.mr55   {margin-right:55px !important ;}
.mr60   {margin-right:60px !important ;}
.mr65   {margin-right:65px !important ;}
.mr70   {margin-right:70px !important ;}
.mr75   {margin-right:75px !important ;}
.mr80   {margin-right:80px !important ;}
.mr85   {margin-right:85px !important ;}
.mr90   {margin-right:90px !important ;}
.mr95   {margin-right:95px !important ;}
.mr100  {margin-right:100px !important ;}


@media screen and (max-width:980px){
    .mb15 {margin-bottom:2% !important;}
    .mt30 {margin-top:3% !important;}
    .mt50 {margin-top:7% !important;}
}


.sound_only {display: inline-block !important;position: absolute;
    top: 0;left: 0;margin: 0 !important;padding: 0 !important;font-size: 0;
    line-height: 0;border: 0 !important;overflow: hidden !important;}

/*skipnavi*/
a.skipnavi{display:block;left:-2000px;position:absolute;text-align:center;width:100%;z-index:2000;}
a.skipnavi:hover{background-color:#000;color:#fff;left:0;margin-left:0px;padding:10px 0 10px 0;position:absolute;top:0px;z-index:2000;}
a.skipnavi:focus{background-color:#000;color:#fff;left:0;margin-left:0px;padding:10px 0 10px 0;position:absolute;top:0px;z-index:2000;}
a.skipnavi:active{background-color:#000;color:#fff;left:0;margin-left:0px;padding:10px 0 10px 0;padding-top:5px;position:absolute;top:0px;z-index:2000;}


/*공통*/
#content {position:relative;}
.inner {padding:0 2%;position:relative;}



/* 모바일 메뉴 */
.mobile_open #mobile_gnb {transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0); visibility: visible;}
#mobile_gnb {position:fixed;top:0px;right:0px;margin:0;padding-top:0px;overflow:hidden;overflow-y:auto;z-index:999;height:100%;width:800px;
display: flex;flex-direction: column;align-content: center;background:#000;box-shadow: -20px 0px 8px 19px rgba(0,0,0,0.2);
 justify-content: center; visibility: hidden;}
#mobile_gnb {transform:translateX(100%);-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
background: url(../img/all_mn_bg.jpg) no-repeat center;}
#mobile_gnb .gnb_head {text-align: center; margin: -7% 0 2%;}
#mobile_gnb .gnb_body {position:relative;}
#mobile_gnb .mgnb_list {display: flex;justify-content: center;align-items: flex-start;flex-direction: column;}
#mobile_gnb .mgnb_menu {width:100%;padding:0 5%;}
#mobile_gnb .mgnb_menu .mgnb_tit {display:flex;position:relative;font-size:1em;color:#fff;border-bottom:1px solid rgba(255,255,255,0.7);height: 50px;justify-content: flex-start;align-items: center;font-weight: 600;}
#mobile_gnb .mgnb_menu .mlnb {display:block;margin:7px 0 0;}
#mobile_gnb .mgnb_menu .mlnb ul li a {display:flex;color:#fff;font-size:0.9em;justify-content: flex-start;align-items: center;height: 35px;}
#mobile_gnb .mgnb_menu .mlnb ul li a:before {width:5px;height:5px;border-radius: 50%;background:rgba(255,255,255,0.8);display: inline-block;vertical-align: middle;content: "";margin:0 10px 0 15px;}
#mobile_gnb .mgnb_menu .mlnb ul li a:hover {text-decoration: underline;}
#mobile_gnb .mobile_close {font-size: 0;position: absolute;right:15px;top:15px; 
border:none;width:30px;height:30px;background:url(../img/close_ico_wt.png) no-repeat center;display:block;;background-color: transparent; }
 

#mobile_gnb .gnb_head .logo span {font-size:0;}
#mobile_gnb .gnb_head .logo {width:430px; height: 58px;background-image: url("../imgs/common/all_mn_logo.png");
background-repeat: no-repeat;background-position: center;font-size: 0;display: inline-block;vertical-align: middle;background-size: contain;}

#mobile_gnb .mgnb_menu .mgnb_tit:after {
    content: "";position: absolute;top:22px;right:0;width: 9px;height: 15px;display: none;
     background-size: auto;background-repeat: no-repeat;background-position: 0 0;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i6rKp66asX+uqqOuTnCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4Ig0KCSB5PSIwcHgiIHZpZXdCb3g9IjAgMCA4LjIzIDE1LjQ1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA4LjIzIDE1LjQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojOTk5OTk5O30NCjwvc3R5bGU+DQo8cGF0aCBpZD0iWE1MSURfMTU3XyIgY2xhc3M9InN0MCIgZD0iTTAuNSwxNS40NWMtMC4xMywwLTAuMjYtMC4wNS0wLjM1LTAuMTVjLTAuMi0wLjItMC4yLTAuNTEsMC0wLjcxbDYuODctNi44N0wwLjE1LDAuODUNCgljLTAuMi0wLjItMC4yLTAuNTEsMC0wLjcxYzAuMi0wLjIsMC41MS0wLjIsMC43MSwwbDcuMjMsNy4yM2MwLjIsMC4yLDAuMiwwLjUxLDAsMC43MUwwLjg1LDE1LjNDMC43NiwxNS40LDAuNjMsMTUuNDUsMC41LDE1LjQ1eiINCgkvPg0KPC9zdmc+DQo=);
    transition: all 0.3s ease;
}
#mobile_gnb .mgnb_menu.active .mgnb_tit:after {top:24px;transform:rotate(90deg);}


@media screen and (max-width:980px){
    #mobile_gnb {padding:11% 0 0;justify-content: flex-start;width:100%;}
    #mobile_gnb .mgnb_list {justify-content: center;align-items: flex-start;flex-wrap: wrap;}
    #mobile_gnb .mgnb_menu .mlnb {display: none;margin:7px 0 5%;}
    #mobile_gnb .mgnb_menu.active .mlnb {display: block;}
    #mobile_gnb .gnb_head {margin:0;}
    #mobile_gnb .mgnb_menu .mgnb_tit:after {display: block;}
    
    #mobile_gnb .mobile_close {background-size:100% auto;width:20px;height:20px;} 

}

@media screen and (max-width:560px){
	
}

/*언어위젯수정*/ 
.head .hd_right .lan_area {position: relative;width:105px;}   
.head .hd_right .lan_area span#btn_lang {background:url(../img/lan_ico.png) left center no-repeat;padding-left:25px;font-size:18px;
background-size:auto 100%;letter-spacing:0;cursor: pointer;}        
/* #google_translate_element {display:none !important;}     */
.lan_area .langList {position: absolute;width:auto;height: auto;padding:10px 0;border: 1px solid #000;background: #fff;left:5px;top:20px;right:5px;display: none}   
.main .head .hd_right .lan_area span#btn_lang  {background-image:url(../img/lan_ico_wt.png);} 
.langList li a {font-size:15px;display:block;padding:2px 15px;} 
.langList li:hover a {font-weight:bold;text-decoration:underline;}    
.head .hd_right .lan_area span#btn_lang:hover {text-decoration:underline;}   
   
@media screen and (max-width:560px){
	.head .hd_right .lan_area span#btn_lang {font-size:13px;padding-left:18px;} 
	.head .hd_right .lan_area {width:75px;} 
	.lan_area .langList {padding:5px 0;}
	.langList li a {padding:2px 10px;font-size:13px;}  
} 
   
   
   
/*애니매이션*/
@keyframes down {
  from { transform: translateY(-50px); opacity: 0 }
  to { transform: translateY(0);opacity: 1; }
}
@keyframes up {
  from { transform: translateY(50px); opacity: 0 }
  to { transform: translateY(0);opacity: 1; }
}
@keyframes left {
  from { transform: translateX(-50px); opacity: 0 }
  to { transform: translateX(0);opacity: 1; }
}
@keyframes right {
  from { transform: translateX(50px); opacity: 0 }
  to { transform: translateX(0);opacity: 1; }
}
@keyframes fade {
  from { opacity: 0}
  to { opacity: 1}
}
@keyframes line {
  from {width:0;}
  to { }
}
@keyframes line_left {
  from {width:0;left:100%;} 
  to { }
}
@keyframes ht {
  from {bottom:auto;height:0;opacity: 0;}
  to { bottom:0;height:100%;}
}
@keyframes circle {
  from {border-radius: 0;}
  to { }
}
@keyframes shd_none {
  from {box-shadow:none; }
  to { }
}
