@charset "utf-8";
/*
	진도군안전문화운동 COMMON STYLE
    WRITER : Kim Cheonhyun
	Last Modify Date : 2022. 08. 15.
*/

@import url('/themes/safeculture/css/base.css');

::placeholder { color:inherit; }
#wrap { position:relative; width:100%; }
/* headerWrap */
#headerWrap { overflow:hidden; position:fixed; top:0; width:100%; background:#fff; z-index:9; }
#headerWrap .header { position:relative; max-width:1462px; margin:0 auto; min-height:5.9375rem; z-index:9; transition:all 0.3s ease-out; }
#headerWrap .header:before { content:''; position:absolute; left:0; top:0; width:100%; height:5.9375rem; background:#fff; }
.header .logo { position:absolute; left:5.198358%;/*76/1462*/ top:2em; z-index:2; }
.header .logo a { display:block; overflow:hidden; width:223px; height:23px; }
.header .logo a img { max-height:100%; }
.header .utilWrap { overflow:hidden; position:absolute; right:0; top:1.5625em; z-index:2; }
.header .utilWrap .util { display:flex; margin-right:-.9375em; }
.header .utilWrap .util li { display:inline-block; position:relative; }
.header .utilWrap .util li:after { content:''; position:absolute; left:0; top:50%; width:1px; height:.875em; margin-top:-.4em; background:#c2c2c2; }
.header .utilWrap .util li:first-child:after { display:none; }
.header .utilWrap .util a { display:block; padding:1em; color:#757575; font-size:.9375em; }
.header .btnMoGnb { position:absolute; right:0; top:0; width:109px; height:100%; max-height:109px; z-index:2; }
.header .btnMoGnb { display:none; width:13.88888%; height:100%; }
.header .btnMoGnb button { overflow:hidden; width:100%; height:100%; text-indent:-999px; }
.header .btnMoGnb button i { display:block; position:absolute; left:50%; top:50%; width:28px; height:3px; margin-left:-14px; background:#000; border-radius:2px; }
.header .btnMoGnb button i.top { margin-top:-9px; }
.header .btnMoGnb button i.mid { margin-top:-1px; }
.header .btnMoGnb button i.btm { margin-top:7px; }
.header .gnbWrap { position:relative; padding:0 22% 0 26%;/*474/1462*/}
.header .gnbWrap h2 { display:none; }
.header .gnb .util,
.header .gnb .moGnbClose { display:none; }
.header .gnbList { display:flex; justify-content:space-around; max-width:660px; margin:0 auto; }
.header .gnbList>li { display:inline-block; width:25%; }
.header .gnbList>li>a { display:block; position:relative; padding:0 .5em; line-height:5.9375rem; color:#393939; font-size:1.125em; font-weight:bold; text-align:center; white-space:nowrap; }
.header .gnbList>li a:hover,
.header .gnbList>li a:focus,
.header .gnbList>li a:active { text-decoration:none; }
.header .gnbList>li.active>a:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:.25rem; background:#2f982f; }
.header .gnbList li .subMenu { display:none; height:100%; margin-top:1px; padding:1.25em 0; box-sizing:border-box; text-align:center; }
.header .gnbList li.active .subMenu { background:#f9f9f9; }
.header .gnbList li .subMenu>ul { padding:0; letter-spacing:-.05em;}
.header .gnbList li .subMenu>ul>li>a { display:block; position:relative; padding:.375em 0 .375em .5em; color:#424242; font-weight:300; }
.header .gnbList li .subMenu>ul>li>a:hover,
.header .gnbList li .subMenu>ul>li>a:focus,
.header .gnbList li .subMenu>ul>li>a:active { color:#2f982f; }
/* 상단 활성화시 스타일 */
#headerWrap.active,
#headerWrap.cover { background:#f9f9f9; }
#headerWrap.active:after,
#headerWrap.cover:after { content:''; position:absolute; left:0; top:5.9375rem; width:100%; height:1px; background:#e6e6e6; z-index:8; }
.overlayBg {position: fixed; top: 0; left: 0; width: 100%; height: 0; background-color: rgba(000,000,000,0.6); z-index:7; font-size: 0; opacity: 0;}
.overlayBg.active {height: 100%; opacity: 1; -webkit-transition:opacity 0.4s; -o-transition:opacity 0.4s; -moz-transition:opacity 0.4s; transition:opacity 0.4s;}
.header .overlayBg { display:none; }

/* footerWrap */
#footerWrap { clear:both;padding:2.125em 10px; background:#293241; }
.footer { position:relative; max-width:826px; margin:0 auto; }
.footer .fLogo { float:left; }
.footInfo { margin-left:28.32929%;/*234/826*/ color:#fff; font-size:.75em; font-weight:300; letter-spacing:-.05em; }
.footInfo ul { overflow:hidden; margin-left:-1em; }
.footInfo ul li { display:inline-block; margin:0 -2px; }
.footInfo ul li a { display:block; position:relative; padding:.5em 1em; color:#fff; }
.footInfo address { overflow:hidden; margin-left:-1em; }
.footInfo address span { display:inline-block; position:relative; margin:0 -2px; padding:.5em 1em; color:#fff; }
.footInfo ul li a:after,
.footInfo address span:after { content:''; position:absolute; left:0; top:50%; width:2px; height:1em; margin-top:-.5em; background:#8e929a; }

@media all and (max-width:960px) {
    /* headerWrap */
    #headerWrap .header:before { display:none; }
    #headerWrap:after,
    .header .utilWrap .util,
    .header .gnbWrap { display:none; }
    #headerWrap .header { position:relative; min-height:0; z-index:10; }
    .header .logo { position:relative; left:auto; top:auto; padding:2.25em 10%; text-align:center; }
    #headerWrap .header .logo a { display:inline-block; width:80%; height:2em; }
    .header .btnMoGnb { display:block; }
    .header .gnbWrap { overflow-y:auto; position:fixed; right:-100%; top:0; width:77.5%;/*558/720*/ height:100%; padding:0; background:#fff; z-index:15; }
    .header .gnbWrap h2 { display:block; padding:1.5rem 0 1.5rem 2.875rem; background:#3852ab; color:#fff; font-size:1.5rem; font-weight:300; }
    .header .gnbList { display:block; padding:0;/*66/720*/ }
    .header .gnbList>li { display:block; width:100%; margin-right:0; padding:0; border-top:1px solid #ededed; box-sizing:border-box; }
    .header .gnbList>li:first-child { border:none; }
    #headerWrap .header .gnbList>li>a { display:block; position:relative; padding:1rem 2.875rem; line-height:1.25rem; text-align:left; color:#000; font-size:1.25rem; font-weight:300; }
    #headerWrap .header .gnbList>li.open>a { color:#2f982f; }
    .header .gnbList>li.opNav>a:before,
    .header .gnbList>li.opNav>a:after { content:''; position:absolute; right:5%; top:50%; width:1.25rem; height:2px; margin-top:-1px; background:#949494; transition:all .4s; }
    .header .gnbList>li.opNav>a:after { transform:rotate(90deg); }
    .header .gnbList>li.opNav.open>a:after { transform:rotate(360deg); }
    .header .gnbList li .subMenu { display:none; position:static; left:0; top:auto; width:100%; padding:0 2.875rem; border:none; border-top:1px solid #d1d1d1; text-align:left; }
    .header .gnbList li .subMenu>ul>li { display:block; margin:0; }
    .header .gnbList li .subMenu>ul>li>a { padding:.5em 0; font-size:1.125em; }
    .header .gnbList li .subMenu ul ul { margin-top:-.5em;}
    .header .gnbList li .subMenu ul ul li { margin:.5em 0;}
    .header .gnbList li .subMenu ul ul li a { color:#444; }
    .header .gnb .util { overflow:hidden; display:block; padding:1.125rem 1.875rem; background:#1f2d5e; }
    .header .gnb .util li { display:inline-block; position:relative; margin-left:-1px; margin-right:-4px; }
    .header .gnb .util li:after { content:''; position:absolute; left:0; top:4px; width:1px; height:1.375em; background:#fff; }
    .header .gnb .util li:first-child:after { display:none; }
    .header .gnb .util li a { display:block; margin:2px 0; padding:0 1em; color:#fff; font-size:1.25rem; font-weight:300; }
    .header .gnb .moGnbClose { display:block; position:absolute; right:0; top:.75rem; margin:1rem; }
    .header .gnb .moGnbClose button { overflow:hidden; position:relative; width:1.5em; height:1.5em; margin-top:-.25em; font-size:1.375em; text-indent:-999px; }
    .header .gnb .moGnbClose button:before,
    .header .gnb .moGnbClose button:after { content:''; position:absolute; left:50%; top:50%; width:100%; height:2px; margin-top:-1px; margin-left:-50%; background:#fff; margin-top:-1px; }
    .header .gnb .moGnbClose button:before { transform:rotate(45deg); }
    .header .gnb .moGnbClose button:after { transform:rotate(135deg); }
    .overlayBg.active { display:none; }
    .header.active .overlayBg { display:block; }
    /* footerWrap */
    .footer .fLogo { float:none; margin-bottom:1em; text-align:center; }
    .footInfo { margin:0; text-align:center;}
    .footInfo ul,
    .footInfo address { display:inline-block; }
}
@media all and (max-width:720px) {
    html { font-size:14px; }
    .header .logo { padding:1.5em 10%; }
    .header .gnbList { font-size:14px; }
}
@media all and (max-width:480px) {
    html { font-size:12px; }
    .header .logo { padding:1.25em 10%; }
    .footInfo { text-align:left; }
}
/* 프린트 설정 */
@media print {
	#headerWrap,
	#footerWrap {display: none;}
}