@charset "UTF-8";

/* **************************************** *
 * common
 * **************************************** */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,time,figure,article,nav,header,footer,hgroup,video,audio,aside,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
  margin:0;
  padding:0;
  border:0;
  font-family:'ptd', 'sans-serif';
  font-style:inherit;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
html{font-size:16px; scroll-behavior:smooth}
a{text-decoration:none}
ol,ul{list-style:none}
table{border-collapse:separate; border-spacing:0}
caption,legend{display:none}
caption,th,
td{text-align:left; font-weight:normal}
figure,article,header,footer,nav,hgroup,video,audio,aside,
main{display:block}
a{color:#505050; text-decoration:none}

/* reset mobile default style */
html{height:100%; -ms-text-size-adjust:none; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none}
body,textarea:focus,input:focus,a:focus{-webkit-tap-highlight-color:rgba(135, 135, 135, .08)}
body{height:100%; background-color:#d8e5f6; -webkit-touch-callout:none; overflow-y:overlay}

/* selection */
::-moz-selection{background:rgba(56, 84, 224, .8); color:#fff}
::selection{background:rgba(56, 84, 224, .8); color:#fff}
::-moz-selection{background:rgba(56, 84, 224, .8); color:#fff}


/* **************************************** *
* input
* **************************************** */
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=number],
input[type=search],
textarea{font-family:'ptd', 'sans-serif'; -webkit-appearance:none; box-sizing:border-box}
input[type=submit],
input[type=button],
button{font-family:'ptd', 'sans-serif'; border-radius:0; -webkit-appearance:none}
input[type=radio]{border-radius:100%}

input::-ms-clear{display:none; width:0; height:0}
input::-ms-reveal{display:none; width:0; height:0}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{display:none}


/* **************************************** *
* placeholder
* **************************************** */
::-webkit-input-placeholder{font-family:'ptd', 'sans-serif'; font-size:14px; color:#a4a4a4}
::-moz-placeholder{font-family:'ptd', 'sans-serif'; font-size:14px; color:#a4a4a4}
:-ms-input-placeholder{font-family:'ptd', 'sans-serif'; font-size:14px; color:#a4a4a4}
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{color:transparent}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder{color:transparent}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder{color:transparent}


/* **************************************** *
 * skip
 * **************************************** */
#skip{position:relative; z-index:9999}
#skip a
{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:-45px;
    left:50%;
    width:200px;
    height:45px;
    margin-left:-100px;
    background-color:#3382e9;
    color:#fff;
    font-size:15px;
    font-weight:normal;
    letter-spacing:-0.5px;
    text-align:center;
    border-radius:0 0 8px 8px;
    box-sizing:border-box;
}
#skip a:hover,
#skip a:focus,
#skip a:active{top:0; text-decoration:none}


/* **************************************** *
 * color
 * **************************************** */
 .color-blue{color:#3382e9 !important}
 .color-red{color:#E24840 !important}
 .color-gray{color:#808080 !important}
 .color-black{color:#202020 !important}


/* **************************************** *
 * background color
 * **************************************** */
 .bg-white{background-color:#fff !important}


 /* **************************************** *
 * default
 * **************************************** */
.fl{float:left !important}
.fr{float:right !important}
.inblk{display:inline-block !important}
.vgt{vertical-align:top !important}
.vgm{vertical-align:middle !important}
.ovh{overflow:hidden !important}
.ova{overflow:auto !important}
.ovv{overflow:visible !important}
.blind,legend{display:block !important; position:absolute !important; top:-100000em !important; left:0 !important; overflow:hidden}
:root legend{margin-top:-1px !important; font-size:0 !important; line-height:0 !important}
.ellip{display:block !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; -o-text-overflow:ellipsis !important}


/* **************************************** *
 * align
 * **************************************** */
 .tleft{text-align:left !important}
 .tcenter{text-align:center !important}
 .tright{text-align:right !important}
 .tjust{text-align:justify !important}


 /* **************************************** *
 * width
 * **************************************** */
/* width px */
.wid10{width:10px !important}
.wid20{width:20px !important}
.wid30{width:30px !important}
.wid40{width:40px !important}
.wid50{width:50px !important}
.wid60{width:60px !important}
.wid70{width:70px !important}
.wid80{width:80px !important}
.wid90{width:90px !important}
.wid100{width:100px !important}
.wid110{width:110px !important}
.wid120{width:120px !important}
.wid130{width:130px !important}
.wid135{width:135px !important}
.wid140{width:140px !important}
.wid150{width:150px !important}
.wid157{width:157px !important}
.wid160{width:160px !important}
.wid170{width:170px !important}
.wid180{width:180px !important}
.wid190{width:190px !important}
.wid200{width:200px !important}
.wid210{width:210px !important}
.wid222{width:222px !important}
.wid220{width:220px !important}
.wid230{width:230px !important}
.wid240{width:240px !important}
.wid250{width:250px !important}
.wid260{width:260px !important}
.wid265{width:265px !important}
.wid270{width:270px !important}
.wid280{width:280px !important}
.wid290{width:290px !important}
.wid300{width:300px !important}
.wid310{width:300px !important}
.wid320{width:320px !important}
.wid330{width:330px !important}
.wid340{width:340px !important}
.wid350{width:350px !important}
.wid360{width:360px !important}
.wid370{width:370px !important}
.wid375{width:375px !important}
.wid376{width:376px !important}
.wid380{width:380px !important}
.wid390{width:390px !important}
.wid400{width:400px !important}
.wid500{width:500px !important}
.wid550{width:550px !important}
.wid600{width:600px !important}
.wid700{width:700px !important}
.wid800{width:800px !important}
.wid900{width:900px !important}
.wid1000{width:1000px !important}
.wid1100{width:1100px !important}
.wid1200{width:1200px !important}
.wid1300{width:1300px !important}
.wid1400{width:1400px !important}
.wid1500{width:1500px !important}
.wid1600{width:1600px !important}
.wid1700{width:1700px !important}
.wid1800{width:1800px !important}
.wid1900{width:1900px !important}
.wid2000{width:2000px !important}

/* min width px */
.mwid10{min-width:10px !important}
.mwid20{min-width:20px !important}
.mwid30{min-width:30px !important}
.mwid40{min-width:40px !important}
.mwid50{min-width:50px !important}
.mwid60{min-width:60px !important}
.mwid70{min-width:70px !important}
.mwid80{min-width:80px !important}
.mwid90{min-width:90px !important}
.mwid100{min-width:100px !important}
.mwid110{min-width:110px !important}
.mwid120{min-width:120px !important}
.mwid130{min-width:130px !important}
.mwid140{min-width:140px !important}
.mwid150{min-width:150px !important}
.mwid160{min-width:160px !important}
.mwid170{min-width:170px !important}
.mwid180{min-width:180px !important}
.mwid190{min-width:190px !important}
.mwid200{min-width:200px !important}
.mwid210{min-width:210px !important}
.mwid220{min-width:220px !important}
.mwid230{min-width:230px !important}
.mwid240{min-width:240px !important}
.mwid250{min-width:250px !important}
.mwid260{min-width:260px !important}
.mwid270{min-width:270px !important}
.mwid280{min-width:280px !important}
.mwid290{min-width:290px !important}
.mwid300{min-width:300px !important}
.mwid380{min-width:380px !important}

/* max width px */
.mxwid10{max-width:10px !important}
.mxwid20{max-width:20px !important}
.mxwid30{max-width:30px !important}
.mxwid40{max-width:40px !important}
.mxwid50{max-width:50px !important}
.mxwid60{max-width:60px !important}
.mxwid70{max-width:70px !important}
.mxwid80{max-width:80px !important}
.mxwid90{max-width:90px !important}
.mxwid100{max-width:100px !important}
.mxwid110{max-width:110px !important}
.mxwid120{max-width:120px !important}
.mxwid130{max-width:130px !important}
.mxwid140{max-width:140px !important}
.mxwid150{max-width:150px !important}
.mxwid160{max-width:160px !important}
.mxwid170{max-width:170px !important}
.mxwid180{max-width:180px !important}
.mxwid190{max-width:190px !important}
.mxwid200{max-width:200px !important}
.mxwid210{max-width:210px !important}
.mxwid220{max-width:220px !important}
.mxwid230{max-width:230px !important}
.mxwid240{max-width:240px !important}
.mxwid250{max-width:250px !important}
.mxwid260{max-width:260px !important}
.mxwid270{max-width:270px !important}
.mxwid280{max-width:280px !important}
.mxwid290{max-width:290px !important}
.mxwid300{max-width:300px !important}
.mxwid800{max-width:800px !important}

/* width % */
.wid10p{width:10% !important}
.wid15p{width:15% !important}
.wid20p{width:20% !important}
.wid25p{width:25% !important}
.wid30p{width:30% !important}
.wid35p{width:35% !important}
.wid40p{width:40% !important}
.wid45p{width:45% !important}
.wid50p{width:50% !important}
.wid55p{width:55% !important}
.wid60p{width:60% !important}
.wid65p{width:65% !important}
.wid70p{width:70% !important}
.wid75p{width:75% !important}
.wid80p{width:80% !important}
.wid85p{width:85% !important}
.wid90p{width:90% !important}
.wid95p{width:95% !important}
.wid100p{width:100% !important}

/* min width % */
.mwid10p{min-width:10% !important}
.mwid15p{min-width:15% !important}
.mwid20p{min-width:20% !important}
.mwid25p{min-width:25% !important}
.mwid30p{min-width:30% !important}
.mwid35p{min-width:35% !important}
.mwid40p{min-width:40% !important}
.mwid45p{min-width:45% !important}
.mwid50p{min-width:50% !important}
.mwid55p{min-width:55% !important}
.mwid60p{min-width:60% !important}
.mwid65p{min-width:65% !important}
.mwid70p{min-width:70% !important}
.mwid75p{min-width:75% !important}
.mwid80p{min-width:80% !important}
.mwid85p{min-width:85% !important}
.mwid90p{min-width:90% !important}
.mwid95p{min-width:95% !important}
.mwid100p{min-width:100% !important}


/* **************************************** *
 * margin
 * **************************************** */
/* margin px */
.mg05{margin:5px !important}
.mg10{margin:10px !important}
.mg15{margin:15px !important}
.mg20{margin:20px !important}
.mg25{margin:25px !important}
.mg30{margin:30px !important}
.mg35{margin:35px !important}
.mg40{margin:40px !important}
.mg45{margin:45px !important}
.mg50{margin:50px !important}
.mg55{margin:55px !important}
.mg60{margin:60px !important}
.mg65{margin:65px !important}
.mg70{margin:70px !important}
.mg75{margin:75px !important}
.mg80{margin:80px !important}
.mg85{margin:85px !important}
.mg90{margin:90px !important}
.mg95{margin:95px !important}
.mg100{margin:100px !important}

.mgt00{margin-top:0px !important}
.mgt05{margin-top:5px !important}
.mgt10{margin-top:10px !important}
.mgt15{margin-top:15px !important}
.mgt20{margin-top:20px !important}
.mgt25{margin-top:25px !important}
.mgt30{margin-top:30px !important}
.mgt35{margin-top:35px !important}
.mgt40{margin-top:40px !important}
.mgt45{margin-top:45px !important}
.mgt50{margin-top:50px !important}
.mgt55{margin-top:55px !important}
.mgt60{margin-top:60px !important}
.mgt65{margin-top:65px !important}
.mgt70{margin-top:70px !important}
.mgt75{margin-top:75px !important}
.mgt80{margin-top:80px !important}
.mgt85{margin-top:85px !important}
.mgt90{margin-top:90px !important}
.mgt95{margin-top:95px !important}
.mgt100 {margin-top:100px !important}

.mgr05{margin-right:5px !important}
.mgr10{margin-right:10px !important}
.mgr15{margin-right:15px !important}
.mgr20{margin-right:20px !important}
.mgr25{margin-right:25px !important}
.mgr30{margin-right:30px !important}
.mgr35{margin-right:35px !important}
.mgr40{margin-right:40px !important}
.mgr45{margin-right:45px !important}
.mgr50{margin-right:50px !important}
.mgr55{margin-right:55px !important}
.mgr60{margin-right:60px !important}
.mgr65{margin-right:65px !important}
.mgr70{margin-right:70px !important}
.mgr75{margin-right:75px !important}
.mgr80{margin-right:80px !important}
.mgr85{margin-right:85px !important}
.mgr90{margin-right:90px !important}
.mgr95{margin-right:95px !important}
.mgr100{margin-right:100px !important}

.mgb05{margin-bottom:5px !important}
.mgb10{margin-bottom:10px !important}
.mgb15{margin-bottom:15px !important}
.mgb20{margin-bottom:20px !important}
.mgb25{margin-bottom:25px !important}
.mgb30{margin-bottom:30px !important}
.mgb35{margin-bottom:35px !important}
.mgb40{margin-bottom:40px !important}
.mgb45{margin-bottom:45px !important}
.mgb50{margin-bottom:50px !important}
.mgb55{margin-bottom:55px !important}
.mgb60{margin-bottom:60px !important}
.mgb65{margin-bottom:65px !important}
.mgb70{margin-bottom:70px !important}
.mgb75{margin-bottom:75px !important}
.mgb80{margin-bottom:80px !important}
.mgb85{margin-bottom:85px !important}
.mgb90{margin-bottom:90px !important}
.mgb95{margin-bottom:95px !important}
.mgb100{margin-bottom:100px !important}

.mgl05{margin-left:5px !important}
.mgl10{margin-left:10px !important}
.mgl15{margin-left:15px !important}
.mgl20{margin-left:20px !important}
.mgl25{margin-left:25px !important}
.mgl30{margin-left:30px !important}
.mgl35{margin-left:35px !important}
.mgl40{margin-left:40px !important}
.mgl45{margin-left:45px !important}
.mgl50{margin-left:50px !important}
.mgl55{margin-left:55px !important}
.mgl60{margin-left:60px !important}
.mgl65{margin-left:65px !important}
.mgl70{margin-left:70px !important}
.mgl75{margin-left:75px !important}
.mgl80{margin-left:80px !important}
.mgl85{margin-left:85px !important}
.mgl90{margin-left:90px !important}
.mgl95{margin-left:95px !important}
.mgl100{margin-left:100px !important}


/* **************************************** *
 * dash
 * **************************************** */
 .dash-uni,
 .dash-txt,
 .dash-tit{display:inline-block; line-height:150%; font-size:15px; letter-spacing:-0.5px; vertical-align:middle}
 .dash-uni{color:#808080; font-weight:normal}
 .dash-txt{color:#505050; font-weight:normal}
 .dash-tit{color:#202020; font-weight:300}


/* **************************************** *
* list
* **************************************** */
/* info-list */
.info-list{position:relative}
.info-list:after{content:''; display:block; clear:both}
.info-list > li{position:relative; margin-bottom:2px; line-height:1.65em; color:#505050; letter-spacing:-0.5px; font-size:18px; word-break:keep-all}
.info-list.fs14 > li{font-size:14px; line-height:1.5em}
.info-list > li:last-child{margin-bottom:0}
.info-list > li > ul{margin-top:2px}
.info-list.bul > li{padding-left:10px}
.info-list.bul > li:before{content:''; position:absolute; left:0; top:14px; width:3px; height:3px; background:#808080}
.info-list.uni > li{padding-left:16px}
.info-list.uni > li > span.uni{position:absolute; left:0; top:0}


/* **************************************** *
* box
* **************************************** */
/* info-box */
.info-box{position:relative; padding:20px 28px; border:1px solid #ebebeb; border-radius:8px 8px 22px 8px}
.info-box.mini{padding:15px 18px; border:1px solid #ebebeb; border-radius:8px}
.info-box.icon{padding-left:50px}
.info-box.icon > [class^="ri-"]{position:absolute; left:18px; font-size:21px; color:#808080}

.info-box.info{background-color:#e1ecfa; border:0}
.info-box.warning{background-color:#faeee7; border:0}
.info-box.danger{background-color:#fdecf0; border:0}

.info-box.info.icon > [class^="ri-"]{color:#3382e9}
.info-box.warning.icon > [class^="ri-"]{color:#867062}
.info-box.danger.icon > [class^="ri-"]{color:#f26183}

.section-box{position:relative; padding:20px 18px; border:1px solid #ebebeb; border-radius:8px}


/* **************************************** *
 * text
 * **************************************** */
/* info-txt */
.info-txt{position:relative; line-height:1.65em; font-size:16px; font-weight:normal; color:#505050; letter-spacing:-0.5px}
.info-txt.fs14{line-height:1.5em; font-size:14px}
.info-txt.bul{padding-left:10px}
.info-txt.bul:before{content:''; position:absolute; left:0; top:10px; width:3px; height:3px; background:#808080}
.info-txt.uni{padding-left:16px}
.info-txt.uni > .uni{position:absolute; top:0; left:0}
.info-txt i{position:relative; top:-1px; font-size:18px !important; vertical-align:middle}

/* info ckpoint */
.info-ckpoint{position:relative; margin-bottom:30px; padding:18px; padding-left:58px; border-radius:8px; background-color:#fdecf0}
.info-ckpoint:before{content:'\ef46'; position:absolute; left:18px; top:13px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; font-family:"remixicon"; font-size:26px; color:#ce225f; box-sizing:border-box}
.info-ckpoint .ckpoint-s{margin-top:15px}
.info-ckpoint .ckpoint-l .message,
.info-ckpoint .ckpoint-s .message{line-height:1.5em; font-weight:normal; letter-spacing:-0.5px; word-break:keep-all}
.info-ckpoint .ckpoint-l .message{color:#ce225f; font-size:20px; font-weight:300}
.info-ckpoint .ckpoint-s .message{font-weight:normal; color:#808080; font-size:16px}

.info-box .info-ckpoint{margin-bottom:0}
.info-box .info-ckpoint:before{background-color:#fff}
.info-box .info-ckpoint .ckpoint-s{margin-top:5px}
.info-box .info-ckpoint .ckpoint-s .message{color:#505050; font-size:15px; letter-spacing:-1.2px}


 /* **************************************** *
 * tab
 * **************************************** */
 /* tab-cont */
 .tab-cont{display:none}
 .tab-cont.active{display:block}

 /* tab-large */
.tab-large{position:relative; margin-bottom:30px; border-radius:10px 10px 22px 10px; overflow:hidden}
.tab-large > ul{display:flex; align-items:center; background-color:#F2F3F7}
.tab-large > ul > li{display:flex; flex:1; position:relative}
.tab-large > ul > li:before{content:''; position:absolute; right:-1px; top:10px; bottom:10px; width:1px; background-color:#c8cace}
.tab-large > ul > li:last-child:before{display:none}
.tab-large > ul > li a{display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; width:100%; height:70px; padding:0 8px; border-radius:0 0 22px 10px; gap:3px; box-sizing:border-box}
.tab-large > ul > li a > span{color:#505050; font-family:tjs; font-size:20px; font-weight:300; letter-spacing:-1px; text-align:center}
.tab-large > ul > li:hover a > span{color:#202020}
.tab-large > ul > li.active:before{display:none}
.tab-large > ul > li.active a{background:#153e76; z-index:1}
.tab-large > ul > li.active a > span{color:#fff}
.tab-large > ul > li a > .stxt{color:#808080; font-family:ptd; font-size:14px; letter-spacing:-0.5px}

 /* tab-small */
.tab-small{position:relative; margin-bottom:30px}
.tab-small:before{content:''; position:absolute; left:3px; right:3px; top:50%; height:1px; margin-top:-0.5px; background:#dadada}
.tab-small > ul{display:flex; margin-left:-10px; position:relative}
.tab-small > ul:after{content:''; display:block; clear:both}
.tab-small > ul > li{display:flex}
.tab-small > ul > li a{display:flex; align-items:center; justify-content:center; width:100%; height:52px; margin-left:10px; padding:0 30px; background:#fff; border:1px solid #dadada; border-radius:200px; box-sizing:border-box; z-index:1}
.tab-small > ul > li a > span{color:#202020; font-size:18px; font-weight:normal; letter-spacing:-0.8px}
.tab-small > ul > li.active a{background:#4761a1; border:1px solid #4761a1}
.tab-small > ul > li.active a > span{color:#fff}


/* **************************************** *
 * title
 * **************************************** */
 .stitarea{display:flex; position:relative; align-items:center; margin-bottom:15px}
 .stitarea:after{content:''; display:block; clear:both}
 .stitarea .stit-l,
 .stitarea .stit-c,
 .stitarea .stit-r{display:flex; align-items:center}
 
 .stitarea .stit-c{margin-left:auto}
 .stitarea .stit-r{margin-left:auto}
 
 .stitarea .view-num{width:120px; margin-left:2px}
 
 .stitarea .helpGuide{display:flex; align-items:center}
 .stitarea .helpGuide .guideButton{margin-right:10px}
 
 .stitarea .total-num{display:flex; align-items:center}
 .stitarea .total-num span{line-height:1em; font-size:15px; color:#808080; letter-spacing:-0.5px}
 .stitarea .total-num span.num{color:#3382e9}
 .stitarea .total-num span:first-child{flex:none}
 .stitarea .total-num > .num{margin:0 4px}
 
 .stitarea .counter{margin-left:3px; padding-top:2px; font-size:15px; font-weight:300; color:#808080; vertical-align:middle}
 
 .stitarea .txtinput-cmm input,
 .stitarea .select-cmm select{height:32px}
 .stitarea .txtinput-cmm.dateinput .ui-datepicker-trigger{top:1px}
 
 .stitarea .more{display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin:0; padding:0; background-color:#e6eef8; border-radius:50%}
 .stitarea .more:before{content:'\ea6e'; padding-left:2px; color:#3382e9; font-family:remixicon; font-size:24px}
 
 h2.stit02{display:inline-block; position:relative; margin:0; padding:0; color:#202020; font-family:tjs; letter-spacing:-0.8px; line-height:1.45em; vertical-align:middle; word-break:keep-all}
 h3.stit03,
 h4.stit04,
 h5.stit05{display:inline-block; position:relative; margin:0; padding:0; color:#202020; letter-spacing:-0.5px; line-height:1.45em; vertical-align:middle; word-break:keep-all}
 h2.stit02{font-size:32px; font-weight:300}
 h3.stit03{font-size:20px; font-weight:300}
 h4.stit04{font-size:18px; font-weight:300}
 h5.stit05{font-size:16px; font-weight:normal}
 h3.stit03 span,
 h3.stit04 span
 h3.stit05 span{font-family:tjs}
 h3.stit03 span{font-size:20px}
 h4.stit04 span{font-size:18px}
 h5.stit05 span{font-size:16px}
 h3.stit03 > i.badge{font-size:12px; margin-left:8px}
 
 h2.stit02 + .total-num,
 h3.stit03 + .total-num,
 h4.stit04 + .total-num{margin-left:10px; padding-top:3px}


 /* **************************************** *
 * button
 * **************************************** */
.button-area{display:flex; align-items:center; width:100%; margin-bottom:5px}
.button-area:after{content:''; display:block; clear:both}
.button-area{margin:0 -1px}
.button-area .button-l,
.button-area .button-c,
.button-area .button-r{display:flex; align-items:center}
.button-area .button-c{margin:0 auto}
.button-area .button-r{margin-left:auto}
.button-area .button-l .button,
.button-area .button-c .button,
.button-area .button-r .button{margin:0 1px}

/* button base */
.button{
  display:inline-block;
  flex:none;
  height:40px;
  padding:12px 15px 12px;
  line-height: 1em;
  background:#f8f8f8;
  border:1px solid #c5c6ca;
  font-weight:300;
  font-size:15px;
  letter-spacing:-0.8px;
  color:#505050;
  text-align:center;
  border-radius:4px;
  vertical-align:middle;
  cursor:pointer;
  box-sizing:border-box;
  transition: all 0.3s
}
.button:active,
.button:hover,
.button:focus{padding:12px 15px 12px; background:#fff; border:1px solid #c5c6ca; color:#202020}

.button [class^="ri-"],
.button [class*=" ri-"]{display:inline-block; position:relative; top:-1px; font-size:18px; vertical-align:middle}

.button.disabled{opacity:.3; cursor:no-drop}

/* button info */
.button.info{background:#4761a1; border:1px solid #4761a1; color:rgb(255, 255, 255, 1)}
.button.info:active,
.button.info:hover,
.button.info:focus,
.button.info.af-hover,
.button.info.Checked{background:#4761a1; border:1px solid #4761a1; color:rgb(255, 255, 255, 1)}
.button.info.Disabled{background:#4761a1; border:1px solid #4761a1; color:rgb(255, 255, 255, .7)}
 
/* button primary */
.button.primary{background:#153e76; border:1px solid #153e76; color:rgb(255, 255, 255, 1)}
.button.primary:active,
.button.primary:hover,
.button.primary:focus,
.button.primary.af-hover,
.button.primary.Checked{background:#153e76; border:1px solid #153e76; color:rgb(255, 255, 255, 1)}
.button.primary.Disabled{background:#153e76; border:1px solid #153e76; color:rgb(255, 255, 255, .7)}


/* **************************************** *
* search-box
* **************************************** */
.search-box
{
    display:flex;
    align-items:center;
    position:relative;
    background:#f2f5f9;
    border:1px solid #d2d6dd;
    margin-bottom:35px;
    padding:15px 15px;
    border-radius:8px;
    box-sizing:border-box
}
.search-box.mini{padding:8px; border-radius:4px}
.search-box .search-form{flex:1}

.search-box .form-tit{display:flex; align-items:center; flex:none; padding:0 10px; box-sizing:border-box}
.search-box .form-tit .tit{display:inline-block; font-size:16px; font-weight:300; letter-spacing:-0.8px; color:#202020}
.search-box .form-cont{display:flex; align-items:center; flex:auto; gap:0 4px}
.search-box .search-controll{display:flex; position:relative; align-items:center; margin-top:6px; padding:0 6px}
.search-box .search-controll .controll-r{display:flex; align-items:center; margin-left:auto; gap:0 4px}

.search-box .form-list{display:flex; display:flex; align-items:center; flex-wrap:wrap}
.search-box .form-list > li{flex:1; display:flex; align-items:center; position:relative; padding:6px; box-sizing:border-box}
.search-box .form-list > li.fit{flex:none}
.search-box .form-list > li > .search-controll{margin-top:0; width:100%}

.search-box .gps-location{ cursor:pointer}
.search-box .gps-location i{position:relative; top:-1px; font-size:18px !important; vertical-align:middle}
.search-box .gps-location span{line-height:1.65em; font-size:16px; font-weight:normal; color:#505050; letter-spacing:-0.5px}

/* **************************************** *
* form
* **************************************** */
/* txtinput-cmm */
.txtinput-cmm{display:inline-block; position:relative; vertical-align:middle; box-sizing:border-box}
.txtinput-cmm input{
    position:relative; width:100%; height:40px; margin:0; padding:0 8px;
    text-align:left; border:1px solid #C5C6CA; font-size:15px; font-weight:300; letter-spacing:-0.5px; color:#202020; background:#fff; border-radius:4px; box-sizing:border-box
}
.txtinput-cmm input[disabled]{background:#eeeeee; color:#b4b4b4}
.txtinput-cmm input[readonly]{background:#f5f5f5}
.txtinput-cmm.search input{padding-right:30px}
.txtinput-cmm.search .btn-search{display:block; font-size:16px; position:absolute; right:0; top:0; width:30px; height:36px; margin:0; padding:0; line-height:38px; text-align:center; color:#808080; border:0; font-size:18px; border-left:1px solid #eaeaea; background:#fff; border-radius:0; cursor:pointer}
.txtinput-cmm.delete input{padding-right:30px}
.txtinput-cmm.delete .btn-delete{display:block; font-size:16px; position:absolute; right:0; top:0; width:30px; height:36px; margin:0; padding:0; line-height:38px; text-align:center; color:#808080; border:0; font-size:18px; border-left:1px solid #eaeaea; background:#fff; border-radius:0; cursor:pointer}

/* select-cmm */
.select-cmm{display:inline-block; position:relative; vertical-align:middle; box-sizing:border-box}
.select-cmm select
{
    position:relative;
    width:100%;
    height:40px;
    margin:0;
    padding-left:8px;
    padding-right:30px;
    color:#303030;
    font-size:15px;
    border:1px solid #c5c6ca;
    letter-spacing:-0.5px;
    font-family:'ptd', 'sans-serif';
    font-weight:300;
    background:#fff url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/select.png") right 50% no-repeat;
    background-size:30px 36px; 
    appearance:none;
    cursor:pointer;
    border-radius:4px;
    box-sizing:border-box;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.select-cmm select[disabled]{background:#eeeeee url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/select.png") right 50% no-repeat; background-size:30px 36px; color:#b4b4b4}
.select-cmm select[readonly]{background:#f5f5f5 url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/select.png") right 50% no-repeat; background-size:30px 36px}
.select-cmm option{line-height:24px; font-size:15px}
.select-cmm select::-ms-expand{display:none}



/* **************************************** *
* portal-layout
* **************************************** */
.portal-layout{display:flex; flex-direction:column; position:relative; min-width:1300px; overflow:hidden; box-sizing:border-box}

#portal-header{position:absolute; width:100%; height:130px; background-color:#fff; z-index:9; box-sizing:border-box}
#portal-header .header-top{display:flex; align-items:center; position:relative; width:1300px; height:130px; margin:0 auto}
#portal-header .header-top .emp-logo{position:relative; height:43px; z-index:9}
#portal-header .header-top .emp-logo a{display:block; width:226px; height:43px; background:url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/logo.png") no-repeat 50% 50%}
#portal-header .header-top .emp-message{margin-left:auto; padding:18px 24px; background-color:#ce225f; border-radius:12px; box-sizing:border-box}
#portal-header .header-top .emp-message p{line-height:1.4em; color:#fff; font-size:16px; font-weight:normal; text-align:right; letter-spacing:-0.2px}

#portal-container{flex:1; height:100%; padding-top:130px; box-sizing:border-box}
#portal-scontainer{flex:1; height:100%; padding-top:130px; box-sizing:border-box}
#portal-scontainer .page-content{width:1300px; margin:0 auto; padding-bottom:50px; border-bottom:1px solid #dadada}

#portal-footer{position:relative; padding:50px 0 70px}
#portal-footer .footer-inner{display:flex; flex-direction:column; align-items:center; box-sizing:border-box}
#portal-footer .footer-logo{width:130px; height:37px; background:url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/footer_logo.png") no-repeat 50% 50%; background-size:130px 37px}
#portal-footer .footer-info .info-copyright{display:flex; flex-direction:column; align-items:center; margin-top:20px; gap:8px}
#portal-footer .footer-info .info-copyright p{line-height:1.2em; color:#505050; font-size:15px; font-weight:normal; text-align:center; letter-spacing:-0.2px}


/* **************************************** *
* gate-layout
* **************************************** */
.gate-layout{display:flex; flex-direction:column; min-width:800px; height:100%; overflow:hidden; box-sizing:border-box}
.gate-layout .portal-gate{flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:60px}
.gate-layout .portal-gate .gate-inner{width:800px}

.gate-layout #portal-header{position:relative; height:auto; background:none}
.gate-layout #portal-header .header-top{flex-direction:column; width:100%; height:auto}
.gate-layout #portal-header .header-top .emp-logo{margin-bottom:25px}
.gate-layout #portal-header .header-top .emp-message{width:100%; margin-left:0}
.gate-layout #portal-header .header-top .emp-message p{text-align:center}

.gate-layout #portal-container{padding-top:0; height:auto}


/* **************************************** *
 * board-list
 * **************************************** */ 
 /* board-basic-list */
 .board-basic-list .head{position:relative; border-top:3px solid #153e76; border-bottom:1px solid #dadada; background-color:#fff}
 .board-basic-list .head li{display:flex}
 .board-basic-list .head li > div{display:flex; align-items:center; justify-content:center; position:relative; height:60px; padding:0 10px; box-sizing:border-box}
 .board-basic-list .head li > div:after{content:''; position:absolute; right:0; top:0; width:1px; height:100%; background-color:#dadada; z-index:1}
 .board-basic-list .head li > div:last-child:after{display:none}
 .board-basic-list .head li > div > span{padding-right:1px; line-height:1em; letter-spacing:-0.8px; text-align:center; color:#505050; font-weight:300; font-size:16px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
 
 .board-basic-list .body > li{display:flex; position:relative; border-bottom:1px solid #ebebeb; box-sizing:border-box}
 .board-basic-list .body > li > div{display:flex; align-items:center; justify-content:center; position:relative; min-height:80px; padding:12px 10px; text-align:center; box-sizing:border-box}
 .board-basic-list .body > li > div.tleft{justify-content:flex-start}
 .board-basic-list .body > li > div.center{justify-content:center}
 .board-basic-list .body > li > div.tright{justify-content:flex-end}
 
 .board-basic-list .body > li .col-tit
 {
     display:none;
     flex:none;
     margin-right:8px;
     padding:6px 12px;
     font-size:16px;
     font-weight:normal;
     line-height:145%;
     letter-spacing:-1px;
     color:#808080;
     background:#fff;
     border:1px solid #ebebeb;
     border-radius:200px;
     box-sizing:border-box
 }
 .board-basic-list .body > li .col-cont{display:contents}
 .board-basic-list .body > li .col-cont .cont-link,
 .board-basic-list .body > li .col-cont .cont-txt
 {
     display:-webkit-box;
     line-height:1.4em;
     letter-spacing:-0.2px;
     font-size:16px;
     word-wrap:break-word;
     text-overflow:ellipsis;
     word-break:keep-all;
     overflow:hidden;
     -webkit-line-clamp:3;
     -webkit-box-orient:vertical;
 }
 .board-basic-list .body > li .col-cont .cont-link i,
 .board-basic-list .body > li .col-cont .cont-txt i{font-size:20px; vertical-align:middle}

 .board-basic-list .body > li .col-cont .cont-link{padding-right:5px; color:#445c78; font-weight:300; transition:all .20s ease}
 .board-basic-list .body > li .col-cont .cont-link:hover{color:#3382e9}
 
 .board-basic-list .body > li .col-cont .cont-txt{color:#505050; font-weight:normal}
 .board-basic-list .body > li .col-cont .cont-date-small{margin-top:5px; line-height:1.2em; letter-spacing:-0.2px; font-size:13px; color:#808080; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
 
 .board-basic-list .body > li .col-cont .cont-column{display:flex; flex-direction:column; align-items:center; justify-content:center}
 .board-basic-list .body > li .col-cont .cont-column .button{width:fit-content}
 .board-basic-list .body > li > div.tleft .col-cont .cont-column{align-items:flex-start}
  
 .board-basic-list .body > li.selected{background-color:#f2f5f9 !important}
 .board-basic-list .body > li.notice{background-color:#f2f5f9 !important}
 
 .board-basic-list.scroll .body{overflow-x:hidden; overflow-y:auto}

 /* board-list-nodata */
.board-list-nodata{display:flex; align-items:center; justify-content:center; min-height:100px; border-bottom:1px solid #ebebeb}
.board-list-nodata .message{display:flex; align-items:center}
.board-list-nodata .message:before{content:'\eb4d'; margin-right:5px; color:#808080; font-family:remixicon; font-size:22px}
.board-list-nodata .message span{line-height:135%; color:#808080; font-size:16px; font-weight:normal; letter-spacing:-0.2px}
 
/* 재난문자 */
.board-basic-list.disaster-sms div.col1{width:10%}
.board-basic-list.disaster-sms div.col2{width:70%}
.board-basic-list.disaster-sms div.col3{width:20%}

/* 안전뉴스 */
.board-basic-list.safety-news div.col1{width:10%}
.board-basic-list.safety-news div.col2{width:60%}
.board-basic-list.safety-news div.col3{width:15%}
.board-basic-list.safety-news div.col4{width:15%}

/* 대피장소 */
.board-basic-list.safety-place div.col1{width:15%}
.board-basic-list.safety-place div.col2{width:25%}
.board-basic-list.safety-place div.col3{width:35%}
.board-basic-list.safety-place div.col4{width:10%}
.board-basic-list.safety-place div.col5{width:15%}

/* index */
.board-basic-list.index div.col1{width:50%}
.board-basic-list.index div.col2{width:50%}

 


/* **************************************** *
 * board-view
 * **************************************** */
 .board-view .view-head{position:relative; padding:25px 0; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb}
 .board-view .view-head .tit-area{padding:0 20px}
 .board-view .view-head .tit-area > .tit{display:inline-block; line-height:1.4em; color:#202020; font-family:tjs; font-size:22px; font-weight:300; letter-spacing:-0.5px; vertical-align:middle; word-break:keep-all}
 .board-view .view-content{min-height:200px; padding:25px 20px; border-bottom:1px solid #dbdbdd}
 
 
 /* discovery */
 .discovery{display:flex; flex-direction:column; position:relative; gap:5px; margin-top:30px; padding:15px 0; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; overflow:hidden}
 .discovery .prev,
 .discovery .next{display:flex; align-items:center; position:relative; padding-right:80px; text-align:left; box-sizing:border-box}
 .discovery .prev .tit,
 .discovery .next .tit
 {
     display:flex;
     align-items:center;
     justify-content:center;
     flex:none;
     min-width:94px;
     height:44px;
     margin-right:12px;
     line-height:1.65em;
     color:#303030;
     font-size:15px;
     font-weight:300;
     letter-spacing:-0.8px;
     background:#f5f5f5;
     border-radius:6px;
     box-sizing:border-box
 }
 .discovery .prev > a,
 .discovery .next > a{line-height:1.2em; font-size:15px; letter-spacing:-0.5px; color:#505050; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
 .discovery .prev > a:hover,
 .discovery .next > a:hover{color:#3382e9}
 .discovery .nodata{line-height:1.2em; font-size:15px; letter-spacing:-0.5px; color:#808080}


/* **************************************** *
 *  paging
 * **************************************** */
/* paging-num */
.paging-num{display:flex; align-items:center; justify-content:center; margin-top:30px; gap:20px}
.paging-num .paging-ctrl{display:flex; align-items:center; gap:10px}
.paging-num .paging-move{display:flex; align-items:center; gap:5px}

.paging-num .ctrl{display:flex; align-items:center; justify-content:center; position:relative; width:50px; height:40px; background-color:#fff; border:1px solid #C5C6CA; border-radius:4px; box-sizing:border-box; cursor:pointer; transition:all .20s ease}
.paging-num .ctrl i{padding-top:1px; color:#808080; font-size:20px}
.paging-num .num-area{display:flex; align-items:center; position:relative; height:40px; box-sizing:border-box}
.paging-num .num-area .num{padding-top:2px; line-height:130%; color:#808080; font-size:15px; font-weight:normal; letter-spacing:1px}
.paging-num .num-area .num.current{color:#3382e9}

.paging-num .txtinput-cmm{width:44px}
.paging-num .txtinput-cmm input{text-align:center}




/* **************************************** *
* 재난 메인
* **************************************** */
.emergency-main{background-color:#d8e5f6}
.emergency-main .main-inner{display:flex; width:1300px; margin:0 auto; padding:40px 0 0; gap:30px; box-sizing:border-box}

.main-speaker,
.main-quick{display:flex; flex:1}
.main-speaker{min-width:68%; padding:20px; background-color:#fff; border-radius:16px; gap:20px; box-sizing:border-box}

/* 재난 정의 */
.main-speaker .speaker-notice{display:flex; flex-direction:column; flex:1}
.main-speaker .speaker-notice .notice-dic .dic-tit{display:flex; flex-direction:column; align-items:center; padding:20px; border-radius:12px}
.main-speaker .speaker-notice .notice-dic.eq .dic-tit{background-color:#897a70}
.main-speaker .speaker-notice .notice-dic.df .dic-tit{background-color:#338495}

.main-speaker .speaker-notice .notice-dic .dic-tit .stit{color:#fff; font-size:18px; font-weight:normal; letter-spacing:-0.5px}
.main-speaker .speaker-notice .notice-dic .dic-tit .tit{position:relative; margin-top:5px; color:#fff; font-family:tjs; font-size:42px; font-weight:normal; letter-spacing:-0.5px}
.main-speaker .speaker-notice .notice-dic .dic-tit .tit:after{content:''; position:absolute; bottom:-4px; left:0; width:100%; height:3px; background-color:#fff}
.main-speaker .speaker-notice .notice-dic .dic-tit .lan{margin-top:12px; color:rgba(255,255,255,.6); font-size:14px; font-weight:300}
.main-speaker .speaker-notice .notice-dic .dic-info{margin-top:15px; padding:0 10px; line-height:1.5em; color:#505050; text-align:justify; font-size:15px; letter-spacing:-0.5px}

/* 재난 발생현황 */
.main-speaker .notice-status{position:relative; margin-top:30px}
.main-speaker .notice-status .status-tit{display:flex; align-items:center}
.main-speaker .notice-status .status-tit .tit{line-height:1.3em; color:#202020; font-family:tjs; font-size:18px; font-weight:normal; letter-spacing:-0.8px}
.main-speaker .notice-status .status-more{display:flex; align-items:center; position:absolute; right:0; top:3px; box-sizing:border-box}
.main-speaker .notice-status .status-more:after{display:none; content:'\ea6e'; margin-left:-2px; color:#3382e9; font-family:remixicon; font-size:22px}
.main-speaker .notice-status .status-more span{color:#505050; font-size:15px; font-weight:normal; letter-spacing:-1.2px}
.main-speaker .notice-status .status-cont{display:flex; flex-direction:column; margin-top:10px; padding:18px 20px; background-color:#4761a1; gap:6px; border-radius:12px}
.main-speaker .notice-status .status-box{display:flex; align-items:center}
.main-speaker .notice-status .status-box .status-num .num{line-height:1.4em; color:#FFEB3B; font-size:34px; font-weight:300; letter-spacing:-1px}
.main-speaker .notice-status .status-box .status-info{display:flex; flex-direction:column; margin-left:20px}
.main-speaker .notice-status .status-box .status-info span{line-height:1.2em; color:#fff; font-size:15px; font-weight:normal; letter-spacing:-0.2px}

/* 재난 행동요령 */
.main-speaker .speaker-guide{flex:1}
.main-speaker .speaker-guide .guide-img{display:block; font-size:0}
.main-speaker .speaker-guide .guide-img img{width:100%; border-radius:12px}
.main-speaker .speaker-guide .guide-app{display:flex; align-items:center; margin-top:-15px; padding:0 18px; gap:4px}
.main-speaker .speaker-guide .guide-app .app-ico{font-size:0}
.main-speaker .speaker-guide .guide-app .app-ico img{width:44px; border-radius:8px; box-shadow:2px 4px 12px 0 rgb(118 145 148 / 20%); box-sizing:border-box}
.main-speaker .speaker-guide .guide-app .app-ico.border img{border:1px solid #ebebeb}

/* 퀵링크 */
.main-quick .quick-wrap{display:flex; flex-wrap:wrap; flex:1; margin-left:-10px; margin-top:-10px}
.main-quick .quick-align{display:flex; width:50%; height:50%}
.main-quick .quick-align.fit-align{width:100%}
.main-quick .quick-box{display:flex; flex:1; position:relative; margin-left:10px; margin-top:10px}
.main-quick .quick-box > a{display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background-color:#fff; border-radius:16px; transition:all .30s ease; box-sizing:border-box}
.main-quick .quick-box > a > span{line-height:1.2em; color:#202020; font-family:tjs; font-size:18px; font-weight:normal; letter-spacing:-0.8px}
.main-quick .quick-box > a > i{display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:15px; background-color:#d8e5f6; border-radius:50%; box-sizing:border-box}
.main-quick .quick-box > a > i img{width:44%}
.main-quick .quick-box .map-app{display:flex; align-items:center; justify-content:center; position:absolute; left:0; bottom:20px; width:100%; gap:6px}
.main-quick .quick-box .map-app .app-ico{font-size:0}
.main-quick .quick-box .map-app .app-ico img{width:44px; border-radius:8px; box-shadow:2px 4px 12px 0 rgb(118 145 148 / 20%); box-sizing:border-box}
.main-quick .quick-box .map-app .app-ico.border img{border:1px solid #dadada}


/* **************************************** *
* 재난 게이트
* **************************************** */
.emergency-gate{display:flex; padding:40px 0; gap:20px}
.emergency-gate .gate-box{display:flex; flex:1; position:relative; min-height:320px; padding:60px 50px; background-color:#fff; border-radius:16px; box-sizing:border-box; transition: all .20s ease}
.emergency-gate .gate-box:after
{
  content:''; display:flex; align-items:center; justify-content:center;
  position:absolute; left:50px; bottom:60px; width:70px; height:50px;
  background-color:rgba(0,0,0,.04);
  background-image:url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/arrow_right_s_line.svg");
  background-repeat:no-repeat;
  background-position:50%;
  background-size:28px;
  border-radius:200px;
  transition: all .20s ease
}
.emergency-gate .gate-box .gate-tit{display:flex; flex-direction:column}
.emergency-gate .gate-box .gate-tit strong{line-height:1.3em; color:#202020; text-align:left; font-family:tjs; font-size:32px; font-weight:300; letter-spacing:-1.2px; transition: all .20s ease}

.emergency-gate.eq .gate-box:hover:nth-child(1){background-color:#153e76}
.emergency-gate.eq .gate-box:hover:nth-child(2){background-color:#897a70}

.emergency-gate.df .gate-box:hover:nth-child(1){background-color:#153e76}
.emergency-gate.df .gate-box:hover:nth-child(2){background-color:#338495}

.emergency-gate .gate-box:hover:nth-child(1):after,
.emergency-gate .gate-box:hover:nth-child(2):after{background-color:rgba(0,0,0,.2); background-image:url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/arrow_right_s_line_white.svg")}
.emergency-gate .gate-box:hover .gate-tit strong{color:#fff}


/* **************************************** *
* 비상연락망
* **************************************** */
.emergency-contact{display:flex; flex-direction:column; margin-top:20px; gap:50px}
.emergency-contact .contact-org{display:flex; align-items:center}
.emergency-contact .contact-org .org-logo img{max-width:200px}
.emergency-contact .contact-org .org-more{display:flex; align-items:center; margin-left:10px; height:46px; padding:0 18px; padding-right:15px; border:1px solid #ebebeb; border-radius:200px; box-sizing:border-box}
.emergency-contact .contact-org .org-more:after{content:'\ea6e'; position:relative; top:-1px; color:#808080; font-family:remixicon; font-size:22px}
.emergency-contact .contact-org .org-more span{color:#505050; line-height:1.2em; font-size:16px; font-weight:normal; letter-spacing:-0.5px;}

.emergency-contact .contact-web{display:flex; align-items:center; flex-wrap:wrap; padding:15px 20px; background-color:#f8f8f8}
.emergency-contact .contact-web .web-box{width:10%}
.emergency-contact .contact-web .web-box a
{
  display:flex; align-items:center; justify-content:center; height:46px; padding:0 10px;
  color:#505050; line-height:1.2em; font-size:16px; font-weight:normal; letter-spacing:-0.5px;
  border-radius:200px; box-sizing:border-box; transition:all .20s ease
}
.emergency-contact .contact-web .web-box a:hover{color:#fff; background-color:#4761a1}


/* **************************************** *
* 기상청 사용자 맞춤형 지진정보서비스 바로가기
* **************************************** */
.pnews-more{display:flex; align-items:center; height:48px; padding:0 22px; padding-right:19px; background-color:#f2f5f9; border-radius:200px; box-sizing:border-box}
.pnews-more:after{content:'\ea6e'; position:relative; top:-1px; color:#3382e9; font-family:remixicon; font-size:22px}
.pnews-more span{color:#3382e9; line-height:1.2em; font-size:16px; font-weight:300; letter-spacing:-0.5px}


/* **************************************** *
* 비상대처
* **************************************** */
.emergency-handle{background-color:#d8e5f6}
.emergency-handle .handle-inner{display:flex; width:1300px; margin:0 auto; padding:40px 0; gap:30px; box-sizing:border-box}
.handle-inside,
.handle-outside{display:flex; flex:1}
.handle-inside{min-width:68%; padding:20px; background-color:#fff; border-radius:16px; box-sizing:border-box}
.handle-inside .tab-group{width:100%}
.handle-outside{padding:20px; background-color:#fff; border-radius:16px; box-sizing:border-box}

/* 재난문자 */
.inside-sms .sms-list li{border-bottom:1px solid #ebebeb}
.inside-sms .sms-list li:last-child{border-bottom:none}
.inside-sms .sms-box{display:flex; align-items:center; min-height:70px; padding:10px 20px; box-sizing:border-box; transition:all .20s ease}
.inside-sms .sms-box .sms-label{display:inline-block; position:relative; min-width:120px; max-width:120px; margin-right:20px; text-align:center; background:#eef1f6; color:#3c6cc3; vertical-align:middle; border-radius:6px; box-sizing:border-box}
.inside-sms .sms-box .sms-label .label-tit{display:flex; align-items:center; justify-content:center; min-height:40px; padding:8px 15px; font-size:15px; font-weight:300; letter-spacing:-0.8px; box-sizing:border-box}
.inside-sms .sms-box .sms-tit{flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; word-break:keep-all}
.inside-sms .sms-box .sms-tit span{line-height:1.4em; font-size:16px; font-weight:normal; color:#445c78; letter-spacing:-0.5px}
.inside-sms .sms-box:hover .sms-tit span{color:#3382e9}

/* 국민행동요령, 안전시설 */
.inside-map{display:flex; flex-wrap:wrap; margin-left:-15px; margin-top:-15px}
.inside-map .map-align{display:flex; width:50%}
.inside-map .map-box
{
  display:flex; align-items:center; flex-direction:column; justify-content:center; flex:1;
  position:relative; min-height:180px; margin-left:15px; margin-top:15px; padding:20px;
  text-align:center; background-color:#fff; border:1px solid #ebebeb; border-radius:10px; transition:all .20s ease; box-sizing:border-box
}
.inside-map .map-box:after
{
  content:''; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-top:12px;
  background-color:#eef1f6;
  background-image:url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/arrow_right_s_line.svg");
  background-repeat:no-repeat;
  background-position:8px 50%;
  background-size:26px;
  border-radius:200px;
  transition: all .20s ease
}
.inside-map .map-box .tit{padding:10px 34px; line-height:1.2em; color:#3c6cc3; font-size:20px; font-weight:300; letter-spacing:-0.8px; background-color:#eef1f6; border-radius:200px}
.inside-map .map-box .cont{margin-top:12px; padding-top:12px; line-height:1.5em; color:#505050; font-size:16px; font-weight:normal; letter-spacing:-0.8px; text-align:center; border-top:1px solid #ebebeb; word-break:keep-all}
.inside-map .map-box:hover:after
{
  background-color:#4761a1;
  background-image:url("https://cdn.jsdelivr.net/gh/safedidimdol/safekoreafont/arrow_right_s_line_white.svg")
}



/* 재난관련 정보 링크 */
.outside-link{display:flex; flex-direction:column; width:100%}
.outside-link .link-top{display:flex; align-items:center; justify-content:center; height:70px; padding:0 20px; background-color:#4761a1; border-radius:10px; box-sizing:border-box}
.outside-link .link-top .tit{display:flex; align-items:center; line-height:1em; color:#fff; text-align:center; font-family:tjs; font-size:20px; font-weight:normal; letter-spacing:-1px}
.outside-link .link-top .tit:before{content:'\EEB2'; margin-right:5px; color:#fff; font-family:remixicon; font-size:22px}

.outside-link .link-wrap{margin-top:20px;}
.outside-link .link-list{margin-left:-8px; margin-top:-8px}
.outside-link .link-list:after{content:''; display:block; clear:both}
.outside-link .link-list li{float:left}
.outside-link .link-list li .link-box
{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  position:relative; height:52px; margin-top:8px; margin-left:8px; padding:0 15px;
  background:#F2F3F7; border:1px solid #F2F3F7; border-radius:6px; transition:all .20s ease; box-sizing:border-box
}
.outside-link .link-list li .link-box .tit{line-height:1em; color:#505050; font-size:16px; font-weight:300; letter-spacing:-0.8px; transition:all .20s ease}
.outside-link .link-list li .link-box:hover{background:#fff; border:1px solid #4761a1}
.outside-link .link-list li .link-box:hover .tit{color:#3382e9}