/* --------------------------- 메인 > 공통 */
/** 양쪽 보더 **/
#main .section { position: relative; } 
#main .section.border::after { content: ""; position: absolute; top:0; left:50%; transform: translateX(-50%); height:100%; max-width:1252px; width:100%; border-left:1px solid #E5E5E5; border-right:1px solid #E5E5E5; } 
#main .section .inner { position: relative; z-index: 100; } 

@media screen and (max-width:1280px){
 #main .section.border::after { display: none; } 
 }

@media screen and (max-width:1024px){
 #main { margin-top:70px; } 
 #main .section { padding:70px 0; } 
 #main .section[data-anchor="bottom"] { padding: 0 !important; } 
 }




/** 제목 **/
#main .section .tit_box { display: flex; flex-direction: column; gap:1.625rem; } 
#main .section .tit_box h2 { text-align: center; font-family: 'Prompt', sans-serif; font-size: 4rem; font-weight: 600; line-height: 120%; letter-spacing: -0.02em; } 
#main .section .tit_box h2::after { content: "."; color: #E5006C; } 
#main .section .tit_box p.desc { text-align: center; font-size: 1.375rem; font-weight: 500; line-height: 140%; letter-spacing: -0.06em; } 

@media screen and (max-width:640px){
 #main .section .tit_box h2 { font-size: 3.25rem; } 
 #main .section .tit_box p.desc { font-size: 1.25rem; } 
 }





/** 보러가기 **/
#main .btn_more { display: inline-flex; padding:0.625rem 1.5625rem; background-color: #000; color: #FFF; font-weight: 600; border-radius: 0.75rem; gap:0.625rem; } 
#main .btn_more.primary { background-color: #E5006C; } 
#main .btn_more::after { content: url("/img/ico_more.svg"); } 


/* --------------------------- 메인 > 네비게이션 */
#main #menu { display: flex; flex-direction: column; position: fixed; bottom:0; right:4.125rem; z-index: 9999; gap:0.625rem; align-items: center; } 
#main #menu ul { display: flex; align-items: center; justify-content: center; flex-direction: column; gap:0.625rem; width:3.375rem; } 
#main #menu ul li { display: block; } 
#main #menu ul li a { display:flex; flex-direction: column; position: relative; transition: all .3s ease; justify-content: center; align-items: center; width:26px; } 
#main #menu ul li a .shape { display: block; width: 26px; height: 26px; transition: all .3s ease; border-radius: 10px; background: #ddd; } 
#main #menu li a .text { display: block; writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; overflow: hidden; color: var(--gray-000, #000); font-family: 'Prompt', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; opacity:0; visibility:hidden; max-inline-size: 0; } 
#main #menu li.active a .text { opacity:1; visibility:visible; max-inline-size: 15rem; transition: opacity .25s ease, max-inline-size .25s ease; padding:10px 0; } 
#main #menu li.active a .shape { background-color:#E5006C } 

.fp-viewing-company #main #menu li a .text,
.fp-viewing-esg #main #menu li a .text { color:#fff; } 
.fp-viewing-company #main #menu ul li a .shape,
.fp-viewing-esg #main #menu ul li a .shape { background: rgba(255, 255, 255, 0.25); } 

@media screen and (max-width:1600px){
 #main #menu { right:16px; } 
 }

@media screen and (max-width:1024px){
 #main #menu { display: none; } 
 }



