@charset "utf-8";
@import url('root.css'); /* 변수 */
@import url('font.css'); /* 폰트 */

/* Common */
.compad {padding:160px 0 150px; box-sizing:border-box;}
.compad2 {padding:50px 0 150px; box-sizing:border-box;}
.compad3 {padding:160px 0 50px; box-sizing:border-box;}
.compad4 {padding:50px 0 50px; box-sizing:border-box;}

/* 슬릭기본 */
.slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-track {display:flex; }
.slick-slide{border:0; outline: 0 !important;}
.slick-initialized .slick-slide{display:block; outline: 0 !important;}
/* 슬릭기본 */

/* 레이아웃 */
#wrap{position:relative; width:100%; min-width:320px;}

.noScroll {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}
.ls0 {letter-spacing:0 !important;}

.w1280{max-width:1280px; width: 97%; margin:0 auto;}

/* 폰트 */
.fs80{font-size:var(--fs80); font-weight: 700; line-height: 120%; letter-spacing: -4px; color:var(--title-color);}
.fs75 {font-size: var(--fs75); font-weight: 400; line-height: 113.333%; color: var(--title-color);}
.fs50{font-size:var(--fs50); font-weight: 700; line-height: 120%; letter-spacing: -1px; color:var(--title-color);}
.fs40{font-size:var(--fs40); font-weight: 500; line-height: 100%; letter-spacing: -1px; color:var(--title-color); font-family: var(--eng);}
.fs24{font-size:var(--fs24); font-weight: 700; line-height: 100%; letter-spacing: -1px; color:var(--title-color);}
.fs20{font-size:var(--fs20); font-weight: 400; line-height: 100%; letter-spacing: -1.6px; color:var(--text-color);}
.fs18{font-size:var(--fs18); font-weight: 400; line-height: 160%; letter-spacing: -1.6px; color:var(--text-color);}


/* 버튼 */
.btn_area .btn { padding: 20px 40px; border: 1px solid var(--text-color); font-style: normal; font-weight: 300; line-height: 100%; background: transparent; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow:hidden;}

.btn_area .btn_w { display: block; font-size: 1rem; font-weight: 400; color: var(--text-color); z-index: 1;}
.btn_area .btn_w:after { position: absolute; content: ""; width: 0; height: 100%; top: 0; right: 0; z-index: -1; background: var(--text-color); transition: all 0.3s ease;}
.btn_area .btn_w:hover { color: var(--white); }
.btn_area .btn_w:hover:after { left: 0; width: 100%;}

.btn_area .btn_wb { display: block; border: 1px solid var(--white); font-size: 1rem; font-weight: 400; color: var(--white); z-index: 1;}
.btn_area .btn_wb:after { position: absolute; content: ""; width: 0; height: 100%; top: 0; right: 0; z-index: -1; background: var(--text-color); transition: all 0.3s ease;}
.btn_area .btn_wb:hover { border: 1px solid var(--text-color); color: var(--white); }
.btn_area .btn_wb:hover:after { left: 0; width: 100%;}


.btn_area .btn_b { display: block; background:var(--text-color); font-size: 1rem; font-weight: 400; color: var(--white); z-index: 1;}
.btn_area .btn_b:after { position: absolute; content: ""; width: 0; height: 100%; top: 0; right: 0; z-index: -1; background: var(--white); transition: all 0.3s ease;}
.btn_area .btn_b:hover { color: var(--text-color); }
.btn_area .btn_b:hover:after { left: 0; width: 100%;}


/* 공용 비쥬얼 타이틀 */
.visual_titArea {text-align: center;}
.visual_titArea .fs20 {padding: 60px 0 98px;}


#header{position:fixed; left:0; top:0; z-index:9999999999; transition:all .4s; width: 100%; overflow: hidden; background: var(--white); }
#header .header_in{display: flex; align-items:center; justify-content: space-between; padding:36px 0; box-sizing:border-box; transition:all .4s;}
#header .header_in h1{position: relative; z-index: 5;}
/* #header .header_in h1 a{ width: 174px; height:32px;} */
#header .header_in h1 a img{width: 71px; height:23px; }
#header .header_in .topUtil {}
#header .header_in .topUtil .gnb {}
#header .header_in .topUtil .topUtil_list {display:none;}
#header .header_in .topUtil .topUtil_list li a{display: flex; align-items:center; justify-content: center; width:36px; height:36px; border-radius:100%; box-sizing:border-box; transition:all .3s linear;}
#header .header_in .topUtil .topUtil_list li.btnMenu_m a{border:1px solid var(--black);}

