@charset "utf-8";

@import url("common.css");

.main_list {position: absolute; bottom: 0; z-index: -1; display: flex;}
.main_list li {flex: 1;}
#container.main {padding-top:0 !important; padding-bottom:0; background: #fff;}


/*비주얼*/
.main_visual {opacity:0; position:relative; width:100%; height:100vh; color:#fff; background:url(../images/bg/bg_mainvisual.jpg) no-repeat center; background-size:cover; overflow:hidden;}
.main_visual h3 {position:absolute; z-index:1; top:180px; left:120px; transform:translateY(80px); opacity:0; visibility:hidden;}
.main_visual h3 > span {display:block; margin-bottom:-30px; font-size:48px; font-weight:500; line-height:1;}
.main_visual h3 > span:after {content:'®';}
.main_visual h3 strong {font-size:300px; font-weight:900; line-height:1;}
.main_visual .btm_txt {position:absolute; z-index:1; bottom:100px; right:120px; font-size:48px; transform:translateY(80px); text-align:right; opacity:0; visibility:hidden;}
.main_visual .btm_txt > strong {display:block; font-weight:900;}
.main_visual .btm_txt > p {margin-top:32px;}

body.mainpg_active header {opacity:1;}
body.mainpg_active .main_visual {opacity:1;}
body.mainpg_active .main_visual h3 {animation:fadeInUpW 1.6s ease; animation-fill-mode:forwards;}
body.mainpg_active .main_visual .btm_txt {animation:fadeInUpW 1.6s ease; animation-fill-mode:forwards; }


/* creative */
*[data-splitting].splitting,
*[data-splitting].splitting .word {overflow:hidden;}
*[data-splitting].splitting .underline {text-decoration: none;}
*[data-splitting].splitting .underline .word {text-decoration:underline;}
*[data-splitting].splitting .word,
*[data-splitting].splitting .char {display:inline-block;}
*[data-splitting].splitting .word {padding:0 6px;}
*[data-splitting].splitting .char {transform:translateY(100%); opacity:0; transition:transform .6s ease,opacity .6s ease}
*.active *[data-splitting] .char {transform:translateY(0); opacity:1;}
.con_tit p[data-splitting].splitting .word {padding:0;}
.sub_txt[data-splitting].splitting .word {padding:0; line-height:1;}

.main_creative {padding-top:280px; overflow:hidden;}
.main_creative .main_port {padding-left:120px; overflow:hidden;}
.main_creative .main_port .swiper-slide {width:480px; border-radius:24px; overflow:hidden;}
.main_creative .main_port .swiper-slide a {display:block; width:100%; height:100%;}
.main_creative .main_port .swiper-slide .bgimg img {width:100%; height:100%;}
.main_creative .main_port .swiper-slide .tit {position:absolute; z-index:1; left:0; bottom:0; width:100%; padding:44px 32px; color:#fff; letter-spacing:-0.02rem;}
.main_creative .main_port .swiper-slide .tit strong {display:block; margin-bottom:8px; font-size:36px; font-weight:900; line-height:1.2;}
.main_creative .main_port .swiper-slide .tit p {font-size:20px; font-weight:500; line-height:1.4;}
.main_creative .main_port .swiper-slide .view {position:absolute; z-index:1; top:0px; right:0; width:80%; padding:32px; opacity:0; transition:opacity .3s ease;}
.main_creative .main_port .swiper-slide .view span {display:block; position:relative; left:-40px; padding-right:64px; color:#fff; font-size:24px; font-weight:800; line-height:1.4; text-align:right; letter-spacing:-0.02rem; word-break:keep-all; transition:left .4s ease;}
.main_creative .main_port .swiper-slide .view span::after {content:''; position:absolute; top:50%; right:0; width:32px; height:32px; background:url(../images/ico/ico_pflist_arw.svg) no-repeat; background-size:100%; transform:translateY(-50%);}

.main_creative .main_port .swiper-slide:hover .view {opacity:1;}
.main_creative .main_port .swiper-slide:hover .view span {left:0;}

/* sitero */
.main_sitero {padding-top:450px; padding-bottom:450px; overflow:hidden;}
.main_sitero .con_tit {padding-right:120px; margin-bottom:36px; text-align:right;}
.main_sitero .sub_txt:after {content:''; display:block; clear:both;}
.main_sitero .sub_txt {margin-bottom:160px;}
.main_sitero .sub_txt p {float:right; width:1358px; padding-top:30px; border-top:8px solid var(--main-color); font-size:32px; font-weight:500; line-height:1.5;}
.main_sitero .dev_list {padding-left:120px; overflow:hidden;}
.main_sitero .dev_list .swiper-slide {width:440px;}
.main_sitero .dev_list .swiper-slide .go_btn {display:inline-block; position:absolute; z-index:1; top:32px; right:32px; width:32px; height:32px; text-indent:-9999px; text-align:left; background:url(../images/ico/ico_arw_w_circle.svg) no-repeat center; background-size:100%;}
.main_sitero .dev_list .swiper-slide.bg_purple a div {background-color:#7558FF;}
.main_sitero .dev_list .swiper-slide.bg_navy a div {background-color:#373656;}
.main_sitero .dev_list .swiper-slide.bg_green a div {background-color:#008C7C;}
.main_sitero .dev_list .swiper-slide.bg_red a div {background-color:#EB483D;}
.main_sitero .dev_list .swiper-slide a {display:block; width:100%; height:100%;}
.main_sitero .dev_list .swiper-slide a div {padding:40px 0; border-radius:24px; overflow:hidden; transition:border-radius .4s ease;}
.main_sitero .dev_list .swiper-slide a:hover div {border-radius:56px;}
.main_sitero .dev_list .swiper-slide .txt {min-height:188px; padding:40px 32px; color:#fff;}
.main_sitero .dev_list .swiper-slide .txt > p {margin-bottom:24px; font-size:24px; font-weight:800;}
.main_sitero .dev_list .swiper-slide .txt > span {display:-webkit-box; height:56px; font-size:16px; font-weight:500; line-height:1.6; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

/* news */
.main_news {position:relative; padding-left:120px; padding-right:120px; padding-bottom:100px; overflow:hidden;}
.main_news .con_tit {text-align:left;}
.main_news .news_list {position:relative;}
.main_news .news_list p {padding:7px 0; color:rgba(15, 15, 16, 0.2); font-size:80px; word-break:keep-all; font-weight:500; line-height:1.4; transition:all .3s ease;}
.main_news .news_list p:hover {color:rgba(15, 15, 16, 1); transform:translateX(16px);}
.main_news .news_list p:hover em {/* color:rgba(15, 15, 16, 0.2); */}
.main_news .news_list p em {color:rgba(15, 15, 16, 1);}
.main_news .news_img {position:absolute; z-index:1; top:0; left:0; width:440px; height:280px; border-radius:24px; overflow:hidden; background-repeat:no-repeat; background-size:cover; transform:scale(0); transition:all .3s ease;}
.main_news .news_img.active {transform:scale(1);}
.main_news .news_img span {position:absolute; z-index:1; top:33px; right:32px; color:#fff; font-size:24px; font-weight:800;}
.main_news .news_img span::after {content:''; display:inline-block; width:32px; height:32px; margin-left:32px; vertical-align:middle; background:url(../images/ico/ico_pflist_arw.svg) no-repeat; background-size:100%;}

@keyframes aa {
	0% {clip-path: polygon(0 calc(100% - var(--border-size, 1px)), 100% calc(100% - var(--border-size, 1px)), 100% 100%, 0% 100%);}
	50% { clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 100%);}
	100% {clip-path: polygon(0 calc(100% - var(--border-size, 1px)), 100% calc(100% - var(--border-size, 1px)), 100% 100%, 0% 100%);}
}

@keyframes fadeInUpW {
	0% {opacity:0; transform:translateY(100px); visibility:hidden;}
	100% {opacity:1; transform:translateY(0px); visibility:visible;}
}

@media all and (max-width:1820px){  
}

@media all and (max-width:1500px){  
    .con_tit {margin-bottom:80px;}
    h3[data-splitting].splitting {line-height:100px;}

    .main_sitero {padding-top:250px; padding-bottom:250px;}
    .main_sitero .con_tit {padding-right:50px;}
    .main_sitero .sub_txt p {width:100%; padding-left:50px;}

    .main_news {padding-left:50px; padding-right:50px;}
    .main_news .news_list p {font-size:64px;}

	.main_visual h3 {left:50px;}
	.main_visual h3 > span {margin-bottom:-24px; font-size:38px;}
	.main_visual h3 strong {font-size:220px;}
	.main_visual .btm_txt {right:50px; font-size:34px;}
}

@media all and (max-width:1199px){  
	.main_visual h3 > span {font-size:30px;}
	.main_visual h3 strong {font-size:180px;}
	.main_visual .btm_txt {font-size:26px;}
}

@media all and (max-width:1024px){
    h3[data-splitting].splitting {line-height:80px;}
    p[data-splitting].splitting {line-height:1.3;}

	.main_visual h3 {left:36px;}
	.main_visual .btm_txt {right:36px;}

    .main_creative {padding-top:140px;}
    .main_creative .main_port {padding-left:30px;}
    .main_creative .main_port .swiper-slide {width:420px;}
    .main_creative .main_port .swiper-slide .view {width:100%;}
    .main_creative .main_port .swiper-slide .view span {padding-right:53px;}
    .main_creative .main_port .swiper-slide .tit strong {font-size:30px;}

    .main_sitero {padding-top:140px; padding-bottom:140px;}
    .main_sitero .con_tit {padding-left:36px; padding-right:36px;}
    .main_sitero .sub_txt {margin-bottom:80px;}
    .main_sitero .sub_txt p {padding-left:36px; font-size:24px;}
    .main_sitero .dev_list {padding-left:30px;}
    .main_sitero .dev_list .swiper-slide {width:420px;}
    .main_sitero .dev_list .swiper-slide a div {padding:14px 0;}
    .main_sitero .dev_list .swiper-slide a:hover div {border-radius:46px;} 

    .main_news {padding-left:36px; padding-right:36px;}
	.main_news h3[data-splitting].splitting {line-height:92px;}
    .main_news .news_list p {font-size:40px;}
	.main_news .news_list p em {display:block;}
    .main_news .news_img {display:none !important}
}

@media all and (max-width:768px){
}

@media all and (max-width:640px){
    h3[data-splitting].splitting {line-height:62px;}
	
	.main_visual {background-position:top 0 right 70%;}
	.main_visual h3 {left:24px;}
	.main_visual h3 > span {margin-bottom:-8px;}
	.main_visual h3 strong {font-size:130px;}
	.main_visual .btm_txt {bottom:30px; right:24px; font-size:20px;}

    .con_tit {margin-bottom:40px;}
    .main_creative .main_port .swiper-slide {width:320px;} 
    .main_creative .main_port .swiper-slide .tit strong {font-size:24px;}
    .main_creative .main_port .swiper-slide .tit p {font-size:16px;}
    .main_creative .main_port .swiper-slide .view span {padding-right:34px; font-size:18px;}
    .main_creative .main_port .swiper-slide .view span::after {width:24px; height:24px;}

	
    .main_sitero .con_tit {padding-left:24px; padding-right:24px;}
    .main_sitero .con_tit h3 {letter-spacing:-1px;}
	.main_sitero .con_tit h3[data-splitting].splitting .word {padding:0}
    .main_sitero .sub_txt {margin-bottom:70px;}
    .main_sitero .sub_txt p {padding-left:24px; font-size:18px;}
    .main_sitero .dev_list .swiper-slide {width:320px;}
    .main_sitero .dev_list .swiper-slide .txt > p {font-size:20px;}

    .main_news {padding-left:24px; padding-right:24px; padding-bottom:0;}
	.main_news p[data-splitting].splitting {}
	.main_news h3[data-splitting].splitting {font-size:56px; line-height:1;}
	.main_news [data-char="ⓒ"].char {position: relative; top:-5px;}
    .main_news .news_list p {font-size:30px;}
    .main_news .news_list p em {font-weight:600;}
}

@media all and (max-width:480px){
	h3[data-splitting].splitting {line-height:50px;}

	.main_creative .main_port .swiper-slide {width:260px; border-radius:12px;}
	.main_creative .main_port .swiper-slide .tit {padding:30px 24px;}
	.main_creative .main_port .swiper-slide .tit p {font-size:14px;}
	.main_creative .main_port .swiper-slide .view {padding:20px 24px;}
	.main_creative .main_port .swiper-slide .view span {font-size:14px;}

    .main_sitero .sub_txt p {font-size:16px;}
	.main_sitero .dev_list .swiper-slide {width:260px;}
	.main_sitero .dev_list .swiper-slide a div {padding:0}
	.main_sitero .dev_list .swiper-slide .txt > p {font-size:17px;}
	.main_sitero .dev_list .swiper-slide .txt > span {height:46px; font-size:14px;}
	.main_sitero .dev_list .swiper-slide .go_btn {top:14px; right:14px;}

    .main_news .con_tit h3 {letter-spacing:-1px;}
	.main_news .news_list p {font-size:22px;}

	.main_visual h3 > span {font-size:18px; margin-bottom:0;}
	.main_visual h3 strong {font-size:94px;}
	
}

@media all and (max-width:374px){
}