/* COMMON */
.contents { padding:160px 0px;  }
.sub-visual-container{
    overflow: hidden; padding-left:70px; height: 400px; background-repeat: no-repeat; background-position: center; position:relative;
}
.sub-visual-container.sv1 .background { background-image: url('/child/img/sub/sv1.jpg'); }
.sub-visual-container.sv2 .background { background-image: url('/child/img/sub/sv2.jpg'); }
.sub-visual-container.sv3 .background { background-image: url('/child/img/sub/sv3.jpg'); }
.sub-visual-container.sv4 .background { background-image: url('/child/img/sub/sv4.jpg'); }
.sub-visual-container.sv5 .background { background-image: url('/child/img/sub/sv5.jpg'); }
.sub-visual-container .background{
    width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;
    animation: sv-scale ease 2s forwards;/*1.5*/
}
.sub-visual-container .sub-visual-wrapper{
}
.sub-visual-container .sub-visual-wrapper .title{
    position: absolute; top: 70px; left: 30px; padding: 34px 50px 40px; width: 420px; line-height: 0.8;
    color:#fff; text-align: right; font-size:4rem; letter-spacing:-0.08em;
}
.sub-visual-container .sub-visual-wrapper .title::before{
    content: ''; z-index: 1; position: absolute; top: 0; right: 0; width: 0%; height: 100%;
    background-color:#cd152c;
    animation: sv-title-bg ease 1s forwards;
}
.sub-visual-container .sub-visual-wrapper .title span{
    display: block; position: relative; z-index: 2; animation:sv-sub-title ease 1s both .3s;
}

@keyframes sv-scale {
    0% {transform: scale(1.2);}
    100% {transform: scale(1);}
}

@keyframes sv-title-bg {
    0%{ width: 0%; opacity:0; transform: translateX(50px); }
    100%{ width: 100%; opacity: 1; transform: translateX(0px);}
}

@keyframes sv-sub-title {
    0%{ transform: translateX(-50px); opacity:0;}
    100%{ transform: translateX(0px); opacity: 1;}
}

@media (max-width: 1024px){
    .contents {padding:100px 0px;}
    .sub-visual-container {height:300px;}
    .sub-visual-container .sub-visual-wrapper .title {width:320px; font-size:3rem; padding:30px 40px 32px;}

}
@media (max-width: 768px){
    .contents {padding:60px 0px;}
    .sub-visual-container {padding-left:40px; height:200px}
    .sub-visual-container .sub-visual-wrapper .title {width:220px; font-size: 2rem; padding:20px 30px 20px; left:20px;}

}



/* Sub Tab List */
.sub-tab-container { z-index: 2; position: relative; margin-top: -60px; }
.sub-tab-lists { display: flex; flex-wrap: wrap; margin: auto; max-width: 1200px; width: 100%; background: rgba(0,0,0,.5); }
.sub-tab-lists li { flex: 1 1; }
.sub-tab-lists .link{
    display: flex; align-items: center; justify-content: center; position: relative; padding: 4px; height: 60px;
    line-height: 1.4; text-align: center; font-size: 18px; color: rgba(255,255,255,.8); font-weight: 300;
    background-color: transparent;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}
