@import url("common.css");



/* 풀페이지 */
.section {overflow:hidden; clear:both; position: relative; width: 100%; height: 100%; word-break: keep-all; box-sizing:border-box; display:flex; justify-content: center; flex-direction: column; z-index:1;}
.section .bg {display:block; width:100%; height:100%; position:absolute; left:0; top:0;  z-index: -1; transform:scale(1.2);}
.section.action .bg {transition:all 3s cubic-bezier(0.215,0.61,0.355,1); transform:scale(1); }
.section .fp-tableCell {vertical-align: middle;}

.pagination {position:absolute !important; bottom:30px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.pagination .pagination-left {display:flex; flex-wrap:wrap; align-items:center; gap:0 18px;}
.pagination .pagination-left .scr {color: rgba(255,255,255,0.8); text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08); font-family: var(--eng); font-size: 12px; font-weight: 600; line-height:108.333%; letter-spacing: 0.36px; gap:0 5px; display:flex; flex-wrap:wrap; align-items:center; }
.pagination .pagination-left .scr::before {content:'\e323'; font-size:26px; color:var(--white); font-family:var(--icon); line-height:1; font-weight:400;}
.pagination .pagination-left ul {display:flex; flex-wrap:wrap; align-items:center; gap:3px;}
.pagination .pagination-left ul li {color: var(--white); text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.08); font-size: 0.6666rem; font-weight: 500; line-height:100%; opacity:0.5;}
.pagination .pagination-left ul li.cur {font-size: 0.833rem; font-weight: 700; opacity:1;}
.pagination .pagination-right {display:flex; flex-wrap:wrap; align-items:center;}
.pagination .pagination-right .privacy {color: var(--white); font-size: 0.833rem; font-weight: 600; line-height: 186.667%; }
.pagination .pagination-right .copy {color: rgba(255, 255, 255, 0.45); font-family:var(--eng); font-size: 0.833rem;}
.pagination .pagination-right .copy::before {content:''; width:1px; height:12px; background: rgba(255, 255, 255, 0.15); margin:0 15px; display:inline-block; vertical-align:middle;}
.pagination .pagination-right .copy a {opacity: 0.6; display:inline-block; margin-left:5px; vertical-align:middle; font-size:inherit; font-family:inherit; line-height:inherit; letter-spacing:inherit;}

.pagination.black_ver .pagination-left .scr {color: rgba(34,34,34,0.6);}
.pagination.black_ver .pagination-left .scr::before {color: rgba(34,34,34,0.8);}
.pagination.black_ver .pagination-left ul li {color:var(--black);}


