@charset "UTF-8";
/* 헤더메뉴 */
.manual_he_wrap { position: relative;}
.manual_header{background: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; padding: 0 60px; border-bottom: 1px solid #e4e4e7;}
.manual_header .menu-bar .gnb_wrap {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center;}
.manual_header .menu-bar .gnb_wrap > li {position:relative; flex: 1; text-align: center; min-width: 160px; }
.manual_header .menu-bar .gnb_wrap > li.none {display: none;}
.manual_header .menu-bar .gnb_wrap > li .sitemap_tit { transition: all 0.3s; display: block; position:relative;}
.manual_header .menu-bar .gnb_wrap > li .sitemap_tit .text {display: block; font-weight: 600; font-size: 22px; line-height: 96px; color: var(--colorFontBlack); }
.manual_header .menu-bar .gnb_wrap > li:hover .sitemap_tit::after { content:""; position:absolute; bottom: 0; left: 0; width:100%; height: 4px; background:var(--colorNavy)}
.manual_header .menu-bar .gnb_wrap > li .sub_gnb_area {display: none; position:absolute; right: 0; left: 0; padding: 10px 0; z-index: 3;}
.manual_header .menu-bar .gnb_wrap > li .sub_gnb_area .sub_gnb {}
.manual_header .menu-bar .gnb_wrap > li .sub_gnb_area .sub_gnb > li {}
.manual_header .menu-bar .gnb_wrap > li:hover .sub_gnb_area .sub_gnb > li > a { color: var(--colorDarkGray); }
.manual_header .menu-bar .gnb_wrap > li .sub_gnb_area .sub_gnb > li > a {display: block; position:relative; font-weight: 500; font-size: 17px; line-height: 30px; padding: 10px 0; color:#9E9E9E;}
.manual_header .menu-bar .gnb_wrap > li .sub_gnb_area .sub_gnb > li:hover > a {font-weight: 500; color:#d12176 !important}
.manual_header .menu-bar .gnb_wrap > li .sub_gnb_area .sub_gnb > li .depth3 {display: none;}

.manual_header .util{display: flex; align-items: center;}
.manual_header .util button { padding-left: 30px; }
.manual_header .util button img { filter: invert(0);  }
.manual_header .login_name { font-size: 14px;}
.manual_header .login_name span { color:var(--colorBlue); }
.manual_header .login_name i { margin: 0 5px 0 0; color:var(--colorBlue); }
.manual_header .mobile-btns img {filter: invert(0); }

.manual_mo_menu {display:none;width:96%;max-width:320px;position:absolute;right:40px;top:85px;z-index:10}
.manual_mo_menu .mobile-menu-list{max-height:calc(100dvh - 180px);background-color:#fff;border:3px solid var(--colorNavy);border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.2);overflow-x:hidden;overflow-y:auto;position:relative}
.manual_mo_menu .mobile-menu-list > ul > li {border-bottom:1px solid #e4e4e7}
.manual_mo_menu .mobile-menu-list > ul > li:last-child {border-bottom:0}
.manual_mo_menu .mobile-menu-list > ul > li.allow > a {position: relative;}
.manual_mo_menu .mobile-menu-list > ul > li.allow > a:after {content: '▼'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color:#9E9E9E; font-size: 12px; }
.manual_mo_menu .mobile-menu-list > ul > li.current > a::after {transform:translateY(-50%) rotate(180deg)}
.manual_mo_menu .mobile-menu-list > ul > li > a {display: block;font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: -1px; padding:15px;}
.manual_mo_menu .mobile-menu-list > ul > li > a > img { color: #616161; margin: 0 5px 0 0; }
.manual_mo_menu .mobile-menu-list .sub_gnb_area { display: none; padding: 5px 0;  background: #f4f4f4; }
.manual_mo_menu .mobile-menu-list .sub_gnb_area li a { display: block; padding:8px 22px;font-size:15px;color: #282828; }
.manual_mo_menu.on { display: block; }

/* 메인 */
.manual_body { display: flex;}
.manual_body .btn_m_manual {display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;background-color:#fff;background-image:url(/image/manual/mo_menu.png);background-position:center;background-repeat:no-repeat;border-radius:6px;border:1px solid var(--colorLightGray);position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:1}
.manual_body .btn_m_manual.open {background-color:var(--colorNavy);background-image:none;border-color:var(--colorNavy)}
.manual_body .btn_m_manual.open::after {font-family:'xeicon';font-size:19px;content:'\e921'}

.left_list {width:357px;box-shadow: 0px 0px 24px 0px #0000001F; }
.left_top { padding: 32px 24px; }
.left_top h2 {font-weight: 700;font-size: 40px; color: var(--colorBlue)}
.left_top > p {font-weight: 400;font-size: 14px; margin: 10px 0 30px; }
.left_top button { display: flex; justify-content: space-between; grid-gap: 10px;width:100%; border-radius: 20px; padding: 16px 30px; background: #0A2F66; color: #fff; }
.left_top button p { font-weight: 500;font-size: 24px; text-align: left; }
.left_menu_list {height:calc(100vh - 238px);position:relative;overflow: overlay;}
.left_menu_list > ul { max-height: 100%; overflow: overlay; }
.left_menu_list > ul > li.allow > a {position: relative;}
.left_menu_list > ul > li.allow > a:after {content: '▼'; position: absolute; right: 20px; top: 50%;transition: all 0.3s; transform: translateY(-50%); color:#9E9E9E; font-size: 14px; }
.left_menu_list > ul > li > a{display: block;font-weight: 600; font-size: 20px; line-height: 25px; letter-spacing: -1px; padding: 20px;  border-bottom: 1px solid #e4e4e7; }
.left_menu_list > ul > li > a > img { color: #616161; margin: 0 5px 0 0; }
.left_menu_list .sub_gnb_area { display: none; background: #FAFAFA; }
.left_menu_list .sub_gnb_area li a { display: block; padding: 14px 20px; color: #282828; font-weight: 700;font-size: 18px; }
.left_menu_list > ul > li.active { background: var(--colorBlue); color: #fff; }
.left_menu_list > ul > li.active img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);;}
.left_menu_list > ul > li.active a:after { transform: translateY(-50%) rotate(180deg); color: #fff; }
.left_menu_list .sub_gnb_area li.active a {background: #EEEEEE; color: #23509F; }
.left_menu_list > ul > li.active .sub_gnb_area { display: block; }

.right_con .mo_title { display: none; position: relative; padding: 20px 30px; background: #F5F5F5;position:relative}
.right_con .mo_title img { display: none; position: absolute; right: 30px; top:50%; transform: translateY(-50%); }
.right_con .mo_title h3 { font-weight: 700;font-size: 24px;color: var(--colorBlue) }
.right_con .mo_title h3 > p {font-weight: 700;font-size: 14px;color:#616161  }

.right_con {width:calc(100% - 357px)}
.right_con > ul > li { height: calc(100vh - 100px);  }
.right_con .no_content { background: #F5F5F5; position:relative; }
.right_con .no_content > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-weight: 700;font-size: 28px; color: #BDBDBD;  }
.right_con .no_content > div .pc { }
.right_con .no_content > div .mo { display: none; font-size: 18px; }

.right_con > ul > li > .menu_title h3 { font-weight: 700;font-size: 36px; padding: 16px 60px; line-height: 120%; border-bottom: 1px solid #E0E0E0; }
.right_con > ul > li > .menu_title h3 > p { font-weight: 500;font-size: 22px; color: var(--colorBlue) }
.right_con > ul > li > div.view_wrap {padding: 40px 60px; display: flex; flex-wrap: wrap; grid-gap: 40px; }
.right_con > ul > li > div .youtube_wrap {width:calc(100% - 346px);border-radius:20px;overflow:hidden}
.right_con > ul > li > div .youtube_wrap .video_frame {width:100%;height:0;padding-bottom:56.25%;position:relative}
.right_con > ul > li > div .youtube_wrap .video {display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;left:0;top:0}
.right_con > ul > li > div .youtube_wrap iframe {width:100%;height:100%}
.right_con > ul > li > div .youtube_wrap .no_video {display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;background-color:var(--colorBgGray);position:absolute;left:0;top:0}
.right_con > ul > li > div .youtube_wrap .no_video .offset {padding:0 10px}
.right_con > ul > li > div .youtube_wrap .no_video .tit {margin-bottom:10px;font-size:20px;font-weight:700}
.right_con > ul > li > div .youtube_wrap .no_video .text {}
.right_con > ul > li > div .down_wrap {width:306px}
.right_con > ul > li > div .down_wrap > p { font-size: 14px; font-weight: 400; color: #9E9E9E; padding: 0 10px; }
.right_con > ul > li > div .down_wrap .board_view_file {display:block;border: 1px solid #E0E0E0; border-radius: 20px; margin: 0 0 10px; overflow: hidden}
.right_con > ul > li > div .down_wrap .board_view_file .file_box {display:block;width:100%;padding:16px 24px}
.right_con > ul > li > div .down_wrap .board_view_file .file_box button { border: 1px solid var(--colorBlue); color: var(--colorBlue); border-radius: 10px; font-weight: 700;font-size: 16px; padding: 10px; margin: 20px 0 0; width: 100%; text-align: center; }
.right_con > ul > li > div .down_wrap .board_view_file .file_box a {display:flex;justify-content:space-between;max-width:100%;-webkit-box-orient:inherit;-webkit-line-clamp:inherit;margin-right:0;padding-left:0;background-image:none}
.right_con > ul > li > div .down_wrap .board_view_file .file_box a > span {font-size: 14px; font-weight: 400; color: #9E9E9E; }
.right_con > ul > li > div .down_wrap .board_view_file .file_box a > p {display:-webkit-inline-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:70%;color:#067DFD;word-break:break-all;overflow:hidden}
.right_con > ul > li > div .down_wrap .board_view_file .tit {display:block;position: relative; font-weight: 700;font-size: 24px; padding: 16px 24px; color: #222222;background: #F5F5F5;width:100%}
.right_con > ul > li > div .post_nav {width:100%;margin:0}

@media screen and (max-width:1700px){
	.left_list {width:320px}
	.left_top {padding:25px 18px}
	.left_top h2 {font-size:32px}
	.left_top > p {padding:5px x0 20px 0}
	.left_menu_list > ul > li > a {font-size:19px}
	.left_menu_list > ul > li.active a:after {font-size:11px}
	.left_menu_list .sub_gnb_area li a {font-size:17px}
	.right_con {width:calc(100% - 320px)}
	.right_con > ul > li > .menu_title h3 {padding:15px 25px;font-size:30px}
	.right_con > ul > li > .menu_title h3 > p {font-size:19px}
	.right_con > ul > li > div.view_wrap {padding:25px;grid-gap:25px}
	.right_con > ul > li > div .youtube_wrap {width:calc(100% - 331px)}
	.right_con > ul > li > div .down_wrap .board_view_file .tit {padding:13px 18px;font-size:21px}
	.right_con > ul > li > div .down_wrap .board_view_file .file_box {padding:14px 18px}
	.right_con > ul > li > div .down_wrap .board_view_file .file_box button {margin-top:16px;font-size:15px}	
}

@media screen and (max-width:1400px){
/* 	.manual_header .menu-bar .gnb_wrap > li { min-width: 130px; }
 	.manual_header .menu-bar .gnb_wrap > li .sitemap_tit .text { font-size: 18px; } */
	.left_list { display: none;}
	.right_con {width:100%}
	.right_con .mo_title {display:block;padding:15px 40px}
	.right_con .mo_title img { display: block; } 
    .right_con .no_content { min-height: 100vh; }
    .right_con .no_content img { width: 70%;}
    .right_con .no_content > div .pc { display: none;  }
	.right_con .no_content > div .mo { display: block; }
    .right_con > ul > li { height: auto;  }
	.right_con > ul > li > .menu_title h3 { padding: 14px 40px; font-size: 22px }
	.right_con > ul > li > .menu_title h3 > p {margin-bottom:6px;font-size:17px}
	.right_con > ul > li > div.view_wrap {padding:30px 40px}
	.right_con > ul > li > div .down_wrap .board_view_file .tit {font-size:18px}
}
	
@media screen and (max-width:1280px){
	/*.manual_header .menu-bar .gnb_wrap > li { min-width: 116px; }
	.manual_header .menu-bar .gnb_wrap > li .sitemap_tit .text { font-size: 16px; }
	.right_con > ul > li > div.view_wrap { display: block; }
	.right_con > ul > li > div.view_wrap > div:not(:first-child) { margin: 40px 0 0;}
	.right_con > ul > li > div .youtube_wrap iframe { height: 47vh; }
	.right_con > ul > li > div .down_wrap .board_view_file { display: flex; align-items: stretch; }
	.right_con > ul > li > div .down_wrap .board_view_file .file_box { flex:1; }
	.right_con > ul > li > div .down_wrap .board_view_file .tit > span { display: inline-block; margin: 40px 0 0; }*/
	.manual_mo_menu .mobile-menu-list > ul > li > a {font-size:16px}
	.right_con > ul > li > div .youtube_wrap {border-radius:16px}
	.right_con > ul > li > div .youtube_wrap .no_video .tit {font-size:19px}
	.right_con > ul > li > div .youtube_wrap .no_video .text {font-size:15px}
	.right_con > ul > li > div .down_wrap .board_view_file {border-radius:16px}
}
	
@media screen and (max-width:1080px){
	.manual_header {margin:0 20px;width:auto !important;padding:15px 0}
	.manual_header .menu-bar {display:none}
    .manual_header .util {display:none}
    
    .manual_body .btn_m_manual {right:20px}
    .manual_mo_menu {max-width:300px;top:75px;right:20px}
    .manual_mo_menu .mobile-menu-list > ul > li > a {padding:13px 15px}
    .manual_mo_menu .mobile-menu-list > ul > li.allow > a:after {font-size:11px;right:15px}
    .manual_mo_menu .mobile-menu-list .sub_gnb_area li a {padding:5px 22px} 
    
    .right_con .mo_title {padding:15px 20px;font-size:22px;line-height:30px}
    .right_con .mo_title h3 {font-size:22px;line-height:32px}
	.right_con > ul > li > .menu_title h3 {padding:14px 20px;font-size:20px}
	.right_con > ul > li > .menu_title h3 > p {font-size:16px}
	.right_con > ul > li > div.view_wrap {padding:20px}
	.right_con > ul > li > div .youtube_wrap {width:100%}
	.right_con > ul > li > div .down_wrap {width:100%}
	.right_con > ul > li > div .down_wrap .board_view_file .tit {padding:10px 18px;font-size:16px}
	.right_con > ul > li > div .down_wrap .board_view_file .file_box {padding:10px 18px}
}

@media screen and (max-width:767px){
	/*.right_con > ul > li > div .youtube_wrap iframe { height: 36vh; }
	.right_con > ul > li > div .down_wrap .board_view_file .tit { font-size: 16px; padding: 8px; }*/
	.right_con > ul > li > div .youtube_wrap .no_video .tit {font-size:17px}
	.right_con > ul > li > div .youtube_wrap .no_video .text {font-size:14px}
}

@media screen and (max-width:480px){
	.right_con .mo_title h3 > p {width:calc(100% - 45px);margin-top:6px;line-height:1.5}
	.right_con > ul > li > div .youtube_wrap .no_video .tit {font-size:16px}
	.right_con > ul > li > div .youtube_wrap .no_video .text {font-size:13px}
}