@charset "utf-8";

/* Font */
@font-face{
    font-family:NotoSansB;
    src:url(../../font/NotoSansKR-Bold.eot);
    src:local('※'), url(../../font/NotoSansKR-Bold.woff) format('woff');
}
@font-face{
    font-family:NotoSansM;
    src:url(../../font/NotoSansCJKkr-Medium.eot);
    src:local('※'), url(../../font/NotoSansCJKkr-Medium.woff) format('woff');
}
@font-face{
    font-family:NotoSansDL;
    src:url(../../font/NotoSansKR-DemiLight.eot);
    src:local('※'), url(../../font/NotoSansKR-DemiLight.woff) format('woff');
}
@font-face{
    font-family:NotoSans;
    src:url(../../font/NotoSansCJKkr-Regular.eot);
    src:local('※'), url(../../font/NotoSansCJKkr-Regular.woff) format('woff');
}
@font-face{
    font-family:Roboto;
    src:url(../../font/Roboto-Regular.eot);
    src:local('※'), url(../../font/Roboto-Regular.woff) format('woff');
}
@font-face{
    font-family:RobotoM;
    src:url(../../font/Roboto-Medium.eot);
    src:local('※'), url(../../font/Roboto-Medium.woff) format('woff');
}
@font-face{
    font-family:GyeonggiTitleM;
    src:url(../../font/GyeonggiTitle_Medium.eot);
    src:local('※'), url(../../font/GyeonggiTitle_Medium.woff) format('woff');
}
@font-face{
    font-family:GmarketM;
    src:url(../../font/GmarketSansMedium.eot);
    src:local('※'), url(../../font/GmarketSansMedium.woff) format('woff');
}
@font-face{
    font-family:Pretendard;
    src:url(../../font/Pretendard-Regular.eot);
    src:local('※'), url(../../font/Pretendard-Regular.woff) format('woff');
}
@font-face{
    font-family:PretendardM;
    src:url(../../font/Pretendard-Medium.eot);
    src:local('※'), url(../../font/Pretendard-Medium.woff) format('woff');
}
@font-face{
    font-family:PretendardSB;
    src:url(../../font/Pretendard-SemiBold.eot);
    src:local('※'), url(../../font/Pretendard-SemiBold.woff) format('woff');
}
@font-face{
    font-family:rokafM;
    src:url(../../font/ROKAF_Medium.eot);
    src:local('※'), url(../../font/ROKAF_Medium.woff) format('woff');
}
@font-face{
    font-family:rokafB;
    src:url(../../font/ROKAF_Bold.eot);
    src:local('※'), url(../../font/ROKAF_Bold.woff) format('woff');
}
@font-face{
    font-family:Barlow;
    src:url(../../font/Barlow-Regular.eot);
    src:local('※'), url(../../font/Barlow-Regular.woff) format('woff');
}

