body,html { height: 100%; }
        html { -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;user-select:none;-webkit-font-smoothing: antialiased;}
        body{margin: 0px;font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.03rem;}
        .logo-wrap { max-width: 400px; width: 80%; position: relative; margin: auto;}
        .div-member-wrap { max-width: 1000px; width: 90%; background-color: #ffffff; position: relative; margin: auto;}
        .fs-medium { font-size: 0.9rem;}
        .fs-bold { font-weight: bold;}
        .fs-normal { font-size: 0.8rem;}
        .fs-small { font-size: 0.75rem;}
        .btn-apply { display: inline-block;background-color: #1d3d7d; color: #ffffff;font-size: 0.9rem; cursor: pointer;}
        .btn-apply:hover{background-color: #2f59ac; }
 


                /*notice wrap*/
                .div-notice-title-wrap{ width: 98%; border-bottom:1px solid #ececec;  font-size: 12px; font-weight: 700; color:#222222; margin: auto;}
                .div-notice-head { background-color: #f5f5f5; width: 100%; margin: auto;}
                .div-content-wrap { border-bottom:1px solid #ececec}
                .div-notice-num { float: left; width: 10%; height: 35px; line-height: 35px; text-align: center;}
                .div-notice-title { float: left; width: 50%;height: 35px; line-height: 35px; text-align: center;}
                .div-notice-date { float: left; width: 10%;height: 35px; line-height: 35px; text-align: center;}
                .div-notice-read { float: left; width: 10%;height: 35px; line-height: 35px; text-align: center;}
                .div-notice-write { float: left; width: 20%;height: 35px; line-height: 35px; text-align: center;}
                .div-notice-title2 { width: 100%;  font-size: 18px; color:#222222; letter-spacing: -0.03em; font-weight: 300; border-bottom: 2px solid #ececec; margin: auto;}
                .notice-date { font-size: 11px;letter-spacing: -0.03em; font-weight: 500; color:#444444; margin-right: 15px;}
                .notice-dateb { font-size: 11px;letter-spacing: -0.03em; font-weight: 700; color:#444444;margin-right: 10px; }
                .div-notice-text { width: 100%;font-size: 14px; color:#222222; letter-spacing: -0.03em; font-weight: 300;  margin: auto;}
                .div-notice-title-wrap{ width: 98%; border-bottom:1px solid #ececec;  font-size: 12px; font-weight: 700; color:#222222; margin: auto;}
                .div-notice-list { background-color: #ffffff; width: 100%; margin: auto; border-bottom: 1px solid #ececec;}
                .div-list-num { float: left; width: 10%; height: 35px; line-height: 35px; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300;}
                .div-list-title { float: left; width: 50%;height: 35px; line-height: 35px; text-align: left;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;font-weight: 300;}
                .div-list-date { float: left; width: 10%;height: 35px; line-height: 35px; text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;font-weight: 300;}
                .div-list-read { float: left; width: 10%;height: 35px; line-height: 35px; text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;font-weight: 300;}
                .div-list-write { float: left; width: 20%;height: 35px; line-height: 35px; text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;font-weight: 300;}
                .div-list-title:hover{text-decoration: underline;}
                .btn-go-reg { width: 160px; height: 25px; padding: 5px; background-color: #003466; color: #ffffff; margin: auto; color: #ffffff; line-height: 25px; font-size: 14px; text-align: center; border-radius: 5px;}
                #columns{ column-width:170px;column-gap: 10px; width: 95%; margin: auto;margin-top: 10px;}
                #columns figure{display: inline-block;border:1px solid rgba(0,0,0,0.1);margin:0;margin-bottom: 10px;box-shadow: 2px 2px 5px rgba(0,0,0,0.1);background-color: #ffffff; border-radius: 10px; overflow: hidden;}
                #columns figure img{width:100%; display: block;}
                #columns figure figcaption{padding:8px;font-size: 11px;color: #444444;}
                .btn-goto-sns { width: 180px;  display: inline}
                .btn-goto-sns img { width: 180px;}
                .ptag {  font-size: 11px; padding: 3px; background-color: #444444; color: #ececec; border-radius: 5px; width: 50px; position: relative; right: 0px;}
                .div-photo-back { width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: fixed; top:0px; left: 0px;z-index: 100; display: none;}
                .vchk { vertical-align: -2px; margin: 0px;}
                .div-intro-visual { width: 100%; border-radius: 15px; overflow: hidden; margin: auto;}
                .div-intro-visual img { width: 100%; display: block; }
                .btn-go-vote { width: 180px; height: 40px; background-color: #444444; text-align: center; color: #ffffff; position: relative; margin: auto; line-height: 40px; font-size: 16px; border-radius: 10px; cursor: pointer;}
                #btn-close-ppad { width: 35px; height: 35px; position: absolute; margin: auto; cursor: pointer; top:10px; right: 10px; z-index: 30;}
                #btn-close-ppad img { width: 100%; display: block}

                /*photoview*/

                .div-photo-wrap { width: 90vw;background-color: #ffffff; border-radius: 10px; position: relative; margin: auto; top:50%; transform: translateY(-50%); overflow: hidden; height: 90vh;} 
                .div-photo-frame { width: calc(100% - 300px);  background-color: #000000; display: block; text-align: center; height: 100%; position: relative; float: left; overflow: hidden;}
                .div-photo-regist { width: 300px; float: left; height: 100%; z-index: 10; position: relative;}

                .btn-goto-sns { width: 180px;  display: inline}
                .btn-goto-sns img { width: 180px;}
                .ptag {  font-size: 11px; padding: 3px; background-color: #444444; color: #ececec; border-radius: 5px; width: 50px; position: relative; right: 0px;}
                .div-photo-back { width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); position: fixed; top:0px; left: 0px;z-index: 20; display: none;}
                .div-main{ width: 1200px; position: relative;margin: auto;  margin-top: 20px; }
                .vchk { vertical-align: -2px; margin: 0px;}
                .lsize { position: relative; margin:auto;top:50%;transform: translateY(-50%); width: 50vw; color: #ffffff; font-size: 11px;  text-align: center;}
                .limg { width: 100%; display: block;}
                .psize { position: relative; margin:auto;top:50%;transform: translateY(-50%); height: 70vh;  width: auto; text-align: center; color: #ffffff; font-size: 11px;}
                .pimg { height: 100%; }
                .div-intro-visual { width: 100%; border-radius: 15px; overflow: hidden; margin: auto;}
                .div-intro-visual img { width: 100%; display: block; }
                .btn-go-vote { width: 180px; height: 40px; background-color: #444444; text-align: center; color: #ffffff; position: relative; margin: auto; line-height: 40px; font-size: 16px; border-radius: 10px; cursor: pointer;}
                #btn-close-ppad { width: 35px; height: 35px; position: relative; margin: auto; cursor: pointer; margin-bottom: 10px;}
                #btn-close-ppad img { width: 100%; display: block}
.div-main-section { width: 100%;height: 40px;font-size: 20px;font-weight: 700;border-bottom: 2px solid #444444;margin-top: 20px;line-height: 40px;letter-spacing: -0.03em;}


                .txt_inp { border: 1px solid #ffffff; margin-top: 15px; padding: 10px; font-size: 16px; width: calc(100% - 30px); border-bottom: 1px solid #ececec;}
                .div-upload-wrap { width:calc(100% - 30px); background-color: #f5f5f5; border-radius: 10px; padding: 10px; font-size: 11px; color: #444444;}
                .txt_inp:focus { outline: none;box-shadow: 2px 2px 5px rgba(0,0,0,0.1); border: 1px solid #009ac2;}
                .div-photo-regist-wrap { width: 95%; position: relative; margin: auto; margin-top: 50px; letter-spacing: -0.03em; font-weight: 700; margin-top: 15px;}
                .div-photo-regist-title { width: 100%; border-bottom: 1px solid #ececec; height: 50px; line-height: 50px; font-size: 16px; color: #444444; }
                .btn-go-upload { width: calc(100% - 30px);  color: #ffffff; background-color: #009ac2; font-size: 14px; border-radius: 10px; text-align: center; padding: 10px; cursor: pointer;}
                .btn-go-upload:hover{background-color: #0e7f9d; }
                .btn-go-file { width: calc(100% - 30px);  color: #ffffff; background-color: #009ac2; font-size: 14px; border-radius: 10px; text-align: center; padding: 10px; cursor: pointer; margin: auto;}
                .btn-go-file:hover{background-color: #0e7f9d; }

                .div-admin-bar { width: 100%; height: 50px; background-color: #222222; border-bottom: 1px solid #ececec;}
                .div-admin-tag { height: 100%; margin-left: 20px; font-size: 12px; color: #ffffff; padding-right: 20px; border-right: 1px solid #ececec;line-height: 50px;}
                .div-admin-tag a { text-decoration: none; color: #ffffff;}
                .div-photo-upload-form { width: 300px; background-color: #ffffff; position: absolute; z-index: 70; border-radius: 15px; overflow: hidden; left: 20px;}
                .div-photo-upload-bar { width: 100%; height: 30px; line-height: 30px; text-align: center; color: #ffffff; font-size: 14; background-color: #444444; }

                .div-article-img{  width: 99%; border: 1px solid #ececec; position: relative; margin: auto; margin-top: 30px; max-width: 980px;}
                .div-article-img img { width: 100%; display: block;}

                @media screen and (max-width: 1200px) { 
                .lsize { position: relative; margin:auto;top:50%;transform: translateY(-50%); width: 98vw; }
                .psize { position: relative; margin:auto;top:50%;transform: translateY(-50%); height: 70vh;   text-align: center; color: #ffffff; font-size: 11px;}
                .div-main { width: calc(100% - 30px); padding-left: 15px; padding-right: 15px;}
                #columns{column-width:calc(25% - 30px);column-gap: 15px;}
                #columns{column-width:calc(25% - 30px);column-gap: 15px;}
                #columns{column-width:calc(25% - 30px);column-gap: 15px;}
                }


                @media screen and (max-width: 800px) {

                .div-main-title {width: 80%;position: relative;margin: auto;margin-top: 100px;}
                .div-main-link { width: 70%;}
                .div-main-card { width: 100%; margin-top: 10px;}
                .div-photo-frame { width: 100%; background-color: #000000; display: block; max-height: 50%;}
                .div-photo-wrap { width: 100%;background-color: #ffffff; border-radius: 10px; position: relative; margin: auto; top:0px ;transform: none; overflow: scroll; height: auto; border-radius: 0px; height: 100%;} 
                .limg { width: 100%; display: block;position: relative;top:50%;transform: translateY(-50%)}
                .div-photo-regist  { width: 100%;}
                .div-logo-left, .div-logo-right  {height: 35px;}

                }

                @media screen and (max-width: 1000px) { 
                    .nnum,    .nwriter, .nread { display: none};
                }

                @media screen and (max-width: 730px) { 
                    .nnum,    .nwriter, .nread { display: none};
                }
                @media screen and (max-width: 500px) { 
                .pbox { width: 100%}
                }
                .div-agenda-wrap { width: 100%; padding: 10px; background-color: #ffffff; min-height: 80vh; margin: auto; position: relative;  }
                .agenda-head-time { width: 20%; padding: 5px; background-color: #009999; color: #ffffff; float: left; font-size: 13px; font-weight: 700; letter-spacing: -0.03em; text-align: center;} 
                .agenda-head-title { width: 40%; padding: 5px; background-color: #009999; color: #ffffff; float: left;font-size: 13px; font-weight: 700; letter-spacing: -0.03em; text-align: center;}
                .agenda-head-spk { width: 30%; padding: 5px; background-color: #009999; color: #ffffff; float: left;font-size: 13px; font-weight: 700; letter-spacing: -0.03em; text-align: center;}
                .agenda-head-file { width: 10%; padding: 5px; background-color: #009999; color: #ffffff; float: left;font-size: 13px; font-weight: 700; letter-spacing: -0.03em; text-align: center;}
                .agenda-list-time { width: 20%; padding: 10px; color: #444444; float: left; font-size: 12px; font-weight: 500; letter-spacing: -0.03em; text-align: center;  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} 
                .agenda-list-title { width: 50%; padding: 10px; color: #444444; float: left;font-size: 12px; font-weight: 500; letter-spacing: -0.03em; text-align: left;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;}
                .agenda-list-spk { width: 30%; padding: 10px;  color: #444444; float: left;font-size: 12px; font-weight: 500; letter-spacing: -0.03em; text-align: left; text-overflow: ellipsis; overflow: hidden;white-space: nowrap;}
                .agenda-list-file { width: 10%; padding: 10px;  color: #444444; float: left;font-size: 12px; font-weight: 500; letter-spacing: -0.03em; text-align: center;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;}
                .agenda-list-file a { text-decoration: none; cursor: pointer; color: #444444;}
                .agenda-list-file a:hover{ text-decoration: none; cursor: pointer; color: #009999;}
                .spacer { border: none; height: 20px; clear: both;}
                .div-aclear-fix { width: 100%; height: 1px; clear: both;}
                .gray { background-color: #f9f9f9;}
                .gray2 { background-color: #cccccc;}
                .track { width:  100%; clear: both; padding: 10px; border-bottom: 1px soild #ececec; background-color:#800f81; color: #ffffff; font-size: 12px; font-weight: bold;}
                .head{ text-align: center;}
                .agenda-list { width: 100%; clear: both; border-bottom:1px solid #cccccc}
                @media screen and (max-width: 688px) {
                .head { display: none;}
                .agenda-head-time,.agenda-head-title,.agenda-head-spk,.agenda-head-file { display: none;}
                .agenda-list-time,.agenda-list-title,.agenda-list-spk,.agenda-list-file {float: none; width: calc(100% - 5px);text-align: left; border: 0px; padding: 0px; padding-left: 5px;}
                .agenda-list-time { font-size: 13px; font-weight: bold; padding-top: 14px;}
                .agenda-list-file { text-align: right; padding-bottom: 10px;}
                .div-aclear-fix { width: 100%; height: 1px; clear: both;margin-top:10px}
                }