/* Top */
.sec_top {position: absolute; right:40px; bottom: 70px; z-index: 99999; display:block; width: 70px; height: 70px; font-size:0; border-radius:50%; background: linear-gradient(225deg, #1B979F 14.67%, #2765E0 85.33%);}
.sec_top::before {content:'\e25a'; font-size:29px; font-family:var(--icon); line-height:70px; text-align:center; display:block; color:var(--white);}

/* 풀페이지 */





/*** css 공통 ***/
/* 텍스트 */
.fs62 {color: var(--black); font-size: 3.444rem; font-weight: 900; line-height:103.226%;}
.fs40 {color: var(--black); font-size: 2.222rem; font-weight: 800; line-height:125%;}
.fs27 {color: var(--white); font-size: 1.5rem; font-weight: 700; line-height: 103.704%;}
.fs21 {color: var(--black); font-size: 1.1666rem; font-weight: 600; line-height: 157.143%; }

/* 버튼 */
.moreBtn {position:relative; display:block; width: 115px; height: 63px; padding:7px 0; box-sizing:Border-box; transition:all 0.3s linear; background:transparent; border:0; cursor:pointer;}
.moreBtn::after {content:'\e941'; width: 62px; height: 62px; line-height:62px; font-size:29px; font-family:var(--icon); color:var(--white); border-radius:100%; background:var(--main); display:block; text-align:center; position:absolute; top:50%; left:50%; margin:-29px 0 0 -31px; box-shadow: 0px 0px 20px 0px rgba(39, 101, 224, 0.25); transform:scale(0); transition:all 0.3s linear;}
.moreBtn span {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  width:100%; height:100%; border:1px solid var(--main); border-radius:50px; font-family: var(--eng); font-size: 0.833rem; font-weight: 700; color:var(--main); transition:all 0.3s linear;}

.moreBtn:hover {padding:7px 15px; transition:all 0.3s linear;}
.moreBtn:hover::after {transform:scale(1); transition:all 0.3s linear;}
.moreBtn:hover span {border-color:rgba(39,101,224,0.3); transition:all 0.3s linear;}

.moreBtn.ver-sub::after {box-shadow: 0px 0px 20px 0px rgba(27,151,159, 0.25); background:var(--sub);}
.moreBtn.ver-sub span {border-color:var(--sub); color:var(--sub);}
.moreBtn.ver-sub:hover span {border-color:rgba(27,151,159,0.3);}

.moreBtn.ver-white::after {box-shadow: 0px 0px 20px 0px rgba(255,255,255, 0.25); background:var(--white); color:var(--black);}
.moreBtn.ver-white span {border-color:var(--white); color:var(--white);}
.moreBtn.ver-white:hover span {border-color:rgba(255,255,255,0.3);}


/* 화살표 */
.slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999;}



.wrapper {position:relative;}
.wrapper::before {content:''; width:1px; height:100%; background:rgba(255,255,255,0.15); position:fixed; top:0; left:50%; z-index:50; transition:all 0.3s linear; opacity:0; visibility:hidden;}
.wrapper::after {content:''; width:41px; height:41px; background:url("/img/about_ci.svg")no-repeat center; position:fixed; top:55%; left:50%; transform:translate(-50%,-50%); z-index:50; transition:all 0.3s linear; opacity:0; visibility:hidden;}


.fp-viewing-firstPage .wrapper::before, .fp-viewing-firstPage .wrapper::after {opacity:1; visibility:visible;}
.fp-viewing-secondPage .wrapper::before, .fp-viewing-secondPage .wrapper::after {opacity:1; visibility:visible;}
.fp-viewing-secondPage .wrapper::before {background:Var(--border); transition:all 0.3s linear;}






/*** Visual ***/
#visual {width:100%; height: var(--vh); overflow: hidden; background:var(--black); position: relative;}
#visual .slick-list, #visual .slick-track {height:100%;}
#visual::before {content:''; aspect-ratio: 3 / 3; height:100%; opacity: 0.5; background: var(--sub); filter: blur(185px); border-radius:100%; position:absolute; top:0; left:0; z-index:15; transform:translateX(-50%);}
#visual::after {content:''; aspect-ratio: 3 / 3; height:100%; opacity: 0.5; background: var(--main); filter: blur(185px); border-radius:100%; position:absolute; top:0; right:0; z-index:15; transform:translateX(50%);}
#visual .visual_in{width: 100%; height: 100%; position: relative;}
#visual .visual_in .roll {width: 100%; height: 100%;}
#visual .visual_in .roll::after {content:''; width:100%; height:100%; background:rgba(0,0,0,0.6); position:absolute; top:0; left:0;}
#visual .visual_in .roll .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual .visual_in .roll .v_bg .bg{width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual .visual_in .roll .v_bg .jarallax{position: relative; width: 100%; height:100%;}
#visual .visual_in .roll .v_bg .jarallax iframe{position: absolute;}

#visual .tBox {position:absolute; top:50%; left:50%; z-index:20; transform:translate(-50%,-50%); max-width:575px; width:90%;}
#visual .tBox .fs82 {color: var(--white); text-align: center; font-size: 82px; font-weight: 900; line-height:100%; text-transform: uppercase; display:flex; flex-wrap:wrap; justify-content:space-between; overflow:hidden;}
#visual .tBox .fs82 b {line-height:inherit; font-size:inherit; font-weight:inherit; transform:translateY(100%);}
#visual.action .tBox .fs82 b {transform:translateY(0); transition:all 0.6s .3s ease;}
#visual .tBox .t-list {display:flex; flex-wrap:wrap; justify-content:space-between; margin:25px 0 0;}
#visual .tBox .t-list span {color: rgba(255,255,255,0.8); font-family: var(--eng); font-size: 1rem; font-weight: 400; line-height:155.556%; opacity:0;}
#visual .tBox .t-list span:first-of-type {transform:translateX(-70px);}
#visual .tBox .t-list span:last-of-type {text-align:right; transform:translateX(70px);}

/* #visual.action::before {transform:translateX(-50%); opacity:0.5; transition:all 1s .3s ease;}
#visual.action::after {transform:translateX(50%); opacity:0.5; transition:all 1s .3s ease;} */
#visual.action .tBox .t-list span {transform:translateX(0) !important; opacity:1; transition:all 1s .6s ease;}

/* 스크롤 */
#visual .scroll_down{display:inline-block; font-size:13px; font-weight:500; color:var(--white); line-height:120%; font-family:var(--eng); text-align:center; position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index: 9999;}
#visual .scroll_down span{display:block; width:20px; height:30px; border-radius:20px; box-sizing:border-box; border:1px solid rgba(255,255,255,.5); position:relative; margin:12px auto 0;}
#visual .scroll_down span:after{content:''; display:block; width:2px; height:5px; background:#fff; border-radius:2px; position:absolute; left:50%; top:8px; margin-left:-1px; animation:scroll_down 1s linear infinite;}


@keyframes scroll_down {
	0%,100% { transform:translateY(0); opacity: 1;}
	50% { transform:translateY(2px); opacity: 0.5;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}


/* 화살표 */
#visual .slick-arrow{opacity: 1; bottom:38px;}
#visual .slick-arrow:hover{opacity: 0.5;}
#visual .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; left:50%; margin-left:-675px;}
#visual .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto; right: 50%; margin-right:-675px;}


/* 도트 */
#visual .slick-dots{position: absolute; right: 5%; bottom:30px; z-index: 9999;}
#visual .slick-dots li {display:block; vertical-align:top; width:30px; height:30px; border:1px solid transparent; box-sizing:border-box; cursor:pointer; transition:all .3s linear; border-radius:50%; position: relative;}
#visual .slick-dots li+li {margin:12px 0 0;}
#visual .slick-dots li.slick-active{border-color:var(--white);}
#visual .slick-dots li:after{content:''; display:block; width:8px; height:8px; border-radius:50%; background:var(--white); position: absolute; left:50%; top:50%; margin-left: -4px; margin-top: -4px; opacity: 0.5; transition:all .3s linear;}
#visual .slick-dots li.slick-active:after {opacity: 1;}
#visual .slick-dots li button{border:0; padding:0; font-size:0; outline:none; cursor:pointer;}


/* 효과 */
#visual .visual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
#visual .visual_in .roll.action .v_txt h2{transform:translateY(0); opacity:1;}
#visual .visual_in .roll.action .v_txt p{transform:translateY(0); opacity:1;}





#about {}
#about .tBox {display:none;}
#about .basic_in {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:0 260px;}
#about .basic_in dl {}
#about .basic_in dl .fs62 {text-align:right; margin:0 0 50px;}
#about .basic_in dl dt {position:relative;}
#about .basic_in dl dt::after {content:''; width:100%; height:25%; background: linear-gradient(0, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); position:absolute; bottom:0; left:0;}
#about .basic_in dl dt img {width:100%;}
#about .basic_in dl dd {margin:-20px 0 0; position:relative; z-index:10;}
#about .basic_in dl dd .stxt {margin:4px 0 35px;}

#about .basic_in dl:first-of-type {opacity:0; visibility:hidden; transform:translateX(-70px);}
#about .basic_in dl:last-of-type {opacity:0; visibility:hidden; transform:translateX(70px);}
#about.action .basic_in dl:first-of-type {opacity:1; visibility:visible; transform:translateX(0); transition:all 1.3s 0.4s ease;}
#about.action .basic_in dl:last-of-type {opacity:1; visibility:visible; transform:translateX(0); transition:all 1.3s 0.7s ease;}




#notice {background:var(--grayBg);}
#notice .tBox {margin:0 0 2vh; opacity:0; visibility:hidden; transform:translateY(70px);}
#notice .notice_list {width: 100%; display: grid;  grid-gap:30px; grid-template-columns: 1fr 1fr 1fr; opacity:0; visibility:hidden; transform:translateY(70px);}

#notice.action .tBox {opacity:1; visibility:visible; transform:translateY(0); transition:all 1.3s 0.4s ease;}
#notice.action .notice_list {opacity:1; visibility:visible; transform:translateY(0); transition:all 1.3s 0.7s ease;}

#notice .notice_list dl {background:var(--white);}
#notice .notice_list dl a {display:block; height:100%; position:relative; z-index:10;}
#notice .notice_list dl a::after {content:''; width:100%; height:100%; background:Var(--gra); position:absolute; top:0; left:0; z-index:-1; opacity:0; transition:all 0.3s linear;}
#notice .notice_list dl.sub a::after {background:var(--sub);}
#notice .notice_list dl.main a::after {background:var(--main);}
#notice .notice_list dl:hover a::after {opacity:1; transition:all 0.3s linear;}
#notice .notice_list dl dt {display:none; height:383px; max-height:40vh; overflow:hidden;}
#notice .notice_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all 0.3s linear;}
#notice .notice_list dl dd {padding:5vh 45px; box-sizing:border-box;}
#notice .notice_list dl dd .info {display:flex; flex-wrap:wrap; align-items:center;  margin:0 0 17px; gap:5px 0;}
#notice .notice_list dl dd .info .cate {display:flex; flex-wrap:wrap; align-items:center; font-family: var(--eng); font-size: 0.8333rem; font-weight: 700; line-height: 1; opacity: 0.8; background: var(--gra); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;transition:all 0.3s linear;}
#notice .notice_list dl dd .info .date {display:none !important; transition:all 0.3s linear;}
#notice .notice_list dl dd > .stxt {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 3.3rem; transition:all 0.3s linear;}
#notice .notice_list dl dd .date {display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-family: var(--eng); font-size: 0.833rem; font-weight: 400; line-height:1; margin:28px 0 0; transition:all 0.3s linear;}
#notice .notice_list dl dd .date::before {content:'\ebcc'; font-size:18px; font-family:var(--icon); line-height:1; transition:all 0.3s linear; color:var(--basic);}
#notice .notice_list dl dd .fs21 {margin:0 0 7px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 1.6rem;  transition:all 0.3s linear;}

#notice .notice_list dl:first-of-type { grid-row: 1 / span 2;}
#notice .notice_list dl:first-of-type dt {display:block;}
#notice .notice_list dl:first-of-type dd .info .date {display:flex !important; margin:0;}
#notice .notice_list dl:first-of-type dd .info .cate::after {content:''; width:1px; height:11px; background:var(--border); margin:0 12px; position:relative; display:block;}
#notice .notice_list dl:first-of-type dd > .fs21 {text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 3.6rem; white-space:normal;}
#notice .notice_list dl:first-of-type dd > .stxt {display:none;}
#notice .notice_list dl:first-of-type dd > .date {display:none;}

#notice .notice_list dl.sub dd .info .cate {background: var(--sub); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#notice .notice_list dl.main dd .info .cate {background: var(--main); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

#notice .notice_list dl:hover * {color:var(--white); transition:all 0.3s linear;}
#notice .notice_list dl:hover dd > .stxt {opacity:0.7;}
#notice .notice_list dl:hover dd > .date {opacity:0.7;}
#notice .notice_list dl:hover dt img {transform:scale(1.15); transition:all 0.3s linear;}
#notice .notice_list dl:hover dd .info .cate {background: var(--white); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#notice .notice_list dl:hover dd .date::before {color:var(--white); transition:all 0.3s linear;}
#notice .notice_list dl:first-of-type:hover dd .info .cate::after {background:rgba(255,255,255,0.4);}




#questions {position:relative;}
#questions .bg {background:url("/img/questions_bg.jpg")no-repeat center / cover;}
#questions .basic_in {display:flex; flex-wrap:wrap;}
#questions .basic_in .tBox {width:50%; padding-top:50px; padding-right:5%; box-sizing:border-box; opacity:0; visibility:hidden; transform:translateX(-70px);}
#questions .basic_in .tBox * {color:var(--white);}
#questions .basic_in .tBox .stxt {margin:24px 0 0; opacity:0.8;}
#questions .basic_in .formBox {width:50%; opacity:0; visibility:hidden; transform:translateX(70px);}

#questions.action .basic_in .tBox {opacity:1; visibility:visible; transform:translateX(0); transition:all 1.3s 0.5s ease;}
#questions.action .basic_in .formBox {opacity:1; visibility:visible; transform:translateX(0); transition:all 1.3s 0.5s ease;}


#technology {position:relative;}
#technology::before {content:''; width:50%; height:1px; background:rgba(255, 255, 255, 0.09); position:absolute; top:50%; right:0; z-index:1;}
#technology::after {content:''; width:50%; height:100%; background:rgba(24, 35, 58, 0.50); border-left: 1px solid rgba(255, 255, 255, 0.09); position:absolute; top:0; right:0; box-sizing:border-box;}
#technology .bg {background:url("/img/technology_bg.jpg")no-repeat center / cover;}
#technology .basic_in {position:relative; z-index:10; display:flex; flex-wrap:wrap;}
#technology .basic_in .tBox {width:50%; display:flex; flex-wrap:wrap; align-content:center; padding-right:5%; box-sizing:border-box; opacity:0; visibility:hidden; transform:translateX(-70px);}
#technology .basic_in .tBox h3 {width:100%; color: var(--white); font-size: 3.6111rem; font-weight: 900; line-height: 100%; text-transform: uppercase;}
#technology .basic_in .tBox p {width:100%; font-size:1.1666rem; color:rgba(255,255,255,0.8); margin:33px 0 0;}
#technology .basic_in .contact_list {height:var(--vh); width:50%; opacity:0; visibility:hidden; transform:translateX(70px);}
#technology .basic_in .contact_list li {height:50%; padding:110px 80px; box-sizing:Border-box; padding-right:0;}
#technology .basic_in .contact_list li h4 {width:100%;}
#technology .basic_in .contact_list li h5 {width:100%; color: var(--white); font-size: 0.833rem; font-weight: 600; line-height:173.333%;  margin:15px 0 3px;}
#technology .basic_in .contact_list li p {width:100%; display:flex; flex-wrap:wrap; gap:3px 12px;}
#technology .basic_in .contact_list li p+p {margin:3px 0 0;}
#technology .basic_in .contact_list li p span {color: rgba(255, 255, 255, 0.60); font-size: 0.833rem; font-weight: 400; line-height:173.333%; }
#technology .basic_in .contact_list li p span b {font-weight:400; color:var(--white);}
#technology .basic_in .contact_list li p span.address b {display:inline-block; margin-right:5px;}
#technology .basic_in .contact_list li:first-of-type {display:flex; flex-wrap:wrap; align-content:flex-end;}


#technology.action .basic_in .tBox {opacity:1; visibility:visible; transform:translateX(0); transition:all 1.3s 0.5s ease;}
#technology.action .basic_in .contact_list {opacity:1; visibility:visible; transform:translateX(0); transition:all 1.3s 0.5s ease;}




/*******************************************************************************
	@media ~1600px
*******************************************************************************/
@media all and (max-width:1600px) {

.fs62 {font-size:2.6rem;}


#about .basic_in dl .fs62 {font-size:2.4rem; margin:0 0 15px;}
#about .basic_in dl dd .fs40 {font-size:1.666rem;}
#about .basic_in dl dd .stxt {font-size:0.888rem; margin:4px 0 15px;}
#about .basic_in dl dd .stxt br {display:none;}

#notice .notice_list dl dd {padding:4vh 30px;}

#technology .basic_in .tBox h3 {font-size:3rem;}
#technology .basic_in .contact_list li {padding:5vh 4vw;}



}
/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


#about .basic_in dl dd br {display:none;}
#questions .basic_in .tBox br {display:none;}
#technology .basic_in .tBox h3 br {display:none;}

.sec_top {right:5%;}


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


#about .basic_in {grid-gap: 0 160px;}

#questions .basic_in .tBox  .fs62 {font-size:5.5vw;}
#technology .basic_in .contact_list li {padding:7vw 5vw;}
#technology .basic_in .tBox h3 {font-size:4.5vw;}



}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) {


.moreBtn {width:90px; height:52px;} 
.moreBtn:hover {padding:7px 10px;}
.moreBtn::after {margin:-23px 0 0 -25px; width:50px; height:50px; line-height:50px; font-size:24px;}

.sec_top {width:55px; height:55px;}
.sec_top::before {font-size:24px; line-height:55px;}


#visual .tBox {max-width:470px;}
#visual .tBox .fs82 {font-size:60px;}


#about .basic_in {grid-gap: 0 80px;}
#about .basic_in dl dd .stxt {margin:10px 0 20px;}



#notice .notice_list {grid-gap:15px;}
#notice .notice_list dl dt {height:285px;}
#notice .notice_list dl dd {padding:25px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.sec_top {display:none !important;}

.pagination .pagination-left {display:none;}
.pagination .pagination-right {display:block;}
.pagination .pagination-right .copy {margin:6px 0 0;}
.pagination .pagination-right .copy::before {display:none;}

.fp-tableCell {display:block !important;}
.fp-section.fp-table, .fp-slide.fp-table {display:block !important;}

.wrapper::after, .wrapper::before {display:none;}


.fs62 {font-size: 2.66rem;}
.fs40 {font-size: 1.66rem;}
.fs27 {font-size: 1.4rem;}


.moreBtn {width:80px; height:35px; padding:0 !important;} 
.moreBtn:hover {padding:0 !important;}
.moreBtn::after {display:none !important;}


#about.action .basic_in dl:first-of-type {transition:all 0.8s 0.2s ease;}
#about.action .basic_in dl:last-of-type {transition:all 0.8s 0.4s ease;}

#notice.action .tBox {transition:all 0.8s 0.2s ease;}
#notice.action .notice_list {transition:all 0.8s 0.4s ease;}

#questions.action .basic_in .tBox {transition:all 0.8s 0.3s ease;}
#questions.action .basic_in .formBox {transition:all 0.8s 0.3s ease;}

#technology.action .basic_in .tBox {transition:all 0.8s 0.3s ease;}
#technology.action .basic_in .contact_list {transition:all 0.8s 0.3s ease;}








#visual {height:660px !important;}
#visual::before {transform:translateX(-70%);}
#visual::after {transform:translateX(70%);}
#visual .slick-list, #visual .slick-track {height:100%;}
#visual .fp-tableCell {position:relative; height:660px !important;}
#visual .fp-tableCell::before {content:''; width:1px; height:660px; background:rgba(255,255,255,0.15); position:absolute; top:0; left:50%; z-index:50; transition:all 0.3s linear;}
#visual .fp-tableCell::after {content:''; width:30px; height:30px; background:url("/img/about_ci.svg")no-repeat center / 100%; position:absolute; top:360px; left:50%; transform:translate(-50%,-50%); z-index:50; transition:all 0.3s linear;}
#visual .tBox .fs82 {font-size:40px;}
#visual .slick-dots li {width:20px; height:20px;}
#visual .slick-dots li:after {width:6px; height:6px; margin-top:-3px; margin-left:-3px;}
#visual .pagination .pagination-left {display:block;}
#visual .pagination .pagination-left .scr {font-size:0;}
#visual .pagination .pagination-left .scr::before {font-size:20px;}
#visual .pagination .pagination-left ul {display:none;}
#visual .slick-dots li+li {margin:8px 0 0;}



#about {padding:80px 0;}
#about .tBox {display:block; margin:0 5% 25px; width:90%; text-align:center; opacity:0; visibility:hidden; transform:translateY(70px);}
#about.action .tBox {opacity:1; visibility:visible; transform:translateY(0); transition:all 0.8s 0.2s ease;}
#about .basic_in {grid-template-columns: repeat(1, 1fr); position:relative; grid-gap:40px 0;}
#about .basic_in dl .fs62 {position:absolute; top:0; left:0; width:100%; text-align:center; font-size:2.44rem; margin:0 0 25px; display:none !important;}
#about .basic_in dl {text-align:center;}
#about .basic_in dl dd {margin:-10px 0 0;}
#about .basic_in dl dd .stxt {margin:5px 0 20px;}
#about .basic_in .moreBtn {margin:0 auto;}



#notice {padding:80px 0;}
#notice .tBox {margin:0 0 25px;}
#notice .notice_list {display:block;}
#notice .notice_list dl {}
#notice .notice_list dl+dl {margin:5px 0 0;}
#notice .notice_list dl dd {padding:23px;}
#notice .notice_list dl dd .info {margin:0 0 9px;}
#notice .notice_list dl dd > .stxt {height:1.6rem; -webkit-line-clamp: 1;}
#notice .notice_list dl dd .fs21 {margin:0 0 5px;}
#notice .notice_list dl dd .date {margin:12px 0 0;}
#notice .notice_list dl dd .date::before {font-size:15px;}

#notice .notice_list dl:first-of-type dd > .fs21 {height:3.2rem;}


#questions {padding:80px 0;}
#questions .basic_in .tBox {width:100%; padding-top:0; text-align:center; margin:0 0 25px; padding-right:0;}
#questions .basic_in .tBox  .fs62 {font-size:2.66rem;}
#questions .basic_in .tBox .stxt {margin:15px 0 0;}
#questions .basic_in .formBox {width:100%;}

#technology::before {display:none !important;}
#technology::after {display:none !important;}
#technology .basic_in {display:block; width:100%;}

#technology .basic_in .tBox {display:block; width:100%; text-align:center; padding:80px 5% 50px;}
#technology .basic_in .tBox h3 {font-size:2.66rem;}
#technology .basic_in .tBox p {margin:15px 0 0;}
#technology .basic_in .contact_list {height:auto; width:100%;}
#technology .basic_in .contact_list li {padding:40px 5%; height:auto; border-top: 1px solid rgba(255, 255, 255, 0.09); background: rgba(24, 35, 58, 0.50);}
#technology .basic_in .contact_list li h5 {font-size:0.933rem;}
#technology .basic_in .contact_list li p span {font-size:0.933rem;}

#technology .pagination {position:relative !important; bottom:0; left:0; transform:translateX(0); background: rgba(24, 35, 58, 0.50); padding:0 5% 60px; box-sizing:border-box;}






}
/*******************************************************************************
	@media 460px
*******************************************************************************/
@media all and (max-width:460px) { 

.fs62 {font-size: 2.22rem !important;}
#technology .basic_in .tBox h3 {font-size:2.22rem;}
}