/* slick-slider 필수 css */
.slick-slider{position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-list{position:relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer; cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.slick-track{position:relative; top:0; left:0; display:block;}
.slick-track:before,.slick-track:after{display:table; content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none; float:left; height:100%; min-height:1px; -webkit-transform:translate3d(0,0,0);}
.slick-slide img{display:block; margin:0 auto;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}

.slick-slider .slick-track,
.slick-slider .slick-list { transform:translate3d(0, 0, 0); }
.slick-slide { transform:translate3d(0,0,0); }

.intro_logo { position:fixed; left:0; top:0; z-index:9999999; width:100vw; height:100vh; }
.intro_logo .logo { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.intro_logo .logo img { width:768px; }
.intro_logo .logo-1 { animation:ani_hide 0.8s 1s; animation-fill-mode:both;}
.intro_logo .logo-1 img { opacity:0; animation:ani_5 0.8s 0.3s; animation-fill-mode:both; }
.intro_logo .logo-2 { animation:ani_mov cubic-bezier(0.165, 0.84, 0.44, 1) 0.8s 2s; animation-fill-mode:both; }
.intro_logo .logo-2 img { opacity:0; animation:ani_5 0.8s 1s; animation-fill-mode:both; }
.intro_logo .ani_1 { animation:ani_hide 0.8s 3s; animation-fill-mode:both; }
body.intro .intro_logo .bg { animation:ani_hide 0.8s 3s; animation-fill-mode:both; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; background-color:#111; clip-path:circle(100px at 50% 51%); }
body.intro #main { background-color:#111; position:relative; z-index:999999; }
body.intro #main #visual { animation:ani_circle 3s 3.3s; animation-fill-mode:both; clip-path:circle(90px at 50% 51%); }
@keyframes ani_hide {
	0%{ opacity:1; }
	100%{opacity:0; }
}
@keyframes ani_mov {
	0%{ margin-left:0 }
	100%{margin-left:-90px; }
}
@keyframes ani_circle {
	0%{ clip-path:circle(90px at 50% 51%); }
	100%{clip-path:circle(200% at 50% 51%);}
}
@media screen and (max-width:1400px){
    .intro_logo .logo img { width:500px; }
    body.intro .intro_logo .bg { clip-path:circle(80px at 50% 50.8%); }
    body.intro #main #visual { clip-path:circle(60px at 50% 50.8%); }
    @keyframes ani_mov {
        0%{ margin-left:0 }
        100%{margin-left:-62px; }
    }
    @keyframes ani_circle {
        0%{ clip-path:circle(60px at 50% 50.8%); }
        100%{clip-path:circle(200% at 50% 50.8%);}
    }
}
@media screen and (max-width:1024px){
    .intro_logo { display:none !important}
    body, html { overflow: visible !important; }		
    header { opacity:1 !important }	
    body #main { background:none !important; }
    body #main #visual { animation:none !important; clip-path:none !important; }
}

#visual { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container { height:100vh; }
#visual .swiper-slide { overflow:hidden; }
#visual .swiper-slide .pc { display:block; position:absolute; z-index:1; }
#visual .swiper-slide .mobile { display:none; position:absolute; }
#visual .visual_box { position:absolute; width:100%; height:100%; left:0; top:0; background-size:cover; background-position:center; }
#visual .visual_box .video-box { width:100%; height:100%; }
#visual .visual_box video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover;  }

#visual .swiper-slide .mvisualImage { position:absolute; width:100%; height:100%; left:0; top:0; z-index:1; }
#visual .mvisualImage { overflow:hidden; background-position:center; background-size:cover; background-repeat:no-repeat; }
#visual .swiper-slide.swiper-slide-active .mvisualImage { animation:bgs1 8s; animation-fill-mode:both; }
#visual .visu02 .mvisualImage {  background-image:url(/img/main/bg_visual2.jpg); }
#visual .swiper-slide .visual_txt { position:absolute; top:50%; left:0; z-index:100; transform:translateY(-50%); width:100%; text-align:center; }
#visual .swiper-slide .visual_txt .vs_tit { color:#fff; font-size:80px; font-weight:700; }
#visual .swiper-slide .visual_txt .vs_title1 span { line-height:1.15; font-weight:700; }
#visual .swiper-slide .visual_txt .vs_title2 { opacity:0; line-height:1.4; overflow:hidden; margin-top:15px; }
#visual .swiper-slide .visual_txt .vs_title2 span { display:block; }
#visual .swiper-slide.swiper-slide-active .visual_txt .vs_title1,
#visual .swiper-slide.swiper-slide-active .visual_txt .vs_title2 { opacity:1; }
#visual .swiper-slide.swiper-slide-active .visual_txt .vs_title1 span > span { animation:blur_txt 1.0s 0.3s; animation-fill-mode:both; }
#visual .swiper-slide.swiper-slide-active .visual_txt .vs_title2 span { animation:ani_3 1.0s 0.8s; animation-fill-mode:both; }

#visual .playstop { position:absolute; bottom:100px; left:100px; z-index:1; }
#visual .playstop .stop a { position:relative; display:block; width:80px; height:80px; border:none; background-color:rgba(255,255,255,.1); box-sizing:border-box; border-radius:50%; display:flex; justify-content:center; align-items:center; }
#visual .playstop .stop a:after {content:""; display:block; width:100%; height:100%; background:url(/img/main/stop.png) no-repeat center; position:absolute; left:0; top:0;}
#visual .playstop .stop.play a:after {background:url(/img/main/play.png) no-repeat center; }

#visual .circular-chart { display:block; width:110%; height:110%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
#visual .circle { stroke:#fff; fill:none; stroke-width:0.5; stroke-dasharray:100; stroke-dashoffset:100; }
#visual .scrolldown { position:absolute; right:70px; bottom:127px; z-index:1; }
#visual .scrolldown .txt { padding-right:15px; transform:rotate(90deg); display:block; text-transform:uppercase; font-family:museo-sans, sans-serif; font-size:10px; font-weight:100; color:#fff; }
#visual .scrolldown .txt:after { content:"▼"; display:block; position:absolute; right:0; bottom:0; transform:rotate(-90deg) scale(0.7); font-size:10px; color:#fff; }
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }
@media screen and (max-width:1400px){
    #visual .swiper-slide .visual_txt .vs_tit { font-size:60px; }
    #visual .swiper-slide .visual_txt .vs_title2 { margin-top:12px; }
    #visual .playstop { left:50px; bottom:80px; }
    #visual .playstop .stop a { width:70px; height:70px; }
    #visual .scrolldown { right:25px; bottom:107px; }
}
@media screen and (max-width:1024px){
    #visual .swiper-slide .visual_txt .vs_tit { font-size:40px; }
    #visual .swiper-slide .visual_txt .vs_title2 { margin-top:10px; }
	#visual .playstop { left:40px; bottom:60px; }
    #visual .playstop .stop a { width:60px; height:60px; }
    #visual .scrolldown { right:0px; bottom:95px;  }
}
@media screen and (max-width:760px){
    #visual .swiper-slide .pc { display:none; }
    #visual .swiper-slide .mobile { display:block; z-index:3;}
}
@media screen and (max-width:640px){
    #visual .swiper-slide .visual_txt .vs_tit { font-size:24px; }
    #visual .swiper-slide .visual_txt .vs_title2 { margin-top:8px; }
	#visual .playstop { left:20px; bottom:30px; }
    #visual .playstop .stop a { width:50px; height:50px; }
    #visual .scrolldown { right:-8px; bottom:70px; }
}
@media screen and (max-height:720px){
	#visual .playstop { bottom:40px; }
    #visual .playstop .stop a { width:60px; height:60px; }
    #visual .scrolldown { bottom:80px; }
}

#main .people-motion { position:relative; overflow:hidden; width:100%; height:100%; }
#main .people-motion .peopleCont { position:relative; overflow:hidden; width:100%; height:100vh; }
#main .people-motion .peopleCont #cover { background:url(/img/main/people_bg.jpg) no-repeat center / cover; clip-path:circle(17% at 50% 140%); width:100%; height:100%; }
#main .people-motion .motion-box { position:absolute; left:0; top:0; z-index:9; text-align:center; width:100%; height:100%; display:flex; align-items: center; justify-content:center; }
#main .people-motion .motion-box .txt-box > div { display:inline-block; vertical-align:top; }
#main .people-motion .motion-box .txt-box .txt-cbox .txt { color:#ff7b0f; }
#main .people-motion .motion-box .txt { text-transform:uppercase; color:#000; font-size:80px; font-weight:900; }
#main .people-motion .motion-box .txt4 { color:#111; line-height:1.2; font-weight:700; font-size:35px; margin-top:-30px; }
@media screen and (max-width:1400px){
    #main .people-motion .motion-box .txt { font-size:70px; }
    #main .people-motion .motion-box .txt4 { font-size:30px; }
}
@media screen and (max-width:1024px){
    #main .people-motion .peopleCont { background:url(/img/main/people_bg.jpg) no-repeat center / cover; }
    #main .people-motion .peopleCont #cover { display:none }
    #main .people-motion .motion-box .txt { font-size:55px; color:#fff }
    #main .people-motion .motion-box .txt2 { display:none }
    #main .people-motion .motion-box .txt4 { font-size:25px; margin-top:20px; color:#fff }
    /* animation */
    #main .people-motion .motion-box .txt,
    #main .people-motion .motion-box .txt4{ opacity:0; }
    #main .people-motion .motion-box .txt1 { animation:ani_1 0.8s 0.4s; animation-fill-mode:both; }
    #main .people-motion .motion-box .txt3 { animation:ani_2 0.8s 0.4s; animation-fill-mode:both; }
    #main .people-motion .motion-box .txt4 { animation:ani_5 2s 0.7s; animation-fill-mode:both; }
}
@media screen and (max-width:640px){
    #main .people-motion .motion-box .txt { font-size:35px; }
    #main .people-motion .motion-box .txt4 { font-size:18px; margin-top:15px; }
}

#main .brand-box { position:relative; }
#main .brand-box .b-menu { position:sticky; margin:100px 72px; right:0; top:50%; transform:translateY(-50%); text-align:right; z-index:8; transition:all 0.3s; }
#main .brand-box .b-menu .b-menubox { position:relative; right:unset; top:0; margin:0; height:auto;}
#main .brand-box .b-menu li:not(:last-child) { margin-bottom:20px; }
#main .brand-box .b-menu li a { color:#111; font-size:16px; font-weight:700; padding:3px 28px 3px 0; transition:all 0.3s; }
#main .brand-box .b-menu li a.active { color:#ff7b0f !important; font-weight:700; background:url(/img/main/logo_brand.png) no-repeat right center; }
#main .brand-box .brand-cont { position:relative; width:100%; display:flex; flex-wrap:wrap; flex-direction: row-reverse; }
#main .brand-box .brand-scroll { overflow:hidden; width:100%; }
#main .brand-box .content { position:relative; left:0; top:0; z-index:2; width:100%; height:100vh; display:flex; align-items:center; overflow:hidden; }
#main .brand-box .content.active { z-index:5; }
#main .brand-box .content .imgbox { position:absolute; right:0; top:0; width:100%; height:100%; background-position:right top; background-repeat:no-repeat; }
#main .brand-box .content.content-0 .imgbox { background-image:url(/img/main/brand_bg1.jpg); }
#main .brand-box .content.content-1 .imgbox { background-image:url(/img/main/brand_bg2.jpg); }
#main .brand-box .content.content-2 .imgbox { background-image:url(/img/main/brand_bg3.jpg); }
#main .brand-box .content .logo { position:relative; }
#main .brand-box .content .logo > img { position:absolute; left:0; top:0; }
#main .brand-box .content .logo_s1 { z-index:2 }
#main .brand-box .content .logo_s2 { display:none; }
#main .brand-box .content .txtbox { position:relative; z-index:3; padding:0 100px; }
#main .brand-box .content .txtbox .logo { min-height:50px; }
#main .brand-box .content .txtbox .txt-top { margin-top:150px; color:#111; font-weight:900; font-size:90px; letter-spacing:-0.02em; }
#main .brand-box .content .txtbox .txt-bcont dt { color:#777; font-size:24px; font-weight:300; }
#main .brand-box .content .txtbox .txt-bcont dt strong { color:#fff; font-size:30px; font-weight:500; display:block; letter-spacing:-0.02em; line-height:1.6; }
#main .brand-box .content .txtbox .txt-bcont dd { margin-top:30px; color:rgba(255,255,255,0.7); font-size:16px; font-weight:300; line-height:1.8; }
#main .brand-box .content .txtbox .txt-bcont .btn-more { margin-top:62px; }
#main .brand-box .content .txtbox .txt-bcont .btn-more a { display:flex; align-items: center; justify-content:center; width:151px; height:57px; color:#fff; font-size:15px; font-weight:600; letter-spacing:-0.02em; background-color:#ff7b0f; border-radius:50px; }
@media screen and (max-width:1640px){
    #main .brand-box .content .txtbox .txt-top { font-size:75px; }
}
@media screen and (max-width:1400px){
    #main .brand-box .b-menu { margin:100px 32px; }
    #main .brand-box .content .txtbox { padding:0 60px; }
    #main .brand-box .content .txtbox .txt-top { font-size:65px; }
    #main .brand-box .content .txtbox .txt-bcont dt { font-size:22px; }
    #main .brand-box .content .txtbox .txt-bcont dt strong { font-size:28px; }
    #main .brand-box .content .txtbox .txt-bcont dd { margin-top:25px; font-size:16px; }
    #main .brand-box .content .txtbox .txt-bcont .btn-more { margin-top:58px; }
    #main .brand-box .content .txtbox .txt-bcont .btn-more a { width:151px; height:52px; font-size:15px; }
}
@media screen and (max-width:1024px){
    #main .brand-box .b-menu { position:absolute; top:0; transform:translateY(0); right:0; margin:0 12px; height:100%; }
    #main .brand-box .b-menu .b-menubox { position:sticky; right:0; top:100px; margin:100px 0; height:100px;}
    #main .brand-box .b-menu li a { color:#fff; }
    #main .brand-box .content .txtbox { padding:0 40px; }
    #main .brand-box .content .txtbox .txt-top { font-size:50px; display:none }
    #main .brand-box .content .imgbox { background-position:center center; }
    #main .brand-box .content .logo_s1 { display:none; }
    #main .brand-box .content .logo_s2 { display:block; }
    #main .brand-box .content .txtbox .txt-bcont { margin-top:80px; }
    #main .brand-box .content .txtbox .txt-bcont dt { font-size:20px; }
    #main .brand-box .content .txtbox .txt-bcont dt strong { font-size:24px; }
    #main .brand-box .content .txtbox .txt-bcont dd { margin-top:20px; font-size:15px; }
    #main .brand-box .content .txtbox .txt-bcont .btn-more { margin-top:50px; }
    #main .brand-box .content .txtbox .txt-bcont .btn-more a { width:140px; height:45px; font-size:14px; }
}
@media screen and (max-width:860px){
    #main .brand-box .b-menu .b-menubox { margin:100px 0;  }
    #main .brand-box .b-menu li:not(:last-child) { margin-bottom:12px; }
    #main .brand-box .b-menu li a { font-size:15px; }
    #main .brand-box .content .logo { margin-top:60px; }
    #main .brand-box .content .txtbox .txt-bcont dd { text-align:justify; }
    #main .brand-box .content .txtbox .txt-bcont dd br { display:none }
    #main .brand-box .content .txtbox .txt-bcont dd .m_br { display:block }
}
@media screen and (max-width:640px){
    #main .brand-box .b-menu { position:sticky; top:0; margin:0; right:unset; text-align:center; width:100%; }
    #main .brand-box .b-menu .b-menubox { top:0; margin:0; padding-top:30px; height:60px; }
    #main .brand-box .b-menu ul { display:flex; justify-content:center; gap:0 15px; }
    #main .brand-box .b-menu li:not(:last-child) { margin-bottom:0; }
    #main .brand-box .brand-scroll { margin-top:-60px; }
    #main .brand-box .content .txtbox { padding:0 20px; }
    #main .brand-box .content .logo > img { left:50%; transform:translateX(-50%); }
    #main .brand-box .content .txtbox .txt-top { text-align:center; font-size:38px; line-height:1.15}
    #main .brand-box .content .txtbox .txt-bcont { margin-top:50px; }
    #main .brand-box .content .txtbox .txt-bcont dt { font-size:18px; text-align:center }
    #main .brand-box .content .txtbox .txt-bcont dt strong { font-size:20px; }
    #main .brand-box .content .txtbox .txt-bcont dd { margin-top:18px; font-size:15px; }
    #main .brand-box .content .txtbox .txt-bcont .btn-more { margin-top:40px; }
    #main .brand-box .content .txtbox .txt-bcont .btn-more a { width:140px; height:40px; font-size:14px; margin:0 auto; }
}



#main .news-box { padding:210px 100px 175px; overflow:hidden; }
#main .news-box .title-box h4 { color:#111; font-size:85px; font-weight:900; letter-spacing:-0.02em; line-height:1.05; text-transform:uppercase; }
#main .news-box .title-box h4 span { color:#ff7b0f; }
#main .news-box .title-box p { color:#111; font-size:24px; font-weight:500; margin-top:35px; }
#main .news-box .listbox { position:relative; padding-top:100px; }
#main .news-box .tabmenu { position:absolute; right:0; top:-47px; z-index:2 }
#main .news-box .tabmenu ul { display:flex; }
#main .news-box .tabmenu li { position:relative; margin:0 -4px; }
#main .news-box .tabmenu li:before {content:""; display:block; position:absolute; left:2px; top:50%; margin-top:-2px; width:4px; height:4px; background-color:#ff7b0f; border-radius:50%; }
#main .news-box .tabmenu li:first-child:before { display:none }
#main .news-box .tabmenu li a { color:#111; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; height:80px; padding:0 50px; border-radius:80px; transition:all 0.3s ease-in-out; }
#main .news-box .tabmenu li.active a { color:#fff; background-color:#ff7b0f; }
#main .news-box .list { position:relative; }
#main .news-box .list:before {content:""; display:block; z-index:1; position:absolute; left:0; top:0; width:100%; height:1px; background-color:#111; }
#main .news-box .list ul { display:none; }
#main .news-box .list ul.active { display:block; }
#main .news-box .list ul li { position:relative; }
#main .news-box .list ul li:before {content:""; display:block; z-index:1; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background-color:#e0e0e0; }
#main .news-box .list ul li:after {content:""; display:block; z-index:2; position:absolute; left:0; bottom:-1px; width:0; height:1px; background-color:#ff7b0f; transition:all 0.5s 0.1s; }
#main .news-box .list ul li:hover:after { width:100%; transition:all 0.7s 0.2s; }
#main .news-box .list ul li a { position:relative; padding:55px 160px 55px 355px; display:block; z-index:5; }
#main .news-box .list ul li a strong { position:absolute; left:0; top:50%; transform:translateY(-50%); padding-left:75px; font-weight:900; color:#ff7b0f; font-size:18px; }
#main .news-box .list ul li a .txt { color:#111; font-size:34px; font-weight:600; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
#main .news-box .list ul li a .date { display:block; margin-top:30px; color:#777; font-size:15px; font-weight:300; }
#main .news-box .list ul li a .date i { display:inline-block; margin:-2px 2px 0 0; vertical-align:middle }
#main .news-box .list ul li .imgbox { position:absolute; right:-242px; top:50%; transform:translateY(-50%); opacity:0; width:550px; height:550px; }
#main .news-box .list ul li .imgbox img { position:absolute; left:0; top:0; border-radius:500px; transition:all 1.4s; width:100%; height:100%; transform:scale(.65); transition:opacity 1s, transform 0.5s cubic-bezier(.3,.68,.34,.8); }
#main .news-box .list ul li:hover .imgbox { display:block; opacity:1; }
#main .news-box .list ul li:hover .imgbox img { transform:scale(1); }
#main .news-box .list ul li .arr { position:absolute; right:80px; top:50%; transform:translateY(-50%); width:94px; height:94px; }
#main .news-box .list ul li .arr:before {content:""; display:block; z-index:1; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; background:url(/img/main/news_arr.png) no-repeat center center; transition:all 0.5s; }
#main .news-box .list ul li .arr .circle { stroke:#ff7b0f; fill:none; stroke-width:0.5; stroke-dasharray:100; stroke-dashoffset:100; transition:all 0.5s; }
#main .news-box .list ul li:hover .arr .circle { stroke-dashoffset:0;  }
#main .news-box .list ul li:hover .arr:before { opacity:1; }
@media screen and (max-width:1640px){
    #main .news-box .title-box h4 { font-size:70px; }
    #main .news-box .list ul li a { padding:55px 140px 55px 355px; }
    #main .news-box .list ul li .arr { right:60px; width:84px; height:84px; }
}
@media screen and (max-width:1400px){
    #main .news-box { padding:180px 60px 150px; }
    #main .news-box .title-box h4 { font-size:55px; }
    #main .news-box .title-box p { font-size:22px; margin-top:32px; }
    #main .news-box .tabmenu li a { font-size:19px; height:72px; padding:0 45px; }
    #main .news-box .list ul li a { padding:45px 130px 45px 300px; }
    #main .news-box .list ul li a strong { padding-left:60px; font-size:18px; }
    #main .news-box .list ul li a .txt { font-size:28px; }
    #main .news-box .list ul li a .date { margin-top:25px; font-size:15px; }
    #main .news-box .list ul li .imgbox { right:-150px; width:470px; height:470px; }
    #main .news-box .list ul li .arr { right:40px; width:74px; height:74px; }
}
@media screen and (max-width:1024px){
    #main .news-box { padding:120px 40px 100px; }
    #main .news-box .title-box { text-align:center; }
    #main .news-box .title-box h4 { font-size:40px; }
    #main .news-box .title-box h4 br { display:none }
    #main .news-box .title-box p { font-size:20px; margin-top:28px; }
    #main .news-box .listbox { padding-top:50px; }
    #main .news-box .tabmenu { position:relative; right:unset; top:unset; z-index:2; text-align:center; }
    #main .news-box .tabmenu > ul {justify-content:center; }
    #main .news-box .tabmenu li a { font-size:17px; height:60px; padding:0 30px; }
    #main .news-box .list { margin-top:50px; }
    #main .news-box .list ul li a { padding:30px 120px 30px 180px; }
    #main .news-box .list ul li a strong { padding-left:40px; font-size:16px; }
    #main .news-box .list ul li a .txt { font-size:22px; }
    #main .news-box .list ul li a .date { margin-top:20px; font-size:15px; }
    #main .news-box .list ul li .imgbox { right:-120px; width:350px; height:350px; }
    #main .news-box .list ul li .arr { right:20px; width:64px; height:64px; }
}
@media screen and (max-width:960px){
    #main .news-box .list ul li .imgbox,
    #main .news-box .list ul li .imgbox:hover,
    #main .news-box .list ul li .imgbox img,
    #main .news-box .list ul li .imgbox:hover img,
    #main .news-box .list ul li .arr  { display:none }
    #main .news-box .list ul li a { padding:30px 30px 30px 180px; }
}
@media screen and (max-width:640px){
    #main .news-box { padding:80px 20px 80px; }
    #main .news-box .title-box { text-align:center; }
    #main .news-box .title-box h4 { font-size:30px; }
    #main .news-box .title-box h4 br { display:block }
    #main .news-box .title-box p { font-size:18px; margin-top:22px; }
    #main .news-box .listbox { padding-top:30px; }
    #main .news-box .tabmenu ul { width:100%; max-width:400px; margin:0 auto }
    #main .news-box .tabmenu li { width:calc(33.333% + 4px);  }
    #main .news-box .tabmenu li a { font-size:16px; height:50px; padding:0; }
    #main .news-box .list { margin-top:30px; }
    #main .news-box .list ul li a { padding:20px; }
    #main .news-box .list ul li a strong { position:relative; left:0; top:0; transform:translateY(0); padding-left:0; font-size:16px; display:block; margin-bottom:10px; }
    #main .news-box .list ul li a .txt { font-size:18px; -webkit-line-clamp:2; }
}


/* animation */
#main .news-box .title-box h4,
#main .news-box .title-box p { opacity:0; }
#main .news-box .title-box.subOn h4 { animation:ani_3 0.8s 0.4s; animation-fill-mode:both; }
#main .news-box .title-box.subOn p { animation:ani_3 0.8s 0.8s; animation-fill-mode:both; }
#main .news-box .list ul li { opacity:0; }
#main .news-box .list.subOn ul.active li:nth-child(1) { animation:ani_2 0.7s 0.3s; animation-fill-mode:both; }
#main .news-box .list.subOn ul.active li:nth-child(2) { animation:ani_2 0.7s 0.5s; animation-fill-mode:both; }
#main .news-box .list.subOn ul.active li:nth-child(3) { animation:ani_2 0.7s 0.7s; animation-fill-mode:both; }
#main .news-box .list.subOn ul.active li:nth-child(4) { animation:ani_2 0.7s 0.9s; animation-fill-mode:both; }
#main .news-box .list.subOn ul.active li:nth-child(5) { animation:ani_2 0.7s 1.1s; animation-fill-mode:both; }