/* reset */
@import url("https://fonts.googleapis.com/css2?family=Allura&family=Cardo:ital,wght@0,400;0,700;1,400&family=Cookie&family=Corinthia&display=swap");

* { margin: 0; padding: 0; word-break: keep-all; outline: none; box-sizing: border-box; }
li { list-style: none; }
a { text-decoration: none !important; color: inherit; }
img { vertical-align: top; }

/* common */
html { overflow-x: hidden; }
html.fix { overflow: hidden; }

body { background:#151515; }
.wrap { width: 94%; max-width: 1400px; margin: 0 auto; position: relative; font-size: 18px; font-family: ptr; }
.wrap * { word-break: keep-all; }
.wrap:after, ul:after, .cl:after { content: ""; clear: both; display: block; }
.blind { position: absolute; width: 0; height: 0; font-size: 0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; } 
.fl::after { display: none; }
.dn { display: none !important; }

.mt { font:80px cardo;  text-align: center; }
.f30 { font-size:30px; }
.f24 { font-size:24px; }

.swiper { width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { color:#fff; }
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active { background: #fff; }

/* header footer */
header { position: fixed; left: 0; top: 0; width: 100%; z-index: 99; height: 80px; color:#fff; overflow: hidden; transition: 0.3s; }
header.up { top:-80px; }
header.fix { background:rgba(0,0,0,0.8); }
header.on { height: 100vh; background: #151515; top:0 !important; }
header h1 { padding-top: 16px; }

#nav_btn { position: absolute; right: 0; top: 21px; }
#nav_btn .line { width: 40px; height: 2px; background-color: #999; display: block; margin: 8px auto; transition: all 0.3s ease-in-out; }
#nav_btn .line:nth-child(2) { width: 30px; margin-right: 0; }
#nav_btn:hover { cursor: pointer; }
#nav_btn.act .line:nth-child(1) { transform: translateY(10px) rotate(45deg); }
#nav_btn.act .line:nth-child(2) { opacity: 0; }
#nav_btn.act .line:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

header .inWrap { width: 90%; max-width: 1100px; margin:0 auto; justify-content: space-between; height:calc(100vh - 80px); }
header .gnb { font:75px cardo; width: 430px; }
header .gnb li { margin:20px 0; opacity: 0 !important; transform: translate3d(0,100px,0) !important; transition-duration: unset !important; }
header.on .gnb li { opacity: 1 !important; transform: translateZ(0) !important; transition-duration: 1s !important; }
header .gnb li a { justify-content: space-between; transition: 0.3s; }
header .gnb li a:hover { color:#b9d0c5; }
header .gnb li a figure { display: flex; align-self: center; position: relative; opacity: 0; transition: 0.3s; }
header .gnb li a:hover figure { opacity: 1; }
header .gnb li a figure:before { content:""; width: 70px; height: 70px; border:1px solid #fff; box-sizing: border-box; position: absolute; right: 0; top: calc(50% - 35px); border-radius: 40px; }
header .gnb li a figure img { position: relative; animation: 1s right infinite; }
@keyframes right {
    0%, 100% { left:-24px; }
    50% { left:-10px; }
}
header .inWrap > div { width: 480px; font-family: ptl;  opacity: 0 !important; transform: translate3d(100px,0, 0) !important; transition-duration: unset !important; }
header.on .inWrap > div { opacity: 1 !important; transform: translateZ(0) !important; transition-duration: 1.5s !important; }
header .info { font-size:20px; padding:0 10px; }
header .info li { float:left; width: 50%; margin-top: 70px; }
header .info li:nth-child(2) { width: 40%; float:right; }
header .info li:last-child { width: 100%; }
header .info li strong { display: block; font-family:cardo; font-weight: normal; margin-bottom: 10px; font-size:24px; }
header .inWrap p { font:16px ptr; color:#999; margin-top: 70px; padding:0 10px;  }

header .login { border:1px solid #999; color:#999; padding:0 20px; border-radius: 80px; position: absolute; right:80px; top:23px; line-height:32px; font-size:14px; transition:0.3s; }
header .login:hover { background: #999; color:#fff; }

/* background:url(/_img/bg_fs.png) no-repeat center/100%; */
#w_footer { flex-direction: column; max-height:1000px; }
#w_footer .bot {  height:calc(100vh - 300px); text-align: center; flex-direction: column; position: relative; display: flex; z-index:10; }
#w_footer .bot img { max-width: 70%; }
#w_footer .bot p { font-family: ptl; margin-top: 60px; line-height:1.8; }
#w_footer .wrap.fl  { flex-direction: column; height: 300px; }
#w_footer .wrap a { color:#fff; font: 32px/60px cardo; padding-top: 10px; }
#w_footer .wrap p { color:#999; }

.kakao { position: fixed; right: 30px; bottom: 90px; z-index: 999; }
.kakao img { width: 60px; }

.loader {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: linear-gradient(#ff85bd, #66c994, #f19c8e,#c6d2e0);
animation: animate7712 2s linear infinite;
left:calc(50% - 250px); 
top:calc(50% - 400px);
}

@keyframes animate7712 {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(360deg);
}
}

.loader span {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(#ff85bd, #66c994, #f19c8e,#c6d2e0);
}

.loader:after {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: #151515;
border: solid #151515 10px;
border-radius: 50%;
}

.loader span:nth-child(1) {
filter: blur(5px);
}

.loader span:nth-child(2) {
filter: blur(10px);
}

.loader span:nth-child(3) {
filter: blur(25px);
}

.loader span:nth-child(4) {
filter: blur(50px);
}



/* index */
#fullpage .section { background: #151515; color:#fff; position: relative; display:flex; align-items:center; justify-content:center;  }
#home { overflow: hidden; height:100vh; max-height:1100px; }
#home::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 1; }
#home video { width: 2400px; height: 120vh; position: absolute; left: calc(50% - 1200px); top: calc(50% - 60vh); }
#home .ment { position: absolute; left: 0; top: 0; width: 100%; height: 100%; flex-direction: column; z-index: 10; color: #fff; }
#home .ment p { margin-top: 60px; font-family: ptl; text-align: center; line-height:1.8; }
#home .ment p b { font-family: ptm; font-weight: normal; }
#home .ment ul { margin-top: 60px; }
.goBtn li { margin: 0 15px; }
.goBtn li a { justify-content: space-between; height: 50px; border-radius: 50px; padding: 0 10px 0 26px; background: #a7a5a5; width: 240px; font:16px ptr; color:#000;  }
.goBtn li a i { width: 32px; height: 32px; background: #000; color:#fff; border-radius: 40px; font-size:12px; }
.canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 7; display: flex; align-items: center; justify-content: center; }
.canvas #left { width: 500px; height: 500px; position: absolute; left: -10px; top:-100px; }
.canvas #right { width: 500px; height: 500px; position: absolute; right:0; bottom:200px; }
#home .scroll { position: absolute; left:calc(50% - 20px); bottom:60px; text-align: center; z-index: 5; width: 40px; }
#home .scroll:before { content:""; width: 40px; height: 40px; border:1px solid #fff; box-sizing: border-box; position: absolute; left: 0; top: 18px; border-radius: 40px; }
#home .scroll img { animation: 1.5s scroll infinite; position: relative; }
#home .scroll p { font-family: ptl; margin-top: 30px; }
@keyframes scroll {
    0%, 100% { top:-10px; }
    50% { top:12px; }
}

#pf { text-align: center; padding:200px 0; }
#pf .wrap { overflow: hidden; }

#pf ul { margin-top: 100px; }
#pf ul li { float:left; width: calc((100% - 80px) / 3); margin:0 40px 40px 0; position: relative; border-radius: 20px; overflow: hidden; }
#pf ul li img { width: 100%; }
#pf ul li:nth-child(3n) { margin-right: 0; }
#pf ul li p { position: absolute; left: 0; bottom:0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background:rgba(0,0,0,0.3); padding:20px 30px; width: 100%; }


/*
#pf .pfSlider { height: 400px; margin-top: 40px; overflow: visible; }
#pf .pfSlider .swiper-slide { position: relative; border-radius: 20px; overflow: hidden; }
#pf .pfSlider .swiper-slide p { position: absolute; left: 0; bottom:0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background:rgba(0,0,0,0.3); padding:20px 30px; width: 100%; }
#pf .pfSlider .swiper-pagination-bullet { background: #fff; }
#pf .pfSlider .swiper-horizontal>.swiper-pagination-bullets, 
#pf .pfSlider .swiper-pagination-bullets.swiper-pagination-horizontal, 
#pf .pfSlider .swiper-pagination-custom, .swiper-pagination-fraction { bottom:-40px; }*/
.more { margin:80px auto 0; border:1px solid #eee; color:#eee; font:18px/46px ptr; border-radius: 100px; width:280px; display: block; height: 50px; transition: .3s; }
.more:hover { background: #eee; color:#000; }

#our { padding:0 0 200px; }
#our h2 { text-align: center; }
#our .cl { margin-top: 20px; }
#our .cate { width: 320px; float:left; }
#our .cate li { position: relative; margin-bottom: 50px; opacity: 0.5; transition:.5s; cursor: pointer; padding-left: 20px; }
#our .cate li:last-child { margin-bottom: 0; }
#our .cate li.select { opacity: 1; }
#our .cate li strong { font:normal 30px ptm; display: block; margin-bottom: 10px; }
#our .cate li strong:before { content:""; width: 10px; height: 10px; border-radius: 10px; background: #fff; position: absolute; left: 0; top: 13px; }
#our .cl > div { width:calc(100% - 360px); float:right; opacity:0; position: relative; transition:0.5s; }
#our .cl > div:first-of-type ~ div { position: absolute; right: 0; bottom: 0; }
#our .cl > div.on { opacity: 1; z-index:5;}
#our .cl > div h2 { height:100%; font:bold 110px/1 cardo; position: absolute; right:0; top:0; text-align: right; opacity: 0.3; letter-spacing: -6px;}
#our .cl > div img { position: relative; z-index: 1; max-width: 100%; }
#our .cl > div p { position: absolute; right: 0; bottom: 0; max-width: 480px; font-family: ptl; z-index: 3; line-height:1.6; }


#contact { padding:0 0 100px; }
#contact.cont { padding-top: 200px; }
#contact.cont .view { padding-bottom: 120px; }
#contact h2 + .fl, #contact .wrap > .fl { flex-direction: row-reverse; justify-content: space-between; margin-top: 40px; }
#contact .fl > div { width: 50%; }

#contact .write h2 { font-family: ptt; margin-bottom: 10px; }
#contact .write p { font:16px ptd; color:#aaa; }
#contact .write ul { display:flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 20px; }
#contact .write ul:after { display: none; }
#contact .write .type1 ul li { width: 48%; margin-bottom: 20px; }
#contact .write .type1 ul li input { width:100%; border:none; border-bottom:1px solid #ddd; background: none; height: 50px; font:18px ptr; color:#fff; }
#contact .write .type1 ul li input::placeholder { color:#fff; }
#contact .write .type2 { margin-top: 40px; }
#contact .write .type2 li { width: 23%; margin-bottom: 20px; }
#contact .write .type2 input { position: absolute; left:-9999px; }
#contact .write .type2 label { display: flex; width: 100%; line-height:48px; height: 50px;font-family: ptr; text-align: center; background: #434343; border-radius: 100px; align-items: center; justify-content: center; cursor: pointer; }
#contact .write .type2 input:checked + label { background: #fff; color:#222; }

#contact .write .send { width:100%; height:50px; border:1px solid #fff; border-radius: 50px; background: none; font:18px str; color:#fff; cursor: pointer; transition:0.3s; }
#contact .write .send:hover { background: #fff; color:#000; }

#contact .view p { font:58px/1.6 ptt; }
#contact .view p span { font-family: ptm; }
#contact .view button { border:1px solid #fff; border-radius: 100px; height:50px; padding:0 40px; background: none; color:#fff; font:18px str; margin-top: 40px; cursor: pointer; transition:0.3s; }
#contact .view button:hover { background: #fff; color:#000; }

#contact.cont .priceTable { margin:0 auto 160px; }
.priceTable article { margin-bottom: 100px; color:#fff; }
.priceTable article > .fl { justify-content: space-between; }
.priceTable article > .fl h2 { font:24px ptm; }
.priceTable article > .fl strong { font:24px ptm; color:#f39316; }
.priceTable article table { width:100%; border-collapse: collapse; margin-top: 20px;  }
.priceTable article table th, .priceTable article table td { border-bottom:1px solid #333; padding:20px; text-align: center;  }
.priceTable article table th { background:#444; font-weight: normal; }
.priceTable article table th:first-child { width: 25%; border-right:1px solid #333; }
.priceTable article table td:first-child { border-right:1px solid #333; }
.priceTable article .special { position: relative; padding-left: 60px; margin-top: 20px; font:16px/1.6 ptl;  }
.priceTable article .special:before { content:"EVENT"; position: absolute; left: 0; color:#f39316; }
.priceTable .vat { text-align: right; font:14px ptt; margin-top: 20px; }

#progress {  font:18px/1.4 ptm; justify-content: space-between; margin-bottom: 100px; text-align: center; }
#progress li { width: 200px; height: 80px; border:1px solid #fff; border-radius: 20px; position: relative; color:#fff; }
#progress li.act { animation: 1s tw infinite; }
#progress li:before { content:"-"; position: absolute; right:-14.4%; font:40px ptt; color:#fff; }
#progress li:last-child:before { display: none; }
@keyframes tw {
    0%, 100% { background: none; color:#fff; }
    50% { background: #fff; color:#000; }
}


/* sub layout */
.blank { display: none; height: 80px; }
.sv { background:url(/_img/bg_sub1.png) no-repeat center/cover; position: relative; }
/* .sv { background:url(/_img/sunset-forest.jpg) no-repeat center/cover; position: relative; } */
.sv .wrap { height: 480px; }
.sv h2 { font-size:120px; color:#b9d0c5; position: absolute; left: 0; bottom: -68px; }

.cont { padding: 200px 0 100px; color:#fff; text-align: center; }

/* about */
#about .cont1 h2 { font:italic 38px ptm; }
#about .cont1 em { font:normal 28px/1.6 ptm; display: block; margin-top: 50px; }
#about .cont1 em br { display: none; }
#about .cont1 strong { font:normal 22px/1.6 ptm; display: block; margin-top: 10px; }
#about .cont1 strong br { display: none; }
#about .cont1 p { margin-top: 60px; font:22px/1.8 ptel; }
#about .cont1 img { position: absolute; right:0; bottom: 0; }

#about .cont2 { margin-top: 200px; }
#about .cont2 h2 { font:50px/1.3 ptm; position: absolute; }
#about .cont2 ul { width: 900px; justify-content: flex-end; flex-wrap: wrap; margin-left: auto; }
#about .cont2 ul li { width: 280px; height: 280px; background: #fff; margin:0 0 30px 30px; color:#222; padding:20px; }
#about .cont2 ul li:first-child { margin-left: 0; }
#about .cont2 ul li figure { width: 50px; height: 50px; justify-content: flex-start; }
#about .cont2 ul li dl { margin-top: 20px; }
#about .cont2 ul li dl dt { font-family: ptb; min-height: 70px; line-height:1.3; }
#about .cont2 ul li dl dd { line-height:1.6; }
#about .cont2 p { font:80px/1.5 cardo; opacity: 0.2; position: absolute; left: 0; bottom: 0; }

/* portfolio */
#portfolio { padding-top: 80px; }
#portfolio .cont1 > p { font:24px/1.6 ptt; }
#portfolio .cont1 > p b { font-family: ptb; }
/* #portfolio #drag { cursor: grab; overflow: hidden; }
#portfolio #drag .cate { width: 1100px; } */
#portfolio .cate { margin-top: 100px; }
#portfolio .cate li { float:left; margin-right: 20px; margin-bottom: 20px; }
#portfolio .cate li:last-child { margin-right: 0; }
#portfolio .cate li a { display: block; width: 140px; line-height:40px; border:1px solid #999; text-align: center; color:#999; border-radius: 100px; }
#portfolio .cate li.select a { border-color:#fff; background: #fff; color:#222; font-family: ptb; }
#portfolio .pfList { margin-top: 100px; overflow: visible; }
#portfolio .pfList li { float:left; width:calc((100% - 80px) / 3); margin-right: 40px; margin-bottom: 80px; }
#portfolio .pfList li:nth-child(3n) { margin-right: 0; }
#portfolio .pfList li:nth-child(3n+1) { clear:both; }
#portfolio .pfList li figure { position: relative;  }
#portfolio .pfList li figure:before { width:80px; height: 80px; background: #000; color:#fff; font-size:30px; border-radius: 80px; position: absolute; right:20px; bottom:0; display:flex; align-items: center; justify-content: center; opacity: 0; transition:0.3s; }
#portfolio .pfList li figure img { width: 100%; height: 440px; object-fit: cover; transition:0.3s; }
#portfolio .pfList li:hover figure img { border-radius:0 0 140px 0; }
#portfolio .pfList li:hover figure:before { opacity: 1; right:0; }
#portfolio .pfList li h3 { font:20px ptl; margin-top: 16px; color:#ccc; }
#portfolio .pfList li p { font:24px ptr; margin-top: 10px; }


.pg_wrap { text-align:center; } 
.pg_wrap .pg { display:flex; align-items: center; justify-content: center; } 
.pg_wrap .sound_only { position: absolute; width: 0; height: 0; font-size:0; overflow: hidden; } 
.pg_wrap strong, 
.pg_wrap a { border:1px solid #666; font:16px ptt; display:flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; margin:0 3px; }
.pg_wrap strong { background:rgba(255,255,255,0.4); }

.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; opacity: 0; z-index: -10; }
.modal.on { display:flex; z-index: 999;  transition: 0.3s; opacity: 1; }
.modal a { position: absolute; top: 0; right: 0px; font-size: 40px; color: #fff; cursor: pointer; width: 40px; height: 40px; line-height: 40px; text-align: center; }

.modal .box { width:80%; max-width: 1400px; position: relative; }
.modal .box h3 { text-align: center; font: 24px/40px ptm; margin-bottom: 20px; color:#fff; }
.modal .box figure { max-height:70vh; overflow-y: auto; }
.modal .box figure::-webkit-scrollbar{width: 2px;}
.modal .box figure::-webkit-scrollbar-track {background-color:#666;}
.modal .box figure::-webkit-scrollbar-thumb {background-color:#b9d0c5; }
.modal .box figure img { width: 100%; }

.modal .price { position: relative; height: 800px; width: 1400px; }
.modal .price .xi-close-thin { z-index: 5; top:-60px; }
.modal .price .priceTable { width: 100%; padding:40px; background: #000; height:100%; overflow: auto; box-sizing: border-box ;}
.modal .price .priceTable::-webkit-scrollbar{width: 2px;}
.modal .price .priceTable::-webkit-scrollbar-track {background-color:#666;}
.modal .price .priceTable::-webkit-scrollbar-thumb {background-color:#b9d0c5; }
.modal .price .priceTable article:last-of-type { margin-bottom: 0; }




/* contact */
#contact.cont { min-height:auto !important; margin-top: 0; }
#contact.cont .wrap > .fl { margin-top: 0; }

/* service */
#service h2.mt { font-size:50px; font-style: italic; text-align: left; }
#service p.f24 { font-family: ptl; margin-top: 40px; line-height:1.6; }
#service p.f24 .tab { display: none; }
#service .cont1 ul { justify-content: space-between; margin-top: 100px; }
#service .cont1 ul li { width: 340px; height: 340px; border:1px solid #999; border-radius: 340px; flex-direction: column; text-align: center; justify-content: flex-start; position: relative; background: #151515; }
#service .cont1 ul li:before { content:""; position: absolute; right:-40px; top:50%; border-top:1px solid #999; width:40px; }
#service .cont1 ul li:last-child:before { display: none; }
#service .cont1 ul li .name { padding-top: 20%; position: relative; z-index:1; }
#service .cont1 ul li .name span { font:38px cardo; position: relative; }
#service .cont1 ul li .name span:first-child:before { content:""; width: 30px; height: 30px; border-radius: 30px; position: absolute; left: -10px; top: 2px; background: #f7b9d5; z-index:-1; }
#service .cont1 ul li:nth-child(2) .name span:first-child:before { background: #b9d0c5; }
#service .cont1 ul li:nth-child(3) .name span:first-child:before { background: #f3d1cb; }
#service .cont1 ul li:nth-child(4) .name span:first-child:before { background: #c7d2dd; }
#service .cont1 ul li .name span:last-child { display: block; margin-top: -10px; }
#service .cont1 ul li p { margin-top: 20px; line-height:1.6; }

#service .cont2 { padding:100px 0; background: #202020; margin-top: 100px; }
#service .cont2 figure { position: absolute; right:0; top:0; width: 40%; height: 100%; }
#service .cont2 ul { margin-top: 60px; display:grid; width:50%; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
#service .cont2 ul li { border:1px solid #999; padding:20px; }
#service .cont2 ul li.select { background: #555; }
#service .cont2 ul li div { height: 42px;  font:30px cardo; }
#service .cont2 ul li h3 { font-family: ptm; font-weight: normal; margin-top: 10px;  }
#service .cont2 ul li p { font-family: ptl; margin-top: 10px;  }

#service .cont3 { padding:100px 0; }
#service .cont3 h2.mt { font-size:100px; opacity: 0.2; }
#service .cont3 h2:last-of-type { position: absolute; right:0; top:63.5%; }
#service .cont3 ul { justify-content: space-between; margin-top: -30px; }
#service .cont3 ul li { width: 450px; background: #202020; border-radius: 20px; min-height: 350px; text-align: center; padding-top: 80px; }
#service .cont3 ul li span { font-size:50px; opacity: 0.2; }
#service .cont3 ul li h3 { font-family: ptm; font-weight: normal; margin-bottom: 20px; }
#service .cont3 ul li p { line-height:1.6; }
#service .cont3 .more { margin-top: 130px; text-align: center; }

/* login */
#login form { width: 400px; display:flex; flex-direction: column; align-items: center; justify-content: center; margin:-200px auto 0; }
#login form h2 { color:#b9d0c5; font:italic 900 42px cardo; text-align: center; margin-bottom: 40px; }
#login form input { width:100%; height:50px; padding:0 20px; font:18px ptm; margin-bottom: 20px; background: #fff; border:none; border-radius: 8px; }
#login form input[type="submit"] { background: #444; color:#fff; }

/* client */
#client { color:#fff; }
#client h3 { font:italic 500 38px cardo;}
#client table { width: 100%; border-collapse: collapse; border-top:1px solid #ddd; margin-top: 40px; }
#client table tbody tr:hover { background: #333; }
#client table th, #client table td { padding:0 10px; border-bottom:1px solid #666; text-align: center; font-weight: normal; height: 60px; }
#client table td strong ~ * { display: none; }
#client table td:first-child { text-align: left; }
#client table td strong { font-weight: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; }

#client .list table td:nth-child(2) { width: 460px; }
#client .list table td:nth-child(3) { width: 180px; }
#client .list table td:nth-child(4) { width: 180px; }
#client .list table td .bar { width:400px; background: #666; border-radius: 50px; margin:0 auto; overflow: hidden; }
#client .list table td .bar p { height:16px; font-size:13px; width:30%; background:#f39316;  text-align:right; }
#client .list table td .bar p em { padding-right: 10px; }

#client .req { margin-top: 200px; }
#client .req td { width: 180px; }
#client .req td:nth-child(1) { width:auto; }
#client .req td:nth-child(2) { text-align: right; }
#client .req td button { width: 120px; height: 40px; background: #f39316; border-radius: 8px; border:none; color:#fff; font:18px ptr; cursor: pointer; }

#client .logout { width:160px; display: block; margin:60px auto 0; line-height:40px; background: #333; border-radius: 8px; text-align: center; }



.chat-modal {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 9001;
    background: #fff;
    width: 350px;
    border-radius: 15px;
    box-shadow: 0 5px 30px rgba(0,0,0,0.15);
}

@media screen and (max-width: 768px) {
    .chat-modal {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 500px;
}

@media screen and (max-width: 768px) {
    .chat-container {
        height: 100%;
    }
}

.chat-header {
    padding: 15px 20px;
    background: #2c3e50;
    color: white;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .chat-header {
        border-radius: 0;
    }
}

.chat-header h3 {
    margin: 0;
    font-size: 16px;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.chat-log {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.chat-log .message {
    margin-bottom: 15px;
    max-width: 80%;
    position: relative;
}

.chat-log .ai-message {
    background: #f0f2f5;
    padding: 12px 15px;
    border-radius: 0 15px 15px 15px;
    margin-right: auto;
    margin-left: 40px;
}

.chat-log .ai-message::before {
    content: '';
    position: absolute;
    left: -35px;
    top: 0;
    width: 30px;
    height: 30px;
    background: url('/_img/chatbot-icon.png') no-repeat center/cover;
    border-radius: 50%;
}

.chat-log .user-message {
    background: #0084ff;
    color: white;
    padding: 12px 15px;
    border-radius: 15px 0 15px 15px;
    margin-left: auto;
}

.chat-input-area {
    padding: 15px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
}

.chat-input-area input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
}

.chat-input-area button {
    background: #2c3e50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chat-trigger {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #2c3e50;
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 9000;
}

@media screen and (max-width: 768px) {
    #chat-trigger {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
    }
}

#chat-trigger i {
    font-size: 20px;
}

.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    width: fit-content;
}

.typing-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #2c3e50;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% { 
        transform: translateY(0);
    }
    40% { 
        transform: translateY(-10px);
    }
}