@charset "utf-8";
@import url('font.css');
:root {
    --color_basic1:#fff;
    --color_basic2:#222;
    --color_title: #080808;
    --color_body: #101010;
    --color_Brand: #2d51d6;
    --color_Brand_pri:#0078ff;
    --color_Brand_sec: #ff5f00;;
    --color_bg_footer:#404247;
    --color_caption1: #404040;
    --color_caption2:#86868b;
    --border01: #D3E0E9;
    --border_t01: #1d1d1f;
}
/* basic start -------------------------------------------------------------------------------------------------*/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html {-webkit-text-size-adjust:100%; font-size:62.5%;}
body{
	font-family: -apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif;
	font-size:1.6rem; line-height:normal; letter-spacing: -0.0375em;  color: var(--color_body); 
	}
a, body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin:0;  padding:0; }
h1, h2, h3, h4, h5, h6, strong, th, b, em {font-size:inherit; font-weight:normal; }
a {color:inherit; text-decoration:none;}
a:hover,a:active,a:focus {text-decoration:underline; }
a img,img{border:0; vertical-align:top;}
img {border-style:none; max-width:100%}
img, form, fieldset, svg, li {border:0; vertical-align:top;}
li, ol, ul { list-style:none;}
address, em, i, s { font-style:normal; font-size:inherit;}
textarea { resize:none; }
table { border-collapse:collapse; border-spacing:0; }
button { border:0; background:none; cursor:pointer; -webkit-appearance:none;}
button, select {text-transform:none; font-size:inherit;}
input{ border:0; background:none; appearance: none; outline: 0; -webkit-appearance:none;}

.blind {position: absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow:hidden;}
.not_scroll{position: fixed; overflow:hidden; width: 100%; height: 100%}
/* basic end -------------------------------------------------------------------------------------------------*/

.wrap {width:1440px; margin: 0 auto; max-width: 100%; padding: 0 2rem;}







