/* custom css */

.div-section-head {width: calc(95% - 40px); padding: 20px; text-align: center; margin: auto; border: 1px solid #cccccc;font-size: 1.3em; 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: 20px; padding-bottom: 10px; }
.txt-selection { resize: none; border: 1px solid #cccccc; padding: 5px; width: 300px; }
.div-section-q { width: 95%; margin-bottom: 15px; margin-left: 2.5%; font-weight: 500;}
.div-section-a { width: 90%; margin-bottom: 15px; 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: 30px;}
.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%;}
.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; }

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

    .div-section-q { width: 95%; margin-bottom: 15px; margin-left: 2.5%; font-size: 12px;}
    .div-section-a { width: 90%; margin-bottom: 15px; margin-left: 5%;font-size: 12px;}
    }