@charset "utf-8";
/* planner css 240415 */
/* archis renewal mobile css 241030 */

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* planner 240415 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    --main-color: #4D82FF;
    --bg-figure-color1 : #F4F1FD;
    --bg-figure-color2 : #DBE6FF;
    --bg-figure-color3 : #E9E3FF;
    --bg-figure-color4 : #D6D3F1;
    --bg-figure-color5 : #fff;
    --bg-figure-color6 : #FFA100;
    --bg-figure-color7 : #e5ecff;
    --subtit-color : #212529;
    --txt-color : #343A40;
    --tit-color1 : #fff;
    --tit-color2 : #2a3457;
    --btn-color1: #4d82ff;
    --btn-color2 : rgba(255, 255, 255, 0.7);
    --btn-color3 : linear-gradient(91deg, #8e75fc 0%, #4b73fd 54%, #0072fe 100%);
    --btn-color4 : #6874fc;
    --border : 1px solid #868E96;
    --border2: solid 1px #212529;
    --radius-basic : 30px;
    --radius-img :20px;

    --visual-tit-size : 80px;
    --visual-subtit-size : 30px;
    --visual-txt-size: 22px;
    --visual-line-height : 34px; 
    --tit-size1 : 40px;
    --tit-size2 : 30px;
    --subtit-size : 26px;
    --txt-size : 20px;
    --tit-weight : 700;
    --subtit-weight: 500;
    --txt-weight: 400;
    --txt-line-height: 32px
}

body {background: transparent}
#sub_box {background: transparent}
.planner {font-family: "Noto Sans KR", sans-serif}
.planner a, .planner .tit {text-wrap: nowrap}
.sub_inner {font-family: 'GmarketSansBold'}

.product_name {padding-left: 12px;font-size: var(--visual-tit-size);color: rgba(255, 255, 255, 0.9);letter-spacing: -1px;line-height: 1}
.product_name .txt_wrap {display: flex;margin: 35px 0 0 2px}
.product_name span {letter-spacing: 4px}
.product_name .beta {align-self: flex-end;margin: 0 0 6px 12px;font-size: var(--visual-subtit-size);letter-spacing: 0.3px}
.planner .sec .tit {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;padding: 12px 25px;background: var(--btn-color1);font-size: var(--tit-size2);font-weight: var(--tit-weight);color: var(--tit-color1);border-radius: var(--radius-basic)}
.sec2 .tit {font-size: var(--tit-size2);font-weight: var(--tit-weight);color: var(--tit-color2);text-align: center}
.cont_detail .sub_tit {display: block;font-size: var(--subtit-size);font-weight: var(--subtit-weight);color: var(--subtit-color)}
.cont_detail .txt {margin: 20px 0;font-size: var(--txt-size);font-weight: var(--txt-weight);line-height: var(--txt-line-height);color: var(--txt-color) }
.line2 {width: 430px;word-break: keep-all}
.sec1 .line2 {width: 470px}
.bottom {color: #fff}
.bottom .tit {font-size: 32px;font-weight: var(--tit-weight);text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)}
.bottom .txt {margin: 40px 0;font-size: var(--subtit-size);font-weight: var(--subtit-weight);text-align: center}

.btn {padding: 12px 35px;color: var(--btn_color1);border-radius: var(--radius_basic)}
.sec .cont_detail {position: relative}
.cont_detail ul, .cont_detail .box {position: relative;z-index: 10}
.sec .cont_detail::after, .sec .cont_detail::before {position: absolute;content: '';border-radius: var(--radius-basic);background: var(--bg-figure-color7);z-index: 5}
.sec .cont_detail::after {right: -410px;top: 146px}
.sec:nth-of-type(1) .cont_detail::before {left: -590px;top: 150px;width: 553px;height: 553px;border-radius: 50%;z-index: 0;background: var(--bg-figure-color1)}
.sec:nth-of-type(1) .cont_detail::after {width: 775px;height: 394px}
.sec:nth-of-type(2) .cont_detail::before {left: -410px;top: 155px;width: 766px;height: 394px}
.sec:nth-of-type(2) .cont_detail::after {right: -610px;top: 360px;width: 655px;height: 655px;border-radius: 50%;z-index: 0;background: var(--bg-figure-color2)}
.sec:nth-of-type(3) .cont_detail::after {top: 155px;width: 812px;height: 394px}