#header.nofixed{top:-200px;}
#header.up{height:540px; background:var(--white);}

#header.up.fixed{height:540px;}}

#header.fixed{background:var(--white);}
#header.fixed .header_in{padding: 36px 0;}


.gnb ul {display:flex; flex-wrap:wrap; align-items:center;}
.gnb ul li { margin: 0 20px; }
.gnb ul li:last-child { margin: 0; }
.gnb ul li a {font-family: var(--eng); font-size:1rem; font-weight: 500; line-height: 100%; color:var(--text-color); padding:10px 0; text-transform: uppercase;}
.gnb ul li .btn_area .btn{padding:20px 27px 18px 26px; margin-left: 17px;}
.gnb ul li.on a {color:var(--black); text-decoration:underline; text-underline-offset:3px;}


/* 모바일 메뉴 */
.mo_menu {width:100%; height:100%; position:fixed; right:0; top:0; z-index:9999999991; overflow-x:hidden; overflow-y:auto; display:none; background:var(--main);}

.mo_menu .header_in{display:flex; align-items:center; justify-content:space-between; padding: 19px 0; position:relative; z-index:10;}
.mo_menu .header_in h1 {display:block; line-height:1;}
.mo_menu .header_in h1 a {display:block; line-height:1;}
/* .mo_menu .header_in h1 a img{width: 152px; height:28px; } */
.mo_menu .header_in h1 a img{width: 71px; height:23px; }
.mo_menu .header_in .topUtil_list {}
.mo_menu .header_in .topUtil_list ul {display:flex; flex-wrap:wrap; align-items:center; gap:0 40px;}
.mo_menu .header_in .topUtil_list ul li {}
.mo_menu .header_in .topUtil_list ul li a{display: flex; align-items:center; justify-content: center; width:36px; height:36px; border-radius:100%; box-sizing:border-box; transition:all .3s linear;}
.mo_menu .header_in .topUtil_list ul li a.btnMenu_mClose{border:1px solid var(--white)}

.mo_menu .menuList{position: absolute; width:100%; height: 100%; display: flex; flex-direction: column; justify-content: center; top:0; left:0;}
.mo_menu .menuList .list{text-align:left;  }
.mo_menu .menuList .list > li{margin:0 0 20px;}
.mo_menu .menuList .list > li:last-child{margin:0;}
.mo_menu .menuList .list > li > a{display: inline-block; font-size:2rem; color:var(--white); font-weight:500; font-family:var(--eng); line-height:120%; position: relative;}
.mo_menu .menuList .list > li > a:before{content: attr(data-up); white-space: nowrap; font-size:inherit; font-family:var(--eng); line-height: inherit; font-weight: inherit;  overflow: hidden; position: absolute; left: 0; top:0; filter:none; color:var(--white); background: var(--white); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position:100% 100%; text-decoration: none; z-index: 2; width: 0; transition:all 0.2s;}
.mo_menu .menuList .list > li > a:hover:before{width: 100%; transition:width 0.4s ease;}
/* .mo_menu .menuList .list > li.active > a:before{width: 100%; transition:width 0.4s ease;}
.mo_menu .menuList .list > li .sMenu{display: none; padding: 30px 0 10px;}
.mo_menu .menuList .list > li .sMenu li{line-height: 120%; padding: 0 0 15px;}
.mo_menu .menuList .list > li .sMenu li:last-child{padding: 0;}
.mo_menu .menuList .list > li .sMenu li a{display: inline-block; font-size:1.944rem; line-height: 140%; font-weight: 400; color:rgba(255,255,255,.7); transition:all .3s linear;}
.mo_menu .menuList .list > li .sMenu li a:hover{color:var(--white);}
.mo_menu .menuList .list > li .sMenu li a sup{font-size:1rem;} */

