/* custom css */
.div-main-qna-wrap { width: calc(100% - 30px); padding: 15px; background-color: #121212; position: relative; color: #ffffff;}
.div-main-qna { width: calc(100% - 22px); padding: 10px; border: 1px solid #ececec; background-color: #ffffff;border-radius: 10px; }
#txt-chat-text { font-size: 14px;font-family: 'Noto Sans KR',sans-serif;color: #444444; border: none; float: left; padding: 10px; font-weight: 700;width: calc(100% - 90px);margin-top: 2px;}
#txt-chat-text:focus{ outline: none;}


.div-section-head {width: calc(95% - 40px); padding: 20px; text-align: center; margin: auto; border: 1px solid #cccccc;font-size: 14px; color: #333333;}
.div-section-title {width: 95%;  text-align: left; margin: auto; border-bottom: 1px solid #cccccc;font-size: 1.2em; color: #333333; margin-top: 20px; padding-bottom: 10px; font-weight: bold;}
.div-section-group {width: 95%;  text-align: left; margin: auto; font-size: 1.2em; color: #333333; margin-top: 15px; cursor: pointer;}
.txt-selection { resize: none; border: 1px solid #cccccc; padding: 5px; width: 300px; }
.div-section-q { width: 95%;  margin-left: 2.5%; line-height: 180%;}
.div-section-a { width: 90%;  margin-left: 5%;}
.div-section-body{width: calc(95% - 40px); padding: 20px; text-align: center; margin: auto; border: 1px solid #cccccc;font-size: 12px; color: #333333; margin-top: 15px;}
.div-sep-title {width: 90%;  text-align: left; margin-left: 5%; font-size: 1.2em; color: #333333; margin-top: 20px; padding-bottom: 10px;}



body,html{ font-family: 'Noto Sans KR', sans-serif; height: 100%; margin: 0px; font-size: 16px; }
input:focus{ outline: none;}
/*main-chat*/
.div-chat-wrap{width: 30%; height: 100%; background-color: #ececec;  position: relative; float: left;}
.div-chat-head{width: 100%; height:40px; background-color: #449862; text-align: center; color: #ffffff; line-height: 250%; font-size: 14px;}
.div-chat-txt-wrap {width: 100%; height: 100px; background-color: #222222; position: absolute; bottom: 0px;}

#playerElement { width: 70%; overflow: hidden; float: left;}
.btn-chat-send { width: 42px; height: 80px; background-color: #0084fd; position: absolute; right: 10px; top:10px; background-color: #ffffff; border-radius: 5px; text-align: center; font-size: 14px; font-weight: bold; line-height: 80px; cursor: pointer; }
.btn-chat-send:hover { background-color: #0084fd; color: #ffffff;}
.div-main-schedule-live { width: 100%;  position: relative;  }
.div-survey-title {width:99%; margin-left: 1%; text-align: left; font-size: 17px; margin-bottom: 10px;margin-top: 50px;}
.div-survey-section { width:99%; margin-left: 1%; text-align: left; font-size: 16px; margin-bottom: 20px;}
.div-reply {width: calc(80% - 20px); background-color: #04cc48; margin: auto; margin-bottom: 10px; padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px; color: #ffffff; border-radius: 10px; position: relative;word-break:break-all; font-size: 12px;margin-right: 2%;}
.div-msg { width: calc(80% - 20px); background-color: #0084fd; margin: auto; margin-bottom: 10px; padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px; color: #ffffff; border-radius: 10px; position: relative;word-break:break-all; font-size: 12px;margin-left: 2%;}
.div-notice { width:calc(80% - 20px); background-color: #222222; margin: auto; margin-bottom: 10px; padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px; color: #ffffff; border-radius: 10px; position: relative;word-break:break-all; font-size: 12px;margin-left: 2%;}

.txt-survey { width: 50%; height: 15px; padding: 5px;}
#q4h,#q4h2,#q5h,#q5h2{ display: none;}

.div-main-schedule-goto-list-btn {top:30px;width: 18%; height: 45px; margin: auto; position: relative; font-size: 11pt; font-weight: 600; color: white; background-color: #407AF0; text-align: center; line-height: 300%; border-radius: 5px; cursor: pointer;}
.tbl-header-wrap { width: 90%; margin: auto; height: 30px; background-color: #ffffff;top: 50px; position: relative; 
    border-top: 1px solid #cccccc;border-bottom: 2px solid #cccccc; font-size: 12px; padding-top: 10px; font-weight: bold;}
    .tbl-header-list { width: 90%; margin: auto; height: 30px; background-color: #ffffff;top: 50px; position: relative; 
       border-bottom: 1px solid #cccccc; font-size: 14px; padding-top: 10px; font-size:12px }
.tbl-list-num { float: left; width: 10%; text-align: center;}
.tbl-list-title2 { float: left;width: 50%; text-align: left; text-overflow: ellipsis;white-space: nowrap; overflow: hidden;}
.tbl-list-title { float: left;width: 50%; text-align: center;}
.tbl-list-writer { float: left;width: 10%; text-align: center;text-overflow: ellipsis;white-space: nowrap; overflow: hidden;}
.tbl-list-date { float: left;width: 30%; text-align: center;}
.tbl-notice-wrap {width: 1200px; margin: auto; background-color: #ffffff; height: 250px; position: relative; }
.tbl-notice-view-wrap {width: 1200px; margin: auto; background-color: #ffffff;  position: relative;  padding-bottom: 50px;}
.tbl-notice-con{ width: 90%;  border-bottom: 2px solid #444444;margin: auto; font-size: 14px; padding-top: 20px; padding-bottom: 20px;}
    .div-modal-back{ width: 100%; height: 100%; background-color:rgba(0,0,0,0.8); position: fixed; z-index: 20; display: none;}
    .div-menu-mobile { width: 70%; height: 100vh; background-color: #ffffff; position: absolute;top:66px;z-index: 25; right: 0px; display: none;} 
    .div-header {width: 100%; height: 142px; position: relative; z-index: 30; background-color: #ffffff; }
    .div-header-top-wrap {right: 20px; position: absolute; height: 20px; top:10px }
    .div-header-top {width: 1200px; height: 40px; margin: auto; position: relative; }
    .div-header-top-menu {height: 15px; float: left; margin-left: 20px; font-size: 12px; cursor: pointer; letter-spacing: 0.5px; color: #848484; }
    .div-header-top-menu img { vertical-align: top; }
    .div-header-bot-wrap {width: 100%; height: 100px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; }                  
    .div-header-bot {width: 1200px; height: 100px; margin: auto; position: relative;  }
    .div-header-bot-menu-wrap {right: 20px; top: 40px; position: absolute; }    
    .div-header-bot-menu {height: 20px; float: left; margin-left: 60px; cursor: pointer; font-size: 14px; }
    .div-header-bot-logo {width: 120px; height: 44px; overflow: hidden; position: absolute; top: calc( (100px - 44px) / 2);left:20px}
    .div-header-bot-logo img { width: 100%;}
    .div-main-intro {width: 1200px; top: 30px; margin: auto; position: relative; }
    .div-main-intro img {width: 100%;}
    .div-main-schedule {width: 1200px; margin: auto; position: relative;  margin-top: 50px; }
    .div-main-schedule-wrap {width: 1160px;  margin-top: 10px; background-color: #0B2161; position: relative;padding: 20px }  
    .div-main-schedule-image {width: 400px; float: left; }
    .div-main-schedule-image img{width: 100%;display: block; }    
    .div-main-schedule-form { margin-left: 20px; float: left; width: 740px; font-size: 12px;}
    .div-main-schedule-form-title { width: 720px;color: #81DAF5; position: relative; font-size: 25px; font-weight: 600; word-break: keep-all ; overflow: hidden;  }
    .div-main-schedule-form-detail {height: 30px; color: white; position: relative; font-size: 16px; font-weight: 500; }
    .div-main-schedule-form-time { color: white; position: relative; font-size: 16px; font-weight: 500; margin-top: 0px;}
    .div-main-schedule-form-enter {width: 250px; height: 50px;  background-color: #81BEF7; color: white; position: relative; font-size: 18px; font-weight: 600; text-align: center; line-height: 270%; cursor: pointer; margin-top: 20px; }
    .div-clear-fix { width: 100%; clear: both;}

    

    .div-main-replay {width: 1200px;  margin: auto; position: relative; }
    .div-main-replay-wrap {width: 1200px; height: 300px; position: relative; }
    .div-main-replay-elements {width:calc( 25% - 5px );float: left; position: relative; margin-right: 5px; background-color: #ffffff; margin-bottom: 20px; padding-bottom: 10px; border-radius: 5px; overflow: hidden;}
    .div-main-replay-elements:last-child{ margin-right: 0px;}
    .div-main-replay-elements img { width: 100%;}

    .div-main-replay-elements-title { font-size: 16px; margin-bottom: 20px; font-weight: 500; width: 90%;margin-left:5%; color: #444444;}
    .div-main-replay-elements-time,.div-main-replay-elements-presenter { font-size: 14px; width: 90%; margin-left: 5%;margin-bottom: 5px; color: #d5d5d5;}
    .div-header-mobile-menu{ width: 90%; margin-left: 10%; border-bottom: 1px solid #cccccc; height: 50px; line-height: 300%; }
    .div-header-top-mobile-menu{ width: 90%; margin-left: 10%;  height: 40px; color: #787878; font-size: 14px;}
    .div-header-mobile-menu:first-child { margin-top: 50px;}
    .btn-goto-play { width: 95%; background-color: aqua; height: 35px;  margin: auto; margin-top: 10px; text-align: center;background-color: #0B2161; color: #ffffff; line-height: 200%;}
    .div-contact {width: 100%; background-color: #0B2161; position: relative; }
    .div-contact-wrap {width: 1200px;  margin: auto; position: relative; }
    .div-contact-test {width: 600px; height: 300px; position: relative; float: left; background-image: url(../img/foot_icon.png); background-position: 90% 70% ; background-repeat: no-repeat;}
    .div-contact-test-title {width: 200px; top: 40px; position: relative; font-size: 23px; font-weight: 600; color: #81DAF5; }
    .div-contact-test-desc {width: 420px; height: 50px; top: 80px; position: relative; font-size: 14px; color: white; }
    .div-contact-test-check {width: 130px; height: 45px; top: 120px; border: 1px solid #ffffff; position: relative; font-size: 14px; color: white; text-align: center; line-height: 300%; cursor: pointer; }
    .div-contact-intro {width: 600px; height: 300px; position: relative; float: left; background-image: url(../img/foot_icon2.png); background-position: 90% 70% ; background-repeat: no-repeat;}
    .btn-goto-top { width: 40px; height: 40px; position: fixed; right: 20px; bottom: 50px; background-color: #ececec; z-index: 40; border: 1px solid #cccccc; font-size: 12px; text-align: center; line-height: 330%; border-radius: 30px; display: none; cursor: pointer;}
    
    .div-page-intro {width: 100%; height: 150px; z-index: 1; position: relative; background-image: url('../img/wrap_bg.png'); background-size: cover;}            
    .div-page-intro-wrap {width: 1200px; height: 80px; top: 35px ; margin: auto; z-index: 1; position: relative;  }
    .div-page-intro-detail {width: 100%; top: 50px; font-size: 12px; color: #81DAF5; z-index: 10; position: absolute;left: 20px; }
    .div-page-intro-title {width: 100%; font-size: 30px; font-weight: 500; color: white; z-index: 10; position: absolute; top:10px; left: 20px;}

    .div-main-intro-wrap {width: 1200px; margin: auto; position: relative;  background-color: #ffffff; padding-bottom: 50px; }

    .div-title-area { width: 1200px; margin: auto; margin-top: 50px;}


    .div-main-intro-product-image { width: 400px; margin-left: 50px; margin-top: 50px;float: left;}
    .div-main-intro-product-image img { width: 100%;}
    .div-main-intro-product-desc { width: 650px; text-align: justify;margin-left: 50px; margin-top: 50px;float: left;}

    .div-main-news {width: 1200px;  margin: auto; position: relative;  margin-top: 50px;}
    .div-main-news-detail_wrap{width: 300px; position: relative; float: left; }
    .div-main-news-title {width: 300px;position: relative; }
    .div-main-news-detail {width: 130px; height: 40px; border: 1px solid #000000; text-align: center; line-height: 250%; position: relative; cursor: pointer; }
    .div-main-news-intro {width: 900px; height: 150px; border-top: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd; float: left;}

    .div-main-news-intro-title { position: relative; font-size: 18px; font-weight: 600; margin-top: 35px; }
    .div-main-news-intro-time { position: relative; font-size: 13px; color: #a4a4a4; margin-top: 20px;}
    .div-main-news-intro-desc {position: relative; font-size: 15px; line-height: 150%; }
  

    .div-login-wrap { width: 500px; height: 500px; background-color: #ffffff; margin: auto;position: relative;top:50px; margin-bottom: 50px; border: 1px solid #cccccc;}
    .div-form-wrap { width: 500px;  background-color: #ffffff; margin: auto;position: relative;top:50px; margin-bottom: 50px; border: 1px solid #cccccc;}

    .div-login-title{ width: 100%; text-align: center; font-size: 25px; margin-top: 20px; word-break: break-all;}
   
    .txt-login { width: 300px; height: 20px; padding: 10px; margin: auto;position: relative; margin-left: 90px; margin-top: 20px; font-size: 18px;}
    .btn-login { width: 301px; height: 20px; padding: 10px; margin: auto;position: relative; margin-left: 90px; margin-top: 20px; background-color: #0B2161;border: 1px solid #0B2161 ;  color: #ffffff; text-align: center;line-height: 150%; cursor: pointer;}
    .txt-login-box { width: 320px; margin: auto; margin-top: 20px;}
    .txt-login-indicator { width: 320px; margin: auto; margin-top: 5px; font-size: 12px; color:red;}
    .txt-contact { width: 300px; height: 20px; padding: 10px; margin: auto;position: relative; margin-left: 90px; margin-top: 5px; font-size: 18px;}
    .div-main-inner-pic img { width: 150px;}
    .div-main-inner-pic  { width: 150px; margin: auto;}

    .div-main-intro-sub-image { width: 300px;  margin-top: 50px;float: left; font-size: 14px; text-align: center; line-height: 200%;}
    .div-main-intro-sub-image img { width: 100%;}
    .div-main-intro-sub-desc { width: 650px; text-align: justify; margin-top: 30px;float: left; font-size: 12px;}
   
    .txt_up { width: 80%; padding: 10px; resize: none;}
    .div-main-sub-sympo {width: 1200px; margin: auto; position: relative;  background-color: #ffffff; padding-bottom: 50px; }

    .div-footer-add-img { width: 49%; margin-top: 30px; float: left; margin-left: 1%;}
    .div-footer-add-img img { width: 100%;}

    .div-pool-back { width: 100%; height: 100%; background-color:rgba(0,0,0,0.8); position: fixed; top:0px; z-index: 70;display: none; }
    .main-pool-wrap { width: 80%; height: 80%; background-color: #ffffff; position: absolute; top: 10%; left: 10%; display: none;}
    .div-submit-wrap { width: 100%; height: 60px;  position: absolute; bottom: 0px; background-color: #093351;}
    .div-pool-input { width: 90%; height: 90%; background-color: #ffffff; position: absolute; top:5%;left: 5%;  min-width: 1200px;}
    .div-pool-left { width:300px; float: left; height: 100%; border-right: 1px solid #cccccc; font-size: 12px; position: relative;}
    .div-pool-right { width:calc(100% - 301px); float: left; height: 100%;  font-size: 12px; background-color: #ffffff;}
    
    .div-pool-title { width: 90%; margin-left: 5%; margin-top: 10px;}
    .txt-input{width: calc( 90% - 20px) ; margin-left: 5%; margin-top: 10px; padding: 10px;  border: 1px solid #cccccc;}
    .txt-input2{width: 30px; margin-left: 5%; margin-top: 10px; padding: 10px;border: 1px solid #cccccc; }
    .div-case-img { width: 80px; height: 80px; background-color: #f2f2f2; margin: auto; margin-top: 10px; border: 1px solid #cccccc; cursor: pointer;}
    .div-unit-img { width: 80px; height: 80px; background-color: #f2f2f2; margin: auto; margin-top: 10px; border: 1px solid #cccccc; cursor: pointer;}
    .div-unit-img img { width: 100%; display: block;}
    .div-clear-fix2 { width: 90%;clear: both;}
    #count_num { width: 10vw; height: 10vw; background-color:#e72222; position: absolute; left: calc((100% - 10vw) /2) ; top:calc((100% - 10vw) /2); font-size: 8vmax; line-height: 120%; text-align: center; border-radius: 5%; }
    
    /* .div-main-pimg { width: 25%;  min-height: 100px; border-radius: 10px; overflow: hidden; float: left;} 
    
    .div-main-pimg img { width: 100%;  display: block;} */
    .div-ptitle { width: 90%; font-size: 24px; margin-left: 10%; padding-bottom: 20px; margin-top: 20px;position: relative;}
    .div-psel {width: 90%; font-size: 24px; margin-left: 10%; padding-bottom: 20px; margin-top: 20px;position: relative; }
    
    .div-pimg { width: 90%; font-size: 24px; margin-left: 10%; padding-bottom: 20px; margin-top: 20px;position: relative; }
    .div-phead { width: calc(100% - 40px); padding: 20px; background-color: #093351; color: #ffffff; font-size: 16px;}
    .div-case-img img { width: 100%; overflow: hidden;}
    .btn-go-close { width: 30px; height: 30px; background-color: #be1f26; position: absolute; right: -10px; top:-10px; border-radius: 5px; color: #ffffff;  font-size: 20px; text-align: center; cursor: pointer;}
    #p-img{ display: none;}
    .main-pool-submit { width: 100%; background-color: #093351; height: 60px; position: absolute; bottom: 0px;}
    .main-pool-msg { width: 100%;bottom: 70px;position: absolute; text-align: center; font-size: 16px;}
    .div-select-img { width: 30%; float: left; margin-right: 1%; overflow: hidden; text-align: center; font-size: 16px; 
    border: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px;border-radius: 10px;white-space:normal; }
    .div-select-wrap { width: 95%; border-radius: 10px; overflow: hidden; margin: auto;}
    .div-select-wrap img { width: 100%; display: block;}
    .im-tag { width: 20%; background-color: antiquewhite; margin: auto; margin-bottom: 10px;margin-top: 10px; font-weight: 700; }
    .btn-pool-submit { width: 200px; height: 40px; background-color: #be1f26; text-align: center; margin: auto; margin-top: 10px; border-radius: 10px; color: #ffffff; font-weight: 500; line-height: 220%;cursor: pointer;}
    
    .div-vote-wrap { width: 90%; background-color: #ffffff; position: absolute; border: 1px solid #cccccc; left: 5%;}
    .div-vote-screen-wrap { width: 100%; position: relative; }
    .div-vote-screen { width: 70%;position: relative; float: left; overflow: hidden;}
    .div-vote-screen img { width: 100%; display: block; }
    .div-vote-menu { width: 30%; background-color: #444444; height: 100%; float: left; position: relative;font-family: 'Noto Sans KR'; font-weight: 700; color: #ffffff; font-size: 20px; text-align: center; line-height: 200%;}
    .div-vote-clear{ width: 100%; clear: both;}
    .div-vote-sel { width: 100%;  text-align: center; padding-top: 20px; padding-bottom: 20px; background-color: #ececec; border-top: 1px solid #cccccc;}
    .div-vote-button { width: 7vw; height: 7vw; background-color: blueviolet; display: inline-block; border-radius: 10%; margin-right: 0.5vw; 
    cursor: pointer; background: url(img/btn_back.jpg); background-size: cover; border: 2px solid #444444;  color: #ffffff;text-shadow: 3px 3px 3px #222222; font-size: 5vw ; vertical-align: middle;box-shadow: 2px 3px 3px #444444;  }
    .div-vote-display { width: 100%; height: 30px; background-color: #222222; display: none; text-align: center; font-size: 1.5vmax; line-height: 200%; color: #ffffff; font-weight: 700;right: 15px;}
    .div-vote-button:hover{ border: 2px solid #ff9600;box-shadow: none }
    .div-vote-close { width: 3vw;height: 3vw; background-color: #bb2f2f; position: absolute; z-index: 30; top:-1vw;right: -1vw;border-radius: 3vw;  color:#ffffff; font-size: 3vw; line-height: 90%; text-align: center; cursor: pointer;}
    .div-show-srv-wrap { width: 1200px; margin: auto; position: relative; margin-top: 10px; margin-bottom: 10px; display: none; height: 40px;}
    .div-main-srv-modal-back { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: fixed; left: 0px; top: 0px; z-index: 90; display: none;}
    .div-main-srv-wrap { width: 90%; background-color: #ffffff; height: 90%; overflow-y: scroll; top:5%; margin: auto; position: relative; max-width: 800px;}



    .div-main-psrv-modal-back { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: fixed; left: 0px; top: 0px; z-index: 90; display: block;}
    .div-main-srv-wrap { width: 90%; background-color: #ffffff; height: 90%; overflow-y: scroll; top:5%; margin: auto; position: relative; max-width: 800px;}


    .show-srv { padding: 10px; font-size: 14px; color: #222222; background-color: #ff950c; border-radius: 10px; text-align: center; width: 150px; font-weight: 500; cursor: pointer; position: absolute; right: 15px;top:15px }












    @media only screen and (orientation: portrait) {
    .div-vote-wrap { width: 90%;background-color: #ffffff; position: absolute; top:5%; left: 5%; border: 1px solid #cccccc;}
    .div-vote-menu { display: none;}
    .div-vote-screen { width: 100%;position: relative; float: left; overflow: hidden;}
    .div-vote-display { display: block;}
    .div-vote-sel { width: 100%;  text-align: center; padding-top: 0px; padding-bottom: 20px; background-color: #ececec; border-top: 1px solid #cccccc;}
    .div-vote-close { width: 5vw;height: 5vw; background-color: #bb2f2f; position: absolute; z-index: 30; top:-2vw;right: -2vw;border-radius: 5vw;  font-size: 5.3vw;}
    .div-vote-button { width: 15vw; height: 15vw; background-color: blueviolet; display: inline-block; border-radius: 10%;font-size: 10vw ;vertical-align: middle; margin-top: 20px;  }
    }
    

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

        .div-show-srv-wrap { width: 100%; }
    }

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

        .div-footer-add-img { width: 90%; margin-top: 30px; float: left; margin-left: 1%;}

    }