@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2022-04-22
******************************************************** */

@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
/* ========================================================
 * SETTING
======================================================== */
:root{
	/* --main-color: #f7941e; */
	--main-color: #f3a43e;
	--main-color-red: #dd4915;
	--area-box-width: 1480px;
	--area-width: 1350px;
	--area-padding: 30px;
	--area-margin-left: 104px;
	--header-height: 90px;
	--transition-custom: all 0.3s ease-in-out;
}
body:not(.is-mobile) *::-webkit-scrollbar {
	width: 5px;
	height: 15px;
}
body:not(.is-mobile) *::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
body:not(.is-mobile) *::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
}
::selection {
    background: var(--main-color);   
    color: #fff;
}
::-moz-selection {
    background: var(--main-color);    
    color: #fff;
}

/* ****************** SETTING ********************** */
*::-webkit-scrollbar{width: 5px;}
*::-webkit-scrollbar-thumb{background-color:var(--main-color); border-radius:0px; transition:all 0.5s;}
*::-webkit-scrollbar-track{background-color:#f2f2f2; background:rgba(255,255,255,0.5); border-radius:0;}

/* ****************** LAYOUT ********************** */
body, table, th, td, button, select, input, textarea {
	font-family: 'Poppins', 'SCoreDream', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
	word-break:keep-all;
}
html{font-size: 10px;}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative;}
.area{ max-width:var(--area-width); margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box{ max-width:var(--area-box-width); margin:0px auto; }
.font-play,
.font-only-score{font-family: 'SCoreDream', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}

#mainContainer, #container {margin-left: var(--area-margin-left);}
#mainContainer, .sub-wrap{background:  url("../images/common/main_bg.png") center top no-repeat;}

/* ****************** HEADER ********************** */
#header{position:absolute; height:var(--header-height); top:0; left:0; width:100%; z-index:9999; border-bottom: 1px solid #e1e1e1; transition: var(--transition-custom);}
#headerInnerWrap{padding-left: var(--area-margin-left); position:absolute; top:0px; left:0px; width:100%; height:var(--header-height); z-index:9999; box-sizing: border-box; background-color: transparent; transition: background-color 0.3s;}
#headerInner{position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); margin:0px auto; box-sizing: border-box;}
#header .logo{position:relative; left: -77px; z-index:100; display: block;}
#header .logo a{display:block;}
#header .logo img{display:block; vertical-align:top;}


/* -------- Header :: UTIL BOX -------- */
.header-util-box{position: absolute; top: 50%; margin-top: -20px; right: 0; z-index:100;}
/* 로그인,회원가입 */
.header-member-list{display: flex; border: 1px solid #e4e4e4;}
.header-member-list li{}
.header-member-list li + li{border-left: 1px solid #e4e4e4;}
.header-member-list li a{padding-top: 3px; width: 100px; height: 40px; font-size: 13.5px; letter-spacing: -0.025em; color: #000; background-color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: var(--transition-custom)}
.header-member-list li a:hover{background-color: #000; color: #fff;}


/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; opacity:0; background:rgba(0,0,0,0.5); z-index:9997;  transition:var(--transition-custom); }	/* gnb overlay BG */
.gnb-overlay-bg.open{visibility:visible; opacity:1.0;}
#gnb{position:absolute; top:0; left:0px; width:100%; z-index:99; padding-left: var(--area-margin-left); box-sizing: border-box;}
#gnb > ul{width: 100%; padding-left: 185px; box-sizing: border-box;}
#gnb > ul > li{display: inline-block; position:relative; word-break:keep-all;}
#gnb > ul > li > a{
	position:relative; z-index:100; display:block; line-height:var(--header-height); padding:0 25px; text-align:center; color:#333; font-size:18px; letter-spacing:-0.055em; font-weight:500; transition:var(--transition-custom);
}
#gnb > ul > li > a:hover,
#gnb > ul > li > a:focus,
#gnb > ul > li.on > a{color:var(--main-color-red);}

/* GNB :: 2차 각각메뉴 */
#gnb.each-menu > ul > li .gnb-2dep{
	/* display:none; */
	position:absolute; 
	top:calc(var(--header-height) - 20px); 
	left:50%; margin-left: -100px; 
	z-index:99;
	width:200px; 
	text-align:left; 
	visibility:hidden;
	opacity:0;filter:Alpha(opacity=0);
	transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);
}
#gnb.each-menu > ul > li .gnb-2dep:before{
	content:""; 
	position:absolute; top:0px; left:0px; right:0px; 
	height:0; 
	background-color:var(--main-color-red); 
	transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);
}
#gnb.each-menu > ul > li .gnb-2dep ul{padding:15px 0px;}
#gnb.each-menu > ul > li .gnb-2dep ul li{position:relative; padding:8px 10px; opacity:0; transition:all 0s 0s; }
#gnb.each-menu > ul > li .gnb-2dep ul li a{display:block; color:#fff; font-size:14px; font-weight:400; text-align:center; line-height:1.4; opacity:0.9;}
#gnb.each-menu > ul > li .gnb-2dep ul li a:hover{opacity:1.0;}
/* over했을때 */
#gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;}
#gnb.each-menu > ul > li .gnb-2dep.open:before{height:100%;}
#gnb > ul > li .gnb-2dep.open ul li{opacity:1.0; transition:var(--transition-custom);}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(1){transition-delay:0.1s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(2){transition-delay:0.2s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(3){transition-delay:0.3s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(4){transition-delay:0.4s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(5){transition-delay:0.5s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(6){transition-delay:0.6s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(7){transition-delay:0.7s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(8){transition-delay:0.8s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(9){transition-delay:0.9s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(10){transition-delay:1s;}


