@charset "UTF-8";


:root {

    /* size */
    --inner: 1800;

    --font-size-13 : clamp(12px, calc( 13 / var(--inner) * 100vw ), 13px);
    --font-size-14 : clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);
    --font-size-15 : clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px);
    --font-size-16 : clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);
    --font-size-17 : clamp(15px, calc( 17 / var(--inner) * 100vw ), 17px);
    --font-size-18 : clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);
    --font-size-20 : clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);
    --font-size-22 : clamp(17px, calc( 22 / var(--inner) * 100vw ), 22px);
    --font-size-24 : clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px);
    --font-size-28 : clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px);
    --font-size-30 : clamp(20px, calc( 30  / var(--inner) * 100vw ), 30px);
    --font-size-32 : clamp(20px, calc( 32  / var(--inner) * 100vw ), 32px);
    --font-size-34 : clamp(20px, calc( 34 / var(--inner) * 100vw ), 34px);
    --font-size-35 : clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px);
    --font-size-36 : clamp(22px, calc( 36 / var(--inner) * 100vw ), 36px);
    --font-size-38 : clamp(26px, calc( 38 / var(--inner) * 100vw ), 38px);
    --font-size-40 : clamp(24px, calc( 40 / var(--inner) * 100vw ), 40px);
    --font-size-46 : clamp(26px, calc( 46 / var(--inner) * 100vw ), 46px);
    --font-size-44 : clamp(26px, calc( 44 / var(--inner) * 100vw ), 44px);
    --font-size-48 : clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px);
    --font-size-50 : clamp(34px, calc( 50 / var(--inner) * 100vw ), 50px);
    --font-size-56 : clamp(26px, calc( 56 / var(--inner) * 100vw ), 56px);
    --font-size-60 : clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);
    --font-size-64 : clamp(30px, calc( 64 / var(--inner) * 100vw ), 64px);
    --font-size-70 : clamp(32px, calc( 70 / var(--inner) * 100vw ), 70px);
    --font-size-80 : clamp(32px, calc( 80 / var(--inner) * 100vw ), 80px);
    --font-size-90 : clamp(44px, calc( 90 / var(--inner) * 100vw ), 90px);
    --font-size-120 : clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px);
    --font-size-200 : clamp(60px, calc( 200 / var(--inner) * 100vw ), 200px);

    /* color */
	--primary-color: #e60013;
	--white-color: #ffffff;
    --dark-color:#000000;
    --gray-color-15:#151515;
    --gray-color-22:#222222;
    --gray-color-33:#333333;
    --gray-color-44:#444444;
    --gray-color-66:#666666;
    --gray-color-89:#898989;
    --gray-color-95:#959595;
    --border-color:#ebebeb;
}


h1,h2,h3,h4,h5,h6,strong,th,.bold{font-weight:700;}
table caption {overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-999em;}
img{border:0;max-width:100%;vertical-align:top;}

em {font-style:normal; display:block;}
.blind {position:absolute;overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;}
.semibold {font-weight:600;}
img[usemap] {border:none; height:auto; max-width:100%; width:auto;}

a{
	color:inherit;
	text-decoration:none;
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		 -o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
}
a:hover,
a:active{
	-webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		 -o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
}

