@charset "UTF-8";

:root {
    --font-name: "Pretendard";
    --font-size: 1.5rem;
    --font-weight: 400;
    --font-color: #1d1d1d;
    --line-height: 24px;    
}


*{
    font-family: 'Pretendard';
    color:#1d1d1d;
    box-sizing: border-box;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button {
    margin: 0;
    padding: 0;
}

fieldset,img {
    border: 0 none
}

dl,ul,ol,menu,li {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: "";
    content: none
}

input,select,textarea,button {
    vertical-align: middle
}

input::-ms-clear {
    display: none
}

button {
    border: 0 none;
    background-color: transparent;
    cursor: pointer
}
body,th,td,input,select,textarea,button {
    color: #333;
    font-family: 'Pretendard';
}
a {
    color: #333;
    text-decoration: none;
    cursor: pointer
}
a:active,a:hover {
    text-decoration: none
}
a:active {
    background-color: transparent
}

address,caption,cite,code,dfn,em,var {
    font-style: normal;
    font-weight: 400
}
html {
    font-size: 10px
}
html, body{
    height: 100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button{
    font-size: var(--font-size);
}

img{
    vertical-align: top;
}


.chatbot-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background: #FFF;
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(29, 163, 95, 0.1) 50%, rgba(255, 255, 255, 1) 100%);
    background-repeat: no-repeat;
    max-width: 485px;
    margin: auto;
    overflow: hidden;

}
.chatbot-wrap-inner{
    position: relative;
    padding: 30px 0;
}
.close-btn{
    position: absolute;
    right: 20px;
    top: 5px;
    background-image: url(../images/black-close.png);
    background-size: contain;
    width: 15px;
    height: 15px;
}
.chatbot-inner{
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
}
.chatbot-con{
    max-height: 400px;
}
.message-box {
    text-align: right;
    margin-bottom: 20px;
}
.message-bubble {
    display: inline-block;
    background-color: #fff;
    color: #555555;
    padding: 9px 10px;
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: 1px solid #e4e4e4;
}
.symbol{
    text-align: center;
}
.symbol img{
    width: 71px;
}
.prompt-txt01{
    font-size: 15px;
    text-align: center;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: bold;
}
.prompt-txt02{
    text-align: center;
    font-size: 13px;
    margin-top:15px;
}
.gradient-text{
    background: linear-gradient(90deg, #2b336b, #059a59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.message-answer {
    margin-bottom: 10px;
    background: #fff;
    padding: 9px 10px;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.message-answer p{
    font-size: 15px;
    line-height: 1.3;
    color:#1d1d1d;
}
.section-info{
    font-size: 15px;
    color:#1d1d1d;
}
.section-title {
    position: relative;
    font-weight: bold;
    font-size: 15px;
    margin-top: 12px;
    margin-bottom: 4px;
    color:#1d1d1d;
    padding-left: 29px;
}
.section-title:after{
    position: absolute;
    left: 0;
    top: 0;
    content:'';
    display: block;
    width: 22px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
}
.chat-ico01:after{
    background-image: url(../images/chati-ico01.png);
}
.chat-ico02:after{
    background-image: url(../images/chati-ico02.png);
}
.chat-ico03:after{
    background-image: url(../images/chati-ico03.png);
}
.tag {
    position: relative;
    display: inline-block;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    color: #555555;
    font-size: 11px;
    padding: 5px 25px 5px 11px;
    border-radius: 4px;
    margin: 4px 6px 4px 0;
}
.tag:after{
    position: absolute;
    right: 10px;
    top: 6px;
    display: block;
    content:'';
    background-image: url(../images/link-ico.png);
    width: 10px;
    height: 10px;
    background-size: contain;

}

.input-group {
    position: relative;    
    margin: auto;
    margin: 0 20px;
}
.input {
    width: 100%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 12px 58px 12px 16px;
    flex: 1;
    height: 46px;

    font-size: 13px;
    outline: none;
    margin-right: 8px;
    border: 2px solid #188660;
    border-radius: 28px;
}
.submit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    background-repeat: no-repeat; 
    background-image: url(../images/submit-btn.png);
    background-size: contain;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
}
.footer-text {
    text-align: center;
    font-size: 11px;
    color: #6b7280;
    margin-top: 16px;
    padding: 0 20px;
}

.question-section {
    overflow: hidden;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}
.showreel-list .item{
    background-color: #fff;
    border: 1px solid #fff;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 0 20px;
    margin-right: 10px;
}
.question-ti{
    display: block;
    width: 95px;
    height: 32px;
    border-radius: 16px;
    color:#029b58;
    background: #b9ddd1;
    text-align: center;
    line-height: 32px;
    font-weight: bold;
    font-size: 13px;
}
.chat{
    flex:1;
    padding: 10px 0;
    
}

.chat .item{
    height: 32px;
    border-radius: 16px;
    box-shadow: none;
    font-size: 13px;
}
.prompt{
    padding: 10px 0;
}
.prompt .item{
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    color:#717171;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 15px 0px;
    margin-right: 15px;
    font-size: 13px;
}

.item:hover{
    border: 1px solid #029b58;
    color:#029b58;
}
.showreel {
    overflow: hidden;
    position: relative;
}

.showreel:before{
    
}

.showreel-list {
    display: flex;
    white-space: nowrap;
}

.showreel04{
    margin-bottom: 20px;
}

.showreel-list.second {
    margin-top: 20px;
    margin-left: -11vw;
}


.max-1920{
    max-width: 1920px;
    margin: auto;
}