@CHARSET "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); /*inter폰트/대표문의 숫자 사용*/
@font-face{font-family:"PretendardVariable"; src:url("/khacademy/resources/fonts/PretendardVariable.ttf") format('woff');}
@font-face{font-family:"PretendardB"; src:url("/khacademy/resources/fonts/Pretendard-Bold.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-Bold.woff") format('woff');}
@font-face{font-family:"PretendardEB"; src:url("/khacademy/resources/fonts/Pretendard-ExtraBold.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-ExtraBold.woff") format('woff');}
@font-face{font-family:"PretendardEL"; src:url("/khacademy/resources/fonts/Pretendard-ExtraLight.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-ExtraLight.woff") format('woff');}
@font-face{font-family:"PretendardL"; src:url("/khacademy/resources/fonts/Pretendard-Light.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-Light.woff") format('woff');}
@font-face{font-family:"PretendardM"; src:url("/khacademy/resources/fonts/Pretendard-Medium.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-Medium.woff") format('woff');}
@font-face{font-family:"PretendardR"; src:url("/khacademy/resources/fonts/Pretendard-Regular.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-Regular.woff") format('woff');}
@font-face{font-family:"PretendardSB"; src:url("/khacademy/resources/fonts/Pretendard-SemiBold.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-SemiBold.woff") format('woff');}
@font-face{font-family:"PretendardT"; src:url("/khacademy/resources/fonts/Pretendard-Thin.ttf") format('truetype'); src:url("/khacademy/resources/fonts/Pretendard-Thin.woff'") format('woff');}
:root{
    /*
    --main-font-family: 애플고딕R
    --main-letter-spacing: -3%;
    --main-line-height: 24px;
    --main-title-margin-bottom: 40px; 
    --main-container-padding:120px 0;
    --main-box-shadow: 
    */
    --max-width-page: 1190px;
    --min-width-page: 320px;

    --main-font-size: 16px;
    --main-font-family:"PretendardR", san-serif;
    --letter-spacing: -0.03em;

    --color-black: #222;
    --color-black2: #4D5762;/*header, rightbar a태그, quick-line*/
    
    --color-point-blue: #3182f6;
    --color-darkblue: #001f6a;
    --color-primary: #1e5eff;

    --color-bg-white: #f7f9fd;
    --color-bg-lightgray: #e8e8f0;
    --color-bg-darkgray:#24292F;/*footer*/
    
    --color-btn-color1: #222;
    --color-btn-color2: #f7f9fd;
    
    --color-line:#d6d9e6;
    
    --color-btn-blue: #3182f6;
    --color-btn-black: #222;
    --color-line-btn:#dee2e9;
    
    --content-padding: 120px;
    --content-padding-tablet: 80px;
    --content-padding-mobile: 70px;
    
    /*서브페이지 - 이미지배너*/
    --main-title:52px;
	--tb_main-title:42px;
	--m_main-title:30px;
	
	--main-subtitle:20px;
	--tb_main-subtitle:19px;
	--m_main-subtitle:16px;
	
}

