.page_content{overflow: hidden; } .page_visu{position: relative; height: 21.875rem; overflow: hidden; -webkit-animation:visual_scale 1s;animation:visual_scale 1s; } .page_visu .wrap {text-align: center; height: 21.85rem; padding-top: 11rem; color: #fff; font-size: 3.75rem; } .page_visu .wrap h1{ font-family: 'HappinessB',serif; animation-fill-mode: both; animation-name: fadeInLeft; animation-delay: 0.7s; animation-duration: 0.7s;} .fadeInLeft {-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;} /*fadein*/ @keyframes fadeIn { from {opacity: 0} to {opacity: 1} } .fadeInAnimated { opacity: 0; animation: fadeIn 2s forwards; /* forwards (animation-fill-mode) retains the style from the last keyframe when the animation ends */ } #second { animation-delay: 2s; } #third { animation-delay: 4s; } #four { animation-delay: 6s; } #fif { animation-delay: 8s; } #six { animation-delay: 10s; } #seven { animation-delay: 12s; } #eigh { animation-delay: 14s; } #nin { animation-delay: 16s; } #ten { animation-delay: 18s; } /*글자 타이핑*/ .typing-txt{ display: none; font-weight:bold; color:#30F; } .typing { /*position: absolute;*/ display: inline-block; animation-name: cursor; animation-duration: 0.5s; animation-iteration-count: infinite; } /* @keyframes cursor{ 0%{border-right: 1px solid #fff} 50%{border-right: 1px solid #000} 100%{border-right: 1px solid #fff} }*/ /* animate */ @keyframes fadeInLeft { 0% {opacity:0;-webkit-transform:translateX(-40px);-ms-transform:translateX(-40px);transform:translateX(-40px);} 100% {opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);} } @-webkit-keyframes fadeInRight { 0% {opacity:0;-webkit-transform:translateX(40px);transform:translateX(40px);} 100% {opacity:1;-webkit-transform:translateX(0);transform:translateX(0);} } .page_visu .wrap .hr{width: 6.25rem; height: 0.125rem; background: #fff; margin: 0 auto; margin-top: 1.25rem;} @-webkit-keyframes visual_scale {from {transform: scale(1.2);} to {transform: scale(1);}} @keyframes visual_scale {from {transform: scale(1.2);} to {transform: scale(1);}} .lnb {position: relative;background: #fff;} .lnb .wrap ul{display: flex; align-items: center; font-size: 1.125rem; padding: 2.5rem 0;} .lnb .wrap ul li:nth-child(2n){padding: 0 1.25rem; color: #e5e5e5;} .lnb .wrap ul li:nth-child(3){color:#808080;} .lnb .wrap ul li:last-child{font-family: 'HappinessB',serif;} .lnb .wrap ul li i img{width: 1.4375rem;} /* #section .sec_banner{height: 33rem;} */ #section .wrap {word-break:keep-all} /*#section .wrap .sec_top{border-bottom: 1px solid #000;word-break:keep-all}*/ #section .wrap .sec_top h1{margin-top: 0.625rem; text-align: center; font-size: 2.5rem; font-family: 'HappinessR',serif;} #section .wrap .sec_top h1 span{ text-align: center; font-size: 2.5rem; font-family: 'HappinessB',serif; color:#000;} #section .wrap .sec_top h2{margin-top: 150px; text-align: center; font-size: 1.5rem; font-family: 'HappinessB',serif; color:#5082c3;} #section .wrap .sec_top h2:after{content: ""; position: absolute; bottom: -20px; left: 50%; width: 35px; height: 3px; transform: translate(-50%, 0); background: #49675b;} #section .wrap .sec_top p{text-align: center; margin-top: 1.875rem; font-size: 1.625rem; line-height: 2.625rem; color: #3a3a3a;} #section .wrap .sec_con{padding: 0 0.125rem;} #section .wrap .sec_con .sec_con_img {text-align: center; margin-top: 6.25rem;} #section .wrap .sec_con h2{font-size: 2.125rem; color: #253b9c; font-family: 'HappinessB',serif; margin-top: 6.25rem;} #section .wrap .sec_con h4{font-size: 2.025rem; font-family: 'HappinessB',serif; margin-top: 1.5625rem;} #section .wrap .sec_con p{margin-top: 1.875rem; font-size: 1.475rem; line-height: 2.85rem; color: #606060;} #section .wrap .sec_con ul.sec_con_list{display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 6.25rem;} #section .wrap .sec_con ul.sec_con_list li{width: 47.5%; display: flex; align-items: center;} #section .wrap .sec_con ul.sec_con_list li i img{width: 8.375rem;} #section .wrap .sec_con ul.sec_con_list li:nth-child(1){border-bottom: 1px solid #e5e5e5;} #section .wrap .sec_con ul.sec_con_list li:nth-child(2){border-bottom: 1px solid #e5e5e5;} #section .wrap .sec_con ul.sec_con_list li .sec_con_list_txt {margin-left: 1.875rem; padding: 2.5rem 0;} #section .wrap .sec_con ul.sec_con_list li .sec_con_list_txt h5{font-size: 1.575rem; font-family: 'HappinessB',serif;} #section .wrap .sec_con ul.sec_con_list li .sec_con_list_txt p{font-size: 1.475rem; margin-top: 0.625rem; color: #606060; line-height: 2.625rem;} #section .wrap .sec_default h2{margin-top:3.125rem} #section .wrap .sec_1box{display: flex; justify-content: space-between;} #section .wrap .sec_1box > div{width: 48.5%;} #section .wrap .sec_1box > div > img {width: 100%;} #section .wrap .sec_1box .sec_con_txt img{margin-top: 1.875rem;} #section .wrap .sec_1box_style2{display: flex; justify-content: space-between;} #section .wrap .sec_1box_style2 .flex{display: flex; justify-content: space-between;} #section .wrap .sec_1box_style2 .flex .sec_con_img{width: 47.5%;} #section .wrap .sec_1box_style2 .flex .sec_con_img img{width: 100%;} #section .wrap .sec_1box_style2 .flex .sec_con_txt{width: 47.5%;} #section .wrap .sec_1box_style2 > div{width: 47.5%;} #section .wrap .sec_1box_style2 > div > img {width: 100%;} #section .wrap .sec_1box_style2 .sec_con_txt img{margin-top: 1.875rem;} #section .wrap .sec_1box_style2 .box2_wrap .flex:last-child .sec_con_img{margin-top: 3.125rem;} #section .wrap .sec_1box_style2 .box2_wrap .flex:last-child .sec_con_txt h2{margin-top: 3.125rem;} #section .wrap .sec_2box h2{margin-top:3.125rem} #section .wrap .sec_2box .sec_con_img{display: flex; justify-content: space-between;} #section .wrap .sec_2box .sec_con_img > img{width: 49.65%;} /* #section .wrap .sec_con4 .sec_con_img > img:nth-child(1){margin-right: 0.625rem;} */ #section .wrap .sec_3box h2{margin-top:3.125rem} #section .wrap .sec_3box .sec_con_img{display: flex; justify-content: space-between;} #section .wrap .sec_3box .sec_con_img > img{width: 32.8%;} /* #section .wrap .sec_con5 .sec_con_img > img{margin-right: 0.625rem;} #section .wrap .sec_con5 .sec_con_img > img:last-child{margin-right: 0;} */ #section .wrap .sec_4box h2{margin-top:3.125rem} #section .wrap .sec_4box .sec_con_img{display: flex; justify-content: space-between;} #section .wrap .sec_4box .sec_con_img > img{width: 24.4%;} #section .wrap .hr{padding: 0 3.125rem;} #section .wrap .hr .lines{width: 100%; height: 1px; background: #eee; margin-top: 6.25rem;} .sec_banner .wrap{width: 61.875rem;} .sec_banner .wrap .sec_banner_txt{text-align: center; padding: 2.8125rem 0;} .sec_banner .wrap .sec_banner_txt .hr{display: flex;} .sec_banner .wrap .sec_banner_txt .hr1{display: flex; align-items: flex-end;} .sec_banner .wrap .sec_banner_txt .hr1 i{margin-right: 1.875rem;} .sec_banner .wrap .sec_banner_txt .hr2 i{margin-left: 1.875rem;} .sec_banner .wrap .sec_banner_txt .hr i img{width: 3.4375rem;} .sec_banner .wrap .sec_banner_txt .hr .line{width: 100%; height: 1px; background: rgba(255, 255, 255, 0.5); display: block;} .sec_banner .wrap .sec_banner_txt h2{margin-top: 2.8125rem; font-size: 1.875rem; color: #fff; font-family: 'HappinessB',serif;} .sec_banner .wrap .sec_banner_txt h2 span{font-size: 3.75rem; font-family: 'HappinessB',serif;} .sec_banner .wrap .sec_banner_txt h4{margin-bottom: 2.8125rem; color: #fff; font-size: 1.875rem; margin-top: 2.1875rem; line-height: 3rem;} #section .wrap .sec_bottom{ text-align: left;} #section .wrap .sec_bottom .like_btn{margin: 0 auto; height: 3.125rem; border-radius: 3.125rem; border: 1px solid #e5e5e5; display: flex; align-items: center; padding: 0 1.875rem; font-size: 1.375rem; margin-top: 6.25rem;} #section .wrap .sec_bottom .like_btn i{margin-right: 0.625rem; } #section .wrap .sec_bottom .like_btn i img{width: 1.625rem;} #section .wrap .sec_bottom .like_btn p span{font-size: 1.5rem; color: #ff4800; font-family: 'HappinessB',serif;} #section .wrap .sec_bottom .comment .comment_top *{font-family: 'HappinessB',serif;} #section .wrap .sec_bottom .comment .comment_top h4{font-size: 1.5rem; margin-top: 6.875rem; padding-bottom: 1.5625rem; border-bottom: 1px solid #000;} #section .wrap .sec_bottom .comment .comment_top h4 span{color: #ff4800;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_info{display: flex; margin-top: 2.5rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_info li{display: flex; align-items: center;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_info li p{margin-right: 0.625rem; font-size: 1.25rem; color: #606060;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_info li input{ width: 8.75rem; height: 2.125rem; border: 1px solid #c3c3c3; margin-right: 1.875rem;} #section .wrap .sec_bottom .comment .comment_wrap form .comment_write{display: flex; margin-top: 1.25rem;} #section .wrap .sec_bottom .comment .comment_wrap form .comment_write textarea{width: 90%; height: 7.5rem; border: 1px solid #c3c3c3; resize: none;} #section .wrap .sec_bottom .comment .comment_wrap form .comment_write button{width: 7.5rem; height: 7.5rem; background: #333333; color: #fff; font-size: 1.25rem; margin-left: 0.625rem; border-radius: 0.3125rem; font-family: 'HappinessB',serif;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list{margin-bottom: 7.5rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li{padding: 2.8125rem 0; border-bottom: 1px solid #e5e5e5;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top{display: flex; justify-content: space-between; align-items: center;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top .comment_list_top_left{display: flex; align-items: center;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top .comment_list_top_left h5{margin-right: 1.25rem;font-size: 1.375rem; font-family: 'HappinessB',serif;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top .comment_list_top_left p{color: #a5a5a5; font-size: 1.125rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right{display: flex; align-items: center;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li{margin-left: 1.5625rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li a{display: flex; align-items: center;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li a i{margin-right: 0.5rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li a i img{width: 1.375rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li a span{font-size: 1.125rem; color: #a5a5a5;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li button{display: flex; align-items: center;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li button i{margin-right: 0.5rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li button i img{width: 1.375rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_top ul.comment_list_top_right li button span{font-size: 1.125rem; color: #a5a5a5;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_bottom{margin-top: 1.875rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_list > li .comment_list_bottom p{color: #606060; font-size: 1.25rem; line-height: 1.4;} /*스크롤 밑줄*/ .back_text { background-image: linear-gradient(90deg, transparent 50%, rgba(255, 237, 194, 1) 0); background-size: 200%; transition: background-position 2s linear; color:#000; } .back_text.on { background-position: -100%; } @media screen and (max-width: 1300px){ #section .wrap .sec_con .sec_con_img img{width: 100%;} #section .wrap .sec_con .sec_con_img video{width: 100%;} .sec_banner .wrap{width: 100%; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box;} #section .wrap .sec_2box .sec_con_img > img{width: 49.65%;} #section .wrap .sec_3box .sec_con_img > img{width: 32.8%;} #section .wrap .sec_4box .sec_con_img > img{width: 24.4%;} } @media screen and (max-width: 700px) and (min-width: 520px){ #section .wrap .sec_top p{font-size: 1.425rem;} .sec_banner .wrap .sec_banner_txt h4{font-size: 1.375rem;} } @media screen and (max-width: 992px){ #section .wrap .sec_con{padding: 0;} #section .wrap .sec_con ul.sec_con_list{display: block;} #section .wrap .sec_con ul.sec_con_list li{border-bottom: 1px solid #e5e5e5; width: 100%;} #section .wrap .sec_1box h2{margin-top: 3.125rem;} #section .wrap .sec_1box_style2{display: block;} #section .wrap .sec_1box_style2 > div{width: 100%;} #section .wrap .sec_1box_both h2{margin-top: 6.25rem;} #section .wrap .hr{padding: 0;} #section .wrap .sec_top h2{margin-top: 80px; text-align: center; font-size: 1.5rem; font-family: 'HappinessB',serif;} } @media screen and (max-width: 750px){ #section .wrap .sec_1box{display: block;} #section .wrap .sec_1box > div{width: 100%;} #section .wrap .sec_1box_style2 .flex{display: block;} #section .wrap .sec_1box_style2 .flex .sec_con_txt h2{margin-top: 3.125rem;} #section .wrap .sec_1box_style2 .box2_wrap .flex:last-child .sec_con_img{margin-top: 6.25rem;} #section .wrap .sec_1box_style2 .flex .sec_con_img{width: 100%;} #section .wrap .sec_1box_style2 .flex .sec_con_txt{width: 100%;} #section .wrap .sec_4box .sec_con_img{flex-wrap: wrap;} #section .wrap .sec_4box .sec_con_img > img{width: 49.5%;} #section .wrap .sec_4box .sec_con_img > img:nth-child(3), #section .wrap .sec_4box .sec_con_img > img:nth-child(4){margin-top: 0.625rem;} } @media screen and (max-width: 520px){ html{font-size: 11px;} } @media screen and (max-width: 420px){ #section .wrap .sec_top h1{font-size: 2.4rem;} #section .wrap .sec_top p{font-size: 1.625rem; } .sec_banner .wrap .sec_banner_txt h4{font-size: 1.575rem;} #section .wrap .sec_bottom .comment .comment_wrap form ul.comment_info li input{margin-right: 1.075rem;} }