@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
 font-family: 'NanumBarunGothic';
 src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
 src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format('woff'),
      url(webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format('truetype');
}

@font-face {
 font-family: 'NanumSquare';
 src: url(webfont/NanumSquare/NanumSquareR.eot);
 src: url(webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumSquare/NanumSquareR.woff) format('woff'),
      url(webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}


/* font select */

body * { font-family:NanumSquare, sans-serif; letter-spacing : -0.5px; }


.modal-backdrop{display:none;}



/* header */

#header { display: inline-block; height: 100px; padding-right: 6%; position: absolute; top: 0px; right: 0; z-index:99999;}
#header a { color:#000; text-decoration:none;}

#header .header-box-right { float: right; font-size: 15px; }
#header .header-box-right a { width:80px;padding:28px 10px; padding-top:40px; display:inline-block; font-weight:500;}
#header .header-box-right a:hover { font-weight:bold; transition:0.3s all ease;}
#header .header-box-right .all-menu{font-size:30px; padding-top: 0px; transform:translate(0, 5px); }
#header .header-box-right .toggle{font-size:30px; padding-top: 0px; transform:translate(0, 5px); }


/* gnb */
#gnb-wrap{position:relative;z-index: 100;border-bottom: 1px solid black;box-shadow: 0 4px 4px -4px black; padding:0 10%; }
#gnb-wrap .container-fluid{text-align: center;display: flex;justify-content: space-between;  box-shadow: 8px 9px 9px rgba(0,0,0,.04);
align-items: center;position: fixed;top: 0;left: 0;width: 100%;z-index: 999999;background: #fff;height: 100px; padding-left:5%; }
#gnb-wrap .container-fluid .logo-wrap{padding-left:3%;}
#gnb { display:inline-block; margin: 0;position: relative; left: -3%; z-index:9999999;}

#gnb > ul { display:inline-flex; justify-content:space-between; align-items:center;}
#gnb li.active a { color:#0A7290; }
#gnb > ul > li > a:hover { color:#0574B9; transition:.2s all; }
#gnb .depth1 > li > a {
    padding: 0 30px ;
    font-size: 18px;
    display: block; 
     color: #000; font-weight: bold; text-decoration: none;
} 
    /*////////////////새 gnb////////////////////////*/
    #header-site { float:right; }
	header{     background-color: rgba(0,0,0,0.6); position:fixed!important; z-index: 9999;}
	header > div > div > img { float:left; }
	header #live { display:none;}
	#header-site { position:absolute; top:35px; right:40px;}
	.dept3 { vertical-align:top; }

	.sub-ul { padding:0px; width:100%; margin:50px 0 0; text-align:center; }
	.sub-ul li { display:inline-block; font-size:22px; padding:0px 7px; font-weight:bold; }
	.sub-ul li a { color:#333333; text-decoration:none;}
	.sub-ul li a:hover { color:red; border-bottom: 3px solid red; padding:0px 0px 10px; transition:0.3s all;}

	#gnb a { text-decoration:none; }
	#gnb { display:inline-block;}
	#gnb .depth1 { margin:0px; padding:0px; letter-spacing: -0.5px; }
	#gnb .depth1 a { color:#fff; line-height:100px; }
	#gnb .depth1 li.active { border-bottom:5px solid #0055a2; }
	#gnb > ul > li { display:inline-block; }
	#gnb > ul > li { color:#fff; font-size:25px; padding:0px 5px; letter-spacing: -0.5px;}
	 
	#gnb > ul > li .depth2 { display:none; }




/*///////////////새 gnb 20251205//////////////////////////////////*/

ul#gnb-child { 
    display: flex;
    justify-content: flex-end; 
	gap: 2.5rem;
    width: 100%; align-items: center;
}
ul#gnb-child > li{ 
	width: max-content;
	position: relative; 
	text-align:center;  padding: 0 20px;
	font-weight:bold;  transition: all .2s ease-in-out; 
    height: 100px;
    display: flex;    align-items: center; 
}
ul#gnb-child > li li{line-height:1.5;}
#gnb-child > li > .subal{
  position: absolute;
  left:50%;
  transform:translateX(-50%);              
  top: 132px;
  width: 220px;         /* 기본 폭 */
  padding: 18px 0;
  box-sizing: border-box;
  background: #0055a2;
  color: #fff;
  text-align: left;
  visibility: hidden;
  opacity: 0;
  overflow-y: visible;
  overflow-x: visible;
  word-break: keep-all;
  z-index: 20;
 
  transition:
    height .34s cubic-bezier(.22,1,.36,1),
    opacity .25s ease-out,
    top .28s ease-out;
  will-change: height, opacity, top;
} 
#gnb-child > li > .subal.expanded { width:330px; }
 
