/*@import url(../font/pretendard/pretendard.css);*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

:root{
    --bg-color-01: #F0F7FF ;
    --pt-color-01: #155DFC;
    --txt-color-01: #0F172B;
    --txt-color-02: #62748E;
}

html {font-size: 20px; font-weight: 400; color: var(--txt-color-01);}
body {font-family: 'Pretendard Variable', sans-serif; word-break: keep-all; line-height: normal; margin: 0;}/*, 'NEXON_Lv1_Gothic_OTF', '맑은 고딕', 'Apple Sd Gothic Neo' Noto Sans KR*/
body.locked {overflow: hidden;}

p {}
span, em, b {font-size: inherit; line-height: inherit; font-weight: inherit;}

* {margin: 0; padding: 0; border: 0; box-sizing: border-box;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd{margin: 0; padding: 0;}
ol, ul {list-style: none;}
table {border-collapse: collapse;	border-spacing: 0; cellpadding:0;}
a{color: inherit; text-decoration: inherit; text-decoration: none;}
address, em, i{font-style: normal; }
img{border: none; }
input:focus, select:focus{outline: none}

br.mob {display: none;}

.popup_back {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.30); z-index: 999999;}
.popup_back.on {display: block;}

.popup_con {position: fixed; top: 50%; left: 50%; display: none; border-radius: 10px; border: 1px solid #E0E0E0; background: #fff; transform: translate(-50%, -50%); z-index: 9999999;}
.popup_con.on {display: block;}
.popup_con .inner {position: relative; display: none; width: 300px; padding: 48px; border-radius: 10px; background: #fff; overflow: auto;}
.popup_con .inner.on {display: block;}
.popup_con .inner .tit {display: flex; justify-content: center; align-items: center;}
.popup_con .inner .tit h5 {font-size: 18px; font-weight: 400; text-align: center;}

.popup_con .inner.input_password .main_con {display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 16px 0 0 0;}
.popup_con .inner.input_password .main_con .input_con {display: flex; align-items: center;}
.popup_con .inner.input_password .main_con .input_con p {font-size: 16px; font-weight: 400; margin: 0 10px 0 0;}
.popup_con .inner.input_password .main_con .input_con input {width: 100px; height: 30px; padding: 0 4px; border-radius: 4px; background: #E8E8E8; font-size: 12px; color: #000;}
.popup_con .inner.input_password .main_con p.caution {display: flex; align-items: center; margin: 4px 0 0 0; font-size: 14px; font-weight: 400; color: #E54747;}
.popup_con .inner.complete_del p {display: flex; align-items: center; font-size: 16px; text-align: center;}

.popup_con .inner .btn_con {display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0 0 0;}
.popup_con .inner .btn_con.two_btns {justify-content: space-between;}
.popup_con .inner .btn_con.three_btns {justify-content: space-between;}
.popup_con .inner .btn_con a.btns {width: 100%; padding: 15px 0; text-align: center; font-size: 14px; font-weight: 400; border-radius: 4px; color: #fff;}
.popup_con .inner .btn_con.two_btns a.btns {width: calc(50% - 5px);}
.popup_con .inner .btn_con a.btns.btn_cancle {background: rgba(3, 2, 19, 0.40);}
.popup_con .inner .btn_con a.btns.btn_modify {background: #030213;}


.wrap {padding: 80px 0 0 0; overflow: hidden;}
.sections {position: relative;}
.sections .width_con {position: relative; width: 1300px; margin: 0 auto; padding: 80px 0;}
.sections .width_con .title_con {text-align: center;}
.sections .width_con .title_con h3 {font-size: 32px; font-weight: 700;}
.sections .width_con .title_con p {color: var(--txt-color-02); margin: 12px 0 0 0;}

#header {position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: #fff; z-index: 9999;}
#header .width_con {display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0;}
#header .width_con a.btn_home {display: flex;}
#header .width_con a.btn_home img {height: 40px;}
#header .width_con .nav_con {}
#header .width_con .nav_con .nav {display: flex; align-items: center;}
#header .width_con .nav_con .nav li {margin: 0 48px 0 0;}
#header .width_con .nav_con .nav li:last-child {margin: 0;}
#header .width_con .nav_con .nav li a {padding: 10px 24px; font-size: 16px; font-weight: 600;}
#header .width_con .btn_open_nav {position: absolute; right: 10px; top: 50%; width: 30px; height: 36px; display: none; padding: 5px; cursor: pointer; z-index: 10; transition: all 250ms ease-out; z-index: 2; transform: translateY(-50%);}
#header .width_con .btn_open_nav div,
#header .width_con .btn_open_nav:before,
#header .width_con .btn_open_nav:after {position: absolute; left: 0px; content: ''; width: 30px; height: 4px; background: #000; transition: all 0.25s ease-in-out, top 0s ease-in-out, bottom 0s ease-in-out, opacity 0s;}
#header .width_con .btn_open_nav div {top: 16px;}
#header .width_con .btn_open_nav:before {top: 6px;}
#header .width_con .btn_open_nav:after {bottom: 6px;}
body.open_nav #header .width_con .btn_open_nav {}
body.open_nav #header .width_con .btn_open_nav div {left: -10px;}
body.open_nav #header .width_con .btn_open_nav:before {top: 15px; width: 30px; height: 4px; transform: rotate(45deg);}
body.open_nav #header .width_con .btn_open_nav:after {top: 15px; width: 30px; height: 4px; transform: rotate(-45deg);}
body.open_nav #header .width_con .btn_open_nav div,
body.open_nav #header .width_con .btn_open_nav:before,
body.open_nav #header .width_con .btn_open_nav:after {transition: all 0.25s ease-in-out, top 0.25s ease-in-out, bottom 0.25s ease-in-out, opacity 0s;}
body.open_nav #header .width_con .btn_open_nav div {opacity: 0;}
.open_nav_cover {position: fixed; top: 0; left: 0; width: 100vw; height: 0vh; background: rgba(0,0,0,0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: backdrop-filter 250ms ease-out, height 0s linear 250ms, background 0.25s ease-out; z-index: 999;}
body.open_nav .open_nav_cover {height: 100vh; background: rgba(0,0,0,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: backdrop-filter 250ms ease-out, background 250ms ease-out;}

.section_00 {}
.section_00 .width_con {width: 100%; padding: 0;}
.section_00 .width_con:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgba(0,0,0,.4);}
.section_00 .width_con .img_con {display: flex; justify-content: flex-end;}
.section_00 .width_con .img_con img {}
.section_00 .width_con .title_con {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.section_00 .width_con .title_con h3 {font-size: 60px; font-weight: 600; color: #fff;}
.section_00 .width_con .title_con h3 span {background: linear-gradient(90deg, #51A2FF 0%, #C27AFF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section_00 .width_con .title_con p {margin: 24px 0 0 0; font-size: 20px; font-weight: 500; color: #fff;}
.section_00 .width_con .bbs_title_con {position: absolute; top: 50%; left: calc((100vw - 1300px) / 2); transform: translateY(-50%);}
.section_00 .width_con .bbs_title_con h3 {font-size: 60px; font-weight: 600; line-height: 125%; color: #fff;}
.section_00 .width_con .bbs_title_con p {margin: 16px 0 0 0; font-size: 20px; font-weight: 400; line-height: 135%; color: #fff;}

.section_01 {position: sticky; top: 80px; background: #fff; z-index: 99;}
.section_01 .width_con {width: 100%; padding: 0; border-bottom: 1px solid #E2E8F0; background: #fff; display: flex; justify-content: center; align-items: center;}
.section_01 .width_con ul.tab_list {display: flex; justify-content: center; align-items: center;}
.section_01 .width_con ul.tab_list li {padding: 15px 8px; margin: 0 48px 0 0;}
.section_01 .width_con ul.tab_list li.on {border-bottom: 2px solid var(--pt-color-01);}
.section_01 .width_con ul.tab_list li:last-child {margin: 0;}
.section_01 .width_con ul.tab_list li a {display: flex; align-items: center;}
.section_01 .width_con ul.tab_list li a svg {margin: 0 8px 0 0;}
.section_01 .width_con ul.tab_list li a svg path {stroke: var(--txt-color-02);}
.section_01 .width_con ul.tab_list li a span {color: var(--txt-color-02); font-size: 16px; font-weight: 400; line-height: 24px;}
.section_01 .width_con ul.tab_list li.on a svg path {stroke: var(--pt-color-01);}
.section_01 .width_con ul.tab_list li.on a span {color: var(--pt-color-01);}

.section_02 {}
.section_02 .width_con {padding: 100px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #E2E8F0;}
.section_02 .width_con .title_con {text-align: left; width: calc(50% - 20px);}
.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 {display: flex; width: calc(50% - 20px); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);}
.section_02 .width_con .img_con img {width: 100%;}

.wrap .sections.review {background: #F0F7FF;}
.wrap .sections.review .width_con {border-bottom: 1px solid #EFF4FA;}
.wrap .sections.review .width_con .list_con {margin: 64px 0 0 0;}
.wrap .sections.review .width_con .list_con .review_list {display: flex; justify-content: space-between;}
.wrap .sections.review .width_con .list_con .review_list li.reviews {width: calc(100% / 3 - 12px); height: 700px; padding: 40px 32px; border-radius: 16px; border: 1px solid #E2E8F0; background: #FFF;}
.wrap .sections.review .width_con .list_con .review_list .slick-list {margin: 0 -12px;}
.wrap .sections.review .width_con .list_con .review_list .slick-slide {margin: 0 12px;}
.wrap .sections.review .width_con .list_con .review_list .slick-prev {left: -30px;}
.wrap .sections.review .width_con .list_con .review_list .slick-next {right: -30px;}
.wrap .sections.review .width_con .list_con .review_list .slick-prev:before, 
.wrap .sections.review .width_con .list_con .review_list .slick-next:before {font-family: 'Font Awesome 6 Free'; font-weight: 900; color: #62748E; font-size: 40px;}
.wrap .sections.review .width_con .list_con .review_list .slick-prev:before {content: '\f104';}
.wrap .sections.review .width_con .list_con .review_list .slick-next:before {content: '\f105';}
.wrap .sections.review .width_con .list_con .review_list li.reviews h5 {font-size: 22px; color: #000; font-weight: 500; line-height: 27px;}
.wrap .sections.review .width_con .list_con .review_list li.reviews p {margin: 32px 0 0 0; font-size: 18px; font-weight: 400; line-height: 30px; color: #45556C; overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 17;
    -webkit-box-orient: vertical;}
.wrap .sections.review .width_con .list_con .btn_con {display: flex; justify-content: center; margin: 56px 0 0 0;}
.wrap .sections.review .width_con .list_con .btn_con a {padding: 16px 48px; border-radius: 6px; background: var(--pt-color-01); font-size: 20px; font-weight: 500; color: #fff; line-height: 32px;}
.wrap .sections.review .width_con .list_con .review_list .slick-dots {display: flex !important; justify-content: center; bottom: -40px;}
.wrap .sections.review .width_con .list_con .review_list .slick-dots li button:before {font-size: 16px;}
.wrap .sections.review .width_con .list_con .review_list .slick-dots li.slick-active button:before {color: #5B9CFF;}

.wrap .sections.director_list {background: #F0F7FF;}
.wrap .sections.director_list .width_con {}
.wrap .sections.director_list .width_con .list_con {margin: 32px 0 0 0;}

.ai_director {display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 18px;}
.ai_director li {width: 100%; margin: 0 0 32px 0; border-radius: 14px; background: #fff; overflow: hidden; padding: 16px 48px; 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: 100px; height: 100px; border-radius: 999px; overflow: hidden;}
.ai_director li .img_con img {width: 100%;}
.ai_director li .app_director img {width: 100%; margin-top: 100px;}
.ai_director li .desc_con {padding: 40px; display: flex; align-items: center; 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 {display: flex; align-items: center;}
.ai_director li .desc_con .txt_con .tit h4 {width: 150px; font-size: 32px; font-weight: 700; font-family: 'pretendard', sans-serif; margin: 0 40px 0 0;}
.ai_director li .desc_con .txt_con .tit h4 span {font-size: 22px; 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; font-family: 'pretendard', sans-serif;}
.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: 360px; height: 250px; display: flex; align-items: center; border-radius: 0;}
.ai_director li.rankings .desc_con {width: calc(100% - 360px); padding: 56px 48px; justify-content: space-between;}
.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; font-family: 'pretendard', sans-serif; white-space: nowrap;}

.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: '우수 AI 디렉터'; font-size: 13px; font-weight: 500; color: #0F172B; transform: translateY(-50%); font-family: 'pretendard', sans-serif;}
.ai_director li.rankings:nth-child(1) .desc_con .txt_con .rank_medal {background: linear-gradient(90deg, #FFDB56 0%, #FFB900 100%);}
.ai_director li.rankings:nth-child(1) .desc_con .txt_con .rank_medal:before {background: url(../img/aichatbot/medal_gold.png) center no-repeat; background-size: cover;}
.ai_director li.rankings:nth-child(2) .desc_con .txt_con .rank_medal {background: linear-gradient(90deg, #DDD 0%, #C2C2C2 100%);}
.ai_director li.rankings:nth-child(2) .desc_con .txt_con .rank_medal:before {background: url(../img/aichatbot/medal_silver.png) center no-repeat; background-size: cover;}
.ai_director li.rankings:nth-child(3) .desc_con .txt_con .rank_medal {background: linear-gradient(90deg, #F3B791 0%, #DB8B6F 100%);}
.ai_director li.rankings:nth-child(3) .desc_con .txt_con .rank_medal:before {background: url(../img/aichatbot/medal_bronze.png) center no-repeat; background-size: cover;}

.ai_director li.rankings .desc_con a {display: flex; align-items: flex-end; width: 230px; padding: 18px 24px; border-radius: 8px; background: linear-gradient(90deg, #155DFC 0%, #9810FA 100%); box-shadow: 0 10px 15px -3px rgba(43, 127, 255, 0.20), 0 4px 6px -4px rgba(43, 127, 255, 0.20);}
.ai_director li.rankings .desc_con a span {font-size: 24px; font-weight: 700; color: #fff; margin: 0 10px 0 0; white-space: nowrap;}
.ai_director li.rankings .desc_con a img {}

.sections.footer {background: #0F172B;}
.sections.footer .width_con {padding: 56px 0;}
.sections.footer .width_con .footer_row {display: flex; justify-content: space-between; align-items: flex-end;}
.sections.footer .width_con .footer_row ul {display: flex; align-items: center;}
.sections.footer .width_con .footer_row ul li {margin: 0 22px 0 0;}
.sections.footer .width_con .footer_row ul li a {font-size: 16px; font-weight: 600; color: #fff;}
.sections.footer .width_con .footer_row select {width: 200px; height: 50px; padding: 8px 16px; border-radius: 4px; background: rgba(255,255,255,.1); color: #fff;}
.sections.footer .width_con .footer_row select option {font-size: 14px; font-weight: 400; color: #0F172B;}
.sections.footer .width_con .footer_row p {margin: 20px 0 0 0; font-size: 14px; font-weight: 400; line-height: 20px; color: #CFCFCF;}