@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('/css/font-awesome.css');
/*
html,body {font-family:'Nanum Gothic', '나눔고딕', sans-serif}
.barun {font-family:'Nanum Barun Gothic', '나눔바른고딕'}
*/
html,body {font-family: 'Roboto', sans-serif;font-size:14px}
.gotham {font-family:'Gotham'}

@media (max-width:786px) {
    html,body {font-size:13px}
}

/* bootstrap 5 column */
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

.row.no-gutters [class^="col-"],
.row.no-gutters [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 768px) {
  /*
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
  */

}

/* row2 는 모바일에서 양측 padding 부여 */
@media (max-width:768px) {
	.row2 {padding:0 15px;}
}

@media (min-width:1200px) {
    .container {width:1200px}
}

img.w100 {width:100%}
input.w100 {width:100% !important}
input.w95,textarea.w95 {width:95% !important}
.board_button {margin-top:25px;margin-bottom:25px}

.header_skip { z-index: 1000; display: block; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; position: absolute; text-align: center; font-size: 16px; color: #fff; background: #666 }
.header_skip:focus { font-weight: bold; color: #ff0000; text-decoration: none; width: 100%; max-width: 100%; min-width: 100%; line-height: 2em; height: 35px }

/* 상단 메뉴 */
header {position:static;left:0;right:0;top:0;z-index:999;border-bottom:1px solid #ccc;background:#fff}
/* 메인에서만 상단 header fix 시킴 */
.header-clone {display:none}
#logo {display:block;margin:0 auto;text-align:center;margin-top: 17px;}
#logo .fa {display:block}
.navbar-toggle {display:block !important;top:20px;margin:0;height:auto;background:#fff !important}
.navbar-toggle1 {position:absolute;left:5%;padding:0 5px;z-index:10}
.navbar-toggle1 button {background:#fff !important;border:0;margin:0;padding:0;height:auto}
.navbar-toggle1 img {display:block}
.navbar-toggle2 {position:absolute;right:5%}

.navbar-default {background:#fff;border:0}
.navbar-default .navbar-nav li {float:none}

#bs-example-navbar-collapse-1 {padding:0}
.navbar-collapse.collapse {display:none !important}
.collapse.in {display:block !important;z-index:999}

/* 메뉴 */
#bs-example-navbar-collapse-2 {
	position:fixed;
	overflow:hidden !important;
	overflow-y:scroll !important;
	top:0;
	background:#34afad;
	width:70%;
	left:-70%;
	margin:0;
	padding:0;
	height: 100% !important;
	display: block !important;
	z-index:999;
	color:#fff;
}
#bs-example-navbar-collapse-2 a {color:#fff;background:none !important}
#bs-example-navbar-collapse-2.in {
	left:0;
}
#bs-example-navbar-collapse-2.collapsing {
  position: fixed;
  left:0%;
  -webkit-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
}
#bs-example-navbar-collapse-2.collapsing.opened {
  left:-70%;
}
#bs-example-navbar-collapse-2 {}
#bs-example-navbar-collapse-2 .ico {padding:0 20px}
#bs-example-navbar-collapse-2 .ico a {font-size:2.8em}

.navbar-nav {float:none;margin:0}
.navbar-nav .dropdown-menu {
	position: static;
	background: none;
	float:none;
}

#headermenu li {position:relative}
#headermenu li a {display:block;position:relative;padding:15px 15px 15px 15px;font-size:1.1em}
#headermenu li a.dropdown-toggle {position:absolute;right:0;top:0}
#headermenu li a .fa-square {font-size:6px}
#headermenu li a .fa-angle-down,
#headermenu li a .fa-angle-up {border:1px solid #008886;padding:3px 5px}
#headermenu li li a {color:#caf7f6;font-size:1.1em}
#headermenu li ul {box-shadow:none;border:0}
#headermenu li a {border-bottom:1px solid #008886}
#headermenu li:first-child a {border-top:1px solid #008886}
#headermenu li li a,
#headermenu li li:first-child a,
#headermenu li:first-child li a {border:0;border-bottom:1px solid #008886;padding-left:0}
#headermenu li ul {margin-left:30px}
#headermenu li ul ul {margin:0}
#headermenu li ul ul li a {padding-left:20px !important}

/* 서브 메뉴 활성화에 따른 아이콘 표시 */
li.dropdown .fa-angle-up {display:none}
li.dropdown>a>.fa-angle-up {display:none}
li.dropdown>a>.fa-angle-down {display:inline}
li.open>a>.fa-angle-up {display:inline}
li.open>a>.fa-angle-down {display:none}

.navbar-toggle2 {padding-right:2px}
.navbar-toggle .icon-bar {transition: all 0.2s;}
.navbar-toggle .top-bar {
    transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
    transform-origin: 10% 10%;
	-ms-transform-origin: 10% 10%;
	-webkit-transform-origin: 10% 10%;
	-o-transform-origin: 10% 10%;
	-moz-transform-origin: 10% 10%;
 }
.navbar-toggle .middle-bar {opacity: 0;}
.navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
    transform-origin: 10% 90%;
	-ms-transform-origin: 10% 90%;
	-webkit-transform-origin: 10% 90%;
	-o-transform-origin: 10% 90%;
	-moz-transform-origin: 10% 90%;
}

.navbar-toggle2.collapsed {padding:9px 10px}
.navbar-toggle.collapsed .top-bar {
    transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
}
.navbar-toggle.collapsed .middle-bar {
    opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
}

@media (max-width:968px) {
    #logo img {width:40%}
    .navbar-toggle {top:10px}
    .navbar-toggle1 img {width:30px}
    .navbar-toggle .icon-bar {height:2px;margin:3px 0;width:22px}
}
@media (min-width:968px) {
    .navbar-toggle .icon-bar {height:3px;margin:8px 0;width:40px}
	#bs-example-navbar-collapse-2 {
		width:25%;
		left:-25%;
	}
    #bs-example-navbar-collapse-2.collapsing.opened {
        left:-25%;
    }
}


