﻿html {font-size: 16pt; font-family: sans-serif;}
body {background: #f7f7f7; overflow-x: hidden;}

h1 {font-size: 1.2rem; color:#fff; display: inline-block;}
h3 {font-size: 0.6rem; color:#1883e3; display: inline-block;}
h4 {font-size: 1.5rem; color:#1883e3; font-weight: 500; display: inline-block;} 
h5 {font-size: 0.7rem; color:#5d6266; font-weight: 500;}
h6,label {font-size: 0.7rem; color:#5d6266; font-weight: 500; display: inline-block;}
th {font-size: 1rem; vertical-align: middle;}
td {font-size: 0.8rem; text-align:center;}

input {font-family: sans-serif;}
input[type="date"],input[type="email"],input[type="month"],input[type="number"],input[type="tel"],input[type="text"],input[type="password"] {text-indent: 10px; color: #000000;border: 1px solid #dedede;box-sizing: border-box;}
input[type="number"] {text-align: right;}
input[type='text'] {font-size: 0.6rem; color:#000;}
input[type='email'] {width:92%; font-size: 0.7rem; color:black;font-weight: 400;}
input[type='submit'] {width:100px; height:40px; position: absolute; right:10px; margin-top:-10px; border-radius: 50px; border:none; box-shadow: 10px 5px 10px rgba(94,105,119,0.5); background: #e6ecf3; color:#5d6266; font-size: 1rem; cursor: pointer; font-weight: 500;}
::-webkit-input-placeholder {color: #959595;}
::-moz-placeholder {color: #959595;}
:-ms-input-placeholder {color: #959595;}
:-moz-placeholder {color: #959595;}
.table select {font-size: 0.7rem;color: black;font-weight: 400;padding-left: 10px;height: 35px;}
 
/*[[[[[[[[[[[[[[ MENU ]]]]]]]]]]]]]]*/
.menu_box {width:300px; height:1050px; background:#0e68b9; position: fixed; z-index: 10000;}
.menu_top {display: flex;}
.menu_top h1 {margin:22px 0  0 10px; display: inline-block;}
.menu_top .close {position: absolute; top: 14px; right: 0px; cursor: pointer;}
.menu_top .close span {width:30px; height:1px; background: #fff; display: block;}
.menu_top .close span:nth-child(1) {transform: rotate(45deg);}
.menu_top .close span:nth-child(2) {transform: rotate(-45deg);}

.menu {color:#fff; margin-top:30px;}
.menu li {color:#fff; border-bottom: 0.5px solid rgba(255,255,255,0.5); width:300px; height:45px; line-height: 45px;}
.menu li a {color:#fff; display: inline-block;}
.menu li::before {content: ''; vertical-align: middle; display: inline-block; margin:0 20px 0 10px;}
.menu li:nth-child(1)::before {width:40px; height:40px; border-radius: 150px; background: url(../img/login_1_blue.svg) no-repeat center center #fff; background-size: 60%;}

.solo_link_list:before { content: "\f054"; font-family: FontAwesome; padding-right: 5px; }
.my-control {width: 100%;display: inline-block;height: calc(1.0em + .75rem + 2px);padding: .35rem .15rem;font-size: 0.8rem;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

/*[[[[[[[[[[[[[[ HEADER ]]]]]]]]]]]]]]*/
.header_wrap { width:100%; padding:5px 0 5px 0; }
.header_wrap > .header {display: flex; justify-content: space-between; margin:0 auto; max-width: 1200px; min-width: 320px;}
.header_wrap > .header h1, .header h2 {line-height: 30px;}
.header_wrap > .header > h2 {font-size: 1rem; color:#fff;  display: inline-block;}
.header_wrap > .header h2:nth-child(2)::first-letter{color:#1985e5;}
.header_wrap > .header h2:nth-child(2)::before{display: inline-block; width:30px; height:30px; border-radius: 50px; color:#1985e5; font-weight: 500; background: #fbd556; text-align: right;}
.header_wrap > .header > p {width:100px; height:30px; border-radius: 50px; background: #fff; margin-right:10px; text-align: center;}
.header_wrap > .header > p a {color:#1985e5; font-size: 0.7rem; line-height:30px;}
.header_wrap > .header > a { margin-left: 10px; }

.section1 { padding:5px 0; }
.section1 .search_wrap {margin:0 auto; background: #0e68b9; padding:8px 10px 5px 10px; min-width: 320px; position: relative; text-align: center;}

.tabcontent {display: none;}

table.type_m1 {width:100%; margin-bottom:0;}
table.type_m1>tbody {background-color: white;}
table.type_m1>tbody>tr>th>div {padding: 3px 10px; border:0; background-color: lightgray; border-radius: 7px; font-size: small; color: black; margin: 4px; white-space: nowrap;}
table.type_m1>tbody>tr>td {font-size: small; color:black;text-align: left;vertical-align: middle; padding:0; border:0;}

.ex-datagrid thead>tr>th {padding: 5px 0;}
.ex-datagrid thead>tr>th>a, .ex-datagrid thead>tr>th>span {font-size: 0.6rem;}
.ex-datagrid-wrap .ex-datagrid>tbody>tr>td {padding:4px 0; font-size: 0.6rem;}
.ex-datagrid-wrap .ex-datagrid>thead>tr>th {padding:4px 0;}

.more {display: none;}

/* CSS 스타일 */
.ticker-link {
    display: block; /* 너비를 가지기 위해 block 또는 inline-block 설정 */
    width: 200px; /* 고정 너비 설정 */
    height: 40px; /* 높이 설정 */
    line-height: 40px; /* 텍스트 수직 중앙 정렬 */
    border: 1px solid #333; /* 영역 확인용 테두리 */
    overflow: hidden; /* 넘치는 글자 숨기기 */
    white-space: nowrap; /* 줄바꿈 방지 */
    position: relative;
    text-decoration: none;
    color: #000;
    background-color: #f9f9f9;
}

.ticker-text {
    display: inline-block;
    padding-left: 100%; /* 처음 시작할 때 오른쪽 끝에서 나타나도록 설정 */
    animation: ticker-animation 10s linear infinite; /* 애니메이션 적용 */
}

/* 애니메이션 정의 */
@keyframes ticker-animation {
    0% {
        transform: translateX(0); /* 시작 지점 (padding-left 덕분에 오른쪽 끝) */
    }

    100% {
        transform: translateX(-100%); /* 왼쪽 끝까지 완전히 사라질 때까지 이동 */
    }
}

/* 마우스를 올렸을 때 멈추게 하고 싶다면 (옵션) */
.ticker-link:hover .ticker-text {
    animation-play-state: paused;
}