/* --------------------------- 메인 > 비주얼 */
#main .visual_slider { position: relative; } 
#main .visual_slider::after { content: ""; display: block; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.24) 1.02%, rgba(0, 0, 0, 0.00) 92.39%); z-index: 1; } 
#main .visual_slider .swiper-slide { padding-top:46.6146%; /*padding-top:70%;*/ height:auto; background-size: cover; } 
#main .visual_slider .swiper-slide::before { display: block; position: absolute; top: -70px; left: 0; width: 100%; height: calc(100% + 70px); background-repeat: no-repeat; background-position: top center; background-size: cover; content: ""; } 
#main .visual_slider .swiper-slide.swiper-slide-active::before { animation:bgZoom 2s ease-in-out forwards; } 
#main .visual_slider .swiper-slide.slide01::before { background-image: url("/img/main/main_slide1.jpg"); } 
#main .visual_slider .swiper-slide.slide02::before { background-image: url("/img/main/main_slide2.jpg"); } 
#main .visual_slider .swiper-slide.slide03::before { background-image: url("/img/main/main_slide3.jpg"); } 
#main .visual_slider .swiper-slide.slide04::before { background-image: url("/img/main/main_slide4.jpg"); } 
#main .visual_slider .swiper-slide.slide05::before { background-image: url("/img/main/main_slide5.jpg"); } 
#main .visual_slider .swiper-slide.slide06::before { background-image: url("/img/main/main_slide6.jpg"); } 
#main .visual_slider .swiper-slide.slide07::before { background-image: url("/img/main/main_slide7.jpg"); } 
#main .visual_slider .swiper-slide.slide08::before { background-image: url("/img/main/main_slide8.jpg"); } 
#main .visual_slider .swiper-slide.slide09::before { background-image: url("/img/main/main_slide9.jpg"); } 
#main .visual_slider .swiper-slide.slide10::before { background-image: url("/img/main/main_slide10.jpg"); } 
#main .visual_slider .swiper-slide.slide11::before { background-image: url("/img/main/main_slide11.jpg"); } 
#main .visual_slider .swiper-slide.slide12::before { background-image: url("/img/main/main_slide12.jpg"); } 

@media screen and (min-width:1920px){
 #main .visual_slider .swiper-slide { height:100vh; } 
 }


@keyframes bgZoom { 
 0% { transform: scale(1.1); } 
 100% { transform: scale(1); } 
 }


#main .visual_slider .inner { z-index: 10; position: absolute; top:0; left:50%; transform: translateX(-50%); width:100%; height:100%; display: flex; flex-direction: column; justify-content: center; } 
#main .visual_slider .txt_box { display: flex; flex-direction: column; gap:1.25rem; } 

#main .visual_slider .txt_box p.lg { color: #FFF; font-family: 'Prompt', sans-serif; font-size: 5rem; font-weight: 600; line-height: 120%; } 
#main .visual_slider .txt_box p.desc { font-size: 1.625rem; font-weight: 600; line-height: 130%; letter-spacing: -0.06em; color:#fff; } 

@media screen and (max-width:1024px){
 #main .visual_slider .txt_box p.lg {font-size: 3rem; } 
 #main .visual_slider .txt_box p.desc { font-size: 1.25rem; } 
}

@media screen and (max-width:640px){
 #main .visual_slider .txt_box p.lg {font-size: 2rem; } 
 #main .visual_slider .txt_box p.desc { font-size: 1rem; } 
}


#main .visual_slider .controls_box { margin-top:2.25rem; display: flex; gap:1.25rem; align-items: center; } 
#main .visual_slider .controls_box > div { position: relative !important; top:auto !important; left:auto !important; bottom:0; width:auto !important; } 

#main .visual_slider .controls_box .swiper-pagination,
#main .visual_slider .controls_box .swiper-pagination span { color:#fff; font-family: 'Prompt', sans-serif; font-size: 1.25rem; } 
#main .visual_slider .controls_box .swiper-pagination span.swiper-pagination-current { font-weight: 700; } 

#main .visual_slider .controls_box .swiper-button-prev,
#main .visual_slider .controls_box .swiper-button-next { margin-top:0 !important; left:0 !important; } 

#main .visual_slider .controls_box .swiper-button-prev::after,
#main .visual_slider .controls_box .swiper-button-next::after { width:2.125rem; height:1.875rem; content: ""; background-size: cover;} 

#main .visual_slider .controls_box .swiper-button-prev::after { background-image: url("/img/ico_prev.svg"); } 
#main .visual_slider .controls_box .swiper-button-next::after { background-image: url("/img/ico_next.svg"); } 

