@charset "utf-8";
.onLayout {position: relative;}
.onContainer {position: relative; max-width: 1500px; margin: 0 auto; padding: 0;}

.onLayout.parallax .onHeaderIn {border-bottom: 1px solid #000;}

.onHeaderLayout {position: relative; margin-bottom: 42px; z-index: 200;}
.onHeaderLayout.fixed .onHeaderIn {position: fixed; top: 0; left: 0; right: 0;}
    .onHeaderIn {display: flex; align-items: center; height: 70px; background-color: #fff;}
    .onHeaderTop {position: relative; display: flex; justify-content: space-between; align-items: center; height: 70px; border-bottom: 1px solid #E1E1E1; background-color: #ffffff; z-index: 200;}

            .onHeaderTopR {display: flex; align-items: center; height: 100%;}
        
    .onHeaderBottom {position: relative; border-bottom: 1px solid #D9D9D9; transition: transform 0.3s; background-color: #ffffff; z-index: 100;}
        .onHeaderBottomIn {position: relative; height: 70px;}
            .onHeaderBottomR {position: absolute; top: 0; right: 0; bottom: 0;}

    .onHeaderLogo {flex-grow: 1; font-size: 30px; color: #00459E;}


.onGnb {display: flex; align-items: center;}
.onGnb > li {margin-right: 40px;}
.onGnb > li > a {display: block; padding: 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.06em; color: #000000;}
.onGnb > li:last-child {margin-right: 0;}
.onGnb > li.on > a,
.onGnb > li > a:hover {color: #00459E;}


.onMenuBtn {position: relative; width: 19px; height: 17px; margin-left: 0; margin-right: 14px; padding: 0;}
.onMenuBtn::after {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0) rotate(0); display: block; content: ""; width: 100%; height: 2px; background-color: #fff; transition: bottom 0.3s 0.3s, transform 0.3s, width 0.3s;}
.onMenuBtn::before {position: absolute; top: 0; left: 50%; transform: translate(-50%, 0) rotate(0); display: block; content: ""; width: 100%; height: 2px; background-color: #fff; transition: top 0.3s 0.3s, transform 0.3s, width 0.3s;}
.onMenuBtn span {position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 100%; height: 2px; opacity: 1; background-color: #fff; transition: all 0.3s 0.3s;}
.onMenuBtn.on span {opacity: 0; transition: all 0s 0.3s;}
.onMenuBtn.on::after {width: 28px; bottom: 8px; transform: translate(-50%, 0) rotate(-45deg); transition: bottom 0.3s, transform 0.3s 0.3s, width 0.3s 0.3s;}
.onMenuBtn.on::before {width: 28px; top: 7px; transform: translate(-50%, 0) rotate(45deg); transition: top 0.3s, transform 0.3s 0.3s, width 0.3s 0.3s;}

.onAllMenu {position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-width: 280px; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.5); z-index: 500; transition: opacity 0.3s;}
.onAllMenu.on {opacity: 1; visibility: visible;}
    .onAllMenuIn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); height: calc(100% - 100px); max-width: 1000px; max-height: 700px; border-radius: 10px; overflow: hidden; background-color: #ffffff;}
        .onAllMenuHead {height: 80px; border-bottom: 1px solid #E1E1E1;}
            .onAllMenuHeadIn {position: relative; margin: 0 30px;}
                .onAllMenuTitle {display: inline-block; font-size: 22px; line-height: 80px; font-weight: 500;}
                .onAllMenuClose {position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 10px; font-size: 26px;}

        .onAllMenuBody {position: relative;}
            .onAllMenuList {height: 100%; padding: 20px 0;}
            .onAllMenuList > li {margin-bottom: 8px; font-size: 18px; font-weight: 500; line-height: 32px;}
            .onAllMenuList > li > a {margin: 0 20px; padding: 5px 10px;}
            .onAllMenuList > li.on > a,
            .onAllMenuList > li > a:hover,
            .onAllMenuList > li > a:focus {color: #0049BE;}
            .onAllMenuList > li:last-child {margin-bottom: 0;}


.onHeaderSearch {margin: auto 0; width: 300px; height: 50px;}
    .onHeaderSearchIn {position: relative;}
    .onHeaderSearchIn > input {display: inline-block; width: 100%; height: 100%; padding: 10px 40px 10px 10px; font-size: 18px; font-weight: 500; border: none; border: 1px solid transparent; border-bottom: 1px solid #000000; background-color: transparent; box-sizing: border-box;}
    .onHeaderSearchIn > input::placeholder {letter-spacing: -0.06em; color: #888888;}
    .onHeaderSearchIn > a {position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 10px; font-size: 22px; transition: all 0.3s;}


.onQuickMenu {position: fixed; right: 40px; bottom: 40px;}

.onMainLayout {position: relative;}
.onSubLayout {position: relative;}


.onContentLayout {position: relative; margin: 0 0 0 290px;}
.onContentLayout.wide {margin: 0;}


.onLeftMenuLayout {position: absolute; top: 0; left: 20px; width: 240px; transition: all 0.3s;}

        .onLeftMenuIn {}
        .onLeftMenuIn > ul > li {font-size: 16px; border-bottom: 1px solid #E1E1E1;}
        .onLeftMenuIn > ul > li > a {display: block; padding: 12px 0; font-weight: 500;}
        .onLeftMenuIn > ul > li.on > a,
        .onLeftMenuIn > ul > li > a:hover,
        .onLeftMenuIn > ul > li > a:focus {color: #000;}
            .onLeftMenuTitle {padding-bottom: 12px; font-size: 24px; font-weight: 600; border-bottom: 1px solid #000;}


.onFooterLayout {margin-top: 80px; padding: 42px 0 60px 0; border-top: 1px solid #000000; box-sizing: border-box;}
    .onFooterLayoutIn {position: relative;}
        .onFooterR {position: absolute; top: 0; right: 0; text-align: right;}

        .onFooterLogo {display: inline-block; margin-bottom: 12px; font-size: 26px; font-weight: 600; color: #00459E;}
        .onFnb {margin-bottom: 20px; overflow: hidden;}
        .onFnb > ul > li {float: left; margin-right: 14px; font-size: 16px; font-weight: 500; letter-spacing: -0.06em;}
        .onFnb > ul > li:last-child {margin-right: 0;}
        .onFnb > ul > li > a:hover,
        .onFnb > ul > li.on {color: #00459E;}

        .onAddress {display: block; margin-bottom: 4px; font-size: 15px; font-weight: 400; letter-spacing: -0.06em; color: #333333;}
        .onCopyright {font-size: 15px; font-weight: 400; color: #666666;}

        .onFamilySite {display: flex; margin-bottom: 40px; text-align: right;}
        .onFamilySite .onField {margin: 0 12px 0 0; min-width: 160px;}
        .onFamilySite a {display: flex; justify-content: center; align-items: center; padding: 0 18px; font-size: 15px; font-weight: 500; letter-spacing: -0.06em; border-radius: 5px; border: 1px solid #7A7A7A; color: #ffffff; background-color: #7A7A7A;}
       
        

.onMainBanner {position: relative; margin-bottom: 50px; overflow: hidden; border-radius: 10px; background-color: #eeeeee;}
.onMainBanner > ul > li > a > img {display: block; width: 100%;}

.onMainBannerPaging {position: absolute; right: 10px; bottom: 10px; display: flex; justify-content: center; align-items: center; padding: 4px 10px; border-radius: 20px; z-index: 10; background-color: #ffffff;}
.onMainBannerPaging .swiper-button-next,
.onMainBannerPaging .swiper-button-prev,
.onMainBannerPaging .swiper-button-stop {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 16px; border: 1px solid transparent; border-radius: 5px; transition: all 0.3s;}
.onMainBannerPaging .swiper-button-next:hover,
.onMainBannerPaging .swiper-button-prev:hover,
.onMainBannerPaging .swiper-button-stop:hover {border-color: #000000;}
.onMainBannerPaging .swiper-pagination {margin: 0 6px; font-size: 16px;}


.onMainSection {display: flex; margin-bottom: 80px;}

.onMainLatest {width: calc(100% - 600px); margin-right: auto;}
    .onMainLatestTop {display: flex; align-items: center;}
    .onMainLatestTop > h3 > a {font-size: 20px; font-weight: 600; color: #000000;}
    .onMainLatestTop > h3 > a:hover {color: #00459E;}
    
.onMainLatest > ul > li > a {display: flex; justify-content: space-between; height: 56px; font-size: 16px; font-weight: 500; line-height: 56px; white-space: nowrap; border-bottom: 1px solid #E1E1E1; box-sizing: border-box; transition: all 0.3s;}
.onMainLatest > ul > li > a:hover,
.onMainLatest > ul > li > a:focus {color: #00459E; border-color: #00459E;}
.onMainLatest > ul > li > a > h4 {margin-right: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis;}

.onCardBanner {display: flex; flex-direction: column; margin-right: 20px;}
.onCardBanner:last-of-type {margin-right: 0;}
    .onCardBannerTop {display: flex; align-items: center; margin-bottom: auto;}
    .onCardBannerTop > h3 > a {font-size: 20px; font-weight: 600; color: #000000;}
    .onCardBannerTop > h3 > a:hover {color: #00459E;}
        .onCardBannerPaging {display: flex; align-items: center; margin-left: auto;}
        .onCardBannerPaging .swiper-button-next,
        .onCardBannerPaging .swiper-button-prev,
        .onCardBannerPaging .swiper-button-stop {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 16px; border: 1px solid transparent; border-radius: 5px; transition: all 0.3s;}
        .onCardBannerPaging .swiper-button-next:hover,
        .onCardBannerPaging .swiper-button-prev:hover,
        .onCardBannerPaging .swiper-button-stop:hover {border-color: #000000;}
        .onCardBannerPaging .swiper-pagination {margin: 0 6px; font-size: 16px;}

    .onCardBannerIn {width: 270px; height: 270px; overflow: hidden; border-radius: 10px;}
    .onCardBannerIn > ul > li > a > img {display: block; width: 100%; height: 100%; object-fit: cover;}


.onTable > tbody > tr {transition: all 0.3s;}
.onTable > tbody > tr:hover {background-color: #F2F7FB;}
.onTable > thead > tr > th {position: relative; padding: 12px; font-size: 14px; font-weight: 500; color: #000000; background-color: #ecf0f3;}
.onTable > thead > tr > th:after {position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; display: block; content: ""; width: 0px; height: calc(100% - 30px); border-right: 1px dashed #B7C4D1;}
.onTable > thead > tr > th:first-child:after {display: none;}

.onTable > tbody > tr > th {padding: 16px; font-size: 15px; font-weight: 500; text-align: left; border-bottom: 1px solid #E1E1E1; color: #000000; background-color: #F7F8F9;}
.onTable > tbody > tr > td.notice > a {font-weight: 600; color: #000000;}
.onTable > tbody > tr > td.notice > a::before {display: inline-block; content: "[공지]"; color: #00459E; margin-right: 8px;}
.onTable > tbody > tr > td.new > a::before {font-weight: 600; display: inline-block; content: "[새글]"; color: #00459E; margin-right: 8px;}
.onTable > tbody > tr > td {padding: 12px; font-size: 15px; border-bottom: 1px solid #E1E1E1; color: #333333;}
.onTable > tbody > tr > td > a:hover,
.onTable > tbody > tr > td > a:focus {color: #00459E;}

.overViewTableBox.noti .onTable > tbody > tr > td > a {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
    

.onGallery > ul {display: flex;  flex-wrap: wrap; justify-content: space-between;}
.onGallery > ul > li {width: calc((100% / 3) - 20px); margin-bottom: 30px; padding-bottom: 8px; border-radius: 5px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px;}
.onGallery > ul > li > a {position: relative; display: block; margin-bottom: 8px; overflow: hidden; background-color: #f1f1f1; background: url(/assets/img/common/noImg.png); background-size: 100%; background-position: center center;}
.onGallery > ul > li > a:before {position: relative; display: block; content: ""; padding-bottom: 100%; transition: all 0.3s;}
.onGallery > ul > li > a:hover > img {transform: scale(1.1);}
.onGallery > ul > li > a > img {position: absolute; top: 0; left: 0;  display: block; width: 100%; height: 100%; max-width: 100%; transition: all 0.3s;}

.onGallery > ul > li.notice > h4 > a {font-weight: 600; color: #000000;}
.onGallery > ul > li.notice > h4 > a::before {display: inline-block; content: "[공지]"; color: #00459E; margin-right: 8px;}
.onGallery > ul > li.new > h4 > a::before {display: inline-block; font-weight: 600; content: "[새글]"; color: #00459E; margin-right: 8px;}

.onGallery > ul > li > h4 {margin: 0 0 0 8px;}
.onGallery > ul > li > h4 > a {display: block; font-size: 17px; font-weight: 500; color: #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.onGallery > ul > li > h4 > a:hover,
.onGallery > ul > li > h4 > a:focus {color: #00459E;}

.onGallery > ul > li > strong {margin: 0 6px 0 8px; font-size: 14px; font-weight: 500;}
.onGallery > ul > li > span {font-size: 14px; font-weight: 400;}

.onBoardView {border-top: 1px solid #E1E1E1;}
    .onBoardViewHead {border-bottom: 1px dashed #E1E1E1; background-color: #F7F8F9;}
        .onBoardViewInfo {padding: 20px;}
        .onBoardViewInfo > h3 {margin-bottom: 14px; font-size: 22px; font-weight: 500; color: #000000;}
        .onBoardViewInfo > ul {}
        .onBoardViewInfo > ul > li {display: inline-block; margin-right: 24px;}
        .onBoardViewInfo > ul > li:last-child {margin-right: 0;}
        .onBoardViewInfo > ul > li > strong {margin-right: 6px; font-size: 14px; font-weight: 500;}
        .onBoardViewInfo > ul > li > span {font-size: 14px; font-weight: 400;}

        .onBoardViewFile {display: flex; padding: 14px 20px; font-size: 14px; font-weight: 500; color: #000000; background-color: #ffffff;}
        .onBoardViewFile > strong {display: inline-block; margin-right: 14px; font-weight: 500;}
        .onBoardViewFile > ul > li {margin-bottom: 4px;}
        .onBoardViewFile > ul > li:last-child {margin-bottom: 0;}
        .onBoardViewFile > ul > li > a:hover,
        .onBoardViewFile > ul > li > a:focus{color: #00459E; text-decoration: underline;}

    .onBoardViewBody {min-height: 300px; padding: 20px 20px 50px 20px; font-size: 15px; font-weight: 400; border-bottom: 1px solid #E1E1E1; color: #444444;}

    .onBoardFooter {}
        .onViewNav > a {display: block; padding: 0 20px; font-size: 15px; line-height: 55px; border-bottom: 1px solid #E1E1E1;}
        .onViewNav > a:hover,
        .onViewNav > a:focus {color: #00459E;}
        .onViewNav > a > strong {display: inline-block; margin-right: 12px; font-weight: 500; color: #000000;}
        .onViewNav > a > span {font-weight: 500;}

.onPaging {text-align: center; line-height: 26px;}
.onPaging > li {display: inline-block; min-width: 26px; font-size: 17px; font-weight: 400; vertical-align: middle; color: #888888; transition: all 0.3s; box-sizing: border-box;}
.onPaging > li:hover {color: #0049BE;}
.onPaging > li > a {display: block; padding: 0 4px;}
.onPaging > li > a > i {display: inline-block; line-height: 26px;}
.onPaging > li.on {font-weight: 600; color: #0049BE;}
.onPaging > li.icon {font-size: 12px; border-radius: 10px; color: #666666;}
.onPaging > li.icon:hover {color: #ffffff; background-color: #000000;}

.onTab {display: flex; margin-bottom: 32px; border: 1px solid #E1E1E1; border-radius: 5px; background-color: #F7F8F9;}
.onTab > li {flex: 1; font-size: 16px; font-weight: 500; text-align: center; border-right: 1px solid #E1E1E1;}
.onTab > li:last-child {border-right: 0;}
.onTab > li > a {display: flex; flex: 1; height: 100%; justify-content: center; align-items: center; padding: 12px; border-radius: 5px; box-sizing: border-box; color: #666666;}
.onTab > li > a:hover,
.onTab > li > a:focus {color: #0049BE; background-color: #e7eef8;}
.onTab > li.on {border-right: none;}
.onTab > li.on > a {color: #ffffff; background-color: #0049BE;}

.onTabSub {position: relative; display: flex; margin-bottom: 26px; white-space: nowrap; overflow: hidden;}
.onTabSub > li a {display: block; padding: 0 30px; font-size: 15px; font-weight: 400; line-height: 38px; text-align: center; border: 1px solid #E1E1E1; border-bottom: 1px solid #000000; border-radius: 5px 5px 0 0; color: #666666; background-color: #F9F9F9; transition: all 0.3s;}
.onTabSub > li:last-child {margin-right: 1px;}
/* .onTabSub > li:last-child::after {position: absolute; bottom: 0; left: 100%; display: block; content: ""; width: 2000px; height: 1px; background-color: #000;} */
.onTabSub > li > a:hover,
.onTabSub > li > a:focus {color: #000; box-shadow: inset 0 -3em 0 0 #ffffff; border-color: #000;}
.onTabSub > li > a.on {position: relative; border-color: #000000; border-bottom: 1px solid #ffffff; font-weight: 500; color: #000000; background-color: #ffffff; z-index: 1;}

.onTable {width: 100%; margin-bottom: 50px; text-align: center; border-top: 1px solid #333333; border-collapse: collapse;}
.onTable caption {position: absolute; font-size: 0; width: 0; height: 0; text-indent: 1000px; line-height: 0; overflow: hidden;}

.onTable .al {text-align:left;}
.onTable .ac {text-align:center;}
.onTable .ar {text-align:right;}

.onTable .ac > .onField {margin-right: 0;}
.onTable .ac > .onField input[type="checkbox"] + span {margin: 0; padding: 0;}
.onTable .ac > .onField input[type="checkbox"] + span:before {display: inline-block; position: static;}
.onTable .ac > .onField input[type="radio"] + span {margin: 0; padding: 0;}
.onTable .ac > .onField input[type="radio"] + span:before {left: 50%; right: auto; transform: translateX(-50%);}
.onTable .ac > .onField input[type="radio"] + span:after {left: 50%; right: auto; transform: scale(0.7) translateX(-50%); transform-origin: left;}

.onTableHead {position: relative; min-height: 20px; margin-bottom: 12px; font-size: 14px; font-weight: 400; color: #666666;}
.onTableHeadL {}
.onTableHeadR {position: absolute; bottom: 0; right: 0;}


.onConBox {margin-bottom: 55px;}


.onImgBox {margin-bottom: 55px; padding: 33px 0; text-align: center; overflow-x: auto;}
.onImgBox img {display: block; margin: auto;}


.onSearch {display: flex; align-items: center; margin-bottom: 40px; padding: 19px 24px; border: 1px solid #EFEFEF; background-color: #F7F8F9;}
    .onSearchForm {-ms-flex: 1 1 auto; flex: 1 1 auto; margin-right: 16px; padding-right: 40px; border-right: 1px solid #E1E1E1;}
    .onSearchForm:last-child {border-right: none;}
    .onSearchForm .onFieldRow {display: flex; margin-bottom: 12px;}
    .onSearchForm .onFieldRow:last-child {margin-bottom: 0;}
        .onSearchForm .onFieldCol {display: flex; align-items: center; width: 100%; margin-right: 20px;}
        .onSearchForm .onFieldCol:last-child {margin-right: 0;}
        .onSearchForm .onFieldCol > strong {display: block; flex: 0 0 60px; width: 60px; font-size: 14px; font-weight: 600; color: #1E1E1E;}
        .onSearchForm .onFieldCol > .onField {width: 100%; margin: 0;}
        .onSearchForm .onFieldCol > .onField select {width: 100%; margin-right: 5px;}
        .onSearchForm .onFieldCol > .onField select:last-child {margin-right: 0;}


    .onSearchBtnBox {display: flex;}
    .onSearchBtnBox > button,
    .onSearchBtnBox > a {margin-right: 6px;}
    .onSearchBtnBox > button:last-child,
    .onSearchBtnBox > a:last-child {margin-right: 0;}
        .onSearchBtn {display: flex; justify-content: center; align-items: center; min-width: 70px; height: 36px; font-size: 15px; font-weight: 500; text-align: center; transition: all 0.3s; border-radius: 2px; color: #ffffff; background-color: #003F9E;}
        .onSearchBtn:hover {box-shadow: inset 0 -3.5em 0 0 #152C5C; color: white; background-color: #1F3D7B;}
        .onSearchBtn > i {display: inline-block; margin-right: 5px;}

        .onSearchReset {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 2px; color: #fff; background-color: #636E81;}
        .onSearchReset > i {font-size: 16px;}


.onSearch.ac {justify-content: center;}
.onSearch.ac .onSearchForm {margin-right: 0; padding-right: 0; border-right: none; flex-grow: 0;}
.onSearch.ac .onSearchForm .onFieldCol {margin-right: 0;}
.onSearch.ac .onSearchBtn {position: static;}
.onSearch.ac .onField {display: flex; width: auto; margin-right: 9px;}


.onT1 {color: #000; font-family: Pretendard; font-size: 30px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -1.8px; margin-bottom: 30px;}
.onT2 {margin: 48px 0 16px 0;  font-size: 32px; font-weight: 600; letter-spacing: -0.06em; color: #333;}
.onT3 {margin: 32px 0 26px 0; font-size: 26px; font-weight: 600; letter-spacing: -0.06em; color: #333;} 
.onT4 {font-size: 17px; font-weight: 600; color: #333;}


.onP {margin-bottom: 30px; font-size: 16px; font-weight: 400; line-height: 25px; color: #555555;}


.onList {margin-bottom: 8px; line-height: 28px;}
.onList > li {display: flex; padding-left: 0; text-indent: 0; color: #444444;}
.onList > li > .onMarker {display: inline-block; margin-right: 2px;}


.onLoading {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255, 255, 255, 0.65); z-index: 1000;}
.onLoading > img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}


.onComment {position: relative; margin-bottom: 20px;}
.onComment > strong {position: absolute; top: 0; left: 0; padding-left: 6px; font-size: 14px; font-weight: 500; color: #00459E;}
.onComment > strong::before {position: absolute; top: 5px; left: 0; content: ""; display: inline-block; width: 2px; height: 12px; background-color: #00459E;}
.onComment > ul {margin-left: 40px; font-size: 14px; color: #666666;}
.onComment > ul > li {display: flex;}
.onComment > ul > li > .marker {display: block; margin-right: 2px;}

.onNoDataBox {padding: 14px; text-align: center;}
.onNoDataBox > i {display: inline-block; margin-bottom: 10px; font-size: 40px;}
.onNoDataBox > p {font-size: 18px; color: #000; font-weight: 500;}
.onNoDataBox > span {font-size: 14px; color: #666;}

.onTableDesc {border-collapse: collapse;}
.onTableDesc > tbody > tr > th {padding-right: 13px; font-weight: 500; line-height: 28px; text-align: left; vertical-align: top; color: #000000;}
.onTableDesc > tbody > tr > td {line-height: 28px;}
.onTableDesc > tbody > tr > td:first-child {padding-right: 13px; line-height: 28px; text-align: left; vertical-align: top;}

.onContact {display: flex; padding: 12px 0 12px 16px; font-size: 14px; font-weight: 400; border-radius: 5px; color: #444444; background-color: #F3F3F3;}
.onContact > strong {margin-right: 10px; padding-right: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; border-right: 1px solid #E1E1E1; color: #0C2940;}
.onContact > p {display:inline-block; padding-left: 10px;}
.onContact > p > i {display: inline-block; margin-right: 6px;}

.onTooltip {position: relative; display: inline-block; margin-left: 6px; vertical-align: middle;}
.onTooltip > a {display: inline-block; width: 20px; height: 20px; background: url(../img/common/icon_tooltip.svg);}
    .onTooltipIn {position: absolute; transform: translate(-25%, 12px); left: 50%; padding: 15px; border-radius: 10px; white-space: nowrap; background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.16) 0 0 6px; visibility: hidden; opacity: 0; z-index: -100; transition: all 0.3s 0.2s;}
    .onTooltipIn > strong {display: block; font-size: 14px; font-weight: 500; color: #0B84E1;}
    .onTooltipIn > p {font-size: 14px; font-weight: 400; color: #666666;}
.onTooltip:hover:after,
.onTooltip > a:focus {visibility: visible; opacity: 1; transition: all 0.3s;} 
.onTooltip:hover .onTooltipIn,
.onTooltip > a:focus + .onTooltipIn {visibility: visible; opacity: 1; z-index: 100; transition: all 0.3s;}

.onContentTR {position: absolute; top: 0; right: 0;}
.onContentTR > ul {overflow: hidden;}
.onContentTR > ul > li {float: left; margin-right: 10px;}
.onContentTR > ul > li:last-child {margin-right: 0;}
.onContentTR > ul > li > a {display: block; width: 34px; height: 34px; line-height: 34px; font-size: 20px; text-align: center; border-radius:50%; border: 1px solid #E1E1E1; transition: all 0.3s;}
.onContentTR > ul > li > a:hover,
.onContentTR > ul > li > a:focus {border-color: #00459E; color: #00459E;}

.onMainPopup {position: absolute; top: 0; left: 0; z-index: 100;}
.onMainPopup > ul > li {position: absolute; top: 0; left: 0; border-radius: 10px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.16) 0 0 20px; box-sizing: border-box;}
    .onMainPopupHead {display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 20px; font-size: 14px; font-weight: 500; color: #ffffff; background-color: #022222; box-sizing: border-box;}
    .onMainPopupBody {height: 100%; background: url(/assets/img/common/noImg.png) no-repeat center center; background-size: cover;}
    .onMainPopupBody > a {display: block;}
    .onMainPopupBody > a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
    .onMainPopupFooter {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 0 14px 0 20px; font-size: 14px; font-weight: 500; color: #ffffff; background-color: #022222; box-sizing: border-box;}
        .onMainPopupClose {padding: 6px;}

.onPopup {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000;}
.onPopup.on {display: block;}
    .onPopupIn {position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; transform: translate(-50%, -50%); width: calc(100% - 30px); height: calc(100% - 30px); max-width: 900px; max-height: 900px; background-color: #ffffff; border-radius: 10px; padding: 20px 30px 30px; box-sizing: border-box;}
        .onPopupHead {margin-bottom: 20px; border-bottom: 1px solid #E1E1E1;}
        .onPopupBody {overflow: auto;}
        .onPopupFooter {margin-top: auto;}
        .onPopupClose {position: absolute; top: 12px; right: 25px; padding: 5px; font-size: 26px;}

.onWinPopup {padding: 25px 34px 34px 34px; box-sizing: border-box;}
.onWinPopup_close i {float: left; font-size: 26px;}
    .onWinPopupTitle {margin-bottom: 20px; padding-bottom: 10px; font-size: 22px; font-weight: 500; border-bottom: 1px solid #E1E1E1; color: #0049BE;}