@charset "utf-8";

/***** common *****/
:root {--main-color:#00a8ea;}
a:focus {outline:none;}
.inner {position:relative;width:1200px;margin:0 auto;}
#container {margin-top:100px;}
#container.sub {margin-top:0;}
.blind {position:absolute;width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;overflow:hidden;}

/***** header *****/
#header {position: fixed;left: 0;right:0;margin:0 auto;width: 100%;top: 0px;z-index: 999999;background:#fff;border-bottom: 1px solid #ddd;box-shadow:0 0 0px rgba(0,0,0,0);opacity:1;transition:top .6s ease-in-out;-webkit-transition:top .6s ease-in-out;box-sizing:border-box;}
#header:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #ddd;top: 99px;z-index: -1;}
#header.ov {background-color: #fff;border-bottom: 1px solid #ddd;box-shadow:0 0 4px rgba(0,0,0,0)}
#header.ov:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #ddd;top: 99px;z-index: -1;}
#header .gnbWrap {position: relative;text-align: right;}
#header h1 {z-index: 97;position: absolute;width:340px;height:52px;top:24px;background-image: url(../images/logo.png);background-repeat: no-repeat;text-indent: -9999px;left: 20px;}
#header h1 a{display: block;height: 100%;}
#header #gnb {text-align: center;display: inline-block;position:relative;}
#header #gnb:before, #header #gnb:after{display: table;content: " ";}
#header #gnb:after{clear: both;}
#header #gnb > li{display: block;text-align: center;float: left;}
#header #gnb > li > a{display: block;line-height: 96px;color: #333;padding: 0 35px;font-size: 19px;font-weight: 500;height:98px;padding: 0 20px;text-decoration:none;}
#header #gnb > li > a > span {display: block;position: relative;border-bottom:3px solid #fff;}
#header #gnb > li:hover > a > span {color:var(--main-color);border-bottom:3px solid var(--main-color);transition:0.2s ease;}
#header #gnb > li .depth2 {font-size: 0;display: none;padding: 22px 0 20px 0;box-sizing:border-box;width: 100%;text-align: center}
#header #gnb:hover > li .depth2 {display: block;}
#header #gnb > li .depth2:after {clear: both;content:'';display: block;} 
#header #gnb > li .depth2 > li {text-align: center;display: block;}
#header #gnb > li .depth2 > li > a{display: block;font-size: 17px;line-height: 36px;font-weight: normal;color: #666;text-decoration:none;}
#header #gnb > li .depth2 > li > a:hover{color:var(--main-color);font-weight: 500;}
#header.active:after {content:'';position: absolute;width: 100%;height: 1px;background-color: #fff;top: 0px;z-index: -1;height:100px;-webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);}

/***** footer *****/
#footer {width:100%;position:relative;clear:both;padding:50px 0;background-color:#2f343c;border-top:0px solid #eee;margin-top:50px;}
#footer:after {content:""; display:block; clear:both;}
#footer .flogo {position:absolute; left:0; top:0;}
#footer .address {width:100%; padding:0;color:#aaa;margin:0 0 0 100px;}
#footer .address ul:after {content:""; display:block; clear:both;}
#footer .address ul li {float:left; font-size:15px;line-height:1.2;color:#aaa; padding:0 13px 0 0;margin:0 12px 0 0;background:url('../images/fnb-line.png') right 3px no-repeat;}
#footer .address ul li.last {background:url('');}
#footer .address ul li strong {color:#aaa; font-weight:bold;}
#footer .copy {width:100%; font-size:15px; color:#aaa; padding: 0; margin:0 0 0 100px; line-height:1.2;}
#footer .copy span {font-size:13px;}

/***** main *****/
#container.main {margin:0;text-align:center;}
#container.main .title {font-size: 2.5em;font-weight: bold;color: #333;}
#container.main .title span {color:var(--main-color);}
#container.main .subtitle {font-size: 1.25em;color: #666;margin-top:20px;margin-bottom:80px;}

#SliderArea {overflow: hidden;}
#SliderArea #slider {position: relative;width: 100%;height: 50vh;}
#SliderArea .slide {position: absolute;width: 100%;height: calc(50vh - 100px);top: 100px;left: 0;opacity: 0;transition: opacity 0.5s ease-in-out;background-size: cover;background-position: center;display: flex;justify-content: center;align-items: center;flex-direction: column;color: white;text-align: center;}
#SliderArea .slide.visual01 {background-image:url('../images/visual01.jpg');}
#SliderArea .slide.visual02 {background-image:url('../images/visual02.jpg');}
#SliderArea .slide.visual03 {background-image:url('../images/visual03.jpg');}
#SliderArea .slide.active {opacity: 1;z-index: 1;}
#SliderArea .slide .inner {text-align:left;padding-left:15%;}
#SliderArea .slide h2 {font-weight:bold;font-size: 2.5em;margin-bottom: 0.5em;line-height:1.2;}
#SliderArea .slide p {font-size: 1.2em;}
#SliderArea .indicators {position: absolute;bottom: 20px;width: 100%;text-align: center;z-index: 10;}
#SliderArea .indicators span {display: inline-block;width: 8px;height: 8px;margin: 0 6px;background: rgba(255, 255, 255, 0.7);border: 2px solid white;border-radius: 50%;cursor: pointer;transition: all 0.3s ease;}
#SliderArea .indicators span.active {background: white;transform: scale(1.1);}

#iconArea {margin:60px 0;}
#iconArea p {color:#333;}
#iconArea ol li {display: inline-block;margin:0 30px 0;padding-bottom:20px;}
#iconArea ol li a {display:block;width:80px;height:80px;text-align:center;text-decoration:none;}
#iconArea ol li i {display:block;width:60px;height:60px;background-size:contain;background-repeat:no-repeat;margin:0 auto 5px;}
#iconArea ol li.icon01 i {background-image:url('../images/icon01.png')}
#iconArea ol li.icon02 i {background-image:url('../images/icon02.png')}
#iconArea ol li a:hover p {color:var(--main-color);position:relative;font-weight:700;}
#iconArea ol li a:hover p::before {content: "";position: absolute;right: 50%;bottom: -5px;width: 30%;height: 2px;background-color: var(--main-color);transition: 0.3s;}
#iconArea ol li a:hover p::after {content: "";position: absolute;left: 50%;bottom: -5px;width: 30%;height: 2px;background-color: var(--main-color);transition: 0.3s;}

/***** sub - common *****/
#container.sub {padding:80px 0 0;}
#container.sub h2 {text-align:center;font-size:2.8em;color:#333;font-weight:900;}
#container.sub > div {margin:50px 0;}

#subVisualArea {height:200px;background-repeat:no-repeat;background-position:center;background-size:cover;margin-top:100px;text-align:center;}
#subVisualArea.subVisual01 {background-image:url('../images/subVisual01.jpg');}
#subVisualArea.subVisual02 {background-image:url('../images/subVisual02.jpg');}
#subVisualArea.subVisual99 {background-image:url('../images/subVisual99.jpg');}
#subVisualArea h3 {font-size:2.5em;color:#fff;font-weight:bold;line-height:200px;}

#BreadcrumbArea .innerDepth {display:none;position:absolute;left:-5px;right:-1px;top:55px;border-left:1px solid #ddd;border-right:1px solid #ddd;box-sizing:border-box;}
#BreadcrumbArea .innerDepth li {display:block;border-bottom:1px solid #ddd;box-sizing:border-box;border-right:none;background-color:#fff;}
#BreadcrumbArea {border-bottom:1px solid #ddd;}
#BreadcrumbArea ul li {display:inline-block;vertical-align:middle;position:relative;border-right:1px solid #ddd;}
#BreadcrumbArea ul li > a.home, #BreadcrumbArea ul li > p, #BreadcrumbArea ul li li > a {display:block;height:55px;line-height:55px;color:#333;cursor:pointer;text-decoration:none;}
#BreadcrumbArea ul li > a.home {width:55px;border-left:1px solid #ddd;background-image:url('../images/icon_home.png');background-position:center;background-repeat: no-repeat;text-align:center;}
#BreadcrumbArea ul li > p, #BreadcrumbArea ul li li > a {padding:0 50px 0 20px;position:relative;width:150px;text-align:left;}
#BreadcrumbArea ul li.depth01::after, #BreadcrumbArea ul li.depth02::after {content:'';display:block;position:absolute;right:0;top:5px;width:6px;height:6px;border-right:2px solid #333;border-bottom:2px solid #333;margin:20px;transform:rotate(225deg);}
#BreadcrumbArea ul li.depth01:hover::after, #BreadcrumbArea ul li.depth02:hover::after {transform:rotate(45deg);top:1px;}
#BreadcrumbArea ul li.noDepth::after {content:none;}
#BreadcrumbArea ul li.noDepth > p {cursor:default;}
#BreadcrumbArea ul li.depth01:hover .innerDepth, #BreadcrumbArea ul li.depth02:hover .innerDepth {border-top:1px solid #ddd;}
#BreadcrumbArea ul li.depth01:hover .innerDepth.innerDepth01, #BreadcrumbArea ul li.depth02:hover .innerDepth.innerDepth02 {display:block;}

/***** sub - company01 *****/
#container.company01 .title {text-align:center;}
#container.company01 p.title, #container.company01 p.subTitle {text-align:center;margin:50px 0;font-size:1.2em;}
#container.company01 p.title {font-size:1.5em;}
#container.company01 .vision {padding-top:50px;position:relative;}
#container.company01 .vision::before {position:absolute;content:'';display:block;width:100px;height:1px;top:0;left:calc(50% - 50px);background-color:#333;}
#container.company01 .vision > .title {margin-top:0;font-weight:600;font-size:1.7em;}
#container.company01 .vision ul {display:flex;gap:40px;}
#container.company01 .vision ul li {flex:1;text-align:center;border-radius:12px;border:1px solid #ddd;box-sizing:border-box;}
#container.company01 .vision ul li .title {color:var(--main-color);font-weight:600;}
#container.company01 .vision ul li .description {padding:0 20px 50px 20px;font-size:1.2em;word-break:keep-all;line-height:1.2;}

/***** sub - company02 *****/
#container.company02 .history {margin:80px 0 50px;}
#container.company02 .history .timeLine {margin-bottom:25px;padding-top:50px;border-top:1px solid #ddd;}
#container.company02 .history .timeLine.latest {border-top:none;padding-top:0;margin-bottom:50px;}
#container.company02 .history .timeLine dt, #container.company02 .history .timeLine dd {display:inline-block;vertical-align:top;}
#container.company02 .history .timeLine dt {width:10%;font-size:1.8em;font-weight:600;}
#container.company02 .history .timeLine dd {width:calc(90% - 5px);position:relative;margin:5px 0;}
#container.company02 .history .timeLine .month {position:absolute;left:0;top:0;font-size:1.2em;font-weight:500;}
#container.company02 .history .timeLine p {padding-left:50px;padding-bottom:10px;}

/***** sub - company03 *****/
#container.company03 .organization {margin-top:100px;}
#container.company03 .organization li {text-align:center;border-radius:12px;border:1px solid #333;box-sizing:border-box;font-size:1.2em;font-weight:500;height:60px;line-height:60px;position:relative;}
#container.company03 .organization li::before {position:absolute;display:block;content:'';background-color:#333;height:40px;width:1px;}
#container.company03 .organization .department {display:flex;gap:40px;justify-content:center;}
#container.company03 .organization .department li {flex:0 0 210px;}
#container.company03 .organization .ceo {margin-bottom:80px;}
#container.company03 .organization .ceo li::before {top:59px;left:calc(50% - 0.5px);}
#container.company03 .organization .ceo li {width:210px;margin:0 auto;font-size:1.4em;font-weight:700;}
#container.company03 .organization .department {position:relative;}
#container.company03 .organization .department::before {position:absolute;display:block;content:'';background-color:#333;height:1px;width:501px;bottom:100px;left:calc(50% - 250.5px);}
#container.company03 .organization .department li::before  {bottom:59px;left:calc(50% - 0.5px);}

/***** sub - pneding *****/
#container.pending {text-align:center;}
#container.pending img {width: 500px;height: 330px;margin: 120px 0 30px;}
#container.pending .paragraph {font-size:2em;font-weight:600;}
#container.pending .paragraph .highlight {color:var(--main-color);}