/******************* Type C *******************/

html, body {margin:0; height:100%; font-family:'Noto Sans KR',Arial, Helvetica, sans-serif; letter-spacing:-1px; font-size:16px; font-weight:500;}
#wrap {width:100%; height:100%; min-width:320px; background-color:#ffffff; scroll-behavior:smooth; margin-top:80px;}

/* ------- Top nav -------  */
.topnav_left {float:left;}
.section {width:100%; padding:60px 0; position:relative;}
.contents_area {width:1100px; margin:0 auto; position:relative; padding-bottom:50px;}

/* ------- Style the navbar -------  */
.gnb {width:100%; color:#101010; position:absolute; top:0; left:0; z-index:99; opacity:1; height:80px; overflow:hidden; padding:0 30px;}
.gnb .gnb_wrap {min-width:1100px; overflow:hidden; margin:0 auto; white-space:nowrap; height:100%; margin:0 auto; display:flex; align-items:center;}
.gnb .gnb_wrap .logo {float:left; width:260px; font-size:22px; font-weight:400; color:#101010;}
/* .gnb .gnb_wrap .logo:after {display:inline-block; width: 1px; height: 20px; margin: 0 25px 0 21px; background-color: #dddddd; vertical-align: top; content: ''; vertical-align: middle;} */
.gnb .gnb_wrap .logo a {color:#101010; line-height:0.1em;} 
.gnb .gnb_wrap .nav_menu {overflow:hidden;}
.gnb .gnb_wrap .nav_menu a {display:inline; padding:0 3px; margin:0 20px 0 0;}
.gnb .gnb_wrap .nav_menu a.active {border-bottom:solid 2px #7193a7; color:#036fad;}
.gnb .gnb_wrap span.num_sm {padding:0 8px; border-radius:100px; background-color:#036fad; font-size:11px; font-weight:bold; text-align:center; color:#ffffff; position:relative; left:5px; vertical-align:2px; height:18px;}

.gnb .submenu {display:none; padding:15px 0;}
.gnb .submenu li {font-size:26px; line-height:18px; padding:5px 0; clear:both;}
.gnb_line {width:100%; height:1px; border-top:solid 1px #eeeeee; position:absolute; top:79px; left:0; z-index:99;}
.gnb a:hover {color:#036fad; border-bottom:solid 1px #7193a7;}

.submenu_grp {clear:both; width:100%; padding:10px 0; display:flex; align-items:center; justify-content:left;}
.submenu_grp ul {display:block; padding-left:300px;}
.submenu_grp ul.sm li {padding:0 15px; font-size:17px; display:inline-block;}
.submenu_grp li .active {border-bottom:solid 1px #7193a7; color:#036fad;}

.btnopen {display:block; position:absolute; top:22px; right:50px; z-index:101; color:#101010;}
.btnopen_mobile {padding:0; float:right;}
.content {padding:16px;}
 
/* ------- Side Navbar -------  */
.sidenav {height:100%; width: 100%; position:fixed; z-index:10001; top:0; left:100%; background-color:#101010; overflow-x:hidden; transition:0.5s; padding-top:50px; padding-left:40px;}
.sidenav a:hover {color:#f90;}
.sidenav .sidenav_grp {width:50%; min-width:340px;}
.sidenav ul {width:260px;}
.sidenav ul li a {padding:8px 8px 8px 32px; text-decoration:none; font-size:16px; color:#ffffff; display:block; transition:0.3s;}
.sidenav .btn_submenu {border-bottom:solid 1px #303030; padding:15px 0;}
.sidenav .closebtn {position:absolute; top:20px; left:220px; font-size:36px; margin-left:50px; padding:0; color:#ffffff;}
.sidenav .submenu2dp {display:none; border-bottom:solid 1px #606060; background-color:#202020;}
.sidenav .submenu2dp a {font-size:13px; color:#eeeeee; padding:10px;}
.sidenav .submenu2dp a:hover {color:#f30;}
.sidenav li span.num_sm {padding:0 8px; border-radius:100px; background-color:#036fad; font-size:11px; font-weight:bold; text-align:center; color:#ffffff; position:relative; left:5px; vertical-align:2px; height:18px;}

 
/* ------- Main Page -------  */
#myVideo {top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main {width:100%; min-height:100vh; height:auto; background-color:#101010; position:relative; background-size:cover; background-position:center; background-repeat:no-repeat;}
.main .slogan_grp {width:100%; height:100%; position:absolute; z-index:96; top:0; left:0; display:flex; align-items:center; justify-content:center;}
.main .slogan_grp .slogan {font-size:80px; font-weight:bold; color:#ffffff; line-height:90px; text-align:center;}
.main .slogan_grp .slogan .slogan_h {font-size:24px; font-weight:normal; color:#ffffff; line-height:30px; padding-top:30px; text-align:center;}
.bottom {width:100%; background-color:#505050;}
.bottom p {padding:0; margin:0; line-height:1.0em;}
.bottom .info {padding:50px; font-size:16px; color:#aaaaaa; line-height:1.6em; margin:0 auto;}

/*  -------- Sub Page ------- */
.subpage {width:100%; color:#101010; font-size:18px; font-weight:400; line-height:1.6rem; background-color:#f0f0f0; overflow:hidden;}
.subpage .locate_grp {display:none; max-width:1680px; margin:0 auto; border-top:solid 1px #dddddd; border-bottom:solid 1px #dddddd; font-size:16px; line-height:50px;}
.subpage .locate_grp li {float:left; border-left:solid 1px #dddddd;}
.subpage .locate_grp li.home {padding:10px 30px 0 30px; border-left:solid 1px #dddddd;}
.subpage .locate_grp li.dep1 {padding:5px 100px 0 50px; border-left:solid 1px #dddddd;}
.subpage .locate_grp li.dep2 {padding:5px 100px 0 50px; border-left:solid 1px #dddddd;}
.subpage .sub_img_grp {clear:both; width:100%; background-color:#303030;  background-size:cover; height:200px; display:flex; align-items:center; justify-content:center;} 
.subpage .sub_img_grp {background-size:cover; background-repeat:no-repeat; background-position:center;}
.subpage .sub_img_grp .sub_img_txt {font-size:40px; line-height:1.6em; font-weight:400; color:#ffffff; text-shadow:0 0 5px #000000; overflow:hidden;}
.subpage .sub_title {clear:both; width:100%; height:226px; display:flex; align-items:center; justify-content:center; font-size:46px; position:relative; padding-bottom:50px;}
.subpage .sub_title .line_center {width:1px; height:70px; border-left:solid 1px #0066cc; position:absolute; top:120px; left:50%;}
.subpage .sub_title .circle_center {width:10px; height:10px; background-color:#0066cc; border-radius:50%; position:absolute; top:80px; left:-5px;}
.subpage .sec_title {clear:both; width:100%; font-size:34px; padding:30px 0;}
.subpage .sec_title .material-icons-outlined {font-size:42px; color:#101010; position:relative; top:10px;}

/* PC 콘텐츠 (960px 이상) - 기본값 */
.subpage .pc_sub {display:block;}
.subpage .m_sub {display:none;}

.subpage .sub_content {margin:30px auto; border:solid 1px #dddddd; padding:30px 50px 70px 50px; background-color:#ffffff;}
.subpage .sub_content .content_txt {font-size:18px; line-height:200%; font-weight:300;}
.subpage .sub_content .content_img {background-image:url('../image/content_sample1.jpg'); background-size:cover; height:300px; display:flex; align-items:center; justify-content:center; font-size:32px; padding:20px; line-height:1.2em; text-align:center;}

/* ------- Accordion menu ------- */
.faq_grp {margin-top:50px;}
.qna_grp .accordion {background-color:#eee; color:#202020; cursor:pointer; padding:18px; width:100%; border:none; text-align:left; outline:none; font-size:15px; transition:0.4s;}
.qna_grp .active, .qna_grp .accordion:hover {background-color:#cccccc;}
.qna_grp .accordion {font-weight:bold; font-size:1.0em;}
.qna_grp .accordion:after {content:'\002B'; color:#777; font-weight:bold;  float:right; margin-left:5px;}
.qna_grp .active:after {content:"\2212";}
.qna_grp .panel {font-size:0.8em; padding:18px; display:none; background-color:white; overflow:hidden; /* max-height:0; transition:max-height 0.2s ease-out; */}

/* -------- Floating menu  ------------*/
.quickmenu {position:absolute; width:100px; top:70%; margin-top:-50px; right:50px; font-size:13px;}
.quickmenu ul li {width:100%; height:100px; margin:5px 0; border-radius:50%; text-align:center; padding:10px; background:#546e81; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#ffffff;}
 
.quickmenu ul li a {line-height:1.5em; text-align:center; color:#ffffff; font-size:1.0em; text-decoration:none;}
.quickmenu ul li:hover {background-color:#5d798d;}

.content {position:relative; min-height:1000px;}

/* -------- Qucik menu  ------------*/
.qm {position:fixed; right:20px; bottom:20px; z-index:9999; text-align:right;}
.qm li {padding:0; margin:0; font-size:14px;}
.qm li a {display:inline-block; width:40px; height:40px; margin:3px 0; border-radius:20px 20px; text-align:center; background:#546e81; cursor:pointer; color:#ffffff; transition:0.2s ease-out; overflow:hidden; box-shadow: 3px 4px 10px 2px rgb(0 0 0 / 20%); transform-origin: 0 100%; -webkit-transform-origin:0 100%; color:#ffffff; text-decoration:none;}
.qm li .name { white-space: nowrap; line-height:40px;}
.qm li a:hover .name {display:inline-block;}
.qm .q1:hover {width:160px;}
.qm .q2:hover {width:110px;}
.qm .material-icons-outlined {width:40px; line-height:40px; font-size:22px; font-weight:normal; text-align:center;}
.qm span {line-height:30px;  float:left; font-weight:normal;}

.content {position:relative;min-height:1000px;}

/*---------------  Media Tag -------------- */

/* -------- Modal Share  ------------*/
.modal_screen { width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,0.8); z-index:20000; display:flex; align-items:center; justify-content:center; transition: opacity 0.2s;}
.modal_share_grp {width:370px; height:300px; background-color:#ffffff; padding:20px; position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);}
.modal_share_grp .title {font-size:24px; padding:10px 0;}
.modal_share_grp .title .close_modal {position:absolute; top:15px; right:15px; width:20px; height:20px; cursor:pointer; font-size:30px;}
.modal_share_grp ul {padding-top:20px;}
.modal_share_grp li {display:block; padding:5px 0;}
.modal_share_grp button {width:100%; height:50px; background-color:#eeeeee; border-radius:3px; border:solid 1px #cccccc; font-size:16px; color:#303030; padding:0 20px; line-height:48px; cursor:pointer;}
.modal_share_grp .input_box {width:100%; height:50px; background-color:#eeeeee; border-radius:3px; border:solid 1px #cccccc; font-size:16px; color:#303030; padding:0; line-height:48px; }
.modal_share_grp input {display:inline-block; border:0; width:250px; height:42px; background-color:#eeeeee; padding:0 10px;}
.modal_share_grp .btn_copy {height:46px; display:inline-block; padding-right:10px;cursor:pointer; position:relative; right:-30px;}
.modal_share_grp .txt_h {display:inline-block; position:relative; top:-13px; left:20px; font-size:22px;}
.modal_share_grp li a {color:#303030;}
.modal_share_grp li a:hover {color:#006699;}

/* -------- Map  ------------*/
.map_grp {width:100%; padding:20px; overflow:hidden; min-height:400px;}
.map_grp .map {width:100%; height:500px; }
.map_grp .address {font-size:16px; width:100%; padding-top:20px; text-align:center;}
.map_grp .address p {font-size:43px;}

/*---------------  Media Tag -------------- */
/*---------------  Media Tag -------------- */
/*---------------  Media Tag -------------- */

@media all and (max-width:1680px) {
    .locate_grp {padding-left:50px;}
}

@media all and (max-width:1280px) {
    .nav_menu {display:none;}
    .nav_menu {display:none;}
    .gnb ul li  {display:none;} /*---- Hidden main menu ----*/
   /*  .submenu_grp {display:none;} /*---- Hidden menu to follow----*/
   .submenu_grp {line-height:1.6em;}
    .submenu_grp ul {padding-left:20px;}
    .locate_grp {display:none;} /*---- Hidden location ----*/
    .main .slogan_grp .slogan {font-size:60px; line-height:70px;}
    .main .slogan_grp .slogan .slogan_h {font-size:20px;line-height:26px;}
    .bottom .info {padding:40px; font-size:14px;}
}  

@media all and (max-width:920px) {
    
    .main .slogan_grp .slogan {font-size:50px; line-height:60px;}
    .main .slogan_grp .slogan .slogan_h {font-size:18px;line-height:24px;}
    .subpage .sub_content {margin:0;}
    
    /* 모바일 콘텐츠 표시 (960px 미만) */
    .subpage .pc_sub {display:none;}
    .subpage .m_sub {display:block;}
 
}

@media all and (max-width:768px) {

    .main {height:auto; min-height:600px; background-size:contain; background-repeat:no-repeat;}
    .main .slogan_grp {height:auto; min-height:600px; padding:40px 20px;}
    .main .slogan_grp .slogan {font-size:50px; line-height:60px;}
    .main .slogan_grp .slogan .slogan_h {font-size:18px;line-height:24px;}
    .bottom .info {padding:30px; font-size:14px;}
    .bottom p {padding:0; margin:0; line-height:1.6em;}
    
    .subpage .sub_content {margin:0; padding:0px;}
    .subpage .sub_title {padding:0; height:100px;}
    .subpage .sub_img_grp {height:180px}
    .subpage .sub_img_grp .sub_img_txt {font-size:36px;}
    .subpage .sub_title {height:160px; font-size:36px;}
    .subpage .sub_title .line_center {height:50px; top:120px;}
    .subpage .sub_title .circle_center {top:50px;}

    .line_center {display:none;}
    
    .map_grp {padding:0;}
 }

 @media screen and (max-width:600px) {

    .main {height:auto; min-height:600px; background-size:contain; background-repeat:no-repeat;}
    .main .slogan_grp {height:auto; min-height:600px; padding:30px 15px;}
    .subpage .sec_title {font-size:24px; padding:24px 0;}
    .subpage .sec_title .material-icons-outlined {font-size:32px;}
    .subpage .sub_content .content_img {font-size:28px; height:280px;}
    .subpage .sub_content .content_txt {font-size:16px; line-height:200%;}
    .subpage .sub_img_grp .sub_img_txt {font-size:32px;}
    .subpage .sub_title {height:160px; font-size:34px;}
    .qna_grp .accordion {font-size:0.8em;}
    
 }

 @media screen and (max-width:480px) {

    .logo {font-size:24px !important;  }
    .btnopen {right:30px;}
    .main {height:auto; min-height:600px; background-size:contain; background-repeat:no-repeat;}
    .main .slogan_grp {height:auto; min-height:600px; padding:25px 10px;}
    .main .slogan_grp .slogan {font-size:40px; line-height:50px;}
    .main .slogan_grp .slogan .slogan_h {font-size:16px;line-height:22px;}
    .bottom .info {padding:20px;  font-size:12px;}
    .subpage .sub_img_grp {height:140px}
    .subpage .sub_content .content_img {font-size:26px; height:260px;}
    .subpage .sub_img_grp .sub_img_txt {font-size:28px;}
    .subpage .sub_title {height:80px; padding-bottom:20px; font-size:32px;}
}

/* Youtube fullpage */
.ytLandscape {
    position: relative; padding-bottom: 56.25%;
}
.ytLandscape iframe {
    position: absolute; width: 100%; height: 100%; left: 0; right: 0;
}
/***********************************************/