@charset "utf-8";


/* 공통 */

.user#main:not([data-popup="on"]) #wrap{padding-top:5.2em !important;}
.user#main[data-popup="on"] #wrap{padding-top:21em !important;}
.user#main #header{background-color:transparent;}
.user#main:not([data-gnb="on"]):not([data-scroll="on"]) #header h1 span>a{/*background-position:-25em -57.7em;*/}
.user#main:not([data-gnb="on"]):not([data-scroll="on"]) #header #nav #gnb > ul > li > a > span{color:#000;}
.user#main:not([data-gnb="on"]):not([data-scroll="on"]) #header #etc>ul>li [data-search="s"]{ background-color:transparent;}

.user#main[data-scroll="on"] #header,
.user#main[data-gnb="on"] #header{background-color:#fff;}


.font-g{ font-family: 'Gmarket Sans';}


@media screen and (max-width:1024px){
    .user#main[data-popup="on"] #wrap{padding-top:22.8em !important;}
    .user #header{position:absolute;}
    .user[data-popup="on"][data-scroll="on"] #header{position:fixed; margin-top:0 !important;}
}



/* visual */
.main-visual{margin: 180px 0 0 0;position: relative;padding: 0 0 80px 0;}
.main-visual .layout{ position: relative ; z-index: 2;}
.main-visual .slogan { background:url(../../../images/site/kor/main/slogan-bg.png) no-repeat;  background-position: right 20px bottom 0; padding-bottom: 50px;}
.main-visual .slogan h2{ font-size: 48px; margin: 0 0 20px 0; }
.main-visual .slogan h2 span{ color: #003d99;}
.main-visual .slogan p{ font-size: 20px;  color:rgba(0, 0, 0, 0.7);}
.main-visual .slogan p strong{ color:rgba(0, 0, 0, 1);}
.main-visual .bnr {  margin: 0 -20px;}
.main-visual .bnr h2{ font-size: 30px; color: #fff; padding: 34px 0 0 44px}
.main-visual .bnr ul li{width: calc((100% / 3) - 40px);position: relative;margin: 0 20px;border-radius: 16px;height: 340px;box-sizing: border-box;overflow: hidden;box-shadow: 5px 6px 15px 13px rgba(0, 0, 0, 0.03);}
.main-visual .bnr ul li:first-child{ background: url(../../../images/site/kor/main/bnr-img01.jpg) no-repeat center center; background-size:cover;}
.main-visual .bnr ul li:nth-child(2){ background: url(../../../images/site/kor/main/bnr-img02.jpg) no-repeat  center center; background-size:cover;}
.main-visual .bnr ul li:last-child{ background: url(../../../images/site/kor/main/bnr-img03.jpg) no-repeat  center center; background-size:cover;}
.main-visual .bnr .link{ position: absolute; bottom: 0; width: 100%; }
.main-visual .bnr .link a{ padding: 18px 0; text-align: center; color: #fff; flex: 1; font-size: 20px;background: rgba(0,131,191,0.9); transition: all ease-in 0.3s;}
.main-visual .bnr .link a:hover{background: rgba(0, 88, 146, 0.9);}
.main-visual .bnr .link a:first-child{ border-right: 1px solid rgba(255,255,255,0.5);}
.main-visual::before{ content: ""; width: 100%; height: 317px; background: #daebff; display: block; position: absolute; bottom: 0;}
.main-visual::after{ content: ""; width: 100%; height: 642px; background-image:  url(../../../images/site/kor/main/visual-bg.png); background-repeat: no-repeat; background-position:left -10% bottom 0 ; 
    display: block; position: absolute; bottom: 0; left: 0}

@media screen and (max-width:1290px){
    .main-visual{ margin: 70px 0 0 0;}
    .main-visual .slogan h2{ font-size: 34px;}
    .main-visual .bnr h2{ font-size: 26px;}
    .main-visual .bnr .link a{ font-size: 16px;}
}
@media screen and (max-width:990px){
    .main-visual{ margin: 46px 0 0 0; padding: 0 0 40px 0;}
    .main-visual::after{ background-size: 300px auto;}
    .main-visual::before{height: 134px;}
    .main-visual .slogan{ background-size: 300px auto; padding-bottom: 80px;}
    .main-visual .slogan h2{ font-size: 26px; margin: 0 0 10px 0;}
    .main-visual .slogan p{ font-size: 15px; }
    .main-visual .bnr {margin: 0 -10px;}
    .main-visual .bnr h2{ font-size: 22px; padding: 20px;}
    .main-visual .bnr .link a{ font-size: 15px; padding: 10px 0;}
    .main-visual .bnr ul li{height: 240px;margin: 0 10px;width: calc((100% / 3) - 20px);}
    .main-visual .bnr ul li div.d-flex{ flex-direction: column;}
    .main-visual .bnr .link a:first-child{ border-right: none;border-bottom: 1px solid rgba(255,255,255,0.5);}
}
@media screen and (max-width:560px){
    .main-visual .slogan h2{ line-height: 1.4;}
    .main-visual .slogan h2 span{  display: block;}
    .main-visual .bnr ul li{ height: 160px; margin: 8px 0; width: calc((100% / 1) - 0px);}
    .main-visual .bnr h2{ font-size: 18px;}
    .main-visual .bnr ul li:first-child{ margin-top: 0;}
    .main-visual .bnr>ul.d-flex{ flex-wrap: wrap; padding: 0 3%;}
    .main-visual .bnr ul li div.d-flex{  flex-direction: row;}
    .main-visual .bnr .link a{ font-size: 14px;}
    .main-visual .bnr .link a:first-child{ border-right: 1px solid rgba(255,255,255,0.5);border-bottom:none}

}



/* news */
/*공통*/
.news{ margin: 60px 0;}
.news h2{ font-size: 34px; margin: 0 0 18px 0;}
.more{display:block; position:absolute; right:0; top:0.5em; width:2.4em; height:2.4em;}
.more::before{
    content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; 
    background-image:url(../../../images/site/kor/main/plus-ico.svg); 
    background-repeat:no-repeat;
    transition:transform 0.2s linear; transition:transform 0.2s linear;
}
.more>span{opacity:0; position:absolute; left:0; top:0; font-size:0 !important;}
.more:hover::before{transform:rotate(180deg); transform:rotate(180deg);}



/* 공지사항 */
.news>div>div{ margin: 0 -30px;}
.news>div>div>div{width: calc((100% / 2) - 60px); margin: 0 30px;}
.notice{flex: 1;position: relative;}
.notice ul{ border-top: 2px solid #000;}
.notice li{position:relative; padding-left:1.4em;}
.notice li:nth-child(n+1){border-bottom: 1px solid #EAEBEF;}
.notice li:before{
    content:""; display:block; position:absolute; left:0; top:calc(50% - 0.3em); width:0.6em; height:0.6em; background-color:#C4C4C4;
    border-radius:50%; border-radius:50%;
}
.notice li a{display:block;position:relative;padding: 13px 0; }
.notice li a strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;max-width: calc(100% - 10.4em);font-weight:500;font-size:1.7em;color:#333;transition: all 0.3s ease-in;}
.notice li a i{overflow:hidden; display:inline-block; width:2.4em; height:2.4em; text-align:left; text-indent:-1000px; 
    background-image:url(../../../images/site/kor/main/new-ico.svg); background-repeat:no-repeat; background-position: center center;}
.notice li a span{display:block;position:absolute;right:0;top: 50%;font-size:1.7em;color:#777;transform: translateY(-50%);}
.notice li a:hover strong{ color: #003d99;}
.news .more{ top: 1.5em;}


/* 알림판 */
#popupzone{position:relative;width: 46.3em; }
#popupzone>.title{background-position:-79em -2.6em;}
#popupzone .controll{position:absolute; right:0; top:0.6em;}
#popupzone .controll strong{display:inline-block; margin-right:0.5em; vertical-align:middle; font-weight:normal; font-size:1.8em; color:#212529;}
#popupzone .controll strong>span{color:#777;}
#popupzone .controll [class*="btn_"]{
    display:inline-block; width:calc(2.8em + 2px); height:calc(2.8em + 2px); margin:0 2px;  vertical-align:middle; border:1px solid #E1E6EB;
     background-color:#fff; background-image:url(../../../images/site/kor/main/popup-ico.svg); background-repeat:no-repeat;
    border-radius:50%; border-radius:50%;
}
#popupzone .controll [class*="btn_"]>span{opacity:0; position:absolute;}
#popupzone .controll .btn_prev{background-position:0 0;}
#popupzone .controll .btn_stop{background-position:-2.8em 0;}
#popupzone .controll .btn_play{background-position:-5.6em 0;}
#popupzone .controll .btn_next{background-position:-8.4em 0;}
#popupzone .move{
    position:relative; width:100%; padding-top:61.812%; background-color:#ddd;
    border-radius:1.6em;
    border-radius:1.6em;
}
#popupzone .move>ul,
#popupzone .move>ul>li{position:absolute; left:0; top:0; z-index:0; width:100%; height:100%;}
#popupzone .move>ul>li>a{
    display:block; position:relative; width:100%; height:100%; background-repeat:no-repeat; background-size:cover;
    border-radius:1.6em;border-radius:1.6em; overflow: hidden;
}
#popupzone .move>ul>li>a>img{width: 100%; }
#popupzone .move>ul>li.on{z-index:100;}
#popupzone .move li:not([data-type*="text-"])>a>span{opacity:0; position:absolute; left:0; top:0;}

@media screen and (max-width:1290px){
   .news h2{ font-size: 24px;}
   .news .more{ top: 0.8em;}
}
@media screen and (max-width:990px){
    .news{ padding: 40px 0; margin: 0;}
    .news h2{ font-size: 20px;}
    
    .news>div>div{ margin: 0;}
    .news>div>div>div{ margin: 0;}
    .news>div>div.d-flex{ flex-wrap: wrap;}
    .news>div>div>div{width: calc((100% / 1) - 0px);}
    .notice li a{ padding: 9px 0;}
    #popupzone{ width: 100%; margin: 30px 0 0 0;}

    .notice li a strong{ font-size: 15px;}
    .notice li a span{ font-size: 14px;}
}


/*광산안전tv 공통*/
.tv-wrap{ background:#f3f9ff ; padding: 60px 0; margin: 0 -20px;}
.tv-wrap h2{ font-size: 30px; margin: 0 0 14px 0;}
.tv-wrap>div>div{ margin: 0 -20px;}
.tv-wrap>div>div>div{ position: relative; border: 1px solid rgba(0, 0, 0, 0.1); background: #fff; margin: 0 20px ; box-sizing: border-box; padding: 34px; border-radius: 14px; }
.tv-wrap .more{top: 38px;right: 30px;}

.tv-wrap .tv{ flex: 1; border:7px solid #92cae5}
.tv-wrap .tv .movie-thumb{ display: block; position: relative; transition: all ease-in 0.2s;} 
.tv-wrap .tv .movie-thumb img{/* width: 639px; *//* height:359px; */max-width: 100%;transition: all ease-in 0.2s;}
.tv-wrap .tv .movie-thumb span.title{ display: inline-block; width: 100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size: 19px; position: absolute; bottom: 0;  left: 0; color: #fff; z-index: 2; padding: 0 22px 22px;}
.tv-wrap .tv .movie-thumb::before{ content: ""; display: block; width: 100%;background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 0%, #000 100%); height: 100px; position: absolute; bottom: 0; left: 0; z-index: 1;}
.tv-wrap .tv .movie-thumb::after{content: ""; display: block;  width: 100%; height: 100%; background:url(../../../images/site/kor/main/ico-play.png) no-repeat center center; position: absolute; top: 0; left: 0;}
.tv-wrap .paper, .tv-wrap .stat{flex: 0 1 22%;}
.tv-wrap .paper img, .tv-wrap .stat img{ max-width: 100%;transition: all ease-in 0.2s;}
.tv-wrap .paper-wrap{ position: relative;}
.tv-wrap .paper-wrap .d-flex{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;overflow: hidden;position: absolute;bottom: -5px;left: 0;width: 100%;}
.tv-wrap .paper-wrap .d-flex a{ display: block; flex: 1; font-size: 16px; text-align: center; color: #fff; padding: 14px 0;background-color: #0082cc; transition: all ease-in 0.3s;}
.tv-wrap .paper-wrap .d-flex a:hover{background-color: #0e8fda;}
.tv-wrap .paper-wrap .d-flex a:last-child{background-color: #5f646f;}
.tv-wrap .paper-wrap .d-flex a:hover:last-child{background-color: #6f7b96;}

.tv-wrap .photo{overflow:hidden;position:relative;display:block;width:100%;height:0;padding-top: 57.3%;/* border-radius: 16px; */z-index: 0;transition: all ease-in 0.3s;border: 1px solid #e3e2e2;}
.tv-wrap .photo>span{display:block; position:absolute; left:50%; top:0; width:100%; height:100%; text-align:center;transform: translateX(-50%);}
.tv-wrap .photo>span>img{height:100%; transform:scale(1); transform:scale(1);  width: 100%;}
.tv-wrap .paper .photo, .tv-wrap .stat .photo{padding-top: 144.3%;}

.tv-wrap a:hover .photo>span>img{ transform: scale(1.05);}


@media screen and (max-width:1480px){
    .tv-wrap>div>div{ margin: 0;}
 }
@media screen and (max-width:1290px){
    .tv-wrap h2{ font-size: 24px;}
    .tv-wrap>div>div>div{ margin: 0 10px;}
 }
 @media screen and (max-width:990px){
    .tv-wrap{ margin: 0; padding: 40px 0;}
    .tv-wrap>div>div>div{ margin: 0; padding: 15px;}
    .tv-wrap .tv{ width: 100%; flex: auto; margin: 0 0 30px 0;}
    .tv-wrap>div>div.d-flex{ flex-wrap: wrap; justify-content: space-between;}
    .tv-wrap .paper, .tv-wrap .stat{flex:0 1 48%}
    .tv-wrap h2{ font-size:20px ;}
    .tv-wrap .more{top: 15px;right: 14px;}
}



/*하단 자주찾는메뉴*/
.frequently{ padding: 50px 0;}
.frequently ul{ margin: 0 -13px;}
.frequently ul li{ flex: 1; ; border-radius: 14px; margin: 0 13px;}
.frequently ul li a{ display: block; font-size: 20px;  font-weight: 700; padding: 30px; color: #202020; background-repeat: no-repeat; 
    background-position: right 30px center;border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 14px; transition: all ease-in 0.3s;}
.frequently ul li a:hover{border: 1px solid rgba(0, 0, 0, 0.6); }
.frequently ul li.manual a{background-image:url(../../../images/site/kor/main/ico-frequently01.png)}
.frequently ul li.charge a{background-image:url(../../../images/site/kor/main/ico-frequently02.png)}
.frequently ul li.faq a{background-image:url(../../../images/site/kor/main/ico-frequently03.png)}
.frequently ul li.map a{background-image:url(../../../images/site/kor/main/ico-frequently04.png)}

@media screen and (max-width:1290px){
    .frequently ul li a{font-size: 17px; padding: 30px 18px; background-position: right 18px center; } 
 }
 @media screen and (max-width:990px){
   .frequently{ padding: 30px 0;}
   .news .layout, .tv-wrap .layout, .frequently .layout { max-width: 60em; padding: 0 4%;} 
   .frequently ul li{ width: calc(50% - 20px);margin: 10px; flex: auto;}
   .frequently .d-flex{ flex-wrap: wrap; }
   .frequently ul li a{ background-size: auto 40%;}
 }
 @media screen and (max-width:560px){
    .frequently ul li a{ font-size: 15px; padding: 20px 14px;}
    .frequently ul li{ width: calc(50% - 10px);margin: 5px; flex: auto;}
}


@media screen and (max-width:420px){
    .tv-wrap h2{font-size: 17px;}
  }