@charset "utf-8";

/* sub-visual */
.sub-visual {height:770px; background-size:cover; background-position:center center; background-repeat:no-repeat; margin-top:120px; padding:156px 0; display:flex; align-items:flex-end;}
.sub-visual .txt-box {width:100%; max-width:1610px; padding:0 15px; margin:0 auto; color:#fff;}
.sub-visual .txt-box ul {display:flex; align-items:center; margin:0 -15px;}
.sub-visual .txt-box ul li {padding:0 20px;}
.sub-visual .txt-box ul li img {display:inline-block; vertical-align:middle; margin-top:-2px;}
.sub-visual .txt-box ul li {font-size:16px; line-height:2em; position:relative;}
.sub-visual .txt-box ul li:after {content:''; width:6px; height:10px; background:url('../img/sub/sub-visual-depth.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-5px; right:-3px;}
.sub-visual .txt-box ul li:last-child:after {display:none;}
.sub-visual .txt-box h1 {font-size:70px; line-height:1.1em; margin-top:10px; font-family:'Montserrat';}
.sub-visual .txt-box p {font-size:24px; line-height:1.4em; margin-top:10px; font-family:'Montserrat'; font-weight:600;}
/* lnb */
#lnb {background:#120a8f;}
.lnb ul {display:flex;}
.lnb ul li {width:100%; position:relative;}
.lnb ul li:after {content:''; width:1px; height:20px; background:rgba(255,255,255,0.3); position:absolute; top:50%; margin-top:-10px; right:0; z-index:1;}
.lnb ul li:last-child:after {display:none;}
.lnb ul li a {font-size:18px; line-height:1.6em; color:#fff; text-align:center; display:flex; justify-content:center; align-items:center; padding:25px 10px; transition:all 0.4s;}
.lnb ul li.active a {background:#fff; border-radius:20px 20px 0 0; color:#120a8f; font-weight:600;}
.lnb ul li a:hover {background:#fff; border-radius:20px 20px 0 0; color:#120a8f; }
/* sub content */
.real-cont {padding:140px 0 180px;}

.pagename {margin-bottom:82px; text-align:center;}
.pagename h2 {font-size:65px; line-height:1.2em; color:#000; font-family:'Montserrat'; position:relative; padding-top:22px;}
.pagename h2:before {content:''; width:8px; height:8px; background:#120a8f; border-radius:50%; position:absolute; top:0; left:50%; margin-left:-4px;}

.doc-tit {margin-bottom:56px;}
.doc-tit h4, .doc-tit h3 {font-size:52px; line-height:1.2em; color:#000; font-family:'Montserrat';}
.doc-tit p {font-size:22px; line-height:1.6em; color:#333; margin-top:32px;}

.doc-btn {text-align:center; margin-top:24px;}
.doc-btn p {font-size:22px; line-height:1.6em; color:#333; margin-bottom:56px;}
.doc-btn .more a {display:inline-block; width:220px; line-height:66px; border:2px solid #120a8f; background:#120a8f; border-radius:35px; padding:0 40px; font-size:18px; font-weight:600; color:#fff; transition:all 0.6s; position:relative; text-align:left;}
.doc-btn .more a:hover {background:#fff; color:#120a8f; padding:0 30px;}
.doc-btn .more a:after {content:''; width:24px; height:12px; background-image:url('../img/sub/doc-btn.png'); background-size:cover; background-repeat:no-repeat; position:absolute; top:50%; margin-top:-6px; right:30px; transition:all 0.6s;}
.doc-btn .more a:hover:after {background-image:url('../img/sub/doc-btn-on.png');}

h4.doc-con {font-size:28px; line-height:1.3em; color:#000; font-weight:600; position:relative; padding-left:24px; margin-bottom:22px;}
h4.doc-con:before,
h4.doc-con:after {content:''; width:3px; height:10px; position:absolute; left:0; top:50%;}
h4.doc-con:before {background:#120a8f; margin-top:-10px;}
h4.doc-con:after {background:#bfbfbf;}
h5.doc-con {font-size:28px; line-height:1.3em; color:#000; font-weight:600; position:relative; padding-left:24px; margin-bottom:22px;}
h5.doc-con:before,
h5.doc-con:after {content:''; width:3px; height:10px; position:absolute; left:0; top:50%;}
h5.doc-con:before {background:#120a8f; margin-top:-10px;}
h5.doc-con:after {background:#bfbfbf;}

/* sub 01 01 */
.overview .cnt {margin-bottom:180px;}
.overview .cnt:last-child {margin-bottom:0;}
.overview .cnt01 {padding:100px 0 120px; background:#f6f6f6;}
.overview .cnt01 .col {display:flex; align-items:flex-end;}
.overview .cnt01 .txt-box {width:1%; flex:1 1 auto; padding-right:110px;}
.overview .cnt01 .img-box {width:100%; max-width:400px;}
.overview .cnt01 .img-box img {border-radius:30px;}
.overview .cnt01 .txt-box .doc-tit {position:relative; padding-bottom:56px; border-bottom:1px solid #ddd;}
.overview .cnt01 .txt-box .doc-tit:before,
.overview .cnt01 .txt-box .doc-tit:after {content:''; width:40px; height:3px; position:absolute; bottom:-1px;}
.overview .cnt01 .txt-box .doc-tit:before {background:#120a8f; left:0;}
.overview .cnt01 .txt-box .doc-tit:after {background:#c0c0c0; left:40px;}
.overview .cnt01 .txt-box p {font-size:20px; line-height:1.8em; color:#666; margin-bottom:34px;}
.overview .cnt01 .txt-box p:last-child {margin-bottom:0;}
.overview .cnt01 .txt-box p strong, .overview .cnt01 .txt-box p b {font-weight:500; color:#120a8f;}
.overview .cnt02 .box {margin-bottom:76px;}
.overview .cnt02 .box:last-child {margin-bottom:0;}
.overview .cnt02 .box .txt-box {margin-bottom:56px;}
.overview .cnt02 .box .txt-box p {font-size:20px; line-height:1.8em; color:#666; margin-top:20px;}
.overview .cnt02 .col {display:flex; margin:0 -30px;}
.overview .cnt02 .col .row {width:33.333333%; padding:0 30px;}
.overview .cnt02 .col .row img {border-radius:30px;}
.overview .cnt03 .box {border:1px solid #ddd; border-radius:5px; padding:90px 60px; text-align:center;}
/* sub 01 02 */
.location .maps {margin-bottom:46px; height:480px; border-radius:30px; overflow:hidden;}
.location .maps iframe {width:100%; height:100%;}
.location .txt-box {position:relative; padding:0 20px; display:flex;}
.location .txt-box .row {width:auto; padding-right:60px;}
.location .txt-box .row h3 {font-size:28px; line-height:1.3em; color:#000; font-weight:600; position:relative; padding-right:34px; display:inline-block; margin-bottom:16px;}
.location .txt-box .row h3:before,
.location .txt-box .row h3:after {content:''; width:5px; height:5px; border-radius:50%; position:absolute; top:50%; margin-top:-3px;}
.location .txt-box .row h3:before {background:#120a8f; right:10px;}
.location .txt-box .row h3:after {background:#bfbfbf; right:0;}

.location .txt-box .row p, .location .txt-box .row address {font-size:20px; line-height:1.8em; color:#666;}
.location .txt-box .btn {position:absolute; top:0; right:20px;}
.location .txt-box .btn ul {display:flex;}
.location .txt-box .btn ul li {padding-left:10px;}
.location .txt-box .btn ul li a {display:block; width:60px; height:60px; border:1px solid #ddd; border-radius:50%; transition:all 0.6s; background-color:#fff; background-repeat:no-repeat; background-size:cover; background-position:center;}
.location .txt-box .btn ul li a:hover {border-color:#120a8f; background-color:#120a8f;}
.location .txt-box .btn ul li a.more {background-image:url('../img/sub/location-more.png');}
.location .txt-box .btn ul li a.print {background-image:url('../img/sub/location-print.png');}
.location .txt-box .btn ul li a.more:hover {background-image:url('../img/sub/location-more-on.png');}
.location .txt-box .btn ul li a.print:hover {background-image:url('../img/sub/location-print-on.png');}
/* sub 02 */
.make .cnt {margin-bottom:176px;}
.make .cnt:last-child {margin-bottom:0;}
.make-tit {text-align:center; margin-bottom:56px; padding-bottom:56px; border-bottom:1px dashed #ddd;}
.make-tit p {font-size:24px; line-height:1.5em; color:#333;}
.make-tit p strong {font-weight:500; color:#120a8f;}
/* sub 02 01 */
.fiber .col {display:flex; margin:0 -30px 100px;}
.fiber .col .row {width:33.333333%; padding:0 30px;}
.fiber .img-box img {border-radius:30px;}
.fiber .icon {text-align:center; margin-top:-65px; margin-bottom:36px;}
.fiber .txt {text-align:center;}
.fiber .txt p {font-size:20px; line-height:1.8em; color:#666;}
/* sub 02 02 */
.cap .cnt01 .col {display:flex; flex-wrap:wrap; margin:0 -30px;}
.cap .cnt01 .col .row {width:33.3333333%; padding:0 30px; margin-bottom:76px;}
.cap .cnt01 .img-box {border-radius:30px; overflow:hidden; margin-bottom:36px;}
.cap .cnt01 .txt-box {padding:0 20px;}
.cap .cnt .txt-box p {font-size:20px; line-height:1.6em; color:#666;}
.cap .cnt02 .col {display:flex; margin:0 -30px 60px;}
.cap .cnt02 .col .row {width:auto; padding:0 30px;}
.cap .cnt02 .col .row .inner {max-width:333px; width:100%;}
.cap .cnt02 .col .row:first-child .inner {max-width:400px;}
.cap .cnt02 .img-box img {border-radius:30px; overflow:hidden;}
.cap .cnt02 .txt-box {padding:0 20px; margin-top:36px;}
/* sub 02 03 */
.color .col {display:flex; margin:0 -30px 100px;}
.color .col .row {width:33.333333%; padding:0 30px;}
.color .img-box {margin-bottom:36px;}
.color .img-box img {border-radius:30px; overflow:hidden;}
.color .txt-box {padding:0 20px;}
.color .txt-box p {font-size:20px; line-height:1.8em; color:#666;}
/* sub 02 04 */
.style .doc-btn {margin-top:100px;}
/* sub 02 05 */
.packing .col {display:flex; margin:0 -30px;}
.packing .col .row {width:25%; padding:0 30px;}
.packing .col .row .inner {background:#f7f6f5; border-radius:30px; padding:42px 50px;}
.packing .col .row .inner p {font-size:16px; color:#999; line-height:1.8em; margin-bottom:2px; font-weight:700;}
.packing .col .row .inner h5 {font-size:24px; line-height:1.4em; color:#000; margin-bottom:12px;}
.packing .col .row .inner .icon {text-align:right;}
.packing .img-box {margin:100px 0;}
.packing .img-box img {border-radius:30px; overflow:hidden;}
/* sub 03 01 */
.order .col {display:flex; overflow:hidden; margin:0 -30px 100px; position:relative; z-index:10;}
.order .col:last-child {margin-bottom:0;}
.order .col:after {content:''; width:calc(100% - 60px); height:1px; border-bottom:1px dashed #ddd; position:absolute; top:228px; left:30px; z-index:-1;}
.order .col:last-child:after {width:calc(65% - 60px);}
.order .col .row {width:25%; padding:0 30px;}
.order .img-box {text-align:center; margin-bottom:24px;}
.order .img-box .icon {padding-bottom:30px; position:relative; height:210px;}
.order .img-box .icon:before {content:''; width:5px; height:5px; background-color:#120a8f; border-radius:50%; bottom:27px; left:50%; margin-left:-3px; z-index:11; position:absolute;}
.order .img-box .icon:after {content:''; width:1px; height:30px; background:#ddd; left:50%; bottom:0; position:absolute; z-index:8; margin-left:-1px;}

.order .img-box p {display:inline-block; width:100px; line-height:36px; background:#120a8f; color:#fff; font-size:16px; font-weight:700; border-radius:18px;}
.order .txt-box {text-align:center;}
.order .txt-box h3 {font-size:24px; line-height:1.4em; color:#000; margin-bottom:16px;}
.order .txt-box p {font-size:20px; line-height:1.8em; color:#666;}
.order .txt-box p strong {font-weight:400; color:#120a8f; display:block;}