/* header start -------------------------------------------------------------------------------------------------*/
header {
    position: fixed; top:0; left:0; width:100%; 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 0px 4rem; background: #fff; z-index:9999; height:10rem; transition: 0.4s , border 0s
}
header a:hover, header a:active, header a:focus{text-decoration:none;}
header:after {position: absolute; content: ""; width: 100%; height: 1px; background-color: #D3E0E9 ; left: 0; bottom: -1px}
header.hover {background-color: #fff !important; }
header.hover:after {content: "" !important}
header.hover a {color: var(--color_title) !important}

#main header:after {content:none}
#main header {background: transparent;}
#main header a{ color: #fff}
#main header.scroll {background-color: #fff;}
#main header.scroll:after { content: ""}
#main header.scroll a{ color: #000}

@media (max-width: 1200px){
    header {height:6rem; padding: 0 2rem;}
}
@media (max-width: 768px){
    header {padding: 0 1.5rem;}
}


/*-------------------------------------------------*/
nav { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); height: 100%;}
nav>.gnb {display: flex; align-items: center; height: 100%; }
nav>.gnb > li {position: relative; height: 100%}
nav>.gnb > li + li {margin-left:60px;}
nav>.gnb > li > a { padding:0px 20px; font-size:1.7rem; font-weight:800; position:relative; height:100%; display:flex; align-items:center}
nav>.gnb > li > a:after {
    content:''; display: block; width:0%; height:4px; background: #2D51D6; 
    position: absolute; bottom:-1px; left:50%; transform: translateX(-50%); transition: 0.3s ease-in-out;
}
nav>.gnb > li > a.on:after {width:calc(100% - 40px); }
nav>.gnb .deps2 {position: absolute; left: 50%; bottom: -0px; transform: translate(-50%,100%); opacity: 0; ; z-index: 1; padding-top: 10px; pointer-events: none}
nav>.gnb .deps2 > li {text-align: center; padding: 10px 0 ; font-weight: 500}
nav>.gnb .deps2 > li a {white-space: nowrap; position: relative}
nav>.gnb .deps2 > li a:before {position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 100%); background-color: #000; content: ""; transition: all .3s; display: block; width: 0; height: 1px;}

nav>.gnb_bg{
    position: absolute; left: 50%; bottom: 0px; transform: translate(-50%,100%); background-color: #fff; width: 100%; height: 0px; display: block; 
    content: ""; transition: height .4s , opacity .4s; box-shadow: rgba(149, 157, 165, 0.07) 0px 8px 15px;border-top: 1px solid #D3E0E9 ; opacity: 0;
}
header.hover nav>.gnb .deps2 {opacity: 1; transition: all 0.4s; pointer-events: visible}
header.hover nav>.gnb_bg {height:24rem; opacity: 1}

@media(max-width: 1600px){
    nav>.gnb > li + li {margin-left: 24px}
    nav>.gnb > li > a { padding:0px 14px;}    
}
@media(max-width: 1200px){
    nav {
        position:fixed; left: 0%;right: auto;top: 0;width: 100%;height: 100%;z-index: 10;display: block; 
        background-color: #2d51d6;transform: translate(100%,0);padding: 20px 0px;   transition: left .5s ease-in-out;
        overflow: auto;display: flex;flex-direction: column;align-items: flex-start; overflow:hidden;
    }
    nav>.gnb {display: flex;flex-direction: column;align-items: flex-start;margin-top: 80px; width: 100%; height: auto}
    nav>.gnb > li {height: auto; width: 100%;}
    nav>.gnb > li > a {height: auto; position: relative; width: 100% ; pointer-events: none; padding-bottom: 20px; padding-top: 20px}
    nav>.gnb > li + li {margin-left: 0px;}
    nav>.gnb > li > a:after{
        content: "\f078";font-family: "Font Awesome 6 Pro";display: inline-block; position: static;width: auto;height: auto;
        transform: translateX(0);vertical-align: middle;line-height: 1;margin-left: auto;font-weight: 500;width: auto;
        transition: all .3s;background-color: transparent;width: auto;position: static;}
    nav>.gnb > li > a.on:after {width: auto}
    nav>.gnb > li:nth-child(2) > a,
    nav>.gnb > li:nth-child(4) > a {pointer-events: visible}
    nav>.gnb > li:nth-child(2) > a:after,
    nav>.gnb > li:nth-child(4) > a:after {display: none}
    nav>.gnb .deps2{
        position: static;transform: none; opacity: 1;visibility: visible;display: none;
        background-color: #1939af; padding-bottom: 20px; padding-top: 20px
    }
    nav>.gnb .deps2 > li {text-align: left; padding: 0 30px;}
    nav>.gnb .deps2 > li + li {margin-top: 10px}
    nav>.gnb > li.on2 .deps2 > li {pointer-events: visible}
    
    header.on nav {left: -100%}
    header nav a {color:#fff !important;}
    header.hover nav a {color:#fff !important;}
}
@media(min-width: 1201px) {
    nav>.gnb li:hover a:after {width:calc(100% - 40px);}
    nav>.gnb .deps2 > li a:hover:before {width: 100%}
}


/*-------------------------------------------------*/
header .header_utils {display:flex; flex-direction: row;}
header .header_utils a{padding:1rem 0 1rem 2rem;}
header .header_utils a:first-child{padding-left:0;}
header .header_utils a:last-child{padding-right:0;}
header .header_utils span{position:relative;}
header .header_utils span:before {
    position: absolute; left: 50%; bottom: -2px; transform: translate(-50%, 100%); 
    background-color: #fff; content: ""; transition: all .3s; display: block; width: 0; height: 1px; background-color: var(--color_basic2);
}
header .header_utils a:hover span:before {width:100%;}
header .header_utils a.on:hover span:before {width:100%;}
header .header_utils .ham,
header nav .close ,
header nav .mobile_utils{display:none}
#main header .header_utils span:before {background-color: var(--color_basic1);}
#main header.hover .header_utils span:before,
#main header.scroll .header_utils span:before { background-color: var(--color_basic2);}


@media(max-width: 1200px){
    header .header_utils a {display:none}
    header .header_utils .ham,
    header nav .mobile_utils {display:block;}
    header nav .close{display:block; position:absolute; top: 2rem; right: 1.5rem; color:var(--color_basic1);}
    header nav .close::before{content:"\f00d"; font-size:2.68rem; font-weight:300; font-family: "Font Awesome 6 Pro";}
    header .header_utils .ham::before{content: "\f0c9"; font-size:2.58rem; font-weight:300; font-family: "Font Awesome 6 Pro";}

    header nav .mobile_utils{margin:4rem 2rem 0; width:calc(100% - 4rem);}
    header nav .mobile_utils>a{
        font-size:1.7rem; margin:1.6rem 0; padding:1.8rem 0; width:100%; text-align:center;
        border: 1px solid #ffffff29;  border-radius:0.8rem; display:block; 
    }

    header.scroll .header_utils .ham {color: #000 !important;}
    #main header .header_utils .ham {color: #fff;}     
}

/*-------------------------------------------------*/
header h1 a{display:flex; text-decoration:none;}
header h1 a:hover, header h1 a:active, header h1 a:focus{text-decoration:none;}
header h1 strong{font-family:'NanumSquareNeo';}
header h1 strong:nth-child(1){font-size:3.6rem; font-weight:900;}
header h1 strong:nth-child(2){font-size:1.8rem; font-weight:700; margin:1.6rem 0 0 0.6rem;}

header h1 strong:nth-child(1){color: var(--color_Brand);}
header h1 strong:nth-child(2){color: var(--color_basic2);}

#main header h1 strong { color: #fff;}
#main header.hover h1 strong:nth-child(1),
#main header.scroll h1 strong:nth-child(1) { color: var(--color_Brand);}
#main header.hover h1 strong:nth-child(2),
#main header.scroll h1 strong:nth-child(2) { color: var(--color_basic2);}

@media(max-width: 1200px){
    header h1 strong:nth-child(1){font-size:2.6rem;}
    header h1 strong:nth-child(2){font-size:1.6rem; margin:0.7rem 0 0 0.6rem;}
}
/* header end -------------------------------------------------------------------------------------------------*/









/* footer start -------------------------------------------------------------------------------------------------*/
footer {background: var(--color_bg_footer); color:var(--color_basic1); padding: 7rem 4rem; margin-top: 10rem; position:relative; clear:both; } 
.ft_layout .ft_content {display:flex; position:relative;}
.ft_layout .ft_logo {margin:0 7rem 0 0; font-size:2.2rem; font-weight:600; line-height:1.4;}
.ft_layout .ft_info dl{font-size:1.5rem; line-height:1.7; display:flex; flex-wrap:wrap;}
.ft_layout .ft_info dt{flex: 0 0 9rem;}
.ft_layout .ft_info dd{flex: 1 1 calc(100% - 9rem);}
.ft_layout .ft_info dd>span{padding-right:1.2rem;}

.ft_layout .ft_link {display:flex; margin-top:4.5rem;}
.ft_layout .ft_link li + li {margin-left:2.5rem;}
.ft_layout .ft_link a {font-size:1.4rem;}
.ft_layout .ft_copy {font-size:1.2rem; margin-top:1.5rem; color:rgba(255,255,255,0.2);}
@media(max-width: 1400px){
    .ft_layout .ft_content{flex-direction:column;}
    .ft_layout .ft_logo{margin:0 0 1.4rem 0;}
    .ft_layout .ft_logo br {display:none}
    .ft_layout .ft_info dl{font-size:1.4rem;}  
    .ft_layout .ft_link{margin-top:4rem;}        
}
@media (max-width: 1200px){
    footer {padding: 7rem 2rem;}
}
@media(max-width: 768px){
    footer {padding: 7rem 1.5rem 8rem;}
    .ft_layout .ft_logo{margin:1rem 0 1rem 0; font-size:2.1rem;}      
    .ft_layout .ft_info dl{margin-left: 0; font-size:1.1rem;}       
    .ft_layout .ft_info dt{flex: 0 0 7rem;}
    .ft_layout .ft_info dd>span{padding-right:0; display: block; line-height:2;}   
    .ft_layout .ft_link {margin-top:0; position:absolute; top:4rem;}
    .ft_layout .ft_link  a {font-size:1.2rem;}
    .ft_layout .ft_copy {font-size:1.2rem; margin-top:3rem;}
} 

/*-------------------------------------------------*/
footer .top_btn {
    width:6rem; height:6rem; border-radius:50%;
    position:absolute; right:4rem; top:0;  z-index:999; opacity:1; transform: translateY(-50%);
    background-color: var(--color_Brand); transition: background 0.3s ease-in-out , opacity .5s;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
footer .top_btn button {width:100%; height:100%;}
footer .top_btn button::before{content:"\f062"; color:var(--color_basic1); font-size:2rem; font-weight:300; font-family: "Font Awesome 6 Pro";}

@media(max-width:768px){
    footer .top_btn {width:5rem; height:5rem; right:1.5rem;}    
    footer .top_btn button::before{font-size:1.8rem;}
}
@media(min-width: 1201px){
    footer .top_btn:hover {background-color:var(--color_basic2);}
}

/*-------------------------------------------------*/
footer .ft_utils{position: absolute; right:0; top:0;}
footer .ft_utils .ft_site_list>select{display:none;}
footer .ft_utils .ft_site_list{display:flex; flex-direction: column; width:100%; position: relative;}
footer .ft_utils .ft_site_list>a{ padding: 1.4rem 1rem; padding-right:10rem; border-bottom: 1px solid #ffffff20; text-decoration:none; position:relative;}
footer .ft_utils .ft_site_list>a:first-child{border-top: 1px solid #ffffff20;}
footer .ft_utils .ft_site_list>a::after{
    content: "\f105"; font-size:1.6rem; font-weight:300; font-family: "Font Awesome 6 Pro";
    position: absolute; right:1rem; top:50%; transform: translateY(-50%);
}
@media (max-width: 1200px){
    footer .ft_utils .ft_site_list>a{display:none;}
    footer .ft_utils .ft_site_list>select{
        -webkit-appearance:none; /* for chrome */ -moz-appearance:none; /*for firefox*/ appearance:none;
        display:block; width:100%; padding: 1rem 1rem; padding-right:7rem; font-size: 1.4rem; border:0;
    }
    footer .ft_utils .ft_site_list>select::-ms-expand{display:none;/*for IE10,11*/}
    footer .ft_utils .ft_site_list::after{
        content:"\f107"; font-weight:400; font-family: "Font Awesome 6 Pro";
        position: absolute; right:1rem; top:50%; transform: translateY(-50%); color:#000;
    }
}
@media (max-width: 768px){  
    footer .ft_utils{position: absolute; left:0; top:calc(100% + 7rem );}
}

/* footer end -------------------------------------------------------------------------------------------------*/