@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
.container-wrap{width: 1350px; padding: 0; }
.container-wrap .work-col{padding: 0;}
.box-shadow{box-shadow: 73px 0 74px rgba(0,0,0,0.05);}
.color_black{color: #000 !important;}
.sec-01 .maskimg{background: url(../images/hanstyle/hanstyle_01.jpg) center no-repeat; background-size: cover;}
.view-detail .hanstyle-01{position:relative;padding:calc(200/1520*100%) 0 0 0}
.view-detail .hanstyle-01 .text-area{margin-bottom: calc(120/1520*100%); padding: 0 calc(35/1350*100%); text-align: left;}
.text-area h3{display: inline-block; margin: 0 0 40px 0; border-bottom: 2px solid #000; font-size: 42px; line-height: 52px;}
.text-area h3 span{border-bottom: 2px solid #000;}
.hanstyle-01 p{width: 38%;}
.hanstyle-01 img{width: 100%;}
.hanstyle-01 .img-area{position: relative;}
.hanstyle-01 .msync_animation{display: flex; width:100%}
.hanstyle-01 .msync_animation div{margin: 0 auto;}
.hanstyle-01 .msync_animation.img01{padding-left: calc(35/1350*100%);}
.hanstyle-01 .msync_animation:first-child > div:first-child{padding-top: calc(582/1520*100%); }
.hanstyle-01 .msync_animation:first-child > div:last-child{padding-top: calc(200/1520*100%); }
.hanstyle-01 > div > .video-wrap{position: absolute;top: 0;margin-top:calc(116/420*100%); left: calc(49/420*100%);width: 73.5%;height:calc(282/420*100%);overflow: hidden;}
.hanstyle-01 > div > .video-wrap video{width: 100%;}

.container-wrap.sec-02{width: 100%; padding: 0 0 calc(200/1350*100%) 0; background: url(../images/hanstyle/hanstyle_02_bg.jpg) 0 0 no-repeat; background-size: cover}
.container-wrap.sec-02 .view-detail{width: 1350px; margin: 0 auto;}
.view-detail .hanstyle-02{padding-top: calc(200/1920*100vw); padding-bottom: calc(300/1350*100%);}
.hanstyle-02 .text-area,
.hanstyle-03 .text-area{padding:calc(35/1350*100%) 0 calc(100/1350*100%) 0; color: #fff; text-align: left;}
.hanstyle-02 .text-area{padding-left: calc(35/1350*100%); padding-right: calc(35/1350*100%);}
.hanstyle-02 .text-area h3,
.hanstyle-02 .text-area h3 span,
.hanstyle-03 .text-area h3,
.hanstyle-03 .text-area h3 span{border-color: #fff;}
.hanstyle-02 .img-area{padding: 0 calc(263/1350*100%) calc(200/1350*100%);}
.hanstyle-02 .msync_animation{display:flex;justify-content: space-between;align-items: flex-start;}
.hanstyle-02 .video-wrap{width: 360px;}
.hanstyle-02 .video-wrap video{width: 100%;}
/*.hanstyle-02 .msync_animation > div{position:relative;width:calc(309/1520*100%);box-shadow: 4px 11px 30px rgba(0,0,0,0.08);}*/
.hanstyle-02 .overlay{position:absolute;width:calc(355/309*100%);left:-6.4%;top:0;margin-top:calc(-90/309*100%);max-width:initial !important;}

.view-detail .hanstyle-03{position: relative; padding: 0 calc(35/1350*100%;)}
.hanstyle-03 .msync_animation.img01{position: absolute; top: 0; right: calc(125/1350*100%);}
.hanstyle-03 .text-area{margin-bottom: calc(610/1350*100%);}
.hanstyle-03 .msync_animation{display: flex; justify-content: space-between;}

.view-detail .hanstyle-04{display: flex; justify-content: space-between; padding: calc(200/1350*100%) calc(35/1350*100%) 0; }
.hanstyle-04 .text-area{width: calc(460/1350*100%); text-align: left;}
.hanstyle-04 .img-area{width: 61%; margin-bottom: calc(200/1350*100vw);}
.hanstyle-04 .img-area .msync_animation{display: flex; justify-content: space-between;}
/*.hanstyle-04{display:flex;justify-content: space-between;padding:calc(100/1520*100%) 0 !important}*/
/*.hanstyle-04 .text-area{text-align: left;padding: calc(40/1520*100%) 0 calc(100/1520*100%) calc(160/1520*100%)}*/
/*.hanstyle-04 > div{width:calc(741/1520*100%)}*/
.sec-slide{padding-bottom: calc(200/1920*100vw);}
.sec-04-slider .img-area{
    width: 4288px;
    padding-bottom: calc(803/1920*100vw);
    background-image: url(../images/hanstyle/hanstyle_slide4.jpg);
    background-position: left center;
    background-repeat: repeat-x;
    animation: move-left 50s infinite linear;
    text-indent: -9999px;
    /*transition-timing-function: linear;*/
}
@keyframes move-left{
    from{transform: translateX(0);}
    to{transform: translateX(-100%);}
}
/*.sec-slide img{width: 100%;}*/

.sec-05{background: #efefef;}
.view-detail .hanstyle-05{position: relative; width: 100%; padding: calc(200/1350*100%) 0 calc(300/1350*100%);}
.hanstyle-05 .text-area{position: absolute; left: calc(35/1350*100%); top: calc(78/1350*100%); width: 46%; word-break: keep-all; text-align: left;}
.hanstyle-05 .msync_animation{display: flex; justify-content: space-between; padding: 0 calc(35/1350*100%;)}
.hanstyle-05 .msync_animation .box_wrap{display: flex; justify-content: space-between;}
/*.hanstyle-05 .msync_animation:first-child div{width: 33.33%;}*/
.hanstyle-05 .msync_animation:first-child img{margin-bottom: calc(95/1350*100vw);}
.hanstyle-05 .msync_animation .box1{padding-top: calc(718/1350*100%);}
.hanstyle-05 .msync_animation .box1 .video-wrap{width: calc(360/1920*100vw);}
.hanstyle-05 .video-wrap video{width: 100%;}
.hanstyle-05 .msync_animation .box2{padding-top: calc(400/1350*100%);}
.hanstyle-05 .msync_animation .box3{width: 33.33%;}
.hanstyle-05 .msync_animation.img02 > div{margin: 0 auto;}

.sec-06{width: 100%; background: #efefef;}
.sec-06 .bg{width: 100%; height: calc(360/1920*100vw); background: url(../images/hanstyle/hanstyle_06_bg.jpg) 0 0 no-repeat; background-size: cover;}
.view-detail .hanstyle-06{padding: 0 calc(35/1350*100%) calc(300/1920*100%);}
.hanstyle-06 .text-area{text-align: left;}
.hanstyle-06> .text-area{transform: translateY(-11.5vw);}
.hanstyle-06 .img-area{display: flex; justify-content: space-between; margin: calc(-110/1350*100%) 0 calc(200/1350*100%);}
.hanstyle-06 .img-area .text-area{padding-top: calc(110/1350*100%);}
.hanstyle-06 .img-area .text-area p{color: #bdbdbd; font-family: 'Roman', sans-serif; font-size: 32px; line-height: 35px;}
.hanstyle-06 .img-area .text-area p:first-child{color: #000;}
.hanstyle-06 > .msync_animation{display: flex; justify-content: space-between; margin-bottom: calc(80/1350*100%);}
.hanstyle-06 .msync_animation.box1{justify-content: center; margin-bottom: calc(200/1350*100%);}
.hanstyle-06 .msync_animation.box1 .video-wrap{width: 360px; margin-right: calc(106/1350*100%);}
.hanstyle-06 .msync_animation.box1 .video-wrap video{width: 100%;}
/*.hanstyle-06 .msync_animation.box3 div{width: 33.33%;}*/
.hanstyle-06 > .msync_animation:last-child{margin-bottom: 0;}


.view-detail .hanstyle-07{padding: 0 0 calc(300/1350*100%);}
.hanstyle-07 .text-area{padding: 0 calc(35/1350*100%); text-align: left;}
.hanstyle-07 h3,
.hanstyle-08 h3{margin-bottom: calc(107/1350*100%);}
.hanstyle-07 .img-area{padding: 0 calc(35/1350*100%);}
.hanstyle-07 .msync_animation,
.hanstyle-08 .msync_animation{display: flex; justify-content: space-between; margin-bottom: calc(200/1350*100%);}
.hanstyle-07 .msync_animation.box1 > div{margin: 0 auto;}
.hanstyle-07 .msync_animation.box2,
.hanstyle-08 .msync_animation:last-child{margin-bottom: 0;}

.view-detail .hanstyle-08{padding: 0 calc(35/1350*100%) calc(300/1350*100%);}
.hanstyle-08 .text-area{text-align: left;}
/*.hanstyle-05{*/
    /*width:100%;display:flex;justify-content:center;align-items:center;height:calc(847/1920*100vw);*/
    /*background:transparent url(/images/hanstyle/hanstyle_05.jpg) repeat-x 0 bottom/100% auto;*/
    /*!*animation: loopbg 20s linear infinite;*!*/
    /*padding:0 !important;*/
/*}*/
/*.hanstyle-05 h3{width:calc(1133/1920*100vw);text-align:left;transform:translateY(-4vw);font-size:36px;}*/

@keyframes loopbg{
    from{
        background-position: 0 bottom;
    }
    to{
        background-position: calc(1800/1920*100vw) bottom;
    }
}


/*.hanstyle-06 {*/
    /*background: #f2f2f2 url(/images/hanstyle/hanstyle_06.jpg) repeat-x 0 100%/100% auto;*/
    /*height:58.6vw;*/
    /*!*animation: loopbg2 20s linear infinite;*!*/
/*}*/
/*.hanstyle-06 h3{padding: calc(130/1920*100vw) 0 0;}*/
@keyframes loopbg2{
    from{
        background-position: 0 100%;
    }
    to{
        background-position: 100vw 100%;
    }
}

.text-hover-wrap{
    position: relative;
    padding: calc(230/1350*100%) 0 calc(300/1350*100%) !important;
}
.text-line{
    width: 1350px;
    margin: 0 auto 50px;
}
.text-line:last-child{
    margin-bottom: 0;
}
.text-line a{
    font-size: 72px;
    color: #e9e9e9;
    margin-right: calc(30/1350*100%);
    line-height: 100%;
    letter-spacing: 0;
    font-weight: 400;
}
.text-line a:hover{
    color: #000;
}

.text-hover-wrap .hover-images img{
    display: none;
    position: absolute;
    z-index: 10;
    pointer-events: none;
}
.text-hover-wrap .hover-images img:nth-of-type(1){
    top: 4.32vw;
    left: 30.57vw;
}
.text-hover-wrap .hover-images img:nth-of-type(2){
    top: 19.5vw;
    left: -1.5vw;
}
.text-hover-wrap .hover-images img:nth-of-type(3){
    top: 11.14vw;
    left: 7.34vw;
}
.text-hover-wrap .hover-images img:nth-of-type(4){
    top: 7.65vw;
    left: 30.4vw;
}
.text-hover-wrap .hover-images img:nth-of-type(5){
    top: 6.35vw;
    left: -6vw;
}
.text-hover-wrap .hover-images img:nth-of-type(6){
    top: 14vw;
    left: 26vw;
}
.text-hover-wrap .hover-images img:nth-of-type(7){
     top: 14.52vw;
     left: 49.02vw;
 }
.text-hover-wrap .hover-images img:nth-of-type(8){
    top: 6.92vw;
    left: 47.93vw;
}
.text-hover-wrap .hover-images img:nth-of-type(9){
    top: 5.41vw;
    left: 11.6vw;
}
.text-hover-wrap .hover-images img:nth-of-type(10){
     top: 9.27vw;
     left: 49.5vw;
 }
.text-hover-wrap .hover-images img:nth-of-type(11){
    top: 7.08vw;
    left: -2.5vw;
}

.overview-wrap .overview{display: flex; justify-content: space-between; width: 100%; padding: 0;}
.overview > div{overflow: hidden; width: 50%; max-height: 840px; padding-bottom: 43.75%; background: url(../images/hanstyle/overview1.jpg) center no-repeat;  -webkit-background-size: cover;  background-size:cover;}
.overview .right{background: url(../images/hanstyle/overview2.jpg) center no-repeat; -webkit-background-size: cover; background-size:cover;}
.overview .txt-wrap{padding-top: calc(120/1920*100vw); padding-left: calc(120/1920*100vw); color: #fff;
}
.overview .txt-wrap strong{ display: block; margin-bottom: calc(24/1920*100%); font-size: 16px; font-weight: 500;
}
.overview .txt-wrap p{font-size: 24px; line-height: 38px; word-break: keep-all; font-weight: 300; letter-spacing: -0.06em; }

@media (max-width: 1350px){
    .view_pc{display: none;}
    .container-wrap{width: 100%; }
    .text-hover-wrap {padding: calc(230/1350*100%) calc(50/1350*100%) calc(300/1350*100%) !important;  }
    .text-line{display: inline;width: 100%;}
    .text-line a{line-height: 92px;}
    .text-hover-wrap .hover-images img{width: 40%;}
    .overview .txt-wrap{padding-right: calc(120/1920*100%)}
    .overview .txt-wrap p{font-size: 18px;}

    .view-detail .hanstyle-01 .text-area{padding: 0 calc(50/1350*100%);}

    .container-wrap.sec-02 .view-detail{width: 100%;}
    .hanstyle-02 .text-area,
    .view-detail .hanstyle-03{ padding: 0 calc(50/1350*100%);}
    .hanstyle-02 .text-area{margin-bottom: calc(100/1350*100%);}
    .hanstyle-02 .msync_animation.box1 > div{width: calc(360/1350*100vw);}
    .hanstyle-03 .text-area{width: 32%; margin-bottom: calc(400/1350*100vw); padding: 0;}
    .hanstyle-03 .msync_animation.img01{right: calc(200/1350*100%); max-width: calc(360/1350*100%);}
    .hanstyle-03 .msync_animation.img02 > div{width: calc(360/1350*100%);}

    .view-detail .hanstyle-04{padding-left: calc(50/1350*100%); padding-right: calc(50/1350*100%);}
    .hanstyle-04 .img-area .msync_animation > div{width: calc(360/1350*100vw);}
    .sec-04-slider .img-area{background-size: 70%;}

    .view-detail .hanstyle-05{padding-left: calc(50/1350*100%); padding-right: calc(50/1350*100%);}
    .hanstyle-05 .text-area{position: relative; left: 0; top: 0; width: 36%;}
    .hanstyle-05 .msync_animation{width: 70%; margin: 0 auto;}
    .hanstyle-05 .msync_animation .box_wrap{display: block;}
    .hanstyle-05 .msync_animation .box1,
    .hanstyle-05 .msync_animation .box2,
    .hanstyle-05 .msync_animation .box3{width: calc(360/1350*100vw);}
    .hanstyle-05 .msync_animation .box1 {padding-top: calc(200/1350*100%);}
    .hanstyle-05 .msync_animation .box1 .video-wrap{width: 100%;}
    .hanstyle-05 .msync_animation .box3{padding-top: calc(230/1350*100vw);}
    .hanstyle-05 .msync_animation.img02{display: none;}

    .view-detail .hanstyle-06{padding-left: calc(50/1350*100%); padding-right: calc(50/1350*100%);}
    .hanstyle-06 > .text-area{width: 50%;}
    .hanstyle-06 .img-area .text-area{display: none;}
    .hanstyle-06 .msync_animation{width: 100%;}
    .hanstyle-06 .msync_animation.box1 .video-wrap {width: calc(360/1350*100vw);margin-right: 10vw;  }
    .hanstyle-06 .msync_animation.box1 > div,
    .hanstyle-06 .msync_animation.box2 > div,
    .hanstyle-06 .msync_animation.box3 > div{width: calc(360/1350*100vw);}

    .hanstyle-07 .text-area,
    .hanstyle-07 .msync_animation,
    .view-detail .hanstyle-08{padding-left: calc(50/1350*100%); padding-right: calc(50/1350*100%);}

    .hanstyle-07 .msync_animation.box2 > div,
    .hanstyle-08 .msync_animation.box1 > div{width: calc(360/1350*100vw);}

}
@media (min-width: 1300px){
    .col-md-2.col-md-profile {
        width: 21.666667%;
    }

}
    @media screen and (max-width: 768px) {
    .view_pc{display: none;}
    .view_mo{display: block;}
    .container-wrap{width: 100%;}
    .view-detail p{letter-spacing: -0.05em;}
    .sec-01 .maskimg{background: url(../images/hanstyle/hanstyle_01_m.jpg) center no-repeat; background-size: cover;}
    .sec-01 .view-caption{padding-top: calc(60/720*100vw);}
    .sec-01 col-md-8 h6{font-size: 14px;}
    .sec-01 col-md-8 h1{}
    .view-info .caption>div{margin: 0 0 calc(140/720*100vw);}

    .text-hover-wrap{padding: calc(140/720*100vw) 0 calc(140/720*100vw) calc(64/720*100vw) !important;}
    .text-line{display: inline; width: 100%; padding: 0 ;}
    .text-line a{margin-right: calc(30/720*100vw); font-size: 27px; line-height: calc(80/720*100vw);}
    .text-hover-wrap .hover-images img{width: 50%;}
    .overview-wrap .overview{display: block;}
    .overview > div{width: 100%; padding-bottom: calc(633/720*100vw);}
    .overview .right{padding-bottom: 0;}
    .overview .txt-wrap{padding: calc(104/720*100vw) calc(65/720*100vw) calc(130/720*100vw);}
    .overview .txt-wrap strong{margin-bottom: calc(40/720*100vw); font-size: 12px; }
    .overview .txt-wrap p{width: 98%; font-size: 16px; line-height: calc(50/720*100vw);}

    .view-detail .conbody{padding: calc(180/720*100vw) calc(65/720*100vw) calc(120/720*100vw );}
    .text-area h3{margin: 0 0 calc(46/720*100vw) 0; font-size: 23px; line-height: 34px;}
    .view-detail .hanstyle-01{padding-top: calc(180/720*100vw) ;}
    .view-detail .hanstyle-01 .text-area{margin-bottom: calc(111/720*100vw); padding: 0 calc(65/720*100vw);}
    .hanstyle-01 p{width: 100%;}
    .hanstyle-01 .msync_animation.img01{padding: 0 calc(20/720*100vw) 0 calc(64/720*100vw);}
    .hanstyle-01 .msync_animation.img01 > div:first-child{display: none;}
    .hanstyle-01 .msync_animation:img01 > div:last-child{margin-right: calc(-58/720*100vw);}
    .hanstyle-01 .msync_animation.img02{padding: 0 calc(65/720*100vw);}

    .container-wrap.sec-02{padding-bottom: calc(20/720*100vw);}
    .container-wrap.sec-02 .view-detail{width: 100%;}
    hanstyle-02.conbody{padding-bottom: calc(180/720*100vw);}
    .hanstyle-02 .text-area,
    .hanstyle-03 .text-area{padding: 0 0 calc(60/720*100vw) 0;}
    .hanstyle-02 .img-area{padding: 0 calc(30/720*100vw) calc(120/720*100vw);}
    .hanstyle-02 .msync_animation.box1 > div{width: calc(240/720*100vw);}

    .view-detail .hanstyle-03{padding-top: calc(60/720*100vw);}
    .hanstyle-03 .text-area{width: 100%; margin-bottom: 0;}
    .hanstyle-03 .msync_animation.img01{position: relative; top: 0; right: calc(-30/720*100vw); width: calc(378/720*100vw); max-width: calc(300/720*100vw); margin: 0 auto;}
    .hanstyle-03 .msync_animation.img02{padding: 0 calc(30/720*100vw);}
    .hanstyle-03 .msync_animation.img02 > div:first-child{margin-right: calc(48/720*100vw);}
    .hanstyle-03 .msync_animation.img02 > div:last-child{display: none;}
    .hanstyle-03 .msync_animation.img02 > div{width: calc(240/720*100vw);}

    .view-detail .hanstyle-04{display: block; padding-top: calc(140/720*100vw); padding-bottom: 0;}
    .hanstyle-04 h3{margin-bottom: calc(103/720*100vw);}
    .hanstyle-04 .img-area{width: 100%; padding: 0 calc(33/720*100vw);}
    .hanstyle-04 .msync_animation > div:first-child{margin-right: calc(48/720*100vw);}
    .hanstyle-04 .img-area .msync_animation > div{width: calc(240/720*100vw);}

    .sec-04-slider .img-area{background-size: 40%;}

    .hanstyle-05 .text-area{position: relative; left: 0; top: 0; width; 100%;}
    .hanstyle-05 .text-area p{display: none;}
    .hanstyle-05 .msync_animation{width: 100%; padding: 0 calc(30/720*100vw);}
    .hanstyle-05 .msync_animation .box_wrap{display: block; width:  calc(50% - 12px);}
    .hanstyle-05 .msync_animation .box1{width: 100%; padding-top: 0;}
    .hanstyle-05 .msync_animation .box2,
    .hanstyle-05 .msync_animation .box3{width: calc(240/720*100vw);}
    .hanstyle-05 .msync_animation .box1 .video-wrap{width: calc(240/720*100vw);}
    .hanstyle-05 .msync_animation .box3 {width: calc(50% - 12px);}
    .hanstyle-05 > .msync_animation{display: none;}

    .sec-06 .bg{height: calc(300/720*100vw); background: url(../images/hanstyle/hanstyle_06_bg_m.jpg) 0 0 no-repeat; background-size: cover;}
    .view-detail .hanstyle-06{margin-top: calc(-198/720*100vw);}
    .hanstyle-06> .text-area{margin-bottom: calc(80/720*100vw);}
    .hanstyle-06 .img-area .text-area{display: none;}
    .hanstyle-06 > .msync_animation{padding: 0 calc(30/720*100vw);}
    .hanstyle-06 > .msync_animation,
    .hanstyle-06 .msync_animation.box1{margin-bottom: calc(80/720*100vw);}
    .hanstyle-06 .msync_animation.box1{justify-content: space-between;}
    .hanstyle-06 .msync_animation.box1 > div,
    .hanstyle-06 .msync_animation.box1 .video-wrap,
    .hanstyle-06 .msync_animation.box2 > div,
    .hanstyle-06 .msync_animation.box3 > div{width: calc(240/720*100vw); }
    .hanstyle-06 .msync_animation.box1 .video-wrap{margin-right: 0;}
    .hanstyle-06 > .msync_animation.box2 > div:last-child,
    .hanstyle-06 > .msync_animation.box3 > div:first-child{display: none;}

    .view-detail .hanstyle-07{padding-top: calc(60/720*100vw);}
    .hanstyle-07 .text-area,
    .hanstyle-07 .msync_animation{padding: 0;}
    .hanstyle-07 h3, .hanstyle-08 h3{margin-bottom: calc(80/720*100vw);}
    .hanstyle-07 .msync_animation, .hanstyle-08 .msync_animation{margin-bottom: calc(120/720*100vw);}
    .hanstyle-07 .img-area{padding: 0;}
    .hanstyle-07 .msync_animation.box2,
    .hanstyle-08 .msync_animation{padding: 0 calc(30/720*100vw);}
    .hanstyle-07 .msync_animation.box2 > div,
    .hanstyle-08 .msync_animation.box1 > div{width: calc(240/720*100vw);}
    .hanstyle-07 .msync_animation.box2 > div:last-child,
    .hanstyle-08 .msync_animation > div:last-child{display: none;}

    .view-detail .hanstyle-08{padding-top: calc(40/720*100vw); padding-bottom: calc(180/720*100vw);}
}


@media (max-width: 620px) {
    .hanstyle-01 > div{position: static;width:100%;}
    .hanstyle-01 > div > .video-wrap{left:15.6vw;margin-top:22vw;width:63.2%}

    /*.hanstyle-02 > .text-area{width:100%;padding: 20px;}*/
   /* .hanstyle-02 .msync_animation{flex-wrap:wrap;padding: 0 20px;}
    .hanstyle-02 .msync_animation > div{width: 45%;margin-bottom:20px}

    .hanstyle-04{flex-direction: column-reverse;}
    .hanstyle-04 > div{width: 100%;padding: 0 20px;}
    .hanstyle-04 > .left{margin-top:20px}

    .hanstyle-05{height: 40vh;background-size: auto 60%;}
    .hanstyle-05 h3{font-size:22px;}
    .hanstyle-06{height: 40vh;background-size: auto 50%;}
    .hanstyle-06 > div{padding:20px;}*/
}

@media screen and (max-width: 768px) {
    .sec-04-slider .img-area{width: 20%;}
}