@charset "euc-kr";

@import url("reset.css");
@import url("common.css");

.wrapper {position:relative; letter-spacing:-0.01em;}
.wrapper .inner {max-width:1200px; margin:0 auto;}

/* wrapper > visual */
.main_visual {position:relative; top:0; left:0; width:100vw; min-width:1200px; height:650px; overflow:hidden;}
.main_visual .logo {position:absolute; left:50%; top:4.1rem; min-width:1200px; margin:0 0 0 -600px; z-index:2;}
.main_visual .visual {position:relative;}
.main_visual .bg {position:absolute; top:0; left:0; right:0; bottom:0; width:100vw; height:650px; z-index:1; background:url('../images/visual.jpg') no-repeat; background-size:cover; background-position:center; -ms-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -moz-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2);}
.main_visual .bg.on {-ms-transform: scale(1.0,1.0) rotate(0.01deg); -o-transform: scale(1.0,1.0) rotate(0.01deg); -moz-transform: scale(1.0,1.0) rotate(0.01deg); -webkit-transform: scale(1.0,1.0) rotate(0.01deg); transform: scale(1.0,1.0) rotate(0.01deg); -webkit-transition:transform 2000ms  ease-in-out ; -moz-transition:transform 3000ms ease-in-out ; -o-transition:transform 3000ms ease-in-out ; -ms-transition:transform 3000ms ease-in-out ; transition:transform 3000ms ease-in-out ;}
.main_visual .visual .text_box {position:absolute; top:19rem; left:50%; min-width:1200px; margin:0 0 0 -600px; padding-left:38px; text-align:left; color:#fff; z-index:2;}
.main_visual .visual .text_box .title {margin-left:-50px; font-size:5.6rem; opacity:0; line-height:7.3rem; letter-spacing:-0.05em; transform:translate(0,0);}
.main_visual .visual .text_box .title strong {display:block; font-weight:800;}
.main_visual .visual .text_box .title.on {transition:all 1.0s ease-in-out 0.5s; transform:translate(50px); opacity:1; transition:all 2s;}
.main_visual .visual .text_box .stext_box {margin:2rem 0; font-size:2rem; line-height:3.2rem; letter-spacing:-0.025em; }
.main_visual .visual .text_box .stext_box .stext1,
.main_visual .visual .text_box .stext_box .stext2,
.main_visual .visual .text_box .stext_box .stext3 {margin-left:-50px; opacity:0; transform:translate(0,0);}
.main_visual .visual .text_box .stext_box .stext1.on {transition:all 1.0s ease-in-out 1.1s; transform:translate(50px); opacity:1}
.main_visual .visual .text_box .stext_box .stext2.on {transition:all 1.0s ease-in-out 1.4s; transform:translate(50px); opacity:1}
.main_visual .visual .text_box .stext_box .stext3.on {transition:all 1.0s ease-in-out 1.7s; transform:translate(50px); opacity:1}

/* wrapper > »ç¾÷¿µ¿ª */
.business {}
.business .inner {padding:8.9rem 0 9.5rem; text-align:center;}
.business .inner .h2Type {margin-bottom:2.5rem;}
.business .inner .text {margin-bottom:5.3rem; font-size:1.8rem; color:#777; line-height:2.7rem;}
.business .inner .list {}
.business .inner .list:after {content:""; display:block; clear:both;}
.business .inner .list li {float:left; width:40rem; height:22.5rem; border-right:1px solid #e5e5e5;}
.business .inner .list li.unit1 {padding-top:2.4rem;}
.business .inner .list li.unit2 {padding-top:2.1rem;}
.business .inner .list li.unit3 {padding-top:3rem;}
.business .inner .list li:last-child {border-right:none;}
.business .inner .list li .icon {margin-bottom:2.8rem;}
.business .inner .list li h3 {margin-bottom:1.8rem; font-size:2rem; font-weight:800; color:#333;}
.business .inner .list li .text {font-size:1.5rem; color:#9d9d9d; line-height:2.1rem;}

/* wrapper > ÄÜÅÙÃ÷ À¯Åë */
.circulation {background:url('../images/bg_circulation.jpg') no-repeat; background-size:cover; background-position:center;}
.circulation .inner {padding:8.8rem 0 8.9rem; text-align:center;}
.circulation .inner .h2Type {margin-bottom:4rem;}
.circulation .inner .list {}
.circulation .inner .list:after {content:""; display:block; clear:both;}
.circulation .inner .list li {position:relative; float:left; width:57.4rem; height:45.9rem; margin-right:5.2rem; padding:5rem 0; background:#fff; transition:all 1s;}
.circulation .inner .list li:last-child {margin-right:0;}
.circulation .inner .list li:hover {cursor:pointer; box-shadow:1px 1px 10px #cecece;}
.circulation .inner .list li .webhard_logo {margin-bottom:3rem;}
.circulation .inner .list li h3 {margin-bottom:2.4rem; font-size:1.8rem; color:#333; line-height:2.7rem;}
.circulation .inner .list li h3 strong {display:block; margin-top:0.4rem; font-size:2.2rem; font-weight:800; letter-spacing:-0.025em;}
.circulation .inner .list li .text {margin-bottom:3rem; font-size:1.5rem; color:#9d9d9d; line-height:2.1rem;}
.circulation .inner .list li .btn {text-align:center;}
.circulation .inner .list li .btn a {display:inline-block; line-height:4.5rem; font-size:1.5rem; font-weight:800; color:#fff;}
.circulation .inner .list li > .list_inner {border: none;}
.circulation .inner .list li:before, .circulation .inner .list li:after, .circulation .inner .list li > .list_inner:before, .circulation .inner .list li > .list_inner:after {content: ''; position: absolute;}
.circulation .inner .list li:before {border-top: 1px solid #29b9b4; left: 0; right: 100%; top: 0; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; -o-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;}
.circulation .inner .list li:after {border-right: 1px solid #29b9b4; left: 0; right: 0; top: 0; bottom: 100%; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; -o-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms;}
.circulation .inner .list li > .list_inner:before {border-bottom: 1px solid #29b9b4; left: 100%; right: 0; bottom: 0; -webkit-transition-property: all; -moz-transition property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; -o-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;}
.circulation .inner .list li > .list_inner:after {border-left: 1px solid #29b9b4; left: 0; top: 100%; bottom: 0; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; -o-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms;}
.circulation .inner .list li:hover:before {right: 0%;}
.circulation .inner .list li:hover:after {bottom: 0%;}
.circulation .inner .list li:hover .list_inner:before {left: 0%;}
.circulation .inner .list li:hover .list_inner:after {top: 0%;}
.circulation .inner .list li:not(:hover):before {-webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms;}
.circulation .inner .list li:not(:hover):after {-webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;}
.circulation .inner .list li:not(:hover) .list_inner:before {-webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; transition-delay: 150ms;}
.circulation .inner .list li:not(:hover) .list_inner:after {-webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; -o-transition-delay: 50ms; transition-delay: 50ms;}


/* wrapper > COMPANY */
.company {}
.company .inner {padding:8.8rem 0 9rem;}
.company .inner:after {content:""; display:block; clear:both;}
.company .inner .h2Type {margin-bottom:3.7rem;}
.company .inner .info {float:left; width:36.5rem; margin-right:5.3rem;}
.company .inner .info .photo {margin-bottom:3.5rem;}
.company .inner .info .list {}
.company .inner .info .list dt {clear:both; float:left; width:6.7rem; margin-bottom:1.3rem; font-size:1.5rem; font-weight:800; color:#333;}
.company .inner .info .list dd {float:left; margin-bottom:1.3rem; font-size:1.5rem; color:#9d9d9d;}
.company .inner .map {float:left; width:78.2rem; height:45.5rem; border:1px solid #e8e8e8;}

/* wrapper > FOOTER */
.footer {clear:both; background:#343a40;}
.footer .inner {padding:5rem 0 4.4rem; text-align:center;}
.footer .inner .copyright {font-size:1.4rem; color:#79828a;}