@charset "utf-8";

/* CSS Document */
/* ==================================================
	웹 폰트
================================================== */
@import url(../../fonts.googleapis.com/css~family=Roboto+Condensed_400,700.css0');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*Raleway*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*font-family: 'Raleway', sans-serif;*/

/*RixYeoljeongdo_Regular*/
@font-face {
    font-family: 'RixYeoljeongdo_Regular';
    src: url(../../cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2102-01@1.0/RixYeoljeongdo_Regular.wofff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*font-family: 'InkLipquid'; sans-serif;*/
@font-face {
    font-family: 'InkLipquid';
    src: url(../../cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.wofff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*font-family:'Bazzi', sans-serif;*/
@font-face {
    font-family: 'Bazzi';
    src: url(../../cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/Bazzi.wofff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*font-family:'BinggraeSamanco', sans-serif;*/
@font-face {
    font-family: 'BinggraeSamanco';
    src: url(../../cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/BinggraeSamanco.wofff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ==================================================
	공통레이아웃
================================================== */
#header, #footer {width:100%;}
.size {width:100%; max-width:1280px; height:auto; margin:0 auto;}
.inner  {width:100%; box-sizing:border-box; }
.wrapper {min-width:1630px; position:relative; overflow:hidden;}

/* ==================================================
	header
================================================== */

.header{width:100%; height:80px; position:absolute; left:0; top:0; z-index:1;  background-color:rgba(255, 255, 255, 0.2); border-bottom:1px solid #e9e9e9; box-sizing:border-box; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;}
.header.on, .header.all_on{background-color:#fff; border-bottom:1px solid #f4b264; }
.header h1{position:absolute; left:0; top:0;}
.header h1 a{display:block; padding:0 40px; box-sizing:border-box; height:80px; line-height:75px;}
.header h1 a .logo_mo{display:none;}
.header .gnb{text-align:center;}
.header .gnb > ul{display:inline-block;}
.header .gnb > ul > li{float:left; position:relative;}
.header .gnb > ul > li > a{display:block; width:165px; height:80px; font-size:1.7rem; font-weight:600; color:#444; text-align:center; line-height:80px;}
.header .gnb > ul > li:hover > a{color:#fff; background-color:#ff8b00;}
.header .gnb > ul > li > ul{display:none; padding:15px 0; box-sizing:border-box; position:absolute; left:0; top:80px; z-index:1; width:100%; background-color:#fff; border-radius:0 0 5px 5px; box-shadow:0 5px 15px 2px rgba(0,0,0,0.1);}
.header .gnb > ul > li > ul > li > a{display:block; width:100%; height:40px; font-size:1.5rem; font-weight:300; color:#777; text-align:center; line-height:40px;}
.header .gnb > ul > li > ul > li:hover > a{font-weight:500; color:#333;}
.header .all_btn{position:absolute; right:0; top:0; display:block; width:100%; max-width:100px; height:80px; text-align:center; line-height:80px;}
.header .all_btn img{display:none;}
.header .all_btn img.on{display:inline-block;}
.util{position:absolute; right:20px; top:0; z-index:50;}
.util {display:block; padding:15px 32px; box-sizing:border-box; text-align:center; background: #ff8b00; background: -moz-linear-gradient(-45deg, #ff8b00 0%, #ca5100 100%); background: -webkit-linear-gradient(-45deg, #ff8b00 0%,#ca5100 100%); background: linear-gradient(135deg, #ff8b00 0%,#ca5100 100%); border-radius:0 0 20px 20px;}
.util span{display:block; padding-bottom:10px; box-sizing:border-box; font-size:1.8rem; font-weight:900; color:#fff; letter-spacing:-0.5px; position:relative; border-bottom:1px solid #e18445;}
.util span::before{content:''; display:block; clear:both; width:33px; height:29px; position:absolute; left:23px; top:50%; margin-top:-14.5px; background-image:url(../img/ico_call.pngg'); background-repeat:no-repeat; background-position:50% 50%;}
.util em{display:block; padding-top:10px; box-sizing:border-box; line-height:1.2;}
.util em b{font-weight:800;}


/* ==================================================
	footer
================================================== */
.footer{position:relative; z-index:1;}
.footer::before, .footer::after{content:''; display:block; clear:both; width:50%; height:4px; position:absolute; top:0; z-index:10;}
.footer::before{left:0; background-color:#ff8b00;}
.footer::after{right:0; background-color:#ff8b00;}
.footer .f_top{padding:12px 40px; box-sizing:border-box; background-color:#f8f8f8; text-align:center;}
.footer .f_top ul{display:inline-block;}
.footer .f_top ul li{float:left;}
.footer .f_top ul li a{display:block; padding:0 15px; box-sizing:border-box; font-size:1.3rem; font-weight:400; color:#a39696; letter-spacing:-0.25px; position:relative;}
.footer .f_top ul li.pic a{padding-right:0;}
.footer .f_top ul li:first-child a::before{display:none;}
.footer .f_btm{padding:30px 40px 50px; box-sizing:border-box;text-align:center}

.tel_rale{font-size:2.1rem; font-weight:300;  color:#fff; letter-spacing:0;}
.tel_rale b{font-weight:800;}




/************ 퀵 오버시 텍스트는 _inc/quick.asp **********************/
.quick {
    position: fixed;
    bottom: 5%;
    right: 1.875em;
    z-index: 90; }
    .quick .quick-box {
      display: block; }
      .quick .quick-box .quick-item {
        width: 3.875em;
        height: 3.875em;
        margin-bottom: 0.5625em;
        border-radius: 100%;
        -webkit-box-shadow: 5px 5px 5px rgba(59, 59, 59, 0.2);
        box-shadow: 5px 5px 5px rgba(59, 59, 59, 0.2); }
        .quick .quick-box .quick-item a {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: center;
          background-size: auto;
          word-break: keep-all;
          white-space: nowrap;
          border-radius: 100%; }
          .quick .quick-box .quick-item a::before {
            display: inline-block;
            color: #ffffff;
            font-size: 0.75em;
            font-weight: 100;
            line-height: 1;
            padding: 0.71667em 1.03333em;
            border-radius: 2em;
            background-color:#8d8d8d;
            position: absolute;
            top: 50%;
            right: 0;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            -webkit-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            z-index: -1;
            opacity: 0; }
        .quick .quick-box .quick-item:nth-child(1) a {
          background-image: url(/image/main/btn_appli.png); background-size: 50px;}
        .quick .quick-box .quick-item:nth-child(2) a {
          background-image: url(/image/main/btn_leveltest.png); background-size: 40px;}
        .quick .quick-box .quick-item:nth-child(3) a {
          background-image: url(/image/main/icon_kakao.png); background-size: 50px;}
        .quick .quick-box .quick-item:nth-child(1) a {
          background-color: #6a6a6a; }


        .quick .quick-box .quick-item:hover a::before {
          right: 5.16667em;
          -webkit-transform: translate(-0.83333em, -50%);
          -ms-transform: translate(-0.83333em, -50%);
          transform: translate(-0.83333em, -50%);
          opacity: 1; }
  /************ 퀵 오버시 텍스트는 _inc/quick.asp **********************/