::-webkit-input-placeholder {color:#999; font-weight:300;}
:-moz-placeholder {color:#999; font-weight:300;}
::-moz-placeholder {color:#999; font-weight:300;}
:-ms-input-placeholder {color:#999; font-weight:300;}
:placeholder-shown {color:#999; font-weight:300;}


.mgb55 {margin-bottom:55px !important;}

.f-s30 {font-size:30px; line-height:1.4em;}
.f-s60 {font-size:60px;}


.blue-color {color:#15D2CC;}


.input {height:55px; padding:4px 0;color:#1b1b1b; background:#fff; font-size:20px; line-height:1.5em; letter-spacing:-.025em; border:1px solid #dcdcdc;}
.input[readonly] {background-color:#eee; color:#878787;}
select {padding-right:40px; background:#fff url('../img/bbs/select.png') right 14px center no-repeat; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
select::-ms-expand {display:none;}
textarea.input {height:auto; padding:7px 14px; overflow:auto; resize:none;}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox  */
input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.video-container {position:relative; padding-bottom:56.25%; overflow:hidden;}
.video-container video,
.video-container iframe {position:absolute; top:0; left:0; width:100%; height:100%;}



/* header */
#header {position:fixed; top:0; left:0; width:100%; transition: all 0.3s ease-out; z-index:101;}
#header .inner {position:relative; max-width:1800px;}
.sitelogo {position:absolute; top:50%; left:20px; margin-top: -12.5px; z-index:2}
.sitelogo a {display:block; width:158px; height: 25px; background:url('../img/common/logo.png') 0 50% no-repeat; background-size:contain;} 

#gnb {position:relative;}
#gnb > ul {display:flex;  justify-content:center; }
#gnb > ul > li {padding:0 35px;}
#gnb > ul > li > a {display:block; color:var(--white-color); font-size:var(--font-size-18); line-height:109px; font-weight: 600;}
#gnb > ul > li > a:hover,
#gnb > ul > li.active > a {color:var(--primary-color) !important; font-weight: 700;}
#gnb > ul > li:nth-child(1) .submenu > ul > li {width:440px;}
/* #gnb > ul > li:nth-child(1) .submenu > ul > li:nth-child(2) {width:300px;} */
#gnb > ul > li:nth-child(5) {margin-right:10%;} 
#gnb > ul > li:nth-child(6),
#gnb > ul > li:nth-child(7) {position:absolute; top:50%; transform: translateY(-50%);}
#gnb > ul > li:nth-child(6) {right:234px;}
#gnb > ul > li:nth-child(7) {right:20px;}
#gnb > ul > li:nth-child(6) > a,
#gnb > ul > li:nth-child(7) > a {background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.60);font-size:var(--font-size-16); border-radius: 5px; line-height:44px; padding:0 20px; font-weight: 500 !important;}



#gnb .submenu {display:none; position:absolute; left:22.5%; /*left:26%;*/ top:110px; width:100%; transition:.2s;  z-index:50;}
#gnb .submenu > ul {position:relative;  display:flex;}
#gnb .submenu > ul > li { padding:30px 30px; width:280px;}
#gnb .submenu > ul > li:hover {background:#f8f8f8;}
#gnb .submenu > ul > li > a {position: relative; display:block; color:var(--dark-color); font-size:var(--font-size-18);line-height:1.4em; padding-bottom:20px; margin-bottom:20px; border-bottom: 1px solid #b7b7b7; font-weight: 700; }
#gnb .submenu > ul > li:hover > a {color:var(--primary-color) !important;}
#gnb .depth3 {display:none;}
#gnb .depth3 > ul {display:block;}
#gnb .depth3 > ul > li {margin-bottom:20px; position: relative;}
#gnb .depth3 > ul > li:last-child {margin-bottom:0;}
#gnb .depth3 > ul > li > a {display:block; color:var(--dark-color-33); font-size:var(--font-size-16); line-height:1.4em; font-weight: 600;}
#gnb .depth3 > ul > li > a:hover {color:var(--primary-color) !important;}
#gnb .depth3 > ul > li.in {position: relative; display:flex;}
#gnb .depth4 {display:none; margin-left:50px;}
#gnb .depth4 > ul > li {margin-bottom:10px;}
#gnb .depth4 > ul > li:last-child {margin-bottom:0;}
#gnb .depth4 > ul > li > a {display:block; color:var(--dark-color-33); font-size:var(--font-size-16); line-height:1.4em; opacity:.60;}
#gnb .depth4 > ul > li > a:hover {opacity:1;}


.submenu-bg {display:none; position: absolute; top:110px; left:0; width:100%; background:var(--white-color);  z-index:10;}


.lang {position:absolute; top:50%; right:50px; width:45px; transform: translateY(-50%);}
.lang .tit {display:block; position:relative; width:100%; height:25px; background:url('../img/common/ico_lang.png') 0 50% no-repeat; background-size:contain;}
.lang .tit:after {content:""; position:absolute; top:50%; right:0; transform:translateY(-75%) rotate(45deg); width:7px; height:7px; border-right:1px solid var(--white-color); border-bottom:1px solid var(--white-color);}
.lang ul {position:absolute; top:30px; left:50%; padding:4px; width:60px; transform: translateX(-50%); background:var(--white-color); border-radius: 4px; border:1px solid var(--border-color); transition: all 0.2s; z-index:-9999em; opacity:0;}
.lang ul li {margin-bottom:3px; text-align:center; padding-bottom:3px;border-bottom: 1px solid var(--border-color);}
.lang ul li:last-child {margin-bottom:0; border-bottom:0; padding-bottom:0;} 
.lang ul li a {display:bolck; font-size:14px; line-height:1.4em; font-weight: 500; color:var(--dark-color);}
.lang ul li a:hover {color:var(--primary-color);}
.lang.active .tit:after {transform:translateY(-50%) rotate(-135deg); }
.lang.active ul {opacity:1; z-index:10;}

#header.hover {background:var(--white-color); border-bottom: 1px solid var(--border-color);}
#header.hover #gnb > ul > li > a {color:var(--dark-color-22);}
#header.hover #gnb > ul > li:nth-child(6) > a,
#header.hover #gnb > ul > li:nth-child(7) > a  {background:none; border-color:#b7b7b7}
#header.hover .sitelogo a {background-image:url('../img/common/logo_on.png')}
#header.hover .lang .tit {background-image:url('../img/common/ico_lang_on.png');}
#header.hover .lang .tit:after {border-color:var(--dark-color);}




/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; margin-top:-12px; right:20px; width:30px; height:24px; text-align:center; z-index:50;}
.btn-m-menu span {position:absolute; left:0; right:0; top:50%; margin-top:-1px; width:100%; height:2px; background:var(--white-color);}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:0; right:0; height:2px; background:var(--white-color);}
.btn-m-menu span:before {top:-8px;}
.btn-m-menu span:after {bottom:-8px;}

.mobile-navigation {display:none; position:fixed; top:0; right:0; width:70%; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:1005;}
.mobile-navigation .head {padding-left:20px;}
.mobile-navigation .head a {display:flex; align-items:center; height:80px;}
.mobile-navigation .head img {height:20px}
.mobile-navigation .nav-menu {padding:0 20px;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dedede;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:15px 0; display:block; color:var(--secondary-color); font-size:20px; line-height:1.3em; font-weight: 700;}
.mobile-navigation .nav-menu>ul>li>a:after {content:""; position:absolute; top:50%; right:10px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid var(--dark-color); border-bottom:2px solid var(--dark-color); opacity:.80;}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--primary-color);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); opacity:1;}
.mobile-navigation .nav-menu>ul>li:nth-child(5)>a:after,
.mobile-navigation .nav-menu>ul>li:nth-child(6)>a:after,
.mobile-navigation .nav-menu>ul>li.active:nth-child(5)>a:after,
.mobile-navigation .nav-menu>ul>li.active:nth-child(6)>a:after {transform:translateY(-50%) rotate(-45deg);}
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:10px 0 20px; background:#f6f6f6}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; padding:10px 20px; color:var(--gray-color-44); font-size:18px; line-height:1.3em;}
.mobile-navigation .nav-menu .depth3 {padding:0 10px;}
.mobile-navigation .nav-menu .depth3 ul {background:#fff; padding:10px 20px;}
.mobile-navigation .nav-menu .depth3 ul>li>a{display:block;padding:5px 0; font-size:15px; color:var(--gray-color-44);}
.mobile-navigation .nav-menu .depth4 {padding:0;}
.mobile-navigation .nav-menu .depth4 ul {background:#fff; padding:10px 0;}
.mobile-navigation .nav-menu .depth4 ul>li>a{display:block; position: relative; padding:5px 0 5px 10px; font-size:14px;}
.mobile-navigation .nav-menu .depth4 ul>li>a:before {content:""; position:absolute; top:50%; margin-top:-1px; left:0; width:5px; height:2px; background:var(--gray-color-44);}
.mobile-navigation .close {position:absolute; top:26px; right:28px; width:24px; height:24px; opacity:1;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:50%; left:0; width:100%; height:2px; background:var(--dark-color);}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--dark-color); opacity:.6; z-index:1003}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}


html.header-fixed #header {background:var(--white-color); border-bottom: 1px solid var(--border-color);}
html.header-fixed #header #gnb > ul > li > a {color:var(--dark-color-22);}
html.header-fixed #header #gnb > ul > li:nth-child(6) > a,
html.header-fixed #header #gnb > ul > li:nth-child(7) > a  {background:none; border-color:#b7b7b7}
html.header-fixed #header .sitelogo a {background-image:url('../img/common/logo_on.png')}
html.header-fixed #header .lang .tit {background-image:url('../img/common/ico_lang_on.png');}
html.header-fixed #header .lang .tit:after {border-color:var(--dark-color);}
html.header-fixed .btn-m-menu span,
html.header-fixed .btn-m-menu span:before,
html.header-fixed .btn-m-menu span:after {background:var(--dark-color)}



/* footer */
#footer {padding:5rem 0; font-size:var(--font-size-16); background:url('../img/common/footer_bg.jpg') 50% 50% no-repeat; background-size:cover; line-height:1.4em; color:var(--white-color); letter-spacing: 0;}
#footer .bar {padding:0 5px;}

.foot-head {font-size:var(--font-size-60); line-height:1.4em; font-weight: 800; margin-bottom:10px;}
.foot-robot {padding-bottom:50px;}

.foot-menu {margin-bottom:60px;}
.foot-menu ul {display:flex; flex-wrap:wrap; position:relative;}
.foot-menu ul li {width:16.666%; }
.foot-menu ul li:nth-child(7) {position: absolute; top:40px; right:0;}
.foot-menu ul li a {display:block; font-size:var(--font-size-18); line-height:1.4em; font-weight: 600; margin-bottom:26px;}
.foot-menu ul li:nth-child(3) .submenu ul > li > a,
.foot-menu ul li:nth-child(4) .submenu ul > li > a {font-weight: 400;}
.foot-menu .submenu ul {display:block;}
.foot-menu .submenu ul > li {width:100%; margin-bottom:5px; letter-spacing: 0;}
.foot-menu .submenu ul > li:last-child {margin-bottom:0;}
.foot-menu .submenu ul > li > a {display:block; opacity:.80; font-weight: 600; font-size:var(--font-size-16); line-height:1.4em; margin-bottom:10px;}
.foot-menu .submenu ul > li:nth-child(6) {position: static;}
.foot-menu .depth3 ul {display:block; margin:0 0 26px;}
.foot-menu .depth3 ul > li {width:100%; margin-bottom:5px;}
.foot-menu .depth3 ul > li > a {display:block; position: relative; opacity:.80; font-weight: 400; font-size:var(--font-size-16); line-height:1.4em; margin-bottom:0; /*padding-left:10px;*/}
/* .foot-menu .depth3 ul > li > a:before {content:""; position: absolute; top:50%; left:0; transform: translateY(-50%); width:5px; height: 2px; opacity:.60; background:var(--white-color);} */
/* .foot-menu .depth4 {display:none;} */

.foot-row {border-top: 1px solid rgba(255,255,255,.20); padding-top:60px; display:flex; }

.foot-logo {margin-right: 65px;}
.foot-info {flex:1 1 auto; min-width:0; width:1%; position: relative;}
.foot-info .addr {margin-bottom:25px;}
.foot-info .addr p {margin-bottom:5px; opacity:.80;}
.foot-info .addr p:last-child {margin-bottom:0;}
.foot-info .copy {font-size:var(--font-size-14);}

.foot-policy-menu {position:absolute; top:0; right:0;}
.foot-policy-menu ul li {margin-bottom:10px; text-align:right;}
.foot-policy-menu ul li:last-child {margin-bottom:0;}
.foot-policy-menu ul li a {display:block; font-size:var(--font-size-15); line-height:1.4em; font-weight: 500; color:var(--white-color); opacity:.80;}
.foot-policy-menu ul li a:hover {opacity:1;}

.top-btn {display:none !important}




.fb-100 { font-weight: 100; }
.fb-200 { font-weight: 200; }
.fb-300 { font-weight: 300; }
.fb-400 { font-weight: 400; }
.fb-500 { font-weight: 500; }
.fb-600 { font-weight: 600; }
.fb-700 { font-weight: 700; }
.fb-800 { font-weight: 800; }


/* margin-top */
.mt-10px { margin-top : 10px; }
.mt-20px { margin-top : 20px; }
.mt-30px { margin-top : 30px; }
.mt-40px { margin-top : 40px; }
.mt-50px { margin-top : 3.125rem; }  /* 50px */
.mt-60px { margin-top : 3.75rem; }   /* 60px */
.mt-70px { margin-top : 4.375rem; }  /* 70px */
.mt-80px { margin-top : 5rem; }      /* 80px */
.mt-90px { margin-top : 5.625rem; }  /* 90px */
.mt-100px { margin-top : 6.25rem; }  /* 100px */

/* margin-bottom */
.mb-10px { margin-bottom : 10px; }
.mb-20px { margin-bottom : 20px; }
.mb-30px { margin-bottom : 30px; }
.mb-40px { margin-bottom : 40px; }
.mb-50px { margin-bottom : 3.125rem; }  /* 50px */
.mb-60px { margin-bottom : 3.75rem; }   /* 60px */
.mb-70px { margin-bottom : 4.375rem; }  /* 70px */
.mb-80px { margin-bottom : 5rem; }      /* 80px */
.mb-90px { margin-bottom : 5.625rem; }  /* 90px */
.mb-100px { margin-bottom : 6.25rem; }  /* 100px */

.pt-none { padding-top: 0 !important;}
.pb-none { padding-bottom: 0 !important;}

.fs-13px { font-size: var(--font-size-13); }
.fs-14px { font-size: var(--font-size-14); }
.fs-15px { font-size: var(--font-size-15); }
.fs-16px { font-size: var(--font-size-16); }
.fs-17px { font-size: var(--font-size-17); }
.fs-18px { font-size: var(--font-size-18); }
.fs-20px { font-size: var(--font-size-20); }
.fs-22px { font-size: var(--font-size-22); }
.fs-24px { font-size: var(--font-size-24); }
.fs-28px { font-size: var(--font-size-28); }
.fs-30px { font-size: var(--font-size-30); }
.fs-32px { font-size: var(--font-size-32); }
.fs-34px { font-size: var(--font-size-34); }
.fs-35px { font-size: var(--font-size-35); }
.fs-36px { font-size: var(--font-size-36); }
.fs-38px { font-size: var(--font-size-38); }
.fs-40px { font-size: var(--font-size-40); }
.fs-46px { font-size: var(--font-size-46); }
.fs-44px { font-size: var(--font-size-44); }
.fs-48px { font-size: var(--font-size-48); }
.fs-50px { font-size: var(--font-size-50); }
.fs-56px { font-size: var(--font-size-56); }
.fs-60px { font-size: var(--font-size-60); }
.fs-64px { font-size: var(--font-size-64); }
.fs-70px { font-size: var(--font-size-70); }
.fs-80px { font-size: var(--font-size-80); }
.fs-90px { font-size: var(--font-size-90); }
.fs-120px { font-size: var(--font-size-120); }
.fs-200px { font-size: var(--font-size-200); }

.lh-1 { line-height: 1;}
.lh-12 { line-height: 1.2;}
.lh-13 { line-height: 1.3;}
.lh-14 { line-height: 1.4;}
.lh-15 { line-height: 1.5;}
.lh-16 { line-height: 1.6;}

#downloadPopup .modal-dialog { 
	max-width: 1024px;
	border-radius : 1.25rem;
}

#downloadPopup .modal-header {
	padding: 1.875rem;
	border-bottom :none;
}

#downloadPopup .modal-header .close {
	width: 2rem;
	height: 2rem;
	background : url(/html/_skin/img/common/ico_close.png) no-repeat center / contain;
	   padding: 0;
    margin: 0;
    margin-left: auto;
}