.rotate-img img {
    -webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-o-transition:all .3s ease;
    -ms-transition: rotate(360deg); 
    transition:all .3s ease;
}

.rotate-img:hover img, .rotate-img:focus img {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg);     
    transform: rotate(360deg);
}


.transition-3 {
	-moz-transition:    .3s ease-in-out;
	-o-transition:      .3s ease-in-out;
	-webkit-transition: .3s ease-in-out;
	-ms-transition:		.3s ease-in-out;
	transition:         .3s ease-in-out;
}

.mt-20 {margin-top:20px}
.mb-20 {margin-bottom:20px}
.mt-40 {margin-top:40px}
.mb-40 {margin-bottom:40px}
.mt-50 {margin-top:50px}
.mb-50 {margin-bottom:50px}

.pt-40 {padding-top:40px}
.p0 {padding:0}


/*
.subtitleA {background:#34afad;color:#fff;font-size:1.4em;text-align:center;padding:30px 0;display:none}
.subtitleB {background:#eee;;color:#5d5d5d;font-size:1.2em;text-align:center;padding:10px 0;display:none}
.subtitleC {color:#34afad;font-size:2em;text-align:center;padding:15px 0;}
.subtitleD {background:#b4b4b4;color:#fff;font-size:2em;text-align:center;padding:10px 0;display:none}

@media (min-width:768px) {
    .subtitleA {background:#34afad;color:#fff;font-size:1.5em;text-align:center;padding:40px 0}
    .subtitleB {background:#eee;;color:#5d5d5d;font-size:1.3em;text-align:center;padding:10px 0}
    .subtitleC {color:#34afad;font-size:2.4em;text-align:center;padding:35px 0;}
    .subtitleD {background:#b4b4b4;color:#fff;font-size:2.4em;text-align:center;padding:30px 0;}
}
*/
.subtitle {background:#34afad;color:#fff;font-size:1.2em;text-align:center;padding:25px 0}
@media (min-width:768px) {
    .subtitle {font-size:2.2em}
}

/* 좌측 메뉴 국기 */
.navbar .flags {list-style:none;margin:10px 0 0 10px;padding:0}
.navbar .flags li {float:left;margin-right:10px}

/* 서브 상단 메뉴 */
#submenu {position:fixed;top:0;width:100%;text-align:center;background:#34afad;font-size:1.1em;text-align:center;padding:20px 0;display:none;z-index:10;color:#B7F3F3}
#submenu a {color:#B7F3F3;display:inline-block;padding:0 5px}
#submenu a.on {color:#fff}
.submenu {display:none;margin-top:10px}
.submenu li {list-style:none}
.submenu.on {display:block}
@media (max-width:786px) {
    #submenu {font-size:1em;}
}

@media (max-width:786px) {
	.dropdown-menu>li>a {white-space:normal}
	#headermenu li a.dropdown-toggle {border:0}
}

footer {
    background:#242a36;
    color:#c2c2c2;
    padding-bottom:50px
}
#footer-sitemap .gotham {color:#fff;font-size:1.3em;font-weight:bold}
#footer-sitemap h4 {font-size:1.2em}
#footer-sitemap ul {list-style:none;margin:0;padding:0}
#footer-sitemap li {float:left;width:30%}
#footer-sitemap li ul li {float:none;width:100% !important;margin-bottom:10px}
#footer-sitemap a {color:#c2c2c2;display:block}
#footer-sitemap a:hover, #footer-sitemap a:focus {color:#fff}
#footer-cooperation {background:url('/img/footer-cooperation-m.png') center center;height:150px;background-size:100% 100%;border-top:1px solid #c8c8c8;display:none}

#footer-cooperation-new {background:#efefef;padding-bottom:30px;border-top:1px solid #c8c8c8}
#footer-cooperation-new .inner {padding:30px 15px 0 15px}
#footer-cooperation-new .inner h5 {color:#2ea2ae;font-size:1.3em}
#footer-cooperation-new .inner img {max-width:100%}
#footer-cooperation-new .inner2 {position:relative}
#footer-cooperation-new .inner2 a {position:absolute}
#footer-cooperation-new .inner2-1 a {width:13%;height:100%;top:0}
#footer-cooperation-new .inner2-1 a:nth-of-type(1) {left:0}
#footer-cooperation-new .inner2-1 a:nth-of-type(2) {left:13%}
#footer-cooperation-new .inner2-1 a:nth-of-type(3) {left:26%}
#footer-cooperation-new .inner2-1 a:nth-of-type(4) {left:39%}
#footer-cooperation-new .inner2-1 a:nth-of-type(5) {left:52%}
#footer-cooperation-new .inner2-1 a:nth-of-type(6) {left:65%;width: 20%;}
/* #footer-cooperation-new .inner2-1 a:nth-of-type(7) {left:85.2%} */

#footer-cooperation-new .inner2-2 a {height:100%;top:0}
#footer-cooperation-new .inner2-2 a:nth-of-type(1) {width:10%;left:0}
#footer-cooperation-new .inner2-2 a:nth-of-type(2) {width:13%;left:10%}
#footer-cooperation-new .inner2-2 a:nth-of-type(3) {width:13%;left:33%}
#footer-cooperation-new .inner2-2 a:nth-of-type(4) {width:20%;left:46%}

#footer-cooperation-new .inner2-3 a {width:14%;height:100%;top:0}
#footer-cooperation-new .inner2-3 a:nth-of-type(1) {left:0}
#footer-cooperation-new .inner2-3 a:nth-of-type(2) {left:14%}
#footer-cooperation-new .inner2-3 a:nth-of-type(3) {left:28%}
#footer-cooperation-new .inner2-3 a:nth-of-type(4) {left:42%}
#footer-cooperation-new .inner2-3 a:nth-of-type(5) {left:56%}
#footer-cooperation-new .inner2-3 a:nth-of-type(6) {left:70%}
#footer-cooperation-new .inner2-3 a:nth-of-type(7) {left:84%}

@media (max-width:768px) {
	#footer-cooperation-new .inner2-1 a {width:25%}
	#footer-cooperation-new .inner2-1 a:nth-of-type(1) {}
	#footer-cooperation-new .inner2-1 a:nth-of-type(2) {left:25%}
	#footer-cooperation-new .inner2-1 a:nth-of-type(3) {left:50%}
	#footer-cooperation-new .inner2-1 a:nth-of-type(4) {left:75%}
	#footer-cooperation-new .inner2-1 a:nth-of-type(5) {left:0%;top:50%}
	#footer-cooperation-new .inner2-1 a:nth-of-type(6) {left:25%;top:50%}
	#footer-cooperation-new .inner2-1 a:nth-of-type(7) {left:50%;top:50%;width:40%}

	#footer-cooperation-new .inner2-2 a {height:100%}
	#footer-cooperation-new .inner2-2 a:nth-of-type(1) {left:0%;width:10%}
	#footer-cooperation-new .inner2-2 a:nth-of-type(2) {left:10%;width:25%}
	#footer-cooperation-new .inner2-2 a:nth-of-type(3) {left:35%;width:15%}
	#footer-cooperation-new .inner2-2 a:nth-of-type(4) {left:50%;width:15%}

    #footer-cooperation-new .inner2-3 a {width:18%;height:100%}
	#footer-cooperation-new .inner2-3 a:nth-of-type(1) {}
	#footer-cooperation-new .inner2-3 a:nth-of-type(2) {left:18%}
	#footer-cooperation-new .inner2-3 a:nth-of-type(3) {left:36%}
	#footer-cooperation-new .inner2-3 a:nth-of-type(4) {left:56%;width: 10%;}
	#footer-cooperation-new .inner2-3 a:nth-of-type(5) {left:67%}
	#footer-cooperation-new .inner2-3 a:nth-of-type(6) {left:86%;width:10%}
}

#footer-sns {margin-top:20px;text-align:center}
#footer-sns a {display:inline}
#footer-sns a img {
    width:40px;
    -webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	-o-transition:all .3s ease;
    -ms-transition: rotate(360deg); 
    transition:all .3s ease;
}
#footer-sns a:hover img, #footer-sns a:focus img {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
    -o-transform: rotate(360deg);     
    transform: rotate(360deg);
}