*{margin: 0; padding: 0; box-sizing: border-box;}
img{border: 0; vertical-align: middle;}
video{object-fit: cover; width: 100%;}
li{list-style: none;}
a{text-decoration: none; color: inherit;}
button{border: none; outline: none; background-color: inherit ;cursor: pointer;}
body{width: 100%; overflow-x: hidden; font-size: var(--main-font-size); font-family:var(--main-font-family); min-width: var(--min-width-page); letter-spacing: var(--letter-spacing); background-color:#fff; color:#222;}
html{overflow-x: hidden; overflow-y: auto; -ms-content-zooming: none; -ms-touch-action: pan-x pan-y;} 
table{border-spacing: 0; border-collapse: initial;}
th, td {vertical-align: middle;}

.wrap{width: 100%; margin: 0 auto;}
.inner{max-width: var(--max-width-page); width:100%; margin:0 auto; padding: 0 1%; margin: 0 auto;}

/*radio버튼*/
.sr-only{position:absolute; overflow:hidden; width:1px; height:1px; padding:0; margin:-1px; border:0; clip:rect(0,0,0,0);}
/*only-tablet*/
.show-tb{display:none;}
.show-m{display:none !important;}
.block-tb{display:inline;}

/*title 내부 span카드항목*/
.title-ptBlue{color:var(--color-primary);}
.titleCard{display:inline-block; background:#4D5762; color:#fff; font-size:13px; margin-left:6px; padding:2px 5px; border-radius:6px; vertical-align:middle; margin-bottom:3px; font-family:var(--main-font-family); font-weight:500;}
.titleCard.cardBright{background:#E8EBF0 !important; color:#4D5762 !important;}

/*****header*****/
header{transition: background-color 0.3s ease; -webkit-transition: background-color 0.3s ease; width: 100%; height: 86px; margin: 0 auto; position: fixed; z-index: 101; background-color: rgba(2,16,80,.28); color: var(--color-gray);}
header nav{display:flex; justify-content: space-between; align-items: center; position: relative; height: 86px; color:#fff;}
header nav .gnb-logo{text-align:center;}
header nav .gnb-logo img{width:183px; height:42px;}
header nav .gnb-logo p{font-size:13px; font-weight:400; letter-spacing:-0.1em; margin-top:2px;}

header nav .gnb-dept01{height:100%; display: flex; align-items:center; gap:8px;}
header nav .gnb-dept01>li{height:100%; display:flex; align-items:center; position:relative;}
header nav .gnb-dept01>li:after{content:''; width:100%; height:4px; position:absolute; bottom:-4px;}
header nav .gnb-dept01>li>a{display: block; padding: 20px 6px;}
header nav .gnb-dept02{display: none; width: 200px; overflow: visible; position: absolute; top: 90px; background-color: #000; border: 1px solid #414346; border-radius: 8px; padding: 17px; margin-left:-8px;}
header nav .gnb-dept02 li a{display:flex;  margin-bottom: 16px; position:relative;}
header nav .gnb-dept02 li a .menu-arrow-wrap{display:inline-block; margin-left:5px; overflow: hidden; position:relative; width: 20px; height:20px;}
header nav .gnb-dept02 li a .menu-arrow-wrap .arrow-items{transition: 0.3s; -webkit-transition: 0.3s; width: 15px; height: 15px;left: -20px; opacity:0; position: absolute; top: calc(50% - 9px); z-index: 1;}
header nav .gnb-dept02 li:last-child a{margin-bottom: 0;}
header nav .gnb-dept02 li a:hover{color:#fff;}
header nav .gnb-dept02 li a:hover .menu-arrow-wrap .arrow-items{opacity:1; left:0;}

header nav .gnb-more{display: flex; justify-content:center; align-items:center; position: relative;}
header nav .gnb-more a{display:block; padding: 20px 6px;}
header nav .gnb-more .btn-nationwide::before{content:''; display: inline-block; width: 1px; height: 14px; background-color: #d9d9d9; position:absolute; top: 24px;}
header nav .gnb-more .btn-fullMap-closed{display:none; position: absolute; left: 0;}
/*header nav .gnb-more .icon-call img{width:20px; height:auto; margin-top:2px;}
*/
/*****fullMap*****/
header nav .fullMap{display:none; width: 100%; height: 527px; position: fixed; left:0; top: 86px; z-index: 102; background-color: #fafafa;}
/*header nav .fullMap.fullMap-show{top:64px; display:block;}*/

.fullMap-bg{display:none; position:fixed; z-index:100; top: 64px; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.5);}

header nav .fullMap .inner{height:100%; padding: 42px 45px;}

/******/
header nav .fullMap .inner .fullMap-items{display:grid; grid-template-columns:repeat(4, 1fr); padding:0 0 2% 3%;}
header nav .fullMap .inner .fullMap-items:last-child{border-top:1px solid #D6D9E6; padding:2% 0 0 3%;}
header nav .fullMap .inner .fullMap-items dl dt{color: #222222; font-size: 17px; font-weight: 600; margin-bottom: 4%;}
header nav .fullMap .inner .fullMap-items dl dt a{display: block; width:100%; height:100%;}
header nav .fullMap .inner .fullMap-items dl dd{line-height:2;}
header nav .fullMap .inner .fullMap-items dl dd a {display:block; height:100%; width:100%;position: relative; color:var(--color-black2);}
header nav .fullMap .inner .fullMap-items dl .menu-arrow-wrap{display:inline-block; margin-left:5px; overflow: hidden; position:relative; width: 20px; height:20px;}
header nav .fullMap .inner .fullMap-items dl .menu-arrow-wrap .arrow-items{transition: 0.4s; -webkit-transition: 0.4s; height: 20px;left: -20px; opacity:0; position: absolute; top: 7px; width: 20px; z-index: 1;}
header nav .fullMap .inner .fullMap-items dl a:hover{color:#000;}
header nav .fullMap .inner .fullMap-items dl a:hover .menu-arrow-wrap .arrow-items{opacity:1; left:0;}

/*****quick-rightBar*****/
.quick-rightBar{display: block; width: 106px; padding: 4px; position: fixed; right: 30px; top: 20%;text-align: center;background-color: #fff;border-radius: 14px;box-shadow: 0px 0px 9px 4px rgb(176 176 176 / 12%);z-index: 100;
/*배너문제로 추가*/overflow: hidden;}
.quick-rightBar ul{display: flex; flex-direction: column; align-items: center;}
.quick-rightBar ul li{width: 74px; border-bottom: 1px solid #D9D9D9; cursor: pointer;}
.quick-rightBar ul li a{width: 100%;display: block;padding: 15px 0 12px 0; color:var(--color-black2); font-size: 14px;}
.quick-rightBar ul li a img{margin-bottom: 7px;}
.quick-rightBar ul li:nth-child(5){border-bottom: none;}
.quick-rightBar ul li:last-child{width: 100%;border-bottom: none;background-color: #001f6a;border-radius: 12px; font-size: 21px; color: #3182f5; font-size: var(--main-font-size); width:98px; padding:8px 21px; letter-spacing: 0; font-weight:600;}
.quick-rightBar ul li:last-child span{padding: 0; color: #fff; font-family: "Inter", sans-serif; font-weight: 700; margin-bottom: 5px; font-size:21px; letter-spacing: -0.02em;}

.open_mainInquiry-popup{cursor:pointer;}/*대표문의 2개 클릭시 팝업오픈*/

/****quick-chatbot*****/
.quick-chatbot{width:160px; height:60px; z-index:100; background-color: #1e5eff; position:fixed; bottom:50px; right:30px; border-radius:30px; color:#fff;}
.quick-chatbot a{ display: block; text-align: center; line-height: 60px; font-size: 18px; font-weight:600;}
.quick-chatbot a img{margin-right:5px;}
.quick-chatbot a::after{content:''; width:14px; height:14px; background-color:#EC1F27; border:2px solid #fff; border-radius: 14px; position:absolute; top:1px; right:0; transition: all 350ms;}
.quick-chatbot a:hover::after{color: rgb(254, 1, 1); filter: drop-shadow(0 0 2px rgba(254, 1, 1,0.7)) drop-shadow(0 0 5px rgba(254, 1, 1,0.7)) drop-shadow(0 0 15px rgba(254, 1, 1,0.7)); }


/*footer*/
footer{width:100%; height:453px; background-color: var(--color-bg-darkgray);}
footer .inner{width:100%; height:100%; padding:46px 1%;}
footer .inner .bottom-left{width:100%; color: #90969A; font-size: 14px;}
footer .inner .bottom-left hr{border:1px solid #90969A; margin-bottom:2%;}
footer .inner .bottom-left h1{margin-bottom: 14px;}
footer .inner .bottom-left ul{display:flex; color:#A6ABAE; font-size: 15px; margin-bottom:2%;}
footer .inner .bottom-left ul li{margin-right:16px;}
footer .inner .bottom-left ul li:last-child{margin-right:0;}

footer .inner .bottom-left ul li:hover{color:#fff;}

footer .inner .bottom-left .bottom-address dl{margin-bottom: 32px; letter-spacing:0; line-height:1.5;}
footer .inner .bottom-left .bottom-address dl dt{margin-bottom:7px;}
footer .inner .bottom-left .bottom-address dl dd{}
footer .inner .bottom-left .bottom-address p{letter-spacing:0;}

footer .inner .bottom-right{width:100%; position:relative; padding-top: 30px;}
footer .inner .bottom-right ul{width:100%; height:100%; display:flex;}
footer .inner .bottom-right ul li{width:48px; height: 48px; margin-right: 16px; border: 1px solid rgba(189,192,195,0.6); border-radius: 4px;}
footer .inner .bottom-right ul li a{display:block; width:48px; height: 48px; text-align:center;}
footer .inner .bottom-right ul li a img{margin:9px 0 0 -1px;}

/*서브페이지 - 이미지배너 사용*/
.title-top{width:100%; height:484px; margin:0 auto;}
.title-top>.inner{width:100%; height:100%; color:#fff; display:flex; flex-direction: column; justify-content: center;}
.title-top .inner h2{font-size: var(--main-title); margin-bottom:24px;}
.title-top .inner p{font-size: var(--main-subtitle); color:#fff; font-weight:200;}
.title-top .inner div{margin-top:24px;}
.title-top .inner div span{background-color:rgba(127,129,135,.8); border-radius:77px; padding:8px 12px; margin-right:6px;}
.title-top .inner div span:last-child{margin-right:0;}

/*서브페이지 - 카드형식 공통사용*/
.list-container{padding:var(--content-padding) 0;}
.wrap-list-item{width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.wrap-list-item .list-item{display:block; position:relative; width:100%; height:232px; border-radius:28px; overflow:hidden; transform:scale(0.9); -webkit-transform:scale(0.9);  transition: transform 1s ease; -webkit-transition: transform 1s ease;}
.inner .wrap-list-item .list-item.enlarge{transform:scale(1); -webkit-transform:scale(1);}
.wrap-list-item .list-item>div{object-fit:cover; width:100%; height:100%; transform:scale(1.0); -webkit-transform:scale(1.0);  transition: transform 0.5s ease; -webkit-transition: transform 0.5s ease;}
.wrap-list-item .list-item>div:hover{transform:scale(1.07); -webkit-transform:scale(1.07);}

.wrap-list-item .list-item>div .list-gradient{width:100%; height:100%; background: linear-gradient(rgba(25,25,25,0) 10%, rgba(25,25,25,0.02) 33%, rgba(25,25,25,0.2) 68%, rgba(25,25,25,0.7) 100%); background: -webkit-linear-gradient(rgba(25,25,25,0) 10%, rgba(25,25,25,0.02) 33%, rgba(25,25,25,0.2) 68%, rgba(25,25,25,0.7) 100%);}
.wrap-list-item .list-item .list-txt{font-size:20px; color:#fff; position:absolute; bottom: 20px; left:24px;}
.wrap-list-item .list-item .list-txt span{display:block; font-size: 15px; color:#D9D9D9; margin-top:7px;}