ul#gnb-child > li > a{font-size:19px;color:black text-decoration:none; letter-spacing: .54px; 
text-transform: uppercase;      /*padding-top: 10px;   */}
ul#gnb-child > li > a:hover{color: #c0e5ff;} 
ul#gnb-child > li a{text-decoration:none; display:block;}
ul#gnb-child  .subal li a {font-size:16px;  margin-bottom:10px;}
  
 
 #gnb-child > li > .subal::before{
  content:"";
  position:absolute;
  left:50%; top:-5px;
  transform:translateX(-50%);
   /* border-left:8px solid transparent;  
   border-right:8px solid transparent; */
  border:5px solid #0055a2; /* subal 배경색과 동일해야 보임 */
  width: 8rem;
  z-index:1001;
}
 
.subal >li >a{color: white;}
.subal >li:hover >a{color: #5689a4;}
.depth3 >li:hover >a{color: #5f97d3!important;}

/* 3뎁스 패널: 오른쪽 플로팅 */
#gnb-child > li > .subal > li{ position: relative; }
#gnb-child > li > .subal .depth3{
  position: absolute;
  /* left: 100%; top: 0; 
   width: 220px; */
  display: none; opacity: 0;
  transform: translateY(4px);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
#gnb-child > li > .subal .depth3.is-open{
  display: block; opacity: 1; transform: translateY(0);
}

#gnb-child > li > .subal::after{
  content:""; position:absolute; top:0; right:-12px; width:12px; height:100%;
}

#gnb-child > li > .subal > li > a{
  display:block; width:100%;
  padding:0 13px;
}

#gnb-child > li > .subal,
#gnb-child > li > .subal a{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.depth3 {
    position: absolute;
    left: 140px;
    top: 0;
    display: none;
	z-index:1000;
	width: max-content;
}

/*////////////////////////////////////////////////*/












