@charset "utf-8";

@font-face {
    font-family: 'SunBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/SunBatang-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'SunBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/SunBatang-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'SunBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/SunBatang-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'KBIZHanmaumMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KBIZHanmaumMyungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.over_view {
    padding: 2.5em 0 7.5em;
}
.con_sub_ttl {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 40px;
}

.brand_stroy {
    background: url(../img/sub/brand_bg.png) no-repeat center /cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.brand_stroy h2 {
    font-family: 'SunBatang';
    font-weight: 500;
    font-size: 52px;
    color: #fff;
    padding: 176px 0;
    letter-spacing:0.4em ;
}
.over_cont01 {
    padding-top: 110px;
}

.over_cont01 .top_ttl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    transform: translateY(100px);
    transition: all 1.2s;
    opacity: 0;

}
.over_cont01 .top_ttl.on {
    opacity: 1;
    transform: translateY(0);
}
.over_cont01 .top_ttl p {
    font-size: 44px;
    font-family: 'Nanum SquareL';
    position: relative;
}
.over_cont01 .top_ttl p::after {
    content: '';
    font-size: 190px;
    z-index: -1;
    display: block;
    position: absolute;
    top: -78px; left: -48px;
    width: 152px; height: 169px;
    background: url(../img/sub/com_img_01.png) no-repeat center / cover;
}
.over_cont01 .top_ttl p strong {
    display: block;
    font-family: 'Nanum SquareEB';
    font-size: 45px;
    margin-top: 20px;
}
.over_cont01 .top_ttl .sub_line {
    width: 1px; height: 67px;
    background: #000000 ;
    margin:57px 0 40px ;
}
.over_cont01 .top_ttl .sub_ttl {
    font-size: 18px;
    color: #454545 ;
    line-height: 1.5;
}
.over_cont01 .sol {
    margin-top: 90px;
    display: flex;
    background: url(../img/sub/com_img_02.png) no-repeat right;
    transform: translateY(100px);
    transition: all 1.2s;
    opacity: 0;
    
}
.over_cont01 .sol.on {
    opacity: 1;
    transform: translateY(0);
}
.over_view .txt_area {
    margin-top: 150px;
    padding-left: 46px ;
}
.over_view .txt_area  p{
    font-size: 36px;
    position: relative;

}
.over_view .txt_area  p strong {
    font-weight: 700;
}
.over_view .txt_area p::after {
    content:'Spring' ;
    position: absolute;
    font-family: 'SunBatang';
    font-weight: 500;
    color: #f9f9f9;
    top: -100px; left:-60px;
    font-size: 180px;
    z-index: -1;
    letter-spacing: -0.05em;
}
.over_view .txt_area p + span {
    margin-top: 34px;
}
.over_view .txt_area span {
    font-size: 18px;
    color: #757575;
    line-height: 1.5;
    display: block;
}
.over_view .txt_area .tag {
    display: flex;
    margin-top:54px;
    margin-bottom: 155px;
}
.over_view .txt_area .tag li {
    font-size: 18px;
    color: #454545 ;
    font-weight: 500;
    padding-bottom: 3px;
    border-bottom: 1px solid #252525;
}
.over_view .txt_area .tag li + li {
    margin-left: 20px;
}

.over_cont02 {
    margin-top: 75px;
    padding-top:200px ;
    padding-bottom: 170px;
    background: url(../img/sub/brand_bg_02.png) no-repeat top center / cover;
}
.over_cont02 .sol_3cont {
    display: flex;

}
.over_cont02 .sol_3cont li + li {
    margin-left:147px ;
}
.sol_3cont li {
    transform: translateY(100px);
    transition: all 1.2s;
    opacity: 0;
}
.sol_3cont.on li{
    opacity: 1;
    transform: translateY(0);
}
.sol_3cont.on li:nth-child(1) {
    transition-delay: 0.1s;
}
.sol_3cont.on li:nth-child(2) {
    transition-delay: 0.3s;
}
.sol_3cont.on li:nth-child(3){
    transition-delay: 0.5s;
}
.over_cont02 .sol_3cont .line {
    width: 30px; height: 3px;
    background: #5993ab;
    display: block;
    margin-bottom:35px ;
}
.over_cont02 .sol_3cont strong {
    font-size: 36px;
    font-weight: 400;
    color:#4794b4 ;
}
.over_cont02 .sol_3cont  p {
    word-break: keep-all;
    margin-top: 32px;
    font-size: 18px;
    line-height: 1.5;
    color:#676767 ;   
}

.over_cont03  {
    display: flex;
    margin-top: 110px;
    justify-content: space-between;
    
}
.over_cont03.on {
  
}
.over_cont03::after {
    display: none;
}
.over_cont03 > li {
    width: calc(50% - 58px);
}
.over_view .over_cont03  .txt_area p::after {
    content: 'Nature';
}
.over_view .over_cont03 li.left {
    transform: translateY(100px);
    transition: all 1.2s;
    opacity: 0;
}
.over_view .over_cont03 li.left.on {
    opacity: 1;
    transform: translateY(0);
}
.over_view .over_cont03 li.right {
    /* margin-left: 116px; */
    display: flex;
    flex-direction: column;
    transform: translateY(100px);
    transition: all 1.2s;
    opacity: 0;
}
.over_view .over_cont03 li.right.on {
    opacity: 1;
    transform: translateY(0);
}
.over_view .over_cont03 li.right .last {
    display: flex;
    flex-direction: column;
}
.over_view .over_cont03 .txt_area .tag {
    margin-bottom: 60px;
}


.over_view li.right  .txt_area {
    margin-top: 60px;
    padding-left: 0px;
}
.over_view li.right  .txt_area span + span {
    margin-top:35px ;
}
.over_view li.right .skin {
    justify-content: flex-end;
    margin-top: 147px;
    font-size: 26px;
    line-height: 1.3;

}
.over_view li.right .skin span {
    color: #5f9251;

}


/* 작은화면 */
@media screen and (max-width: 1224px) {
    .only_sweb {display: none !important;}
    .over_cont02 .sol_3cont li + li {
        margin-left: 57px;
    }
    .over_cont01 .sol {
        background: url(../img/sub/com_img_02.png) no-repeat right / 650px auto;
    }
}

@media screen and (max-width: 1130px) {
    .over_cont03 > li {
        width: calc(50% - 30px);
    }
    .over_cont01 .sol {
        background: url(../img/sub/com_img_02.png) no-repeat right / 600px auto;
    }
}

@media screen and (max-width: 1080px) {
    .over_cont01 .sol {
        background: url(../img/sub/com_img_02.png) no-repeat right /550px auto;
    }
    .over_view .txt_area {
        padding-left: 20px;
    }
    .over_view .txt_area p {
        font-size: 32px;
    }
    .over_view .txt_area p::after {
        left: -31px;
        font-size: 160px;
    }
}

@media screen and (max-width: 950px) {
    .over_cont01 .sol {
        background: url(../img/sub/com_img_02.png) no-repeat right /500px auto;
    }
}

@media screen and (max-width: 850px) {
    .img_wrap img {
        width: 100%;
    }

    .over_view {
        padding: 45px 0 80px;
    }
    .con_sub_ttl {
        font-size: 18px;
        margin-bottom: 24px;
    }
    .contact_snb {
        padding-bottom: 25px;
    }
    .contact_snb .cs_tab li a {
        line-height: 33px;
        padding:0;
        font-size: 12px;
    }
    .brand_stroy {
        background: url(../img/sub/brand_bg_m.png) no-repeat center /cover;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .brand_stroy h2 {
        font-size: 31px;
        padding: 95px 0;
    }
    .over_cont01 {
        padding-top: 60px;
    }
    .over_cont01 .top_ttl p {
        font-size: 27px;
    }
    .over_cont01 .top_ttl p strong {
        font-size: 27px;
        margin-top: 10px;
    }
    .over_cont01 .top_ttl p::after {
        top: -44px;
        left: -27px;
        width: 80px;
        height: 100px;
        background: url(../img/sub/com_img_01_m.png) no-repeat center / 80px auto;
    }
    .over_cont01 .top_ttl .sub_line {
        height: 39px;
        margin: 25px 0;
    }
    .over_cont01 .top_ttl .sub_ttl {
        font-size: 14px;
    }

    .over_cont01 .sol {
        flex-direction: column;
        margin-top: 50px;
        display: flex;
        background:none;
    }
    .over_cont01 .sol .img_wrap {
        z-index: -1;
    }
    .over_view .txt_area {
        margin-top:15px;
        padding-left: 13px;
    }
    
    .over_view .txt_area p {
        font-size: 23px;
    }
    .over_view .txt_area p::after {
        top: -57px;
        left: 0;
        font-size: 90px;
    }
    .over_view .txt_area p + span {
        margin-top: 20px;
    }
    .over_view .txt_area span {
        font-size: 14px;
    }
    .over_view .txt_area .tag {
        display: flex;
        margin-top: 30px;
        margin-bottom:45px;
    }
    
    .over_view .txt_area .tag li {
        font-size: 14px;
    }
    .over_view .txt_area .tag li + li {
        margin-left: 15px;
    }
    
    .over_cont02 {
        margin-top: 0;
        padding: 85px 25px 60px;
        background: url(../img/sub/brand_bg_02_m.png) no-repeat top center / cover;
    }
    .over_cont02 .sol_3cont {
        flex-direction: column;
    }
    .over_cont02 .sol_3cont li + li {
        margin-left: 0;
        margin-top:40px ;
    }


    .over_cont02 .sol_3cont .line {
        width: 25px;
        height: 2px;
        margin-bottom: 22px;
    }
    .over_cont02 .sol_3cont strong {
        font-size:23px;
    }
    .over_cont02 .sol_3cont p {
        margin-top: 22px;
        font-size: 14px;
    }
    .over_cont03 {
        margin-top: 100px;
        justify-content: space-between;
        flex-direction: column;
    }
    .over_cont03 > li {
        width: 100%;
    }
    .over_view .over_cont03 .txt_area .tag {
        margin-bottom: 35px;
    }
    .over_view .over_cont03 li.right {
        flex-direction: column-reverse;
    }
    .over_view li.right .txt_area {
        margin-top: 30px;
    }
    .over_view li.right .txt_area span + span {
        margin-top:30px;
    }
    .over_view li.right .skin {
        margin-top: 45px;
        font-size: 18px;
        margin-bottom: 60px;
        line-height: 1.5;
    }
    
} 
@media screen and (max-width:355px) {
    
    .only_sm {
        display: none !important;
    }

    .over_view .txt_area p {
        font-size:20.5px;
    }
}



@media screen and (max-width:340px) {
    .over_cont01 .top_ttl .sub_ttl {
        font-size: 13px;
    }
}