@charset "utf-8";
.btn{padding:0 5px;line-height:19px;color:#fff;border-radius:2px;background-color:#fff;border:none;}
.btn_mint{background-color:#25a9b9;}
.btn_blue{background-color:#256cb9;}
.btn_orange{background-color:#f7574d;}
.btn_blackLine{border:1px solid #333;color:#333;}
.btn_blueLine{border:1px solid #256cb9;color:#256cb9;}
.btn_redLine{border:1px solid #f7574d;color:#f7574d;}

.wrap{height:100%;}
.wrap.foldSnb .snb{left:-250px;}
.wrap.foldSnb .content{width:100%;}

.snb_list,
.quake_list{overflow:hidden;}
.snb_list li{float:left;width:50%;height:108px;}
.snb_list li h1{width:100%;height:100%;background:url(../../img/bg_side.png) 50% 13px no-repeat;padding-top:75px;cursor:pointer;}
.snb_list li h1:hover{box-shadow:inset 0 0 3px rgba(0,0,0,.3);}
.snb_list li:last-child h1{background-position-y:-221px;}
.snb_list .on{background-color:#256cb9;}
.snb_list .on h1{color:#fff;background-position-y:-102px;}
.snb_list .on:last-child h1{background-position-y:-345px;}
.snb_cont{height:calc(100% - 140px);}
.tit h2{color:#256cb9;font-size:14px;line-height:40px;}

.content{float:right;width:calc(100% - 250px);height:100%;background-color:#fff}
.iframe{width:100%;height:100%}

.past_quake{height:100%;}
.btn_AreaB{text-align:right;padding:10px 20px 16px;border-top:1px solid #ccc;}
.filter li,
.quake_info li{background-image:url(../../img/ico_side.png)no-repeat;background-repeat:no-repeat;background-position-x:50%;}
.filter{display:block;background-color:#e6e7e8;border:1px solid #ccc;}
.filter ul{overflow:hidden;}
.filter li{float:left;width:33.3%;line-height:40px;}
.sort{position:relative;top:1px;left:0;
  border:1px solid #ccc;background-color:#fff;font-size:18px;color:#858585;line-height:12px;padding-bottom:1px;}
.quake{display:block;height:calc(100% - 91px);overflow-y:auto;}
.quake_list > li{display:block;padding:5px 5px 10px 10px;border-bottom:1px solid #ccc;}
.quake_info{overflow:hidden;}
.quake_info li{float:left;width:50%;text-align:left;padding-top:5px;}
.quake_info .full{width:100%;}
.quake_info .btn_wrap{text-align:center;overflow:hidden;margin-left:-1px;}
.quake_info .btn_wrap::before{display:none;}
.quake_info .btn{float:left;font-size:11px;letter-spacing:-.5px;margin:0 1px;}

.set_area{height:100%;overflow-y:auto;}
.area_list{padding:14px 10px;text-align:left;}
.area_list dl{border:1px solid #c3c3c3;border-bottom:none;counter-reset:count_area;}
.area_list dt,
.area_list dd{position:relative;border-bottom:1px solid #c3c3c3;padding:5px 5px 5px 12px;}
.area_list dt{background-color:#f8f8f8;}
.area_list .hidden_dd{position:absolute;visibility:hidden;}
/*.area_list dt::after{content:counter(count_area);counter-increment:count_area;}*/
.area_list .area_name{padding-right:50px;word-break:keep-all;}
.area_list .area_name .fr{position:absolute;right:5px;top:50%;margin-top:-10px;}
.area_list dd select{width:100%;height:22px;color:#999;margin-bottom:6px;}
.area_list .btn_wrap{width:100%;text-align:center;
margin-top:6px;}
.area_list .btn{font-size:11px;padding:0 7px;}
.area_list p{text-align:center;margin:6px 0;}
.alert_area .tit .fr{line-height:40px;}
.alert_area img{width:20px;height:auto;}
.alm_list{display:flex;flex-wrap:wrap;padding:3px;}
.alm_list li{flex:0 1 auto;width:calc(20% - 8px);margin:4px;background:#ccc;padding:3px 0;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,.2);cursor:pointer;}
.alm_list li:hover{box-shadow:0 0 3px rgba(0,0,0,.2) inset;}
.alm_list li label{display:block;width:100%;}


.filter li::before,
.quake_info li::before,
.area_list dt::before{content:"";display:inline-block;width:16px;height:16px;background-image:url(../../img/ico_side.png);background-repeat:no-repeat;background-position-x:50%;vertical-align:middle;margin-right:3px;overflow:hidden;}
.area_list dt::before{background-position-y:-117px;}
.i_date::before{background-position-y:0;}
.i_mag::before{background-position-y:-23px;}
.i_dist::before{background-position-y:-46px;}
.i_time::before{background-position-y:-70px;}
.i_info::before{background-position-y:-93px;}
.i_loc::before{background-position-y:-118px;}

.playbarframe{position:fixed;right:0;bottom:0;width:calc(100% - 250px);height:80px;box-sizing:border-box;}
@media screen and (max-width:1550px){
  .playbarframe{height:50px;}
}
@media screen and (max-width:1280px){
	.content{width:100%;}
  .playbarframe{width:100%;}
}

/* @media screen and (max-width:767px){
  .playbarframe{padding:0 20px 0 5px;}
} */

/* 20220216 */
/* 20220204 font */
@font-face {
  font-family: 'notokrR';
  src: url('../../font/notoKR_subset/NotoSans-Regular.eot');
  src: url('../../font/notoKR_subset/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
       url('../../font/notoKR_subset/NotoSans-Regular.woff2') format('woff2'),
       url('../../font/notoKR_subset/NotoSans-Regular.woff') format('woff'),
       url('../../font/notoKR_subset/NotoSans-Regular.ttf') format('truetype'),
       url('../../font/notoKR_subset/NotoSans-Regular.svg#NotoSans-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'notokrL';
  src: url('../../font/notoKR_subset/NotoSans-Light.eot');
  src: url('../../font/notoKR_subset/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
       url('../../font/notoKR_subset/NotoSans-Light.woff2') format('woff2'),
       url('../../font/notoKR_subset/NotoSans-Light.woff') format('woff'),
       url('../../font/notoKR_subset/NotoSans-Light.ttf') format('truetype'),
       url('../../font/notoKR_subset/NotoSans-Light.svg#NotoSans-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'notokrDM';
  src: url('../../font/notoKR_subset/NotoSans-DemiLight.eot');
  src: url('../../font/notoKR_subset/NotoSans-DemiLight.eot?#iefix') format('embedded-opentype'),
       url('../../font/notoKR_subset/NotoSans-DemiLight.woff2') format('woff2'),
       url('../../font/notoKR_subset/NotoSans-DemiLight.woff') format('woff'),
       url('../../font/notoKR_subset/NotoSans-DemiLight.ttf') format('truetype'),
       url('../../font/notoKR_subset/NotoSans-DemiLight.svg#NotoSans-DemiLight') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'notokrM';
  src: url('../../font/notoKR_subset/NotoSans-Medium.eot');
  src: url('../../font/notoKR_subset/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
       url('../../font/notoKR_subset/NotoSans-Medium.woff2') format('woff2'),
       url('../../font/notoKR_subset/NotoSans-Medium.woff') format('woff'),
       url('../../font/notoKR_subset/NotoSans-Medium.ttf') format('truetype'),
       url('../../font/notoKR_subset/NotoSans-Medium.svg#NotoSans-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'notokrB';
  src: url('../../font/notoKR_subset/NotoSans-Bold.eot');
  src: url('../../font/notoKR_subset/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
       url('../../font/notoKR_subset/NotoSans-Bold.woff2') format('woff2'),
       url('../../font/notoKR_subset/NotoSans-Bold.woff') format('woff'),
       url('../../font/notoKR_subset/NotoSans-Bold.woff') format('woff'),
       url('../../font/notoKR_subset/NotoSans-Bold.ttf') format('truetype'),
       url('../../font/notoKR_subset/NotoSans-Bold.svg#NotoSans-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

.quake_list li,
.quake_list p,
.info_fold{font-family:'notokrDM';}
.quake_list_detail>li>div>p:last-child,
.quake_list_detail>li>div>p:first-child span{font-family:'notokrB';}
.tit_h3{font-family:'notokrM';}

.flex_wrap{display:flex;}
.f_sb{justify-content:space-between;}
.font_b{font-weight:bold;}
.tit_h3{color:#fff;background-color:#324067;text-align:center;}
.info_fold_pc{position:absolute;z-index:-10;content:'아이콘을 클릭하면 과거 지진 모의 영상을  보실 수 있습니다.';background:rgba(0,0,0,.55);color:#fff;font-weight:300;}
.info_fold_m>p{z-index:-10;content:'아이콘을 클릭하면 과거 지진 모의 영상을  보실 수 있습니다.';color:#fff;font-weight:300;}
.info_fold::before,
.info_fold{transition:.3s;}
.info_fold::before{position:absolute;z-index:-1;content:'';width:0px;height:0px;transform:translateY(-50%);opacity:.55;}
.info_fold_m p{color:#fff;font-size:13px;font-weight:300;}

.fold{position:absolute;z-index:2;border:none;}
.snb_wrap.a .fold{border:none;}
.btn_snbclose{display:none;position:absolute;z-index:20;background-color:#455277;transition:.2s;font-size:0;}
.btn_snbclose::before,.btn_snbclose::after{position:absolute;content:'';background-color:#fff;transition:.3s;}
.snb_wrap.a .btn_snbclose{display:block;}
.fill{color: #535353;}
.quake{height:100%;background-image:url(../../img/bg_quakelist.png);background-repeat:no-repeat;background-size:130%;background-attachment:scroll;}
.quake_list{height:100%;overflow-y:auto;}
.quake_list>li{background-color:rgba(200, 200, 200,.7);border-radius:5px;cursor:pointer;}
.quake_list>li:last-child{margin-bottom:0;}
.quake_list_detail>li>div p{font-weight:bold;color:#161616;text-align:center;}
.quake_list_detail>li{text-align:left;letter-spacing: -0.6px;}
.btn_snbclose::before{display:inline-block;transform:rotate(135deg);}
.btn_snbclose::after{display:inline-block;transform:rotate(45deg);}
.btn_snbclose:hover::before{transform:rotate(45deg);}
.btn_snbclose:hover::after{transform:rotate(135deg);}
.eq_box.eq_1{background-color:#fff;}
.eq_box.eq_2{background-color:#a0e6ff;}
.eq_box.eq_3{background-color:#92d050;}
.eq_box.eq_4{background-color:#ff0;}
.eq_box.eq_5{background-color:#FFC000;color:#fff;}
.eq_box.eq_6{background-color:#f00;color:#fff;}
.eq_box.eq_7{background-color:#A32777;color:#fff;}
.eq_box.eq_8{background-color:#632523;color:#fff;}
.eq_box.eq_9{background-color:#4C2600;color:#fff;}
.eq_box.eq_10{background-color:#000;color:#fff;}

@media screen and (max-width:1300px){
.info_fold_pc{display:none;}
.snb_wrap.a .info_fold_m{display:none;}
.snb_wrap{position:fixed;z-index:10;left:0;top:92px;width:auto;transition:.5s;}
.snb_wrap.helper{width:calc(100% - 5px);}
.snb_area{bottom:0;}
.snb_tit{position:relative;height:36px;}
.tit_h3{width:0;height:0;font-size:0;font-weight:normal;line-height:36px;letter-spacing:-0.8px;transition:.3s;opacity:0;}
.snb_wrap.a .tit_h3{display:block;width:100vw;height:36px;font-size:19px;opacity:1;}
.info_fold::before{top:11px;left:-5px;border-right:5px solid #000;border-top:5px solid transparent;border-bottom:5px solid transparent;}
.info_fold_m{position:relative;left:45px;top:7px;width:calc(100% - 50px);padding:0 20px 0 5px;z-index:5;border-radius:3px;background:rgba(0,0,0,.55);font-size:11px;font-family:'notokrL';line-height:25px;text-align:left;letter-spacing:-0.28px;}
.btn_infofold{position:absolute;top:-1px;right:5px;border:none;background:transparent;color:#fff;transform: scaleY(80%);}
.snb_wrap.a .info_fold::before{top:10px;}
.fold:hover + .info_fold::before{display:block;}
.fold{width:36px;height:36px;background:#fe8328 url(../../img/list-open.png)no-repeat center center;background-size:57%;border-radius:0;}
.snb_wrap.a .fold{width:36px;height:36px;background:#fe8328 url(../../img/list-close.png)no-repeat center center;background-size:57%;}
.snb{width:0;height:0;transition:.3s;opacity:0;}
.snb_wrap.a .snb{bottom:0;display:block;width:100vw;height:auto;max-height:300px;overflow-y:auto;opacity:1;}
.btn_snbclose{top:-100px;right:10px;width:23px;height:23px;border:none;}
.snb_wrap.a .btn_snbclose{top:6px;}
.btn_snbclose::before,.btn_snbclose::after{top:10px;width:15px;height:2px;}
.btn_snbclose::before{left:5px;}
.btn_snbclose::after{left:5px;}
.quake_list li,.quake_list p{font-size:13px;}
.quake{background-position:center 20%;}
.quake_list{padding:10px;}
.quake_list>li{margin-bottom:7px;padding:7px 10px;cursor:pointer;}
.quake_list>li.on,
.quake_list>li:hover,
.quake_list>li:active,
.quake_list>li:focus{background-color: rgba(169, 169, 169, 75);}
.quake_list_detail>li>div{width:32%;}
.quake_list_detail>li>div>p:first-child span{font-size:22px;margin-left:5px;}
.quake_list_detail>li>ul{width:64%;padding:6px 0 5px;}
.quake_list_detail>li>ul li{line-height:20px;letter-spacing:-.07em;position: relative;padding-left: 23px;}
.quake_list_detail .full::before{position:absolute;top:5px;display:inline-block;content:'';margin-right:8px;}
.quake_list_detail .i_date::before{width:16px;height:16px;top: 1px;background:url(../../img/ico_calendar.png);background-size:cover;left: 0;}
.quake_list_detail .i_info::before{width:16px;height:20px;top: 2px;left: 0;background:url(../../img/ico_earthquake.png);background-size:cover;}
.quake_list .eq_box{width:81px;margin:0 auto;padding:0;border-radius:5px;font-size:15px;}
}
@media screen and (min-width:1301px){
.info_fold_m{display:none;}
.snb_wrap{position:fixed;z-index:10;left:0;bottom:-513px;transition:.5s;}
.snb_wrap.a{bottom:-6px;}
.snb_tit{position:relative;top:3px;height:66px;}
.tit_h3{position:absolute;z-index:1;top:66px;width:720px;height:100%;font-size:32px;line-height:66px;letter-spacing:-0.8px;transition:0.5s;}
.snb_wrap.a .tit_h3{top:0;border-radius: 10px 10px 0 0;}
.btn_infofold,.info_fold{display:none;}
.info_fold::before{top:25px;left:-7px;border-right:7px solid #000;border-top:7px solid transparent;border-bottom:7px solid transparent;}
.info_fold{top:5px;left:82px;width:540px;padding-left:20px;border-radius:4px;font-size:22px;letter-spacing:-0.55px;line-height:51px;}
.snb_wrap.a .info_fold,.snb_wrap.a .info_fold{top:10px;}
.fold:hover + .info_fold,.fold:hover + .info_fold{display:block;}
.fold{width:66px;height:66px;background:#fe8328 url(../../img/list-open.png)no-repeat center center;border:none;border-radius:10px 0 0 0;}
.snb_wrap.a .fold{background:#fe8328 url(../../img/list-close.png)no-repeat center center;border-radius:10px 0 0 0;}
.snb{position:relative;width:720px;height:510px;}
.btn_snbclose{top:100px;left:666px;width:44px;height:44px;}
.snb_wrap.a .btn_snbclose{top:10px;}
.btn_snbclose::before,.btn_snbclose::after{top:20px;width:30px;height:2px;}
.btn_snbclose::before{left:8px;}
.btn_snbclose::after{left:7px;}
.quake_list li,.quake_list p{font-size:24px;}
.quake{background-position:center 80%;}
.quake_list{padding:30px;}
.quake_list>li{margin-bottom:30px;padding:18px;cursor:pointer;}
.quake_list>li.on,
.quake_list>li:hover,
.quake_list>li:active,
.quake_list>li:focus{background-color: rgba(169, 169, 169, 75);}
.quake_list>li:last-child{margin-bottom:0;}
.quake_list_detail>li>div{width:150px;align-self:center;}
.quake_list_detail>li>div>p:first-child span{font-size:38px;}
.quake_list_detail>li>ul{width:calc(100% - 165px);}
.quake_list_detail>li>ul li{position:relative;padding:0 0 0 32px;line-height:30px;}
.quake_list_detail .full::before{position:relative;top:5px;display:inline-block;content:'';margin-right:12px;}
.quake_list_detail .i_date::before{width: 23px;height: 29px;top: 6px;background: url(../../img/ico_calendar.png) no-repeat;background-size: contain;}
.quake_list_detail .i_info::before{background:url(../../img/ico_earthquake.png);width: 23px;height: 30px;background: url(../../img/ico_earthquake.png);background-size: contain;}
.eq_box{width:150px;margin:0 auto;border-radius:5px;line-height:37px;}
}
@media screen and (max-width:320px){
  .mm_con{display:none;}
  .snb{height: 145px;}
  .snb_wrap.a .snb{background-image: url(../../img/bg_quakelist.png);}
  .quake{background:none;}
  .quake_list{padding:8px;}
  .quake_list li, .quake_list p {font-size:12px;}
  .quake_list>li{padding:6px;cursor:pointer;}
  .quake_list_detail>li>ul{width:77%;}
  .quake_list_detail>li>div{width:20%;}
  .quake_list .eq_box {width:52px;font-size:12px;}
  .quake_list_detail .full::before{margin-right:2px;}
  .quake_list_detail>li>div>p:first-child span{margin-left:0;font-size:15px;}
  .quake_list_detail>li>ul li {line-height: 17px;}
  .info_fold{top:7px;width:68vw;padding-right:18px;}
  .info_fold::before{top:12px;}
  .quake_list_detail .i_date::before{width:14px;height:14px;}
}

@media (min-width:768px) and (max-width:1300px){
.snb_wrap {position: fixed;z-index: 10;left: 0;top: 149px !important;width: auto;transition: .5s;}
.snb_wrap.a .snb{max-height:352px;}
.btn_speaker{padding-top:38px;}
.en .notice_tit .btn_speaker {padding-top: 60px;background-size: 50%;line-height: 22px;letter-spacing: -.1em;background-position-y:20%;}
.quake_list li,.quake_list p{font-size:21px;line-height:30px;}
.en .quake_list_detail>li>div{padding-top: 15px;}
.en .quake_list .eq_box {width: auto;font-size: 20px;}
.en .btn_speaker.btn_speaker_center {background-position-y: 30%;background-size: 50%;}
.en .quake_list_detail>li>div>p:first-child span {font-size:30px;}
.info_fold {font-size:25px !important;line-height:30px;top:6px;left:45px;}
}
.quake_list_detail .full::before{position:absolute;left:0;}
.quake_list_detail .i_date::before{top:3px;}
.quake_list_detail .i_info::before{top:1px;}
.quake_list_detail>li>ul {display: flex;flex-direction: column;align-self: center;}