@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Paybooc';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocLight.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Paybooc';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocMedium.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Paybooc';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocBold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Paybooc';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/bccard/PayboocExtraBold.ttf') format("truetype");
    font-display: swap;
}





/* common */
html, body {width: 100%; height: 100%; width: 100%; font-size: 100%;}
* {margin: 0; padding: 0; list-style:none; font-family: 'Paybooc'; letter-spacing: -0.5px;outline: none;box-sizing: border-box; word-break: keep-all; font-weight:400; line-height: 1.5;}
ul > li > a { text-decoration: none; }
a {color: #666; text-decoration: none;}
em {font-style: normal}
table { border-collapse: collapse; }
input {box-sizing: border-box; background-color: #fff; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button {cursor: pointer;border: none;}
button:focus {outline: none;}
i {display: inline-block;}
select {box-sizing: border-box; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */
textarea {box-sizing: border-box; background-color: #fff; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.clear::after{display:block; content:""; clear: both;}


/* LAYOUT */
html.fix {position: fixed; left: 0; right: 0; margin: 0 auto;}
#A_Wrap {width: 100%; height: 100%;}
#A_Container_Wrap {position: relative; width: 100%; overflow: hidden; padding-top:100px;}
.inner {position: relative; width: 1420px;margin: 0 auto;}
.clear::after{display: block; content: ''; clear: both;}

/* header */
#A_Header {position: fixed; top: 0; left: 0; right: 0; box-sizing: border-box; width: 100%; height: 100px; background-color: rgba(255,255,255,1); z-index: 90;}
#A_Header.header_scroll {background: #fff;border-bottom: 1px solid #ddd;}
#A_Header.header_scroll .menubar li{background: #444;}
#A_Header .inner:after {display: block; clear: both; *zoom: 1; content: '';}
.logo {float: left; margin-top:30px;}
.gnb_div { line-height:100px; margin:0 auto; position:relative;float: left; margin-left:65px;}
.gnb .gnb01 {}
.gnb .gnb01:after {content:''; clear:both; height:0; display:block; visibility:hidden;}
.gnb .gnb01 > li { float:left; margin-right: 55px;}
.gnb .gnb01 > li:last-child{margin-right: 0;}
.gnb .gnb01 > li a {color:#2d2d2d; font-size:22px; font-weight:600;  position: relative; line-height:100px;}



.lnb{position:absolute; right:0;}
.lnb ul{}
.lnb ul li{float:left; margin-right:40px;}
.lnb ul li a{display:inline-block; font-size:16px; color:#5b5b5b; line-height:100px;}
.lnb ul li:last-child{margin-right:0;}
.lnb ul li:last-child a{font-weight:600; color:#2d2d2d;}
.lnb02{display:none; position:unset;}
.lnb02 ul{display:flex; flex-wrap:wrap; justify-content: center; padding:0 20px; margin-top:20px;}
.lnb02 ul li{margin-right:0; margin:0 12.5px;}
.lnb02 ul li a{line-height:unset !important; padding:10px 0;}


.full_gnbwrap { width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: fixed; z-index: 80; top:0; left:0; display:none;}
.full_gnbbox {position: fixed; width:75%; height: 100%; background:#fff; right:-1000px; top: 0; z-index: 81; overflow-y:scroll}
.full_gnbbox .gnb_logo {height:80px; background:#fff; border-bottom: 1px solid #ddd;}
.full_gnbbox .gnb_logo h1 {padding-top:0; margin-left:20px;}
.full_gnb  {width:100%; clear: both;}
.full_gnb li {color:#000; font-size:18px; font-weight:400;  text-align:left; box-sizing:border-box; transition:0.5s; border-bottom:1px solid #e0e0e0; padding-left:20px; background:url(../image/main/gnb_arrow.png) no-repeat 95% 50%;}
.full_gnb li a{display: block; width: 100%; height: 100%;line-height:60px;position: relative;}

.full_gnb li a.active{color: #d92825;font-weight: 500;}




.menubar { width:30px; cursor:pointer; position:absolute; top:25px; right:20px; height:25px; z-index:99; display:none;}
.menubar li { width:100%; height:2px; background:#444; position:absolute;}
.menubar li:nth-child(1) { top:0; }
.menubar li:nth-child(2) { top:13px; }
.menubar li:nth-child(3) { top:26px; }


/* footer */
#A_Footer {width: 100%; background-color: #2d2d2d;}
#A_Footer .inner{position: relative;}
#A_Footer .ft_info{}
#A_Footer .top{height:100px; line-height:100px; border-bottom:1px solid #5b5b5b; display:flex; align-items: center;}
#A_Footer .top img{float:left; display:block; }
#A_Footer .top ul{overflow: hidden; float:right;}
#A_Footer .top ul li{float:left; position:relative; margin-right:30px;}
#A_Footer .top ul li::after{display:block; content:""; position:absolute; right:-15px ; top:50%; transform: translateY(-50%); height:80%; width:1px; background:#5b5b5b;}
#A_Footer .top ul li:last-child::after{display:none;}
#A_Footer .top ul li:last-child{margin-right:0;}
#A_Footer .top ul li a{font-size:20px; color:#5b5b5b; display:inline-block; font-weight:500;}
#A_Footer .top ul li.on a{color:#8e8e8e; font-weight:600;}
#A_Footer .bottom{padding:40px 0 70px 0;}
#A_Footer .bottom p{font-size:16px; color:#5b5b5b; font-weight:500; line-height:1.8;}
#A_Footer .bottom p span{font-size:16px; color:#5b5b5b; font-weight:500; display:inline-block; position:relative; margin-right:20px;}
#A_Footer .bottom p span:nth-child(4)::after{display:none;}
#A_Footer .bottom p span:nth-child(6)::after{display:none;}
#A_Footer .bottom p span::after{display:block; content:""; background:#5d5d5d; width:1px; height:70%; position:absolute; right:-10px; top:50%; transform: translateY(-50%);}

#A_Footer .bottom p span:last-child::after{display:none;}
#A_Footer .bottom .copy{margin-top:40px;}



/* 퀵메뉴 */
.quick{position:fixed; top:60%; transform:translateY(-50%); right:0; z-index: 80;}
.quick ul{background:#e26a6a; border-radius: 30px 0 0 30px;}
.quick ul li{width:100px; height:100px; display:flex; flex-direction: column; align-items: center ;justify-content: center;}
.quick ul li:nth-child(1) img{width:40px;}
.quick ul li:nth-child(3) img{width:40px;}
.quick ul li:nth-child(5) img{width:20px;}
.quick ul li:nth-child(7) img{width:30px;}
.quick ul li:nth-child(9) img{width:30px;}
.quick ul li a p{font-size:16px;}
.quick ul li:nth-child(3){background:#e98181;}
.quick ul li:nth-child(7){background:#e98181;}
.quick ul li a{text-align: center;}
.quick ul li a img{display:block; margin:0 auto; margin-bottom:5px;}
.quick ul li a p{font-size:18px; color:#fff;}
.quick ul > p{display:none;  color:#fff;}
.m_quick  {display: none;}
.m_quick ul {display: none;}



@media screen and (max-width: 1420px) {
.inner {box-sizing: border-box; width:1024px;}
/*헤더*/
#A_Header .inner{width:95%; padding:0;}
.gnb .gnb01 > li{margin-right: 20px;}
.gnb .gnb01 > li a{font-size:18px;}
.logo{left: 0;}
.gnb_div{margin-left:45px;}

}

/* tablet */
@media screen and (max-width: 1023px) {
    .inner{width:100%; padding:0 20px;}
    #A_Container_Wrap{padding-top:80px;}
    /*헤더*/
    #A_Header{height: 80px;}
    #A_Header .inner{width: 100%; padding:0 20px;}
    .logo{margin-top: 15px;left: 20px;}
    .logo img{width: 120px;}
    .gnb .gnb01 > li{margin-right: 70px;}
    .gnb {display:none;}
  	.gnb .gnb01 > li {padding:0 18px;}

    .lnb{right:10%;}
    .lnb ul li a{line-height:80px; }

  	.menubar {display:block}
    .menubar{top: 30px;}
    .menubar li:nth-child(2){top: 10px;}
    .menubar li:nth-child(3){top: 20px;}


    /* Footer */
    #A_Footer .top{height:80px;}


    /* 퀵메뉴 */
    /* .quick ul li{width:100px; height:100px;}
    .quick ul li:nth-child(1) img{width:40px;}
    .quick ul li:nth-child(2) img{width:40px;}
    .quick ul li:nth-child(3) img{width:20px;}
    .quick ul li:nth-child(4) img{width:30px;}
    .quick ul li:nth-child(5) img{width:30px;}
    .quick ul li a p{font-size:16px;} */

}


@media screen and (max-width:767px) {
    .inner{padding:0 15px;}
    .menubar{right: 15px;}

    .lnb{display:none;}
    .lnb02{display:block;}

    /* Footer */
    #A_Footer .top ul li a{font-size:16px;}
    #A_Footer .bottom{padding:30px 0 45px 0;}
    #A_Footer .bottom p{font-size:14px;}
    #A_Footer .bottom p span{font-size:14px;}
    #A_Footer .top img{width:140px;}
    #A_Footer .bottom .copy{margin-top:30px;}



    /* 퀵메뉴 */
    .quick ul{border-radius: 15px 0 0 15px;}
    .quick ul li{width:60px; height:80px;}
    .quick ul li:nth-child(1) img{width:30px;}
    .quick ul li:nth-child(3) img{width:30px;}
    .quick ul li:nth-child(5) img{width:20px;}
    .quick ul li:nth-child(7) img{width:25px;}
    .quick ul li:nth-child(9) img{width:25px;}
    .quick ul li a p{font-size:12px;}

    .quick{display:none; right:15px; top:unset; bottom:13%; transform: unset; transition: 0.3s all;}
    .quick ul{background:none;}
    .quick ul li{width:55px; height:55px; line-height:55px; border-radius: 50%; background: #e26a6a; margin-bottom:5px;}
    
    .quick ul li p{display:none;}
    .quick ul li a img{margin-bottom:0;}
    .quick ul > p{display:block; font-size:10px; text-align: center; margin-bottom:5px;}

    .m_quick{width:55px; height:55px; line-height:55px; border-radius: 50%;  opacity: 0.8; background:#e26a6a; position:fixed; right:15px; bottom:5%; z-index: 80; display:block; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .m_quick em{font-size:30px; color:#fff; text-align: center; font-weight:500; line-height:55px; display:block; transition: 0.3s all;}
    .m_quick.on{background:#e98181;}
    .m_quick.on em{transform:rotate(45deg); transition: 0.3s all;}
    .quick_bg.on{background:rgba(0,0,0,0.7); position:fixed; width:100%; height:100%; left:0; top:0;}
    .m_quick ul {display: none;}
    .quick.active{display:block}
}


@media screen and (max-width:560px) {
    /* Footer */
    #A_Footer .top{height:auto; padding:20px 0;}
    #A_Footer .top img{float:unset;}
    #A_Footer .top ul{float:unset; margin-top:20px;}
}


/* mobile */
@media screen and (max-width: 480px) {
    .gnb_div{height: 60px;}

    .lnb02 ul{padding:0 5px;}
    .lnb02 ul li{margin:0 5px;}
    .lnb ul li a{font-size:14px;}


    /* Footer */
    #A_Footer .bottom p span{display:block;}
    #A_Footer .bottom p span::after{display:none;}
}