/*서브탑*/ 
.sub-top-2{position:relative;}
.sub-top-2 .subtop-bottom{background-color: rgba(255,255,255,1);height: 90px;position: relative;bottom: 0; left: 10px;width: 100%;}
    .sub-top-2 .subtop-bottom .subtop-menu ul {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
.sub-top-2 .subtop-bottom .subtop-menu ul li{display:inline-block;}
.sub-top-2 .subtop-bottom .subtop-menu ul li a{display: inline-block;padding: 52px 13px 25px;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;}
.sub-top-2 .subtop-bottom .subtop-menu ul li p{display: inline-block;padding: 52px 0px 25px;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;}
.sub-top-2 .subtop-bottom .subtop-menu ul li a .btn-plus{position: absolute;top: 40%;left: 45%;background:#0055a2;width: 6px;height: 6px;border-radius: 50%;
text-align: center;opacity: 0;transition: all .3s linear;}
.sub-top-2 .subtop-bottom .subtop-menu ul li a:hover .btn-plus,
.sub-top-2  .subtop-bottom .subtop-menu ul li.active a .btn-plus,
.sub-top-2  .subtop-bottom .subtop-menu ul li a:focus .btn-plus{opacity:1;}


.subtop-bottom2{background-color: rgba(255,255,255,1);height: 140px;position: relative;bottom: 0; left: 10px;width: 100%;}
.subtop-bottom2 .subtop-menu ul {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
.subtop-bottom2 .subtop-menu ul li{display:inline-block;}
.subtop-bottom2 .subtop-menu ul li a{ display: inline-block; margin: 30px 0; width:420px; padding: 15px 70px; border: solid 1px #dfdfdf;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;}
.subtop-bottom2 .subtop-menu ul li p{display: inline-block;padding: 52px 0px 25px;font-size: 17px;font-weight:700;text-decoration: none;color: #343434;position: relative;}
    .subtop-bottom2 .subtop-menu ul li a:hover, .subtop-bottom2 .subtop-menu ul li.active a, .subtop-bottom2 .subtop-menu ul li a:focus {
        border: solid 1px #123369;
        color: #123369;
    } 





@media (min-width:1500px){
#menubar {background: #fff; width:100%; position:fixed; left:0px; z-index:9999; text-align:left; box-shadow: rgba(113, 113, 113, 0.28) 0px 0px 5px 0px; border-bottom: 1px solid #ddd !important; padding:80px 0px; display:none; top: 100px;}
#menubar > li { display:block; }
.no3 { display:inline-block; padding:0px 15px 15px!important;}
#menubar > div > div > li { padding:0px 0px 25px; list-style: none; text-align:left; }
#menubar > div > div > li:last-child { padding:0px; }
#menubar > div > div > li > a { display:inline-block; padding: 5px 20px; text-decoration:none; border: 1px solid #0055a2; font-size:19px;  color:#25313c; border-radius: 35px; font-weight:600; min-width:206px; text-align:center; margin-left: 6%;}
/* .depth3 { display:inline-block; margin:0px 0px 0px 35px; padding:0px 0px 0px; border-bottom: 1px solid #dcdcdc; width:70%; text-align:left;} */
#menubar > div > div > li > a:hover { background-color:#0055a2; color:#fff; transition:0.4s all;}
/* .depth3 li { display:inline-block; padding:0px 30px 0px 0px; color:#424242; font-size:17px; line-height:35px; font-weight:600; } */
.depth3 li a { color:#424242; text-decoration:none; font-weight:bold;  }
.depth3 li a:hover { color:#0055a2; }
#sub-title { display: inline-block; border-bottom: 3px solid; padding: 0px 0px 15px; margin: 60px 0; font-weight:bold; font-size:38px; color: #000;}
#header #header-login { display:none; }
#menubar > .container > .row { text-align:center; }





}
/*///////////////////////////////////////////////////*/
.gnb-all {
    display: none;
    position: absolute;
    z-index: 9999;
    top: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.gnb-all a { text-decoration: none; }
.gnb-all .all-wrapper { background: #fff; padding: 40px 0; border-bottom: 2px solid #0765BF; border-top: 2px solid #0765BF; }
.gnb-all .all-wrapper .container { width: 100%; padding: 0 5% 0 8%;}
.gnb-all .all-wrapper .container a { display: block; color: #0765BF; }
.gnb-all .all-wrapper .container > div { overflow: hidden; }
.gnb-all .all-wrapper .container > ul > li { max-width: 240px; min-width: 100px; float: left; position: relative; text-align: left; padding: 0 25px; }
.gnb-all .all-wrapper .container > ul > li > a { margin: 0px 0px 15px; font-size: 18px; font-weight: 600; text-decoration: none; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
.gnb-all .all-wrapper .container > ul > li > ul > li > a {
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: clamp(14px, 1.5rem, 18px);
	padding: 0px;
	margin: 10px 0;
	transform: skew(-0.05deg);
	font-weight: bold;
}

.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover {
	font-weight: bold;
	transition: 0.2s all ease;
}

.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a {
	color: #333;
	display: block;
	margin: 5px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: clamp(12px, 1.3rem, 16px);
	padding: 0  1rem;
	transform: skew(-0.05deg);
}
.gnb-all .close { opacity:1; position: absolute; top: 30px; right: 70px; font-size: 50px; color: #000; }







/* gnb2 */
/*#menubar li { list-style:none; }*/
/*#menubar { background: #123576; width: 100%; position: fixed; left: 0px; z-index: 9999; text-align: left; box-shadow: rgb(113 113 113 / 28%) 0px 0px 5px 0px; display: none; top: 100px; }*/
/*#menubar .row { padding:0; }
#menubar > div > div > li > a { display: inline-block; padding: 4px 15px; text-decoration: none; font-size: 17px; color: #ffffff; border-radius: 5px; font-weight: 600; min-width: 120px; text-align: center; position:relative;}
#menubar > div > div > li { line-height:57px; display: inline-block; padding: 4px 0; list-style: none; text-align: center; border-bottom: 1px solid #f8f7f76e; }
#menubar > div > div > li > a:hover { color:#0574B9; transition: 0.4s all; }
#menubar .depth3 { height:0; display:none;}
#menubar .depth3.active{height:65px!important;}
#menubar .depth3 li {  display: inline-block; padding: 0px 2vw 0px 0px; color: #424242; font-size: 16px; line-height: 35px; left:30px; }
#menubar .depth3 a {  color:#000!important; text-decoration:none; }
#menubar .depth3 a:hover{
    font-weight:bold;
}
#menubar li.hasDepth3 .show-sub{font-size:19px; color:#fff; margin-right:15px; text-align:center; }
#menubar li.hasDepth3.active .depth3-wrap{
    
}
    #menubar li.hasDepth3.active .depth3 {
        display: block;
        padding: 15px 13vw;
        box-shadow: 0px 2px 10px #a9a9a9;
        background: #ddd;
        position: absolute;
        top: 73px;
        width: 100%;
        left: 0vw;
        line-height: normal;
        text-align: left;
    }*/


/*logo*/
.logo-wrap {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}
/* footer */

#footer {
    /*background: #123369;*/
    background-image: url(../../../Layouts/gocheok_Layout/Images/8.footer_bg.jpg);
    padding: 50px 0px;
    position: relative;
}
#footer .row{
    background-color:white;
    transform: translate(15px, -50px);
    padding: 0 5%;
    

}
#footertext {
    padding: 25px;
    font-size: 15px;
    font-weight: bold;
    color: #8C8C8C;
}
    #footertext > a {
        color: #8C8C8C;
        padding: 10px; 
        padding-left:0;
    }
#footerimg{
    text-align:right;
}
#footerimg > a {
    padding: 0 15px;
}
    #footer .row{
       width:100%;
    }
    #footer .row .col-xs-9{
        text-align:left;
    }
    #footer .row .col-xs-3 {
        text-align: right;
    }
    #footer .foot-1 {
        color: white;
        padding: 0% 6%;
        font-size: 15px;
        line-height: 0.9;
    }
        #footer .foot-1 p {
            line-height: 1.4;
        }

