@charset "utf-8";

/* main */
/* visual */
main section { padding: 80px 0 60px; }
main .tit { margin-bottom: 20px; }
main .btn_wrap { margin-top: 32px; }

.main_visual { position: relative; padding: 240px 0 220px; }
.main_visual::before {content: ''; position: absolute; bottom: 0; left: 0; width: 425px; height: 482px; background: url("/images/egovframework/visual_bg_left-30bc9de37c083a361ee308cbe7e26012.png") no-repeat; }
.main_visual::after {content: ''; position: absolute; right: 0; bottom: -50px; width: 596px; height: 655px; background: url("/images/egovframework/visual_bg_right-25c9d67e92ad0980a819499aa63e6da4.png") no-repeat; }

.main_txt { position: relative; z-index: 9; }
.main_txt h1 { margin-bottom: 40px; font-size: 60px; line-height: 76px; }
.main_txt h1 b { display: block; color: #007ed5; font-weight: 700; }
.main_txt p { color: #777; font-size: 19px; }

/* 서비스 소개 */
.api_service { background: #f5f7fa; }

.api_service_wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.api_service_wrap::before {content: ''; position: absolute; bottom: -54px; left: -76px; width: 112px; height: 89px; background: url("/images/egovframework/api_ser_img01-c07ad1dc157e6ae3a7fc56d27b09f810.png") no-repeat; }
.api_service_wrap::after {content: ''; position: absolute; right: -110px; bottom: 52px; width: 149px; height: 111px; background: url("/images/egovframework/api_ser_img02-40558daeedb1cb0fd3792debe94da3b7.png") no-repeat; }

.api_service_box { z-index: 9; overflow: hidden; border: 1px solid #c1d2eb; border-radius: 5px; }
.api_service_box p { display: flex; justify-content: center; align-items: center; min-height: 130px; padding: 20px; color: #333; background: #edf1f7; font-size: 19px; font-weight: 600; line-height: 24px; text-align: center; }

.api_service_link { width: 100%; }
.api_service_link li { border-top: 1px solid #c1d2eb; }
.api_service_link li a { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 14px 20px; background: #fff; }
.api_service_link li a:hover { color: #1352b2; background: #f7f9fd; }

/* 연구소개 */
/* .research_intro_wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 10px; }

.res_intro_box { display: flex; flex-wrap: wrap; align-content: space-between; gap: 10px; min-height: 160px; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
.res_intro_box:hover { background: #f7f9fd; border-color: #7caaef; }
.res_intro_box p { color: #333; font-size: 19px; font-weight: 600; line-height: 24px; }

.res_intro_box > div { width: 100%; }
.res_prog_wrap { display: flex; gap: 5px; margin-bottom: 16px; }
.res_prog_wrap span { padding: 4px 8px; color: #fff; border-radius: 5px; font-size: 14px; }
.res_prog_wrap span.green { background: #5dd489; }
.res_prog_wrap span.blue { background: #82b1f0; }
.res_prog_wrap span.red { background: #ec9191; }
.res_prog_wrap span.grey { background: #b8b8b8; }

.res_intro_box em { width: 100%; color: #777; font-size: 16px; } */

/* 기술 문의 배너 */
.main_banner { padding: 70px 0; background: #1a1779; text-align: center; cursor: pointer; }
.main_banner::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url("/images/egovframework/main_banner-9f9519b93fac7241daa949b3ff3b2567.png") no-repeat; }
.main_banner h1 { position: relative; z-index: 9; margin-bottom: 16px; color: #fff; font-size: 40px; }
.main_banner p { position: relative; z-index: 9; color: #fff; font-size: 18px; }



/* 컨택트 팝업 : S */
.pop_wrap { position: fixed; width: 100%; min-height: 100%; height: calc(var(--vh, 1vh) * 100); background: rgba(0, 0, 0, 0.3); z-index: 999999999; }
.pop_scroll { height: 100%; }
.pop_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 648px; font-family: 'Nanum Square'; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background: #fff; }

.contact_pop .pop_scroll { display: flex; }
.contact_pop .pop_box { height: calc(var(--vh, 1vh) * 90); }


.pop_head { display: flex; justify-content: space-between; padding: 12px 20px; background: #172f5c; }
.pop_head h3 { color: #fff; }
.pop_head button { color: #fff; font-size: 18px; opacity: .8; }
.pop_head button:hover { opacity: 1; }

.pop_left_scroll { width: 440px; min-height: 100%; overflow: auto; }
.pop_left { position: relative; height: 100%; min-height: 480px; padding: 40px; background: #f9821e; }
.pop_left:after { content: ''; position: absolute; right: 40px; bottom: 32px; width: 110px; height: 125px; background: url('/images/egovframework/contact_icon-f6cf604bdac5988a3f449456a7f33485.png') no-repeat center; }
.pop_ltop span { display: block; margin-bottom: 6px; color: #fff; font-size: 24px; }
.pop_ltop h2 { margin-bottom: 21px; color: #fff; font-weight: 700; font-size: 60px; line-height: 1; }
.pop_ltop p { color: #ffdcbf; font-size: 18px; line-height: 28px; word-break: keep-all; }
.pop_ltop p br { display: none; }

.close_btn { margin-bottom: 25px; font-size: 32px; color: rgba(255,255,255,0.6); }
.close_btn:hover { color: rgba(255,255,255,1); }

.pop_lbottom { position: absolute; bottom: 40px; }
.pop_lbottom li { margin-bottom: 16px; font-family: 'NotosansKR'; }
.pop_lbottom li:last-of-type { margin-bottom: 0; }
.pop_lbottom li span { display: block; margin-bottom: 4px; font-size: 16px; color: #ffdcbf; }
.pop_lbottom li strong { font-size: 16px; color: #fff; }
.pop_right_cont { position: relative; width: 560px; }
.pop_right { height: calc(100% - 65px); overflow: auto; }
.pop_right > .pop_Rcont { padding: 40px; }
.pop_Rcont { padding: 36px; overflow: auto; }

.input_cont.column2 { display: block; }
.input_cont.column2 label:first-of-type { display: flex; align-items: center; gap: 16px; width: auto; }
.input_cont.column2 label:last-of-type { width: 100%; }

.check_box span { text-decoration: underline; }

.pop_btn { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; }
.pop_btn > button { width: 100%; color: #fff; font-size: 20px; font-weight: 700; background: #333; line-height: 65px; }
.pop_btn > button:hover { background: #000; }

/* input */
.contact_pop input[type="text"] + label { padding: 16px 0 12px 0; }
.contact_pop input[type="password"],
.contact_pop input[type="text"],
.contact_pop select { width: 100%; padding: 16px 0 12px 0; border: none; font-size: 16px; color: #333; }
.contact_pop select { height: unset; padding-right: 34px; color: #777; background: url('/images/egovframework/sel_arrow-a46c5ffa85fe7a666fdb8f9762b34561.png') no-repeat bottom 20px right 10px; line-height: unset; }
.contact_pop textarea { width: 100%; height: 120px; padding: 16px; border-color: #ddd; resize: none; font-size: 14px; font-weight: 300; color: #777; font-family: 'NotosansKR'; }
/* 컨택트 팝업 : E */



/* models 페이지 : S */
/* document */
.sub .cont_wrap { position: relative; left: 280px; min-width: 320px; width: calc(100% - 280px); height: calc(100% - 70px);  }
.sub .cont_wrap.snb_hide { left: 0; width: 100%; }

/* snb */
#snb { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; gap: 10px; position: fixed; width: 280px; height: calc(100% - 70px); padding: 20px; background: #fff; border-right: 1px solid #ddd; transition: .1s; opacity: 1; z-index: 9999; }

/* .snb_wrap { position: fixed; height: calc(100% - 70px); z-index: 9999;}
.snb_wrap #snb { opacity: 1; transform: translateX(0px); transition: opacity 0.3s, transform 0.3s; display: flex; flex-direction: column; height: 100%}
.snb_wrap.in #snb { transform: translateX(-280px); opacity: 0; }
.snb_wrap #snb_hinged_btn { transform: translateX(0px); transition: transform 0.3s; }
.snb_wrap.in #snb_hinged_btn { transform: translateX(-280px); } */
#snb.in { transform: translateX(-280px); }
#snb.in #snb_hinged_btn { transform: translateX(0px); transition: transform 0.3s; }

.snb_hinged_btn { z-index: 99; position: absolute; top: 80px; left: 279px; width: 32px; height: 32px; background: #fff; border: 1px solid #ddd; border-radius: 0 3px 3px 0; }
.snb_hinged_btn:hover { color: #387ac3; background: #f7fafc; }
.snb_hinged_btn i { width: 100%; height: 100%; }
.snb_hinged_btn i:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


.snb_hide .snb_menu { height: calc(100% - 58px); }
.snb_hide .snb_intro { display: none; }
.snb_hide .snb_intro_tit { display: block; color: #777; }
.snb_hide .snb_intro_tit i { margin-right: 5px; color: #aaa; }

.research .snb_menu { height: calc(100% - 230px); }
.snb_menu { overflow: auto; } 

.snb_menu a { display: flex; justify-content: space-between; align-items: center; gap: 5px; padding: 10px 12px; color: #555; font-size: 15px; }
.snb_menu a:hover { color: #000; }
.snb_menu a.on { color: #0852c0; background: #eef4ff; border-radius: 5px; font-weight: 600; }
.snb_menu a span { max-width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.snb_menu a i { color: #777; opacity: 0; }
.snb_menu a:hover i { color: #ccc; opacity: 1; }
.snb_menu a.on i { color: #7fa6e1; opacity: 1; }

.dd_menu { width: 100%; }

/* .dd_smenu { width: 100%; }
.dd_smenu li { }
.dd_smenu .depth_02 {}
.dd_smenu .depth_03 { position: relative; padding-left: 10px; }
.dd_smenu .depth_03:before { content: '|'; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #ddd; }
.dd_smenu li a { color: #777; font-size: 14px; }
 */
.dd_smenu { width: 100%; }
.dd_smenu li { padding-left: 10px; }
.dd_menu .depth_01 { color: #333; font-weight: 500; }
.dd_smenu .depth_02 {}
.dd_smenu .depth_03 { position: relative; padding-left: 20px; }
.dd_smenu .depth_03:before { content: '|'; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: #ddd; }
.dd_smenu li a { color: #777; font-size: 14px; }
.dd_menu li a:hover { color: #0852c0; }
.dd_menu li a.on { background: transparent; }

.snb_intro_wrap {position: relative; overflow: auto; max-height: 310px; padding: 16px; background: #f7f7f7; border-radius: 5px; font-size: 14px; }
/* .snb_intro_wrap { position: relative; overflow: auto; max-height: 310px; padding: 16px; background: #f7f7f7; border-radius: 5px; font-size: 14px; } */

.snb_intro_wrap > button { position: absolute; top: 0; right: 16px; padding: 16px 0 16px 10px; color: #aaa; }
.snb_intro_wrap > button:hover { color: #0852c0; }

.snb_intro { text-align: center; }

.snb_intro_tit { display: none; }

.snb_intro figure { overflow: hidden; width: 60px; height: 60px; margin: 0 auto 10px; background: #fff; border-radius: 50%; }
.snb_intro figure img { width: 60px; height: 60px; object-fit: cover; }

.snb_intro > div { margin-bottom: 8px; font-size: 15px; }
.snb_intro > div p i { color: #777; }
.snb_intro > div p b { font-weight: 600; }
.snb_intro > div em { color: #3b67c0; font-weight: 600; }

.snb_intro > p { color: #777; }

.snb_intro > span { display: inline-block; margin-top: 16px; margin-bottom: 10px; }
.snb_intro > span em { display: inline-block; margin-bottom: 2px; color: #777; }

.snb_intro > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.snb_intro > ul li a { padding: 2px 6px; color: #777; background: #fff; border: 1px solid #ddd; border-radius: 3px; }
.snb_intro > ul li a i { margin-right: 4px; color: #aaa; font-size: 12px; }
.snb_intro > ul li a:hover,
.snb_intro > ul li a:hover i { color: #0852c0; }

/* ser_intro_wrap */
.sub .snb_wrap.in .cont_wrap { left: 0; }
.sub .snb_wrap.in .wrapper { margin: 0 80px; }

.ser_intro_wrap { margin-top: 56px; margin-bottom: 100px; }
.ser_intro_wrap .tit { margin-top: 40px; margin-bottom: 32px; padding-bottom: 12px; border-bottom: 1px solid #aaa; }

.ser_intro_wrap h2 { margin-top: 40px; }
/* .ser_intro_wrap h2:first-of-type { margin-top: 0; } */
.ser_intro_wrap h3 { margin-top: 24px; }

.ser_intro_box { margin-bottom: 40px; padding: 0; }

.ser_intro_box h3 { margin-top: 8px; }

.ser_intro_wrap ol { display: block; }

.ser_intro_wrap li img { display: block; max-width: 100%; margin: 10px 0; }

.ser_intro_wrap > pre { margin-top: 5px; }
.ser_intro_wrap > pre code { background: #f7f8fa; }

.ser_intro_box article { margin-bottom: 24px; }
.ser_intro_box article h3 { margin-top: 16px; }

.ser_intro_box figure { width: 100%; min-height: 200px; margin-top: 16px; padding: 16px; border: 1px solid #ddd; }

.ser_intro_wrap .tbl01 { display: block; }

.ser_intro_wrap .tbl01 td:nth-of-type(2) code { color: #18bd20; }
.ser_intro_wrap .tbl01 td a { color: #777; text-decoration: underline; }
.ser_intro_wrap .tbl01 td a:hover { color: #0852c0; }
.ser_intro_wrap .tbl01 td a i { margin-left: 5px; color: #aaa; font-size: 12px; text-decoration: unset; }

.table_wrap { margin-top: 12px; overflow: auto; }

.txt_wrap { margin-top: 8px; color: #555; font-size: 17px; line-height: 24px; }
.txt_wrap strong { color: #333; font-weight: 600; }
.txt_wrap span { color: #3b67c0; font-weight: 600; text-decoration: underline; }
.txt_wrap img { max-height: 600px; }

pre code.hljs { margin-top: 10px; background: #f5f5f5; }

code { font-family: 'Pretendard'; }
.code_btn { padding: 2px 5px; color: #777; background: #f5f5f5; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; font-weight: 500; }

.code_list_wrap { display: block; margin-top: 10px; margin-bottom: 16px; }
.code_list_wrap li { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 10px; }
.code_list_wrap li:last-of-type { margin-bottom: 0; }
.code_list_wrap li b:nth-of-type(2) code { color: #f06060; }
.code_list_wrap li i { color: #aaa; font-style: normal; }
.code_list_wrap li em { color: #555; font-size: 16px; }

.code_list_wrap ul { width: 100%; margin: 8px 0px 0 16px; }
.code_list_wrap ul li {}
.code_list_wrap ul li:before {content: '-';margin-right: 5px;}

/* .code_block_wrap { margin-top: 16px; } */
.code_block { display: block; position: relative; width: 100%; min-height: 44px; margin-top: 10px; margin-bottom: 30px; padding: 16px; background: #f7f8fa; border: 1px solid #c1d2eb; font-size: 16px; line-height: 22px; }
/* .code_block:last-of-type { margin-bottom: 0; } */

.code_block .hljs { margin-top: 0; padding: 0; background: #f7f8fa; }


.code_copy_btn { display: none; position: absolute; top: 10px; right: 10px; padding: 2px 5px; color: #777; background: #fff; border: 1px solid #ddd; border-radius: 3px; font-size: 13px; }
.code_block:hover .code_copy_btn { display: block; }
.code_copy_btn:hover { color: #1352b2; border-color: #7caaef; }

.red_box { margin-top: 16px; padding: 12px 16px; color: #333; background: #fff2f2; font-size: 15px; }
.red_box i { margin-right: 4px; color: #ed6565; font-size: 14px; }
.red_box b { color: #d23838; font-weight: 500; text-decoration: underline; }

/* research */
.research_intro_wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 10px; }

.res_intro_box { display: flex; flex-wrap: wrap; align-content: space-between; gap: 10px; min-height: 150px; padding: 16px; border: 1px solid #ddd; border-radius: 5px; }
.res_intro_box:hover { background: #f7f9fd; border-color: #7caaef; }
.res_intro_box p { color: #333; font-size: 18px; font-weight: 600; line-height: 24px; }

.res_intro_box > div { width: 100%; }
.res_prog_wrap { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.res_prog_wrap span { padding: 4px 8px; border-radius: 5px; font-size: 14px; }
/* .res_prog_wrap span.green { background: #5dd489; } */
.res_prog_wrap span.green { color: #0c6c2f; background: #def4e6; }
/* .res_prog_wrap span.blue { background: #82b1f0; } */
.res_prog_wrap span.blue { background: #82b1f0; }
/* .res_prog_wrap span.red { background: #ec9191; } */
.res_prog_wrap span.red { color: #d32929; background: #ffe4e4; }
.res_prog_wrap span.blue { background: #ddf1fa;color: #13739e; }
.res_prog_wrap span.dark    { background: #F3F4F6; color: #1F2937; border-color: #6B7280; }
/* .res_prog_wrap span.red     { background: #FEE2E2; color: #991B1B; border-color: #DC2626; } */
/* .res_prog_wrap span.green   { background: #DCFCE7; color: #166534; border-color: #16A34A; } */
.res_prog_wrap span.yellow { background: #f9f5c7;color: #9e650b; }
.res_prog_wrap span.indigo,
.res_prog_wrap span.default { background: #e0e7ff; color: #1b3ca6; }
.res_prog_wrap span.purple { background: #EDE9FE; color: #5B21B6; border-color: #8B5CF6; }
.res_prog_wrap span.pink { background: #FCE7F3; color: #BE185D; border-color: #EC4899; }
.res_prog_wrap span.grey { color: #515151;background: #e7e7e7; }

.res_intro_box > em { width: 100%; color: #777; font-size: 16px; }

.model_research_wrap { margin-top: 40px; }



/* playground */
.ser_intro_box { position: relative; }

.ser_intro_box.admin { display: flex; justify-content: flex-start; }
.ser_intro_box.admin:before { content: ''; position: absolute; left: -16px; top: 12px; width: 0; height: 0; border: 16px solid transparent; border-right-color: #f5f5f5; border-left: 0; border-bottom: 0; }

.ser_intro_box.user { padding: 0 16px; }
.ser_intro_box.user:before { content: ''; position: absolute; right: 0px; top: 12px; width: 0; height: 0; border: 16px solid transparent; border-top-color: #eef4ff; border-left: 0;border-bottom: 0; }

.ser_intro_box.admin > p,
.ser_intro_box.user > p,
.answer_bubble_inner { padding: 14px 20px; border-radius: 5px; line-height: 24px; }

.ser_intro_box.admin > p,
.answer_bubble_inner { background: #f5f5f5; }

.answer_bubble_inner h3 { margin-top: 16px; }
.answer_bubble_inner ul { margin-bottom: 8px; }
.answer_bubble_inner ul a { color: #555; text-decoration: underline; }
.answer_bubble_inner ul a:hover { color: #1352b2; }

.ser_intro_box.user { display: flex; justify-content: flex-end; }
.ser_intro_box.user > p { background: #eef4ff; }

.answer_box { font-weight: 300; line-height: 24px; }

.play_wrap { display: grid; grid-template-columns: 1fr 300px; position: relative; margin: 32px 0; }
.play_box_l { position: relative; height: calc(100vh - 193px); }
.play_box_l .play_set_btn { display: none; position: absolute; right: 24px; }
.play_box_l .play_set_btn button { padding: 6px 10px; }
.play_box { overflow-y: auto; height: calc(100% - 48px); margin-right: 20px; padding: 0 20px; }

.chat_input { position: relative; margin-right: 24px; }
.chat_input textarea { width: 100%; height: 48px; max-height: 164px; padding: 11px 48px 11px 20px; font-size: 16px; line-height: 24px; border-radius: 24px; resize: none; }
.chat_input.model textarea { padding-left: 196px; }
.chat_input > button { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 26px; height: 26px; }

.chat_guide { position: absolute; bottom: -20px; left: 20px; width: 100%; color: #777; font-size: 13px; text-align: center; }

.loader { display: inline-block; width: 10px; margin: 0 20px; aspect-ratio: 1; border-radius: 50%; animation: l5 1s infinite linear alternate; }
@keyframes l5 {
    0% { box-shadow: 20px 0 #000, -20px 0 #0002; background: #000; }
    33% { box-shadow: 20px 0 #000, -20px 0 #0002; background: #0002; }
    66% { box-shadow: 20px 0 #0002, -20px 0 #000; background: #0002; }
    100% { box-shadow: 20px 0 #0002,-20px 0 #000; background: #000; }
}

.play_box_r_wrap { display: flex; flex-wrap: wrap; align-content: space-between; gap: 16px; overflow: auto; padding: 20px; background: #f8f8f8; }

.play_box_r > div { margin-bottom: 24px; }

.play_box_r h4 { margin-top: 0; margin-bottom: 10px; }

.play_box_r .txt_box { color: #777; font-size: 16px; }

.play_box_r select { width: 100%; }

.play_box_r .guide { margin-top: 8px; }

.guide { color: #777; font-size: 15px; }
.guide.red { color: #d23838; }
.guide.red i { color: #ed6565; font-size: 14px; }

.play_box_r_wrap .red_box { margin-top: 0; background: #ffecec; }

.applyButton { width: 100%; }
/* models 페이지 : E */



/* research 페이지 : S */
.sec_wrap { margin-top: 40px; margin-bottom: 80px; }

.research_wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.research_wrap .res_prog_wrap { margin-bottom: 0; }

.res_box { display: flex; flex-wrap: wrap; align-content: space-between; gap: 10px; min-height: 150px; padding: 16px; border: 1px solid #ddd; border-radius: 5px; }
.res_box:hover { background: #f7f9fd; border-color: #7caaef; }

.res_info { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.res_info .res_prog_wrap { margin-bottom: 0; }

.res_box > div { width: 100%; }

/* .res_profile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.res_profile figure { display: flex; overflow: hidden; width: 30px; height: 30px; background: #fff; border-radius: 50%; }
.res_profile figure img { width: 100%; height: 100%; object-fit: cover; }
.res_profile em { color: #777; font-size: 16px; } */

.res_profile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.res_profile figure { display: flex; overflow: hidden; width: 30px; height: 30px; background: #fff; border-radius: 50%; }
.res_profile figure img { width: 100%; height: 100%; object-fit: cover; }
.res_profile em { max-width: 100px; color: #777; font-size: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.res_box > div > p { color: #333; font-size: 18px; font-weight: 500; line-height: 24px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.res_box > em { width: 100%; color: #777; font-size: 16px; }

.box_top {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.box_top_l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.box_top .more:hover { color: #003bab; }
.box_top span {color: #777;font-size: 16px;font-weight: 500;}
.box_top span b {color: #003bab;font-size: 18px;}
.box_top .search_box select { padding: 0 40px 0 16px; background-color: #eff1f5; border: none; border-radius: 30px; }

/* 상세 페이지 */
.research_list_box { margin-top: 10px; padding: 10px 20px; background: #f7f7f7; border-radius: 10px; }
.research_list_box .box_top { margin-bottom: 0; cursor: pointer; }
.research_list_box h2 { font-size: 20px; margin-top: 0; }
.research_list_box .box_top button i { padding: 10px; }
.research_list_box .box_top:hover button i { color: #0058ff; }

.research_list_wrap .list_none { border-bottom: 1px solid #ddd; }

.research_item_wrap {margin-top: 10px;border-top: 1px solid #aaa;}
.research_item { display: flex; justify-content: space-between; gap: 8px; padding: 12px; color: #777; border-bottom: 1px solid #ddd; }
.research_item:hover { color: #333; background: #fff; cursor: pointer; }
.research_item.active { color: #000; background: #f7f7f7; font-weight: 600; }
.research_item p { display: flex; gap: 24px; font-weight: 400; }

.tit.research_tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 0; }
.research_tit em { color: #777; }

.research_info { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid #ddd; }

.research_info_l { display: flex; gap: 5px; align-items: center; font-size: 16px; }
.research_info_l .res_profile { margin-right: 8px; margin-bottom: 0; }
.research_info_l .res_profile b { color: #000; font-weight: 500; }
.research_info_l span { color: #444; }
.research_info em { color: #777; }

.research .btn_wrap { margin-top: 30px; padding-top: 16px; border-top: 1px solid #ddd; } 
/* research 페이지 : E */




@media screen and (max-width: 1279px){
	.snb_intro figure { width: 50px; height: 50px; }
	.snb_intro figure img { width: 50px; height: 50px; }
	
	/* models - document */
	.research_intro_wrap { grid-template-columns: 1fr 1fr; }
	
	/* models - document */
	.ser_intro_box { margin-bottom: 30px; }
	
	/* models - playground */
	.play_wrap { grid-template-columns: 1fr 240px; gap: 16px; }
	.play_box { padding-right: 16px; }
	.chat_input { margin-right: 16px; }
	
	.play_box_r_wrap { gap: 10px; padding: 16px; }
}



/* Tablet */
@media screen and (max-width: 1023px){
	/* popup */
	.pop_wrap .contact_pop { max-height: 621px; }
	.pop_left { padding: 30px; }
	.pop_ltop span { font-size: 22px; }
	.pop_ltop h2 { font-size: 40px; }
	.pop_Rcont { padding: 30px; }

	/* models - document */
	.research_intro_wrap { grid-template-columns: 1fr; }
	
	.play_box_r_wrap { display: unset; padding: unset; background: unset; }
	.play_wrap { grid-template-columns: 1fr; }
	.play_box_l .play_set_btn { display: block; z-index: 99; }
	.play_wrap .play_box_r { position: absolute;  display: flex; flex-direction: column; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #ddd; }
	.play_box_r_wrap .red_box { background: #fff2f2; }
	
	/* models - document */
	.ser_intro_box { margin-bottom: 24px; }
	.chat_input textarea { font-size: 15px; }
}



/* Tablet */
@media screen and (max-width: 839px){
	/* snb */
	#snb { height: calc(100% - 54px); padding: 16px; }
	.snb_hinged_btn { top: 65px; width: 24px; height: 24px; }
	.snb_menu { height: calc(100% - 284px); }
	.snb_intro_wrap { max-height: 274px; padding: 10px 12px; }
	.snb_intro figure,
	.snb_intro figure img { width: 50px; height: 50px; }
	.snb_intro > p { margin-bottom: 10px; }
	.snb_intro > ul li a { font-size: 13px; }
	
	
	
	/* models - document */
	.ser_intro_wrap { margin-top: 40px; }
	.ser_intro_wrap .tit { margin-bottom: 24px; padding-bottom: 8px; }
	
	.ser_intro_box { margin-bottom: 20px; }
	
	.txt_wrap { font-size: 16px; line-height: 22px; }
	
	.code_list_wrap li em { width: 100%; }
	
	.code_block { margin-top: 8px; }
	
	.red_box { font-size: 14px; }
	
	.res_intro_box { gap: 8px; padding: 12px; }
	.res_prog_wrap span { padding: 3px 5px; font-size: 12px; }
	.res_intro_box p { font-size: 16px; }
	.res_intro_box em { font-size: 14px; }
	
	
	
	/* models - playground */
	.play_box_l { height: calc(100vh - 162px); }
	.play_box_r > div { margin-bottom: 16px; }
	
	.ser_intro_box figure { padding: 10px; }
	
	.answer_box { font-size: 16px; }
	
	.ser_intro_box.admin p,
	.ser_intro_box.user p { padding: 10px 20px; font-size: 16px; }
	
	.chat_input textarea { font-size: 14px; }
}



/* small Tablet */
@media screen and (max-width: 768px){
	/* popup */
	.pop_wrap .contact_pop { overflow-y: auto; }
	.pop_scroll { flex-wrap: wrap; }
	.pop_box {  width: 100%; }
	.pop_left { padding: 30px 20px; width: 100%; min-height: 380px; height: auto; }
	.pop_left:after { right: 20px; bottom: 12px; background-size: 70%; }
	.close_btn { margin-bottom: 24px; }
	.pop_scroll { height: auto; }
	.pop_lbottom { position: unset; margin-top: 38px; }
	.pop_ltop span { font-size: 20px; }
	.pop_ltop h2 { margin-bottom: 10px; font-size: 32px; }
	.pop_ltop p { font-family: 'NanumGothic'; font-size: 16px; line-height: 24px; }
	.pop_Rcont { padding: 10px 20px 30px; height: auto; }
	.pop_btn { position: unset; }
	.pop_left_scroll { width: 100%; }

	/* models - playground */
	.answer_box { font-size: 15px; }
	.ser_intro_box.admin p,
	.ser_intro_box.user p { padding: 8px 16px; font-size: 15px; }
	
	.chat_input textarea { font-size: 12px; }
	
	/* research */
	.research_wrap { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Mobile */
@media screen and (max-width: 480px){
	/* models - playground */
	.answer_box { font-size: 14px; }
	.ser_intro_box.admin p,
	.ser_intro_box.user p { padding: 6px 14px; font-size: 14px; }
	
	/* research */
	.sec_wrap { margin-top: 24px; margin-bottom: 40px; }
	.box_top { margin-bottom: 8px; }
	
	.research_wrap { grid-template-columns: 1fr; gap: 8px; }
	
	.res_box { gap: 5px; min-height: auto; padding: 12px; }
	
	.res_profile { gap: 5px; margin-bottom: 5px; }
	.res_profile figure { width: 20px; height: 20px; }
	.res_profile em { font-size: 14px; }
	
	.res_box > div > p { font-size: 16px; line-height: 20px; }
	.res_box > em { font-size: 14px; }
}