@charset "utf-8";

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 웹폰트  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('font/PretendardVariable.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('font/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	reset css  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
* { box-sizing:border-box; }
html, body { height:100%; }
html { font-size:10px; letter-spacing:0px; font-family:'Roboto', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif; color:#333; font-weight:500; }
body{min-width:320px; word-break: keep-all; overflow-x:hidden; line-height:1.5rem; letter-spacing:0rem; margin:0 auto; font-size:1.8rem; }
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,a,button,select
{margin:0;padding:0;box-sizing:border-box; word-break:keep-all;}
body,input,textarea,select,button,table,label
{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none; text-size-adjust:none; font-weight:400; font-family:'Roboto', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif; }
h1,h2,h3,h4,h5,h6 {}
a {color:#333;text-decoration:none;}
a:link {color:#333;text-decoration:none;}
a:visited {color:#333;text-decoration:none;}
a:active {color:#333;text-decoration:none;}
a:hover {color:#333;text-decoration:none;}
a:focus {outline:none;}
span, a, em, button {display:inline-block;}
img,fieldset,iframe{border:0;}
img {max-width:100%;vertical-align:top;}
ul, li{list-style:none;}
em,address{font-style:normal;}
input,select,button{vertical-align:middle;}
input[type="checkbox"]{padding:1px;}
caption,legend,.blind{overflow:hidden;position:absolute;top:0;left:-9999px;width:0;height:0;font-size:0;line-height:0;text-align:left;}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button]
{width:100%;height:3.8rem;padding:0 10px;border:1px solid #ccc;color:#333;vertical-align:middle;-webkit-appearance:none; }
input[type=password],input[type=email]{ime-mode:disabled;}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
select:focus,
textarea:focus{border:1px solid #999;}
input[type=file]{width:99.5%;height:38px;border:1px solid #ccc;background:#fff;}
select{height:38px;padding-left:5px;border:1px solid #ccc;font-size:1.5rem;color:#333;vertical-align:middle;}
textarea{width:100%;padding:10px;border:1px solid #ccc;font-size:1.5rem;color:#333;resize:none;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
table th {font-weight:normal;}
hr{display:none;}
label {cursor:pointer;}
button[type='button'] {cursor:pointer;}
button:focus,
input:focus  { outline: 0; }

/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	공통  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
:root {
	--blue : #0c4da2;
    --blue01 : #4665af;
	--blue02 : #7080bf;
	--blue03 : #8895c0;
	--blueB:#449bc0;
    --dkGrey: #1c1c1c;
    --navy: #1b2a4a;
    --dkNavy: #1e2123;
	--yGreen:#68a34b;
	--green:#26b1a6;
	--greenB:#31afba;
	--bGrey: #b1b3bf;
}



.hidden { position:absolute; font-size:0; line-height:0; left:-10000px; padding:0 !important; margin:0; height:0;}
.f-left {float:left !important;}
.f-right {float:right !important;}
.dis-block {display:block !important;}
.dis-none {display:none !important;}
.text-c {text-align:center !important;}
.text-l {text-align:left !important;}
.text-r {text-align:right !important;}
.vt-t {vertical-align:top !important;}
.vt-m {vertical-align:middle !important;}
.vt-b {vertical-align:bottom !important;}
.bg-none {background:none !important;}
.border-none {border:none !important;}
.clearfix:after {content:"";display:block;clear:both;}
.en {font-family:'Roboto', sans-serif !important; }
.greyText { color:#777 !important; }
.blueText { color:var(--blue) !important; }
.redText { color:#fd0404 !important; }
.greenText { color:var(--green) !important; }



/* ios */
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration:none !important;
  font-size:inherit !important;
  font-family:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  white-space:nowrap;
}
.mt0 { margin-top:0rem !important; }
.mt5 { margin-top:0.5rem !important; }
.mt10 { margin-top:1rem !important; }
.mt20 { margin-top:2rem !important; }
.mt30 { margin-top:3rem !important; }
.mt40 { margin-top:4rem !important; }
.mt50 { margin-top:5rem !important; }
.mt60 { margin-top:6rem !important; }
.mt70 { margin-top:7rem !important; }
.mt80 { margin-top:8rem !important; }
.mt90 { margin-top:9rem !important; }
.mt100 { margin-top:10rem !important; }

/* 말줄임 */
.line1-text-eps { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display:block; }
.line2-text-eps { display:block; line-height:1.5em; max-height:3em; display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }
.line3-text-eps { display:block; line-height:1.5em; max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }
.line4-text-eps { display:block; line-height:1.5em; max-height:6em; display:-webkit-box; -webkit-line-clamp:4; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }

/* 리스트 */
ul.list_bullet { }
ul.list_bullet > li { padding-left:0.8rem; line-height:1.5; position:relative; }
ul.list_bullet > li:before { content:''; width:3px; height:3px; border-radius:50%; background:#666; display:block; position:absolute; left:0; top:1.0rem; }
ul.list_bullet > li + li { margin-top:0.7rem; }
ul.list_bullet.sm > li + li { margin-top:0rem; }
ul.list > li + li { margin-top:0.7rem; }
.listLIst > li { padding-left:10px; position:relative; color:#777; }
.listLIst > li:before { content:'-'; position:absolute; top:0; left:0; } 
ol.listOrder {}
ol.listOrder li { display:flex; width:100%; }
ol.listOrder li span.num { width:1.8rem; flex-shrink:0; margin-right:3px; }
ol.listOrder li span.num.autoW { width:auto; margin-right:5px; }
ol.listOrder li span.cntT { flex-grow:1; }

/* 테이블 */
table.basic th,
table.basic td { border:1px solid #ccc; padding:0.9rem; }
table.basic th { font-size:1.7rem; color:#000; background:#efefef; }
table.basic td { font-size:1.6rem; color:#333; background:#fff; line-height:1.6; }

table.table th,
table.table td { border:1px solid #d8d8d8; padding:0.9rem; line-height:1.3; }
table.table thead th { font-size:1.7rem; font-weight:500; color:#000; background:#fff; border-top:1px solid var(--dkNavy); border-bottom:2px solid var(--dkNavy); }
table.table td { font-size:1.6rem; color:#333; background:#fff; }
table.table .left { border-left:0 !important; }
table.table .right { border-right:0 !important; }
table.table th.bb { border-bottom:1px solid #d8d8d8; }
table.center th,
table.center td { text-align:center; }
.tableWraper {  width:100%; }


/* check, radio 타입 */
span.check_type { position:relative; padding-left:15px; cursor:pointer; }
span.check_type input[type="checkbox"],
span.check_type input[type="radio"] { display:none; }
span.check_type input + label { font-size:1.5rem; }
span.check_type input + label:before { width:12px; height:12px; content:''; display:block; position:absolute; top:50%; left:0; background:url(../images/common/check_type.png); background-size:100%; background-position:0 -100%; transform:translateY(-50%); }
span.check_type input:checked + label:before { background-position:0 0; }

.notScroll { top:0;  position:fixed; overflow:hidden; width:100%; }

/* /////////////// Skip Navigation ////////////////////// */
.skipNav {font-size:0; line-height:0;  }
.skipNav a {display:block; width:100%; color:#fff; position:absolute; left:0; top:-100px; text-align:center; background:#101010; border:0 none;z-index:1000; font-size:1.4rem; }
.skipNav a:focus, .skipNav a:hover, .skipNav a:active {top:0; font-weight:bold;font-size:14px;line-height:39px; outline:2px dotted red; }
*:focus {/*border:1px dotted blue;*/}


/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) { 
*:focus {border:none;}
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) { 
	html { font-size:9.5px; }
	
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) { 
	html { font-size:9.5px; }
	.not_scroll{  position:fixed; overflow:hidden; width:100%; }
	
	/* 테이블 */
	table.table th,
	table.table td { padding:0.5rem; }
	table.table th { font-size:1.6rem; }
	table.table td { font-size:1.5rem; }
	.tableWraper { overflow-x:auto; padding-bottom:10px; }
	.tableWraper table { min-width:100%; width:auto; }
	
	/* 리스트 */
	ul.list_bullet li + li { margin-top:0.3rem; }

} 
 

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// layout  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/

/* header */
.nav_wrapper { position:fixed; left:0; top:0; width:100%; transition:all 0.3s ease-out; height:10rem; z-index:90; padding:0 30px; opacity:0; }
.nav_wrapper:after { }
.nav_wrapper .inner { width:100%; max-width:1400px; margin:0 auto; position:relative; height:10rem; display:flex; justify-content:space-between; }
.nav_wrapper .logo { width:20rem; display:flex; align-items:center; }
.nav_wrapper .logo a { display:block; }
.nav_wrapper .logo a img { width:100%; }
.nav_wrapper .logo a img.white { display:inline; }
.nav_wrapper .logo a img.color { display:none; }
.nav_wrapper .nav_bg { position:absolute; top:0; left:0; width:100%; height:10rem; background:rgba(255,255,255,1); opacity:0; box-shadow:0 3px 8px rgba(0,0,0,0.25); }
.nav_wrapper.enter {-webkit-animation:enter 0.5s forwards; animation:enter 0.5s forwards; animation-delay:0.5s; }

@keyframes enter {
	0%{
  	opacity:0;
    }
    100%{
  	  opacity:1;
    }
}

@-webkit-keyframes enter {
	0%{
  	opacity:0;
    }
    100%{
  	  opacity:1;
    }
}

.menu { position:relative; height:10rem; overflow:hidden; }
.menu .gnb_menu { position:relative; text-align:center; z-index:10; }
.menu .gnb_menu .navi { display:flex; }
.menu .gnb_menu .navi > li { display:inline-block; position:relative; text-align:center; }
.menu .gnb_menu .navi > li > a { color:#fff; font-size:1.7rem; padding:0 4rem; line-height:10rem; font-weight:500; position:relative; display:block; width:100%; white-space:nowrap; }
.menu .gnb_menu .navi > li > a:after { width:0; height:3px; background:var(--blue); opacity:0; content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); transition:all .3s ease-out; }
.menu .gnb_menu .navi > li:hover > a:after,
.menu .gnb_menu .navi > li.hover > a:after,
.menu .gnb_menu .navi > li.current > a:after { width:100%; opacity:1; }
.menu .gnb_menu .navi .depth02 { position:absolute; display:none; top:10rem; opacity:0; left:0; right:0; width:100%; text-align:center; padding-top:1rem; display:none; }
.menu .gnb_menu .navi .depth02 li { display:block;}
.menu .gnb_menu .navi .depth02 li a { display:block; width:100%; color:#333; font-size:1.6rem; font-weight:300; padding:0.8rem 0.5rem; line-height:1.2; letter-spacing:-0.1em; }
.menu .gnb_menu .navi .depth02 li a:hover { font-weight:700; text-decoration:underline; }

.lang-wrap { width:8rem; display:flex; align-items:center; z-index:101; }
.lang-select { position:relative; display:block; width:100%; vertical-align:middle; text-align:center; color:#fff; width:80px; font-size:1.5rem; font-weigth:700; }
.lang-select .placeholder { position:relative; display:block; cursor:pointer; width:100%; height:22px; display:flex; justify-content: center; align-items: center; }
.lang-select .placeholder:before { display:inline-block; width:22px; height:22px; margin-right:5px; background: url("../images/common/icon_global_white.png")no-repeat center; background-size:100%;  content:''; }
.lang-select ul {display:none; width:100%; position:absolute; top:30px; left:0; box-shadow:6px 6px 6px rgba(0,0,0,0.25); background:#fff; padding:0.5rem 0; }
.lang-select ul li { text-align:center; width:100%; }
.lang-select ul li a { display:block; cursor:pointer; padding:1rem; color:#333;}
.lang-select ul li a.current { color:#101010; font-weight:900; }
.lang-select.is-open { transition:all 0.2s ease; }
.lang-select.is-open .placeholder { }
.lang-select.is-open ul { transition:all 0.2s ease; display:block; height:auto;  }

.nav_wrapper.hover,
.nav_wrapper.scroll { background:rgba(255,255,255,0.9); }
.nav_wrapper.hover { height:34rem; }
.nav_wrapper.hover .menu { height:34rem; }
.nav_wrapper.scroll .logo a img.white,
.nav_wrapper.hover .logo a img.white { display:none; }
.nav_wrapper.scroll .logo a img.color,
.nav_wrapper.hover .logo a img.color { display:inline; }
.nav_wrapper.scroll .menu .gnb_menu .navi > li > a,
.nav_wrapper.hover .menu .gnb_menu .navi > li > a { color:#101010; }
.nav_wrapper .menu .gnb_menu .navi > li:hover > a,
.nav_wrapper .menu .gnb_menu .navi > li.current > a { color:var(--blue); }
.nav_wrapper.hover .menu .gnb_menu .navi .sub-menu { display:block; opacity:1; }
.nav_wrapper.hover .nav_bg,
.nav_wrapper.scroll .nav_bg { opacity:1; }
.nav_wrapper.hover .lang-select .placeholder, 
.nav_wrapper.scroll .lang-select .placeholder { color:#101010; } 
.nav_wrapper.hover .lang-select .placeholder:before, 
.nav_wrapper.scroll .lang-select .placeholder:before { background: url("../images/common/icon_global.png")no-repeat center; background-size:100%; }

.spinner-master { display:none; }
.mobileMenu { display:none; }

/* footer */
.footer { letter-spacing:0; color:#a8a8a8; background:#1c1c1c; font-size:1.5rem; line-height:1.6; font-weight:300; }
.footer .inner { width:100%; max-width:1260px; padding:60px 30px; margin:0 auto; }
.footer .inner .footerTop { border:1px solid rgba(255,255,255,0.1); padding:3.0rem;  }
.footer .inner .copyright { text-align:center; margin-top:40px;   }
.footer .inner .footerTop .ft01 { display:flex; justify-content:space-between; font-size:1.6rem; color:#cecece; }
.footer .inner .footerTop .ft02 { margin-top:2.5rem; }
.footer .inner .footerTop .list li {  padding-left:0.8rem; line-height:1.5; position:relative; }
.footer .inner .footerTop .list li:before { content:''; width:3px; height:3px; border-radius:50%; background:#666; display:block; position:absolute; left:0; top:1.0rem; }
.footer .inner .footerTop .ft01 .msgSend { background:#333; padding:1.0rem 1.5rem; font-size:1.6rem; color:#cecece; border:0; }

/* scorll-top */
.scroll-top { position:fixed; display:none; right:2rem; bottom:5rem; width:3.6rem; height:3.6rem; font-size:1.5rem; color:#fff; line-height:3.6rem; text-align:center;
	cursor:pointer; border-radius:100%; opacity:0;  z-index:100; -webkit-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;
	background:url(../images/common/move_top.png)no-repeat; background-size:100%; background-color:rgba(0,0,0,0.7); }
.scroll-top.is-showing { bottom:2rem; opacity:1; }


/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
	/* header */
	.menu .gnb_menu .navi > li > a { padding:0 3rem; font-size:1.6rem; }
	.menu .gnb_menu .navi .depth02 li a { font-size:1.5rem; }
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) { 
	/* header */
	.menu { display:none; }
	.nav_wrapper { padding:0; }
	.nav_wrapper,
	.nav_wrapper.hover,
	.nav_wrapper .inner,
	.nav_wrapper .nav_bg { height:7.0rem; }	
	.lang-wrap  { position:absolute; right:8rem; top:50%; transform:translateY(-50%); }
	.nav_wrapper .logo { margin-left:20px; }
	
	.spinner-master { width:7rem; height:7rem; z-index:100; position:absolute; top:0; right:0px; text-align:center; display:block; }
	.spinner-master * { transition:all 0.3s; box-sizing:border-box; }
	.spinner-master .spinner-spin { cursor:pointer; position:absolute; z-index:101; height:100%; width:100%; top:0; left:0; padding:2.5rem 1rem; display:flex; flex-direction:column; 
		justify-content:space-between; align-items:center; } 
	.spinner-master .spinner-spin .spinner { height:3px; width:100%; padding:0; background:#fff; border-radius:2px; width:3rem; }	
	.spinner-master .spinner-spin .part-1 {  }
	.spinner-master .spinner-spin .horizontal {  }
	.spinner-master .spinner-spin .part-2 { }
	.spinner-master .spinner-spin.active .spinner,
	.nav_wrapper.hover .spinner-master .spinner-spin .spinner,
	.nav_wrapper.scroll .spinner-master .spinner-spin .spinner { background:#010101; }
	.spinner-master .spinner-spin.active .spinner { width:3rem; }
	.spinner-master .spinner-spin.active .horizontal { opacity: 0; }
	.spinner-master .spinner-spin.active .part-1 { transform:translate(-50%, -50%) rotate(135deg) ; /*margin-top:1.7rem;*/ position:absolute; top:50%; left:50%;  }
	.spinner-master .spinner-spin.active .part-2 { transform:translate(-50%, -50%) rotate(-135deg) ;  /*margin-top:-1.4rem;*/ position:absolute; top:50%; left:50%;  } 		
	
	.mobileMenu { display:block; position:fixed; height:100%; right:0; top:7.0rem; visibility:hidden; width:100%; padding:0; overflow-y:auto; z-index:100;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;  
	-moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
	transition: transform .4s 0s, visibility 0s .4s;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
	background:rgba(255,255,255,0.9);
	}
	.mobileMenu.active {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
	visibility: visible;
	-webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
	-moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
	transition: transform .4s 0s, visibility 0s 0s;
	-webkit-overflow-scrolling: touch;
	} 
	
	.mobileMenu .gnb_menu { float:none; margin:0; display:block; width:100%; padding-right:0; }
	.mobileMenu .gnb_menu .navi { width:100%; }
	.mobileMenu .gnb_menu .navi > li { display:block; float:none; width:100%; border-bottom:1px solid #ccc;  }	
	.mobileMenu .gnb_menu .navi > li > a { padding:2rem; line-height:2rem; width:100%; display:block; text-align:left; color:#111; font-size:1.6rem; font-weight:500; position:relative; }
	.mobileMenu .gnb_menu .navi .has-submenu > a:after { width:1rem; height:1rem; border-color:#1c1c1c; border-style:solid; border-width:0 2px 2px 0;  position:absolute; right:2rem; top:50%; display:block; content:''; transform:translateY(-50%) rotate(45deg) ; transition:all 0.3s; }
	.mobileMenu .gnb_menu .navi .has-submenu > a.active:after { transition:all 0.3s; transform:translateY(-50%) rotate(-135deg) ;  }
	.mobileMenu .gnb_menu .navi .has-submenu .sub-menu { position:relative; top:0; background:var(--navy); display:none; }
	.mobileMenu .gnb_menu .navi .has-submenu .sub-menu li a { padding:1.5rem; padding-left:4rem; text-align:left; color:#fff; display:block; width:100%; border:1px solid rgba(255,255,255,0.1);}	
}



/* ================================== Mobile css ================================== */

@media all and (max-width: 767px) {		
	/* scorll-top */
	.scroll-top { display:inline-block; }
	

}

@media all and (max-width: 560px) {
	/* header */
	.nav_wrapper .logo { width:15rem; }
	.lang-wrap { width:4rem; right:7rem; }
	.lang-wrap .lang-select .placeholder { display:none; }
	.lang-wrap .lang-select ul { display:block; position:relative; top:0; padding:0; box-shadow:none; background:transparent;  }
	.lang-wrap .lang-select ul .current { display:none; }
	.lang-wrap .lang-select ul a { color:#fff; font-weight:700; }
	
	/* footer */
	.footer { font-size:1.4rem; line-height:1.5; }
	.footer .inner { padding:40px 20px;}
	.footer .inner .copyright { margin-top:20px; }
	.footer .inner .footerTop .ft01 { flex-direction:column; font-size:1.5rem;  }
	.footer .inner .footerTop .ft01 .msgSend { font-size:1.5rem; margin-top:1.2rem; }
	.footer .inner .footerTop { padding:2rem; }
}