/* font */

/* 카페24 서라운드 */
@font-face {
    font-family: 'cafe24surround';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 나눔스퀘어 */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
/* 프리텐다드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* LATO */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
/* POPPINS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
/* MONTSERRAT */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/NotoSansKR-Light.woff2) format('woff2'),
         url(../fonts/NotoSansKR-Light.woff) format('woff'),
         url(../fonts/NotoSansKR-Light.otf) format('opentype');
  }
  @font-face {
       font-family: 'Noto Sans KR';
       font-style: normal;
       font-weight: 300;
       src: url(../fonts/NotoSansKR-DemiLight.woff2) format('woff2'),
            url(../fonts/NotoSansKR-DemiLight.woff) format('woff'),
            url(../fonts/NotoSansKR-DemiLight.otf) format('opentype');
     }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 400;
     src: url(../fonts/NotoSansKR-Regular.woff2) format('woff2'),
          url(../fonts/NotoSansKR-Regular.woff) format('woff'),
          url(../fonts/NotoSansKR-Regular.otf) format('opentype');
   }
  
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 500;
     src: url(../fonts/NotoSansKR-Medium.woff2) format('woff2'),
          url(../fonts/NotoSansKR-Medium.woff) format('woff'),
          url(../fonts/NotoSansKR-Medium.otf) format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 700;
     src: url(../fonts/NotoSansKR-Bold.woff2) format('woff2'),
          url(../fonts/NotoSansKR-Bold.woff) format('woff'),
          url(../fonts/NotoSansKR-Bold.otf) format('opentype');
   }

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,header,main,article,footer,i,section,article {margin:0;padding:0;box-sizing:border-box;}
fieldset,img {border:0 none}
img {max-width: 100%;}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle; outline: none!important;}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
/* 기본 폰트 설정 */
html,body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Noto Sans KR', 'Roboto','NanumSquare',"Malgun Gothic", "Apple Gothic", sans-serif;font-weight: 400;color:#333;letter-spacing: -.2px;} /* color값은 디자인가이드에 맞게사용 */
a {color:#333;text-decoration:none!important;}
a:active, a:hover, a:focus {text-decoration:none!important; color: #0d8240;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
hr {display: none;}
input[type=password] {font-family:'pretendard', 'Noto Sans KR', 'Roboto', 'Malgun Gothic';}

/* skipnavigation */
#u-skip a {position: absolute;left: -3000%;}
#u-skip a:focus {display: block;left: 0;top: 0;z-index: 10000000000;width: 100%;height: 30px;line-height: 30px;background: #0072bc;color: #fff;text-align: center;}

/* 이미지 스프라이트 */
.img_g {display: inline-block;overflow: hidden;background:url(../../images/comm/img-comm.png) no-repeat;vertical-align: top;} /* 이미지 */

/* global */
.ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.blind, caption, legend {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

.f_l {float:left}
.f_r {float:right}
.show {display:block}
.hide {display:none}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
select {width: 100%; padding: 5px; cursor: pointer;  border-color: #ddd;}
.formmail_cell_bgcolor td {border: none;}




@media (max-width: 1024px){
    body {font-size: 15px!important;}
}
@media (max-width: 768px){
    body {font-size: 14px!important;}
}


/* 모바일 */
@media (max-width: 575px){
    
    body {font-size: 13px!important;}
    /* reset */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,section,article {margin:0;padding:0;box-sizing:border-box}
    fieldset,img {border:0 none}
    dl,ul,ol,menu,li {list-style:none}
    blockquote, q {quotes:none}
    blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
    input,select,textarea,button {font-size:100%;vertical-align:middle;}
    button {border:0 none;background-color:transparent;cursor:pointer}
    table {border-collapse:collapse;border-spacing:0}
    body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
    input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
    input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
    button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
    input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
    body {background:#fff}
    /* 기본 폰트 설정 */
    body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
    a {color:#333;text-decoration:none}
    a:active, a:hover {text-decoration:none}
    address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
    address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
    hr {display: none;}
    input[type=password] {font-family: 'Malgun Gothic';}

    /* skipnavigation */
    #u-skip a {position: absolute;left: -3000%;}
    #u-skip a:focus {display: block;left: 0;top: 0;z-index: 10000000000;width: 100%;height: 30px;line-height: 30px;background: #0072bc;color: #fff;text-align: center;}

    /* 이미지 스프라이트 */
    .img_g {display: inline-block;overflow: hidden;background:url(../../images/comm/img-comm.png) no-repeat;vertical-align: top;} /* 이미지 */

    /* global */
    .ir_pm {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
    .ir_wa {display:block;overflow:hidden;position:relative;z-index:-10;width:100%;height:100%} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
    .blind, caption, legend {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */

    .f_l {float:left}
    .f_r {float:right}
    .show {display:block}
    .hide {display:none}
    .tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
    .clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
    .clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
    
}



/* 이전 파일 불러오기 */


.mmailform {position: fixed;    bottom: 20px;    right: 20px;
    z-index: 99999999999999;    width: 100%; 
    max-width: 300px;    margin: 0 auto;    text-align: center;}
.mmailarea{background: #0033aa;    padding:30px; border-radius: 10px;}

.mmailbtn{margin:0 auto 10px; text-align: right; width: 90%;}
.mmailbtn a{display: inline-block; margin-right: 5px;}
.mmailbtn a:last-child{margin-right: 0;}
.mmailbtn img{max-width: 50px;}

.mmailbtn a.topcsmailm{display: none;}

.mail_notice_divs{width:100%; margin:0 auto; padding: 80px 0; }
.mail_notice_divs .mmailform{padding:0; /*padding:30px;  background:#f1f1f1;*/}
.mail_notice_divs .mmailform textarea{background:#fff;}
.mail_notice_divs .mmailform iframe{display: inline-block; width: 100%; max-height: 420px;}

.mailformtb{font-size: 14px; width: 100%; margin:0 auto; font-family:'Roboto', 'Noto Sans KR', sans-serif !important; }
.mailformtb td{padding:5px 0 !important; color:#fff !important;}
.mailformtb td.formmail_title_bgcolor{width: 30%; background-color:transparent !important;text-align: left; line-height: 0 !important;}
.mailformtb td.formmail_cell_bgcolor{width:70%; text-align: left; line-height: 0 !important; padding:0 0 5px 0 !important; background: transparent;}
.mailformtb td input:not([type]), 
.mailformtb td input[type="email" i], 
.mailformtb td input[type="number" i], 
.mailformtb td input[type="password" i], 
.mailformtb td input[type="tel" i], 
.mailformtb td input[type="url" i], 
.mailformtb td input[type="text"],
.mailformtb td input[type="text" i]
{border:0 !important; background:#fff !important; padding:4px !important;line-height: 26px; width: 100%;}
.mailformtb .formmail_textarea_style{max-height: 60px !important; min-height: 60px; padding:10px !important;}
.mailformt br{display: none; }
.mailformtb .formmail_border{width: 100%;}

.mailformtb textarea{max-height: 50px; width: 100%;border:0 !important ; background:#fff; width: 100%; font-size: 11px;}
.mailformtb .formmail_title_bgcolor, 
.mailformtb .formmail_cell_bgcolor{border-bottom: 0 !important;}
.mailformtb table td{font-size: 11px !important; vertical-align: middle;}
.mailformtb table textarea{height: 80px; color:#999;min-height: 50px; font-size: 11px !important}



.smailformtb{font-size: 14px; width: 100%; margin:0 auto; font-family:'Roboto', 'Noto Sans KR', sans-serif !important; }
.smailformtb td{padding:5px 0 !important; color:#666 !important;}
.smailformtb td.formmail_title_bgcolor{width: 15%; background-color:transparent !important;text-align: left; line-height: 0 !important;  font-family: 'noto sans kr' !important;}
.smailformtb td.formmail_cell_bgcolor{width:85%; text-align: left; line-height: 0 !important; padding:0 0 5px 0 !important; background: transparent;}
.smailformtb td input:not([type]), 
.smailformtb td input[type="email" i], 
.smailformtb td input[type="number" i], 
.smailformtb td input[type="password" i], 
.smailformtb td input[type="tel" i], 
.smailformtb td input[type="url" i], 
.smailformtb td input[type="text"],
.smailformtb td input[type="text" i]
{border:0 !important; background:#f1f1f1 !important; padding:4px !important;line-height: 30px; max-width: 60%;}
.smailformtb .formmail_textarea_style{min-height: 150px;}
.smailformtb br{display: none; }
.smailformtb .formmail_border{width: 100%; line-height: 30px;}

.smailformtb textarea{max-height: 50px; width: 100%;border:0 !important ; background:#f1f1f1; width: 100%; font-size: 11px;}
.smailformtb .formmail_title_bgcolor, 
.smailformtb .formmail_cell_bgcolor{border-bottom: 0 !important;}
.smailformtb table td{font-size: 12px !important; vertical-align: middle;}
.smailformtb table textarea{height: 80px; color:#999;min-height: 80px;}








.subcontxt .mailformtb input[type='text']{width: 70% !important; border:0 !important; background:#f1f1f1 !important; padding:10px !important;}

.subcontxt .mailformtb textarea{max-height: 120px;}
.subcontxt .mailformtb td table{margin-top: 20px;}

.subcontxt .mailformtb td.formmail_cell_bgcolor{line-height: 30px;}
.subcontxt .mailformtb select{width: 100%; }


.mailform1{clear: both; width: 100%; margin-top: 10px;}
.mailform1 a{display: inline-block; background: #0d8240; line-height: 35px; color:#fff; padding:0 15px; margin-right: 5px; font-size: 13px;}
.mailform1 a:last-child{margin-right: 0;}
.mailform1 a:hover{color:#fff; background:#333;}


.mmnotice{width:95%; margin-left:5%;}
.mail_notice_divs h2{font-size: 1.8em !important; font-weight: 600;}
.mail_notice_divs h2 i{display: inline-block; padding-left: 5px; vertical-align: middle; font-size: 18px !important;}
.mail_notice_divs h2 a{   color: #3f86cf;text-transform: uppercase;   }
.mail_notice_divs h3{text-transform: uppercase;     font-size: 1.4em;
    display: block;    color: #333 !important;    margin: 0 auto 10px !important;
    padding: 0 0 10px;    font-weight: 600; border-bottom: 1px #ccc solid; }



.noticeoutput tr {border-bottom: 1px #eee solid; }
.noticeoutput tr td:nth-child(1){display:none;}
.noticeoutput tr td:nth-child(2){width:70%; text-align: left;}
.noticeoutput tr td:nth-child(3){width:30%; text-align: right; color: #999;}
.noticeoutput tr td{font-size: 14px !important; font-family: 'Roboto', 'Noto Sans KR', sans-serif !important; padding:10px 0 !important;}
.noticeoutput tr td a{font-family: 'Roboto', 'Noto Sans KR', sans-serif !important; font-size: 14px !important; }
.noticeoutput tr td a:hover{color:#333; text-decoration: none;}




@media (max-width: 768px){	
.mailformtb table td{display: inline-block; width: 100%;}
.mailformtb td{padding:0 !important;}
.mailformtb td.formmail_title_bgcolor{width: 30%; }
.mailformtb td.formmail_cell_bgcolor{width: 70%;line-height: 25px !important; }



.smailformtb td input:not([type]), 
.smailformtb td input[type="email" i], 
.smailformtb td input[type="number" i], 
.smailformtb td input[type="password" i], 
.smailformtb td input[type="tel" i], 
.smailformtb td input[type="url" i], 
.smailformtb td input[type="text"],
.smailformtb td input[type="text" i]{max-width: 80%;}
.smailformtb table td{display: inline-block; width: 100%;}
.smailformtb td{padding:0 !important;}
.smailformtb td.formmail_title_bgcolor{width: 30%;}
.smailformtb td.formmail_cell_bgcolor{width: 70%;line-height: 25px !important; }

.mmailarea{display: none;}
.mmailbtn a.topcsmailm{display: inline-block;}
.mmailbtn img{max-width: 40px;}

.mail_notice_divs .mmailform iframe{max-height: 250px;}


.subcontxt .mailformtb input[type='text']{width: 100% !important;}
.subcontxt .mailformtb select{margin-bottom: 10px;}

.mail_notice_divs .mmailform{padding:20px 10px;}

.mmailform{width: 90% !important; margin:0 auto;}

.subcontxt .mailformtb td.formmail_title_bgcolor{line-height: 30px;}



.mmnotice{margin:50px auto 0; width: 98%;}
.noticeoutput tr td:nth-child(2),
.noticeoutput tr td:nth-child(3){display: inline-block !important; text-align: left !important; width: 100% !important; padding:5px 0 !important;}

}