#footer-copyright .row {
    margin-top:35px;
    border-top:1px solid #525252;
    padding-top:20px
}
#footer-copyright ul {list-style:none;margin:0;padding:0;width:100%}
#footer-copyright ul li {margin:0;padding:0}

@media (max-width:768px) {
    #footer-sitemap li {width:31%;margin-right:3%}
    #footer-sitemap li:nth-child(3) {margin-right:0}
    #footer-sitemap li:nth-child(4) {clear:both}
    #footer-copyright .row {margin:35px 15px 0 15px}
    #footer-copyright ul:after {display:block;content:'';clear:both}
    #footer-copyright li {float:left;width:20%}
    #footer-copyright li:nth-child(2) {width:35%}
    #footer-copyright .footer-copyright1 {text-align:center;margin-top:10px}

    #footer-copyright .footer-copyright2 li {float:left;width:50%}
    #footer-copyright .footer-copyright2 li a {color:#c2c2c2;display:block;text-align:center}
}
@media (min-width:768px) {
	#footer-cooperation {background:url('/img/footer-cooperation.png') center;height:179px}
    #footer-sitemap li {width:20%}
    #footer-sitemap li:nth-child(1) {width:13%}
    #footer-sitemap li:nth-child(3) {width:22%}

    #footer-sns {text-align:left}
    #footer-sns img {width:30px}
    
    #footer-copyright .footer-copyright1 {float:left}
    #footer-copyright .footer-copyright2 {float:right}
    #footer-copyright .footer-copyright2 li {float:left;margin-right:20px}
    #footer-copyright .footer-copyright2 li a {color:#c2c2c2}
}



