/* 상수 CSS */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes spinner { to { transform: rotate(360deg); } } .spinner:after { content: ""; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin-top: -20px; margin-left: -20px; border-radius: 50%; border: 10px solid rgba(38, 178, 231, 0.3); border-top-color: rgba(38, 178, 231, 1); animation: spinner 1.6s linear infinite; } .d-show-ani { display:block; animation: fade-in 300ms; animation-fill-mode: forwards; } .d-show-ani.delay1000 { animation: fade-in 1000ms; } .d-visually-hidden { visibility: hidden; } .lh-none { line-height: 100%; } .min-w-25{min-width:25%!important}.min-w-50{min-width:50%!important}.min-w-75{min-width:75%!important}.min-w-100{min-width:100%!important}.min-w-auto{min-width:auto!important}.min-w-1px{min-width:1px!important}.min-w-2px{min-width:2px!important}.min-w-3px{min-width:3px!important}.min-w-4px{min-width:4px!important}.min-w-5px{min-width:5px!important}.min-w-6px{min-width:6px!important}.min-w-7px{min-width:7px!important}.min-w-8px{min-width:8px!important}.min-w-9px{min-width:9px!important}.min-w-10px{min-width:10px!important}.min-w-15px{min-width:15px!important}.min-w-20px{min-width:20px!important}.min-w-25px{min-width:25px!important}.min-w-30px{min-width:30px!important}.min-w-35px{min-width:35px!important}.min-w-40px{min-width:40px!important}.min-w-45px{min-width:45px!important}.min-w-50px{min-width:50px!important}.min-w-55px{min-width:55px!important}.min-w-60px{min-width:60px!important}.min-w-65px{min-width:65px!important}.min-w-70px{min-width:70px!important}.min-w-75px{min-width:75px!important}.min-w-80px{min-width:80px!important}.min-w-85px{min-width:85px!important}.min-w-90px{min-width:90px!important}.min-w-95px{min-width:95px!important}.min-w-100px{min-width:100px!important}.min-w-125px{min-width:125px!important}.min-w-150px{min-width:150px!important}.min-w-175px{min-width:175px!important}.min-w-200px{min-width:200px!important}.min-w-225px{min-width:225px!important}.min-w-250px{min-width:250px!important}.min-w-275px{min-width:275px!important}.min-w-300px{min-width:300px!important}.min-w-325px{min-width:325px!important}.min-w-350px{min-width:350px!important}.min-w-375px{min-width:375px!important}.min-w-400px{min-width:400px!important}.min-w-425px{min-width:425px!important}.min-w-450px{min-width:450px!important}.min-w-475px{min-width:475px!important}.min-w-500px{min-width:500px!important}.min-w-550px{min-width:550px!important}.min-w-600px{min-width:600px!important}.min-w-650px{min-width:650px!important}.min-w-700px{min-width:700px!important}.min-w-750px{min-width:750px!important}.min-w-800px{min-width:800px!important}.min-w-850px{min-width:850px!important}.min-w-900px{min-width:900px!important}.min-w-950px{min-width:950px!important}.min-w-1000px{min-width:1000px!important}.min-h-unset{min-height:unset!important} .ml_40 {margin-left:40px !important;} .download_btn_block { text-align:right; } .download_btn4component { display: inline-flex; align-items: center; cursor: pointer; width: auto; height: 45px; line-height: 125%; padding: 0 40px 0 25px; border: 1px solid #444; border-radius: 100px; background: #fff url(/apcc/img/apcc_ci_dow_icon-90b88c831578efbc9ec6f26591d84586.png) right 20px center no-repeat; } .download_btn4component.tiny { height: 45px; } .download_btn4component.wide { width:95%; } .download_textlink { display: inline-block; padding-left:5px; padding-right: 30px; border-bottom: 2px solid blue; color: blue; font-weight: bold; background: transparent url(/apcc/img/apcc_ci_dow_icon-90b88c831578efbc9ec6f26591d84586.png) right 5px center no-repeat; } .download_textlink.nonearrow { background-image: none; padding-right: 5px; } .download_textlink.noneunderline { border-bottom: none; } .download_textlink.tiny { font-size : 15px; border-bottom:0; padding-right:23px; font-weight: normal; white-space: nowrap; } .external_textlink { display: inline-block; padding-left:3px; padding-right: 25px; color: blue; text-decoration : underline; text-underline-offset : 4px; background: transparent url(/apcc/img/apcc_link_btn2blue-1dee7f0618e5f6e156a7f0892ca2354f.png) right 5px top 6px no-repeat; } .external_textlink.innerBoard { color: white; text-align: center; text-decoration: none; padding:10px; padding-left:15px; background-image: none ; /* background: transparent url(/apcc/img/right_icon-ab017f3bef8769f29c153ef1be4e1ed0.png) 95% center no-repeat; */ } .external_textlink.innerBoard:before{ content: ''; } .external_textlink.innerBoard:after{ content: url( "/apcc/img/right_icon-ab017f3bef8769f29c153ef1be4e1ed0.png" ); position:relative; left:5px; top:1px; vertical-align: middle; } .floatRight { float:right; } .hidden { display: none !important; } .custom-mouse-position { display:none !important; } .f_sp_thin { letter-spacing: -1px; } .f_sp_wide { letter-spacing: 2px; } .fcolor_white { color: white !important; } .block_hidden {display:none;} .block_show {display:block;} #capture {text-align:center;} /* 캡쳐버튼 */ a.always-active + .spcc_sub_leftmenu1_3 { display: block; } .apcc_sub09_btnstyle1 { height: 60px; color:#faff00; border:1px solid #4588e3; background-color: #4588e3; border-radius: 6px; text-align: center; } .apcc_sub09_btnstyle1.guide { padding-left: 2.0em; padding-right: 2.0em; border-radius: 25px; border:1px solid #25599f; background-color: #25599f; } .apcc_sub_optionbox > .input .apcc_sub09_btnstyle1 { width:100%; } #DOCUMENT_VUE_TARGET .apcc_sub09_stylebox1_content a.more { background: url(/apcc/img/sub09/apcc_leftmenu_downicon1-0e39400f8c035ef09200d12c1c51a7d3.png) right 20px center no-repeat; } /* 좌측메뉴 : .apcc_left_menubox1 */ #DYNAMIC_CLIMATE_LEFTMENU > li:last-child > ul > li:last-child, #DYNAMIC_CLIMATE_LEFTMENU > li:last-child > ul > li:last-child a { border-bottom: 1px solid #E5E5E5; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px } /* 동적기후 : 이미지 팝업 */ .imageviewer__modal { position: fixed; z-index:9999; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; } .imageviewer__modal__overlay { position: absolute; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; } .imageviewer__modal__content { position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; /* background-color: white; padding: 15px; border-radius: 15px; */ top: 0; width: auto; /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */ } .imageviewer__modal__content img { max-width:90%; max-height:80%; } .imageviewer__closeModal { position:absolute; top:0.3em; right:1.5em; font-size:3.0em; } /* ------------------ */ /* */ #DOCUMENT { font-size: 16px; line-height: 200%; } #DOCUMENT a, #DOCUMENT download_btn4component { cursor: pointer; } #DOCUMENT * { word-break: normal !important; overflow-wrap: break-word !important; } #DOCUMENT .apcc_sub09_titlebox1 .main_title { font-size:24px; } #DOCUMENT .apcc_sub_title_style1 { /* 중제목 - 필요시 추가(소제목보다 큰 제목) */ font-size:1.35em; background-position-y: 5px ; font-weight: bold; } #DOCUMENT .apcc_posts_sub_title1 { /* 소제목 */ font-size:1.20em; } #DOCUMENT .apcc_posts_sub_title1::after {content:''; position: absolute; left:0; top:7px; width: 10px; height: 10px; border-radius: 100%; background-color: #07A9F0;} #DOCUMENT .table th, #DOCUMENT .table td { font-size:inherit; } #DOCUMENT.lang_en * { word-break: normal !important; overflow-wrap: break-word !important; } #DOCUMENT .table>:not(caption)>*>* { padding: 0.5rem 0.5rem; border-bottom-width: 0px; box-shadow: none; } #DOCUMENT figure.table.model, #DOCUMENT figure.table.model table {width:100% !important;} #DOCUMENT figure.table table td, #DOCUMENT figure.table table th { border:1px solid #999 !important; padding:0.35em 0.4em; } #DOCUMENT figure.table table .head { background-color: #f9f9f9; } #DOCUMENT figure.table table td { font-size:0.9em; } #DOCUMENT figure.table table td p { padding: 0.35em 0; } #DOCUMENT .model.history {margin-left:1.5em; margin-bottom:30px;} #DOCUMENT .model.history > div {overflow:hidden; margin-bottom:15px;} #DOCUMENT .model.history > div > div { float: left; margin-right: 0.5em; font-weight: bold; } /* 년도 */ #DOCUMENT .model.history > div > ul { float: left; list-style-type: square !important; margin-left: 1.0em; padding-left: 1em !important; } #DOCUMENT .apcc_ci_stylebox1 .img_area li { padding-left: 0px; } #DOCUMENT .apcc_ci_stylebox1 ul li { text-indent: 0px; } /* 탭 링크 관련 */ .apcc_sub09_tab1.tabs {display: block;} .apcc_sub09_tab1.tabs li {width: 20%; float:left;} .apcc_sub09_tab1 li { text-align: center;} /* input type= */ .apcc-daytype, #DOCUMENT input[type='date'] { position: relative; } .apcc-daytype::-webkit-calendar-picker-indicator, #DOCUMENT input[type='date']::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; } .apcc-daytype::before, #DOCUMENT input[type='date']::before { content: attr(placeholder); width: 100%; height: 100%; } .apcc-daytype:valid::before, #DOCUMENT input[type='date']:valid::before { display: none; } /* 템플릿 wrap tag */ .apcc_sub09_stylebox1_content .block { display:block !important; } .apcc_sub09_stylebox1_content ul.default { list-style-type: square !important; padding-left:1.0em !important; } .apcc_sub09_stylebox1_content ul.default li { margin-bottom:0.45em; } .apcc_sub09_stylebox1_content .dy_image_flex { /*background-image: url(../../img/sub09/noimage.png); background-size: cover;*/ } /* 템플릿 index 페이지 제목 영역 */ .apcc_sub09_headtitle {position: relative;} .apcc_sub09_head_quicklink { float:right; } .apcc_sub09_head_quicklink ul, .apcc_sub09_head_quicklink li { } .apcc_sub09_head_quicklink li.mail a { display: inline-block; font-size:0px; height:32px; width:32px; background: url('/apcc/img/img_mail-8a75108d4b7bfa87836d0e64cd8a3662.png') no-repeat 0 0; position:absolute; top:0px; right: 2.0em; } .apcc_sub09_head_quicklink li.mail a:hover { background: url('/apcc/img/img_mail_on-3f2d5bf21e092413d042791903a99111.png') no-repeat 0 0; } /* 셀렉터 검색 */ .apcc_sub_optionbox > .input {position: relative;} .apcc_sub_optionbox > .input > label {position: absolute; background-color: white; padding: 0.1em 0.5em; line-height: 125%; top: -30px; left: 0; white-space: nowrap; } .apcc_sub_optionbox {display: flex; align-items: center; justify-content: space-between; padding:15px; border:2px solid rgb(0, 0, 0, 0.6); border-radius: 10px;} .apcc_sub_optionbox .apcc_optionstyle1 { height: 60px; background-color: transparent; border: none; text-align: center; } .apcc_sub_optionbox .input .apcc_optionstyle1 { width: 100%; } .apcc_sub_optionbox.type0 > * {--bs-gutter-x:0;} .apcc_sub_optionbox.type0.itemlen2 > * {width: calc(50% - 5px);} .apcc_sub_optionbox.type0.itemlen3 > * {width: calc(33.333333% - (30px / 3));} .apcc_sub_optionbox.type0.itemlen4 > * {width: calc(25% - (40px / 4));} .apcc_sub_optionbox.type0.itemlen5 > * {width: calc(20% - (50px / 5));} .apcc_sub_optionbox.type1 > *:nth-child(1) {width: calc(15% - (60px / 4));} .apcc_sub_optionbox.type1 > *:nth-child(2) {width: calc(20% - (60px / 4));} .apcc_sub_optionbox.type1 > *:nth-child(3) {width: calc(40% - (60px / 4));} .apcc_sub_optionbox.type1 > *:nth-child(4) {width: calc(25% - (60px / 4));} /*.apcc_sub_optionbox.type1.eng > *:nth-child(1) {width: calc(30% - (60px / 4));} .apcc_sub_optionbox.type1.eng > *:nth-child(3) {width: calc(25% - (60px / 4));}*/ .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(1) {width: calc(18% - (50px / 5));} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(2) {width: calc(12% - (60px / 5));} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(3) {width: calc(27% - (60px / 5));} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(4) {width: calc(20% - (60px / 5));} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(5) {width: calc(25% - (60px / 5));} /* 전지구-예측, 여름철계절내-INTRO*/ .apcc_sub_optionbox.type2 > *:nth-child(1) {width: calc(17% - (60px / 4));} .apcc_sub_optionbox.type2 > *:nth-child(2) {width: calc(24% - (60px / 4));} .apcc_sub_optionbox.type2 > *:nth-child(3) {width: calc(24% - (60px / 4));} .apcc_sub_optionbox.type2 > *:nth-child(4) {width: calc(35% - (60px / 4));} .apcc_sub_optionbox.type2.itemlen5 > *:nth-child(1) {width: calc(15% - (60px / 5));} .apcc_sub_optionbox.type2.itemlen5 > *:nth-child(2) {width: calc(20% - (60px / 5));} .apcc_sub_optionbox.type2.itemlen5 > *:nth-child(3) {width: calc(20% - (60px / 5));} .apcc_sub_optionbox.type2.itemlen5 > *:nth-child(4) {width: calc(28% - (60px / 5));} .apcc_sub_optionbox.type2.itemlen5 > *:nth-child(5) {width: calc(17% - (60px / 5));} .apcc_sub_optionbox.type3 > *:nth-child(1) {width: calc(20% - (60px / 3));} .apcc_sub_optionbox.type3 > *:nth-child(2) {width: calc(30% - (60px / 3));} .apcc_sub_optionbox.type3 > *:nth-child(3) {width: calc(50% - (60px / 3));} .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(1) {width: calc(((100% - 210px) * 0.3) - (60px / 3)); line-height: 115%;} .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(2) {width: calc(((100% - 210px) * 0.35) - (60px / 3));} .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(3) {width: calc(((100% - 210px) * 0.35) - (60px / 3));} .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(4) {width: 210px; line-height: 115%;} .apcc_sub_optionbox.type3.itemlen4 {background: url(/apcc/img/sub09/search-block-right-btnarea-bg-c0b92975acc6b4f6b6abe6e953c3f23b.png) no-repeat; background-position: right;} @media (min-width: 996px) { .apcc_sub_optionbox.type3.itemlen4.eng .external_textlink.innerBoard { padding-left: 10px; padding-right: 0px; white-space: nowrap; } } .apcc_sub_optionbox.type4 > *:nth-child(1) {width: calc(20% - (60px / 3));} .apcc_sub_optionbox.type4 > *:nth-child(2) {width: calc(35% - (60px / 3));} .apcc_sub_optionbox.type4 > *:nth-child(3) {width: calc(45% - (60px / 3));} /* 최근기후 검색-편차. */ .apcc_sub_optionbox.type5 > *:nth-child(1) {width: calc(16% - (60px / 4));} .apcc_sub_optionbox.type5 > *:nth-child(2) {width: calc(24% - (60px / 4));} .apcc_sub_optionbox.type5 > *:nth-child(3) {width: calc(24% - (60px / 4));} .apcc_sub_optionbox.type5 > *:nth-child(4) {width: calc(25% - (60px / 4));} .apcc_sub_optionbox.type5 > *:nth-child(5) {width: calc(11% - (60px / 4));} .apcc_sub_optionbox.type5 .daytype {width:100%; display:block;} /* 최근기후 검색-평균. */ .apcc_sub_optionbox.type6 > *:nth-child(1) {width: calc(15% - (60px / 5));} .apcc_sub_optionbox.type6 > *:nth-child(2) {width: calc(22% - (60px / 5));} .apcc_sub_optionbox.type6 > *:nth-child(3) {width: calc(22% - (60px / 5));} .apcc_sub_optionbox.type6 > *:nth-child(4) {width: calc(9% - (60px / 5));} .apcc_sub_optionbox.type6 > *:nth-child(5) {width: calc(21% - (60px / 5));} .apcc_sub_optionbox.type6 > *:nth-child(6) {width: calc(11% - (60px / 5));} .apcc_sub_optionbox.type6 .daytype {width:100%; display:block;} /* 공통 */ .apcc_optionstyle1.w10per {width: calc(10% - 10px); } .apcc_optionstyle1.w15per {width: calc(15% - 10px); } .apcc_optionstyle1.w20per {width: calc(20% - 10px); } .apcc_optionstyle1.w25per {width: calc(25% - 10px); } .apcc_optionstyle1.w30per {width: calc(30% - 10px); } .apcc_optionstyle1.w35per {width: calc(35% - 10px); } .apcc_optionstyle1.w40per {width: calc(40% - 10px); } .apcc_optionstyle1.w45per {width: calc(45% - 10px); } .apcc_optionstyle1.w50per {width: calc(50% - 10px); } /* 동적기후 관심변수 select 배경색 공통적용. */ #DOCUMENT .apcc_sub_optionbox .apcc_optionstyle1 { background-color: #eaf1ff; } /* ---------------------------------- */ /* 전지구 요약 - 캡쳐영역 */ #CONTENT-AREA-BLOCK { margin: 0 -10px; } #CONTENT-CAPTURE-BLOCK { width: calc(100% - 0px); padding: 0 10px; padding-bottom: 15px; } .summaryHindcast01 *, .summaryHindcast02 *, #PLOY-CHART4LINE * {cursor: default;} .global_summary_infotext { margin-left: 2.5em; margin-bottom:2.0em; } .globe-summary-popup { line-height: 150% !important; } /* 전지구 요약 : apcc_style.css, apcc_sub09_style.css */ .apcc_sub09_mapbox1 .mobile-only {display:none;} .apcc_sub09_grapharea1 h1 {text-align:center; font-size:18px;} /* ================================== */ /* 전지구 - 기후전망 */ #DOCUMENT .slider { width: 100%; height: auto; position: relative; overflow: hidden; /* <=== */ } #DOCUMENT .slide { width: 100%; height: auto; position: absolute; transition: all 0.5s; } #DOCUMENT .slide img { width: 100%; height: auto; /*object-fit: cover;*/ } #DOCUMENT .slider .btn { position: absolute; width: 40px; height: 40px; padding: 10px; padding-top:7px; border: none; border-radius: 50%; z-index: 10; cursor: pointer; background-color: rgba(0, 0, 0, 0.15); font-size: 18px; } #DOCUMENT .slider .btn:active { transform: scale(1.1); } #DOCUMENT .slider .btn-prev { top: 45%; left: 2%; } #DOCUMENT .slider .btn-next { top: 45%; right: 2%; } .apcc_sub09_stylebox1_content .nav.nav-pills .nav-item .nav-link { border: 1px solid #DFDFDF; border-radius: 0; padding-left:2.0em; padding-right:2.0em; } .apcc_sub09_stylebox1_content .nav.nav-pills .nav-item .nav-link.active { background-color: #00ADE2; border: 1px solid #00ADE2; color:white; } /* */ #apccmap_eastasia-abnormal-barchart { display:flex; width:100%; justify-content: center; align-items: center; } /* ------------------ */ /* MAP 관련 */ #MAP-AREA-BLOCK { margin: 0 -10px; position:relative; width:auto; overflow-y:hidden; overflow-x:auto; } #MAP-AREA-BLOCK .MAP-CONTROL-BTNS { min-height: 15px; } #MAP-CAPTURE-BLOCK { width:calc(100% - 0px); padding: 0 10px; padding-bottom: 15px; /* min-width:800px !important; max-width:1300px !important; */ } #MAP-TITLE { margin-top:15px; line-height:200%; } .apccmap-block { width: 100%; /* 100%; */ position:relative; } .apccmap-block .ol-zoom { display:none; top: .5em; right: .5em; left: auto; } .apcc_sub09_mapeventbox1 .ol-viewport { border: 1px solid #CCC; } .map_subinfomation_text { font-size: 1.4em; overflow: hidden; } .map_subinfomation_text div:nth-child(1) { float: left; } .map_subinfomation_text div:nth-child(2) { float: right; } .openlayer-map-controls-btn01 { text-align: left; } .openlayer-map-controls-btn02 { text-align: right; } #dropdownRegionMenuButton4Openlayer { width: 70px; } .openlayer-map-controls-btn01 button, .openlayer-map-controls-btn02 button { background-color:darkgrey; width:45px; height:45px; padding:5px 10px; border-radius: 8px; color:white; font-size:1.5em; margin-right:5px; } .openlayer-map-controls-btn01 button img, .openlayer-map-controls-btn02 button img { position: relative; top: -3px; } .openlayer-map-controls-btn02 button.img { padding-top:5px; } .openlayer-map-controls-btn02 button:last-child { margin-right:0px; } .apccmap-color { width: auto; margin:0 auto; margin-top:1.0em; text-align:center; font-size:18px; padding-bottom: 30px;} .apccmap-color .color-item { display:inline-block; width:50px; height:35px; border:1px solid #000000; margin:0 6px; line-height: 200%; } .apccmap-color .color-item span { position:relative; display:inline-block; width:50px; margin:0 6px; top:calc(100% + 5px); left:calc(50% + 0px); text-align:center; font-size:1.0em; } .apccmap-color .color-item.hgt-avg span {letter-spacing: -1px; white-space: nowrap;} .apccmap-color .color-item.sst-avg { width:35px; } .apccmap-color .color-item.sst-avg span { width: 35px; } .apccmap-color.wide .color-item { width:80px; } /* .apccmap-color.wide.minheight { min-height:80px; } */ .apccmap-color.wide .color-item span { width:80px; } .apccmap-color.width-sm .color-item { width:50px; font-size:0.85em; line-height: 250%;} .apccmap-color.width-sm .color-item span { width: 50px; } .apccmap-color.drought .color-item { width:120px; } .apccmap-color.drought.width-sm .color-item { width:80px; font-size:0.85em;} .apccmap-collormapping-gaus {overflow:hidden; display:inline-block; padding-bottom: 1.25em; } .apccmap-collormapping-gaus .color-item { width:35px; margin:0 4px; } .apccmap-collormapping-gaus .color-item span { width:37px; } .apccmap-collormapping-gaus .below {display:inline-block; min-height:120px;} .apccmap-collormapping-gaus .below .text {text-align:center; font-weight: bold; font-size:1.25em;} .apccmap-collormapping-gaus .near {display:inline-block; min-height:120px;} .apccmap-collormapping-gaus .near .text {text-align:center; font-weight: bold; font-size:1.25em;} .apccmap-collormapping-gaus .above {display:inline-block; min-height:120px;} .apccmap-collormapping-gaus .above .text {text-align:center; font-weight: bold; font-size:1.25em;} #DOCUMENT_VUE_TARGET.custom-md .apccmap-color .color-item { width:40px; } #DOCUMENT_VUE_TARGET.custom-md .apccmap-color .color-item span { width: 40px; } #DOCUMENT_VUE_TARGET.custom-md .apccmap-color .color-item.sst-avg { width:35px; } #DOCUMENT_VUE_TARGET.custom-md .apccmap-color .color-item.sst-avg span { width: 35px; } #DOCUMENT_VUE_TARGET.custom-md .apcc_sub_optionbox.type5 select, #DOCUMENT_VUE_TARGET.custom-md .apcc_sub_optionbox.type5 input, #DOCUMENT_VUE_TARGET.custom-md .apcc_sub_optionbox.type5 button { font-size: 0.8em } #DOCUMENT_VUE_TARGET.custom-md .apccmap-collormapping-gaus .text {font-size:1.0em;} #DOCUMENT_VUE_TARGET.custom-md .apccmap-collormapping-gaus .color-item {width:25px; height:25px; line-height: 100%;} #DOCUMENT_VUE_TARGET.custom-md .apccmap-collormapping-gaus .color-item span { width:25px; font-size:0.8em; line-height: 100%; } .map-apcc-copy { position:absolute; bottom:0; left:0; width:10%; height:10%; max-width:300px; min-width:200px; max-height: 120px; min-height:80px; background-color:white; border:1px solid #CCC; padding:5px; text-align:left; } .apcc_map_copyright { position:absolute; bottom:20px; border:1px solid #CCC; padding:0.7em 1.0em 0.5em 1.0em; font-size:0.9em; width:auto; max-width:500px; min-width:100px; line-height:150% !important; background-color:rgba(255,255,255,0.85); text-align:left; } .apcc_map_copyright.tiny { border:0px solid #CCC !important; min-width:250px!important; white-space:nowrap; background-color:rgba(255,255,255,0.0) !important; text-align: right !important; font-size:1.25em; right:2.0em; } .apcc_map_windbase { position:absolute; top:0px; right:0px; border:1px solid #CCC; padding:0.5em 0.5em 0.5em 0.5em; font-size:0.9em; width:calc(2.0em + 38px); height:auto; background-color:white; overflow:hidden; text-align: center; font-size:1.3em; font-weight: bold; line-height: 105%; } .ol-popup { position: absolute; background-color: white; box-shadow: 0 1px 4px rgba(0,0,0,0.2); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 280px; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "✖"; } /* popover : 부트스트랩 값 수정.*/ .popover { border-radius: 0.75rem !important; min-width : 350px !important; max-width : 450px !important; margin-bottom:50px !important; /* border:0; background-color:transparent; */ } .popover .popover-body { } /* apccmap 팝업의 부트스트랩스타일 재정의 */ .popupinfo { /* min-width: 250px; max-width:500px; */ width:100%; font-family: 'Nanum_Neo_R'; } .popupinfo.scm, .popupinfo.gaus { /*min-width: 300px; width:400px;*/ /*width: 100%;*/ } .popupinfo .mt_10 { margin-top:10px; } .popupinfo .pb_0 { padding-bottom:0px !important; } .popupinfo .row { --bs-gutter-x: 0; --bs-gutter-y: 0; } .popupinfo .fbold { font-weight: bold; } .popupinfo .tline { border-top: 1px solid #EEE; } .popupinfo .bline { border-bottom: 1px solid #EEE; } .popupinfo .rline { border-right: 1px solid #EEE; } .popupinfo .lline { border-left: 1px solid #EEE; } .popupinfo .tline.whiteline { border-top: 1px solid #FFFFFF; } .popupinfo .bline.whiteline { border-bottom: 1px solid #FFFFFF; } .popupinfo .rline.whiteline { border-right: 1px solid #FFFFFF; } .popupinfo .lline.whiteline { border-left: 1px solid #FFFFFF; } .popupinfo.abnormal { min-width: 100px; width:auto; } .popupinfo.tiny { min-width: 100px; width:auto; } .popupinfo.tiny .lat, .popupinfo.tiny .lon, .popupinfo.tiny .value { white-space: nowrap; } .popupinfo.tiny .apcc_sub09_grapharea1_close { width: 40px; height:40px; } popupinfo tiny abnormal .popupinfo.scm .datafield, .popupinfo.scm .datavalue, .popupinfo.gaus .datafield, .popupinfo.gaus .datavalue { float:left; width:50%; text-align:center; white-space: nowrap; font-size:1.15em; padding:10px; } .popupinfo.scm .datafield, .popupinfo.gaus .datafield { font-weight: bold; width:55%; } .popupinfo.scm .datafield.lightbg, .popupinfo.gaus .datafield.lightbg { background-color: #F6F6F6; justify-content: center; padding: 10px; text-align: center; } .popupinfo.scm .datavalue, .popupinfo.gaus .datavalue { width:45%; } .popupinfo.scm .datafield.rline, .popupinfo.scm .datavalue.rline, .popupinfo.gaus .datafield.rline, .popupinfo.gaus .datavalue.rline { border-right: 1px solid #EEE; } .popupinfo.scm .datafield.lline, .popupinfo.scm .datavalue.lline, .popupinfo.gaus .datafield.lline, .popupinfo.gaus .datavalue.lline { border-left: 1px solid #EEE; } .popupinfo.scm .datafield.tline, .popupinfo.scm .datavalue.tline, .popupinfo.gaus .datafield.tline, .popupinfo.gaus .datavalue.tline { border-top: 1px solid #EEE; } .popupinfo.scm .datafield.bline, .popupinfo.scm .datavalue.bline, .popupinfo.gaus .datafield.bline, .popupinfo.gaus .datavalue.bline { border-bottom: 1px solid #EEE; } .popupinfo.scm .hindcast_label, .popupinfo.gaus .hindcast_label { font-size:1.25em; text-align:center; padding: 5px 0px; } .popupinfo.gaus .colortypes li { text-align:left; position:relative; } .popupinfo.gaus .colortypes li { text-align:left; padding: 0 0.5em; } .popupinfo.gaus .colortypes li .apcc_sub09_colorbox { position:absolute; top:5px; right:1.0em; } .popover-closer { cursor:pointer; } .showTinyPopup + .popover { min-width:150px !important; } .showTinyPopup + .popover .popupinfo b { font-weight: bold; display:inline-block; width: 60px; font-size: 1.25em; } /* 동아시아 */ /* 닷챠크 */ .apcc_map_eastasia_dotchart_pos { /* 챠트위치 */ position:absolute; right:60px; bottom:70px; } .apcc_map_eastasia_dotchart_outline { /* 챠트 외곽박스 */ position:absolute; top:25px; left:84px; width:78px; height:175px; border:1px solid #000; } @media (max-width: 576px) { .apcc_map_eastasia_dotchart_pos { right:30px; bottom:30px; } .apcc_map_eastasia_dotchart_outline { /* 챠트 외곽박스 */ top:12px; left:78px; width:46px; height:115px; } .dropdownloist_major_areas { max-height: 300px; overflow-y: auto; } } #PLOY-CHART4LINE { width:100%; height:130px; } #PLOY-CHART4PIE { width:140px; height:140px; margin:auto; } .ol-popup { position: absolute; background-color: white; box-shadow: 0 1px 4px rgba(0,0,0,0.2); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 12px; left: -50px; min-width: 280px; } .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; } .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; } .ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; } .ol-popup-closer:after { content: "✖"; } .map-apcc-copy { position:absolute; bottom:0; left:0; width:10%; height:10%; max-width:300px; min-width:200px; max-height: 120px; min-height:80px; background-color:white; border:1px solid #CCC; padding:5px; text-align:left; } .modebar-- { display: none !important; /* modebar 숨김처리. */ } .apcc-daytype, #DOCUMENT input[type='date'] { position: relative; } .apcc-daytype::-webkit-calendar-picker-indicator, #DOCUMENT input[type='date']::-webkit-calendar-picker-indicator { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; } .apcc-daytype::before, #DOCUMENT input[type='date']::before { content: attr(placeholder); width: 100%; height: 100%; } .apcc-daytype:valid::before, #DOCUMENT input[type='date']:valid::before { display: none; } /**/ .apcc_sub09_stylebox1_content .block { display:block !important; } .apcc_sub09_stylebox1_content ul.default { list-style-type: square !important; padding-left:1.0em !important; } .apcc_sub09_stylebox1_content ul.default li { margin-bottom:0.45em; } .apcc_sub09_stylebox1_content .dy_image_flex { position: relative; /*background-image: url(../../img/sub09/noimage.png); background-size: cover;*/ } /**/ .apcc_sub09_headtitle {position: relative;} .apcc_sub09_head_quicklink { float:right; } .apcc_sub09_head_quicklink ul, .apcc_sub09_head_quicklink li { } .apcc_sub09_head_quicklink li.mail a { display: inline-block; font-size:0px; height:32px; width:32px; background: url('/apcc/img/img_mail-8a75108d4b7bfa87836d0e64cd8a3662.png') no-repeat 0 0; position:absolute; top:0px; right: 2.0em; } .apcc_sub09_head_quicklink li.mail a:hover { background: url('/apcc/img/img_mail_on-3f2d5bf21e092413d042791903a99111.png') no-repeat 0 0; } @media (min-width: 1400px) { .apcc_sub09_stylebox1_content .dy_image_flex img.object-fit-none { object-fit: none; } } @media (max-width: 1330px){ .apcc_optionstyle1 {height: 45px; padding-right:30px; background-position: right 10px center;} .apcc_optionstyle1.daytype {background-position: right 10px center, left 10px center; padding-left:30px;} .apcc_sub09_titlebox1 .sub_title {position: relative; padding-top:5px; text-align: right;} .apcc_sub09_mapbox1 .icon_img {width: 50px; right:15px; top:15px;} .apcc_sub09_mapbox1 .mapbtn1, .apcc_sub09_mapbtn1 {width: 45px; height: 45px; top:15px; right:15px;} .apcc_sub09_mapbox1 .footer_img {left:15px; bottom:15px;} /*.apcc_sub09_btnstyle1 {height: 45px !important;}*/ .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(1), .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(4) { font-size:0.9em;} } @media (max-width: 1330px) and (min-width: 1200px) { #DOCUMENT_VUE_TARGET.custom-md .apccmap-color .color-item.sst-avg { width: 30px; height: 30px; } #DOCUMENT_VUE_TARGET.custom-md .apccmap-color .color-item.sst-avg span { width: 30px; } } /* ==================================================== */ /* 동적 콘텐츠 이미지 */ .apcc_sub09_stylebox1_content .dy_image_flex img{ width:100%; margin-bottom:1.0em; object-fit:contain; } @media (min-width: 1400px) { .apcc_sub09_stylebox1_content .dy_image_flex img.object-fit-none { object-fit: none; } } /* 아웃룩/해수면 > ENSO_Alert 좌우그림과 높이 맞추기위한 예외 css*/ .apcc_sub09_stylebox1_content .dy_image_flex img.ENSO_Alert{max-height:360px;} @media (max-width: 1200px) {.apcc_sub09_stylebox1_content .dy_image_flex img.ENSO_Alert{max-height:270px;}} @media (max-width: 992px) {.apcc_sub09_stylebox1_content .dy_image_flex img.ENSO_Alert{max-height:300px;}} @media (max-width: 768px) {.apcc_sub09_stylebox1_content .dy_image_flex img.ENSO_Alert{max-height:100%;}} @media (max-width: 576px) {.apcc_sub09_stylebox1_content .dy_image_flex img.ENSO_Alert{max-height:100%;}} /* 좌우그림 높이 폭 조정 예외 css*/ .apcc_sub09_stylebox1_content .dy_image_flex .right-w90per {max-width:90%; margin-left:10%;} .apcc_sub09_stylebox1_content .dy_image_flex .right-w87per {max-width:87%; margin-left:13%;} .apcc_sub09_stylebox1_content .dy_image_flex .right-w85per {max-width:85%; margin-left:15%;} .apcc_sub09_stylebox1_content .dy_image_flex .right-w80per {max-width:80%; margin-left:20%;} @media (max-width: 768px) { .apcc_sub09_stylebox1_content .dy_image_flex .right-w90per, .apcc_sub09_stylebox1_content .dy_image_flex .right-w87per, .apcc_sub09_stylebox1_content .dy_image_flex .right-w85per, .apcc_sub09_stylebox1_content .dy_image_flex .right-w80per {margin-left:auto; margin-right:auto;} } .apcc_sub09_stylebox1_content .dy_image_flex .left-w90per {max-width:90%; margin-right:10%;} .apcc_sub09_stylebox1_content .dy_image_flex .left-w90per {max-width:87%; margin-right:13%;} .apcc_sub09_stylebox1_content .dy_image_flex .left-w85per {max-width:85%; margin-right:15%; margin-top:3px;} .apcc_sub09_stylebox1_content .dy_image_flex .left-w80per {max-width:80%; margin-right:20%;} @media (max-width: 768px) { .apcc_sub09_stylebox1_content .dy_image_flex .left-w90per, .apcc_sub09_stylebox1_content .dy_image_flex .left-w90per, .apcc_sub09_stylebox1_content .dy_image_flex .left-w85per, .apcc_sub09_stylebox1_content .dy_image_flex .left-w80per {max-width:90%; margin:auto;} } /* 여름철계절진동예측 - 정의 (PC) */ @media (min-width: 992px) { .bsiso-start-period:after { content: '~'; position: absolute; right: -0.8em; top: 15px; } } @media (min-width: 769px) and (max-width:991px) { .bsiso-start-period:after { content: '~'; position: absolute; right: -0.6em; top: 15px; z-index:999; } } .apcc_sub09_stylebox1_content .img-item { position:relative; } .apcc_sub09_stylebox1_content .img-item .btn-close { position:absolute; right:0; top:0; } .apcc_sub09_stylebox1_content .img-item .btn-close.hoveronly { display:none; } .apcc_sub09_stylebox1_content .img-item:hover .btn-close.hoveronly { display:block; } .apcc_sub09_stylebox1_content .table-responsive table.globe-summary-popup { width: calc(200px * 3); } .apcc_sub_optionbox.summer_intro > :nth-child(1) { width: calc(14% - (60px / 4)); } .apcc_sub_optionbox.summer_intro > :nth-child(2) { width: calc(14% - (60px / 4)); } .apcc_sub_optionbox.summer_intro > :nth-child(3) { width: calc(15% - (60px / 4)); } .apcc_sub_optionbox.summer_intro > :nth-child(4) { width: calc(15% - (60px / 4)); } .apcc_sub_optionbox.summer_intro > :nth-child(5) { width: calc(30% - (60px / 4)); } .apcc_sub_optionbox.summer_intro > :nth-child(6) { width: calc(12% - (60px / 4)); } /* 기타콘텐츠 - 박스타입 */ #DOCUMENT_VUE_TARGET .boxtype_01 { background-color: #FBFBFB; } #DOCUMENT_VUE_TARGET .boxtype_02 { border: 1px solid #E3E3E3; border-radius: 5px; border-style: dashed; } #DOCUMENT_VUE_TARGET .boxtype_03 { background-color: rgba(223, 242, 250, 0.5); border: 1px solid rgb(223, 242, 250);; border-radius: 0px; } /* 기타콘텐츠 - 리스트 도트타입 */ .list-style-dot { list-style : outside !important; } .list-style-circle { list-style-type: circle !important; } .list-style-disc { list-style-type: disc !important; } .apcc_sub09_08_list1 li { min-width: calc(50% - 2.0em); width: auto!important; margin-bottom: 0px; padding:0; line-height:135%; white-space: nowrap; margin-right: 1.5em; } /* ============ */ @media (min-width: 997px) { .external_textlink.innerBoard:after { content: url("/apcc/img/right_icon-ab017f3bef8769f29c153ef1be4e1ed0.png"); position: relative; left: 5px; top: 1px; vertical-align: middle; } } @media (max-width: 996px) { .external_textlink.innerBoard { color: blue; text-align:right; } .external_textlink.innerBoard:after { content: url("/apcc/img/dow_icon3-9d1278ebad4d086bd8f045f6b9b57b8c.png"); position: relative; left: 5px; top: 0px; } /* */ .apcc_sub_optionbox > .input.mme-label { margin-top:2.0em; } .apcc_sub_optionbox > .input.mme-label label { width: 100%; text-align: center; } .apcc_sub_optionbox > .input.mme-label.w200 label { width: 200%; } .apcc_sub_optionbox > .input.mme-label-none { margin-top:2.0em; } .apcc_sub_optionbox > .input .apcc_sub09_btnstyle1 { height: 60px; width:100%; } /* 검색 TYPE1. */ .apcc_sub_optionbox.type1 {flex-wrap: wrap;} .apcc_sub_optionbox.type1 > *:nth-child(1), .apcc_sub_optionbox.type1.eng > *:nth-child(1) {width: calc(100%); margin-bottom: 10px;} .apcc_sub_optionbox.type1 > *:nth-child(2) {width: calc(33.333333333333% - (60px / 4));} .apcc_sub_optionbox.type1 > *:nth-child(3), .apcc_sub_optionbox.type1.eng > *:nth-child(3) {width: calc(33.333333333333% - (60px / 4));} .apcc_sub_optionbox.type1 > *:nth-child(4) {width: calc(33.333333333333% - (60px / 4));} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(1) {width: calc(30% - 10px); margin-bottom:10px;} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(2) {width: calc(25% - 10px); margin-bottom:10px;} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(3) {width: calc(45% - 10px); margin-bottom:10px;} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(4) {width: calc(30% - 10px);} .apcc_sub_optionbox.type1.itemlen5 > *:nth-child(5) {width: calc(70% - 5px);} /* 검색 TYPE2. */ .apcc_sub_optionbox.type2 {flex-wrap: wrap;} /*.apcc_sub_optionbox.type2 > * {width: calc(50% - 5px) !important; margin-bottom:10px;}*/ .apcc_sub_optionbox.type2.itemlen5 > *:nth-child(1) {width: calc(100%) !important; margin-bottom:10px;} .apcc_sub_optionbox.type3 > *:nth-child(1), .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(1) {width: calc(100%); margin-bottom: 10px;} .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(4) {width: calc(100%); margin-top:10px; margin-bottom: 0px; font-size: 1.0em;} .apcc_sub_optionbox.type3 > *:nth-child(2), .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(2) {width: calc(50% - 5px);} .apcc_sub_optionbox.type3 > *:nth-child(3), .apcc_sub_optionbox.type3.itemlen4 > *:nth-child(3) {width: calc(50% - 5px);} .apcc_sub_optionbox.type3.itemlen4 {background-image: none;} .apcc_sub_optionbox.type2.itemlen4 > *:nth-child(1) {width: calc(26% - 5px);} .apcc_sub_optionbox.type2.itemlen4 > *:nth-child(2) {width: calc(37% - 5px);} .apcc_sub_optionbox.type2.itemlen4 > *:nth-child(3) {width: calc(37% - 5px);} /* 검색 TYPE3. */ .apcc_sub_optionbox.type3 {flex-wrap: wrap;} .apcc_sub_optionbox.type3 > *:nth-child(1) {width: calc(100%); margin-bottom: 10px;} .apcc_sub_optionbox.type3 > *:nth-child(2) {width: calc(50% - 5px);} .apcc_sub_optionbox.type3 > *:nth-child(3) {width: calc(50% - 5px);} /* 최근기후 검색. */ .apcc_sub_optionbox.type5 { display:block !important; overflow:hidden } .apcc_sub_optionbox.type5 > * { display:inline-block } .apcc_sub_optionbox.type5 > *:nth-child(1) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(2) {width: calc(50% - 5px); margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(3) {width: calc(50% - 5px); float:right; margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(4) {width: calc(50% - 5px); margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(5) {width: calc(50% - 5px); float:right; margin-bottom: 10px;} .apcc_sub_optionbox.type5 .daytype {width:100%; display:block;} /* 검색 force setting . */ .apcc_sub_optionbox .input.md-cols4 {width: calc(25% - 5px) !important;} .apcc_sub_optionbox .input.md-cols3 {width: calc(33.333333333333% - 5px) !important;} .apcc_sub_optionbox .input.md-cols2 {width: calc(50% - 5px) !important;} .apcc_sub_optionbox .input.md-cols1 {width: calc(100%) !important;} /* .apcc_sub_optionbox .input.mme-label.md-cols1 label { position:static; width: calc(50% - 0px); text-align: left; top:0; left:0; } .apcc_sub_optionbox .input.mme-label.md-cols1 .apcc_optionstyle1 { width: calc(50% - 5px) !important; float: right;} */ .apccmap-color {font-size:14px;} .apccmap-color .color-item { width: 30px; height: 30px; margin: 0 3px; line-height: 100% !important; } .apccmap-color .color-item span { width:35px; margin:0 3px; top:calc(100% + 2px); text-align:center; line-height: 200%; } .apccmap-color.width-sm .color-item { width:50px; line-height: 250%;} .apccmap-color.drought .color-item { width:90px !important; font-size:0.65em !important; font-size:0.85em !important; line-height: 250% !important; } .apcc_sub09_tab1 li { font-size: 0.9em; letter-spacing: -1px; } /* 전지구 요약 ==*/ #DOCUMENT .header_msg, #DOCUMENT .header_msg * {font-size:14px !important;} .global_summary_infotext { margin-left: 1.5em; margin-bottom:1.0em; } .apcc_sub09_mapbox1.small .apcc_sub09_targetbox1 .text_box { padding:0.1em 0.5em 0.1em 0.5em; letter-spacing: -1px; margin-bottom:2px !important;border-radius: 10px; } .apcc_sub09_mapbox1.small .apcc_sub09_targetbox1 .icon_box { width: 20px; height: 20px; } .apcc_sub09_mapbox1.small .apcc_sub09_targetbox1 .icon_box:after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; } .apcc_sub09_stylebox1_content .table-responsive table.globe-summary-popup { min-width : 600px; max-width: 680px; } /* -------- END */ } @media (max-width: 768px){ #M5-TITLE { white-space: pre; } .apcc_sub09_titlebox1 .main_title span { white-space : nowrap; } .download_btn_block, .download_btn_block * { text-align:center; } .download_btn4component { height: 45px; } /* 검색 */ .apcc_sub_optionbox .input { height: 45px !important; } .apcc_sub_optionbox .input .apcc_optionstyle1, .apcc_sub_optionbox .input .apcc_sub09_btnstyle1 {height: 100% !important;} /**/ .apcc_sub_optionbox.type0 { display:block; } .apcc_sub_optionbox.type0 > * {width:100% !important; --bs-gutter-x:0;} /* 검색 TYPE1. */ .apcc_sub_optionbox > .input.mme-label { margin-top:2.0em; } .apcc_sub_optionbox > .input.mme-label label { width: 100%; text-align: center; } .apcc_sub_optionbox > .input.mme-label.w200 label { width: 100%; } .apcc_sub_optionbox > .input.mme-label-none { margin-top:0; } .apcc_sub_optionbox.type1 {flex-wrap: wrap;} .apcc_sub_optionbox.type1 > * {width: calc(100%) !important; margin-bottom: 10px;} .apcc_sub_optionbox.type1 > *:last-child {margin-bottom: 0px !important;} .apcc_sub_optionbox.type2 {flex-wrap: wrap;} .apcc_sub_optionbox.type2 > * {width: calc(100%) !important; margin-bottom:10px;} .apcc_sub_optionbox.type1 > *:last-child {margin-bottom: 0px !important;} .apcc_sub_optionbox.type3 {flex-wrap: wrap;} .apcc_sub_optionbox.type3 > *:nth-child(1) {width: calc(100%); margin-bottom: 10px;} .apcc_sub_optionbox.type3 > *:nth-child(2) {width: calc(50% - 5px);} .apcc_sub_optionbox.type3 > *:nth-child(3) {width: calc(50% - 5px);} .apcc_sub_optionbox.type4 {flex-wrap: wrap;} .apcc_sub_optionbox.type4 > *:nth-child(1) {width: calc(50% - 5px); margin-bottom: 10px;} .apcc_sub_optionbox.type4 > *:nth-child(2) {width: calc(50% - 5px);} .apcc_sub_optionbox.type4 > *:nth-child(3) {width: calc(50% - 5px);} .apcc_sub_optionbox.type4.itemlen2 > *:nth-child(1) {width: calc(50% - 5px);} .apcc_sub_optionbox.type4.itemlen2 > *:nth-child(2) {width: calc(50% - 5px);} .apcc_sub_optionbox.type4.itemlen3 > *:nth-child(1) {width: calc(100%); margin-bottom: 10px;} .apcc_sub_optionbox.type4.itemlen3 > *:nth-child(2) {width: calc(50% - 5px);} .apcc_sub_optionbox.type4.itemlen3 > *:nth-child(3) {width: calc(50% - 5px);} /* 최근기후 검색 - 편차. */ .apcc_sub_optionbox.type5 {display:block !important;} .apcc_sub_optionbox.type5 > *:nth-child(1) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(2) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(3) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(4) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type5 > *:nth-child(5) {width: calc(100% - 0px);} .apcc_sub_optionbox.type5 .daytype {width:100%; display:block;} /* 최근기후 검색 - 기후. */ .apcc_sub_optionbox.type6 {display:block !important;} .apcc_sub_optionbox.type6 > *:nth-child(1) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type6 > *:nth-child(2) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type6 > *:nth-child(3) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type6 > *:nth-child(4) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type6 > *:nth-child(5) {width: calc(100% - 0px); margin-bottom: 10px;} .apcc_sub_optionbox.type6 > *:nth-child(6) {width: calc(100% - 0px);} .apcc_sub_optionbox.type6 .daytype {width:100%; display:block;} /**/ #dropdownRegionMenuButton4Openlayer { width: 50px; } .openlayer-map-controls-btn01 button, .openlayer-map-controls-btn02 button { width:30px; height:auto; padding:2px 4px; font-size:1.0em; } .openlayer-map-controls-btn02 button.img { padding-top:0px; } .openlayer-map-controls-btn02 button.img img, .openlayer-map-controls-btn01 button img { width:18px; } .apcc_sub09_stylebox1_content .table-responsive > table { min-width : 600px; } /* 여름철계절진동예측 - 정의 (PC) */ .apcc_sub_optionbox.summer_intro > :nth-child(1) { width: calc(50% - (60px / 4)); } .apcc_sub_optionbox.summer_intro > :nth-child(2) { width: calc(50% - (60px / 4)); } .apcc_sub_optionbox.summer_intro > :nth-child(3) { width: calc(50% - 5px); } .apcc_sub_optionbox.summer_intro > :nth-child(4) { width: calc(50% - 5px); } .apcc_sub_optionbox.summer_intro > :nth-child(5) { width: calc(50% - 5px); } .apcc_sub_optionbox.summer_intro > :nth-child(6) { width: calc(50% - 5px); } .apcc_sub09_08_list1 li {min-width:auto; width:auto!important; margin-bottom: 0.25em; white-space:normal; margin-right:0.25em;} .apccmap-color {font-size:12px;} .cindex-target-title {overflow:hidden; line-height: 135%;} .download_textlink.tiny {font-size: 11px;} } @media (max-width: 576px) { .apcc_map_copyright { bottom: 15px; padding: 0.3em 0.7em 0.3em 0.7em; font-size: 0.5em !important; line-height: 120% !important; } .apcc_map_copyright.tiny { font-size:0.85em; bottom:7px; right:7px; } .map_subinfomation_text { font-size: 0.8em; } .apccmap-color {font-size:9px;} .apccmap-color .color-item { width: 20px; height: 20px; margin: 0 3px; line-height: 100% !important; } .apccmap-color .color-item span { width:20px; margin:0 3px; top:calc(100% + 2px); text-align:center; } .apccmap-color.width-sm { height:80px; } .apccmap-color.width-sm .color-item { width:40px; font-size:0.85em; line-height: 250%;} .apccmap-color.width-sm .color-item span { width: 40px; margin: 0 3px; top:calc(100% + 2px); text-align:center; line-height: 100% !important; } .apccmap-color.drought .color-item { width:70px !important; line-height: 250% !important; } .apccmap-color.obs .color-item {width: 17px; height: 16px; margin: 0 2px; } .apccmap-color.obs .color-item span { width:22px; margin:0; font-size:0.80em; } .apccmap-color .color-item.sst-avg { margin: 0 1px; } .apccmap-color .color-item.sst-avg span { width:19px; } /* .apccmap-color.width-sm .color-item span, .apccmap-collormapping-gaus .color-item span { width:20px; margin:0 3px; line-height: 100%; font-size:0.65em; } */ .apccmap-collormapping-gaus { } .apccmap-collormapping-gaus .color-item { width:15px; height:15px; margin:0 1px; line-height: 50%; } .apccmap-collormapping-gaus .color-item span { width:15px; margin:0 1px; } .apccmap-collormapping-gaus .below, .apccmap-collormapping-gaus .near, .apccmap-collormapping-gaus .above {display:inline-block; min-height:auto; line-height:100%; } .apccmap-collormapping-gaus .near .text, .apccmap-collormapping-gaus .below .text, .apccmap-collormapping-gaus .above .text { font-size:1.0em;} .mb_10 {margin-bottom:5px !important;} .mb_20 {margin-bottom:10px !important;} .mb_30 {margin-bottom:15px !important;} .mb_40 {margin-bottom:20px !important;} .mb_50 {margin-bottom:25px !important;} .popover.box, .popover.box * { box-sizing: border-box; } .popover.box { position: relative; border-radius: 0.75rem !important; width : 90% !important; margin:0 auto; padding: 10px; } .popover.box .popupinfo.scm, .popover.box .popupinfo.gaus { width: 100% !important; } .popover.box .popupinfo .datafield, .popover.box .popupinfo .datafield { width: 50%; } .popover.box .apcc_sub09_grapharea1_close { top: 10px; right: 10px; } .showTinyPopup + .popover { border-radius: 0.35rem !important; min-width : 95px !important; max-width : 115px !important; margin-bottom:15px !important; } .popupinfo.tiny .lat, .popupinfo.tiny .lon, .popupinfo.tiny .value { white-space:nowrap; } .popupinfo.tiny, .popupinfo.tiny b {font-size:11px !important; min-width:40px !important; width:auto !important;} .popupinfo.tiny { min-width: 85px; max-width: 200px; margin-right:10px; line-height: 120%; } .popover-body { padding:7px !important; line-height: 120%; } .apcc_sub09_grapharea1_close { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; } .apcc_sub09_grapharea1_close img { width:15px; height:auto;} #DOCUMENT .footer_msg, #DOCUMENT .footer_msg * {font-size:10px !important;} #DOCUMENT .header_msg, #DOCUMENT .header_msg * {font-size:10px !important;} #DOCUMENT .header_msg .ml_40 {margin-left:20px !important;} /* ======================= */ .global_summary_outsideregion {position: static; overflow:hidden; } .apcc_sub09_mapbox1.small .apcc_sub09_mapeventbox1 .dot-map-image { position: absolute; top:0; left:0; width:100%; } .apcc_sub09_mapbox1.small .apcc_sub09_mapeventbox1 > div { padding-top: 1.5em; padding-bottom: 1.5em; } .apcc_sub09_mapbox1.small .apcc_sub09_targetbox1 { position: static; display: inline-block; margin-left: 10px; margin-top:0px; margin-bottom:0px !important; width: calc(50% - 15px); } .apcc_sub09_mapbox1.small .apcc_sub09_targetbox1 .text_box { padding:0.3em 0.5em 0.3em 0.5em; letter-spacing: -1px; margin-bottom:6px !important;border-radius: 10px; } .apcc_sub09_mapbox1.small .apcc_sub09_targetbox1 .icon_box { float: left; width: 20px; height: 20px; margin-top: 6px !important; margin-right: 5px !important; } .apcc_sub09_mapbox1.small .apcc_sub09_targetbox1 .icon_box:after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; } .apcc_sub09_mapbox1.small .icon_img {width:30px;} .apcc_sub09_mapbox1.small .apcc_sub09_grapharea1_close { top: 10px; right: 10px; } .header_msg .icon_box { width: 15px; height: 15px; } .header_msg .icon_box:after { content: ''; position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; } .global_summary_infotext { margin-left: 0.5em; margin-bottom:0.5em; } /* ======================= */ .apcc_sub09_grapharea1 {position: static; border-radius: 10px; padding:7px; transform: translate(0%, 0);} #apccmap_eastasia-abnormal-barchart { width:100%; } /* ============ */ .apcc_sub09_08_list1 li { font-size: 11px; } }