/* ---------------------- */
#content{width: 1100px; margin: 0 auto}
.container{padding: 0 10px; margin-top: 50px; min-height: 700px;}
/* .inner-menu ul { */
/*     display: table; */
/*     width: 100%; */
/*     table-layout: fixed; */
/*     border-right: 1px solid #626262; */
/*     border-top: 1px solid #626262; */
/*     border-bottom: 1px solid #626262; */
/* } */
/* .inner-menu ul li{display: inline-block; font-size: 15px} */
/* .inner-menu ul li { */
/*     display: table-cell; */
/*     vertical-align: middle; */
/*     width: calc(100% / 3); */
/*     border-left: 1px solid #626262; */
/* } */
/* .inner-menu ul li.active a, .inner-menu ul li:hover a { */
/*     border-bottom: 4px solid #016cbf; */
/*     font-weight: bold; */
/*     color: #016cbf; */
/* } */
/* .inner-menu ul li:hover a.no-hover { */
/*     border-bottom: 0; */
/*     font-weight: normal; */
/*     color: #626262; */
/* } */
/* .inner-menu ul li a { */
/*     display: block; */
/*     background-color: #fff; */
/*     text-align: center; */
/*     color: #000; */
/*     padding: 15px; */
/*     font-size: 15px; */
/* } */

