﻿@charset "UTF-8";/*-------------------------------------------------
Content Style Sheet
Version : 1.0
Author : KEB
Last update : 2022. 01. 03.
-------------------------------------------------*/
body {font-family: 'pretendard';} 
.blind {display: none;}
.br0 {border-right: none !important;}
a:hover{text-decoration: none !important;}

.common_wrap {padding-bottom: 100px; color: #000;}
/***** header *****/
.n_header_inner {width: 100%; position: fixed;top: 0;left: 0;width: 100%;z-index: 999; background-color: rgba(5, 24, 47, 0.5);transition: background-color 0.3s ease; min-width:1200px;}
.n_header_inner.active {background-color: #05182F !important; box-shadow: inset 0 -1px 0 #18293F, inset 0 1px 0 #18293F;}

.n_top_menu_inner {width: 1200px; display: flex; justify-content: space-between; align-items: center;}
.n_header_inner .n_top_menu {height: 40px; background-color: #05182F; display: flex; justify-content: center;}
.n_header_inner.active .n_top_menu {box-shadow: inset 0 -1px 0 #18293F;}
.n_header_inner .n_top_menu_inner {width: 1200px; display: flex; justify-content: space-between; align-items: center;}

.n_header_inner .n_top_menu ul {display:flex;gap:40px;align-items:center;}
.n_header_inner .n_top_menu ul.n_top_left {gap:25px;}
.n_header_inner .n_top_menu ul li a {font-size:15px;}
.n_header_inner .n_top_menu ul li a span {position:relative; color:#fff !important;}
.n_header_inner .n_top_menu ul .n_menu_login a span::before {content:'';display:block;position:absolute;background:url(./../images/ico_menu_login.png) no-repeat;width:13px;height:14px;top:2px;left:-20px;}
.n_header_inner .n_top_menu ul .n_menu_memo a span::before {content:'';display:block;position:absolute;background:url(./../images/ico_menu_memo.png) no-repeat;width:13px;height:14px;top:2px;left:-20px;}
.n_header_inner .n_top_menu ul .n_menu_join a span::before {content:'';display:block;position:absolute;background:url(./../images/ico_menu_join.png) no-repeat;width:11px;height:12px;top:3px;left:-18px;}
.n_header_inner .n_top_menu ul .n_menu_ticket a span::before {content:'';display:block;position:absolute;background:url(./../images/ico_menu_ticket.png) no-repeat;width:9px;height:15px;top:2px;left:-15px;}

/* 검색창 */
.li_search {position: relative;}
.search_box {position: absolute; top: -5px; right: -6px; background-color: #fff; padding: 0px; display: flex; align-items: center; transform: translateX(20px); opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s; z-index: 1000;}
.search_box.active {transform: translateX(0); opacity: 1; visibility: visible;}
.search_box .srch_wrap {display: flex;}
.search_box .n_input_txt {border: none; height: 30px; width: 150px;  font-size: 12px;padding: 0 0 0 5px; letter-spacing: -0.5px;}
.n_btn_search {border: none; background-color: #DD032F; padding: 5px; cursor: pointer;}
/* 검색창 // */

/* gnb */
.n_header_inner .n_nav {display: flex; width: 1200px; margin: 0 auto; height: 80px; justify-content: space-between;}
.n_header_inner .n_nav .n_logo {display: flex; align-items: center;}
.n_header_inner .n_nav .n_nav_inner {display: flex; align-items: center;}
.n_header_inner .n_nav .n_nav_inner .n_nav_tit {display: flex; height: 100%; align-items: center}
.n_header_inner .n_nav .n_nav_inner .n_depth1_tit {font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.25px; color: #fff !important; position: relative; transition: all 0.2s;}
.n_header_inner .n_nav .n_nav_inner .n_depth1_tit:hover {color: #DD032F;}
.n_header_inner .n_nav .n_nav_inner .n_depth1_tit span {color: #fff !important;}

.n_li_depth1 {position: relative; padding: 30px 34px;}
.n_li_depth1::after {content: ""; position: absolute; display: block; bottom: 0px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #DD032F; transform: translateX(-50%) rotate(180deg); opacity: 0; transition: opacity 0.1s ease;}
.n_header_inner .n_nav .n_nav_inner .n_li_depth1:hover::after {opacity: 1;}
.n_li_depth1.active .n_depth2_wrap {display: block;}
.ico_menu_btn {display: flex; align-items: center; gap: 20px;}

/* 메뉴 타이틀 */
.n_depth2_wrap {position: absolute; top: 81px; left: 50%; transform: translateX(-50%);display: none; z-index: 1000; width: 150px;}
.n_depth2_wrap .n_depth2 .n_depth2_li .n_depth2_tit {color: #eee; width:100%;  background-color: #dd032f; height: 45px; flex-direction: column; font-size: 16px; font-weight: 500; display: flex; justify-content: center; box-sizing: border-box; align-items: center; position: relative; transition: opacity 0.1s ease;}
.n_depth2_wrap .n_depth2 .n_depth2_li .n_depth2_tit:hover {font-weight: 700; color: #fff;}
.n_depth2_wrap .n_depth2 .n_depth2_li .n_depth2_tit > span {padding: 0 30px;}
/* gnb // */

/* 전체메뉴 */
.n_allmenu_wrap {display: none; position: fixed; inset: 0; background-color: rgba(0, 9, 21, 0.8); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(10px); color: #fff; z-index: 9999; overflow-y: auto; justify-content: center; align-items: center; padding: 80px 40px; box-sizing: border-box;}
.n_all_menu_close {position: absolute; top: 80px; right: 80px; z-index: 10000;}
.n_all_menu_close img {width: 32px; height: 32px;}
.n_allmenu__inner {display: flex; justify-content: center; align-items: flex-start; gap: 60px; width: 100%;}
.n_allmenu__inner > li {min-width: 160px;}
.n_allmenu__inner h3 {font-size: 23px; font-weight: bold; margin-bottom: 19px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 12px; color: #fff;}
.n_allmenu__inner ul {margin: 0; padding: 0; list-style: none;}
.n_allmenu__inner li ul li {margin: 17px 0;}
.n_allmenu__inner li ul li a {color: #ccc; font-size: 17px; text-decoration: none; transition: color 0.2s ease;}
.n_allmenu__inner li ul li a:hover {color: #fff;}
/* 전체메뉴 // */
/***** header // *****/

/***** main_visual *****/
.main_visual_banner {position: relative; width: 100%; height: auto; overflow: hidden; min-width:1200px; max-width:2000px; margin:0 auto;} 
.main_visual_banner .swiper-container {min-width: 1200px; overflow: hidden; display: flex; margin: 0 auto;} 
.main_visual_banner .swiper-wrapper {display: flex; transition: transform 0.3s ease;} 
.main_visual_banner .swiper-slide {flex-shrink: 0; width: 100%; position: relative;} 
.main_visual_banner .swiper-slide video,
.main_visual_banner .swiper-slide img {width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform;} 
.visual_swiper_nav {position: absolute; bottom: 20px; height: 35px; z-index: 100; width: 240px; left: 50%; transform: translateX(-50%); display: flex; gap: 30px;justify-content: center; background-color: #000; border-radius: 50px; background-color: rgba(0, 0, 0, 0.1);}
.visual_nav_btn {display: flex; width: 160px; align-items: center;} 
.swiper-numbers {display: flex; justify-content: center; font-size: 18px; color: #fff; cursor: pointer; transition: color 0.3s; line-height: 1.6; letter-spacing: 10px;} 
.swiper-numbers.active {color: #d1102f; font-weight: bold;} 
.swiper-current {color: #d1102f; font-weight: 700;} 
.visual_prev {background: url(./../images/i-arrow.svg) no-repeat center center; background-size: contain; width: 30px !important; height: 30px !important;} 
.visual_next {background: url(./../images/i-arrow.svg) no-repeat center center; background-size: contain; width: 30px !important; height: 30px !important; transform: rotate(180deg);} 
.visual_play_btn {display: flex; align-items: center;} 
.visual_pause {background: url(./../images/i-pause.svg) no-repeat center; background-size: contain; width: 24px; height: 24px; border: none; cursor: pointer;} 
.visual_play {background: url(./../images/i-play.svg) no-repeat center; background-size: contain; width: 24px; height: 24px; border: none; cursor: pointer;} 
.visual_hidden {display: none !important;} 

/* scroll */
.scroll_wrap {position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); height: 80px; z-index: 10;}
.scroll_wrap::before {content: ""; position: absolute; display: block; bottom: 0px; left: 50%; width: 18px; height: 48px; transform: translateX(-50%); background: linear-gradient(rgba(238, 238, 238, 0) 0px, rgba(238, 238, 238, 0.5) 60%, rgb(238, 238, 238) 100%); border-radius: 60px; animation: 2s linear 0s infinite normal none running loopCirWrap;}
.scroll_wrap > span {font-size: 14px; font-weight: 700; line-height: 140%; letter-spacing: 2px; color: #fff; text-transform: uppercase;}
.scroll_wrap::after {content: ""; position: absolute; display: block; width: 18px; height: 18px; bottom: 0; left: 50%; transform: translateX(-50%); background: #d1102f; border-radius: 50%; animation: loopCir 2s ease-in-out infinite;}
@keyframes loopCir {
    0% {transform: translate(-50%, -40px); opacity: 0;}
    20% {opacity: 1;}
    70% {transform: translate(-50%, 0); opacity: 1;}
    85% {opacity: 0;}
    100% {transform: translate(-50%, -40px); opacity: 0;}
}

@keyframes fadeScrollWrap {
    0% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    85% {opacity: 0;}
    100% {opacity: 1;}
}
/***** //main_visual *****/

/***** n_content_wrap *****/
.n_content_wrap {width: 1200px; margin: 0 auto;} 
.n_cont_top_wrap {margin-top: 21px; margin-bottom: 74px; display: flex; flex-direction: column; gap: 21px;} 

.ticket_btn_wrap ul { display: flex; gap: 21px; }
.ticket_btn_wrap li { list-style: none; flex: 1; }
.ticket_btn_wrap a { display: flex ; min-width: 220px; gap: 15px; align-items: center; padding: 14px 18px; border-radius: 12px;  background: linear-gradient(175deg, #002551 0%, #05182F 100%); color: #fff; text-decoration: none; transition: all 0.25s ease;}
.ticket_btn_wrap a:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 18px rgba(0,0,0,0.25);}
.ticket_btn_wrap a img { width: auto; height: 31px; flex-shrink: 0;}
.ticket_btn_wrap a p { color: #fff; margin: 0; font-weight: 600; font-size: 16px; line-height: 1.5;}
.ticket_btn_wrap a span { display: block; margin-top: 4px; font-size: 14px; color: #bfbfbf; font-weight: 400;}


/* 경기일정 */
.schedule-swiper {width: 100%; overflow: hidden; position: relative;}
.n_schedule.swiper-slide {flex-shrink: 0; box-sizing: border-box; border: 1px solid #999; border-radius: 12px; padding: 20px 25px; background: #fff url(./../images/img_logo_bg.png) no-repeat 85px 95px;}
.n_schedule li {line-height: 1; letter-spacing: -0.5px;}
.n_schedule .n_sch_day {font-size: 18px; font-weight: 700; margin-bottom: 8px; display: flex; justify-content: space-between}
.n_schedule .n_sch_day .n_eventgame > img {width: 20px;}

.n_schedule .n_sch_time {font-size: 14px; font-weight: 400; margin-bottom: 10px; color: #666; margin-bottom: 20px;} 
.n_schedule .n_sch_team {font-size: 18px; font-weight: 600; margin-bottom: 15px;}
.n_schedule .n_sch_team > span {font-weight: 400; padding: 0 5px;}
.n_sch_score {display: flex; justify-content: space-between; margin-bottom: 25px;}
.n_sch_score > p {display: flex; gap: 10px; align-items: center;}
.n_sch_score > p .n_score {font-size: 18px; font-weight: 600;}
.n_sch_score > p .n_score_l {display: flex; width: 14px; height: 14px; background-color: #DD032F; font-size: 8px; font-weight: 700; align-items: center; justify-content: center; border-radius: 3px; color: #fff;}
.n_sch_score > p .n_score_w {display: flex; width: 14px; height: 14px; background-color: #032447; font-size: 8px; font-weight: 700; align-items: center; justify-content: center; border-radius: 3px; color: #fff;}
.n_sch_score > img {width: 55px;}
.n_schedule .n_score_n_upcoming {font-size: 15px; color: #999; font-weight: 500;}
.n_sch_btn a {background: #032447; color: #fff; line-height: 1.5; font-weight: 600; letter-spacing: -0.5px; padding: 8px 0; border-radius: 4px; font-size: 15px; display: block; text-align: center;}
.n_schedule a:hover {background: #02162b;}
.n_schedule.n_upcoming a {background: #DD032F;}
.n_schedule.n_upcoming a:hover {background: #b80428;}
.n_schedule.n_today {border: 2px solid #DD032F;}

.n_cont_top_wrap .con_wrap01 {display: flex; gap: 21px; height: 384px;} 

.schedule_prev {position: absolute; background: url(./../images/img_arrow_prev.png) no-repeat;width: 12px !important; height: 22px !important; background-size: contain; top: 115px !important; left: 7px !important;}
.schedule_next {position: absolute; background: url(./../images/img_arrow_next.png) no-repeat; width: 12px !important; height: 22px !important; background-size: contain; top: 115px !important; right: 7px !important;}

/* 자이언츠 뉴스 */
.n_giants_news {max-width: 960px; padding: 25px 22px; color: #000; border: 1px solid #999; border-radius: 18px; flex: 0 747px;} 
.n_news_header {display: flex; justify-content: space-between; align-content: flex-start}
.n_news_header > img {width: 100%;}
.n_news_heder_inner {display: flex; gap: 12px;}
.n_logo_text {display: flex; gap: 7px; font-size: 20px; font-weight: bold; flex-direction: column; justify-content: center;}
.n_logo_letters {letter-spacing: 10px; font-size: 25px; font-weight: 800;}
.n_sub_title {font-size: 18px; color: #000; line-height: 1.5; letter-spacing: -0.5px; font-weight: 700;}
.n_news_tag > span {font-size:14px; display:flex; padding:5px 7px; line-height:1; background-color:#05182f; color:#fff; width:55px; justify-content:center; border-radius: 30px; font-weight:500; letter-spacing:-0.25px;}
/*.n_news_tag.new_tag_info > span {background-color:#d10526;}*/


/* 자이언츠 뉴스 컬러 카테고리 */
.n_news_tag > .new_col01{background-color:#d10526; color:#fff;} /* red : 티켓 */
.n_news_tag > .new_col02{background-color:#022344; color:#fff;} /* navy : 보도자료 */
.n_news_tag > .new_col03{background-color:#63b0e4; color:#fff;} /* blue : 공지사항 */
.n_news_tag > .new_col04{background-color:#ffe1a9; color:#000;} /* ivory : 이벤트 */
.n_news_tag > .new_col05{background-color:#fff; color:#000; border:1px solid #000;} /* wihte : 기타 */

.new_col01 {background-color:#d10526; color:#fff;} /* red : 티켓 */
.new_col02 {background-color:#022344; color:#fff;} /* navy : 보도자료 */
.new_col03 {background-color:#63b0e4; color:#fff;} /* blue : 공지사항 */
.new_col04 {background-color:#ffe1a9; color:#000;} /* ivory : 이벤트 */
.new_col05 {background-color:#fff; color:#000; border:1px solid #000;} /* wihte : 기타 */
/* // 자이언츠 뉴스 컬러 카테고리 */

.n_news_list {display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid #000;}
.n_news_list.sty02 {border-bottom: none;}
.n_news_item {width: calc(50% - 10px); display: flex; gap: 8px; padding: 14px 0; flex-direction:column;}
.n_news_wrap {display:flex; gap:16px;}
.n_news_date {flex-shrink: 0; text-align: center;}
.n_news_date .n_day {font-size: 25px; font-weight: 700; display: block; letter-spacing: -0.5px; line-height: 1.3;}
.n_news_date .n_month {font-size: 10px; color: #333; font-weight: 500; line-height: 1.2; letter-spacing: -0.5px;}
.n_news_content {flex: 1;}
.n_news_title {display: inline-block; font-size: 17px; font-weight: 600; color: #000; text-decoration: none; margin-bottom: 8px; line-height: 1.4;}
.n_news_title:hover {background: #CFEBFF;}
/* .n_news_title.n_highlight {background: #CFEBFF; padding: 2px 10px 4px 0; line-height: 1; font-size: 18px; letter-spacing: -0.5px; font-weight: 700;} */
.n_news_desc {font-size: 14px; color: #444; line-height: 1.5; font-weight: 500;}

.con_wrap01 { display: flex; gap: 20px; }
.n_qr_banner_wrap { flex: 1; position: relative; height: auto; overflow: hidden; cursor: grab; user-select: none; }
.n_qr_banner_wrap:active { cursor: grabbing; }
.n_qr_banner { display: block; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; transform: translateX(100%); z-index: 1; }
.n_qr_banner.active { opacity: 1; transform: translateX(0); z-index: 2; }
.n_qr_banner.dragging { transition: none; }
.n_qr_banner img { width: 100%; height: auto; display: block; pointer-events: none; }
.n_qr_pagination { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.n_qr_pagination_dot { width: 8px; height: 8px; border-radius: 50%; background-color: #fff; opacity: 0.5; cursor: pointer; transition: opacity 0.3s ease-in-out; }
.n_qr_pagination_dot.active { opacity: 1; }
.n_qr_banner > img {border-radius: 15px;}

.n_cont_top_wrap .con_wrap02 {display: flex; gap: 21px;} 
.n_content_wrap .con_wrap03 {display: flex; gap: 21px;} 
.n_content_wrap .con_wrap03 .cont_banner {width: 386px; border-radius: 15px;}
.n_content_wrap .con_youtube {display: flex; gap: 21px;} 
.n_content_wrap .con_youtube .youtube_list {flex: 1;}
.n_content_wrap .con_youtube .youtube_list > a {color: #000; font-size: 14px;line-height: 1.3;letter-spacing: -0.75px; font-weight: 500;}
.n_content_wrap .con_youtube .youtube_list > a > p {padding-top: 8px;}
.n_content_wrap .con_youtube .youtube_list > a > img {width: 100%; border-radius: 15px;}
/***** n_content_wrap // *****/

/*****  포토슬라이드 swiper *****/
.photo_slide {width: 100%; padding: 0 0 50px 0; overflow: hidden; z-index: 100; min-width:1200px;} 
.photo_slide .swiper-wrapper {width: 100%;} 
.photo_slide .swiper-wrapper .swiper-slide {display: flex; max-width: 390px; max-height:320px; transition: transform 0.3s ease, filter 0.3s ease; overflow: hidden; border-radius: 20px; text-align: center; flex-wrap: wrap; justify-content: center; margin: 0px -5px; transform: scale(0.8);} 
.photo_slide .swiper-wrapper .swiper-slide > img {width: 100%; border-radius: 20px; transition: filter 0.3s ease; object-fit:cover; height:250px;} 
.photo_slide .swiper-wrapper .swiper-slide-active {transform: translateZ(1); transform: scale(1);} 
.photo_slide .swiper-slide-active > img {position: relative;} 
.photo_slide .swiper-slide-active .swiper-caption {position: absolute; width: 100%; height: 80px; bottom: 0; background-color: rgba(0, 0, 0, 0.3); text-align: center; border: none; transition: all 0.3s ease; display: flex; flex-direction: row; align-items: center; gap: 15px; padding: 0; margin: 0; padding-left: 20px; border-radius: 0;} 
.photo_slide .swiper-caption {display: flex; padding: 9px 15px; text-align: center; margin-top: 20px; border: 1px solid #999; border-radius: 30px;} 
.photo_slide .swiper-caption > span {display: block; position: relative; width: 100%; padding-left: 20px; box-sizing: border-box; text-align: left;} 
.photo_slide .swiper-caption > span::before {display: block; position: absolute; content: ''; background: url(./../images/ico_G.png) no-repeat; width: 16px; height: 16px; left: 0; filter: brightness(0.7); transition: filter 0.3s ease;} 
.photo_slide .swiper-title {font-size: 14px; color: #888;} 
.photo_slide .swiper-date {color: #fff; border-radius: 5px; display: none; z-index: 15;} 
.photo_slide .swiper-slide-active .swiper-caption > span {padding: 0;} 
.photo_slide .swiper-slide-active .swiper-caption > span::before {display: none;} 
.photo_slide .swiper-slide:not(.swiper-slide-active) .swiper-caption > span::before {filter: brightness(1);} 
.photo_slide .swiper-slide-active .swiper-title {font-size: 18px; font-weight: bold; color: #fff;} 
.photo_slide .swiper-slide-active .swiper-date {display: flex; min-height: 50px; min-width: 50px; font-size: 11px; color: #fff; border: 2.5px solid #fff; line-height: 0.4; font-weight: 300; box-sizing: border-box; flex-direction: column; justify-content: center; align-items: center;} 
.photo_slide .swiper-slide-active .swiper-date > p {line-height: 1;} 
.photo_slide .swiper-slide-active .swiper-date > em {font-size: 23px; line-height: 1; font-weight: 600;} 

/***** swiper nav *****/
.photo_slide .swiper_nav {position: relative; width: 1200px; margin: 0 auto;} 
.photo_slide .swiper_btn {display: flex; align-items: center; gap: 28px;} 
.photo_slide .swiper-pagination {width: 1048px !important;} 
.photo_slide .swiper-pagination-progressbar {background: #000 !important; height: 1px !important;} 
.photo_slide .swiper-pagination .swiper-pagination-progressbar .swiper-pagination-horizontal {height: 1px !important; position: relative !important;} 
.photo_slide .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #d1102f !important; height: 4px !important; position: absolute !important; top: -3px !important;} 
.photo_slide .swiper_btn_arrows {display: flex !important; gap: 10px; align-items: center;} 
.photo_slide .swiper-button-prev {background: url('./../images/ico_prev.svg') no-repeat; width: 32px !important; height: 32px !important;} 
.photo_slide .swiper-button-next {background: url('./../images/ico_next.svg') no-repeat; width: 32px !important; height: 32px !important;} 
.photo_slide .veiw_more {width: 23px; height: 23px; background: url('./../images/ico_more_view.png') no-repeat; margin-left: 5px; cursor: pointer;} 
/***** swiper nav // *****/
/***** swiper // *****/

.n_con_banner01 {margin-bottom: 20px;}

.footer_wrap {width: 100%; margin-top: 100px;} 
.hospital_list {display: block !important; opacity: 1;} 

@media (max-width:1400px) {
	.bh_main_quick {top:120px !important;}
	.bh_main_quick .bh_main_quick_box ul {padding-top:0 !important;}
}
