/* main */
.main { margin-left: 80px; z-index: 1000; padding: 0 7%; }

.spOnly { display: none; }

.posRel { position: relative; }

.posAbs { position: absolute; top: 0; left: 0; width: 100%; }

@media only screen and (max-width: 1000px) and (orientation: landscape) { /* main */
  .main { margin-left: 50px; } }

@media only screen and (max-width: 767px) and (orientation: portrait) { /* main */
  .main { margin-left: 0; }
  .posAbs { top: -50px; } }

@media only screen and (max-width: 767px) { .pcOnly { display: none; }
  .spOnly { display: block; } }

/* CSS Document */
.service-list { padding: 8% 5% 10%; position: relative; margin: 0 auto 150px; max-width: 1920px; }

.service-list:before { background: #f7f7f7; content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; z-index: -1; -webkit-transition: all 0.5s; transition: all 0.5s; }

.service-list:after { display: block; clear: both; height: 0; visibility: hidden; content: '.'; zoom: 1; }

.service-cont { width: 48%; }

.service-cont h3 { font-size: 48px; line-height: 1; margin: 0 0 5%; font-weight: bold; letter-spacing: 0.05em; }

.service-cont li { padding: 0 0 0 1.2em; position: relative; }

.service-cont li:before { position: absolute; top: 8px; left: 0; width: 10px; height: 10px; background: #000; border-radius: 100%; content: ''; }

.service-cont a { font-size: 20px; margin: 5% 0 0 0; display: inline-block; }

.service-cont a i { width: 60px; height: 1px; background: #000; display: inline-block; position: relative; margin: 0 0 0 1em; -webkit-transition: all 0.5s; transition: all 0.5s; }

.service-cont a i:before { width: 10px; height: 1px; background: #000; line-height: 0; position: absolute; top: -4px; right: 0; content: ''; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.service-cont a:hover { color: #f58124; transition: all 0.5s ease-in-out !important; -webkit-transition: all 0.5s ease-in-out !important;}

.service-cont a:hover i { width: 80px; background: #f58124; }

.service-cont a:hover i:before { background: #f58124; }

.service-slide { position: absolute; bottom: -15%; right: 0; width: 45%; max-width: 688px; }

.service-slide > div { background: #faebe8; }

.service-slide img { width: 100%; }

.service-list.even:before { left: auto; right: 0; }

.service-list.even .service-cont { float: right; }

.service-list.even .service-slide { right: auto; left: 0; }

/* animation */
.service-list.animated:before { width: 90%; }

.service-cont .fadeinup { -webkit-transform: translateY(40px); transform: translateY(40px); opacity: 0; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.animated .service-cont .fadeinup { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

.service-cont .delay1 { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

.service-cont .delay2 { -webkit-transition-delay: 1s; transition-delay: 1s; }

.service-cont .delay3 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }

.service-cont .delay4 { -webkit-transition-delay: 2s; transition-delay: 2s; }

.flow { max-width: 1920px; margin: 0 auto; }

.flow h3 { font-size: 30px; line-height: 1; margin: 0 0 55px; }

.flow h4 { font-size: 36px; line-height: 0.8; margin: 0 0 25px; }

.flow h4 span { font-size: 48px; color: #ffbd00; font-weight: bold; }

.flow ul { margin: 0 auto 80px; }

.flow ul:last-of-type { margin: 0 auto; }

.flow li { width: 16.66%; float: left; line-height: 1.4; position: relative; }

.flow li p:nth-of-type(1) { font-size: 24px; color: #ffbd00; font-weight: bold; }

.flow li i { width: calc(100% - 4em); display: block; position: absolute; top: 0.8em; left: 2.5em; border-top: 1px dashed #000; vertical-align: middle; }

.flow li i:before { border: solid black; border-width: 0 1px 1px 0; display: block; padding: 5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute; top: -6px; right: -4px; content: ''; }

/* animation */
.flow h3 div, .flow h4 div { opacity: 0; -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.flow h3.animated div, .flow h4.animated div { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }

.flow li { -webkit-transition: all 0.8s; transition: all 0.8s; opacity: 0; }

.flow li:nth-of-type(1) { -webkit-transition-delay: 0s; transition-delay: 0s; }

.flow li:nth-of-type(2) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

.flow li:nth-of-type(3) { -webkit-transition-delay: 1s; transition-delay: 1s; }

.flow li:nth-of-type(4) { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }

.flow li:nth-of-type(5) { -webkit-transition-delay: 2s; transition-delay: 2s; }

.flow li:nth-of-type(6) { -webkit-transition-delay: 2.5s; transition-delay: 2.5s; }

.flow ul.animated li { opacity: 1; }

.flow li i { -webkit-transition: all 0.8s; transition: all 0.8s; width: 0; }

.flow li:nth-of-type(1) i { -webkit-transition-delay: 0s; transition-delay: 0s; }

.flow li:nth-of-type(2) i { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }

.flow li:nth-of-type(3) i { -webkit-transition-delay: 1s; transition-delay: 1s; }

.flow li:nth-of-type(4) i { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }

.flow li:nth-of-type(5) i { -webkit-transition-delay: 2s; transition-delay: 2s; }

.flow li:nth-of-type(6) i { -webkit-transition-delay: 2.5s; transition-delay: 2.5s; }

.flow ul.animated li i { width: calc(100% - 4em); }

/*===============================
             MEDIA
================================*/
@media only screen and (max-width: 1920px) { .service-cont h3 { font-size: 2.5vw; }
  .flow h3 { font-size: 1.7vw; }
  .flow h4 { font-size: 1.85vw; }
  .flow h4 span { font-size: 2.5vw; }
  .flow li { font-size: 0.9vw; }
  .flow li p:nth-of-type(1) { font-size: 1.2vw; } }

@media only screen and (max-width: 1400px) { .service-cont a { font-size: 18px; } }

@media only screen and (max-width: 1000px) { .service-list { padding: 0; margin: 0 0 13%; }
  .service-list:before { display: none; }
  .service-cont { width: 100%; padding: 8% 5% 10%; position: relative; }
  .service-cont:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #f7f7f7; -webkit-transition: all 0.5s; transition: all 0.5s; }
  .animated .service-cont:before { width: 100%; }
  .service-cont h3 { font-size: 4.8vw; }
  .service-list.even .service-cont { float: none; }
  .service-slide { position: static; width: 80%; margin: -6% auto 0; }
  .flow h3 { margin: 0 0 10%; font-size: 3.5vw; }
  .flow h4 { margin: 0 0 6%; font-size: 3.7vw; }
  .flow h4 span { font-size: 4.8vw; }
  .flow ul { max-width: 250px; margin: 0 auto 13%; }
  .flow li { width: 100%; font-size: 16px; margin: 0 0 20px; }
  .flow li p:nth-of-type(1) { font-size: 18px; position: absolute; top: 0.2em; left: 0; line-height: 1; }
  .flow li p:nth-of-type(2) { padding: 0 0 0 32px; }
  .flow li i { width: 1px; height: 0; margin: 10px 0 0; position: relative; border-right: 1px dashed #000; border-top: none; top: inherit; left: 30%; }
  .flow li i:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); top: auto; right: -6px; bottom: -4px; }
  .flow ul.animated li i { width: 1px; height: 40px; } }

@media only screen and (max-width: 767px) { .service-list { margin: 0 0 17%; }
  .service-cont a { font-size: 16px; }
  .service-cont li:before { width: 8px; height: 8px; }
  .flow h3 { font-size: 4vw; }
  .flow h4 { font-size: 4.5vw; }
  .flow h4 span { font-size: 6vw; } }