@charset "utf-8";

/****************** header *****************/
header{background:rgba(0, 0, 0, 0);transition: ease-in 0.2s;}
header.active{background:rgba(0, 0, 0, 0.6);-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);}

.menu > li{overflow-x:hidden}
.defaultMenu:after, .point:after{content:''; width:0px; height:1px; background:#fefefe; position:absolute; left:0%; bottom:0; transition: ease-in 0.3s;}
.defaultMenu:hover:after, .point:after{width:200px;}
.menuPoint{overflow-x:initial !important}
.menuPointLink{left:50%; top:-40px; height:0; padding-top:0; padding-bottom:0; overflow-y: hidden; transform:translateX(-50%); width:max-content; background:linear-gradient(180deg, black, transparent); transition: ease-in 0.3s;}
.menuPoint:hover .menuPointLink{height:488px; padding-top:110px; padding-bottom:40px}
.point.menuPoint:after{width: 130px;}
.menuPointLink p{line-height: 1}


.toggle{cursor: pointer; transition: ease-in 0.3s;}
.toggle > span:nth-child(1){top:0px; left:0;}
.toggle > span:nth-child(2){top:8px; left:0;}
.toggle > span:nth-child(3){top:16px; left:0;}
.toggle.active {transform:rotate(90deg)}
.toggle.active > span{width:80px; background:linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(174, 121, 145, 0.5) 50%, rgba(100, 0, 45, 0) 100%);transition: ease-in 0.3s;}
.sideMenu{right:-400px; top:0; transition: ease-in 0.3s; background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 20% ); box-sizing: border-box;}
.sideMenu.active{right:0;}

/****************** index *****************/
.mainBanner{overflow:hidden}
.mainBanner video{object-fit: cover;left:50%; top:50%; transform: translate(-50%, -50%);}
.mainIntro a{width:fit-content;}
.sliderBox{left:0; bottom:80px}
.mainNews > .inner > a{width:fit-content; }

.mainNewsList p{overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}

/****************** about *****************/
.aboutBanner{box-sizing: border-box;}

.aboutChracterImgCnt{width:calc(33.3333% - 16px)}

#aboutModal{background:rgba(0,0,0,0.8); left:0; top:0}
.aboutModalCnt{max-height:60dvh; overflow-y:auto}
.aboutModalClose{cursor: pointer;}
.aboutModalClose > span{left:50%; top:50%;}
.aboutModalClose > span:nth-child(1){transform: translate(-50%, -50%) rotate(45deg);}
.aboutModalClose > span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);}

.aboutChracterMain{background:#eee}
/****************** news *****************/
.newsList{height:15dvw}
.newsList a{background-size:cover !important}
.newsTit{border-bottom:1px solid #222}
.pagination a{padding:16px 12px; margin:0 10px}
.pagination a.active{background:#222; color:#fefefe}

/****************** works *****************/
.subBanner{overflow-y:hidden;  overflow:hidden}
.mainMadeLink{cursor: pointer;background:rgba(35, 31, 32, 0.8); transition: ease-in 0.3s;  mix-blend-mode: hard-light; }
.mainMadeLink:hover, .mainMadeLink.active{background:rgba(255,255,255,0.2); border:1px solid rgb(254 254 254 / 50%); border-width:0 1px 0 1px}

.pointSlash{width:1px; height:68px; background:#fefefe; }
.boardTit > p:nth-child(1):after{content:''; display: block;width:1px; height:68px; background:#fefefe; margin-left:40px;}
.gallery-item{width:calc(25% - 12px); overflow:hidden; cursor: pointer;}

.modal{left:0; top:0; background:rgba(0, 0, 0 , 0.8)}
.modalCnt{overflow:hidden}
.youtube iframe{width:100%; }
.modalClose{cursor: pointer;}
.modalClose:after, .modalClose:before{content:''; display: block; width:40px; height:1px; background:#fefefe; position:absolute; left:50%;top:50%}
.modalClose:after{transform: translate(-50%, -50%) rotate(45deg);}
.modalClose:before{transform: translate(-50%, -50%) rotate(-45deg);}
.deleteBtn{top:40px; right:40px}
.thumbnail{background-size:cover !important}
.marketingCnt .co_white{line-height: 3em;}

/***************** write *****************/
.inputBox input, .inputBox textarea, .inputBox select{border:1px solid #D3D3D3; background:#EFEFEF; box-sizing: border-box; max-width: 100%;}
.inputBox textarea{min-width: 100%;}
.submitBtn{background:#222; cursor: pointer;}
.form input, .form textarea{border:1px solid #eee}
.form textarea{min-width:100%; max-width:100%; box-sizing: border-box;}
/***************** news *****************/


/***************** list *****************/
.listSec{min-height:80dvh}
.online-list{overflow-x:scroll}
.online-list table{min-width:800px}
.online-list thead tr th{border-bottom:2px solid #AAAAAA}
.online-list tbody tr td{border-bottom:1px solid #AAAAAA}

.listBorder{border-bottom:1px solid #aaa}

.contactInput{background:#EFEFEF; border:1px solid #d3d3d3; line-height: 1em; box-sizing: border-box;}
textarea.contactInput{max-width:100%; min-width:100%;}
/***************** view *****************/
.viewBox table tr td:nth-child(1){width:(100% - 150px); word-break: break-all;}

/***************** footer *****************/
.topBtn{border:1px solid #fefefe; right:40px; bottom:180px;}
.topBtn:after{content:''; display:block; width:16px; height:16px; border:2px solid #fefefe; border-width:2px 2px 0 0; position:absolute; left:50%; top:60%; transform:translate(-50%, -50%) rotate(-45deg)}


.policyTp {border-bottom:1px solid #FFF;}