@media screen and (max-width:640px){
#main .visual_slider .controls_box { margin-top:1rem;} 
#main .visual_slider .controls_box .swiper-pagination span { font-size: 1rem; } 
}



/* --------------------------- 메인 > 미디어 */
#main .sec_media { position: relative; background-color: #fff; } 
#main .sec_media .media_box { margin-top:5rem; width:100%; height:23.5rem; } 
#main .sec_media .media_box a { position: relative; overflow: hidden; display: block; padding:4.125rem 6.875rem; height:100%; } 
#main .sec_media .media_box a::before { content: ""; position: absolute; top:0; left:0; width:100%; height:100%; background: url("/img/bg_media.png") no-repeat center/cover; transition: transform 0.6s ease; z-index: -1; } 
#main .sec_media .media_box a:hover { background-size: 110%; } 
#main .sec_media .media_box a:hover::before { transform: scale(1.1); } 
#main .sec_media .media_box a .tit { color: rgba(255, 255, 255, 0.40); font-family: 'Prompt', sans-serif; font-size: 3.125rem; font-weight: 700; line-height: 90%; text-transform: uppercase; letter-spacing: unset; } 
#main .sec_media .media_box a .ico { display: flex; align-items: center; justify-content: center; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:4.5rem; height:4.5rem; background-color:#fff; border-radius: 12px; } 


@media screen and (max-width:1024px){
 #main .sec_media .media_box a { padding:4.125rem 2rem; height:100%; } 
 }

@media screen and (max-width:640px){
 #main .sec_media .media_box {margin-top:3rem; height:15rem; } 
 #main .sec_media .media_box a { padding:4.125rem 2rem; height:100%; } 
 #main .sec_media .media_box a .tit { font-size: 2.25rem; } 
 #main .sec_media .media_box a .ico {top:auto; bottom:1rem; left:auto; right:1rem; transform: translate(0, 0); width:3rem; height:3rem;} 
 }






/** 비디오 모달 **/
#main .modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; z-index: 99999; background-color: rgba(0, 0, 0, 0.4); } 
#main .modal .modal_top { position: relative; margin-bottom:20px; } 
#main .modal .modal_top h3 { text-align: center; color: var(--gray-800, #333); font-family: 'Prompt', sans-serif; font-size: 2.625rem; font-weight: 600; line-height: 120%; } 
#main .modal .modal_top .btn_close { position: absolute; top:50%; right:0; width:52px; height:52px; background-color: #000; border-radius: 100%; transform: translateY(-50%); } 
#main .modal .modal_content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; max-width:1000px; width:90%; border-radius: 12px; } 
#main .modal .modal_content .video_box { position: relative; padding-top:56.25%; } 
#main .modal .modal_content .video_box iframe { position: absolute; top:0; left:0; width:100%; height:100%; } 




/* --------------------------- 메인 > 세코패밀리 */
#main .sec_family { background: #F2F0F6 url("/img/bg_family.png") repeat-y center/cover; } 




/* --------------------------- 메인 > 세코패밀리 */
#main .sec_network { background-color: #F2F0F6; } 
#main .sec_network .img_box {margin-top:3rem;}
#main .sec_network .img_box img { width:100%; } 