.sub_visual {height: 821px;padding-bottom: 60px;background: #4d82ff}
.sub_inner {display: flex;justify-content: space-between;width: 1100px;height: 100%;padding: 156px 0 50px;margin: 0 auto;box-sizing: border-box}
.sub_inner .fl {width: 60%}
.sub_inner .fr {position: relative;display: flex;justify-content: flex-end;align-items: flex-end;width: 40%;max-width: 440px}
.sub_inner .fr::before {content: '';position: absolute;left: -16px;top: 20px;width: 510px;height: 100%;background: url("../img/renewal/planner/img_computer.png") 0 0 / contain no-repeat}
.bubble_wrap {margin-top: 85px}
.bubble {position: relative;display: block;font-size: var(--visual-txt-size);line-height: var(--visual-line-height);text-align: center;background: #fff;border-radius: 30px;box-sizing: border-box;font-family: 'GmarketSansMedium';letter-spacing: 1.1px;;box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.25)}
.bubble1 {width: 256px;padding: 9.5px 30px;margin: 0 0 124px 40px}
.bubble2 {width: 431px;padding: 26.5px 45.5px;margin: 0 0 0 35px;letter-spacing: 0.8px}
.bubble::after, .bubble::before {position: absolute;content: '';width: 100px;height: 100px}
.bubble1::before {left: -60px;top: -52px;background: url("../img/renewal/planner/ico_text.png") 0 0 no-repeat}
.bubble1::after {right: -40px;bottom: -40px;background: url("../img/renewal/planner/ico_calculator.png") 0 0 no-repeat}
.bubble2::after {right: -27px;bottom: -38px;background: url("../img/renewal/planner/ico_check.png") 0 0 no-repeat}
.img_wrap {display: flex}
.ico_wrap {flex: 1;position: relative}
.ico {position: absolute;display: block;width: 136px;height: 136px}
.ico1 {right: -10px;top: 26px;background: url("../img/renewal/planner/ico_drawing.png") 0 0 no-repeat}
.ico2 {width: 195px;height: 153px;left: -135px;top: 115px;background: url("../img/renewal/planner/data.png") 0 0 no-repeat}
.ico3 {right: 15px;bottom: 30px;background: url("../img/renewal/planner/ico_clander.png") 0 0 no-repeat}
.btn_register {display: block;width: 392px;height: 82px;padding: 19.5px 100px;background: var(--btn-color3);border-radius: 50px;font-size: 30px;color: #fff !important;letter-spacing: 0.5px;box-sizing: border-box;font-family: 'GmarketSansMedium';line-height: 44px;box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);z-index: 5}

.sec_wrap {position: relative;background: linear-gradient(to bottom, rgba(229, 236, 255, 0.1) 0%, rgba(77, 130, 255, 0.1) 50%, rgba(210, 104, 252, 0.1) 100%);overflow: hidden}
.sec {max-width: 1920px;width: 1100px;margin: 0 auto;padding: 162px 0 0;box-sizing: border-box}
.sec:nth-of-type(3) {margin-bottom: 230px;padding: 35px 0 0}
.sec .cont_detail {display: flex;justify-content: space-between;margin-top: 54px}
.cont_detail .item {position: relative}
.cont_detail .item:not(:first-of-type) .sub_tit {padding-top: 35px}
.cont_detail .item:not(:first-of-type)::before {position: absolute;content: '';width: 408px;height: 1px;background: #868E96}

.box {width: 534px;height: 438px;border-radius: var(--radius-img);overflow: hidden;border: var(--border2)}
.box .poster {position: absolute;width: 100%;height: 100%;background: url("../video/video_poster.png") 0 0 / contain no-repeat}
.box .poster.off {display: none}
.info_video {width: 100%;height: 100%}

.sec1 {padding: 220px 0;text-align: right}
.sec1 .tit {float: right;margin-bottom: 54px}
.sec1 .cont_detail {clear: both;margin-top: 54px;}
.sec1 .cont_detail .item:not(:first-of-type)::before {right: 0}

.sec2 {position: relative;width: 1100px;max-width: 1920px;margin: 2px auto 0;padding: 0 0 88px}
.sec2::before, .sec2::after {position: absolute;content: '';border-radius: 50%}
.sec2::before {left: -500px;top: 495px;width: 458px;height: 458px;background: var(--bg-figure-color3)}
.sec2 .step {background: var(--bg-figure-color5)}
.sec2 .step {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;width: 429px;padding: 258px 74.5px 41px;border-radius: var(--radius-basic);box-sizing: border-box;}
.sec2 .step::before {position: absolute;left: 50%;top: 53px;content: '';width: 160px;height: 160px;transform: translate(-50%, 0)}
.sec2 .step:nth-of-type(1)::before {background: url("../img/renewal/planner/img_settings2x.png") 0 0 / contain no-repeat}
.sec2 .step:nth-of-type(2)::before {background: url("../img/renewal/planner/img_analytics2x.png") 0 0 / contain no-repeat}
.sec2 .step:nth-of-type(3)::before {background: url("../img/renewal/planner/img_tel2x.png") 0 0 / contain no-repeat}
.sec2 .step:nth-of-type(4)::before {background: url("../img/renewal/planner/img_proft2x.png") 0 0 / contain no-repeat}
.sec2 .step::after {position: absolute;bottom: 0;content: '';width: 100px;height: 100px}
.sec2 .step:nth-of-type(1)::after {right: 0;background: url("../img/renewal/planner/ico_arrow.png") 0 0 / contain no-repeat;transform: translate(160px, -100px)}
.sec2 .step:nth-of-type(2)::after {left: 0;background: url("../img/renewal/planner/ico_arrow2.png") 0 0 / contain no-repeat;transform: translate(-164px, 75px) rotate(5deg)}
.sec2 .step:nth-of-type(3)::after {width: 80px;right: 0;background: url("../img/renewal/planner/ico_arrow3.png") 0 0 / contain no-repeat;transform: translate(140px, 175px)}
.sec2 .step:nth-of-type(1), .sec2 .step:nth-of-type(2), .sec2 .step:nth-of-type(4) {margin-bottom: 159px}
.sec2 .step:nth-of-type(2) {margin-top: 165px}
.step.fl {float: left}
.step.fr {float: right}
.sec2 .tit {position: relative;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;margin: 0 auto 220px;z-index: 10}
.sec2 .tit::before {position: absolute;left: -33px;top: -34px;display: block;content: '';width: 100px;height: 100px;background: var(--bg-figure-color6);border-radius: 50%;z-index: -1}
.cont2 {overflow: hidden}
.cont2 .txt {margin: 45px 0}
.step .btn_go_direct {width: 280px;padding: 13px 96px;background: var(--btn-color4);font-size: 24px;font-weight: 700;color: #fff;line-height: 42px;border-radius: var(--radius-basic);box-sizing: border-box}

.bottom {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 38px 0;background: var(--main-color)}
.btn_register_s {padding: 17px 40px;font-size: 28px;font-weight: var(--tit-weight);color: var(--tit-color2);background: var(--btn-color2);border: 2px solid #fff;border-radius: 50px}

/* archis renewal 240415 */
/* font, background */
.archis, .archis .sub_inner, .archis a, .archis button {font-family: 'pretendard', sans-serif;letter-spacing: normal}
#sub_box_archi {background: transparent}
.archis .tit {font-size: 32px;font-weight: 700;color: #212529}
.archis .tit span {color: #0689ff}
.archis .sub_inner .tit {font-size: 52px;color: #fff}
.archis .sub_inner .txt {font-size: 22px;color: #fff}
.rendering .tit span {font-size: 55px;line-height: 53px}
.archis .txt {font-size: 20px;line-height: 32px;color: #495057}
.archis .txt span {color: #ff3333}
.rendering .txt span:not(.emphasize) {color: #495057}
.archis .bottom .tit {font-size: 26px;color: #fff;text-shadow: none}
.archis .btn {font-size: 18px;font-weight: 600;text-align: center}
.archis button.btn {background: #0689ff;color: #fff}
.archis a.btn {background: #fff;color: #212529}
.archis .bottom {background: #0689ff}
.archis .sub_visual {background: transparent}
.archis .sec {text-align: center}
.archis .sec.flex, .archis .rendering {text-align: left}
.archis .rendering {background-image: linear-gradient(to bottom, #ffffff 0%, #e4f2ff 28%, rgb(85 174 255 / 31%) 49%, rgb(6 137 255 / 19%) 92%, rgba(255, 255, 255, 0.6))}
.archis .guide_item .box {text-align: left}
.archis .guide_item .box p {font-weight: 400}
.archis .guide_item span {font-size: 20px;font-weight: 600;color: #212529}
.archis .guide_item .btn_more {font-size: 18px}
.archis .guide_item .btn {font-size: 14px;color: #495057}
.archis .sec .guide_item:nth-of-type(1) .box {background: #d0ebff}
.archis .sec .guide_item:nth-of-type(2) .box {background: #d0d8ff}
.archis .sec .guide_item:nth-of-type(3) .box {background: #dbd0ff}
.archis .sec .help_item img {width: 100%;height: 100%}
.archis .mid_txt .sub_tit {font-size: 26px;font-weight: 600;color: #343a40}
.archis .sec .help_item:nth-of-type(1) {background: #ffc274}
.archis .sec .help_item:nth-of-type(2) {background: #ffe8b2}
.archis .sec .help_item:nth-of-type(3) {background: #ffe0b8}
.archis .bottom {background: #0689ff}
.archis .bottom button.btn {background: #fff;color: #0689ff}
.btn_wrap .bubble3 {font-size: 14px;font-weight: 500;color: #495057;text-align: left;line-height: 20px}
.btn_wrap .bubble3 span {color: #fff;background: #ff3333;line-height: 1.43}
.archis .sec .step_line {background: #fe8e00}
.step_line .step_item span {background: #fff3d7}
.archis .sec .guide_item .btn {background: transparent}

/* layout */
.archis .flex {display: flex;justify-content: center}
.archis .btn {display: block;width: 160px;padding: 10.5px 0;border-radius: 30px;line-height: 21px;box-sizing: border-box;border: 1px solid transparent}
.archis .sub_visual {display: flex;justify-content: center;align-items: center;height: auto;max-height: 100vh;padding: 0;overflow: hidden}
.archis .sub_inner {align-items: center;flex-direction: column;position: absolute;height: auto;padding: 0}
.archis .visual_video video {width: 100%;height: 100%}
.archis .btn_list {display: flex;justify-content: center;margin-top: 40px}
.archis .btn_list button.btn {margin-right: 8px}
.archis .bottom .btn_list {margin-top: 20px}
.archis .sec {align-items: center;padding: 100px 50px 0}
.archis .sec:first-of-type {padding-top: 88px}
/* .archis .sec:nth-of-type(1) {position: relative}
.archis .sec:nth-of-type(1)::before {content: '';position: absolute;left: 50%;top: 0;width: 115px;height: 70px;background: url("../img/renewal/archis/img_etc.png") 0 0 no-repeat;transform: translate(-50%, -45px)} */
.archis .sec:not(.flex) .tit, .archis .mid_txt .sub_tit {margin-bottom: 10px}
.archis .flex:first-of-type .tit, .archis .flex:nth-of-type(3) .tit {margin-bottom: 40px}
.archis .flex .txt_wrap {width: 434px}
.archis .flex .tit {padding-bottom: 10px;border: 1px solid #adb5bd;border-width: 0 0 1px 0}
.archis .flex .tit2 {border: none}
.archis .flex .tit2::before {content: '';position: relative;display: inline-block;width: 30px;height: 30px;margin-right: 10px;background: url("../img/renewal/archis/ico_map_2x.png") 0 50% / 30px 30px no-repeat;transform: translate(0, 4px)}
.archis .video_wrap {width: 514px;height: 304px;border-radius: 15px;background: #000;overflow: hidden}
.archis .sec:first-of-type .video_wrap {margin-left: 54px}
.archis .sec:nth-of-type(2) .video_wrap {margin-right: 54px}
.archis .sec video {width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover}
.archis .sec:nth-of-type(2) .tit {margin-bottom: 103px}
.archis .sec:not(.flex):nth-of-type(3) {margin-bottom: 108px}
.archis .sec.flex:nth-of-type(3) {justify-content: space-between;margin-bottom: 0}

.archis .ani_wrap {align-items: flex-end;position: relative;padding: 160px 0 39.2px}
.archis .bg_img_wrap {position: absolute;left: 0;bottom: 0;width: calc(100% - 100px);height: 403px;margin: 0 50px;z-index: -1}
.archis .apt {width: 300px;height: 440px;margin-right: 98px}
.archis .apt img {width: 100%}

.archis .rendering {display: flex;flex-direction: column;width: 100%;margin-top: 50px;padding: 40px 86px 40px 50px}
.archis .sec.rendering .tit {margin-bottom: 24px}
.rendering .tit span {margin-left: 20px}
.rendering .txt .emphasize {position: relative}
.rendering .txt .emphasize::before {content: '• • •';position: absolute;top: -22px;left: 6px}
.rendering .video_tab, .rendering p {width: 964px}
.rendering .video_tab {display: flex;flex-direction: column;justify-content: flex-start;position: relative;height: 340px;margin-top: 7px}
.video_tab .tab_item {display: flex;justify-content: flex-end;margin-bottom: 8px}
.rendering .tab_link {width: 224px;height: 106px;border-radius: 15px}
.rendering .tab_link img {width: 100%;height: 100%;border-radius: 15px}
.video_tab .video_wrap {position: absolute;left: 0;top:0;width: 720px;height: 340px;border-radius: 15px;overflow: hidden}
.video_tab .video_wrap {display: none}

.archis .sec .guide_item .box {width: 260px;height: 244px;margin: 32px 0 20px;padding: 33px 24px;border-radius: 20px;box-sizing: border-box;box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25)}
.archis .sec .guide_item:not(:last-of-type) {margin-right: 40px}
.archis .sec .guide_item:nth-of-type(1) .img {width: 122px;height: 111px;margin: 6px 0 0 91px}
.archis .sec .guide_item:nth-of-type(2) .img {width: 171px;height: 105px;margin: 12.8px 0 0 65px}
.archis .sec .guide_item:nth-of-type(3) .img {width: 104px;height: 103px;margin: 14px 0 0 106px}
.archis .sec .guide_item .btn {display: flex;flex-direction: column;justify-content: center;width: 100%;height: auto;padding: 0}
.archis .sec .guide_item .btn_more > span{margin-right: 5px}
.archis .sec .guide_item p {margin-bottom: 12px}
.archis .mid_txt {padding: 15px 30px}

.archis .sec .step_line {position: relative;display: flex;width: 100%;height: 1px;margin: 28px 0 40px}
.step_line .step_item {position: absolute;left: 0;top: -9px;width: calc((100% - 46px)/3)}
.step_line .step_item:nth-of-type(2) {left: calc((100% - 46px)/3);margin: 0 23px}
.step_line .step_item:nth-of-type(2)::before, .step_line .step_item:nth-of-type(2)::after {content:'';position: absolute;top: -2px;left: -23px;display: block;width: 23px;height: 23px;background: url("../img/renewal/archis/ico_chevron_x.png") center / 23px 23px no-repeat}
.step_line .step_item:nth-of-type(2)::after {left: auto;right: -23px}
.step_line .step_item:last-of-type {left: auto;right: 0}
.step_line .step_item span {display: inline-block;width: 18px;height: 18px;border: 1px solid #fe8e00;border-radius: 50%}
.archis .sec .help_item {width: 303px;height: 281px;overflow: hidden;border-radius: 15px}
.archis .sec .help_item:not(:last-of-type) {margin-right: 20px}

.archis .bottom {position: relative;width: 100%;padding: 30px 0 35px;z-index: 0} 
.archis .bottom .btn_wrap {position: relative}
.bottom .btn_wrap .bubble3 {position: absolute;left: -148px;top: -70px;width: 154px;height: 83px;padding: 13px 16px;background: url("../img/renewal/archis/img_chat_2x.png") center / 154px 83px no-repeat;box-sizing: border-box}
.btn_wrap .bubble3 span {display: inline-block;padding: 0 4px;margin-bottom: 4px;border-radius: 5px}
.archis .bg {position: absolute;left: 50%;top: 0;width: 1100px;height: 100%;transform: translate(-50%, 0);z-index: -1}
.archis .bg::before, .archis .bg::after {content: '';position: absolute;display: block}
.archis .bg::before {left: 0;bottom: 0;width: 164px;height: 98px;background: url("../img/renewal/archis/img_bg_bottom2x.png") 0 0 / 164px 98px no-repeat}
.archis .bg::after {right: 0;width: 220px;height: 84px;background: url("../img/renewal/archis/img_bg_top2x.png") 0 0 / 220px 84px no-repeat}

/* effect */
.archis .tab_link:hover, .archis .tab_link:focus {-webkit-filter:brightness(0.8);filter:brightness(0.8)}
.archis .btn_free:hover + .tooltip {display: block}
.archis .guide_item div {border: 1px solid transparent}
.archis .guide_item div {transition: border .3s ease}
.archis .guide_item:nth-of-type(1) .btn:hover .box, .archis .guide_item:nth-of-type(1)  .btn:hover  :focus .box  {border-color: #85ccff}
.archis .guide_item:nth-of-type(2):hover .box, .archis .guide_item:nth-of-type(2):focus .box {border-color: #9f85ff}
.archis .guide_item:nth-of-type(3):hover .box, .archis .guide_item:nth-of-type(3):focus .box {border-color: #9f85ff}

.video_tab .tab_item .video_wrap.on {display: block}
.archis .btn_list .btn:hover, .archis .btn_list .btn:focus {background: transparent;border: 1px solid #fff}
.archis .btn_list button.btn:hover, .archis .btn_list button.btn:focus {color: #0689ff}
.archis .btn_list a.btn:hover, .archis .btn_list a.btn:focus {color: #fff}
.archis .bottom .btn:hover, .archis .bottom .btn:focus {background: transparent;color: #fff;outline: none}
.archis .bottom button.btn:hover, .archis .bottom button.btn:focus {color: #fff}

/* aos scroll ani */
/* html:not(.no-js) .bg_img_wrap [data-aos=fade-down] {transform: none;position: absolute}
html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(1) {width: 85px;height: 141px;left: 41px;top: -80px}
html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(2) {width: 99px;height: 106px;right: 36px;top: -100px}
html:not(.no-js) .bg_img_wrap  [data-aos=fade-down]:nth-of-type(3) {width: 117px;height: 117px;left: 478px;top: 42px}
html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(4) {width: 123px;height: 142px;left: 319.5px;bottom: 100px}
html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(5) {right: 22.5px;bottom: 150.9px;width: 82.6px;height: 120.5px}

html:not(.no-js) .bg_img_wrap [data-aos^=fade][data-aos^=fade].aos-animate {transform: translate3d(0,100px,0)} */

/* effect scroll 240416 */
.archis .bg_img_wrap {transform: translate(0, -50px);opacity: 0;z-index: 0}
.archis .ani_wrap .video_wrap, .archis .ani_wrap .txt_wrap {position:relative; z-index: 5}
.archis .bg_img_wrap div {position: absolute;}
.archis .bg_img_wrap.on {animation: animateUpDown 1s forwards ease-in-out}

/* 241030 compare 추가 */
.archis .compare {position: relative;max-width: 1100px;margin: 0 auto;padding: 0 75px;}
.archis .compare::before {content: '';position: absolute;left: 50%;top: 0;width: 115px;height: 70px;background: url("../img/renewal/archis/img_etc.png") 0 0 no-repeat;transform: translate(-50%, -45px)}
.archis .sec:first-of-type {padding-top: 0}

@keyframes animateUpDown {
    0% {transform: translate(0, -50px);opacity: 0}
    100% {transform: none;opacity: 1}
}
.archis .bg_img_wrap div:nth-of-type(1) {left: 41px;top: 20px}
.archis .bg_img_wrap div:nth-of-type(2) {right: 36px}
.archis .bg_img_wrap div:nth-of-type(3) {left: 478px;top: 142px}
.archis .bg_img_wrap div:nth-of-type(4) {left: 319.5px;bottom: 0}
.archis .bg_img_wrap div:nth-of-type(5) {right: 22.5px;bottom: 50.9px} 

@media screen and (max-width: 1099px) {
    /* set font size */
    .fzoom {font-size: 10px;line-height: 1;-webkit-tap-highlight-color: transparent}
    html.fzoom body {font-size: 1.6rem}

    /* font */
    .archis .tit {font-size: 18px;line-height: 2.1rem}
    .archis .sub_inner .tit {font-size: 2.4rem;line-height: 2.9rem}
    .archis .sub_inner .txt {font-size: 1.4rem;line-height: 1.7rem}
    .archis .txt {font-size: 1.2rem;line-height: 2.2rem;word-break: keep-all}
    .archis .sec:not(.flex) .txt {line-height: normal}
    .archis .txt p {word-break: keep-all}
    .archis .btn {font-size: 1.4rem;line-height: 1.7rem}
    .archis .flex .tit2 {font-size: 1.6rem}
    .archis .ani_wrap.sec {text-align: right}
    .archis .rendering .tit, .archis .rendering .txt {text-align: center}
    .rendering .tit span {font-size: 2.6rem;line-height: normal}
    .archis .mid_txt .sub_tit {font-size: 1.6rem}
    .archis .sec .guide_item span {font-size: 1.2rem}
    .archis .sec .guide_item .box  {text-align: center}
    .archis .bottom .tit {font-size: 1.4rem;line-height: normal}
    .archis .bottom .btn {font-size: 1.2rem}
    .bottom .btn_wrap .bubble3 {font-size: 1.2rem;background: #fff;text-align: center}
    .btn_wrap .bubble3 span {color: #ff3333}

    /* layout */
    .archis .sub_inner .tit {margin-bottom: 2px}
    .archis .btn_list {margin-top: 40px}
    .archis .btn {width: 129px;padding: 8.5px 0}
    .archis .flex:first-of-type .tit {margin-bottom: 10px}
    .archis .flex:nth-of-type(3) .tit {margin-bottom: 47px}

    .archis .sec {flex-direction: column;width: 100%;padding: 40px 20px 0}
    /* 241030 */
    .archis .sub_inner .txt {width: 26%;text-align: center;}
    .archis .sec:not(.bottom), .archis .compare {max-width: 360px}
    .archis .compare {padding: 30px 0 0;}
    .archis .sec:first-of-type {padding-top: 34px}
    .archis .sec:first-of-type .video_wrap {margin-left: 0}
    .archis .flex .txt_wrap {width: 100%}
    .archis .video_wrap {width: 100%;height: 166px;margin-top: 16px}
    
    .archis .ani_wrap.sec {flex-direction: column-reverse;align-items: center}
    .archis .ani_wrap .tit span {display: block}
    .archis .sec:nth-of-type(2) .tit {margin-bottom: 10px}
    .archis .sec:nth-of-type(2) .video_wrap {margin: 16px 0 0}

    .archis .flex:nth-of-type(3) .tit2 {margin-bottom: 12px}
    .archis .flex .tit2, .archis .tit2 + .txt {width: 50%}
    .archis .tit2 span {margin-left: 22px}
    .archis .flex .tit2::before {width: 16px;height: 16px;background-size: 16px 16px;transform: translate(0, 2px);margin-right: 6px}
    .archis .ani_wrap {padding: 10px 20px;margin-top: 30px}
    .archis .apt {position: absolute;right: 0;bottom: 0;width: 159px;height: 241px;margin: 0;transform: translate(-20px, 25px)}

    .archis .rendering {margin-top: 65px;padding: 10px 20px 20px}
    .archis .sec.rendering {max-width: none}
    .rendering .tit span {margin-left: 6px}
    .archis .rendering .txt {width: 226px;margin: 5px auto 0}
    .rendering .txt span:not(.emphasize) {display: block}
    .rendering .txt .emphasize::before {top: -12px;left: 3px}
    .rendering .video_tab, .rendering p {max-width: 320px}
    .rendering .video_tab {flex-direction: row;height: 218px;width: 320px;margin: 7px auto 0}
    .archis .sec.rendering .video_wrap {height: 147px;margin: 0 0 11px}
    .video_tab .tab_item {justify-content: center;align-items: flex-end;width: 33.33%;margin-bottom: 0}
    .video_tab .tab_item:not(:last-of-type) {margin-right: 7px}
    .rendering .tab_link {width: 100%;height: 60px;border-radius: 10px}
    .rendering .tab_link img {border-radius: 10px}

    .archis .sec .guide_item {width: 33.33%}
    .archis .sec .guide_item:not(:last-of-type) {margin-right: 7px}
    .archis .sec .guide_item .box {display: flex;flex-direction: column;align-items: center;width: 100%;height: 107px;padding: 12px;margin: 19px 0 14px}
    .archis .sec .guide_item p, .archis .guide_item .btn_more {display: none}
    .archis .sec .guide_item:nth-of-type(1) .img {width: 55px;height: 50px;margin: 13px 0 0}
    .archis .sec .guide_item:nth-of-type(2) .img {width: 78px;height: 48px;margin: 18px 0 0 5px}
    .archis .sec .guide_item:nth-of-type(3) .img {width: 44px;height: 44px;margin: 16px 0 0}

    .archis .sec:not(.flex) .tit, .archis .mid_txt .sub_tit {margin-bottom: 6px}
    .archis .mid_txt {padding: 12px 0}
    .archis .sec .help_item {width: 33.33%;height: 107px}
    .archis .sec .help_item:not(:last-of-type) {margin-right: 7px}
    .archis .sec:not(.flex):nth-of-type(3) {margin-bottom: 0}
    
    .archis .sec .step_line {margin: 34px 0 12px}
    .step_line .step_item {top: -7px;width: calc((100% - 40px)/3)}
    .step_line .step_item:nth-of-type(2) {left: calc((100% - 40px)/3);margin: 0 20px}
    .step_line .step_item:nth-of-type(2)::before, .step_line .step_item:nth-of-type(2)::after {top: -2px;left: -20px;width: 20px;height: 20px;background-size: 20px 20px}
    .step_line .step_item:nth-of-type(2)::after {left: auto;right: -20px}
    .step_line .step_item span {width: 14px;height: 14px}

    .archis .sec.flex:nth-of-type(3) {position: relative;height: 313px}
    .archis .sec:not(.flex):nth-of-type(3) {margin-bottom: 55px}
    .archis .bottom {position: relative;padding: 16px 0 50px}
    .archis .bottom.sec .tit {margin-bottom: 0}
    .archis .bottom .btn_list {margin-top: 12px}
    .archis .bottom .btn {width: 100px;padding: 6px 0}
    .archis .bottom .btn_wrap {position: static}
    .archis .btn_list .btn:first-of-type {margin-right: 6px}
    .bottom .btn_wrap .bubble3 {left: 50%;top: auto;bottom: 16px;width: 206px;height: 22px;padding: 1px 0;border-radius: 5px;transform: translate(-50%, 0)}
    .btn_wrap .bubble3 span {padding: 0;margin-bottom: 0;background: transparent}
    .archis .bg {display: none}

    /* aos scroll ani */
    .archis .bg_img_wrap {left: 0;top: 0;width: calc(100% - 40px);height: 330px;margin: 0 20px;overflow: hidden}
    /* .archis .bg_img_wrap .aos-bg {position: absolute} */
    /* html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(1) {width: 49px;height: 81px;left: 0;top: -80px}
    html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(2) {width: 50px;height: 54px;right: auto;left: 88px;top: -45px}
    html:not(.no-js) .bg_img_wrap  [data-aos=fade-down]:nth-of-type(3) {width: 56px;height: 56px;left: 0px;top: 60px}
    html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(4) {width: 68px;height: 50px;left: 63.8px;bottom: 45px}
    html:not(.no-js) .bg_img_wrap [data-aos=fade-down]:nth-of-type(5) {width: 53px;height: 63px;right: 18.3px;bottom: 45px}
    
    html:not(.no-js) .bg_img_wrap [data-aos^=fade][data-aos^=fade].aos-animate {transform: translate3d(0,45px,0)} */

    /* effect scroll 240416 */
    .archis .bg_img_wrap div:nth-of-type(1) {width: 49px;height: 81px;left: 0;top: -40px}
    .archis .bg_img_wrap div:nth-of-type(2) {width: 50px;height: 54px;right: auto;left: 88px;top: -5px}
    .archis .bg_img_wrap div:nth-of-type(3) {width: 56px;height: 56px;left: 0px;top: 100px}
    .archis .bg_img_wrap div:nth-of-type(4) {width: 68px;height: 50px;left: 63.8px;bottom: 5px}
    .archis .bg_img_wrap div:nth-of-type(5) {width: 53px;height: 63px;right: 18.3px;bottom: 5px}

    .archis .bg_img_wrap {transform: translate(0, -20px);opacity: 0}
    .archis .bg_img_wrap.on {animation: animateUpDown 1s forwards ease-in-out}

    @keyframes animateUpDown {
        0% {transform: translate(0, -20px);opacity: 0}
        100% {transform: none;opacity: 1}
    }
}

@media screen and (max-width: 767px) {
    .archis .sub_visual {height: 367px}
    .archis .visual_video {width: 100%;height: 367px}
    .archis .visual_video video {-o-object-fit: cover;object-fit: cover}

    .archis .compare::before {
        width: 80px;
        height: 40px;
        background: url("../img/renewal/archis/img_etc3x.png") 0 0 no-repeat;
        background-size: 80px 40px;
        transform: translate(-50%, -20px)
    }
}

/* @media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
    .archis .sec:nth-of-type(1)::before {
        width: 80px;
        height: 40px;
        background: url("../img/renewal/archis/img_etc3x.png") 0 0 no-repeat;
        background-size: 80px 40px;
        -webkit-transform: translate(-50%, -20px);
            -ms-transform: translate(-50%, -20px);
                transform: translate(-50%, -20px)
    }
} */

@media screen and (max-width: 359px) {
    body {min-width: 320px}
    .archis .flex .tit2, .archis .tit2 + .txt {width: 100%}
    .archis .sec.flex:nth-of-type(3) {height: auto}
    .archis .flex:nth-of-type(3) .tit {margin-bottom: 10px}
    .archis .tit2 span {margin-left: 0}
    .archis .apt {position: static;transform: none}
    .archis .rendering {margin-top: 40px}
    .rendering .video_tab, .rendering p {max-width: 100%}
}