@charset "utf-8";
@font-face{font-family:'NanumSquare';src:url('../font/NanumSquareR.otf');}

/* CSS Document */
/*reset*/
html, body {width:100%; height: 100%; margin:0; padding:0;/* Required */}
body{color:#666; font-family:"NanumSquare",sans-serif; background-color:#fff;background-position:left top; background-repeat:repeat-x;}
a:link, a:visited {	color: #555;	text-decoration: none;}
a:active, a:hover {color:#0958a5; text-decoration: underline;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset, img, iframe {border:0 none; }
em {	font-style: normal; font-weight: bold;}
address{font-style:normal;}
table { border-collapse: collapse; border-spacing:0; }
ul,ol  {margin:0; padding:0;list-style:none;}
li, dl, dd, dt { margin:0; padding:0;}
hr{display:none;}
input, select, textarea {font-family:inherit; font-size: 100%; color: #333; background-color: #FFF; vertical-align:middle;}
legend{position:absolute; left:-2000px; top:-2000px; width:1px; height:1px; font-size:1%; line-height:0; overflow:hidden; visibility:hidden;}
table{width:100%;}
table caption {display:none;}

/*layout*/
#wrap_content{border:0px solid red; float:left; }
.width2{width:685px;}
.width3{width:821px;}
#wrap_content #title{overflow:hidden; margin:0; padding:0; _zoom:1;}
#wrap_content #title .weather{display:inline-block; width:100%; margin:0; padding:0; _zoom:1; position:relative;}
#wrap_content #title h4{float:left;}
#wrap_content #title h4 img{vertical-align:top;}
#wrap_content #title h5{float:left;}
#wrap_content #title ul.button{ float:right;}
#wrap_content #title ul.button .weather{ float:right; position:absolute; top:-43px; right:0;}
#wrap_content #title ul.button li{float:left; font-size:0; }
#wrap_content #title ul.button li.print{margin-right:5px;}
#wrap_content #title ul.button li.scrSize{margin-top:8px;}
#wrap_content #title ul.button li.scrSize a{padding:0;}
#wrap_content #title ul.button li.scrSize ul{ overflow:hidden; float:left; display:inline; width:40px; padding:1px 0 0 40px; background:url(../../images/common/zoom_tit.gif) no-repeat left 1px;}
#wrap_content #title ul.button li.scrSize li a{float:left; padding:0 !important; background:none;}
#wrap_content #content{clear:both; border:0px solid red; min-height:500px; _height:500px; padding:15px 0 0 0; }
#wrap_content #content_weather{clear:both; border:0px solid red; min-height:500px; _height:500px; padding:0; margin-top:22px; position:relative; width:680px;}

.usermenu{position:absolute; left:87px; top:87px;z-index:1;}
.usermenu h2{font-size:1em;}
.usermenu .wrap_usermenu{border:3px solid #8bb9f1; z-index:1; background:#fff; width:347px; margin-top:-5px; position:absolute; left:1px; top:21px;}
.usermenu .wrap_usermenu .usermenu_top{overflow:hidden; display:inline-block; width:329px; padding:11px 5px 7px 13px;}
.usermenu .wrap_usermenu .usermenu_top h3{float:left; font-size:1em; line-height:normal;}
.usermenu .wrap_usermenu .usermenu_top p.btn{float:right;}
.usermenu .wrap_usermenu .usermenu_top img{vertical-align:top;}
.usermenu .wrap_usermenu p.comment{color:#fff; font-size:0.95em; height:19px; padding:7px 0 0 18px; background:url('/images/main/bg_usermenu.gif') no-repeat left top;}
.usermenu ul{padding:8px 14px 8px 14px;}
.usermenu ul li{line-height:normal; border-bottom:1px solid #e5e5e5; padding:6px 0 4px 17px; background:url('/images/main/bl_menuopen2.gif') no-repeat 8px 11px; display:block;}
.usermenu ul li a{color:#666666; text-decoration:none; display:block;}

/*table*/
.table_midterm,
.table_brown{width:100%;margin-top:1px;border-top:2px solid #006ad0;*border-right:1px solid #d0d0d0;}
.table_midterm thead th,
.table_brown thead th{padding:6px 2px 3px 2px; border-top:none; border:1px solid #d0d0d0; background:#dce6ef; color:#333;text-align:center;}
.table_midterm tbody th,
.table_brown tbody th{padding:6px 3px 3px 3px; border-top:none; border:1px solid #d0d0d0; font-weight:normal; color:#666;text-align:center; background:#f4f7ff;}
.table_midterm tbody th.bg_gray{background:#f2f2f2; font-weight:bold; color:#006ad0;}
.table_midterm tbody td,
.table_brown tbody td{padding:5px 2px 2px 2px; border-top:none; border:1px solid #d0d0d0; text-align:center;}
.table_midterm tbody td img{vertical-align:top;}
.table_midterm tbody td ul{text-align:left;}
.table_midterm tbody td ul li{text-align:center;}
.table_midterm tfoot td{padding:6px 5px 3px 5px; border-top:none; border:1px solid #c8c8c8; text-align:center;}
.table_midterm tfoot th{padding:6px 5px 3px 5px; border-top:none; border:1px solid #c8c8c8; text-align:center;font-weight:normal;}
.boardListSkin9 {clear:both;margin-top:10px; border-bottom:1px solid #cccccc;border-top:2px solid #006ad0;table-layout:fixed;width:100%;}
.boardListSkin9 .ing{font-size:1.2em;}
.boardListSkin9 thead th{background:url(../../images/common/list_bar_bg.gif) no-repeat right bottom;border-bottom:1px solid #cccccc;color:#333;font-weight:bold;height:33px;text-align:center;}
.boardListSkin9 thead th.br{background:url(../../images/common/list_bar_bg.gif) no-repeat left bottom;}
.boardListSkin9 tbody td {border-bottom:1px solid #cccccc;padding:5px 0 5px 3px;text-align:center; height:22px;}
.boardListSkin9 tbody tr.bg_blue{background:#f6fafd;}
.boardListSkin9 tbody td.al{text-align:left;padding-left:10px;}
.boardListSkin9 tbody td.al img{vertical-align:middle;}
.boardListSkin9 tbody td a:hover {color:#0958a5; text-decoration: underline;}
.boardListSkin9 tbody td img.new{margin-left:10px;vertical-align:middle;}
.boardListSkin9 tbody td.img_button a{margin:0 0 0 6px;}
.boardListSkin9 thead th.check_box input{margin:0px 7px 0 0; vertical-align:middle; width:13px; height:14px;}
.boardListSkin9 thead th.check_box label{height:20px; position:relative; top:1px;}
.boardListSkin9 tbody td input{margin:0px 7px 0 0; vertical-align:middle; width:13px; height:14px;}

.table_brown{border-top:2px solid #ef870d; *border-right:1px solid #fec891;}
.table_brown thead th{border:1px solid #fec891;background:#fdd1a4;color:#993900;}
.table_brown tbody th{border:1px solid #fec891;background:#f9ecdf;color:#993900;}
.table_brown tbody td{border:1px solid #fec891}

.word_break td{word-break:pre-wrap;}
/*20151120*/
.table_normal th,
.table_normal td{text-align:center;border:1px solid #add3e0;padding:5px 0;}
.table_normal th{background:#f0fafc;}

/* 검색 */
.sel_01 {border:1px solid #7f9db9; float:left; width:83px !important; height:20px; margin-left:5px; display:inline;}
.tbox_01 {border:1px solid #d2d2d2; float:left; height:16px; padding:2px 0 0 2px; width:133px; margin:0 5px; }
.search_btn{float:left;display:block; font-size:0; line-height:0;}
.search_box{display:inline-block;float:right; text-align:right;margin-bottom:10px;}
.search_box select{border:1px solid #7f9db9;height:20px;}
.search_box input{vertical-align:top;}
/* 페이징 */
.paging_wrap{position:relative;}
.paging_wrap .paging {clear:both;margin:0 auto;padding-top:16px;_padding-top:19px;text-align:center;width:650px;}
.paging_wrap .paging li {display:inline;margin-right:6px;padding-right:6px;background:url(../../images/board/list_line_bg.gif) no-repeat right 1px;}
.paging_wrap .paging li strong{font-size:1.2em;color:#1874ce;}
.paging_wrap .paging li img {padding-top:2px; vertical-align:middle; margin-top:-4px;}
.paging_wrap .paging li.last_10 {padding-right:0 !important;background:none !important;}
.paging_wrap .paging li.prev {margin-right:2px;padding-right:0 !important;background:none !important;}
.paging_wrap .paging li.next {margin-left:2px;padding-right:0 !important;background:none !important;}
.paging_wrap .paging li.first {margin-right:2px;padding-right:0 !important;background:none !important;}
.paging_wrap .paging li.last {margin:0;padding-right:0 !important;background:none !important;}
.paging_wrap .fr_bn{float:right; background:none;padding-right:0 !important;margin-right:0; position:absolute; right:0; top:15px;}
.paging_wrap .fr_bn2{float:right; background:none;padding-right:0 !important;margin-right:0; position:absolute; right:19px; top:15px;}
.paging li a:active{color:#0958a5; text-decoration: underline;}

/******************************************************************************************//* h태그 */
.h5{background:url(../../images/common/bu_arrow_orange.gif) no-repeat left 1px;font-size:100%;padding-left:19px;line-height:1.4em;margin-bottom:7px;clear:both;}
.h6cb{background:url(../../images/common/bu_arrow_orange.gif) no-repeat left 1px;font-size:100%;padding-left:19px;line-height:1.4em;margin-bottom:7px;clear:both;display:inline-block;}
.h6_brown{background:url(../../images/weather/typoon/typ_new/bu_arrow_brown.gif) no-repeat left 1px;}
.h6NM{background:url(../../images/common/bu_arrow_orange.gif) no-repeat left 1px;font-size:100%;padding-left:19px;line-height:1.4em;}
.h6_PT10{background:url(../../images/common/bu_arrow_orange.gif) no-repeat left 11px;font-size:100%;line-height:1.4em;padding:10px 0 7px 19px;}
.h6_T10{background:url(../../images/common/bu_arrow_orange.gif) no-repeat left 1px;font-size:100%;padding-left:19px;line-height:1.4em;margin:10px 0 7px 0;color:#444;}
.h6_T20{background:url(../../images/common/bu_arrow_orange.gif) no-repeat left 1px;font-size:100%;padding-left:19px;line-height:1.4em;margin:20px 0 7px 0;color:#444;}
.h6_northkorea{background:url(../../images/common/bu_arrow_orange.gif) no-repeat left 1px;font-size:100%;padding-left:19px;line-height:1.4em;color:#444; float:left; width:353px; margin-bottom:10px;}
.h6_northkorea .northkorea_h6{float:left;}
.h6_northkorea span{float:right;}

/*form*/
/* 관측자료*/
.maT20{margin-top:20px;}
.search_report{}
.search_report img{padding:3px 5px 0 0;vertical-align:top;}
.search_report select{font-size:0.95em;width:458px;height:20px; padding-top:1px; border:1px solid #d2d2d2;vertical-align:top;}
.observation_form{background:url(../../images/weather/typoon/typ_new/bx_gradation.gif) repeat-x left bottom; border:1px solid #dbdbdb; width:664px;height:28px;padding:10px 0 0 15px;line-height:1.4em; margin-bottom:15px; float:left; display:inline-block;}
.observation_form p{float:left; padding-right:10px; padding-top:3px;}
.observation_form p.controlbox{float:left; margin-right:0; padding-top:0;}
.observation_form p.controlbox a{float:left; margin-right:1px;}
.observation_form label{float:left; margin-right:10px; padding-top:3px;}
.observation_form input{float:left; margin-right:3px; border:1px solid #d2d2d2; width:126px; height:17px; font-size:0.95em;}
.observation_form input.time{width:90px; text-align:center; padding-top:2px; height:15px;}
.observation_form input.tbox_02{text-align:center; padding-top:2px; height:15px;}
.observation_form input.btn{border:none; width:auto; height:19px;}
.observation_form select{float:left; margin-right:3px; border:1px solid #d2d2d2; height:19px; font-size:0.95em;}
.observation_form select.maR10{margin-right:20px;}
.observation_form select.wid40{width:40px;}
.observation_form select.wid50{width:50px;}
.observation_form select.wid55{width:55px;}
.observation_form select.wid65{width:65px;}
.observation_form select.wid85{width:85px;}
.observation_form select.wid110{width:110px;}
.observation_form select.wid130{width:130px;}
.observation_form select.wid220{width:220px;}
.observation_form ul{float:left;}
.observation_form ul li{float:left; display:inline; margin-right:3px;}
.observation_form ul li a{display:block; padding-left:6px; width:44px; height:17px; border:1px solid #d2d2d2; color:#666; font-size:0.95em;}
.observation_form ul li a:hover{color:#666;}
.observation_form ul li.next a{color:#ff7f01;}
.observation_form ul li.next a:hover{color:#ff7f01;}
.observation_form ul.list_wid li a{width:80px;}

.observation_form #tab_wrap01{width:760px;}
.observation_form #tab_wrap01 li{line-height:1.2em; margin:0;}
.observation_form #tab_wrap01 li a{display:block;background:#ebebeb;width:77px;padding:3px 0 1px 0;border:1px solid #cccbcb;text-align:center;border-right:0;color:#4e4e4e;font-size:0.95em;}
.observation_form #tab_wrap01 li a.btn{border-top:none;}
.observation_form #tab_wrap01 li a.border{border-right:1px solid #cccbcb;}
.observation_form #tab_wrap01 li a:hover{display:block;color:#fff;background:#0958a5;text-decoration:none;border:1px solid #0958a5;border-right:0;}
.observation_form #tab_wrap01 li a.on{display:block;color:#fff;background:#0958a5;text-decoration:none;border:1px solid #0958a5;border-right:0;}

.distibution_search3{clear:both;width:669px;min-height:66px;height:auto !important;height:66px;background:url('../../images/weather/forecast/bg_summary_search2.gif') no-repeat 0 0;padding:10px 9px 0 17px; margin-top:20px;}
.distibution_search3 form{margin:0;padding:0;}
.distibution_search3 input{float:left; margin-right:3px; border:1px solid #d2d2d2; width:126px; height:17px; font-size:0.95em;}
.distibution_search3 input.time{width:90px;float:left;text-align:center;padding-top:2px;height:15px;}
.distibution_search3 input.inputbase{text-align:center; padding-top:2px; height:15px;}
.distibution_search3 input.btn{border:none; width:auto; height:19px; margin-left:3px;}
.distibution_search3 img.btn2{border:none; width:auto; height:19px; margin-left:65px;}
.distibution_search3 form .text{margin:0 3px 0 0;}
.distibution_search3 form .search_area{width:100px;height:19px;padding:0;margin:0 0 0 0;border-top:1px solid #abadb3;border-left:1px solid #e2e3ea;border-right:1px solid #dbdfe6;border-bottom:1px solid #e3e9ef;font-size:0.95em;vertical-align:top;}
.distibution_search3 form .search_area2{width:80px;height:19px;padding:0;margin:0 0 0 0;border-top:1px solid #abadb3;border-left:1px solid #e2e3ea;border-right:1px solid #dbdfe6;border-bottom:1px solid #e3e9ef;font-size:0.95em;vertical-align:top;}
.distibution_search3 form .search_area3{width:198px;height:19px;padding:0;margin:0 0 0 0;border-top:1px solid #abadb3;border-left:1px solid #e2e3ea;border-right:1px solid #dbdfe6;border-bottom:1px solid #e3e9ef;font-size:0.95em;vertical-align:top;}
.distibution_search3 form .area_search{width:127px;height:17px;padding:0;margin:0 0 0 1px;border:1px solid #d2d2d2;font-size:0.95em;vertical-align:top;}
.distibution_search3 form .town_search{margin:13px 0 0 0;}
.distibution_search3 form .ml{margin:0 0 0 7px;}
.distibution_search3 form .ml2{margin:0 0 0 2px;}
.distibution_search3 form input{vertical-align:top;}
.distibution_search3 form input.time{text-align:center; padding-top:2px; height:15px;}
.distibution_search3 form img{vertical-align:top;}
.distibution_search3 form select{float:left; font-size:0.95em;border:1px solid #D2D2D2;font-size:0.95em;height:19px; margin-right:3px;}
.distibution_search3 form .blind{*display:none !important;}
.distibution_search3 p{display:block; float:left; margin-top:2px; padding-right:10px;}
.distibution_search3 p.no_ti{padding-right:5px !important;}
.distibution_search3 .ul_prev{float:left; font-size:0.95em;}
.distibution_search3 .ul_prev li{float:left; text-align:center; color:#fff; margin-left:5px; padding-top:1px; *padding-top:2px; display:inline;}
.distibution_search3 .ul_prev li.bg_black{background:url('/images/weather/images/bg_black.gif') no-repeat 0 0; width:60px; height:19px;}
.distibution_search3 .ul_prev li.bg_orange{background:url('/images/weather/images/bg_orange.gif') no-repeat 0 0; width:47px; height:19px;}
.distibution_search3 .ul_prev li.bg_black a{width:60px; height:19px; color:#fff; display:block;}
.distibution_search3 .ul_prev li.bg_orange a{width:47px; height:19px; color:#fff; display:block;}

.distibution_search3 .ul_prev2{float:left; font-size:0.95em;}
.distibution_search3 .ul_prev2 li{float:left; text-align:center; color:#fff; margin-left:2px; padding-top:1px; *padding-top:2px; display:inline;}
.distibution_search3 .ul_prev2 li.bg_black{background:url('../../images/weather/images/bg_black.gif') no-repeat 0 0; width:60px; height:19px;}
.distibution_search3 .ul_prev2 li.bg_orange{background:url('../../images/weather/images/bg_orange.gif') no-repeat 0 0; width:47px; height:19px;}
.distibution_search3 .ul_prev2 li.bg_black a{width:60px; height:19px; color:#fff; display:block;}
.distibution_search3 .ul_prev2 li.bg_orange a{width:47px; height:19px; color:#fff; display:block;}

.controller_form{height:64px; background:url(../../images/weather/images/bg_controller.gif) no-repeat left top;width:685px; display:inline-block;}
.controller_form p.subject{float:left; margin-top:7px; text-align:center; width:101px; padding-top:12px;}
.controller_form p.controlbox{float:left; margin-right:0; padding-top:0;}
.controller_form p.controlbox a{float:left; margin-right:1px;}
.controller_form label{float:left; margin-right:10px; padding-top:3px;}
.controller_form input{float:left; margin-right:3px; border:1px solid #d2d2d2; width:126px; height:17px; font-size:0.95em;}
.controller_form input.btn{border:none; width:auto; height:19px;}
.controller_form select{float:left; margin-right:3px; border:1px solid #d2d2d2; width:98px; height:19px; font-size:0.95em;}
.controller_form select.maR10{margin-right:20px;}
.controller_form select.wid50{width:50px;}
.controller_form select.wid55{width:55px;}
.controller_form select.wid65{width:65px;}
.controller_form select.wid85{width:85px;}
.controller_form select.wid110{width:110px;}
.controller_form select.wid130{width:130px;}
.controller_form select.wid220{width:220px;}
.controller_form .controller_slide_wrap{float:left; width:457px; margin-left:38px; background:url(../../images/weather/images/bg_controller_slide.gif) no-repeat -38px top;}
.controller_form .controller_slide{float:left; height:100%; width:341px;}
.controller_form .controller_slide .slider{margin:15px 0 0 16px; width:309px; height:11px; text-align:left;}
.controller_form .controller_slide .slider img{vertical-align:top;}
.controller_form .controller_slide_wrap .btn{ float:left;margin-top:12px; height:100%; vertical-align:middle;text-indent:0;}
.controller_form .controller_slide_wrap .btn img.big{width:31px; margin-right:2px; height:31px; vertical-align:top;}
.controller_form .controller_slide_wrap .btn img.small{width:24px; height:24px; margin-top:4px; vertical-align:top;}
.controller_form .zoom{float:right; text-align:center; width:89px; margin-top:16px; }
.controller_form .zoom img{vertical-align:top; width:24px; height:24px;}
.controller_form ul{float:left; padding:10px 0 0 0px; _padding:7px 0 0 0;}
.controller_form ul li{float:left; display:inline; text-align:center; width:27px; margin:0 8px;}
.controller_form ul li.next{margin-right:0;}
.controller_form ul li a{width:44px; height:17px; color:#fff !important; font-size:0.95em;}
.controller_form ul li.next a{color:#fffc01 !important; font-weight:bold;}

/*ul*/
.ul_arrow_T10{margin-top:10px;}
.ul_arrow_T10 li{background:url(../../images/common/bu_arrow_orangesmall.gif) no-repeat left 5px;padding-left:10px;}
.ul_arrow_T10_w li{background:url(../../images/common/bu_arrow_orangesmall.gif) no-repeat left 7px;padding-left:10px;}
.ul_arrow_left{padding-left:9px;}
.ul_arrow_left li{background:url(../../images/common/bu_arrow_orangesmall.gif) no-repeat left 5px;padding-left:11px;}
.ul_arrow_left li ul li{background:url(../../images/common/bu_hyphen.gif) no-repeat 2px 6px;}
.ul_arrow_left li.bgnone{background:none;}
.ul_arrow_left li table{margin-top:3px;}

/*tit*/
.typoon{width:683px; text-align:center; border-top:1px solid #0c5aa6;background:url('../../images/weather/forecast/bg_forecast_temper.gif') no-repeat 0 0;height:33px;border-left:1px solid #c8c8c8;border-right:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;clear:left;overflow:hidden;display:inline-block;}
.typoon .title{float:left;background:url('../../images/weather/typoon/typ_new/bul_bluearrow.gif') no-repeat 10px 13px;padding:3px 0px 0 20px;font-size:1.4em;color:#0958a5;display:inline-block;}
.typoon .date{float:left;padding:7px 13px 0 10px;display:inline-block;font-size:1.1em;}

/*sub_tab*/
#tab_nav{overflow:hidden; clear:left; width:100%; margin-bottom:20px; background:url(../../images/common/bg_tab.gif) repeat-x left bottom;}
#tab_nav li{float:left;}
#tab_nav li img{vertical-align:top;}

/*comment*/
/* 관측자료*/
.comment_gray{padding:10px 22px; background:#ffffff; border:5px solid #ebebeb; margin-bottom:15px;}
.comment_gray dl.maT0{margin-top:0;}
.comment_gray dl{margin-top:10px; font-size:0.95em;}
.comment_gray dl dt{color:#1676cd; font-weight:bold;}
.comment_gray dl dd{margin-left:8px; padding-left:11px; background:url(../../images/common/bu_hyphen.gif) no-repeat left 7px;}
.comment_gray p.maT10{margin-top:10px; font-size:0.95em;}
.comment_gray p strong{font-size:0.95em;}
.comment_gray p strong.spot{font-size:0.95em; font-weight:normal; color:#ff7f01;}
.comment_gray p.blue{font-size:0.95em; font-weight:normal; color:#0958a5;}
.comment_gray p span.bluebold{font-weight:bold; color:#0958a5;}
.comment_gray table{margin-left:10px; width:615px;}
.comment_gray table th{padding:6px 5px 3px 5px; background:#dce6ef; color:#333; border:1px solid #c8c8c8; border-left:1px solid #c8c8c8; }
.comment_gray table td{padding: 6px 10px 3px 10px; border-right:1px solid #c8c8c8; border-bottom:1px solid #c8c8c8;}
.comment_gray table .border_top{border-top:2px solid #006ad0;}
.comment_gray table .border_bottom{border-bottom:1px solid #c8c8c8;}

.comment_gray_images{margin-top:15px; padding:10px 25px; width:635px; background:#f8f8f8; border:1px solid #dedede;}
.comment_gray_images dl.maT0{margin-top:0;}
.comment_gray_images dl{margin-top:10px; font-size:0.95em;}
.comment_gray_images dl dt{color:#ff7f01;}
.comment_gray_images dl dd{margin-left:8px; padding-left:11px; background:url(../../images/common/bu_hyphen.gif) no-repeat left 6px;}
.comment_gray_images p.maT10{margin-top:10px; font-size:0.95em;}
.comment_gray_images p strong{font-size:0.95em;}
.comment_gray_images p strong.spot{font-size:0.95em; font-weight:normal; color:#ff7f01;}
.comment_gray_images table{margin-left:10px; width:615px;}
.comment_gray_images table th{padding:6px 5px 3px 5px; background:#4293e2; color:#fff; border:1px solid #fff; border-left:1px solid #4293e2; }
.comment_gray_images table td{padding: 6px 10px 3px 10px; border-right:1px solid #c8c8c8; border-bottom:1px solid #c8c8c8;}
.comment_gray_images table .border_top{border-top:2px solid #0c5aa6;}
.comment_gray_images table .border_bottom{border-bottom:1px solid #4293e2;}

/* .tab.list ul {position:relative;*zoom:1} */
.typhoon_map{display:inline-block;width:1198px;position:relative;}
.landsat{position:relative;float:left;width:100%;height:808px;margin-right:10px;background:#f2f2f2;border:1px solid #3c90e0;}
.typhoon_map .tab{width:auto;height:auto;}
.tab.list ul:after {content:"";display:block;clear:both}
.tab.list>ul>li {float:left;width:100%;}
.tab.list li .tab_menu{display:block;position:relative;float:left;width:100%;height:30px;padding:0;border:1px solid #5c5c5c;background:#fff;color:#333;font-size:15px;line-height:31px;text-decoration:none;text-align:center;overflow:hidden;}

.tab.list li.active .tab_menu {background:#0295f9;font-weight:700;color:#fff;}
.tab.list li.active a span {font-weight:bold}
.tab.list li .helper{display:inline-block;height:23px;position:absolute;top:543px;right:-410px;background:url(../../images/weather/typoon/typ_new/btn_helper.png) 0 0 no-repeat;font-size:0;text-indent:-9999px;overflow:hidden;padding:0;}
.tab li:nth-child(1) .helper{width:53px;background-position:0 0;}
.tab li:nth-child(2) .helper{width:93px;background-position:0 -23px;}
.tab li:nth-child(3) .helper{width:102px;background-position:0 -46px;}
.helper_wrap{position:absolute;top:570px;right:-410px;width:681px;background:#fff;border:1px solid #cdcdcd;box-shadow:-3px 3px 4px rgba(0,0,0,.3);z-index:99;padding:26px 11px 0;box-sizing:border-box;}
.helper_wrap li{display:inline-block;width:100%;line-height:20px;font-size:12px;background:url(../../images/weather/typoon/typ_new/ico_mark.png) -7px -351px no-repeat;padding-left:12px;margin-bottom:11px;}
.helper_wrap li:last-child{position:absolute;right:10px;top:10px;background:none;padding:0;margin:0;width:auto;}
.helper_wrap li .helper_close{padding:0!important;}
.use_ico span{display:inline-block;width:17px;height:20px;background:url(../../images/weather/typoon/typ_new/ico_mark.png) center 0 no-repeat;overflow:hidden;vertical-align:middle;}
.use_ico .ico01{background-position:center 3px;}
.use_ico .ico02{background-position:center -37px;}
.use_ico .ico03{background-position:center -74px;}
.use_ico .ico04{background-position:center -117px;}
.use_ico .ico05{background-position:center -160px;}
.use_ico .ico06{background-position:center -192px;}
.use_ico .ico07{background-position:center -236px;}
.use_ico .ico08{background-position:center -275px;}
.use_ico .ico09{background-position:0 -315px;}
.map_control{position:absolute;left:5px;top:45px;}
.map_control li{display:inline-block;float:left;width:25px;height:25px;background:url(../../images/weather/typoon/typ_new/btn_mapControl.png) 0 0 no-repeat;margin:0 3px;background-size:cover;}
.map_control li:nth-child(1){background-position:0 0;}
.map_control li:nth-child(2){background-position:-29px 0;}
.map_control li:nth-child(3){background-position:-58px 0;}
.map_control li:nth-child(4){background-position:-87px 0;}
.map_control li.on{background-image:url(../../images/weather/typoon/typ_new/btn_mapControl_on.png);}
.map_control li a{display:inline-block;width:100%;height:100%;overflow:hidden;text-indent:-9999px;font-size:0;}
.map_zoom{position:absolute;left:4px;top:34px;z-index:99;}
.map_zoom a{display:block;width:20px;height:auto;font-size:0;overflow:hidden;}

/*20151027 태풍보기 토글버튼*/
.map_toggle{position:absolute;top:3px;left:325px;}
/* .map_toggle{position:absolute;top:3px;left:240px;} */
.map_toggle .btn_custom{width:105px;height:30px;border-radius:10px;background:#fff;font-size:15px;color:#2196F3;text-indent:0;line-height:32px;text-align:center;text-decoration:none;}
.map_toggle .allTyp{background:#2196F3;color:#fff;}

.layer_tip{position:relative;left:50%;background:#fff;border-radius:5px;box-shadow:2px 2px 0 rgba(0,0,0,.2);z-index:98;}
.layer_tip ul{padding:6px 10px 10px;font-size:14px;}
.layer_tip ul li{line-height:23px;}
.layer_tip .date{width:100%;font-weight:bold;line-height:18px;padding:10px 10px 5px;box-sizing:border-box;border-radius:5px 5px 0 0;}
.layer_tip .arrow{position:absolute;left:50%;bottom:-13px;margin-left:-6px;}
.typ_condition{color:#6699CC;margin-left:5px;}
.typhoon_p{border:1px solid #75328e;left:0;bottom:77px;}
.typhoon_p .date{background:#fcf2fc;color:#75328e;font-size:14px;}
.typhoon_g{border:1px solid #959595;left:0;bottom:77px;}
.typhoon_g .date{background:#edebed;color:#333;}
.more_info{display:inline-block;width:100%;height:100%;background:url(../../images/weather/typoon/typ_new/btn_more.jpg) 0 0 no-repeat;width:83px;height:23px;}
.btn_custom{display:inline-block;font-size:0;text-indent:-9999px;overflow:hidden;}
.more_info_wrap{height:auto; overflow-y:auto;padding:2px 7px;}/* border:1px solid #cdcdcd; */
.more_info_wrap .tit{overflow:hidden;margin-bottom:10px!important;}
.more_info_wrap .tit h1{float:left;font-size:15px;color:#0089cd;width:auto;}
.down_pdf{float:right;width:84px;height:18px;background:url(../../images/weather/typoon/typ_new/btn_down_notice.png) 0 0 no-repeat;}
.more_info_wrap .body{margin-bottom:10px;}
.more_info_wrap .body h2{font-size:11px;margin-bottom:10px;}
.more_info_wrap .body h2:before{content:"[ ";}
.more_info_wrap .body h2:after{content:" ]";}
.more_info_wrap ul{margin-bottom:30px;}
.more_info_wrap li{line-height:20px;font-size:11px;background:url(../../images/weather/typoon/typ_new/ico_mark.png) 0 -335px no-repeat;padding-left:15px;}
.more_info_wrap li span{display:inline-block;width:121px;}
.more_info_wrap thead,
.more_info_wrap tbody{border:1px solid #7fc3e6;}
.more_info_wrap th,
.more_info_wrap td{border:1px solid #dbe0e4;border-width:1px 0 0 1px;text-align:center;padding:5px 3px;}

.more_info_wrap th{background:#e5f4fb;font-weight:normal;}
.more_info_wrap tr:first-child th{border-top:0;}
.more_info_wrap tr:first-child th:first-child,	
.more_info_wrap td:first-child{border-left:0;}
.more_info_wrap tbody tr:first-child td{border-top:#7fc3e6;}
.more_info_wrap tbody th:first-child{border-left:1px solid #7fc3e6;}
.more_info_wrap tr:nth-child(even){background:#f1f9fc;}
.graph{float:left;position:relative;width:100%;margin-top:8px;box-sizing:border-box;}
.graph_wrap{position:relative;overflow:hidden;margin-bottom:25px;}
.graph_info{border:1px solid #959595;padding:10px;width:120px;margin-left:-60px;}
.graph_info b{display:block;}
.graph_info .arrow{position:absolute;right:-10px;top:50%;margin-top:-4px;}
.graph .tit{margin-bottom:14px;}
.graph .tit select{border:1px solid #c4c3c3;width:330px;height:25px;}
.graph .tit option{padding:3px;}
.graph .tit option.selected{background:#caeffb;color:#0e4680;}
.graph>.tit>a{margin:0 5px -8px 0;}

.graph_area{float:left;width:214px;height:122px;margin-left:5px;background:url(../../images/weather/typoon/typ_new/bg_graph.jpg) center 0 no-repeat;}
.graph_wrap .graph_area:first-of-type{width:239px;}
.typhoon_new .weather_info,
.newsbreak{float:left;width:330px;height:407px!important;border:1px solid #cdcdcd;background:#f2f2f2;box-sizing:border-box;padding:5px;}
.newsbreak{width:347px;}
.newsbreak .tit{margin-bottom:12px;overflow:hidden;}
.newsbreak .tit h1{float:left;margin-top:5px;}
.newsbreak .tit a{float:right;}
.newsbreak .body{text-align:center;padding:16px;background:#d3d3d3;}
.newsbreak .btn_area{text-align:right;margin-bottom:5px;}

.graph_detail{float:right;display:inline-block;width:83px;height:25px;background:url(../../images/weather/typoon/typ_new/btn_detail.gif) no-repeat 0 2px;}
.graph_detail_off{background-position:0 -22px;}
/* .graphLayer{display:none;position:absolute;left:0;top:25px;width:686px;height:327px;border:1px solid #3c90e0;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2);box-sizing:border-box;z-index:999;overflow-y:scroll;} */
/* .graphLayer{display:none;position:absolute;left:0;top:25px;width:686px;height:514px;border:1px solid #3c90e0;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2);box-sizing:border-box;z-index:999;overflow-y:scroll;} */
.graphLayer{display:none;position:absolute;left:0;top:28px;width:204px;height:565px;border:1px solid #cdcdcd;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2);z-index:999;overflow-y:scroll;}
.graphLayer .tit{margin-bottom:15px;text-align:right;}
.layer_graph_area{width:100%;height:170px;margin-bottom:50px;}
.typhoon_new .distibution_search3{clear:both;width:669px;min-height:66px;height:auto !important;height:66px;background:url('../../images/weather/typoon/typ_new/bg_summary_search2.gif') no-repeat 0 0;padding:10px 9px 0 17px; margin-top:20px;}

/*20151127*/
.graphDetailLayer{position:fixed;left:50%;top:50%;width:400px;margin:-250px 0 0 -200px;border:1px solid #3c90e0;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.2);padding:15px;box-sizing:border-box;z-index:999;display:none;}
.graphDetailLayer .tit{margin-bottom:15px;}
.graphDetailLayer .tit a{position:absolute;right:15px;top:13px;}
.graphDetailLayer .scroll{max-height:287px;overflow-y:scroll;}
.graphDetailLayer .scroll .table_midterm{border-top:0;margin:0;}

#slide-images{position:relative;display:block;margin:0px;padding:0px;width:683px;height:591px;border:1px solid #333;overflow:hidden;margin-bottom:15px;}
#slide-images li{position:absolute;display:block;list-style-type:none;margin:0px;padding:0px;background-color:#FFFFFF;}
#slide-images li img{display:block;background-color:#fff;}
#slide-slider-panel{position:relative;}
#slide-slider {position:absolute;}

.contents_wrap{overflow:hidden;margin:25px 0 15px;}
.typ_whitebook,
.contents_list{float:left;overflow:hidden;}
.contents_list{margin-left:25px;}
.contents_list li{color:#0958a5;font-weight:bold;line-height:20px;}
.s_list li{line-height:18px;margin-left:18px;}
.s_list li a{color:#333;font-weight:normal;}
.list_t{margin-top:15px;}
.blue{color:#7996eb;}
.comment_s{font-size:11px;text-indent:-9px;padding-left:15px;}
.comment_s:before{content:"*";}

/*20151028 추가*/
.typ_info_wrap{position:relative;border:1px solid #eee;padding:4px;display:inline-block;width:100%;margin-bottom:20px;}
.typ_info_wrap img{float:left;display:inline-block;margin-right:20px;}
.typ_info_wrap p{display:inline-block;margin-top:10px;line-height:22px;}
.typ_info_wrap .bg_gray{background:#eee;padding:13px 16px;display:inline-block;width:100%;box-sizing:border-box;}
.typ_info_wrap .h6_blue_circle{background:url(../../images/weather/typoon/typ_new/bullet_circle_blue.png) 0 3px no-repeat;font-weight:bold;color:#1c75cb;font-size:12px;letter-spacing:-1px;padding-left:15px;display:inline-block;}
.typ_info_wrap .text_wrap{float:left;display:inline-block;width:50%;}

/*20151120 메인배너*/
.banner{overflow:hidden;}
.banner li{display:inline-block;float:left;width:224px;height:66px;margin-left:4px;}
.banner li a{display:inline-block;width:100%;height:100%;overflow:hidden;background-image:url(../../images/weather/typoon/typ_new/typ_main_banner.gif);font-size:0;text-indent:-9999px;}
.banner li:nth-child(2) a{background-position:0 -66px;}
.banner li:nth-child(3) a{background-position:0 -132px;}

.article{margin-bottom:30px;overflow:hidden;}
.article>img{margin:15px 0 25px;}
.article>p{margin-bottom:10px;line-height:20px;text-align:justify;}

.typ_info03_01 h6{display:block;}
.typ_info03_01 .typ_info_wrap{float:left;width:307px;box-sizing:border-box;margin-right:15px;}
.typ_info03_01 .bg_gray{padding:7px;}
.typ_info03_01 .bg_gray img{margin:0;}
.typ_info03_01 .bg_gray p{width:100%;color:#1b74ce;text-align:center;font-size:11px;letter-spacing:-1px;}
.typ_info03_01 .typ03_01{width:100%;}
.typ_info03_01 .typ03_01 .bg_gray{text-align:center;}
.typ_info03_01 .typ03_01 img{float:none;}
.table_bottom{display:inline-block;font-size:11px;color:#dc2422;margin-bottom:20px;}
.table_top{font-size:11px;overflow:hidden;margin-bottom:10px;}
/* .table_top span{float:right;} */

/*20151125*/
#safetyTips_layer{display:block;width:800px;margin:0 auto;background:#fff;z-index:99;overflow:hidden;border:1px solid #606060;overflow:hidden;box-sizing:border-box;}
#safetyTips_layer .tit{position:relative;height:101px;box-sizing:border-box;padding:15px 15px 0;}
#safetyTips_layer .tit h1{display:inline-block;width:311px;height:81px;font-size:0;overflow:hidden;text-indent:-9999px;background-image:url(../../images/weather/typoon/typ_new/tit_safetyTip.gif);}
.tab02 .tit h1{background-position:0 -81px!important;}
.tab03 .tit h1{background-position:0 -162px!important;}
#safetyTips_layer .tit>a{position:absolute;right:10px;top:8px;display:inline-block;width:26px;height:30px;background:#fff;border:1px solid #606060;box-sizing:border-box;padding:6px 4px;}
#safetyTips_layer .tab{float:right;width:auto;height:auto;margin-top:37px;}
#safetyTips_layer .tab li{float:left;display:inline-block;;margin-left:9px;}
#safetyTips_layer .tab li a{display:inline-block;width:100%;height:100%;font-size:0;text-indent:-9999px;background:url(../../images/weather/typoon/typ_new/btn_safetyTip_tab.png) no-repeat 0 0;width:82px;height:34px}
#safetyTips_layer .tab li:nth-child(2) a{width:119px;background-position:-84px 0;}
#safetyTips_layer .tab li:nth-child(3) a{width:95px;background-position:-204px 0;}
#safetyTips_layer .tab li a.on ,
#safetyTips_layer .tab li a:hover{background-image:url(../../images/weather/typoon/typ_new/btn_safetyTip_tab_on.png);}
#safetyTips_layer .body{box-sizing:border-box;height:100%;}
#safetyTips_layer .tab_content{display:block;width:798px;height:688px;margin-top:8px;}
#tab01{background:url(../../images/weather/typoon/typ_new/bg_safety_tip01.jpg) no-repeat;}
#tab02{background:url(../../images/weather/typoon/typ_new/bg_safety_tip02.jpg) no-repeat;}
#tab03{background:url(../../images/weather/typoon/typ_new/bg_safety_tip03.jpg) no-repeat;}
/*20151125 end*/

/*common*/
.tab{float:left;height:217px;margin:3px 0 0 4px;}
.marginT15{margin-top:15px;}
.fl		{ float:left !important; }
.fr		{ float:right !important; }
.fr02	{float:right !important; width:287px;}
.fr02_w	{float:right !important; width:283px;}
.cb		{ clear:both !important; }
.ac		{ text-align:center !important; }
.al		{ text-align:left !important; }
.ar		{ text-align:right !important; }
.vt		{ vertical-align:top !important; }
.vm		{ vertical-align:middle !important; }
.vb		{ vertical-align:bottom !important; }
.jf		{ text-align:justify !important; }
.oh		{ overflow:hidden !important; }
.cp		{ cursor:pointer !important; }
.di		{ display:inline !important; }
.dn		{ display:none !important; }
.db		{ display:block !important; }
.vv		{ visibility:visible !important; }
.vh		{ visibility:hidden !important; }
.bn		{ border:none !important; }
.bbn	{ border-bottom:none !important; }
.bTn	{ border-top:none !important; }
.bln	{ border-left:none !important; }
.brn	{ border-right:none !important; }
.bgn	{ background:none !important; } 
.bgn	li{ background:none !important; } 
.fb		{ font-weight:bold !important; }
.fnor	{ font-weight:normal !important; }
.fs01{ font-size:1em !important; }
.fs02{ font-size:0.95em !important; }
.fs03{font-size:1.05em !important;}
.fs04{font-size:1.2em !important;}
.fs05{font-size:0;}
.fs06{font-size:0.9em;}
.lh{line-height:0;}
.TU{text-decoration:underline !important;}

/* Margin */
.MN0 { margin:0 !important;}
.ML1 { margin-left:1px ; }
.ML2 { margin-left:2px ; }
.ML-4{margin-left:-4px;}
.ML-7{margin-left:-7px;}
.ML-10{margin-left:-10px;}
.ML-13{margin-left:-13px;}
.ML3 { margin-left:3px; }
.ML4 { margin-left:4px; }
.ML5 { margin-left:5px; }
.ML6{ margin-left:6px;}
.ML7{ margin-left:7px !important; }
.ML8 { margin-left:8px !important; }
.ML9 { margin-left:9px !important; }
.ML10 { margin-left:10px !important; }
.ML14{margin-left:14px !important;}
.ML15 { margin-left:15px  !important; }
.ML20 { margin-left:20px; }
.ML25{ margin-left:25px; }
.ML27 { margin-left:25px; }
.ML30 { margin-left:30px; }
.ML33 { margin-left:33px; }
.ML40 { margin-left:40px; }
.ML80 { margin-left:80px; }
.ML125 { margin-left:125px; }
.ML240{ margin-left:240px; }
.ML295 { margin-left:295px; }
.MR3{ margin-right:3px;}
.MR5{ margin-right:5px;}
.MR6{ margin-right:6px;}
.MR10 { margin-right:10px; }
.MR15 { margin-right:15px; }
.MR20 { margin-right:20px; }
.MR25 { margin-right:25px; }
.MR30 { margin-right:30px; }
.MT0{margin-top:0 !important;}
.MT5 { margin-top:5px !important; }
.MT8{margin-top:8px;}
.MT10 { margin-top:10px !important; }
.MT15 { margin-top:15px !important; }
.MT10B10 { margin-top:10px !important;  margin-bottom:10px !important;}
.ML10B10 { margin-left:10px !important;  margin-bottom:10px !important;}
.ML20T10 { margin-left:20px !important;  margin-top:10px !important;}
.MT14{margin-top:14px;}
.MT-10 { margin-top:-10px; }
.MT-20 { margin-top:-20px; }
.MT20 { margin-top:20px !important;}
.MT22 { margin-top:22px; }
.MT25 { margin-top:25px !important; }
.MT28 { margin-top:28px; }
.MT30 { margin-top:30px; }
.MT35 { margin-top:35px; }
.MT40 { margin-top:40px; }
.MT50 { margin-top:50px; }
.MT70 { margin-top:70px; }	 
.MT5L8 { margin:5px 0 0 8px; }
.MTL20 { margin:20px 0 0 20px; }
.MTB5 { margin:5px 0 5px 0; }
.MTB10 { margin:10px 0 10px 0; }
.MB0 { margin:0 !important;}
.MB5{ margin-bottom:5px;}
.MB10 { margin-bottom:10px; }
.MB15 { margin-bottom:15px !important; }
.MB20 { margin-bottom:20px !important; }
.MB30 { margin-bottom:30px; }
.MB50 { margin-bottom:50px;}

/* padding_top */
.PD0 { padding:0px !important;}
.PT5 { padding-top:5px !important;}
.PT7 { padding-top:7px;}
.PT10 { padding-top:10px;}
.PT14{ padding-top:14px;}
.PT20 { padding-top:20px;}
.PT30 { padding-top:30px;}
.PT50 { padding-top:50px;}
	
/* padding_left */	
.PL3 { padding-left:3px;}
.PL5 { padding-left:5px !important;}
.PL8 { padding-left:8px;}
.PL10 { padding-left:12px;}
.PL15 { padding-left:15px;}
.PL20 { padding-left:20px;}
.PL30 { padding-left:30px;}
.PL40{ padding-left:40px;}
.PL45{ padding-left:45px;}
.PL50{ padding-left:50px;}
.PL55{ padding-left:55px;}
.PL60 { padding-left:60px;}
.PL65 { padding-left:6px;}
.PL100 { padding-left:100px;}
.PL230 { padding-left:230px !important;}
.PL250 { padding-left:250px !important;}
.PL260 { padding-left:260px;}
.PL315 { padding-left:315px;}

/* padding_right */
.PR0 { padding-right:0 !important;}
.PR5 { padding-right:5px;}
.PR7 { padding-right:7px;}
.PR10 { padding-right:10px;}
.PR12 { padding-right:10px;}
.PR20 { padding-right:20px;}
.PR35 { padding-right:35px;}

/* padding_bottom */
.PB5{ padding-bottom:5px;}
.PB10 { padding-bottom:10px;}
.PB15 { padding-bottom:15px;}
.PB20 { padding-bottom:20px;}
.PB5 { padding-bottom:5px;}
.PB30 { padding-bottom:30px;}
.PB40 { padding-bottom:40px;}
.PB45 { padding-bottom:45px;}

/* padding_all */
.PT10L5 { padding:10px 0 0 5px;}
.PT6L15 { padding:6px 0 0 15px;}
.PT5B8{ padding:5px 0 8px 0;}
.PT15B25{ padding:15px 0 25px 0;}

/* FONT COLOR */
.pointBlue{color:#1967be;}

/* float 해제 */
.fixed:after{	content:"."; 	display:block; 	height:0; 	clear:both; 	visibility:hidden;	}
.fixed{	display:block;	}
/*  \*/
.fixed{	min-height:1%;	}
* html .fixed{	height:1%;	}

/* 텍스트 숨기기 */
/*20111128 크롬이나 사파리에선 colgroup이 적용이 안됨. 그래서 css수정함*/
/*.blind { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }*/
.blind {width:0;height:0;font-size:0;line-height:0;overflow:hidden;padding: 0px;margin: 0px;visibility: hidden;}
.label_blind {width:0;height:0;font-size:0;line-height:0;padding:0px;margin:0px;overflow:hidden;visibility: hidden;position:absolute;}


tr.whole th{background:#788088;color:#fff;font-weight:bold;}
.whole td{background:#ebf2f7;}

/* .typhoon-map-desc{background:peachpuff;position:absolute;left:1px;bottom:1px;text-align:left;width:100%;} */
/* .typhoon-map-desc p{letter-spacing:-1px;padding:1px 0;padding-top:4px\0;font-weight:bold;} */
.tbl_top{display:flex;width:100%;margin-bottom:15px;} /*예보버튼 추가로 display 변경 _ 230410 김지윤 */
.tbl_top select{padding:4px 0;}
.inline_block{display:inline-block;}
@-moz-document url-prefix(){
.graphLayer{height:515px;}
}

/* 20220428 : Slide */
/* common */
/* 20240418 지점on/off css 추가 */
.landsat{height:calc(100% - 73px);}
#help_new, #label_toggle{position:absolute;bottom:6px;left:120px;}
#help_new{width:70px}
#label_toggle{line-height: 30px; left:200px;border-radius:5px;background:#535353;padding: 0 10px;color:#fff}
#label_toggle.on{background: #6081e0;color:#fff}
#label_toggle.blockLabel,
#label_toggle.blockLabel > a{display:block;height:30px;background:#535353;text-decoration:none;color:#A6A6A6;pointer-events: none;}
#label_toggle > a{display:block;height:30px;text-decoration:none;color:#fff}
.slide_wrap{position:absolute;top:0;right:-2px;width:390px;height:100%;border:1px solid #3c90e0;background:#fff;transition:.5s;box-sizing:border-box;z-index:1;}
.slide_wrap.on{right:calc(-390px + 2px);}
.slide_wrap>img{position:absolute;bottom:10px;left:-115px;}
.slide_wrap .tbl_top>select{width:100%;height:30px;line-height:30px;border-radius:5px;border-color:#fff;font-size:14px;}
.btn_slide{position:absolute;bottom:calc(50% - 40px);left:-27px;width:27px;height:59px;background:url(../../images/common/bg_slide.png);background-position:center right;text-indent:-9999px;}
.slide_wrap.on .btn_slide{background-position:center left;}
.slide_wrap:after{content:'';position:absolute;bottom:8px;left:-110px;width:100px;height:42px;background:url(../../images/common/kma_logo.png);background-position:center right;background-size:cover;}
.slide_wrap.on:after{background-position:center left;}
.slide_wrap .graph .tit{background:#eef2f7;padding:10px 5px 0 5px;}
.common_tab_wrap{position:absolute;top:40px;left:5px;z-index:1;}
.common_tab{display:contents;box-shadow:0 1px 2px rgba(0,0,0,.4);}
.common_tab>li{position:relative;display:flex;width:160px;height:29px;background:#fff;padding-left:7px;border:1px solid #5c5c5c;border-bottom:none;}
.common_tab>li:last-child{border-bottom:1px solid #5c5c5c;}
.common_tab label{display:flex;align-self:center;}
.common_tab label:before{position:relative;top:1px;z-index:1;display:inline-block;content:'';width:15px;height:15px;margin-right:5px;outline:1px solid #1a9dfa;}
.common_tab label span{align-self:center;font-size:13px;letter-spacing:-0.01em;}
.common_tab label span:before{position: absolute;top:0;left:0;display:block;content:'';width:168px;height:30px;}
.common_tab input{display:none;}
.common_tab input:checked + label:before{width:7px;height:7px;border:4px solid #fff;background:#1a9dfa;outline: 1px solid #1a9dfa;}
.tbl_typhooninfo{margin-bottom:10px;}
.tbl_typhooninfo h3{padding-left:10px;margin-bottom:5px;background:#2f7ecf;color:#fff;line-height:30px;}
/* tab */
.tab_menu{position:relative;display:flex;justify-content:space-between;}
.tab_menu .list{overflow:hidden;}
.tab_menu .list li{float:left;}
.tab_menu .more_info_wrap{padding:0;}
.tab_menu .list .btn{display:inline-block;width:60px;height:40px;background:#DAE0E8;border-bottom:none;font-size:14px;text-align:center;line-height:40px;text-decoration: none;}
.tab_menu .list .cont{display:none;position:absolute;top:50px;left:0;width:100%;}
.tab_menu .list li.is_on .btn{position:relative;background:#fff;font-weight:bold;color:#0099E1;}
.tab_menu .list li.is_on .btn::before{position:absolute;content:'';display:block;width:100%;height:2px;background:#00A9CD;}
.tab_menu .list li.is_on .cont{display:block;padding:10px 0;}
/* main */
.slide_main_wrap{display:none;height:100%;box-sizing:border-box;}
.slide_main_wrap.on{display:block;}
.slide_main_wrap h2{padding:30px 20px 22px;background:#dff0ff;text-align:center;font-weight:600;color:#000;}
.slide_main_wrap h5{padding:20px 10px 22px;font-size:13px;position:absolute;text-align:center;font-weight:600;bottom: 1px;white-space: pre;}
.act_wrap{border-top:double #4472C4;padding:20px;}
.act_wrap li{position:relative;}
.act_wrap li>a{display:block;position:relative;left:20px;font-size:17px;font-weight:600;color:#0066FF;line-height:55px;height:45px;margin-top:10px;}
.act_wrap li>a:before{position:absolute;top:8px;left:-40px;content:'';display:inline-block;width:35px;height:40px;background-image:url(../../images/common/ico_typhoon_new.png);background-size:cover;background-repeat:no-repeat;background-position-x: center;}
.act_wrap li>a:hover:before{animation:icon_typhoon 2s infinite linear;}
.act_wrap li>h{margin:25;font-size:15px}
.act_wrap li>a>b{font-size:14px}
@keyframes icon_typhoon{0%{transform:rotateZ(360deg);}50%{transform:rotateZ(180deg);}100%{transform:rotateZ(0deg);}}
.cont .graphLayer.inner{display:block;position:static;width:100%;border:none;box-shadow:none;overflow-y:visible;}
.cont .graphLayer.inner>.tit{display:none;}

/* 외곽선 두께 변경 및 하단 스크롤 바 border 조정 : 20220503 */
.landsat{border:2px solid #3c90e0;}
.slide_wrap{border:2px solid #3c90e0;}
.slide_main_wrap {position: absolute;z-index:9999;width: 100%;background: #fff;}

/* 화면 비율 100% : 20220509 */
#wrap_content{float:none;width:100%;}
#wrap_content #title{background:#006ac7;}
.typhoon_map{width:100%;overflow:hidden;}

/* 수정 요청 기반 디자인 적용 : 20220517 */
/* scale position */
.typhoon_map .ol-zoom{top:inherit !important;bottom:3px;}
.typhoon_map .ol-zoomslider{top:inherit !important;bottom:31px;}
.ol-zoomslider-thumb{width:25px !important;}
/* main title */
#content > #wrap_content.width2 > #title{display:flex;padding:12px;}
#wrap_content.width2 #title h5{align-self:center;flex-grow:1;}
#wrap_content.width2 #title h5:before{display:inline-block;content:'';width:93px;height:22px;background:url(../../images/common/h5_main_detail.png);background-size:contain;margin-left:15px;}
#wrap_content.width2 h4{padding-left:10px;align-self:center;background:none;flex-grow:0;}
#wrap_content.width2 h4:before{display:inline-block;content:'';width:150px;height:45px;background:url(../../images/common/h4_main_tit.png);background-size:contain;background-repeat:no-repeat;}
#wrap_content.width2 h4 img,
#wrap_content.width2 h5 img{width:0;height:0;}

@media screen and (max-width: 1199px){
	#wrap_content{width:100%;}
	.slide_wrap{width:40%;}
	.slide_wrap.on {right:calc(-40% + 2px);}
	.typhoon_map{width:100%;}
	.more_info_wrap {margin-bottom:5px;}
	.graph {padding:0 10px;}
	.graph .tit { font-size: 15px;}
	.graph .tit .sub-select-wrap { margin-top:4px;}
	.graph .tit .sub-select-wrap .select {/*border:1px solid #c4c3c3;*/width:100%;}
	.graph .tit select{/*border:1px solid #c4c3c3;*/width:100%;}
	.graph_area {float:none; width: 100%;}
	.tbl_top { margin-bottom:4px;}
	.typhoon-map-desc { padding: 0 10px;}
	.map_toggle{top:39px;left:215px;}
	.common_tab_wrap{top:39px;left:4px;}
	.tab_menu .list .cont{top:70px;}
	.tab_menu .list .btn{width:50px;font-size:12px;}
	.more_info_wrap .tit h1{font-size:12px;}
	.layer_graph_area{width:calc(100% - 20px) !important;}
	.slide_main_wrap h2{padding:20px 10px;font-size:17px;}
	.slide_main_wrap h2:before{width:220px;height:20px;}
	.slide_main_wrap h5{padding:20px 10px;font-size:12px;}
	.slide_main_wrap h5:before{width:220px;height:20px;}
	.act_wrap{padding:10px;}
	.act_wrap li>a{left:30px;font-size:16px;line-height:40px;;height:35px;}
	.act_wrap li>a:before{top:5px;left:-30px;width:25px;height:30px;}
	.act_wrap li>h{margin:20;font-size:15px}
	.act_wrap li>a>b{font-size:14px}
	#wrap_content.width2 h4:before{width:132px;height:40px;}
	.landsat{height:calc(100% - 68px);}
	#help_new{position:absolute;bottom:6px;left:120px;}
	.ol-zoomslider-thumb{width:33px !important;}
}

@media screen and (max-width: 766px){
	.typhoon_map .ol-zoomslider{bottom:35px;}
	.ol-zoomslider-thumb{width:33px !important;}
	#help_new{position:absolute;bottom:6px;left:120px;}
	.slide_wrap{width:95%;}
	.slide_wrap.on {right:calc(-95% + 2px);}
	.layer_graph_area{width:calc(100% - 20px) !important;}
	.slide_main_wrap h2{padding:20px 10px;font-size:14px;}
	.slide_main_wrap h2:before{width:190px;height:18px;}
	.slide_main_wrap h5{padding:20px 10px;font-size:13px;}
	.slide_main_wrap h5:before{width:190px;height:18px;}
	.act_wrap{padding:10px;}
	.slide_wrap:after{width:74px;height:30px;left:-78px;bottom:1px;}
	.act_wrap{padding:10px;}
	.act_wrap li>a{left:25px;font-size:14px;line-height:30px;height:25px}
	.act_wrap li>a:before{top:0;left:-25px;width:20px;height:26px;}
	.act_wrap li>h{margin:17;font-size:12px}
	.act_wrap li>a>b{font-size:12px}
	.tbl_typhooninfo h3{font-size:14px;}
	.landsat{height:calc(100% - 68px);}
}

/* 범례 아이콘 : 20220520 */
/* 적용 방법
	.act_wrap 의 자식 li에 아래 단어를 class로 넣어주시면 됩니다.
	td(열대저압부)/weak(태풍)/normal(태풍중)/strong(태풍강)/very(태풍 매우강)/very2(태풍초강력)/hs(온대저기압)
	아무 class도 없을 때는 기본 아이콘이 나오게 작업했습니다.  */
.act_wrap li.td>a:before{background-image:url(../../images/common/ico_typhoon_new_td.png);}
.act_wrap li.td>a:hover:before{animation:none;}
.act_wrap li.red>a:before{background-image:url(../../images/common/ico_typhoon_new_red_td.png);}
.act_wrap li.red>a:hover:before{animation:none;}
.act_wrap li.weak>a:before{background-image:url(../../images/common/ico_typhoon_new_weak.png);}
.act_wrap li.normal>a:before{background-image:url(../../images/common/ico_typhoon_new_normal.png);}
.act_wrap li.strong>a:before{background-image:url(../../images/common/ico_typhoon_new_strong.png);}
.act_wrap li.very>a:before{background-image:url(../../images/common/ico_typhoon_new_very.png);}
.act_wrap li.super>a:before{background-image:url(../../images/common/ico_typhoon_new_very2.png);}
.act_wrap li.hs>a:before{background-image:url(../../images/common/ico_typhoon_new_hs.png);}
.act_wrap li.hs>a:hover:before{animation:none;}

#wrap_content #title ul.button{flex-grow:0;align-self:center;}

/* 하단 안내문구 적용 : 20220805 */
/* .landsat {height: calc(100% - 110px);} */
.landsat {height: calc(100% - 73px);}
/* .landsat:after{display:block;position:fixed;bottom:10px;left:0;content:'※ 삼성인터넷에서는 일부 기능이 비정상적일수 있습니다';margin-left:10px;font-size:15px;} */
/* pc로 접속할 경우 */
.landsat.changed:after{content:''}

@media screen and (max-width: 1199px){
	.landsat {height: calc(100% - 100px);}
	.landsat:after{display:block;position:fixed;bottom:10px;left:0;content:'※ 모바일 환경에 따라 일부 기능이 제한적일수 있습니다.';margin-left:10px;font-size:15px;}
}

/*
* tab_box 새 디자인 적용
* 20230413 김지윤 (jy5017@giens.co.kr)
*/
#forecast{width:25%;margin-left: 5px;background:#5c99d2;font-size:0.9em;font-family:'NanumSquare';color:#fff;cursor:pointer;border:none;border-radius: 5px;}
#tab_box{display:flex;flex-direction:column;position:absolute;top:5px;left:5px;z-index: 1;pointer-events:none;}
#tab_box a{pointer-events: auto;}
#tab_box label{pointer-events: auto;}
#tab_box .map_toggle{position: static;margin: 5px 0 0 4px;}
#tab_box .map_tap{position: static;}
li.tab_list_button{float:none !important;}
li.tab_list_button.active{border-radius: 10px;background: rgba(0,0,0,0.7);}
li.tab_list_button.active > a > span{border-radius: 10px;background: rgba(0,0,0,0.6);}
li.tab_list_button.active#basic_id > a,
li.tab_list_button.active#statistics_id > a{box-sizing: border-box;display: block;width:100%;padding: 5px;border-top-left-radius: 10px;border-top-right-radius: 10px;background: rgba(0,0,0,0.3);}
li.tab_list_button.active > a > span{background: none;}
li.tab_list_button.active#approach_id,
li.tab_list_button.active#danger_id,
li.tab_list_button.active#risk_id {width:auto;padding:5px;}
li.tab_list_button.active#statistics_id > *{position: static;}
#statistics_button > .map_control {position:static; padding: 5px;}
#statistics_date > .now_view {position:static; padding: 5px;}
#danger_id {display: inline-block;}
li.tab_list_button span{color:#fff;}
li.tab_list_button > a > span {display: inline-block;margin: 2px 0;padding: 4px 8px;font-size: 1em;cursor: pointer;border-radius: 10px;background: rgba(0,0,0,0.3);text-shadow: 0 0 4px #000;}

div.common_tab_list{display: flex;width:100%;height:auto;margin: 2px 0;padding:5px;background:none;border:none;}
div.common_tab_list > span{text-shadow: 0 0 4px #000;}
div.common_tab_list:last-child{border:none;}
.now_view_text{padding: 0 5px;color:#fff;font-weight:normal;}

.slider {position: absolute;cursor:pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;-webkit-transition: .4s;transition: .4s;}
.slider.round:before {height: 12px;width: 12px;top: auto;left: 3px;bottom: 3px;background-color: #fff;-webkit-transition: .2s;transition: .2s;}
input:checked+.slider {background-color: #2196F3;}
input:focus+.slider {box-shadow: 0 0 1px #2196F3;}
input:checked+.slider:before {left: calc(100% - 2px);transform: translateX(-100%);}

/* Rounded sliders */
.slider.round {height: 18px; width:35px;border-radius: 20px;}
.slider.round:before {border-radius: 50%;}

/* ON/OFF*/
.switch {position: relative;display: inline-block;width: 35px;height: 18px;margin-right: 10px;}
label.switch:before{outline:none;}

/* Hide default HTML checkbox */
.switch input {opacity: 0;width: 0;height: 0;}

@media screen and (max-width: 766px){
	#tab_box{height: calc(100% - 50px);overflow-y: auto;
	-ms-overflow-style: none; /* 인터넷 익스플로러 */
  	scrollbar-width: none; /* 파이어폭스 */}
	#tab_box::-webkit-scrollbar{display: none;}
	li.tab_list_button > a > span{font-size:0.9em;}
	div.common_tab_list > span{font-size:0.9em;}
	.now_view_text{font-size:0.9em;}
	.map_toggle .btn_custom{display:flex;justify-content:center;font-size:0.9em;}
	#legend_id,#help_new, #label_toggle{font-size:0.8em;}
	}

@media screen and (max-height: 499px){
	#tab_box{pointer-events: auto;}
}


@media screen and (max-width: 281px) {
	.slide_wrap:after{bottom:40px;}
	.landsat:after{bottom:0px;}
}