#downloadPopup .modal-body {
	padding :0 3.75rem 4.375rem;
}

#downloadPopup .download-form {
  max-width: 100%;
  margin: 0 auto;
}

#downloadPopup .form-title {
  font-size: var(--font-size-24);
  font-weight: 700;
  padding-bottom: 30px;
  text-align : center;
  color : #0c0c0c;
  border-bottom: 2px solid var(--dark-color);
}

#downloadPopup form {  
  border-bottom: 1px solid var(--dark-color);
}

#downloadPopup .form-group {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom : 0;
}

#downloadPopup .form-group .tit {
  width: 265px;
  padding: 1.5625rem 1.875rem;
  background-color: #f5f5f5;
  font-weight: 700;
  color: #4a4a4a;
  font-size: var(--font-size-18);
  border-right: 1px solid var(--border-color);
  display: flex;
}

#downloadPopup .form-group .con {
  flex: 1;
  padding: 0 30px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

#downloadPopup .form-group input {
  width: 100%;
  padding: 1.25rem;
  border: 1px solid #dcdcdc;
  background: transparent;
  font-size: var(--font-size-18);
  color: var(--dark-color);
  height: 40px;
}

#downloadPopup .form-group input::placeholder {
  color: var(--gray-color-95);
}

#downloadPopup .form-group input:focus {
  outline: none;
}

