@charset "utf-8";


.visualBox{margin: auto; max-width: 1904px;}
.visual{position: relative; /*margin: 2rem 3.9% 0px;  width: 82.502%;  max-width: 1570px; */  margin:2rem auto 0px; max-width: calc(0rem + var(--wrapMx)); height: calc(100vh - 345px); max-height:610px ; min-height: 500px; }
.visual:before,
.visual:after{display: block; content: ''; position: absolute; width: 44%; height:92.3%; border:.8rem solid #FC4571; opacity: .1}
.visual:before{left:-2.2%; top: -2.1rem; }
.visual:after{border-color:#fff; right: -1.8%; bottom: -2rem; }
.visual_list>li{opacity:0; filter: blur(0px); position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color:#888; background-position:center center; background-size:cover; transition:all ease  2s; z-index: 1;}
.visual_list>li.select{opacity:1; filter: blur(0px); background-size:cover; transition:all ease 1s}
/* m_visual.jsp에 넣음
.visual_list>li.visual01{background-image:url(/img/main/visual01_250305.jpg)}
.visual_list>li.visual02{background-image:url(/img/visual/visual_250522_01_re.jpg)}
.visual_list>li.visual03{background-image:url(/img/visual/visual_250522_02.jpg)}
.visual_list>li.visual04{background-image:url(/img/main/visual04_250422.jpg)}  */
.visual_list .name{font-size: 0px;}
.visual_btn{margin-top: -.5em; z-index: 1; }
.visual_btn ul.visual_name{margin: auto; max-width: 720px;}
.visual_btn ul.visual_name>li{display: inline-block; margin:2px 0px}
.visual_btn ul.visual_name>li a{display:block; padding: 8px 1.6em 7px; color: #fff; background:rgba(0,0,0,.1); border:2px solid #fff; border-radius:50px; font:.9375rem 'nexon_lv1'; text-decoration: none; transition:all ease .3s}
.visual_btn ul.visual_name>li.select a,
.visual_btn ul.visual_name>li a:hover{background: #fff; color: #333;}
.visual_btn ul.go{margin-top: 3.5vh;}
.visual_btn ul.go>li{display: none; text-align: center;}
.visual_btn ul.go>li.select{display: block;}
.visual_btn ul.go>li a{display: inline-block; color: #fff; border-bottom:1px solid #fff}
.visual_btn ul.go>li a:After{display: inline-block; content: ''; margin:0px 2px 1px 5px; width: 4px; height: 4px; border:2px solid #fff; border-width:2px 2px 0px 0px; transform:rotate(45deg)}
.visual_control{display: flex; gap:1px; position: absolute; right: -7.1rem; bottom: -3rem; z-index:1}
.visual_control li a{display: block; position: relative; width: 7rem; height:7rem; background:#fff; font-size: 0px; }
.visual_control li a:before{display: block; content: ''; position: absolute; left: 50%; top: 50%; margin-top: -12%; width: 23%; height: 23%; border:1px solid #333; border-width:1px 1px 0px 0px}
.visual_control li.visual_prev a:before{margin-left: -5%; ;transform:rotate(-135deg)}
.visual_control li.visual_next a:before{margin-left: -17%; transform:rotate(45deg)}

.banr{display: flex; justify-content: space-between; flex-wrap:wrap; max-width: 1012px; padding: 4rem .5% 5rem;}
.banr>li a{display: block; position: relative; text-align: center; font-size: 1.55rem; --bgSize:6rem}
.banr>li a:hover{color: var(--color)}
.banr>li a:before{display: block; content: ''; margin: 0px auto 5px; width: var(--bgSize); height: var(--bgSize); background-repeat: no-repeat; background-position: left top; background-size: var(--bgSize); background-image: url(/img/main/banr_ic.png); transition:all ease .5s}
.banr>li a:hover:before{background-image: url(/img/main/banr_ic_on.png);}
.banr>li:nth-child(2) a:before{background-position-y:calc(0px - var(--bgSize))}
.banr>li:nth-child(3) a:before{background-position-y:calc(0px - var(--bgSize)*2)}
.banr>li:nth-child(4) a:before{background-position-y:calc(0px - var(--bgSize)*3)}
.banr>li:nth-child(5) a:before{background-position-y:calc(0px - var(--bgSize)*4)}
.banr>li:nth-child(6) a:before{background-position-y:calc(0px - var(--bgSize)*5)}
.banr>li:nth-child(7) a:before{background-position-y:calc(0px - var(--bgSize)*6)}
.banr>li a:After{display: block; content: ''; position: absolute; left: 50%; top: 50%; transform:translate(-50% ,-50%); width: 13rem; height: 13rem; border-radius:100%; background: var(--color); opacity: 0; z-index: -1; transition:all ease .5s}
.banr>li a:hover:After{opacity: .05; }
.banr>li:nth-child(6) a:hover,
.banr>li:nth-child(7) a:hover{color: var(--color_sub01)}
.banr>li:nth-child(6) a:After,
.banr>li:nth-child(7) a:After{background: var(--color_sub01)}

.more{position: absolute; right: 0px; top: 0px;}
.more a{display: block; position: relative; width: 1.9rem; height: 1.9rem; font-size: 0px;}
.more a:before,
.more a:after{display: block; content: ''; position: absolute; left: 0px; top: 50%; width: 100%; height: 1px; background: #666;}
.more a:after{transform:rotate(90deg)}
.more2{position: absolute; right: 0px; top: -1rem}
.more2 a{display: block; width: 5vw; height: 1.9rem; font-size: 0px;}
.more2 a:before,
.more2 a:after{display: block; content: ''; position: absolute; left: 0px; top: 50%}
.more2 a:before{width: 100%; height: 1px; background: #fff;}
.more2 a:after{width:1rem; height: 1rem; border:1px solid #fff; left: calc(100% - 1rem); margin-top:-.5rem; border-width:1px 1px 0px 0px; transform:rotate(45deg)}
.more3 a{font-size: 1.4rem; color: #666;}
.more3 a:before{content: ' +'; font-size: 1.3rem; color: #666}

h3{font:bold 2em 'nexon_lv1'; color: #222; letter-spacing: -.05rem;}
.bgGrey{padding: min(12vw, 9.5rem) 0px; background: linear-gradient(180deg, #F5F5F5 52%, rgba(245, 245, 245, 0.00) 100%);}
.bgGrey .wrapper{overflow:hidden}
.bgGrey .more{top: 1rem;}
.news{position: relative;}
.news  h3, .pzone h3{margin-bottom: 2rem; font-size: 2.8rem;}
.news ul{}
.news>h3, .news ul.tab{float: left; }
.news>h3, .news ul.tab li{display: inline-block; margin-right: 3rem;}
.news ul.tab{margin-left: 1rem;}
.news ul.tab li a{position: relative; font-size: 2.1rem; }
.news ul.tab li.select a{color: var(--color_sub01); font-weight: bold;}
.news ul.tab li.select a:After{content: ''; position: absolute; left: -3px; right: -3px; bottom: -2px; height: 8px; background: var(--color_sub01); opacity: .2;}
.news div:not(.activity){display: none; clear: both}
.news div#notice{display: block}
.news div[id] ul{display: flex; justify-content: space-between;}
.news div[id] ul li{flex-basis:32.5%}
.news div[id] ul li a{display: block; padding:min(4rem, 18%) min(4.5rem, 15%); background: #fff; height: 100%;}
.news div[id] ul li a .date{font-weight: 300; color: #888;}
.news div[id] ul li a .tit{margin-top: min(15%, 2.5rem); font-size: 1.7rem;  max-height: 5rem; overflow:hidden;  display:-webkit-box;  -webkit-line-clamp:2; /* 라인수 */ -webkit-box-orient:vertical;   text-overflow:ellipsis;}
.news{float:left; width: calc(100% - 370px - 5%)}
.news .activity{position: relative; margin-top:min(12vw, 6.7rem)}
.news .activity ul{display: flex; justify-content:space-between}
.news .activity ul>li{flex-basis:32.5%}
.news .activity ul>li .img{height:200px}
.news .activity ul>li img{width: 100%; height: 100%; object-fit:cover}
.news .activity ul>li .tit{margin-top: 1.5rem; font-size: 1.6rem;}
.pzone{position: relative; float:right; width: 370px;}
.pzone_list{overflow:hidden}
.pzone_list>ul{position: relative; white-space:nowrap; text-align: center; font-size: 0px; height:550px}
.pzone_list>ul>li{display: inline-block; width: 100%; height: 100%; overflow:hidden}
.pzone_list>ul>li a{display: block;}
.pzone_list>ul>li img{width: 100%; height: 100%; object-fit:cover}
.pzone_control{display: flex; gap:1rem; align-items:center; justify-content: flex-start; margin-top: 1.5rem; }
.pzone_control>li{line-height: 21px;}
.pzone_control>li:not(.cnt){font-size: 0px;}
.pzone_control>li.cnt{flex-grow:1}
.pzone_control>li a{display: block; position: relative; width:20px; height: 12px;}
.pzone_control>li:not(.stop) a:before,
.pzone_control>li:not(.stop) a:after{display: block; content: ''; position: absolute; top: 50%; }
.pzone_control>li:not(.stop) a:before{width: 100%; height: 1px; background: #333;}
.pzone_control>li:not(.stop) a:after{width:.7rem; height: .7rem; margin-top: -.3rem; border:1px solid #333; border-width:1px 1px 0px 0px}
.pzone_control>li.prev a:after{left: 1px; transform:rotate(-135deg)}
.pzone_control>li.next a:after{right: 1px; transform:rotate(45deg)}
.pzone_control>li.stop a:before{display: block; content: ''; position: relative; top: 0px; margin: auto; width: 1px; height: 100%; background: #333; box-shadow:4px 0px 0px #333}

.group{position: relative;  padding: 7.5rem 0px 0rem; background:url(/img/main/group_bg.png) no-repeat left center / 80% 100%, linear-gradient(180deg, #012017 0%, #112823 100%)}
.group h3{color: #fff; font-weight: normal;}
.group .wrapper{position: relative;}
.group .wrapper:After{display: block; content: ''; clear: both;}
.group .wrapper>ul{float:left; width: 48%; }
.group .list{margin-top: 2rem; margin-left: 3.5%;}
.group .list *{color: #fff; font-weight: 300;}
.group .list li+li{border-top:1px dashed rgba(255,255,255,.1)}
.group .list a{display: block; padding: 1rem 0px; font-size: 1.7rem; white-space:nowrap; text-overflow: ellipsis; overflow: hidden;}
.group .list a .date{display: inline-block; margin-right: 2rem}
.group .list a .date span{display: inline-block; text-align: center;  font-size: 1.4em; ; width: 6.4rem;}
.group ul.sports{float:right; display: flex; gap:5px 1%; flex-wrap:wrap; position: relative; bottom:-.3rem; max-width: 610px; background: #fff; padding: 4rem; box-shadow:0px 2px 8px rgba(0,0,0,0.5)}
.group .sports>li{flex:1 1 24%; text-align: center; background: #f0f0f0}
.group .sports>li a{display: block; font-size: 1.6rem; padding: min(1.8vw,1.8rem) 5px; transition:all ease .2s; text-decoration: none;}
/* 종목개수 15개(5줄)일때
.group ul.sports{max-width: 595px}
.group .sports>li{flex:1 1 24%; }
.group .sports>li a{padding: 1.2rem 5px}*/
.group .sports>li a:hover{background:var(--color_sub01); color: #fff; font-weight: 300;}
.group .more{position: absolute; right: 0px;}

.photo{position: relative; margin: 10rem 0px; overflow:hidden}
.photo .more3{margin-top: 2.5rem; }
.photo:before{content: 'PHOTO GALLERY'; position: absolute; left: 56.5%; font-size: 6.5rem; opacity: .06; font-weight: bold; letter-spacing: -.5rem; white-space: nowrap;}
.photo>.title{float:left}
.photo>.list{float:right; width: 81.24%; overflow:hidden}
.photo>.list ul{display: flex; gap:1.5%; align-items: flex-end;  position: relative; height:350px}
.photo>.list ul>li{flex:0 0 25.5%; /* transition:flex ease .2s */}
.photo>.list ul>li a{position: relative; }
.photo>.list ul>li .img{height: 210px; transition:all ease .2s}
.photo>.list ul>li .img img{width: 100%; height: 100%; object-fit:cover}
.photo>.list ul>li .tit{padding: 1.2rem 0px .5rem; transition:all ease .2s}
.photo>.list ul>li:not(:first-child){max-width: 28.5rem}
.photo>.list ul>li:not(:first-child) .tit{white-space: nowrap; text-overflow:ellipsis; overflow: hidden;}

.photo_control{display: flex; gap:5px; position: absolute; left: 0px; bottom: 0px;}
.photo_control>li{position: relative; cursor: pointer;}
.photo_control>li:before{display: block; content: ''; position: absolute; top: 0px; width: 3.8rem; height: 3.8rem; background: #f5f5f5; border-radius:60px}
.photo_control>li.next:before{right: 0px;}
.photo_control>li.stop:before{display: none;}
.photo_control>li a{display: block; width: 4.5rem; height: 3.8rem; font-size: 0px;}
.photo_control>li:not(.stop) a:before,
.photo_control>li:not(.stop) a:after{display: block; content: ''; position: absolute; top: 50%}
.photo_control>li:not(.stop) a:before{width: 49%; height: 1px; background: #333;}
.photo_control>li:not(.stop) a:after{width:1rem; height: 1rem; border:1px solid #333; margin-top:-.5rem; border-width:1px 1px 0px 0px}
.photo_control>li.prev a:before{right: 0px}
.photo_control>li.next a:before{left: 0px}
.photo_control>li.prev a:after{left: 50%; transform:rotate(-135deg)}
.photo_control>li.next a:after{right: 50%; transform:rotate(45deg)}
.photo_control>li.stop a:before{display: block; content: ''; position: relative; top: 30%; margin: auto; width: 1px; height: 40%; background: #333; box-shadow:5px 0px 0px #333}

.layerPop{display: flex; flex-wrap: wrap; position: absolute; max-width: 1020px; width: 90%; margin: auto; right: 0px; left: 0px; top: 6rem; z-index: 1; border:.4rem solid var(--color_sub02); background: #fff; box-shadow:0px 1px 10px rgba(0,0,0,.5); z-index: 901;}
.layerPop:has(.layerPop_con:first-child:last-child){max-width: 460px;}
.layerPop>.layerPop_con{flex:1 0 33%; padding: 4.5rem 4rem 4rem; border-top:1px dotted #ddd; border-left:1px dotted #ddd}
.layerPop .bk_bg{padding: 1px 2px; background: #333; color: #fff;}
.layerPop .rd_bg{padding: 2px .8rem 1px; background: var(--color); color: #fff;}
.layerPop .underline{color:#000}
.layerPop .q{color: var(--color_sub01)}
.layerPop .pop_tit{margin-bottom: 2rem; font-size: 2.3rem; color: var(--color_sub01); font-weight: bold; line-height: 130%; letter-spacing: -.1rem;}
.layerPop .pop_btn{padding: .7rem 3rem .5rem; background: var(--color_sub02); color: #fff; text-shadow: 0px 0px 2px #000;}
.layerPop .pop_btnBox{display: flex; flex-direction: row; flex-wrap: wrap; gap:.5rem}
.layerPop .pop_btnBox a{font-size: 1.4rem; color: var(--color_sub01);}
.layerPop .pop_btnBox a:after{content: ' >'; margin-left: 1px; font: doum 10px}
.layerPop .pop_close{position: absolute; right: -.4rem; top: -.4rem; z-index: 1;}
.layerPop .pop_close a{display: block; padding: max(.5vw, .5rem) 2rem max(.4vw, .5rem) ; background: var(--color_sub02); color: #fff; font-size: .9em;}
.layerPop .pop_bl>li{position: relative; padding-left: 1.5rem; font-size: 1.4rem;}
.layerPop .pop_bl>li+li{margin-top: .3rem;}
.layerPop .pop_bl>li:before{content: '-'; position: absolute; top: 0rem; left: 0px;}
.layerPop .pop_refer>li{position: relative; padding-left: 1.5rem; font-size: 1.4rem;}
.layerPop .pop_refer>li+li{margin-top: .3rem;}
.layerPop .pop_refer>li:before{content: '※'; position: absolute; top: 0rem; left: 0px;}



/***************************************************************************************************************************/


@media all and (min-width:800px){
	.dp_mb{display: none;}
	.photo>.list ul>li:first-child{flex-basis:43.71%; margin-right: 1%;}
	.photo>.list ul>li:first-child .img{height:350px}
	.photo>.list ul>li:first-child .tit{position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 2rem 8%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 21.5%, rgba(0, 0, 0, 0.00) 100%); color: #fff; font-size: 1.9rem; font-weight: 300;}
}

@media screen and (max-width:1280px){
	.news{float:none; width: 100%}
	.pzone{float:none; margin-top: 7rem; width: 100%}
	.pzone_list>ul{height:auto}
	.pzone_list>ul>li{width: 40%; margin-right: 1rem; max-width: 400px;}
	.photo:before{left: 45%;}
	.photo>.title{float:none}
	.photo>.list{float:none; width: 100%;}
}

@media screen and (max-width:800px){
	.dp_pc{display: none;}
	.visual{width:95%; height:60vw; max-height:unset; min-height:unset; margin-left: 5%; margin-right: 0px;}
	.visual:before{top: -1.8rem; height: 44%; /* background: #FC4571 */; border-width: .6rem;}
	.visual:after{display: none;}
	.visual_control{gap:0px; right: -1px; bottom: -5px; transform:scale(.6); transform-origin:right bottom}
	.visual_control li a{background: rgba(221,34,34,.8);}
	.visual_control li a:before{border-color: #fff;}
	.banr{justify-content: space-between}
	.banr>li{flex:0 0 20%}
	.banr>li a{--bgSize:4rem; font-size: min(3.1vw, 1.4rem)}
	.banr>li a:After{display: none;}
	.banr>li:nth-child(6), .banr>li:nth-child(7){flex:0 0 49%; margin-top: 3rem;}
	.banr>li:nth-child(6) a, .banr>li:nth-child(7) a{display: flex; align-items: center; justify-content: center; padding: 5px 0px; border:1px solid #ddd; font-size: 1.4rem; top: 30%;}
	.banr>li:nth-child(6) a:before, .banr>li:nth-child(7) a:before{margin:0px 10px }
	h3{font-size:2.5rem !important}
	.bgGrey{background: linear-gradient(180deg, #F5F5F5 52%, rgba(245, 245, 245, 0.00) 100%); top: 30rem;}
	.bgGrey .more{top: .5rem;}
	.news>h3, .news ul.tab{float: none;}
	.news>h3{display: none;}
	.news ul.tab{margin-bottom: 2.5rem; gap:0px}
	.news div[id] ul{flex-direction: column; }
	.news div[id] ul li{border-bottom: 1px dashed #ddd}
	.news div[id] ul li a{padding: 12px 10px 18px; background: none;}
	.news div[id] ul li a .tit{margin-top: 5px; font-size: 1.65rem; -webkit-line-clamp: 1;}
	.news div[id] ul li a .date{font-size: 1.3rem;}
	.news .activity ul{gap:10px; flex-direction:column}
	.news .activity ul>li  a{display: flex; gap:15px}
	.news .activity ul>li .tit {height: 5rem;  overflow: hidden;  display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis;}
	.news .activity ul>li .img{flex:0 0 150px; height: 70px}
	.pzone_list>ul>li{width: 75%; max-width: 250px;}
	.group{background-position:center; background-size:cover}
	.group h3{font-weight: bold;}
	.group .wrapper>ul{float:none; width: auto; }
	.group .list a{font-size: 1.55rem; letter-spacing: .05rem;}
	.group ul.sports{margin-top: 3rem;}
	.group .sports>li a{font-size: 1.4rem;}
	.photo h3{margin-bottom: 2.5rem;}
	.photo>.list ul{height: auto; gap:16px}
	.photo>.list ul>li{flex: 0 0 60%; max-width: 28rem !important}
	.photo>.list ul>li .tit{white-space: nowrap; text-overflow:ellipsis; overflow: hidden; padding-right: 1rem;}
	.photo>.list ul>li .img{height: 180px;}
	.photo_control{position: relative; margin-top: 2rem; justify-content: center}
	.more3{position: absolute; right: 0px; top: -2rem}
	.more3 a{display: block; position: relative; width: 1.9rem; height: 1.9rem; font-size: 0px;}
	.more3 a:before,
	.more3 a:after{display: block; content: ''; position: absolute; left: 0px; top: 50%; width: 100%; height: 1px; background: #666;}
	.more3 a:after{transform:rotate(90deg); }
	.layerPop>.layerPop_con{flex-basis:100%; padding: 3rem; 4rem}
	.layerPop .pop_close{ right: 0rem; top: 0rem}
}