@charset "UTF-8";
body {letter-spacing: -0.05rem; line-height: 1.3; font-size: 1.6rem; width:100%;}
a:focus, a:hover, a:active {text-decoration: none;}
html {--scrollbarBG: #f5f5f5; width:100%;}
.mb_only {display:none;}
/* =============================================================
    sub : layout
============================================================= */
.container.sub {}
.p_info{ text-align:right; width:100%; max-width:1400px; margin:10px  auto;font-size:12px;}
.container.sub .sub-header{}
.container.sub p {word-break: keep-all;}
.sub-header {/*position: relative;*/ padding-top: 100px; z-index: 5;}
.sub-inner {width:100%; max-width:1380px; margin: 0 auto; min-height:602px;padding:0 20px;}
.sub-inner .sub_info_txt{width:90%; max-width:380px; margin: 0 auto;  text-align:center; padding:25px;  background:#fff;  line-height: 1.8;   border-radius:10px; box-shadow:1px 1px 5px 1px rgb(183 183 183 / 30%);}
.sub-inner .sub_info_txt .board_btn .btn_right{width:100%; display:block; margin:0 auto; text-align:center;}
.sub_txt input[type="password"]{margin:0 auto; display:block; width:80%; border:0; border-bottom:2px solid #f5f5f5; padding:10px; }
.sub-cont{width:100%;  margin:10px  auto;}
/* =============================================================
   로그인
============================================================= */

/*로그인*/

.login_01 h1{ color:#232323;}
.login_01 { margin: 0 auto;  width: 30%;   height: 400px;  background: white;   border-radius: 20px;   display: flex;   justify-content: center;  align-items: center; flex-direction: column;  box-shadow:2px 2px 5px 0px #cbcbcb;   border-top: 3px solid #8fc43d;     border-bottom: 3px solid #4a8dcb;}
.login_sns {  padding: 20px;  display: flex;}
.login_sns li {  padding: 0px 15px;}
.login_sns a {  width: 50px;  height: 50px;   display: flex;   align-items: center;   justify-content: center;
  padding: 10px;  border-radius: 50px; background: white;  font-size: 20px;   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(0, 0, 0, 0.1); }
.login_id {  margin-top: 20px;   width: 80%; }

.login_id input {  width: 100%;  height: 50px;  border-radius: 5px;   margin-top: 10px;  padding: 0px 20px;  border: 1px solid #efefef;   outline: none;}
.login_pw {  margin-top: 20px;   width: 80%; }
.login_pw input {  width: 100%;  height: 50px;  border-radius: 5px;  margin-top: 10px;  padding: 0px 20px;   border: 1px solid #efefef; outline: none;}
.login_etc {  padding: 10px;   width: 80%;  font-size: 14px;   display: flex;  justify-content: space-between; align-items: center;   font-weight: bold;}

.submit { margin-top: 20px;  width: 80%;}
.submit input { cursor: pointer;  width: 100%;  height: 50px;  border: 0;  outline: none;  background: #212121; color: white;  font-size: 1.2em;  letter-spacing: 2px;}
.check input[id="box_line"] + label { display:inline-block; width:15px; height:15px; border:2px solid #efefef; cursor:pointer;} 
.check input[id="box_line"] {display:none;}


/* =============================================================*/
   /*2022-11-30 검색*/
/*============================================================= */
.search_cont{position: relative;  margin-top: 105px;width:100%; }
.search_cont .search-wrap{padding:15px 0px 0 0; height:90px;width:100%;  max-width:1380px;  margin:0 auto; background: #f5f5f5;  box-sizing:border-box; border-radius:15px; }
.search_cont .search-wrap .search-text {padding:0 0px 0 0px;    position: relative;}
.mn_ser01_wrap {float:left; width:65%;  overflow:hidden;}
.mn_ser02_wrap { float:right; width:30%;}
.mn_ser002{padding-right:30px;}

.search_cont .search-text .form-control { background: #f5f5f5; height:60px; width:100%;}
.search_cont #searchForm + .search-btn {margin-top:0;}
.search_cont  .search-btn + #searchForm {}
.search_cont #searchForm +  .search-btn {}
.search_cont .mn_ser01 {padding:0 100px 0 30px; width:100%; float:left;}
.search_cont .mn_ser01 ul {width:100%;  float:left;}
.search_cont .mn_ser01 ul li {float:left; width:25%;}
.search_cont .mn_ser01 ul li select {width:95%;}
.search_cont #ssido, .search_cont #sgu, .search_cont #stype, .search_cont #spro { background: #f5f5f5; box-shadow:none; width:calc(95.9%);}
.search_cont .mn_ser01 select{margin-right:3px;}
.search_cont .mn_ser01 + .search-btn { position: relative; right:5px; top:-60px;}
.mn_ser002 .search-btn { position: relative; right:5px; top:-60px;}
#ssido, #sgu, #stype,#spro{ height: 60px; padding: 0;   font-size: 1.7rem;font-weight: 400;line-height: 1.5;color: #6e707e;
    background-color: #f5f5f5; background-clip: padding-box; border-color: transparent; border-radius: 10px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 3%) inset; text-indent: 15px; color: #6e707e; width:calc(97%/4);}
#btnSearch{ height: 60px; color:#fff; background:#8fc43d; padding: 0rem 0.75rem;     line-height: 1.8; font-size: 1.9em;     cursor: pointer; width:60px; border-radius:10px; box-shadow: 1px 1px 5px 1px rgb(43 127 0 / 30%);}




.img-auto {display: block; width: auto; margin: 0 auto;}
.img-full {display: block; width: 100%;}
.img-pc {display: block; width: auto; margin: 0 auto;}
.img-mo {display: none;}
.iframe-cover {position: relative; width: 100%; height: 320px;}
.iframe-cover iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}







/* ------------------------------------- mobile_menu ------------------------------------- */
.close { position:absolute; top:20px; right:0px; width:44px; }  
.all_menu { width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); position:fixed; display:none; z-index:9999; top: 0; }
.all_box { padding:0; width:210px; top:0px; background:#0d61ed; z-index:10; right:-210px; bottom:0; top:0;  position:fixed; overflow-y: auto; }
 
#navi{ margin-top:100px; z-index:24; letter-spacing:-0.05em;} 
#navi h2 a{display: block; padding: 10px 10px 10px 14px; font-size:16px; color: #fff; border-bottom:1px solid #ffffff2b; background:url("/img/common/all_menu_off.png")no-repeat 180px center;  background-size:10px;}

#navi :target h2 a { background:#2b4fb2 url("/common/all_menu_on.png")no-repeat 180px center; background-size:10px;  }
#navi p { height:0; overflow:hidden; border:1px s
-moz-transition:height 0.5s ease-in;
-o-transition:all 0.3s ease-in;
-webkit-transition:height 0.3s ease-in;
transition:height 0.15s ease-in;  }

#navi :target p { height: 36px; border-bottom: 1px solid #ffffff24; background:#4f6cbd;}
#navi p a { display: block; padding-left: 25px; line-height: 36px; font-size: 12px; color: #fff;  }
#navi p a:hover { color:#cce3ff; }

.mo_cs {color:#fff; padding:100px 15px 15px 15px;} 
.mo_cs li a{color:#fff;}
.mo_cs p.mo_cs_st01 {font-size:12px;padding-bottom:10px;font-weight:600;}
.mo_cs p.mo_cs_st02 {font-size:12px;font-weight:400;padding-bottom:20px;}
.mo_cs p.mo_cs_st02 span {font-size:20px;font-weight:600; display:block;}
.mo_cs p.mo_cs_st03 {font-size:12px;font-weight:400;}
.mo_cs p a {color:#fff;}


.tgnb { display:none; }
.gnbbx { width:100%; background:white; height:50px; position:relative; z-index:2; border-bottom:1px solid #D5D5D5; }
.side3 { display:none; } .side4 { display:none; }
.gnbbx2 { width:100%; background:none; height:60px; position:fixed; z-index:50; background:#fff;display:block; border-bottom:1px solid #eee;}







/*mj*/
@media screen and (max-width:900px){
   html, body {min-width:300px;}
   .sub-inner {width:100%; max-width:900px; padding:0 10px; }
   .search_cont{position: relative;  margin:0 auto; padding:90px 15px 0 15px; width:100%;}
	.search_cont .search-wrap{padding:20px 0px 20px 0;  max-width:900px; min-width: 300px; border-radius:10px; height:auto; }
	.search_cont .search-wrap .search-text {padding:0 0px 10px  0px; }
	.mn_ser01_wrap {float:none; width:100%;  overflow:hidden;}
	.mn_ser02_wrap { float:none; width:100%;}
	.mn_ser002{padding:20px 10px 0 10px;}

	.search_cont .search-text .form-control { background: #f5f5f5; height:auto; width:100%;}
	.search_cont #searchForm + .search-btn {margin-top:0;}
	.search_cont  .search-btn + #searchForm {}
	.search_cont #searchForm +  .search-btn {}
	.search_cont .mn_ser01 {padding:0 10px 0px 10px; width:100%; float:none;}
	.search_cont .mn_ser01 ul {width:100%;  float:none;}
	.search_cont .mn_ser01 ul li {float:none; width:100%;}
	.search_cont .mn_ser01 ul li select {width:100%;}
	.search_cont .mn_ser01 + .search-btn { position:static; right:none; top:none; margin:0 auto; padding:0 10px; margin:10px 0;clear:both;}
	.mn_ser002 .search-btn { position: relative; right:0; top:0;margin:10px 0;}
#btnSearch{ height: 50px; color:#fff; background:#8fc43d; padding: 0rem 0.75rem;     line-height: 1.8; font-size: 1.9em;  width:100%; }



   .img-pc {display: none !important;}
    .img-mo {display: block !important; width: 100%;}

}


.sub-h1 {margin-bottom: 60px; font-family: 'Godo', sans-serif; font-weight: 700; font-size: 4.4rem; text-align: center;}
.sub-h1 em{font-style:normal; color:#8fc43d;}
.sub-h2 {font-weight: 700; font-size: 3.0rem; text-align: center; line-height: 1.6;}
.sub-h3 {font-weight: 700; font-size: 2.4rem; text-align: center; line-height: 1.6;}
.sub-h4 {font-weight: 400; font-size: 2.2rem; text-align: center; line-height: 1.6;}
.sub-h5 {font-weight: 400; font-size: 2.0rem; text-align: center; line-height: 1.6;}
.sub-h6 {font-weight: 400; font-size: 1.8rem; text-align: center; line-height: 1.6;}

.sub-p1 {position: relative; font-size: 2.0rem; line-height: 1.5;}
.sub-p1 span {display:block;}
.sub-p2 {position: relative; font-size: 1.8rem; line-height: 1.7; color: #444;}



/* hover시 나타나는 라벨 */
.label_layer{
    display:none;
    position: absolute;
    top:70%; 
    left:50%;
    transform:translateX(-50%);
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eee;
    width: 320px;
    z-index: 1;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.1);
}

.label_list:hover .label_layer{
    display:block;
}

.label_top{
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #00397f;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.label_top>p{
    color:#fff;
}

.label_bottom{
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
}

.label_tip{
    margin-top:2rem;
    margin-left: 2rem;
    color: #ff7817;
    font-weight: 400;
}


/* 개인정보처리방침 안내 아이콘 */
.persnal_icon{
    margin-right:4px;
}

.persnal_icon>img{
    width:28px;
    height:auto;
}




/* 개인정보처리방침 라벨링 아이콘 css */
.privacy_icon{
    width:4.4rem;
    height:auto;
    margin:0 4px 4px 0;
}



@media screen and (max-width:767px){
    .sub-h1 {font-size: 2.8rem;}
    .sub-h1.pcb-01 {font-size: 2.4rem; color: #118ad9;}
    .sub-h2 {font-size: 2.2rem;}
    .sub-h3 {font-size: 2.0rem;}
    .sub-h4 {font-size: 1.8rem;}
    .sub-h5 {font-size: 1.6rem;}
    .sub-h6 {font-size: 1.4rem;}

    .sub-p1 {font-size: 1.6rem;}
    .sub-p2 {font-size: 1.4rem;}
    .sub-p3 {font-size: 1.3rem;}
    
}

@media screen and (max-width: 499px){
    .sub-h1 {font-size: 2.3rem;}
    .sub-h2 {font-size: 1.8rem;}
    .sub-h3 {font-size: 1.6rem;}
    .sub-h4 {font-size: 1.4rem;}
    .sub-h5 {font-size: 1.4rem;}
    .sub-h6 {font-size: 1.4rem;}

}

.icon {position: relative; display: inline-block; vertical-align: middle;}
.icon:after {content: ""; position: absolute;/* top:50%; left: 50%;*/ width: 24px; height: 24px; /*transform: translate(-50%, -50%);*/}
.icon-group {position: absolute; top:53%; right: 10px; transform: translateY(-50%);}

.icon-group li {display: inline-block; width: 80px; height: 80px;}
.icon-group li:last-child {display: inline-block; width: 80px; height: 80px;}
.icon-group li a {display: block; width: 100%; height: 100%;}
.icon-group li a:before {content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px; background: #dcdcdc; transform: translateY(-50%);}
.icon-group li:first-child a:before {content: ""; position: absolute; left: 0; top: 50%; width: 0px; height: 22px; background: #dcdcdc; transform: translateY(-50%);}
.icon-share {position: relative;}
.icon-share:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-40%, -50%); background: url(/portal/img/sub/icon-share.png) no-repeat center;}
.icon-share-link {position: relative;}
.icon-share-link:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-40%, -50%); background: url(/portal/img/sub/icon-share-link.png) no-repeat center;}
.icon-print {position: relative;}
.icon-print:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-40%, -50%); background: url(/portal/img/sub/icon-print.png) no-repeat center;}


.btn-top {border-radius: 15px;}
.bg-line05 {position: relative; border: 3px solid #f1f1f1; height: 400px; margin-bottom: 30px;}
.pcb-moi {display: block;}
.pcb-5 {margin-bottom: 80px;}
@media screen and (max-width: 991px){
    .bg-line05 {height: auto; padding-bottom: 20px;}
    .bg-line05 .img-full {position: static;}
    .pcb-moi {display: inline;}
    .pcb-5 {margin-bottom: 0px;}
}
/* =============================================================
    sub : sub-header
============================================================= */
.lnb-topbar {position: relative; height: 80px; background: #f5f5f5; border-radius: 15px; z-index: 2;}
.lnb-1depth a {display: block; padding-left: 30px; font-size: 1.8rem; font-weight: 600; line-height: 80px; text-decoration: none;}
.lnb-1depth > li {display: inline-block; position: relative; width: 205px;}
.lnb-1depth > li > a.on {color: #00397f;}
.lnb-1depth > li > a:before {content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 22px; background: #dcdcdc; transform: translateY(-50%);}
.lnb-1depth > li > a:after {content: ""; position: absolute; right: 30px; top: 50%; width: 14px; height: 8px; background: url(/portal/img/sub/lnb_arrow_down.png) no-repeat center; transform: translateY(-50%); transition: 0.4s;}
.lnb-1depth > li > a.on:after { transform: translateY(-50%) rotate(180deg);}
.lnb-1depth > li:first-child {width: 150px;}
.lnb-1depth > li:first-child > a {padding-left: 70px;}
.lnb-1depth > li:first-child > a:after {left: 40px; right: auto; width: 18px;height: 18px; background: url(/portal/img/sub/home.svg) no-repeat center/contain;}
.lnb-1depth > li:first-child > a.on:after {transform: translateY(-50%) rotate(0);}
.lnb-1depth > li:nth-child(2) {width: 250px;} 
.lnb-1depth > li:nth-child(3) {width: 285px;}
.lnb-1depth > li:nth-child(4) {width: 285px;}
.lnb-2depth {display: none; position: absolute; top: 80px; left: 0; width: 100%; background: #fff;}
.lnb-2depth.on {display: block;}
.lnb-2depth > li > a {margin-top: 1px; background: #eaeaea; line-height: 60px; font-weight: 400;}
.lnb-2depth > li:hover > a {background: #00397f; color: #fff;} 

.lnb-3depth-group {padding:0; border-bottom: 1px solid #e5e5e5; margin-bottom:80px;}
.lnb-3depth {text-align: center;}
.lnb-3depth li {display: inline-block;}
.lnb-3depth li a {position: relative; display: block; padding: 20px 25px; font-size: 1.8rem; font-weight: 500; color: #888; transition: 0.4s;}
.lnb-3depth li.on a, .lnb-3depth li a.on, .lnb-3depth li:hover a, .lnb-3depth li:active a, .lnb-3depth li:focus a {text-decoration: none; color: #000;}
.lnb-3depth li a:after {content: ""; position: absolute; top:50%; right: 0; height: 15px; width: 1px; background: #d7d7d7; transform: translateY(-50%);}
.lnb-3depth li:last-child a:after {content: none;}
.lnb-3depth li a span {position: relative; display: inline-block; height: 100%;} 
.lnb-3depth li a span:after {content: ""; position: absolute; bottom: calc(-100% + 2px); left: 0; width: 100%; height: 4px; background: #8fc43d; opacity: 0; transition: 0.4s;}
.lnb-3depth li.on a span:after, .lnb-3depth li a.on span:after, .lnb-3depth li:hover a span:after, .lnb-3depth li.focus a span:after, .lnb-3depth li:active a span:after {opacity: 1;}

.lnb-4depth-group {padding: 10px 0 100px;}
.lnb-4depth:after {content: ""; display: block; clear: both;}
.lnb-4depth li {display: block; float: left; height: 60px; margin-bottom: 3px;}
.lnb-4depth.list2 li {width: 50%;}
.lnb-4depth.list3 li {width: 33.333%;}
.lnb-4depth.list4 li {width: 25%;}
.lnb-4depth.list5 li {width: 20%;}
.lnb-4depth.list6 li {width: 16.666%;}
.lnb-4depth.list7 li {width: 14.285%;}
.lnb-4depth li a {display: block; width: calc(100% - 0.3rem); margin: 0 0.15rem; padding: 0 10px; background: #f5f5f5; text-align: center; line-height: 60px; transition: 0.4s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.lnb-4depth li.on a, .lnb-4depth li a.on , .lnb-4depth li:hover a, .lnb-4depth li:active a, .lnb-4depth li:focus a {border: 1px solid #118ad9; background: #fff; box-shadow: 2px 2px 8px 1px rgba(142, 181, 207, 0.13); color: #118ad9; font-weight: 600; text-decoration: none;}

.sub-cont .lnb-3depth-group {padding-top: 0; margin-bottom: 50px;}
@media screen and (max-width: 1023px){
    .lnb-3depth-group {padding-top: 20px;}
    .lnb-4depth.list4 li {width: 50%;}
    .lnb-4depth.list5 li {width: 33.333%;}
    .lnb-4depth.list6 li {width: 33.333%;}
    .lnb-4depth.list7 li {width: 33.333%;}
    .lnb-4depth.list7 li:last-child {width: 100%;}
}
@media screen and (max-width: 767px){
    .lnb-3depth-group {padding-top: 0; padding-bottom: 40px; border-bottom: none;}
    .lnb-3depth li a {padding: 10px 10px; font-size: 1.5rem; font-weight: 400;}
    .lnb-3depth li a span:after {bottom: -7px;}
    .lnb-3depth li a:after {right: -3px; background: #f1f1f1;}
    .lnb-4depth-group {padding: 10px 0 30px;}
    .lnb-4depth.list5 li {width: 50%;}
    /*.lnb-4depth.list5 li:last-child {width: 100%;}*/
    .lnb-4depth.list6 li {width: 50%;}
    .lnb-4depth.list7 li {width: 50%;}
}
@media screen and (max-width: 500px){
    .lnb-3depth-group {padding-bottom: 20px; margin-bottom:0;}
    .lnb-4depth li a {font-size: 1.2rem;}
}
/* =============================================================
    sub : sub-footer
============================================================= */
.sub-footer {padding: 120px 0;}
/* =============================================================
    sub : sub-cont
============================================================= */

.sub-text {display: flex; padding-bottom: 20px; word-break: keep-all;}
.sub-text:last-child { padding-bottom: 0; } 
.text-header {flex: 0 0 20%; max-width: 20%;}
.text-cont {flex: 0 0 80%; max-width: 80%;}
.sub-text .sub-h2 {position: relative; height: 72px; border-bottom: 1px solid #000; text-align: left; line-height: 1.4; letter-spacing: -0.15rem;}
.sub-text .sub-h2 .line02 {position: absolute; bottom: 10px; left: 0; width: 100%;}
.sub-text .sub-h3 {position: relative; display: inline-block; margin-bottom: 20px; text-align: left;}
.sub-text .sub-h3:after {content: ""; position: absolute; top: 5px; right: -13px; width: 5px;height: 5px;border-radius: 50%; background: #118ad9;}
.sub-text .sub-h4 {font-weight: 500; text-align: left;}
.text-cont-inner {width: 95%; margin-left: 5%; padding-top: 72px;}
.text-cont-detail {margin-bottom: 80px;}
.sub-heading {width: 100%; height: 1px; margin-bottom: 50px; background: #d5d5d5;}

@media screen and (max-width:1399px){
    .sub-inner {width: 100%;}
    .lnb-topbar {display: none;}
    .rating-dd {display: none;}
	.sub-p1 span {display:inline;}
}


/* =============================================================
    sub : sub-board
============================================================= */
.sub-board {padding-bottom: 100px;}
.board-topbar {position: relative; width: 100%; height: 50px; margin-bottom: 20px;}
.board-info {position: absolute; top:50%; left: 0; transform: translateY(-50%);}
.board-info-group li {display: inline-block; padding-right: 30px;}
.board-info-group li span {padding-left: 10px; font-weight: 600;}
.board-search {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; justify-content: flex-end; width: 485px;}
.search-select {flex: 0 0 150px; max-width: 150px; margin-left: 1.2%; margin-bottom: 5px;}
/*.search-text {flex: 0 0 45%; max-width: 45%; margin-left: 1.2%;}*/
.top-search .search-text {width: 445px; max-width: 445px;}
.top-search .search-text .form-control {background-color: #f5f5f5;}
.search-submit {flex: 0 0 19.8%; max-width: 19.8%;margin-left: 1.2%;}
.file-group li {display: inline-block; width: 26px; height: 27px;}
.board-pagi {position: relative; padding-top: 40px;}
.board-pagi .pagination {position: absolute; left: 50%; transform: translateX(-50%); width: 100%; text-align: center;}
.board-pagi .pagination li {display: inline-block; vertical-align: middle;}
.board-pagi .pagination a {display: block; width: 40px; height: 40px; border: 1px solid #ddd; line-height: 40px; text-align: center; transition: 0.4s;}
.board-pagi .pagination li.on a, .board-pagi .pagination li:hover a, .board-pagi .pagination li:focus a, .board-pagi .pagination li:active a {background-color: #2f5993; color: #fff;}
.board-pagi .pagination li a.pn-to-first {background: url(/portal/img/sub/double-arrow-left.png) no-repeat center;}
.board-pagi .pagination li a.pn-to-prev {background: url(/portal/img/sub/arrow-left.png) no-repeat center;}
.board-pagi .pagination li a.pn-to-next {background: url(/portal/img/sub/arrow-right.png) no-repeat center;}
.board-pagi .pagination li a.pn-to-last {background: url(/portal/img/sub/double-arrow-right.png) no-repeat center;}

.board-pagi .btn-group {position: absolute; top: 40px; right: 0;}
.board-pagi .btn-group .btn {width: auto; height: auto; padding: 10px 20px;}

.board-accordion {border-top: 2px solid #2f5993;}
.ac-list {border-top: 1px solid #e5e5e5;}
.ac-title {position: relative; padding: 20px 30px; border-bottom: 1px solid #e5e5e5;}
.ac-header li {display: inline-block; width: 94%; padding-right: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ac-header .keyword {color: #118ad9;}
.ac-title .icon-arrow {position: absolute; top: 50%; right: 40px; width: 12px; height: 9px; background: url(/portal/img/sub/select_arrow.png) no-repeat center; transform: translateY(-50%);}
.ac-detail {padding: 40px; background: #f2f5f8;}
.ac-detail .ac-content p {word-break: break-all;}
.ac-content {display: flex; margin-bottom: 40px;}
.ac-content:last-child {margin-bottom: 0;}
.ac-title .ac-content {align-items: center;}
.ac-cont01 {margin-right: 25px;}
.ac-cont02 {width: 100%;}
@media screen and (max-width:1279px){
	.board-pagi .pagination {top: 80px;}
}
@media screen and (max-width:1023px){
	.board-topbar {height: 100px;}
	.board-info {display: none;}
    .topbar02 .board-info {display: none;}
    .topbar02 .search-select {flex: 0 0 18%; max-width: 18%;}
    .topbar02 .search-text {flex: 0 0 40%; max-width: 40%;}
    .topbar02 .search-submit {flex: 0 0 19.8%; max-width: 19.8%;}
    .board-pagi .btn-group {position: absolute; top: 15px; right: auto; left:50%; transform: translateX(-50%);}
}
@media screen and (max-width:767px){
    .top-search .search-text {flex: 0 0 100%; max-width: 100%; width: calc(100% - 75px);}
}

/* =============================================================
    sub : sub-view
============================================================= */
.view-title {text-align: center; word-break: keep-all;}
.view-title span {padding-right: 35px;  color: #e8552b; font-weight: 500;}
.view-info {padding: 40px 0; text-align: center;}
.view-info li {position: relative; display: inline-block; padding: 0 20px; font-weight: 500;}
.view-info li:after {content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 20px; background: #e5e5e5; transform: translateY(-50%);}
.view-info li:last-child:after {content: none;}
.view-info li span {padding-left: 10px; color: #777;}
.view-cont {padding-top: 50px; margin-bottom: 50px; border-top: 1px solid #e5e5e5;}
.view-cont img {display: block; margin: 40px auto; max-width:100%;}
.view-h1 {margin-bottom: 80px; font-weight: 500; text-align: center;}
.view-p {line-height: 2; white-space: pre-wrap;}
.view-file {display: flex; margin: 100px 0; padding: 40px 40px 40px 0; background: #f5f5f5; border-radius: 20px;}
.view-file .file-title {flex: 0 0 10%; max-width: 10%; text-align: center; font-weight: 500;}
.view-file .file-detail {flex: 0 0 90%; max-width: 90%;}
.view-file .file-list li {margin-bottom: 15px; word-break: keep-all;line-height: 2.5;}
.view-file .file-list a {display: inline-block; padding-left: 20px; color: #999;}
.view-footer {position: relative; padding: 0 40px; margin-bottom: 40px; height: 100px; border-top: 1px solid #2f5993; border-bottom: 1px solid #e5e5e5;}
.view-footer:after {content: ""; display: block; clear: both;}
.view-footer .list:after {content: ""; display: block; clear: both;}
.view-footer .list li {position: relative; padding: 0 20px; line-height: 100px;}
.view-footer .list li:nth-child(2):after {content: ""; position: absolute; top:50%;width: 1px; height: 17px; background: #c5c5c5; transform: translateY(-50%);}
.view-footer .list.left li {float:left;}
.view-footer .list.right li {float:right;}
.view-footer .list.left li:nth-child(2):after { right: 0; }
.view-footer .list.right li:nth-child(2):after { left: 0; }
.view-footer .submit {position: absolute; bottom: -125px; left: 50%; width: 150px; height: 60px; transform: translateX(-50%);}
.view-footer .btn-submit {background: #118ad9;border-radius: 10px;  color: #fff;}
@media screen and (max-width: 1023px){
    .view-file {padding: 20px 20px 0 20px;}
    .view-file .file-title {display: none;}
    .view-file .file-detail {flex: 0 0 100%; max-width: 100%;}
    .view-footer {height: auto; padding: 0;}
    .view-footer .list {float: none !important;}
    .view-footer .list li {line-height: 4.0;}
    .view-footer .list li:last-child {width: 60%;}
    .view-footer .list li a {display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .view-footer .list.right li {float: left;}
    .view-footer .list.right .icon-arrow-right:after {background-image: url(/portal/img/sub/arrow-left.png);}
    .view-footer .list.right li:nth-child(2):after {left: auto; right: 0;}
}
@media screen and (max-width: 501px){
	.view-footer .list li {padding: 0 10px;}
	.view-footer .list li:first-child {display: none;}
	.view-footer .list li:last-child {width: 58%;}
	.view-title span {padding-right: 10px;}
	/*.view-title span:before {content: "["}.view-title span:after {content: "]"}*/
}
/* =============================================================
    sub : sub-form
============================================================= */
.sub-form {margin-bottom: 120px; word-break: keep-all;}
.sub-form .btn {word-break: keep-all;}
.form-table .tr {display: flex; align-items: center; padding: 40px 0 15px 0; border-bottom: 1px solid #e5e5e5;}
.form-table .tr:last-child {border-bottom: none;}
.form-table .th {flex: 0 0 12%; max-width: 12%; line-height: 50px;}
.form-table .th .sub-p2 {line-height: 50px;}
.form-table .td {flex: 0 0 88%; max-width: 88%;}
.form-table .td.tdbg-grey {margin-bottom: 20px; background: #f7f7f7;}
.form-container {display: flex; height: 50px;}
.form-container .form-box {flex: 0 0 15%; max-width: 15%; height: 100%;}
.form01 .form-box.list01 {flex: 0 0 74%; max-width: 74%;}
.form01 .form-box.list02 {flex: 0 0 10%; max-width: 10%;}
.form02 .form-box.list01 {flex: 0 0 84%; max-width: 84%;}
.form03 .form-box.list01 {flex: 0 0 15%; max-width: 15%;}
.form03 .form-box.list02 {flex: 0 0 5%; max-width: 5%;}
.form03 .form-box.list02 span {position: relative; display: block; width: 100%; height: 100%; text-indent: -9999px;}
.form03 .form-box.list02 span:after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: #999; transform: translate(-50%, -50%);}
.form04 .form-box.list01 {flex: 0 0 45%; max-width: 45%;}
.form04 .form-box.list02 {flex: 0 0 5%; max-width: 5%;}
.form04 .form-box.list02 span {position: relative; display: block; width: 100%; height: 100%; text-indent: -9999px;}
.form04 .form-box.list02 span:after {content: "@"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: 0;}
.form04 .form-box.list03 {flex: 0 0 24%; max-width: 24%;}
.form04 .form-box.list04 {flex: 0 0 24%; max-width: 24%; margin-left: 2%;}
.form05 .form-box.list01 {flex: 0 0 30%; max-width: 30%;}
.form05 .form-box.list02 {flex: 0 0 10%; max-width: 10%;}
.form05 .form-box.list03 {flex: 0 0 58%; max-width: 58%; margin-left: 2%;}
.form06 .form-box.list01 {flex: 0 0 8%; max-width: 8%; margin-right: 1%;}
.form06 [type="radio"]:checked + label, .form06 [type="radio"]:not(:checked) + label {top: 50%; transform: translateY(-50%);}
.form07 .form-box.list01 {flex: 0 0 auto; max-width: 8%; margin-right: 2%;}
.form07 .form-box.list01 label {position: relative; top: 25%; transform: translateY(-50%);}
.form07 .form-box.list02 {flex: 0 0 8%; max-width: 8%; margin-right: 3%;}
.form-container.form08 {height: 150px;}
.form08 .form-box.list01 {flex: 0 0 112%; max-width: 112%;}
.form-box textarea {width: 100%; height: 150px; padding: 20px;}

.sub-textinfo {padding: 100px 0; margin-bottom: 50px;}

.linebox {margin-top: 20px; padding: 40px 40px 20px; border: 1px solid #d5d5d5; border-radius: 10px;}
.linebox02 {margin-top: 20px; padding: 20px 40px 20px; border: 1px solid #f05022; border-radius: 10px; background: #fff;}
.text-box {margin: 30px 0;}
.text-box [type="checkbox"] + label {margin-left: 10px;}
.btn-submit-group {margin-bottom: 100px; text-align: center; vertical-align: middle;}
.btn-submit-group .btn {display: inline-block; width: 150px; height: 60px;border-radius: 10px;}
.btn-submit-group a.btn {line-height: 48px;}
.btn-submit-group a.btn:hover, .btn-submit-group a.btn:active, .btn-submit-group a.btn:focus {text-decoration: none;}
.btn-submit-group .btn-submit {background: #118ad9; color: #fff;}
.btn-submit-group .btn-cancel {background: #777; color: #fff;}
@media screen and (max-width: 1399px){
    .form-table .th {flex: 0 0 20%; max-width: 20%;}
    .form-table .td {flex: 0 0 80%; max-width: 80%;}
}
@media screen and (max-width: 767px){  
    .sub-form {margin-bottom: 20px;}
    .sub-textinfo {padding: 30px 0;}
    .form-table .tr {padding: 15px 0;}
    .form-table .th {flex: 0 0 30%; max-width: 30%;}
    .form-table .td {flex: 0 0 70%; max-width: 70%;}
    .form-table .th .sub-p2 {line-height: 1.4;}
    .form03 .form-box.list01 {flex: 0 0 30%; max-width: 30%;}
    .form03 .form-box.list02 {flex: 0 0 5%; max-width: 5%;}
    .form03 .form-box.list02 span:after {width: 5px;}
    .form04 .form-box.list01 {flex: 0 0 60%; max-width: 60%;}
    .form04 .form-box.list03 {display: none;}
    .form04 .form-box.list04 {flex: 0 0 35%; max-width: 35%;}
    .btn-submit-group .btn, .btn-submit-group a.btn {display: inline-block; width: auto; height: auto; padding: 0.375rem 2rem; border-radius: 4px; line-height: 1.4;}
    .linebox, .linebox02 {padding: 25px;}
    .text-box {margin: 10px 0 0 0;}
}
@media screen and (max-width: 499px){
    .form-table .th {flex: 0 0 37%; max-width: 37%;}
    .form-table .td {flex: 0 0 63%; max-width: 63%;}
}
/* =============================================================
    sub : sub-table
============================================================= */
.table-01 {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-01 th, .table-01 td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-01 thead th {background: #f5f5f5;  font-weight: 500;}
.table-01 th:last-child, .table-01 td:last-child {border-right: none;}
.table-01 tbody th {background: #f5f5f5;font-weight: 500;}
.table-01 tbody td {color: #555; font-weight: 400; line-height: 1.7;}
.table-01 tbody p {display:block;}

.table-board {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-board th, .table-board td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-board thead th {background: #f5f5f5;  font-weight: 500;}
.table-board th:last-child, .table-board td:last-child {border-right: none;}
.table-board tbody th {background: #f5f5f5;font-weight: 500;}
.table-board tbody td {color: #555; font-weight: 400; line-height: 1.7;}
.table-board tbody p {display:block;}
.table-board .textover {width: 600px;}
.table-board .item-seq00 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #000; color: #000; text-align: center;}
.table-board .item-seq01 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #26a0f0; color: #26a0f0; text-align: center;}
.table-board .item-seq02 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #0049a3; color: #0049a3; text-align: center;}
.table-board .item-seq03 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #f05022; color: #f05022; text-align: center;}
.table-board .item-seq04 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #ffb63f; color: #ffb63f; text-align: center;}
.table-board .item-seq05 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #0c9f50; color: #0c9f50; text-align: center;}
.table-board .item-seq06 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #97cc66; color: #97cc66; text-align: center;}
.table-board .item-seq07 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #a40035; color: #a40035; text-align: center;}
.table-board .item-seq08 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #f62c9c; color: #f62c9c; text-align: center;}
.table-board .item-seq09 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #999; color: #999; text-align: center;}

.table-board01 {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-board01 th, .table-board01 td {padding: 10px 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-board01 thead th {background: #f5f5f5;  font-weight: 500;}
.table-board01 th:last-child, .table-board01 td:last-child {border-right: none;}
.table-board01 tbody th {background: #f5f5f5;font-weight: 500;}
.table-board01 tbody td {color: #555; font-weight: 400; line-height: 1;}
.table-board01 tbody p {display:block;}
.table-board01 .textover {width: 500px;}
.table-board01 .item-seq01 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #118ad9; color: #118ad9; text-align: center;}
.table-board01 .item-seq02 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #00397f; color: #00397f; text-align: center;}
.table-board01 .item-seq03 {display: inline-block; width: 80px; padding: 5px; border: 1px solid #f05022; color: #f05022; text-align: center;}
@media screen and (max-width: 1023px){
    .table-board01-wrap {width: 100%; overflow-x: auto;}
    .table-board01 {width: 905px;}
    .table-board01 th, .table-board01 td {padding: 10px;}
}
.table-board02 {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-board02 th, .table-board02 td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-board02 thead th {background: #f5f5f5;  font-weight: 500;}
.table-board02 th:last-child, .table-board02 td:last-child {border-right: none;}
.table-board02 tbody th {background: #f5f5f5;font-weight: 500;}
.table-board02 tbody td {color: #555; font-weight: 400; line-height: 1;}
.table-board02 tbody p {display:block;}
.table-board02 .textover {width: 600px;}
.table-board02 .icon-notice {position: relative; display: block;}
.table-board02 .icon-notice:after {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
@media screen and (max-width: 1279px){
    .table-board02 .textover {width: 500px;}
    .table-board02 th, .table-board02 td {padding: 10px;}
}
@media screen and (max-width: 1023px){
    .table-board02 colgroup {display: none;}
    .table-board02 thead {display: none;}
    .table-board02 .icon-notice {width: 45px; height: 40px;}
    .table-board02 tbody tr {position: relative; display: block; height: 65px; border-bottom: 1px solid #ddd;}
    .table-board02 tbody tr:last-child {border-bottom: none;}
    .table-board02 tbody tr:after {content: ""; display: block; clear: both;}
    .table-board02 tbody th {position: absolute; display: block; background: none; border: none; text-align: left;}
    .table-board02 tbody td {position: absolute; display: block; border: none; line-height: 20px; text-align: left;}
    .table-board02 tbody .list_num {top: 0; width: 60px; height: 60px; line-height: 40px; text-align: center;}
    .table-board02 tbody .w13 {display: none;}
    .table-board02 tbody .list_tit {top: 0; left: 60px; width: calc(100% - 88px); height: 30px;}
    .table-board02 tbody .list_file {display: none;}
    .table-board02 tbody .list_write {top: 28px; left: 60px; width: 150px; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
    .table-board02 tbody .list_write:before {content: "작성자 : ";}
    .table-board02 tbody .list_date {top: 28px; left: 200px; width: 150px; height: 30px;}
    .table-board02 tbody .list_date:before {content: "작성일 : ";}
    .table-board02 tbody .list_hit {display: none;}
    .table-board02 tbody td .textover {width: 100%;}

}
@media screen and (max-width: 499px){
    .table-board02 tbody .list_tit {width: calc(100% - 80px);}
    .table-board02 tbody .list_write {display: none;}
    .table-board02 tbody .list_date {top: 28px; left: 60px; width: 150px; height: 30px;}
    .table-board02 tbody .list_date:before {content: none;}
}
.scroll-table {width: 100%; padding-bottom: 20px; overflow-x: auto;}
.table-scroll {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-scroll th, .table-scroll td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-scroll thead th {background: #f5f5f5;  font-weight: 500;}
.table-scroll th:last-child, .table-scroll td:last-child {border-right: none;}
.table-scroll tbody th {background: #f5f5f5;font-weight: 500;}
.table-scroll tbody td {color: #555; font-weight: 400; line-height: 1.7;}
.table-scroll tbody p {display:block;}
.table .border-right {border-right: 1px solid #d5d5d5 !important;}

ol.list-depth01 > li {position: relative; padding-left: 25px;}
ol.list-depth01 > li:before {position: absolute; top: 0; left: 0;}
ol.list-depth01 > li:nth-child(1):before {content: "가. ";}
ol.list-depth01 > li:nth-child(2):before {content: "나. ";}
ol.list-depth01 > li:nth-child(3):before {content: "다. ";}
ol.list-depth01 > li:nth-child(4):before {content: "라. ";}
ol.list-depth01 > li:nth-child(5):before {content: "마. ";}
ol.list-depth01 > li:nth-child(6):before {content: "바. ";}
ol.list-depth01 > li:nth-child(7):before {content: "사. ";}
ol.list-depth01 > li:nth-child(8):before {content: "아. ";}
ol.list-depth01 > li:nth-child(9):before {content: "자. ";}
ol.list-depth02 {margin-left: 15px;}
ol.list-depth02 > li {list-style-type:decimal;}
ol.list-depth03 > li {position: relative; padding-left: 25px;}
ol.list-depth03 > li:before {position: absolute; top: 0; left: 0;}
ol.list-depth03 > li:nth-child(1):before {content: "가) ";}
ol.list-depth03 > li:nth-child(2):before {content: "나) ";}
ol.list-depth03 > li:nth-child(3):before {content: "다) ";}
ol.list-depth03 > li:nth-child(4):before {content: "라) ";}
ol.list-depth03 > li:nth-child(5):before {content: "마) ";}
ol.list-depth03 > li:nth-child(6):before {content: "바) ";}
ol.list-depth03 > li:nth-child(7):before {content: "사) ";}
ol.list-depth03 > li:nth-child(8):before {content: "아) ";}
ol.list-depth03 > li:nth-child(9):before {content: "자) ";}

.num-st01 {position: relative; padding-left: 25px;}
.num-st01:before {position: absolute; top: -1px; left: 0;}
.num-st01.num01:before {content: "(1)";}
.num-st01.num02:before {content: "(2)";}
.num-st01.num03:before {content: "(3)";}
.num-st01.num04:before {content: "(4)";}
.num-st01.num05:before {content: "(5)";}
.num-st01.num06:before {content: "(6)";}
.num-st01.num07:before {content: "(7)";}
.num-st01.num08:before {content: "(8)";}
.num-st01.num09:before {content: "(9)";}

.num-st02 {position: relative; padding-left: 40px;}
.num-st02:before {position: absolute; top: 0; left: 17px;}
.num-st02.num01:before {content: "①";}
.num-st02.num02:before {content: "②";}
.num-st02.num03:before {content: "③";}
.num-st02.num04:before {content: "④";}
.num-st02.num05:before {content: "⑤";}
.num-st02.num06:before {content: "⑥";}
.num-st02.num07:before {content: "⑦";}
.num-st02.num08:before {content: "⑧";}
.num-st02.num09:before {content: "⑨";}
.num-st02.num10:before {content: "⑩";}

/* 개인정보처리방침 제10조 들여쓰기로 인한 css추가 */
.num-st02_2 {position: relative; padding-left: 24px;}
.num-st02_2:before {position: absolute; top: 0; left: 17px;}
.num-st02_2.num01:before {content: "①";}
.num-st02_2.num02:before {content: "②";}
.num-st02_2.num03:before {content: "③";}
.num-st02_2.num04:before {content: "④";}
.num-st02_2.num05:before {content: "⑤";}
.num-st02_2.num06:before {content: "⑥";}
.num-st02_2.num07:before {content: "⑦";}
.num-st02_2.num08:before {content: "⑧";}
.num-st02_2.num09:before {content: "⑨";}
.num-st02_2.num10:before {content: "⑩";}
@media screen and (max-width: 1279px){
    .table-board .textover {width: 400px;}
    
}
@media screen and (max-width: 1023px){
    .table-01 th, .table-01 td {padding: 10px 15px;}

    .table-board th, .table-board td {padding: 10px 15px;}
    .table-board .textover {width: 300px;}
}
@media screen and (max-width: 767px){
    .table-01, .table-01 tbody, .table-01 tr, .table-01 th, .table-01 td {display: block;}
    .table-01 {border-bottom: none;}
    .table-01 thead {display: none;}
    .table-01 tr {margin-bottom: 15px; border-bottom: 1px solid #d5d5d5;}
    .table-01 th, .table-01 td {border-left: 1px solid #d5d5d5; text-align: left;}
    .table-01 tbody th {background: none;}
    .table-01 th:first-child, .table-01 td:first-child {border-top: 1px solid #d5d5d5;}
    .table-01 tr:first-child th:first-child, .table-01 tr:first-child td:first-child {border-top: none;}
    .table-01 th:last-child, .table-01 td:last-child {border-right: 1px solid #d5d5d5;}
    .table-01 th, .table-01 td {position: relative; padding-left: 120px;}
    .table-01 th:before, .table-01 td:before {content: attr(title); display: inline-flex; position: absolute; top: 0; left: 0; width: 100px; height: 100%; background: #f1f1f1;align-items: center; justify-content: center;}
    
    .table-board, .table-board tbody, .table-board tr, .table-board th, .table-board td {display: block;}
    .table-board {border-bottom: none;}
    .table-board thead {display: none;}
    .table-board tr {margin-bottom: 15px; border-bottom: 1px solid #d5d5d5;}
    .table-board th, .table-board td {border-left: 1px solid #d5d5d5; text-align: left;}
    .table-board tbody th {background: none;}
    .table-board tbody td {min-height: 45px;}
    .table-board th:first-child, .table-board td:first-child {border-top: 1px solid #d5d5d5;}
    .table-board tr:first-child th:first-child, .table-board tr:first-child td:first-child {border-top: none;}
    .table-board th:last-child, .table-board td:last-child {border-right: 1px solid #d5d5d5;}
    .table-board th, .table-board td {position: relative; padding-left: 120px;}
    .table-board th:before, .table-board td:before {content: attr(title); display: inline-flex; position: absolute; top: 0; left: 0; width: 100px; height: 100%; background: #f1f1f1;align-items: center; justify-content: center;}
    .table.notitle th:before, .table.notitle td:before {content: attr(date-title);}
    .table-board .textover {width: 100%; white-space: inherit;}

    .board-info-group {display: none;}
    .board-search {width: 100%;}
    .board-pagi .pagination a {width: 20px; height: 20px; border-radius: 50%; border: none; line-height: 20px; font-size: 1.2rem;}
    
    .table-scroll {width: 680px; border-top: none;}
}
/* =============================================================
    sub : intro
============================================================= */
.sub-intro01 {height: 520px; padding-top: 100px; margin-bottom: 200px;}
.intro-cont {padding-bottom: 80px; background: #f5f5f5; word-break: keep-all;}
.intro-cont .sub-inner:after {content: ""; display: block; clear: both;}
.intro-cont .intro-img {float: left; width: 580px; height: 550px; margin-top: -100px; border-radius: 30px; box-shadow: 7px 13px 13px 5px rgba(0,0,0,0.12); overflow: hidden;}
.intro-cont .intro-text {float: right; width: calc(100% - 650px); padding-top: 100px; }
.intro-cont .sub-h2 {position: relative; padding-bottom: 90px; text-align: left;}
.intro-cont .sub-h2:after {content: ""; position: absolute; bottom: 45px; left: 0; width: 50px;height: 3px;background: #118ad9;}
.intro-cont .sub-h2 span {display: block;}

.intro-list01 {width: 85%; margin: 0 auto; padding-top: 0;}
.intro-list01 ul:after {content:""; display: block; clear: both;}
.intro-list01 li {position: relative; float: left; width: 25%; height: 390px;}
.intro-list01 li:before {content: ""; position: absolute; top: 100px;right:0; width: 8px; height: 8px; background: #118ad9; transform: rotate(45deg);}
.intro-list01 li:nth-child(4n):before, .intro-list01 li:nth-child(4n):after {content: none;}
.intro-list01 .list-icon {position: relative; width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 50%; background: #f9f9f9;}
.intro-list01 .list-icon:before, .intro-list01 .list-icon:after {content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
.intro-list01 .list-icon:before {width: 170px; height: 170px; background: #f1f1f1;}
.intro-list01 .list-icon:after {width: 140px; height: 140px; background: #fff;}
.intro-list01 .list-icon span {display: inline-block; position: absolute; top: 50%; left: 50%; width: 69px; height: 65px; transform: translate(-50%, -50%); background: url(/portal/img/sub/p07/e0101-01.png) no-repeat center/contain; z-index: 2;}
.intro-list01 .list-icon .icon-search {background-image: url(/portal/img/sub/p07/e0101-01.png);}
.intro-list01 .list-icon .icon-pie {background-image: url(/portal/img/sub/p07/e0101-02.png);}
.intro-list01 .list-icon .icon-bar {background-image: url(/portal/img/sub/p07/e0101-03.png);}
.intro-list01 .list-icon .icon-lamp {background-image: url(/portal/img/sub/p07/e0101-04.png);}
.intro-list01 .list-icon .icon-antenna {background-image: url(/portal/img/sub/p07/e0101-05.png);}
.intro-list01 .list-icon .icon-group {background-image: url(/portal/img/sub/p07/e0101-06.png);}
.intro-list01 .list-icon .icon-chart {background-image: url(/portal/img/sub/p07/e0101-07.png);}
.intro-list01 .list-icon .icon-badge {background-image: url(/portal/img/sub/p07/e0101-08.png);}
.intro-list01 .list-text {width: 80%; margin: 0 auto; text-align: center;}


.intro-list01_01 {width:100%; margin: 0 auto; padding-top: 0;}
.intro-list01_01 ul {position:relative;}
.intro-list01_01 ul:after {content:""; display: block; clear: both;}
.intro-list01_01 > ul:before {content:"";position:absolute;height:4px;width:100%;background:#f1f1f1;top:90px;}
.intro-list01_01 li {position: relative; float: left; width: 33.33%; }
.intro-list01_01 > ul > li:before {content: ""; position: absolute; top:88px;right:-4px; width: 8px; height: 8px; background: #118ad9; transform: rotate(45deg);}
.intro-list01_01 li:nth-child(3n):before, .intro-list01 li:nth-child(3n):after {content: none;}
.intro-list01_01 .list-icon {position: relative; width: 190px; height: 190px; margin: 0 auto 20px; border-radius: 50%; background: #fff;border:4px solid #f1f1f1;
box-shadow:2px 7px 10px 3px rgb(213,213,213, 0.3);}

.intro-list01_01 ul li .list-icon span.fst-word {position:absolute;font-size:3rem;font-weight:bold;top:50%;left:50%;transform:translate(-50%,-50%);margin-top:-20px;}
.intro-list01_01 ul li .list-icon span.word {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin-top:17px;}
.intro-list01_01 ul li .e-cl span {color:#079fae}
.intro-list01_01 ul li .s-cl span {color:#118ad9}
.intro-list01_01 ul li .g-cl span {color:#e8552b}

.intro-list01_01 .list-text {width:95%; margin: 0 auto; text-align: center;background:#f5f5f5;border-radius:20px;height:310px;margin-top:45px;}
.intro-list01_01 .list-text ul {}
.intro-list01_01 .list-text ul li {width:100%;}
.intro-list01_01 .list-text ul li span {display:block;}
.intro-list01_01 .list-text ul li:first-child {margin-top:24px;}
.intro-list01_01 .list-text ul li:nth-child(2) {margin-top:24px;font-weight:bold;font-size:2.2rem}
.intro-list01_01 .list-text ul li:last-child {margin-top:20px;font-weight:300;font-size:1.8rem;line-height:2.6rem}
.intro-list01_01 .list-text .list-text-unit {padding:40px 10px;}

.e-cl {color:#079fae !important}
.s-cl {color:#118ad9 !important}
.g-cl {color:#e8552b !important}
.gv-cl {color:#255591 !important}



.sub-intro01 .intro-bg.int02 {height: 480px;}
.sub-intro01 .sub-h2.int01:after {bottom: 20px;}
.sub-intro01 .sub-p1 .int02 {display: block;}
@media screen and (max-width: 767px){
    .sub-intro01 .sub-p1 .int02 {display: inline;}
    .intro-cont .sub-h2:after {bottom: 20px;}
}

.sub-intro02 .img-header {position: relative; height: 350px;}
.sub-intro02 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro02 {position: relative; word-break: keep-all;}
.intro-bg {position: absolute; top: 650px; left: 0; width: 100%; height: 695px; background: #f5f5f5; z-index: -1;}
.sub-intro02 .intro-bg {top: 325px;}
.sub-intro02 .intro-cont {position: relative; background: none;}
.sub-intro02 .sub-h1 {font-size: 4.0rem; text-align: left;}
.sub-intro02 .sub-h1 span {display: block;}
.sub-intro02 .intro-img {float: none; width: 100%; height: 350px; margin-top: 0;}
.sub-intro02 .intro-text {width: 55%; height: auto;}
.sub-intro02 .intro-text.left {float: left; width: 40%;}
.sub-intro02 p.sub-h2:after {content: none;}
.sub-intro02 .sub-p1 {margin-bottom: 40px;}
.sign {text-align: right;}
.sign span {position: relative; padding-left: 10px;}
.sign span:before {content: ""; position: absolute; top: 50%; left: 0; width: 5px; height: 20px; background: #118ad9; transform: translateY(-50%);}
.sign img {padding-left: 10px;}
@media screen and (max-width:501px){
	.sign img {width: 60px;}
}
.sub-intro03 {position: relative;}
.sub-intro03 .intro-bg {position: absolute; top: 360px; width: 100%; height: 350px; background: #f5f5f5;}
.sub-intro03 .intro-dd {position: relative; margin-top: 60px;}
.sub-intro03 .sub-h1 {position: relative; margin-bottom: 0;}
.sub-intro03 .sub-h1:after {content: ""; position: absolute; top: -65px; left: 50%; width: 380px;height: 355px; background: url(/portal/img/sub/p07/e0301-01.png) no-repeat center; transform: translateX(-50%); z-index: -1;}
.sub-intro03 .intro-top {width: 100%; height: 350px; margin-top: 95px; background: url(/portal/img/sub/p07/e0301-02.png) no-repeat center/cover;}

.sub-intro04 .img-header {width: 100%; height: 350px; background: url(/portal/img/sub/p07/e0401-01.png) no-repeat center/cover; border-radius: 20px; box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro04 .img-header .sub-h2 {text-align: center; line-height: 350px;}
.sub-intro04 .intro-detail {width: 100%; margin: 100px auto 80px;}
.sub-intro04 .img-detail {padding: 60px 0; background: #f5f5f5;}
.sub-intro04 .img-detail img {display: block; width: auto; margin: 0 auto;}

.sub-intro05 .img-header {position: relative; height: 350px;}
.sub-intro05 .img-header:after {content: ""; position: absolute; bottom: -76px; right: 66px; width: 140px; height: 140px; background: url(/portal/img/main/logo-symbol.png) no-repeat center; z-index: 2;}
.sub-intro05 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro05 .img-header-title {position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%);}
.sub-intro05 .img-header-title .sub-h2 {margin-bottom: 50px;}
.sub-intro05 .img-header-title .sub-h5 {width: 80%; margin: 0 auto;}
.intro-ul {width: 80%; margin: 100px auto 0;}
.intro-ul li {position: relative; width: 100%; height: 200px; margin-bottom: 45px; border-radius: 5px 30px 5px 30px; background: #f5f5f5;}
.list-dd {position: absolute; top: 50%; left: 60px; width: 84%; transform: translateY(-50%);}
.sub-intro05 .list-dd .sub-p1 {padding-left: 100px;}
.sub-intro05 .list-dd .sub-p1:after {content: ""; position: absolute; top: 50%; left: 0; width: 75px; height: 75px; transform: translateY(-50%); background: url(/portal/img/sub/p07/e0501-i01.png) no-repeat 0 50%/contain;}
.list-dd .sub-p1 span {display: block;}
.sub-intro05 .list-dd .sub-p1.symbol01:after {background-image: url(/portal/img/sub/p07/e0501-i01.png);}
.sub-intro05 .list-dd .sub-p1.symbol02:after {background-image: url(/portal/img/sub/p07/e0501-i02.png);}
.sub-intro05 .list-dd .sub-p1.symbol03:after {background-image: url(/portal/img/sub/p07/e0501-i03.png);}
.sub-intro05 .list-dd .sub-p1.symbol04:after {background-image: url(/portal/img/sub/p07/e0501-i04.png);}
.sub-intro05 .list-dd .sub-p1.symbol05:after {background-image: url(/portal/img/sub/p07/e0501-i05.png);}
.sub-intro05 .sign {text-align: center;}
.sub-intro05 .sign span:before {content: none;}

.sub-intro06 .img-header {position: relative; height: 350px;}
.sub-intro06 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro06 .img-header-title {position: absolute; top: 100px; right: 90px; width: 260px; height: 100px;}
.sub-intro06 .img-header-title .sub-h2 {text-align: right;}
.sub-intro06 .img-header-title .sub-h2 span {display: block;}
.sub-intro06 .sub-h3 {margin-top: 70px; font-weight: 600;}
.sub-intro06 .sub-h3 span {display: block;}
.sub-intro06 .tab-detail-group {margin-top: 50px;}

.sub-intro07 {position: relative; height: 600px; margin-bottom: 100px;}
.sub-intro07 .intro-bg {position: absolute; bottom: 0; left: 0; width: 100%; height: 400px; background: #f5f5f5; z-index: -1;}
.sub-intro07 .intro-cont {position: absolute; top: 0; width: 100%; background: none;}
.sub-intro07 .intro-cont .sub-inner {position: relative;}
.sub-intro07 .intro-cont img {width: 100%; border-radius: 30px; box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro07 .intro-title {width: 50%; margin: 70px auto 0; text-align: center;}
.sub-intro07 .intro-title:after {content: none;}
@media screen and (max-width:1279px){
    .sub-intro07 {height: auto; margin-bottom: 0;}
    .sub-intro07 .intro-bg {display: none;}
    .sub-intro07 .intro-cont {position: relative; padding-bottom: 0;}
    .sub-intro07 .intro-title  {width: 80%;}
    .sub-intro05 .img-header:after {bottom: 0; right: 50px; width: 100px; height: 100px; background-size: contain;}
}
.sub-intro08 {margin-bottom: 100px;}
.sub-intro08 .intro-bg {top:900px; height: 450px;}
.sub-intro08 .intro-bg.int01 {top:914px; height: 628px;}
.sub-intro08 .img-header {position: relative; height: 350px;}
.sub-intro08 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro08 .img-header-title {position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%);}
.sub-intro08 .img-header-title .sub-h2 {margin-bottom: 10px;}
.sub-intro08 .img-header-title .sub-h5 {width: 80%; margin: 0 auto;}
.sub-intro08 .sub-p1.int01 {margin-bottom: 170px;}
@media screen and (max-width:1279px){
    .sub-intro08 .sub-p1.int01 {margin-bottom: 0;}
}

.history-header {width: 20px; height: 20px; margin: 30px auto 15px; border-radius: 50%; border: 5px solid #f05022;}
.history-detail {position: relative; width: 100%; height: 1330px;}
.history-line {position: absolute; top: 0; left: 50%; width: 5px; height: 100%; background: #e5e5e5; transform: translateX(-50%); overflow: hidden; z-index: -1;}
.history-fill {position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: #f05022;}
.history-list {position: relative;}
.history-list:after {content: ""; position: absolute; top: 7px; left: -64px; width: 12px; height: 12px; background: #fff; border-radius: 50%; border: 2px solid #333;}
.history-list .sub-p1 {display: flex;}
.history-list .th {flex: 0 0 20%; max-width: 20%; font-weight: 700;}
.history-list .td {flex: 0 0 75%; max-width: 75%;}
.history-list .td-dd {position: relative;}
.history-list .td-dd span:nth-child(2) {display: block;}
.history-list .td-dd:before {content: "·"; padding-right: 10px;}
.history-wrap {width: 50%; height: 907px;}

.history-unit {width: 100%; padding: 50px 0; border-radius: 30px; background: #f5f5f5; text-align: center;}
.history-unit .th {padding-right: 45px; font-weight: 700;}

.history01 .history-list {position: absolute; width: 50%;}

.history01 .history-list:nth-child(2n-1) {left:54%;}
.history01 .history-list:nth-child(2n) {left:-4%; text-align: right;}
.history01 .history-list:nth-child(2n):after {left: auto; right: -64px;}
.history01 .history-list:nth-child(2n) .sub-p1 {flex-direction: row-reverse;}

.history01 .history-list:nth-child(1) {top: 50px;}
.history01 .history-list:nth-child(2) {top: 150px;}
.history01 .history-list:nth-child(3) {top: 250px;}
.history01 .history-list:nth-child(4) {top: 405px;}
.history01 .history-list:nth-child(5) {top: 590px;}
.history01 .history-list:nth-child(6) {top: 800px;}

.history02 .wrap01, .history03 .wrap01, .history04 .wrap01 {position: absolute; left: 54%;}
.history02 .wrap02, .history03 .wrap02, .history04 .wrap02 {position: absolute; left: -4%;}
.history02 .history-list, .history03 .history-list, .history04 .history-list {position: absolute; width: 100%;}
.history02 .wrap02 .history-list, .history03 .wrap02 .history-list, .history04 .wrap02 .history-list {text-align: right; right: 0;}
.history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {left: auto; right: -64px;}
.history02 .wrap02 .history-list .sub-p1, .history03 .wrap02 .history-list .sub-p1, .history04 .wrap02 .history-list .sub-p1 {flex-direction: row-reverse;}
.history02 .wrap01 .sub-h5, .history03 .wrap01 .sub-h5, .history04 .wrap01 .sub-h5 {position: absolute; top: -42px; left: 100px;}
.history02 .wrap02 .sub-h5, .history03 .wrap02 .sub-h5, .history04 .wrap02 .sub-h5  {position: absolute; top: -42px; right: 100px;} 

.history02 .history-detail {height: 1600px;}
.history02 .wrap01 .history-list:nth-child(1) {top: 60px;}
.history02 .wrap01 .history-list:nth-child(2) {top: 390px;}
.history02 .wrap01 .history-list:nth-child(3) {top: 550px;}
.history02 .wrap01 .history-list:nth-child(4) {top: 950px;}
.history02 .wrap01 .history-list:nth-child(5) {top: 1200px;}
.history02 .wrap01 .history-list:nth-child(6) {top: 1400px;}
.history02 .wrap02 .history-list:nth-child(1) {top: 60px;}
.history02 .wrap02 .history-list:nth-child(2) {top: 230px;}
.history02 .wrap02 .history-list:nth-child(3) {top: 390px;}
.history02 .wrap02 .history-list:nth-child(4) {top: 550px;}
.history02 .wrap02 .history-list:nth-child(5) {top: 800px;}
.history02 .wrap02 .history-list:nth-child(6) {top: 950px;}
.history02 .wrap02 .history-list:nth-child(7) {top: 1200px;}

.history03 .history-detail {height: 800px;}
.history03 .wrap01 .history-list:nth-child(1) {top: 60px;}
.history03 .wrap01 .history-list:nth-child(2) {top: 180px;}
.history03 .wrap01 .history-list:nth-child(3) {top: 420px;}
.history03 .wrap01 .history-list:nth-child(4) {top: 570px;}
.history03 .wrap02 .history-list:nth-child(1) {top: 180px;}
.history03 .wrap02 .history-list:nth-child(2) {top: 570px;}
.history03 .wrap02 .history-list:nth-child(3) {top: 700px;}

.history04 .history-detail {height: 800px;}
.history04 .wrap01 .history-list:nth-child(1) {top: 400px;}
.history04 .wrap01 .history-list:nth-child(2) {top: 500px;}
.history04 .wrap01 .history-list:nth-child(3) {top: 600px;}

.history04 .wrap02 .history-list:nth-child(1) {top: 60px;}
.history04 .wrap02 .history-list:nth-child(2) {top: 150px;}
.history04 .wrap02 .history-list:nth-child(3) {top: 300px;}

.history-dev {padding-top: 50px;}
.history-dev .history-detail {height: 1610px;}
.history-dev .history-fill {background: #118ad9;}
.history-dev .history-header {border-color: #118ad9;}
.history-dev .history-list .sub-p1 {display: block;}
.history-dev .step-title {font-size: 2.6rem; font-weight: 700; color: #118ad9;}
.history-dev .history-list .th {flex:auto; max-width: 100%;}
.history-dev .history-list .td {flex:auto; max-width: 100%;}
.history-dev .history01 .history-list:nth-child(2) {top: 335px;}
.history-dev .history01 .history-list:nth-child(3) {top: 695px;}
.history-dev .history01 .history-list:nth-child(4) {top: 955px;}
.history-dev .history01 .history-list:nth-child(5) {top: 1250px;}
.btn-group.btn-auto.small .btn {margin: 1rem;}
@media screen and (max-width: 1399px){
    .history .sub-inner {width: 1200px;}
    .history-list:after {left: -56px;}
    .history01 .history-list:nth-child(2n):after {right: -56px;}
    .history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {right: -56px;}
}
@media screen and (max-width: 1279px){
    .intro-list01 {width: 100%; padding-top: 0;}
    .intro-cont .intro-img {width: 450px; height: 450px;}
    .intro-cont .intro-img img {display: block; width: 120%;}
    .intro-cont .intro-text {width: calc(100% - 550px);}
    .intro-bg {display: none;}
    .sub-intro02 .sub-h1 {font-size: 3.0rem;}
    .sub-intro02 .intro-img {position: relative; width: 100%; height: 260px;}
    .sub-intro02 .intro-text {width: 55%; height: auto;}
    .sub-intro02 .intro-text.left {width: 40%;}
    .sub-intro03 .intro-top {height: 200px;}
    .sub-intro04 .img-detail img {width: 100%;}
    .img-header:after {content: none;}
    .intro-ul {margin: 0 auto;}
    .intro-ul li {height: 117px;}
    .history .sub-inner {width: 1000px;}
    .history-list:after {left: -48px;}
    .history01 .history-list:nth-child(2n):after {right: -48px;}
    .history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {right: -48px;}
}
@media screen and (max-width: 1023px){
    .sub-intro01 {height: auto; padding-top: 0; margin-bottom: 50px;}
    .intro-list01 { margin: 0 auto 40px;}
    .intro-list01 li {width: 50%; height: 310px;}
    .intro-list01 .list-text {width: 60%;}
    .intro-list01 li:nth-child(2n):before {content: none;}
    .intro-cont .intro-img {width: 350px; height: 350px; margin-top: -30px;}
    .intro-cont .intro-text {width: calc(100% - 400px);}
    .sub-intro02 .sub-h1 {font-size: 2.5rem;}
    .sub-intro02 .intro-img {width: 100%; height: 220px; margin-top: 0;}
    .sub-intro02 .intro-img img {position: absolute; top: 50%; left: 50%; min-height: 103%; transform: translate(-50%, -50%);}
    .sub-intro02 .img-header {height: 200px;}
    .sub-intro04 .img-header {height: 200px;}
    .sub-intro04 .img-header .sub-h2 {line-height: 200px;}
    .intro-ul {width: 100%;}
    .img-header {height: 200px;}
    .img-header-title .sub-h2 {margin-bottom: 0;}
    .img-header-title .sub-h5 {display: none;}
    .intro-ul {margin: 50px auto 0;}
    .sub-intro05 .img-header-title .sub-h2 {margin-bottom: 15px;}
    .sub-intro05 .img-header-title .sub-h4 {font-size: 1.6rem; word-break: keep-all;}
    .sub-intro06 .img-header {height: 200px;}
    .sub-intro06 .img-header-title {top: 50%; right: 5%; transform: translateY(-50%); height: auto;}
    .sub-intro06 .sub-h4 {margin-top: 50px;}

    .tab-detail {position: relative;}
    .history .sub-inner {width: 760px; margin: 0;}
    .history .sub-p1 {font-size: 1.4rem; line-height: 1.7;}
    .history .sub-h2 {width: 95%;margin: 0 auto 30px; text-align: left;} 
    .history-detail {height: auto !important; padding-top: 30px; padding-left: 30px;}
    .history-wrap {width: 90%; height: auto; margin: 0 auto 0; padding-left: 0;}
    .history-header {position: absolute; top: 20px; left: 22px; background: #fff ; z-index: 2;}
    .history-line {top: 0; left: 30px; transform: translateX(0);}
    .history-list {position: relative; left: 0; width: 100% !important; margin-bottom: 30px;}
    .history-list:after {top: 4px; left: -42px;}
    .history-list .td-dd:before {padding-right: 4px;}
    .history-unit {width: 90%; margin: 0 0 0 20px; padding: 50px;}

    .history01 .history-list {position: relative;}
    .history01 .history-list:nth-child(2n-1) {top: 0px; left: 0;}
    .history01 .history-list:nth-child(2n) {top: 0px; left: 0; text-align: left;}
    .history01 .history-list:nth-child(2n) .sub-p1 {flex-direction: row;}
    .history01 .history-list:nth-child(2n):after {left: -42px; right: auto;}

    .history02 .wrap01, .history03 .wrap01, .history04 .wrap01 {position: static;}
    .history02 .wrap02, .history03 .wrap02, .history04 .wrap02 {position: static;}
    .history02 .history-list, .history03 .history-list, .history04 .history-list {position: relative; top: 0 !important; left: 0;}
    .history02 .wrap02 .history-list, .history03 .wrap02 .history-list, .history04 .wrap02 .history-list {text-align: left; right: 0;}
    .history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {left: -42px; right: auto;}
    .history02 .wrap02 .history-list .sub-p1, .history03 .wrap02 .history-list .sub-p1, .history04 .wrap02 .history-list .sub-p1 {flex-direction: row;}
    .history02 .wrap01 .sub-h5, .history03 .wrap01 .sub-h5, .history04 .wrap01 .sub-h5 {position: static; padding-bottom: 40px; font-size: 1.8rem; text-align: left;}
    .history02 .wrap02 .sub-h5, .history03 .wrap02 .sub-h5, .history04 .wrap02 .sub-h5  {position: static; padding-bottom: 40px; font-size: 1.8rem; text-align: left;} 
    
    .history-dev .history01 .history-list {position: static;}
    .history-dev .history01 .history-list:after {content: none;}
}
@media screen and (max-width: 767px){
    .intro-cont {padding-bottom: 40px; background: none;}
    .intro-cont .intro-img {float: none; width: 100%;}
    .intro-cont .sub-h2 {padding-bottom: 40px;}
    .sub-intro01 .intro-cont .intro-img {height: 170px; margin-top: 30px;}
    .sub-intro01 .intro-cont .intro-img.img2 {position: relative;height: 210px;}
    .sub-intro01 .intro-cont .intro-img.img2 img {position: absolute; top: -70%; left: 0; width: 100%;}
    .sub-intro01 .intro-cont .intro-img.img3 {position: relative;height: 210px;}
    .sub-intro01 .intro-cont .intro-img.img3 img {position: absolute; top: -110%; left: 0; width: 100%;}
    
    .sub-intro01 .intro-cont .intro-text {float: none; width: 100%; padding-top: 40px;}
    .sub-intro01 {margin-bottom: 0;}
    .intro-list01 .list-icon {width: 160px; height: 160px;}
    .intro-list01 .list-icon:before {width: 150px; height: 150px;}
    .intro-list01 .list-icon:after {width: 140px; height: 140px;}
    .sub-intro02 .sub-h1 {font-size: 2.2rem;}
    .sub-intro02 .intro-img {width: 100%; height: 150px; margin-bottom: 50px;}
    .sub-intro02 .intro-text {float: none; width: 100%; padding-top: 0;}
    .sub-intro02 .intro-text.left {float: none; width: 100%;}
    .sub-intro02 .intro-cont {padding-bottom: 0;}
    .btn-group.btn-auto.small {margin-bottom: 50px;}
    .btn-group.btn-auto.small .btn {padding-right: 45px; margin: 3px;} 

    .sub-intro03 .intro-top {height: 150px; margin-top: 30px;}
    .sub-intro04 .img-header {height: 150px;}
    .sub-intro04 .img-header .sub-h2 {line-height: 150px;}

    .sub-intro05 .img-header {height: 200px;}
    .sub-intro05 .img-header img {width: 130%;}
    .sub-intro05 .img-header-title .sub-h2 {margin-bottom: 10px;}
    .sub-intro05 .img-header-title .sub-h4 {font-size: 1.2rem;}
    .sub-intro05 .img-header:after {bottom: -20px; right: 20px; width: 80px; height: 80px;}
    .sub-intro06 .sub-h3 {margin-top: 20px;}
    .sub-intro08 .img-header {height: 200px;}
    .list-dd {position: static; transform: translateY(0);}
    .intro-ul {width: 90%;}
    .intro-ul li {height: auto; background: none;}
    .list-dd .sub-p1 {padding-left: 70px; background-size: 50px; background-position: 0 0;}
    
    .history .sub-inner {width: 500px; margin: 0;}
    .history-wrap {width: calc(100% - 37px); margin: 0 0 0 37px;}
    .history-unit {width: 80%; padding: 10px;}
    .list-dd {width: 100%;}
    .list-dd .sub-p1 span {display: inline;}
}
@media screen and (max-width: 499px){
    .intro-cont {padding-bottom: 30px;}
    .intro-cont .intro-text {padding-top: 50px;}
    .intro-list01 li {height: 210px;}
    .intro-list01 .list-icon {width: 100px; height: 100px;}
    .intro-list01 .list-icon:before {width: 90px; height: 90px;}
    .intro-list01 .list-icon:after {width: 75px; height: 75px;}
    .intro-list01 .list-icon span {width: 30px; height: 30px;}
    .intro-list01 li:before {top: 45px; right: -4px;}
    .intro-list01 .list-text {width: 90%;}
    .intro-list01 .list-text .sub-p2 {font-size: 1.2rem;}
    .intro-cont .intro-img {height: 250px;}
    .sub-intro01 .intro-cont .intro-img.img2 img {top: -15%;}
    .sub-intro01 .intro-cont .intro-img.img3 img {top: -40%;}
    .sub-intro02 .sub-h1 {font-size: 1.8rem;}
    .sub-intro02 p.sub-h2 {padding-bottom: 0;}
    .sub-intro02 .intro-img {width: 100%; height: 100px; margin-bottom: 30px; border-radius: 15px;}
    .sub-intro03 .intro-dd {margin-top: 0;}
    .sub-intro03 .sub-h1:after {top: -30px; width: 150px; height: 150px; background-size: cover;}
    .sub-intro04 .img-header {height: 100px;}
    .sub-intro04 .img-header .sub-h2 {line-height: 100px;}
    .sub-intro02 .img-header {height: 110px;}
    .sub-intro02 .img-header img {border-radius: 20px;}
    .sub-intro05 .img-header {height: 165px;}
    .sub-intro05 .img-header img {width: 600px;}
    .sub-intro05 .img-header:after {bottom: -25px; right: 20px; width: 65px; height: 65px;}
    .sub-intro06 .img-header {height: 110px;}
    .sub-intro06 .img-header img {border-radius: 20px;}
    .sub-intro06 .tab-detail-group {margin-top: 10px;}
    .btn-group.btn-auto.small .btn {padding-right: 40px;} 
    .history .sub-inner {width: 350px;}
    .history-wrap {width: calc(100% - 37px);; margin: 0 0 0 32px;}
    .history-header {left: 17px;}
    .history-line {left: 25px;}
    
}
@media screen and (max-width: 359px){
    .intro-list01 .list-text {width: 90%;}
    .history .sub-inner {width: 320px;}
    .history-wrap {width: calc(100% - 37px);; margin: 0 0 0 32px;}
}


/* =============================================================
    sub : sub-popup
============================================================= */
.sub-popup {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 101;}
.sub-popup .popup-shadow {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
.sub-popup .popup-inner {position: absolute; top: 50%; left: 50%; width: 1200px; margin: 0 auto; transform: translate(-50%, -50%); z-index: 1;}
.sub-popup .popup-bg {width: 100%; padding: 80px; border-radius: 20px; background: #fff;}
.sub-popup .popup-header {position: relative; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #d5d5d5;}
.sub-popup .sub-h2 {text-align: left;}
.sub-popup .btn-close {position: absolute; top: 50%; right: 0; color: #999; text-transform: uppercase; transform: translateY(-50%);}
.sub-popup .cross {display: inline-block; position: relative; width: 18px; height: 18px; margin-left: 10px;}
.sub-popup .cross:before, .sub-popup .cross:after {content: ""; position: absolute; top: 70%; left: 50%; width: 100%; height: 2px; border-radius: 2px; background: #999;}
.sub-popup .cross:before {transform: translate(-50%, -50%) rotate(-45deg);}
.sub-popup .cross:after {transform: translate(-50%, -50%) rotate(45deg);}
.sub-popup .popup-cont {height: 350px; overflow-y: auto;}
.sub-popup .btn-submit-group {margin-bottom: 0; margin-top: 50px;}
.sub-popup .popup-h1 {display: inline-block; width: 80%;}
@media screen and (max-width: 1279px){
    .sub-popup .popup-bg {width: 100%; padding: 50px;}
    .sub-popup .popup-inner {width: 80%;}
}
@media screen and (max-width: 767px){
    .sub-popup .popup-bg {padding: 30px;}
    .sub-popup .popup-inner {width: 85%;}
    .sub-popup .btn-submit-group {margin-top: 20px;}
    .sub-popup .popup-h1 {display: inline-block; width: 60%;}
}


/* =============================================================
    sub : line-box
============================================================= */
.line-box {border:3px solid #f1f1f1; border-radius: 20px; text-align: center;}
.line-box .title {padding: 10px; background: #f5f5f5;}
.line-box .title p:before {content: "·"; padding-right: 5px; color: #f05022; font-size: 3.5rem; line-height: 0.5;}
.line-box .paragraph {padding: 20px;}

.line-box.line02 {display: flex; padding: 10px 30px; margin-bottom: 20px; border-radius: 10px; border: 1px solid #ddd; align-items: center; justify-content: space-between;}
.line-box.line02 .title {padding: 0; background: none; text-align: left;}
.line-box.line02 .title p:before {content: none;}
.line-box.line02 .btn-group .btn {width: 220px; height: auto; padding: 20px 0; border-radius: 10px; text-indent: 40px;}
.line-box.line02 .btn-group a.btn {line-height: 1;}

.line-box.line03 {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; border-left: none; border-right: none; border-radius: 0; text-align: left;}
.line-box.line03 .title {padding: 18px 40px;}
.line-box.line03 .title p:before {content: none;}
.line-box.line03 .content {padding: 20px 40px; border-top: 1px solid #d5d5d5;}

@media screen and (max-width:767px){
    .line-box.line02 {padding: 10px;}
    .line-box.line02 .btn-group {flex: 0 0 30%; max-width: 30%;}
    .line-box.line02 .btn-group .btn {width: auto; padding: 10px 60px 10px 10px; text-indent: 0;}
}
@media screen and (max-width:499px){
    .line-box.line02 {flex-wrap: wrap;}
    .line-box.line02 .btn-group {flex: 0 0 auto; max-width: 100%;}
}
/* =============================================================
    sub : chart.js
============================================================= */
.chart01 {position: relative; width: 1280px; height: 600px; margin-bottom: 50px; overflow-x: auto; overflow-y: hidden;}
.chart01 {direction: ltr;scrollbar-color: #f5f5f5;scrollbar-width: thin;}
.chart01::-webkit-scrollbar {height: 2px;}
.chart01::-webkit-scrollbar-track {background-color: #ddd;border-radius: 100px;}
.chart01::-webkit-scrollbar-thumb {background-color: #00397f;border-radius: 100px;}

.chart01 canvas {position: absolute; width: 100%; height: auto;}

.chart01 .text-box {position: absolute; bottom: 20px; left: 0; width: 100%;}

.chart02 {margin-bottom: 80px;}

.bar-graph {display: flex; align-items: center; margin-bottom: 20px;}
.bar-graph .check-circle {position: relative; display: inline-block; width: 20px; height: 20px; margin-top: 6px; border-radius: 50%; background: #00397f;}
.bar-graph .check-circle:before, .bar-graph .check-circle:after {content: ""; position: absolute;height: 1px; background: #fff;}
.bar-graph .check-circle:before {width: 6px; top: 10px; left:9px; transform: rotate(-46deg);}
.bar-graph .check-circle:after {width: 7px; top: 10px; left: 4px; transform: rotate(46deg);}
.bar-graph .text {width: 130px; padding-left: 10px;}
.bar-graph .graph {position: relative; width: 100%; height: 50px; margin-left: 10px;}
.bar-graph .bar {position: absolute; width: 36.6%; height: 100%; background: #00397f; border-radius: 0 15px 15px 0;}
.bar-graph .percent {margin-left: 10px;}

.bar01 .check-circle, .bar01 .bar {background: #00397f;}
.bar02 .check-circle, .bar02 .bar {background: #0550d4;}
.bar03 .check-circle, .bar03 .bar {background: #0854fc;}
.bar04 .check-circle, .bar04 .bar {background: #1960fc;}
.bar05 .check-circle, .bar05 .bar {background: #2669fc;}
.bar06 .check-circle, .bar06 .bar {background: #3376ff;}
.bar07 .check-circle, .bar07 .bar {background: #3386ff;}
.bar08 .check-circle, .bar08 .bar {background: #3d98fd;}
.bar09 .check-circle, .bar09 .bar {background: #5eaafe;}
.bar10 .check-circle, .bar10 .bar {background: #84bdfc;}
.bar11 .check-circle, .bar11 .bar {background: #93ccfb;}
.bar12 .check-circle, .bar12 .bar {background: #aad7fc;}
.bar13 .check-circle, .bar13 .bar {background: #d5f0ff;}

@media screen and (max-width:767px){
	.chart01 {width: 100%; height:500px;}
    .chart01 canvas {top: 50px;}

    .bar-graph .graph {height: 20px;}
    .bar-graph .text {width: 150px; font-size: 1.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .bar-graph .bar {border-radius: 0 5px 5px 0;}
}
@media screen and (max-width:499px){
    .chart02 {margin-bottom: 30px;}
    .bar-graph .bar {display: none;}
    .bar-graph .text {width: 200px;}
    .bar-graph .percent {padding-left: 0;}
}
/* =============================================================
    sub : search page
============================================================= */
.search-more-btn {position: relative; display: inline-block; padding: 10px 20px; margin-top: 30px; background:#118ad9; border-radius: 8px; text-decoration: none; color: #fff;}
.search-more-btn:focus, .search-more-btn:hover, .search-more-btn:active {text-decoration: none;}

/* =============================================================
    sub : mobile-lnb-group
============================================================= */

.mlg-group {display: none; position: absolute; top: 0; left: 0; width: 100%; padding: 15px; background: #eee;}
.mlg-list {position: relative; display: inline-block; padding-right: 20px;}
.mlg-list:after {content: ""; position: absolute; top: 50%; right: 2px; width: 8px; height: 8px; background: url(/portal/img/sub/arrow-right.png) no-repeat center/contain; transform: translateY(-50%);}
.mlg-link {color: #999;}
.mlg-list:last-child:after {content: none;}
.mlg-list:last-child .mlg-link {color: #117fc3;}
@media screen and (max-width: 1279px){
    .mlg-group {display: block;}
}

/* =============================================================
    sub : st01
============================================================= */
.st01 {position: relative; width: 1200px; height: auto; padding: 50px 30px; margin: -70px auto 120px; border-radius: 20px; background: #fff; box-shadow: 10px 10px 20px 5px rgba(0,0,0,0.1); overflow: hidden;}
.st01 .h1 {font-size: 3.6rem; text-align: center; font-weight: 600;}
.st01 .h2 {margin-top: 25px; font-size: 2.6rem; text-align: center;}
.st01 .h3 {height: 230px; text-align: center;}
.st01 .img-auto {margin: 40px auto 0; width: auto;}
.st01 .h4 {font-size: 2.6rem; font-weight: 600; text-align: center; color: #118ad9;}
.st01 .ex-title {font-size: 2.0rem; font-weight: 500;}
.ex-title {font-size: 2.0rem;}
.st01 .bg-grey {position: relative; height: 130px; border-radius: 0 0 20px 20px;}
.st01 .bg-grey p {position: absolute; top: 50%; left: 50%; width: 70%; transform: translate(-50%, -50%); word-break: keep-all;}
@media screen and (max-width:1399px){
    .sub-intro03 .intro-bg {display: none;}
    .st01 {width: 100%; margin: 100px auto 0; padding: 0; box-shadow: none; border-radius: 0; background: none;}
    .st01 .h1 {font-size: 2.8rem;}
    .st01 .h2 {font-size: 2.2rem;}
}
@media screen and (max-width:1023px){
    .st01 {margin-top: 50px;}
    .st01 .h1 {font-size: 2.2rem;}
    .st01 .h2 {width: 60%; margin: 25px auto; font-size: 1.6rem; word-break: keep-all;}
    .st01 .h4 {font-size: 1.8rem;}
    .st01 .ex-title {font-size: 1.8rem; font-weight: 500;}
    .ex-title {font-size: 1.8rem;}
    .st01 .bg-grey {height: auto;}
    .st01 .bg-grey p {position: static; width: 100%; padding: 15px; text-align: center; transform: translate(0);}
}
@media screen and (max-width:499px){
    .st01 .h3 {height: 150px;}
    .st01 .img-auto {width: 200px;}
}
/* =============================================================
    sub : st02
============================================================= */
.st02 {width: 100%; height: 500px;}
.st02 iframe {width: 100%; height: 100%;}
@media screen and (max-width:1023px){
    .st02 {width: 100%; height: 350px;}
}
@media screen and (max-width:767px){
    .st02 {width: 100%; height: 200px;}
}
@media screen and (max-width:499px){
    .st02 {width: 100%; height: 150px;}
}
/* =============================================================
    sub : st03
============================================================= */
.st03 {display: flex; align-items: center; flex-wrap: wrap; padding: 10px 20px; margin-bottom: 20px; border: 1px solid #d5d5d5; border-radius: 10px;}
.st03 .st03-6 {flex: 0 0 50%; max-width: 50%;}
.st03 .st03-6:first-child {text-align: left;}
.st03 .st03-6:last-child {text-align: right;}
.st03 .btn {position: relative; width: 210px; height: 50px; border-radius: 10px; text-indent: 20px; text-align: left; line-height: 40px;}
.st03 .btn i {position: absolute; top:50%; right: 40px;}
@media screen and (max-width: 767px){
    .st03 {border: none; padding: 0;}
    .st03 .st03-6 {flex: 0 0 100%; max-width: 100%; margin-bottom: 10px;}
    .st03 .st03-6:last-child {text-align: left;}
    .st03 .btn {font-size: 1.4rem;}
}
.st003 {display: flex;}
.st003 .lb-st01 {flex: 0 0 31.5%; max-width: 31.5%; padding: 45px 0; margin-right: 2.5%; border: 1px solid #ccc; border-radius: 15px; text-align: center;}
.st003 .lb-st01:last-child {margin-right: 0;}
.st003 .btn {position: relative; width: 200px; height: 50px; padding: 0 40px; margin-top: 25px; border-radius: 10px; line-height: 45px; text-align: left;}
.st003 .btn i {position: absolute; top:50%; right: 40px;}
@media screen and (max-width: 767px){
    .st003 {flex-wrap: wrap;}
    .st003 .lb-st01 {display: flex; justify-content: space-between; align-items: center;flex: 0 0 100%; max-width: 100%; padding: 5px 0; border: none; text-align: left;}
    .st003 .lb-st01 p:before {content: "* ";}
}
@media screen and (max-width:499px){
    .st003 .btn {width: auto; height: auto; margin-top: 10px; padding: 10px 40px 10px 10px; line-height: 1;}
    .st003 .btn i {right: 18px;}
}
/* =============================================================
    sub : ht
============================================================= */
.ht {display: flex; flex-wrap: wrap;}
.ht .card {position: relative; flex: 0 0 48.5%; max-width: 48.5%; height: 500px; padding: 0 15px; margin-bottom: 3%; border: 4px solid #f1f1f1; border-radius: 20px; background: url(/portal/img/sub/p03/history00.png) no-repeat bottom/cover; color: #444;}
.ht .card p {margin-bottom: 10px;}
.ht .card .title {margin: 40px 0 30px; text-align: center; color: #118ad9; font-weight: 600;}
.ht .card .img-title {position: absolute; bottom: 0; left: 50%; width: 100%; transform: translateX(-50%); text-align: center; color: #fff;}
.ht .card:after {position: absolute; width: 20px; height: 20px; background: url(/portal/img/sub/p03/ht-arrow.png) no-repeat center;}
.ht .arrow-right:after {content:""; top: 50%; right: -24px; transform: translateY(-50%);}
.ht .arrow-bottom:after {content:""; bottom:-24px; left: 50%; transform: translateX(-50%) rotate(90deg);}
.ht .arrow-left:after {content:""; top: 50%; left: -24px; transform: translateY(-50%) rotate(180deg);}

.ht .img01 {background-image: url(/portal/img/sub/p03/history01.png);}
.ht .img02 {background-image: url(/portal/img/sub/p03/history02.png);}
.ht .img03 {background-image: url(/portal/img/sub/p03/history03.png);}
.ht .img04 {background-image: url(/portal/img/sub/p03/history04.png);}
.ht .img05 {background-image: url(/portal/img/sub/p03/history05.png);}
.ht .img06 {background-image: url(/portal/img/sub/p03/history06.png);}
.ht .img07 {background-image: url(/portal/img/sub/p03/history07.png);}
.ht .img08 {background-image: url(/portal/img/sub/p03/history08.png);}
.ht .img09 {background-image: url(/portal/img/sub/p03/history09.png);}
.ht .img10 {background-image: url(/portal/img/sub/p03/history10.png);}
.ht .img11 {background-image: url(/portal/img/sub/p03/history11.png);}
.ht .img12 {background-image: url(/portal/img/sub/p03/history12.png);}
.ht .img13 {background-image: url(/portal/img/sub/p03/history13.png);}
.ht .img14 {background-image: url(/portal/img/sub/p03/history14.png);}
.ht .img15 {background-image: url(/portal/img/sub/p03/history15.png);}
.ht .img16 {background-image: url(/portal/img/sub/p03/history16.png);}
.ht .img17 {background-image: url(/portal/img/sub/p03/history17.png);}
.ht .img18 {background-image: url(/portal/img/sub/p03/history18.png);}

.ht.ht01 {flex-direction: row;}
.ht.ht01 .card:nth-child(2n-1) {margin-right: 3%;}
.ht.ht02 {flex-direction: row-reverse;}
.ht.ht02 .card:nth-child(2n) {margin-right: 3%;}

@media screen and (max-width:767px){
    .ht .card {flex: 0 0 100%; max-width: 100%; height: 420px;}
    .ht .card:after {content: none;}
    .ht.ht01 .card:nth-child(2n-1) {margin-right: 0;}
    .ht.ht02 .card:nth-child(2n) {margin-right: 0;}
}
/* =============================================================
    sub : img => square + round 
============================================================= */
.step:after {content: ""; display: block; clear: both;}
.step-list {position: relative; float: left; height: 85px; background: #e5e5e5; border-radius: 10px; text-align: center;}
.step-list:after {content: ""; position: absolute; top: 50%; right: -16px; width: 8px; height: 8px; background: url(/portal/img/sub/arrow-right.png) no-repeat center/contain; transform: translateY(-50%);}
.step-list:last-child:after {content: none;}
.step-list .mobile {display: none;}
.step-list.gray {background: #555; color: #fff;}
.step-text {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
.step-text span {display: block;}

.step.list5 .step-list {width: calc(20% - 23px); margin-right: 28px;}
.step.list5 .step-list:last-child {margin-right: 0;}

.st04 .step-list {height: 190px; margin-bottom: 20px; border-radius: 50%;}
.st04 .list3 {width: 626px; margin: 0 auto;}
.st04 .list3 .step-list {width: 190px; margin-right: 28px;}
.st04 .list3 .step-list:after {right: -21px; width: 10px; height: 10px;}
.st04 .list3 .step-list:last-child {margin-right: 0;}
.st04 .list5 .step-list {width: 190px;}
.st04 .step-list.skyblue {background: #118AD9; color: #fff;}
.st04 .step-list.skyblue .sub-p2 {color: #fff;}
.st04 .step-list.gray .sub-p2 {color: #fff;}
.st04 .step-list.line-skyblue {border: 2px solid #118AD9; background-color: transparent;}

.line-step {display: flex; align-items: flex-end;justify-content: center; border-bottom: 1px solid #e5e5e5;}
.line-step li {position: relative; flex: 0 0 200px; max-width: 200px; text-align: center;}
.line-step li:after {content: ""; position: absolute; bottom: -5px; left: 50%; width: 10px; height: 10px; background: #118ad9; transform: translateX(-50%) rotate(45deg);}
.line-step .step-tx {margin-bottom: 35px;}
.line-step .step-tx span {display: block;}
.line-step .step-tx .num {font-size: 2.4rem; font-weight: 800;}
.line-step .step-tx .text {font-size: 1.8rem; font-weight: 400;}

@media screen and (max-width: 1023px){
    .st04 .step-list {position: static; float: none; height: auto; padding: 17px; margin-bottom: 10px; border-radius: 0; background-color: #f5f5f5; text-align: left;}
    .st04 .step-list:after {content: none;}
    .st04 .step-list.gray {background-color: #f1f1f1; color: #444;}
    .st04 .step-list .mobile {display: inline; padding-right: 10px; font-weight: 600; color: #118ad9;}
    .st04 .step-text {position: static; transform: translate(0);}
    .st04 .step-text span {display: inline;}
    .st04 .list3 {width: 100%;}
    .st04 .list3 .step-list {width: 100%;}
    .st04 .list5 .step-list {width: 100%;}
    .st04 .step-list.skyblue {background: #f1f1f1; color: #444;}
    .st04 .step-list.skyblue .sub-p2 {color: #444;}
    .st04 .step-list.gray .sub-p2 {color: #444;}
    .st04 .step-list.line-skyblue {border: none; background-color: #f1f1f1;}

    .line-step li {flex: 0 0 25%; max-width: 25%;}
    .line-step .step-tx .num {font-size: 2.0rem;}
    .line-step .step-tx .text {font-size: 1.4rem;}
}

@media screen and (max-width: 767px){
    .step-list {position: static; float: none; height: auto; padding: 17px; margin-bottom: 10px; border-radius: 0; background-color: #f5f5f5; text-align: left;}
    .step-list:after {content: none;}
    .step-list.gray {background-color: #f1f1f1; color: #444;}
    .step-list .mobile {display: inline; padding-right: 10px; font-weight: 600; color: #118ad9;}
    .step-text {position: static; transform: translate(0);}
    .step-text span {display: inline;}

    .step.list5 .step-list {width: 100%; margin-right: 0;}

    .line-step {flex-wrap: wrap; border-bottom: none;}
    .line-step li {flex: 0 0 100%; max-width: 100%; text-align: left;}
    .line-step li:after {content: none;}
    .line-step .step-tx {margin-bottom: 10px;}
    .line-step .step-tx span {display: inline;}
    .line-step .step-tx .num {font-size: 1.4rem; font-weight: 400;}
    .line-step .step-tx .num:after {content: "."}
    .line-step .step-tx .text {font-size: 1.4rem;}
    
}

/* =============================================================
    sub : img => square + round + icon-img
============================================================= */
.sp {display: flex; flex-direction: row; margin-bottom: 30px;}
.sp.reverse {flex-direction: row-reverse;}
.sp-list {position: relative; background: #f5f5f5; border-radius: 10px;}
.sp-list .sub-p2 {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;}
.sp-text {padding: 30px; text-align: center;}
.sp-text span {display: block;}
.sp-text .mobile {display: none;}
.sp-text .title {padding: 10px 0 10px; font-weight: 600; color: #000;}

.sp-list.gray {background: #555;}
.sp-list.gray .sub-p2 {color: #fff;}
.sp-list.gray .title {color: #fff;}
.sp-list.darkblue .sub-p2 {color: #fff;}
.sp-list.darkblue .title {color: #fff;}

.sp-list:after {position: absolute; width: 10px; height: 10px; background: url(/portal/img/sub/arrow-right.png) no-repeat center/contain; }
.sp .arrow-right:after {content:""; top: 50%; right: -20px; transform: translateY(-50%);}
.sp .arrow-left:after {content:""; top: 50%; left: -20px; transform: translateY(-50%) rotate(180deg);}
.sp .arrow-bottom:after {content:""; bottom: -20px; left: 50%; transform: translateX(-50%) rotate(90deg);}

.sp.list3 .sp-list {flex: 0 0 31%; max-width: 31%; margin-right: 3.5%; padding: 20px 0; border-radius: 20px;}
.sp.list3 .arrow-right:after {right: -23px;}
.sp.list4 .sp-list {flex: 0 0 23%; max-width: 23%; margin-right: 2.666%;}
.sp.reverse.list4 .sp-list {margin-right: 0; margin-left: 2.666%;}
.sp.list5 .sp-list {flex: 0 0 19%; max-width: 19%; margin-right: 1.25%;}

.st05 .sp .sp-text {padding: 35px 0;}
.st05 .sp .title {padding: 0; margin-top: 20px; font-weight: 400; color: #111;}
.st05 .sp .sub-p2 {line-height: 1.3; color: #111;}
.st05 .gray .title {color: #fff;}
.st05 .gray .sub-p2 {color: #fff;}

.st06 {width: 86%; margin: 0 auto;}
.st06 .sp {margin-bottom: 10px;}
.st06 .sp .sp-list {background: #fff; border: 1px solid #ddd; border-radius: 20px;}
.st06 .sp.h01 .sp-list {height: 150px;}
.st06 .sp.h02 .sp-list {height: 110px;}
.st06 .sp.h03 .sp-list {height: 300px;}
.st06 .sp-text {padding: 30px 10px;}
.st06 .sub-p2 {font-size: 1.7rem; font-weight: 500;}
.st06 .sp-list.darkblue {position: relative; background: #00397F; border: none;}
.st06 .sp-list.black {position: relative; background: #061E2D; border: none;}
.st06 .sp-list.black .title {color: #fff;}
.st06 .sp-list.skyblue {background: #118ad9;}
.st06 .sp-list.skyblue .sub-p2 {color: #fff;}
.st06 .sp-list.skyblue .title {color: #fff;}
.st06 .sp-list .sp-text {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
.st06 .sp-list .sp-text .moi {display: block;}
.st06 .sp-list .title {font-size: 2.4rem;}
.st06 .sp .arrow-right:after {right: -35px; width: 50px; height: 50px; border-radius: 50%; background: #fff url(/portal/img/sub/arrow-right.png) no-repeat center/10px; box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.1); z-index: 2;}

.st06 .tx01 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #079fae;}
.st06 .tx02 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #339add;}
.st06 .tx03 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #255591;}
.st06 .tx04 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #e8552b;}
.st06 .tx05 {padding-top: 5px; font-weight: 600; color: #079fae;}
.st06 .tx06 {padding-top: 5px; font-weight: 600; color: #339add;}
.st06 .tx07 {padding-bottom: 5px; color: #255591;}
.st06 .tx08 {padding-top: 5px; font-weight: 600; color: #e8552b;}

.st06 .sp .sp-list.circle {position: relative; flex: 0 0 150px; max-width: 150px; margin: 0 3.8%; border-radius: 50%;}
.st06 .sp .sp-list.circle:before, .st06 .sp .sp-list.circle:after {content: ""; position: absolute; top:50%; right: -32%; width: 15px; height: 2px; background: #999;}
.st06 .sp .sp-list.circle:after {transform: rotate(90deg);}
.st06 .sp .sp-list.circle:last-child:before, .st06 .sp .sp-list.circle:last-child:after {content: none;}
.st06 .sp .sp-list.circle .sp-text {position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.st06 .sp .sp-list.circle .sp-text:before, .st06 .sp .sp-list.circle .sp-text:after {content: ""; position: absolute; left: 0; width: 100%; height: 50%;}
.st06 .sp .sp-list.circle .sp-text:before {top:0;}
.st06 .sp .sp-list.circle01 .sp-text:before {background-color: #079fae;}
.st06 .sp .sp-list.circle02 .sp-text:before {background-color: #339add;}
.st06 .sp .sp-list.circle03 .sp-text:before {background-color: #255591;}
.st06 .sp .sp-list.circle04 .sp-text:before {background-color: #e8552b;}
.st06 .sp .sp-list.circle .sp-text:after {bottom: 0; background: #e1e1e1;}
.st06 .sp .sp-list.circle .sp-text .sub-p1 {position: absolute; top: 50%; left: 50%;width: 135px; height: 135px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; font-weight: 600; line-height: 140px; z-index: 1;}
.st06 .sp .sp-list.circle01 .sp-text .sub-p1 {color: #079fae;}
.st06 .sp .sp-list.circle02 .sp-text .sub-p1 {color: #339add;}
.st06 .sp .sp-list.circle03 .sp-text .sub-p1 {color: #255591;}
.st06 .sp .sp-list.circle04 .sp-text .sub-p1 {color: #e8552b;}
.sub-intro04 .sp06-top {margin-top: -25px;}

@media screen and (max-width: 1399px){
    .st06 {width: 100%;}
    .st06 .sp.h01 {justify-content: space-between;}
    .st06 .sp .sp-list.circle:before, .st06 .sp .sp-list.circle:after {content: none;}
}
@media screen and (max-width: 1279px){
    .st06 .sp .sp-list.circle {margin: 0;}
}
@media screen and (max-width: 1023px){
    .sp {display: block; margin-bottom: 0;}
    .sp img {display: none;}
    .sp-list {margin-bottom: 10px; border-radius: 0;}
    .sp .sp-list:after {content: none;}
    .sp-text {padding: 15px; text-align: left;}
    .sp-text .pc {display: none;}
    .sp-text .mobile {display: inline; color: #2C97DD; font-weight: 600;}
    .sp-text .title {padding: 0 5px;}
    .sp-text span {display: inline;}
    .sp-text .paragraph {position: relative; display: block; padding-left: 10px;}
    .sp-text .paragraph:before {content: ""; position: absolute; top: 11px; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #666;}

    .sp-list.gray {background: #f5f5f5;}
    .sp-list.gray .sub-p2 {color: #444;}
    .sp-list.gray .title {color: #000;}
    .st05 .sp .sp-text {padding: 15px}
    .st05 .gray .title {color: #444;}
    .st05 .gray .sub-p2 {color: #444;}

    .sp.list3 .sp-list {flex: 0 0 100%; max-width: 100%; margin-right: 0; padding: 5px; border-radius: 0;}
    .sp.list4 .sp-list {flex: 0 0 100%; max-width: 100%; margin-right: 0;}
    .sp.reverse.list4 .sp-list {margin-right: 0; margin-left: 0;}
    .sp.list5 .sp-list {flex: 0 0 100%; max-width: 100%; margin-right: 0;}

    .st06 .sp .sp-list {background: #fff; border: 1px solid #ddd; border-radius: 0;}
    .st06 .sp.h01 .sp-list, .st06 .sp.h02 .sp-list, .st06 .sp.h03 .sp-list {height: auto;}
    .st06 .sp-list .title {font-size: 1.8rem;}
    .st06 .sp-list .sp-text {position: static; padding: 15px; transform: translate(0);}
    .st06 .sp-list .sp-text .moi {display: inline;}
    .st06 .sp-list .sub-p2 {padding-top: 0; padding-bottom: 0; font-weight: 400; font-size: 1.4rem; color: #666;}
    .st06 .sp-list.darkblue {background: #00397F;}
    .st06 .sp-list.darkblue .title {color: #fff;}
    .st06 .sp-list.black {background: #061E2D;}
    .st06 .sp-list.black .title {color: #fff;}
    .st06 .sp-list.skyblue {background: #118ad9;}
    .st06 .sp-list.skyblue .sub-p2 {color: #fff;}
    .st06 .sp-list.skyblue .title {color: #fff;}
    .st06 .sp .sp-list.circle {flex: 0 0 100%; max-width: 100%; margin-bottom: 10px; border-radius: 0; border: 1px solid #ddd;}
    .st06 .sp .sp-list.circle .sp-text {position: static; width: auto; height: auto; border-radius: 0; transform: translate(0);}
    .st06 .sp .sp-list.circle .sp-text:before, .st06 .sp .sp-list.circle .sp-text:after {content: none;}
    .st06 .sp .sp-list.circle .sp-text .sub-p1 {position: static; width: auto; height: auto; transform: translate(0); line-height: 1;}
    .st06 .sp .sp-list.circle .sp-text .sub-p1 {color: #666; font-size: 1.4rem; font-weight: 400;}
}