#downloadPopup .btn-download {
  display: block;
  width: 19.375rem;
  margin: 50px auto 0;
  padding: 15px 40px;
  background-color: var(--dark-color);
  color: var(--white-color);
  border: none;
  border-radius: 10px;
  font-size: var(--font-size-18);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s;
}

#downloadPopup .btn-download:hover {
  background-color: var(--gray-color-22);
}

@media (max-width: 767px) {	 
	.basic-board-list--fc tbody td.board-hit--fc.download { display: block}

	#downloadPopup .modal-header { padding: 1.25rem;}
	#downloadPopup .modal-body {	padding :0 2rem 2rem;}

  #downloadPopup .form-group { -ms-flex-direction: column  !important; flex-direction: column !important;}
#downloadPopup .form-group .tit {  width : 100%; }
#downloadPopup .form-group .con { padding: 1.25rem;}
}

/***************** 2026.09.07 스타일 추가 *******************/

.foot-menu .depth4 {
    padding-left: 10px;
    margin-top: 5px;
}

/***************** 2026.09.07 스타일 추가 *******************/

.resources-area {
    background: url(/html/_skin/img/main/bg_main_resources.jpg) no-repeat center / cover;
    padding: 5.625rem 3.125rem;
}

.resources-area .resources-box {
    width: 100%;
    background: #fff;
    border-radius: 1.25rem;
   -ms-flex-pack: center !important;
    justify-content: center !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center !important;
    align-items: center !important;
    padding: 7.8125rem 1.25rem;
}