.sub-tab-lists .link::before{
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 100%; height: 100%; background: #ffffff;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
    -webkit-transform-origin: bottom; transform-origin: bottom;
    -webkit-transform: scaleY(0); transform: scaleY(0);
}
.sub-tab-lists .link span { display: block; z-index: 2; position: relative; }
.sub-tab-lists .link--on { color: #272728; font-weight: 700; }
.sub-tab-lists .link--on::before{
    -webkit-transform: scaleY(1); transform: scaleY(1);
}
@media(min-width:1201px){
	.sub-tab-lists .link:not(.link--on):hover::before{
        -webkit-transform: scaleY(0.1); transform: scaleY(0.1);
    }
}
@media (max-width:1200px){
    .sub-tab-container { margin-top: -50px; }
    .sub-tab-lists .link { height: 50px; font-size: 16px; }
}
@media (max-width:768px){
    .sub-tab-container { margin-top: 0; }
    .sub-tab-lists { background: rgba(0,0,0,.9); }
    .sub-tab-lists .link { padding: 12px 10px; height: 100%; line-height: 1.3; font-size: 14px; }
}


@media (max-width:1024px){

}
@media (max-width:768px){

}

/*sub common*/
.sub-title {margin-bottom:60px; font-size:4.8rem;}
.content-header {width:100%; display: flex; padding:70px 0px; position: relative;}
.content-header::after {
    content:''; z-index:-1;
    position: absolute; top:0; left:50%;
    transform: translateX(-50%);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: block; width:100vw; height:100%;
}
.content-header img {display: block;}
.content--about .content-left {width:44%;}
.content-title {
    color:#fefefe; font-size:3.8rem; font-weight:400;
    line-height:1.3; margin-bottom: 20px;
    transform: translateX(-100px); opacity:0;
    transition:all 1s;
}
.content-text {
    font-size:1.8rem; color:#909090;
    transform: translateX(-100px); opacity:0;
    transition:all 1s .3s;
}
.content-right {
    position: absolute; top:0; right:-60px;
    transform: translateY(100px); opacity:0;
    transition:all 1s .6s;
    width:56%;
}
.content-items.on .content-title {opacity:1; transform: translateX(0);}
.content-items.on .content-text {opacity:1; transform: translateX(0);}
.content-items.on .content-right {opacity:1; transform: translateY(0);}

.content-body {padding-top:70px;}

@media (max-width:1200px){

    .content--about .content-left {width:50%;}
    .content-right {right:0px; width:50%;}

}

@media (max-width:1024px){

}
@media (max-width:768px){
    .content-header {padding:50px 0px;}
    .content--about .content-left {width:60%;}
    .content-right {width:40%;}
    .sub-title {margin-bottom:30px; font-size:4rem;}
    .content-title {font-size:3rem;}
    .content-text {font-size:1.6rem;}
    .content-body {padding-top:50px;}
}

@media (max-width:480px){
    .sub-title {margin-bottom:20px; font-size:3rem;}
    .content-title {font-size:2.2rem;}
    .content-text {font-size:1.4rem;}
    .content--about .content-left {width:100%;}
    .content-right {width:80%; position: relative; margin-top:50px;}

}


/*about*/
.header-about::after {background-image: url('/child/img/sub/about/about-bg.png');}
.content--about {width:100%; height:100%; position: relative;}
.about-logo {background:url('/child/img/sub/about/about-logo.png') no-repeat center; max-width:97px; height: 22px; width:100%; display: block; margin-bottom:40px;}
.about--body p {font-size:1.8rem; color:#595959;}

@media (max-width:1024px){

}
@media (max-width:768px){
    .about--body p {font-size:1.6rem;}
}

@media (max-width:480px){
    .content-header.header-about {padding:50px 0px 30px;}
}


/*주물용어*/
.basic-box {overflow: hidden;}
.content-list {display: flex; flex-wrap: wrap; margin-left:-30px; margin-right:-30px; margin-bottom:-90px;}
.content-list li {flex:1 33.3333%; padding:0px 30px 90px; position: relative;}
.content-list img {display:block;}
.list--guide__box {height:100%; position: relative;}
.list--guide__box::after {
    content:''; display: block; width:1px; height:100%;
    background-color: #dadada; position: absolute; right:-30px; top:0;
}
.content-list .guide-img {
    display:block; background-position:center; background-size: cover;
    width:100%; background-repeat:no-repeat;
    padding-top:calc(240/350*100%);
}
.content-list .guide-title {font-size:3.2rem; font-weight:500; line-height: 1; padding:20px 0px; border-bottom:1px solid #dadada;}
.content-list .guide-text {padding-top:10px; font-size: 1.8rem; font-weight:400; color:#595959;}
.content-list .guide-text.guide-text-style2 {padding:10px 0px;  border-bottom:1px solid #dadada;}

@media (max-width:1024px){

}
@media (max-width:768px){
    .content-list {margin-bottom:-50px; margin-left:-15px; margin-right:-15px;}
    .content-list li {flex:1 50%; padding:0px 15px 50px;}
    .list--guide__box::after {right:-15px;}
    .content-list .guide-title {font-size:2.4rem; padding:15px 0px;}
    .content-list .guide-text {font-size:1.6rem;}

}

@media (max-width:480px){

    .content-list {margin-left: 0; margin-right:0;}
    .content-list li {flex:1 100%; padding:0px 0px 50px;}
    .list--guide__box::after {display: none;}
    .content-list .guide-title {font-size:2rem;}
    .content-list .guide-text {font-size:1.4rem;}

}

/*주물제조과정*/
.content-process {position:relative; display: flex;}
.content-process .process-txt {width:52%;}
.content-process .process-txt .process-mo {display: none;}
.content-process .process-txt li {padding-left:120px; position: relative; margin-bottom:280px;}
.content-process .process-txt li:last-child {margin-bottom:0px;}
.content-process .process-txt li:last-child::before {display:none;}
.content-process .process-txt li::before {

    content: '';
    display: block;
    position: absolute;
    top:10px; left:60px;
    width:1px; height:calc(100% + 280px);
    background-color:#c4c4c4;

}
.content-process .process-txt li dt::before{

    content:"";
    display: block;
    position: absolute;
    width:7px; height:7px;
    border-radius:50%;
    background-color:#cd152c;
    top:19px; left:57px; z-index: 2;

}
.content-process .process-txt li dt::after{
    content:"";
    display: block;
    position: absolute;
    width:28px; height:28px;
    border-radius:50%;
    border:1px solid #c4c4c4;
    background-color:#fff;
    top:8px; left:47px; z-index:1;
}
.content-process .process-txt li dt {font-size:3.2rem; color:#111; margin-bottom:20px;}
.content-process .process-txt li dd {font-size:1.8rem; color:#595959; line-height:1.7;}
.content-process .process-txt li p {line-height:1.3;}

.process-box {margin-bottom:-120px;}
.process-box li {padding-bottom:120px;}
.process-box img {display: block;}


@media (max-width:1024px) {

    .process-box li {padding-bottom:80px;}

    .content-process .process-txt {width:60%;}
    .content-process .process-txt li {margin-bottom:200px;}
    .content-process .process-txt li::before {height: calc(100% + 200px);}
    .content-process .process-txt li dt {font-size:2.8rem;}
    .content-process .process-txt li dd {font-size:1.6rem;}

}

@media (max-width:768px) {

    .process-box {display:none;}
    .content-process .process-txt {width:100%;}
    .content-process .process-txt li {padding-left:50px; margin-bottom: 50px;}
    .content-process .process-txt li::before {left:20px; height:calc(100% + 50px);}
    .content-process .process-txt li dt::before {left:17px;}
    .content-process .process-txt li dt::after {left:7px;}

}

@media (max-width:480px) {

    .content-process .process-txt li p {display: inline-block;}
    .content-process .process-txt li dt {font-size:2.2rem; margin-bottom:10px;}
    .content-process .process-txt li dd {font-size:1.4rem;}

    .content-process .process-txt .process-mo {display: block;}

}

/*주물제조방식 선정*/
.header-comparison::after {background-image: url('/child/img/sub/guide/comparison/comparison-bg.png');}

/*주물제조 유의사항*/
.header-caution::after {background-image: url('/child/img/sub/guide/caution/caution-bg.png');}
.caution-box {display: flex; justify-content: space-between; align-items: center;}

.caution-banner {position: relative;}
.caution-banner::before {content:''; position: absolute; width:100%; height:100%; z-index:-2; background-color:#ddd; top:20px; right:20px;}
.caution-banner__img img {display: block;}
.caution-banner__txt {position: absolute; width:100%; height:100%; top:0; right:0; padding:10%; display: flex; justify-content: space-between; flex-direction:column;}
.caution-banner__txt .caution-logo {background:url('/child/img/sub/about/about-logo.png') no-repeat center; max-width:122px; height: 28px; width:100%; display: block; margin-left: auto;}
.caution-banner__txt p {color:#fff; font-size:3.2rem; line-height:1.4;}


.caution-list ul {margin-top:-30px; margin-bottom: -30px;}
.caution-list li {padding:30px 0px; border-bottom:1px solid #dadada; font-size:2rem; display: flex;}
.caution-list li:last-child {border-bottom:0px;}
.caution-list li span:first-child {max-width:30px; width:100%; margin-right:20px;}

@media (min-width:1201px) {

    .caution-list {width:56%;}

}
@media (max-width:1024px) {
    .caution-banner__txt p {font-size:2.8rem;}
    .caution-list {padding-left:30px;}
    .caution-list ul {margin-top:-20px; margin-bottom: -20px;}
    .caution-list li {padding:20px 0px; font-size:1.8rem;}
    .caution-banner::before {display:none;}
}

@media (max-width:768px) {
    .caution-banner__txt p {font-size:2rem;}
    .caution-list {padding-left:30px;}
    .caution-list ul {margin-top:-10px; margin-bottom: -10px;}
    .caution-list li {padding:10px 0px; font-size:1.6rem;}
    .caution-list li span:first-child {margin-right:0px;}

}

@media (max-width:600px){

    .caution-box {flex-wrap: wrap; justify-content: center;}
    .caution-list {padding-left:0px; margin-top: 50px; width:100%;}
    .caution-list li {font-size:1.4rem;}
    .caution-banner {width:86%;}
    /* .caution-banner::before {top:10px; right:10px;} */

}


/*고객센터*/
.location-items {position: relative; padding-bottom:200px; overflow: hidden;}
.location {position: relative; height:460px;}
.location .location-map {position: absolute !important; left:50%; transform: translateX(-50%); top:0; width:100vw; height:100%; }
.location-info {padding:40px 50px; background-color:#fff; box-shadow: 0px 0px 2px 2px rgba(25,25,25,.1); position: absolute; bottom:0; right:0; left:0; width:100%;}
.location-info ul {margin-top:-30px; margin-bottom:-30px;}
.location-info li {border-bottom:1px solid #c2c2c2; padding:30px; display: flex; align-items: center;}
.location-info li:last-child {border-bottom:0px;}
.location-info .location-icon {background-color:#cd152c; border-radius:50%; padding:8px; width:66px; height:66px; background-position: center; background-repeat: no-repeat; background-size:auto 38px;}
.location-info .location-icon.loaction-icon1 {background-image: url('/child/img/sub/location/location-icon1.svg');}
.location-info .location-icon.loaction-icon2 {background-image: url('/child/img/sub/location/location-icon2.svg');}

.location-txt {width:100%;}
.location-txt dl {display: flex; padding:2px 0px; align-items: center;}
.location-txt dt {margin:0px 10px 0px 30px; max-width:70px; width:100%; font-weight:700; color:#1c1c1c; font-size:1.8rem;}
.location-txt dd {font-size:1.8rem;}


@media (max-width:768px) {

    .location {height:320px;}
    .location-info {padding:30px 20px;}
    .location-info ul {margin-top:-20px; margin-bottom:-20px;}
    .location-info li {padding:20px;}
    .location-txt dt {font-size:1.4rem; margin:0px 5px 0px 15px;}
    .location-txt dd {font-size:1.4rem;}

}

@media (max-width:600px) {

    .location-items {padding-bottom: 460px;}
    .location-info ul {margin-top:-10px; margin-bottom:-10px;}
    .location-info li {flex-wrap:wrap; padding:10px;}
    .location-info li > div {width:100%;}
    .location-info .location-icon {margin:0 auto;}
    .location-txt {margin-top:10px; text-align: center;}
    .location-txt dl {flex-wrap: wrap;}
    .location-txt dt {width:100%; max-width:100%;}
    .location-txt dd {margin:5px 0px; width:100%;}

}