/* .header1 */
.header1 {background:#285a83;}
.header1>div {width:1760px;margin:0 auto;}
.header1>div::after {content:"";display:block;clear:both}
.header1 .globalMenu {padding:7px 0;text-align: right;}
.header1 .globalMenu>ul {font-size:0}
.header1 .globalMenu>ul>li {display:inline-block}
.header1 .globalMenu>ul>li:not(:first-child) {margin-left:28px}
.header1 .globalMenu>ul>li .userId {color:#fff;margin-right:28px}
.header1 .globalMenu>ul>li>a {color:#fff;font-family:PretendardM,sans-serif;}

.header1 .globalMenu .myLib select {width:130px;height: 23px; line-height: 23px; padding: 0 28px 0 0; box-sizing:border-box; position: relative; color: #fff; background: url(../../../image/ko/main/statusArrowOn.png) no-repeat right 3px top 10px; -webkit-background-size: 10px 5px; background-size: 10px 5px;border:none;font-size:16px;box-sizing: border-box;vertical-align: top;}
.header1 .globalMenu .myLib select option {color:#1c1c1c;height:16px;line-height: 16px;font-size:14px}
.header1 .globalMenu .myLib .myLibGo {display:inline-block;margin-left:10px;font-size:14px}
/* header2 */
.header2 {background:#fff;border-bottom:1px solid #ddd}
.header2>div {display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center; -ms-flex-align: center; align-items: center;width:1760px;margin:0 auto}
.header2>div .logo>a {display:block;padding-right:110px;background:url(../../../image/ko/logoBackground.png) no-repeat right top -6px;color:#000;font-family:rokafB,sans-serif;font-size:23px;letter-spacing: -0.01em;text-align: center;line-height: 28px;}
.header2>div .logo>a>span {display:block;color:#686868;font-family:rokafM,sans-serif;font-size:16px;letter-spacing: -0.01em;}

#divTopMenu {margin-right:245px}
.topMenu>ul>li {display:inline-block;position:relative;padding:32px 20px 32px 0}
.topMenu>ul>li:not(:last-child) {margin-right:92px}
.topMenu>ul>li>a {color:#000;font-family:PretendardM,sans-serif;font-size:21px;letter-spacing: -0.05em;}
.topMenu>ul>li .menuList {display:none}
.topMenu>ul>li .menuList {display: none; position: absolute; width: 200px; top: 80px; left: 50%; margin-left: -50px; box-sizing: border-box; text-align: left; padding: 27px 30px; background: #fff; border: 1px solid #dfdfdf; box-shadow: 5px 5px 16px rgba(0,0,0,0.11); -webkit-box-shadow: 5px 5px 16px rgba(0,0,0,0.11); z-index: 10}
.topMenu>ul>li .menuList > li:not(:first-child) {margin-top: 13px;}
.topMenu>ul>li .menuList > li > a {color: #333; letter-spacing: -0.025em;font-size: 16px; font-family:NotoSansB; position: relative}
.topMenu>ul>li .menuList > li > a.menuDown::after {content: ''; display: block; clear: both; width: 13px; height: 8px; background: url('../../../image/ko/menuArrow.png') no-repeat center center; background-size: 100%; position: absolute; top: 9px; right: -19px}
.topMenu>ul>li .menuList > li > ul {font-size: 14px; color: #eee; padding: 9px 0 3px;}
.topMenu>ul>li .menuList > li > ul > li {margin-top: 3px}
.topMenu>ul>li .menuList > li > ul > li > a {color: #555555; font-size: 16px; letter-spacing: -0.025em; font-family:NotoSans}

/* fix */
.header2.fixed {position:fixed;width:100%;top:0;left:0;box-shadow: 0px 10px 20px rgba(0,0,0,0.08);-webkit-box-shadow: 0px 10px 20px rgba(0,0,0,0.08);z-index: 5;}
#divContentsW.on {margin-top:94px}

/* pc 와 tablet 사이 */
@media screen and (max-width:1780px) {
    .header1>div {width:auto;margin: 0 24px}
    .header2>div {width:auto;margin:0 24px}
    #divTopMenu {margin-right:0}
    .topMenu>ul>li.menu3 {padding-right:0}
    .topMenu>ul>li.menu3 .menuList {left: auto;right:0}
}
@media screen and (max-width:1360px) {
    .topMenu>ul>li:not(:last-child) {margin-right:20px}
    .topMenu>ul>li>a {font-size:19px}
}
/* tablet */
@media screen and (max-width:1024px) {
    .header2>div {position:relative}
    .topMenu>ul>li:not(:last-child) {margin-right:60px}
    #divContentsW.on {margin-top:92px}
}
/* mobile */
@media screen and (max-width:767px) {
    .header1>div {width:auto;margin: 0 16px}
    .header1 .globalMenu>ul>li:not(:first-child) {margin-left:14px}
    .header1 .globalMenu>ul>li>a {font-size:14px}
    .header1 .globalMenu>ul>li .userId {color:#fff;margin-right:14px;font-size:14px}
    .header1 .globalMenu .myLib select {width:112px;height:22px;line-height: 22px;font-size:14px}
    .header2  {padding:12px 0 0}
    .header2>div {width:auto;margin:0 16px;-webkit-box-lines: multiple;-ms-flex-wrap: wrap; flex-wrap: wrap;}
    .header2 h1 {width:100%;text-align: center;}
    #divSearch {position:static;width:100%;margin-top:8px}
    #divTopMenu {width:100%;margin-top:12px;text-align: center;}
    .topMenu>ul>li {padding-top:0;padding-bottom:16px}
    .topMenu>ul>li:not(:last-child) {margin-right:24px}
    .topMenu>ul>li>a {font-size:16px}
    .topMenu>ul>li .menuList {top:30px;width:150px;padding:20px 24px}
    .topMenu>ul>li .menuList > li > a {font-size:15px}

    .header2>div .logo>a {display:inline-block;font-size:17px;background-size:76px auto;padding-right:80px;background-position:right top;line-height: 21px;margin-left:48px}
    .header2>div .logo>a>span {font-size:13px}
    #divContentsW.on {margin-top:106px}
}
/* divContentsW */
#divContents{position: relative; width: 1240px; margin: 0 auto 120px auto;}
#divContent{min-height:550px;margin-bottom:80px;margin-top: 15px;}
.subCommon{padding-top: 15px;min-height:82px}
#divTitle{font-size: 26px;color: #1f1f1f; margin-bottom: 8px;}
#divLocation ul li{display: inline-block; margin-left: 5px; color: #555;}
#divLocation ul li:not(:first-of-type){margin-left: 18px; padding-left: 23px; background: url(../../../image/ko/locationArrow.png) no-repeat left center;}
@media screen and (max-width:719px){
    #divTitle{text-align: center;}
    #divLocation ul{display: none;}
}

/* Search Total */
#divSearch{position: absolute;right: 0;top: 21px;transition: 0.3s;}
#divSearch:hover , #divSearch.on{box-shadow: 4px 6px 12.09px 0.91px rgba(0, 0, 0, 0.2);}
#divSearch form{position:relative;width:450px;height:55px;padding:0 55px 0 0px; border:none; box-sizing: border-box; background: #134aa9}
#divSearch form input[type="text"]{width:100%;height:53px; padding-left: 20px; border:none;background: #134aa9;color:#fff;box-sizing:border-box}
#divSearch form input[type="text"]::-webkit-input-placeholder{color:#fff;}
#divSearch form input[type="text"]::-moz-placeholder{color:#fff;}
#divSearch form input[type="text"]:-ms-input-placeholder{color:#fff;}
#divSearch form input[type="text"]:-moz-placeholder{color:#fff;}
#divSearch form input::placeholder{color:#fff;}
.searchBoxW ul li div form input[type="text"]::-webkit-input-placeholder{color:#fff;}
.searchBoxW ul li div form input[type="text"]::-moz-placeholder{color:#fff;}
.searchBoxW ul li div form input[type="text"]:-ms-input-placeholder{color:#fff;}
.searchBoxW ul li div form input[type="text"]:-moz-placeholder{color:#fff;}
#divSearch form input[type="image"]{position:absolute;top:15px;right:15px;width:25px;height:25px;}
/* Search Total */

/* Tab */
#divTabMenu{margin: 35px 0 0px 0; height: 43px; background: #fff; padding: 0}
#divTabMenu.mTS_destroyed{border-bottom: none;}
#divTabMenu > div.long{margin:0 40px;}
#divTabMenu ul li{display: inline-block; height: 43px; line-height: 43px; }
#divTabMenu ul li a{padding: 0px 45px; color: #555555; font-size: 16px; text-align: center;height: 100%; display: block; border-radius: 25px; border: 1px solid #e3e3e3; box-sizing: border-box;}
#divTabMenu ul li.selected a{height: 43px; color: #fff; font-size: 17px; padding: 0px 60px; background: #1a0dab;}

@media screen and (max-width:1288px){
    #divContents{width: 100%; box-sizing: border-box; padding: 0 24px;}
    #divSearch{right: 24px;}
}
@media screen and (max-width:1024px){
    #divSearch{position: relative; top: 0; right: 0; margin-bottom: 15px;}
    #divSearch form{width: 100%;}
    .subCommon{padding-top: 10px;}
}
@media screen and (max-width:719px){
    #divContents{padding: 0 16px;}
    #divTabMenu ul li a{padding: 0 35px}
    #divTabMenu ul li.selected a{padding: 0 40px;}
}
/* divContentsW */

/* footer */
.footer{padding:56px 0 84px 0;background: #3e3e3e}
.footerMenuW {width:1240px;margin:0 auto}
/* footerMenu1 */
.footerMenu1 {margin-bottom:76px;text-align: right;}
.footerMenu1 > ul li {display: inline-block; margin-left: 60px}
.footerMenu1 > ul li:first-of-type {margin-left: 0}
.footerMenu1 > ul li a {color: #b1b1b1}
/* relationSiteW */
.footerMenu1 .relationSiteW > a.siteGoto {display: inline-block; color:rgba(255,255,255,0.7); font-family:MontserratSB,sans-serif; height: 40px; line-height: 38px; padding: 0 11px; background: #5d5d5d; margin-left: 3px;vertical-align: top;}
.footerMenu1 .relationSiteW .relationSite {display: inline-block; width: 192px}
.footerMenu1 .relationSiteW .relationSite select#relSite {width:100%; height: 40px; line-height: 38px; border: 1px solid rgba(226,227,242,0.18); padding: 0 15px; box-sizing:border-box; position: relative; color: rgba(255,255,255,0.5); background: url(../../../image/ko/siteArrow.png) no-repeat right 10px center #3e3e3e; -webkit-background-size: 10px 5px; background-size: 10px 5px}
.footerMenu1 .relationSiteW .relationSite select#relSite option {background:#3e3e3e}

/* footerMenu2 */
.footerMenu2 {display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.footerMenu2 .libraryInfo {text-align: right;}
.footerMenu2 .libraryInfo ul {margin-bottom:24px;text-align: right;font-size:0;}
.footerMenu2 .libraryInfo ul>li {display:inline-block}
.footerMenu2 .libraryInfo ul>li:not(:last-child) {margin-right:40px}
.footerMenu2 .libraryInfo ul>li>a {color:#b1b1b1;font-size:15px;letter-spacing: -0.05em;}
.footerMenu2 .libraryInfo ul>li>a.privacy {color:#fff}
.footerMenu2 address {color: rgba(254,254,254,0.5); line-height: 20px; letter-spacing: -0.05em;font-family: Montserrat,NotoSans,sans-serif;}
.footerMenu2 .copyright {color: rgba(254,254,254,0.5); line-height: 20px; letter-spacing: 0; font-family: Montserrat,NotoSans,sans-serif}
/* count */
.footerMenu2 .count ul {display: inline-block;text-align: left;}
.footerMenu2 .count ul li {font-size: 15px; color: #cfcfcf; padding-bottom: 4px;}
.footerMenu2 .count ul li:last-child {padding-bottom: 0}
.footerMenu2 .count ul li span {margin-left: 15px; font-family: Montserrat,sans-serif;color:#cfcfcf}

/* pc 와 tablet 사이 */
@media screen and (max-width:1260px) {
    .footerMenuW {width:auto;margin:0 24px}
}
/* tablet */
@media screen and (max-width:1024px) {
    .footer {padding:28px 0 40px 0}
    .footerMenu1 {margin-bottom:24px}
    .footerMenu2 .libraryInfo {width:calc(100% - 170px);width:-webkit-calc(100% - 170px)}
}
/* mobile */
@media screen and (max-width:767px) {
    .footerMenuW {width:auto;margin:0 16px}
    .footerMenu1 {margin-bottom:12px;text-align: center;}
    .footerMenu2 {display:block}
    .footerMenu2 .count {margin-bottom: 16px;text-align: center;}
    .footerMenu2 .libraryInfo {width:100%;text-align: center;}
    .footerMenu2 .libraryInfo ul {text-align: center;margin-bottom: 8px;}
}


/* topBtn */
a.topBtn {display: block; visibility: hidden; opacity: 0; position: fixed; bottom: 10%; right: 24px; z-index: 10; width: 97px; height: 97px; text-align: center; color: #ededec; font-family:RobotoM; padding-top: 48px; background: #3067b9 url('../../../image/ko/topBtn.png') no-repeat center center; box-sizing: border-box; -webkit-box-shadow: 3px 5px 5px rgba(0,0,0,0.23); box-shadow: 3px 5px 5px rgba(0,0,0,0.23)}
a.topBtn.on {visibility: visible; opacity: 1}
a.topBtn,
a.topBtn.on {transition: all 0.5s ease; -webkit-transition: all 0.5s ease}
a.topBtn:before,
a.topBtn:after {content: ''; display: block; width: 100%; height: 8px; background: url('../../../image/ko/topBtnArrow.png') no-repeat center center; background-size: 13px 8px; -webkit-background-size: 13px 8px}
a.topBtn:after,
a.topBtn:before  {opacity: 0; position: absolute; left: 50%; top: 28%; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform: -webkit-translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0)}
a.topBtn:before {-webkit-animation: movement1 2s ease-in-out infinite; animation: movement1 2s ease-in-out infinite}
a.topBtn:after {-webkit-animation: movement1 2s 1s ease-in-out infinite; animation: movement1 2s 1s ease-in-out infinite}

@media screen and (min-width: 1289px) and (max-width: 1500px){
    a.topBtn {right: 5%}
}
@media screen and (max-width: 1024px){
    a.topBtn {display: none}
}

@keyframes movement1 {
    0% {
        opacity: 0;
        top: 38%;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes movement1 {
    0% {
        opacity: 0;
        top: 38%;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 챗봇 */
.chatBot {display:block;position:fixed;bottom:50px;right:30px;z-index: 10;}
.chatW {display:none;position:fixed;bottom:165px;right:30px;width:400px;z-index: 10;box-shadow: 0 4px 15px 0 rgb(0,0,0,0.2);border-radius: 10px;background:#fff}
.chatIntro {position:absolute;top:0;left:0;width:100%;height:100%;padding:20px 28px; background-color:#194a84;border-radius: 10px;z-index: 1;box-sizing: border-box;}
.chatIntro .tit {margin-bottom:12px;color:#fff;font-size:18px;letter-spacing: -0.05em;}
.chatIntro .txt {color:#fff;font-size:16px;line-height: 21px;letter-spacing: -0.05em;}
.chatIntro .start {position:absolute;bottom:0;left:0;width:100%;height:52px;padding-left:50px;background:url(../../../image/ko/chatbot/ico-send2.png) no-repeat left center #fff;border-radius: 0 0 5px 5px;color:#333;line-height: 52px;box-sizing: border-box;}
.chatClose {position:absolute;top:25px;right:16px;width:20px;height:20px;transform: rotate(45deg);-webkit-transform: rotate(45deg);z-index: 11;}
.chatClose span {position:absolute;background:#fff}
.chatClose span:nth-of-type(1) {width:20px;height:2px;top:50%;left:0;transform: translateY(-50%);-webkit-transform: translateY(-50%)}
.chatClose span:nth-of-type(2) {width:2px;height:20px;top:0;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%)}


.chat-container .head {background:#194a84; height: 70px;border-top-left-radius: 10px; border-top-right-radius: 10px; position: relative;text-align: center;}
.chat-container .head .modal-title { font-size: 18px; cursor: pointer; text-decoration: none; color: #fff;font-family:NotoSansM,sans-serif}
.chat-container .chat-wrap { background: #fff;}
.chat-container .chat-wrap .chat {width:100%;height:100%;} /* only chat window */
.chat-container .footer {padding:0;background:none;margin:0; position:relative; bottom:0;}
.head { position: relative;}
h1.h1 { font-size: 18px; font-weight: 300; color: #fff; line-height: 70px; margin: 0 20px; display: inline-block; }
h1.h1 a { font-size: 18px!important; font-weight: 300!important; margin-top: 0; display:inline;}
.head > ul { position: absolute; right: 15px; list-style: none; line-height: 70px; vertical-align: middle; margin: 0;}
.head > ul > li {float: left;}
.head > ul > li + li { margin-left: 23px;}
.head > ul > li > a { line-height: 70px; display: inline-block; vertical-align: middle; cursor:pointer;}
.head > ul > li > a.ico-out {background: url(../../../image/ko/chatbot/ico-out.png) no-repeat 0 0; width:19px; height:26px;}

h1.h1 span { color: #deedf9; cursor: pointer;}
h1.h1 span::before { content: " | "; color: #aa9d8f;}


ul.bots { position: absolute; top: 70px; left: -379px; right: -15px; z-index: 2000; background: url(../../../image/ko/chatbot/bg-bots2.png); box-shadow: 0 3px 3px rgba(0,0,0,0.05); border-bottom: 1px solid #fff;}
ul.bots li { float: left; width: 125px; height: 126px;}
ul.bots li a { display: block; width: 100%; height: 100%;text-align: center; border: 1px solid #fff; border-left: none; border-bottom: none;  padding-top: 95px; position: relative; color: #464646; font-weight: 300;}
ul.bots li:nth-child(4) a { border-right: none;}
ul.bots li a:hover,
ul.bots li a:focus,
ul.bots li a:active,
ul.bots li a.active { background: #5abbec; color: #fff; text-decoration: none;}

ul.bots li a span.bot { position: absolute; width: 45px; height: 61px; background: url(../../../image/ko/chatbot/bg-bots2-bot.png) no-repeat center; top: 25px; left: 40px; z-index: 2001}
ul.bots li a span.type { position: absolute; display: block; width: 30px; height: 30px; top: 57px; right: 20px; z-index: 2002;}
ul.bots li a span.hospital { background: url(../../../image/ko/chatbot/bg-bots-type.png) no-repeat 0 0; }
ul.bots li a span.trafic { background: url(../../../image/ko/chatbot/bg-bots-type.png) no-repeat -30px 0; }
ul.bots li a span.weather { background: url(../../../image/ko/chatbot/bg-bots-type.png) no-repeat -60px 0; }
ul.bots li a span.movie { background: url(../../../image/ko/chatbot/bg-bots-type.png) no-repeat -90px 0; }

.navi { float: right; margin-right: 20px; margin-top: -40px;}
.ico-nav { display: block; width: 19px; height: 15px; background: url(../../../image/ko/chatbot/ico_nav.png) no-repeat 0 0;}
.ico-nav:hover,
.ico-nav:focus { background-position: 0 -15px;}
.navi .mn { border-radius: 10px; background: #fff; -webkit-box-shadow: 3px 3px 10px rgba(165,155,145,0.2); box-shadow: 3px 3px 10px rgba(165,155,145,0.2); position: absolute; top: 20px; left: -115px; min-width: 100px; padding: 0;}
.navi .mn li a { display: inline-block; padding: 0 19px; line-height: 30px; border-bottom: 1px solid #e4ebf0; font-size: 12px;}
.navi .mn li:first-child a { border-top-left-radius: 10px; border-top-right-radius: 10px;}
.navi .mn li:last-child a { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.navi .mn li a:hover,
.navi .mn li a:focus { background: #f7f3ec; color: #846e56;}
.ico-close,
.ico-close:focus { display: block; width: 10px; height: 10px; background: url(../../../image/ko/chatbot/ico-close.png) no-repeat 0 0; position: absolute; right: 20px; top: 30px; z-index: 10;}
.ico-close:hover { background-position: 0 -10px;}

/* chat-wrap
-------------------------------------------*/
.chatbot-Timer {position:relative;height:19px;margin-bottom:24px;text-align: center;}
.chatbot-Timer::before {content:"";display:block;position:absolute;top:12px;left:0;width:102px;height:1px;background:#e4e4e4;}
.chatbot-Timer::after {content:"";display:block;position:absolute;top:12px;right:0;width:102px;height:1px;background:#e4e4e4;}
.chatbot-Timer span {color:#818181;font-size:13px;letter-spacing: -0.025em;line-height: 19px;}
.chat-container .chat-wrap .chat {padding: 24px 0 10px 0;overflow-x: hidden;overflow-y: auto;min-height: 540px;box-sizing: border-box;background: #fff;height: 540px;}
.chat-container .chat-wrap .chat::-webkit-scrollbar{width: 7px;}
.chat-container .chat-wrap .chat::-webkit-scrollbar-thumb{background-color: #c0c4c7; border-radius: 15px;}
.message {padding:0 12px}
.message {list-style: none; }
.message li:first-child {margin-top:0}
.message li { -webkit-transition: all .5s; transition: all .5s; position: relative; display: block; margin-top: 20px; }
.message li:after,
.message li:before { content: ""; clear: both; display: block;}

.message li .bubble { border-radius: 14px; font-size:9.5pt; position: relative; padding: 10px; max-width: calc(100% - 84px) !important; max-width: -webkit-calc(100% - 84px) !important; margin: 0 auto 0 12px; line-height: 1.4; word-wrap: break-word;}
.message li .bubble.bubble2 { max-width: 415px;}

.message li.bot p { white-space: pre-wrap; word-break: break-all; }
.message li.bot p:last-child {margin-bottom:0;}
.message li.bot p.title { font-size: 16px; font-weight: 900; }
.message li.bot p.subtitle { font-size: 12px; }
.message li.bot img, .message li.bot video { max-width: 100%; height: auto;}
.message li.bot audio { max-width: 100%; min-width: 250px;}
.message li.bot .bubble {background: #f0f2f5 !important; float: left; position: relative; border-top-left-radius: 0; }
.message li.bot .bubble .b-tail { background: url(../../../image/ko/chatbot/bubbletail_white.png) no-repeat; width: 18px; height: 20px; position: absolute; top: -8px; left: -5px; z-index: 10;}
.message li.bot .bubble ul { padding: 0px; }

.message li.bot .avata {width: 52px;height: 52px;float: left;top: 0;left: 0;background: url(../../../image/ko/chatbot/ico-bot.png) no-repeat center/cover;background-size: 52px;}
.message li.bot .domainavata { width: 43px; height: 43px; float: left;  border-radius:100%;}
.message li.bot .avata.tts {background: url(../../../image/ko/chatbot/tts_play_button.png) no-repeat center/cover; cursor:pointer;  position:absolute;}
.message li.bot .avata.tts.active {background: url(../../../image/ko/chatbot/tts_active_button.png) no-repeat center/cover;}
.message li.bot .avata.tts.active:hover {background: url(../../../image/ko/chatbot/tts_stop_button.png) no-repeat center/cover;}
.message li.bot .name { font-size: 11px;margin: 0 0 10px 50px;}
.message li.bot .time { font-size: 12px; color: #494848; position: absolute; bottom: 0;letter-spacing: -0.03em;}
.message li.bot .time2 { font-size: 10px; color: #999898; position: absolute; bottom: -20px; left: 0;}

.message li.user .bubble { background: #194a84 !important; float: right; border-top-right-radius: 0; color: #fff;}
.message li.user .bubble .b-tail { background: url(../../../image/ko/chatbot/bubbletail_red.png) no-repeat; width: 18px; height: 20px; position: absolute; top: -7px; right: -4px; z-index: 10;}
.message li.user .time { font-size: 12px; color: #494848; position: absolute; bottom: 0; left: -62px;}

.blank { margin-bottom: 20px;}

.write-form {position:relative; padding:0 10px;box-sizing: border-box; height: 52px; background: #fff !important; margin:20px 0; width: 100%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.write-form i { position:absolute; top:26px; left:8px; z-index:1; width:20px; height:20px;}
.write-form i.microphone {background: url(../../../image/ko/chatbot/microphone.png) no-repeat 0 0; cursor:pointer; background-size:20px; }
.write-form i.microphone.active {background: url(../../../image/ko/chatbot/microphone-active.gif) no-repeat 0 0; background-size:20px; }
.write-form i.microphone.disable {background: url(../../../image/ko/chatbot/microphone-disabled.png) no-repeat 0 0; pointer-events: none; background-size:20px;}
.write-form textarea {position:relative; box-sizing: border-box; width:84%;height:52px; outline: none; padding: 13px 20px 0 30px;background:#f8f8f8; border: 1px solid #ddd !important; font-family: NotoSans,sans-serif; line-height: 1.4; font-size: 16px; overflow: hidden;  resize: none; letter-spacing: -1px;box-sizing: border-box;border-radius: 30px;}

.write-form .send { float: right; width: 52px; height: 52px; margin: 0; border-radius: 30px; color: #fff; font-size: 13px; font-weight: normal; text-align: center; cursor: pointer;}
.write-form .send span { display: inline-block; width: 52px; height: 52px; background: url(../../../image/ko/chatbot/ico-send.png) no-repeat 0 0 !important;}
.write-form .send span:hover {background-position: 0 -52px;}

#chat-textarea::-webkit-input-placeholder { color: #adadad; font-family:NotoSans,sans-serif;}
#chat-textarea::-moz-input-placeholder { color: #adadad; font-family:NotoSans,sans-serif;}
#chat-textarea:-moz-input-placeholder { color: #adadad; font-family:NotoSans,sans-serif;}
#chat-textarea:-ms-input-placeholder { color: #adadad; font-family:NotoSans,sans-serif;}

#chat-textarea:focus::-webkit-input-placeholder { color: transparent;}
#chat-textarea:focus::-moz-input-placeholder { color: transparent;}
#chat-textarea:focus:-moz-input-placeholder { color: transparent;}
#chat-textarea:focus:-ms-input-placeholder { color: transparent;}

.message.hospital li.bot .avata { background: url(../../../image/ko/chatbot/avata_set.png) no-repeat 0 0; }
.message.trafic li.bot .avata { background: url(../../../image/ko/chatbot/avata_set.png) no-repeat -43px 0; }
.message.weather li.bot .avata { background: url(../../../image/ko/chatbot/avata_set.png) no-repeat -86px 0; }
.message.movie li.bot .avata { background: url(../../../image/ko/chatbot/avata_set.png) no-repeat -129px 0; }


/* cover
-------------------------------------------*/
.cover {height: calc(100% - 2px); min-width:500px; background-image: linear-gradient(340deg, #149ee4, #09cded ); position: relative; padding: 180px 60px 0 60px; text-align:center;}
.cover img.animation { /*  margin-left: 75px;*/ }

/* login
-------------------------------------------*/
.form-login input { display:inline-block; width: 450px; height: 50px; padding-left:30px; font-weight: 300; border: 1px solid #d4d4d4; background: #eee; border-radius: 25px; }
.form-login .dropdown { margin-bottom: 10px;}
.form-login input::placeholder { color: #aca8a8;}
.form-login input:-ms-input-placeholder { color: #aca8a8;}
.form-login input::-ms-input-placeholder { color: #aca8a8;}
.form-login .btn-dropdown {display:inline-block; width: 450px; height: 50px; border: none; border-radius: 21px; text-align: left; padding-left: 30px; padding-right: 30px; font-size: 13px; font-weight: 800; color: #6e7783; background: #fff;}
.form-login .btn-dropdown:hover,
.form-login .btn-dropdown:focus { background: #e0e8ee;}
.form-login .btn-dropdown .caret { float: right; margin-top: 5px; border-top: 8px solid #97a2b0;}
.form-login .dropdown-menu-style { width:450px; padding: 0; position: absolute; top: 455px; left: calc(50% - 225px); z-index: 1000; float: left; margin: 2px 0 0; font-size: 13px; text-align: left; list-style: none; background: #fff; border: none; border-radius: 20px; -webkit-box-shadow: 0 3px 10px rgba(165,155,145,0.21); box-shadow: 0 3px 10px rgba(165,155,145,0.21);}
.form-login .dropdown-menu-style > li > a { display: block; padding: 0 30px; clear: both; font-weight: normal; line-height: 35px; color: #333; white-space: nowrap; border-bottom: 1px solid #e4ebf0;}
.form-login .dropdown-menu-style > li > a:hover,
    .form-login .dropdown-menu-style > li > a:focus { color: #846e56; }
.form-login .dropdown-menu-style > li:first-child > a:hover,
    .form-login .dropdown-menu-style > li:first-child > a:focus  {border-radius:20px 20px 0 0;}
.form-login .dropdown-menu-style > li:last-child > a {border-bottom:none;}
.form-login .dropdown-menu-style > li:last-child > a:hover,
    .form-login .dropdown-menu-style > li:last-child > a:focus {border-bottom:none; border-radius:0 0 20px 20px;}


.form-login .btn-login { width: 450px; height: 50px; text-align: center; border-radius: 25px; border: none; background: #272f38; color: #fff; font-size: 18px; font-weight: 300;  margin-top: 10px;}
.form-login .btn-login:hover { background: #272f38;}

/* loading dot
-------------------------------------------*/
@keyframes dot-keyframes {
  0% {
    opacity: .4;
    transform: scale(0.8, 0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1, 1);
  }

  100% {
    opacity: .4;
    transform: scale(0.8, 0.8);
  }
}

.message li.bot .bubble .dots {
  text-align: center;
  width: 100%;
}
.message li.bot .bubble .dots .dot1 {
    animation: dot-keyframes 1.5s infinite ease-in-out;
    background-color: #000;
    border-radius: 10px;
    display: inline-block;
    height: 10px;
    width: 10px;
  }
.message li.bot .bubble .dots .dot2 {
    animation: dot-keyframes 0.5s infinite ease-in-out;
    background-color: #000;
    border-radius: 10px;
    display: inline-block;
    height: 10px;
    width: 10px;
    }

.message li.bot .bubble .dots .dot3 {
    animation: dot-keyframes 1s infinite ease-in-out;
    background-color: #000;
    border-radius: 10px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.questions {position:relative;}
.questions > ul {width:calc(100% - 1px);    bottom:70px; top:auto!important; height:auto; background: #fff; border:none!important; }
.questions > ul > li .ui-menu-item-wrapper {padding: 3px 30px;height:35px;  line-height: 35px;  color: #464646; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis;}
.questions > ul > li .ui-state-active {border: none;background: #c6e2ff;color: #464646;margin:0;}

.opinion-icon { background: url(../../../image/ko/chatbot/opinion_icon.png) no-repeat center/cover; width: 12px; height: 12px; position: absolute; top: 6px; right: 3px;  cursor: pointer;}
.opinions {position:relative; color:#797979;}
.opinions .opinion-header .top-btn {background-size: contain; height: 14px; cursor: pointer; margin-top:11px;}
.opinions .opinion-header .top-btn.back {background: url(../../../image/ko/chatbot/opinion_back.png) no-repeat 40px center/contain; float:left; }
.opinions .opinion-header .top-btn.cancel {background: url(../../../image/ko/chatbot/opinion_cancel.png) no-repeat center/contain; float:right; }
.opinions > ul {width:100%; bottom:0px; top:unset!important; background: #fff; border-radius: 0px 0px 10px 10px;     position:absolute; padding:0px;    z-index:2;  margin-bottom:0px; /*border-top:1px solid #bbbbbb;*/}
.opinions > ul > li {height:35px; line-height: 35px;    text-align:center; border-bottom:1px solid #bbbbbb;}
.opinions > ul > li:hover{  background:#c4e2ff;}
.opinions > ul > li:first-child:hover{  background:none;}
.opinions > ul > li:last-child {border-bottom:0px;}

.cursor {
    cursor:pointer;
}

@media screen and (max-width:719px) {
    .chatW {bottom:auto;top:0;right:auto;left:0;width:100%;height:100vh;z-index: 200;}
    .chat-container .chat-wrap {height:auto}
    .chat-container .chat-wrap .chat {height:calc(100vh - 140px);height:-webkit-calc(100vh - 140px)}
}
.answer .box.buttons .horizontal .btn {border: 1px solid #ddd;border-radius: 15px;padding: 4px 12px;background: #fff;font-family: NotoSans,sans-serif;color: #333;}


/* 챗봇 */

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content{
    width: auto;
}

.white-popup{
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}

/* 메시지 창 */
.message li.bot p {font-size:14px}
.message li.user .bubble>div {font-size:14px}
.message li.user .bubble>div.time { font-size: 12px; color: #494848; position: absolute; bottom: 0; left: -62px;}
.message .bubble .choiceBtn {padding:0 18px; margin-top: 10px}
.message .bubble .btn-link {display:block;width:100%;margin-bottom:10px;padding:11px 0;background:#1fb3e3;border:none;color:#fff;text-align: center;font-family: NotoSans,Roboto,sans-serif;font-size:15px;letter-spacing: -0.03em;border-radius: 30px;cursor: pointer;}
.message .resultTitle {position:relative;padding:10px 0 20px 20px;}
.message .resultTitle::after {content:"";display:block;position:absolute;bottom:0;left:-10px;width:calc(100% + 20px);height:1px;background:#ddd}
.message li.bot .resultTitle p {font-size:16px;color:#262626;letter-spacing: -0.05em;}
.message .slick-dots {margin-top:12px}
.message .slick-dots li {margin-top:0}
.chatBook .imgArea {text-align: center;}
.chatBook .imgArea img {margin:0 auto 20px auto;width:142px;height:194px;box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.2);}
.chatBook .info {margin-bottom: 10px;color:#616161;letter-spacing: -0.03em;font-size:14px;letter-spacing: -0.05em;text-align: center;}
.chatBook .bookGoBtns {padding:0 18px}
.chatBookSlide {margin-top:20px}
.chatBookSlide .slickPrev {display:block;position:absolute;top:84px;left:8px;width:20px;height:41px;background:url(../../../image/ko/chatbot/bookLeft.png);text-indent: -9999px;z-index: 1;cursor: pointer;}
.chatBookSlide .slickNext {display:block;position:absolute;top:84px;right:8px;width:20px;height:41px;background:url(../../../image/ko/chatbot/bookRight.png);text-indent: -9999px;z-index: 1;cursor: pointer}
.chatBookSlide .slick-dots {text-align: center;}
.chatBookSlide .slick-dots>li {display:inline-block}
.chatBookSlide .slick-dots>li button {width:12px;height:12px;margin:0 4px;background:#bbb;;border:none;border-radius: 100%;cursor: pointer;text-indent: -9999px;}
.chatBookSlide .slick-dots>li.slick-active button {background:#194a84}