.resources-area .resources-box .main-title  {
    margin-bottom: 2.5rem;
}

.resources-area .resources-box .main-title .title {
    font-size: var(--font-size-40);
}

.resources-area .resources-box .logos {
    -ms-flex-pack: center !important;
    justify-content: center !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 4.6875rem;
    row-gap: 1.25rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.resources-area .resources-box .txt {
    font-size: var(--font-size-20);
    font-weight: 700;
    color: #101010;
    margin-top: 2.5rem;
}

.resources-area .resources-box .txt  p + p {
    margin-top: 1.25rem;
}

.resources-area .resources-box .btns {
   margin-top:  3.4375rem;
   -ms-flex-pack: center !important;
    justify-content: center !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.btn-github {
    background-color: #eeeeee;
    width: fit-content;
    height: 4.5rem;
    border-radius: 2.25rem;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center !important;
    align-items: center !important;
    gap: 1.25rem;
    transition: all 0.6s ease;
    padding: 0.9375rem;
}

.btn-github:hover {
    opacity: 0.8;
}

.btn-github span {  
    font-size: var(--font-size-18);
    font-weight: 400;
    color: #131313;
    padding-left: 1.25rem;
}

.btn-github .ico {
    font-size: 0;
    text-indent: -9999px;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 100%;
    border: 1px solid var(--gray-color-95);
    transition: 0.3s;
    position: relative;
}

.btn-github .ico::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 0.5rem;
    height: 0.5rem;
    border-right: 0.125rem solid #4a4a4a;
    border-bottom: 0.125rem solid #4a4a4a;
    transition: 0.3s;    
    margin-left: -0.125rem;
}



.resources-area.type2 {
    background-image: url(/html/_skin/img/sub/developers/bg_sub_developers.jpg);
}

.resources-area.type2 .resources-box {
    padding: 9.375rem 1.25rem;
}

.resources-area.type2 .btn-github {
    background-color: var(--primary-color);
}

.resources-area.type2 .btn-github span {  
    color: #fff;
}

.resources-area.type2 .btn-github .ico {
    border-color: rgba(255,255,255,.50);
}

.resources-area.type2 .btn-github .ico::before {
    border-right-color: #fff;
    border-bottom-color: #fff;
}


@media (min-width: 1441px) {
    .resources-area {
        padding: 5.625rem 9.0625rem;
    }

    .resources-area.type2 {
        padding: 8.125rem 13.75rem;
    }
}


.con-tit h4 { 
    font-size: var(--font-size-40);
    font-weight: 800;
    color: #222;
}

.color-848282 { color: #848282; }
.color-505050 { color: #505050;}
.color-222 { color: #222; }
.color-fff { color: #fff; }
.color-fff-opacity-80 { color: rgba(255,255,255,.80) }
.color-000 { color: #000; }
.color-base { color: var(--primary-color); }

.f-row {
    display: -ms-flexbox;   
    display: flex;
}

.f-row  > .col {
    padding-right : 0;
    padding-left: 0;
}

.wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.no-wrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}


#footer.type2 {
    background: #000000 !important; 
}

#footer.type2 .footer-tp  {

} 

#footer.type2 .footer-btm .inner {
    margin-top: 1.875rem;
    padding-top: 1.875rem;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
}

#footer.type2 .foot-head {
    gap: 1.25rem;
}

#footer.type2 .foot-head > p {
    color: #fff;
    font-size: var(--font-size-44);
    font-weight: 800;
}

