@charset "utf-8";

/* skip nav */
body.overflowH {overflow: hidden;}
.skip-nav { position:absolute; left:0; top:-50px; z-index:9999; }
.skip-nav li {width:200px;}
.skip-nav a { position:absolute; left:0; top:0; display:block; width:100%; height:50px; line-height:50px; color:#fff; background:#002960; text-align:center;}
.skip-nav a:focus { top:50px; }

.inner {max-width: 1360px; margin: 0 auto;}
.flex {display: flex;}
.flex.flow-column {flex-flow: column;}
#wrap{min-width:280px;}
#container {min-height: calc(100vh - 160px);}
.mo-only {display: none;}

.bo_w_select.write_div select {border: 1px solid #b5b5b5; border-radius: 3px; height: auto; font-size: 13px; padding: 8px 15px;}
.dev-list-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px;}

/* header */
#header{height:80px; position:fixed; left:0; top:0; right:0; z-index:90; transition:all 0.3s; box-sizing:border-box; background-color: rgba(0,0,0,.6);}

.header-inner {margin:0 auto; display:flex; box-sizing:border-box;}
.header-inner h1 {height:80px; position:absolute; left:60px; top:0;}
.header-inner h1 a {display:flex; width:150px; height:100%; background:url(../img/logo.png) center center / 50% auto no-repeat; text-align:left; text-indent:-9999px;}


#header.up{top:-80px; border-bottom:none !important;}

.header-util{position:absolute; right:50px; top:20px; display:flex; align-items: center; box-sizing:border-box;}
.header-util > a {display: inline-block; width: 40px; height: 40px;  background-repeat: no-repeat; background-position: right center; background-size: 70%;}
a.go-instagram {background-image: url(../img/go-instagram.png); }
a.go-youtube {background-image: url(../img/go-youtube.png); }
/* a.language-btn {background-image: url(../img/lang-btn.png); } */

.language-selector {
	position: relative;
	display: inline-block;
}

.language-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 12px;

	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	color: #f9f9f9;
	font-size: 14px;
}

.language-btn:hover {
	color: #fff;	
}

.language-btn.active {
	color: #fff;
}

.dropdown {
	position: absolute;
	top: 40px;
	left: auto;
	right: 0;
	background: white;
	border: 1px solid #e1e5e9;
	border-radius: 6px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s ease;
	z-index: 1000;
	margin-top: 4px;
}

.dropdown.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-size: 14px;
	color: #374151;
	border-bottom: 1px solid #f3f4f6;
}

.dropdown-item:last-child {
	border-bottom: none;
}

.dropdown-item:hover {
	background-color: #f8f9fa;
}

.dropdown-item.selected {
	background-color: #eff6ff;
	color: #2563eb;
}

.hidden {display: none;}




