/* 상단 메뉴, nav,  사이드 메뉴 */
html.expand body { /* position:fixed; top:0; left:0; width:100%; */ }
html.expand #side_bgc {position: fixed; top:0; right:0; width:100%; height:100%;  background: rgba(0,0,0,.6); }


.header_wrap {  width: 100%; height: 100px; position: fixed; z-index: 99; transition: all 0.2s ease-out; border-bottom: 1px solid #000;}
.header_wrap:after {content:""; display:block; clear:both;}
.header_wrap:before {content:""; display:block; height: 100px; width: 100%;  background:  rgba(255,255,255,0.9); position: absolute; left:0; top:0;  transition: all 0.2s ease-out;  }


.header_wrap .head_icon {display: none;}
.header_wrap .header {  position: relative; max-width:1280px; margin: 0 auto; }
.header_wrap .header:after {content:""; display:block; clear:both;}
.header_wrap .logo_wrap {width: 120px; position: absolute; top: 50%; -webkit-transform: translateY(-50%) ; left:15px; font-size:0; }
.header_wrap .logo_wrap a {display:block; }
.header_wrap .logo_wrap a span { font-size: 14px; display: inline-block; vertical-align: top;}
.header_wrap .logo_wrap img {height: 35px;}


.header_wrap .header .nav { text-align: right; padding: 0 15px 0 0;}
.header_wrap .header .nav li {display:inline-block; padding: 0 5px; height: 100px; line-height: 100px; position:relative; vertical-align: top;
    transition: all 0.2s ease-out;
}
.header_wrap .header .nav li a {font-size: 1.4rem;  display: inline-block; line-height: 1.0; background: transparent; border-radius: 18px; padding: 10px 15px; font-weight: 500; color: #000000; cursor: pointer;}
.header_wrap .header .nav li a::before {  display: block;   content: attr(title);   font-weight: 500;   height: 0;   overflow: hidden;   visibility: hidden; }
.header_wrap .header .nav li a.focus,
.header_wrap .header .nav li a.active,
.header_wrap .header .nav li a:hover {  background: #000; color: #fff; }

.header_wrap .header .nav li ul  {display:none; width: 180px; min-height: 60px; padding: 15px 0; background: #f7f7f7;text-align:center;  position:absolute;  left: 50%;  margin-left:-90px; top: 100px; font-size:0; z-index:14; }
.header_wrap .header .nav li ul li {display:block;  margin:0 ; padding:0; height:30px; line-height:30px; vertical-align:top;}
.header_wrap .header .nav li ul li a {display:block;  font-size:1.4rem; background: transparent; font-weight: normal;}
.header_wrap .header .nav li ul li a.longtxt { letter-spacing:-1px; }
.header_wrap .header .nav li ul li a.focus,
.header_wrap .header .nav li ul li a:hover,
.header_wrap .header .nav li ul li a.active { background: transparent; color: #000; font-weight: bold; }


.header_wrap.scroll {height: 70px; }
.header_wrap.scroll:before { height: 70px; }
.header_wrap.scroll .header .nav li { height: 70px; line-height: 70px; }


@media all and (min-width: 1025px) {
    .header_wrap.scroll .header .nav li ul li {height: 30px; line-height: 30px;}
    .header_wrap.scroll .header .nav li ul li a { height: auto; }

    .header_wrap.scroll .header .nav li ul { top: 70px;}
    .header_wrap .header .nav li:hover ul {display:block;}
}

@media (max-width: 1200px) {
    .header_wrap .header .nav li { padding:0 0; }
    .header_wrap .header .nav li a {font-size:1.3rem;}

}

#side_nav .side_hide {display: none;}

@media (max-width: 1024px) {
    .header_wrap {height: 50px; }
    .header_wrap.scroll:before,
    .header_wrap.scroll {height: 50px; }
    .header_wrap .header {height:auto; min-height:50px }
    .header_wrap:before { height: 50px; }

    .header_wrap .logo_wrap  {width: 240px; position: absolute; left: 14px; margin-left: 0; font-size:0;}
    .header_wrap .logo_wrap a {display:block; text-align: left;}
    .header_wrap .logo_wrap img {height: 25px}

    .header_wrap .head_icon {height:30px;  display: block;}

    .header_wrap p.ico_ham {position: absolute; right: 12.5px; top: 12px; cursor: pointer; }
    .header_wrap p.ico_ham i {font-size: 25px; color: #000000;}
    .header_wrap p.ico_ham img {height: 15px;}

    .header_wrap .header #side_nav { padding:0 0; width: 85%; height:100%;  max-width: 500px; position: fixed; top:0; right:-100%;  background: #ffffff;  z-index:900   ; box-shadow:2px 0px 4px rgba(0,0,0,0.30); }
    .header_wrap .header .nav {float:none; width:100%; text-align:left; margin: 30px 0 0 0; position: relative; }
    .header_wrap .header .nav li {display:block; padding: 0 0; margin-left: 10px; height:auto; line-height:40px; position:relative; }
    .header_wrap .header .nav li.havn {}
    .header_wrap .header .nav li.havn:after {display: block; position: absolute; right:0; top:0;  width:40px; height:50px; line-height:50px; text-align: center; font-size:15px; content: "\e941"; font-family:'xeicon';    transform: rotate(0deg);transition: transform 120ms 200ms ease-out;
    color: #313131;}
    .header_wrap .header .nav li.havn.on:after {    transform: rotate(-180deg);    transition: transform 120ms ease-in-out;}

    .header_wrap .header .nav li a {font-size:15.5px; padding: 0 20px 0 20px;  color:#313131; display: inline-block; width: auto; max-width: auto;   height: 42px; line-height: 42px; font-weight:500 ;  border-radius: 21px;  }
    .header_wrap.scroll .header .nav li { height: auto; line-height: normal;}
    .header_wrap .header .nav li a.active {}
    .header_wrap .header .nav li a:hover { background: transparent; color: #000000;}

    .header_wrap .header .nav li ul  {display:none; width:100%; min-height:40px; height:auto;  padding:5px 0; background: #f7f7f7;text-align:left;  position: relative; left:0;  top:0;  margin-left:0; }
    .header_wrap .header .nav li ul li {display:block;  margin:0 ; padding:0; height: auto; line-height: auto; vertical-align:top; }
    .header_wrap .header .nav li ul li a {padding-left: 25px;}


    #side_nav .side_hide {display:block;}
    #side_nav .side_logo {padding: 15px 0 10px 20px; text-align: left;}
    #side_nav .side_logo img {height: 20px;}


    #side_nav .btn_side_close {position: absolute; right: 12.5px; top: 15px; cursor: pointer;}
    #side_nav .btn_side_close i {font-size: 21px; color: #000000;}

}




.tail_wrap { padding: 0 15px 0; }
.tail_wrap .tail { padding: 40px 0; max-width: 1250px; margin: 0 auto; position:relative; font-size: 1.6rem; color: #4d4d4d;
    border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
}
.tail_wrap .tail a {color: #4d4d4d;}

.tail_wrap .tail .com_info {  line-height: 1.63; font-size: 1.5rem; color:  rgba(0,0,0,0.5);}
.tail_wrap .tail .com_info p {font-size: 1.6rem; font-weight: bold; line-height: 1; margin: 0 0 20px 0; color: #fff;}

.tail_wrap .copy {padding: 20px 0; text-align: center;  font-size: 1.2rem; color: #4d4d4d;}
.tail_wrap .copy img {height: 21px; vertical-align: middle; margin-right: 21px;}


.rbn { position: fixed; width: 50px; bottom: 30px; right: 20px; z-index: 10;}
.rbn a { display: block; margin-bottom: 14px; font-size: 0;}
.rbn a img { width: 100%;}

.bbn {  display: none; }
.bbn a { display: block; line-height: 50px; height: 50px; text-align: center; background: #000; color: #fff; position: relative;}
.bbn a:first-child:after { content:""; display: block; width: 1px; height: 16px; background:  rgba(255,255,255,0.3); position: absolute; right: 0; top: 50%; transform: translateY(-50%) ; }
@media (max-width: 1024px) {
    .tail .item,
    .tail .item.large {flex: 0 0 33.3333%; }

}
@media (max-width: 768px) {
    .tail_wrap { padding-bottom: 50px;}
    .tail_wrap .tail { padding: 25px 0;}
    .tail_wrap .tail .com_info {font-size: 1.3rem;}

    .rbn { width: 36px; right: 10px; bottom: 50px;}
    .rbn a { margin-bottom: 10px;}
    .bbn { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0;
        position: fixed; left: 0; bottom: 0; width: 100%;
        z-index: 10;
    }

}



/* 본문 */
.sub_contents { max-width: 1280px; margin: 0 auto; padding: 100px 15px 35px;}
.sub_contents img { max-width: 100%; }
@media (max-width: 768px) {
    .sub_contents { padding-top: 50px;}

}

.contents_body {max-width: 1280px; margin: 0 auto; padding: 100px 15px 35px;}


.pt { /* max-width: 1280px; margin: 0 auto; padding: 0 15px; */
	font-size: 2.0rem; font-weight: bold; margin-bottom: 30px;
}



.mid_nav { padding: 0;}
.mid_nav.fixed { position: fixed; width: 100%; max-width: 1250px; left: 50%; top: 66px; transform: translateX(-50%); z-index: 10;}
.mid_nav a { color: #000; font-size: 1.6rem; font-weight: 500; position: relative; display: inline-block; padding: 10px 30px; margin-right: 10px; border: 1px solid #000000; border-radius: 21px; }
.mid_nav a.active { background: #000; color: #fff;}



/* 상단 메뉴, nav,  사이드 메뉴 */
html.expand body { /* position:fixed; top:0; left:0; width:100%; */ }
html.expand #side_bgc {position: fixed; top:0; right:0; width:100%; height:100%;  background: rgba(0,0,0,.7); }

br.mo_none,
img.mo_none {display: block;}
br.pc_none,
img.pc_none {display: none;}
@media (max-width: 768px) {
    br.mo_none,
    img.mo_none {display: none;}
    br.pc_none,
    img.pc_none {display: block;}
}


.admin_link_btn { background:#fff; border:1px solid #ccc; width: 100px; position:absolute; top:0; left:0; padding:5px; text-align:center; z-index: 999; }
    @media (max-width: 768px) {     .admin_link_btn  {display: none;} }




/* 내용 입력 폰트 초기화 */
#ctt_con {
    font-family: unset;
    line-height: unset;
    max-width: 1280px; margin: 0 auto 30px; padding: 0 15px;
}

#ctt_con div,
#ctt_con p,
#ctt_con span { word-break: break-word !important; }
#ctt_con img { max-width: 100%;}


/* 중간 */

h1.page_title,
h2.page_title {font-weight: 500; font-size: 3.8rem; line-height: 1.0; margin: 30px 0 30px 0; padding-bottom: 15px; border-bottom: 1px dotted #dcdcdc; color: #313131;}


@media (max-width: 1024px) {
    .contents_body {padding: 50px 15px;}

    h1.page_title,
    h2.page_title { font-size: 2.4rem;}

}


.video-container {    position:relative;    padding-bottom:56.25%;    padding-top:0;    height:0;    overflow:hidden;}
.video-container iframe,
.video-container object,
.video-container embed{    position:absolute;    top:0;    left:0;    width:100%;    height:100%;}


/* video */
#pop_youtube {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 1000;    background: rgba(0,0,0,0.9);    display: none;}
#pop_youtube #video_box {    position: fixed;    top: 50%;    left: 50%;    width: 860px;    height: 484px;    margin: -222px 0 0 -430px;    background: #000; }
#pop_youtube #video_box .pop_close {    position: absolute;    top: -61px;    right: 0;    display: block;    width: 41px;    height: 41px; background: transparent; font-size: 0;
    border: 0; outline: 0;
}
#pop_youtube #video_box .pop_close:after {content:"\e921"; font-size: 30px; font-family: 'xeicon'; color: #ffffff;}

@media (max-width: 860px) {
    #pop_youtube {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 1000;    background: rgba(0,0,0,0.9);    display: none;}
    #pop_youtube #video_box {    position:absolute;    top: 70px;    left: 0;    width: 100%;    height:100%;  margin:0;    background: #000; }

    #pop_youtube #video_box .pop_close {    position: absolute;  border:none;  top: -61px;    right: 0;    display: block;    width: 41px;    height: 41px;    font-size: 0;  background: transparent; border: 0; outline: 0; }
    #pop_youtube #video_box .pop_close:after {content:"\e921"; font-size: 30px; font-family: 'xeicon'; color: #ffffff;}

}