#footer.type2 .foot-head > img {
    width: fit-content;
}

#footer.type2 .foot-policy-menu {
    position: relative;
    top: inherit;
    right: 0;
}

#footer.type2 .foot-policy-menu ul {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.375rem;
}


#footer.type2 .foot-policy-menu ul > li {
    padding: 0;
    margin-bottom: 0;
}

#footer.type2 .foot-policy-menu ul > li a {
    background-color: #2e2e2e;
    line-height: 2.6875rem;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
}

#footer.type2 .offices {
    margin-bottom: 2.1875rem;
}

#footer.type2 .offices .office + .office {
    margin-top: 1.25rem;
}

#footer.type2 .offices .office > b {
    width: 14.0625rem;
}


#footer.type2 .offices .office > .info {
    width: calc(100% - 14.0625rem);
}


#footer.type2 .offices .office > .info .light-186 {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.80);
}

#footer.type2 .offices .office > .info ul li {
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
}

#footer.type2 .offices .office > .info ul li span + span {
    position: relative;
}

#footer.type2 .offices .office > .info ul li span + span::before {
    content: '';
    display: block;
    height: 0.8125rem;
    border-left: 1px solid #7d7d7d;
    position: absolute;
    left: -1.0625rem;
    top: 0.25rem;
}

#footer.type2 .copylight p:last-child {
    padding-left: 0.875rem;
}