.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}


.cgray {color:#5d5d5d}
.cgreen {color:#34afad}
.cwhite {color:#fff}

.common-inner {line-height:1.8em}
.common-inner h4 {font-size:1.6em;margin:0 0 20px;line-height:1.4em}
.common-inner h5 {font-size:1.3em;line-height:1.4em}
.common-inner h6 {font-size:1.2em;line-height:1.4em}
.common-inner h4 small {display:block;font-size:14px;margin-bottom:15px;letter-spacing:0}
@media (min-width:768px) {
    .common-inner {font-size:1.2em; letter-spacing:-0.6px}
    .common-inner h4 {font-size:2.3em;margin:0 0 40px; letter-spacing:-1px; line-height:46px}
    .common-inner h5 {font-size:2em;margin:0 0 20px}
    .common-inner h6 {font-size:1.5em;margin:0 0 20px; letter-spacing:-1px}
    .common-inner h4 small {display:block;font-size:18px;margin-bottom:20px;letter-spacing:0}
}
@media (max-width:768px) {
    .common-inner h5 img {width:7%}
}
.fs1-1up {font-size:1.1em}
.fs1-2up {font-size:1.2em}


a.hover-txt-shadow:hover,a.hover-txt-shadow:focus {text-shadow:2px 2px 5px #ccc;text-decoration:none;}
a.hover-shadow:hover,a.hover-shadow:focus {box-shadow:5px 5px 5px 0px #ccc;text-decoration:none}

#contents-wrap .more,
#contents-wrap .more1,
#contents-wrap .more2 {font-weight:bold;font-family:'Gotham';text-decoration:none}



/*.ellipsis {text-overflow: ellipsis; white-space: nowrap; overflow: hidden}*/
.ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */
    -webkit-box-orient: vertical; word-wrap:break-word;  
    line-height: 1.2em;
    height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
} 

.btn-black {background:#333;color:#fff}
.btn-black.focus, .btn-black:focus, .btn-black:hover {color:#efefef}
.btn-sky {background:#0081d9;color:#fff}
.btn-gray {background:#acafb8;color:#fff}


/* 게시판 내용 부분 */
@media (max-width:768px) {
    #writeContents img {max-width:100%}
}




#bottom-menu {position:fixed;right:20px;bottom:30px;z-index:999}
#bottom-menu .navbar-default {background:none}
#bottom-menu .navbar button {border-color:#34afad}
#bottom-menu .navbar-default .navbar-toggle .icon-bar {background:#34afad}



/* iframe 레이어 팝업 */
#inner_bg              { left: 0; top: 0; width: 100%; height: 100%; position: absolute; background: url('/img/bg/popupbg.png') repeat; z-index: 1001 }
#inner_bg_layer        { position: absolute; left: 0; top: 0; width: 100% }
#inner_bg_frame_area   { position: relative; width: 885px; margin: 0 auto; margin-top: -9999px }



/* 게시판 동영상 embed 가운데 정렬 */
.viewContentTD iframe {display:block;margin:0 auto}