@charset "UTF-8";

/* sub - background */
.sub-section { width: 100%; height: auto;  background: #f9f9f9; margin: 0 auto; padding: 40px 0; position: relative; display: flex; justify-content: space-between; animation: fadeInUp 1s ease-in-out; }
.sub_container { border: 1px solid #cbd2da; background: #fff; }
.sub_container .infoTitle { border-bottom: 1px solid #cbd2da; color: #162a53; text-align:center; font-size: 1.375rem; padding: 18px 0; font-weight: 600;}
.sub_container .infoArea { padding: 45px; height: auto; min-height: 1000px;}

/* Sidebar */
.sidebar { background-color: #edf2f9; width: 275px; transition: width 0.3s ease-in-out, padding 0.3s ease-in-out; overflow: hidden; position: relative; border-right: 1px solid #cbd2da;}
.sidebar.closed { width: 0; padding: 0;}
.sidebar h3 { font-size:1.375rem; white-space: nowrap; color: #162a53; border-bottom: 1px solid #cbd2da; text-align: left; padding: 18px;}
.sidebar .menu { padding: 20px; }
.sidebar .menu a {  display: block; padding: 13px 15px; margin-bottom: 7px;  color: #333; border-radius: 10px; font-size: 1.125rem; white-space: nowrap;  text-align: left; line-height: 22px;}
.sidebar .menu a:hover { background: #2270bf; color: #fff; }
.sidebar .menu a.on  { background: #2270bf; color: #fff; }

/* Toggle Button */
.toggle-btn { position: absolute; top: 0; left: 232px; background: #2270bf; width: 60px;  height: 60px; cursor: pointer;  z-index: 1000; }

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


/* sub - title or text */
.tit-use-img{width: 100%; position: relative; padding-bottom: 20px; padding-right: 120px; border-bottom: 1px solid #dddddd; margin-bottom: 30px;}
.tit-use-img .mascot-img{position: absolute; right: 0px; bottom: 10px;}
.txt{letter-spacing: -0.6px; line-height:1.5; font-size: 16px; margin-bottom: 5px; color: #333;}
.cont-tit{font-size: 18px; color: #000; font-weight: 600; margin-bottom: 10px; line-height: 1; letter-spacing: -0.6px;}
.cont-tit-blue{font-size: 18px; color: #2270bf; font-weight: 600; margin-bottom: 10px; line-height: 1; letter-spacing: -0.6px;}
.table-cont-tit{color:#162953; font-size:16px; text-align:center; font-weight:600; margin-top:20px; line-height: 1; letter-spacing: -0.6px;}

.dot-txt, .blue-dot-txt{font-size: 16px; font-weight: 400; color: #333; padding-left: 10px; position: relative; margin: 8px 0;line-height: 1.3;}
.dot-txt::before{content: ''; position: absolute; left: 0px; top: 7px; background-color: #333; width: 3px; height: 3px; border-radius: 50%;}
.dot-txt02{font-size: 1rem; font-weight: 400; color: #666; padding-left: 10px; position: relative; margin: 5px 0;line-height: 1.3; word-break: break-all;}
.dot-txt02::before{content: ''; position: absolute; left: 0px; top: 7px; background-color: #666; width: 3px; height: 3px; border-radius: 50%; word-break: break-all;}



.blue-dot-txt{color: #2c61bf;}
.blue-dot-txt::before{content: ''; position: absolute; left: 0px; top: 7px; background-color: #2c61bf; width: 3px; height: 3px; border-radius: 50%;}

.dash-txt{font-size: 16px; font-weight: 400; color: #666;padding-left: 10px; position: relative; margin: 5px 0;line-height: 1.3;}
.dash-txt::before{content: '-'; position: absolute; left: 0px; top: 0px;}

.star-txt{font-size: 16px; font-weight: 400; color: #666;padding-left: 12px; position: relative; margin: 5px 0;line-height: 1.3;}
.star-txt::before{content: '※'; position: absolute; left: 0px; top: 0px;}

.sub-txt-blue{font-size:14px; font-weight:400; color:#3b7bc3; margin-top:10px; margin-left:15px; line-height: 1; letter-spacing: -0.6px;}
.cf-txt{font-size:14px; color:#a0a0a0; text-align:center; line-height:1; letter-spacing: -0.6px;}

/*sub - header */
.sub_visual{width:100%; height:150px; position:relative; background:#f0f3fc url("/images/sub/sub_img.png") no-repeat center center; background-size:cover;}
.sub_visual h3{font-size:36px; color:#000;letter-spacing:-1px; font-weight:500; line-height:150px; text-align:center;}

/*sub -menu */
.sub_menu_wrap{width:100%; position:absolute;}
.sub_menu_wrap .sub_menu{height:52px; position:relative; margin-top:28px; background-color:#fff; border:1px solid #d3d3d3; z-index:1;}
.sub_menu_wrap .sub_menu .sub_home{width:50px; height:50px; box-sizing:border-box; background:#273896 url("/images/icon/ico_home.png") no-repeat center center; text-indent:-9999px; float:left;}
.sub_menu_wrap .sub_menu > ul {border-left:1px solid #d3d3d3; border-bottom:1px solid #d3d3d3;}
.sub_menu_wrap .sub_menu ul{width:300px; display:block; box-sizing:border-box; float:left;}
.sub_menu_wrap .sub_menu ul > .menu_on {border:none; background:url("/images/icon/ico_select_white.png") no-repeat right 22px center;}
.sub_menu_wrap .sub_menu ul > li {margin-bottom:0px; width:100%; height:50px; line-height:50px; padding :0 20px; box-sizing: border-box; position:relative; border-top:1px solid #d3d3d3; border-right:1px solid #d3d3d3; background-color:#fff; transition-property : background-color, color; transition-duration:0.3s; transition-timing-function:ease-out; font-weight:500}
.sub_menu_wrap > div > ul:last-child{border-right:1px solid #d3d3d3 !important;}
.sub_menu_wrap .sub_menu ul > li > a{display:block;}
.sub_menu_wrap .sub_menu .depth_menu > li:hover{background-color: #f8faff;}
.sub_menu_wrap .sub_menu .depth_menu > li:hover a{color: #273896;}
#depth_01, #depth_02,#depth_03 {display:none;}
.depth_open{display:inline-block !important;}

.search-section{display:flex; border:1px solid #cbd2da; }
.search-section .left-section{width:23%; background-color:#edf2f9; border-right:1px solid #cbd2da; transition: width 0.5s ease;}
.search-section .right-section{width:77%; transition: width 0.3s ease; background-color:#fff;}
.search-section .left-section.on{width:60px;}
.search-section .right-section.on{width:calc(100% - 60px);}
.search-section .sec-tit{height:60px; padding:20px; border-bottom:1px solid #cbd2da;}

.search-section .left-section .sec-tit{ position:relative;}
.search-section .left-section .sec-tit span{font-size:18px; font-weight:600; color:#162a53;}
.search-section .left-section .sec-tit .left-btn{display: inline-block;width: 60px;position: absolute;height: 60px;top: 0; right: 0; line-height: 60px; text-align: center; cursor: pointer; background:url('/images/icon/icon_btn_close.png') no-repeat center #2270bf;}
.search-section .left-section .sec-tit .left-btn.on{background:url('/images/icon/icon_btn_open.png') no-repeat center #2270bf;}
.search-section .left-section .sec-cont ul li{ margin: 15px 10px; border-radius: 10px; font-size: 18px; color: #333; font-weight: 500;}
.search-section .left-section .sec-cont ul li.on, .search-section .left-section .sec-cont ul li.active  {background: #2270bf;}
.search-section .left-section .sec-cont ul li a{display: flex; align-items: center; padding:10px 15px; line-height: 22px;}
.search-section .left-section .sec-cont ul li.on a, .search-section .left-section .sec-cont ul li.active a{display: flex; align-items: center; color:#fff; }

.search-section .right-section .sec-tit{text-align:center;}
.search-section .right-section .sec-tit span{font-size:20px; font-weight:600; color:#162a53;}
.search-section .right-section .sec-cont {padding:20px 45px 45px 45px;}
.search-section .right-section .sec-cont .sec-cont-tit{text-align: center;font-size: 16px; line-height:20px; margin-top: 20px;}

.search-section .tit-section {width:100%; height:60px; border-bottom:1px solid #ddd; text-align:center; }
.search-section .tit-section span{font-size:18px; font-weight:600; color:#162a53; line-height:60px;}

/** 에러페이지 **/
.error_gray { background: #f7f7f7; height:100%;}
.errorBoxWrap { width: 100%; max-width: 980px; margin: 0 auto; position: relative; box-sizing: border-box;}
.logo_top { padding-bottom: 20px; text-align: left;}
.error{ padding: 120px 0; }
.error .errorbox{ border-radius: 20px; padding:80px; background: #fff;}
.error .errorbox .erroricon{ margin: 0 auto; text-align:center;}
.error .errorbox .errorcont{ font-size:1.125rem; line-height: 1.3em; text-align: center;}
.error .errorbox .errorcont .tit-text{ font-size: 2rem;font-weight: bold; letter-spacing: -0.2px; padding-bottom: 25px; color: #000; line-height:1.2 ;}
.error .errorbox .errorcont hr {background-color: #ddd; margin-top:0px; margin-bottom:25px; height:1px; border:0; }
.error .errorbox .errorcont p { color: #666;}
.error .errorbox .errorbtn{ margin-top:30px; text-align:center; }
.error .errorbox .errorbtn button{ width:150px; height:45px; font-size:1.25rem; color:#fff; background-color:#2270bf; border: none; border-radius: 25px; cursor: pointer;}


/* 활용가이드 */
.guideArea {display:flex; align-items: flex-start; flex-direction: row; flex-wrap: wrap;}
.guide_wrap { display: flex; flex-direction: row;  flex-wrap: nowrap;  align-items: center; width:100%; gap:50px;}
.guide_wrap .img_con , .guide_wrap .txt_con {width:50%; display:inline-block;}
.guide_wrap .img_con {position:relative;}
.guide_wrap .txt_con { text-align: left; margin: 80px 0; position:relative;}
.guide_wrap .txt_con::before { content: ""; background: url(/images/common/quote_img.png) no-repeat left; width: 29px; height: 21px; top:0; left: 0; position: absolute; }
.guide_wrap .txt_con .title { color: #162a53; font-size:1.75rem; font-weight: 600; margin: 40px 0 40px 0; }
.guide_wrap .button-group { display: flex; flex-direction: column; gap: 10px; width:220px;}  
.guide_wrap .button-group a { text-align: center; padding: 15px 45px;  color:#fff; text-decoration: none;  font-size: 1.125rem;}
.guide_wrap .video-btn { background-color: #2370c0;}
.guide_wrap .download-btn { background-color: #613ea4;}
.author_wrap {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;}
.author_wrap .img_con{width:30%; text-align:center;}
.author_wrap .txt_con{width:70%;}
.author_wrap .txt_con .author_nm{font-weight:800; font-size:1.754em; margin-bottom:30px;}
.author_wrap .txt_con .author_sub{font-size:1.1rem; line-height:1.3rem;}

/* 관련사이트 */
.site_cont { display: flex; gap:45px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
.site_cont ul.type1{ padding:40px; background-color:#edf2f9; width: 48%;}
.site_cont ul.type1 .logobox {float:left; display:flex; align-items: center; justify-content: center; width:300px; margin-right:40px; height: 140px; background-color:#fff; text-align:center; }
.site_cont ul.type1 .logobox img{max-width:80%;}
.site_cont ul.type1 .textbox {float:left; width:calc(100% - 300px - 40px); text-align: left;}
.site_cont ul.type1 .textbox .title{display:inline-block; margin-bottom:10px; font-size:1.25rem; color:#162a53; font-weight:600;}
.site_cont ul.type1 .textbox p {font-size:1rem; line-height:30px; letter-spacing:-0.01em; color:#333; margin-top:30px;}
.site_cont ul.type1 .textbox .a_box{margin-top:35px;}
.site_cont ul.type1 .textbox a { background: #2270bf; padding: 10px 30px; color: #fff;  text-align: center;  display: inline-block;}
.site_cont ul.type1 .textbox a img { margin-right: 15px;}
.site_cont ul.type1 .textbox a:hover { background:#0d57a2;}


/* sub - table */
.tb-red{color:#dc362e; word-break:break-all;}
.tb-blue{color:#0078d4; word-break:break-all;}
.tb-gray{color:#999999; word-break:break-all;}
.sup-blue {font-size:0.875rem; font-weight:400; color:#2270bf; line-height: 1; letter-spacing: -0.6px;}

.img-box-line {  border-radius: 10px; border: 1px solid #ddd; text-align: center; padding: 20px; margin: 15px 0; width: 100%; }
.img-box-line img { max-width: 100%;}