@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,500,500i&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
 body {
      -webkit-text-size-adjust: none; /* Safari, Chrome, etc. */
      -ms-text-size-adjust: none; /* IE */
      text-size-adjust: none; /* 표준 */
 }
@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GongGothicLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.fontsize {font-size: 16px;}	
.fontsize1412{font-size:14px;} 
.fontsize1513{font-size:15px;} 
.fontsize1614 {font-size:16px;}
.fontsize1816{font-size:18px;}

.catefont1816{font-size:18px;font-weight:bold;color:#5F5F5F;}
.catefont1614{font-size:16px;color:#666;}

/*font-family: 'Noto Sans KR', sans-serif;*/
*{margin:0; padding:0}
li{list-style:none;margin:0;padding:0;}
img{border: none;}
a{text-decoration:none}
address{font-style:normal;}
iframe{margin:0;padding:0;border:none;}
table{border-spacing: 0;border-collapse: collapse;}
button, input, select, textarea {
    background: transparent;
    font-size: 14px;
    position: relative;
    zoom: 1;
    font-family: 'Lato','NotoSansKR','Noto Sans KR','Apple SD Gothic Neo',sans-serif; border:none
}

.xi-kakaotalk:before {
  content: "\ebee";
}
h1,h2,h3,h4,h5,h6,p,div,section,td,th,label,adddress,a,body,li, button, em{font-family: 'Noto Sans KR', sans-serif; font-size:16px; font-weight:400; color:#000;  font-style:normal;word-break:keep-all !important; letter-spacing:-1px; }

/*scroll*/
.scroll-x{overflow-x:scroll; -ms-overflow-style:none}
.scroll-x::-webkit-scrollbar-track{background-color: #CCC;}
.scroll-x::-webkit-scrollbar	{height: 3px; display:none}
.scroll_block::-webkit-scrollbar{display:block}
.scroll-x::-webkit-scrollbar-thumb{background-color: #999;}

.mob{display:none !important}
.pc{display:block !important}

.wid { width:100%; height:auto;padding:50px 250px;}

.paging_s .page-link {
    display:inline-block;
    width:30px;
    padding:0;
    margin:0;    
    text-align:center;
    font-size:14px; /* font-size:0 해제 */
}

#header{position:absolute; width:100%; z-index:99}
.logo{padding:10px 0 10px 20px; box-sizing:border-box}
.logo img{width:250px}
.gnb{position:absolute; top:30px; left:45%; margin-left:-380px }
.gnb>ul{display:table}
.gnb>ul>li{display:table-cell; padding:0 10px}
.gnb>ul>li>a{color:#FFF; font-size:25px; font-weight:500}
.gnb>ul>li:hover>a{color:#f2921b}
.head-right{position:absolute; top:30px; right:30px}
.head-right>ul{overflow:hidden}
.head-right>ul>li{float:left; margin-left:5px;}
.head-right>ul>li>a{display:block; padding:5px 0; width:100px; border-radius:30px; text-align:center; background-color:#ff9900; color:#FFF; font-size:16px}

.slider-list{position:relative}
.slider-div{position:relative}
.slide-text{position:absolute; padding-left:200px; bottom:35%; transform:translateY(-60%); width:95%}
.slide-text img{width:auto !important; margin-bottom:15px}
.nn {height:45px;}
.slide-h2{}
.slide-text p{ font-size:50px; color:#FFF; font-weight:500; letter-spacing:-1px; line-height:60px; width:100%;}
.slide-text p span{color:#ff9900}
.slide-more{position:absolute; left:600px; bottom:-50px}

.slide-more a {
  position: relative;
  width: 250px;
  color: #39a1ff;
  display: block;
  background-color: #140035;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 20px;

  /* 애니메이션 적용 */
  animation: pulseSafe 1.5s infinite;
  transition: transform 0.3s;
  border-radius: 6px;
}
.slide-more a::after{position:absolute; width:250px; height:40px;  left:10px; top:10px;  z-index:-9; box-sizing:border-box; transition:0.5s}
.slide-more a:hover::after{left:0; top:0px;}
.slide-more a:hover{background-color:#FFF;}
.slick-active .slide-text h2{animation-name:mainh2; animation-duration:1s;transform:perspective(500px) rotate(.001deg); animation-fill-mode:forwards; opacity:0;animation-timing-function:linear;animation-delay:0.1s}
.slick-active .slide-text p{animation-name:mainp; animation-duration:1s;transform:perspective(500px) rotate(.001deg); animation-fill-mode:forwards; opacity:0;animation-timing-function:linear; animation-delay:0.2s}
.slick-active .slide-text .slide-more{animation-name:more; animation-duration:1s;transform:perspective(500px) rotate(.001deg); animation-fill-mode:forwards; animation-timing-function:linear; animation-delay:0.6s;opacity:0;}

.wrap{position:relative; max-width:1250px; margin:0 auto}
.check-wrap{padding:20px 0}
.check-search{position:relative; text-align:right; overflow:hidden}
.search-box{position:relative; border-bottom:2px solid #000; width:700px; float:right}
.search-box input[type="search"]{width:100%; padding:10px; box-sizing:border-box}
.search-box input[type="search"]::placeholder{font-size:16px}
.search-box input[type="search"]:focus{outline:none}
.search-box button{position:absolute; background-color:#FFF; right:0; bottom:0; padding:5px 10px; box-sizing:border-box}
.search-box button i{color:#ff2f39; font-size:25px; font-weight:bold}
.check-box{margin-top:0;}
.check-box .check br{display:none}
.check-box span{vertical-align:middle; margin-right:5px}
.check-box i{color:#f43915; font-size:30px}
.check-box>p{font-size:20px}
.check-box .check{padding:10px; box-sizing:border-box; overflow:hidden}
.check-box .list{padding:5px; box-sizing:border-box; overflow:hidden}
.check-box label{font-size:20px; padding:0 5px; box-sizing:border-box}
.check-box label input[type="checkbox"]{margin-right:5px}
.check-box2 label{width:20%; float:left}
.check-box2 label:nth-child(n+6){margin-top:10px}
.check-box label input[type="checkbox"]{accent-color:#ff9900;}

.back{position:relative; width:100%; background-color:#EEE; padding:50px 0}
.teacher-wrap>ul{display:flex; flex-wrap:wrap}
.teacher-wrap>ul>li{width:32%; margin-left:2%;background-color:#FFF; border:1px solid #CCC; box-sizing:border-box; padding:20px;}
.teacher-wrap>ul>li:nth-child(3n+1){margin-left:0}
.teacher-wrap>ul>li:nth-child(n+4){margin-top:20px}

.wrap2{position:relative; max-width:1000px;margin : 0 auto;}
.teacher-wrap2>ul{display:flex;margin : 0 auto;}
.teacher-wrap2>ul>li{width:100%; background-color:#FFF; border:0px solid #CCC; box-sizing:border-box; padding:10px; float:left;margin-right:20px;margin : 0 auto}
.teacher-wrap2>ul>li:nth-child(3n+1){margin-left:0}
.teacher-wrap2>ul>li:nth-child(n+2){margin-left:0}

.info-box{display:table; width:100%}
.info-box>div{display:table-cell; vertical-align:middle}
.info-box>div li span{margin-right:20px}
.info-box .info-img img{width:150px}
.info-box .info{padding:0 10px; box-sizing:border-box}
.info-box h3{font-size:20px; color:#666}
.info-box li{font-size:16px; color:#999}
.info-text{margin-top:10px;}
.info-text_teacher{margin-top:10px; width:450px;}

.info-text p {font-size:16px; color:#999;  height:72%;  border:1px;  word-wrap: break-word;    text-overflow: ellipsis;  overflow:hidden; }
.info-text .info-btn{position:relative; text-align:right; margin-top:15px;}
.info-text .info-btn>ul{ overflow:hidden}
.info-text .info-btn>ul>li{display:inline;}
.info-text .info-btn>ul>li a{display:inline-block; color:#FFF; padding:2px 5px}
.info-text .info-btn>ul>li:last-child a{background-color:#000; transition:0.5s;}
.info-text .info-btn>ul>li:last-child:hover a{background-color:#555}
.info-text .info-btn>ul>li:last-child{margin-left:2px}
.info-text .info-btn>ul>li:nth-child(1) a{background-color:#ff9900; transition:0.5s;}
.info-text .info-btn>ul>li:nth-child(1):hover a{background-color:#E79821}
.info-text .info-btn>ul>li:nth-child(1){margin-left:2px}
.info-text .info-btn>ul>li:nth-child(2) a{background-color:#ff9900; transition:0.5s;}
.info-text .info-btn>ul>li:nth-child(2):hover a{background-color:#E79821}
.info-text .info-btn>ul>li:nth-child(2){margin-left:2px}
.mid{position:relative; width:100%; background-image:url(../image/mid-back.jpg); background-size:cover; background-position:center; height:1100px; overflow:hidden}
.mid-img{position:absolute; left:10%; bottom:-50px}
.mid-img img{display:block}
.mid-text{top:27%; right:15%; position:absolute}
.cording{position:relative}
.cording>div{text-align:center; padding:100px 0}
.cording div img{max-width:100%;}
.cord1 img{padding-left:200px; box-sizing:border-box}
.cord1 p{display:none}
.cord2{position:relative; background-color:#d1c5ff}
.cord2 p{text-align:center; font-family:'GongGothicLight'; font-size:30px; margin-bottom:30px}
.cord2 p span{font-weight:bold; font-size:45px}
.tri-wrap{position:absolute; width:450px; height:400px;margin-top:-654px;top:50%}
.tri{ left:0; height:0; width:0;   border-bottom: 500px solid transparent;
  border-top: 500px solid transparent;
  border-left: 600px solid #b09dff;
  border-right: 0 solid transparent; padding:0 !important}
.tri-text{position:absolute; width:100%; transform:translateY(-50%); top:100%;}
.tri-wrap p{font-size:25px}
.tri-wrap p span{font-size:30px; font-weight:bold}
.tri-more{margin-top:15px; text-align:right}
.tri-more a{display:block; background-color:#000; color:#FFF; font-size:16px; border-radius:20px; width:100px; text-align:center; position:relative; margin:0 auto; padding:5px 0}

/*sub*/
.sub-banner{position:relative; height:400px; width:100%; overflow:hidden}
.sub-banner77{position:relative; height:90px; width:100%; overflow:hidden}
.sub-banner0 .bg{ background-image:url(../image/sub-banner0.jpg);}
.sub-banner1 .bg{ background-image:url(../image/sub-banner1.jpg);}
.sub-banner2 .bg{ background-image:url(../image/sub-banner2.jpg);}
.sub-banner3 .bg{ background-image:url(../image/sub-banner3.jpg);}
.sub-banner4 .bg{ background-image:url(../image/sub-banner4.jpg);}
.sub-banner5 .bg{ background-image:url(../image/sub-banner5.jpg);}
.sub-banner6 .bg{ background-image:url(../image/sub-banner6.jpg);}
.sub-banner7 .bg{ background-image:url(../image/sub-banner7.jpg);}
.sub-banner8 .bg{ background-image:url(../image/codingteacher.jpg);}
.sub-banner9 .bg{ background-image:url(../image/sangdam.jpg);}
.sub-banner10 .bg{ background-image:url(../image/chatvc.jpg);}
.sub-banner11 .bg{ background-image:url(../image/chattingsangdam2.jpg);}
.sub-banner12 .bg{ background-color: skyblue;}
.bg{height:100%;background-position: center;}

.sub-title{position:absolute; width:95%; left:2.5%; top:50%; transform:translateY(-40%)}
.sub-title h2{font-size:40px; font-weight:bold; color:#FFF; text-align:center}
.sub-title h2 span{color:#ff9900}
.sub{position:relative; max-width:1250px; margin:0 auto; padding:20px 0}
.sub .title{font-size:30px; text-align:center; font-weight:bold; margin-bottom:20px}
.agree-box{position:relative; border:1px solid #CCC; padding:30px; box-sizing:border-box}
.agree-title{text-align:center; font-weight:bold; font-size:25px; display:block}
.agree-title2{font-weight:bold; font-size:16px}

/*login*/
.login-wrap{position:relative; background-color:#f4f4f4; box-sizing:border-box; border-radius:10px; width:300px; margin:0 auto}
.login-wrap input[type="text"]{background-color:#FFF; padding:5px; width:90%; box-sizing:border-box}
.login-wrap input[type="password"]{background-color:#FFF; padding:5px; width:90%; box-sizing:border-box}
.login label{display:block; font-weight:bold; font-size:16px; margin-bottom:10px}
.login button{background-color:#ff9900; display:block; width:90%; text-align:center; padding:0; margin: 0 auto; color:#FFF; padding:7px 0}
.login>li:nth-child(n+2){margin-top:10px}
.login-check label{font-weight:normal; font-size: 12px;}
.login-check label input[type="checkbox"]{vertical-align: middle; margin-right: 5px;}
.find{display:table; margin:20px auto 0}
.find>li{display:table-cell; position:relative; padding:0 10px}
.find>li::after{position:absolute; content:""; width:1px; background-color:#000; height:60%; top:25%; left:0}
.find>li:first-child::after{display:none}

/*logout*/
.logout-wrap{position:relative; max-width:800px; margin:0 auto; background-color:#f4f4f4; padding:100px 0; border-radius:30px}
.logout-wrap p{text-align:center; font-size:26px; font-weight:500}
.logout-wrap a{text-align:center; font-size:20px; margin-top:10px; display:block}
.logout-wrap a:hover{font-weight:bold}
.logout-wrap p br{display:none}

/*join*/
.join-wrap{position:relative; border-top:1px solid #ff9900; max-width:1000px; margin:0 auto}
.join>li{padding:10px 0; border-bottom:1px solid #CCC}
.join-wrap label{width:150px; display:inline-block; font-weight:500; font-size:15px; text-align:center; padding:5px 0}
.join-wrap input[type="text"]{border:1px solid #CCC; padding:5px; box-sizing:border-box}
.join-wrap input[type="password"]{border:1px solid #CCC; padding:5px; box-sizing:border-box}
.join-wrap button{background-color:#555; color:#FFF; padding:5px 10px; margin-left:5px}
.cer{border:1px solid #CCC; padding:5px 10px}
.cer-yes{display:none}
.cer-yes .cer{background-color:#555; color:#FFF; display:inline-block}
.en-con .agree-box{height:200px; overflow-y:scroll; padding:10px;}
.en>li .agree-btn label{font-size:16px; font-weight:normal; text-align:left}

/*teacher join*/
.teach-join{position:relative; max-width:1000px; margin:0 auto}
.teach-join h2{position:relative; border-bottom:2px solid #ff9900; width:100%; font-size:30px; font-weight:bold; padding:10px; box-sizing:border-box}
.teach-join h2 span{position:absolute; background-color:#555; color:#FFF; font-size:12px; right:10px; padding:3px 10px; bottom:10px}
.photo-wrap{position:relative; display:table; padding:20px; box-sizing:border-box; border-bottom:1px solid #CCC; width:100%}
.photo-wrap>div{display:table-cell; vertical-align:top}
.photo{width:166px;text-align:left}
.photo>ul{overflow:hidden; margin-top:10px}
.photo>ul>li{float:left; width:49%; margin-left:2%}
.photo>ul>li:first-child{margin-left:0}
.photo>ul>li button{text-align:center; background-color:#555; color:#FFF; width:100%; padding:3px 0}
.photo-text{padding:0px 10px 0px 10px; box-sizing:border-box}
.photo-text h3{font-size:24px; font-weight:500;}
.photo-text>ul{margin-top:10px}
.photo-text>ul>li{font-size:16px; margin-bottom:5px}
.en{position:relative; }
.en>li{padding:10px 0; box-sizing:border-box; border-bottom:1px solid #CCC; display:table; width:100%}
.en>li>div{display:table-cell; vertical-align:middle}
.en>li label{font-size:16px; font-weight:500;display:inline-block; text-align:center; width:100%}
.en-title{width:130px;}
.en-con{padding:10px 10px; box-sizing:border-box}
.en input{background-color:#FFF; border:1px solid #CCC; padding:5px; box-sizing:border-box}
.en>li select{padding:5px; box-sizing:border-box; border:1px solid #CCC}
.gender input[type="radio"] {display: none;}
.gender input[type="radio"] + span {display: inline-block; padding: 5px 16px; border: 1px solid #CCC;background-color: #ffffff;text-align: center;cursor: pointer;}
.gender input[type="radio"]:checked + span {background-color: #E2E2E2; color: #000000; border:1px solid #E2E2E2}
.en>li .radio{width:auto; font-weight:normal; font-size:16px}
.en>li textarea{width:100%; height:150px; border:1px solid #CCC; box-sizing:border-box}
.btn{position:relative; max-width:1000px; margin:15px auto 0; text-align:right; }
.btn>a{color:#FFF; padding:3px 13px; box-sizing:border-box; background-color:#ff9900; font-size:16px;}

#footer{position:relative; width:100%; padding:30px 0; background-color:#f4f4f4}
.footer-wrap{position:relative; max-width:1250px; margin:0 auto; text-align:center}
.foot-logo img{width:250px}
.foot-menu>ul{display:table; margin:10px auto 20px}
.foot-menu>ul>li{display:table-cell; position:relative; padding:0 10px;}
.foot-menu>ul>li::after{position:absolute; width:1px; height:50%; top:25%; background:#000; content:""; right:0}
.foot-menu>ul>li:last-child::after{display:none}
.copy span{padding:0 5px}

/*left banner*/
.left-banner{position: fixed;
    bottom: 80px;
    left: -250px;
    opacity: 0;
    width: 200px;
    z-index: 100;
    transition: 0.8s;}
	
.left-banner img{max-width:100%}
.left-banner.fixed {
    position: fixed;
    bottom: 80px;
    left: 10px;
    opacity: 1;}
.left-banner p{position:relative; background-color:#ccccff; font-size:18px; width:120px; text-align:center; padding:5px 0; border-radius:50px; margin:15px auto 0; transition:0.5s}
.left-banner p:hover{background-color:#A1A1F8}

/*company*/
.com-wrap{max-width:1200px; margin:0 auto}
.com-top{position:relative; margin:0 auto 50px}
.com-top h2{font-size:32px; font-weight:bold; }
.com-top h2 span{color:#ff9900}
.com-top .com-logo{position:absolute; right:0; top:0}
.com-con h3{font-size:27px; font-weight:bold; padding:0 15px; margin-bottom:30px}
.com-con>ul>li{border-bottom:1px solid #CCC; padding:15px; box-sizing:border-box}
.com-con>ul>li h4{font-size:22px; font-weight:bold; margin-bottom:10px}
.com-con>ul>li p{font-size:18px}
.com-con>ul>li>ul>li{font-size:18px; line-height:30px}

/*board*/
.board{position:relative; max-width:1250px; margin:0 auto;}
th, td, button, td a, th a, .borad_view p, input[type="radio"], label{letter-spacing:0;}
.search_area{position:relative; width:100%;  padding:10px 0;}
.search_area select{background-color:#FFF; padding:5px 0; margin-right:5px; border:1px solid #EEE}
.search_area input[type="text"]{background-color:#FFF; padding:5px 0; border:1px solid #EEE}
.search_area button{background-color:#333; color:#FFF; padding:5px 20px; margin-left:5px}
.board-list table{width:100%; border:1px solid #CCC; border-left:none; border-right:none;border-top:2px solid #ff9900}
.board-list table th{ padding:10px 0; border-bottom:1px solid #AAA; font-weight:bold; font-size:16px }
.board-list table td{text-align:center; padding:10px;  border-top:1px solid #EEE; font-size:16px}
.table_m{width:45% !important}
.board-list table td a:hover{font-weight:bold}
.board-list table td a{overflow:hidden; width:90%; text-overflow:ellipsis; white-space:nowrap; display:block; font-size:16px}
.board-list table td.left{text-align:left; padding:0 20px; box-sizing:border-box}
.borad_view{position:relative; width:100%; margin:0 auto}
.view_title{border-top:2px solid #ff9900; border-bottom:1px solid #CCC; border-left:none; border-right:none; padding:20px; box-sizing:border-box  }
.view_title p{font-weight:bold; font-size:16px}
.view_title p span{position:absolute; right:20px}
.view_contents{padding:30px; box-sizing:border-box; border-bottom:1px solid #CCC}
.view_contents img{max-width:100%}
.reply-wrap{position:relative; width:100%; margin-top:15px; background-color:#f4f4f4;  padding:10px; box-sizing:border-box}
.reply-write{display:table; width:100%}
.reply-write textarea{background-color:#FFF; height:80px; width:80%; display:table-cell; vertical-align:middle; resize:none; border:1px solid #CCC; box-sizing:border-box}
.reply-write button{width:20%; text-align:center; background-color:#555; color:#FFF; display:table-cell; vertical-align:middle; height:80px; }
.reply-box{border-top:1px solid #CCC; margin-top:15px}
.reply-box>ul>li{padding:15px; box-sizing:border-box; border-bottom:1px solid #CCC; position:relative}
.reply-box>ul>li:nth-child(2n+1){background-color:#f4f4f4}
.reply-box h4{font-weight:bold; font-size:16px}
.reply-box p{padding:10px 0}
.reply-box span.reply2{background-color:#E0E0E0; font-size:12px; padding:1px 7px; border-radius:10px; cursor:pointer}
.reply-box span.re_date{font-size:10px; color:#BBB; padding-left:10px}
.re-btn{position:absolute; right:10px; top:10px; }
.re-btn ul{overflow:hidden}
.re-btn li{position:relative; float:left; padding-right:10px }
.re-btn li::after{position:absolute; content:""; width:1px; height:50%; top:35%; background-color:#333; right:3px}
.re-btn li:last-child::after{display:none}
.re-btn a{font-size:12px}
.board_write{position:relative; width:100%; margin:0 auto; }
.board_write table{width:100%;border-top:2px solid #000}
.board_write th {
    border-bottom: 1px solid #dbdbdb; padding: 10px 0 10px 20px;
    text-align: left;
    font-size: 15px;
    box-sizing: border-box; font-weight:bold
}
.board_write td {
    border-bottom: 1px solid #dbdbdb; padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
}
.board_write td label{margin-right:5px}
.board_write td checkbox{vertical-align:middle}
.board_write input[type="text"]{border:1px solid #CCC; padding:10px; box-sizing:border-box; background-color:#FFF}
.board_write textarea{width:100%; border:1px solid #CCC; background-color:#FFF}
.board_btn{position:relative; max-width:1250px; margin:0 auto; text-align:right; margin-top:15px}
.board_btn>a{display:inline-block; background-color:#333; color:#FFF; padding:3px 8px; margin-left:5px}
.board_btn2{position:relative; max-width:100%; background-color:#EEE; margin:0 auto;}

#bo_v_file{padding:10px; border-bottom:1px solid #000}
#bo_v_file h3 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
#bo_v_file ul {
    margin: 0;
    list-style: none;
}
#bo_v_file li {
    padding: 15px;
    position: relative;
    margin: 10px 0;
}
#bo_v_file li i {
    float: left;
    color: #b2b2b2;
    font-size: 2.35em;
    margin-right: 20px;
}
#bo_v_file a {
    float: left;
    display: block;
    text-decoration: none;
    word-wrap: break-word;
    color: #000;
}
#bo_v_file .bo_v_file_cnt {
    color: #b2b2b2;
    font-size: 0.92em;
}
.board_write{position:relative; width:100%; margin:0 auto; }
.board_write table{width:100%;border-top:2px solid #ff9900}
.board_write th {
    border-bottom: 1px solid #dbdbdb; padding: 10px 0 10px 20px;
    text-align: left;
    font-size: 15px;
    box-sizing: border-box; font-weight:bold
}
.board_write td {
    border-bottom: 1px solid #dbdbdb; padding: 10px 20px;
    text-align: left;
    box-sizing: border-box;
    position: relative;
}
.board_write td label{margin-right:5px}
.board_write td checkbox{vertical-align:middle}
.board_write input[type="text"]{border:1px solid #CCC; padding:10px; box-sizing:border-box}
.board_write textarea{width:100%; border:1px solid #CCC}

/*paging*/
.port_wrap>div.paging {clear: both;text-align: center; padding: 20px 0; font-weight: 600; display:block}
.paging {clear: both;text-align: center; padding: 20px 0; font-weight: 600; display:block}
.paging .prev { /* background:url(../image/page_prev.png) center center no-repeat;margin-right: 20px; */}
.paging .next { /* background: url(../image/page_next.png) center center no-repeat; margin-left: 20px; */}
.paging .page {text-align: left;text-indent: -9999px;}
.paging a { display: inline-block;width: 31px;height: 31px; vertical-align: top; text-align: center; line-height: 31px;padding-right:0px;margin-right:0px;}
.paging .current {background-color: #000;color: #fff;}

/*mypage*/
.my-wrap{position:relative; width:100%}
.my-top{position:relative; width:100%; margin-bottom:50px;}
.my-top>ul{overflow:hidden}
.my-top>ul>li{float:left; margin-left:1%; width:19.0%; box-sizing:border-box}
.my-top>ul>li:first-child{margin-left:0}
.my-top>ul>li a{display:block; text-align:center; width:100%; padding:10px 0; font-size:18px; transition:0.3s; border:1px solid #CCC; box-sizing:border-box}
.my-top>ul>li a.select{background-color:#ff9900; color:#FFF; border:1px solid #FF9900}
.my-top>ul>li:hover a{color:#FFF; background-color:#ff9900; border:1px solid #ff9900}
.my{border-top:2px solid #ff9900}
.my-title{position:relative; padding-bottom:10px;}
.my-title_te {
    display: flex;
    align-items: center;
}
.my-title_te span {
    margin-left: auto;
}
.my-title_te h2{font-size:25px; font-weight:bold}
.my-title h2{font-size:25px; font-weight:bold}
.my-title>ul{position:absolute; right:0; overflow:hidden; bottom:10px}
.my-title>ul>li{float:left; margin-left:5px}
.my-title>ul>li>a{display:block; background-color:#555; color:#FFF; padding:3px 0; width:100px; text-align:center; transition:0.5s}
.my-title>ul>li:hover>a{background-color:#333}
.my .en-title{width:200px; border-right:1px solid #CCC}
.my .en>li label{padding:10px; box-sizing:border-box}
.my .en>li{padding:0}
.my-table .board_btn a{background-color:#FF9900; padding:5px 10px}
.responsive{position:relative; width:100%; margin-top:50px}
.responsive>ul{overflow:hidden}
.responsive>ul>li{float:left; background-color:#f4f4f4; box-sizing:border-box; width:19.2%; margin-left:1%; text-align:center; font-size:18px; padding:10px 0}
.responsive>ul>li:first-child{margin-left:0}
.out{position:relative; text-align:right}
.out a{background-color:#555; color:#FFF; display:inline-block; padding:3px 10px; margin-top:10px; transition:0.5s}
.out a:hover{background-color:#333}
.apply table{position:relative; width:100%; border-top:2px solid #FF9900}
.apply table th{  font-size:16px; padding:10px 0; border-bottom:1px solid #AAA}
.apply table td{  font-size:16px text-align:center; padding:3px; box-sizing:border-box; border-bottom:1px solid #CCC; }
.apply table td.apply-con{text-align:left; border-left:1px solid #CCC; }
.apply table td + td{border-left:1px solid #CCC;}
.apply td button{padding:5px 10px; background-color:#555; color:#FFF;}
.change{position:relative; width:100%; border-top:2px solid #FF9900; border-bottom:1px solid #CCC}
.change>ul{overflow:hidden; max-width:800px; margin:0 auto}
.change>ul>li{float:left; display:table; width:50%; overflow:hidden}
.change>ul>li>div{display:table-cell; vertical-align:middle}
.change .pw-title{font-weight:bold; font-size:16px; width:120px; text-align:right}
.change .pw-con{padding:15px; box-sizing:border-box}
.change .pw-con input[type="text"]{border:1px solid #CCC; padding:5px; box-sizing:border-box}
.my-btn{position:relative}
.my-btn button{display:block; background-color:#FF9900; text-align:center; width:150px; padding:10px 0; margin:20px auto 0; color:#FFF;}
.my-btn2 button{background-color:#FF9900; text-align:center; width:100px; color:#FFF;}
.out-wrap{position:relative; width:100%; border-top:2px solid #FF9900; padding:15px; box-sizing:border-box; text-align:center; border-bottom:1px solid #CCC}
.out-wrap p{text-align:center; font-size:18px}
.out-wrap textarea{position:relative; border:1px solid #CCC; height:200px; width:800px; margin-top:20px}
.review{position:relative; border-top:2px solid #FF9900; width:100%}
.review>ul>li{padding:15px 0; border-bottom:2px solid #AAA; position:relative}
.review .re-top{position:relative}
.review>ul>li button{position:absolute; right:0; top:20px; background-color:#333; color:#FFF; padding:5px 15px}
.review .re-con{overflow:hidden}
.review .re-con>li{float:left; border:1px solid #CCC; font-size:16px; padding:10px 20px; text-align:center; margin-right:5px;}
.re-text{border:1px solid #CCC; padding:10px 20px; box-sizing:border-box; margin-top:10px; display:table; width:100%}
.re-text div{display:table-cell; font-size:16px}
.board-list table td.board-bottom{padding:0}
.board-con{text-align:left; border-bottom:1px solid #CCC; padding:10px; box-sizing:border-box; font-size:16px}
.board-reply{text-align:left; background-color:#f4f4f4; padding:10px; box-sizing:border-box; border-bottom:1px solid #AAA}
.board-reply h3{font-weight:500; padding:0 10px 10px 10px; border-bottom:1px solid #CCC; font-size:16px}
.board-reply p{padding:10px; box-sizing:border-box; font-size:16px}
.en-wrap .photo-wrap>div{vertical-align:middle}
.en-wrap .photo-wrap p{font-size:16px; margin-top:10px}
.en-wrap .photo-wrap p span{font-weight:500; font-size:18px}
.teach-my table{position:relative; width:100%; table-layout:fixed}
.teach-my table th{font-size:18px; padding:10px; box-sizing:border-box; width:160px; border-right:1px solid #CCC; border-bottom:1px solid #CCC}
.teach-my table td{border-bottom:1px solid #CCC; font-size:16px; padding:0 15px; box-sizing:border-box}
.teach-my .th2{border-left:1px solid #CCC}
.teach-my2 table{position:relative; width:100%; table-layout:fixed; background-color:#EEE;}
.teach-my2 table th{font-size:16px; padding:5px; box-sizing:border-box; width:160px; border:1px solid #CCC;}
.teach-my2 table td{border-bottom:1px solid #CCC; font-size:16px; padding:0 10px; box-sizing:border-box; border:1px solid #CCC; }
.teach-btn{position:relative; text-align:center; margin-top:20px}
.teach-btn>a{display:inline-block; background-color:#555; color:#FFF; padding:5px 10px; margin-left:10px}
.teach-bottom{position:relative; width:100%; background-color:#EEE; box-sizing:border-box; margin-top:10px}
.teach-bottom>ul{overflow:hidden}
.teach-bottom>ul>li{float:left; width:33.33%; font-size:16px; font-weight:500; display:table; border-bottom:1px solid #FFF}
.teach-bottom>ul>li>div{display:table-cell; vertical-align:middle}
.teach-bottom>ul>li>div.teach-title{width:160px; font-size:16px; font-weight:500; padding:5px; box-sizing:border-box; border-right:1px solid #FFF; border-left:1px solid #FFF}
.teach-bottom>ul>li:nth-child(3n+1) .teach-title{border-left:none}
.teach-bottom>ul>li:nth-child(3n+1) .teach-text{border-right:none}
.teach-bottom>ul>li>div.teach-text{font-size:16px; padding:0 10px; box-sizing:border-box;}
.teach-bottom>ul>li:last-child{width:100%; }
.teach-review>ul>li{width:50%}
.teach-text button{position:relative; background-color:#555; color:#FFF; padding: 5px 10px; font-size:16px}
.teach-mo .photo-text input[type="text"]{padding:5px; border:1px solid #CCC; display:block}
.teach-mo .photo-text input[type="file"]{margin-top:10px}
.teach-mo .my-btn{margin-bottom:20px}
.review-list{overflow:hidden; padding-bottom:20px;}
.review-list>li{float:left; width: 50%;; border-bottom: 1px solid #CCC; box-sizing: border-box; display: table;}
.review-list>li.re100{width:100%}
.review-list>li>div{display:table-cell}
.review-list .review-title{width:160px; font-size:18px; border-right: 1px solid #CCC; padding: 10px; text-align: center;}
.review-list .review-con{font-size:18px; padding:0 10px; box-sizing: border-box;}
.review-list>li:first-child .review-con{border-right:1px solid #CCC}
.review-list .review-con input[type="text"]{border:1px solid #CCC; padding: 5px; box-sizing: border-box;}
.review-list .review-con textarea{border: 1px solid #CCC; width: 90%; display: inline-block; box-sizing: border-box; height: 80px; vertical-align: middle; margin:10px 0;}
.review-list .review-con button{background-color:#555; color: #FFF; width: 9%; display: inline-block; height: 80px; line-height:80px;}
.fileDrop_t {
width: 150px;
height:160px;
border:1px dotted blue;
}
.uploadedList_t{
margin-top:1px;	
display: flex;
justify-content: space-between;
align-items: center;
}
.upload_child{
display: inline-block;
height: 160px;
}
#file_t{
display:none;
}
.fileDrop {
width: 25px;
height:25px;
border:1px dotted blue;
}
.uploadedList{
width: 25px;
height:25px;
}
#file{
display:none;
}
 .pparent{
    width: 100%;
    margin: 10px auto;
}
.ffirst {
   // border: 1px solid red;
    float: left;
    width:20%;
    box-sizing: border-box;
    text-align:left;
}
.ssecond{
  //  border: 1px solid green;
    float: left;
    margin-left: 5%;
    width:500px;
    box-sizing: border-box;
    font-size:16px;
    word-wrap: break-word;      
  	text-overflow: ellipsis;
  	overflow:hidden;
}

/*popup*/
.popup_layer {position:fixed;top:0;left:0;z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);padding:0;margin:0; }
/*팝업 박스*/
.popup_box{position: relative;top:40%;left:50%; overflow: auto; height: 220px; width:306px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);padding:0;margin:0;}
/*컨텐츠 영역*/
.popup_box .popup_cont {padding:50px;line-height:1.4rem;font-size:16px;padding:0;margin:0; }
.popup_box .popup_cont h2 {padding:15px 0;color:#333;margin:0;}
.popup_box .popup_cont p{ border-top: 1px solid #666;padding-top: 30px;}
/*버튼영역*/

/*popup*/
.popup_layer2 {position:fixed;top:0;left:0;z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);padding:0;margin:0; }
/*팝업 박스*/
.popup_box2{position: relative;top:45%;left:50%; overflow: auto; height: 200px; width:306px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);padding:0;margin:0;}
/*컨텐츠 영역*/
.popup_box2 .popup_cont {padding:50px;line-height:1.4rem;font-size:16px;padding:0;margin:0; }
.popup_box2 .popup_cont h2 {padding:15px 0;color:#333;margin:0;}
.popup_box2 .popup_cont p{ border-top: 1px solid #666;padding-top: 30px;}
/*버튼영역*/
/*오버레이 뒷배경*/
.popup_overlay{position:fixed;top:0px;right:0;left:0;bottom:0;z-index:1001;;background:rgba(0,0,0,0.5);}

.blink-text {animation: blinkColor 1s infinite;}
@keyframes blinkColor {
  0%   { color: #fff; }
  50%  { color: #ff9900; } /* 깜빡일 때 주황색으로 */
  100% { color: #fff; }
}

::placeholder {
  color: #AAA;
  font-size: 0.9em;
  font-weight: 400;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
  font-size: 0.9em;
  font-weight: 400;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: black;
  font-size: 0.9em;
  font-weight: 400;
  opacity: 1; /* Firefox */
} 

/* 메인팝업 레이어 start */

    #popup {
      display: none;
      position: fixed;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 360px;
      height: 20px;
      overflow-y: none;
      background-color: white;
      border: 1px solid #ccc;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      padding: 15px;
      box-sizing: border-box;
      border-radius: 10px;
      z-index: 999;
    }

    #mainTextarea {
      width: 100%;
      height: 300px;
      resize: none;
      box-sizing: border-box;
    }

    .closeBtn {
      display: block;
      margin-top: 10px;
      padding: 6px 12px;
      background-color: #f44336;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    
     .closeBtn2 {
      display: block;
      margin-top: 10px;
      padding: 6px 12px;
      background-color: #f44336;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    
      .openMatchBtn {
      display: block;
      margin-top: 10px;
      padding: 6px 12px;
      background-color: #10113C;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    #overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 998;
    }
    
    .container {
      max-width: 720px;
      margin: auto;
      background: #ffffff;
      padding: 10px;
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      z-index: 9999; /* 다른 요소보다 높게 설정 */
    }
    
       .setti {
      width: 100%;
      padding: 5px;
      margin-top: 2px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      font-size: 14px;
      transition: border 0.2s;
    }

  /* 메인팝업 레이어 end */

#chat-channel-button {
position:fixed;
z-index:999;
right: 20px;
bottom:20px;
}


.form-wrapper {
  display: flex;
  gap: 10px; /* 옆 간격 */ 
  padding: 0px;
}

.setti-block {
  flex: 1;
  min-width: 250px; /* 너무 작아지지 않도록 */
}

.btn-text-switch::after {
  content: attr(data-pc);
}

.teacherMypageBarHeight{
	height:40px;	
}

@media all and (max-width:1650px) {

.mid{height:900px}
.mid-img img{width:500px}	
.mid-text{}
.mid-text img{width:600px}

.left-banner{width:120px; bottom:30px}
.left-banner.fixed{bottom:30px}
.left-banner p{font-size:16px; width:90px}
}
@media all and (max-width:1600px) {

.tri-wrap{width:350px; margin-top:-504px}
.tri{border-bottom: 350px solid transparent;
  border-top: 350px solid transparent;
  border-left: 400px solid #b09dff;
  border-right: 0 solid transparent; 	}
.tri-text{top:78%}
.tri-wrap p{font-size:20px}
.tri-wrap p span{font-size:24px}
}
@media all and (max-width:1500px) {

.slide-text{padding-left:100px}	
.slide-text p{font-size:45px; line-height:50px}
.slide-more{left:400px}
.nn {height:5px;}
}
@media all and (max-width:1400px) {

.mid{height:700px}
.mid-img img{width:400px}
.mid-text img{width:500px}	
}
@media all and (max-width:1300px) {

.wrap{width:95%}	

.info-box h3{font-size:16px}
.info-box li{font-size:16px}
.info-text p{font-size:16px;word-break: keep-all;word-wrap: break-word;}
}
@media all and (max-width:1250px) {

.tri-wrap{display:none}
.cording>div{padding:50px 0}
.cord1 img{padding-left:0; max-width:800px !important}
.cord1 p{font-size:30px;font-family:'GongGothicLight'; margin-top:30px; display:block}
.cord1 p span{font-size:35px; font-weight:bold}
.cord2 p span{font-size:35px}
.cording>div img{max-width:700px !important}

.left-banner{display:none}

.sub{width:95%; margin:0 auto}
}
@media all and (max-width:1200px) {

.logo img{width:200px}
.gnb{margin-left:-200px; top:25px}
.gnb>ul>li{padding:0 10px}
.gnb>ul>li>a{font-size:20px}
.head-right{right:10px;top:25px}	
.head-right>ul>li>a{font-size:14px; width:100px}

.check-box label{font-size:18px}
.check-box2 label{width:33.33%}
.check-box2 label:nth-child(n+6){margin-top:0}
.check-box2 label:nth-child(n+4){margin-top:10px}

.teacher-wrap>ul>li{margin-left:1%; width:32.66%;}
.info-box{display:block}
.info-box>div{display:block;}
.info-box .info-img img{width:150px;}

.info-box .info{padding:10px 0}
.info-box ul{overflow:hidden}
.info-box li.wd100{width:100%}
.info-box>div li span{width:50%; margin-right:0; display:inline-block}
.info-text{ margin-top:0}

.mid{height:550px}
.mid-img img{width:300px}
.mid-text img{width:350px}
}

@media all and (max-width:1050px) {

.nn {height:5px;}
.slide-text{padding-left:50px}
.slide-text img{width:300px !important; margin-bottom:0}
.slide-text p{font-size:35px; line-height:50px}
.slide-more{left:300px}

.teach-bottom>ul>li{font-size:16px}
.teach-my table th{font-size:16px; width:120px}
.teach-my table td{font-size:16px}
.teach-bottom>ul>li{width:50%}
.teach-bottom>ul>li>div.teach-title{font-size:16px}
.teach-bottom>ul>li>div.teach-text{font-size:16px}
.teach-bottom>ul>li:nth-child(3n+1) .teach-title{border-left:1px solid #FFF}
.sub-title h2{font-size:26px; text-shadow:2px 2px 3px #555}
}
@media all and (max-width:950px) {
	
}
@media all and (max-width:900px) {
.logo{padding:10px 0 10px 10px}
.logo img{width:150px}
.gnb{margin-left:-180px}
.gnb>ul>li{padding:0 10px}
.gnb>ul>li>a{font-size:18px}
.nn {height:5px;}
.slide-text img{width:250px !important}
.slide-text p{font-size:30px; line-height:35px}
.slide-more{left:220px}
.slide-more a{font-size:15px; height:30px; line-height:30px; width:150px}
.slide-more a::after{height:30px; width:150px}	
.mid-img{left:20px}
.mid-text{right:70px}
.my-top>ul>li a{font-size:16px}
.responsive>ul>li{font-size:16px}
.out-wrap p{font-size:16px}
.out-wrap textarea{width:100%; margin-top:10px}
.review .re-con>li{font-size:16px}
.re-text div{font-size:16px}
.review>ul>li button{position:relative; top:auto; width:100%; margin-top:10px; padding:10px}
.com-logo img{width:180px}

}

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

.search-box{width:100%;}
.teacher-wrap>ul>li{width:49%; margin-left:2%}
.teacher-wrap>ul>li:nth-child(3n+1){margin-left:2%}
.teacher-wrap>ul>li:nth-child(2n+1){margin-left:0}
.teacher-wrap>ul>li:nth-child(n+4){margin-top:0}
.teacher-wrap>ul>li:nth-child(n+3){margin-top:20px}
.cording>div img{width:90%}
.sub{padding:20px 0}
.board-list table th{font-size:16px}
.board-list table td{font-size:16px}
.board-list table td a{font-size:16px}
.en>li label{font-size:16px}
.en-title{width:100px}
.my-top{margin-bottom:30px}
.change .pw-title{font-size:16px}
.apply{width:950px}
.teach-my table th{float:left; clear:both; width:30%; font-size:16px}
.teach-my table td{float:left; width:65%; padding:10px; box-sizing:border-box;}
.teach-my .th2{border-left:none}
.teach-bottom>ul>li{width:50%}
.teach-bottom>ul>li>div.teach-title{font-size:16px; width:110px}
.teach-bottom>ul>li>div.teach-text{font-size:16px}
.foot-logo img{width:180px}
.review-list .review-title{font-size:16px; width: 100px;}
.review-list .review-con{font-size:16px}
.review-list .review-con textarea{width:80%}
.review-list .review-con button{width:19%; vertical-align: middle;}
}

@media all and (max-width:768px) {
.teacherMypageBarHeight{
	height:60px;	
}	
 .btn-text-switch::after {
    content: attr(data-mobile);
  }
.wid { width:100%; height:auto;padding:50px 5%;}
.mob{display:block !important}
.pc{display:none !important}
.info-text_teacher{margin-top:10px; width:100%;}
.mob-btn{position:absolute; top:10px; right:10px; cursor:pointer}
.mob-btn i{color:#FFF; font-size:40px; }
.gnb-wrap{position:fixed; width:250px; height:100%; right:-250px; top:0; background-color:#ff9900;}
.mob-close{position:absolute; top:10px; right:10px; cursor:pointer; z-index:99}
.mob-close i{color:#FFF; font-size:20px}
.gnb{margin-left:0; left:0; position:relative; top:auto; padding-top:100px}
.gnb>ul{display:block}
.gnb>ul>li{display:block; padding:10px 5px; width:100%}	
.gnb>ul>li>a{font-size:16px; color:#FFF !important}
.head-right{right:auto; left:0}
.head-right>ul>li>a{font-size:14px; width:80px; margin-left:5px; background-color:#555}
.sub-title{transform:translateY(-30%)}
.sub-title p {font-size:22px; font-weight:bold}
.sub-title p br{display:block;}
.nn {height:5px;}
.slide-text{top:40%; transform:translateY(-100%);}
.slide-text img{width:auto !important}		
.check-box>p{font-size:18px}
.check-box label{font-size:16px}
.check-box2 label{width:50%}	
.check-box2 label:nth-child(n+4){margin-top:0}
.check-box2 label:nth-child(n+3){margin-top:10px}
.info-box>div li span{display:block; width:100%;}
.mid{height:580px; background-position:left}
.mid-text{right:50%; margin-right:-150px; top:50px}
.mid-text img{width:300px}
.mid-img{left:50%; margin-left:-125px}
.mid-img img{width:250px}
.cord1 p{font-size:20px}
.cord1 p span{font-size:22px}
.cord2 p span{font-size:22px}
.cord2 p{font-size:20px}
.sub-banner{height:300px}
.bg{background-size:cover;}
.photo-wrap{display:block}
.photo-wrap>div{display:block}
.photo{margin:0 auto}
.photo-text{padding:0px 10px 0px 10px;}
.photo-text h3{font-size:20px}
.review .re-con>li{width:100%; float:none; margin-left:0; box-sizing:border-box}
.review .re-con>li:nth-child(n+2){margin-top:5px}
.change>ul>li{float:none; width:100%}
.change .pw-title{text-align:left; padding:0 10px; box-sizing:border-box; width:130px}
.change .pw-con{padding:10px 15px}
.paging a.num{display:none}
.com-top{margin:0 auto 30px}
.com-top h2{font-size:22px}
.com-con h3{font-size:22px; margin-bottom:15px}
.com-con>ul>li{padding:10px}
.com-con>ul>li h4{font-size:18px}
.com-con>ul>li>ul>li{font-size:16px; line-height:25px}
.logout-wrap{padding:50px 0}
.logout-wrap p{font-size:20px}
.logout-wrap a{font-size:16px}

 .form-wrapper {
    flex-direction: column;
  }
  

}

@media all and (max-width:600px) {
.nn {height:5px;}	
.slide-text{top:40%; padding-left:20px}
.slide-text img{width:200px !important}	
.slide-text p{font-size:25px; line-height:15px}
.slide-more{bottom:-30px; left:160px}
.sub-banner{height:180px}
.sub .title{font-size:24px}
.teacher-wrap>ul>li{width:100%; margin-left:0}
.teacher-wrap>ul>li:nth-child(3n+1){margin-left:0}
.teacher-wrap>ul>li:nth-child(n+3){margin-top:0}
.teacher-wrap>ul>li:nth-child(n+2){margin-top:10px}
.info-box{display:table}
.info-box>div{display:table-cell}
.info-img{width:150px}
.info-box .info{padding:10px}
.info-text .info-btn>ul>li{float:left; display:block; width:49%; margin-left:2%;}
.info-text .info-btn>ul>li:first-child{margin-left:0}
.info-text .info-btn>ul>li a{width:100%; display:block; text-align:center; padding:3px 0;}
.check-box .check br{display:block}
.info-text_teacher{margin-top:10px; width:100%;}
.en>li{display:block; width:100%; padding:0}
.en>li>div{display:block; width:100%; padding:10px; box-sizing:border-box}
.en-title{background-color:#f4f4f4;height:40px;}
.en-title_in{background-color:#f4f4f4;height:120px;}
.en>li label{text-align:left;line-height: 1px;}
.en>li label br{display:none}
.board-list table th{font-size:16px}
.board-list table td a{font-size:16px}
.board-list table td{font-size:16px}
.board-con{font-size:16px}
.board-reply h3{font-size:16px}
.board-reply p{font-size:16px}
.view_title{padding:16px}
.view_title p{font-size:16px}
.view_contents{padding:20px}
#bo_v_file li{padding:0}
.my-top>ul>li{width:32.66%; }
.my-top>ul>li:nth-child(3n+1){margin-left:0}
.my-top>ul>li:nth-child(n+4){margin-top:1%}
.my-top>ul>li:nth-child(4), .my-top>ul>li:nth-child(5){width:49.5%}
.my-title h2{font-size:20px}
.my .en-title{width:100%; border-right:none}
.my .en-con{padding:10px; box-sizing:border-box}
.responsive>ul>li{width:32.66%}
.responsive>ul>li:nth-child(3n+1){margin-left:0}
.responsive>ul>li:nth-child(n+4){margin-top:1%}
.responsive>ul>li:nth-child(4), .responsive>ul>li:nth-child(5){width:49.5%}
.teach-bottom>ul>li{width:100%; font-size:16px}
.my-btn button{width:100px}
.copy span{display:block}
.copy br{display:none}
.com-top .com-logo{top:auto; bottom:0}
.com-top .com-logo img{width:120px}
.com-con>ul>li p{font-size:16px}
.logout-wrap{width:300px}
.logout-wrap p{font-size:16px}
.logout-wrap p br{display:block}
.review-list>li{width:100%}
.review-list>li:first-child .review-con{border-right: none;}
.review-list .review-title{font-size:16px; width: 80px;}
.review-list .review-con{font-size:16px}
.review-list .review-con textarea{width:100%; margin-bottom: 5px;}
.review-list .review-con button{width:100%; height: 30px; line-height:30px; margin-bottom: 10px;}
.radio-text{display:block; margin-top: 5px;}

.wid { width:100%; height:auto;padding:50px 5%;}
}

 /* 반응형 - 작은 화면 대응 */
@media all and (max-width:480px) {
	  .container {
	  max-width: 320px;
	  margin: auto;
	  background: #ffffff;
	  padding: 5px;
	  border-radius: 16px;
	  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	}
	.check-box label{pading:0; font-size:16px}	    
	.slide-text p{font-size:25px; line-height:20px}  
	.wid { width:100%; height:auto;padding:50px 5%;}
}

@media all and (max-width:360px) {
.check-box label{pading:0; font-size:14px}	  	
.gnb>ul{display:block}
.gnb>ul>li{display:block; padding:10px 5px; width:100%}	
.gnb>ul>li>a{font-size:16px; color:#FFF !important}
.slide-text p{font-size:16px; line-height:15px}
.fontsize {font-size: 14px;}	
.fontsize1412{font-size:12px;} 
.fontsize1513{font-size:13px;} 
.fontsize1614 {font-size:14px;}
.fontsize1816{font-size:16px;}
.catefont1816{font-size: 16px !important;}
.catefont1614{font-size: 14px !important;}
.apply table th{  font-size:14px; padding:10px 0; border-bottom:1px solid #AAA}
.apply table td{  font-size:14px; text-align:center; padding:10px; box-sizing:border-box; border-bottom:1px solid #CCC;}
.wid { width:100%; height:auto;padding:50px 5%;}
.paging_s .page-link {
    display:inline-block;
    width:25px;
    padding:0;
    margin:0;    
    text-align:center;
    font-size:14px; /* font-size:0 해제 */
}

}

@keyframes pulseSafe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(57, 161, 255, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(57, 161, 255, 0.8);
  }
}

@keyframes mainh2 {
	0%{opacity:0; transform:translateY(50%)}
	100%{opacity:1; transform:translateY(10%)}
 }
 @keyframes mainp {
	0%{opacity:0; transform:translateY(50%)}
	100%{opacity:1; transform:translateY(10%)}
 }
  @keyframes more {
	0%{opacity:0; bottom:-60px}
	100%{opacity:1; bottom:-40px}
 }