@import url("../fonts/pretendard/pretendard.css");

html {
	font-size: 18px;
}

body {
	font-family: 'Pretendard';
	font-size: 18px;
	position: relative;
	word-break: keep-all;
}

@media all and (min-width:1261px){
	._m {display:none !important}
}

@media all and (max-width:1260px){
	._p {display:none !important}	
}


.btn:focus { outline: none !important; box-shadow: none !important; }
.ls-n3 { letter-spacing: -0.03em !important; }
.ls-n4 { letter-spacing: -0.08em !important; }

.fs-10 { font-size:10px; }
.fs-12 { font-size:12px; }
.fs-14 { font-size:14px; }
.fs-16 { font-size:16px; }
.fs-18 { font-size:18px; }
.fs-20 { font-size:20px; }
.fs-22 { font-size:22px; }
.fs-24 { font-size:24px; }
.fs-34 { font-size:34px; }
.fs-40 { font-size:40px; }
.fs-46 { font-size:46px; }
.fs-60 { font-size:60px; }
.fs-64 { font-size:64px; }
.fs-70 { font-size:70px; }



.fw-meduim    { font-weight: 500 !important; }
.fw-semibold  { font-weight: 600 !important; }
.fw-bold      { font-weight: 700 !important; }
.fw-extrabold { font-weight: 800 !important; }

