@charset "utf-8";

/*------------PC------------*/
@media all and (min-width: 1200px){
.mo-only {display: none !important;}

#wrapper {background-color: #fff; width: 100%; height: 100%;}
#container_wr {width: 1400px; max-width: 90%; margin: 0 auto;}

#header {background-color: transparent;}

/*------------Common------------*/
.green {color: #17b75e;}
.blue {color: #0866ff;}
.gray {color: #a8a8a8;}
.navy {color: #01007c;}
.red {color: #ff0033;}

.bg_green {background-color: #17b75e;}
.bg_gray {background-color: #a8a8a8;}
.bg_blue {background-color: #0866ff;}
.bg_navy {background-color: #01007c;}
.bg_red {background-color: #ff0033;}

.transition1s {-webkit-transition: all 1000ms linear; -ms-transition: all 1000ms linear; transition: all 1000ms linear;}
.transition1_5s {-webkit-transition: all 1500ms linear; -ms-transition: all 1500ms linear; transition: all 1500ms linear;}

.page_banner {position: relative; left: 50%; width: 100vw; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-bottom: 150px; overflow: hidden;}
.page_banner img.background {-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: 2000ms linear; -ms-transition: 2000ms linear; transition: 2000ms linear;}
.page_banner img.txt {position: absolute; top: 50%; left: 50%; opacity: 0; visibility: hidden; width: 24%; height: auto;
  -webkit-transform: translate(-50%,-100%); -ms-transform: translate(-50%, -100%); transform: translate(-50%, -100%);
-webkit-transition: 700ms ease-in; -ms-transition: 700ms ease-in; transition: 700ms ease-in;}

.page_banner .txt_wrap {position: absolute; top: 50%; left: 50%; text-align: center; color: #fff; opacity: 0; visibility: hidden;
   -webkit-transform: translate(-50%,-100%); -ms-transform: translate(-50%, -100%); transform: translate(-50%, -100%);
  -webkit-transition: all 700ms ease; -ms-transition: all 700ms ease; transition: all 700ms ease;}
.page_banner .txt_wrap > p:first-child {font-size: 1.375rem; font-weight: 600; line-height: 1; opacity: 0.45; letter-spacing: 1px;}
.page_banner .txt_wrap > p:last-child {font-size: 3.125rem; font-weight: bold; padding-top: 10px; line-height: 1;}

.content_reverse {text-align: right;}

/*------------Common active------------*/
.page_banner.active img.background {width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
.page_banner.active img.txt {-webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; visibility: visible;}
.page_banner.active .txt_wrap {opacity: 1; visibility: visible; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}


/*------------Marketing Common------------*/
#marketing_common_video {width: 100%; padding: 100px 0; border-top: 1px solid #ddd;}

#marketing_common_video .video_wrap {position: relative; width: 100%; padding-top: 56.25%;}
#marketing_common_video .video_wrap > iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

#marketing_common_video .video_more {width: 100%; margin: 30px 0; text-align: center;}
#marketing_common_video .more_link {display: inline-block; width: 264px; text-transform: capitalize; position: relative; font-size: 1.25rem; letter-spacing: -1px; padding: 10px 30px; background-color: #3d6eff; color: #fff; border-radius: 30px;
-webkit-transition: all 200ms linear 0s; -ms-transition: all 200ms linear 0s; transition: all 200ms linear 0s; overflow: hidden;}
#marketing_common_video .more_link::before {content: ''; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 50px; height: 100%; background-color: #7a9cff; border-radius: 0 50% 50% 0;
-webkit-transform: scale(0,1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center;
-webkit-transition: all 200ms linear 0s; -ms-transition: all 200ms linear 0s; transition: all 200ms linear 0s; background-image: url('../../images/page/chevron-right-solid.svg'); background-position: center;
background-repeat: no-repeat; background-size: 25px 30px;}
#marketing_common_video .more_link:hover {text-indent: 30px;}
#marketing_common_video .more_link:hover::before {-webkit-transform: scale(1,1); -ms-transform: scale(1, 1); transform: scale(1, 1); text-indent: 0;}


/*------------Sub Menu------------*/
#SubNav {position: absolute; top: 585px; left: 50%; width: 100vw; height: 60px; z-index: 10; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#SubNav .subnav_wrap {width: 1200px; margin: 0 auto;}
#SubNav .submenu_list {font-size: 0; line-height: 0; text-align: center;}
#SubNav .submenu_item {display: inline-block; width: calc(100% / 6); font-size: 1.25rem; line-height: 61px; text-align: center;}
#SubNav .submenu_item a {display: block; color: #fff;}

#SubNav .subnav_wrap.service {width: 800px;}
#SubNav .subnav_wrap.service .submenu_item {width: calc(100% / 4);}

/*------------COMPANY------------*/
.company_page #service2 {padding: 100px 0; text-align: right;}
.company_page #service3 {padding: 0 0 200px;}

.company_page .content_contain {font-size: 0; line-height: 0;}
.company_page .content_contain > div {display: inline-block; font-size: 1rem; line-height: 1;}

.company_page .content_contain .service_txt {width: 50%; vertical-align: top;}
.company_page .content_contain .sub_title {color: #9829dd; font-size: 3.125rem; font-weight: bold; letter-spacing: -2px;}
.company_page .content_contain .number {color: #b97ce3; font-size: 3.75rem; font-weight: bold; padding: 40px 0 20px;}
.company_page .content_contain .words {color: #9829dd; font-size: 2.8125rem; font-weight: bold; letter-spacing: -2px;}
.company_page .content_contain .content_txt p {color: #000; font-size: 1.25rem; font-weight: 500; line-height: 1.5; letter-spacing: -1px; padding: 20px 0;}

.company_page .content_contain .recommend_txt {background-color: #9829dd; color: #fff; text-align: center; width: 50%; height: 40px; line-height: 40px; font-size: 1.25rem; border-radius: 20px;}
.company_page .content_contain ul {padding-top: 10px;}
.company_page .content_contain ul li {display: inline-block; color: #000; font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; line-height: 1; padding: 15px 0 15px 40px; position: relative;}
.company_page .content_contain ul li::before {content: ''; display: block; position: absolute; top: 50%; left: 0; width: 25px; height: 24px;
background-image: url('../../images/page/company/check_ico.png'); background-position: center; background-repeat: no-repeat; background-size: cover;
-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}

.company_page #service2 .recommend_txt,
.company_page #service2 .recommend ul {float: right;}

.company_page .content_contain .service_img {width: 50%; height: 600px; overflow: hidden;}
.company_page .content_contain .service_img img {width: 100%; -webkit-transition: transform 250ms ease-in 0s; -ms-transition: transform 250ms ease-in 0s;transition: transform 250ms ease-in 0s;}
.company_page .content_contain .service_img img:hover {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}

/*------------INTERIOR / LOCATION------------*/
#interior, #location {padding: 30px 0 120px;}

#interior > .title {text-align: center; margin-bottom: 50px;}
#interior > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#interior > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#location > .title {text-align: center;}
#location > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#location > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#location .gomap {width: 100%; margin: 60px 0 40px;}
#location .gomap .way_list {display: flex; align-items: center; justify-content: flex-end;}
#location .gomap .way_list li:nth-child(2) {margin: 0 10px;}
#location .gomap .way_list li button.map_btn {display: inline-block; position: relative; white-space: nowrap; background-color: transparent; transition-property: all; transition-duration: 600ms; z-index: 5; overflow: hidden; padding: 0.7rem 1.5rem; border: 1px solid #0866ff;
  font-size: 1.25rem; font-weight: 400; letter-spacing: 0; width: 100%; -webkit-transition: color 300ms linear; -ms-transition: color 300ms linear; transition: color 300ms linear;}
#location .gomap .way_list li button.map_btn::after {content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: #0866ff; -webkit-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); transform: translate(-100%, 0);
-webkit-transition: transform 300ms linear; -ms-transition: transform 300ms linear; transition: transform 300ms linear;}
#location .gomap .way_list li button.map_btn:hover {color: #fff;}
#location .gomap .way_list li button.map_btn:hover::after {-webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}

#location .mapBox {height: 37.5rem;}
#location .mapBox .root_daum_roughmap,
#location .mapBox .wrap_map {width: 100%; height: 37.5rem;}

#location .cont_box .info_wrap {display: flex; margin-top: 30px;}
#location .cont_box .info_wrap .box {border-right: 1px solid #dfddd7; margin: 2rem; width: 100%;}
#location .cont_box .info_wrap .box:last-child {border-right: 0;}
#location .cont_box .info_wrap table {width: 100%; padding: 2rem 0;}
#location .cont_box .info_wrap table th {vertical-align: top; font-weight: 400;}
#location .cont_box .info_wrap table td {font-weight: 400; padding: 20px 0;}

#location .cont_box .info_wrap .callList li {margin: 10px auto; width: 60%;}
#location .cont_box .info_wrap .callList button.sub_btn {display: inline-block; position: relative; white-space: nowrap; background-color: transparent; transition-property: all; transition-duration: 600ms; z-index: 5; overflow: hidden; padding: 0.7rem 1.5rem; border: 1px solid #3a3a3c;
  font-size: 1.25rem; font-weight: 400; letter-spacing: 0; width: 100%; -webkit-transition: color 300ms linear; -ms-transition: color 300ms linear; transition: color 300ms linear; color: #fff;}
#location .cont_box .info_wrap .callList button.sub_btn:hover {border-color: #0866ff;}
#location .cont_box .info_wrap .callList button.sub_btn::before {content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -2; width: 100%; height: 100%; background-color: #0866ff;}
#location .cont_box .info_wrap .callList button.point::after {content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: #3a3a3c;
  -webkit-transition: transform 300ms linear; -ms-transition: transform 300ms linear; transition: transform 300ms linear;}
#location .cont_box .info_wrap .callList button.point:hover::after {-webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0);}

#modal_pop {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; transform: scale(0); z-index: 99999;}
#modal_pop.on.out {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); animation: unfoldOut 1.5s 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal_pop.on {-webkit-transform: scaleY(0.01) scaleX(0); -ms-transform: scaleY(0.01) scaleX(0); transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}

#modal_pop .modal_background {display: table-cell; background-color: rgba(0,0,0,.8); vertical-align: middle; text-align: center;}
#modal_pop .modal_background .modal {background-color: #f0ede5; padding: 4vw; padding-right: 2vw; display: inline-block; position: relative; width: 100%; max-width: 600px; height: auto;}
#modal_pop .modal_background .modal .parking_cont {height: 100%; padding-right: 2vw; text-align: center;}
#modal_pop .modal_background .modal .parking_cont p:first-child {font-size: 1.75rem;}
#modal_pop .modal_background .modal .parking_cont p:first-child b {font-weight: 500;}
#modal_pop .modal_background .modal .parking_cont p:last-child {margin-top: 10px;}
#modal_pop .modal_close {position: absolute; top: 30px; right: 50px; font-size: 3rem; font-weight: 400; line-height: 1em; cursor: pointer;}

#modal_pop.on .modal_background .modal {animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal_pop.on.out .modal_background .modal {animation: zoomOut 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}


@keyframes unfoldIn {
    0% {transform: scaleY(0.005) scaleX(0);}
    50% {transform: scaleY(0.005) scaleX(1);}
    100% {transform: scaleY(1) scaleX(1);}
}
@keyframes unfoldOut {
    0% {transform: scaleY(1) scaleX(1);}
    50% {transform: scaleY(0.005) scaleX(1);}
    100% {transform: scaleY(0.005) scaleX(0);}
}
@keyframes zoomIn {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}
@keyframes zoomOut {
    0% {transform: scale(1);}
    100% {transform: scale(0);}
}


/*------------MARKETING------------*/
.marketing_page .content_contain {width: 100%; padding: 100px 0;}
.marketing_page .content_contain.content_forward .marketing_img {float: left;}
.marketing_page .content_contain.content_forward .marketing_txt {float: right;}
.marketing_page .content_contain.content_forward .marketing_txt .sub_title {top: 0; left: 30px;}
.marketing_page .content_contain.content_forward .marketing_txt .txt {top: 120px; left: 30px;}
.marketing_page .content_contain.content_forward .marketing_txt .link_button {bottom: -20px; left: 0;}

.marketing_page .content_contain.content_reverse .marketing_img {float: right;}
.marketing_page .content_contain.content_reverse .marketing_txt {float: left;}
.marketing_page .content_contain.content_reverse .marketing_txt .sub_title {top: 0; right: 30px;}
.marketing_page .content_contain.content_reverse .marketing_txt .txt {top: 120px; right: 30px; }
.marketing_page .content_contain.content_reverse .marketing_txt .link_button {bottom: -20px; right: 0;}

.marketing_page .marketing_img {width: 40%; overflow: hidden;}
.marketing_page .content_contain .marketing_img img {width: 100%; -webkit-transition: transform 250ms ease-in 0s; -ms-transition: transform 250ms ease-in 0s;transition: transform 250ms ease-in 0s;}
.marketing_page .content_contain .marketing_img img:hover {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}

.marketing_page .marketing_txt {width: 55%; position: relative;}
.marketing_page .marketing_txt .sub_title {font-size: 2.25rem; font-weight: 900; line-height: 1.3; position: absolute; opacity: 0; visibility: hidden;}
.marketing_page .marketing_txt .txt {font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; line-height: 2; margin: 60px 0 120px; position: absolute; opacity: 0; visibility: hidden;}

.marketing_page .link_button {position: absolute; opacity: 0; visibility: hidden;}
.marketing_page .link_button > a {display: inline-block; color: #fff; font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; border-radius: 30px; padding: 10px 30px;}
.marketing_page .link_button a:hover {opacity: .8;}

/*------------active------------*/
.marketing_page .content_contain.content_forward.fade-in .marketing_txt .sub_title {opacity: 1; visibility: visible; top: 0; left: 0;}
.marketing_page .content_contain.content_forward.fade-in .marketing_txt .txt {opacity: 1; visibility: visible; top: 94px; left: 0;}
.marketing_page .content_contain.content_forward.fade-in .marketing_txt .link_button {opacity: 1; visibility: visible; bottom: 0; left: 0;}

.marketing_page .content_contain.content_reverse.fade-in .marketing_txt .sub_title {opacity: 1; visibility: visible; top: 0; right: 0;}
.marketing_page .content_contain.content_reverse.fade-in .marketing_txt .txt {opacity: 1; visibility: visible; top: 94px; right: 0;}
.marketing_page .content_contain.content_reverse.fade-in .marketing_txt .link_button {opacity: 1; visibility: visible; bottom: 0; right: 0;}


/*------------BLOG------------*/
#naver_blog > .title {text-align: center; margin-bottom: 50px;}
#naver_blog > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#naver_blog > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#naver_blog .naver_blog_img {width: 100%;}
#naver_blog .naver_blog_img img {width: 100%;}
#naver_blog .naver_blog_img .txt {padding: 30px 0 10px; text-align: center; font-size: 1.25rem;}

#naver_blog .naver_blog_exposure {padding: 100px 0 50px; border-bottom: 1px solid #ddd;}
#naver_blog .naver_blog_exposure .title {font-size: 2.5rem; font-weight: bold;}
#naver_blog .naver_blog_exposure .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}

#naver_blog .naver_blog_branding {padding: 50px 0 100px;}
#naver_blog .naver_blog_branding .title {font-size: 2.5rem; font-weight: bold;}
#naver_blog .naver_blog_branding .sub_title {font-size: 1.25rem; font-weight: bold; padding-top: 20px;}
#naver_blog .naver_blog_branding .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0 80px;}
#naver_blog .naver_blog_branding img {width: 100%;}


/*------------SNS------------*/
#sns > .title {text-align: center; padding-bottom: 50px; border-bottom: 1px solid #ddd;}
#sns > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#sns > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#sns .sns_instagram {padding: 50px 0; border-bottom: 1px solid #ddd;}
#sns .sns_instagram .title {font-size: 2.5rem; font-weight: bold;}
#sns .sns_instagram .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#sns .sns_instagram .instagram_img > img {width: 100%;}
#sns .sns_instagram .instagram_img > p {padding: 30px 0 10px; text-align: center; font-size: 1.25rem; color: #666;}

#sns .sns_instagram_real {padding: 50px 0; border-bottom: 1px solid #ddd;}
#sns .sns_instagram_real .title {font-size: 2.5rem; font-weight: bold;}
#sns .sns_instagram_real .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#sns .sns_instagram_real .instagram_img {width: 1100px; margin: 0 auto;}
#sns .sns_instagram_real .instagram_img > img {width: 100%;}
#sns .sns_instagram_real .instagram_img > p {padding: 30px 0 10px; text-align: center; font-size: 1.25rem; color: #666;}


/*------------SEARCH------------*/
#search > .title {text-align: center; padding-bottom: 50px;}
#search > .title .btxt {font-size: 2.1875rem; font-weight: bold;}
#search > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#search .searchad_img {width: 100%;}
#search .searchad_img img {width: 100%;}
#search .searchad_img > p {padding: 30px 0 10px; text-align: center; font-size: 1.25rem; color: #666;}

#search .searchad_wrap {padding: 50px 0;}
#search .searchad_wrap .title {font-size: 2.5rem; font-weight: bold;}
#search .searchad_wrap .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#search .searchad_wrap h4 {font-size: 2.5rem; letter-spacing: -1px;}

#search .search_img {text-align: center;}

/*------------PRESS------------*/
#press > .title {text-align: center; padding-bottom: 50px; border-bottom: 1px solid #ddd;}
#press > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#press > .title .txt {font-size: 1.25rem; font-weight: 500; padding: 10px 0;}

#press .press_ctn {width: 1300px; margin: 0 auto; padding: 50px 0; border-bottom: 1px solid #ddd;}
#press .press_ctn .title {font-size: 2.5rem; font-weight: bold;}
#press .press_ctn .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#press .press_ctn img {width: 100%;}

#press .press_img_wrap {width: 100%; margin: 0 auto; font-size: 0; line-height: 0;}
#press .press_img_wrap .press_img {display: inline-block; width: calc(100% / 4 - 30px); margin: 0 20px; border: 1px solid #ddd;}
#press .press_img_wrap .press_img:first-child {margin-left: 0;}
#press .press_img_wrap .press_img:last-child {margin-right: 0;}

#press .media_company {width: 1300px; margin: 0 auto; padding: 50px 0; border-bottom: 1px solid #ddd;}
#press .media_company .title {font-size: 2.5rem; font-weight: bold;}
#press .media_company .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#press .media_company img {width: 100%;}

#press .press_img {width: 1100px; margin: 0 auto;}
#press .press_img img {width: 100%;}

#press .media_partnership {width: 1300px; margin: 0 auto; padding: 50px 0; border-bottom: 1px solid #ddd;}
#press .media_partnership .title {font-size: 2.5rem; font-weight: bold;}
#press .media_partnership .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#press .media_partnership img {width: 100%;}

/*------------WEB------------*/
#website > .title {text-align: center; padding-bottom: 50px; border-bottom: 1px solid #ddd;}
#website > .title .btxt {font-size: 2.1875rem; font-weight: bold;}
#website > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#website .website_responsive {width: 1300px; margin: 0 auto; padding: 50px 0; border-bottom: 1px solid #ddd;}
#website .website_responsive .title {font-size: 2.5rem; font-weight: bold;}
#website .website_responsive .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#website .website_responsive img {width: 100%;}

#website .responsive_img {width: 100%;}
#website .responsive_img ul {font-size: 0; line-height: 0;}
#website .responsive_img li {display: inline-block; width: calc(100% / 3 - 20px); margin: 30px 0 50px 30px; box-shadow: 0px 3px 8px rgba(0,0,0,.3);}
#website .responsive_img li:first-child {margin-left: 0;}

#website-step .website_step {width: 1300px; margin: 0 auto; padding: 50px 0; border-bottom: 1px solid #ddd;}
#website-step .website_step .title {font-size: 2.5rem; font-weight: bold;}
#website-step .website_step .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}

#website-step .website_step_img ul {width: 100%; font-size: 0; line-height: 0;}
#website-step .website_step_img ul li {display: inline-block; margin: 0 25px; width: calc(100% / 6 - 50px); text-align: center; vertical-align: text-top; position: relative;}
#website-step .website_step_img ul li::after {content: '>'; display: block; position: absolute; right: -27px; top: 60px; width: 24px; height: 28px; opacity: .4;
  background-image: url("../../images/icon/greater-than-solid.svg"); background-size: cover; background-repeat: no-repeat;}
#website-step .website_step_img ul li:last-child:after {display: none;}
#website-step .website_step_img ul li img {width: 60%; margin: 10px auto 20px;}
#website-step .website_step_img ul li p {font-size: 1.25rem; font-weight: 700; line-height: 1; text-align: center;}

#website-knowledge .website_knowledge {width: 1300px; margin: 0 auto; padding: 50px 0;}
#website-knowledge .website_knowledge .title {font-size: 2.5rem; font-weight: bold;}
#website-knowledge .website_knowledge .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}

#website-knowledge .website_knowledge_img {width: 100%; margin: 60px 0;}
#website-knowledge .website_knowledge_img ul {position: relative; width: 100%; height: 1270px;}
#website-knowledge .website_knowledge_img li {display: block; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0px 0px 15px rgba(0,0,0,.2); width: 320px;}
#website-knowledge .website_knowledge_img li.horizon_Limg {left: 24%;}
#website-knowledge .website_knowledge_img li.horizon_Rimg {right: 0;}
#website-knowledge .website_knowledge_img li.vertical_Cimg {left: 50%; z-index: 1;}

#website-knowledge .bottom_txt h4 {font-size: 2.5rem; letter-spacing: -1px;}



/*------------youtube------------*/
#youtube {width: 1300px; margin: 0 auto; padding-bottom: 50px; border-bottom: 1px solid #ddd;}
#youtube .top_title {text-align: center;}
#youtube .top_title .btxt {font-size: 3rem; font-weight: bold;}
#youtube > .title {margin-top: 50px;}
#youtube > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#youtube .intro_img {margin: 100px auto 0;}
#youtube .intro_img img {display: inline-block; width: 49%; margin: 0 auto;}
#youtube > .desc .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}
#youtube > .desc h4 {font-size: 2.5rem; letter-spacing: -1px;}

#youtube-list {width: 1300px; margin: 0 auto; padding: 50px 0; border-bottom: 1px solid #ddd;}
#youtube-list .youtube_list .title {font-size: 2.5rem; font-weight: bold;}
#youtube-list .youtube_img_list {margin: 50px 0; position: relative;}
#youtube-list .youtube_img_list .youtube_img {height: 300px;}
#youtube-list .youtube_img_list .youtube_img li {display: block; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0px 0px 15px rgba(0, 0, 0, .2); width: 400px;}
#youtube-list .youtube_img_list .youtube_img li:nth-child(1) {left: 18%;}
#youtube-list .youtube_img_list .youtube_img li:nth-child(2) {left: 50%; z-index: 1;}
#youtube-list .youtube_img_list .youtube_img li:nth-child(3) {right: -180px;}
#youtube-list .desc .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}

#youtube-checklist {width: 1300px; margin: 0 auto; padding: 50px 0;}
#youtube-checklist .youtube_checklist .checklist_img {text-align: center;}
#youtube-checklist .youtube_checklist .title {font-size: 2.5rem; font-weight: bold; text-align: center; margin: 50px 0;}
#youtube-checklist .check_list {margin: 100px 0 50px;}
#youtube-checklist .check_list li {display: inline-block; width: 25%; margin-left: 12%; text-align: center; position: relative;}
#youtube-checklist .check_list li:nth-child(1) {margin-left: 0;}
#youtube-checklist .check_list li::after {content: ""; display: block; clear: both; position: absolute; top: 0; left: -24%; width: 1px; height: 248px; background-color: #ddd;}
#youtube-checklist .check_list li:nth-child(1)::after {display: none;}
#youtube-checklist .check_list li span {display: inline-block; width: 42px; height: 42px;}
#youtube-checklist .check_list li h2 {font-size: 2.25rem; font-weight: 600; color: #666; margin-top: 26px;}
#youtube-checklist .check_list li p {font-size: 1.375rem; letter-spacing: -1px; padding: 30px 0; word-break: keep-all;}


/*------------SERVICE------------*/
.service_page .content_contain {width: 100%; padding: 100px 0;}
.service_page .content_contain.content_forward .service_img {float: left;}
.service_page .content_contain.content_forward .service_txt {float: right;}
.service_page .content_contain.content_forward .service_txt .sub_title {top: 0; left: 30px;}
.service_page .content_contain.content_forward .service_txt .txt {top: 120px; left: 30px;}
.service_page .content_contain.content_forward .service_txt .link_button {bottom: -20px; left: 0;}

.service_page .content_contain.content_reverse .service_img {float: right;}
.service_page .content_contain.content_reverse .service_txt {float: left;}
.service_page .content_contain.content_reverse .service_txt .sub_title {top: 0; right: 30px;}
.service_page .content_contain.content_reverse .service_txt .txt {top: 120px; right: 30px; }
.service_page .content_contain.content_reverse .service_txt .link_button {bottom: -20px; right: 0;}

.service_page .service_img {width: 40%; overflow: hidden;}
.service_page .content_contain .service_img img {width: 100%; -webkit-transition: transform 250ms ease-in 0s; -ms-transition: transform 250ms ease-in 0s;transition: transform 250ms ease-in 0s;}
.service_page .content_contain .service_img img:hover {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}

.service_page .service_txt {width: 55%; position: relative;}
.service_page .service_txt .sub_title {font-size: 2.25rem; font-weight: 900; line-height: 1.3; position: absolute; opacity: 0; visibility: hidden;}
.service_page .service_txt .txt {font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; line-height: 2; margin: 60px 0 120px; position: absolute; opacity: 0; visibility: hidden;}

.service_page .link_button {position: absolute; opacity: 0; visibility: hidden;}
.service_page .link_button > a {display: inline-block; color: #fff; font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; border-radius: 30px; padding: 10px 30px;}
.service_page .link_button a:hover {opacity: .8;}

/*------------active------------*/
.service_page .content_contain.content_forward.fade-in .service_txt .sub_title {opacity: 1; visibility: visible; top: 0; left: 0;}
.service_page .content_contain.content_forward.fade-in .service_txt .txt {opacity: 1; visibility: visible; top: 94px; left: 0;}
.service_page .content_contain.content_forward.fade-in .service_txt .link_button {opacity: 1; visibility: visible; bottom: 0; left: 0;}

.service_page .content_contain.content_reverse.fade-in .service_txt .sub_title {opacity: 1; visibility: visible; top: 0; right: 0;}
.service_page .content_contain.content_reverse.fade-in .service_txt .txt {opacity: 1; visibility: visible; top: 94px; right: 0;}
.service_page .content_contain.content_reverse.fade-in .service_txt .link_button {opacity: 1; visibility: visible; bottom: 0; right: 0;}




/*------------event------------*/
#event > .title {text-align: center; margin-bottom: 50px;}
#event > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#event > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#event .event_list {width: 1200px; margin: 0 auto;}
#event .event_list ul {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 30px 30px;}
#event .event_list ul li {width: 380px; height: 370px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 17px 0 rgba(135, 135, 135, 0.3); position: relative; cursor: pointer; transition: all 0.3s ease-in-out;}
#event .event_list ul li:hover {transform: scale(1.01); box-shadow: 1px 1px 17px 9px rgba(135, 135, 135, 0.3);}
#event .event_list ul li .text_box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 80px 0 0 28px; box-sizing: border-box;}
#event .event_list ul li .text_box p {font-weight: 500; line-height: 1; letter-spacing: -0.9px; color: #525252;}
#event .event_list ul li .text_box h4{font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: #000; margin: 10px 0 20px;}

#event .event_planning {padding: 100px 0 50px; border-bottom: 1px solid #ddd;}
#event .event_planning .title {font-size: 2.5rem; font-weight: bold;}
#event .event_planning .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}

#event .event_model {padding: 50px 0 100px;}
#event .event_model .title {font-size: 2.5rem; font-weight: bold;}
#event .event_model .sub_title {font-size: 1.25rem; font-weight: bold; padding-top: 20px;}
#event .event_model .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0 80px;}
#event .event_model_img {width: 80%; margin: 0 auto;}
#event .event_model_img img {width: 100%;}

/*------------popup------------*/
#popup > .title {text-align: center; margin-bottom: 50px;}
#popup > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#popup > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#popup .popup_img_list {margin: 50px 0; position: relative;}
#popup .popup_img_list .popup_img {height: 450px;}
#popup .popup_img_list .popup_img li {display: block; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0px 0px 15px rgba(0, 0, 0, .2);}
#popup .popup_img_list .popup_img li:nth-child(1) {width: 350px; left: 28%;}
#popup .popup_img_list .popup_img li:nth-child(2) {width: 250px; left: 50%; z-index: 1;}
#popup .popup_img_list .popup_img li:nth-child(3) {width: 350px; right: 38px;}

#popup .popup_guide {padding: 100px 0 50px; border-bottom: 1px solid #ddd;}
#popup .popup_guide .title {font-size: 2.5rem; font-weight: bold;}
#popup .popup_guide .txt {font-size: 1.25rem; letter-spacing: -1px; padding: 30px 0;}


/*------------offline------------*/
#offline > .title {text-align: center; margin-bottom: 50px;}
#offline > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#offline > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#offline .offline_list {width: 1200px; margin: 0 auto;}
#offline .offline_list ul {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 30px 30px;}
#offline .offline_list ul li {width: 380px; height: 370px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 17px 0 rgba(135, 135, 135, 0.3); position: relative; cursor: pointer; transition: all 0.3s ease-in-out;}
#offline .offline_list ul li:hover {transform: scale(1.01); box-shadow: 1px 1px 17px 9px rgba(135, 135, 135, 0.3);}
#offline .offline_list ul li .text_box {position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 80px 0 0 28px; box-sizing: border-box;}
#offline .offline_list ul li .text_box p {font-weight: 500; line-height: 1; letter-spacing: -0.9px; color: #525252;}
#offline .offline_list ul li .text_box h4{font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: #000; margin: 10px 0 20px;}

#offline .offline_images {padding-top: 150px;}
#offline .offline_images .title {font-size: 2.5rem; font-weight: bold;}
#offline .offline_images .txt {font-size: 1.25rem; letter-spacing: -1px; padding-top: 30px;}

#offline .offline_xbanner_list {margin: 100px 0; position: relative;}
#offline .offline_xbanner_list .offline_xbanner {height: 565px;}
#offline .offline_xbanner_list .offline_xbanner li {display: block; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0px 0px 15px rgba(0, 0, 0, .2);}
#offline .offline_xbanner_list .offline_xbanner li:nth-child(1) {left: 37%;}
#offline .offline_xbanner_list .offline_xbanner li:nth-child(2) {width: 200px; left: 50%; z-index: 1;}
#offline .offline_xbanner_list .offline_xbanner li:nth-child(2) img {width: 100%;}
#offline .offline_xbanner_list .offline_xbanner li:nth-child(3) {right: 323px;}


/*------------knowhow------------*/
#knowhow > .title {text-align: center; margin-bottom: 50px;}
#knowhow > .title .btxt {font-size: 2.5rem; font-weight: bold;}
#knowhow > .title .txt {font-size: 1.25rem; font-weight: lighter; padding: 10px 0;}

#knowhow .knowhow_list ul {width: 1000px; margin: 0 auto;}
#knowhow .knowhow_list ul li {display: inline-block; width: 24%; text-align: center;}
#knowhow .knowhow_list ul li .text_box {margin-top: 20px;}

#knowhow .knowhow_images {padding-top: 150px;}
#knowhow .knowhow_images .title {font-size: 2.5rem; font-weight: bold;}
#knowhow .knowhow_images .txt {font-size: 1.25rem; letter-spacing: -1px; padding-top: 30px;}
#knowhow .knowhow_ex {margin-top: 50px; display: flex;}
#knowhow .knowhow_ex .ex_tit {width: 300px; text-align: center; border-right: 1px solid #eee;}
#knowhow .knowhow_ex .ex_tit h3 {font-size: 1.7rem; font-weight: bold;}
#knowhow .knowhow_ex .ex_desc {width: 900px; margin-left: 75px;}
#knowhow .knowhow_ex .ex_desc ul li {word-break: keep-all; padding: 5px 0 0 15px; position: relative;}
#knowhow .knowhow_ex .ex_desc ul li:before {content: ""; display: block; clear: both; width: 4px; height: 4px; background-color: #0866ff; position: absolute; top: 15px; left: 0; border-radius: 50px;}

#knowhow .faq_section {padding: 150px 0;}
#knowhow .faq_section .faq_inner .faq_part_tit {text-align: left;}
#knowhow .faq_section .faq_inner .faq_part_tit p {width: 220px;  height: 60px; line-height: 60px; text-align: center; background-color: #0866ff; border-radius: 50px; color: #fff; font-size: 28px; font-weight: 600;}
#knowhow .faq_section .faq_inner .faq_part_tit h2 {font-size: 40px; font-weight: 600; letter-spacing: -2px; padding-top: 30px;}
#knowhow .faq_section .faq_inner .faq_part_tit h2::after {content: ""; display: inline-block; clear: both; background: url("http://trmedi.co.kr/images/page/service/doctor_icon.png") no-repeat; background-size: contain; width: 52px; height: 46px; vertical-align: middle; margin-left: 16px;}
#knowhow .faq_section .faq_left .faq_toggle {margin-top: 50px;}
#knowhow .faq_section .faq_left .faq_toggle dl {font-family: 'Noto Sans KR'; width: 100%; border: 1px solid #000; border-radius: 10px; background: #fff; transition: all 0.3s ease-in-out;}
#knowhow .faq_section .faq_left .faq_toggle dl:hover {transform: scale(1.03); box-shadow: 1px 1px 9px 5px rgba(0, 0, 0, 0.2);}
#knowhow .faq_section .faq_left .faq_toggle dl:hover > dt {font-weight: 700;}
#knowhow .faq_section .faq_left .faq_toggle dl > dt {width: 100%; height: 74px; display: flex; align-items: center; justify-content: space-between; padding-left: 55px; position: relative; font-size: 20px; font-weight: 500; cursor: pointer;}
#knowhow .faq_section .faq_left .faq_toggle dl > dt::after {content: "▼"; display: block; clear: both; position: absolute; right: 58px; top: 50%; transform: translateY(-50%);}
#knowhow .faq_section .faq_left .faq_toggle dl > dd {width: 100%; padding: 10px 55px 50px 55px; text-align: left; font-size: 18px; word-break: keep-all; display: none;}


/*------------PRODUCTION------------*/
#plan .plan_img {height: 393vw;}
#plan .plan_img img {position: absolute; left: 0; width: 100%;}
#plan .plan_img .pc_only {display: block;}
#plan .plan_img .mo_only {display: none;}
}