@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

*,html,body{
    -webkit-tap-highlight-color:rgba(255,255,255,0);
    user-select: none;
    -webkit-touch-callout: none;
    /* scroll-behavior: smooth; */
}
*,body,p { 
    font-family: 'Spoqa Han Sans', 'Sans-serif';
    font-weight:300; 
    font-size:16px;
    line-height:170%;
    word-break: keep-all;
    }

    /* 스크롤네비 */
        #navigation{
            opacity:0;
            position:fixed;
            right:20px;
            top:40%;
            z-index:1000;
        }
        #navigation a{
            display:block;
            position: relative;
            width:14px;
            height:14px;
            border-radius: 100px;
            background-color:#fff;
            margin:20px;
            -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.41);
            -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.41);
            box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.41);
        }
        #navigation a.current{
            background-color:#c49f89;
        }
        #navigation a.hover{
            background-color:#925153;
        }
        #navigation a .navindex{
            position: absolute;
            right:0px;
            opacity:0;
            top:-10px;
            color:#fff;
            background-color:#925153; 
            padding:0 5px;
            border-radius:2px;
            display:none;         
        }
        body{
            overflow-x:hidden;
            background-color:#fff;
        }
        h2{
            margin:20px 20px;
        }

        /* 인트로 */
        .intro{
            width:100%;
            height:90vh;
            position: relative;
            background-image: url('../img/banner.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size:cover;
        }
        .scrolldown{
            position: absolute;
            bottom:100px;
            left:50%;
            transform: translateX(-50%);
            width:80px;
            padding:20px;
            cursor:pointer;
        }
        .scrolldown img{
            width:100%;
        }


        /* 인터랙티브섹션 */
        .articlefull{
            position: relative;
            height:100vh;
        }
            .btn{
                width:100%;
                position: absolute;
                top:5%;
                padding:20px;
            }
            .btn div{
                /* width:30px; */
                float:left;
                margin-right:5px;
                padding:0 5px;
                border-radius:2px;
                height:20px;
                font-size:14px;
                line-height:20px;
            }
            .btnbtn{
                position: absolute;
                right:20px;
            }
            .btn .func{
                background-color:#212529;
                color:#fff;
                cursor: pointer;
            }
            .btn .func:hover{
                background-color:#868e96;
            }
            .btn .click{
                background-color:#fff;
                color:#868e96;
                cursor: default;
            }
            .guide{
                position:absolute;
                width:100%;
                height:85%;
                bottom:5%;
                z-index:999;
                display:none;
                text-align: center;
                opacity: 0;
            }
            .guideback{
                position:absolute;
                width:100%;
                height:100%;
                background-color:#212529;
                opacity:.7;
            }
            .guide img{
                position:absolute;
                height:100%;
                left:50%;
                transform:translateX(-50%);

            }
        /* 아티클섹션 */
        .article{
            padding:100px 0;
        }
        .titlebar{
            position: absolute;
            top:-20px;
            width:60px;
            height:7px;
            background-color: #b9a598;
        }
        .content{
            position: relative;
            width:900px;
            margin:0 auto;
            /* padding:50px 0; */
        }
        .content p{
            padding:0 50px;
        }
        .title{
            font-size:21px;
            font-weight:bold;
            margin-bottom:20px;
        }
        .outday{
            font-size:14px;
            color:#868e96;
        }
        .explain{
            width:100%;
            font-size:14px;
            color:#868e96;
            text-align:center;
            margin-bottom:20px;
        }
        /* 아티클1 인터렉티브 설명 */
        .manual{
            width:100%;
            margin-top:70px;
            background-color: #e9ecef;
            text-align: center;
            padding:20px;
        }
        /* 지도,뉴스이미지 */
        .imgsection{
            width:100%;
            margin:30px 0;
            overflow:hidden;
        }
        .imgsection .cam{
            width:100%;
            position: relative;
        }
        .cam .camnum{
            position: absolute;
            top:0;
            left:0;
            font-size:14px;
            color:#fff;
            padding:2px 8px;
        }
        .imgsection .map{
            width:100%;
        }
        .imgsection img{
            width:100%;
        }
        .imagesection::after { content: ''; dispaly: table; clear: both }

        /* 투엔티투엔티 */
        #diff{
            width:100%;
            margin-bottom:30px;
        }
        #diff img{
            width:100%;
        }

        /* 탑5이미지 */
        .imgsection2{
            width:100%;
            overflow:hidden;
            margin-bottom:30px;
        }
        .imgsection2::after { content: ''; dispaly: table; clear: both }
        .top5{
            width:100%;
            overflow:hidden;
            margin-bottom:10px;
        }
            /* 각각이미지 */
        .imgpart2{
            float:left;
            width:178px;
            margin:2px 1px;
            box-sizing: border-box;
            position: relative;
        }
        .imgpart2 img{
            height:100px;
        }
        .order{
            position:absolute;
            padding:2px 4px;
            font-size:12px;
            color:#fff;
            background-color: #212529;
            line-height:12px;
        }
        .order{
            top:0;
            left:0;
        }
        .info,.pm{
            font-size:12px;
            line-height:14px;
        }


        /* 캘린더섹션 */
        .imgcalendar{
            width:100%;
            margin:50px 0;
        }
        .imgcalendar img{
            width:100%;
        }

        /* 푸터 */
        footer{
            margin-top:50px;
        }
        .subtitle{
            margin-top:10px;
            color:#868e96;
            font-weight: bold;
        }

        /* 툴팁 */
        .tooltip {
            position: absolute;
            top: 100px;
            left:100px;
            border: 2px solid #212529;
            background: #fff;
            opacity: .9;
            color: black;
            padding:5px 10px;
            z-index: 1000;
          }
          .tooltip div{
            line-height:14px !important;
          }
          .tooltip span{
            font-size:14px !important;
          }
          .tooltip .value {
            font-weight:bold;
          }