﻿header {position:relative; z-index: 10000; border-bottom:10px solid #d9d9d9; background:#fff; height:60px; transition: 0.3s;}
header::after {content:''; display:block; width:30%; height:10px; position:absolute; bottom:-10px; left:40px; background:#0a4b6e;}
header .header-wrap {transition: 0.3s;}
header .header-wrap .right-menu {}
header .header-wrap .right-menu a {padding:22px 15px; display:inline-block; cursor: pointer;}
header .header-wrap .logo {line-height: 0px;;}
header .header-wrap .scroll-logo {display:none;}
header .header-wrap .mobile-menu-opener {display: none;}

header.scroll {background-color: #fff; height:63px;}
/* header.scroll .header-wrap {transform: scale(0.95);} */
header.scroll .header-wrap .scroll-logo {display:inline-block;}
header.scroll .header-wrap .no-scroll {display:none;}
header.scroll .header-wrap .right-menu a {color:#1d1d1f;}
header.scroll .header-wrap .right-menu a.bg-black {background-color: #AD3371; color: #333;}
header.scroll .header-wrap .right-menu a:hover {color:#336cad;}

/* 퀵메뉴 */
.right-quick-menu {position:fixed; bottom:2%; right:2rem; z-index:99; text-align:center; cursor:pointer; display: none;}
.right-quick-menu li {background:#bbb; width:87px; height:87px; line-height:87px; border-radius:100%; text-align:center; cursor:pointer; margin-bottom:7px;}
.right-quick-menu li img {margin-bottom:-20px;}
.right-quick-menu li:hover {background:#336cad;}
.right-quick-menu.on {display:block;}
.right-quick-menu.off {display:none;}

/* 스크롤  */
.icon-scroll {position:fixed;bottom:0px;left:calc(50% - 25px);z-index:999; padding:0px 0 20px; display:none; cursor:pointer;}
.icon-scroll div {transform:rotate(-90deg); font-size:13px;font-weight:500;color:#222;}
.icon-scroll:after {content:"";display:block;width:53px;height:53px;background:url(../img/icon/arrow1.png) center center no-repeat;margin:0 auto;}
.icon-scroll.on {display:block;}
h1.h-tit {font-size:35px; font-weight:700;letter-spacing:-.05em;}
img.img100 {width:100%;max-width:1200px;}

.container {height:100%;}
#fp-nav.right {right:25px;}
#fp-nav ul li, .fp-slidesNav ul li {margin:10px;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {background:#fff;}

.slick-list,
.slick-track {
    height: 100%;
}

.slick-list * {outline: none;}

.item-section {min-height:100%; background-repeat: no-repeat; overflow-x: hidden; padding-top:50px; box-sizing: border-box;}
.item-box {padding:20px 0 50px; box-sizing: border-box;}

.fade {position: relative; opacity: 0; transition: 1.3s;}
.fade-fast {transition: 0.05s;}
.fade-l {left:-80px;}
.fade-l.fade-show {left:0; opacity: 1;}
.fade-r {right:-80px;}
.fade-r.fade-show {right:0; opacity: 1;}
.fade-t {top:-80px;}
.fade-t.fade-show {top:0; opacity: 1;}
.fade-b {bottom:-80px;}
.fade-b.fade-show {bottom:0; opacity: 1;}
.fade-delay0-5 {transition-delay: 0.2s;}
.fade-delay1 {transition-delay: 0.4s;}
.fade-delay1-5 {transition-delay: 0.6s;}
.fade-delay2 {transition-delay: 0.8s;}
.fade-delay2-5 {transition-delay: 1s;}
.fade-delay3 {transition-delay: 1.2s;}
.fade-delay3-5 {transition-delay: 1.4s;}

.section01 {background: #fff;}
.section01 .slide-item {display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center; max-width:1800px; margin:50px auto;}
.section01 .slide-item .img0 {width:100%; position:relative; display:block;}
.section01 .slide-item .img0:after {content: ''; width: 220px;height: 49px; background: url(../img/icon/logo.png)no-repeat center;  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);transition: all 0.4s; transition-delay: 0.15s; z-index: 99;}
.section01 .slide-item h5 {width:100%; margin:30px 0 20px; font-weight:600;}
.section01 .slide-item .img1 {width:32%;}

.inform {background: #fff; display: flex; align-items: center; justify-content: center;}
.inform h5 {font-weight:600;}

.section03.business {background-image: url(../img/background/bg_img03.jpg); background-size: cover; background-position: center bottom; display: flex; align-items: center; justify-content: center;}
.business ul {display: flex; align-items: center; justify-content: center;}
.section04.business {background-image: url(../img/background/bg_img04.jpg); background-size: cover; background-position: center bottom; display: flex; align-items: center; justify-content: center; color:#fff;}

.about {background-image: url(../img/background/bg_img05.jpg); background-size: cover; background-position: center bottom; display: flex; align-items: center; justify-content: center; color:#fff;}
.about p.h-tit-white {color:#fff; font-size:13px; letter-spacing: 5px; line-height:1.5em;} 
.about p.sec_title {color:#fff; font-size:30px; margin-top:15px; line-height:1.5em;} 
.about ul.ul_pic {justify-content: space-around; margin-top:55px;}
.about ul.ul_pic li {width:23%; margin:10px 5px; box-sizing: border-box; border-radius: 10px; background:rgba(255,255,255,0.18); padding:40px 10px;}
.about ul.ul_pic li img {max-width:80px; width:90%;}
.about ul.ul_pic li h5 {color:#fff; font-size:19px; font-weight:700; letter-spacing:-.01em; line-height: 1.4em; margin:10px 0;}
.about ul.ul_pic li p {color:#fff; font-size:13px; font-weight:300; letter-spacing:-.03em; line-height: 1.5em; }

.company {background-image: url(../img/background/bg_img03.jpg); background-size: cover; background-position: center bottom;}
.company .item-box img {flex:1 0 750px; width:750px;}

.view {background-image: url(../img/background/bg_img04.jpg); background-size: cover; background-position: center bottom;}
.view .item-box .video-wrap {}
.view .item-box .video-wrap .video-slider {}
.view .item-box .video-wrap .video-slider .video-item {background-color:#fff; padding:20px; width:79%; margin:auto;}
.view .item-box .video-wrap .video-slider .video-item .video-container { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; background-color:#ccc;}
.view .item-box .video-wrap .video-slider .video-item .video-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.view .item-box .video-wrap .slider-control-btn { top: 50%; margin-top: -75px; padding: 0 10px; z-index: 1; transition: 0.5s;}
.view .item-box .video-wrap .slider-control-btn.disabled {opacity:1; cursor: default;}
.view .item-box .video-wrap .slider-control-btn img {width:40px;}
.view .item-box .video-wrap .slider-control-btn.prev-btn {left: 50%; margin-left: -30%;}
.view .item-box .video-wrap .slider-control-btn.next-btn {right: 50%; margin-right: -30%;}

.section06 .d-flex .left {width:45%; background: url(../img/background/bg_img06_2.jpg);  background-size:cover; background-repeat:no-repeat; background-position:center center; box-sizing: border-box; padding-left:10%; color:#fff;}
.section06 .d-flex .right {width:55%; }
.section06 .d-flex .left h1 {font-size:38px; font-weight:500; letter-spacing: -2px;  margin-top:80%; margin-bottom:40px;}
.section06 .d-flex .left .line {width:50px; height:7px; background:#ffd000; margin:30px 0;}
.section06 .d-flex .left h2 {font-size:23px; font-weight:700; letter-spacing: -2px; line-height: 1.5em;}
.section06 .d-flex .left h3 {font-size:18px; font-weight:500; letter-spacing: -2px; margin:40px 0; line-height: 1.5em;}
.section06 .d-flex .left img {margin-top:30px;}
.section06 .d-flex .left p {font-size:18px; line-height: 1.7em;}
.section06 .d-flex .left p i {margin-right:10px;}
.section06 .d-flex .right ul {margin-top:17%;}
.section06 .d-flex .right ul h2 {font-size:29px; font-weight:700; letter-spacing: -2px; color:#ffd000; margin-bottom:15px;}
.section06 .d-flex .right ul p {color:rgba(256, 256, 256, .8); font-size:17px;}
.section06 .d-flex .right ul li {margin-bottom:60px;}


#footer {background-color: #333; padding:30px 0;}
.pc {display:block;}
.mo {display:none;}

.mobile-slide {display: none;}
.mobile-gnb {display: none;}

@media(max-width:1280px) {
    header {padding:20px 0 15px 0 !important; height:auto;}
    header.scroll {height:44px;}
    header .header-wrap {text-align: center; justify-content: center;}
    header .header-wrap .right-menu {display:none;}
    header .header-wrap .logo img {width:180px;}
    header .header-wrap .mobile-menu-opener {display: inline-block; top:40%; margin-top:-11px;}
    header.scroll .header-wrap .mobile-menu-opener {color: #262626;}

    h1.h-tit {font-size:26px;}
  
    .section01 .slider-move-btn img {width:30px;}
    .section01 .slider-move-btn.prev {top: 50%; margin-top: -45px; left: 10px;}
    .section01 .slider-move-btn.next {top: 50%; margin-top: -45px; right: 10px;}
    .item-section.section03, .item-section.section04, .item-section.section05  {padding-top:110px;}
    .about h1 {font-size:25px; margin-top:20px;}
	.about p {font-size:15px; margin-top:15px;}
	.about ul.ul_txt {font-size:16px; margin-top:20px; padding:15px;}
	.about ul.ul_pic li p {font-size:16px;}
	.about p.sec_title {margin-top:30px;}

    .company .item-box > p.f-size40 {font-size:19px;}
    .company .item-box > p.f-size18 {font-size:13px; margin-top:2px; margin-bottom:10px;}
    .company .item-box > div {flex-wrap: wrap; margin-top:0;}
    .company .item-box > div > img {width:100%; flex: none;}
    .company .item-box > div > div {margin:0; margin-top:0px; width:100%;}
    .company .item-box > div > div p {display: inline;}
    .company .item-box > div > div p.pt-20 {display:inline-block;}

    .view .item-box .video-wrap .video-slider .video-item {width:calc(90% - 30px); padding:5px;}
    .view .item-box .video-wrap .slider-control-btn img {width:2.5vw;}
    .view .item-box .video-wrap .slider-control-btn {margin-top:-4vw; font-size:0; padding: 0 2vw;}
    .view .item-box .video-wrap .slider-control-btn.next-btn {margin-right:-43.5%;}
    .view .item-box .video-wrap .slider-control-btn.prev-btn {margin-left:-43.5%;}

    .add .d-flex .left p.f-size32 {font-size:22px;}
    .inform h5 {font-weight:600; font-size:19px;}
    .inform p {font-size:14px;}
    .mobile-gnb {position:fixed; top:0; left:0; width: 100%; height:100%; z-index:10001; display: block;}
    .mobile-gnb .gnb-mask {position:absolute; z-index: 1; width:100%; height:100%; top:0; left:0; background-color: rgba(0,0,0,0.6);}
    .mobile-gnb .gnb {width:80%; max-width:500px; position: absolute; top:0; left:0; height:100%; overflow-y:auto; background-color: #fff; z-index: 2;}
    .mobile-gnb .gnb .gnb-header img.logo {width:190px; }
    .mobile-gnb .gnb .gnb-header .gnb-close img {width:20px;}
    .mobile-gnb .gnb hr {margin-top: 0px; margin-bottom: 0px; height: 10px; border-top: 1px solid #fff;}

    .mobile-gnb .gnb .menu-type1 {width: 100%; font-size: 0; overflow-y: auto; /*height: calc(100% - 162px);*/}
    .mobile-gnb .gnb .menu-type1 > li {border-bottom:1px solid #D5D8DC; position: relative; cursor:pointer;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open {padding-bottom:0; border-bottom:none;}
    .mobile-gnb .gnb .menu-type1 > li > a {
        font-size: 16px; font-family: 'NSG R' !important; display: inline-block; width: calc(100% - 73px); overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; padding: 15px 20px; cursor: pointer; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none;
    }
    .mobile-gnb .gnb .menu-type1 > li.parent-menu > .more {position: absolute; width: 22px; height: 22px; background-image: url(../img/icon/menu-more.png); background-size: 100%; top: 15px; right: 10px;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open .more {background-image: url(../img/icon/menu-cut.png);}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu > ul {display: none;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open > ul {font-family: 'NSG L' !important; position: relative; display: block;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open > ul > li {width: 100%; position: relative; background-color: #F7F7F7; font-size:0; border-bottom: 1px solid #e8e8e8;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open > ul > li:last-child {border-bottom: 1px solid #D5D8DC;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open > ul > li:hover {background-color: #dfe2e4;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open > ul > li:first-child {border-top: 1px solid #D5D8DC;}
    .mobile-gnb .gnb .menu-type1 > li.parent-menu.open > ul > li > a {display: inline-block; padding:15px 0 15px 30px; width:calc(100% - 35px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;}
}

@media(max-width:1023px) {
    .item-box {padding-top:100px !important; padding-bottom:50px !important;}
    .about p {font-size:9px;}
	.about ul.ul_pic li {width:32%;}
	.about ul.ul_pic li p {font-size:14px; margin-top:2px;}
	.about ul.ul_txt {width:90%;}
	.about ul.ul_txt li {padding:0 10px;}
	.about ul.ul_pic li h5 {font-size:13px; margin:4px 0;}
	.about ul.ul_pic {flex-wrap:wrap; margin-top:30px;}
	.about ul.ul_pic li {padding:30px 7px;}
	.about ul.ul_pic li img {max-width:80px;}
	.about p.sec_title {margin-top:25px; font-size:18px;}
    .section06 .d-flex .left {width:100%; padding-bottom:60px;}
    .section06 .d-flex .left h1 {margin-top:40%; }
    .section06 .d-flex .right {width:100%; padding-bottom:70px;}
    .section06 .d-flex .left h1 {font-size:22px;}
    .section06 .d-flex .left p {font-size:15px;}
    
    .pc {display:none;}
	.mo {display:block;}
}

@media(max-width:767px) {
    header {padding:20px 0 7px 0 !important; height:auto;}
    a, span, p {line-height: 20px;}
    h1.h-tit {font-size:19px;}
    p {font-size:13px;}
    .f-size14 {font-size:13px;}
    .f-size24 {font-size:20px;}
    .f-size26 {font-size:23px;}
    .fade {position: relative; opacity: 0; transition: 1.0s;}
    .fade-fast {transition: 0.05s;}
    .inform h5 {font-size:17px;}
    .container {height:100%;}
    .section06 .d-flex .left,
	.section06 .d-flex .right {width:100%;}
    .section03.business {padding-top:100px;}
    .section05.about {padding-top:90px;}
}

@media(max-width:650px) {
    h5 {font-size:16px;}
    #fp-nav {display:none;}
    .item-section {min-height: auto; overflow-y:hidden;}
    .about h1, #care h1, #info_page .left h1, #about h1 {font-size:19px;}
    .about ul.ul_pic li p {font-size:11px;}
    .about ul.ul_pic li img {max-width:47px;}
	.about ul.ul_pic {margin-top:20px;}
	.about ul.ul_pic li {width:45%; padding:9px;}
	.about ul.ul_txt {font-size:14px;}
	.about p.sec_title {margin-top:15px; font-size:14px;}
    .view .item-box {padding-top: 80px !important; padding-bottom: 80px !important;}
    .view .item-box .video-wrap {margin-top:30px;}
    .view .item-box > div:nth-child(1) p:nth-child(1) {font-size:6vw;}
    .view .item-box > div:nth-child(1) p:nth-child(2) {font-size: 3.5vw; margin-top: 2vw;}
    
    
    #footer {flex-direction: column;}
    #footer .foot-wrap > div {width:100%; text-align: center;}
    #footer .foot-wrap .ml-auto {margin:20px auto;}
}