/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}


/* -------- Header :: 개별리그 퀵메뉴 -------- */
.cm-quick-menu{position: fixed; top: 0; left: 0; bottom: 0; width: 104px; display: block; background-color: #fff; border: 1px solid #ececec; box-sizing: border-box; z-index: 9999; /* opacity: 0;  */box-shadow: 1.7rem 0 13.1rem -0.8rem rgba(0,0,0,0.05); /* transition: left ease-out 1.1s 0.3s, opacity ease-out 0.5s 0.3s, top ease-out 0.3s 0s; */}

/* Header :: 사이트맵버튼 */
.sitemap-line-btn{width: 102px; height: var(--header-height); display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f3a43e;}
.sitemap-line-btn i {font-size: 40px; color: #fff; transform: rotate(90deg);}
/* Header :: 본사이동버튼 */
.site-move-btn{position: absolute; bottom: 120px; left: -65px; width: 230px; text-align: right; transform: rotate(90deg);}
.site-move-btn a{display: flex; align-items: center; font-size: 18px; font-weight: 500; letter-spacing: -0.75px; color: #4d2d0e; white-space: nowrap;}
.site-move-btn a span{margin-left: 15px; width: 56px; height: 56px; border-radius: 100%; background-color: #4d2d0e; display: flex; align-items: center; justify-content: center;}
.site-move-btn a span i{position: relative; top: 1px; left: -1px; color: #fff; transform: rotate(-90deg); transition: 0.3s;}
.site-move-btn a:hover span i{top: 5px;}

/* ******************  처음들어왔을 때 효과 ********************** */
/* .active-page #gnb{left: 80px; opacity:1} */
.active-page .cm-quick-menu{left:0; opacity:1}


/* ****************** FOOTER ********************** */
/* -------- FOOTER :: 레이아웃 -------- */
#footer{padding: 60px 0 110px; background-color: #f0f0f0;}
.sub-wrap #footer{padding: 60px 0 75px;}
#footerInner{padding-left: var(--area-margin-left); box-sizing: border-box;}
#footerInner .area-box{position:relative;}
.footer-left-con{display: flex;}
.footer-right-con{position: absolute; top: 5%; /* top: 50%; */ right: 0;}

/* -------- FOOTER :: 상단 -------- */
/* Footer :: TOP버튼 */
.to-top-btn{
	position:fixed; bottom:-100px; right:15px; display:block; width:46px; height:46px; background-color: #000; text-align:center; color:#fff; z-index:99;
	border:1px solid rgba(255,255,255,0.3);
	box-sizing:border-box;
	opacity:0;filter:Alpha(opacity=0); transition:all 0.6s; border-radius:50%;
}
.to-top-btn.bottom-fixed{bottom:15px; opacity:1.0;filter:Alpha(opacity=100);}
.to-top-btn i{display:inline-block; font-size:16px; line-height:46px; transition:all 0.3s}
.to-top-btn:hover i{transform:translateY(-3px)}

/* Footer :: 푸터로고 */
.foot-logo{width: 190px; display:block;}
.foot-logo img{position: relative; left: -35px;}

.foot-info-group{padding-top: 10px; width: calc(100% - 190px);}
/* Footer :: 푸터메뉴 */
.foot-menu{padding-bottom:40px; text-align: center; display: inline-block;}
.foot-menu li{display: inline-block; position:relative; padding-left: 30px; line-height:30px;}
.foot-menu li:first-child{padding-left: 0;}
.foot-menu li a{color:#000; font-size:16px; letter-spacing: -0.065em; font-weight: 400;}
.foot-menu li a b{color:#000; font-weight:400;}
.foot-menu li .m-br{display: none;}

/* Footer :: 왼쪽정보 style02 */
.footer-address-info-box{margin-bottom: 20px;}
.footer-address-list dl{margin-right:40px; display:inline-block; vertical-align:middle; color:#000; font-size:14px; line-height:1.3; font-weight: 300; letter-spacing: -0.06em;}
.footer-address-list dl dt,
.footer-address-list dl dd{vertical-align:middle; display:inline-block; padding-right: 15px; line-height: 2em;}
.footer-address-list dl dt{color: rgba(0,0,0,0.5); font-weight: 400;}
#dl-col-1 {margin-right: 52px; display:inline-block; vertical-align:middle; color:#000; font-size:14px; line-height:1.3; font-weight: 300; letter-spacing: -0.06em;}
#dl-col-2 {margin-right: 100px; display:inline-block; vertical-align:middle; color:#000; font-size:14px; line-height:1.3; font-weight: 300; letter-spacing: -0.06em;}
/* Footer :: Copyright */
.footer-copyright{font-size:13px; line-height: 1.3; font-weight: 400; color: rgba(0,0,0,0.6);}

/* Footer :: 오른쪽정보 :: 파트너사 리스트 */
.foot-partner-logo{display: inline-block;}
.foot-partner-logo + .foot-partner-logo{margin-left: 20px;}
.foot-partner-logo img{height: 24px;}


/* ****************** SUB LAYOUT ********************** */
.sub-wrap{padding-top: 180px;}
/*  SUB LAYOUT :: 비주얼 */
#visual{position:relative; overflow:hidden; width:100%; height:407px;}
#visual .visual-img-con{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	z-index: 1;
   opacity:0;filter:Alpha(opacity=0);
    -webkit-transform: translateX(30px); 
     transform: translateX(30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#visual .visual-txt-con{position:relative; display:table; width:100%; height:100%; letter-spacing:-0.5px; color:#232323;}
#visual .table-cell-layout{padding-bottom: 100px; -webkit-box-sizing: border-box; box-sizing: border-box;}
#visual .visual-txt-con:before{position:absolute; bottom: 90px; left: 0; display: block; content: ''; width: 100%; height: 1px; background-color: #ebebeb;}
#visual .visual-txt-container{position:relative; width:100%;}
#visual .en-tit,
#visual .visual-tit,
#visual .visual-sub-txt{
	opacity:0;filter:Alpha(opacity=0);
    -webkit-transform: translateY(30px); 
     transform: translateY(30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
	position: relative; z-index: 1;
}
#visual .en-tit{
	font-size:18px; font-weight:600; letter-spacing: 3px;
	color: var(--main-color);
}
#visual .visual-tit{
	padding-top:30px; font-size:80px; line-height: 1.1; font-weight:600; letter-spacing: -0.5px;
	-webkit-transition-delay:0.2s;
	transition-delay:0.2s;
}
#visual .visual-sub-txt{
	padding-top: 20px; font-size: 20px; font-weight: 500; letter-spacing: -0.6px; 
	-webkit-transition-delay:0.4s;
	transition-delay:0.4s;
}

/* SUB LAYOUT :: 상단효과 active */
#visual.active .visual-img-con{
    opacity:1.0;filter:Alpha(opacity=100);
    -webkit-transform: translateX(0px); 
    transform: translateX(0px);
}
#visual.active .en-tit,
#visual.active .visual-tit,
#visual.active .visual-sub-txt{
	opacity:1.0;filter:Alpha(opacity=100);
    -webkit-transform: translateY(0px); 
    transform: translateY(0px);
}

/* SUB LAYOUT :: 서브메뉴(스타일2) */
#topMenu02{float: left; position:relative; width:230px;}
#topMenu02 .side-menu-inner{width:100%;}
#topMenu02 .side-menu-inner ul{}
#topMenu02 .side-menu-inner ul li{
	float:left;
	width: 100%; 
	border-top: 1px dashed rgba(255,255,255,0.2);
	background-color: #000;
	-webkit-transition:all 0.3s; 
	transition:all 0.3s;
}
#topMenu02 .side-menu-inner ul li:first-child {border-top: 0;}
#topMenu02 .side-menu-inner ul li > a{
	display:flex; align-items:center;
	position:relative; padding: 7px 40px 0 20px;
	width:100%; height:60px; 
	font-size:18px; letter-spacing:-0.5px; font-weight:400;  line-height:1.2; color:#cecece; 
	word-break:keep-all; -webkit-box-sizing: border-box; box-sizing: border-box;
	-webkit-transition:all 0.3s; 
	transition:all 0.3s;
}
#topMenu02 .side-menu-inner ul li > a:before{
	position:absolute;
	top: 50%; margin-top: -10px; right: 20px; font-weight: 400;
	font-size: 16px; content: "\e93f"; font-family:xeicon !important;
	opacity: 0;
	-webkit-transition:all 0.3s; 
	transition:all 0.3s;
}
#topMenu02 .side-menu-inner ul li.on{background-color: var(--main-color);}
#topMenu02 .side-menu-inner ul li > a:hover:before, 
#topMenu02 .side-menu-inner ul li.on > a:before{opacity: 1;}
#topMenu02 .side-menu-inner ul li:hover > a, 
#topMenu02 .side-menu-inner ul li.on > a{color:#fff; font-weight: 600;}

/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */
@media all and (min-width:1221px){
	.fixed-sub-menu.fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;}
}

