@media screen and (max-width:1400px){
    
}
@media screen and (max-width:1300px){
    
    .sections .width_con {width: 100%; padding: 80px 20px;}
    
    
    #header .width_con {padding: 0 10px;}
    #header .width_con .nav_con .nav li {margin: 0 12px 0 0;}
    #header .width_con .nav_con .nav li:last-child {margin: 0;}
    
    .section_00 .width_con {padding: 0;}
    .section_00 .width_con .title_con {width: 100%;padding: 0 20px;}
    
    .section_01 .width_con {padding: 0;}
    
    .sections.footer .width_con {padding: 56px 10px;}
    .sections.footer .width_con .footer_row ul {flex-wrap: wrap}
    .sections.footer .width_con .footer_row ul li {margin: 0 10px 0 0;}
    .sections.footer .width_con .footer_row select {display: none;}
    
    .wrap.bbs .section_03 .width_con {padding: 30px 20px;}
    .wrap.bbs .section_00 .width_con .bbs_title_con {position: absolute; top: 50%; left: 0; transform: translateY(-50%); padding: 20px;}
    .wrap.bbs .section_00 .width_con .bbs_title_con h3 {font-size: 60px; font-weight: 600; line-height: 125%; color: #fff;}
    .wrap.bbs .section_00 .width_con .bbs_title_con p {margin: 16px 0 0 0; font-size: 20px; font-weight: 400; line-height: 135%; color: #fff;}
    
    .wrap.ai_homepage .section_04 .width_con .list_con .scroll_con {width: calc(100%);}
    
}
@media screen and (max-width:960px){
    
    #header .width_con .btn_open_nav {display: block;}
    #header .width_con .nav_con {position: fixed; top: 80px; right: -100vw; width: 100vw; height: calc(100vh - 80px); overflow-y: scroll; background: #fff; box-sizing: border-box; transition: all 250ms ease-in-out;}
    body.open_nav #header .width_con .nav_con {right: 0;}
    body.open_nav #header .width_con .nav_con::-webkit-scrollbar {display: none;}
    #header .width_con .nav_con .nav {flex-direction: column; align-items: flex-start;}
    #header .width_con .nav_con .nav li {margin: 0 0 24px 0;}
    #header .width_con .nav_con .nav li:last-child {margin: 0;}
    #header .width_con .nav_con .nav li a {}
    
    .ai_director {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 22px 0 0 0; padding: 0;}
    .ai_director li {width: 100%; margin: 0 0 32px 0; border-radius: 14px; background: #fff; overflow: hidden; padding: 16px 20px; display: flex; align-items: center; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);}
    .ai_director li:last-child {margin: 0;}
    .ai_director li .img_con {position: relative; width: 80px; height: 80px; margin: 0 16px 0 0; border-radius: 999px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
    .ai_director li .img_con img {width: 140%;}
    .ai_director li .desc_con {width: calc(100% - 80px); padding: 26px 0px; display: flex; flex-direction: column; align-items: flex-start; font-family: 'pretendard', sans-serif;}
    .ai_director li .desc_con .txt_con {}
    .ai_director li .desc_con .txt_con .rank_medal {position: relative; display: none; width: 124px; height: 28px; padding: 6px 14px 6px 10px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.00);}
    .ai_director li .desc_con .txt_con .tit {}
    .ai_director li .desc_con .txt_con .tit h4 {font-size: 24px; font-weight: 700; font-family: 'pretendard', sans-serif; margin: 0 10px 0 0;}
    .ai_director li .desc_con .txt_con .tit h4 span {font-size: 16px; font-weight: 500;}
    .ai_director li .desc_con .txt_con p {font-size: 16px; color: #45556C; font-weight: 400; line-height: 24px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .ai_director li .desc_con a {display: none;}
    .ai_director li.rankings {margin: 0 0 40px 0; padding: 0;}
    .ai_director li.rankings .img_con {width: 120px; height: 100%; display: flex; justify-content: center; align-items: flex-start; border-radius: 0; margin: 0;}
    .ai_director li.rankings .img_con img {width: 200%;}
    .ai_director li.rankings .app_director img {width: 200%; height: 100%; margin-top: 0px;}
    .ai_director li.rankings .desc_con {width: calc(100% - 120px); margin: 0; padding: 32px 16px; justify-content: space-between; align-items: flex-start;}
    .ai_director li.rankings .desc_con .txt_con {}
    .ai_director li.rankings .desc_con .txt_con .tit {margin: 18px 0 0 0; flex-direction: column; align-items: flex-start;}
    .ai_director li.rankings .desc_con .txt_con .tit h4 {margin: 0 0 10px 0;}
    .ai_director li.rankings .desc_con .txt_con .rank_medal { display: inline-block;}
    .ai_director li.rankings .desc_con .txt_con .rank_medal:before {position: absolute; top: 50%; left: 10px; content: ''; width: 16px; height: 16px; transform: translateY(-50%);}
    .ai_director li.rankings .desc_con .txt_con .rank_medal:after {position: absolute; top: 50%; left: 30px; content: '우수 학습설계사'; font-size: 13px; font-weight: 500; color: #0F172B; transform: translateY(-50%);}
    .ai_director li.rankings .desc_con a {display: flex; align-items: flex-end; width: 160px; padding: 18px 24px; border-radius: 8px; margin: 10px 0 0 0 ;}
    .ai_director li.rankings .desc_con a span {font-size: 16px; font-weight: 700; color: #fff; margin: 0 10px 0 0;}
    .ai_director li.rankings .desc_con a img {}
    
    .section_00 .width_con .title_con {text-align: left;}
    .section_00 .width_con .title_con h3 {font-size: 48px;}
    .section_00 .width_con .title_con h3 span {font-size: 56px;}
    .section_00 .width_con .title_con p {}
    
    .section_02 {}
    .section_02 .width_con {padding: 80px 20px; justify-content: center; flex-wrap: wrap;}
    .section_02 .width_con .title_con {width: 100%; margin: 0 0 48px 0;}
    .section_02 .width_con .title_con h3 {font-size: 40px; font-weight: 700; color: var(--txt-color-01);}
    .section_02 .width_con .title_con p {margin: 26px 0 0 0; font-size: 20px; color: #45556C;}
    .section_02 .width_con .img_con {width: 100%;}
    
    .wrap.ai_chatbot .section_03 .width_con .v_con {margin: 42px 0 0 0;}
    .wrap.ai_chatbot .section_03 .width_con .v_con li {width: calc(50% - 10px); padding: 30px 20px;}
    
    .wrap.ai_chatbot .section_05 .width_con .v_con {margin: 48px 0 0 0; padding: 0; background: transparent; border: none; box-shadow: none;}
    .wrap.ai_chatbot .section_05 .width_con .v_con li {width: 100%; margin: 0 0 24px 0; background: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);}
    
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con {width: 100%; bottom: 20px;}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con {}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h5 {font-size: 20px;}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h3 {font-size: 42px; letter-spacing: -0.5px;}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h3 span {font-size: 32px; letter-spacing: -0.35px;}
    
    
    .wrap.ai_homepage .section_03 {}
    .wrap.ai_homepage .section_03 .width_con {}
    .wrap.ai_homepage .section_03 .width_con .v_con {margin: 48px 0 0 0;}
    .wrap.ai_homepage .section_03 .width_con .v_con li {width: 100%; margin: 0 0 20px 0;}
    .wrap.ai_homepage .section_03 .width_con .v_con li .desc_con {padding: 30px 20px; text-align: left; background: rgba(0, 0, 0, 0.2); justify-content: flex-start; align-items: flex-start; opacity: 1; filter: blur(0px); transition: all 300ms ease-in-out;}
    .wrap.ai_homepage .section_03 .width_con .v_con li .desc_con h5 {font-size: 20px; font-weight: 700; line-height: 140%; color: #fff; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.40);}
    .wrap.ai_homepage .section_03 .width_con .v_con li .desc_con p {margin: 8px 0 0 0; font-size: 18px; color: #fff; text-shadow: 0 3px 5px rgba(0, 0, 0, 0.40);}
    
    
    .wrap.ai_homepage .section_05 .width_con .v_con {margin: 48px 0 0 0; padding: 0; background: transparent; border: none; box-shadow: none;}
    .wrap.ai_homepage .section_05 .width_con .v_con li {width: 100%; margin: 0 0 24px 0; background: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);}
    .wrap.ai_app .section_05 .width_con .img_con img {width: calc(100% / 3 - 45px);}
    
    .wrap.ai_homepage .section_06 {}
    .wrap.ai_homepage .section_06 .width_con {padding: 100px 20px 80px 20px;}
    .wrap.ai_homepage .section_06 .width_con .v_con {margin: 54px 0 0 0;}
    .wrap.ai_homepage .section_06 .width_con .v_con li {width: 100%;}
    .wrap.ai_homepage .section_06 .width_con .v_con li .desc_con p {display: none;}
    .wrap.ai_homepage .section_06 .width_con .v_con li .desc_con p.mob {display: inline-block;}
    
    .wrap.ai_app .section_04 .width_con .v_con {margin: 48px 0 0 0; padding: 0; background: transparent; border: none; box-shadow: none;}
    .wrap.ai_app .section_04 .width_con .v_con li {width: 100%; margin: 0 0 24px 0; background: #fff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);}
    
    .wrap.bbs .section_00 .width_con .bbs_title_con h3 {font-size: 40px;}
    .wrap.bbs .section_00 .width_con .bbs_title_con p {font-size: 20px;}
    .wrap.bbs .section_05 .width_con {padding: 40px 20px;}
    .wrap.bbs .section_05 .width_con .input_list li:nth-child(1) {flex-wrap: wrap;}
    .wrap.bbs .section_05 .width_con .input_list li:nth-child(1) .input_con {width: 100%; margin: 0 0 12px 0;}
    .wrap.bbs .section_05 .width_con .btn_con {justify-content: center;}
}
@media screen and (max-width:767px){
    .section_00 .width_con .img_con {height: 400px; background: url(../img/aichatbot/img_banner_m.png) center right no-repeat; background-size: cover;}
    .section_00 .width_con .img_con img {display: none;}
    .wrap.bbs .section_00 .width_con .img_con {height: auto; background: #fff; background-size: cover;}
    .wrap.bbs .section_00 .width_con .img_con img {display: inline; height: 200px;}
    
    .wrap.ai_app .section_03 .width_con .pc_con,
    .wrap.ai_app .section_05 .width_con .pc_con {display: none;}
    .wrap.ai_app .section_03 .width_con .mob_con,
    .wrap.ai_app .section_05 .width_con .mob_con {display: block;}
    
    .wrap.bbs .section_03 .width_con .list_con .rows .cols.col1 {width: 20%;}
    .wrap.bbs .section_03 .width_con .list_con .rows .cols.col2 {width: 40%;}
    .wrap.bbs .section_03 .width_con .list_con .rows .cols.col3 {width: 25%;}
    .wrap.bbs .section_03 .width_con .list_con .rows .cols.col4 {display: none;}
    .wrap.bbs .section_03 .width_con .list_con .rows .cols.col5 {display: none;}
    .wrap.bbs .section_03 .width_con .list_con .rows .cols.col6 {width: 15%;}
    
    .wrap.ai_homepage .section_04 .width_con .list_con {position: relative; width: 100%; height: auto; margin: 48px 0 0 0;}
    .wrap.ai_homepage .section_04 .width_con .list_con .scroll_con {position: relative; top: auto; left: auto;  height: auto; overflow: auto; padding: 0;}
    .wrap.ai_homepage .section_04 .width_con .v_con {position: relative; top: auto; left: auto; flex-direction: column; justify-content: center; align-items: center; padding: 0;}
    .wrap.ai_homepage .section_04 .width_con .v_con li.exams {position: relative; margin: 0 0 24px 0; width: 100%; height: 160px;}
    .wrap.ai_homepage .section_04 .width_con .v_con li.exams a {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
    .wrap.ai_homepage .section_04 .width_con .v_con li.exams img {position: absolute; width: 100%; height: auto;}
    .wrap.ai_homepage .section_04 .width_con .v_con li.exams h3 {font-size: 32px;}
    
    .wrap.bbs .section_05 .width_con .input_list li .input_con {flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    .wrap.bbs .section_05 .width_con .input_list li .input_con h5 {width: auto; padding: 0; margin: 0 0 10px 0;}
    .wrap.bbs .section_05 .width_con .input_list li .input_con input {width: 100%;}
    .wrap.bbs .section_05 .width_con .input_list li .input_con select {width: 100%;}
    .wrap.bbs .section_05 .width_con .input_list li .input_con textarea {width: 100%;}
}
@media screen and (max-width:560px){
    
    br.mob {display: inline;}
    
    .wrap .sections.review .width_con .list_con .btn_con a span {display: none;}

    .section_00 .width_con .title_con h3 {font-size: 32px;}
    
    .section_01 .width_con ul.tab_list li {padding: 10px 8px; margin: 0 12px 0 0;}
    .section_01 .width_con ul.tab_list li:last-child {margin: 0;}
    
    .wrap.ai_chatbot .section_03 .width_con .v_con li {width: 100%; padding: 30px 20px;}
    .wrap.ai_chatbot .section_06 .width_con .main_con img {width: 100%;}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con {padding: 10px 20px;}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h5 {font-size: 16px;}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h3 {font-size: 32px; letter-spacing: -0.5px;}
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h3 span {font-size: 22px; letter-spacing: -0.35px;}
    
    .wrap.bbs .section_00 .width_con .bbs_title_con h3 {font-size: 26px;}
    .wrap.bbs .section_00 .width_con .bbs_title_con p {font-size: 14px;}
    
    
}
@media screen and (max-width:360px){

    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h3 span,
    .wrap.ai_chatbot .section_06 .width_con .main_con .msg_con .msg .txt_con h3 {white-space: nowrap;}
    
    
}