/* --------------------------- 메인 > ESG */
#main .sec_esg { background: url("/img/bg_esg.png") no-repeat center center; background-size: cover; } 
#main .sec_esg ul.esg_list { margin-top:3.5rem; width:38.125rem; display: flex; gap:0.625rem; flex-direction: column; } 
#main .sec_esg ul.esg_list li { border-radius: 12px; position: relative; overflow: hidden; } 
#main .sec_esg ul.esg_list li::before { content:""; position:absolute; inset:0; border:2px solid rgba(255,255,255,0); border-radius:12px; transition:border-color 0.3s; } 
#main .sec_esg ul.esg_list li:hover::before { border-color:rgba(255,255,255,1); } 
#main .sec_esg ul.esg_list li:nth-child(1) { background:#E5006C; } 
#main .sec_esg ul.esg_list li:nth-child(2) { background:#B26F8F; } 
#main .sec_esg ul.esg_list li:nth-child(3) { background:#AE8F9E; } 
#main .sec_esg ul.esg_list li a { position: relative; display: flex; gap:1.875rem; padding:2rem 3.125rem; min-height:9.125rem; align-items: center; color:#fff; } 
#main .sec_esg ul.esg_list li a .txt { flex:1; display: flex; flex-direction: column; gap:1.25rem; } 
#main .sec_esg ul.esg_list li a .txt .tit { color:#fff; font-size: 1.625rem; font-weight: 600; line-height: 90%; } 
#main .sec_esg ul.esg_list li a .txt .desc { color: var(--gray-0, #FFF); font-weight: 500; line-height: 110%; } 
#main .sec_esg ul.esg_list li a::after { position: absolute; bottom:0.625rem; right:0.625rem; content: ""; width:3.125rem; height:3.125rem; border-radius: 12px; background:#9FA0A0 url("/img/ico_esg_more.svg") no-repeat center; } 


@media screen and (max-width:640px){
 #main .sec_esg ul.esg_list { margin-top:3rem; width:100%; } 
 #main .sec_esg ul.esg_list li a { padding:2rem; gap:1rem; } 
 #main .sec_esg ul.esg_list li a .txt .desc br { display: none; } 
 #main .sec_esg ul.esg_list li a::after { width:2.25rem; height:2.25rem; } 
 }




/* --------------------------- 메인 > 인재채용 */
#main .sec_careers { background: url("/img/bg_career.png") no-repeat center center; background-size: cover; } 
#main .sec_careers .careers_box { margin-top:5rem; display: flex; min-height:450px; } 
#main .sec_careers .careers_box .left { width:67%; background: url("/img/bg_career02.png") no-repeat center/cover; border-radius: 12px; display: flex; justify-content:flex-end; align-items: flex-end; padding:2.25rem 3.75rem; } 

#main .sec_careers .careers_box .left .seco_box .desc { color: #000; font-weight: 500; line-height: 140%; text-align: left; padding-bottom:3.125rem; padding-top:1.25rem; } 

#main .sec_careers .careers_box .right { padding:6.5625rem 3.75rem 2.25rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex:1; background-color: #E5006C; border-radius: 12px; } 
#main .sec_careers .careers_box .right h3 { color: #FFF; text-align: center; font-size: 1.875rem; font-weight: 600; line-height: 90%; } 
#main .sec_careers .careers_box .right .ico { margin-top:1.875rem; } 
#main .sec_careers .careers_box .right .desc { word-break: keep-all; margin:3.125rem 0; text-align: center; } 
#main .sec_careers .careers_box .right .btn_more { display: inline-flex; padding:0.625rem 1.5625rem; background-color: #000; color: #FFF; font-weight: 600; border-radius: 12px; gap:0.625rem; } 
#main .sec_careers .careers_box .right .btn_more::after { content: url("/img/ico_more.svg"); } 


@media screen and (max-width:1024px){
 #main .sec_careers .careers_box { min-height:auto; } 
 #main .sec_careers .careers_box .left { width:50%; background:#A6B6BD; justify-content:space-between; align-items: center; } 
 #main .sec_careers .careers_box .left .seco_box { width:100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height:100%; padding-top:6.5625rem; } 
 #main .sec_careers .careers_box .left .seco_box .desc { text-align: center; } 
 }
 
@media screen and (max-width:640px){
 #main .sec_careers .careers_box {margin-top:3rem; flex-direction: column; gap:1rem; } 
 #main .sec_careers .careers_box .left { padding:2.25rem; width:100%; } 
 #main .sec_careers .careers_box .left .seco_box { padding-top:0; } 
 #main .sec_careers .careers_box .left .seco_box .desc br { display: none; } 
 #main .sec_careers .careers_box .right { padding:2.25rem; } 
 #main .sec_careers .careers_box .right .desc { margin:2rem 0; } 
 #main .sec_careers .careers_box .right .desc br { display: none; } 
 }