#topMenuM02{display: none;}

/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#middleArea{position: relative;}
#content{float: right; width: calc(100% - 250px); max-width: 1020px; min-height: 400px; padding-bottom: 140px;}
#middleArea.snb-none #content{float: none; margin: 0 auto;}
#middleArea.snb-none #topMenu02,
#middleArea.snb-none #topMenuM02{display: none;}

/*  SUB LAYOUT :: 상단정보 (공통) */
#contentInfoCon{position: relative; margin-bottom: 30px;}
#contentInfoCon .content-tit{color:#232323; font-size:42px; font-weight:600; letter-spacing: -0.5px;}
.cont_default {position:relative; width:100%;}


/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; background-color:#fff; }
.footer-modal-content h1{height:60px; line-height:60px; font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0; background-color:var(--main-color); color:#fff;}
.modal-close-btn{position:absolute; top:11px; right:10px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }

/* 사이트맵 */
.sitemap-wrapper{padding:30px;}
.sitemap-wrapper > ul{display:table; width:100%; table-layout:fixed;}
.sitemap-wrapper > ul > li{display:table-cell; vertical-align:top; text-align:center;}
.sitemap-wrapper > ul > li > h2{color:#191919; margin:0 2% 20px 2%; padding:15px; font-size:18px; background-color:#f2f2f2;  letter-spacing:-1.0px; margin-bottom:20px; font-weight:500;}
.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5% 20px;}
.sitemap-wrapper > ul > li .sitemap-2dep a{display:block; padding:10px 0; color:#666; font-size:14px; font-weight:400; line-height:1.2em;}
.sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#000; }

/* 추가 css */
.result-page .cm-tab-con img{max-width: 100%; height: auto;}
#participationInfo .par-info{position: relative; padding: 44px 290px 44px 100px !important;}
#participationInfo .par-info .info-con > h3{padding: 0 !important; text-align: left;}
#participationInfo .par-info .info-con > span {text-align: left; padding-bottom: 0 !important;}
#participationInfo .par-info .info-con > span a {position: absolute; top: 40px; right: 0; margin: 0 150px 0 0;}