/* mobile */
.m-gnav{position:fixed; width:100vw; height:100vh; background-color:#111; z-index:90; display:none;}
.m-gnav h1{height:56px; width:126px; margin-left:20px;}
.m-gnav h1 a{display:block; height:56px; width:54px; background:url(../img/logo.png) center left / 60% auto no-repeat; text-align:left; text-indent:-9999px;}
.m-gnav-list{padding-top:20px;}
.m-gnav-list > li a {color: #fff;}
.m-gnav-list > li > a { display:flex; align-items: center; height:64px; padding:0 20px; font-size:20px; font-weight:600; color: rgba(255,255,255,.7); }
.m-gnav-list > li > a.active {color: #fff;}
.m-gnav-list > li > a.active span {position: relative;}
.m-gnav-list > li > a.active i {position: absolute; top: 5px; right: 0px; transform: rotate(-180deg); transition: all .3s;}
.m-gnav-list > li > a span.flex {width: 100%; justify-content: space-between; align-items: center;}
.m-gnav-list > li > a span.flex i {font-size: .6em; transition: all .3s;}
.gnb_2dli a {padding: 10px 26px; display: inline-block;}
.btn-menu-close{width:56px;height:56px; overflow:hidden;position:relative; position:absolute; right:0px;top:0px; color: #fff; font-size: 18px;}

.m-gnav.active{display:block;}

/* sub */
.sub-container{padding-top:80px;}


/* footer */
#footer{background-color:#000; padding:50px 0; box-sizing:border-box; color: #fff;}
.footer-inner{max-width:1360px; margin:0 auto; position:relative;}

.footer-contact {display: flex; align-items: center; gap: 20px; margin-top: 10px;}
.footer-contact .cera {font-size: 1.2em; letter-spacing: 2px;}

.footer-sns {position: absolute; top: 0; right:0;}
.footer-sns a {display: inline-block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: right center; background-size: 80%;}

/* sub ******************************************************************* */

/* lnav */
.sub-lnav{height:80px; position:sticky; top:80px; z-index:5; background-color:rgba(17,17,17,.08); transition:all 0.3s ease;}
.sub-lnav .lnav-inner{ height:80px; position:relative; overflow-X:auto; overflow-y:hidden; width:100%; box-sizing:border-box; }
.sub-lnav .lnav-list{max-width:1360px; margin:0 auto; display:flex; box-sizing:border-box; white-space:nowrap; justify-content: center;;}
.sub-lnav a{display:block; height:80px; line-height:80px; font-size:16px; position:relative; padding: 0 28px; color:#111; font-weight:500;}
.sub-lnav a:hover{text-decoration: underline;}
.sub-lnav a:after{display:block;content:'';height:6px; width: 6px; background-color:#111; position:absolute; top:50%;
	left:-3px; transform: translateY(-50%); border-radius: 50%;}
.sub-lnav li:first-child a:after {width: 0;}
.sub-lnav a .nav-home {display: inline-flex; align-items: center; justify-content: center;  padding: 5px; background-color: #000; color: #fff; border-radius: 50%; letter-spacing: 0; width: 20px; height: 20px;}

.sub-lnav .active a{font-weight:700; text-decoration: underline;}
.sub-lnav .lnav-inner.fixed{position:fixed; left:0; top:0; right:0;}

.sub-lnav.wh {background-color: rgba(255,255,255,.08);}
.sub-lnav.wh a {color: #fff;}
.sub-lnav.wh a .nav-home {color: #111; background-color: #fff;}
.sub-lnav.wh a:after {background-color: #fff;}

.sub-lnav.fixed:hover {background-color: #ececec;}
.sub-lnav.wh.fixed:hover {background-color: #171717;}

/*sub*/
.sub_title {text-align: center;}

.sub-section{padding:80px 0;}
.sub-section > .inner{max-width:1360px; margin:0 auto; }
.sub-section .sec-title{text-align:center; margin-bottom:80px;}
.sub-contents .sub-section:last-child{padding-bottom:160px;}

/*paging*/
.paging ul{display:flex; align-items: center; justify-content: center;}
.paging ul li {padding: 0 20px;  position: relative;}
.paging ul li:first-child:after {content:''; display: block; width: 1px; height: 30px; background-color: #111; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.paging ul li .paging-btn {display: flex; align-items: center; justify-content: center; border: 1px solid #111; border-radius: 50%; width: 60px; height: 60px;}
.paging ul li .disabled.paging-btn {opacity: .5; }

/*write : 단축키*/
.cke_sc {position: relative; text-align: right; margin-bottom: 2px;}
.btn_cke_sc {display: inline-block; font-size: 14px; padding: 5px 20px; border-radius: 1px; border: 1px solid #ccc; background: #f1f1f1;}
.cke_sc_def {position: absolute; top: 30px; right: 0; background: #fff; width: 260px; border: 1px solid #ccc; box-sizing: border-box; padding: 30px; text-align: left; z-index: 9;}
.cke_sc_def dl dt,
.cke_sc_def dl dd {width: 49%; display: inline-block; font-size: 14px; padding: 2px 5px; margin-bottom: 5px; box-sizing: border-box; font-weight: 600;}
.cke_sc_def dl dt {background: #f9f9f9; text-align: center; font-size: 13px;}
.btn_cke_sc_close {display: none;}

.write-info-wrap p {padding: 8px 10px; font-size: 13px; background-color: #f4f4f4; margin: 2px 0; font-weight: 600}
.write-info-wrap p i {vertical-align: middle;}

/*view : 동영상*/
.video-wrap {position: relative; height: 0; padding-bottom: 56.25%; width: 100%;}
.video-wrap iframe {width: 100%; height: 100%; position: absolute; top:0; left:0;}

.more_opt li button, .more_opt li a {font-size: 14px !important;}
.more_opt li i {line-height: normal !important;}


/*게시물 복사 팝업*/
#copymove {padding: 10px;}
#copymove h1 {font-size: 18px; padding: 20px 20px ;}
#copymove .win_btn {margin-top: 50px; text-align: center;}
#copymove .win_btn .btn_submit,
#copymove .win_btn .btn_close {padding: 10px 26px; border-radius:  5px; border: 1px solid #ccc; background-color: #fff; vertical-align: middle; font-size: 14px;}
#copymove .win_btn .btn_submit {color: #fff; background-color: var(--color-blue1); border-color: var(--color-blue1);}

/* mobile ******************************************************************* */

@media all and (max-width:1799.99px){

	.header-inner{max-width:1360px; margin:0 auto; position:relative;}
	.header-inner h1{left:0;}
	.header-inner .header-util {right: 0;}

	#gnav .gnav-list{width:auto;}
}

@media all and (max-width:1360px){

	.header-inner{margin:0 80px;}
	
	.footer-inner{margin:0 80px;}
	.sub-section > .inner{margin:0 80px;}
	.sub-lnav .lnav-list{margin:0 80px;}

	.inner {width: calc(100% - 160px);}

}

@media all and (max-width:1240px){
	.header-inner{margin:0 20px;}
	.inner {width: calc(100% - 40px);}
}

@media all and (max-width:1099.99px){
	.footer-inner{margin:0 20px;}
	.sub-section > .inner{margin:0 20px;}
	.skip-nav { display:none; }
	

	#header{height:56px; border:none !important;}
	#header.up{top:-56px;}

	.header-inner{padding:0 20px;}
	.header-inner h1{height:56px; left: 50%; transform: translateX(-50%);}
	.header-inner h1 a{width: 100px;}

	.m-menu {display: block; position: absolute; top: 20px; left: 0;}
	.header-inner .header-util {top: 0; height: 56px;}
	.toggle-menu {height: 23px; width: 23px; position: relative;}
	.toggle-menu .menu-line,
	.toggle-menu:before, 
	.toggle-menu:after  {display: inline-block; width: 100%; height: 2px; position: absolute; transition: all 0.25s; -webkit-transition: all 0.25s; top: 8px; background-color: #fff;}
	.toggle-menu:before, 
	.toggle-menu:after {content:''; transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; }
	.toggle-menu:before {transform: translate3d(0, -8px, 0px); -webkit-transform: translate3d(0, -8px, 0px);}
	.toggle-menu:after {transform: translate3d(0, 8px, 0px); -webkit-transform: translate3d(0, 8px, 0px);}



	#gnav{display:none;}
	.btn-menu{display:block;}

	.sub-container{padding-top:56px;}
	.sub-lnav{height:56px; top:56px;}
	.sub-lnav .lnav-inner{height:56px; transition:none;}
	.sub-lnav .lnav-inner .lnav-list{ width:100%; height:56px; justify-content:flex-start;}
	.sub-lnav .lnav-list{margin:0; padding:0 20px;}
	.sub-lnav a{height:56px; line-height:56px; z-index:1; position:relative; font-size: 14px;}
	.sub-lnav li:first-child a {padding-left: 0;}
	.sub-lnav a:hover{color:var(--color-gray2);}
	.sub-lnav.fixed .lnav-inner:after{display:block;content:''; height:1px; background-color: var(--color-gray9); position:absolute;left:0;bottom:0;right:0;z-index:0;}

	#footer{padding:32px 0 48px;}


	.con-title{font-size:26px; line-height:1.3em;}
	.md-title{font-size:18px; line-height:1.3em;}
	.big-title{font-size:18px; line-height:1.3em;}
	.sub-txt{font-size:16px; line-height:1.5em;}

	.sub-section{padding:40px 0;}
	.sub-section .sec-title{margin-bottom:40px;}
	.sub-contents .sub-section:first-of-type{padding-top:60px;}
	.sub-contents .sub-section:first-child{padding-top:40px;}
	.sub-contents .sub-section:last-of-type{padding-bottom:60px;}

	.sub-contents .sub-lnav + .sub-section{padding-top:40px;}
	.sub-lnav li{margin-right:6px;}

	.btn-round{width:100%;}
	html[lang=ja] .btn-round{padding:0 12px 0 16px;}


}

@media all and (max-width:770px){
	.pc-only {display: none;}
	.mo-only {display: block;}
	.footer-content {text-align: center;}
	.footer-contact {justify-content: center; flex-flow: column; gap: 10px;}
	.footer-sns {position: unset; text-align: center; margin-top: 30px;}
	.footer-sns a {font-size: 24px;}
	.sub-lnav {display: none;}


}
@media all and (max-width: 430px) {
	.header-util a {width: 32px;}
}