@media (min-width: 1200px) {
    #footer.type2 .foot-head {
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
        -ms-flex-align: center !important;
        align-items: center !important;
    }

    #footer.type2 .foot-policy-menu {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end !important;  
        justify-content: flex-end !important;
        margin-top: -1.875rem;
    }

    #footer.type2 .foot-menu {
        margin-bottom: 0;
    }

    #footer.type2 .foot-policy-menu ul {
        max-width: 21rem;
    }

    #footer.type2 .foot-policy-menu ul > li {    
        width: calc(50% - calc(0.375rem / 2));
    }

}

@media (max-width: 1199px) {
    #footer.type2 .foot-head {
        -ms-flex-direction: column  !important;
        flex-direction: column !important;
    }

    #footer.type2 .foot-policy-menu ul > li a { 
        width: 10.3125rem;
    }
}

@media (max-width: 767px) {
    #footer.type2 .offices .office  {
        -ms-flex-direction: column  !important;
        flex-direction: column !important;
        gap: 1.25rem;
    }

    #footer.type2 .offices .office > b {  
        width: 100%;
    }

    #footer.type2 .offices .office > .info {
        width: 100%;
    }

    #footer.type2 .offices .office > .info ul li {
        -ms-flex-direction: column  !important;
        flex-direction: column !important;
        gap: 0;
    }

    #footer.type2 .offices .office > .info ul li span + span::before {
        display: none;
    }
}