.color-1 { color:#D0D0D0; }
.color-2 { color:#BDDFFF; }
.color-3 { color:#BC5C5C; }
.color-4 { color:#828282; }
.color-5 { color:#8B8B8B; }
.color-6 { color:#333333; }
.color-7 { color:#414141; }

.cursor-pointer { cursor: pointer; }

.btn-sitemap {float:left; width:8rem; height:34px; display:flex; flex-direction:column; justify-content: center; box-sizing:border-box;}
.btn-sitemap .line{display:block; width:100%; height:4px; background-color:#fff; margin: 3px auto; margin-right:0; transition:var(--transition-custom);}
.btn-sitemap .line:nth-child(2){width:50%;}

.btn-sitemap.active{position:relative; z-index:100000;}
.btn-sitemap.active .line:nth-child(2) {opacity: 0;}
.btn-sitemap.active .line:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}
.btn-sitemap.active .line:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}

header { 
	position: fixed;
	top: 0;
	left: 0;
	z-index:1000; 
	width:100%;
	transition: all 0.5s ease;
}

header .contents {
	position: relative;
	padding:0px 60px; 
	display: flex; 
	align-items: center; 
	width: 100%;
	background-color: transparent; 
	transition: 
		padding 0.5s ease,	
		background-color 0.5s ease, 
		box-shadow 0.5s ease; 
	
}

header .contents .bg {
	opacity: 0;
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #FFF;
	border-bottom: 1px solid #E5E5E5;
    z-index: -1;
	height:150px;
	transition: all 0.4s ease-in-out;
}


header .logo { z-index:100; }
header .logo .logo-svg { color:#FFFFFF; }
header .logo svg { width: 200px; }

header nav { margin-left:50px; }
header nav ul { display: flex; align-items: center; margin: 0px 0px; padding: 0px 0px; }
header nav ul li { 
	position:relative; 
	width:150px; 
	text-align: center; 
	list-style: none; 
	padding: 60px 10px; 
	font-size:20px; 
	font-weight: 600; 
	color:#FFFFFF; 
	border-right: 1px solid transparent;
	transition: all 0.4s ease-in-out;  
}
header nav ul li .sub { 
	/*display:none;*/
	opacity: 0; 
	position:absolute; 
	overflow: hidden;
	top:150px; 
	left:0px; 
	width:150px; 
	height:0px;
	/*background-color: #FFFFFF;*/
	border-right: 1px solid #E5E5E5; 
	transition: all 0.4s ease-in-out; 
}


header nav ul li .sub a { display: block; font-size:16px; color:#848484; font-weight: 500; padding:3px 0px; }

header.over .contents .bg { opacity:1; height: 400px; }
header.over, header.fixed { background-color: #FFFFFF;  }
header.over .logo-svg, header.fixed .logo-svg { color:#000000; }
header.over nav ul li .sub { 
	/*display:block; */
	width:180px;
	height: 250px; 
	opacity: 1;  
}
header.over nav ul li, header.fixed nav ul li { color:#000000; }
header.over nav ul li { border-right: 1px solid #E5E5E5; width: 180px;   }
header.over nav ul li:hover { background-color: #32379A; color:#FFFFFF; }
header.over nav ul li:hover .sub { background-color: #32379A; }
header.over nav ul li:hover .sub a { color:#FFFFFF; }
header.over nav ul li:hover .sub a:hover { color:#FFDE97 }

header #lang {
	position: relative;
    float: left;
    width: 80px;
    height: 30px;
    border: 2px solid #FFFFFF;
    z-index: 100;
    margin-right: 40px;
    border-radius: 15px;
    box-sizing: border-box;
    transition: all 0.4s ease-in-out;
	transition-delay: 0.4s;
	background-color: transparent;
}

header #lang:hover { background-color: #E6E6E6; border-color: #E6E6E6; transition-delay: 0s;}
header #lang:focus { outline: none !important; }
header #lang .btn {
	overflow: hidden;
    position: relative;
    display: flex;
	align-items: center;
	justify-content: center;
    width: 100%;
    text-align: center;
    height: 100%;
    font-size: 13px;
    color: #FFFFFF;
    z-index: 11;
}

header #lang:hover .btn { color:#32379A; }

header #lang ul.menu  {
    position: absolute;
	top: 12px;
    padding: 20px 0px 3px 0px;
	margin: 0px 0px;
    left: -2px;
    z-index: 10;
    width: calc(100% + 4px);
    border: 2px solid #E6E6E6;
    border-top: 0;
    border-radius: 0 0 15px 15px;
    box-sizing: border-box;
    overflow: hidden;
    background: #E6E6E6;
	opacity: 0;
	transition: all 0.4s ease-in-out;
}
header #lang:hover ul.menu {
	opacity: 1;
	
}
header #lang ul.menu li { list-style: none; color:#333333; font-size: 13px; font-weight: 600; text-align: center; }

header.over #lang, header.fixed #lang { border-color: #5B5B5B;  }
header.over #lang:hover, header.fixed #lang:hover { border-color: #E6E6E6;}
header.over #lang .btn, header.fixed #lang .btn { color:#424242;  }

header .sitemap-menu .sitemap-btn {
    width: 80px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	align-items: end;
    box-sizing: border-box;
	background: transparent;
    border: none;
	padding: 0px 0px;
}

header .sitemap-menu .sitemap-btn span { display:block; width:100%; height:4px; background-color:#fff; transition:all 0.4s ease-in-out;}
header .sitemap-menu .sitemap-btn span:nth-child(2){width:50%;}
header.over .sitemap-menu .sitemap-btn span, header.fixed .sitemap-menu .sitemap-btn span { background-color:#000000; }

header.clicked .sitemap-menu .sitemap-btn {position:relative; z-index:100000;}
header.clicked .sitemap-menu .sitemap-btn span { background-color: #FFF !important; }
header.clicked .sitemap-menu .sitemap-btn span:nth-child(1){ transform: translateY(10px) rotate(45deg); }
header.clicked .sitemap-menu .sitemap-btn span:nth-child(2){ opacity: 0; }
header.clicked .sitemap-menu .sitemap-btn span:nth-child(3){ transform: translateY(-10px) rotate(-45deg); }


header .sitemap { visibility: hidden; position: absolute; left: 0; top: 0; height:100vh; width: 100%; transition: all 0.3s ease-in-out; }
header.clicked .sitemap { visibility: visible; }

header .sitemap .inner { position: relative; height:100%; display: flex; align-items: center; justify-content: center; }

header .sitemap .inner .bg { position: absolute; left: 0; top:0; width:100%; height:0px;  z-index: 10; transition: all 0.4s ease-in-out; }
header.clicked .sitemap .inner .bg { height:100%; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px);  }

header .sitemap .inner ul { position: relative; z-index: 20; display: flex; transition: all 0.4s ease-in-out; }

header .sitemap .inner ul li { position: relative; text-align: center; opacity: 0; list-style: none; transform: translateY(50px); transition: all 0.4s ease-in-out; }

header.clicked .sitemap .inner ul li { opacity: 1; transform: translateY(0); }
header.clicked .sitemap .inner ul li:nth-child(2) { transition-delay:0.2s; }
header.clicked .sitemap .inner ul li:nth-child(3) { transition-delay:0.3s; }
header.clicked .sitemap .inner ul li:nth-child(4) { transition-delay:0.4s; }
header.clicked .sitemap .inner ul li:nth-child(5) { transition-delay:0.5s; }
header.clicked .sitemap .inner ul li:nth-child(6) { transition-delay:0.6s; }

header .sitemap .inner ul li span { display:block; color:#FFFFFF; font-size:40px; font-weight: 600; padding:40px 30px; }
header .sitemap .inner ul li .sub a { display: block; color:rgba(255, 255, 255, 0.6); padding:5px 10px; }
header .sitemap .inner ul li .sub a:hover { color:#FFDE97; }

header .sitemap .inner .lang-area { display: flex; position: absolute; right: 177px; top: 59px; z-index:10; opacity: 0; transition: all 0.4s ease-in-out; }
header.clicked .sitemap .inner .lang-area { opacity: 1; } 

header .sitemap .inner .lang-area .btn-lang { width: 80px; height: 30px; background-color: transparent; border: 2px solid #FFFFFF; color:#FFFFFF; display: flex; align-items: center; justify-content: center; border-radius: 40px; font-size: 13px; }
header .sitemap .inner .lang-area .btn-lang:hover { color:#FFDE97 }
header .sitemap .inner .lang-area .btn-lang.active { border-color: #32379A; background-color: #32379A;}

header.clicked { background-color: transparent !important; }
header.clicked .logo .logo-svg { color:#FFFFFF; }
header.clicked #lang,
header.clicked nav,
header.clicked nav ul li { transition:none; visibility: hidden; opacity: 0; }

section.sub-top { height:800px; background-size: cover; display: flex; align-items: center; justify-content: center; position: relative; }
section.sub-top .title { font-size: 70px; font-weight: 800; color:#FFFFFF; opacity: 0; animation: fadeUp 0.4s ease forwards; }

section.sub-top .sub-menu {
    width: calc(100% - 20px);
    border-radius: 40px;
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
	background: rgba(21, 21, 21, 0.2);
    backdrop-filter: blur(10px);
	z-index: 99;
	position: absolute;
	top:-60px;
	left: 10px;
	right:10px;
	transition: top 0.3s ease;

}

section.sub-top .sub-menu .inner {
	background-color:#CE161D;
	border-radius: 40px;
}

/* 공통 */
section.sub-top .sub-menu .inner a {
    display: flex;
    flex-grow: 1;
	justify-content: start;
    align-items: center;
	height:60px;
    color: #fff;
    border-radius: 40px;
    min-width: 150px;
    transition: all 0.25s ease-in-out;
}

/* active 메뉴 */
section.sub-top .sub-menu .inner a.active {
    background-color: #CE161D;
    cursor: pointer;
	padding: 10px 15px 10px 40px;
}

section.sub-top .sub-menu .inner a:not(.active) {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    overflow: hidden;
    pointer-events: none;
	padding: 0px 15px 0px 40px;
}



section.sub-top .sub-menu.open .inner a
{
	padding: 10px 15px 10px 40px;
	/*margin-top: 6px;*/
}

section.sub-top .sub-menu.open .inner a:not(.active) {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

section.sub-top .sub-menu.open .inner a.active::after {
    transform: rotate(180deg);
}

section.sub-top .sub-menu .inner a:hover {
    background-color: transparent;
}

section.sub-top .sub-menu .inner a.active::after {
	font-size: 12px;
	position:absolute;
	right:40px;
	transition: transform 0.3s ease;
	content: "\F0140";
	font: normal normal normal 24px / 1 "Material Design Icons";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

footer .logo { width: 222px; }

footer .logo svg { max-width: 100%; }

footer .logo-svg { color:#FFFFFF; }


footer hr {  }
footer a { color:#BFBFBF; }
footer a:hover { color:#A4676A }
footer .text-copyright { color:#A4A4A4; font-weight: 500; }

footer .company-info p { color:#B8B8B8; margin: 0 15px 5px 0; padding: 0 0; display: inline-block; font-weight: 400;}
footer .company-info p b { padding-right: 10px; }
footer .company-info p span { padding-right: 10px; font-weight: 500;}

footer #btn-to-top {
	position: absolute;
	top:0px;
	right:10px;
	-webkit-transform: translate(-0%, -50%) !important;
    transform: translate(-0%, -50%) !important;
}

#certificate-modal .modal-body .btn-close {
	
}

.editor-contents p { margin: 0 0; }
.editor-contents img { max-width: 100%; }


#slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0px;
    background-color: #fff;
}

.sub-visual { height: 90px; text-align: center; background-color: #f1f1f1; text-align: center; }
.sub-visual .menu-wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; height:100%; }
.sub-visual a { padding:10px 25px; display:block; color:#151515; font-size: 20px; font-weight: 600; opacity: 0.3 ; transition:all ease .35s; }
.sub-visual a:hover { opacity: 1; }
.sub-visual a.active { opacity: 1; }

/* 모바일 화면시 */
@media (max-width: 575.98px) {
	section.sub-top { height:600px;  }
	section.sub-top .title { font-size: 50px; font-weight: 800; color:#FFFFFF; opacity: 0; animation: fadeUp 0.4s ease forwards; }

	section.brand-copy .circle div { width:190px !important; height: 190px !important; }

	footer .company-info p { font-size:12px; }
	footer .text-copyright { color:#A4A4A4; font-weight: 300; font-size:12px;}
	footer a { font-size:12px; }
	footer .text-tit { font-size:16px; font-weight: 400;}
	
	footer .logo { width: 180px; }

	.sub-visual { height: 70px;  }
	.sub-visual .menu-wrap {
		justify-content:initial;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
		gap: 12px;
		padding: 10px 0;
	}
	.sub-visual .menu-wrap a { flex: 0 0 auto; }
}

@media (max-width: 1199px) {
	header #lang { margin-right:15px; margin-left: 15px; }
	header .contents { padding: 15px 15px; }
	header .contents .logo svg { width:153px; }
	header .contents nav { display: none; }
	header .sitemap-menu .sitemap-btn { width:44px; }
	header .sitemap .menu-area { 
		overflow: auto;
        padding-top: 100px;
        width: 100%;
        height: 100vh;
	}
	
	header .sitemap .inner .lang-area { right: auto; top: 27px; left: 15px; }	
	header .sitemap .inner ul { display: block; }
	header .sitemap .inner ul li { text-align: start; margin-bottom: 20px; }
	
	header .sitemap .inner ul li span { padding: 10px 10px; }
	
	header.clicked .contents .logo { opacity: 0 !important;}
	header.clicked .sitemap .inner .bg { background-color: #FFFFFF; color:#2C2C2C; }
	header.clicked .sitemap-menu .sitemap-btn span { background-color: #000000 !important; }
	header .sitemap .inner .lang-area { z-index: 100; }
	header .sitemap .inner .lang-area .btn-lang:not(.active) { border-color: #000000; color:#000000; background-color: #FFFFFF; }
	header .sitemap .inner ul { margin-left: 100px; }
	header .sitemap .inner ul li span { color:#2C2C2C; border-bottom: 2px solid #919191; font-size:20px; margin-bottom: 20px; }
	
	
	header .sitemap .inner ul li .sub { overflow: hidden; max-height: 0; transition: all 0.5s ease; }
	header .sitemap .inner ul li.active .sub { max-height: 500px; }
	
	header .sitemap .inner ul li.active span { color:#32379A; border-color: #32379A;  }
	header .sitemap .inner ul li a { font-size:16px; color:#787878 !important; }
	header .sitemap .inner ul li.active a:hover { color:#32379A; }
}

@media (min-width: 1200px) {	
	
	.fw-lg-bold {
		font-weight: 700 !important;
	}

	section.sub-top .sub-menu .inner { 
		display: flex;
		background-color: transparent;
	}
	section.sub-top .sub-menu .inner a { 
		opacity: 1 !important; 
		width:auto !important;
		max-height:none !important; 
		transform:none !important;
		pointer-events:all !important;
		justify-content: center;
		padding: 0px 15px !important;
	}
	
	section.sub-top .sub-menu .inner a:hover {
		background-color: #CE161D;
	}

	section.sub-top .sub-menu.open .inner a,
	section.sub-top .sub-menu .inner a.active {
		padding: 10px 15px; 
	}
	
	section.sub-top .sub-menu .inner a.active::after {
		content: none;
	}
	
	

	footer .logo {
		width: 362px;
	}
	footer #btn-to-top {
		-webkit-transform: none !important;
		transform: none !important;
		top:auto;
		bottom:0px;
	}
}


@media (min-width: 1520px) {
	.container-xxl {
		max-width: 1520px !important;
	}
}


#contentInfoCon{position:relative; margin:0 auto 0px; text-align:center; }
#contentInfoCon .content-tit{color:#333; font-size:47px; font-weight:600; letter-spacing:-0.6px;}
#contentInfoCon .content-tit:after{display:block; content:""; width:100%; height:1px; margin:40px auto 0px; background-color:#ddd}

@media all and (max-width:1024px){
	
	#contentInfoCon{ }
	#contentInfoCon .content-tit{font-size:34px;font-weight:800;}
	#contentInfoCon .content-tit:after{position:static; display:block; margin-top:15px; margin-bottom:20px;}
}

#contentInfoCon2{position:relative; margin:0 auto 0px; text-align:center; }
#contentInfoCon2 .content-tit{color:#333; font-size:47px; font-weight:600; letter-spacing:-0.6px;}
#contentInfoCon2 .content-tit:after{display:block; content:""; width:100%; height:1px; margin:40px auto 0px; background-color:#ddd}

#contentInfoCon3{position:relative; margin:0 auto 0px; text-align:center; }
#contentInfoCon3 .content-tit{color:#333; font-size:47px; font-weight:600; letter-spacing:-0.6px;}
#contentInfoCon3 .content-tit:after{display:block; content:""; width:100%; height:0px; margin:40px auto 0px; background-color:#ddd}



@media all and (max-width:1024px){
	
	#contentInfoCon2{ }
	#contentInfoCon2 .content-tit{font-size:27px}
	#contentInfoCon2 .content-tit:after{position:static; display:block; margin-top:15px; margin-bottom:20px;}
	
	#contentInfoCon3{ }
	#contentInfoCon3 .content-tit{font-size:34px;font-weight:800;}
	#contentInfoCon3 .content-tit:after{position:static; display:block; margin-top:15px; margin-bottom:20px;}
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Serif+KR:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');