#footer .foot-1 p>span  {
    color: lightblue;
    /*line-height:1.4;*/
}


#footer .foot-1 img{margin-bottom:15px;}
#footer .foot-1 ul li{color: #fff;font-size: 16px;line-height: 1.8;}
#footer .foot-2 .foot-2-1{display:inline-block; float:left;border-right: 1px solid #ccc;}
#footer .foot-2 .foot-2-1 .footer-table{border:none;}
.foot-2 > .foot-2-1 > .footer-table > tbody > tr > td:nth-child(1){color:#fff!important;font-weight:bold;}
#footer .foot-2 .foot-2-1 .footer-table tbody tr{}
#footer .foot-2 .foot-2-1 .footer-table tbody tr td{color: #848484;padding: 5px 10px;font-size: 15px;letter-spacing: 1px;}
#footer .foot-2 .foot-2-2{display:inline-block; float:right;}
#footer .foot-2 .foot-2-2 .footer-table{border:none;}
.foot-2 > .foot-2-2 > .footer-table > tbody > tr > td:nth-child(1){color:#fff!important;font-weight:bold;}
#footer .foot-2 .foot-2-2 .footer-table tbody tr{}
#footer .foot-2 .foot-2-2 .footer-table tbody tr td{color: #848484;padding: 5px 10px;font-size: 15px;letter-spacing: 1px;}

/* mobile */
.header-mobile-gnb .toggle {color:#fff!important;}
.mm-panels > #mm-1 {background-color:#1c74bf!important; }
.mm-panels > #mm-2,
.mm-panels > #mm-3,
.mm-panels > #mm-4,
.mm-panels > #mm-5,
.mm-panels > #mm-6,
.mm-panels > #mm-7,
.mm-panels > #mm-8,
.mm-panels > #mm-9,
.mm-panels > #mm-10,
.mm-panels > #mm-11,
.mm-panels > #mm-12,
.mm-panels > #mm-13,
.mm-panels > #mm-14,
.mm-panels > #mm-15,
.mm-panels > #mm-16,
.mm-panels > #mm-17,
.mm-panels > #mm-18,
.mm-panels > #mm-19,
.mm-panels > #mm-20,
.mm-panels > #mm-21,
.mm-panels > #mm-22,
.mm-panels > #mm-23,
.mm-panels > #mm-24,
.mm-panels > #mm-25,
.mm-panels > #mm-26,
.mm-panels > #mm-27,
.mm-panels > #mm-28,
.mm-panels > #mm-29,
.mm-panels > #mm-30,
.mm-panels > #mm-31,
.mm-panels > #mm-32   {
    background-color: #1c74bf!important;
}
.mm-panels > div   {
    background-color: #1c74bf!important;
}
.mm-navbar { padding:20px 0px!important; height:inherit!important;}
.mm-navbar a { font-size:22px; color:#fff!important;}
.mm-listview>li>a, .mm-listview>li>span { padding: 1rem 1.2rem !important; font-size:1rem;}
.mm-panels>.mm-panel>.mm-listview { margin:20px 0px!important;}
.mm-btn {top:unset!important;}

#my-menu .mmenu-login {
    text-align: right;
    color: white;
    font-size: 10px;
}
.subul {
        
        text-align:center;
}
@media(min-width:1500px) and (max-width:1620px) {
    #gnb .depth1 > li > a {
        padding: 0 20px;
    }
}
    @media(min-width:1200px) and (max-width:1499px) {
        #gnb-wrap .container-fluid .logo-wrap {
            padding-left: 0%;
        }

        #header {
            padding-right: 3%;
        }

        #gnb .depth1 > li > a {
            padding: 0 20px;
            font-size: 17px;
            display: block;
            color: #000;
            font-weight: bold;
            text-decoration: none;
        }

        #menubar > div > div > li > a {
            display: inline-block;
            padding: 5px 20px;
            text-decoration: none;
            border: 1px solid #0055a2;
            font-size: 17px;
            color: #25313c;
            border-radius: 35px;
            font-weight: 600;
            min-width: 180px;
            text-align: center;
            margin-left: 10%;
        }

        .depth3 li {
            display: inline-block;
            padding: 0px 15px 0px 0px;
            color: #424242;
            font-size: 16px;
        }

        .depth3 {
            display: inline-block;
            margin: 0 0 0 20px;
            border-bottom: 1px solid #dcdcdc;
            width: 70%;
            text-align: left;
            line-height: 2.7;
        }

        #gnb {
            margin-left: 0;
        }

            #gnb > ul > li {
                color: #fff;
                font-size: 20px;
                padding: 0px 5px;
            }

            #gnb .depth1 a {
                color: #fff;
                padding-bottom: 34px;
            }

        header #header-login {
            right: 210px;
        }



        #menubar {
            background: #fff;
            width: 100%;
            position: fixed;
            left: 0px;
            z-index: 9999;
            text-align: left;
            box-shadow: rgba(113, 113, 113, 0.28) 0px 0px 5px 0px;
            border-bottom: 1px solid #ddd !important;
            padding: 80px 0px;
            display: none;
            top: 100px;
        }

            #menubar > li {
                display: block;
            }

        .no3 {
            display: inline-block;
            padding: 0px 15px 15px !important;
        }

        #menubar > div > div > li {
            padding: 0px 0px 15px;
            list-style: none;
            text-align: left;
        }

            #menubar > div > div > li:last-child {
                padding: 0px;
            }

            #menubar > div > div > li > a:hover {
                background-color: #0055a2;
                color: #fff;
                transition: 0.4s all;
            }

        .depth3 li a {
            color: #424242;
            text-decoration: none;
            font-weight: bold;
        }

            .depth3 li a:hover {
                color: #0055a2;
            }

        #sub-title {
            display: inline-block;
            border-bottom: 3px solid;
            padding: 0px 0px 15px;
            margin: 60px 0;
            font-weight: bold;
            font-size: 38px;
            color: #000;
        }

        #header #header-login {
            display: none;
        }

        #menubar > .container > .row {
            text-align: center;
        }
    }


    @media (min-width:992px) and (max-width:1199px) {
    }

    @media (max-width:991px) {
        #footertext {
            padding: 25px 3px;
        }
    }

    @media (max-width:767px) {
        #footertext {
            padding: 14px 3px;
        }

        #header {
            font-size: 30px;
            padding-top: 23px;
        }
		
		#gnb-wrap .container-fluid { 
		height: 80px;}
    }