@charset "UTF-8";

html body .rm-airepoto *  {font-family: "SUIT" !important; font-weight:400; color: #000; line-height: 1.2;}
html body .rm-airepoto *  {font-family: "SUIT" , 'Noto Sans KR', 'Nanum Gothic', 'MalgunGothic', sans-serif !important; font-weight:400; color: #000; line-height: 1.2;}


/* 'Noto Sans KR', 'Nanum Gothic', 'MalgunGothic', sans-serif !important; */
#landingBestRemotemeeting section .inner {max-width: 1220px; margin: 0 auto; padding: 0 10px;}
#landingBestRemotemeeting main section .inner {padding-top:0; color: inherit;}
#landingBestRemotemeeting .rm-airepoto section .inner .tit { font-size: 48px; font-weight: 800; line-height: 1.3; text-align: center;}

#header {position: fixed; top: 0; height: 100px; width: 100%; background-color:#262626; z-index: 999;}
#header .header_wrap { display: flex; height: 100px; padding: 0 42px; }
#header .header_wrap .ai_trial_btn {position: relative; padding: 3px; background: linear-gradient(90deg, #6E89FF 0%, #4CBDFC 100%); border-radius: 40px;}
#header .header_wrap .ai_trial_btn .border { display: flex; align-items: center; background: #262626; border-radius: 40px; padding: 7px 29px;}
#header .header_wrap .ai_trial_btn .border span {position: relative; font-size:24px; font-weight:800; margin: 0 16px 0 32px; padding-top: 3px; background: linear-gradient(90deg, #6E89FF 0%, #4CBDFC 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
#header .header_wrap .ai_trial_btn .border span::before {content: ''; position: absolute; transform: translateY(-50%); top: 50%; left:-16px; height:12px; width:1.5px; background-color: #6E89FF;}

.rm-airepoto .btn_wrap { display: flex; gap: 24px;  font-weight:800;}
.rm-airepoto .btn_wrap a {font-size: 24px; font-weight:800; border-radius: 35px;}
.rm-airepoto .btn_wrap a.trial_btn {display: flex; align-items: center; gap:14px; padding: 15px 34px; background: linear-gradient(90deg, #6E89FF 0%, #4CBDFC 100%);  color: #fff !important;}
.rm-airepoto .btn_wrap a.repoto_btn {position: relative;  padding: 4px; background: linear-gradient(90deg, #6E89FF 0%, #4CBDFC 100%); border-radius: 40px;}
.rm-airepoto .btn_wrap a.repoto_btn .border {display: flex; align-items: center; gap:14px; background: #fff; border-radius: 40px; padding: 13px 30px;}
.rm-airepoto .btn_wrap a.repoto_btn .border span {position: relative; font-size:24px; font-weight:800;   background: linear-gradient(90deg, #6E89FF 0%, #4CBDFC 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
.rm-airepoto .floating_box {display: none;}

/* visual */  
.visual {margin-top: 100px; padding: 148px 0;}
.visual .inner h1 {display: none;}
.visual .inner .ai_text_wrap {display: flex; flex-direction: column; align-items: center; gap: 64px;}
.visual .inner .ai_text_wrap .ai_text{ font-size: 76px; font-weight: 900; line-height: 80px; display: table-cell; vertical-align: middle; border-right: 1px solid #000; animation: cursor 0.7s ease infinite;height: 80px;}   
.visual .inner .ai_text_wrap .sub { font-size: 32px; font-weight: 500; text-align: center;}
@keyframes cursor {
    50%{ border-color: transparent; }
}

/* rm */
.rm {padding: 120px 0;}
.rm .inner .tit img {margin-bottom: -6px;}
.rm .wrap ul { display: flex; flex-direction: column; gap: 32px;}
.rm .wrap ul li {display: flex; gap: 24px;     align-items: stretch;}
.rm .wrap ul li .cont {flex-basis:509px; border-radius: 20px; box-shadow: 0px 8px 30px 0px #E4E4E4CC; padding: 40px 32px;}
.rm .wrap ul li .cont span {display: inline-block; font-size: 20px; font-weight:700; border-radius: 4px; color: #fff; padding: 4px 12px; margin-bottom: 24px;}
.rm .wrap ul li:nth-child(2) {flex-direction: row-reverse;}
.rm .wrap ul li:nth-child(1) .cont span { background-color: #43B02A;}
.rm .wrap ul li:nth-child(2) .cont span { background-color: #6E89FF;}
.rm .wrap ul li:nth-child(3) .cont span { background-color: #4CBDFC;}
.rm .wrap ul li .cont .txt { font-size: 28px; font-weight:800; line-height: 1.2; margin-bottom: 16px; }
.rm .wrap ul li .cont .desc { font-size: 20px; line-height: 1.3;}
.rm .wrap ul li .video_wrap {flex-basis:667px; overflow: hidden; font-size:0; box-shadow: 0px 8px 30px 0px #E4E4E4CC; border-radius: 20px;}
.rm .wrap ul li .video_wrap video { display: block;    width: 100%; height: 100%; object-fit: cover;  }

/* why */
#landingBestRemotemeeting .why .inner .tit {padding-top: 25px; margin-bottom: 56px; }
.rm-airepoto .why { padding-bottom: 120px;}
.why .inner .tit span { display: inline-block; font-weight:800; line-height: 0.3;}
.why .inner .tit span img {position: relative; top:9px;}
.why .inner .wrap ul { display: flex; flex-direction: column; gap: 56px;}
.why .inner .wrap ul li { display: flex; justify-content: space-between; align-items: center; gap: 24px;}
.why .inner .wrap ul li .con { width: 50%}
.why .inner .wrap ul li .con span.topic {position: relative; font-size: 24px; font-weight:800; line-height: 1.2; color: #6E89FF;}
.why .inner .wrap ul li .con span.topic::after {content:''; position: absolute; left:0; bottom:-5px; height: 3px; width: 100%; background-color: #6E89FF; }
.why .inner .wrap ul li .con .sub { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 30px 0 16px; }
.why .inner .wrap ul li .con .desc { font-size: 20px; line-height: 1.3;}
.why .inner .wrap ul li .why_img {width: 50%; font-size: 0;}
.why .inner .wrap ul li .why_img img {max-width: 100%; height: auto;}

/* banner */
.banner {  background-image: url(/wp-content/uploads/sites/2/images/landing/rmerpoto_banner_bgg.webp); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; padding: 120px 0;}
.banner .inner {padding-top: 0;}
.banner .inner .tit { padding-top: 24px;}
.banner .inner .tit span { display: inline-block; font-weight: 800; line-height: 0.3;}
.banner .inner .tit span img { position: relative; top:6px; right: 4px;}
.banner .inner .btn_wrap {display: flex; justify-content: center; gap: 24px; font-size: 24px; font-weight:800;}
.banner .inner .btn_wrap a.repoto_btn {padding: 3px;}
.banner .inner .btn_wrap a.repoto_btn .border{background-color: #f6f1fa;}

/* qna */
.qna { padding: 120px 0;}
.qna .inner .tit { font-size: 48px; font-weight: 800; line-height: 1.3;}
.qna .inner .acc_wrap {margin-top: 30px;}
.qna .inner .acc_wrap ul li:first-child {border-top: 1px solid #000;}
.qna .inner .acc_wrap ul li .acc_btn {position: relative; font-size:24px; font-weight:800; padding: 20px 40px 20px 58px; border-bottom: 1px solid #000; cursor: pointer;}
.qna .inner .acc_wrap ul li .acc_btn::before {position: absolute; content:'Q.'; top:50%; left:20px; transform: translateY(-50%); }
.qna .inner .acc_wrap ul li .acc_btn::after {position: absolute; content: ''; top:50%; right:20px; transform: translateY(-50%);  background: url(/wp-content/uploads/sites/2/images/landing/rmrepoto_qna_arrow.webp) center/cover no-repeat; width: 14px; height: 8px;   transition: transform 0.3s; }
.qna .inner .acc_wrap ul li.active .acc_btn::after { transform: rotate(180deg);}
.qna .inner .acc_wrap ul li.active .acc_btn { background-color: #F7F7F7; border-bottom: none;}
.qna .inner .acc_wrap ul li .content { display: none; font-size: 20px; line-height: 1.3; padding: 20px 0 20px 60px;}
.qna .inner .acc_wrap ul li.active .content { display: block; border-bottom: 1px solid #000; border-top: 1px solid #E3E3E3; background-color: #F7F7F7;}
.qna .inner .acc_wrap ul li .content .qna_more_link {text-decoration: underline; color: #4885ff !important;  box-shadow: inset 0 -1px 0; }
.qna .inner .acc_wrap ul li .content span {font-family: 'Noto Sans KR', 'Nanum Gothic', 'MalgunGothic', sans-serif !important;}

#footer #language-selection { display: none;}

@media screen and (max-width:768px) {
   
    main {padding-top: 0;}
    .rm-airepoto .floating_box {display: block; position: fixed; right:0; bottom: 64px; z-index: 333; background: linear-gradient(90deg, #6E89FF 0%, #4CBDFC 100%); border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
    .rm-airepoto .floating_box a {display: flex; flex-direction: column; gap: 12px; padding: 12px;}
    .rm-airepoto .floating_box a .txt { font-size:14px; font-weight: 800; line-height: 1.3; color: #fff;}
 
    #landingBestRemotemeeting .rm-airepoto section .inner .tit { font-size: 24px;}
    .rm-airepoto .btn_wrap {flex-direction: column; gap: 12px;}
    .rm-airepoto .btn_wrap a {font-size: 18px;  }
    .rm-airepoto .btn_wrap a.repoto_btn {padding: 2px;}
    .rm-airepoto .btn_wrap a.repoto_btn .border span {font-size: 18px;}

    #header {height: 40px;}
    #header .header_wrap { padding: 0 20px; height: 40px;}
    #header .header_wrap a {line-height: 0;}
    #header .header_wrap a img { width: 120px; height: auto;}
    #header .header_wrap .ai_trial_btn {display: none;}

    .visual {margin-top: 40px; padding: 64px 0 0; }
    .visual .inner h1 {display: block; font-size: 32px; font-weight: 900; line-height: 1.2; text-align: center;}
    .visual .inner .colabo_logo { width: 320px; height: auto;}
    .visual .inner .ai_text_wrap {gap: 32px;}
    .visual .inner .ai_text_wrap .ai_text {  display: none;}
    .visual .inner .ai_text_wrap .sub { font-size: 20px;}
    .rm-airepoto .visual .btn_wrap a { min-width: 195px;}
    .rm-airepoto .visual .btn_wrap a img {height: 11px; width: 7px;}
    .rm-airepoto .visual .btn_wrap a.trial_btn { gap: 10px; justify-content: center; padding: 9px 0; }
    .rm-airepoto .visual .btn_wrap a.repoto_btn .border { gap: 8px; justify-content: center; padding: 7px 0;}

    .rm {padding: 64px 0;}
    #landingBestRemotemeeting  .rm-airepoto section.rm .inner .tit { margin-bottom: 32px; }
    .rm .inner .tit img {width: 120px; height: auto;}
    .rm .wrap ul {gap: 44px;}
    .rm .wrap ul li {flex-direction: column; gap: 12px;}
    .rm .wrap ul li .cont {flex-basis: auto; border-radius: 16px; padding: 24px 16px;}
    .rm .wrap ul li .video_wrap {flex-basis: auto; border-radius: 10px;}
    .rm .wrap ul li:nth-child(2) { flex-direction: column;}
    .rm .wrap ul li .cont span { font-size: 16px;}
    .rm .wrap ul li .cont .txt {font-size: 20px;}
    .rm .wrap ul li .cont .desc {font-size: 16px;}

    .rm-airepoto .why {padding-bottom: 64px;}
    #landingBestRemotemeeting .why .inner .tit {margin-bottom: 30px; padding-top: 15px;}
    .why .inner .tit span {line-height: 0;}
    .why .inner .tit span img { width: 120px; height: auto;}
    .why .inner .wrap ul li {  flex-direction: column-reverse; gap: 8px;}
    .why .inner .wrap ul li .con { width: 100%}
    .why .inner .wrap ul li .con span.topic {font-size: 16px;}
    .why .inner .wrap ul li .con span.topic::after {height: 2px;}
    .why .inner .wrap ul li .con .sub {font-size: 20px; margin: 26px 0 8px;}
    .why .inner .wrap ul li .con .desc {font-size: 16px;}
    .why .inner .wrap ul li  .why_img { width: 100%}

    .banner { background-image: url(/wp-content/uploads/sites/2/images/landing/rmrepoto_banner_mb.webp); padding: 48px 0;}
    #landingBestRemotemeeting .rm-airepoto .banner .inner .tit {margin-bottom: 20px; padding-top: 12px;}
    #landingBestRemotemeeting .rm-airepoto .banner .inner .tit span { line-height: 0;}
    .banner .inner .tit span img { width: 126px; height: auto;}
    .banner .inner .btn_wrap { align-items: center; gap: 12px;}
    .banner .inner .btn_wrap a { min-width: 238px;}
    .banner .inner .btn_wrap a img { width:7px; height:11px;}
    .banner .inner .btn_wrap a.trial_btn {justify-content: center; gap:8px; padding: 8px 0; }
    .banner .inner .btn_wrap a.repoto_btn {padding: 2px;}
    .banner .inner .btn_wrap a.repoto_btn .border { justify-content: center; gap: 8px; padding: 6px 0; }

    .qna { padding: 64px 0;}
    .qna .inner .acc_wrap ul li .acc_btn { display: flex; align-items: center; font-size: 16px; padding: 12px 20px 12px 27px; min-height: 64px;}
    .qna .inner .acc_wrap ul li .acc_btn::before {left: 0; font-size: 16px;}
    .qna .inner .acc_wrap ul li .content { font-size: 16px; padding: 12px 32px;}
}