.mo_menu .btn_area {position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px;}
.mo_menu .btn_area .btn_w {font-weight: 500; background: var(--white); color: var(--black); text-align: center; z-index: 1;}
.mo_menu .btn_area .btn_w:after { background: var(--black);}
.mo_menu .btn_area .btn_w:hover { color: var(--white); }


#contents{position: relative; margin-top: 135px;}

#talk {background: var(--white);}
#talk .btn_area {display: flex; justify-content: center;}
#talk .btn_area .btn {padding: 20px 40px 20px 60px;}
#talk .btn_area .btn_b {display: flex; align-items: center; font-size: 1.875rem; }
#talk .btn_area .btn_b svg { margin-left: 30px; transition: all 0.3s ease; }
#talk .btn_area .btn_b:hover path { fill: var(--text-color); transition: all 0.3s ease; }


/* footer */
#footer {background:var(--white);}
#footer .foot_top {display:flex; flex-wrap:Wrap; align-items: center; justify-content:space-between;background: var(--grayBg);border-radius: 10px; padding: 58px 60px; box-sizing: border-box;}
#footer .foot_top .fs18 {margin-top: 22px;}
#footer .foot_top .btn_area .btn_w {background:none;}
#footer .foot_bottom { padding: 50px 0 58px;/*padding: 50px 98px 58px 10px;*/ box-sizing: border-box;}
#footer .foot_sitemap{display: flex; justify-content:space-between; margin: 0 98px 0 10px;}
#footer .foot_sitemap > dl{}

#footer .foot_sitemap > dl > dt{ font-family: var(--eng); font-size:1.25rem; font-weight: 500; color:#888; line-height:100%; margin-bottom: 30px;}
#footer .foot_sitemap > dl > dd > a{display: block;font-family: var(--eng); font-size:1rem; font-weight: 400; line-height: 230%; color:#666;}

#footer .foot_info {display:flex; align-items: center; justify-content: center; border-top: 1px solid #cccccc; margin-top: 60px; padding-top: 60px;}
#footer .foot_info li {color: #727984; font-size: 0.813rem; font-weight: 300; margin-right: 50px;}
#footer .foot_info li:last-child {margin-right: 0;}
#footer .foot_info li::before {position: absolute; content: " "; margin-left: -25px; margin-top: 2px; width: 1px; height: 24px; background: #d4d6da;}
#footer .foot_info li:first-child::before {display: none;}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

    .compad {padding:60px 0 80px;}

    .w1280{width: 96%;}

    .fs80{ letter-spacing: -1px;}
    .fs50{line-height: 140%;}
    .fs40{line-height: 140%;}
    .fs20{line-height: 160%;}

    .visual_titArea .fs20 {padding: 40px 0 78px;}

    #header .header_in{padding:5px 0;}
    /* #header .header_in h1 a img{width: 152px; height:28px; } */
    #header.fixed .header_in{padding: 5px 0;}
    
    #header .header_in .topUtil .gnb {display:none;}
    #header .header_in .topUtil .topUtil_list {display:block;}

    #contents{ margin-top: 73px;}

    #footer .foot_top { padding: 30px 20px;}
    #footer .foot_top .btn_area {margin-top: 20px;}

    #footer .foot_bottom {padding: 60px 0 30px 0; box-sizing: border-box;}
    #footer .foot_sitemap{flex-wrap: wrap; margin: 0;}
    #footer .foot_sitemap > dl{width: 50%; margin-bottom: 60px;}
    #footer .foot_sitemap > dl:last-child {margin-bottom: 0;}

    #footer .foot_sitemap > dl > dt{ font-size:1.125rem; margin-bottom: 20px;}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
    .w1280{width: 95%;}
}


/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){
    
    .w1280{width: 92%;}

    #footer .foot_info { flex-wrap: wrap; justify-content: flex-start; margin-top: 30px; padding-top: 30px; }
    #footer .foot_info li {margin-top: 10px;}
    #footer .foot_info li:first-child {margin-top: 0;}
    #footer .foot_info li:nth-child(2)::before {display: none;}
}