section{padding: 0 0 90px}
section:first-child{padding: 70px 0}
section h4{font-size: 30px; padding: 0 0 55px; color: #016cbf; font-weight: bold}
section p{font-size: 18px; line-height: 2}

.image_one,
.image_two{width: 100%; height:auto}
.image_three{float: left; width: 49%; height: auto}
.image_three_ri{margin-left: 2%; height: auto}
.image_fore{display: block; width: 443px; height: auto; margin: 0 auto}
.text_one > p{padding: 40px 0 0}
.text_two > p{padding: 40px 0 0}
dl{padding: 40px 0}
dl dt{overflow: hidden; font-size: 20px; line-height: 1}
dl dt .text_num{padding:  0 20px 0; font-size: 60px; font-family: 'Montserrat'; font-weight: 300}
dl dt .text_s_tit{padding: 0 0 20px; vertical-align: top; line-height: 2; display: inline-block}
dl dd{padding: 0 64px 30px; font-size: 16px}

.sun{clear: both}

table{font-size: 14px}
table:first-of-type{text-align: center}
table thead{border-top: 2px solid #8c8c8c}
table th{font-weight: normal}
table tr{border-bottom: 1px solid #bbb9b9}
.bor_right{border-right: 1px solid #bbb9b9}

caption{margin: 50px 0 20px; font-size: 16px; font-weight: bold}
.grey{background: #e7e7e7}
.green{background: #a2d4e2}
.pink{background: #ffa480}
.pa_ten{padding: 10px 0}
.pa_tw{padding: 10px 20px}


/* board */

.t_num p{float: left; padding: 0 0 18px}
.t_num a{float: right}
.board_table thead{background: #f4f4f4}
.board_table thead th{padding: 20px 0; font-weight: bold;}
.board_table tbody td{padding: 8px 0}
.board_table tbody td span.t_b{width: 70px; height: 38px; background: #5c75b9; color: #fff; display: block; margin: 0 auto; border-radius: 22px}
.t_t{line-height: 38px}
.ico{display: block; width: 25px; height: 25px; margin: 0 auto; background: url(../images/icon_1.jpg) no-repeat}

.paging-area{padding: 90px 0; text-align: center}
.paging{display: table; margin: 0 auto}
.paging a{float: left; padding: 0 3px; margin: 0 2px;}
.paging a.on{color: #fff; background: #016cbf}
.prev-end,.prev,.next,.next-end{width: 23px; height: 23px}
.prev-end{background: url(../images/icon_paging_first.gif) no-repeat 50% 50%}
.prev{background: url(../images/icon_paging_prev.gif) no-repeat 50% 50%}
.next{background: url(../images/icon_paging_next.gif) no-repeat 50% 50%}
.next-end{background: url(../images/icon_paging_last.gif) no-repeat 50% 50%}


/* live */
.live_date{margin-bottom: 30px; position: relative; }
.container-graph { margin-top: 15px; }
.container-graph .live_date{margin-bottom: 15px;}
.l_d{display: inline-block; margin-right: 20px; font-size: 13px; }
.l_l{position: relative; padding: 0 5px; font-weight: bold}
.l_s{padding: 6px 20px; border: 1px solid #ccc; border-radius: 5px;}
/* .l_l:after{content: ''; display: inline-block; position: absolute; top: -7px; left: 0; width: 50px; height: 30px; background: #eeeeee; border-radius: 5px; z-index: -1} */
.graph ul li{float: left; width: 49%; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px}
.graph ul li:nth-child(even){margin-left: 15px}
.graph ul li p, .radi_graph ul li p{padding: 6px 35px; border-bottom: 1px solid #ccc}
.g_i{padding: 15px}
.graph ul li img, .radi_graph ul li img{margin: 0 auto; display: block}


/* radiation */
.radi_graph{overflow: hidden}
/*
.radi_graph ul li{float: left; width: 32.2%; margin-right: 15px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px}
 */
.radi_graph ul li{float: left; width: 49.2%; margin-right: 15px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 5px}
.radi_graph ul li:nth-child(2n){margin-right: 0}
.radi_graph ul li img{width: 100%}
.r_form form > div{display: inline-block; margin-right: 10px;vertical-align: top;}
.r_form form > div:nth-of-type(2n){margin-right: 20px}
.r_form form > div label, .r_form form > div span{font-weight: bold; margin-right: 10px}

/* 20231018 */
#searchForm > div label, #searchForm > div span{ font-weight: bold; margin-right: 0px}
input[type=date]{padding: 3px 10px; border: 1px solid #ccc}
.r_d{background: #939393; height: 40px; padding: 0px 20px; margin: 20px 0 20px; border-radius: 5px; line-height: 40px; text-align: left; color: #fff;}
.but button{padding: 5px 10px; margin-right: 2px; border-radius: 5px; background: #eeeeee;margin-bottom: 5px;}
.but button.b_red{background: #5a5695; padding: 5px 20px; color: #fff}
.g_i > table{margin-top: 15px}
.g_i > table tr{border-top: 1px solid #ccc}
.g_i > table tr th{width: 28%; padding: 10px 0; background: #e8e8e8}
.sc{width: 20px; height: 20px; background: green; border-radius: 20px; float: left; margin: 0 0px 0 10px}

/********************
 * apply css style
 ********************/
#content{ padding-top: 0px; padding-bottom: 0px; display: grid; margin-bottom: 50px; }
#content .axis_sm sup{ vertical-align: super; font-size: smaller; }
#content .inner-menu{ margin-top: 0px; }
#content .g_i{padding: 10px 2px 5px 2px; }
#content .inner-menu ul li.active{background-color: #016cbf;}
#content .graph ul li p, #content .radi_graph ul li p{font-weight: bold;}
section#introduce05 { padding-bottom: 0;}
section.site-links{ padding: 0; }
.north_route .g_i{padding: 15px !important; }
.north_route table tr th, .north_route table tr td{font-size: 12px !important;}
/* 230905 .but button.on {color: #fff; background-color: #b7b5d1;}*/
.but button.on {color: #fff; background-color: #8986B2;}
label, img, input, select, textarea, button {
    vertical-align: middle;
}
select.user-success {
    font-size: 14px;
    color: #373737;
    border: 1px solid #b9b9b9;
    background: #fff;
    min-width: 40px;
    text-align: center;
    padding: 4px 10px;
}
sub {
    vertical-align: sub;
    font-size: smaller;
}
.table_grade td,
.table_grade th{ vertical-align: middle; }
.div_grade { height: 53px; margin: 10px auto 5px; }
.sign1 {display:block;width:35px;height:35px;font-size:3.0em;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;color:#ffffff;text-align:center;background-image:url(../../images/spaceweather/sign.png);background-repeat:no-repeat;background-size:cover;vertical-align: middle;-ms-behavior: url(../css/backgroundsize.min.htc);}
.sign2 {background-position:-105px 0;display:block;width:35px;height:35px;font-size:3.0em;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;color:#ffffff;text-align:center;background-image:url(../../images/spaceweather/sign.png);background-repeat:no-repeat;background-size:cover;vertical-align: middle;-ms-behavior: url(../css/backgroundsize.min.htc);}
.sign3 {background-position:-175px 0;display:block;width:35px;height:35px;font-size:3.0em;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;color:#ffffff;text-align:center;background-image:url(../../images/spaceweather/sign.png);background-repeat:no-repeat;background-size:cover;vertical-align: middle;-ms-behavior: url(../css/backgroundsize.min.htc);}
.sign4 {background-position:-70px 0; display:block;width:35px;height:35px;font-size:3.0em;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;color:#ffffff;text-align:center;background-image:url(../../images/spaceweather/sign.png);background-repeat:no-repeat;background-size:cover;vertical-align: middle;-ms-behavior: url(../css/backgroundsize.min.htc);}

.pop-layer .pop-container {
    padding: 20px 25px;
}

.pop-layer p.ctxt {
    color: #666;
    line-height: 25px;
}

.pop-layer .btn-r {
    width: 100%;
    margin: 10px 0 20px;
    padding-top: 10px;
    border-top: 1px solid #DDD;
    text-align: right;
}

.pop-layer {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 900px;
    z-index: 10;
}

.dim-layer {
    display: none;
    position: fixed;
    _position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.dim-layer .dimBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    filter: alpha(opacity=50);
}

.dim-layer .pop-layer {
    display: block;
}

a.btn-layerClose {
    display: inline-block;
    height: 25px;
    padding: 0 14px 0;
    border: 1px solid #304a8a;
    background-color: #3f5a9d;
    font-size: 13px;
    color: #fff;
    line-height: 25px;
}

a.btn-layerClose:hover {
    border: 1px solid #091940;
    background-color: #1f326a;
    color: #fff;
}

.popup_box_inner{margin: 50px 0; border: 1px solid #ccc; border-radius: 10px; background: #fff}
.popup_box_inner p{position: relative; padding: 15px 35px; border-bottom: 1px solid #ccc}
.popup_box_inner p:after{content: ''; display: block; position: absolute; right: 0; top:0; width: 51px; height: 52px; background: url(../../images/spaceweather/close.png) no-repeat center / 50%; cursor: pointer}
.popup_box_image{padding: 50px; text-align: center}
img.popup-view{cursor: pointer;}
.radi_graph ul li p {
    padding: 15px 15px;
}

/*-----------------20221023-----------------------*/
.r_link {padding: 0 0 20px;
	display: flex;
	gap: 10px;
	align-items: center;
}
/*----------------------------------------------*/
.r_link > a {position: relative; display: block; width: 276px;padding: 5px 10px 5px 30px; border: 1px solid #5c75b9; border-radius: 50px; background: #5c75b9; text-align: center; font-size: 16px; color: #fff; text-decoration: underline; cursor: pointer}
.r_link > a:before {content: ''; display: block; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); width: 30px; height: 30px; background: url(../../images/spaceweather/arrow.png) no-repeat center}
.r_layer {display:none; position: relative; width: 100%; max-width: 1080px; height: 800px; overflow: auto; margin: 0 auto; padding: 40px; border: 1px solid #ccc; border-radius: 10px; position: absolute; background-color: #fff; z-index: 3; margin-top: 70px;}
.r_layer:before {content: '';display: block; position: absolute; top: 0; right: 0; width: 32px; height: 32px; padding: 20px; background: url(../../images/spaceweather/close.png) no-repeat center; cursor: pointer}
.r_layer::-webkit-scrollbar {width: 10px}
.r_layer::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px}
.r_layer::-webkit-scrollbar-track {width: 15px; background-color: transparent; border-radius: 10px}
.r_layer > span {font-size: 18px; font-weight: bold}
.r_layer > p {padding: 10px; line-height: 2}
.r_layer_image > img {width: 100%; margin: 0 auto; padding: 20px 0}
.r_layer_image > p {color: #767676}
.r_layer_image > p:last-child {font-size: 12px}
.r_layer .close-box { width: 50px; height: 50px; float: right; top: -29px; right: -29px; position: relative; }
.kream_desc { margin-top: 6px; }

/*-----------------20230510-----------------------*/
.graph h4 { font-weight: bold; font-size: 18px; padding: 0; }
/*----------------------------------------------*/

/*-----------------20230531-----------------------*/
.spaceweather_search { display: inline-block; position: absolute; right: 6px; top: -3px; }
.spaceweather_search label { font-weight: bold; margin-left: 20px; margin-right: 10px; }
.spaceweather_search div { display: inline-block; font-size: 13px; }
.spaceweather_search .datePicker { padding: 3px 20px; border: 1px solid #ccc; border-radius: 5px !important; width: 126px; }
.spaceweather_search .dateSearch { padding: 3px 20px; border: 1px solid #ccc; border-radius: 5px !important; font-weight: bold; }
.spaceweather_search .dateSearch:active { background-color: #dbdbdb; }
/*----------------------------------------------*/

/*-----------------20230614-----------------------*/
.chart-tab { display: block; }
.tab-hidden { display: none ; }
.container-graph .inner-menu { position: absolute; top: 100px; width: 43%; margin-left: -10px; max-width: 530px; }
.container-graph .inner-menu ul li a { padding: 10px; }
.graph.tab-view { width: 100%; }
/*----------------------------------------------*/

/*-----------------20231023-----------------------*/
/* 우주방사선 */

.r_link_a_box {
    display: flex;
    gap: 20px;
    align-items: center;
}

.r_link_a_table_popup {
    padding: 10px;
    box-sizing: border-box;
}

.r_link_a_table_popup caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: polygon(0 0, 0 0, 0 0);
}

.r_link_a_table_popup .r_link_a_table {
    font-size: 1.6rem;
    width: 100%;
}

.r_link_a_table_popup .r_link_a_table th {
    border-bottom: 1px solid #626262;
    padding: 10px;
    background-color: #f4f4f4;
    border-top: 1px solid #626262;
}

.r_link_a_table_popup .r_link_a_table td {
    border: 1px solid #b9b9b9;
    text-align: center;
    padding: 10px 5px;
    color: #232424;
    font-size: 14px;
    box-sizing: border-box;
    vertical-align: middle;
    background-color: #fff;
}
.r_link_a_table_popup .r_link_a_table td:nth-child(1){
    border-left: 1px solid #fff;
}
.r_link_a_table_popup .r_link_a_table td:last-child{
    border-right: 1px solid #fff;
}

.r_link_a_table_popup .r_link_a_table .r_link_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.r_link_a_table_popup .r_link_a_table .r_link_btn::after{
    background: url(/resources/homepage/images/spaceweather/site_go_icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 12px;
    content: '';
    width: 12px;
    height: 12px;
}

.r_layer.layer_02{
    height: max-content;
}

/* 열 너비 조정 */
.spaceWeather-table1 th:nth-child(1),
.spaceWeather-table1 td:nth-child(1) {
    width: 15%; /* 첫 번째 열 */
}

.spaceWeather-table1 th:nth-child(2),
.spaceWeather-table1 td:nth-child(2),
.spaceWeather-table1 th:nth-child(3),
.spaceWeather-table1 td:nth-child(3),
.spaceWeather-table1 th:nth-child(4),
.spaceWeather-table1 td:nth-child(4) {
    width: 20%; /* 두 번째, 세 번째, 네 번째 열 */
}

.spaceWeather-table2 th:nth-child(1),
.spaceWeather-table2 td:nth-child(1),
.spaceWeather-table2 th:nth-child(2),
.spaceWeather-table2 td:nth-child(2) {
    width: 7%; /* 첫 번째 열 */
}

/*----------------------------------------------*/

@media screen and (max-width: 1100px){
    #content{width: 100%}
    .graph ul li img, .radi_graph ul li img{width: 100%}

    /* radiation */
    .radi_graph ul li{width: 48.7%}
    .radi_graph ul li:nth-child(3n){margin-right: 15px}
    .radi_graph ul li:nth-child(even){margin-right: 0}
    .but{padding: 20px 0 0}
}

@media screen and (max-width: 980px){
    .graph ul li{width: 100%}
    .graph ul li:nth-child(even){margin-left: 0}
}

@media screen and (max-width: 768px){
    section:first-child:not(.site-links){padding: 40px 0}
    section{padding: 0 0 40px}
    section h4{padding: 0 0 20px}
    .text_one > p,
    .text_two > p{padding: 20px 0 0}
    section p{font-size: 16px}
    dl{padding: 40px 0 0}
    dl dd{padding: 0 20px 30px}
    dl dd:last-child{padding: 0 20px 0}
    dl dt .text_num{padding: 0 5px 0; font-size: 30px}
    dl dt .text_s_tit{padding: 0; font-size: 16px; font-weight: bold}

    /* live_momitoring */
    .graph ul li{width: 100%}
    .graph ul li:nth-child(even){margin-left: 0}
    .live_date{text-align: center; margin-bottom: 10px; }
    .l_d{display: block; height: 45px;}
    .l_d:last-child{padding-top: 20px}
    .spaceweather_search{ display: block; position: relative; }

    /* radiation */
    .radi_graph ul li{width: 48.4%}
    .popup_box_image {
        padding: 20px;
    }
    .r_layer { width: 95%; }
    .container-graph .inner-menu { width: 53%; margin-left: -10px; }
    .container-graph .inner-menu ul li a { padding: 2px; font-size: 13px; }
    #content .inner-menu { margin-top: 55px; }
    .inner-menu ul li.active a, .inner-menu ul li:hover a.no-hover {
        border-bottom: 4px solid #016cbf;
        font-weight: bold;
        color: #016cbf;
    }
}

@media screen and (max-width: 670px){
    .radi_graph ul li{width: 99%; margin-right: 0}
    .paging-area{padding: 35px 0}
    .r_form form > div:nth-of-type(2n) {display: block; padding: 10px 0 0 76px}
}

@media screen and (max-width: 514px){
    .spaceweather_search label { margin: 0 2px; }
}

@media screen and (max-width: 480px){
    .image_fore {width: 100%}
    section h4{font-size: 24px}
    .live_date{text-align: center}
    /* board */
    .board_table thead th{padding: 12px 0}
    .board_table tbody td{padding: 6px 0}
    .board_table tbody td span.t_b{width: 50px; height: 30px}
    .t_t{line-height: 30px}
    .paging-area{padding: 35px 0}
    .paging a{padding: 0}
    .but button {margin-bottom: 5px;font-size: 12px;padding: 5px 6px;}
    .r_form form > div {margin-right: 0px;}
    select.user-success {padding: 3px 10px;}
    .popup_box_image { padding: 10px; }
    .r_layer { width: 92%; padding: 20px; }
    .r_layer .close-box { top: -10px; right: -10px; }
    .graph ul li p { padding: 10px 15px; }
    .spaceweather_search label { display: none; }
    .spaceweather_search .search-div { margin-top: 6px; }
}

@media screen and (max-width: 368px){
    .spaceweather_search .search-div { width: 100%; }
    .spaceweather_search .date-div  { width: 42%; }
    .spaceweather_search .dateSearch { display: block; width: 84%; margin: 0 auto; }
}