@charset "UTF-8";

@import "/pcms/common/font/font_notoserif.css";


#body_layout #contens .sitemap.type2 dt{top:22px;}/*2022.02.24 사이트맵 부분 추가*/
/* 탭 스타일 */
/* 자동으로 뿌려주는게 type1이라 .type2스타일 동일하게 추가 */
.tab-ul.type1 li a{font-size: 14px;line-height: 24px;}
.tab-ul.type1 li.on a,
.tab-ul.type1 li.on a:active,
.tab-ul.type1 li.on a:focus,
.tab-ul.type1 li.on a:hover,
.tab-ul.type1 li.active a{color:#fff;border-color:#2b2d3c; background-color: #2b2d3c;}
.tab-ul.type1 li a:active,
.tab-ul.type1 li a:focus,
.tab-ul.type1 li a:hover{color:#fff;background-color: #2b2d3c;border-color: #2b2d3c;}
.tab-ul.type1 li a span {padding: 10px 30px 10px 15px}
.tab-ul.type1 li a span:after {display:block; position: absolute;top: 50%; transform: translateY(-50%); right: 15px; content: ""; clear:both; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #888;}
.tab-ul.type1 li.on a span:before,
.tab-ul.type1 li.on a:active span:before,
.tab-ul.type1 li.on a:focus span:before,
.tab-ul.type1 li.on a:hover span:before,
.tab-ul.type1 li.active a span:before{display:block; position: absolute;top: 50%; transform: translateY(-50%); right: 15px; content: ""; clear:both; width: 0; height: 0; margin-top: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #fff;z-index: 1;}
.tab-ul.type1 li a:active span:before,
.tab-ul.type1 li a:focus span:before,
.tab-ul.type1 li a:hover span:before {display:block; position: absolute;top: 50%; transform: translateY(-50%); right: 15px; content: ""; clear:both; width: 0; height: 0; margin-top: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #fff;z-index: 1;}

/* 탑박스 */
.ui-topbox {border: 0;}
.ui-topbox .inner{padding:55px 60px 45px;}
.ui-topbox.type1 .inner {padding-left: 60px; border-radius: 0; background: #004b93;}
.ui-topbox .inner .txtwrap .h-box {position: relative; font-family: 'Noto Serif'; color:#fff; font-size: 30px; font-weight: normal;}
.ui-topbox .inner .txtwrap .h-box:before {position: absolute; left: -18px; top: -12px; width: 50px; height: 50px; border-radius: 50%; background: rgba(0,204,255,0.8); content: ""; z-index: -1;}
.ui-topbox .inner p {margin-top: 20px; font-family: 'Noto Sans'; font-size: 18px; color: rgba(255,255,255,0.8); line-height: 1.5;}
.ui-topbox .inner p a {font-family: 'Noto Sans';}

.ui-topbox.type1:before{display:none;}
.ui-topbox.type1:after{display: none;}
.ui-topbox.type1 .inner:before {display: none;}

.an_st .ui-topbox.type1 .inner {background: #ac0e1d;}
.an_st .ui-topbox .inner .txtwrap .h-box:before {background: rgba(247,76,92,0.8);}

@media (max-width: 767px){
    .ui-topbox.type1 .inner{padding:40px 45px;}
    .ui-topbox .inner .txtwrap .h-box {font-size: 26px;}
    .ui-topbox .inner .txtwrap .h-box:before {top: -9px;width: 45px;height: 45px;}
    .ui-topbox .inner p {font-size: 17px;}
}
@media (max-width: 500px){
  .ui-topbox .inner .txtwrap .h-box {font-size: 24px;}
  .ui-topbox .inner .txtwrap .h-box:before {top: -7px;width: 40px;height: 40px;}
  .ui-topbox .inner p {font-size: 16px;}
}


/* 문단스타일 */
.h2{margin: 40px 0 10px; color:#0d1218; font-size: 27px;}
/* .h2:first-child {margin: 0 0 21px;} */
.h3{margin: 30px 0 6.5px; color:#004b93; font-size: 22px;}
.h4{margin: 0 0 5px;color:#0d1218; font-size: 18px;}
.h4:before{width:5px; height:17px; left: 5px; top: 7px; background:#004b93; border-radius: 0; content: "";}
.h5{margin: 0 0 5px;color:#004b93;font-weight: bold; font-size: 18px;}
.h5:before{content:"";display:inline-block;position:absolute;top:11px;left:4px;width:4px;height:4px;background: #fff;border:2px solid #004b93;border-radius: 100%;}
.h6{margin: 0 0 5px;color:#0d1218;font-size: 18px;}
.h6:before{ left: 5px;background-color:#5f5b5b; width: 7px; height: 3px;}

.an_st .h3 {color: #ac0e1d;}
.an_st .h4:before {background: #ac0e1d;}
.an_st .h5 {color: #ac0e1d;}
.an_st .h5:before {border: 2px solid #ac0e1d;}

.h4, .h5, .h6 {padding-left: 20px;}
p {color:#555;}

.list-1st {margin: 5px 0 10px 10px;}
.list-1st>dd, .list-1st>li, .txt_bul,
.list-2st>li, .txt_bul2,
.list-3st>li, .txt_bul3,
.num-list>li {line-height: 24px; color:#555; padding: 0 0 0 23px;} 
.list-1st .list-2st {margin-left: -25px;}
.list-1st>li, .txt_bul,
.list-2st>li, .txt_bul2{padding-left:25px;}
.list-3st>li, .txt_bul3{padding-left:22px;}

.list-1st>dd:before,
.list-1st>li:before,
.txt_bul:before{top:10.5px;left:9px;width:4px;height:4px;border-radius: 50%; background: #2b2d3c; border-radius: 50%;}
.list-2st>dd:before,
.list-2st>li:before,
.txt_bul2:before{top:13px;left:10px;width:4px;height:7px;background:url(/pcms/dist/img/list_bul2.png)no-repeat;}
.list-3st>dd:before,
.list-3st>li:before,
.txt_bul3:before{left:5px; top:15px; width:6px; height: 1px; border-top:1px solid #666666; border-bottom:0;}
.num-list>li span { width: 17px; height: 17px; top: 6px; margin-right: 9px; background: #2b2f42;line-height: 17px;font-size: 12px; font-family: 'score'; font-weight: 300;}

.list-2st>li{padding-left: 40px !important;}
.list-2st>li:before{left: 25px !important; top: 9px;}
/* 버튼 */
.btn-primary,
.btn-primary:link,
.btn-primary:visited{border-color: #004b93;background-color: #fff; color:#004b93; border-radius: 0;}
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {background-color: #004b93;border-color: #004b93; color: #fff;}

.an_st .btn-primary,
.an_st .btn-primary:link,
.an_st .btn-primary:visited{border-color: #ac0e1d;background-color: #fff; color:#ac0e1d; border-radius: 0;}
.an_st .btn-primary:active,
.an_st .btn-primary:focus,
.an_st .btn-primary:hover {background-color: #ac0e1d;border-color: #ac0e1d; color: #fff;}

.btn-default,
.btn-default:link,
.btn-default:visited{border-color: #b7b7be; color: #2b2d3c; border-radius: 0;}

.btn-default:active,
.btn-default:focus,
.btn-default:hover{border-color: #004b93;background-color: #fff;color: #004b93;}

.an_st .btn-default:active,
.an_st .btn-default:focus,
.an_st .btn-default:hover{border-color: #ac0e1d;background-color: #fff;color: #ac0e1d;}

.btn.btn-noline {color:#132438; font-size: 15px;}
.btn.btn-noline:hover .ir-link,
.btn.btn-noline:focus .ir-link { background-position: -180px -198px;}

.an_st .btn.btn-noline:hover .ir-link,
.an_st .btn.btn-noline:focus .ir-link { background-position: -165px -198px;}

.btn-primary.btn-down, .btn-primary.btn-down:link, .btn-primary.btn-down:visited{border-color: #0b305c;background-color: #0b305c;color: #fff;}
.btn-primary.btn-down:active, .btn-primary.btn-down:focus, .btn-primary.btn-down:hover {background-color: #fff;border-color: #0b305c; color: #132438;}
.btn-default.btn-down, .btn-default.btn-down:link, .btn-default.btn-down:visited{background-color: #fff;border-color: #0b305c; color: #132438;}
.btn-default.btn-down:active, .btn-default.btn-down:focus, .btn-default.btn-down:hover {border-color: #0b305c;background-color: #0b305c;color: #fff;}


.ir-download,
.ir-home{height:16px;}


.btn-icon.btn-primary .ir-arrow { background-position: -150px -253px;}
.btn-icon.btn-default .ir-arrow { background-position: -180px -236px;}
.btn-icon.btn-primary .ir-download {background-position:-93px -358px;}
.btn-icon.btn-default .ir-download {background-position:-127px -340px;}
.btn-icon.btn-primary .ir-link {background-position: -180px -198px;}
.btn-icon.btn-default .ir-link {background-position: -165px -213px;}

.an_st .btn-icon.btn-primary .ir-arrow { background-position: -150px -236px;}
.an_st .btn-icon.btn-primary .ir-download {background-position:-93px -340px;}
.an_st .btn-icon.btn-primary .ir-link {background-position: -165px -198px;}

.btn-icon.btn-ex {background-color:transparent;color: #fff;border-color:#fff; margin: 10px 10px 0 0;}
.btn-icon.btn-ex .ir-arrow {background-position: -165px -236px;}

.btn-icon.btn-primary:focus .ir-arrow,
.btn-icon.btn-primary:hover .ir-arrow {background-position: -165px -236px;}
.btn-icon.btn-primary:focus .ir-download,
.btn-icon.btn-primary:hover .ir-download {background-position: -110px -340px;}
.btn-icon.btn-primary:focus .ir-link,
.btn-icon.btn-primary:hover .ir-link {background-position: -180px -213px;}


.btn-icon.btn-default:focus .ir-arrow,
.btn-icon.btn-default:hover .ir-arrow {background-position: -150px -254px;}
.btn-icon.btn-default:focus .ir-download,
.btn-icon.btn-default:hover .ir-download {background-position: -93px -358px;}
.btn-icon.btn-default:focus .ir-link,
.btn-icon.btn-default:hover .ir-link {background-position: -180px -198px;}

.an_st .btn-icon.btn-default:focus .ir-arrow,
.an_st .btn-icon.btn-default:hover .ir-arrow {background-position: -150px -236px;}
.an_st .btn-icon.btn-default:focus .ir-download,
.an_st .btn-icon.btn-default:hover .ir-download {background-position: -93px -340px;}
.an_st .btn-icon.btn-default:focus .ir-link,
.an_st .btn-icon.btn-default:hover .ir-link {background-position: -165px -198px;}

.btn-icon.btn-ex:hover {background-color:#fff;border-color:#2b2d3c;background-position: -165px -236px;color:#2b2d3c;}
.btn-icon.btn-ex:hover .ir-arrow {background-position: -180px -236px;}


.btn.btn-line {position: relative; margin: 0; padding: 0; font-size: 15px; color:#166aa8; text-decoration-line: underline; text-underline-position: under; line-height: 27px; text-transform: inherit;border-radius: 0; vertical-align: baseline;}
/* .btn.btn-line::before {position: absolute; left: 0;bottom: 0; width: 100%;height: 1px;background: #166aa8; content: "";} */
.an_st .btn.btn-line {color:#ac0e1d;}
/* .an_st .btn.btn-line::before {background: #ac0e1d;} */
.btn.btn-line:hover,
.btn.btn-line:focus {color:#1e8ddf;}
.an_st .btn.btn-line:hover,
.an_st .btn.btn-line:focus {color:#ee2337;}
/* .btn.btn-line:hover::before,
.btn.btn-line:focus::before {height: 2px;} */


/* 테이블 */
.table-bordered{border-top: 2px solid #014b94; background-color: #fff;}
.an_st .table-bordered{border-top: 2px solid #8c0124;}
.table thead th{background-color:#f8f7f7;color: #2b2d42;font-size:16px;border-bottom:1px solid #dbdbdb;}
.table tbody th{background-color:#f8f6f6;color:#444; font-size: 16px;}

.flip-scroll,.table-pc,.table-responsive{position:relative;}
.flip-scroll .table-icon,.table-responsive .table-icon{display:block;opacity:1;}
.table-pc .table-icon{display:none;}
.table-icon.icon--hide{display:none!important;opacity:0;}
.table-icon.on,.ui:after{display:block;}
.table-icon{position:absolute;z-index:2;top:67px;right:45%;width:50px;height:50px;border-radius:50px;background:#fff;box-shadow:-1px 1px 10px grey;align-items:center;justify-content:center;transition:all .5s ease-in-out;}
.swipe-icon .swipe-arrow{animation:pulse-arrow 3s ease-out infinite;}
.swipe-icon{position:absolute;top:15px;left:25%;width:25px;height:25px;overflow:visible;animation:hand-move 3s ease-out infinite;}
.scaledown{transform:scale(.7,.7);}

.table .bd_foot{color: #666666; font-weight: bold;background-color:#fafafa;}
.table .total{font-weight: bold;}

.table thead th,
.table tbody th,
.table tfoot th{text-align: center;font-weight: bold;}

@keyframes pulse-arrow{
0%{opacity:1;transform:translateX(0)}
50%{opacity:1;transform:translateX(.25em)}
75%{opacity:0;transform:translateX(.25em)}
100%{opacity:0;transform:translateX(0)}
}
@keyframes hand-move{
0%,100%{transform:translateX(0)}
50%{transform:translateX(15px)}
}

/* imgbox */
.imgbox{text-align: center;padding: 20px 30px;border: 1px solid #ddd;}
.imgbox2{text-align: center;padding: 20px 30px;}
.imgbox3{text-align: center;padding: 0;}

/*이미지 확대 버튼*/
.pic_btn a{display: none;}
.pic_btn a:hover{background-color:#004b93;/*border-color:#348c01;*/color:#fff;transition: all 300ms ease-out }

.an_st .pic_btn a:hover{background-color:#ac0e1d; }
@media(max-width:767px){
    .pic_btn a{display: block;width: 60%;margin: 10px auto 0;padding: 10px 40px;border: 1px solid #ddd;background: #fff;text-align: center;}
    .pic_img{text-align: center;}
}
@media(max-width:560px){
    .pic_btn a{width: 75%;}
}
@media(max-width:450px){
    .pic_btn a{width: 100%;}
}
@media(max-width:340px){
  .tab-ul.type1 li a span{padding: 10px 8px 10px 8px;    text-align: center;}    
  .tab-ul.type1 li a span:after{display: none;}
  .tab-ul.type1 li.on a span:before, .tab-ul.type1 li.on a:active span:before, .tab-ul.type1 li.on a:focus span:before, .tab-ul.type1 li.on a:hover span:before, .tab-ul.type1 li.active a span:before{
    display: none;
  }
  .tab-ul.type1 li a:active span:before, .tab-ul.type1 li a:focus span:before, .tab-ul.type1 li a:hover span:before{
    display: none;
  }
}