/** Theme Name:rview Theme URI:https://www.rsupport.com/ Author:wsd Author URI:https://www.rsupport.com/ Description: Version:0.0.1 License:GNU General Public License v2 or later License URI:https://www.gnu.org/licenses/gpl-2.0.html Text Domain:rview Domain Path:/languages /* Note:The CSS files are loaded from assets/css/ folder. */ @charset "utf-8"; /*------------------------------------------------------------------- @ Reset -------------------------------------------------------------------*/ *{-webkit-text-size-adjust:none !important; -moz-text-size-adjust:none !important; -ms-text-size-adjust:none !important; text-size-adjust:none !important} abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,.header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:0 0} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} dl,ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:after,blockquote:before,q:after,q:before{content:''; content:none} a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:0 0; text-decoration:none; color:inherit} a:hover, a:focus, a:active{text-decoration:none} label {font-weight:normal} button, label {cursor:pointer;} ins{background:#ff9; color:#000; text-decoration:none} mark{background:#55b955; color:inherit} del {text-decoration:line-through} abbr[title],dfn[title]{border-bottom:1px dotted; cursor:help} table{border-collapse:collapse; border-spacing:0} hr{display:block; height:1px; border:0; border-top:1px solid #e1e1e1; margin:0; padding:0} input,select,textarea{padding:0; margin:0; vertical-align:middle; color:#434343; line-height:1; border:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-family:inherit} input::-ms-clear{display:none} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition:background-color 5000s ease-in-out 0s; -webkit-transition:background-color 9999s ease-out; -webkit-box-shadow:0 0 0px 1000px white inset !important} input:-moz-read-only,input:read-only {cursor:default} :not([class*='btn_'])input:-moz-read-only, :not([class*='btn_'])input:read-only {background-color:#fafafa;} input[type=number] {-moz-appearance:textfield} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; -moz-appearance:none; appearance:none} input[type=submit] {cursor:pointer} select::-ms-expand{display:none} address,em,strong{font-style:normal} button{padding:0; margin:0; border:none; background:none; outline:none; cursor:pointer; font:inherit} html {box-sizing:border-box} *,:after,:before {box-sizing:inherit} /*------------------------------------------------------------------- @ Common -------------------------------------------------------------------*/ html {font-size:16px} body{overflow-x:hidden; min-width:320px; color:#232429; font-size:16px; font-size:1rem} a{transition:all .25s; -webkit-transition:all .25s; -moz-transition:all .25s; -ms-transition:all .25s; -o-transition:all .25s} a:hover{color:inherit} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{font-weight:normal} mark{background-color:#403f3f; color:#fff; line-height:1.5; padding:0 10px; font-style:italic} noscript{position:absolute; top:64px; z-index:1; width:100%; background:orange; color:red; font-size:20px; font-size:1.4286rem; font-weight:bolder; text-align:center; line-height:2} small{font-size:80%} strong, dt{font-weight:bold} hr.dash{border-style:dashed} .scrollbar::-webkit-scrollbar{width:10px; height:10px; background-color:#292929} .scrollbar::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 2px #000} .scrollbar::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 -1px 1px rgba(0, 0, 0, .3); border-radius:2px; background-color:#6d6d6d} /* skip menu */ #skipWrap a{position:absolute; top:-50px; left:0; z-index:1000; width:100%; height:50px; line-height:50px; display:block; background-color:#000; font-weight:bold; font-size:13px; text-align:center} #skipWrap a:hover, #skipWrap a:focus, #skipWrap a:active{top:0; text-decoration:none; color:#FFF} .ir {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0} .fl_l{float:left !important} .fl_r{float:right !important} .pos_r{position:relative} .pos_a{position:absolute} .horizen_center{position:relative; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%)} .hidden{display:none !important} .visible{display:block !important} .mo_block{display:none} .w100{width:100%; height:auto} .mw100{max-width:100%; height:auto} .lh1{line-height:1;} /* unit */ .mt5{margin-top:5px} .mt10{margin-top:10px} .mt15{margin-top:15px} .mt20{margin-top:20px} .mt25{margin-top:25px} .mt30{margin-top:30px} .mt35{margin-top:35px} .mt40{margin-top:40px} .mt45{margin-top:45px} .mt50{margin-top:50px} .mt55{margin-top:55px} .mt60{margin-top:60px} .mt65{margin-top:65px} .mt70{margin-top:70px} .mt75{margin-top:75px} .mt80{margin-top:80px} .mt85{margin-top:85px} .mt90{margin-top:90px} .mt95{margin-top:95px} .mt100{margin-top:100px} .mb5{margin-bottom:5px} .mb10{margin-bottom:10px} .mb15{margin-bottom:15px} .mb20{margin-bottom:20px} .mb25{margin-bottom:25px} .mb30{margin-bottom:30px} .mb35{margin-bottom:35px} .mb40{margin-bottom:40px} .mb45{margin-bottom:45px} .mb50{margin-bottom:50px} .mb55{margin-bottom:55px} .mb60{margin-bottom:60px} .mb65{margin-bottom:65px} .mb70{margin-bottom:70px} .mb75{margin-bottom:75px} .mb80{margin-bottom:80px} .mb85{margin-bottom:85px} .mb90{margin-bottom:90px} .mb95{margin-bottom:95px} .mb100{margin-bottom:100px} .mb120{margin-bottom:120px} .pt5{padding-top:5px} .pt10{padding-top:10px} .pt15{padding-top:15px} .pt20{padding-top:20px} .pt25{padding-top:25px} .pt30{padding-top:30px} .pt35{padding-top:35px} .pt40{padding-top:40px} .pt45{padding-top:45px} .pt50{padding-top:50px} .pt55{padding-top:55px} .pt60{padding-top:60px} .pt65{padding-top:65px} .pt70{padding-top:70px} .pt75{padding-top:75px} .pt80{padding-top:80px} .pt85{padding-top:85px} .pt90{padding-top:90px} .pt95{padding-top:95px} .pt100{padding-top:100px} .pt120{padding-top:120px} .pb5{padding-bottom:5px} .pb10{padding-bottom:10px} .pb15{padding-bottom:15px} .pb20{padding-bottom:20px} .pb25{padding-bottom:25px} .pb30{padding-bottom:30px} .pb35{padding-bottom:35px} .pb40{padding-bottom:40px} .pb45{padding-bottom:45px} .pb50{padding-bottom:50px} .pb55{padding-bottom:55px} .pb60{padding-bottom:60px} .pb65{padding-bottom:65px} .pb70{padding-bottom:70px} .pb75{padding-bottom:75px} .pb80{padding-bottom:80px} .pb85{padding-bottom:85px} .pb90{padding-bottom:90px} .pb95{padding-bottom:95px} .pb100{padding-bottom:100px} .pb120{padding-bottom:120px} /* text */ .tit1{font-size:43px; font-weight:bold; line-height:1.4; letter-spacing:-0.03em} .tit2{font-size:32px; font-weight:normal; line-height:1.4; letter-spacing:-0.05em; margin-bottom:50px} .tit3{font-size:26px; font-weight:bold; line-height:1.4; letter-spacing:-0.05em; margin-bottom:20px} [class*="tit_sub"]{font-weight:normal; line-height:1.6; letter-spacing:-0.05em} .tit_sub1{font-size:27px; font-weight:bold} .tit_sub2{font-size:22px} .tit_sub3{font-size:18px; letter-spacing:-0.03em} .desc1{font-size:13px} .txt_error{font-size:13px; color:#F44336} /* button */ .box_btn_wrap{font-size:0} .box_btn_wrap [class^="btn_"] + [class^="btn_"]{margin-left:22px} [class^="btn_"]{position:relative; overflow:hidden; display:inline-block;padding:8px 18px; border-radius:30px ; text-align:center; font-size:14px; line-height: 1.6; letter-spacing:-0.03em; transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s} [class^="btn_"][class*="bg_"]:not(.bg_white){color:#fff !important} [class^="btn_"].bg_white:hover{color:#335392} [class^="btn_"].round{border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px} [class^="btn_"].w_icon{padding-right:46px} [class^="btn_"].w_icon i{position:absolute; top:50%; right:18px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); font-size:16px} [class^="btn_"].w_icon [class*="icon_arw_"] {width:13px; height:21px; background-repeat:no-repeat; background-image:url(/wp-content/uploads/image/common/icon_spr_arrow.svg)} [class^="btn_"].w_icon .icon_arw_b {background-position:-13px 0} [class^="btn_"].size_lg{font-size:22px} [class^="btn_"].size_md{font-size:20px} [class^="btn_"].size_sm{font-size:18px} .btn_line{border:1px solid #f0f0f0} .btn_solid{background:#f0f0f0; border:1px solid #f0f0f0} .btn_pill{border:1px solid #f0f0f0; border-radius:100px; -webkit-border-radius:100px; -moz-border-radius:100px; -ms-border-radius:100px; -o-border-radius:100px} .btn_login{width:40px; height:40px; padding:0; font-size:30px; line-height:40px; text-align:center; color:#dadada} .btn_more{width:36px; height:36px; padding:8px} .btn_more i{position:relative; display:block; width:100%; height:100%} .btn_more i:before, .btn_more i:after{content:''; position:absolute; top:50%; left:50%; display:block; background:#747474; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%)} .btn_more i:before{width:100%; height:1px} .btn_more i:after{width:1px; height:100%} .btn_top{position:fixed; bottom:0; right:30px; display:none; width:48px; height:35px; background:#333; color:#fff; opacity:0.9; border-radius:4px 4px 0 0} .btn_top:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(/wp-content/uploads/image/common/icon_arrow_top.svg) no-repeat center} .btn_collapse {display:none} .tt_box .btn_info {width: 13px !important;} .btn_info {display:inline-block; width:13px; height:13px; padding:0; background:#647ead; vertical-align:middle; color:#fff; font-size:6px !important; line-height:13px; text-align:center; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .btn_info:before{content:'i'} .btn_slide_arrow{position:absolute; top:50%; z-index:10; width:80px; height:80px; padding:0; background:url(/wp-content/uploads/image/common/icon_spr_slide_arrows.svg) no-repeat; transition:none; -webkit-transition:none; -moz-transition:none; -ms-transition:none; -o-transition:none} .btn_slide_arrow.prev{left:50%} .btn_slide_arrow.next{right:50%; background-position:-80px 0} .icon_necessary{color:#ff7b65} .icon_necessary:before{content:'* '} .icon_check{display:inline-block; width:14px; height:16px; background:url(/wp-content/uploads/image/common/icon_spr_chk.svg) no-repeat} .icon_check.blue{background-position:-14px 0} /* form */ .form_wrap button:focus {outline:#333 auto 1px} .form_wrap .msg, .form_wrap .desc {margin:5px auto 0; font-size:14px; line-height:1.16} .form_wrap .msg.error{color:#f44336; font-weight:bold} .form_wrap ul.desc li{position:relative; padding-left:10px} .form_wrap ul.desc li:before{content:'-'; position:absolute; top:0; left:0} .form_wrap ul.desc li+li{margin-top:2px} .input_box_wrap label{margin-bottom:7px; line-height:1} .input_box_wrap + .input_box_wrap{margin-top:10px} .input_box input{width:100%; padding:8px 18px; border:1px solid #cdcece; font-size:16px; line-height:1.6} .input_box.w_btn{overflow:hidden} .input_box.w_btn input, .input_box.w_btn [class*='btn_']{float:left} .input_box.w_btn input{width:calc(80% - 10px); margin-right:10px} .input_box.w_btn [class*='btn_']{width:20%} .input_custom {overflow:hidden; border:1px solid #979797; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; width:100%; padding:14px 20px 13px; font-size:20px; line-height:1.3} .input_custom::-webkit-input-placeholder {color:#a0a0a0; font-size:15px; letter-spacing:-0.05em} .input_custom:-ms-input-placeholder {color:#a0a0a0; font-size:15px; letter-spacing:-0.05em} .input_custom::placeholder {color:#a0a0a0; font-size:15px; letter-spacing:-0.05em} .input_custom:focus {outline:none; border-color:#00a4e4} .input_custom.error{border-color:#f44336; background-color:#fff0ef} .input_custom.error:-webkit-autofill {border-color:#f44336; -webkit-box-shadow:0 0 0px 1000px #fff0ef inset !important} .input_custom.success, .input_custom.valid{background-color:#f3fbff} .input_custom.success:-webkit-autofill, .input_custom.valid:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px #f3fbff inset !important} .input_custom:not(select):read-only{cursor:default; background-color:#f2f2f2;} .input_custom:-moz-read-only:focus{border-color:#979797} select.input_custom {cursor:pointer; background:url(/wp-content/uploads/image/common/icon_select_arrow.svg) no-repeat right 20px center} select.input_custom:focus {background:url(/wp-content/uploads/image/common/icon_select_arrow_active.svg) no-repeat right 20px center;outline:none; border-color:#00a4e4} .chk_wrap{display:inline-block; position:relative; padding-left:30px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; text-align:left; font-size:15px} .chk_wrap label{cursor:pointer; font-weight:inherit} .chk_wrap label span.category {display:inline-block; margin-left:4px; font-size:77%} .chk_wrap input{position:absolute; opacity:0; height:0; width:0} .chk_wrap .mark{ overflow:hidden; position:absolute; top:1.5px; left:0; width:22px; height:22px; padding:0; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; border:1px solid #b1b1b1; background-color:#efefef} .chk_wrap .mark:after{content:''; position:absolute; left:0; top:0; width:100%; height:100%} .chk_wrap input:checked ~ .mark{border-color:#00a4e4; background-color:#00a4e4} .chk_wrap input:checked ~ .mark:after{content:''; background:url(/wp-content/uploads/image/common/icon_chk.svg) no-repeat center} .chk_wrap input:disabled ~ .mark{background-color:#f3f3f3} .radio_wrap{display:inline-block; position:relative; padding-left:25px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; text-align:left; cursor:pointer; font-size:15px} .radio_wrap label{cursor:pointer} .radio_wrap input{position:absolute; opacity:0; height:0; width:0} .radio_wrap .mark{overflow:hidden; position:absolute; top:3px; left:0; width:18px; height:18px; padding:0; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; border:1px solid #cdcece; background-color:#fff} .radio_wrap .mark:after{content:''; position:absolute; left:12.5%; top:12.5%; width:75%; height:75%; text-align:center; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .radio_wrap input:checked ~ .mark:after{background-color:#1da1df} .radio_wrap input:disabled ~ .mark{background-color:#f3f3f3} .radio_wrap + .radio_wrap{margin-left:7px} /* label */ .label{padding:5px 10px; font-size:13px; letter-spacing:0; background:#f0f0f0; border-radius:13px; -webkit-border-radius:13px; -moz-border-radius:13px; -ms-border-radius:13px; -o-border-radius:13px} .label[class*="bg_"]{color:#fff} /* link */ [class*="link_"]{display:inline-block; color:#4885ff} [class*="link_"] i{margin-left:5px} [class*="link_"].line{box-shadow:inset 0 -1px 0} /* box */ .box_wrap{border-radius:20px; background:#fff; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px} .box_wrap.info{position:relative; border:1px solid #E0DCD5; padding:15px; padding-left:75px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; color:#333} .box_wrap.info:before{content:''; position:absolute; top:20px; left:20px; width:40px; height:40px; background:#937A64 url(/wp-content/uploads/image/common/icon_info.svg) no-repeat center; background-size:100%; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .box_wrap.info .tit{color:#937A64; font-size:17px; font-weight:bolder} .box_wrap.info a{color:#333} .more_box {position:relative; border-radius:8px; box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.05); background-color:#ffffff} .more_box a {display:block; padding:28px 3.34%; padding-right:196px} .more_box a:after {content:''; position:absolute; top:50%; right:36px; width:80px; height:48px; transform:translateY(-50%); transition:right 0.3s cubic-bezier(0, 0.55, 0.45, 1); background:url(/wp-content/uploads/image/sub/icon-big-arrow.svg) no-repeat center} .more_box p {font-size:24px; font-weight:bold; line-height:1.42; color:#768db4} .more_box p span{display:block; margin-top:8px; font-size:14px; font-weight:normal} .scroll_box_wrap {overflow-x:hidden; overflow-y:auto; height:180px; padding:20px; border:solid 1px #efefef; background-color:#ffffff} /* tooltip box */ .tt_box{position:relative; display:inline-block} .tt_box .tt_con{position:absolute; bottom:20px; width:250px; margin-bottom:8px; padding:20px 18px; opacity:0; visibility:hidden; background-color:#fff; border:1px solid #4179ce; color:#4179ce; font-size:.92308rem; letter-spacing:-.05em; line-height:1.6; box-shadow:1px 1px 6px rgb(133 145 190 / 70%); transform:translateX(calc(-50% + 4px)); -webkit-transform:translateX(calc(-50% + 4px)); -moz-transform:translateX(calc(-50% + 4px)); -ms-transform:translateX(calc(-50% + 4px)); -o-transform:translateX(calc(-50% + 4px)); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px} .tt_box .tt_con:after, .tt_box .tt_con:before{content:''; position:absolute; display:inline-block; width:0; height:0; border-style:solid} .tt_box .tt_con:before {bottom:-8px; left:calc(50% - 4px); border-top-width:8px; border-right-width:8px; border-left-width:8px; border-top-color:#4179ce; border-right-color:transparent; border-left-color:transparent; border-bottom:none} .tt_box .tt_con:after {bottom:-7px; left:calc(50% - 4px); border-top-width:8px; border-right-width:8px; border-left-width:8px; border-top-color:#fff; border-right-color:transparent; border-left-color:transparent; border-bottom:none} .tt_box .btn_info:hover + .tt_con{opacity:1; visibility:visible} /* color */ .bg_white { background-color:#fff; border-color:#fff; color:#4885ff} .bg_blue{background:#4885ff; border-color:#4885ff} .bg_navy { background-color:#4885ff; border-color:#4885ff} .bg_black{background:#333; border-color:#333} .bg_grey{background:#9CADBC; border-color:#9CADBC} .bg_darkgrey{background:#53585a; border-color:#53585a} .bg_mint{background:#4bc6b0; border-color:#4bc6b0} .bg_orchid{background:#c248ff; border-color:#c248ff} .bg_violet{background:#9189c3; border-color:#9189c3} .bg_orange{background:#ffa659; border-color:#ffa659} .bg_deeporange{background:#ff7b65; border-color:#ff7b65} [class^="line_"]:not(.line) { background-color:#fff} .line_white { background-color:transparent; border-color:#fff; color:#fff} .line_blue { border-color:#1da1df; color:#1da1df} .line_navy { border-color:#4885ff; color:#4885ff} .line_darknavy{border-color: #273b63; color: #273b63;} .line_mint{border-color:#4bc6b0; color:#4bc6b0} .line_orchid{border-color:#c248ff; color:#c248ff} .line_violet{border-color:#9189c3; color:#9189c3} .line_orange{border-color:#ffa659; color:#ffa659} .line_deeporange{border-color:#ff7b65; color:#ff7b65} .color_point1{color:#1da1df !important} .color_point2{color:#c248ff !important} .color_point3{color:#4bc6b0 !important} .color_point4{color:#4179ce !important} .color_point5{color:#ffa659 !important} .color_point6{color:#fd1212 !important} .color_point7{color:#ff6600 !important} .color_point8{color:#4885ff !important} .color_point9{color:#4885FF !important} .color_point10{color:#19947E !important} .color_point11{color: #273B63 !important} .color_point12{color:#6648FF !important} .bg_ffffff{background-color:#fff} .bg_f6f7f9{background-color:#F6F7F9} .bg_f3f6fd{background-color:#F3F6FD} .bg_f3fafd{background-color:#F3FAFD} .bg_f5fbfe{background-color:#f5fbfe} /* list */ .list_dot > li{position:relative; padding-left:12px} .list_dot > li:before{content:''; position:absolute; top:.8em; left:0; width:4px; height:4px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; background-color:#000000} .list_dot2 > li{position:relative; padding-left:12px} .list_dot2 > li:before{content:'·'; position:absolute; top:0; left:0; font-size:inherit} .list_dot_blue li {position:relative; padding-left:11px; font-size:14px; line-height:1.29; letter-spacing:-0.5px; color:#666} .list_dot_blue li:before {content:''; position:absolute; top:7px; left:0; width:4px; height:4px; background-color:#00a4e4} .list_hypen li{position:relative; padding-left:15px} .list_hypen li:before{content:'- '; position:absolute; top:0; left:0} .list_hypen li + li{margin-top:3px} .list_check li{position:relative; padding-left:20px} .list_check li span{display:block; font-weight:bold} .list_check li:before{content:''; position:absolute; top:0; left:0; width:19px; height:19px; background:url(/wp-content/uploads/image/common/icon_arrow_check.png) no-repeat center} .list_check li + li{margin-top:7px} .list_check.blue li{padding-left: 26px;} .list_check.blue li:before{ background: url(/wp-content/uploads/sites/2/image/common/check-blue.png); width: 24px; height: 24px; background-size: cover; top: 50%; transform: translateY(-50%);} .list_square {list-style:square; padding-inline-start:20px} .list_num {list-style:decimal; padding-inline-start:20px} .list_num_circle {counter-reset:number; padding-left:0} .list_num_circle > li {position:relative; padding-inline-start:24px; list-style:none} .list_num_circle > li:before{content:counter(number); counter-increment:number; position:absolute; left:0; top:7px; display:inline-block; padding:2px 4.64px; border:1px solid; border-radius:50%; font-size:10px; line-height:1} .list_num_circle > li:nth-child(9)~li:before{padding:2px 2.25px} .list_num_bracket {counter-reset:number; padding-left:0} .list_num_bracket > li {list-style:none} .list_num_bracket > li:before {content:counter(number) ") "; counter-increment:number} .list_noti li { position:relative; padding-left:20px; font-size:14px; letter-spacing:-0.43px; text-align:left} .list_noti li::before { content:"※ "; display:inline-block; position:absolute; top:0px; left:0px} .list_card{overflow:hidden} .list_card > [class*="col-"]{margin-bottom:50px; padding-left:10px; padding-right:10px} .list_thumb{margin-bottom:40px} .list_thumb > li{padding-bottom:30px} .list_thumb > li + li{padding-top:30px; border-top:1px solid #ddd} /* card */ [class*="_item"] .info_wrap .tit{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} [class*="_item"] .info_wrap .desc{overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; text-align:left; word-wrap:break-word; word-break:break-all} .card_item{overflow:hidden; display:block; color:#333; background-color:#fff;position: relative;} .card_item .thumb{overflow:hidden; position:relative; padding-bottom:60%; line-height:1; background-color:#fff} .card_item .thumb img{position:absolute; top:50%; left:50%; width:auto; height:100%; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%)} .card_item .thumb:after{content:''; display:block; width:100%; height:100%; background:rgba(0, 0, 0, 0); position:absolute; top:0; left:0; transition:background 0.4s ease-in-out; -webkit-transition:background 0.4s ease-in-out; -moz-transition:background 0.4s ease-in-out; -ms-transition:background 0.4s ease-in-out; -o-transition:background 0.4s ease-in-out} .card_item .thumb span{content:attr(data-hover-txt); position:absolute; top:50%; left:50%; z-index:1; text-align:center; font-size:16px; color:transparent; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%)} .card_item .thumb span:after{content:''; display:block; width:0%; height:2px; background:#fff; margin-top:4px; transition:width 0.4s ease-in-out} .item_istp .info_wrap{margin-top:20px} .card_item .category{margin-bottom:10px; font-size:14px; line-height:1; color:#333; word-spacing:-0.09em} .card_item .tit{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; text-align: left; word-wrap: break-word; word-break: break-all; max-height: 56px; font-size:20px; font-weight:bold; line-height:1.4} .item_istp .desc{max-height:46px; line-height:1.45; margin-top:8px; color:#808080} .card_thumb_item{position:relative; display:block; overflow:hidden; color:#333; font-size:15px} .card_thumb_item:after{ content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; background:rgb(255,255,255); background:linear-gradient(180deg, rgba(255,255,255,0) 23%, rgba(51,51,51,0.55) 70%)} .card_thumb_item .thumb {position:relative; width:100%; padding-bottom:65%} .card_thumb_item .thumb img {position:absolute; top:50%; left:50%; width:auto; height:100%; transform:translate(-50%, -50%)} .card_thumb_item .info_wrap {position:absolute; left:0; bottom:0; z-index:1; width:100%; padding:0 10px 10px; color:#fff} .card_thumb_item .info_wrap .category{display:none} .card_thumb_item .info_wrap .tit{overflow:hidden; max-height:65px; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-align:left; word-wrap:break-word; word-break:break-all; font-size:15px; line-height:1.25} .card_thumb_item .info_wrap .desc {overflow:hidden; height:36px; margin-top:10px; line-height:1.25; word-break:break-all} .thumb_item{overflow:hidden; display:block; color:#333} .thumb_item .thumb{overflow:hidden; position:relative; float:right; width:25%; max-height:121px; padding-bottom:15%} .thumb_item .thumb img{position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%)} .thumb_item .info_wrap{float:right; width:calc(75% - 15px); margin-right:15px} .thumb_item .info_wrap .tit{margin-bottom:12px; font-size:22px; font-weight:bold; line-height:1.35; white-space:normal; text-overflow:inherit} .thumb_item .info_wrap .desc{overflow:hidden; height:75px; line-height:1.6; color:#999; -webkit-line-clamp:3} .thumb_item .info_wrap ul{margin-top:10px; line-height:1} .thumb_item .info_wrap ul li{display:inline-block; color:#999; font-size:14px; line-height:1} .thumb_item .info_wrap ul li + li{padding-left:10px; margin-left:10px} .no_thumb .thumb_item .info_wrap{float:none; width:100%; margin-right:0} .bar_seperate li{position:relative; display:inline-block; line-height:1} .bar_seperate li + li{margin-left:10px; padding-left:10px} .bar_seperate li + li:before{content:''; position:absolute; top:0; left:0; width:1px; height:100%; background-color:#ccc} /* slick */ .slick-arrow{overflow:hidden; position:absolute; top:50%; z-index:5; width:15px; height:15px; border:solid #c0c0c0; border-width:0 2px 2px 0; background-color:transparent; cursor:pointer; text-indent:-9999px} .slick-arrow.slick-prev{left:5px; transform:translateY(-50%) rotate(135deg); -webkit-transform:translateY(-50%) rotate(135deg); -moz-transform:translateY(-50%) rotate(135deg); -ms-transform:translateY(-50%) rotate(135deg); -o-transform:translateY(-50%) rotate(135deg)} .slick-arrow.slick-next{right:5px; transform:translateY(-50%) rotate(-45deg); -webkit-transform:translateY(-50%) rotate(-45deg); -moz-transform:translateY(-50%) rotate(-45deg); -ms-transform:translateY(-50%) rotate(-45deg); -o-transform:translateY(-50%) rotate(-45deg)} .slick-dots li{display:inline-block; overflow:hidden; width:12px; height:12px; margin:0 4px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px; transition:width 0.35s ease ; -webkit-transition:width 0.35s ease ; -moz-transition:width 0.35s ease ; -ms-transition:width 0.35s ease ; -o-transition:width 0.35s ease} .slick-dots li button{display:block; width:100%; height:100%; background-color:#e1e1e1; text-indent:-999px} .slick-dots li.slick-active{width:40px} .slick-dots li.slick-active button{background-color:#1da1df} /* embed_wrap */ .embed_wrap{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%} .embed_wrap iframe,.embed_wrap object,.embed_container embed, .embed_wrap video {position:absolute; top:0; left:0; width:100%; height:100%} /* breadcrumb */ .breadcrumb_wrap{float:right; font-size:0} .breadcrumb_wrap li{display:inline-block} .breadcrumb_wrap li a, .breadcrumb_wrap li span{font-size:14px; color:#53585a} .breadcrumb_wrap li + li{margin-left:5px} .breadcrumb_wrap li + li a, .breadcrumb_wrap li + li span{position:relative; padding-left:10px} .breadcrumb_wrap li + li a:before, .breadcrumb_wrap li + li span:before{content:'/'; position:absolute; top:0; left:0} /* tab_wrap */ .tab_wrap{display:flex; width:100%; border:1px solid #ebeaea; border-bottom:none} .tab_wrap button, .tab_wrap a{flex:1; padding:15px 15px; line-height:1; background-color:#f0f0f0} .tab_wrap button.active, .tab_wrap a.active{background-color:#fff} .tab_wrap_bg {background-color:#89a2d1} .tab_wrap_bg .tab_wrap{border:none} .tab_wrap_bg .tab_wrap button, .tab_wrap_bg .tab_wrap a {background-color:#89a2d1; font-size:18px; color:#fff; text-align:center;opacity:.6;} .tab_wrap_bg .tab_wrap button.active, .tab_wrap_bg .tab_wrap a.active {background-color:#6483be;opacity:1;} .tab_con_wrap .tab_con:not(.active) {display: none;} .select_tab_wrap{border-bottom:1px solid #f0f0f0} .select_tab_wrap button{padding:5px 15px 7px; color:#959595; border-bottom:2px solid transparent} .select_tab_wrap button.active{border-color:#1da1df; font-weight:bold; color:#333} /* figure-type1 */ .figure-type1{text-align:center} .figure-type1.no-bd img{border:none} .figure-type1 img{max-width:100%; border:1px solid #b5b5b5} /* accordian */ .accordian_wrap{border-top:1px solid #e0e4f4} .accordian_wrap > ul > li{border-bottom:1px solid #e0e4f4; font-size:18px} .accordian_wrap > ul > li > button{position:relative; width:100%; padding:20px; padding-left:0; text-align:left; font-weight:normal} .accordian_wrap > ul > li > button:before{content:''; position:absolute; top:50%; right:15px; width:14px; height:14px; border:3px solid #8593aa; border-left:0; border-top:0; text-align:center; transform:translateY(-80%) rotate(45deg); -webkit-transform:translateY(-80%) rotate(45deg); -moz-transform:translateY(-80%) rotate(45deg); -ms-transform:translateY(-80%) rotate(45deg); -o-transform:translateY(-80%) rotate(45deg)} .accordian_wrap > ul > li > .bottom{display:none; padding:20px 0 40px; font-size:15px} .accordian_wrap > ul > li.active .bottom{display:block} .accordian_wrap > ul > li.active button:before {border-color:#1da1df; transform:translateY(-20%) rotate(-135deg); -webkit-transform:translateY(-20%) rotate(-135deg); -moz-transform:translateY(-20%) rotate(-135deg); -ms-transform:translateY(-20%) rotate(-135deg); -o-transform:translateY(-20%) rotate(-135deg)} /* table */ .tb_wrap > table{width:100%} .tb_type1 thead tr{ border-top:2px solid #1da1df; border-bottom:2px solid #bcc1c5} .tb_type1 th, .tb_type1 td{padding:10px 20px; text-align:center} .tb_type1 thead th + th{border-left:1px solid #d1d7dc} .tb_type1 tbody tr{border-bottom:1px solid #e0dede} .tb_type1 tbody td + td{border-left:1px solid #d1d7dc} .tb_type1 .br_none{border:none} .tb_type2 th, .tb_type2 td{padding:5px 10px} .tb_type2 th + th, .tb_type2 td + td{border-left:1px solid #bcc1c5} .tb_type2 thead{border-top:2px solid #1da1df; border-bottom:2px solid #bcc1c5} .tb_type2 tbody tr{border-bottom:1px solid #bcc1c5} /* modal */ .home .modal-backdrop.in { opacity:0.85; filter:alpha(opacity=85); -webkit-filter:alpha(opacity=85)} .modal-header {font-size: 18px;} .modal-header .close {font-size: 27px; margin-top: 2px;} .modal-body .box_scroll_wrap { overflow: hidden; overflow-y: auto; max-height: 50vh;} .modal-body .box_scroll_wrap > .sub_page > .container {width: 100% !important;} .type_video .modal-dialog .modal-content{background-color:transparent; box-shadow:none; border:none} .type_video .modal-dialog .modal-header{min-height:50px; padding:15px 0; border:none} .type_video .modal-dialog .modal-header .close{color:#fff; opacity:1} .type_video .modal-dialog .modal-body{padding:0} /* flex */ .flex_wrap {display:flex; flex-wrap:wrap; align-items:flex-start} .flex_wrap .ml10{margin-left:10px} .flex_wrap > [class^='flex'] + [class^='flex'] {margin-left:20px} .flex_wrap>[class^='flex'] > [class^='btn_'] {display:block; width:100%; max-width:none !important; padding:12px 18px} .flex_wrap .flex1{flex:1} .flex_wrap .flex2{flex:2} .flex_wrap .flex3{flex:3} .flex_wrap .flex4{flex:4} .flex_wrap .flex5{flex:5} .flex_wrap .flex6{flex:6} .flex_wrap .flex7{flex:7} .flex_wrap .flex8{flex:8} .flex_wrap .flex9{flex:9} /*------------------------------------------------------------------- @ MediaQuery -------------------------------------------------------------------*/ @media all and (min-width:769px){ .card_item .info_wrap .desc{ -webkit-line-clamp: 4; max-height: 92px;} .select_tab_wrap{display:flex;flex-wrap:wrap;justify-content: flex-start;} .select_tab_wrap button{ flex: 1 20%; max-width: 25%;} .select_tab_wrap button:nth-child(5) ~ button {margin-top: 10px;} } /*hover*/ @media all and (min-width:768px) { [class*="link_"]:hover { color:#4885ff; box-shadow:inset 0 -1px 0} [class^="btn_"][class*="line_"]:hover:not(.line_white) { color:#fff !important} [class^="btn_"].bg_blue:hover { background-color:#2856B3 !important; border-color:#4885ff !important; font-weight: bold;} [class^="btn_"].bg_navy:hover { background-color:#4675d3 !important; border-color:#4675d3 !important} [class^="btn_"].line_white:hover { background-color:#fff !important; color:#273b63 !important} [class^="btn_"].line_blue:hover { background-color:#1da1df !important; border-color:#1da1df !important} [class^="btn_"].line_navy:hover { background-color:#4675d3 !important; border-color:#4675d3 !important} [class^="btn_"].line_darknavy:hover{background-color: #273b63 !important; border-color: #273b63 !important;} [class^="btn_"].line_mint:hover { background-color:#4bc6b0 !important; border-color:#4bc6b0 !important} [class^="btn_"].line_orchid:hover { background-color:#D150CA !important; border-color:#D150CA !important} [class^="btn_"].line_violet:hover { background-color:#9189c3 !important; border-color:#9189c3 !important} [class^="btn_"].line_orange:hover { background-color:#ffa659 !important; border-color:#ffa659 !important} [class^="btn_"].w_icon:hover .icon_arw_b {background-position:0 0} .btn_more:hover{background:rgba(221, 221, 221, 0.5); border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .btn_top:hover{background:#1da1df} .btn_slide_arrow.prev:hover{background-position:0 -80px !important} .btn_slide_arrow.next:hover{background-position:-80px -80px !important} a.card_item:hover .thumb:after{background:rgba(0, 0, 0, 0.5); transition:background 0.4s ease-in-out; -webkit-transition:background 0.4s ease-in-out; -moz-transition:background 0.4s ease-in-out; -ms-transition:background 0.4s ease-in-out; -o-transition:background 0.4s ease-in-out} a.card_item:hover .thumb span{color:#fff; transition:color 0.4s ease-in-out; -webkit-transition:color 0.4s ease-in-out; -moz-transition:color 0.4s ease-in-out; -ms-transition:color 0.4s ease-in-out; -o-transition:color 0.4s ease-in-out} a.card_item:hover .thumb span:after{width:100%; transition:width 0.4s ease-in-out} a.card_item:hover .info_wrap{border-color:#c9cbcd} a.thumb_item:hover .info_wrap .desc{color:#333} .box_wrap.info a:hover{box-shadow:inset 0 -1px 0 #333} .more_box:hover a:after{right:30px} } @media all and (max-width:767px) { html{font-size:15px} /* unit */ .mt40{margin-top:20px} .mt45{margin-top:23px} .mt50{margin-top:25px} .mt55{margin-top:28px} .mt60{margin-top:30px} .mt65{margin-top:33px} .mt70{margin-top:35px} .mt75{margin-top:38px} .mt80{margin-top:40px} .mt85{margin-top:43px} .mt90{margin-top:45px} .mt95{margin-top:48px} .mt100{margin-top:50px} .mb40{margin-bottom:20px} .mb45{margin-bottom:23px} .mb50{margin-bottom:25px} .mb55{margin-bottom:28px} .mb60{margin-bottom:30px} .mb65{margin-bottom:33px} .mb70{margin-bottom:35px} .mb75{margin-bottom:38px} .mb80{margin-bottom:40px} .mb85{margin-bottom:43px} .mb90{margin-bottom:45px} .mb95{margin-bottom:48px} .mb100{margin-bottom:50px} .mb120{margin-bottom:60px} .pt40{padding-top:20px} .pt45{padding-top:23px} .pt50{padding-top:25px} .pt55{padding-top:28px} .pt60{padding-top:30px} .pt65{padding-top:33px} .pt70{padding-top:35px} .pt75{padding-top:38px} .pt80{padding-top:40px} .pt85{padding-top:43px} .pt90{padding-top:45px} .pt95{padding-top:48px} .pt100{padding-top:50px} .pt120{padding-top:60px} .pb40{padding-bottom:20px} .pb45{padding-bottom:23px} .pb50{padding-bottom:25px} .pb55{padding-bottom:28px} .pb60{padding-bottom:30px} .pb65{padding-bottom:33px} .pb70{padding-bottom:35px} .pb75{padding-bottom:38px} .pb80{padding-bottom:40px} .pb85{padding-bottom:43px} .pb90{padding-bottom:45px} .pb95{padding-bottom:48px} .pb100{padding-bottom:50px} .pb120{padding-bottom:60px} /* common */ .tit1{font-size:28px} .tit2{font-size:24px; margin-bottom:25px} .tit3{font-size:22px} .tit_sub1{font-size:20px} .tit_sub2{font-size:17px} .tit_sub3{font-size:15px} .desc1{font-size:12px} [class^="btn_"]{font-size:15px} [class^="btn_"].size_lg{font-size:19px} [class^="btn_"].size_md{font-size:17px} [class^="btn_"].size_sm{font-size:15px} .btn_collapse {display:inline-block; padding:4px 10px 4px 12px; font-size:13px; border:1px solid #a5a5a5; background:#fff; color:#333; font-weight:bold} .btn_collapse i{position:relative; display:inline-block; width:19px; height:19px; margin-left:2px; vertical-align:middle; line-height:1} .btn_collapse i:before, .btn_collapse i:after{ content:''; position:absolute; top:50%; left:50%; background:#53585a; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%)} .btn_collapse i:before{width:12px; height:2px} .btn_collapse i:after{width:2px; height:12px; transition:transform 0.3s ease-in-out; -webkit-transition:transform 0.3s ease-in-out; -moz-transition:transform 0.3s ease-in-out; -ms-transition:transform 0.3s ease-in-out; -o-transition:transform 0.3s ease-in-out} .btn_collapse.active i:after{ transform:translate(-50%,-50%) rotate(90deg) ; -webkit-transform:translate(-50%,-50%) rotate(90deg) ; -moz-transform:translate(-50%,-50%) rotate(90deg) ; -ms-transform:translate(-50%,-50%) rotate(90deg) ; -o-transform:translate(-50%,-50%) rotate(90deg) } .select_tab_wrap{overflow:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; white-space:nowrap; margin-top:10px; padding-bottom:4px} .select_tab_wrap::-webkit-scrollbar { -webkit-appearance:none} .select_tab_wrap::-webkit-scrollbar:vertical { width:4px} .select_tab_wrap::-webkit-scrollbar:horizontal { height:4px} .select_tab_wrap::-webkit-scrollbar-thumb { background-color:rgba(0, 0, 0, .2); border-radius:3px} .select_tab_wrap::-webkit-scrollbar-track { border-radius:3px; background-color:rgba(255,255,255,.5)} .select_tab_wrap button{padding-left:7px; padding-right:7px} .card_item .thumb{padding-bottom:40%} .card_item .thumb img{width:100%; height:auto} .card_item .info_wrap .tit{max-height:none !important; font-size:17px} .card_item .info_wrap .desc{display:block; -webkit-line-clamp:inherit; max-height:none} .list_card>[class*="col-"]{margin-bottom:25px;} .list_thumb > li{padding-bottom:20px} .list_thumb > li + li{padding-top:20px} .thumb_item .info_wrap .tit{margin-bottom:6px; font-size:17px} .thumb_item .info_wrap .desc{height:48px; -webkit-line-clamp:2} .thumb_item .info_wrap ul li{font-size:13px} .tb_wrap{overflow:auto hidden} .tab_wrap_bg .tab_wrap button{padding:12xp 15px; font-size:16px} .box_wrap.info{padding:5px; padding-left:65px} .box_wrap.info:before{top:15px; width:30px; height:30px; font-size:30px} .more_box a{padding-right:96px} .more_box a:after{right:18px; width:60px; background-size:100%} .accordian_wrap > ul > li{font-size:16px} .accordian_wrap > ul > li > button{padding:15px 60px 16px 15px; line-height:1.45} .accordian_wrap>ul>li>button:before {right:5px; width:10px; height:10px; border-width:2px} .accordian_wrap > ul > li > .bottom{padding:5px 15px 35px} .input_custom {padding:12px 15px 15px; font-size:17px} .input_custom::placeholder{font-size:14px} .scroll_box_wrap {padding:15px; height:80px; font-size:14px} } @media all and (max-width:640px){ /* unit */ .mt5{margin-top:2.5px} .mt10{margin-top:5px} .mt15{margin-top:7.5px} .mt20{margin-top:10px} .mt25{margin-top:12.5px} .mt30{margin-top:15px} .mt35{margin-top:17.5px} .mt40{margin-top:20px} .mt45{margin-top:22.5px} .mt50{margin-top:25px} .mt55{margin-top:27.5px} .mt60{margin-top:30px} .mt65{margin-top:32.5px} .mt70{margin-top:35px} .mt75{margin-top:37.5px} .mt80{margin-top:40px} .mt85{margin-top:42.5px} .mt90{margin-top:45px} .mt95{margin-top:47.5px} .mt100{margin-top:50px} .mb5{margin-bottom:2.5px} .mb10{margin-bottom:5px} .mb15{margin-bottom:7.5px} .mb20{margin-bottom:10px} .mb25{margin-bottom:12.5px} .mb30{margin-bottom:15px} .mb35{margin-bottom:17.5px} .mb40{margin-bottom:20px} .mb45{margin-bottom:22.5px} .mb50{margin-bottom:25px} .mb55{margin-bottom:27.5px} .mb60{margin-bottom:30px} .mb65{margin-bottom:32.5px} .mb70{margin-bottom:35px} .mb75{margin-bottom:37.5px} .mb80{margin-bottom:40px} .mb85{margin-bottom:42.5px} .mb90{margin-bottom:45px} .mb95{margin-bottom:47.5px} .mb100{margin-bottom:50px} .mb120{margin-bottom:60px} .pt5{padding-top:2.5px} .pt10{padding-top:5px} .pt15{padding-top:7.5px} .pt20{padding-top:10px} .pt25{padding-top:12.5px} .pt30{padding-top:15px} .pt35{padding-top:17.5px} .pt40{padding-top:20px} .pt45{padding-top:22.5px} .pt50{padding-top:25px} .pt55{padding-top:27.5px} .pt60{padding-top:30px} .pt65{padding-top:32.5px} .pt70{padding-top:35px} .pt75{padding-top:37.5px} .pt80{padding-top:40px} .pt85{padding-top:42.5px} .pt90{padding-top:45px} .pt95{padding-top:47.5px} .pt100{padding-top:50px} .pt120{padding-top:60px} .pb5{padding-bottom:2.5px} .pb10{padding-bottom:5px} .pb15{padding-bottom:7.5px} .pb20{padding-bottom:10px} .pb25{padding-bottom:12.5px} .pb30{padding-bottom:15px} .pb35{padding-bottom:17.5px} .pb40{padding-bottom:20px} .pb45{padding-bottom:22.5px} .pb50{padding-bottom:25px} .pb55{padding-bottom:27.5px} .pb60{padding-bottom:30px} .pb65{padding-bottom:32.5px} .pb70{padding-bottom:35px} .pb75{padding-bottom:37.5px} .pb80{padding-bottom:40px} .pb85{padding-bottom:42.5px} .pb90{padding-bottom:45px} .pb95{padding-bottom:47.5px} .pb100{padding-bottom:50px} .pb120{padding-bottom:60px} .mo_block{display:block} .list_card>[class*="col-"]{width:100%} [class*="col-xs"]{float:none; left:0; right:0; width:100%; margin-left:0; margin-right:0} .thumb_item .thumb{float:none; width:100%; height:auto; padding-bottom:30%} .thumb_item .thumb img{width:100%; height:auto} .thumb_item .info_wrap{float:none; width:100%; margin-right:0; margin-top:15px} .input_box input{padding:6px 10px; font-size:15px} .input_box_wrap + .input_box_wrap{margin-top:17px} .input_box.w_btn input, .input_box.w_btn [class*='btn_']{float:none} .input_box.w_btn input{width:100%; margin-bottom:5px; margin-right:0} .input_box.w_btn [class*='btn_']{width:100%; padding:6px 10px} .chk_wrap{padding-right:28px} .chk_wrap .mark{width:20px; height:20px} .more_box a {padding:28px 5.41% 50px} .more_box p{margin-bottom:10px; font-size:20px} .more_box a:after {top:95%; right:18px; width:60px; background-size:60px 39px !important; transform:translateY(-100%)} .accordian_wrap>ul>li>button{padding:15px 30px 16px 10px} } /*------------------------------------------------------------------- @ Common Layout -------------------------------------------------------------------*/ .container{width:100%} /* top menu */ #topMenuWrap{ color: #646775;line-height: 36px; margin-left: auto; font-size: 14px; background-color: #f3f6fd;} #topMenuWrap > div {display: flex;} #topMenuWrap a{color:inherit} #topMenuWrap .container{overflow:hidden; position:relative; width: 100%; padding: 0 40px; display: flex; max-width: 1920px; justify-content: flex-end;} #topMenuWrap .link_online{float:left} #topMenuWrap .link_online:before{top:4px; width:14px; background-size:34px auto; background-position:-19px -37px} #topMenuWrap .login_wrap a + a{position:relative; margin-left:10px; padding-left:10px} #topMenuWrap .link_login:before{top:4px; background-position:16px -4px} #topMenuWrap ul{ position:relative; margin-left: 7px;} #topMenuWrap ul li{display:inline-block; position: relative; } #topMenuWrap ul li:first-child{ padding-left: 30px;} #topMenuWrap ul li:first-child::before{content:''; position:absolute; top:50%; left:0; margin-top: -12px; display:inline-block; width:24px; height:24px; background-image:url(/wp-content/uploads/image/common/icon-call.png); background-size:24px auto;} #topMenuWrap ul li + li{margin-left:12px} :lang(ja) #topMenuWrap ul:before{top:0} :lang(ja) #topMenuWrap .link_login:before{top:2px} body.is_mobile .card_item .info_wrap .desc:not(.tag){ display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; line-height: 2;} body.is_mobile .card_item .info_wrap .desc:not(.tag) br{display: none;} /* .header */ .header .container{width: 100%; padding:0 40px;display: flex; max-width: 1920px; position: relative;} .header .logo{display:inline-block; line-height:64px; } .header .logo img{width:180px; vertical-align:middle} .header #gnbWrap{height:64px; margin-left: 24px; display: flex;} .header #gnbWrap .gnb_btns{display: none;} .header #menu-main > li{float:left} .header #menu-main > li > a{display:inline-block; padding:0 0.9vw; font-size:17px; line-height:64px; color:#646775; border-top:2px solid transparent} .header #menu-main > li > .sub-menu{display:none; top: 64px; position:absolute; padding: 12px; box-sizing: border-box; width: 668px; z-index:5;box-shadow: 1px 4px 10px 0 rgba(223, 223, 223, 0.5); background-color: #fff;} .header #menu-main > li > .sub-menu li {line-height:1.5} .header #menu-main > li > .sub-menu li a:hover{color: #4885ff;} .header #menu-main > li > .sub-menu li a::after {display: block; font-weight: normal;} .header #menu-main > li > .sub-menu > li > a , .header #menu-main > li > .sub-menu > li > span{display:block; font-size:14px; padding:12px 20px; color:#646775; font-weight: bold;} .header #menu-main > li > .sub-menu > li > span{padding-bottom:3px} .header #menu-main > li > .sub-menu > li > .sub-menu {padding-bottom:4px} .header #menu-main > li > .sub-menu > li > .sub-menu li a{display:block; font-size:14px; padding:3px 25px; color:#333} .header #menu-main > li.current-menu-item > a,.header [class*='-ancestor'] > a {color: #4885ff !important; } .header .sub-menu > li.current-menu-item > a {font-weight: bold !important; color: #4885ff !important; background: #f8f8f8 !important} /*.header #menu-main li.new_page a::before { content: 'N'; display: inline-block; height: 14px; padding: 0 2.5px; margin-left: 3px; margin-top: 3.5px; background: #f44336; line-height: 14px; color: #fff; vertical-align: top; text-align: center; font-size: 11px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; }*/ .header #menu-main li.star,.header #menu-main li.new{position: relative;} .header #menu-main li.star a::before {content: ''; display: block; position: absolute; top: 10px; left: -4px; width: 24px; height: 24px; background-image: url('/wp-content/uploads/image/common/icon-star.png');} .header #menu-main li.new a::before{content: 'N'; display: block; position: absolute; top: 10px; left: 2px; color: red; font-size: 17px;} .header #gnbWrap + .gnb_btns{ margin-left:20px; padding-top:16px; line-height:1} .header #gnbWrap + .gnb_btns .btns_wrap a{line-height:1; padding:10px 12px; border:none;font-size: 16px;} .header #gnbWrap + .gnb_btns .btns_wrap a.link_remotepc{border-bottom: 1px solid #4885ff; padding: 0;} .header #gnbWrap + .gnb_btns .btns_wrap a.link_remotepc:hover{border-color: #2856B3 !important; color: #2856B3 !important;} .header #gnbWrap + .gnb_btns .btns_wrap .bg_blue:hover{background-color: #2856B3 !important; } .header #gnbWrap + .gnb_btns .login_wrap{ position: absolute; right: 40px; height: 64px; top: 0; padding: 14px 0;} .header #gnbWrap + .gnb_btns .login_wrap .link_login{ min-width: 80px; line-height: 1; padding: 8px 16px 9px 16px; border-radius: 20px;border: solid 1.5px #4885ff; text-align: center;color: #4885ff; margin-left: 16px;} .header #gnbWrap + .gnb_btns .login_wrap .link_login:hover{color: #fff; background-color: #4885ff; box-shadow: none;} .header .info_wrap, .header .mobile_wrap{display:none} .header #mobileMenu{position:relative; width:40px; height:40px} .header #mobileMenu i{position:absolute; left:50%; display:block; width:26px; height:3px; margin-left:-10.5px; background-color:#a6aabb; transform-origin:center; transition:all 0.3s ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; -ms-transition:all 0.3s ; -o-transition:all 0.3s} .header #mobileMenu i:first-of-type{top:10px} .header #mobileMenu i:first-of-type + i{top:18px} .header #mobileMenu i:last-of-type{top:26px} .header.is_scroll{overflow:visible; position:fixed; top:0; left:0; z-index:20; width:100%; border-bottom:1px solid #edeeee; background-color:rgba(255,255,255,0.9)} /*.header.is_scroll:not(.active) .gnb+.gnb_btns .btns_wrap a{background-color:#53585a}*/ .is_mobile .header.is_scroll{background-color:#fff} /* .header.active #mobileMenu i:first-of-type{transform:translate(0px, 8px) rotate(45deg); -webkit-transform:translate(0px, 8px) rotate(45deg); -moz-transform:translate(0px, 8px) rotate(45deg); -ms-transform:translate(0px, 8px) rotate(45deg); -o-transform:translate(0px, 8px) rotate(45deg)} .header.active #mobileMenu i:first-of-type + i{opacity:0} .header.active #mobileMenu i:last-of-type{transform:translate(0px, -8px) rotate(-45deg); -webkit-transform:translate(0px, -8px) rotate(-45deg); -moz-transform:translate(0px, -8px) rotate(-45deg); -ms-transform:translate(0px, -8px) rotate(-45deg); -o-transform:translate(0px, -8px) rotate(-45deg)} */ .header.active #mobileMenu i{background-color: #4885ff;} :lang(ja) .header #menu-main li.new_page a:after {line-height: 15px;} /* 메뉴 리뉴얼 */ .header #menu-main > li.has-depth1:hover > .sub-menu {display: flex;} .header #menu-main > li.has-depth1 > .sub-menu {width: auto; gap: 30px; padding: 20px 30px 30px 20px; box-shadow: 2px 3px 6px 0px #0000004D;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 {width: 186px;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > a.rv-menu-item {font-size: 17px; font-weight:600; line-height: 24px; color: #646775; padding: 0 0 5px 0; margin-bottom: 10px; border-bottom: 0.5px solid #000;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu {padding-bottom: 0;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.has-depth3 > a {font-size: 14px; font-weight: 600; line-height: 24px; padding: 0; color:#646775;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.has-depth3 > a:hover {color:#54A4FF;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.has-depth3 > a:hover::after {color:#54A4FF;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li + li {margin-top: 15px;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.has-depth3 > a::after { white-space: pre-line; font-size: 14px; line-height: 20px; letter-spacing: -1px; color:#646775; } .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.current-menu-item > a {color:#54A4FF !important; background: none !important;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.current-menu-item > a:hover {color:#54A4FF;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.current-menu-item > a::after {color:#54A4FF !important;} .header #menu-main > li.has-depth1 > .sub-menu > li.current-menu-item > a.rv-menu-item {color: #646775 !important;} .header #menu-main > li.has-depth1 > .sub-menu > [class*='-ancestor'] > a {color: #646775 !important;} /* footer */ #footerMenu{overflow:hidden; padding-top:40px; padding-bottom:40px; background-color:#fbfbfb} footer{padding:18px 0 0; background-color:#2C2C2C; color:#cecece} footer a{color:inherit} footer .container{position:relative} footer .container > div{overflow:hidden} footer .lang_wrap{position:absolute; top:0; right:15px; color:inherit; font-size:0} footer .lang_wrap > span{display:inline-block; margin-right:13px; font-size:14px} footer .select_lang_wrap{position:relative; display:inline-block; width:187px} footer .select_lang_wrap.active button {background-color:rgba(0,0,0,1)} footer .select_lang_wrap button{width:100%; padding:7px 24px 7px 11px; border-radius:2px; background:rgba(81, 81, 81, 0.25) url(/wp-content/uploads/image/common/icon_footer_arrow.png) no-repeat center right; text-align:left; -webkit-border-radius:2px; -moz-border-radius:2px; -ms-border-radius:2px; -o-border-radius:2px; font-size:14px; line-height:1; letter-spacing:0.05rem; color:#fff} footer .select_lang_wrap ul{display:none; position:absolute; left:0; bottom:28px; width:100%; font-size:12px; background-color:#000} footer .select_lang_wrap ul li{padding:0 11px; margin:2px 0} footer .select_lang_wrap ul li a{display:block; padding:7px 0; font-size:12px; line-height:1} footer .select_lang_wrap ul li + li a{border-top:1px dotted #444} footer .select_lang_wrap ul li.ko:lang(ko), footer .select_lang_wrap ul li.ja:lang(ja), footer .select_lang_wrap ul li.en:lang(en), footer .select_lang_wrap ul li.zh-cn:lang(zh-cn){display: none;} footer .select_lang_wrap.active ul{display:block} footer .sns_wrap{display: inline-block;} footer .sns_wrap a {float:left; width:28px; height:28px; text-align:center; font-size:15px; line-height:25px; opacity:0.55; background:rgba(81, 81, 81); background-image:url(/wp-content/uploads/image/common/icon_spr_sns.svg); background-position:0 center; background-repeat:no-repeat; background-size:auto 27px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} footer .sns_wrap a.tw {background-position:-30px center} footer .sns_wrap a.yt {background-position:-62px center} footer .sns_wrap a.blog {background-position:-93px center} footer .sns_wrap a + a{margin-left:8px} footer .download_wrap{float:right; width:187px; margin-top: 36px; padding:10px; color:#fff; background:rgba(94, 96, 101, 0.7); font-size:14px; line-height:16px; letter-spacing:-0.02em; color:rgba(255, 255, 255, 0.65)} :lang(ko) footer .download_wrap{margin-top:0;} footer .download_wrap > p{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.35); font-weight:bold; font-size:16px; line-height:24px; letter-spacing:0.05em; color:rgba(255, 255, 255, 0.8); text-align:center} footer .download_wrap ul > li + li{margin-top:6px} footer .download_wrap ul > li > ul{font-size:0; padding-left:8px} footer .download_wrap ul > li > ul > li{display:inline-block; font-size:14px; margin-top:4px} footer .download_wrap ul > li > ul > li + li:before{content:'/ '; margin-left:3px} footer .download_wrap > ul > li:before{ content:'- '} footer .download_wrap ul > li a:hover{color:#fff} footer .copyright_wrap{padding:17px 0; margin-top:22px; background-color:#262626; font-size:14px; line-height:1.07; color:#B3B3B3} footer .copyright_wrap p{letter-spacing:-0.02em} footer .agreement_menu_wrap {float:right; font-size:0} footer .agreement_menu_wrap li{display:inline-block; padding:0; margin:0} footer .agreement_menu_wrap li a{position:relative; display:inline-block; font-size:14px; line-height:1; font-size:14px; line-height:1.07; letter-spacing:-0.02em; color:#B3B3B3} footer .agreement_menu_wrap li.bold a {color:#1da1df; font-weight:bold} footer .agreement_menu_wrap li + li a{padding-left:11px; margin-left:11px} footer .agreement_menu_wrap li+li a:before {content:''; position:absolute; top:0; left:0; display:block; width:1px; height:100%; background-color:#B3B3B3} footer .trademark_desc{margin-top:8px; font-size:12px; line-height:1.33; letter-spacing:-0.02em; color:#8B8B8B} footer .crop_info_wrap{margin-top:10px; font-size:14px; line-height:1.71; letter-spacing:-0.02em; color:#8B8B8B} .no_anchor > a {cursor:default} /* 닌자폼 공통 스타일 적용 */ #contentsWrap .nf-error.field-wrap .nf-field-element:after { display: none;} /* sub menu */ #footerMenu .menu a{display:block} #footerMenu .menu > li{float:left; width:calc(16.666% - 6px)} #footerMenu .menu > li + li{margin-left:6px} #footerMenu .menu > li:nth-of-type(5){padding-left:20px} #footerMenu .menu > li > a {margin-bottom:12px; font-weight:bolder; font-size:16px; line-height:1.5; letter-spacing:-0.01em; color:rgba(0, 0, 0, 0.55)} #footerMenu .menu > li > .sub-menu a {font-size:14px; line-height:1.14; letter-spacing:-0.02em; color:rgba(0, 0, 0, 0.75)} #footerMenu .menu > li > .sub-menu li + li{margin-top:13px} #footerMenu .menu > li > .sub-menu > li + li {margin-top:20px} #footerMenu .menu > li > .sub-menu > li > .sub-menu {margin-top:12px} #footerMenu .menu > li > .sub-menu > li > .sub-menu > li {padding-left:6.5px} #footerMenu .menu > li > .sub-menu > li > .sub-menu > li a:before{content:'- '} #footerMenu .menu a[aria-current="page"] {color:#4179ce !important; font-weight:bold !important} /* content Common */ #pageTitWrap{ border-top:1px solid #e0e3e6; border-bottom:1px solid #e0e3e6} #pageTitWrap h2{display:inline-block; max-width:50%; padding:15px 0; font-size:18px; font-weight:normal; color:#252525; line-height:1.25} #pageTitWrap .breadcrumb_wrap{padding:15px 0;margin-left: auto;} #pageTitWrap .container{width: 100%; max-width: 1920px; padding: 0 40px; display: flex; align-items: center;} .is_mobile #floatingBtnWrap{display: none;} #floatingBtnWrap{position: fixed; bottom: 6rem; right: 2rem; border-radius: 10px; z-index: 10; } #floatingBtnWrap a{display: block; padding: 13px 24px; width: 156px; border-radius: 28px; background-color: #fff; border:1px solid;} #floatingBtnWrap a + a{margin-top: 10px;} #floatingBtnWrap a .btn-tit {padding-left: 34px; line-height: 30px; text-align: center; background-position: left center; background-size: 28px 30px; background-repeat: no-repeat;} #floatingBtnWrap a.chatbot {border-color: #7288fb;} #floatingBtnWrap a.startRv {border-color: #4885ff;} #floatingBtnWrap a.virtual {border-color: #273b63;} #floatingBtnWrap a.chatbot:hover{background-color: #7288fb;} #floatingBtnWrap a.chatbot.active {background-color: #444f5d;border-color: #444f5d;} #floatingBtnWrap a.startRv:hover {background-color: #4885ff;} #floatingBtnWrap a.virtual:hover {background-color: #273b63;} #floatingBtnWrap a:hover p, #floatingBtnWrap a.active p {color: #fff !important;} #floatingBtnWrap a.chatbot p {background-image: url(/wp-content/uploads/image/common/chatbot-line-icon.png); color: #7288fb;} #floatingBtnWrap a.chatbot:hover p{background-image: url(/wp-content/uploads/image/common/chatbot-hover-icon.png); } #floatingBtnWrap a.active.chatbot p {background-image: url(/wp-content/uploads/image/common/close.png); background-size: 16px;} #floatingBtnWrap a.startRv p {background-image: url(/wp-content/uploads/image/common/tutorial-line-icon.png); color: #4885ff;} #floatingBtnWrap a.startRv:hover p{background-image: url(/wp-content/uploads/image/common/tutorial-hover-icon.png);} #floatingBtnWrap a.virtual p{background-image: url(/wp-content/uploads/image/common/virtual-line-icon.png); color: #273b63;} #floatingBtnWrap a.virtual:hover p{background-image: url(/wp-content/uploads/image/common/virtual-hover-icon.png);} .chatbot-chat-room{bottom: 19rem !important;} .chatbot-close-button{bottom: 14rem !important; display: none !important;} .chatbot-open-button{bottom: 14rem !important; display: none !important;} @media (max-height: 900px){ .chatbot-chat-room{bottom: 6rem !important; right: 13rem !important;} } /* hero_wrap */ .hero_wrap{position:relative; overflow:hidden; width:100%; min-height:430px; background-color:#f5f5f5} .hero_wrap>.container{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transform:translate(-50%, -50%)} .hero_wrap.h350{min-height:350px} .hero_wrap.no_bg{background-color:#fff} .hero_wrap.w_bg{background-position:center; background-repeat:no-repeat; background-size:cover} .hero_wrap.w_bg:before{content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6)} .hero_wrap.w_bg *{color:#fff} .hero_wrap .tit1{margin-bottom:40px} /* license_sec_wrap */ .license_sec_wrap{border-top:1px solid #e1e1e1; text-align:center} .license_sec_wrap p{margin-bottom:10px} .license_sec_wrap p span{display:block} .license_sec_wrap .list_dot{display:inline-block; text-align:left; font-size:17px; line-height:1.58} .license_sec_wrap .list_dot li{margin-top:10px} .license_sec_wrap [class*="btn_"][class*="size_"]{width:250px} .license_sec_wrap .box_btn_wrap [class^="btn_"]+[class^="btn_"]{margin-left:15px} /* relative_sec_wrap */ .relative_sec_wrap{overflow:hidden; margin-top:80px; padding-top:60px; padding-bottom:60px} .relative_sec_wrap .tit_sub2{position:relative; text-align:center} .relative_sec_wrap .list_relative{overflow:hidden} .relative_sec_wrap .list_relative li{float:left; width:calc(25% - 10px); max-width:240px; margin-right:10px} .relative_sec_wrap .list_relative li.empty{float:none; width:100%; height:150px; margin-right:0; text-align:center; font-size:14px; line-height:150px} .relative_sec_wrap .list_relative_wrap{width:calc(100% + 80px); margin-left:-40px} .relative_sec_wrap .list_relative_wrap{position:relative; padding:0 40px} .relative_sec_wrap .list_relative:not(.slick-slider){ display:flex; justify-content:center} .relative_sec_wrap .btn_slide_arrow{width:30px; height:30px; transform:translate(0, -50%); background-size:60px; -webkit-transform:translate(0, -50%); -moz-transform:translate(0, -50%); -ms-transform:translate(0, -50%); -o-transform:translate(0, -50%)} .relative_sec_wrap .btn_slide_arrow.prev{left:0; background-position:0 0} .relative_sec_wrap .btn_slide_arrow.next{right:0; background-position:-30px 0} .relative_sec_wrap .btn_slide_arrow.prev:hover{background-position:0 -30px !important} .relative_sec_wrap .btn_slide_arrow.next:hover{background-position:-30px -30px !important} .relative_sec_wrap.disable .list_relative_wrap {padding:0} .relative_sec_wrap.disable .btn_slide_arrow{display:none} /* mail wrap */ .mail_wrap > p{margin-bottom:10px; font-size:14px; color:#BCBCBC} .mail_wrap > div{display:flex; flex-wrap:wrap; justify-content:center; margin-left:auto; margin-right:auto; font-size:0} .mail_wrap [class*='mail-']{ overflow:hidden; position:relative; display:inline-block; width:50px; height:50px; background:#F6F6F6; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; -webkit-border-radius:50%} .mail_wrap [class*='mail-'] img{display:inline-block; width:30px; margin-top:10px} .mail_wrap [class*='mail-'] + [class*='mail-']{ margin-left:5px} .mail_wrap .mail-naver{ background:#1ec800} .mail_wrap .mail-naver img{width:40px; margin-top:5px} .mail_wrap .mail-outlook{background:#D9E8F5} .mail_wrap .mail-daum img{ margin-left:3px} .mail_wrap .mail-163{background-color: #e10000;} /*------------------------------------------------------------------- @ Sub Layout -------------------------------------------------------------------*/ /* type_renewal */ .type_renewal {font-size:18px} .type_renewal .tit2{font-size:36px; line-height:1.5; letter-spacing:-.75px; color:#252525} .type_renewal .tit_num{margin-top:100px; color:#333} .type_renewal .tit_num span{display:block; font-size:32px; font-weight:bold; line-height:1.5; letter-spacing:-.67px; text-align:center} .type_renewal .tit_num .num {margin-bottom:2px; font-size:28px; font-weight:bolder; line-height:1.29; letter-spacing:-.58px; color:#4885FF} .type_renewal .box_wrap{margin:30px 0; padding:40px 60px 50px; text-align:center} .type_renewal .box_tit{margin-bottom:40px; font-size:24px; line-height:1.7; color:#333; letter-spacing:-.5px} .type_renewal .embed_wrap{padding-bottom:56.25%} .type_renewal .division_wrap{overflow:hidden} .type_renewal .division_wrap > div{float:left} .con01 .btns_wrap, .con05 .btns_wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items: baseline; counter-reset: num 0} .con01 .btns_wrap button,.con05 .btns_wrap button{ flex: 1; font-size: 16px; line-height: 1.38; letter-spacing: -0.2px; color:#fff; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; opacity: 0.5; } .con01 .btns_wrap button .deco{ display: block; width: 100%; background-repeat: no-repeat; background-position: center; background-size: auto 100%; } .con01 .btns_wrap button:hover{opacity: 1;} /* 00_main 별도 css 관리 */ /* 01_overview */ .page_overview .bg_f1f3ff{background-color: #f1f3ff;} .page_overview .bg_a3c2ff {background-color: #a3c2ff;} .page_overview .bg_7288fb {background-color: #7288fb; color: #fff;} .page_overview .bg_273b63{background-color: #273b63; color: #fff;} .page_overview .tit2{font-size: 36px; margin-bottom: 15px; text-align: center; font-weight: bold !important;} .page_overview .tit2 .blue{color: #fff; background-color: #4885ff;} .page_overview .tit3{font-size: 22px;} .page_overview .sub-info{margin-bottom: 60px; font-size: 24px;text-align: center; } .page_overview .w_bg{background-color: #fff;} .page_overview .w_bg .tit1{ font-size:43px; font-weight: bold;} .page_overview .w_bg .tit_sub2{font-size: 24px; margin-top: 15px;} .page_overview .btn_pill{font-size: 24px; padding: 20px 70px;border-radius: 40px; margin-left: auto; margin-right: auto; } .page_overview .w_bg .btn_solid{ border-radius: 4px;} .page_overview .w_bg .flex_wrap > [class^='flex'] + [class^='flex']{margin-left: 10px;} .page_overview .info{color: #a6aabb; font-size: 18px;} .page_overview .con01 .tit-logo{max-width: 430px; margin:0 auto 24px auto ; } .page_overview .con01 img{max-width:100%;display: block;} .page_overview .con01 .col-xs-3{padding-right: 10px; padding-left: 10px;} .page_overview .con01 .col-xs-3 .box{ border-radius: 4px; box-shadow: 4px 4px 10px 0 rgba(39, 59, 99, 0.1); background-color: #fff; height: 300px;} .page_overview .con01 .col-xs-3 .box p{font-size: 20px; font-weight: bold;} .page_overview .con02 .logo-silde{display: flex; margin-top: 5px;} .page_overview .con02 img{width: calc(25% - 15px); display: block; padding: 5px 0;} .page_overview .con02 img + img{margin-left: 20px;} .page_overview .con02 .slick-arrow{display: none !important;} .page_overview .con03 .box{ background-color: #fff; padding: 70px 110px;} .page_overview .con03 .gr_list_wrap ul li {display: flex; width: 100%; height: 100px;} .page_overview .con03 .gr_list_wrap ul li .tit{display: flex; height: 100%; width: 22%; max-width: 488px; background-color: #f0f5ff; position: relative; font-size: 24px; font-weight: bold;} .page_overview .con03 .gr_list_wrap ul li .tit::after{content: '';display: block; position: absolute; top: 0; right: -40px; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 20px solid #f0f5ff; border-right: 20px solid transparent;} .page_overview .con03 .gr_list_wrap ul li:nth-child(2n) .tit{background-color: #ecf7f4;} .page_overview .con03 .gr_list_wrap ul li .cont {display: flex; height: 100%; width: 83%; max-width:765px; background-image: linear-gradient(98deg, #1cb5e0, #383896); color: #fff; font-size: 20px; text-align: left;} .page_overview .con03 .gr_list_wrap ul li .cont p{ margin-left: 46px;} .page_overview .con03 .gr_list_wrap ul li:nth-child(2n) .cont{ background-image: linear-gradient(98deg, #0cae77, #0067b3 99%);} .page_overview .con03 .gr_list_wrap ul li p{margin: auto 10px auto 35px; text-align: left;} .page_overview .con04 {text-align: center;} .page_overview .con04 .col-xs-12 h3{font-size: 24px; margin-bottom: 15px; text-align: left;} .page_overview .con04 .col-xs-4 .box{border-radius: 4px; box-shadow: 4px 4px 10px 0 rgba(39, 59, 99, 0.1); background-color: #fff; color: #232429; text-align: center;} .page_overview .con04 .col-xs-4 img{width: 100%;display: block;} .page_overview .con04 .col-xs-4 .box h4{ font-size: 20px; margin-bottom: 8px; font-weight: bold; margin-top: 16px; padding:0 16px} .page_overview .con04 .col-xs-4 .box p {font-size: 18px; padding:0 16px 16px;} .page_overview .con05{text-align: center;} .page_overview .con05 img{width: 100%; display: block;} .page_overview .con05 .grp-box {padding: 25px 40px 25px 14px; border-radius: 4px; box-shadow: 4px 4px 10px 0 rgba(39, 59, 99, 0.1); background-color: #fff;} .page_overview .con05 .grp-box .grp{} .page_overview .con05 .grp-box .hyundai{ max-width: 326px; margin: 40px auto 60px;} .page_overview .con05 .grp-box .quotes{ padding: 45px 0; position: relative; display: inline-block; font-size: 20px;} .page_overview .con05 .grp-box .quotes::after,.page_overview .con05 .grp-box .col-xs-7 .quotes::before{content: '';width: 55px; height: 34px; display: block; position: absolute; background-size: cover;} .page_overview .con05 .grp-box .quotes::before{background-image:url(/wp-content/uploads/sites/2/image/sub/rv-quotes1.png); top: 0; left: 0; } .page_overview .con05 .grp-box .quotes::after{background-image:url(/wp-content/uploads/sites/2/image/sub/rv-quotes2.png); bottom: 6px; right: 0; } .page_overview .con06 .sub-info{ font-size: 26px; margin-bottom: 0;} .page_overview .con07{text-align: center;} .page_overview .con07 .tit2{margin-bottom: 80px;} .page_overview .con07 img{width: 100%;display: block;} .page_overview .con07 .box{border-radius: 4px; box-shadow: 4px 4px 10px 0 rgba(39, 59, 99, 0.1);} .page_overview .con07 .box h4{font-size: 20px; padding: 22px; font-weight: bold;} .page_overview .con07 .col-xs-4 + .col-xs-4 + .col-xs-4 + .col-xs-4{margin-top: 20px;} /* 01_features */ .page_features .hero_wrap.w_bg{background-image:url(/wp-content/uploads/image/sub/bg_feature.jpg); background-position:bottom center} .page_features .new-func .card_item .thumb:before {content:''; position:absolute; z-index:1; display:block; width:90px; height:57px; background:url(/wp-content/uploads/image/sub/icon_new.png) no-repeat; background-size:100%} .page_features .card_item .info_wrap .tit{height:auto; text-overflow:initial; white-space:normal } .page_features .card_item .info_wrap .desc{display:block; max-height:none; -webkit-line-clamp:initial; -webkit-box-orient:initial} /* 01_ management */ .page_management .hero_wrap.w_bg{background-image:url(/wp-content/uploads/sites/2/image/sub/bg_management.jpg);} .page_management [class*='con0'] h2{ font-size: 26px; font-weight: 500; letter-spacing: -0.33px; line-height: 1.45; color: #2c2c2c;} .page_management [class*='con0'] h2 + p { min-height: 130px; line-height: 1.45;} .page_management [class*='con0'] h3{ font-size: 26px; font-weight: 500; letter-spacing: -0.33px; line-height: 1.45; color: #2c2c2c;} .page_management [class*='con0'] h3 + p { min-height: 130px; line-height: 1.45;} .page_management [class*='con0'] a.btn_solid { max-width: 386px; font-size: 20px; line-height: 1.55; padding-top: 9px; padding-bottom: 10px;} .page_management [class*='-push-'] { text-align: right;} .page_management .con01{background-color: #273B63; color:#fff;} .page_management .con01 h2{margin-bottom: 17px; font-size: 30px; font-weight: bold; line-height: 1.8; letter-spacing: -0.38px; color: #fff;} .page_management .con01 .btns_wrap button .deco{ height: 52px; margin-bottom: 8px; } .page_management .con01 .btns_wrap button[data-target="group"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon_management_group_active.png); } .page_management .con01 .btns_wrap button[data-target="register"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon_management_register_active.png); } .page_management .con01 .btns_wrap button[data-target="auth"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon_management_auth_active.png); } .page_management .con01 .btns_wrap button[data-target="limit"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon_management_limit_active.png); } .page_management .con01 .btns_wrap button[data-target="alarm"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon_management_alarm_active.png); } .page_management .con01 .btns_wrap button[data-target="time"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon_management_time_active.png); } .page_management .con05 a.btn_solid {flex:1; max-width:calc(33.34% - 4px); line-height: 1.22;} .page_management .con06 a.btn_solid {min-width: 402px;} /* 01_webviewer */ .page_wv{color:#30343c} .page_wv .hero_wrap{min-height:430px; background-image:url(/wp-content/uploads/image/sub/bg_webviewer2208.jpg)} .page_wv .hero_wrap .tit1{text-shadow:0 0 20px rgb(0 0 0 / 80%)} .page_wv .hero_wrap .tit1 span{display:block; font-size:21px; font-weight:lighter; text-shadow:none} .page_wv .hero_wrap ul{overflow:hidden; display:inline-block} .page_wv .hero_wrap ul li{float:left; min-width:80px; margin:0 3px} .page_wv [class*="con0"]:not(.con01) .tit2{margin-bottom:5px} .page_wv [class*="con0"]:not(.con01) .tit2 + p{font-size:18px} .page_wv .embed_wrap{padding-bottom:52.25%} .page_wv .con01{background-color:#f6f7f9; font-size:18px} .page_wv .con01 .tit_sub1{margin-top:70px} .page_wv .con02 .list_icon{overflow:hidden; display:inline-block} .page_wv .con02 .list_icon li{float:left; width:33.334%; min-width:150px; text-align:center} .page_wv .con02 .list_icon li:before{content:''; display:block; width:62px; height:62px; margin:0 auto 5px; background-image:url(/wp-content/uploads/image/sub/img_webviewer04.png); background-repeat:no-repeat} .page_wv .con02 .list_icon li.icon01:before{background-position:0 -62px} .page_wv .con02 .list_icon li.icon02:before{background-position:-62px 0} .page_wv .con03{background:rgb(248, 247, 248); background:linear-gradient(0deg, rgba(248, 247, 248, 1) 0%, rgba(246, 247, 249, 1) 100%)} .page_wv .con03 .desc_wrap .col-md-6 + .col-md-6 p{padding:0 10.26%; border-left:1px solid #d8dbe1} .page_wv .con03 .box_wrap.info{background-color:#FFF2EC} .page_wv .con03 .box_wrap.info:before{background-color:#FF8548} .page_wv .con03 .box_wrap.info p{margin:10px 0} .page_wv .con04{background-color:#525d71; color:#fff} .page_wv .con04 p{padding-top:5px; font-size:24px; font-weight:bold} .page_wv .con05{padding:85px 0 150px; background:rgb(248, 247, 248); background:linear-gradient(0deg, rgba(252, 248, 245, 1) 0%, rgba(248, 247, 248, 1) 100%)} .page_wv .con05 .box_wrap{padding:50px 44px 55px} .page_wv .con05 .box_wrap > p:not(.desc){font-size:24px; font-weight:bold; line-height:1; margin:17px 0 30px} .page_wv .con05 .desc{margin-bottom:2px; font-size:14px} .page_wv .con05 .tb_wrap{margin-bottom:10px} .page_wv .con05 .tb_wrap .bg_fbfdff{background-color:#fbfdff} .page_wv .con05 .tb_wrap table{table-layout:fixed; width:100%; min-width:500px; font-size:16px} .page_wv .con05 .tb_wrap table th, .page_wv .con05 .tb_wrap table td{border-bottom:1px solid #777777; background-color:#fff} .page_wv .con05 .tb_wrap table thead th{padding:19px 0; text-align:center; font-weight:bold; line-height:1} .page_wv .con05 .tb_wrap table thead th+th, .page_wv .con05 .tb_wrap table td+td{border-left:1px solid #777777} .page_wv .con05 .tb_wrap table td{padding:15px 0; line-height:1.7; vertical-align: middle} .page_wv .con05 .box_wrap + .text-center .tit2{margin-bottom:20px} .page_wv .con06{color:#1da1df; background:rgb(238, 237, 241); background:linear-gradient(90deg, rgba(238, 237, 241, 1) 0%, rgba(244, 237, 232, 1) 100%)} .page_wv .con06 p{padding-top:5px; font-size:24px; font-weight:bold} /* 01_lock */ .page_lock img{max-width:100%;height:auto;} .page_lock hr{border-color:#d7dae0} .page_lock .label{display:inline-block; min-width:60px; font-size:18px; font-weight:bold; line-height:1; border-radius:14px; -webkit-border-radius:14px; -moz-border-radius:14px; -ms-border-radius:14px; -o-border-radius:14px; color:#fff} .page_lock .hero_wrap:before{display:none} .page_lock .con01 p img{vertical-align:middle} .page_lock .con01 dt{font-size:18px; color:#363636} .page_lock .con01 dd{font-size:16px; color:#666666} .page_lock .con02 dl{font-size:18px; color:#666666} .page_lock .con02 dl + dl{margin-top:20px} .page_lock .con02 dl dt{font-weight:bold} .page_lock .con02 .list_diagram{overflow:hidden; position:relative; display:flex; justify-content:space-between; } .page_lock .con02 .list_diagram:before{content:''; position:absolute; top:50%; left:0; width:100%; height:1px; border-top:2px dashed #4885FF} .page_lock .con02 .list_diagram li{float:left; position:relative; z-index:1; overflow:hidden; display:flex; align-items:center; justify-content:center; width:180px; height:180px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; font-size:18px; font-weight:bold; line-height:1.33; text-align:center; color:#4885FF; border:solid 2px #4885FF; background-color:#fff} .page_lock .con02 .list_diagram li.bg_blue{font-size:20px; background-color:#4885FF; color:#fff} .page_lock .con02 .list_diagram li:last-child{width:192px; border:none; border-radius:0; background:none; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0} .page_lock .con02 .list_diagram li:last-child img{vertical-align:middle} .page_lock .con02 .list_diagram li img{width:100%; height:auto} .page_lock .con02 .list_diagram.exp{margin-top:50px} .page_lock .con02 .list_diagram.exp li{height:144px} .page_lock .con02 .list_diagram.exp li:not(:last-child){width:144px} .page_lock .con02 .box_wrap{background-color:#fbfbfb; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0; padding:30px 0 10px} .page_lock .con03 table{width:100%; min-width:640px} .page_lock .con03 table th, .page_lock .con03 table td{text-align:center; font-size:18px} .page_lock .con03 table tr th, .page_lock .con03 table tr td:not(:last-child){border-right:1px solid #979797} .page_lock .con03 table th{font-weight:bold; color:#666} .page_lock .con03 table thead th{padding: 0 12px 3px; vertical-align:bottom;} .page_lock .con03 table thead th:last-child{border:none} .page_lock .con03 table tbody th, .page_lock .con03 table tbody td{padding:12px 3px} .page_lock .con03 table tbody tr{border-top:1px solid #979797} .page_lock .con03 table tbody tr:nth-child(even){background-color:#fff} .page_lock .con03 table .label{margin-right:8px} .page_lock .con04{color:#33373e} .page_lock .con04 .tit2{margin-bottom:32px} .page_lock .con04 .tit_sub1{line-height:1} .page_lock .con04 .tit_sub1 span{display:block; margin-bottom:6px; font-size:20px; font-weight:bold; line-height:1.3; letter-spacing:-.8px; color:#4885FF} .page_lock figcaption{margin-top:20px; font-size:18px; color:#666} .page_lock figcaption strong{display:block; margin-bottom:8px; line-height:1.56; letter-spacing:-1.2px} /* 01_mobile */ .page_mobile { padding-bottom:0} .page_mobile [class^="slider"] li { text-align:center} .page_mobile [class^="slider"] p { margin-bottom:20px} .page_mobile [class^="slider"] p.tit_sub1 { margin-bottom:5px} .page_mobile [class^="slider"] img { max-width:100%; margin:0 auto} .page_mobile [class~="con"] { padding-bottom:50px} .page_mobile .con2 { text-align:center} .page_mobile .con2 [class*='col-'] { margin-bottom:20px} .page_mobile .con2 .imgs { position:relative; display:block; margin-bottom:18px; background-color:#e6edff} .page_mobile .con2 .imgs button { position:absolute; top:50%; left:50%; display:block; width:60px; height:60px; background:url(/wp-content/uploads/image/common/btn_play.png) no-repeat center; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); transition:background 0.35s ease; -webkit-transition:background 0.35s ease; -moz-transition:background 0.35s ease; -ms-transition:background 0.35s ease; -o-transition:background 0.35s ease} .page_mobile .con2 dt { margin-bottom:12px; color:#1da1df} .page_mobile .con3 { text-align:center} .page_mobile .con4 ul { padding:0 20px; background-color:#f3f6fd} .page_mobile .con4 ul li { position:relative; padding:18px 20px 18px 64px; border-radius:8px; background-color:#fff; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px; letter-spacing:-1px} .page_mobile .con4 ul li + li { margin-top:8px} .page_mobile .con4 ul li:before { content:''; position:absolute; top:50%; left:20px; width:34px; height:34px; background:url(/wp-content/uploads/image/common/icon_circle_check.png); transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%)} .page_mobile .con7 dl + dl { margin-top:50px} .page_mobile .con7 dt { font-weight:bold} .page_mobile .con7 dt small { font-size:70%; font-weight:normal} .page_mobile .con7 dt>div { position:relative; height:313px; display:flex; flex-flow:column; justify-content:center; align-items:center; border-radius:50%; background:rgba(29, 161, 223, 0.07)} .page_mobile .con7 .row { min-height:570px; margin:0; padding:50px 10px; margin-top:10px; font-size:15px; text-align:left} .page_mobile .con8 a { display:inline-block} .page_mobile .con9 table { width:100%} .page_mobile .con9 table thead th { padding:10px 5px; font-size:13px; font-weight:normal; text-align:center; color:#1da1df} .page_mobile .con9 table thead th img { margin-bottom:10px} .page_mobile .con9 table tbody tr:nth-child(even) { background-color:#f3f6fd} .page_mobile .con9 table tbody td { padding:10px 5px 13px; text-align:center; vertical-align:top} .page_mobile .con9 table tbody td span.color_point1 { display:block} .page_mobile .con10 .tit_sub3 { margin-bottom:27px; font-weight:bold} .page_mobile .con10 .tit_sub3 + p { margin-bottom:20px} .page_mobile .con10 .tit_sub3 + p a { color:inherit; line-height:inherit} .page_mobile .con10 .img-wrap { margin-top:40px; margin-bottom:10px} .page_mobile .con10 .box_wrap { padding:22px 10px; color:#1da1df; background-color:#dfe6f7; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0; line-height:1.8} .page_mobile .con10 .box_wrap strong { font-weight:normal} .page_mobile .con1_exp .list_num_exp{ counter-reset:num 0} .page_mobile .con1_exp .list_num_exp li{ position: relative; padding-left: 30px; } .page_mobile .con1_exp .list_num_exp li:before{ content: counter(num); counter-increment: num; position: absolute; top: 3px; left: 0; width: 23px; height: 23px; background-color: #f68635; color: #fff; text-align: center; line-height: 23px; font-weight: bold; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .page_mobile .con1_exp .box_wrap {padding: 30px;background-color: #f2f2f2;border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0;-o-border-radius: 0;} .page_mobile .con1_exp .box_wrap .list_check li:before{height:100%;} .page_mobile .con1_exp .box_wrap .list_check li+li{margin-top:0;} .page_mobile .box_icon_wrap dl { overflow: hidden; position: relative; width:100%; border: 1px solid #c1c1c1; background-color: #fff; border-radius: 30px; text-align: center; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-top-left-radius: 0; } .page_mobile .box_icon_wrap dt { margin-bottom: 7px; padding: 37px 7px 0; } .page_mobile .box_icon_wrap dt .category { position: absolute; top: 0; left: 0; padding: 5px 10px; font-size: 15px; background-color: #f0f0f0; } .page_mobile .box_icon_wrap dd { padding: 0 15px 37px; line-height: 1.7; } .page_mobile .box_icon_wrap dl.type_blue { border-color: #9cadd0; } .page_mobile .box_icon_wrap dl.type_blue .category { background-color: #F3FAFD; } .page_mobile .con_exp2 [class*='col-']{display:flex;align-items:center;} .page_mobile .con_exp2 [class*='col-'] p{padding-left: 20px;} .page_mobile .con_exp3 .box_wrap{padding: 30px;} .page_mobile .tit3 + p {font-size: 18px; color: #535353;} .page_mobile .con01 h3{font-size:20px;} .page_mobile .con01 .btns_wrap button{flex: 1 33.34%; margin-bottom: 10px; font-size:15px;} .page_mobile .con01 .btns_wrap button:before{margin-bottom: 10px; font-size:16px;} .page_mobile .con01 .btns_wrap button .deco{height:32px;} /* 20210928 모바일제어 */ .clearfix:after{content: '';display: block; clear: both;} .page_mobile .h_center{ display: flex; align-items: center; justify-content: center;} .page_mobile .hero_wrap .tit1{line-height: 1.35;letter-spacing: -1.29px;} .page_mobile .hero_wrap .tit_sub2{line-height: 1.59;letter-spacing: -1.1px;font-weight: 300; } .page_mobile .label{font-size: 23px;} .page_mobile .tit3{font-size:27px; font-weight:bold; line-height:37px; letter-spacing:-0.33px; margin-bottom:20px} .page_mobile .tit4{font-size: 20px; font-weight: 500; letter-spacing: -0.25px; font-weight: 500; line-height: 1.44; color: #2c2c2c;} .page_mobile [class^="col-sm-"] img{display: block; margin:auto;} .page_mobile .btn_solid{width: 386px; font-size: 17px;} .page_mobile [class^="col-"] .btn_solid + .btn_solid{margin-left: 16px;} .page_mobile .hero_wrap.w_bg {background-image: url('/wp-content/uploads/sites/2/image/sub/img_product_mobile_bg.png');} .page_mobile .col-lg-12 {text-align: center;} .page_mobile .tit3 + p {font-size: 20px; color: #535353; letter-spacing: normal; line-height: 26px;} .page_mobile .col-lg-12 .label.line_navy {margin: 0 auto 12px;display: inline-block; padding: 0 12px; background-color: #fff; border: 1px solid; font-size: 20px; width: 238px; line-height: 28px; height: 28px; letter-spacing: -0.25px;} .page_mobile .hero_wrap.w_bg .btn_solid{ width: 292px; height: 50px; padding: 13px 10px;} .page_mobile .con01 {background-color: #273B63; color: #fff; } .page_mobile .con01 .container{padding-top: 0; padding-bottom: 0;} .page_mobile .con01 h3{font-size:20px;} .page_mobile .con01 .btns_wrap button:before{margin-bottom: 10px; font-size:16px;} .page_mobile .con01 .btns_wrap button .deco{height:32px;} .page_mobile .con01 .btns_wrap button{ line-height: 1; font-size: 30px; width: 500px; font-weight: bold; } .page_mobile .con01 .btns_wrap button em{font-size: 16px; display: block; margin: 0 auto; margin-bottom: 7px; line-height: 25px;} .page_mobile .con01 .btns_wrap button .deco{height: 86px; margin-top: 32px; } .page_mobile .con01 .btns_wrap button[data-target="mobile"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon-m-p-active.png); } .page_mobile .con01 .btns_wrap button[data-target="pc"] .deco{ background-image: url(/wp-content/uploads/sites/2/image/sub/icon-p-m-active.png); } .page_mobile [class^="cont"] {padding-top: 120px ; padding-bottom: 120px ;} .page_mobile .cont1 .col-sm-7{line-height: 0;} .page_mobile .cont1 .col-sm-6.desktop p { line-height: 23px;font-weight: 500;letter-spacing: -0.2px;color: #757575;} .page_mobile .cont1 .app_btn {display: inline-block;} .page_mobile .cont3 [class*='col-'] { margin-bottom: 0;} .page_mobile .cont3 [class*='col-'] {line-height: 1;} .page_mobile .col-lg-12.list > ul {overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 35px;} .page_mobile .col-lg-12.list > ul li {margin: 15px 7.5px 0; border: solid 1px #dedede;} .page_mobile .col-lg-12.list.col3 > ul li {flex: 1 calc(32.5% - 15px); flex-basis: calc(32.5% - 15px); max-width: 390px;} .page_mobile .col-lg-12.list.col2 > ul li {flex: 1 calc(49.5% - 15px); flex-basis: calc(49.5% - 15px); max-width: 584px; margin: 29px 7.5px 0;} .page_mobile .col-lg-12.list > ul li dl{padding: 15px;} .page_mobile .col-lg-12.list > ul li dt{font-size: 20px; margin-bottom:1px ;font-weight: 500;line-height: 30px;letter-spacing: -0.38px;} .page_mobile .col-lg-12.list > ul li dd{font-size: 18px; margin-top: 18px; margin-bottom: 5px; line-height: 1.22; letter-spacing: -0.23px; color: #535353;} .page_mobile .spec_wrap{ display: inline-block; width: 284px; padding:12px 14px 7px 14px; border: solid 2px #fff; font-size: 16px;margin-top: 10px;} .page_mobile .spec_wrap + .spec_wrap {margin-left: 8px; width: 255px;} .page_mobile .spec_wrap .col-lg-12 {padding: 0;} .page_mobile .spec{display: flex; justify-content: center; align-items: center; padding: 0;} .page_mobile .spec + .spec{margin-left: 4px; width: 255px; } .page_mobile .spec .col-lg-3{padding: 0; width: 55px;} .page_mobile .spec .col-lg-9{padding: 0 0 0 10px;} .page_mobile .spec .col-lg-9 li{letter-spacing: -1.2px; text-align: left; color: #757575; line-height: 14px;} .page_mobile .spec .col-lg-9 li+li{margin-top: 7px;} .page_mobile .spec .col-lg-9 li .tit {margin-right: 7px; padding-right: 7px; display: inline-block; width: 59px; text-align: right; font-weight: 500; border-right: solid 1px #dedede; } .page_mobile .down{ width: 100%; margin: 14px 0 0; display: block; border-radius: 3px; background-color: #6e6e6e;} .page_mobile .down span {line-height: 22px; background-repeat: no-repeat; background-position: 52px 1px; color: #fff; font-size: 14px; padding-right: 12px;} .page_mobile .cont4 .icon_tit3{font-weight: normal; font-size: 26px; font-weight: 500; color: #737373; word-break: break-all;} .page_mobile .cont4 .icon_tit3 span {font-size: 16px;display: block; font-weight: 400;} .page_mobile .cont4 .h_center .col-sm-3 img{width: 180px;} .page_mobile .cont6 .col-sm-5{width: 450px; overflow: hidden;} .page_mobile .cont6 .col-sm-5 img{position: relative; left: 50%; margin-left: -210px; width: 420px;} .page_mobile .cont6 .col-sm-7{width: calc(100% - 460px); word-break: break-all; padding-right: 0;} .page_mobile .cont6 .tit4 + p {color: #535353; line-height: 1.44; letter-spacing: -0.2px; font-size: 18px;} .page_mobile .cont7{padding-top: 0;padding-bottom: 0;} .page_mobile .cont7 .row{display: block;position: relative;} .page_mobile .cont7 .row:before{content: '';display: block; position: absolute; top: 50%; right: 15px; width: 30px; height: 58px; background-image: url(/wp-content/uploads/sites/2/image/sub/icon_arrow.png); margin-top: -29px;} .page_mobile .cont7 .col-sm-3{width: 298px;padding-left: 0; height: 173px;} .page_mobile .cont7 .col-sm-3 img{height: 100%;position: relative; left: 50%; transform: translateX(-50%);} .page_mobile .cont7 .col-sm-9{padding: 30px 15px; color: #f2f2f2; position: relative;} .page_mobile .cont7 .col-sm-9 .info{font-size: 14px; } .page_mobile .cont7 .col-sm-9 h3{font-size: 24px; color: #fff; font-weight: 600; margin-top: 3px;} .page_mobile .cont7 .col-sm-9 h3 span{display: inline-block; margin-left: 19px; padding-left: 19px; font-weight: 400; position: relative;} .page_mobile .cont7 .col-sm-9 h3 span:after{content: ''; position: absolute; left: 0; top: 9px; display: block; background-color: #e1e1e1; width: 1px; height: 22px;} .cont7 .col-sm-9 .info_txt {font-size: 18px; line-height: 1.4;} .bg_f6f7f9 .container{padding-top: 0; padding-bottom: 0;} .pagination_wrap{text-align:center; padding-bottom: 100px; display: flex;align-items: center;justify-content: center;} .pagination_wrap button{display: inline-block;box-sizing:border-box;width:34px;min-height:34px;height:auto;margin:0 3px;padding:0 8px;border:0; line-height:34px;border-radius:17px;background:#fff; color:#333;font-size:16px;font-weight:300;cursor:pointer;} .pagination_wrap button:hover, .pagination_wrap button:active{background-color:#e6eef8;color:#333;text-decoration:none} .pagination_wrap button.active{color:#2995fa} .pagination_wrap button.first:hover, .pagination_wrap button.last:hover{background:none;} .pagination_wrap button.first i, .pagination_wrap button.last i{font-size:16px;line-height:34px;} .icon_right_open:before{content: ''; top: 50%; right: 60px; display: block; border: 2px solid #555; border-right: none; border-top: none; width: 9px; height: 9px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg);} .icon_left_open:before{content: ''; top: 50%; right: 60px; display: block; border: 2px solid #555; border-right: none; border-top: none; width: 9px; height: 9px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .blind{ width: 0; height: 0; text-indent: -10000px; font-size: 0; line-height: 0; position: absolute; left: -99999px;} @media all and (min-width:1231px) { .page_mobile .hero_wrap .tit_sub2{height: 64px;} .page_mobile .con01 {height: 254px;} .page_mobile .cont1 .row.h_center{align-items: flex-end; margin-bottom: 6px;} .page_mobile .cont1 .col-sm-12.h_center {justify-content: right; width: auto; float: right;} .page_mobile .cont1 .col-sm-6.phone{width: 184px; margin-right: 22px; } .page_mobile .cont1 .col-sm-6 img{width: 100%;} .page_mobile .cont1 .col-sm-6.arrow {width: 232px; margin-right: 2px; padding-right: 0;} .page_mobile .cont1 .col-sm-6.desktop{width: 547px;} .page_mobile .cont1 .col-sm-7{margin-left: 88px;} .page_mobile .cont1 .col-sm-7 .app_btn + .app_btn {margin-left: 2px;} .page_mobile .cont1 .app_btn img{width: 121px;} .page_mobile .cont2 .col-lg-12, .page_mobile .cont2 .col-sm-12 {width: 1066px; margin-left: auto; margin-right: auto; float: none;} .page_mobile .col-lg-12.list.col3 > ul li dd{height: 78px;} .page_mobile .cont4 .h_center.mt60{align-items: flex-end;} .page_mobile .cont4 .h_center .col-sm-5{ width: 453px; margin-right: 13px;} .page_mobile .cont4 .h_center .col-sm-3{width: 210px;margin-top: auto; margin-bottom: auto; margin-right: 13px;} .page_mobile .cont4 .h_center .col-sm-4{width: 377px;} .page_mobile .cont4 .icon_tit3{line-height: 39px; letter-spacing: -0.33px;} .page_mobile .cont4 .icon_tit3 span {line-height: 24px;letter-spacing: -0.2px; } .page_mobile .col-lg-12.list.col2 > ul li{height: 383px;} .page_mobile .cont4 .col-lg-8.text-left .tit3{margin-bottom: 14px;} .page_mobile .cont4 .col-lg-8.text-left .tit3 + p{line-height: 1.44;} } /* 01_rv_appliance */ .page_rv_appliance .tit2 {margin-bottom: 30px; line-height: 1.45; font-weight:bold;} .page_rv_appliance dl {letter-spacing: normal;text-align: center;color: #333333;} .page_rv_appliance dl dt{font-size: 24px;font-weight: bold;line-height: 1.17;} .page_rv_appliance dl dd {margin-top: 10px;font-size: 16px;line-height: 1.25;} .page_rv_appliance img {vertical-align: middle;} .page_rv_appliance .hero_wrap.w_bg { background-image: url(/wp-content/uploads/sites/4/image/sub/bg_appliance.jpg);} .page_rv_appliance .hero_wrap .tit1{margin-bottom:30px; font-size:30px;} .page_rv_appliance .hero_wrap .tit1 strong{font-size:166%;font-weight:bold;} .page_rv_appliance .hero_wrap .btn_solid {min-width:214px;} .page_rv_appliance .con01 ul { display: flex; justify-content: space-between; position: relative; padding-top: 50px;} .page_rv_appliance .con01 ul:before{ content: ''; position: absolute; top: 0; left: 50%; display: block; width: 0; height: 0; border-style: solid; border-width: 12px 11.5px 0 11.5px; border-color: #1da2df transparent transparent transparent; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);} .page_rv_appliance .con01 ul li{ flex: 1; padding-left:5px; padding-right:5px;} .page_rv_appliance .con01 ul li p{line-height: 1;margin-bottom: 20px;} .page_rv_appliance .con02 .row.flex{ display: flex; align-content: stretch; margin-top: 23px;} .page_rv_appliance .con02 .box_wrap { display: flex; align-items: center; flex-wrap: wrap; height: 100%; padding: 26px 8.88%; margin: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0;} .page_rv_appliance .con02 .box_wrap img { width: 26.82%; max-width: 129px; margin-right: 4.57%;} .page_rv_appliance .con02 .box_wrap dl { text-align: left;} .page_rv_appliance .con02 dl{ flex: 1; width: calc(100% - 151px);} .page_rv_appliance .con04 .tit2 {margin-bottom: 50px;} .page_rv_appliance .con04 ul { display: flex; justify-content: space-between; align-items: stretch; } .page_rv_appliance .con04 ul li { flex: 1 32.1%; max-width: 32.1%; } .page_rv_appliance .con04 ul li.flex2 {flex: 2 67.9%;max-width: 67.9%;padding-right: 6.19%;margin-right: 6.275%;border-right: 1px solid #d8d8d8;} .page_rv_appliance .con04 ul li h4 { font-size: 24px; font-weight: bold; line-height: 1.17; } .page_rv_appliance .con04 ul li .label_wrap { display: flex; justify-content: space-between; line-height: 1; } .page_rv_appliance .con04 ul li .label_wrap span { display: block; max-width: calc(50% - 11px); padding: 10px 10px 7px; flex: 1; font-size: 16px; line-height: 1.25; border-radius: 18.5px; -webkit-border-radius: 18.5px; -moz-border-radius: 18.5px; -ms-border-radius: 18.5px; -o-border-radius: 18.5px; } .page_rv_appliance .con04 ul li:not(.flex2) .label_wrap span { background-color: #d0e0ff; } .page_rv_appliance .con04 ul li.flex2 .label_wrap span { background-color: #ffcac8; } .page_rv_appliance .con04 li:not(.flex2) .box_wrap figcaption { background-color: #4885ff; } .page_rv_appliance .con04 li.flex2 .box_wrap figcaption { padding: 35px 50px; background-color: #ff4941; } .page_rv_appliance .con04 ul li .box_wrap { overflow: hidden; margin: 0; padding: 0; border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; -moz-border-radius: 20px 20px 0 0; -ms-border-radius: 20px 20px 0 0; -o-border-radius: 20px 20px 0 0; } .page_rv_appliance .con04 .box_wrap figcaption { padding: 15px 50px; min-height: 111px; font-size: 24px; font-weight: bold; color: #fff; } .page_rv_appliance .con04 .box_wrap figcaption span { display: inline-block; margin-right: 20px; padding: 11px 33px 10px; border-radius: 6px; background-color: #fff; color: #333; font-size: 16px; font-weight: normal; line-height: 1.25; } .page_rv_appliance .con04 .box_wrap figcaption strong { font-size: 32px; } /* 01_rv_se */ .page_rv_se .hero_wrap { position:relative; color:#fff; text-align:center; background:url(/wp-content/uploads/image/sub/bg_rvse.jpg) no-repeat center; background-size:cover} .page_rv_se .hero_wrap .btn_solid {min-width:236px} .page_rv_se h2 { margin-bottom:25px; font-size:40px; font-weight:bold; line-height:1.35; letter-spacing:-0.5px; text-align:center; color:#232429} .page_rv_se h2 + p{ margin-bottom:36px; font-size:24px; letter-spacing:-0.3px; text-align:center; line-height:1.21; color:#232429} .page_rv_se .con01, .page_rv_se .con06 {background:#f7f9fc} .page_rv_se .con01 .solution_wrap { position:relative; display:flex; height:458px} .page_rv_se .con01 .solution_wrap > div:not(.solution1) { width:24.33333333333333%; padding:0} .page_rv_se .con01 .solution_wrap .left { order:1} .page_rv_se .con01 .solution_wrap .right { order:2} .page_rv_se .con01 .solution_wrap [class*='solution'] { display:flex; justify-content:center; text-align:center; color:#fff; background-repeat:no-repeat; background-size:cover} .page_rv_se .con01 .solution_wrap .solution1 { order:2; align-items:flex-end; margin:0 10px; width:49.66666666666667%; height:100%; padding:42px 0; background-image:url(/wp-content/uploads/image/sub/img_rvse1_1.jpg)} .page_rv_se .con01 .solution_wrap .solution1 p { font-size:30px; font-weight:bold; line-height:1.15; letter-spacing:-0.5px} .page_rv_se .con01 .solution_wrap .solution1 p strong{ font-size:200%; font-weight:bold; letter-spacing:-0.75px} .page_rv_se .con01 .solution_wrap .solution2, .page_rv_se .con01 .solution_wrap .solution4 {margin-bottom:10px} .page_rv_se .con01 .solution_wrap > div > div:not(.solution1) { align-items:center; width:100%; height:calc(50% - 5px); padding:0 16px} .page_rv_se .con01 .solution_wrap [class*='solution'] dt { padding-bottom:5px; border-bottom:1px solid #fff; font-size:16px; letter-spacing:-0.2px} .page_rv_se .con01 .solution_wrap [class*='solution'] dd { position:relative; padding-top:20px; font-size:18px; font-weight:bold; line-height:1.28; /* letter-spacing:-0.23px; */ letter-spacing:-1.3px} .page_rv_se .con01 .solution_wrap [class*='solution'] dd:before { content:''; position:absolute; top:0; left:50%; width:0; height:0; margin-left:-6.5px; border-style:solid; border-width:13px 8.5px 0 8.5px; border-color:#ffffff transparent transparent transparent} .page_rv_se .con01 .solution_wrap .solution2 {background-image:url(/wp-content/uploads/image/sub/img_rvse1_2.jpg)} .page_rv_se .con01 .solution_wrap .solution3 {background-image:url(/wp-content/uploads/image/sub/img_rvse1_3.jpg)} .page_rv_se .con01 .solution_wrap .solution4 {background-image:url(/wp-content/uploads/image/sub/img_rvse1_4.jpg)} .page_rv_se .con01 .solution_wrap .solution5 {background-image:url(/wp-content/uploads/image/sub/img_rvse1_5.jpg)} .page_rv_se .con02 {text-align:center} .page_rv_se .con02 ul {overflow:hidden; display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:21px} .page_rv_se .con02 ul li {flex:1 calc(32.5% - 15px); flex-basis: calc(32.5% - 15px); max-width:390px; margin:15px 7.5px 0; border:solid 1px #dedede} .page_rv_se .con02 ul li img {width:100%; height:auto} .page_rv_se .con02 ul li dl {margin-top:23px} .page_rv_se .con02 ul li dt {margin-bottom:8px; font-size:20px; font-weight:bold; line-height:1.1; letter-spacing:-0.38px; color:#232429} .page_rv_se .con02 ul li dd {display:flex; flex:1; margin-bottom:10px; justify-content:center; align-items:center; min-height:78px; font-size:18px; line-height:1.22; letter-spacing:-0.23px; text-align:center; color:#535353} .page_rv_se .con03 {background:#f0f3f9} .page_rv_se .con04 { padding:0; background-color:#3b4656; color:#fff} .page_rv_se .con04 a { position:relative; display:block; padding:30px 0; padding-left:22.33%; padding-right:2.5%; color:#fff} .page_rv_se .con04 a:before { content:''; position:absolute; top:0; left:0; width:22.33%; height:100%; background:url(/wp-content/uploads/image/sub/img_rvse3.jpg) no-repeat; background-size:cover} .page_rv_se .con04 a:after { content:''; position:absolute; top:0; right:0; width:30px; height:100%; background:url(/wp-content/uploads/image/sub/icon_rvse_arrow.svg) no-repeat center; background-size:30px auto} .page_rv_se .con04 a span { display:block; margin-left:2.5%} .page_rv_se .con04 a .category { margin-bottom:5px; font-size:14px; letter-spacing:-0.18px; color:#f2f2f2} .page_rv_se .con04 a .tit { line-height:1} .page_rv_se .con04 a .tit strong { display:inline-block; font-size:24px; font-weight:bold; letter-spacing:-0.3px; line-height:1.25} .page_rv_se .con04 a .tit strong + strong { position:relative; margin-left:20px; padding-left:20px} .page_rv_se .con04 a .tit strong + strong:before { content:''; position:absolute; top:10%; left:0; width:1px; height:80%; background:#e1e1e1} .page_rv_se .con04 a span:not(.category, .tit) { margin-top:15px; font-size:18px; letter-spacing:-0.23px; line-height:1.67; color:#ffffff} .page_rv_se .con05 .tb_wrap {margin-top:40px} .page_rv_se .con06 {text-align:center} .page_rv_se .con06 ul {overflow:hidden; display:flex; flex-wrap:wrap; justify-content:space-between} .page_rv_se .con06 ul li { flex:1 calc(31.667% - 30px); margin:30px 15px 0} .page_rv_se .con06 ul li > img {width:100%; height:auto;} .page_rv_se .con06 ul li p{ padding:0 15px; margin-top:14px; font-size:18px; line-height:1.22; letter-spacing:-0.23px; color:#2c2c2c} .page_rv_se .con07 {background:#eaeff8} .page_rv_se .con07 h2 + p {margin-bottom:36px} .page_rv_se .tb_wrap table {width:100%} .page_rv_se .tb_type_se1 caption { font-size:16px; font-weight:bold; letter-spacing:-0.2px; text-align:center; color:#2c2c2c; padding:8px 0; margin-bottom:9px} .page_rv_se .tb_type_se1 thead tr { background:#535353} .page_rv_se .tb_type_se1 thead th { padding:5px 0 ; font-size:20px; font-weight:bold; line-height:1.8; letter-spacing:-0.25px; text-align:center; color:#ffffff} .page_rv_se .tb_type_se1 tbody tr { border-bottom:1px solid #535353} .page_rv_se .tb_type_se1 tbody td, .page_rv_se .tb_type_se1 tbody th { padding:16px 0; font-size:18px; letter-spacing:-0.23px; line-height:1.22; border-right:1px solid #979797; vertical-align:middle} .page_rv_se .tb_type_se1 tbody th { font-weight:bold; color:#676767} .page_rv_se .tb_type_se1 tbody th small {font-weight:normal} .page_rv_se .tb_type_se1 tbody td { color:#535353; border-right:1px solid #979797} .page_rv_se .tb_type_se1 tbody td:last-child {border-right:none} .page_rv_se .tb_type_se1 tbody td.con1 { padding-left:4%} .page_rv_se .tb_type_se2 th, .page_rv_se .tb_type_se2 td { text-align:center} .page_rv_se .tb_type_se2 th { padding:24px 0; font-size:20px; font-weight:bold; letter-spacing:-0.25px; line-height:1.8; color:#676767} .page_rv_se .tb_type_se2 thead { border-top:4px solid #adb5c2} .page_rv_se .tb_type_se2 thead th { border-right:2px solid #adb5c2} .page_rv_se .tb_type_se2 thead th:last-child { border-right:none} .page_rv_se .tb_type_se2 thead th img { display:block; margin:0 auto} .page_rv_se .tb_type_se2 tbody th, .page_rv_se .tb_type_se2 tbody td { border-top:1px solid #dee1e6} .page_rv_se .tb_type_se2 tbody .br_b { border-bottom:solid 4px #adb5c2} .page_rv_se .tb_type_se2 th + th { border-left:solid 1px #eaedf2} .page_rv_se .tb_type_se2 tbody td { font-size:18px; letter-spacing:-0.23px; color:#676767} .page_rv_se .tb_type_se2 tbody td{ border-left:solid 2px #adb5c2} .page_rv_se .tb_type_se2 tbody td.bg_rv { background-color:rgba(72, 133, 255, 0.1); font-size:21px; font-weight:bold; letter-spacing:-0.26px; text-align:center; color:#4885ff} .page_rv_se .tb_type_se2 .br_t_g {border-top:solid 1px #adb5c2 !important} .page_rv_se .tb_type_se2 .br_t_b {border-top:solid 3px #7288fb !important} .page_rv_se .tb_type_se2 .br_b_b {border-bottom:solid 3px #7288fb !important} .page_rv_se .tb_type_se2 .br_l_b {border-left:solid 3px #7288fb !important} .page_rv_se .tb_type_se2 .br_r_b {border-right:solid 3px #7288fb !important} .page_rv_se .con08 h4{text-align: center; font-size: 24px;} .page_rv_se .con08 ul {display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin: auto;} .page_rv_se .con08 ul li {width: 280px;} .page_rv_se .con08 ul li + li{margin-left: 40px;} .page_rv_se .con08 ul li + li + li + li{margin-top: 30px;} .page_rv_se .con08 ul li:nth-child(3n+1){margin-left: 0;} /* 01_wol : 별도 CSS 관리 > page_wol.css*/ /* 02_usecase */ .page_usecase.list .hero_wrap{background-image:url(/wp-content/uploads/image/sub/bg_usecase_220404.jpg)} .page_usecase .con02 dl{overflow:hidden; background-color:#8996af} .page_usecase .con02 dl dt{padding:45px 10px; color:#fff; font-size:24px; font-weight:normal; line-height:1.2; text-align:center} .page_usecase .con02 dl dt span{display:block; margin-top:10px; font-size:16px; font-weight:300; opacity:0.8} .page_usecase .con02 dl dd{min-height:380px; padding:24px; background-color:#fff; border:1px solid #8996af; border-top:none} .page_usecase .con02 dl dd li + li{margin-top:15px} .page_usecase .con02 dl dd li span{display:block; position:relative; padding-left:10px; font-size:17px; font-weight:bold} .page_usecase .con02 dl dd li span:before{content:''; position:absolute; top:12px; left:0; width:4px; height:4px; background-color:#333; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .page_usecase .con03 .box_wrap{position:relative; display:flex; align-items:center; min-height:200px; padding:20px; text-align:center; border:2px solid #d8d9db; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; box-shadow:2px 2px 3px 0 rgb(0 0 0 / 10%)} .page_usecase .con03 .box_wrap:after{content:''; position:absolute; bottom:-13px; left:35px; display:block; width:24px; height:24px; border:2px solid #d8d9db; background-color:#fff; border-top:none; border-left:none; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); box-shadow:2px 2px 3px 0 rgb(0 0 0 / 10%)} .page_usecase .con03 .box_wrap + .name{padding-top:20px} .page_usecase .con03 .box_wrap + .name i{margin-right:5px} .page_usecase .info_wrap .tit { display: block;} .page_usecase .info_wrap .desc {word-break: keep-all;} /* 02_vdi */ .page_vdi{background-color:#f6f7f9; font-size:18px} .page_vdi img{max-width:100%} .page_vdi .hero_wrap.w_bg{background-image:url(/wp-content/uploads/image/sub/bg_vdi.jpg)} .page_vdi .division_wrap > div{float:right} .page_vdi .box_line_wrap{margin:40px 0 30px; padding:44px 0 40px; border-top:1px solid #ddd; border-bottom:1px solid #ddd} .page_vdi .box_line_wrap ul:after{content:''; display:block; clear:both} .page_vdi .box_line_wrap ul li{float:left; width:31.8666666667%} .page_vdi .box_line_wrap ul li+li{margin-left:2.2%} .page_vdi .box_line_wrap ul li>img{border-radius:10px; box-shadow:0 2px 10px 0 rgba(0, 0, 0, 0.3); -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px} .page_vdi .box_line_wrap dl{font-size:16px; text-align:center; letter-spacing:-.33px} .page_vdi .box_line_wrap dl dt{margin-top:20px; padding:4px 0; font-weight:bolder; color:#333; line-height:1.5} .page_vdi .box_line_wrap dl dd{margin:8px 0 0; color:#666; line-height:1.6} .page_vdi .box_line_wrap dl dd span{color:#009fff} .page_vdi .tb_vdi{table-layout:fixed; width:100%; font-size:14px; letter-spacing:-.29px; word-break:break-all} .page_vdi .tb_vdi thead th{padding:8px 0; background-color:#f5f5f5; color:#252525; text-align:center} .page_vdi .tb_vdi tbody tr+tr th, .page_vdi .tb_vdi tbody tr+tr td{border-top:1px solid #ddd} .page_vdi .tb_vdi tbody th, .page_vdi .tb_vdi tbody td{padding:5px 20px 7px; vertical-align:middle} .page_vdi .tb_vdi tbody tr.last th, .page_vdi .tb_vdi tbody tr.last td{border-bottom:1px solid #ddd} .page_vdi .tb_vdi thead th.tb_blue{background-color:#009fff !important; color:#fff !important} .page_vdi .tb_vdi tbody td.tb_blue{background-color:#f6fcff !important; color:#009fff !important} .page_vdi .tb_vdi tbody tr.last td.tb_blue{border-color:#c6ecff} .page_vdi .con01 .division_wrap div:first-of-type{width:52.8%; margin-left:5.5%} .page_vdi .con01 .division_wrap div:last-of-type{width:41.7%; padding-top:20px} .page_vdi .con01 .tb_vdi tbody th, .page_vdi .con01 .tb_vdi tbody td{text-align:left} .page_vdi .con01 .tb_vdi tbody tr.last th, .page_vdi .con01 .tb_vdi tbody tr.last td{color:#333; font-weight:bolder} .page_vdi .con01 .tb_vdi tbody tr.last td span{display:block; color:red} .page_vdi .con01 .tb_vdi tbody td.tb_blue{font-size:18px; line-height:1.56; letter-spacing:-.37px; text-align:center} .page_vdi .con01 .tb_vdi tbody tr.last td.tb_blue{color:#009fff} .page_vdi .con01 .tb_vdi tbody td.desc{font-size:12px; background-color:transparent !important; text-align:center} .page_vdi .con04{padding-bottom:20px} .page_vdi .con04 .tb_vdi thead th{padding:10px 20px; border-bottom:1px solid #ddd} .page_vdi .con04 .tb_vdi thead th:first-of-type{background-color:#fff; text-align:left} .page_vdi .con04 .tb_vdi tbody tr th{background-color:#fff; color:#666} .page_vdi .con04 .tb_vdi tbody tr td{background-color:#fcfcfc} .page_vdi .con04 .tb_vdi tbody tr+tr th, .page_vdi .con04 .tb_vdi tbody tr+tr td{border-top-color:#fff !important} .page_vdi .con04 .tb_vdi thead th.tb_blue{border-color:#0078c0} .page_vdi .con05 .tit_sub{margin:60px 0 30px; font-size:28px; line-height:1.43; letter-spacing:-.58px; text-align:center; color:#252525} .page_vdi .con06 .embed_wrap{margin:40px 0} .page_vdi .list_relative{margin:18px 0; border-bottom:1px solid #ddd} .page_vdi .list_relative>li{display:table; width:100%; padding:35px 0 40px; border-top:1px solid #ddd} .page_vdi .list_relative>li>p{display:table-cell; vertical-align:middle; width:83px} .page_vdi .list_relative>li .label{display:block; padding:16px 0; font-size:20px; font-weight:bolder; line-height:1; letter-spacing:-.42px; border-radius:28px; border:1px solid #000; background-color:#fff; text-align:center} .page_vdi .list_relative>li .desc{width:206px; padding:0 20px; color:#666; line-height:1.56; letter-spacing:-.9px} .page_vdi .list_relative>li>.logos{display:table-cell; width:750px} .page_vdi .list_relative>li>.logos ul{overflow:hidden} .page_vdi .list_relative>li>.logos ul li{float:left; width:25%; height:49px; margin-top:5px; text-align:center; vertical-align:middle} .page_vdi .list_relative>li>.logos ul li img{width:auto; max-width:100%; height:auto; vertical-align:middle} .page_vdi .list_relative>li>.logos ul.exp1{padding:0; margin:0; font-size:0} .page_vdi .list_relative>li>.logos ul.exp1 li{float:none; display:inline-block; width:16.6667%} .page_vdi .list_relative>li>.logos ul.exp2 li{width:20%} .page_vdi .list_relative>li.relative_pc .label{border-color:#009fff; color:#009fff} .page_vdi .list_relative>li.relative_mobile .label{border-color:#4b73ff; color:#4b73ff} .page_vdi .list_relative>li.relative_agency .label{border-color:#825eff; color:#825eff} .page_vdi .list_relative>li.relative_finance .label{border-color:#ff673e; color:#ff673e} .page_vdi .visible_mo{display:none} .page_vdi .license_sec_wrap{background:#fff} /* 02_chromebook */ .page_chromebook .hero_wrap.w_bg{background-image:url(/wp-content/uploads/image/sub/bg_cb.jpg)} .page_chromebook .list_col3{overflow:hidden; margin:40px auto 20px} .page_chromebook .list_col3 li{float:left; width:31.3%; margin-bottom:20px; text-align:center} .page_chromebook .list_col3 li+li{margin-left:3.05%} .page_chromebook dt, .page_chromebook dd{margin:0} .page_chromebook .box_wrap{overflow:hidden; padding:34px 5.6%; border-radius:12px; border:solid 1px #d2d2d2; text-align:left} .page_chromebook .box_wrap.w_deco{padding:45px 5.6% 0; margin-bottom:20px; text-align:center} .page_chromebook .con01 .division_wrap div:first-of-type {width:27.6%} .page_chromebook .con01 .division_wrap div:last-of-type {width:72.4%; padding-left:3.4%} .page_chromebook .con02 .division_wrap div.img{width:40%} .page_chromebook .con02 .division_wrap div.img + div {width:60%; padding-left:3%} .page_chromebook .con02 .division_wrap div.img.fl_r + div {padding-left:0; padding-right:3%} .page_chromebook .con02 h4{margin-bottom:15px; font-size:32px; font-weight:bold; line-height:1.13} .page_chromebook .con02 hr{margin:40px auto 39px} .page_chromebook .con02 .division_wrap:nth-of-type(2) div.img + div h4{margin-top:48px} .page_chromebook .con02 .division_wrap:nth-of-type(3) div.img + div h4{margin-top:32px} .page_chromebook .con03 .h3_desc{font-size:24px; color:#1da1df; line-height:1.47; text-align:center} .page_chromebook .con03 .h3_desc strong{font-size:0} .page_chromebook .con03 .h3_desc span{position:relative; display:inline-block; padding-top:3px; font-size:28px; font-weight:bold} .page_chromebook .con03 .h3_desc span:after{content:''; position:absolute; left:50%; top:0; display:block; width:5px; height:5px; background-color:#1da1df; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; margin-left:-2px} .page_chromebook .con03 h3.tit_box{position:relative; width:72.4%; max-width:724px; padding:7px 5.93% 5px; margin:10px auto 0; font-size:32px; background-color:#1da1df; color:#fff; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px} .page_chromebook .con03 h3.tit_box:before, .page_chromebook .con03 h3.tit_box:after{content:''; position:absolute; top:50%; width:10px; height:10px; margin-top:-5px; background-color:#fecd42; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .page_chromebook .con03 h3.tit_box:before{left:3.45%} .page_chromebook .con03 h3.tit_box:after{right:3.45%} .page_chromebook .con03 .list_col3 li:not(:first-of-type):after{content:''; position:absolute; left:calc(-3.05% - 11px); top:35%; width:14px; height:20px; background:url(/wp-content/uploads/image/sub/icon_cb_arrow_blue.svg) no-repeat center; background-size:100%} .page_chromebook .con03 .list_col3 li{position:relative} .page_chromebook .con03 .list_col3 li p{margin-top:24px; font-size:16px; font-weight:bold} .page_chromebook .con03 .list_col3 li p span{display:block; font-weight:normal} .page_chromebook .con03 .box_wrap.w_deco{position:relative; overflow:visible} .page_chromebook .con03 .box_wrap.w_deco:before{content:''; width:50px; height:50px; position:absolute; top:-25px; left:50%; margin-left:-25px; background:url(/wp-content/uploads/image/sub/icon_cb_plus.svg) no-repeat center} .page_chromebook .con03 .box_wrap.w_deco h4{margin-bottom:30px; font-size:28px; font-weight:bold; color:#1da1df} .page_chromebook .con03 .box_wrap.w_deco dl{overflow:hidden; margin:18px 0} .page_chromebook .con03 .box_wrap.w_deco dt{position:relative; width:26.7%; padding-right:20px; font-size:24px; font-weight:bold; line-height:1.33; letter-spacing:-1px} .page_chromebook .con03 .box_wrap.w_deco dt, .page_chromebook .con03 .box_wrap.w_deco dd{float:left} .page_chromebook .con03 .box_wrap.w_deco dt:before{content:''; position:absolute; top:50%; right:0; width:23px; height:25px; background:url(/wp-content/uploads/image/sub/icon_cb_arrow_grey.svg) no-repeat; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%)} .page_chromebook .con03 .box_wrap.w_deco dt>span{display:inline-block; width:100%; padding:26px 10.7% 24px; text-align:center; background-color:#efefef; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px} .page_chromebook .con03 .box_wrap.w_deco dd{width:64.7%; padding:19px 0; padding-left:2.371%; font-size:18px; text-align:left; line-height:1.5} .page_chromebook .con03 .box_wrap.w_deco a{display:block; width:112.8%; padding:13px 0 11px; margin-left:-6.4%; font-size:24px; line-height:1.5; font-weight:bold; color:#fff; background-color:#1da1df; border-bottom-left-radius:12px; border-bottom-right-radius:12px} .page_chromebook .con03 .box_wrap.w_deco a span, .page_chromebook .con06 a span{display:inline-block; padding-top:2px; padding-right:21px; background:url(/wp-content/uploads/image/sub/icon_cb_arrow.svg) no-repeat right center; color:#fff} .page_chromebook .con06 a span{display:block; text-align:left} .page_chromebook .con03 .box_wrap:not(.w_deco){background-color:#f6f7f9} .page_chromebook .con03 .box_wrap:not(.w_deco) dt, .page_chromebook .con03 .box_wrap:not(.w_deco) dd{padding-left:96px; min-height:72px} .page_chromebook .con03 .box_wrap:not(.w_deco) dt{background:url(/wp-content/uploads/image/sub/icon_cb_q.svg) no-repeat; margin-bottom:20px; padding-top:9px; font-size:24px; font-size:1.5rem; font-weight:bold; color:#333; line-height:1.25} .page_chromebook .con03 .box_wrap:not(.w_deco) dd{padding-top:14px; background:url(/wp-content/uploads/image/sub/icon_cb_a.svg) no-repeat; font-size:18px; font-size:1.125rem; line-height:1.5} .page_chromebook .con04 .tit2 {margin-bottom:0} .page_chromebook .con04 .list_col3 li > img {line-height:1} .page_chromebook .con04 .list_col3 .list_tit{margin:30px 0 0; font-size:24px; font-weight:bold; line-height:1.17} .page_chromebook .con04 .list_col3 .list_tit+p{margin:15px 0 0; font-size:16px; line-height:1.25} .page_chromebook .con05 .tit2 {margin-bottom:0} .page_chromebook .con06 p{font-size:18px; font-weight:bold; line-height:1.5} .page_chromebook .con06 a{position:absolute; top:50%; right:0; width:38.7%; max-width:335px; padding:17px 43px 15px; font-size:28px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%)} /* 03_pricing */ .page_pricing .con01{text-align:center; background:#273b63;} .page_pricing .con01 .tit1{color: #fff;} .page_pricing .con02 .box_wrap{background-color:#fff6ec; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0} .page_pricing .con02 .tt_box .tt_con_img {background:#fff url(/wp-content/uploads/image/sub/bg_price_tooltip.png) no-repeat center 20px; padding-top:80px} .page_pricing .price_box_wrap > ul:not(.slick-slider) { display:flex; justify-content:space-between; margin-bottom:40px} .page_pricing .price_box_wrap > ul:not(.slick-slider) .price_box { flex:1 30%; max-width:310px; display: flex; flex-flow: column; align-items: center;} .page_pricing .price_box_wrap .price_box{position:relative;width: auto; display:inline-block; padding:20px 0 24px; vertical-align:top; color:#474d57; background:#fff; box-shadow:2px 2px 5px rgba(133, 145, 190, .16); border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; } .page_pricing .price_box_wrap .price_box +.price_box{margin-left: 15px;} .page_pricing .price_box_wrap .price_box [class*="btn_"]{padding-left:36px; padding-right:36px; background-color:transparent; margin-top: auto;} .page_pricing .price_box_wrap .price_box .category{margin-bottom:20px; font-size:18px; font-weight:bold; line-height:1} .page_pricing .price_box_wrap .price_box .category span{display: inline-block; font-size: 10px; width: 84px; line-height: 19px;font-size: 10px; font-weight: 500; text-align: center; color: #fff; border-radius: 10px; background-color: #ff8548; margin-left: 4px; vertical-align: top;} .page_pricing .price_box_wrap .price_box .price_wrap{width: 100%; padding: 14px 39px; box-sizing: border-box; background-color: rgba(75, 198, 176, 0.1);color: #19947e;} .page_pricing .price_box_wrap .price_box.etp .price_wrap{background-color:rgba(72, 133, 255, 0.1); color: #4885ff;} .page_pricing .price_box_wrap .price_box.wol .price_wrap{background-color:rgba(194, 72, 255, 0.1); color: #c248ff;} .page_pricing .price_box_wrap .price_box.rvbox .price_wrap{background-color:rgba(39, 59, 99, 0.1); color: #273b63; padding:14px 20px;} .page_pricing .price_box_wrap .price_box .summary {padding-top: 12px; margin-top: 5px; line-height:1.5; font-size:14px; line-height: 18px; text-align: left; display: flex; flex-wrap: wrap; justify-content: center; border-top: 1px solid #4bc6b0; } .page_pricing .price_box_wrap .price_box.etp .summary{ border-top: 1px solid #4885ff; } .page_pricing .price_box_wrap .price_box .price_wrap img{margin: auto; max-height: 73px;} .page_pricing .price_box_wrap .price_box .summary img{margin:0 auto ;height: 85px;} .page_pricing .price_box_wrap .price_box .price {line-height:1.25; font-size:16px} .page_pricing .price_box_wrap .price_box .price strong{font-size:38px; line-height: 50px; font-weight:bold; } .page_pricing .price_box_wrap .price_box .price .line{ padding-right: 16px; margin-top: 8px; background-repeat: no-repeat; background-position: right center; background-size: 10px; display: inline-block;} .page_pricing .price_box_wrap .price_box.wol .price .line{background-image: url( /wp-content/uploads/image/sub/arrow_orchid.png); border-bottom: 1px solid #c248ff;} .page_pricing .price_box_wrap .price_box.rvbox .price .line{background-image: url( /wp-content/uploads/image/sub/arrow_darknv.png); border-bottom: 1px solid #273b63;} .page_pricing .price_box_wrap .price_box .desc_wrap {display:table; width:100%; height:100px; margin:0 auto 22px; font-size:16px;} .page_pricing .price_box_wrap .price_box .desc_wrap p{display:table-cell; vertical-align:middle; display: flex; flex-wrap: wrap; align-items: center; padding-top: 20px; flex-direction:column;} .page_pricing .price_box_wrap .price_box .desc_wrap p span {display:block; font-size: 14px; line-height: 1.29; color: #646775; text-align: left; position: relative; padding-left:10px ;} .page_pricing .price_box_wrap .price_box .desc_wrap p span +span {margin-top: 16px;} .page_pricing .price_box_wrap .price_box .desc_wrap p span::after{content: '';display: block; position: absolute; width: 4px; height: 4px; background-color: #646775; border-radius: 50%; top: 6px; left: 0;} .page_pricing .price_box_wrap .price_box.std .category{color:#4bc6b0} .page_pricing .price_box_wrap~p{color: #fff;} .page_pricing .price_box_wrap~p strong{color:#a6aabb} .page_pricing .price_box_wrap .price_box.etp .category{color:#4179ce} .page_pricing .price_box_wrap .price_box.wol .slider_wrap,.page_pricing .price_box_wrap .price_box.rvbox .slider_wrap{width:100%} .page_pricing .price_box_wrap .price_box.wol .category{color:#c248ff} .page_pricing .price_box_wrap .price_box.rvbox .category{color:#273b63} .page_pricing .price_box_wrap .price_box .tooltip {display:none} .page_pricing .tb_price_wrap table{table-layout:fixed; width:100%} .page_pricing .tb_price_wrap table th{padding:20px} .page_pricing .tb_price_wrap table th + th{border-left:1px solid #e3e3ed} .page_pricing .tb_price_wrap table thead tr{border-bottom:1px solid #e3e3ed} .page_pricing .tb_price_wrap table thead th{position:relative; font-size:16px; text-align:center} .page_pricing .tb_price_wrap table thead th .label{position:absolute; top:0; left:0; right:0; display:block; max-width:100px; margin:auto; padding:2px 10px; font-size:11px; font-weight:normal} .page_pricing .tb_price_wrap table tbody th {text-align:left} .page_pricing .tb_price_wrap table tbody td p.division{position:relative; padding:20px; font-weight:bold; font-size:16px; background:#f9f9ff} .page_pricing .tb_price_wrap table tr+tr{border-top:1px solid #e3e3ed} /* .page_pricing .tb_price_wrap table tr:last-child td{padding:20px 0; text-align:center; line-height:1; border-left:none} */ /* .page_pricing .tb_price_wrap table tr:last-child td [class^="btn_"]{min-width:190px; background-color:#fff} */ /* .page_pricing .tb_price_wrap .tb_price_sub{border-top:1px solid #e3e3ed} */ .page_pricing .tb_price_wrap .tb_price_sub th{font-weight:normal; border-right:1px solid #e3e3ed} .page_pricing .tb_price_wrap .tb_price_sub td{text-align:center; vertical-align:middle} .page_pricing .tb_price_wrap .tb_price_sub td+td{border-left:1px solid #e3e3ed; border-right:1px solid #e3e3ed;} .page_pricing .con_partner_wrap {text-align:center} .page_pricing .con_partner_wrap .list_logo {display:flex;flex-wrap:wrap} .page_pricing .con_partner_wrap .list_logo li {flex-basis:25%;max-width:250px;margin-top:30px} .page_pricing .con_partner_wrap .list_logo li img {max-width:100%;height:auto} /* 2301 */ .page_pricing .con00{ background-color: #f7f9fc; text-align: center;} .page_pricing .con00 .auto_box_wrap {background-color: #fff;padding: 50px 168px; border-radius: 4px; box-shadow: 0 2px 10px 0 rgba(39, 59, 99, 0.1);} .page_pricing .con00 .auto_box_wrap .auto_box {display: flex; text-align: left; align-items: center;} .page_pricing .con00 .auto_box_wrap .auto_box + li{margin-top: 40px;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-tit{padding-left: 66px; background-repeat: no-repeat; background-size: 48px; background-position: left center; background-image: url(/wp-content/uploads/sites/2/image/sub/auto-icon01.png); width: 226px;} .page_pricing .con00 .auto_box_wrap .auto_box:nth-child(2) .auto-tit{background-image: url(/wp-content/uploads/sites/2/image/sub/auto-icon02.png);} .page_pricing .con00 .auto_box_wrap .auto_box:nth-child(3) .auto-tit{background-image: url(/wp-content/uploads/sites/2/image/sub/auto-icon03.png);} .page_pricing .con00 .auto_box_wrap .auto_box .auto-tit span{ color: #646775; font-size: 15px;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-tit p{ color: #4885ff; font-size: 30px;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-cont{margin-left: 100px;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-cont li{padding-left: 22px; background-repeat: no-repeat; background-size: 14px; background-position: left 6px; background-image: url(/wp-content/uploads/sites/2/image/sub/auto-ck.png); font-size: 16px;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-cont li + li{margin-top: 16px;} .page_pricing .con00 .btn-wrap a {font-size: 24px; line-height: 60px; width: 218px; padding: 0;} .page_pricing_server {text-align: left;} .page_pricing_server .con01 { background: rgb(252, 248, 245); background: linear-gradient(0deg, rgba(252, 248, 245, 1) 0%, rgba(244, 244, 248, 1) 100%); text-align: left;} .page_pricing_server .con01 .tit1{color: #232429;} .page_pricing_server .box_wrap h2 {font-weight: 500;} .page_pricing_server .box_wrap:not(.info) { display: table; width: 100%; min-height: 359px; box-shadow: 2px 2px 5px rgba(133, 145, 190, .16); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .page_pricing_server .box_wrap:not(.info) .img_wrap, .page_pricing_server .box_wrap:not(.info) .info_wrap { display:table-cell; vertical-align: middle; } .page_pricing_server .box_wrap:not(.info) .img_wrap { width: 41.66666667%; text-align: center; padding: 0 3%; } .page_pricing_server .box_wrap:not(.info) .flex3{display: flex; align-items: center; justify-content: space-between;;} .page_pricing_server .box_wrap:not(.info) .flex3 a{width: 30.333%; height: inherit; max-width: 160px;} .page_pricing_server .box_wrap:not(.info) .flex3 a +a{margin-left: 10px;} .page_pricing_server .box_wrap:not(.info) .flex3 a img{width: 100%; display: block;} .page_pricing_server .box_wrap:not(.info) .info_wrap { width: 58.33333333%; padding: 6% 5%; padding-left: 0; } .page_pricing_server .box_wrap:not(.info) dl { margin-bottom: 15px } .page_pricing_server .box_wrap:not(.info) dt { font-size: 21px; font-weight: 500; margin-bottom: 15px; letter-spacing: -.05em; line-height: 1.45; } .page_pricing_server .box_wrap:not(.info) dt .label { display: inline-block; padding: 3px 8px; margin-right: 3px; background: #d755ff; color: #fff; line-height: 1; font-size: 12px; font-weight: 400; vertical-align: middle; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .page_pricing_server .box_wrap:not(.info) ul { border-top: 1px solid #c6d8e4; padding-top: 15px; } .page_pricing_server .box_wrap:not(.info) li { position: relative; padding-left: 30px; line-height: 1.25; } .page_pricing_server .box_wrap:not(.info) li:before { content:''; position: absolute; top:0; left:0; display: block; width: 20px; height: 20px; background: #4885FF url(/wp-content/uploads/image/common/icon_chk.svg) no-repeat center; background-size: 10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%;} .page_pricing_server .box_wrap:not(.info) li + li { margin-top: 7px;} /* 2203 가격페이지 수정*/ .page_pricing .pirce-box2 { color: #474d57; background: #fff; box-shadow: 2px 2px 5px rgba(133, 145, 190, 0.16); border: 1px solid #c6d8e4; border-radius: 6px; text-align: left; overflow: hidden; position: relative;} .page_pricing .pirce-box2:after{content: ''; display: block; width: 100px; height: 100px; background-color: #4179ce; transform: rotate(45deg); position: absolute; top: -50px; left: -50px;} .page_pricing .pirce-box2 .pb-inner {padding: 30px 3% 35px; display: flex; align-items: center;} .page_pricing .pirce-box2 .pb-tit {padding-right: 30px;} .page_pricing .pirce-box2 .pb-tit h3{ color: #4179ce; font-size: 24px; font-weight: bold;} .page_pricing .pirce-box2 .pb-cont{padding-left: 30px; width: calc(100% - 198px); border-left: 1px solid #ccc;} .page_pricing .pirce-box2 .pb-cont-inner{ display: flex; align-items: center;} .page_pricing .pirce-box2 .pb-cont-inner p {font-size: 18px;} .page_pricing .pirce-box2 .pb-cont-inner ul {margin-top: 10px; } .page_pricing .pirce-box2 .pb-cont-inner ul li {position: relative; } .page_pricing .pirce-box2 .pb-cont-inner ul li::before {content: '✔ ';display: inline-block; color: #4179ce; margin-right: 5px;} .page_pricing .pirce-box2 .pb-cont-inner .btn_pill{margin-left: auto; min-width: 120px;} /* 가격페이지 리뉴얼 -- 가격계산기 빼고 삭제해야됨!! *************************/ .page_pricing .tb_price_wrap .tb_price_sub .tb_price_desc { font-size: 10px; line-height: 1.3; color: #646775;} .page_pricing .tb_price_wrap table tr td.tb_price_btn {padding:20px 0; text-align:center; line-height:1; border-left:none; } .page_pricing .tb_price_wrap table .tb_thead tr {border-top: none;} .page_pricing .tb_price_wrap table .tb_thead tr:first-child {border-bottom: none;} .page_pricing .tb_price_wrap table .tb_thead th {border-left: none; font-size: 18px; padding: 15px 10px; line-height: 1.5;} .bg_blue_op {background-color: #4885FF0D; border-radius: 50px; padding: 5px 0; } .bg_mint_op {background-color: #4BC6B00D; border-radius: 50px; padding: 5px 0; } /* 요금제 버튼 공통 */ .break-m { display: none !important;} .break-md { display: none !important;} .flex-md { display: none !important;} .plan_btn_wrap { display: flex; gap: 20px;} .plan_btn_wrap button { position: relative; color: #A6AABB; font-size: 24px; font-weight: 400; line-height: 1.4;text-align:center; flex: 1; padding: 20px 0;} .plan_btn_wrap button:before { content: ""; position: absolute; left:0; bottom: 0; display: block; width: 100%; height: 3px;background-color: #A6AABB; opacity: 0.1;} .plan_btn_wrap button.active { color: #4885ff; font-weight: 700;} .plan_btn_wrap button.active:before{ background-color: #4885FF;opacity: 1; } .plan_type {font-size: 18px; font-weight: 700; line-height: 1.4; padding-bottom: 16px; border-bottom: 0.5px solid #ddd; position: relative; color:#646775;} .plan_wrap { padding: 32px 0;} .plan_wrap .plan_buy_btn {display: inline-block; font-size:18px; line-height: 1.4; padding: 12px 75px; border: 1px solid; border-radius: 40px; background-color: #fff;} .plan_wrap .plan_buy_btn:hover {background-color: #4885ff; color: #fff; } .std .plan_wrap .plan_buy_btn:hover { background-color: #19947E; color: #fff;} .fee_calc_wrap { text-align: center;} .fee_calc_wrap .fee_calc_btn { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; height:50px; width: 534px; border-radius: 40px; color: #fff; background-color: #4885ff; cursor: pointer;} .mail_qna { color:#232429; margin-top: 22px; text-align: center;} .mail_qna span { color: #646775;} .basic_plan_section .fee_calc_wrap {margin-top: 47px;} .large_plan_section .fee_calc_wrap {margin-top: 37px;} .basic_plan_section { padding: 40px 0 120px 0;} .basic_plan_section .title { font-weight: 700; font-size: 36px; line-height: 1.4; color:#232429; margin-bottom: 50px; text-align: center;} .basic_plan_summary {font-size: 24px; line-height: 1.4;font-weight: 400; color: #232429; margin: 40px 0; text-align: center;} .basic_plan_section .plan_wrapper ul li .plan_desc_wrap {padding-top: 25px; padding-bottom: 27px;} .basic_plan_section .plan_wrapper .plan_wrap .plan_buy_btn { margin-top: 32px; width: 329px;} .plan_wrapper ul { display: flex; gap: 20px;} .plan_wrapper ul li { width: 50%; box-shadow: 4px 4px 10px 0px #273B631A; border-radius: 10px;} .plan_wrapper ul .plan_inner { text-align: center; padding: 20px 25px 0 25px; border-top-left-radius: 10px; border-top-right-radius: 10px;} .plan_wrapper ul .plan_inner .plan_wrap .plan_discount { color: #E91D25; font-size: 14px; line-height: 1.4; font-weight: 700; margin-top: 14px;} .plan_wrapper ul .plan_inner .plan_wrap .plan_discount span { font-weight: 400; text-decoration: line-through; color: #A6AABB;} .plan_wrapper ul .plan_inner .plan_wrap .plan_price { font-size: 14px; line-height: 1.4;} .plan_wrapper ul .plan_inner .plan_wrap .plan_price span { font-weight: 700; font-size: 40px; line-height: 1.45;} .plan_wrapper ul .plan_inner .mobile_check { display: block; font-size: 14px; margin: 24px 0;} .plan_wrapper ul .plan_inner input[type="checkbox"] { margin: -3px 7px 0 0; -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox;} .plan_wrapper ul .plan_inner input[disabled] + span { color: #A6AABB; } .plan_wrapper ul .plan_inner input:checked + span { color: #4885FF;} .plan_wrapper ul li .plan_desc_wrap { display: flex; justify-content: center; padding-bottom: 20px;} .plan_wrapper ul li .plan_desc_wrap ul { flex-direction: column; gap: 6px;} .plan_wrapper ul li .plan_desc_wrap ul li { position: relative; width: 100%; box-shadow: none; border-radius: 0; padding-left: 20px; font-size:14px; line-height: 1.4; color:#646775;} .plan_wrapper ul li .plan_desc_wrap ul li span { font-weight: 700;} .plan_wrapper ul li .plan_desc_wrap ul li:before { content: " "; width: 4px; height: 4px; background-color: #646775; display: block; position: absolute; border-radius: 50px; top: 8px; left: 5px;} .plan_wrapper ul li .plan_type span { position: absolute; right: 0; color: #fff; font-size: 10px; font-weight: 500; line-height: 1.4; border-radius: 40px; padding: 4px 14px;} .plan_wrapper ul li.etp .plan_type span {background-color: #FF8548;} .plan_wrapper ul li.std .plan_inner { background-color: #4BC6B01A;} .plan_wrapper ul li.etp .plan_inner { background-color: #4885FF1A;} .plan_wrapper ul li.std .plan_inner .plan_type { border-color: #4BC6B0;} .plan_wrapper ul li.etp .plan_inner .plan_type { border-color: #4885FF;} .plan_wrapper ul.slick-dots , .hardware_ul ul.slick-dots { display: block; text-align: center; gap: 0;} .plan_wrapper ul.slick-dots li { width: 12px; box-shadow: none; border-radius: 6px; border: none !important;} .plan_wrapper ul.slick-dots li.slick-active {width: 40px;} .compare_plan_section .compare_plan_btn_wrap { background-color: #273B631A; color:#273B63; font-size: 24px; font-weight: 700; line-height: 1.4; padding: 17px 0; height: 70px; display: flex; align-items: center; justify-content: center;} .compare_plan_section .compare_plan_btn_wrap img { margin-left: 17px;} .compare_plan_section .compare_plan_btn { width: 30px; height: 30px; border-radius: 50px; background-color:#273B63; position: relative; margin-left: 17px; cursor: pointer;} .compare_plan_section .compare_plan_btn::before { content: ''; position: absolute; top: 15px; right: 9px; width: 12px; height: 12px; border: 3px solid #fff; border-left: 0; border-top: 0; text-align: center; transform: translateY(-80%) rotate(45deg);-webkit-transform: translateY(-80%) rotate(45deg);} .compare_plan_section div.active .compare_plan_btn::before { top: 13px; transform: translateY(-20%) rotate(-135deg); -webkit-transform: translateY(-20%) rotate(-135deg);} .compare_home_table {display: none;} .compare_large_table {display: none;} .large_plan_section { padding: 200px 0 120px 0;} .large_plan_section .plan_wrapper ul li {border: 1px solid transparent; } .large_plan_section .plan_wrapper ul li.unlimit { background-color: #4885FF0D; border-color: #4885ff; /* border: 1px solid #4885ff;*/ box-sizing: border-box;} .large_plan_section .plan_wrapper ul li.unlimit .plan_inner { padding-top: 9px;} .large_plan_section .plan_wrapper ul li.unlimit .plan_type { padding-bottom: 9px; display: flex; align-items: center; justify-content: center; padding-right: 27px; border-color: #4885ff;} .large_plan_section .plan_wrapper ul li.unlimit .plan_type img { margin-right: 8px;} .large_plan_section .plan_wrapper ul li.unlimit .plan_type span { position: absolute; right: 0; color: #fff; font-size: 10px; font-weight: 500; line-height: 1.4; border-radius: 40px; padding: 4px 14px;background-color: #FF8548;} .hardware_plan_section { padding: 200px 0;} .hardware_wrapper { display: flex; gap: 20px; margin: 40px 0 70px 0;} .hardware_wrapper > div { display: flex; flex: 1 1 50%; gap: 24px; align-items: center;} .hardware_wrapper .rental_wrapper { flex-direction: column;} .hardware_wrapper .rental_wrapper .hardware_img { text-align: center;} .hardware_wrapper .hd_wrap{ flex-direction: column;} .hardware_wrapper .rental_inner {display: flex; gap: 20px;} .hardware_wrapper .rental_inner .rental_tit { position: relative; font-size: 34px; font-weight: 700; line-height: 1.4;} .hardware_wrapper .rental_inner .rental_tit span { position: absolute; top: 55px; background-color: #FF8548;font-size: 10px; font-weight: 500; line-height: 1.4; border-radius: 40px; padding: 4px 14px; color: #fff;} .hardware_wrapper .rental_inner ul li { position: relative; padding-left: 15px; color: #646775; font-size: 14px; line-height: 1.4; margin-bottom: 6px;} .hardware_wrapper .rental_inner ul li span { font-weight: 700;} .hardware_wrapper .rental_inner ul li:after {content: " "; width: 4px; height: 4px; background-color: #646775; display: block; position: absolute; border-radius: 50px; top: 8px; left: 5px;} .hardware_wrapper .rental_inner a.rental_detail_btn { display: block; font-size: 14px; line-height: 1.4; text-decoration: underline; margin-left: 5px;} .hardware_wrapper .hd_box {width: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; box-shadow: 4px 4px 10px 0px #273B631A; padding: 40px 40px 40px 60px; border-radius: 10px;} .hardware_wrapper .hd_box_bl { background-color: #4885FF0D; } .hardware_wrapper .hd_box_pl { background: #6648FF0D;} .hardware_wrapper .hd_box span.theme { position: absolute; top: 8px; left: 8px; border-radius: 20px; font-size: 14px; line-height: 1.4; padding: 4px 15px; } .hardware_wrapper .hd_box span.theme_buy { background-color: #273B630D; color: #273B63;} .hardware_wrapper .hd_box .hd_price { font-size: 40px; font-weight: 700; line-height: 1.45; } .hardware_wrapper .hd_box .hd_price span.hd_month { font-size: 14px; font-weight: 400; margin-left: 5px;} .hardware_wrapper .hd_box .hd_price p.discount { display: inline-block; color: #E91D25; font-size: 14px; font-weight: 700; margin-left: 5px;} .hardware_wrapper .hd_box .hd_price p.discount span { color: #A6AABB; font-size: 14px; line-height: 1.4; text-decoration: line-through; margin-left: 0; } .hardware_wrapper .hd_box a.hd_btn {cursor: pointer; font-size: 16px; line-height: 1.4; position: relative; width: 133px; text-align: center;} .hardware_wrapper .hd_box a.hd_btn:after {background-image: url('/wp-content/uploads/sites/2/image/sub/img-plan-arrow-navy.png'); content: ''; display: block; position: absolute; top: 14px; right:0; width:133px; height: 8px; background-size: 133px 8px; background-repeat: no-repeat;} .hardware_wrapper .hd_box a.hd_btn_point1:after { background-image: url('/wp-content/uploads/sites/2/image/sub/img-plan-arrow.png');} .hardware_wrapper .hd_box a.hd_btn_point2:after { background-image: url('/wp-content/uploads/sites/2/image/sub/img-plan-arrow-purple.png');} .hardware_wrapper .hd_vat {color :#646775; font-size: 14px; text-align: right; width: 100%; } span.qna_underline { text-decoration: underline; padding-bottom: 5px;} #qna_form .tit { font-size: 36px; font-weight: 700; text-align: center; line-height: 1.5; margin-bottom: 12px;} #qna_form .sub { font-size: 20px; text-align: center; line-height: 1.4;} /* #qna_form .nf-form-cont {border: 2px solid #D2D6E9; padding: 40px 60px; margin-top: 32px; border-radius: 20px; } */ #qna_form .nf-form-content .list-select-wrap .nf-field-element>div, #qna_form .nf-form-content input:not([type=button]), #qna_form .nf-form-content textarea { background: #fff; border-radius: 4px;} #ninja_forms_required_items, #qna_form .nf-field-container {margin-bottom: 40px;} #qna_form .nf-form-cont .nf-form-content input::placeholder, #qna_form .nf-form-cont .nf-form-content textarea::placeholder { color: #C4C5CD;} #qna_form .tag {position: relative; z-index: 1; box-shadow: inset 0 -1px 0;} #qna_form .nf-form-cont .checkbox-container .checkbox-wrap label { font-weight: 400;} /* 모달 공통*/ #hardware_rental_popup {display: none;} #fee_calc_popup {display: none;} .md_dialog_backdrop {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; opacity: 0.8;} .md_dialog { transition: all 0.3s; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;-webkit-overflow-scrolling: touch; outline: 0; z-index: 1050; justify-content: center; align-items: center;} .md_dialog .md_dialog_wrap { width: 920px; overflow-y: scroll;} .md_dialog .md_dialog_wrap .md_dialog_contents .dialog_close { position: absolute; top: 40px; right: 40px; cursor: pointer;} .md_dialog .md_dialog_wrap .md_dialog_contents { position: relative; background-color: #fff; padding: 24px 20px; border-radius: 4px; box-shadow: 4px 4px 20px 0px #0000000D; padding: 70px; border-radius: 4px;} /* 모달 요금제 */ #fee_calc_popup.md_dialog .md_dialog_wrap { overflow-y: auto !important;} .fee_calc { margin-bottom: 60px;} .fee_calc .mobile_support_btn { display: block; text-align: center; margin-bottom: 20px;} .fee_calc .mobile_support_btn input[type="checkbox"] { margin: -3px 5px 0 0; -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox;} .fee_input_title { display: flex; align-items: center; font-size: 24px; line-height:1.4; font-weight: 700; margin-bottom: 24px;} .fee_input_title img { margin-right: 14px;} .fee_input_wrap { display: flex; gap: 20px; align-items: center; /*max-width: 580px;*/ justify-content: center; margin-bottom: 40px;} .fee_input_wrap .fee_input { color: #646775;} .fee_input_wrap .fee_input input { border-bottom: 1px solid #4885FF; width: 80px; margin: 0 8px; text-align: right; font-size: 16px;} .fee_input_wrap .fee_input_inner { border-radius: 4px; box-shadow: 4px 4px 20px 0px #0000000D; padding: 17px 50px; width: 280px;} .fee_input_wrap .fee_input_inner p { font-size: 18px; font-weight: 700; line-height: 1.4; margin-bottom: 24px; color:#232429;} .fee_input_wrap .fee_input_inner p span { color: #E91D25;} .fee_btn_wrap { text-align: center;} .fee_btn_wrap .fee_btn {display: inline-block; font-size: 18px; line-height: 1.4; font-weight: 400; color: #646775; border-radius: 40px; padding: 12px 38px; border: 1px solid #646775;} .fee_btn_wrap .fee_btn:hover { background-color: #4885FF; color: #fff; border: 1px solid #4885FF;} .fee_rec { display: none; box-shadow: 4px 4px 10px 0px #273B631A; padding: 40px 24px;} .fee_rec .fee_rec_wrap { display: flex; justify-content: space-between; align-items: center; padding: 0 16px;} .fee_rec .fee_rec_wrap .fee_rec_inner { display: flex; align-items: center;background-color: #6648FF0D; border: 1px solid #6648FF; border-radius: 10px; padding: 27px 27px 27px 10px;} .fee_rec .fee_rec_wrap .fee_rec_inner img { margin-right: 11px;} .fee_rec .fee_rec_wrap .fee_rec_inner .fee_rec_type { display: inline-block; font-size: 12px; line-height: 1.4; color: #646775; border-bottom: 0.5px solid #A6AABB; padding-bottom: 4px;} .fee_rec .fee_rec_wrap .fee_rec_inner .fee_rec_name { font-size: 32px; font-weight: 700; line-height: 1.5;} .fee_rec_box .fee_rec_tit { display: inline-block; color: #7288FB; font-size: 14px; font-weight: 500; line-height: 1.4; background-color: #7288FB1A; padding: 6px 20px; border-radius: 4px; margin-bottom: 4px; width: 100%; text-align:center;} .fee_rec_box .fee_rec_price { font-size: 32px; font-weight: 700; border-bottom: 1px solid #E0E4F4; padding-bottom: 6px; line-height: 1.5;} .fee_rec_box .fee_rec_formula { font-size: 12px; color: #A6AABB; text-align: center; padding: 10px 0 24px 0; line-height: 1.4; } .fee_rec_wrap .fee_rec_formula_mb { display: none;} .fee_rec_box p { font-size: 10px; line-height: 1.4; text-align: right; color: #A6AABB; margin-top: 4px;} /* 모달 하드웨어 렌탈 */ #hardware_rental_popup .md_dialog_wrap {height: 90vh;} .hd_rental_title { font-size: 24px; font-weight: 700; line-height: 1.4; color: #4885FF; margin-bottom: 15px;} .hd_rental_title_bt{ border-top: 0.5px solid #E0E4F4; padding-top: 24px;} .hd_rental_order { display: flex; align-items: center; font-size: 20px; line-height: 1.45; font-weight:700; color: #232429;} .hd_rental_order span{ display: inline-block; font-size: 18px; line-height: 1.4; font-weight: 500; color: #7288FB; border-radius: 4px; background-color: #7288FB1A; padding: 6px 20px; margin-right: 13px;} .hd_rental_box { display: flex; align-items: center; margin: 40px 0 0 0;} .hd_rental_box img { margin-right: 20px;} .hd_rental_box ul li { position: relative; font-size: 18px; line-height: 1.4; color: #646775; padding-left: 17px; margin-bottom: 6px;} .hd_rental_box ul li:before { content: " "; width: 4px; height: 4px; background-color: #646775; display: block; position: absolute; border-radius: 50px; top: 8px; left: 5px;} .hd_rental_mt { margin-top: 50px;} /* 하드웨어 렌탈 닌자폼 */ #hardware_rental_popup .label-right .nf-field-description { margin-right: 0;} .hd_rental_select { font-size: 14px; line-height: 1.4; color: #4885FF;} .hd_rental_select span { font-weight: 700;} #hardware_rental_popup .checkbox-container .nf-field { border: 1px solid #E0E4F4; border-radius:10px; padding: 17px 20px;} #hardware_rental_popup .checkbox-container .nf-field.nf-checked-label { border: 1px solid #4885FF;} #hardware_rental_popup .listradio-wrap .nf-field-element label:after { border: 1px solid #232429; border-radius: 4px; background-color: #fff;} #hardware_rental_popup .listradio-wrap .nf-field-element label.nf-checked-label:after {border: 1px solid #4885FF; } #hardware_rental_popup .listradio-wrap .nf-field-element label.nf-checked-label:before { background-color: #4885FF; } #hardware_rental_popup .listradio-container ul { display: flex; gap: 13px;} #hardware_rental_popup .listradio-container ul li { width: 33.3%; margin-bottom: 0 !important; border-radius: 10px; border: 1px solid #E0E4F4; padding: 17px 15px 17px 20px !important} #hardware_rental_popup .listradio-container ul li:has(.nf-checked) { border: 1px solid #4885FF; background-color: #4885FF0D; } #hardware_rental_popup .listradio-container ul li input[type="radio"]{ margin-top:0; margin-right: 0; padding: 0;} #hardware_rental_popup .listradio-container ul li label { display: flex; font-size: 16px; font-weight: 700; align-items: center; margin-left: 20px !important;} #hardware_rental_popup .listradio-container ul li .hd_rental_select { margin-left: 10px; font-size: 16px; font-weight: 400; } #hardware_rental_popup .listradio-container ul li .hd_rental_select span { font-size: 18px; font-weight: 700; } #hardware_rental_popup .textbox-container input[type="text"], #hardware_rental_popup .email-wrap input[type="email"], #hardware_rental_popup .phone-wrap input[type="tel"] { background-color: #fff; border-radius: 4px; height: 40px;} #hardware_rental_popup .textbox-container input[type="text"]::placeholder { font-size: 14px; color: #A6AABB; line-height: 1.4; } #hardware_rental_popup .nf-error.field-wrap .nf-field-element:after { height: 38px; width: 40px; line-height: 42px;} #hardware_rental_popup .textarea-wrap textarea { background-color: #fff; border-radius: 4px; height: 100px;} #hardware_rental_popup .textarea-wrap textarea::placeholder { font-size: 14px; color: #A6AABB; line-height: 1.4; } #hardware_rental_popup .hd_form_btn { text-align: center;} #hardware_rental_popup .hd_form_btn input[type="submit"] {height: 66px; font-size: 24px; font-weight: 700; line-height:1.4;padding: 20px 70px; border-radius: 40px; background-color:#4885FF; color: #fff;} #hardware_rental_popup .hd_amount { margin-bottom: 70px;} #hardware_rental_popup .hd_amount .nf-field-label { display: none;} #hardware_rental_popup .listselect-container .nf-field-label { display: none;} #hardware_rental_popup .listradio-wrap .nf-field-label { display: none;} .hd_rental_tit { display: none;} #hardware_rental_popup .hd_amount input[type="text"] { width: 92px;} .page_pricing .accordian_wrap li button { color: #000;} #hardware_rental_popup .nf-form-fields-required { display: none;} @media all and (max-width: 1230px){ .hardware_wrapper .rental_inner { flex-direction: column;} .hardware_wrapper .hd_box { padding: 40px 30px;} .hardware_wrapper .hd_box .hd_price { font-size: 30px;} .hardware_wrapper .hd_box a.hd_btn { font-size: 13px; width: 100px;} .hardware_wrapper .hd_box a.hd_btn:after { width: 100px; background-size: 100px 8px;} } @media all and (max-width: 935px){ #fee_calc_popup .md_dialog_wrap { margin:0 15px; } #fee_calc_popup .md_dialog_wrap .md_dialog_contents { padding: 30px;} #hardware_rental_popup .md_dialog_wrap { margin:0 15px; } #hardware_rental_popup .md_dialog_wrap .md_dialog_contents { padding: 20px; } #hardware_rental_popup .listradio-container ul li { width: 70%;} #hardware_rental_popup .listradio-container ul { flex-direction: column;} .hd_rental_box { flex-direction: column; align-items: flex-start;} .hd_rental_tit { display: block; font-size: 18px; font-weight: 700; margin-bottom: 8px;} .plan_wrap .plan_buy_btn { padding: 10px 60px;} } @media all and (max-width: 768px){ .break-m { display: block !important;} .break-md { display: inline-block !important;} .hidden-m { display: none !important;} .flex-md { display: flex !important;} .basic_plan_section { padding: 40px 0 20px 0;} .large_plan_section { padding: 90px 0 20px 0;} .page_pricing .tb_price_wrap table .tb_thead th { padding: 10px; font-size: 17px;} .plan_wrapper { margin-left: -15px; margin-right: -15px;} .plan_wrapper ul { flex-direction: column; gap: 0;} .plan_wrapper ul li.plan_box { margin: 0 5px 20px 5px;} .basic_plan_section .plan_wrapper ul li .plan_desc_wrap { height: 180px;} .hardware_plan_section { padding: 40px 0;} .hardware_wrapper { flex-direction: column; box-shadow: 2px 2px 5px 0px #273B631A; padding: 20px;border-radius: 5px; margin: 10px 4px 10px 4px;} .hardware_wrapper .rental_wrapper { margin-bottom: 20px;} .hardware_wrapper .rental_wrapper .hardware_img { padding: 0;} .md_dialog .md_dialog_wrap .md_dialog_contents .dialog_close { top: 15px; right: 15px; width: 10px; height: 10px;} #qna_form .nf-form-cont {padding: 30px 15px 0 15px;} #ninja_forms_required_items, #qna_form .nf-field-container {margin-bottom: 20px;} #qna_form .tit { font-size: 23px;} #qna_form .sub { font-size: 16px;} #qna_form .nf-form-cont label {font-size: 14px;} #qna_form .nf-form-cont .nf-form-content input::placeholder, #qna_form .nf-form-cont .nf-form-content textarea::placeholder {font-size: 14px;} .nf-form-content .nf-field-container #nf-field-100-wrap .nf-field-element .ninja-forms-field {font-size: 14px !important; height: 40px;} .plan_wrapper ul .plan_inner .mobile_check {font-size: 10px; margin: 15px 0;} .plan_wrapper ul .plan_inner input[type="checkbox"] {margin-right: 4px;} #fee_calc_popup .md_dialog_wrap .md_dialog_contents { padding: 30px 20px;} .fee_calc { margin-bottom: 25px;} .fee_calc .mobile_support_btn {font-size: 10px;} .fee_calc .mobile_support_btn input[type="checkbox"] {margin-right: 4px;} .fee_input_wrap { margin-bottom: 20px;} .fee_input_wrap .fee_input_inner { padding: 8px 0 8px 20px} .fee_input_wrap .fee_input_inner p { font-size: 10px; margin-bottom: 12px;} .fee_input_wrap .fee_input { font-size: 10px;} .fee_input_wrap .fee_input input { font-size: 12px; } .fee_btn_wrap .fee_btn { font-size: 10px; padding: 5px 10px;} .fee_rec { box-shadow: none; padding: 0;} .fee_input_title { font-size: 12px; margin-bottom: 20px;} .fee_input_title img { margin-right: 7px; width: 12px; height: 12px; } .fee_rec .fee_rec_wrap {flex-direction: column; padding: 0 10px;} .fee_rec .fee_rec_wrap .fee_rec_inner { width: 100%; justify-content: center; padding: 7px 0; margin-bottom: 20px;} .fee_rec .fee_rec_wrap .fee_rec_inner img { width: 90px; height: 61px;} .fee_rec .fee_rec_wrap .fee_rec_inner .fee_rec_type {font-size: 10px;} .fee_rec .fee_rec_wrap .fee_rec_inner .fee_rec_name { font-size: 16px; /*height: 20px;*/} .fee_rec_box { display: flex; border-bottom: 1px solid #E0E4F4; padding-bottom: 0;} .fee_rec_box .fee_rec_tit { width: auto; font-size: 10px; padding: 3px 10px; height: 20px; margin-bottom: 0; margin-right: 11px;} .fee_rec_box .fee_rec_price { border: none; font-size: 16px; padding-bottom: 0;} .fee_vat { color:#A6AABB; font-size: 8px; line-height: 1.4;margin-left: 120px; margin-top: 7px;} .fee_rec_box .fee_rec_formula {display: none;} .fee_rec_wrap .fee_rec_formula_mb { display: block; color: #A6AABB; font-size: 9px; margin-bottom: 10px; line-height: 1.4;} .fee_calc_wrap .fee_calc_btn {width: 100%; font-size: 14px; height: 40px;} } @media all and (max-width: 520px){ .basic_plan_section title { font-size: 30px; margin-bottom: 40px;} .plan_btn_wrap { padding: 0 5px;} .plan_btn_wrap button { font-size: 12px; padding: 10px 0;} .basic_plan_summary { font-size: 10px; margin: 20px 0;} .compare_plan_section .page_pricing .tb_price_wrap table thead th .label { font-size: 8px;} .compare_plan_section .page_pricing .tb_price_wrap table thead th { font-size: 12px;} .bg_blue_op { padding: 0;} .bg_mint_op { padding: 0;} .plan_wrap { padding: 16px 0 10px 0;} .plan_wrapper .etp .plan_wrap { padding: 16px 0 10px 0;} .plan_wrapper .std .plan_wrap { padding: 16px 0 10px 0;} .plan_type { font-size: 10px; padding-bottom: 8px;} .plan_wrapper ul li .plan_type span { font-size: 8px; padding: 0 6px;} .plan_wrapper ul .plan_inner .plan_wrap .plan_price { font-size: 10px;} .plan_wrapper ul .plan_inner .plan_wrap .plan_price span { font-size: 20px;} .plan_wrapper ul li .plan_desc_wrap ul li { font-size: 10px;} .basic_plan_section .plan_wrapper ul li .plan_desc_wrap { padding-top: 10px; height: 115px;} .basic_plan_section .plan_wrapper .plan_wrap .plan_buy_btn { width: 100%;} .plan_wrap .plan_buy_btn { font-size: 10px; padding: 6px 35px;} .basic_plan_section .plan_wrapper ul .plan_inner { height:190px; } .plan_wrapper ul .plan_inner { padding: 10px 13px 0 13px;} .plan_wrapper ul .plan_inner .plan_wrap .plan_discount { margin-top: 8px;} .plan_wrapper ul li .plan_desc_wrap ul { gap: 3px;} .plan_wrapper ul li .plan_desc_wrap ul li:before { width: 2px; height: 2px; top: 5px; left: 12px;} .compare_plan_section .compare_plan_btn_wrap { padding: 10px 0; font-size: 12px; height: 44px;} .compare_plan_section .compare_plan_btn {margin-left: 4px; width: 24px; height: 24px; } .compare_plan_section .compare_plan_btn::before { top: 13px; right: 8px; width: 9px; height: 9px; border: 2px solid #fff; border-left: 0; border-top: 0; } .compare_plan_section div.active .compare_plan_btn::before { top: 10px;} .large_plan_section .plan_wrapper ul li.unlimit .plan_type img {width: 20px; height: 20px;} .large_plan_section .plan_wrapper ul .plan_inner { padding: 29px 17px 0 7px;} .large_plan_section .plan_wrapper ul li.unlimit .plan_inner {padding: 25px 17px 0 7px} .large_plan_section .plan_wrapper ul li.unlimit .plan_type span { font-size: 8px; padding: 3px 10px;} .large_plan_section .plan_wrapper ul li.unlimit .plan_type { padding-bottom: 6px;} .plan_wrapper ul li .plan_desc_wrap { padding-bottom: 16px;} .hardware_plan_section {padding: 40px 0;} .hardware_wrapper .rental_inner { flex-direction: column; margin-top: 10px;} .hardware_wrapper > div {gap: 10px;} .hd_rental_title { font-size: 12px; margin-bottom: 10px;} .hd_rental_tit {font-size: 10px; margin-bottom: 4px;} .hd_rental_order { font-size: 10px;} .hd_rental_order span { font-size: 9px; padding: 3px 10px;} .hd_rental_box { margin-top: 5px; } .hd_rental_box ul li { font-size: 10px; margin-bottom: 3px;} .hd_rental_box ul li:before { width: 2px; height: 2px; top: 5px; left: 9px;} #hardware_rental_popup .nf-field-container { margin-bottom: 10px;} #hardware_rental_popup .listradio-container ul li label { font-size: 12px; margin-left: 33px !important;} #hardware_rental_popup .listradio-container ul li .hd_rental_select span { font-size: 12px;} #hardware_rental_popup .listradio-container ul { gap: 5px;} #hardware_rental_popup .listradio-container ul li { padding: 9px !important;} #hardware_rental_popup .listradio-container ul li .hd_rental_select { font-size: 10px;} #hardware_rental_popup .textarea-wrap textarea::placeholder { font-size: 10px; } #hardware_rental_popup .textbox-container input[type="text"], #hardware_rental_popup .email-wrap input[type="email"], #hardware_rental_popup .phone-wrap input[type="tel"] { height: 20px; color: #000; font-size: 10px;} #hardware_rental_popup .textbox-container input[type="text"]::placeholder { font-size: 10px; } #hardware_rental_popup .nf-error { font-size: 10px;} #hardware_rental_popup .nf-error.field-wrap .nf-field-element:after { font-size: 15px; height: 24px; width: 24px; line-height: 24px; } #hardware_rental_popup .nf-pass.field-wrap .nf-field-element:after { font-size: 20px; top: 2px; right: 4px; height: 24px; line-height: 24px;} #hardware_rental_popup .hd_amount { margin-bottom: 20px;} #hardware_rental_popup .hd_form_btn input[type="submit"] { height: 30px; font-size: 10px; padding: 5px 30px;} #hardware_rental_popup .nf-field-container .nf-field-label label { font-size: 10px;} .hardware_wrapper .rental_wrapper .hardware_img {width: 196px; height: 72px; } .hardware_wrapper .rental_inner ul li { font-size: 10px; margin-bottom: 3px;} .hardware_wrapper .rental_inner ul li:after { width: 2px; height: 2px; top: 5px;} .hardware_wrapper .rental_inner a.rental_detail_btn { font-size: 10px;} .hardware_wrapper .rental_inner .rental_tit { font-size: 12px;} .hardware_wrapper .hd_box span.theme { font-size: 10px; padding: 2px 8px; top: 4px; left: 4px; border-radius: 10px;} .hardware_wrapper .hd_box { padding: 20px 30px; border-radius: 5px; } .hardware_wrapper .hd_box .hd_price { font-size: 20px;} .hardware_wrapper .hd_box .hd_price p.discount { font-size: 8px;} .hardware_wrapper .hd_box .hd_price p.discount span { font-size: 8px;} .hardware_wrapper .hd_box a.hd_btn { font-size: 10px; width: 67px;} .hardware_wrapper .hd_box a.hd_btn:after {width: 67px; height: 5px; background-size: 67px 5px;} } /* 03_purchase */ .page_purchase{color:#474d57} .page_purchase .bg {background:#f3f5f8} .page_purchase .tit2{margin-bottom:35px} .page_purchase .info_wrap{padding-bottom:35px; margin-bottom:55px; border-bottom:1px solid #c1c9d7} .page_purchase .info_wrap .btn_solid{width:210px; padding-top:9px; padding-bottom:7px; margin-bottom:13px; font-size:15px; line-height:1; border-bottom:3px solid #214bb4 !important; -webkit-box-shadow:0 0 11px 1px #bdcee7; box-shadow:0 0 11px 1px #bdcee7} .page_purchase .info_wrap .desc{font-size:14px} .page_purchase .info_wrap .desc .link_inline{color:#333; font-weight:bold; box-shadow:inset 0 -1px #4179ce} .page_purchase .info_wrap .desc .link_inline:hover{color:#4179ce} .page_purchase .icon_lock{position:relative; display:inline-block; width:70px; height:70px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .page_purchase .icon_lock:before, .page_purchase .icon_lock:after{content:''; position:absolute; top:50%; left:50%; opacity:1; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); animation:circleAni 3s infinite; -webkit-animation:circleAni 3s infinite} .page_purchase .icon_lock:after{width:75%; height:75%; background:#5dbae6} .page_purchase .icon_lock:before{width:100%; height:100%; background:#9dd3ee} .page_purchase .icon_lock i{position:absolute; z-index:1; top:calc(50% - (47%/2)); left:calc(50% - (47%/2)); width:47%; height:47%; background:#1da1df url(/wp-content/uploads/image/common/icon_lock.png) no-repeat center; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .page_purchase .con02{counter-reset:imgcounter} .page_purchase .con02 .img_wrap{position:relative; line-height:1} .page_purchase .con02 .img_wrap img{width:100%} .page_purchase .con02 .img_wrap img:not(:lang(ko-KR)) {border:1px solid #c1c9d6} .page_purchase .con02 .img_wrap:before{counter-increment:imgcounter; content:counter(imgcounter); position:absolute; top:1px; left:1px; width:20px; height:20px; background:#515e73; color:#fff; line-height:20px; font-size:15px} .page_purchase .con02 dl{margin-top:20px} .page_purchase .con02 dl dt{font-size:18px; font-weight:bold; margin-bottom:8px; line-height:1; letter-spacing:-.06em} .page_purchase .con02 dl dd{letter-spacing:-.06em} .page_purchase .con03 .box_wrap{margin-top:40px; padding:0 20px 0; border:1px solid #c1c9d6; background:#e8ecf3; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0} .page_purchase .con03 .box_wrap ul {margin:16px 0} .page_purchase .con03 .box_wrap dt {font-size:18px; font-weight:bold; letter-spacing:-.06em} .page_purchase .con03 .box_wrap dd {letter-spacing:-.06em} @keyframes circleAni{from{opacity:0.2}} .page_purchase .con04 .list_box { display:flex; flex-wrap:wrap; justify-content:space-between} .page_purchase .con04 .list_box > li { flex:1 47%; max-width:470px} .page_purchase .con04 .list_box > li .box_wrap { box-shadow:2px 2px 5px 0 rgb(133 190 186 / 16%); border:solid 1px #c6e4db; background-color:#ffffff; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px; -o-border-radius:6px} .page_purchase .con04 .list_box > li .box_wrap h3 { overflow:hidden; padding:15px; font-size:20px; font-weight:bold; line-height:1.5; letter-spacing:-0.87px; color:#fff; background-color:#4bc6b0; border-radius:6px 6px 0 0} .page_purchase .con04 .list_box > li .box_wrap > div{ padding:30px 7.78%; font-size:16px; color:#474d57; line-height:1.5} .page_purchase .con04 .list_box > li .box_wrap .tit { margin-bottom:6px; font-size:24px; font-weight:bold; letter-spacing:-1.04px; line-height:1.6; color:#0a8672} .page_purchase .con04 .list_box > li .box_wrap a { min-width:205px; font-weight:bold} .page_purchase .con04 .list_box > li .box_wrap.partner { box-shadow:2px 2px 5px 0 rgb(133 145 190 / 16%); border-color:#c6d8e4} .page_purchase .con04 .list_box > li .box_wrap.partner h3 { background-color:#4179ce} .page_purchase .con04 .list_box > li .box_wrap.partner .tit { color:#3976cf} .page_purchase .con04 .list_box > li .list_noti { display:inline-block; color:#777} .page_purchase .con04 .list_box + .box_wrap { padding:22px 20px 20px; background-color:#f2f7ff; text-align:center; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0} .page_purchase .con04 .list_box+.box_wrap p { font-size:18px; letter-spacing:-0.2px; line-height:1.6; color:#474d57} .page_purchase .con04 .list_box+.box_wrap p .highlight { display:inline-block; line-height:1.3; background-color:#c4daff} /* 05_download */ .page_download{overflow:hidden; background:#f6f7f9} .page_download .hero_wrap{background:url(/wp-content/uploads/image/sub/bg_download.jpg) no-repeat bottom center; background-size:cover} .page_download .tit_num {margin-top:60px} .page_download .guide_box {display:flex; justify-content:space-between; margin-top:20px} .page_download .guide_box li {overflow:hidden; flex-basis:32%; max-width:384px; margin-bottom:20px; border-radius:8px; box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.05); background-color:#fff} .page_download .guide_box li > div.icon_wrap {display:flex; justify-content:center; align-items:center; height:182px; background-color:#eaedf2} .page_download .guide_box li > div:not(.icon_wrap) {height:calc(100% - 182px); padding:24px 10.41% 40px} .page_download .guide_box li > div:not(.icon_wrap) dl {margin-bottom:16px; text-align:center} .page_download .guide_box li > div:not(.icon_wrap) dt {font-size:24px; font-weight:bold; line-height:1.42; color:#333} .page_download .guide_box li > div:not(.icon_wrap) dd{margin-top:8px; font-size:16px; line-height:1.5; color:#666} .page_download .guide_box li > div:not(.icon_wrap) dl ~ p + p {margin-top:8px} .page_download .guide_box li > div:not(.icon_wrap) dd .exp-link {color:#666; box-shadow:0 1px 0 #666; text-decoration:none; font-size:14px} .page_download .guide_box li.bg_blue > div.icon_wrap {background-color:#e3eaf9} .page_download .guide_box li.bg_orange > div.icon_wrap {background-color:#fae9d8} .page_download .guide_box li.bg_green > div.icon_wrap {background-color:#dfefd8} .page_download .guide_box li .btn_solid {background-color:#009fff; border:none} .page_download .guide_box li.bg_orange .btn_solid {background-color:#ff9d04} .page_download .guide_box li.bg_orange .btn_solid:hover {background-color:#F29403} .page_download .guide_box li.bg_green .btn_solid {background-color:#43cc1e} .page_download .guide_box li.bg_green .btn_solid:hover {background-color:#3FC11C} .page_download .btn_solid {display:block; padding:9px 14px; font-size:16px; font-weight:bold; line-height:1.5; color:#fff; border-radius:4px; transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1)} .page_download .btn_solid.w_icon {position:relative; padding-right:14px; padding-left:14px; text-align:left} .page_download .btn_solid.w_icon i {position:absolute; top:50%; right:14px; width:24px; height:24px; transform:translateY(-50%)} .page_download .btn_solid.w_icon i.icon_outlink {background:url(/wp-content/uploads/image/sub/icon-new-window.svg)} .page_download .btn_solid.w_icon i.icon_download {background:url(/wp-content/uploads/image/sub/icon-download.svg)} :lang(en-US) .page_download .con01 .guide_box li, :lang(zh-cn).page_download .con01 .guide_box li {flex-basis:50%; max-width:588px} /* 06_trial */ .page_trial {padding-bottom:140px; background-color: #f3f6fd;} .page_trial .chk_wrap {display:block; font-size:18px; font-weight:bold; letter-spacing:-1.2px; line-height:1.23; color:#666} .page_trial .chk_wrap .mark {top:0} .page_trial .email_box_wrap{padding:24px 21px; font-size:20px; font-weight:bold; line-height:1.2; letter-spacing:-1px; text-align:center; color:#5f6c84; border:solid 1px #cccccc; background-color:#f6f7f9} .page_trial .box_wrap{ padding:70px 11% 100px; border-radius:4px; background: #fff; box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.05); text-align: center;} .page_trial .box_wrap .tit-wrap .tit{font-size: 38px; font-weight: bold;} .page_trial .box_wrap .tit-wrap p{font-size: 20px;} .page_trial .box_wrap .list_check{display: flex; justify-content: center;} .page_trial .box_wrap .list_check li{font-size: 18px; color: #53575a;} .page_trial .box_wrap .list_check li + li {margin-left: 25px; margin-top: 0;} .page_trial .box_wrap .widget_text{max-width:780px; margin: auto;} .page_trial .box_wrap.verify{padding:50px 11%} .page_trial .box_wrap.verify .tit_sub1 > span {display:block; font-size:22px; font-weight:normal; line-height:1.63} .page_trial .box_wrap input[type="submit"].btn_solid, .page_trial .box_wrap.agreement .btn_solid{width:100%; max-width:156px; border-radius:4px ;} .page_trial .box_wrap input[type="submit"].btn_solid.round{padding: 20px; font-size: 24px; line-height: 1; border-radius: 33px; } .page_trial .box_wrap.complete dl{width:55%; margin-left:auto; margin-right:auto} .page_trial .box_wrap.complete dl dt {position:relative} .page_trial .box_wrap.complete dl dt, .page_trial .box_wrap.complete dl dd{font-size:18px; text-align: left;} .page_trial .box_wrap.complete dl dd{color: #4885ff; font-weight: 600;} .page_trial .policy_detail * {font-size:15px !important} .page_trial .box_wrap.complete_desc { padding:60px 30px 30px} .page_trial .box_wrap.complete_desc .list_box { display:flex; align-items:stretch; justify-content:space-between; counter-reset:tit-num} .page_trial .box_wrap.complete_desc .list_box > li.wide { flex:2 64.52%; max-width:64.52%} .page_trial .box_wrap.complete_desc .list_box > li { flex:1 34.2%; max-width:34.2%; padding:30px 3.23%; border:solid 1px #cccccc; background-color:#f6f7f9} .page_trial .box_wrap.complete_desc .list_box > li h4{ padding-bottom:8px; margin-bottom:20px; border-bottom:1px solid #555; font-size:18px; font-weight:bold; line-height:1.125; text-align:center} .page_trial .box_wrap.complete_desc .list_box > li h4 span{font-weight:normal} .page_trial .box_wrap.complete_desc .list_box > li .tit { position:relative; display:flex; align-items:center; min-height:23px; padding-left:27px; font-size:16px; line-height:1.125; font-weight:bold} .page_trial .box_wrap.complete_desc .list_box > li .tit:before { counter-increment:tit-num; content:counter(tit-num); position:absolute; top:0; left:0; display:inline-block; min-width:23px; height:23px; font-size:14px; font-weight:bold; line-height:23px; color:#fff; text-align:center; background-color:#00a4e4; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%} .page_trial .box_wrap.complete_desc .list_box > li.wide > ol { display:flex; align-items:stretch; justify-content:space-between} .page_trial .box_wrap.complete_desc .list_box > li.wide > ol > li { flex:1 48.925%; max-width:48.925%} .page_trial .box_wrap.complete_desc .list_dot_blue li + li {margin-top:10px} .page_trial .box_wrap.retry { padding:60px 30px 30px} .page_trial .box_wrap.retry .list_box { display:flex; align-items:stretch; justify-content:space-between} .page_trial .box_wrap.retry .list_box > li { flex:1; padding:0 3.23%} .page_trial .box_wrap.retry .list_box h4 { position:relative; display:flex; align-items:flex-end; min-height:42px; padding-left:46px; font-size:18px; font-weight:bold; line-height:1.22; padding-bottom:8px; border-bottom:1px solid #555} .page_trial .box_wrap.retry .list_box h4:before{ content:''; position:absolute; left:0; top:0; display:block; width:44px; height:calc(100% - 8px); background-repeat:no-repeat; background-size:contain; background-position:bottom} .page_trial .box_wrap.retry .list_box h4.mail:before{ background-image:url(/wp-content/uploads/image/common/icon_mail_spam.svg)} .page_trial .box_wrap.retry .list_box h4.domain:before{ background-image:url(/wp-content/uploads/image/common/icon_domain.svg)} .page_trial .box_wrap.retry .list_box > li p { line-height:1.5; letter-spacing:-0.5px} .page_trial .box_wrap.retry .list_box .list_mail { display:flex; flex-wrap:wrap; margin-top:10px; margin-left:-5px} .page_trial .box_wrap.retry .list_box .list_mail li { line-height:1} .page_trial .box_wrap.retry .list_box .list_mail li .btn_solid { padding:4px 17px; margin:5px; min-width:150px; font-size:14px; font-weight:bold; line-height:1.14; letter-spacing:normal; text-align:center; color:#ffffff} .page_trial .box_wrap.retry .box_wrap { margin:40px 0 0; padding:30px 3.23%; border:solid 1px #cccccc; background-color:#f6f7f9} .page_trial .box_wrap.retry .box_wrap h4 { margin-bottom:20px; font-size:18px; font-weight:bold; padding-bottom:8px; border-bottom:1px solid #555} .page_trial .box_wrap.retry .list_requset { margin-top:10px; font-size:0} .page_trial .box_wrap.retry .list_requset li { position:relative; display:inline-block; padding-left:32px; margin:5px 0} .page_trial .box_wrap.retry .list_requset li:before { content:''; position:absolute; top:0; left:0; width:26px; height:100%; background-repeat:no-repeat; background-size:contain; background-position:center} .page_trial .box_wrap.retry .list_requset li.call:before { background-image:url(/wp-content/uploads/image/common/icon_trial_call.svg)} .page_trial .box_wrap.retry .list_requset li.helpdesk:before { background-image:url(/wp-content/uploads/image/common/icon_trial_question.svg)} .page_trial .box_wrap.retry .list_requset li.mail:before { background-image:url(/wp-content/uploads/image/common/icon_trial_mail.svg)} .page_trial .box_wrap.retry .list_requset li + li{ margin-left:50px} .page_trial .box_wrap.retry .list_requset li a { font-size:18px; font-weight:bold; color:#333} .page_trial .box_wrap.retry .list_requset li.helpdesk a { box-shadow:inset 0 -1px 0} .page_trial .box_wrap.retry .list_dot_blue {margin-left:10px} .page_trial .box_wrap.retry .list_dot_blue li{font-size:inherit} .page_trial .box_wrap.retry .list_dot_blue li +li{margin-top:10px} :lang(ja) .page_trial .box_wrap.retry .list_box h4:before{background-position:center} .page_trial .box_wrap [class^="btn_"].size_lg{font-size: 24px; padding: 13px 70px; border-radius: 34px;} .page_trial .blue-box-wrap{border-radius: 4px; padding: 40px 40px 20px; background-color: #edf3ff;} .page_trial .sec-tit{text-align: center;} .page_trial .sec-tit .tit{color: #333; font-size: 27px; font-weight: 500;} .page_trial .sec-tit .sub{color: #333; font-size: 22px; margin-top: 6px; line-height: 1.18;} .page_trial .step_wrap {text-align: center;} .page_trial .step_wrap .step_top{line-height: 36px; width: 90px; text-align: center; border-radius: 20px; font-weight: 500; color: #fff; margin: 0 auto; font-size: 18px;} .page_trial .step_wrap.step01 .step_top{background-color: #4bc6b0;} .page_trial .step_wrap.step01 .col-md-12 img {width: 100%; height: auto; margin-top: 30px;} .page_trial .step_wrap.step02 .step_top{background-color: #4885ff;} .page_trial .step_wrap.step03 .step_top{background-color: #ff8548;} .page_trial .step_wrap.step01 .step_tit {color: #4bc6b0;} .page_trial .step_wrap.step02 .step_tit {color: #4885ff;} .page_trial .step_wrap.step03 .step_tit {color: #ff8548;} .page_trial .step_wrap .step_tit{font-size: 18px; font-weight: 500; margin-top: 10px; line-height: 1.22;} .page_trial .step_wrap .tit_sub{color: #333; line-height: 1.25; margin-top: 6px;} .page_trial .step_wrap .tit_sub .underline{border-bottom: 1px solid #ff4941;} .page_trial .step_wrap .tit_sub .red {color: #ff4941;} .page_trial .step_wrap .col-sm-8 {float: none; margin: auto; margin-top: 30px;} .page_trial .step_wrap .col-sm-8 img{width: 100%;} .page_trial .tip_box{background-color: #f6f6f6; box-sizing: border-box; padding: 15px 12px; display: flex; margin-top: 10px;} .page_trial .tip_box .tip_tit{padding-right: 10px; text-align: left; border-right: 1px solid #bcc7fb; font-size: 14px;color: #333;} .page_trial .tip_box .tip_tit.long{padding-left: 83px;} .page_trial .tip_box ul{text-align: left; padding-left: 46px;} .page_trial .tip_box ul li{line-height: 1.43; font-size: 14px;} .page_trial .tip_box ul li.tit{font-weight: bold;} .page_trial .tip_box ul li.tit p{margin: 6px 0 0 20px; line-height: 1.43; font-weight: normal;} .page_trial .num_list .col-sm-10{float: none; margin: 0 auto;} .page_trial .num_list .cont_num + .cont_num{padding-top: 34px; background-image: url('/wp-content/uploads/image/sub/img-ac-line.png'); background-repeat: no-repeat; background-position: top center;} .page_trial .num_list .col-sm-10 > .tit{padding: 24px 0; width: 100%; background-color: #e0ebff; border-radius: 10px 10px 0 0;} .page_trial .num_list .col-sm-10 .tit span{font-size: 18px; font-weight: bold; } .page_trial .num_list .col-sm-10 .tit span:first-child{width: 27px; background-color: #fff; border-radius: 50%; display: inline-block; color: #4885ff; line-height: 27px;} .page_trial .num_list .col-sm-10 .tit img{margin-left: 8px; vertical-align: middle;} .page_trial .num_list .col-sm-10 .tit span ~ span{color: #3b5a96; margin-left: 10px;} .page_trial .num_list .col-md-12{float: none; margin: 0 auto;} .page_trial .num_list .col-md-12 > .tit{padding: 24px 0; width: 100%; background-color: #e0ebff; border-radius: 10px 10px 0 0;} .page_trial .num_list .col-md-12 .tit span{font-size: 18px; font-weight: bold; } .page_trial .num_list .col-md-12 .tit span:first-child{width: 27px; background-color: #fff; border-radius: 50%; display: inline-block; color: #4885ff; line-height: 27px;} .page_trial .num_list .col-md-12 .tit img{margin-left: 8px; vertical-align: middle;} .page_trial .num_list .col-md-12 .tit span ~ span{color: #3b5a96; margin-left: 10px;} .page_trial .num_list_cont{display: flex;} .page_trial .num_list_cont li{width:calc(50% - 3.5px) } .page_trial .num_list_cont li + li{margin-left: 7px; } .page_trial .num_list_cont li p {color: #fff; line-height: 37px; background-color: #3b5a96;} .page_trial .num_list_cont li img {width: 100%; display: block;} .num_list_box{background-color: #f3fafd; padding: 20px 0;} .num_list_box ul {display: flex; justify-content: center;} .num_list_box ul li {height: 67px; display: flex; align-items: center; padding: 0 43px;border-radius: 4px; background-color: #4885ff; vertical-align: middle; font-size: 16px; color: #fff;} .num_list_box ul li + li {margin-left: 30px; position: relative;} .num_list_box ul li + li:after{content: '';display: block; position: absolute; width: 30px; height: 30px; background-image: url('/wp-content/uploads/image/sub/img-ac-arrow-r.png'); background-repeat: no-repeat; left: -30px; top: 50%; margin-top: -15px;} .page_trial .col-sm-10 {float: none; margin: 0 auto;} .page_trial .btn_wrap{width: 100%;} .page_trial .btn_wrap p{font-size: 14px; color: #333;} .page_trial .btn_wrap a{display: flex; align-items: center; text-align: center; margin: auto; width: 100%; height: 59px; border-radius: 29.3px; margin-top: 5px; color: #fff; font-size: 18px;font-weight: 500; max-width: 312px; justify-content: center;} .page_trial .btn_wrap li:nth-child(1) a{background-color: #4885ff;} .page_trial .btn_wrap li:nth-child(2) a{background-color: #144bb8;} .page_trial .btn_wrap li:nth-child(3) a{background-color: #8341db;} .page_trial .link {padding-bottom: 120px;} .page_trial .link h3{font-size: 24px; color: #768db4; font-weight: bold;} .page_trial .link p{font-size: 14px; color: #768db4; margin-top: 8px;} .page_trial .link .text-right a{color: #768db4; display: flex; height: 70px; line-height: 1.4; border:2px solid #768db4; font-size: 18px; font-weight: bold; margin-left: auto;align-items: center; border-radius: 2px; justify-content: center; width: 275px;} :lang(zh-cn) .page_trial .link .text-right a {width: 330px;} /*인증번호*/ .page_trial .certification_num_wrap .approve_email_from{display: flex; justify-content: center;} .page_trial .certification_num_wrap input[type="text"]{width: 80px; height: 80px; padding: 12px 15px; border-radius: 8px; background-color: #edf3ff; font-size: 38px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: .75; letter-spacing: -.72px; text-align: center; color: #4885ff; border: solid 1px #edf3ff;} .page_trial .certification_num_wrap input[type="text"] + input[type="text"]{margin-left: 20px;} .page_trial .certification_num_wrap .approve_email_from input[type="text"]:nth-child(6){margin-left: 40px;} .page_trial .tiemer_wrap{font-size: 14px; color: #646775;} .page_trial .tiemer_wrap span{color: #e91d25;} .page_trial .resend {font-size: 14px; color: #646775;} /* 사용자 정보 등록 */ .page_trial.create-account .flex_wrap label{width: 100%;display: block; text-align: left; } .page_trial.create-account .flex_wrap label .info{position: relative;} .page_trial.create-account .flex_wrap label .info i{display: inline-block; left: 3px; width: 24px; height: 24px; background-image: url(/wp-content/uploads/sites/2/image/common/info-icon.png); background-size: cover; cursor: pointer; position: absolute;} .page_trial.create-account .flex_wrap label .desc {display: none; position: absolute; width: max-content; top: -12px; margin: 0; transform: translateY(-100%); left: -8px; background-color: rgba(39, 59, 99, 0.9); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 400;} .page_trial.create-account .flex_wrap label .info:hover .desc{display: block;} .page_trial.create-account .flex_wrap label .desc ul{display: block; padding: 12px; position: relative;} .page_trial.create-account .flex_wrap label .desc ul::after {position: absolute; content: ''; display: block; bottom: -14px; left: 14px; border-top: 7px solid rgba(39, 59, 99, 0.9); border-bottom: 7px solid transparent; border-right: 6px solid transparent; border-left: 6px solid transparent;} .page_trial.create-account .flex_wrap label .desc li+li{margin-top: 5px;} .page_trial.create-account .box_wrap .input-wrap.flex_wrap{flex-flow: inherit;} .page_trial.create-account .box_wrap .input-wrap.flex_wrap input[type="submit"].btn_solid {max-width: 115px; margin-left: 9px;padding: 5px 18px; font-size: 18px;} .page_trial.create-account .input_custom{padding: 10px 20px ; font-size: 14px; } .page_trial.create-account select.input_custom{ color: #a6aabb;} .page_trial.create-account select.input_custom option[value=""][disabled]{ display: none;} .page_trial.create-account .agree-box{border-radius: 4px; padding: 40px; background-color: #f9f9f9;} .page_trial.create-account .chk_wrap{font-size: 16px;} .page_trial.create-account .chk_wrap .mark{background: transparent; border:1px solid #000 ; width: 19px; height: 19px;top: 1.5px;} .page_trial.create-account .chk_wrap input:checked ~ .mark{background-color: #4885ff; border: 1px solid #4885ff;} .page_trial.create-account .chk_wrap small{font-size: 16px; margin-top: 10px; color: #a6aabb; display: block; line-height: 1.8;} /* 99_terms */ .page_terms .box_wrap{overflow:hidden; padding-bottom:20px; margin-bottom:30px; border-bottom:1px solid #cdcece; border-radius:0; -webkit-border-radius:0; -moz-border-radius:0; -ms-border-radius:0; -o-border-radius:0} .page_terms .box_wrap p{font-weight:bold; color:#4179ce} .page_terms .box_wrap ul{margin-left:40px; margin-bottom:20px} .page_terms .box_wrap li{font-size:15px} .page_terms .box_wrap li + li{margin-top:3px} .page_terms .box_wrap li button{display:inline-block; color:inherit; text-decoration:none; box-shadow:0 -1px inset #333; line-height:1.4} .page_terms .tb_commercial_law { border-top:2px solid #bcc1c5} .page_terms .tb_commercial_law table { width:100%} .page_terms .tb_commercial_law th, .page_terms .tb_commercial_law td { padding:10px 20px; border-bottom:1px solid #dcdcdc; vertical-align:middle} /* 99_empty */ .page_empty{min-height:750px} .page_empty .sub_menu_wrap{overflow:hidden} .page_empty .sub_menu_wrap > li {float:left; width:16%} .page_empty .sub_menu_wrap > li:first-child, .page_empty .sub_menu_wrap > li:nth-child(2){width: 22%;} .page_empty .sub_menu_wrap > li + li{margin-left:2%} .page_empty .sub_menu_wrap > li > a{position:relative; display:block; padding-bottom:10px; margin-bottom:10px; font-weight:bold; color:#333; border-bottom:1px solid #ddd} .page_empty .sub_menu_wrap>li>.sub-menu>li a { position:relative; display:block; font-size:15px; color:#403f3f} .page_empty .sub_menu_wrap>li>.sub-menu>li+li {margin-top:15px} .page_empty .sub_menu_wrap>li>.sub-menu>li>a{font-weight:bold; word-break:break-all} .page_empty .sub_menu_wrap>li>.sub-menu>li>.sub-menu{margin-bottom:12px} .page_empty .sub_menu_wrap>li>.sub-menu>li>.sub-menu a{ padding:5px 0 5px 12px} .page_empty .sub_menu_wrap>li>.sub-menu>li>.sub-menu a:before{ content:'- '} .page_empty .sub_menu_wrap > li .exp br{display:none} .page_empty .box_btn_wrap [class^="btn_"]{width:200px} .page_empty .box_btn_wrap [class^="btn_"]+[class^="btn_"]{margin-left:10px} /* 99_view (post 상세페이지) */ .page_view{padding-top:60px} /* 도입사례 상세페이지 */ .page_view .view_top{padding-bottom:40px; text-align:center;} .page_view .view_top ul{margin-top:5px; line-height:1} .page_view .view_top ul li{font-size:14px; letter-spacing:-0.02em; color:#707070} .page_view .tit_sub1 > .entry-title {font-weight:bold} .page_view .view_con{padding:30px; border:1px solid #e6e6e6} .page_view .btns_wrap{margin-top:50px; line-height:1} .page_view .btns_wrap .btn_pill{width:200px} .page_view .tit_wrap{margin-bottom:40px; padding:30px 20px; background-image:url(/wp-content/uploads/image/sub/bg_usecase02.png); background-size:cover; text-align:center} .page_view .tit_wrap p{font-size:20px; color:#fff} .page_view .tit_wrap span{display:block; margin-bottom:20px; color:#b6c7dd; font-size:16px} .page_view .introduction_box { overflow:hidden; display: flex; flex-direction: row-reverse; justify-content: space-between; border:1px solid #bfbfbf; padding:30px 20px; margin-top:40px } .page_view .introduction_box.bb_none{border-bottom:none;} .page_view .introduction_box>div { flex: 1 49%; max-width: 49%;} .page_view .introduction_box .introduction_box_details .tit { padding:10px 0; margin:1px 0 0; text-align:center; font-size:20px; border:1px solid #bfbfbf; border-left:none; border-right:none } .page_view .introduction_box .introduction_box_details dl { margin:20px 20px 0; font-size:15px } .page_view .introduction_box .introduction_box_details dl dt { font-weight:bold } .page_view .introduction_box .introduction_box_details dl dd { margin:0; line-height:1.45 } .page_view .introduction_box .introduction_box_details dl dd+dt { margin-top:20px } .page_view .introduction_box .introduction_box-img img { width:100% } .page_view .introduction_box_profile { display: flex; justify-content: space-between; border: 1px solid #bfbfbf; padding: 0 20px 30px; border-top: none; font-size: 15px; } .page_view .introduction_box_profile > div {flex: 1 49%; max-width: 49%; } .page_view .introduction_box_profile > div:not(.profile_img) {padding: 0 20px;} .page_view .introduction_box_profile .profile_img{display: flex; align-items: center;} .page_view .introduction_box_profile .profile_img .img + p {padding-left: 20px;} .page_view .introduction_box_profile .tit { font-weight: bold; } .page_view .introduction_box_profile dl {display: flex; width: 100%; } .page_view .introduction_box_profile dl dt { text-align: left; width: 17%; min-width: 70px; border-right: 1px solid; font-weight: normal; vertical-align: top; } .page_view .introduction_box_profile dl dd {width: 83%; padding-left: 10px;} .page_view .introduction_box_profile dl + dl { margin-top: 5px;} .page_view .introduction_ab_box { overflow:hidden; position:relative; padding:30px; margin:40px 0; background:#f2f2f2 } .page_view .introduction_ab_box .deco { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(90deg); width:0; height:0; border-top:0 solid transparent; border-bottom:20px solid #000; border-right:13px solid transparent; border-left:13px solid transparent } .page_view .introduction_ab_box dl { overflow:hidden; display:block; float:left; width:50%; margin:0 } .page_view .introduction_ab_box dl dt, .page_view .introduction_ab_box dl dd { float:left } .page_view .introduction_ab_box dl dt { width:100%; padding:11px 25px 9px; text-align:center; font-size:18px; line-height:1.2; color:#fff; background:#00a4e4 } .page_view .introduction_ab_box dl:first-child { padding-right:45px } .page_view .introduction_ab_box dl:last-child { padding-left:45px } .page_view .introduction_ab_box dl:last-child dt { background:#ffc000 } .page_view .introduction_ab_box dl dt span { display:block; font-size:32px; font-weight:bold } .page_view .introduction_ab_box dl dd { display:block; margin:0; padding:0 0 0 20px } .page_view .introduction_ab_box dl dd ol { margin:15px 0 0; padding:0 } .page_view .introduction_ab_box dl dd ol li { position:relative; padding-left:15px; font-size:15px } .page_view .introduction_ab_box dl dd ol li:before { content:'・'; position:absolute; left:0; display:block; margin-top:-1px } .page_view .introduction_ab_box dl dd ol li+li { margin-top:5px } .page_view .img_half_wrap { overflow:hidden; text-align:center} .page_view .img_half_wrap>div { float:left; width:calc(50% - 5px); margin-bottom:20px} /* fag-ios */ .faq_ios { padding: 20px 0 100px; font-size: 13px; background: #fafafa;} .faq_ios .list_faq_ios { margin: 0 auto; max-width: 660px; } .faq_ios .list_faq_ios li { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: column; justify-content: center; align-items: center; padding: 17.5px 4.55% 17.5px 3.03%; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border: solid 1px #dedede; background-color: #ffffff; cursor: pointer; } .faq_ios .list_faq_ios li + li { margin-top: 10px; } .faq_ios .list_faq_ios li .question_wrap { position: relative; width: 100%; padding: 0 0 0 21px; line-height: 1.15; border:none; background:transparent; text-align: left; } .faq_ios .list_faq_ios li .question_wrap:before { content: 'Q.'; position: absolute; top: 0; left: 0; font-weight: bold; color: #29aaff;} .faq_ios .list_faq_ios li.active .answer_wrap{display: block;} .faq_ios .list_faq_ios li .answer_wrap { position: relative; display: none; width: 100%; padding: 0 0 0 21px; margin-top:10px; line-height: 1.15; border:none; background:transparent; text-align: left; } .faq_ios .list_faq_ios li .answer_wrap:before { content: 'A.'; position: absolute; top: 0; left: 0; font-weight: bold; color: #29aaff; } .faq_ios .list_faq_ios li .answer_wrap p { overflow: hidden; overflow-y: scroll; max-height: 50vh; padding-right: 10px;} .faq_ios .list_faq_ios li .answer_wrap p::-webkit-scrollbar { -webkit-appearance: none; } .faq_ios .list_faq_ios li .answer_wrap p::-webkit-scrollbar:vertical { width: 4px; } .faq_ios .list_faq_ios li .answer_wrap p::-webkit-scrollbar:horizontal { height: 4px; } .faq_ios .list_faq_ios li .answer_wrap p::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .2); border-radius: 3px; } .faq_ios .list_faq_ios li .answer_wrap p::-webkit-scrollbar-track { border-radius: 3px; background-color: rgba(255,255,255,.5); } /* single-video */ .single-video .page_view {overflow:hidden} /* page_lp_complete */ .page_lp_complete .email_box_wrap { max-width: 800px; margin:0 auto; padding: 24px 21px; font-size: 20px; font-weight: bold; line-height: 1.2; letter-spacing: -1px; text-align: center; color: #5f6c84; border: solid 1px #cccccc; background-color: #f6f7f9; } .page_lp_complete .btns_wrap a {min-width: 180px;} /* 20211125 재택근무 활용법 */ .tit_round_num{text-align: center;} .tit_round_num .num {display: block; width: 62px; height: 62px; background-color: #009fff; border-radius: 50%; margin: 0 auto 11px auto;} .tit_round_num .num em{color: #fff;line-height: 62px; font-size: 28px;letter-spacing: -0.58px;} .tit_round_num > p{font-size: 36px;line-height: 1.5; letter-spacing: -0.75px;color: #252525;} .tit_round_num .first_tit{position: relative; font-weight: normal;} .tit_round_num .first_tit:after{content: '';display: block;position: absolute; width: 1px; height: 60px; background-color: #009fff; left: 50%; bottom: -80px;} .tit_round_num .next_tit {margin-top: 100px; font-weight: bold;} .bg_f6f7f9{background-color: #f6f7f9;} /* page_telecommuting_welfare 재택근무 복지*/ .bg_f7f9fc{background-color: #f7f9fc;} .tit2_num { font-size: 28px;font-weight: bold; margin-bottom: 50px;} .tit2_num .num{display: block; color: #4885ff; } .more_box.blue{background-color: #465ac7;} .more_box.blue p{color: #fff;} .more_box.blue a:after{background-image: url('/wp-content/uploads/sites/2/image/sub/more-arrow.png'); background-size: 82px 50px;} .page_telecommuting_welfare .hero_wrap {background-image: url(/wp-content/uploads/sites/2/image/sub/topbanner_img_0715.jpg); text-align: center;} .page_telecommuting_welfare .line_under{background-color: transparent; text-decoration: underline;} .page_telecommuting_welfare .interview-box {display: flex;} .page_telecommuting_welfare .interview-box .interview-img{width: calc(50% - 15px); background-size: cover;} .page_telecommuting_welfare .interview-box .interview-txt{background-color: #fff; width: calc(50% + 15px);padding: 30px;} .page_telecommuting_welfare .interview-box .interview-txt li.flex{display: flex;} .page_telecommuting_welfare .interview-box .interview-txt li img{width: 73px;} .page_telecommuting_welfare .interview-box .interview-txt li .pro{ font-size: 16px; color: #232429;font-weight: bold;} .page_telecommuting_welfare .interview-box .interview-txt li .pro img{vertical-align: middle;} .page_telecommuting_welfare .interview-box .interview-txt li .pro p {display: inline-block; vertical-align: middle; margin-left: 30px;} .page_telecommuting_welfare .interview-box .interview-txt li.flex .pro{text-align: center; } .page_telecommuting_welfare .interview-box .interview-txt li.flex > p{margin-left: 30px;} .page_telecommuting_welfare .interview-box .interview-txt li.flex .pro p{margin-left: 0;} /* page_government 일문 지자체 대상 랜딩*/ .page_government .row.nopd{margin-right: 0 !important; margin-left: 0 !important;} .page_government.type_renewal .tit2 ,.page_government.type_renewal .tit {font-weight: bold;} .page_government.type_renewal .tit2{margin-bottom: 42px;} .page_government.type_renewal .sub-tit{font-size: 24px; line-height: 1.25;letter-spacing: -0.02px;} .page_government.type_renewal .txt-label{ line-height: 36px; height: 36px; padding: 0px 14px; box-sizing: border-box; border-radius: 18px; color: #fff; display: inline-block; color: #fff; letter-spacing: -0.05px;font-size: 18px; background-color: #1da1df;} .page_government .hero_wrap {background-image: url(/wp-content/uploads/sites/4/image/sub/img-main-bg.jpg);} .page_government .hero_wrap.w_bg:before {display: none;} .page_government .con01 .top-img{width: 296px; margin:0 auto; display: block;} .page_government .con01 ul {padding-bottom: 75px; width: 763px; margin: auto; background-image: url(/wp-content/uploads/sites/4/image/sub/narrow.png); background-size: 466px 75px; background-position: center bottom; background-repeat: no-repeat;} .page_government .con01 ul li {height: 70px;padding: 22px 31px 20px 32px;border-radius: 10px;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);border: solid 1px #1da1df; background-color: #fff;} .page_government .con01 ul li + li{margin-top: 10px;} .page_government .color_point7 {font-size: 32px; letter-spacing: -0.03px; font-weight: bold;} .page_government .con02 .feature-list {padding: 40px 0;} .page_government .con02 .feature-list .left{float: left;} .page_government .con02 .feature-list .right{float: right;} .page_government .con02 .feature-list + .feature-list { border-top: 1px solid #e1e1e1;} .page_government .con02 .feature-list .cont-tit{font-weight: bold; margin-top: 8px; line-height: 1.21; font-size: 24px; letter-spacing: -0.06px;} .page_government .con02 .feature-list .cont-txt{ line-height: 1.44; letter-spacing: -0.15px;} .page_government .con02 .info{margin-top: -30px; font-size: 16px;} .page_government .con03 .col-sm-6:first-child img.mw100{position: relative; left: 24px;} .page_government .con03 .col-sm-6 img.mw100{ height: 321px; width: auto; } .page_government .con03 .col-sm-6 .tit{ margin-top: 20px; font-size: 30px; line-height: 1.2;} .page_government .con03 .col-sm-6 .tit strong{font-size: 24px;} .page_government .con03 .col-sm-6 .cont{margin-top: 15px;} .page_government .mini{font-size: 14px;} .page_government .con04 .box-cont-tit{ margin-bottom: 40px;} .page_government .con04 .box-cont-tit .txt-label{line-height: 38px; height: 38px; width: 156px;} .page_government .con04 .box-cont-tit h4{margin-top: 28px; font-size: 24px; font-weight: bold;} .page_government .con04 .box-cont-tit p{margin-top: 28px;} .page_government .con04 .box-cont + .box-cont{margin-top: 120px;} .page_government .con04 .box-list3 .col-sm-4{ padding-right: 7px; padding-left: 7px;} .page_government .con05 .col-sm-6:first-child{padding-right: 30px;} .page_government .con05 .col-sm-6 + .col-sm-6{padding-left: 30px;} .page_government .con05 .col-sm-6 .tit{line-height: 1.2; font-size: 32px; margin-top: 30px; letter-spacing: -0.08px;} .page_government .con05 .col-sm-6 .cont{margin-top: 20px; letter-spacing: -0.02px;} .page_government .con05 .demo-box{box-shadow: 0 5px 9px 0 rgba(0, 0, 0, 0.24); background-color: #fff; margin-top: 120px;} .page_government .con05 .demo-box .demo-box-inner{ padding: 46px 60px 56px; display: flex;} .page_government .con05 .demo-box .demo-box-inner .right{width: 300px; border-radius:12px; margin: auto 0 auto auto; box-sizing: border-box; background-color: #1da1df; height: 64px; text-align: center; display: block;} .page_government .con05 .demo-box .demo-box-inner .right span{font-size: 24px; color: #fff;line-height: 64px; padding-right: 20px; background-image: url(/wp-content/uploads/sites/4/image/sub/narrow-medium.png); background-size: 17px; background-position: right center; background-repeat: no-repeat;} .page_government .con05 .demo-box .demo-box-inner .left .box-tit {font-size: 30px; font-weight: bold;} .page_security.page_management .con05 a.btn_solid{max-width:386px} .page_security.page_management .hero_wrap.w_bg {background-image: url(/wp-content/uploads/sites/2/image/sub/security-bg-img-scaled.jpg);} .page_security .con01 .btns_wrap button[data-target="lock"] .deco { background-image: url(/wp-content/uploads/sites/2/image/sub/security-hover-01.png);} .page_security .con01 .btns_wrap button[data-target="password"] .deco { background-image: url(/wp-content/uploads/sites/2/image/sub/security-hover-02.png);} .page_security .con01 .btns_wrap button[data-target="login"] .deco { background-image: url(/wp-content/uploads/sites/2/image/sub/security-hover-03.png);} .page_security .con01 .btns_wrap button[data-target="ipmac"] .deco { background-image: url(/wp-content/uploads/sites/2/image/sub/security-hover-04.png);} .page_security .con01 .btns_wrap button[data-target="block"] .deco { background-image: url(/wp-content/uploads/sites/2/image/sub/security-hover-05.png);} /* page_control - 온라인 용역통제 페이지 */ .page_control .txt_underline { text-decoration: underline; font-weight: 700; text-underline-offset: 4px;} .page_control h2 { margin-bottom: 20px; font-size: 36px; font-weight: 700; line-height: 1.45; letter-spacing: -.5px; text-align: center; color: #232429;} .page_control h2+p {font-size: 24px; letter-spacing: -.3px; text-align: center; line-height: 1.45; color: #232429;} .page_control.page_management .hero_wrap.w_bg {background-image: url(/wp-content/uploads/sites/2/image/sub/rv_control_bg.png);} .page_control .con_reverse .row { display: flex; align-items: center; margin-bottom: 120px;} .page_control .con_reverse .row:last-child {margin-bottom: 0;} .page_control .con_reverse .row .text_wrap { text-align: left; letter-spacing: -1px;} .page_control .con_reverse .row .col-md-push-7 .text_wrap { margin-left: -30px;} .page_control .con_reverse .row .text_wrap h3 { font-size: 26px; font-weight:700; line-height: 1.4; margin-bottom: 20px;} .page_control .con_reverse .row .text_wrap ul li { font-size: 18px; padding-left: 25px; position: relative;} .page_control .con_reverse .row .text_wrap ul li::before { font-size: 18px; content: ''; position: absolute; display: block; left: 10px; top: 13px; width: 4px; height: 4px; border-radius: 50%; background-color: #000;} .page_control .con_reverse .row .img_wrap {max-width: 640px; text-align: right;} .page_control .con_reverse .row .col-md-7 .img_wrap { float: right;} .page_control .con_reverse .row .col-md-pull-5 .img_wrap {float: left;} .page_control .con1 .wrapper { position: relative;} .page_control .con1 .bg_circle { background-color: #4885FF; width: 418px; height: 418px; border-radius: 50%; top: 50%; left: 50%;position: absolute; z-index: -1; transform: translate(-50%, -50%); opacity: 0.05;} .page_control .con1 .inner_circle {background-color: #779cf8; width: 190px; height: 190px; border-radius: 50%; top: 50%; left: 50%;position: absolute; transform:translate(-50%, -50%); z-index: 5; color: #fff; border: 10px solid #4885FF; display:flex; align-items: center; justify-content: center; text-align: center; font-size: 32px; font-weight: 700; line-height: 1.4;} .page_control .con1 ul { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; margin-right: -24px;} .page_control .con1 ul li { width: calc(100% / 2 - 24px); background: #E0EBFF;} .page_control .con1 ul li + li + li { margin-top: 46px;} .page_control .con1 ul li dl { padding: 30px 20px; color: #232429; text-align: center;} .page_control .con1 ul li dl dt { font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 12px;} .page_control .con1 ul li dl dd { font-size: 18px; letter-spacing: -1px; line-height: 1.4;} .page_control .con4 .row .text_wrap { text-align: left; letter-spacing: -1px;} .page_control .con4 .row ul.number li + li{ padding-left: 35px;} .page_control .con7 ul { display: flex; align-items: center; justify-content: center; flex-direction: column; } .page_control .con7 ul li { position: relative; padding-left: 25px; font-size: 24px;} .page_control .con7 ul li::before { content: ''; position: absolute; display: block; left: 10px; top: 13px; width: 4px; height: 4px; border-radius: 50%; background-color: #000;} .page_control .con_logo ul{ display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin: auto;} .page_control .con_logo ul li {width: 280px;} .page_control .con_logo ul li:nth-child(3n+1) {margin-left: 0;} .page_control .con_logo ul li+li {margin-left: 40px; } .page_control .con_logo ul li+li+li+li { margin-top: 30px;} /* 하단 닌자폼으로 이동 공통 버튼 */ .nf-before-form-content{display: none !important;} .sub_page .hero_wrap a.form_scroll { font-size: 24px; padding: 10px 90px !important; cursor: pointer; border-radius: 28px; min-width: 236px;} .ninjaform_container .ninjaform_info { border: 1px solid #ccc; padding: 10px; text-align: left;} /* CTA 공통 */ .sub_page .con_cta .container {padding:0;} .sub_page .con_cta { padding: 0;background-color: #3b4656;color: #fff;} .sub_page .con_cta .cta_link { display: block; position: relative} .sub_page .con_cta .cta_link::before{ content: ''; display: block; position: absolute; top: 0; right: 15px; width: 30px; height: 100%; background-image: url(/wp-content/uploads/image/sub/icon_rvse_arrow.svg); background-repeat: no-repeat; background-position: center;} .sub_page .con_cta .col-sm-3 { width: 298px; padding-left: 0; height: 173px;} .sub_page .con_cta .col-sm-3 img {height: 100%; position: relative; left: 50%; transform: translateX(-50%);} .sub_page .con_cta .col-sm-9 { padding: 30px 15px;color: #f2f2f2; position: relative;} .sub_page .con_cta .col-sm-9 p.info {color: #fff; text-align: left; font-size: 14px; margin-bottom: 0; margin-top: 0;} .sub_page .con_cta .col-sm-9 h3 { font-size: 24px; color: #fff; font-weight: 500; margin-top: 3px; text-align: left; margin-bottom: 13px;} .sub_page .con_cta .col-sm-9 h3 span { display: inline-block; margin-left: 19px; padding-left: 19px; font-weight: 400; position: relative; color: #fff;} .sub_page .con_cta .col-sm-9 h3 span::after { content: ''; position: absolute; left: 0; top: 9px; display: block; background-color: #e1e1e1; width: 1px; height: 22px;} .sub_page .con_cta .col-sm-9 p { color: #fff; text-align: left; font-size: 18px; margin-bottom: 0; margin-top: 0;} .page_blog .select_menu_style {display: flex; flex-wrap:wrap;} .page_blog .select_menu_style ul{display: flex; margin-left: auto;} .page_blog .select_menu_style ul li + li {margin-left: 12px;} .page_blog .select_menu_style ul li a{display: block; width: 27px; height: 24px; background-size: 27px 24px; background-image: url(/wp-content/uploads/image/sub/ul-icon-01.png);} .page_blog .select_menu_style ul li + li a {background-image: url(/wp-content/uploads/image/sub/ul-icon-02.png);} .page_blog .select_menu_style ul li:hover a{background-image: url(/wp-content/uploads/image/sub/ul-icon-01-hover.png);} .page_blog .select_menu_style ul li + li:hover a {background-image: url(/wp-content/uploads/image/sub/ul-icon-02-hover.png);} .page_blog .select_menu_style ul.card li:first-child a{background-image: url(/wp-content/uploads/image/sub/ul-icon-01-hover.png);} .page_blog .select_menu_style ul.list li + li a {background-image: url(/wp-content/uploads/image/sub/ul-icon-02-hover.png);} .page_blog .list_card .category{ position: absolute; top: 18px;left: 18px; margin-bottom: 0; transform: translate(0);} .page_blog .list_card .card_item .tit{ width: 100%; white-space: pre-wrap; overflow: inherit; word-break: keep-all;} .blog .category {width: 110px;height: 40px; text-align: center; line-height: 40px !important; font-size: 16px !important;;color: #fff !important; font-weight: bold;border-radius: 22px; } .category.data{ background-color: #213c66;} .category.cases{background-color: #ffbf18;} .category.feature{background-color: #00a9e0;} .category.security{background-color: #00a9e0;} .category.management{background-color: #00a9e0;} .category.insight{background-color: #00c9af;} .category.telework{background-color: #00c9af;} .category.tip{background-color: #2d87ff;} .category.event{background-color: #d23cff;} .category.promotion{background-color: #d23cff;} .category.news{background-color: #7288FB;} /* page_blog */ .page_blog .list_card.card .card_item .thumb {height: 176px; border-radius: 20px;} .page_blog .list_card.card .card_item .info_wrap .desc{display: none;} .page_blog .card.list_card>[class*="col-"] {padding-left: 15px; padding-right: 15px;margin-bottom: 30px;} .page_blog .screen-reader-text{display: none;} .page_blog .nav-links{text-align: center;} .page_blog .nav-links .page-numbers {padding:0 10px; color: #a5aabd; font-size: 16px; display: inline-block;} .page_blog .nav-links .page-numbers.current{color: #00a9e0;} .page_blog .nav-links .page-numbers.next,.page_blog .nav-links .page-numbers.prev{display: inline-block; vertical-align: middle; } .page_blog .nav-links .page-numbers.next .right-arrow, .page_blog .nav-links .page-numbers.prev .left-arrow {position: relative;top:-1px; width: 12px; height: 12px; display: block; background-color: #a5aabd; border-radius: 50%; text-indent: -99999px;} .page_blog .nav-links .page-numbers.next .right-arrow:after ,.page_blog .nav-links .page-numbers.prev .left-arrow:after{content:''; display: block; position: absolute; top: 1px;left: 5px; width: 4px; height: 10px; background-size: 4px 10px; } .page_blog .nav-links .page-numbers.prev .left-arrow:after{transform: rotate(-180deg); left: 4px;} .page_blog .pagination{margin-bottom: 85px;} .page_blog .list_card.list [class*="col-"] {width: 100%; float: none;margin-bottom: 50px; display: flex;} .page_blog .list_card.list [class*="col-"] .thumb{ border-radius: 20px; float: left; width: 40%; padding-bottom: 24%;} .page_blog .list_card.list [class*="col-"] .card_item{width: 100%; display: flex;} .page_blog .list_card.list .item_istp .info_wrap {width: 60%; padding-left: 30px; box-sizing: border-box; display: flex; flex-wrap: wrap; float: left;} .page_blog .list_card.list .item_istp .info_wrap .desc{width: 100%;} .page_blog .list_card.list .item_istp .info_wrap .card_item{float: none; width: 100%;} .page_blog .list_card.list .item_istp .info_wrap .tag {margin-top: auto;} .page_blog .list_card.list .item_istp .info_wrap .tag span {display: inline-block; padding: 0 15px; text-align: center; line-height: 36px; border-radius: 18px; border: solid 1px #e7e8eb; color: #636776; font-size: 16px; } .page_blog .list_card.list .item_istp .info_wrap .tag span + span {margin-left: 5px;} .page_blog .list_card.list .item_istp .info_wrap .tag a.card_item{display: none;} /* blog view */ .tac_sns {display: none;} .page_view.blog{padding-top: 0;} .page_view.blog .view_con h1 {font-size: 2em;} .page_view.blog .view_con h2 {font-size: 1.8em;} .page_view.blog .view_con h3 {font-size: 1.6em;} .page_view.blog .view_con h4 {font-size: 1.4em;} .page_view.blog .view_con h5 {font-size: 1.2em;} .page_view.blog .view_con h6 {font-size: 1em;} .page_view.blog .view_con img{height: auto; margin: auto;} .page_view.blog .view_top{width: 100vw; transform: translate(-50%); position: relative; left: 50%; padding-bottom: 0; background-position: 50%; background-size: cover;} .page_view.blog .view_top .tit_sub1{font-size: 43px; color: #000;} .page_view.blog .view_top .tit_sub1 h1{padding: 140px 0 60px 0;} .page_view.blog .view_top .bar_seperate{position: absolute; top: 65px; z-index: 1; left: 50%; margin-left: -55px; margin-top: 0;} .page_view.blog .view_con {border-right: none; border-left: none;} .page_view.blog .tag_sns {display: block; display: flex; padding: 0 0 25px; border-bottom: solid 1px #e1e3e6;} .page_view.blog .tag_sns .tag_list{ display: flex; flex-wrap: wrap;} .page_view.blog .tag_sns .tag_list .tag{min-width: 105px; padding:0 10px; text-align: center; line-height: 36px; border-radius: 18px; border: solid 1px #e7e8eb; color: #636776; font-size: 16px; margin-top: 25px;} .page_view.blog .tag_sns .tag_list .tag + .tag{margin-left: 10px;} .page_view.blog .tag_sns .sns-list{display: flex; margin-left: auto; margin-top: 25px;} .page_view.blog .tag_sns .sns-list li{width: 35px; height: 35px; border: 1px solid #e1e3e6; border-radius: 50%; background-image: url(/wp-content/uploads/image/sub/fb-icon.png); background-position: center; background-size: 20px 20px; background-repeat: no-repeat;} .page_view.blog .tag_sns .sns-list li + li{margin-left: 10px;} .page_view.blog .tag_sns .sns-list li.email{background-image: url(/wp-content/uploads/image/sub/email-icon.png);} .page_view.blog .tag_sns .sns-list li.share{background-image: url(/wp-content/uploads/image/sub/url-icon.png);} .page_view.blog .relative_sec_wrap .list_relative_wrap {padding: 0; width: 100%; margin-left: 0; } .page_view.blog .relative_sec_wrap .list_relative_wrap ul{flex-wrap: wrap; justify-content: start;} .page_view.blog .relative_sec_wrap .btn_slide_arrow {display: none;} .page_view.blog .relative_sec_wrap .list_relative li {width: calc(33.333% - 20px); margin-right: 0; max-width: inherit;} .page_view.blog .relative_sec_wrap .list_relative li + li {margin-left: 30px;} .page_view.blog .relative_sec_wrap .list_relative li:nth-child(3n+1){margin-left: 0;} .page_view.blog .view_bottom{display: none;} .page_view.blog .relative_sec_wrap{background-color: #fff;} .page_view.blog .relative_sec_wrap .tit_sub2 {font-size: 30px; font-weight: bold !important; margin-bottom: 95px;} .page_view.blog .card_thumb_item:after {display: none;} .page_view.blog .card_thumb_item .thumb{border-radius: 20px; border: solid 1px #efefef; padding-bottom: 59%; position: relative; overflow: hidden;} .page_view.blog .card_thumb_item .thumb:after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #fff; background: linear-gradient(180deg,rgba(255,255,255,0) 23%,rgba(51,51,51,0.55) 70%);} .page_view.blog .card_thumb_item .info_wrap{position: static;} .page_view.blog .card_thumb_item .info_wrap .tit {font-size: 20px; font-weight: bold; color: #232429; line-height: 1.5; margin-top: 10px; margin-bottom: 20px; min-height:65px;} .page_view.blog .card_thumb_item .info_wrap .category {display: block; position: absolute; top: 18px; left: 18px;} .aligncenter {width: 100%;} .page_tutorial.page_trial{padding-top: 0;} .page_tutorial.page_trial .hero_wrap.w_bg { min-height: 430px;background-image: url(/wp-content/uploads/sites/2/image/sub/tutorial-bg-img.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} .page_tutorial.page_trial .hero_wrap.w_bg .tit_sub2 {font-size: 20px; font-weight: 300;} /* page_rvbox */ .page_rvbox .btn_pill{padding: 11px 57px;} .page_rvbox .hero_wrap.w_bg { min-height: 430px;background-image: url(/wp-content/uploads/sites/2/image/sub/rv-box-page-top-banner.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;} .page_rvbox .con01 .gr_box_wrap .box{background-image: linear-gradient(to bottom, #ff8548, #ffd26c); box-shadow: 2px 2px 10px 0 rgba(171, 171, 171, 0.5); font-size: 18px; padding: 30px 13px 0 13px; min-height: 300px;} .page_rvbox .con01 .gr_box_wrap .col-xs-3:nth-child(2) .box{background-image: linear-gradient(to bottom, #4bc6b0, #a3eaf0);} .page_rvbox .con01 .gr_box_wrap .col-xs-3:nth-child(3) .box{background-image: linear-gradient(to bottom, #4885ff, #96ddff);} .page_rvbox .con01 .gr_box_wrap .col-xs-3:nth-child(4) .box{background-image: linear-gradient(to bottom, #6648ff, #8fadff);} .page_rvbox .con01 .gr_box_wrap .box span{text-decoration: underline;} /* 230607 rvbox_ renewal */ [lang="ko-KR"] .page_rvbox .hero_wrap .btn_solid{padding:10px 63px;line-height:1.42;border-radius:28px} [lang="ko-KR"] .page_rvbox .tit2{margin-bottom:40px} .page_rvbox .con_no_install .tit2 + img{width:66.67%;max-width:800px;height:auto} .page_rvbox .con_no_install .rvbox_feature_list{gap:24px;margin-right:-24px} .page_rvbox .con_no_install .rvbox_feature_list [class^="item"]{width:calc(100%/3 - 24px);height:240px;padding:0 32px;font-weight:400;line-height:1.44;display:flex;align-items:center;text-align:center;justify-content:center;color:#FFFFFF;background:no-repeat center / cover} .page_rvbox .con_no_install .rvbox_feature_list [class^="item"] p strong{font-size:122.22%} .page_rvbox .con_no_install .rvbox_feature_list .item01{background-image:url(/wp-content/uploads/image/sub/bg_no_install.png)} .page_rvbox .con_no_install .rvbox_feature_list .item02{background-image:url(/wp-content/uploads/image/sub/bg_no_install_easy.png)} .page_rvbox .con_no_install .rvbox_feature_list .item03{background-image:url(/wp-content/uploads/image/sub/bg_no_install_4k.png)} .page_rvbox .con_no_install .rvbox_feature_list .item04{background-image:url(/wp-content/uploads/image/sub/bg_no_install_liveview.png)} .page_rvbox .con_no_install .rvbox_feature_list .item05{background-image:url(/wp-content/uploads/image/sub/bg_no_install_onoff.png)} .page_rvbox .con_no_install .rvbox_feature_list .item06{background-image:url(/wp-content/uploads/sites/2/image/sub/bg_no_install_compatibility.png)} .page_rvbox .con_usecase{background-color:#F6F6F6} .page_rvbox .rvbox_usecase_list{gap:24px;align-items:stretch} .page_rvbox .rvbox_usecase_list li{width:calc(100%/2 - 24px);background:#E0EBFF} .page_rvbox .rvbox_usecase_list li>p{display:flex;align-items:center;justify-content:center;height:270px;padding:0 9.375%;background-color:#fff} .page_rvbox .rvbox_usecase_list li>p img{width:100%;height:auto} .page_rvbox .rvbox_usecase_list li dl{padding:20px 9% 30px;text-align:center;background:#E0EBFF;font-weight:400;line-height:1.44} .page_rvbox .rvbox_usecase_list li dl dt{margin-bottom:12px;font-weight:700;line-height:1.18} .page_rvbox .con_how_to{background-color:#273B63} .page_rvbox .con_how_to .box{padding:56px 6.25% 0} .page_rvbox .con_how_to figure img{width:100%;max-width:none;height:auto} .page_rvbox .con_how_to figcaption{margin:82px -6.25% 0;padding:30px 32px;font-weight:400;line-height:1.42;background:#F3F6FD} .page_rvbox .con_rvbox_spec table{width:100%;max-width:997px;margin:auto;line-height:1.5;border-bottom:1px solid #a6aabb} .page_rvbox .con_rvbox_spec table th,.page_rvbox .con_rvbox_spec table td{padding:6px 0 5px;vertical-align:middle} .page_rvbox .con_rvbox_spec table thead tr th{background-color:#7288fb;color:#fff} .page_rvbox .con_rvbox_spec table thead tr th+th{border-left:1px solid #fff} .page_rvbox .con_rvbox_spec table tbody tr+tr{border-top:1px solid #A6AABB} .page_rvbox .con_rvbox_spec table tbody tr td{text-align:center;border-right:1px solid #A6AABB} .page_rvbox .con_rvbox_spec table tbody tr td:last-child{border-right:none} /* multi */ .page_multi .mw100{display: block;} .page_multi .con03 .mw100{max-width: 934px; width: 100%;} .page_multi .tit_sub1{font-weight: 400 !important; line-height: 1.4; margin-bottom: 50px;} .page_multi .hero_wrap.w_bg{background-image: url(/wp-content/uploads/sites/2/image/sub/multi-bg.png);} .page_multi .hero_wrap.w_bg:before {display: none; } .page_multi .tit2 { margin-bottom: 0;} .page_multi .con02 .box h4{width: 100%; margin-top: 20px; font-weight: bold !important;} .page_multi .con03 div[class*="tit-"] .tit_sub1{font-weight: 500 !important;} .page_multi .con03 .box-ul{background-color: #f3f6fd; padding: 20px 25px 20px 45px; max-width: 780px; width: 100%; margin: auto; text-align: left; margin-top: 20px;} .page_multi .con03 .box-ul li{font-size:18px ;} .page_multi .con03 .box-ul li::before{content: '1'; text-align: center; font-size: 16px;display: inline-block; width: 22px; height: 22px; line-height: 22px; background-color: #4885ff; color: #fff; border-radius: 50%; margin-right: 6px;} .page_multi .con03 .box-ul li:nth-child(2)::before{content: '2';} .page_multi .con03 .box-ul ul{display: flex; justify-content: center;} .page_multi .con03 .box-ul li+li{margin-left: 20px; padding-left: 45px; background-repeat: no-repeat; background-size: 24px 16px; background-position: center left; background-image: url(/wp-content/uploads/sites/2/image/sub/mt-arrow.png);} .page_multi .con03 .tit-01 .box-ul ul{display: block;} .page_multi .con03 .tit-01 .box-ul li+li{margin-top: 4px; padding-left: 0; margin-left: 0; background: none;} .page_multi .con03 div[class*="tit-"] .embed_wrap{max-width: 980px; margin: auto;} /* .page_multi .con03 .tit2 {margin-bottom: 50px; } */ .page_multi .con03 h4.tit_sub1 {margin-bottom: 0; } .page_multi .con04 .faq li{display: flex;max-width: 980px; margin: auto; padding:30px 40px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 10px 0 rgba(35, 36, 41, 0.1); align-items: center;;} .page_multi .con04 .faq li+li{margin-top: 20px;} .page_multi .con04 .faq li .num{font-size: 60px; font-weight: 100;color: #4885ff;} .page_multi .con04 .faq li .txt{text-align: left; margin-left: 40px;} .page_multi .con04 .faq li .txt .tit_sub1{ font-weight: 500 !important; color: #4885ff; margin-bottom: 0;} .page_multi .con04 .faq li .txt p{margin-top: 4px;} .page_multi .con04 .tit2 { margin-bottom :50px;} /* 일문 교육용 텔레워크 */ .page_telework [class*=col-] { padding-right: 10px;padding-left: 10px; margin-bottom: 16px;} .page_telework .hero_wrap { background-image: url(/wp-content/uploads/sites/4/image/sub/img_telework_mainbg.png);} .page_telework .tit { font-size: 32px; font-weight: 700; margin-bottom: 32px; text-align: center; line-height: 1.5;} .page_telework .desc { font-size: 18px; color: #232429; text-align: center;} .page_telework .con1 .intro_item { font-size: 22px; font-weight: 700; background-color:#4885FF; color: #fff; padding: 20px 0; border-radius: 16px; text-align: center; margin-bottom: 12px;} .page_telework .con2 { position: relative; background-image: url(/wp-content/uploads/sites/4/image/sub/img_telework_bg.png); background-size: cover;} .page_telework .con2 .tit { margin-bottom: 58px;} .page_telework .con2 ul { width: 600px; margin: 0 auto;} .page_telework .con2 ul li { height: 72px; background-color: #fff; border: 1px solid #4885ff; border-radius: 16px; padding: 20px 0; margin-bottom: 18px;} .page_telework .con2 .icon {position: absolute; width: 280px; height: 382px; bottom: -116px; left: 21px;} .page_telework .con3 .merit_item { border: 1px solid #D2DAE9; border-radius: 20px;} .page_telework .con3 .merit_item .merit_txt { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 4px;} .page_telework .con3 .merit_item p { margin-bottom: 35px; line-height: 1.5;} .page_telework .con4 { background-color: #f6f7f9;} .page_telework .con4 .tit {margin-bottom: 58px;} .page_telework .con4 .reason_box { margin-top: 25px;} .page_telework .con4 .reason_box .reason_tit { font-size: 24px; font-weight: 700; line-height: 1.5; margin-bottom: 12px;} .page_telework .con4 .reason_box p { font-size: 18px; line-height: 1.5;} .page_telework .con4 .reason_box p.info { font-size: 14px; margin-top: 15px;} .page_telework .con5 .tit { margin-bottom: 58px; } .page_telework .con5 .step { display: inline-block; font-size:18px; font-weight: 700; line-height: 1; color: #fff; background-color: #1DA1DF; border-radius: 32px; padding: 7px 20px; } .page_telework .con6 { background-color: #f6f7f9;} .page_telework .con6 .security_box { background-color: #fff; border: 1px solid #D2DAE9; border-radius: 20px; } .page_telework .con6 .security_box img { border-top-left-radius: 20px; border-top-right-radius: 20px;} .page_telework .con6 .security_box .security_item {padding: 25px 0 24px 0;} .page_telework .con6 .security_box .security_item .security_txt { font-size:20px; font-weight:700; line-height: 1.5; margin-bottom: 25px;} .page_telework .con7 .ok { font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 12px;} @media all and (min-width: 767px) { .page_rvbox{font-size:22px;} .page_rvbox .btn_pill{font-size:22px;} .page_rvbox .con_no_install .rvbox_feature_list [class^="item"]{font-size:18px} .page_rvbox .rvbox_usecase_list li dl{font-size:18px} .page_rvbox .rvbox_usecase_list li dl dt{font-size:22px} .page_rvbox .con_how_to figcaption{font-size:18px} .page_rvbox .con_rvbox_spec table{font-size:22px} } @media all and (max-width: 768px) { .page_rvbox .con_no_install .tit2 + img{width:100%;} .page_rvbox .con_no_install .rvbox_feature_list [class^="item"]{width:calc(100%/2 - 24px)} .page_rvbox .con_how_to figcaption{margin-top:40px} .page_rvbox .con_rvbox_spec .tit2+img{width:100%;height:auto;} } @media all and (max-width: 640px) { .page_rvbox .con_no_install .rvbox_feature_list{flex-direction:column;margin-right:0;gap:12px} .page_rvbox .con_no_install .rvbox_feature_list [class^="item"]{width:100%;min-height:160px;height:auto} .page_rvbox .rvbox_usecase_list{flex-direction:column;gap:12px} .page_rvbox .rvbox_usecase_list li{width:100%} .page_rvbox .rvbox_usecase_list li>p{height:auto;min-height:180px} } .page_rvbox .con02 .col-xs-6 .box > p {padding: 24px;font-size: 28px; color: #fff; background-color: #00a9e0;} .page_rvbox .con02 .col-xs-6 + .col-xs-6 .box > p { background-color: #4885ff;} .page_rvbox .con02 .col-xs-6 li{padding-left: 25px; position: relative;} .page_rvbox .con02 .col-xs-6 li::before{content:'•'; position: absolute; left: 0;top: 0;} .page_rvbox .con02 .col-xs-6 li strong{text-decoration: underline;} .page_rvbox .con02 .info-box{padding: 20px 30px; background-color: #f7f9fc; font-size: 18px; line-height: 1.7;} .page_rvbox .con03 .gr_list_wrap ul li {display: flex; width: 100%; height: 100px;} .page_rvbox .con03 .gr_list_wrap ul li .tit{display: flex; height: 100%; width: 42%; max-width: 488px; background-color: #f0f5ff; position: relative;} .page_rvbox .con03 .gr_list_wrap ul li .tit::after{content: '';display: block; position: absolute; top: 0; right: -40px; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 20px solid #f0f5ff; border-right: 20px solid transparent;} .page_rvbox .con03 .gr_list_wrap ul li:nth-child(2n) .tit{background-color: #ecf7f4;} .page_rvbox .con03 .gr_list_wrap ul li .cont {display: flex; height: 100%; width: 63%; max-width:711px; background-image: linear-gradient(98deg, #1cb5e0, #383896); color: #fff;} .page_rvbox .con03 .gr_list_wrap ul li:nth-child(2n) .cont{ background-image: linear-gradient(98deg, #0cae77, #0067b3 99%);} .page_rvbox .con03 .gr_list_wrap ul li p{margin: auto; } .page_rvbox .con04 .row +.row {display: flex; margin-left: 0; margin-right: 0;} .page_rvbox .con04 .row:nth-child(2n) .text-center {} .page_rvbox .con04 .row img{display: block;} .page_rvbox .con04 .row .box-img{padding: 0;} .page_rvbox .con04 .row .box-txt {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #f9fbff;} .page_rvbox .con04 .row .box-txt .tit{font-size: 28px;} .page_rvbox .con04 .row:nth-child(2n+1) .box-txt {background-color: #e0ebff;} .page_rvbox .con05 table{width: 100%; max-width: 886px; margin: auto;} .page_rvbox .con05 table thead tr th{background-color: #7288fb;color: #fff;} .page_rvbox .con05 table thead tr th +th{border-left: 1px solid #fff;} .page_rvbox .con05 table tbody tr + tr{border-top: 1px solid #a6aabb;} .page_rvbox .con05 table tbody tr td{text-align: center; border-right: 1px solid #a6aabb;} .page_rvbox .con05 table tbody tr td:last-child {border-right: none;} .page_rvbox .con05 table{border-bottom: 1px solid #a6aabb;} /* New 원격제어 모드 */ .bg_f5fbfe{background-color: #f5fbfe;} .page_newviewer{font-size: 18px;} .page_newviewer .hero_wrap.w_bg { background-image: url('/wp-content/uploads/image/sub/newviewer-bg-img-scaled.jpg');} .page_newviewer .hero_wrap p{font-size: 24px;} .page_newviewer .tit2{ font-weight: 500 !important; } .page_newviewer .tit3{font-weight: 500; margin-top: 80px;} .page_newviewer .tit3 .icon{display: block; height: 55px;} .page_newviewer .con01 {background-color: #273B63; color: #fff;} .page_newviewer .con01 .tit2{margin-bottom: 15px;} .page_newviewer .con01 .container{padding-top: 0; padding-bottom: 0;} .page_newviewer .con01 .btns_wrap button:before{margin-bottom: 10px; font-size:16px;} .page_newviewer .con01 .btns_wrap button{ line-height: 1; font-size: 16px; width: 500px; font-weight: bold; } .page_newviewer .con01 .btns_wrap button em{font-size: 16px; display: block; margin: 0 auto; margin-bottom: 7px; line-height: 25px;} .page_newviewer .con01 .btns_wrap button .deco{height: 86px; margin-bottom: 3px; } .page_newviewer .con01 .btns_wrap button[data-target="uiux"] .deco{ background-image: url(/wp-content/uploads/image/sub/newviewer-01.png); } .page_newviewer .con01 .btns_wrap button[data-target="multi"] .deco{ background-image: url(/wp-content/uploads/image/sub/newviewer-02.png); } .page_newviewer .con01 .btns_wrap button[data-target="setting"] .deco{ background-image: url(/wp-content/uploads/image/sub/newviewer-03.png); } .page_newviewer .con01 .btns_wrap button[data-target="keyboard"] .deco{ background-image: url(/wp-content/uploads/image/sub/newviewer-04.png); } .page_newviewer .con05 .col-md-5 , .page_newviewer .con03 .col-md-5 {padding-left: 30px;} .page_newviewer .con06 {padding-top: 120px; } .page_newviewer .con06 .tb_type_se1 thead tr th{background-color: #273b63; color: #fff; padding: 14px 0;} .page_newviewer .con06 .tb_type_se1 tbody tr th {font-weight: 500;} .page_newviewer .con06 .tb_type_se1 tbody tr th,.page_newviewer .con06 .tb_type_se1 tbody tr td{border-bottom: 1px solid #a6aabb; vertical-align: middle; padding: 16px;} .page_newviewer .con06 .tb_type_se1 tbody tr td{border-left: 1px solid #a6aabb;} @media all and (max-width:768px) { #floatingBtnWrap{display: none;} .page_view.blog .view_top .bar_seperate{top: 50px;} .blog .category{font-size: 14px !important; height: 30px; line-height: 30px !important; width: 100px;} .page_view.blog .view_top .tit_sub1 h1{ font-size: 28px; padding: 95px 0 55px 0;} .page_view.blog .tag_sns{flex-wrap: wrap; padding: 10px 0;} .page_view.blog .tag_sns .tag_list{width: 100%;} .page_view.blog .tag_sns .sns-list{margin-top: 10px;} .page_view.blog .relative_sec_wrap{margin-top: 40px;} .page_view.blog .relative_sec_wrap .tit_sub2{ font-size: 17px; margin-bottom: 40px;} .page_view.blog .relative_sec_wrap .list_relative{overflow: inherit;} .page_view.blog .relative_sec_wrap .list_relative li{width: calc(50% - 6px);} .page_view.blog .relative_sec_wrap .list_relative li+li{margin-left: 12px;} .page_view.blog .relative_sec_wrap .list_relative li:nth-child(3n+1){margin-left: 12px;} .page_view.blog .relative_sec_wrap .list_relative li:nth-child(2n+1){margin-left: 0;} .page_view.blog .card_thumb_item .info_wrap .tit{font-size: 16px; margin-top: 10px;} } /*-------------------------------------------------------------------2 @ MediaQuery -------------------------------------------------------------------*/ @media all and (min-width:768px) { .header #gnbWrap + .gnb_btns .login_wrap :hover{box-shadow:none} #flotingBtn{display: none;} .header.is_scroll #menu-main > li.w_btn .btn_solid:hover{background-color:#333 !important} footer .select_lang_wrap ul li a:hover{color:#1da1df} .more_box:hover a:after{right:30px} .page_mobile .con2 .imgs button:hover { background:url(/wp-content/uploads/image/common/btn_play_hover.png) no-repeat center} .page_mobile .box_icon_wrap{display:flex; justify-content:stretch;} .page_mobile .box_icon_wrap [class*="col-"] {display: flex;} .page_rv_se .guide_box li .btn_solid:hover {background-color:#0096F2} .page_download .guide_box li .btn_solid:hover {background-color:#0096F2} } @media all and (min-width:992px) { .container{width:1000px} .page_pricing .price_box_wrap .price_box .price_wrap{height: 172px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;} .page_pricing .price_box_wrap .price_box .price_wrap p{ width: 100%;} } @media all and (min-width:1230px) { .header #menu-main > li > a:hover{color:#4885ff; font-weight: bold;} .container{width:1230px} .container.wide{width:1230px} .header #menu-main > li:hover > .sub-menu{display:block} } @media all and (max-width:1230px) { /* layyout */ #contentsWrap{padding-top: 55px;} #startRemoteView{display: none;} .header{overflow:visible; position:fixed; top:36px; left:0; z-index:20; width:100%; border-bottom:1px solid #edeeee; background-color:#fff !important;} .header .container{position:relative} .header .logo{display:inline-block; text-align:center; line-height:55px; margin: 0 auto 0 50px;} .header .logo img{width:150px} .header .mobile_wrap{position:absolute; left:0; top:0; z-index:5; padding:9px 8px 6px 28px; display:inline-block; line-height:1} .header .mobile_wrap .btn_solid{padding:3px 15px 3px; margin-top:5px; margin-right:5px; font-size:15px; vertical-align:top} .header #gnbWrap{display:none; position:fixed; top: 0; padding-top: 85px; left:0; z-index:10; float:none; overflow:hidden auto; width:100%; max-width: 310px; margin:0; height:100vh; max-height:100vh; background-color:#232429} .header #menu-main > li{float:none; } .header #menu-main > li > a{display:block; padding:12px 40px; font-size:15px; font-weight:bold; line-height:1.5; border-top:none;color: #fff;} .header #menu-main li.menu-item-has-children > a {position:relative; color: #fff;} .header #menu-main li.menu-item-has-children > a:after {content:''; position:absolute; top:50%; right:60px; display:block; border:2px solid #c5c5c5; border-right:none; border-top:none; width:10px; height:10px; transform:translateY(-50%) rotate(-45deg); -webkit-transform:translateY(-50%) rotate(-45deg); -moz-transform:translateY(-50%) rotate(-45deg); -ms-transform:translateY(-50%) rotate(-45deg); -o-transform:translateY(-50%) rotate(-45deg)} .header #menu-main li.menu-item-has-children.active > ul.sub-menu{display:block; width:100%} .header #menu-main li.menu-item-has-children.active > a:after {margin-top:3px; transform:translateY(-50%) rotate(135deg); -webkit-transform:translateY(-50%) rotate(135deg); -moz-transform:translateY(-50%) rotate(135deg); -ms-transform:translateY(-50%) rotate(135deg); -o-transform:translateY(-50%) rotate(135deg)} .header .gnb + .gnb_btns{float:none; width:100%; margin:0; padding:0} .header .gnb + .gnb_btns .btns_wrap{overflow:hidden; padding:15px 40px; margin:0; border:none} .header .gnb + .gnb_btns .btns_wrap a{font-size: 16px; padding: 6px 14px;} .header .gnb + .gnb_btns .btns_wrap a.bg_blue:hover{background-color:#2856B3 !important; border-color:#2856B3 !important;} .header .gnb + .gnb_btns .btns_wrap .login_wrap{display:none; padding-top: 24px; border-top: 0.5px solid #646775; margin-top: 24px;} .header .gnb + .gnb_btns .btns_wrap .info_wrap{display: none;} .header .gnb+.gnb_btns .btns_wrap .login_wrap a {flex:1; padding:5px 15px; line-height:20px; text-align:center; background:#f0f0f0; color:#333; text-transform:uppercase; border-radius:100px; -webkit-border-radius:100px; -moz-border-radius:100px; -ms-border-radius:100px; -o-border-radius:100px} .header .gnb+.gnb_btns .btns_wrap .login_wrap a.link_remotepc {margin-right:1%; background:#53585a; border-color:#53585a; color:#fff} .header .gnb+.gnb_btns .btns_wrap .login_wrap a.link_login {background:transparent; border:1px solid #4885ff; color:#4885ff; display: inline-block;} .header #menu-main > li .sub-menu{display:none; position:relative; top: 0; z-index:1; width:100%; padding: 0 60px; background-color:#232429; box-shadow:none} .header #menu-main > li > .sub-menu li a::after{display: none;} .header .sub-menu > li > a[aria-current="page"]{ background-color:#232429 !important; } .header #menu-main > li .sub-menu li + li{border-color:#e6e6e6} .header #menu-main > li > .sub-menu > li > a{padding:8px 0 8px 0;font-weight: 400;} .header #menu-main > li > .sub-menu > li + li> a{border-top: solid 0.5px #646775;} .header #menu-main li.star a::before{left: -25px; top: 6px;} .header #menu-main li.new a::before{left: -19px; top: 6px;} .header #menu-main > li > .sub-menu > li.active > .sub-menu{border-top:none} /* 메뉴 리뉴얼 */ .header #menu-main > li.has-depth1:hover > .sub-menu {display: none;} .header #menu-main > li.has-depth1 > .sub-menu {display: none;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu {display: block; padding: 0;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > a.rv-menu-item {font-size: 15px; line-height: 23px; border-color: #fff; border-top: none;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li + li {padding: 5px 0 0 0 ; margin-top: 0; width: 213px;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 > .sub-menu > li.has-depth3 > a {font-size: 14px; line-height: 22px; color: #fff;} .header #menu-main > li.has-depth1 > .sub-menu > li + li {padding-top: 15px;} .header #menu-main > li.has-depth1 > .sub-menu > li.has-depth2 {width: 100%;} .header #menu-main > li.has-depth1 > .sub-menu {box-shadow: none; padding: 20px 40px;} .header .info_wrap{display:block; padding:15px 40px; font-size:14px; color:#fff;font-size: 16px;} .header .info_wrap [class*="link_"], .header .info_wrap a{font-size:inherit; color:inherit} .header .info_wrap ul li+ li{margin-top: 24px;} .header .info_wrap ul li a{line-height:1.5; height:42px} .header.active #gnbWrap{display:block} .header.active .gnb{float:none; padding-top: 20px;} .header.active .container:after{content:''; position:fixed; z-index:5; left:0; top: 0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.6)} .header.active .mobile_wrap{ background-color: #232429; width: 310px; z-index: 20;} .header #gnbWrap .gnb_btns{display: block;} .header #gnbWrap + .gnb_btns .login_wrap{padding: 10px 0;} .header .container > .gnb_btns .info_wrap ,.header .container > .gnb_btns .bg_blue{display: none;} .page_rv_se .sec2 ul li + li {margin-left:0} .sub_page .con_cta .col-sm-3{width: 25%; overflow: hidden; height: 204px;} .sub_page .con_cta .col-sm-9{padding: 30px 15px; color: #f2f2f2; position: relative;} /* 20210928 모바일제어 */ .page_mobile .cont1 .col-sm-6 img {width: 100%;} .page_mobile .cont1 .col-sm-6.phone img{width: 80%;} .page_mobile .cont1 .app_btn{width: 48%;} .page_mobile .cont1 .col-sm-12{padding-right: 0;} .page_mobile .cont3 .col-lg-12 .btn_solid{max-width: 45%;} .page_mobile .cont4 .col-lg-8{text-align: center; margin-top: 20px;} .page_mobile .cont4 .h_center img{width: 95%;} .page_mobile .cont4 .h_center .col-sm-3 img{width: 85%;} .page_mobile .cont6 .col-sm-5{width: 40%;} .page_mobile .cont6 .col-sm-7{width: 59%;} .page_mobile .cont7 .col-sm-3{width: 25%;overflow: hidden; height: 204px;} .page_mobile .cont7 .col-sm-9 .info_txt{width: 80%;word-break: keep-all;} /* page_rvbox */ .page_rvbox .con01 .gr_box_wrap .box{font-size: 16px;} .page_overview .con03 .box{padding: 50px;} .page_overview .con01 .col-xs-3 .box{height: 26vw;} .page_overview .con03 .gr_list_wrap ul li .cont p br{display: none;} } @media (min-width:980px) and (max-width:1230px) { :lang(en-US) .page_trial .btn_wrap p {height: 45px;} /* 2301 */ .page_pricing .con00 .auto_box_wrap{padding: 74px calc(50% - 390px);} .page_pricing .con00 .auto_box_wrap .auto_box .auto-cont{margin-left: 70px;} } @media all and (max-width:991px) { /* layyout */ .header .container, #pageTitWrap .container{padding: 0 15px;} .header #gnbWrap + .gnb_btns .login_wrap{right: 15px;} .header .mobile_wrap{padding-left: 6px;} /* content */ .type_renewal .division_wrap:not(.no-991)>div{float:none; width:100% !important; padding-left:0 !important; padding-right:0} /* 01 */ .page_overview .tit2{font-size: 24px; margin-bottom: 10px;} .page_overview .tit3{font-size: 20px; } .page_overview .sub-info{font-size: 18px; margin-bottom: 36px;} .page_overview .btn_pill{font-size: 18px;padding: 10px 35px;} .page_overview .w_bg .tit1{font-size: 32px;} .page_overview .w_bg .tit_sub2{font-size: 18px;} .page_overview .info{font-size: 14px;} .page_overview .con01 .tit-logo{width: 60%; max-width: 350px;margin-bottom: 10px;} .page_overview .con01 .col-xs-3 .box{height: 28vw;} .page_overview .con01 .col-xs-3 .box p{ font-size: 16px;} .page_overview .con03 .gr_list_wrap ul li .tit{font-size: 18px; width: 27%;} .page_overview .con03 .gr_list_wrap ul li .cont{font-size: 16px;} .page_overview .con04 .col-xs-12 h3{font-size: 18px;} .page_overview .con04 .col-xs-4 .box h4{font-size: 16px;} .page_overview .con04 .col-xs-4 .box p{font-size: 14px; padding:0 15px 15px 15px;} .page_overview .con05 .grp-box .hyundai{ max-width: 50%; margin-bottom: 30px;} .page_overview .con05 .grp-box .quotes{font-size: 16px; padding: 29px 0;} .page_overview .con05 .grp-box .quotes::after, .page_overview .con05 .grp-box .col-xs-7 .quotes::before {width: 38px; height: 23px;} .page_overview .con06 .sub-info{font-size: 18px;} .page_overview .con07 .box h4{font-size: 16px; padding: 10px;} .page_management [class*='con0'], .page_management [class*='-push-'] {text-align: center;} .page_management [class*='con0'] .col-md-7 {margin-top: 80px;} .page_management [class*='con0'] h2{font-size:18px;} .page_management [class*='con0'] h2 + p{min-height:auto;} .page_management [class*='con0'] h3{font-size:18px;} .page_management [class*='con0'] h3 + p{min-height:auto;} .page_management [class*='con0'] a.btn_solid{min-width: 402px; font-size:18px;} .page_management .con05 .btns_wrap{flex-flow:column;align-items:center;} .page_management .con05 .btns_wrap a{max-width: none; line-height:1.55;} .page_management .con05 .btns_wrap a + a{margin-top: 10px;} .page_lock .con02 .col-md-4{text-align:center} .page_mobile .con7 dt>div { height:auto; padding:20px 0; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px} .page_mobile .con7 .row { min-height:auto} .page_mobile .con7 dt small { font-size:80%} .page_rv_appliance .con04 ul{flex-flow:column} .page_rv_appliance .con04 ul li, .page_rv_appliance .con04 ul li.flex2{flex:1; max-width: none; padding: 0; margin: 0; border: none;} .page_rv_appliance .con04 ul li+li{margin-top:40px;} .page_rv_se .con01 .solution_wrap { flex-direction:column; height:auto} .page_rv_se .con01 .solution_wrap .solution1 { order:1; width:100%; height:280px; margin:0 0 10px; background-size:auto 100%; background-position:center bottom; background-color:#010920} .page_rv_se .con01 .solution_wrap .left { margin-bottom:10px} .page_rv_se .con01 .solution_wrap > div:not(.solution1) { width:100%; order:2; display:flex} .page_rv_se .con01 .solution_wrap > div > div:not(.solution1) { width:calc(50% - 5px); height:280px} .page_rv_se .con01 .solution_wrap .solution2, .page_rv_se .con01 .solution_wrap .solution4{ margin-right:10px; margin-bottom:0} .page_rv_se .con02 ul li { flex:1; flex-basis: calc(50% - 15px); max-width:calc(50% - 15px)} .page_rv_se .con06 ul li { flex:1; flex-basis: calc(50% - 7.5px); max-width:calc(50% - 7.5px)} .page_rv_se .con08 ul li{width: calc(33.333% - 16px);} .page_rv_se .con08 ul li + li{margin-left: 14px; } .page_rv_se .con08 ul li img{width: 100%; height: auto;} .page_control .con_logo ul li{width: calc(33.333% - 16px);} .page_control .con_logo ul li + li{margin-left: 14px; } .page_control .con_logo ul li img{width: 100%; height: auto;} .page_control .con_reverse .row {flex-direction: column; margin-bottom: 30px;} .page_control .con_reverse .row .col-md-push-7 .text_wrap {margin-left: 0;} .page_control .con_reverse .row .text_wrap { margin-bottom: 20px;} /* 02 */ .page_vdi .division_wrap > div{float:none} .page_vdi .con01 .division_wrap div:first-of-type{width:100%; margin-left:0; margin-bottom:40px} .page_vdi .con01 .division_wrap div:last-of-type{width:100%} .page_chromebook .con01 .division_wrap div:first-of-type{text-align:center} .page_chromebook .con02 .division_wrap div{text-align:center} .page_chromebook .con02 .division_wrap div.img+div h4{margin-top:20px !important;} .page_chromebook .con02 .fl_r{float:none !important;} .page_chromebook .con03 .box_wrap.w_deco dt{width:36.7%} .page_chromebook .con03 .box_wrap.w_deco dd{width:54.7%} .page_chromebook .con06 a{right:15px; width:40%} /* 03 */ .page_pricing_server .box_wrap dt .label { display: block; width: 120px; margin-right:0; margin-bottom: 5px;} .page_purchase .con04 .list_box > li{padding:0 10px} /* 2301 */ .page_pricing .con00 .auto_box_wrap{padding: 74px calc(50% - 383px);} .page_pricing .con00 .auto_box_wrap .auto_box .auto-cont{margin-left: 50px;} .page_pricing .price_box_wrap > ul:not(.slick-slider){flex-wrap: wrap; } .page_pricing .price_box_wrap > ul:not(.slick-slider) .price_box{ flex: none; max-width: inherit; width: calc(50% - 10px); } .page_pricing .price_box_wrap > ul:not(.slick-slider) .price_box + .price_box{margin-left: 20px;} .page_pricing .price_box_wrap > ul:not(.slick-slider) .price_box:nth-child(2n+1){margin-left: 0;} .page_pricing .price_box_wrap > ul:not(.slick-slider) .price_box + .price_box + .price_box{margin-top: 20px;} /* 06 */ .page_trial .box_wrap.complete_desc .list_box{ flex-wrap:wrap; } .page_trial .box_wrap.complete_desc .list_box > li, .page_trial .box_wrap.complete_desc .list_box > li.wide{ flex:1 100%; max-width:none; } .page_trial .box_wrap.complete_desc .list_box > li + li { margin-top:20px;} .page_government .con05 .demo-box .demo-box-inner .left .box-tit{font-size: 22px;} .page_government .con05 .demo-box .demo-box-inner .left .box-tit+p{font-size: 16px;} .page_government .con05 .demo-box .demo-box-inner .right{width: 220px;} .page_government .con05 .demo-box .demo-box-inner .right span{font-size: 18px;} .page_security.page_management [class*='con0'] .col-md-5{margin-top: 20px;} /* page_rvbox */ .page_rvbox .con01 .gr_box_wrap .col-xs-3{width: 50%;} .page_rvbox .con01 .tit2 + img{width: 75%; max-width: 800px; height: auto;} .page_rvbox .con01 .gr_box_wrap .col-xs-3 + .col-xs-3 +.col-xs-3{margin-top: 20px;} .page_rvbox .con03 .gr_list_wrap ul li {font-size: 18px;} .page_rvbox .con04 .row .box-txt{font-size: 18px;} .page_rvbox .con04 .row .box-txt .tit{font-size: 22px;} .page_rvbox .con05 .tit2 + img{width: 70%; max-width: 622px; height: auto;} .page_newviewer .col-md-7 img{display: block;} .page_newviewer .col-md-5{text-align: center;} .page_newviewer .tit3{margin-top: 20px;} .page_newviewer .tit3 .icon{margin: auto;} .page_telework .con2 .icon {display: none;} } @media (max-width: 880px){ .num_list_box ul li{font-size: 14px;} /* 2301 */ .page_pricing .con00 .auto_box_wrap{padding: 74px calc(50% - 350px);} .page_pricing .con00 .auto_box_wrap .auto_box .auto-tit{padding-left: 50px; width: 190px; background-size: 40px;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-tit p{ font-size: 26px; line-height: 1;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-tit span{ font-size: 16px;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-cont{margin-left: 35px;} } @media all and (max-width:767px) { body.end{position: relative;} /* #topMenuWrap{display: none;} */ #flotingBtn{display:none; position: fixed; bottom: 20px; right: 20px; z-index: 20; text-align: right; transition: all .4s;} #flotingBtn.active {bottom: 20px;} #flotingBtn.end{position: absolute; bottom: 520px;} #flotingBtn.active.end{ bottom: 550px;} #flotingBtn .contact{display: block; font-size: 14px; background-color: #fff; text-align: center; color: #4885ff;border-radius: 20px;box-shadow: 1px 1px 10px 0 rgba(100, 103, 117, 0.5);border: solid 1.5px #4885ff; padding: 12px; line-height: 1;} #flotingBtn .call-icon{margin-left: auto; width: 62px; display: block;} #flotingBtn .call-icon img{width: 62px; display: block;} #flotingBtn .call-menu { margin-right: 7px; position: relative; overflow: hidden; margin-top: -5px;} #flotingBtn .call-menu ul {display: flex; position: relative; transition: all .4s; transform: translateX(100%); padding: 0 5px 5px 5px;} #flotingBtn.active .call-menu ul{transform: translateX(0);} #flotingBtn .call-menu ul li + li{margin-left: 6px;} #flotingBtn .call-menu a{display: block; font-size: 14px; background-color: #fff; text-align: center; color: #4885ff;border-radius: 20px;box-shadow: 1px 1px 10px 0 rgba(100, 103, 117, 0.5);border: solid 1.5px #4885ff; padding: 12px; line-height: 1;} #footerMenu{display:none} /* .header{top: 0;} */ .header .logo{margin: auto;} .header #gnbWrap + .gnb_btns .login_wrap{display: none;} .header.active .gnb{padding-top: 60px;} footer{text-align:center} footer .container>div{overflow:visible} footer .lang_wrap, footer .sns_wrap{position:relative; top:0; right:0} footer .sns_wrap{overflow:hidden; display:inline-block; width:auto; margin:0 0 10px} footer .sns_wrap a{width:40px; height:40px; line-height:38px; background-size:auto 39px} footer .sns_wrap a.tw {background-position:-44px center} footer .sns_wrap a.yt {background-position:-89px center} footer .sns_wrap a.blog {background-position:-133px center} footer .sns_wrap a + a{margin-left:10px} footer .lang_wrap > span{display:none} footer .download_wrap {float:none; margin:20px auto 0 !important} footer .crop_info_wrap{font-size:13px} footer .copyright_wrap{padding:20px 0; font-size:13px} footer .agreement_menu_wrap li a{display:block} footer .agreement_menu_wrap { overflow: hidden; display: flex; flex-wrap: wrap; gap: 10px; float:none; justify-content: center; margin-bottom: 15px;} footer .agreement_menu_wrap li { width: calc(50% - 20px);} footer .agreement_menu_wrap li:nth-child(odd) a:before { height: 0;} footer .agreement_menu_wrap li:nth-child(3) a {padding-left: 0;} .hero_wrap{padding-top:40px; padding-bottom:40px; min-height:auto !important;} .hero_wrap>.container{ position: relative; top:0; left:0; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; } .hero_wrap .tit1{margin-bottom: 20px; line-height:1.25;} .hero_wrap .tit_sub2{line-height:1.45;} #contentsWrap{padding-top: 55px;} #pageTitWrap h1{display:block; max-width:100%; padding:12px 0; font-size:16px} #pageTitWrap .breadcrumb_wrap{display:none} .card_item .info_wrap .desc:not(.tag){ display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; line-height: 2;} .card_item .info_wrap .desc:not(.tag) br{display: none;} /* content */ .type_renewal{font-size:16px} .type_renewal .tit2{font-size:22px} .type_renewal .tit_num {margin-top:50px;} .type_renewal .tit_num span{font-size:20px} .type_renewal .tit_num .num{font-size:20px} .type_renewal .box_wrap{margin: 15px 0; padding: 20px 15px 25px} .type_renewal .box_tit{margin-bottom:20px; font-size:18px;line-height: 1.25} .license_sec_wrap .col-sm-4{overflow:hidden} .license_sec_wrap p{float:left; width:35%} .license_sec_wrap ul{float:left; width:calc(65% - 15px); padding-left:15px} .license_sec_wrap .list_dot{font-size:15px} .license_sec_wrap .list_dot li{margin-top:3px} .relative_sec_wrap{padding-top:40px; padding-bottom:40px} .relative_sec_wrap .list_relative_wrap{width:100%; margin-left:0; padding:0} .relative_sec_wrap .list_relative_wrap .list_relative{width:100%; overflow:auto hidden; white-space:nowrap;display: block;} .sub_page.blog .relative_sec_wrap .list_relative_wrap .list_relative{display: flex;} .relative_sec_wrap .list_relative_wrap .list_relative li{float:none; display:inline-block; width:calc(33.334% - 20px)} .relative_sec_wrap .btn_slide_arrow{display:none} /* 01 */ .page_overview .hero_wrap.w_bg{padding-bottom: 0;} .page_overview .hero_wrap .tit1{margin-top:0; font-size:28px} .page_overview .con01 dl dt{font-size:19px} .page_overview .con01 dl dd{min-height:auto; margin-bottom:20px; font-size:17px} .page_overview .con02{padding:45px 0} .page_overview .con02 img{width: calc(25% - 3px);} .page_overview .con02 img + img{margin-left: 4px;} .page_overview .con02 .box_wrap{padding:30px 25px} .page_overview .con02 .box_wrap .num{font-size:21px} .page_overview .con02 .box_wrap h3{font-size:27px} .page_overview .con02 .box_wrap .des{font-size:19px} .page_overview .con02 .box_wrap .desc_img{margin:10px 0 15px; font-size:19px} .page_overview .con03 h3{margin-bottom:0; font-size:35px} .page_overview .con03 h3 span{display:block} .page_overview .con03 dl{margin-bottom:30px; text-align:center} .page_overview .con03 dl dt{margin:20px 0 10px; font-size:24px} .page_overview .con03 dl dd{font-size:17px} .page_overview .con05 [class*="col-xs"]{float: none; left: 0; right: 0; width: 100%; margin-left: 0; margin-right: 0;} .page_overview .con05 .grp-box .hyundai{max-width: 326px; width: 80%; margin-top: 50px;} .page_management [class*='con0'] .col-md-7 {margin-top: 40px;} .page_management [class*='con0'] a.btn_solid{font-size:16px;} .page_management .con01 h2{font-size:20px;} .page_management .con01 .btns_wrap button{flex: 1 33.34%; margin-bottom: 10px; font-size:15px;} .page_management .con01 .btns_wrap button .deco{height:32px;} .page_wv .con01 .tit_sub1{margin-top: 25px;} .page_wv .con05{padding:40px 0 75px} .page_wv .con05 .box_wrap{padding-left:22px; padding-right:22px} .page_wv .con05 .box_wrap > p:not(.desc){font-size:19px} .page_wv .con05 .tb_wrap table{font-size:14px} .page_wv .con05 .desc{font-size:13px} .page_lock .hero_wrap{padding-bottom:50%;} .page_lock .con01 dt{font-size:15px} .page_lock .con01 dd{font-size:15px} .page_lock .con02 dl{font-size:15px} .page_lock .con02 .list_diagram{flex-wrap:wrap; justify-content:center; margin-top:0} .page_lock .con02 .list_diagram:before{display:none} .page_lock .con02 .list_diagram li{width:120px; height:120px; font-size:15px} .page_lock .con02 .list_diagram li + li{margin-left:20px !important} .page_lock .con02 .list_diagram li:last-child{width:100%; height:auto; margin-left:0 !important; margin-top:20px} .page_lock .con02 .list_diagram li:last-child img{width:200px} .page_lock .con02 .list_diagram li.bg_blue{font-size:17px} .page_lock .con02 .list_diagram.exp{margin-top:0} .page_lock .con02 .list_diagram.exp li:not(:last-child){width:120px; height:120px} .page_lock .label{min-width:45px; font-size:12px; padding:4px 0; text-align:center} .page_lock .con03 .tb_wrap{overflow-x:auto; margin:0 15px} .page_lock .con03 table th, .page_lock .con03 table td{font-size:15px} .page_lock .con03 table .label{display:block; width:60px; margin:auto} .page_lock .con04 .tit_sub1 span{font-size:17px} .page_lock figcaption{font-size:15px} .page_mobile .con_exp3 .box_wrap{padding: 15px;} /* 20210928 모바일제어 */ .page_mobile .tit3{font-size: 22px;} .page_mobile .tit4{font-size: 18px;} .page_mobile .tit3 + p{font-size: 16px;} .page_mobile [class^="cont"]{padding-top: 60px; padding-bottom: 60px;} .page_mobile .hero_wrap>.container {padding-top: 20px; padding-bottom: 20px;} .page_mobile [class^="col-"] .btn_solid {max-width: 100%;} .page_mobile .con01 .btns_wrap button{font-size: 20px;} .page_mobile .con01 .btns_wrap button .deco{background-size: auto 70%;} .page_mobile .col-lg-12 .label.line_blue,.page_mobile .btn_solid{font-size: 16px;} .page_mobile .cont1 .col-sm-7{width: 70.33333333%;} .page_mobile .cont1 .col-sm-6 .phone{width: 60%;} .page_mobile .cont1 .col-sm-6 .arrow{width: 40%; padding: 0;} .page_mobile .cont1 .desktop{width: 95%; padding-left: 0;} .page_mobile .col-lg-12.list.col3 > ul li{flex: 1 calc(49.5% - 15px); flex-basis: calc(49.5% - 15px);} .page_mobile .col-lg-12.list > ul li dt{font-size: 18px;} .page_mobile .col-lg-12.list > ul li dd{font-size: 16px;} .page_mobile .spec_wrap{min-width: 48%; width: 48%; font-size: 14px;} .page_mobile .spec .col-lg-3{width: 55px;} .page_mobile .cont4 .h_center img{width: 100%;} .page_mobile .cont4 .h_center .col-sm-5{width: 40%; padding-right: 0;} .page_mobile .cont4 .h_center .col-sm-3{width: 20%;} .page_mobile .cont4 .h_center .col-sm-4{width: 40%; padding-left: 0;} .page_mobile .cont4 .icon_tit3{font-size: 16px;} .page_mobile .cont4 .icon_tit3 span{font-size: 14px;} .page_mobile .cont6 .col-sm-5{width: 100%;} .page_mobile .cont6 .col-sm-5 img{width: 100%; left: 0; margin-left: 0;} .page_mobile .cont6 .col-sm-7{width: 100%;margin-top: 20px; padding-right: 15px;} .page_mobile .cont6 .tit4 + p{font-size: 16px;} .page_mobile .cont7{padding-top: 0; padding-bottom: 0;} .page_mobile .cont7 .row:before{width: 15px; height: 30px; margin-top: -15px; background-size: cover;} .page_mobile .cont7 .col-sm-3{display: none;} .page_mobile .cont7 .col-sm-9{width: 100%;} .page_mobile .cont7 .col-sm-9 .info_txt{font-size: 16px;} .page_mobile .cont7 .col-sm-9 h3{font-size: 20px;} .page_mobile .cont7 .col-sm-9 h3 span:after{top: 5px;} .page_multi .con04 .tit2 { margin-bottom :24px;} .page_rv_se h3 {font-size:22px} .page_rv_se h3 + p{font-size:18px} .page_rv_se .con01 .solution_wrap > div:not(.solution1) {justify-content:space-between;} .page_rv_se .con01 .solution_wrap > div > div:not(.solution1) {height:200px} .page_rv_se .con01 .solution_wrap .solution2, .page_rv_se .con01 .solution_wrap .solution4 { margin-bottom:10px; margin-right:0} .page_rv_se .con01 .solution_wrap .solution1 p {font-size:18px} .page_rv_se .con02 ul li dt{font-size:17px} .page_rv_se .con02 ul li dd{font-size:16px; padding:0 5px} .page_rv_se .con04 a{padding:15px 40px 15px 0} .page_rv_se .con04 a:before {display:none} .page_rv_se .con04 a:after{background-size:15px auto} .page_rv_se .con04 a span{margin-left:0} .page_rv_se .con04 a span:not(.category, .tit) {line-height:1.25} .page_rv_se .con04 a .tit{margin-bottom:10px} .page_rv_se .con04 a .tit strong {display:blcok; font-size:18px} .page_rv_se .con04 a .tit strong + strong { padding-left:0; margin-left:0} .page_rv_se .con04 a .tit strong + strong:before { display:none} .page_rv_se .con06 ul li p{font-size:16px} .page_rv_se .tb_wrap{overflow:hidden; overflow-x:auto} .page_rv_se .tb_wrap table{min-width:640px} .page_rv_se .tb_type_se1 caption{font-size:14px} .page_rv_se .tb_type_se1 thead th{font-size:17px} .page_rv_se .tb_type_se1 tbody td, #wrapper .post-content .page_rv_se .tb_type_se1 tbody th {font-size:15px} .page_rv_se .tb_type_se1 tbody td.con1{padding-left:2%; padding-right:2%} .page_rv_se .tb_type_se2 th {padding:12px 0; font-size:17px} .page_rv_se .tb_type_se2 tbody td{font-size:16px} .page_rv_se .tb_type_se2 tbody td.bg_rv{font-size:18px} .page_rv_se .tb_type_se2 thead th img{height:40px} .sub_page .con_cta .col-sm-3 {display: none;} .sub_page .con_cta .col-sm-3 {width: 100%;} .sub_page .con_cta .col-sm-9 { padding: 30px 25px;} .sub_page .con_cta .col-sm-9 h3{font-size: 20px;} .sub_page .con_cta .col-sm-9 .info_txt {font-size: 14px;} .sub_page .con_cta .cta_link::before {background-size: 15px auto; background-repeat: no-repeat;} .page_rv_appliance dl dt{font-size:18px;} .page_rv_appliance .hero_wrap .tit1{font-size: 17px;margin-bottom:25px;} .page_rv_appliance .con01 ul{flex-flow:column} .page_rv_appliance .con01 ul li, .page_rv_appliance .con03 [class*='col-'] {display: flex; align-items:center;} .page_rv_appliance .con01 ul li + li, .page_rv_appliance .con03 [class*='col-'] + [class*='col-']{margin-top:15px;} .page_rv_appliance .con01 ul li p, .page_rv_appliance .con03 [class*='col-'] p{flex:1;margin:0 15px 0 0;} .page_rv_appliance .con01 dl, .page_rv_appliance .con03 [class*='col-'] dl{flex:2;text-align: left;} .page_rv_appliance .con02 .row.flex {display: block; margin-top: 0;} .page_rv_appliance .con02 .box_wrap {padding: 15px; margin: 15px 0 0;} .page_rv_appliance .con04 ul li .label_wrap span{display: flex; align-items: center; justify-content: center;} /* 02 */ .page_usecase.list .hero_wrap{background-position: left 30% center;} .page_usecase .select_tab_wrap{margin-bottom:30px} .page_usecase .con01 .col-xs-5{text-align:center} .page_usecase .con02 dl dt{padding:20px 10px; font-size:19px} .page_usecase .con02 dl dt span{margin-top:5px; font-size:15px} .page_usecase .con02 dl dd{padding:15px 20px} .page_usecase .con02 dl dd li span{font-size:16px} .page_usecase .con02 dl dd li + li{margin-top:10px} .page_vdi .box_line_wrap ul li{overflow:hidden; float:none; width:100%} .page_vdi .box_line_wrap ul li+li{margin-left:0} .page_vdi .box_line_wrap ul li img{float:left; width:48%; margin:10px 2% 10px 10px} .page_vdi .box_line_wrap dl{float:left; width:calc(50% - 20px)} .page_vdi .list_relative>li{display:block} .page_vdi .list_relative>li>p, .page_vdi .list_relative>li>.logos{display:block; width:100%} .page_vdi .list_relative>li .label{max-width:120px; margin:0 auto} .page_vdi .list_relative>li .desc{width:100%; padding:0; margin:15px 0 !important; text-align:center} .page_vdi .list_relative>li .desc br{display:none} .page_vdi .list_relative>li>.logos ul li{width:33.334% !important; margin-top:10px} .page_vdi .tb_vdi tbody th, .page_vdi .tb_vdi tbody td{padding:5px 5px 7px} .page_vdi .con05 .tit_sub{font-size:27px} .page_chromebook .list_col3 li{overflow:hidden; width:100%} .page_chromebook .list_col3 li+li{margin-left:0} .page_chromebook .list_col3 li img{width:40%} .page_chromebook .con02 h4 {font-size: 22px;} .page_chromebook .con03 h3.tit_box{font-size:22px;} .page_chromebook .con03 .h3_desc{font-size:18px;} .page_chromebook .con03 .h3_desc span{font-size:20px;} .page_chromebook .con03 .list_col3 li img, .page_chromebook .con03 .list_col3 li p{float:left} .page_chromebook .con03 .list_col3 li p{position:absolute; top:50%; right:0; width:60%; margin-top:0; padding:0 5px; line-height: 1.45; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%)} .page_chromebook .con03 .box_wrap.w_deco h4{font-size:20px;line-height:1.25;} .page_chromebook .con03 .box_wrap.w_deco dt{width:100%; padding-right:0; font-size:18px;} .page_chromebook .con03 .box_wrap.w_deco dt br{display:none} .page_chromebook .con03 .box_wrap.w_deco dd{width:100%;padding-left:0;font-size:16px;} .page_chromebook .con03 .box_wrap.w_deco a{font-size:18px;} .page_chromebook .con03 .box_wrap:not(.w_deco) dt, .page_chromebook .con03 .box_wrap:not(.w_deco) dd{padding-left:50px;padding-top:0;background-size: 40px;font-size:16px;} .page_chromebook .con03 .box_wrap:not(.w_deco) dt{min-height:50px;font-size:20px;} .page_chromebook .con04 .list_col3 .list_tit{margin-top:15px; font-size:20px;} .page_chromebook .con04 .list_col3 li {position:relative} .page_chromebook .con04 .list_col3 li img{position:absolute; left:0; top:0} .page_chromebook .con04 .list_col3 li p {padding-left:40%} .page_chromebook .con06{text-align:center} .page_chromebook .con06 a{position:relative; top:0; right:0; left:0; display:block; width:80%; margin:15px auto 0; padding: 10px 15px; font-size:18px; transform:none; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none} .page_chromebook .con03 .box_wrap.w_deco a span, .page_chromebook .con06 a span{padding-top: 0;} /* 03 */ .page_pricing .price_box_wrap{margin-left:-15px; margin-right:-15px} .page_pricing .price_box_wrap .slick-track { display: flex; flex-flow: row nowrap; align-items: stretch; } .page_pricing .price_box_wrap .price_box { display: flex; flex-flow: column; justify-content: space-between; } .page_pricing .price_box_wrap .price_box{margin:23px 20px 0; padding-top:20px; padding-bottom:17px} .page_pricing .price_box_wrap .price_box .category{margin-bottom:17px; } .page_pricing .price_box_wrap .price_box .summary{font-size:16px} .page_pricing .price_box_wrap .price_box .summary ul li img{width:134px} .page_pricing .price_box_wrap .price_box .price{margin-bottom:10px; font-size:14px} .page_pricing .price_box_wrap .price_box .desc_wrap{height:80px; font-size:15px} .page_pricing .price_box_wrap .price_box .desc_wrap p{font-size:15px;} .page_pricing .price_box_wrap .slick-dots{margin-bottom:20px} .page_pricing .price_box_wrap .price_box [class*="btn_"]{max-width: 290px; margin: auto;width: 100%;} .page_pricing .tb_price_wrap{overflow:visible; margin-left:-15px; margin-right:-15px} .page_pricing .tb_price_wrap table th{padding:10px} .page_pricing .tb_price_wrap table thead th{font-size:17px; vertical-align:bottom} .page_pricing .tb_price_wrap table thead th .label{position:relative; padding:0 5px} .page_pricing .tb_price_wrap table tbody td p.division{padding:10px 15px; font-size:17px; cursor:pointer} .page_pricing .tb_price_wrap table tbody td p.division:before{content:''; position:absolute; top:50%; right:15px; width:14px; height:14px; border:3px solid #8593aa; border-left:none; border-top:none; text-align:center; transform:translateY(-80%) rotate(45deg); -webkit-transform:translateY(-80%) rotate(45deg); -moz-transform:translateY(-80%) rotate(45deg); -ms-transform:translateY(-80%) rotate(45deg); -o-transform:translateY(-80%) rotate(45deg)} .page_pricing .tb_price_wrap .tb_price_sub{display:none} .page_pricing .tb_price_wrap table tbody td p.division.active:before{border-color:#1da1df; transform:translateY(-20%) rotate(-135deg); -webkit-transform:translateY(-20%) rotate(-135deg); -moz-transform:translateY(-20%) rotate(-135deg); -ms-transform:translateY(-20%) rotate(-135deg); -o-transform:translateY(-20%) rotate(-135deg)} .page_pricing .tb_price_wrap table tbody td p.division.active + .tb_price_sub{display:table} /* .page_pricing .tb_price_wrap table tr:last-child td{padding:10px} */ .page_pricing .tb_price_wrap table tr:last-child td [class^="btn_"]{width:100%; min-width:auto; padding:5px 20px} .page_pricing .con_partner_wrap .list_logo li{flex-basis:33.33%} /* 2301*/ .page_pricing .con00 .auto_box_wrap{padding: 40px;} .page_pricing .con00 .auto_box_wrap .auto_box{ flex-wrap: wrap; justify-content: center;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-tit{width: 100%; text-align: center; padding-left: 0; padding-top: 60px; background-size: 48px; background-position: top center;} .page_pricing .con00 .auto_box_wrap .auto_box .auto-cont{margin-top: 25px; margin-left: 0;} /* 2306 가격페이지 수정*/ .page_pricing .pirce-box2 .pb-inner {display: block; text-align: center;} .page_pricing .pirce-box2 .pb-tit{padding-right: 0; padding-bottom: 20px;} .page_pricing .pirce-box2 .pb-cont{width: 100%; padding-left: 0; border-top: 1px solid #ccc; border-left: none; padding-top: 30px;} .page_pricing .pirce-box2 .pb-cont-inner{display: block; text-align: center; } .page_pricing .pirce-box2 .pb-cont-inner .btn_pill{margin-top: 30px; font-size: 20px;} .page_pricing_server .box_wrap:not(.info) .img_wrap, .page_pricing_server .box_wrap:not(.info) .info_wrap { display: block; width: 100%;} .page_pricing_server .box_wrap:not(.info) .info_wrap { padding: 6% 6% 10%; } .page_pricing_server .box_wrap:not(.info) .img_wrap { padding: 6% 6% 0; } .page_pricing_server .box_wrap:not(.info) .img_wrap img { width: auto; max-width: 100%; } .page_pricing_server .box_wrap:not(.info) dt .label {display: block; text-align: center;} .page_pricing_server .box_wrap:not(.info) li { padding-left: 25px; background-size: 15px 15px; background-position: left 2px;} .page_purchase .con04 .list_box > li{flex:1 100%;max-width:none;padding:0} .page_purchase .con04 .list_box > li .box_wrap h3 {font-size:18px} .page_purchase .con04 .list_box > li .box_wrap .tit{font-size:20px} .page_purchase .con04 .list_box+.box_wrap p{font-size:16px} /* 05 */ .page_download .guide_box{flex-flow:column} .page_download .guide_box li{max-width:none; display:flex} .page_download .guide_box li > div.icon_wrap{flex:1; height:auto} .page_download .guide_box li > div:not(.icon_wrap){flex:2; padding:24px 5.41% 40px} .page_download .guide_box li > div:not(.icon_wrap) dt{font-size:20px} /* 06 */ .page_trial{padding-top:30px} .page_trial .chk_wrap{font-size:16px} .page_trial .box_wrap .tit-wrap .tit{font-size: 28px;} .page_trial .box_wrap .tit-wrap p{font-size: 16px;} .page_trial .box_wrap {padding:40px 25px} .page_trial .blue-box-wrap{padding: 15px;} .page_trial .box_wrap .list_check{display: block;} .page_trial .box_wrap .list_check li{font-size: 16px; padding-left: 0;} .page_trial .box_wrap .list_check li + li{margin-left: 0; margin-top: 7px;} .page_trial .box_wrap .list_check.blue li:before{position: relative; display: inline-block; transform: translateY(5px);} .page_trial .box_wrap.complete dl {width:100%; flex-flow:column} .page_trial .box_wrap.complete dl + dl{margin-top:20px} .page_trial .box_wrap.complete dl dt, .page_trial .box_wrap.complete dl dd {width:100%; margin-left:0 !important; font-size:16px; text-align:center} .page_trial .box_wrap.complete dl dt:after {display:none} .page_trial .box_wrap.complete .flex_wrap>[class^='flex']+[class^='flex']{margin-top:0} .page_trial .box_wrap.complete .btn_solid{display:block} .page_trial .email_box_wrap {padding:20px 10px; font-size:18px} .page_trial .flex_wrap {flex-flow:column} .page_trial .flex_wrap > [class^='flex'] {flex:1; width:100%} .page_trial .flex_wrap > [class^='flex'] + [class^='flex'] {margin-left:0; margin-top:10px} .page_trial .box_wrap.verify {padding:40px 5.5%} .page_trial .box_wrap.complete_desc{padding-left:15px; padding-right:15px} .page_trial .box_wrap.complete_desc .list_box > li{padding-left:15px; padding-right:15px} .page_trial .box_wrap.complete_desc .list_box > li.wide > ol { flex-wrap:wrap} .page_trial .box_wrap.complete_desc .list_box > li.wide > ol > li{flex:1 100%; max-width:none} .page_trial .box_wrap.complete_desc .list_box > li.wide > ol > li + li{margin-top:20px} .page_trial .box_wrap.retry .list_box{padding-left:15px; padding-right:15px} .page_trial .box_wrap.retry .list_box{flex-flow:column} .page_trial .box_wrap.retry .list_box > li{padding:0} .page_trial .box_wrap.retry .list_box > li + li{margin-top:20px} .page_trial .box_wrap.retry .list_requset li{display:block} .page_trial .box_wrap.retry .list_requset li +li{margin-left:0; margin-top:10px} .page_trial .box_wrap [class^="btn_"].size_lg{font-size: 19px; padding: 8px 18px; } .page_trial .sec-tit .tit{font-size: 22px;} .page_trial .num_list .col-sm-10 .tit img{width: 10vw;max-width:50px ; margin-left: 4px;} .page_trial .num_list .col-sm-10 .tit span ~ span{margin-left: 4px;} .page_trial .sec-tit .sub{font-size: 20px;} .page_trial .step_wrap .step_top{font-size: 16px;} .page_trial .row{margin: 0;} .page_trial .num_list_cont{flex-wrap: wrap;} .page_trial .num_list_cont li{width: 100%;} .page_trial .num_list_cont li + li{margin-left: 0; margin-top: 10px;} .page_trial .tip_box .tip_tit.long{padding-left: 4vw;} .page_trial .btn_wrap .col-sm-4{margin-top: 20px;} .page_trial .link{text-align: center;} .page_trial .link .text-right{margin-top: 10px; text-align: center;} .page_trial .tip_box ul{padding-left: 2vw;} .page_trial .num_list_box ul {display: block;} .page_trial .num_list_box ul li {max-width: 500px; margin: auto; width: 85%; justify-content: center; text-align: center;} .page_trial .num_list_box ul li + li{margin-left: auto; margin-top: 30px;} .num_list_box ul li+li:after{left: 50%; top: -30px; margin-top: 0; margin-left: -15px; transform: rotate(90deg);} .page_trial .num_list .col-sm-10 > .tit{padding: 20px 10px;} .page_trial .num_list .col-sm-10 .tit span{font-size: 16px;} .page_trial .link .text-right a{margin: auto;} .page_trial .certification_num_wrap input[type="text"]+input[type="text"]{margin-left: 10px;} .page_trial .certification_num_wrap .approve_email_from input[type="text"]:nth-child(6){margin-left: 15px;} .page_trial .certification_num_wrap input[type="text"]{width: calc(14vw - 15px); height: 12.1vw; } .page_trial.create-account .flex_wrap label .desc {width: calc(100vw - 116px); max-width: 350px } /* 99 */ .page_view{padding-top:30px; padding-bottom:50px} .page_view .view_top .tit_sub1{line-height:1.45} .page_view .view_top ul li{font-size:13px} .page_view .view_con{padding:15px} .page_view .tit_wrap{margin-bottom:20px; padding:20px 10px} .page_view .tit_wrap p{font-size:17px; line-height:1.5} .page_view .tit_wrap span{margin-bottom:10px; font-size:14px} .page_view .introduction_box{flex-direction: column;} .page_view .introduction_box>div { flex: 1 100%; max-width: none; } .page_view .introduction_box .introduction_box_details { padding-right:0 } .page_view .introduction_box_profile{flex-flow: column;} .page_view .introduction_box_profile>div{flex: 1 100%; max-width: 100%;} .page_view .introduction_box_profile .profile_img{margin-top: 20px; padding: 0 20px;} .page_view .introduction_ab_box dl { float:none; width:100% } .page_view .introduction_ab_box dl dt { float:left; width:130px } .page_view .introduction_ab_box dl dd { float:left; width:calc(100% - 130px) } .page_view .introduction_ab_box dl dd ol { margin:0 } .page_view .introduction_ab_box dl:first-child { padding:0 0 25px } .page_view .introduction_ab_box dl:last-child { padding:25px 0 0 } .page_view .introduction_ab_box .deco { transform:translate(-50%, -100%) rotate(180deg); border-top:0 solid transparent; border-bottom:12px solid #000; border-right:8px solid transparent; border-left:8px solid transparent } .page_view .introduction_ab_box { padding:30px 20px } .page_empty .sub_menu_wrap>li{float:none; width:100% !important} .page_empty .sub_menu_wrap>li+li{margin-top:20px; margin-left:0} .page_empty .sub_menu_wrap>li>a{padding:10px; background:#efefef} .page_empty .sub_menu_wrap>li>a:before{display:none} .page_empty .sub_menu_wrap>li>a~.sub-menu{padding-left:10px} .page_empty .sub_menu_wrap>li>.sub-menu>li>.sub-menu a{padding:2px 0 2px 12px} .page_terms .tb_commercial_law th {width: 40%} .page_terms .tb_commercial_law td a{display:inline; word-break:break-all;} .tit_round_num .num {width: 42px; height: 42px; } .tit_round_num .num em{line-height: 42px; font-size: 20px;} .tit_round_num > p{font-size: 22px;} .tit_round_num .first_tit:after{ height: 30px; bottom: -40px;} .tit_round_num .next_tit{margin-top: 60px;} .page_government .con01 ul{width: 100%;} .page_government .color_point7 {font-size: 24px;} .page_government.type_renewal .tit2{margin-bottom: 22px;} .page_government.type_renewal .sub-tit{font-size: 18px;} .page_government.type_renewal .txt-label{font-size: 14px;} .page_government .con01 ul{background-size: 100% 75px;} .page_government .con01 ul li{height: auto;} .page_government.type_renewal .con02 .sub-tit {margin-bottom: 0;} .page_government .con02 .feature-list:first-child{padding-top: 0;} .page_government .con02 .feature-list img{ margin-bottom: 20px;} .page_government .con02 .feature-list .col-sm-7{text-align: center;} .page_government .con02 .feature-list .cont-tit{font-size: 22px;} .page_government .con02 .info{font-size: 14px;} .page_government .con03 .col-sm-6 .tit{font-size: 22px;} .page_government .con03 .col-sm-6 .tit strong{font-size: 18px;} .page_government .con03 .col-sm-6:nth-child(2){margin-top: 60px;} .page_government .con03 .col-sm-6 img.mw100{height: auto; width: 100%;} .page_government .con04 .box-cont-tit h4{font-size: 18px;margin-top: 12px;} .page_government .con04 .box-cont-tit p{margin-top: 14px;} .page_government .con04 .box-cont+.box-cont{margin-top: 60px;} .page_government .con04 .box-list3 .col-sm-4{padding-right: 15px; padding-left: 15px;} .page_government .con04 .box-list3 .col-sm-4 + .col-sm-4{margin-top: 30px;} .page_government .con04 .box-list3 .col-sm-4 img{width: 100%;} .page_government.type_renewal .con04 .box-list3 .col-sm-4 .tit,.page_government.type_renewal .con04 .box-list3 .col-sm-4 .cont{text-align: center;} .page_government .con05 .col-sm-6{text-align: center;} .page_government .con05 .col-sm-6:first-child{padding-right: 15px; } .page_government .con05 .col-sm-6+.col-sm-6{padding-left: 15px; margin-top: 40px;} .page_government .con05 .col-sm-6 .tit{margin-top: 15px; font-size: 18px;} .page_government .con05 .col-sm-6 .cont{margin-top: 10px;} .page_government .con05 .demo-box .demo-box-inner{display: block; text-align: center; padding: 20px 30px;} .page_government .con05 .demo-box .demo-box-inner .right{margin: 20px auto 0 ;} /* page_rvbox */ .page_rvbox .con03 .gr_list_wrap ul li{font-size: 16px; display: block; height: auto;} .page_rvbox .con03 .gr_list_wrap ul li .tit{width: 100%; padding: 10px;max-width: 100%;} .page_rvbox .con03 .gr_list_wrap ul li .cont{width: 100%; padding: 20px; padding-top: 30px;max-width: 100%} .page_rvbox .con03 .gr_list_wrap ul li .tit::after {border-top: 20px solid #f0f5ff; top: inherit; right: inherit; left: 50%; margin-left: -50px; bottom: -40px; border-bottom: 20px solid transparent; border-left: 50px solid transparent ; border-right: 50px solid transparent;} .page_rvbox .con04 .row .box-txt{font-size: 16px;} .page_rvbox .con04 .row .box-txt .tit{font-size: 22px;} .page_rvbox .btn_pill{font-size: 18px; padding: 8px 18px; } .page_rvbox .con02 .col-xs-6 .box > p{padding: 10px; font-size: 22px;} .page_rvbox .con02 .info-box{font-size: 16px;} /*new 원격제어*/ .page_newviewer{font-size: 16px;} .page_newviewer .hero_wrap p{font-size: 18px;} .page_newviewer .con01 .btns_wrap button .deco {height: 11vw;} .page_newviewer .tit3 .icon{height: 40px;} .page_newviewer .con06{padding-top: 60px;} /* page_multi */ .page_multi .hero_wrap.w_bg {min-height: 230px !important;} .page_multi .tit_sub1 { margin-bottom: 24px;} /* 온라인 용역통제 */ .page_control h2 { font-size: 30px;} .page_control h2+p { font-size: 22px; line-height: 1.3;} .page_control .con7 ul li { font-size: 22px;} .page_control .con1 ul li { width: calc(100% - 24px);} .page_control .con1 ul li+li+li { margin-top: 0;} .page_control .con1 ul li:nth-child(2) { margin-bottom: 40px;} .page_control .con1 .inner_circle { width: 130px; height: 130px; font-size: 21px; top: calc(50% + 40px); } } @media all and (max-width:720px) { .faq_ios .list_faq_ios {margin: 0 15px;} /* page_blog */ .page_blog .list_card.list [class*="col-"] {width: 100%; float: none;margin-bottom: 30px; display: block;} .page_blog .list_card.list [class*="col-"] .card_item{display: block;} .page_blog .list_card.list [class*="col-"] .thumb{width: 100%; padding-bottom:57%; float: none;} .page_blog .list_card.list .item_istp .info_wrap {width: 100%; padding-left: 0; float: none; } .page_blog .list_card.list .item_istp .info_wrap .card_item{margin-top: 10px;} .page_blog .list_card.list .item_istp .info_wrap .tag a{margin-top: 10px;} .item_istp .desc{max-height: inherit;} } @media all and (max-width:640px) { /* content */ .license_sec_wrap [class*="btn_"][class*="size_"]{width:100%} .license_sec_wrap .box_btn_wrap [class^="btn_"]+[class^="btn_"]{margin-left:0; margin-top:10px} .relative_sec_wrap .list_relative_wrap .list_relative li{width:calc(50% - 20px)} .header .mobile_wrap .btn_solid{padding:3px 8px; margin-right:3px; margin-top:6px; font-size:13px} :lang(ja) footer .agreement_menu_wrap li{flex: 1 50%;} :lang(ja) footer .agreement_menu_wrap li:nth-child(2) ~ li{margin-top:10px} :lang(ja) footer .agreement_menu_wrap li:nth-child(2n+1) a{margin-left: 0; padding-left: 0;} :lang(ja) footer .agreement_menu_wrap li:nth-child(2n+1) a:before{display:none} /* content */ .page_overview .btn_pill{font-size: 16px;} .page_overview .w_bg .tit1{text-align: center;} .page_overview .w_bg .tit_sub2{text-align: center;} .page_overview .con01 .col-xs-3 .box{height: auto;} .page_overview .con01 img{width: 180px; margin: auto;} .page_overview .con01 .col-xs-3{padding-left: 15px; padding-right: 15px; } .page_overview .con01 .col-xs-3 + .col-xs-3{margin-top: 15px;} .page_overview .con01 .col-xs-3 .box p{padding: 10px;} .page_overview .con03 .box{padding: 20px 10px;} .page_overview .con03 .gr_list_wrap ul li{display: block; height: auto;} .page_overview .con03 .gr_list_wrap ul li .tit{width: 100%; padding: 10px;max-width: 100%;} .page_overview .con03 .gr_list_wrap ul li .cont{width: 100%; padding: 10px; padding-top: 25px;max-width: 100%} .page_overview .con03 .gr_list_wrap ul li .tit::after {border-top: 20px solid #f0f5ff; top: inherit; right: inherit; left: 50%; margin-left: -50px; bottom: -40px; border-bottom: 20px solid transparent; border-left: 50px solid transparent ; border-right: 50px solid transparent;} .page_overview .con03 .gr_list_wrap ul li .cont p {margin-left: 0; text-align: center;} .page_overview .con03 .gr_list_wrap ul li p{ margin: auto;} .page_overview .con04 .tit2{margin-bottom: 20px;} .page_overview .con04 .col-xs-12 h3{text-align: center;} .page_overview .con04 .col-xs-4 img{width: 180px; margin: auto;} .page_overview .con04 .col-xs-4 + .col-xs-4 {margin-top: 15px;} .page_overview .con05 img.pc{display: none;} .page_overview .con05 img.mo{display: block;border-radius: 4px;box-shadow: 4px 4px 10px 0 rgba(39, 59, 99, 0.1);background-color: #fff; padding: 30px;} .page_overview .con06 .sub-info{font-size: 16px;} .page_overview .con07 .tit2{margin-bottom: 40px;} .page_overview .con07 .col-xs-4{width: 50%; float: left;} .page_overview .con07 .col-xs-4:nth-child(2n+1){padding-right: 7.5px;} .page_overview .con07 .col-xs-4:nth-child(2n+2){padding-left: 7.5px;} .page_overview .con07 .col-xs-4 +.col-xs-4 +.col-xs-4{margin-top: 15px !important;} .page_overview .con07 .box h4{padding: 10px 5px;} /* 01 */ .page_management [class*='con0'] a.btn_solid{min-width: auto;} .page_management .con05 .btns_wrap a{width: 100%;} .page_wv .con02 .list_icon{display:block} .page_wv .con02 .list_icon li{min-width:auto} .page_wv .con04 *, .page_wv .con06 *{text-align:center !important} .page_wv .con04 .btn_solid, .page_wv .con06 .btn_line{margin-top:30px} .page_lock .con02 .tit_sub1{margin-bottom:15px} .page_lock .con02 .list_diagram{margin-top:20px} .page_lock .con02 .list_diagram li{width:150px; height:150px} .page_mobile .con8 a{display:block; text-align:left} .page_rv_appliance .con01 ul li, .page_rv_appliance .con03 [class*='col-'] {flex-flow: column;} .page_rv_appliance .con01 ul li p {margin: 0 0 15px 0;} .page_rv_appliance .con03 [class*='col-'] p {margin: 0;} .page_rv_appliance .con01 dl, .page_rv_appliance .con03 [class*='col-'] dl{text-align: center;} .page_rv_appliance .con04 .box_wrap figcaption{padding: 15px !important} .page_rv_appliance .con04 .box_wrap figcaption span{display: block;margin:0;} .page_rv_se .con01 .solution_wrap > div:not(.solution1) {flex-direction:column} .page_rv_se .con01 .solution_wrap > div > div:not(.solution1) { width:100%; height:200px} .page_rv_se .con02 ul li, .page_rv_se .con06 ul li{ flex:1; flex-basis: 100%; max-width:none; margin:15px 0} .page_rv_se .con06 ul li:last-child { max-width:100%} /* 02 */ .page_usecase .con02 dl dd{min-height:auto} .page_vdi .box_line_wrap ul li img, .page_vdi .box_line_wrap dl{float:none; width:calc(100% - 20px); margin-right:0} .page_vdi .box_line_wrap dl dd br{display:none} .page_vdi .box_line_wrap ul li+li {margin-left:0; margin-top:15px} .page_chromebook .con03 h3.tit_box{width:90%;} .page_chromebook .con04 .list_col3 li img {position:relative; width:70%} .page_chromebook .con04 .list_col3 .list-tit, .page_chromebook .con04 .list_col3 li p {padding-left:0} /* 03 */ .page_pricing .tit1{font-size:22px} .page_pricing .price_box_wrap .price_box{min-height:400px; margin-left:5px; margin-right:5px} .page_pricing .price_box_wrap .price_box [class*="btn_"]{max-width: 210px;} .page_pricing .tb_price_wrap table tr:last-child td [class^="btn_"]{padding:5px; line-height:1.2; font-size:14px} .page_pricing .tb_price_wrap table tbody td p.division:before{right:20px; width:10px; height:10px; border-width:2px} .page_pricing .con_partner_wrap .list_logo li{flex-basis:50%;max-width:none;padding:0 10px} /* 05 */ .page_download .guide_box li{flex-flow:column} .page_download .guide_box li > div.icon_wrap{padding:15px 0} .page_download .guide_box li > div:not(.icon_wrap) dl{height:auto !important} /* 06 */ .page_trial .chk_wrap{padding-right:0} .page_view .view_con{padding:0; border:none} .page_view .introduction_box_profile dl{flex-flow: column;} .page_view .introduction_box_profile dl dt{border:none; width: 100%;} .page_view .introduction_box_profile dl dt:before{content:'- ';} .page_view .introduction_box_profile dl dd{width: 100%; padding:0; } .page_view .introduction_ab_box dl dt, .page_view .introduction_ab_box dl dd { float:none; width:100% } .page_view .introduction_ab_box dl dt { font-size:15px } .page_view .introduction_ab_box dl dt span { font-size:22px } .page_view .introduction_ab_box dl dd { padding:20px 0 0 } .page_view .introduction_ab_box dl:first-child { position:relative; overflow:visible } .page_view .introduction_ab_box dl:first-child:after { content:''; position:absolute; left:50%; bottom:0; transform:translate(-50%, 6px) rotate(180deg); border-top:0 solid transparent; border-bottom:12px solid #000; border-right:8px solid transparent; border-left:8px solid transparent } .page_view .introduction_ab_box .deco { display:none } .page_view .img_half_wrap div { float:none; width:100%} .page_view .img_half_wrap div+div { margin-left:0; margin-top:10px} .page_empty .sub_menu_wrap .depth1{float:none; width:100%} .page_empty .sub_menu_wrap .depth1+.depth1:not(.download_box_wrap){margin-left:0; margin-top:20px} .page_empty .sub_menu_wrap .depth2{overflow:hidden} .page_empty .sub_menu_wrap .depth2 > li{float:left; width:50%; margin-bottom:7px; margin-top:0 !important} .page_telecommuting_welfare .interview-box{flex-wrap: wrap;} .page_telecommuting_welfare .interview-box .interview-img{width: 100%; height: 55vw;} .page_telecommuting_welfare .interview-box .interview-txt{width: 100%;} .page_security.page_management .con02 a.btn_solid{width: 100%;} .page_security.page_management .con05 a.btn_solid{max-width:386px} .page_rvbox .con01 .gr_box_wrap .col-xs-3{width: 100%;} .page_rvbox .con01 .gr_box_wrap .col-xs-3 + .col-xs-3{margin-top: 20px;} .page_rvbox .con01 .gr_box_wrap .box{min-height: auto; padding-bottom: 20px;} .page_rvbox .con02 .col-xs-6 + .col-xs-6 {margin-top: 20px;} .page_rvbox .con04 .row +.row{display: block;} .page_rvbox .con04 .row .col-xs-6{width: 100%;} .page_rvbox .con04 .row .box-txt .text-center{padding: 20px 0;} /* page_multi */ .page_multi .con02 .col-xs-4+.col-xs-4 .box {margin-top: 30px;} .page_multi .con03 .box-ul {padding: 20px 15px;} .page_multi .con03 .box-ul li{font-size: 14px;} .page_multi .con03 .box-ul li+li{ margin-left: 10px; padding-left: 35px;} .page_multi .con04 .faq li{display: block; text-align: center; padding:10px 20px 30px ;} .page_multi .con04 .faq li .num{font-size: 30px;} .page_multi .con04 .faq li .txt{margin-left: 0; text-align: center;} /* page_trial */ .page_trial .certification_num_wrap input[type="text"]{font-size: 20px; padding: 10px;} .page_trial .certification_num_wrap input[type="text"]+input[type="text"]{margin-left: 5px; } .page_trial .certification_num_wrap .approve_email_from input[type="text"]:nth-child(6){margin-left: 10px;} .page_trial .certification_num_wrap input[type="text"]{width: calc(14vw - 10px); height: 12.1vw; } .sub_page .con_cta .col-sm-9 h3{ font-size: 16px;} .sub_page .con_cta .col-sm-9 h3 span{ margin-left: 8px; padding-left: 8px;;} .sub_page .con_cta .col-sm-9 h3 span:after{ top:0px;} } /* 20210928 모바일제어 */ @media (max-width: 560px){ .page_mobile .cont3 .col-lg-12 .btn_solid{display: block; margin-left: auto; margin-right: auto; max-width: 100%;} .page_mobile .cont3 .col-lg-12 .btn_solid + .btn_solid{margin-top: 20px;} .page_mobile .cont1 .col-sm-6 .phone{padding-left: 0;} .page_mobile .cont1 .col-sm-7{padding-left: 0; width: 100%;} .page_mobile .cont1 .col-sm-7 .app_btn {width: 38%;} .page_mobile .col-lg-12.list.col3 > ul li {flex: 1 100%; flex-basis: 100%;max-width: 100%;} .page_mobile .col-lg-12.list.col2 > ul li {flex: 1 100%; flex-basis: 100%;max-width: 100%;} .page_mobile .spec_wrap{width: 100%; min-width: 100%; font-size: 16px;} .page_mobile .spec_wrap + .spec_wrap{margin-left: 0;} .page_mobile .cont4 .h_center .col-sm-3 img{width: 100%;} .page_mobile .spec .col-lg-3{width: 80px;} .page_mobile .cont7 .col-sm-9 h3 span{margin-left: 8px;padding-left: 8px;} .page_mobile .cont7 .col-sm-9 h3 span:after{height: 16px;} .page_mobile .cont7 .col-sm-9 .info_txt{font-size: 16px;} .page_mobile .cont7 .col-sm-9 h3{font-size: 16px;} .page_rv_se .con08 ul li{width: calc(50% - 8px);} .page_rv_se .con08 ul li+ li{margin-left: 14px;} .page_rv_se .con08 ul li+ li + li{margin-top: 20px;} .page_rv_se .con08 ul li+ li + li + li{margin-top: 16px;} .page_rv_se .con08 ul li:nth-child(3n+1){margin-left: 16px;} .page_rv_se .con08 ul li:nth-child(2n+1){margin-left: 0;} .page_control .con_logo ul li {width: calc(50% - 8px);} .page_control .con_logo ul li+ li{margin-left: 14px;} .page_control .con_logo ul li+ li + li{margin-top: 20px;} .page_control .con_logo ul li+ li + li + li{margin-top: 16px;} .page_control .con_logo ul li:nth-child(3n+1){margin-left: 16px;} .page_control .con_logo ul li:nth-child(2n+1){margin-left: 0;} .sub_page .con_cta .col-sm-9 h3 span::after {height: 16px; top:5px;} } @media all and (max-width:460px){ /* content */ .page_pricing .con02 .tt_box{padding-left:10px} .page_pricing .con02 .tt_box .tt_con{ left:0; width:180px; transform:none; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; } .page_pricing .con02 .tt_box .tt_con:before, .page_pricing .con02 .tt_box .tt_con:after{left:8px} .page_pricing .price_box_wrap .price_box +.price_box{margin-left: 10px;} .page_view.blog .relative_sec_wrap .list_relative{overflow: inherit;} .page_view.blog .relative_sec_wrap .list_relative li{width: 100%} .page_view.blog .relative_sec_wrap .list_relative li+li{margin-left: 0; margin-top: 12px;} .page_view.blog .relative_sec_wrap .list_relative li:nth-child(3n+1){margin-left: 0;} } @media all and (max-width:320px) { /* layout */ .header .logo img{width:120px} /* content */ .page_lock .con02 .list_diagram li{width:120px; height:120px} .page_lock .con02 .list_diagram li:last-child img{width:150px} } /* 정상 작동 현황 숏코드 */ .rv_serviceStatus { display: flex; align-items: center; font-size: 14px; line-height: 36px;} .rv_serviceStatus img { width: 12px; height: 12px; margin-right: 4px; } @media all and (max-width:768px) { #topMenuWrap .container { justify-content: center;background-color: #273B63; color: #fff; } #topMenuWrap ul { display: none;} } /* page_feature_rvbox */ .page_feature_rvbox { padding-bottom: 350px;} .page_feature_rvbox {font-family:'SUIT'; } .page_feature_rvbox .hero_wrap.w_bg{background-image:url(/wp-content/uploads/sites/2/image/sub/rv_rvbox_bg.webp); min-height: 598px;} .page_feature_rvbox .hero_wrap.w_bg:before {background-color: transparent;} .page_feature_rvbox .hero_wrap .tit1 {font-size:56px; font-weight: 900 !important;letter-spacing: 0.5px; line-height: 1.2; margin-bottom: 48px;} .page_feature_rvbox .hero_wrap .tit_sub2 {font-size: 24px; font-weight: 700 !important; line-height: 1.3; margin-bottom: 48px;} .page_feature_rvbox.sub_page .hero_wrap a.form_scroll { display: inline-flex; align-items: center; font-size: 28px; font-weight: 800; line-height: 1.2; border-radius: 35px; padding: 15px 40px !important; background-color: #0097E4;} .page_feature_rvbox.sub_page .hero_wrap a.form_scroll img {margin-left: 18px;} .page_feature_rvbox.page_management .con01 .btns_wrap button .deco {height: 90px;} .page_feature_rvbox.page_management .con01 .btns_wrap button[data-target=sw] .deco {background-image:url(/wp-content/uploads/sites/2/image/sub/icon_page_feature_rvbox_sw_active.webp);} .page_feature_rvbox.page_management .con01 .btns_wrap button[data-target=camera] .deco {background-image:url(/wp-content/uploads/sites/2/image/sub/icon_page_feature_rvbox_camera_active.webp);} .page_feature_rvbox.page_management .con01 .btns_wrap button[data-target=ethernet] .deco {background-image:url(/wp-content/uploads/sites/2/image/sub/icon_page_feature_rvbox_ethernet_active.webp);} .page_feature_rvbox.page_management .con01 .btns_wrap button[data-target=os] .deco {background-image:url(/wp-content/uploads/sites/2/image/sub/icon_page_feature_rvbox_os_active.webp);} .page_feature_rvbox.page_management .con01 .btns_wrap button[data-target=bios] .deco {background-image:url(/wp-content/uploads/sites/2/image/sub/icon_page_feature_rvbox_bios_active.webp);} .page_feature_rvbox.page_management .con01 .btns_wrap button[data-target=on] .deco {background-image:url(/wp-content/uploads/sites/2/image/sub/icon_page_feature_rvbox_on_active.webp);} .page_feature_rvbox.page_management .con01 .btns_wrap button[data-target=kk] .deco {background-image:url(/wp-content/uploads/sites/2/image/sub/icon_page_feature_rvbox_4k_active.webp);} .page_feature_rvbox h3 + p span { display: inline-block; margin-bottom:10px;} @media all and (max-width:768px) { .page_feature_rvbox { padding-bottom: 50px;} .page_feature_rvbox.page_management .con01 .btns_wrap button .deco {height: 45px;} .page_feature_rvbox .hero_wrap>.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .page_feature_rvbox .hero_wrap.w_bg {background-image:url(/wp-content/uploads/sites/2/image/sub/rv_rvbox_bg_mb.webp); min-height: 389px !important;} .page_feature_rvbox .hero_wrap .tit1 { font-size: 26px; margin-bottom: 24px;} .page_feature_rvbox .hero_wrap .tit_sub2 {font-size: 18px; margin-bottom: 24px;} .page_feature_rvbox.sub_page .hero_wrap a.form_scroll { font-size:20px; padding: 12px 28px !important; min-width: auto;} .page_feature_rvbox.sub_page .hero_wrap a.form_scroll img {margin-left: 13px;} } /* page_rvot */ .page_rvot {color: #000;font-family:'SUIT';} .page_rvot .container .row {padding-right: 15px; padding-left: 15px;} .page_rvot section {padding-top: 120px;} .page_rvot section .tit { font-size: 48px; line-height: 1.3; font-weight: 800; color: #000; margin-bottom: 30px;} .page_rvot section .note { font-size: 28px; line-height: 1.3; font-weight:500;} .page_rvot .visual { overflow: hidden; position: relative; width: 100%; height: 779px; z-index: 3;} .page_rvot .visual .in { position: absolute; left: 50%; top: 0; height: 779px; transform: translateX(-50%);} .page_rvot .visual .txt_box { position: absolute; left: 0; top: 120px; width:100%; text-align: center; padding: 0 15px; height: 34rem; z-index: 3;transition: top 1s cubic-bezier(0.68, 0.03, 0.33, 1), color 1s cubic-bezier(0.68, 0.03, 0.33, 1);} .page_rvot .visual.active .txt_box { top: 25%; color: #fff;} .page_rvot .visual .img { position: absolute; left: 50%; transform: translateX(-50%); top: calc(25vh + 34rem + 6rem); width: calc(100% - 30px); padding-top: 18%; transition: top 1s cubic-bezier(0.68, 0.03, 0.33, 1), width 1s cubic-bezier(0.68, 0.03, 0.33, 1), padding-top 1s cubic-bezier(0.68, 0.03, 0.33, 1);} .page_rvot .visual .img.filter::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 25px; height: 80px; background-image: url('/wp-content/uploads/sites/2/image/sub/rvot_visual_scroll_icon.svg'); background-size: cover; background-position: center; z-index: 5; animation: floatY 2s ease-in-out infinite;} @keyframes floatY { 0% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } 100% { transform: translate(-50%, 0); } } .page_rvot .visual .img.filter img {transition: opacity 1s cubic-bezier(0.68, 0.03, 0.33, 1);;} .page_rvot .visual .img .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #2D3D3A; opacity: 0; transition: opacity 1s cubic-bezier(0.68, 0.03, 0.33, 1);} .page_rvot .visual .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1;} .page_rvot .visual.active .img { top: 0 !important; width: 101vw !important; padding-top: 779px !important;} .page_rvot .visual.active .txt_box { top: 25%; color: #fff;} .page_rvot .visual .txt_box .tit { font-size: 76px; font-weight: 900; line-height: 1.3;} .page_rvot .visual.active .txt_box .tit { color: #fff;} .page_rvot .visual .txt_box p { font-size: 36px; line-height: 1.3; margin-bottom: 50px;} .page_rvot .visual .form_scroll { display: inline-block; font-size:32px; font-weight: 800; line-height: 1.3; color: #fff; background-color: #4885FF; border-radius: 50px; padding: 19px 50px; height:80px;} .page_rvot .visual .form_scroll img {height: 20px; width: 12px; margin-left: 26px;} .page_rvot .visual img.mouse_scroll {width:25px; height: 12px;} .page_rvot .tab { position: sticky; top: 0; padding-top: 120px; padding-bottom:20px; z-index: 4; background-color: #fff;} .page_rvot .tab ul { display: flex; justify-content: center; gap: 20px;} .page_rvot .tab ul li { font-size: 20px; font-weight:700; line-height:1.3; border-radius: 50px; color: #fff; background-color: #D8D8D8; padding: 10px 0; width: 140px; text-align: center; cursor: pointer;} .page_rvot .tab ul li.active { background-color: #000;} .page_rvot .introduce {padding-top: 100px;} .page_rvot .introduce .intro_wrap { display: flex; gap: 40px;} .page_rvot .introduce .intro_wrap ul { width:100%; border-top: 1px solid #000;} .page_rvot .introduce .intro_wrap ul li { position: relative; border-bottom: 1px solid #000; cursor: pointer;} .page_rvot .introduce .intro_wrap ul li:nth-child(1) .cont { padding-bottom: 6px;} .page_rvot .introduce .intro_wrap ul li:nth-child(1) .cont p {padding-bottom: 15px;} .page_rvot .introduce .intro_wrap ul li:nth-child(2) .cont { padding-bottom: 129px;} .page_rvot .introduce .intro_wrap ul li.active .cont { display: block;} .page_rvot .introduce .intro_wrap ul li .desc { position: relative; font-size: 32px; font-weight: 800; line-height: 1.2; padding: 31px 0;} .page_rvot .introduce .intro_wrap ul li .desc::before { content: ''; position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 28px; height: 28px; background-image: url('/wp-content/uploads/sites/2/image/sub/rvot_intro_plus.svg'); background-repeat: no-repeat; } .page_rvot .introduce .intro_wrap ul li.active .desc::before { width:26px; height:4px; background-image: url('/wp-content/uploads/sites/2/image/sub/rvot_intro_minus.svg');} .page_rvot .introduce .intro_wrap ul li:nth-child(2) .desc {padding: 37px 0;} .page_rvot .introduce .intro_wrap ul li .cont { display: none; font-size: 20px; line-height: 1.3;} .page_rvot .introduce .intro_wrap .img img { width: 410px; height: 592px;} .page_rvot .feature .ot-img-slide { margin-bottom: 30px;} .page_rvot .feature .ot-img-slide .slick-slide {margin: 0 10px;} .page_rvot .feature .ot-img-slide .slick-slide img {width: 100%; height: auto; display: block;} .page_rvot .feature .ot-txt-slide-wrap {position: relative;} .page_rvot .feature .ot-txt-slide {position: relative;} .page_rvot .feature .ot-txt-slide .txt_slide_box {position: relative;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even)::before {content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 1px; background-color: #B1B1B1;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even) .desc {padding-left: 50px;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even) .cont {padding-left: 50px;} .page_rvot .feature .ot-txt-slide .txt_slide_box .desc { font-size: 32px; font-weight:800; line-height: 1.2; margin-bottom: 30px;} .page_rvot .feature .ot-txt-slide .txt_slide_box .cont { font-size: 20px; line-height: 1.3;} .page_rvot .feature .ot-txt-slide ul { display: flex; flex-wrap: wrap; } .page_rvot .feature .ot-txt-slide ul.slick-dots {margin: 40px 0; justify-content: center;} .page_rvot .feature .ot-txt-slide ul.slick-dots li {width: 16px; height: 16px; border-radius: 50px;} .page_rvot .feature .ot-txt-slide ul.slick-dots li.slick-active {width: 32px;} .page_rvot .feature .btns_arrow_wrap {position: absolute;max-width: 1200px;width: 100%; top: calc(50% - 33px);} .page_rvot .feature .btns_arrow_wrap .slide_btn {position:absolute; width:24px; height:46px; background: center / contain no-repeat;} .page_rvot .feature .btns_arrow_wrap .slide_btn.prev {left: -80px; background-image:url(/wp-content/uploads/sites/2/image/sub/rvot_feature_slide_prev.webp);} .page_rvot .feature .btns_arrow_wrap .slide_btn.next {right:-50px; background-image:url(/wp-content/uploads/sites/2/image/sub/rvot_feature_slide_next.webp)} .page_rvot .feature .note { padding-top: 40px; border-top: 1px solid #000;} .page_rvot .feature .ft_img {display: block; margin-top: 120px; width: 100%; height: auto;} .page_rvot .feature ul { display: flex; flex-wrap: wrap;} .page_rvot .feature ul.ft_02 {gap: 24px; justify-content: space-between; margin: 30px 0 40px;} .page_rvot .feature ul.ft_02 li { width: calc(33.3% - 16px); position: relative; } .page_rvot .feature ul.ft_02 li img {display: none;} .page_rvot .feature ul.ft_02 li .sub { font-size: 24px; font-weight:700; line-height: 1.3; text-align: center; background-color: #F7F7F7; padding: 24.5px 0;} .page_rvot .feature ul.ft_02 li > ul { gap: 24px; margin-top: 24px;} .page_rvot .feature ul.ft_02 li > ul li { width: 100%; padding-left: 30px; font-size: 20px; line-height: 1.3;} .page_rvot .feature ul.ft_02 li > ul li::before { font-size: 18px; content: ""; position: absolute; display: block; left: 10px; top: 13px; width: 4px; height: 4px; border-radius: 50%; background-color: #000;} .page_rvot .feature .info {position:relative; font-size: 16px; line-height: 1.4; padding: 14px 0 14px 25px; border-top: 1px solid #BCBCBC;} .page_rvot .feature .info::before {content:''; position: absolute; top:17.5px; left:0; width: 15px; height: 15px; background-size: 15px 15px; background-image: url('/wp-content/uploads/sites/2/image/sub/rvot_info_icon.webp'); } .page_rvot .feature .info img {margin-right: 10px;} .page_rvot .feature .info span {font-weight: 800;} .page_rvot .feature .slick-arrow {display: none !important;} .page_rvot .feature .ransom { background-color: #F9F9F9; padding: 40px; margin-top: 80px;} .page_rvot .feature .ransom .sub_tit { font-size: 32px; font-weight: 800; line-height: 1.3; text-align: center; margin-bottom: 20px; } .page_rvot .feature .ransom .rs_inner { display: flex; gap: 24px; padding: 32px 0; border-top: 3px solid #000; border-bottom: 1px solid #000;} .page_rvot .feature .ransom .rs_inner picture {display: block;} .page_rvot .feature .ransom .rs_inner img {display: block; width: 293px; height: 192px; } .page_rvot .feature .ransom .rs_inner .rs_box { display: flex; gap: 24px; align-items: flex-end; width:100%;} .page_rvot .feature .ransom .rs_inner .rs_box .con {flex: 1; font-size: 20px; line-height: 1.3;} .page_rvot .feature .ransom .rs_info {display: flex; justify-content: space-between; padding: 18px 11px 8px 11px;} .page_rvot .feature .ransom .rs_info .txt {font-size: 20px; font-weight:700; line-height: 1.3;} .page_rvot .feature .ransom .rs_info .detail_btn { font-size:20px; font-weight: 600; line-height: 1.3; color: #4885FF;} .page_rvot .feature .ransom .rs_info .detail_btn img {margin-left: 10px; width: 10px; height: 18px;} .page_rvot .effect { padding-bottom:120px;} .page_rvot .effect ul {display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start;} .page_rvot .effect ul li { width: calc(50% - 20px); background-color: #F7F7F7; padding:40px 50px;} .page_rvot .effect ul li:nth-child(2) {margin-top: 100px;} .page_rvot .effect ul li:nth-child(3) {margin-top: -100px;} .page_rvot .effect ul li .desc { font-size: 28px; line-height: 1.2; font-weight: 800; margin-bottom: 30px;} .page_rvot .effect ul li .cont { font-size: 20px; line-height: 1.3; font-weight: 400;} .page_rvot .effect .note {text-align: center; margin-top: 60px;} .page_rvot .qna { padding-bottom: 120px; background-color: #F2F5F8;} .page_rvot #qna_rvot .tit { font-size: 48px; line-height: 1.3; font-weight: 800; margin-bottom: 36px; } .page_rvot #qna_rvot .nf-form-cont { background-color: #fff; padding: 55px 25px;} .page_rvot #qna_rvot .nf-form-cont label { font-size: 24px; font-weight: 800;} .page_rvot #qna_rvot .nf-form-cont .agree_sub label { font-size: 20px; font-weight: 400; } .page_rvot #qna_rvot .nf-form-cont .agree_sub span.under { text-decoration: underline; text-underline-offset: 4px; font-weight: 800; cursor: pointer;position: relative; z-index: 1;} .page_rvot #qna_rvot .nf-multi-cell .nf-cell { padding: 0 10px;} .page_rvot #qna_rvot .ninjaform_info { display: none; border: 1px solid #C4C4C4; padding: 15px; } .page_rvot #qna_rvot .nf-row.active .ninjaform_info {display: block;} .page_rvot #qna_rvot .agree_sub {margin: 10px;} .page_rvot #qna_rvot .checkbox-container.label-right label:after { background-color: #fff; top: 4px; border-color: #000;} .page_rvot #qna_rvot .checkbox-container label .under { font-size:20px; line-height: 1.3;} .page_rvot #qna_rvot .nf-form-cont .agree_sub.label-right .nf-field-label { justify-content: center;} .page_rvot #qna_rvot .agree_txt ul li { font-size: 14px; line-height: 1.3; color :#787878;} .page_rvot #qna_rvot .agree_txt ul li.point { text-decoration: underline; color:#E80000;} .page_rvot #qna_rvot .nf-form-content .qna_btn_wrap {margin-top: 30px; margin-bottom: 0;} .page_rvot #qna_rvot .nf-form-content .qna_btn_wrap::after { content: ''; position: absolute; top:0; right:0; height: 20px; width: 12px; background-image: url('/wp-content/uploads/sites/2/image/sub/rvot_arrow.svg');} .page_rvot #qna_rvot .nf-form-content .qna_btn { position: relative; font-size: 24px; font-weight:700; line-height: 1.3; border-radius: 50px; padding: 14.5px 72px; height: 60px;} .page_rvot #qna_rvot .nf-form-content .qna_btn::after { content: ''; position: absolute; top:0; right:0; height: 20px; width: 12px; background-image: url('/wp-content/uploads/sites/2/image/sub/rvot_arrow.svg');} .page_rvot #qna_rvot .nf-form-content .nf-error-msg {font-size: 18px;} .page_rvot #qna_rvot .nf-form-content .ninja-forms-req-symbol {font-size: 15px; } /* 상담 요청하기 */ .inqury {font-family:'SUIT'; padding: 80px 0 40px;} .inqury .inqury_inner {width: 100%; max-width: 940px; padding: 0 20px; margin: 0 auto;} .inqury .inqury_inner .tit{font-size:56px; font-weight:800; line-height:1.2; text-align:center; margin-bottom: 40px;} .inqury .inqury_inner input[type="text"], .inqury .inqury_inner input[type="email"], .inqury .inqury_inner input[type="tel"] { background-color: #fff; border: 1px solid #C4C4C4; border-radius: 8px; height: 66px;} .inqury .inqury_inner textarea { background-color: #fff; border: 1px solid #C4C4C4; border-radius: 8px;} .inqury .inqury_inner input[type="text"]::placeholder, .inqury .inqury_inner input[type="email"]::placeholder, .inqury .inqury_inner input[type="tel"]::placeholder {font-size: 20px; color: #0000004D; font-weight: 400; } .inqury .inqury_inner textarea::placeholder {font-size: 20px; color: #0000004D;} .inqury .inqury_inner .nf-field-container { margin-bottom: 40px;} .inqury .inqury_inner .nf-form-content {padding: 0;} .inqury .inqury_inner .nf-form-content label {font-size: 20px; font-weight:800; line-height: 1.2;} .inqury .inqury_inner .nf-form-content input { font-size:20px; padding: 20px;} .inqury .inqury_inner .nf-form-content textarea.ninja-forms-field { height: 150px; padding: 20px; font-size: 20px; resize: none;} .inqury .inqury_inner .checkbox-wrap .nf-field-label label:after { border-radius: 2px; border-color: #000; height: 20px; width: 20px; top: 3px; background-color: #fff;} .inqury .inqury_inner .nf-multi-cell .nf-cell {padding: 0 10px;} .inqury .inqury_inner .nf-error.field-wrap .nf-field-element:after {height: 64px; line-height: 63px; border-top-right-radius: 7px; border-bottom-right-radius: 7px;} .inqury .inqury_inner .nf-pass.field-wrap .nf-field-element:after { top: 8px;} .inqury .inqury_inner .inqury_agree .nf-field-label { justify-content: center; padding: 10px 0;} .inqury .inqury_inner .inqury_agree .nf-field-label label { justify-content: center; font-weight: 400; } .inqury .inqury_inner .inquiry_showModal {cursor: pointer; position: relative; z-index: 1; font-weight: 800; box-shadow: inset 0 -1px 0;} .inqury .inqury_inner .inqury_btn_wrap { text-align: center;} .inqury .inqury_inner .inqury_btn_wrap .inqury_btn { font-size:24px; font-weight:800; line-height: 1.3; background-color: #56ACFF; border-radius: 8px; padding: 16px 120px; height: 63px;} .inqury_complete { display: flex; flex-direction: column; align-items: center; height: calc(100vh - 310px); justify-content: center; } .inqury_complete .sub {font-size: 36px; font-weight:700; line-height: 1.2; margin: 20px 0; } .inqury_complete .desc {font-size: 20px; line-height: 1.2; } @media screen and (max-width: 600px) { .inqury { padding: 40px 0 7px;} .inqury .inqury_inner {padding: 0 10px;} .inqury .inqury_inner .tit{font-size:28px; margin-bottom: 0;} .inqury .inqury_inner input[type="text"], .inqury .inqury_inner input[type="email"], .inqury .inqury_inner input[type="tel"] { border-radius: 4px; height: 45px;} .inqury .inqury_inner textarea { border-radius: 4px;} .inqury .inqury_inner input[type="text"]::placeholder, .inqury .inqury_inner input[type="email"]::placeholder, .inqury .inqury_inner input[type="tel"]::placeholder {font-size: 16px;} .inqury .inqury_inner textarea::placeholder {font-size: 16px;} .inqury .inqury_inner .nf-form-content textarea.ninja-forms-field { padding: 12px; font-size: 16px;} .inqury .inqury_inner .nf-form-content label { font-size: 16px;} .inqury .inqury_inner .nf-field-container {margin-bottom: 20px;} .inqury .inqury_inner .nf-error.field-wrap .nf-field-element:after {height: 44px; line-height: 44px; border-top-right-radius: 2px; border-bottom-right-radius: 2px;} .inqury .inqury_inner .nf-pass.field-wrap .nf-field-element:after { top: 0;} .inqury .inqury_inner .nf-form-content input { font-size: 16px; padding: 12px;} .inqury .inqury_inner .checkbox-wrap .nf-field-label label:after { width: 16px; height: 16px;} .inqury .inqury_inner .nf-field-container .checkbox-wrap .nf-field-label label:before {font-size: 18px;} .inqury .inqury_inner .inqury_agree .nf-field-label {justify-content: flex-start; padding: 0 0 10px 0;} .inqury .inqury_inner .inqury_btn_wrap .inqury_btn {font-size: 18px; background-color: #7DBEFC; width: 100%; height: 55px;} .inqury_complete { height: calc(100vh - 158px); margin-top: -40px;} .inqury_complete img { height: 80px; width: 80px; } .inqury_complete .sub { font-size: 20px; } .inqury_complete .desc { font-size: 16px; text-align: center;} } /* br태그 */ .br_sm { display: none;} .br_mb { display: none;} .br_web {display: inline;} @media screen and (max-width: 1230px) { .br_sm { display: none;} .br_web {display: none;} .br_mb { display: inline;} } @media screen and (max-width: 640px) { .br_web {display: none;} .br_mb { display: none;} .br_sm { display: inline;} } @media all and (max-width:1230px) { .page_rvot .container .row {padding-right: 40px; padding-left: 40px;} .page_rvot section {padding-top: 60px;} .page_rvot section .tit { font-size: 28px;} .page_rvot .visual .txt_box .tit {font-size: 44px;} .page_rvot .visual .txt_box p { font-size: 24px; margin-bottom: 30px;} .page_rvot .visual .img.filter::after { width: 20px; height: 64px;} .page_rvot .visual .form_scroll { font-size: 24px; padding: 14px 35px; height: 60px;} .page_rvot .visual .form_scroll img { height: 17px; margin-left: 14px;} .page_rvot .tab {padding-top: 100px; } .page_rvot .introduce { padding-top: 40px;} .page_rvot .introduce .intro_wrap ul li .desc {font-size: 20px; padding: 13px 0;} .page_rvot .introduce .intro_wrap ul li .desc::before { width: 15px; height: 15px; background-size: 15px 15px;} .page_rvot .introduce .intro_wrap ul li.active .desc::before { width: 15px; height: 2px; background-size: 15px 2px;} .page_rvot .introduce .intro_wrap ul li .cont {font-size: 14px;} .page_rvot .introduce .intro_wrap ul li:nth-child(2) .cont { padding-bottom: 106px;} .page_rvot .introduce .intro_wrap .img img { height: 374px; width: 235px;} .page_rvot .introduce .intro_wrap ul li:nth-child(2) .desc { padding: 11px 0;} .page_rvot .feature .ft_img { margin-top: 48px;} .page_rvot .feature .info { font-size:14px;} .page_rvot .feature ul.ft_02 {margin: 15px 0 40px;} .page_rvot .feature ul.ft_02 li > ul { margin-bottom: 12px;} .page_rvot .feature ul.ft_02 li .sub { font-size: 14px; padding: 6px 12px;} .page_rvot .feature ul.ft_02 li > ul li {font-size: 14px;} .page_rvot .feature .note { font-size: 18px;} .page_rvot .feature .ot-img-slide {margin-bottom: 24px;} .page_rvot .feature .ot-txt-slide .txt_slide_box .desc { font-size: 20px;} .page_rvot .feature .ot-txt-slide .txt_slide_box .cont { font-size: 14px;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even) .desc {padding-left: 20px;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even) .cont {padding-left: 20px;} .page_rvot .feature .ot-txt-slide ul.slick-dots {margin: 20px 0;} .page_rvot .feature .ot-txt-slide ul.slick-dots li {width: 12px; height: 12px; } .page_rvot .feature .ot-txt-slide ul.slick-dots li.slick-active {width: 24px;} .page_rvot .feature .btns_arrow_wrap { max-width: none; top: 0;} .page_rvot .feature .btns_arrow_wrap .slide_btn {width: 11px; height: 18px; } .page_rvot .feature .btns_arrow_wrap .slide_btn.prev {display: none;} .page_rvot .feature .btns_arrow_wrap .slide_btn.next { top:15px; right:0;} .page_rvot .feature .ransom { padding: 35px 20px 43px 20px; margin-top: 60px;} .page_rvot .feature .ransom .sub_tit { font-size:28px; margin-bottom: 18px;} .page_rvot .feature .ransom .rs_inner {padding: 20px 0; align-items: center;} .page_rvot .feature .ransom .rs_inner img { width: 206px; height: 180px;} .page_rvot .feature .ransom .rs_inner .rs_box {align-items: flex-start;} .page_rvot .feature .ransom .rs_inner .rs_box .con { font-size: 14px;} .page_rvot .feature .ransom .rs_info { flex-direction: column; gap: 17px; padding: 8px 0 0 0;} .page_rvot .feature .ransom .rs_info .txt {font-size: 16px;} .page_rvot .feature .ransom .rs_info .detail_btn { font-size: 18px; text-align: right;} .page_rvot .feature .ransom .rs_info .detail_btn img {width: 9px; height: 15px;} .page_rvot .effect {padding-bottom: 60px;} .page_rvot .effect .tit { margin-bottom: 24px;} .page_rvot .effect ul { gap: 20px;} .page_rvot .effect ul li { padding: 20px;} .page_rvot .effect ul li .desc { font-size: 16px; margin-bottom: 12px; } .page_rvot .effect ul li .cont { font-size: 14px;} .page_rvot .effect ul li:nth-child(2) { margin-top: 50px;} .page_rvot .effect ul li:nth-child(3) { margin-top: -50px;} .page_rvot #qna_rvot .tit { font-size: 28px; margin-bottom: 24px;} .page_rvot #qna_rvot .nf-form-cont { padding: 43px 5px;} .page_rvot #qna_rvot .nf-form-cont label { font-size: 16px;} .page_rvot #qna_rvot .nf-form-content .qna_btn {font-size: 20px; height: 45px;} .page_rvot #qna_rvot .nf-form-content input {height: 40px; font-size: 14px;} .page_rvot #qna_rvot .nf-form-content .nf-error-msg {font-size: 12px;} .page_rvot #qna_rvot .nf-error.field-wrap .nf-field-element:after {height: 38px; width: 40px; line-height: 38px;} .page_rvot #qna_rvot .nf-pass.field-wrap .nf-field-element:after { right: 7px; height: 38px; line-height: 38px;} .page_rvot #qna_rvot .nf-form-content .ninja-forms-req-symbol {font-size: 10px; vertical-align: top;} .page_rvot #qna_rvot .nf-form-content .qna_btn {padding: 9px 52px;} .page_rvot #qna_rvot .nf-error-msg, .ninja-forms-req-symbol { font-size: 12px;} .page_rvot #qna_rvot .nf-row.active .ninjaform_info {margin-bottom: 0;} } @media all and (max-width:640px) { .page_rvot .container .row { padding-right: 20px; padding-left: 20px;} .page_rvot section .tit {font-size: 20px; margin-bottom: 24px;} .page_rvot .visual { height: 469px; padding-top: 0;} .page_rvot .visual .img {padding-top: 124px;} .page_rvot .visual .txt_box {top: 74px; height:242px;} .page_rvot .visual .txt_box .tit { font-size: 24px; line-height: 1.2; margin-bottom: 25px;} .page_rvot .visual .txt_box p {font-size: 14px;} .page_rvot .visual .img.filter::after {height: 50px; width: 15px;} .page_rvot .visual .form_scroll { font-size: 16px; padding: 7px 26px; height: 35px;} .page_rvot .visual .form_scroll img { height: 10px; margin-left: 5px;} .page_rvot .visual.active .img {padding-top: 80vh !important;} .page_rvot .visual .in {height: 469px;} .page_rvot .tab { padding-top: 48px; padding: 48px 0 12px 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .page_rvot .tab ul { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 12px; overflow-x: auto; margin-top: 15px; scroll-padding-left: 16px; } .page_rvot .tab ul li { font-size: 14px; padding: 7px 11px; flex: 0 0 auto; width: 88px;} .page_rvot .tab ul li:last-child {margin-right: 11px;} .page_rvot .introduce {padding-top: 27px;} .page_rvot .introduce .intro_wrap { flex-direction: column-reverse; gap: 7px;} .page_rvot .introduce .intro_wrap .img img { width: 100%; height: auto;} .page_rvot .introduce .intro_wrap ul li:nth-child(2) .cont { padding-bottom: 15px;} .page_rvot .introduce .intro_wrap ul li .desc { font-size: 16px; padding: 12px 0;} .page_rvot .introduce .intro_wrap ul li:nth-child(2) .desc {padding: 12px 0;} .page_rvot .feature { padding-top: 48px;} .page_rvot .feature .info {font-size: 12px; padding: 10px 0 10px 15px;} .page_rvot .feature .info::before { top: 13.5px; width:10px; height: 10px; background-size: 10px 10px;} .page_rvot .feature .ft_img { display: none;} .page_rvot .feature ul.ft_02 li img {display: block; width: 100%; height: auto;} .page_rvot .feature .ot-img-slide {margin-bottom: 12px;} .page_rvot .feature .ot-img-slide .slick-slide {margin: 0 5px;} .page_rvot .feature .ot-txt-slide .txt_slide_box .desc { font-size: 16px; margin-bottom: 12px;} .page_rvot .feature .ot-txt-slide .txt_slide_box .cont { font-size: 14px;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even) .desc { padding-left: 0;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even) .cont { padding-left: 0;} .page_rvot .feature .ot-txt-slide .txt_slide_box:nth-child(even)::before { width: 0;} .page_rvot .feature .ot-txt-slide ul.slick-dots { margin: 22px 0 22px 0;} .page_rvot .feature .ot-txt-slide ul.slick-dots li { width: 8px; height: 8px; margin: 0 5px;} .page_rvot .feature .ot-txt-slide ul.slick-dots li.slick-active { width: 16px;} .page_rvot .feature .btns_arrow_wrap .slide_btn.next { top:12px;} .page_rvot .feature ul.ft_02 { margin: 48px -10px 0 -10px; } .page_rvot .feature ul.ft_02 li { margin: 0 10px;} .page_rvot .feature ul.ft_02 li .sub { text-align: left;} .page_rvot .feature ul.ft_02 li > ul {margin-top: 12px;} .page_rvot .feature .note { font-size: 14px; padding-top: 20px;} .page_rvot .feature .ransom { padding: 24px 16px; margin-top: 24px;} .page_rvot .feature .ransom .sub_tit { font-size: 16px; text-align: left; margin-bottom: 7px;} .page_rvot .feature .ransom .rs_inner {flex-direction: column; border-width: 1.5px; border-bottom: 0.5px solid #000; gap: 16px; padding: 12px 0;} .page_rvot .feature .ransom .rs_inner picture img {width: 100%; height: auto;} .page_rvot .feature .ransom .rs_inner .rs_box { flex-direction: column; align-items: flex-start; gap: 12px;} .page_rvot .feature .ransom .rs_inner .rs_box .con {font-size: 14px;} .page_rvot .feature .ransom .rs_info { gap: 28px; padding: 12px 0 0 0;} .page_rvot .feature .ransom .rs_info .txt {font-size: 14px;} .page_rvot .feature .ransom .rs_info .detail_btn { font-size: 14px; } .page_rvot .feature .ransom .rs_info .detail_btn img {width: 5px; height: 9px;} .page_rvot .effect { padding-top: 48px; padding-bottom: 48px;} .page_rvot .effect ul { gap: 12px;} .page_rvot .effect ul li { width: 100%;} .page_rvot .effect ul li:nth-child(2) { margin-top: 0;} .page_rvot .effect ul li:nth-child(3) { margin-top: 0;} .page_rvot .qna {padding-top: 48px; padding-bottom: 48px;} .page_rvot #qna_rvot .tit { font-size: 20px;} .page_rvot #qna_rvot .nf-field-container .nf-field-label {margin-bottom: 5px!important} .page_rvot #qna_rvot .checkbox-container label .under { font-size: 10px;} .page_rvot #qna_rvot .nf-form-cont {padding: 24px 0 14px;} .page_rvot #qna_rvot .nf-form-cont label { font-size: 12px;} .page_rvot #qna_rvot .nf-form-cont .agree_sub label { font-size: 10px;} .page_rvot #qna_rvot .nf-form-content .qna_btn { font-size: 14px; height: 32px; padding:7px 27px;} .page_rvot #qna_rvot .nf-form-content .qna_btn_wrap {margin-top: 0; } .page_rvot #qna_rvot .nf-cell {width: 100% !important;} .page_rvot #qna_rvot .nf-field-container .checkbox-wrap .nf-field-label label:before {font-size: 10px; left: -17px;} .page_rvot #qna_rvot .checkbox-container.label-right label:after { width: 11px; height: 11px; left: -18px;} .page_rvot #qna_rvot .agree_txt ul li { font-size: 10px;} .page_rvot #qna_rvot .nf-form-content input { height: 30px; font-size: 11px; padding: 7px 5px;} .page_rvot #qna_rvot .nf-form-content .nf-field-container .nf-field-element textarea.ninja-forms-field {height: 90px; font-size: 10px; padding: 7px 5px;} .page_rvot #qna_rvot .nf-form-content .nf-field-container {margin: 0 0 8px 0;} .page_rvot #qna_rvot .nf-error-msg, .ninja-forms-req-symbol { font-size: 12px;} .page_rvot #qna_rvot .nf-error.field-wrap .nf-field-element:after { height: 28px; width: 30px; line-height: 28px; font-size: 17px;} .page_rvot #qna_rvot .nf-pass.field-wrap .nf-field-element:after {height: 28px; line-height: 28px; font-size: 20px;} .page_rvot #qna_rvot .ninjaform_info {height: 138px;} } /* popup fix */ .popup_fix {position: fixed; left: 138px; top: 182px;; z-index: 9999; box-shadow: 0px 0px 20px 0px #00000033; display: none; font-size:0; font-family: 'SUIT';} .popup_fix.active {display: block;} .popup_fix a { display: flex;} .popup_fix .popup_bottom { display: flex; justify-content: space-between; background-color: #fff; padding: 12px 18px 12px 20px; } .popup_fix .popup_bottom button {font-size: 16px; line-height: 1.3;} .popup_fix img {max-width: 100%; height: auto;} /* popup 버튼 추가 0909 */ .popup_fix {background: url(/wp-content/uploads/sites/2/image/main/ld_holiday_popup_bg.webp) no-repeat center/cover; } .popup_fix .pop_wrap {font-size:0; text-align: center; margin: 10px 0 24px 0;} .popup_fix .pop_wrap a.pop_btn { position: relative; z-index: 0; overflow: hidden; display: inline-block; cursor: pointer; font-size: 18px; line-height: 1.3; font-weight:800; background-color: #56ACFF; color:#fff; border-radius: 66px; padding: 12px 50px;} .popup_fix .pop_wrap a.pop_btn::before{ content: ""; position: absolute; inset: 0; background: #094B7B; z-index: -1; transform-origin: right center; transform: scaleX(0); transition: transform .25s ease-in-out;} .popup_fix .pop_wrap a.pop_btn:hover::before{ transform-origin: left center; transform: scaleX(1);} @media all and (max-width:640px) { .popup_fix { top: 110px; left: 50%; transform: translate(-50%, 0); width: 73%;} .popup_fix a img { max-width: 320px; height: auto;} .popup_fix .popup_bottom {padding: 8px 14px 8px 16px; } .popup_fix .popup_bottom button {font-size: 12px;} .popup_fix .pop_wrap a.pop_btn { font-size: 14px; padding: 8px 37px;} } @media all and (max-width:360px) { .popup_fix { transform: translate(-50%, 0); width: calc(100% - 40px); max-width: 100%;} .popup_fix img { width: 100%; height: auto;} } /************* sms ****************/ .page_sms *{font-family:'SUIT'; } .page_sms {padding-top: 80px; padding-bottom: 72px;} .page_sms .inner {margin: 0 auto; padding: 0 20px;} .page_sms .inner .sms_tit { font-size: 76px; font-weight:800; line-height: 1.2; margin-bottom: 32px; text-align: center;} .page_sms .inner .sms_sub { font-size: 32px; line-height: 1.2; text-align: center; margin-bottom: 59px;} .page_sms .inner .step_wrap {max-width: 894px; margin: 0 auto;} .page_sms .inner .step_wrap ul { display: flex; gap: 24px;} .page_sms .inner .step_wrap ul li {width: calc(33% - 10px); text-align: center; position: relative;} .page_sms .inner .step_wrap ul li .num { display: flex; justify-content: center; margin-bottom: 20px;} .page_sms .inner .step_wrap ul li .num p { display: flex; justify-content: center; align-items: center; width:26px; height:26px; border-radius: 50px; font-size: 20px; font-weight:600; color:#fff; background-color: #DBDBDB; z-index: 1;} .page_sms .inner .step_wrap ul li .txt { font-size: 20px; line-height: 1.3; color: #DBDBDB;} .page_sms .inner .step_wrap ul li .txt span {font-weight: 700;} .page_sms .inner .step_wrap ul li.active .num p {background-color: #000;} .page_sms .inner .step_wrap ul li.active .txt {color: #000;} .page_sms .inner .step_wrap ul li.active ~ li .txt span {font-weight: 400;} .page_sms .inner .step_wrap ul li::after, .page_sms .inner .step_wrap ul li::before { content:''; position: absolute; top:13px; height: 1px; background-color: #DBDBDB; width: calc(50% + 12px);} .page_sms .inner .step_wrap ul li.active::after, .page_sms .inner .step_wrap ul li.active::before { background-color: #000;} .page_sms .inner .step_wrap ul li:nth-child(2)::before, .page_sms .inner .step_wrap ul li:nth-child(3)::before { left: -12px;} .page_sms .inner .step_wrap ul li:nth-child(3)::after { display: none; } /* input 공통 */ .page_sms .sms_input_wrap {display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 24px;} .page_sms .sms_input_wrap .input_box {position:relative; width: 100%;} .page_sms .sms_input_wrap .input_btn {width: 220px; flex: 0 0 220px;} .page_sms .input_box .input_sms_custom {width: 100%; border: 1px solid #B5B5B5; border-radius: 16px; font-size: 20px; line-height: 1.3; padding: 21px 0 21px 30px;} .page_sms .input_box .input_sms_custom.bg_grey {background-color: #e3e3e3;} .page_sms .input_box .input_sms_custom::placeholder { color:#E4E4E4; font-size: 20px; } .page_sms .input_box .input_sms_custom:disabled, .page_sms .input_box .input_sms_custom:read-only{border: 1px solid #C1C1C1;background: #E3E3E3;} .page_sms .input_box .input_sms_custom:disabled::placeholder, .page_sms .input_box .input_sms_custom:read-only::placeholder{color: #B5B5B5;} .page_sms .input_box select.input_sms_custom:required{cursor: pointer; background: url(/wp-content/uploads/image/common/icon_arrow_sms.svg) no-repeat right 24px center;} .page_sms .input_box .tiemer_wrap{position:absolute;top:27px; right:24px;color: #F00;font-size: 14px;font-weight: 700;line-height: 1.3;} .page_sms .input_box .error.msg{padding-top:16px; color: #F00;font-size: 14px;line-height: 1.3; } .custom_btn {display: block; width:100%;color:#fff; font-size: 24px; font-weight:800; padding:19.5px 0; border-radius: 16px; line-height: 1.3;} .custom_btn.bg_grey{background:#E3E3E3;color:#C6C6C6;} .custom_btn.bg_grey span{color:#C6C6C6; font-weight:400;} #trial-email {color: #B5B5B5;} .page_sms .mt_input {margin-top: 56px;} .btn_resend_approve_mobile:disabled {background-color: #E3E3E3; color: #C6C6C6; font-weight: 400;} /* step 01 */ .sms_step_01_cont {max-width: 894px; margin: 0 auto;} .sms_step_01_cont .sms_01_validate {margin: 67px auto 0 auto; max-width: 744px;} .sms_step_01_cont .sms_01_validate .email_again {position: relative; font-size: 16px; font-weight:500; color:#9D9D9D; margin-top: 20px; padding: 9px 0;line-height:1.3;} .sms_step_01_cont .sms_01_validate .email_again button {padding:0; border-radius:0; color: #4885FF; font-size: 16px; font-weight:500; text-decoration: underline;} .sms_step_01_cont .info { margin-top: 100px;} .sms_step_01_cont .info ul { display: flex; gap: 24px;} .sms_step_01_cont .info ul li {display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; border-radius: 16px; background-color: #F7F9FF; padding: 32px 0 36px; } .sms_step_01_cont .info ul li p { font-size: 20px; font-weight:600; line-height: 1.3; margin-top: 32px;} .sms_step_01_cont .info ul li p span { font-weight: 800;} /* step 02 */ .sms_step_02_cont{max-width:742px; margin:56px auto 0;} .sms_step_02_cont .sms_form_wrap{display:flex;flex-direction: column;} .sms_step_02_cont .sms_form_wrap .form_row{display:flex; gap:16px; flex-direction: column; margin-bottom: 56px;} .sms_step_02_cont .sms_form_wrap .sms_label_wrap{display:flex; align-items: center; gap: 16px;} .sms_step_02_cont .sms_form_wrap .sms_label_wrap .sms_label{color: #000;font-size: 20px;font-weight: 800; line-height:1.7;} .sms_step_02_cont .sms_form_wrap .sms_label_wrap .sms_label i{color: #E92325; font-style:normal; line-height:1; vertical-align:text-top;} .sms_step_02_cont .sms_form_wrap .sms_label_wrap .desc{color: #9D9D9D;font-size: 14px;} .sms_step_02_cont .sms_form_wrap .sms_agree_box{display:flex; gap:16px; flex-direction:column; padding: 17px 29px;border-radius: 16px;border: 1px solid #B5B5B5;} .sms_step_02_cont .chk_wrap{display:flex; justify-content:space-between; padding-left: 18px;} .sms_step_02_cont .chk_wrap label{font-size: 18px; line-height:1.8;} .sms_step_02_cont .chk_wrap label strong{padding-right:16px; color: #4885FF;font-weight: 400;} .sms_step_02_cont .chk_wrap label span{padding-right:16px; color: #C6C6C6;} .sms_step_02_cont .chk_wrap .mark{overflow:hidden; position:absolute; top:50%; left:0; transform: translateY(-50%); width:4px; height:4px; padding:0; border-radius:4px;background-color:#BABABA} .sms_step_02_cont .chk_wrap input:checked ~ .mark{width:10px; height:10px; border:0; background-color:#fff;border-radius:0px;} .sms_step_02_cont .chk_wrap input:checked ~ .mark:after{content:''; background:url(/wp-content/uploads/image/common/icon_check_sms.svg) no-repeat center;} .sms_step_02_cont .chk_wrap input:disabled ~ .mark{background-color:#f3f3f3} .sms_step_02_cont .chk_required.active .mark{width:10px; height:10px; border:0; background-color:#fff;border-radius:0px;} .sms_step_02_cont .chk_required.active .mark:after{content:''; background:url(/wp-content/uploads/image/common/icon_check_sms.svg) no-repeat center;} .sms_step_02_cont .chk_wrap .view_showModal{width:33px; height:33px; background: url(/wp-content/uploads/image/common/icon_arrow_sms.svg) no-repeat right center;color:transparent; font-size:0; transform: rotate(-90deg);} .sms_step_02_cont .sms_form_wrap .input_btn{display:flex;gap:16px;} .sms_step_02_cont #domain-error {color:#FF0000; padding-top: 16px; font-size: 14px; } .sms_step_02_cont #mobile-error {color:#FF0000; padding-top: 16px; font-size: 14px; } .sms_step_02_cont #mobile-error.blue {color: #4885FF;} .sms_step_02_cont .sms_form_wrap .form_row.domain_wrap_area {margin-bottom:0;} .sms_step_02_cont .sms_form_wrap .form_row.sms_wrap_area {margin-bottom:0;} .sms_step_02_cont #main_error-error { color: #FF0000;} .sms.modal.in .modal-dialog{font-family:'SUIT';position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%); margin:0;} .sms .modal-dialog{max-width:439px;min-width:300px;} .sms .modal-content{border-radius: 16px; box-shadow: 4px 4px 14.8px 0px rgba(0, 0, 0, 0.10);} .sms .modal-header{padding:20px 0; margin:0px 30px;color: #000;font-size: 20px;font-weight: 800;line-height: 1.2; } .sms .modal-header .close{margin:0; font-size:25px; line-height:1; color:#9D9D9D;opacity:1;} .sms .modal-body{padding:30px;font-size:14px; line-height:1.3;} .sms .modal-body .tit_sub3{font-weight:700 !important; font-size:14px; line-height:1.3;} .sms .modal-body .box_scroll_wrap{max-height:309px;} .sms .modal-body .box_scroll_wrap > .sub_page > .container{padding:0;} .sms .modal-body .underline{text-decoration: underline;} .benefit.modal.in .modal-dialog{font-family:'SUIT';position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);margin:0;} .benefit .modal-dialog{max-width: 540px; min-width:300px; margin: 0;} .benefit .modal-content{border-radius: 16px; box-shadow: 4px 4px 14.8px 0px rgba(0, 0, 0, 0.10);} .benefit .modal-header{border-bottom:0;} .benefit .modal-header .close{margin:0; font-size:25px; line-height:1; color:#9D9D9D;opacity:1;} .benefit .modal-body{padding:16px 30px 30px;} .benefit .modal-body .tit{padding-bottom:35px;color: #000;font-size: 40px;font-weight: 800;line-height: 1.2;} .benefit .modal-body ul{display: flex;flex-direction: column;gap: 16px;margin-bottom:32px;padding: 24px 32px;border-radius: 16px;background: #F7F9FF;} .benefit .modal-body li{display: flex; gap:12px; align-items:center;color: #000;font-size: 20px;font-weight: 700;line-height: 1.3; } .marketing_agree{display: block; margin:20px auto 0;color: #9D9D9D;font-size: 14px;line-height: 1.3; text-decoration: underline;} /* step 03 */ .page_sms .sms_step_03_cont { margin-top: 56px; } .page_sms .sms_step_03_cont .wrap { max-width: 742px; overflow: hidden; margin: 0 auto;} .page_sms .sms_step_03_cont .wrap table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; border-top: 1.5px solid #000; border-bottom: 1.5px solid #000;} .page_sms .sms_step_03_cont .wrap table tr { border-bottom: 1px solid #A6A6A6;} .page_sms .sms_step_03_cont .wrap table tr th { font-size: 20px; font-weight: 700; line-height: 1.3; padding: 15px 0 15px 25px;text-align: left; width: 200px;} .page_sms .sms_step_03_cont .wrap table tr td { font-size: 20px; font-weight: 300;} .page_sms .sms_step_03_cont .wrap .help {display: flex; justify-content: space-between; padding: 15px 2px; font-size: 16px; line-height: 1.3; color: #909090;} .page_sms .sms_step_03_cont .wrap .help a { font-weight: 700; color: #4885FF;} .page_sms .sms_step_03_cont .wrap .step03_wrap { text-align: center; margin-top: 56px;} .page_sms .sms_step_03_cont .wrap .step03_wrap a { display: inline-block; font-size: 24px; font-weight:800; line-height: 1.3; letter-spacing: 0.2px; color:#fff; padding: 19.5px 54px; background-color: #4885FF; border-radius: 12px;} @media all and (max-width:640px) { .page_sms {padding-top: 64px; padding-bottom: 64px;} .page_sms .inner .sms_tit { font-size: 32px; font-weight:900;} .page_sms .inner .sms_sub { font-size: 20px; font-weight:500; margin-bottom: 32px;} .page_sms .inner .step_wrap ul li .num p {font-size: 16px; width: 24px; height: 24px;} .page_sms .inner .step_wrap ul li .txt {font-size: 14px;} .page_sms .sms_input_wrap{flex-direction: column;gap:10px;} .page_sms .sms_input_wrap .input_btn{width:100%; flex:1;} .page_sms .input_box .input_sms_custom{padding:17px 14px 16px;border-radius: 12px;font-size: 12px;} .page_sms .input_box select.input_sms_custom:required{padding-right:10px;background-position: right 10px center;} .page_sms .input_box .tiemer_wrap{top:19px;font-size: 12px;font-weight: 400;} .page_sms .input_box .input_sms_custom::placeholder {font-size: 12px; } .page_sms .input_box .error.msg{padding-top:10px;font-size: 12px;} .custom_btn{padding:15px 14px; border-radius: 12px; font-size:16px;} .sms_step_01_cont .sms_01_validate{margin-top:40px;} .sms_step_01_cont .sms_01_validate .email_again{margin-top:16px; padding:0 14px; font-size: 12px;} .sms_step_01_cont .sms_01_validate .email_again button{ font-size: 12px; } .sms_step_01_cont .info{margin-top:49px;} .sms_step_01_cont .info ul {flex-direction: column; gap: 12px;} .sms_step_01_cont .info ul li { border-radius: 8px; padding: 37px 0; min-height: 200px; justify-content: center;} .sms_step_01_cont .info ul li:first-child img {width: 54px; height: auto;} .sms_step_01_cont .info ul li:last-child img {width: 65px; height: auto;} .sms_step_01_cont .info ul li p {font-size: 16px; margin-top: 16px;} .sms_step_02_cont{margin: 40px auto 0;} .sms_step_02_cont .sms_form_wrap .form_row{gap:10px; margin-bottom: 0; margin-top: 32px;} .sms_step_02_cont .sms_form_wrap .sms_label_wrap {gap: 6px;} .sms_step_02_cont .sms_form_wrap .sms_label_wrap .sms_label{font-size: 14px;font-weight: 600;line-height: 34px} .sms_step_02_cont .sms_form_wrap .sms_label_wrap .desc{font-size:12px;} .sms_step_02_cont .sms_form_wrap .sms_agree_box{padding:17px 8px 17px 20px;gap:10px;} .sms_step_02_cont .chk_wrap{padding-left:14px; padding-right:0;} .sms_step_02_cont .chk_wrap .mark{width:2px; height:2px;} .sms_step_02_cont .chk_wrap label{font-size:12px;} .sms_step_02_cont .chk_wrap label strong{padding-right:12px;} .sms_step_02_cont .chk_wrap .view_showModal{width:25px; height:25px;background-size:25px;} .sms_step_02_cont .sms_form_wrap .input_btn{flex-direction: column-reverse; gap:10px;} .sms_step_02_cont #mobile-error {font-size: 12px; padding-top:10px;} .sms_step_02_cont #domain-error {font-size: 12px; padding-top:10px;} .sms_step_02_cont .btn_approve_mobile {margin-bottom:22px;} .page_sms .mt_input {margin-top: 32px;} .page_sms .sms_step_03_cont {margin-top: 42px;} .page_sms .sms_step_03_cont .wrap table tr th {padding:17px 0 17px 14px; font-size: 14px; width: 130px;} .page_sms .sms_step_03_cont .wrap table tr td {font-size: 14px;} .page_sms .sms_step_03_cont .wrap .help {padding:16px 14px; flex-direction: column; align-items:flex-start; text-align: center; font-size: 12px;text-align:left;} .page_sms .sms_step_03_cont .wrap .step03_wrap {margin-top: 15px; } .page_sms .sms_step_03_cont .wrap .step03_wrap a { font-size: 16px; width: 100%; padding: 15px 0; } .sms .modal-content{border-radius: 12px;} .sms .modal-header{margin:0px 20px;font-size: 18px;} .sms .modal-header .close{font-size:20px;} .sms .modal-body{padding:30px 20px;font-size:12px;} .sms .modal-body .tit_sub3{font-size:12px;} .sms .modal-body .box_scroll_wrap{max-height:316px;} .benefit .modal-content{border-radius: 12px;} .benefit .modal-header .close{font-size:20px;} .benefit .modal-body{padding:0px 20px 25px;} .benefit .modal-body .tit{padding-bottom:40px;font-size: 24px;} .benefit .modal-body ul{gap: 10px;margin-bottom:24px;padding: 20px 12px;border-radius: 12px} .benefit .modal-body li{font-size: 14px; } .benefit .modal-body li img{width:35px; height:35px;} .marketing_agree{ margin:10px auto 0; } } /****** 가격페이지 또 리뉴얼 ***************/ .pricing {font-family:'SUIT'; line-height: 1.3; color: #333;} .pricing .inner { max-width: 1220px; margin: 0px auto;padding: 0px 10px;} .pricing .inner .tit {font-weight: 800; text-align: center;} .pricing .buy_btn {display:block; background-color:#56ACFF; color: #fff; border-radius: 8px; text-align: center; } /* price */ .price_license {padding: 80px 0 128px;} .price_license .inner .tit { font-size: 56px; margin-bottom: 64px;} .price_license .inner .calc_wrap { margin: 115px 0 46px; font-size:20px; color:#909090; text-align: right;} .price_license .inner .calc_wrap a.fee_calc_btn { font-weight: 700; color:#56ACFF; box-shadow: inset 0 -1px 0; cursor: pointer; margin-left: 6px;} .price_license ul.tabs { position: relative; display: flex; align-items: center; ; padding: 7px; border-radius: 100px; background-color: #E5E7EE; max-width: 850px; margin: 0 auto; } .price_license ul.tabs .tab-indicator { position: absolute; top: 7px; width: calc(50% - 14px); height: calc(100% - 14px); background-color: #fff; border-radius: 100px; box-shadow: 0px 2px 8px 0px #33333333; z-index: 0; transition: none; left: calc(50% + 7px); } .price_license ul.tabs li { display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; line-height: 1.3; color: #C5C7CF; width: 50%; text-align: center; padding: 16px 0; position: relative; z-index: 1; cursor: pointer; transition: color 0.3s;} .price_license ul.tabs li.active.annual>span{ background-color: #E24343; } .price_license ul.tabs li.annual>span { display: inline-block; font-size: 24px; font-weight: 700; color: #fff; background-color: #C5C7CF; padding: 0 4px; margin-left: 7px; } .price_license ul.tabs li.active { color: #000; border-radius:100px; } .price_license .price_con { display: flex; justify-content: center; gap: 20px;} .price_license .price_con .lc {display: flex; flex-direction: column; width: calc(33% - 12px); box-shadow: 0px 2px 8px 0px #33333333; padding: 62px 19px 47px 19px; border-radius:16px; border: 2.5px solid transparent;} .price_license .price_con .lc .pr_con .name { font-size: 28px; font-weight: 800;} .price_license .price_con .lc .pr_con .sub { font-size: 20px; margin-top: 6px;} .price_license .price_con .lc .pr_con .pr_wrap { margin-top: 50px;} .price_license .price_con .lc .pr_con .pr_wrap .discount {font-size: 20px;color: #999;text-decoration: line-through;} .price_license .price_con .lc .pr_con .pr_wrap .ds_gbd {font-size: 20px;} .price_license .price_con .lc .pr_con .pr_wrap .discount>span {display: inline-block; font-size: 20px; line-height: 1.2; font-weight: 800; color: #fff; background-color: #E24343; padding: 0 4px; margin-left: 10px;} .price_license .price_con .lc .pr_con .pr_wrap .fee strong { font-size: 36px; font-weight:800 !important;} .price_license .price_con .lc .pr_con .pr_wrap .fee span#annual_st { font-size: 36px; font-weight:800;} .price_license .price_con .lc .pr_con .pr_wrap .fee span {font-size: 16px; font-weight:400; } .price_license .price_con .lc .pr_con .pr_wrap .mobile_check { display: block; font-size: 18px; color:#333;} .price_license .price_con .lc .pr_con .pr_wrap input[type="checkbox"] {width:16px; height:16px; margin: -5px 5px 0 0; -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox;} .price_license .price_con .lc .pr_con .pr_wrap input[disabled] + span { color: #C9C9C9; } .price_license .price_con .lc .pr_con .pr_wrap input:checked + span { color: #56ACFF;} .price_license .price_con .lc .pr_con .tt_con {display: flex; align-items: center; justify-content: flex-end; position: relative; font-size: 14px; color:#9F9F9F; margin:20px 0 16px; text-align: right;} .price_license .price_con .lc .pr_con .tt_con .tooltip {position: relative; display: inline-flex; margin-right: 4px;} .price_license .price_con .lc .pr_con a.buy_btn { font-size: 24px; font-weight:900; color: #fff; border-radius: 8px; background-color: #56ACFF; padding: 16px 0; cursor:pointer;} .price_license .price_con .lc .pr_con a.qna_scroll {display: block; text-align: center; font-size: 24px; font-weight:800; border:1px solid #333; border-radius: 8px; padding: 15px 0; cursor: pointer;} .price_license .price_con .lc .ft_con { flex: 1; margin-top: 24px;} .price_license .price_con .lc .ft_con .tit { position: relative; font-size: 20px; font-weight: 700; text-align: left; border-bottom: 1px solid #333; padding: 0 0 15px 32px; margin-bottom: 16px;} .price_license .price_con .lc .ft_con .tit:before { position: absolute; content: ''; top: 0; left:0; background: url(/wp-content/uploads/sites/2/image/sub/price_license_feature_icon.webp) no-repeat center / 26px 26px; width: 26px; height: 26px;} .price_license .price_con .lc .ft_con ul {display: flex; flex-direction: column; gap: 8px;} .price_license .price_con .lc .ft_con ul li { position: relative; font-size: 18px; padding-left: 34px;} .price_license .price_con .lc .ft_con ul li.check::before {background-image: url(/wp-content/uploads/sites/2/image/sub/price_license_check_icon.webp);} .price_license .price_con .lc .ft_con ul li::before { position: absolute; top: 6.5px; left:12px; content: ''; background: url(/wp-content/uploads/sites/2/image/sub/price_license_plus_icon.webp) no-repeat center / 10px 10px; ; width: 10px; height: 10px;} .price_license .price_con .st .ft_con ul li::before {background-image: url(/wp-content/uploads/sites/2/image/sub/price_license_check_icon.webp);} .price_license .price_con .lc .sc_con { min-height: 278px; background-color:#F4F4F4; border-radius: 8px; padding: 16px 14px 20px 14px; margin-top:20px;} .price_license .price_con .lc .sc_con .tit { position: relative; font-size: 20px; font-weight: 600; text-align: left; padding-left: 32px; margin-bottom: 5px;} .price_license .price_con .lc .sc_con .tit:before { position: absolute; content: ''; top: 0; left:0; background: url(/wp-content/uploads/sites/2/image/sub/price_license_security_icon.webp) no-repeat center / 26px 26px; width: 26px; height: 26px;} .price_license .price_con .lc .sc_con ul { display: flex; flex-direction: column; gap: 8px;} .price_license .price_con .lc .sc_con ul li { position: relative; font-size: 18px; padding-left: 34px;} .price_license .price_con .lc .sc_con ul li::before { position: absolute; top: 6.5px; left:12px; content: ''; background: url(/wp-content/uploads/sites/2/image/sub/price_license_plus_icon.webp) no-repeat center / 10px 10px; ; width: 10px; height: 10px;} .price_license .price_con .lc.enterprise { position:relative; border: 2.5px solid #56ACFF;} .price_license .price_con .lc.enterprise::before { content:'추천 요금제'; position:absolute; top:0; left:0; background-color: #56ACFF; color: #fff; font-weight:700; padding: 11px 22.5px; border-top-left-radius: 13px; border-bottom-right-radius: 13px; } .price_license .price_con .lc.package .pk_tab { display: flex; justify-content: space-between;} .price_license .price_con .lc.package .pk_tab ul.toggle {position:relative; display: flex; align-items: center; justify-content: space-between; background-color:#E5E7EE; max-width: 264px; border-radius: 50px; width: 100%; padding: 3.5px 4.5px;} .price_license .price_con .lc.package .pk_tab ul.toggle .pk-indicator { position: absolute; top: 3px; left: 4px; width: calc(33% - 6px); height: calc(100% - 6px); background-color: #fff; border-radius: 100px; box-shadow: 0px 2px 8px 0px #33333333; z-index: 0; transition: left 0.3s ease; } .price_license .price_con .lc.package .pk_tab ul.toggle li { font-size:24px; text-align: center; color:#C5C7CF; width: calc(33% - 6px); position: relative; z-index: 1; cursor: pointer; transition: color 0.3s; } .price_license .price_con .lc.package .pk_tab ul.toggle li.active { font-weight: 800; color:#333; border-radius: 50px;} /* price_hardware */ .price_hardware {padding: 150px 0 56px;} .price_hardware .inner .tit { font-size: 48px; margin-bottom: 56px; } .price_hardware ul.wrap {display:flex; justify-content: space-between;} .price_hardware ul.wrap > li { position: relative; width:calc(50% - 10px); border-radius: 12px; padding: 56px 22px 75px 22px; box-shadow: 0px 2px 8px 0px #33333333;} .price_hardware ul.wrap > li:last-child::before { content: 'NEW'; position: absolute; top: 0; left: 0; background-color: #0074E5; color: #fff; font-size: 14px; font-weight: 700; padding: 11px 33.5px; border-top-left-radius: 12px; border-bottom-right-radius: 12px;} .price_hardware ul.wrap li .name { font-size: 28px; font-weight:800; margin-bottom: 4px;} .price_hardware ul.wrap li .sub { font-size: 20px;} .price_hardware ul.wrap li .img {display: flex; align-items:center; justify-content: center; border-radius: 8px; width: 100%; padding:46px 0; margin: 28px 0; background-color:#F8F8F8;} .price_hardware ul.wrap li .img img { max-width: 100%; height: auto;} .price_hardware ul.wrap li .fee_wrap .discount { font-size: 20px; color:#999; text-decoration: line-through;} .price_hardware ul.wrap li .fee_wrap .discount span {display: inline-block; font-size: 20px; line-height:1.2; font-weight:800; color:#fff; background-color:#E24343; padding: 0 10px; margin-left: 10px;} .price_hardware ul.wrap li .fee_wrap .fee { font-size: 36px; line-height:1.2; font-weight: 800;} .price_hardware ul.wrap li .buy_btn { font-size: 24px; font-weight:900; padding: 16px 0; margin-top: 16px;} .price_hardware ul.wrap li > ul { display: flex; gap: 8px; flex-direction: column; margin-top: 24px;} .price_hardware ul.wrap li > ul li { position: relative; font-size: 18px; padding-left: 22px;} .price_hardware ul.wrap li > ul li::before { position: absolute; top: 7px; left: 0; content: ''; background: url(/wp-content/uploads/sites/2/image/sub/price_license_check_icon.webp) no-repeat center / 10px 10px; width:10px; height:10px;} /* price_compare */ .price_compare { position: relative; padding-bottom: 55px;} .price_compare .compare_btn_wrap { display: flex; justify-content: center; font-size: 48px; font-weight:800; line-height: 55px; padding: 37px 0; background-color: #E5E7EE; cursor:pointer;} .price_compare .compare_btn_wrap .compare_btn {display: inline-block; display: flex; align-items: center; gap:50px; } .price_compare .compare_btn_wrap .compare_btn img { transform: translateY(0) rotate(90deg); -webkit-transform: translateY(0) rotate(90deg); transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease;} .price_compare .compare_btn_wrap .compare_btn.active img {transform: translateY(0) rotate(-90deg); -webkit-transform: translateY(0) rotate(-90deg);} .price_compare .inner {position: relative; overflow: visible; display: none;} .price_compare .inner ul.thead {position: sticky; top: 64px; display: flex; gap: 16px; background-color: #fff; margin-top:12px; padding: 24px 0; z-index: 8; } .price_compare .inner table tbody tr { border-bottom: 0.5px dashed #C1C1C1;} .price_compare .inner table tbody tr.theme {border-bottom: 1px solid #9F9F9F;} .price_compare .inner table tbody tr.theme:first-child {border-top: 1.5px solid #333;} .price_compare .inner table tbody tr.line {border-bottom: 1px solid #9F9F9F;} .price_compare .inner table tbody tr .tooltip {display: inline-block; position: relative; margin-left: 5px;} .price_compare .inner table tbody tr .tooltip img {display: inline-block;} .price_compare .inner ul.thead li:first-child {width: 25%; } .price_compare .inner ul.thead li+li { display: flex; flex-direction: column; align-items: center; gap: 16px; flex:1; border: 1px solid #D9D9D9; border-radius: 8px; padding: 26px 16px; min-width: 0;} .price_compare .inner ul.thead li+li p { font-size: 24px; font-weight: 700;} .price_compare .inner ul.thead li+li a { display: inline-block; width: 100%; font-size: 20px; font-weight:800; border-radius: 8px; padding: 12px 0; text-align: center; box-sizing: border-box;height: 50px; } .price_compare .inner ul.thead li+li a.st_btn { color: #fff; background-color: #56ACFF;} .price_compare .inner ul.thead li+li a.qna_scroll { color: #333; border: 1px solid #333;} .price_compare table { position: relative; width: 100%;} .price_compare table tbody tr.theme td { font-size: 24px; font-weight: 700; padding: 56px 0 16px 0; text-align: left; } .price_compare table tbody tr th {font-size: 20px; padding: 16px 0; font-weight:400; text-align: left;} .price_compare table tbody tr td {font-size: 20px; padding: 16px 0; text-align: center;} .price_compare table tbody tr td span {font-size: 14px;} .price_compare table tbody tr td span.ico {display: inline-block; width: 16px; height: 16px; text-indent: -9999px;} .price_compare table tbody tr td span.check { background: url(/wp-content/uploads/sites/2/image/sub/price_compare_check_icon.webp) no-repeat center / 16px 16px;} .price_compare table tbody tr td span.no { background: url(/wp-content/uploads/sites/2/image/sub/price_compare_no_icon.webp) no-repeat center / 16px 16px;} /* 툴팁 공통으로 한거임! */ .pricing .tooltip .tooltip_con {position: absolute; top: 46px; left:-134px; width: 455px; background-color: #3C3C3C; padding: 20px 0; color: #fff; border-radius: 8px; z-index: 7; opacity: 0; visibility: hidden;} .pricing .tooltip .tooltip_con::before { position: absolute; top: -16px; left: 124px; content: ''; background: url(/wp-content/uploads/sites/2/image/sub/price_tooltip.webp) no-repeat center / 33px 29px; width:33px; height:29px;} .pricing .tooltip .tooltip_con .txt {position: relative; font-size: 18px; font-weight:700; padding-left: 48px; text-align: left;} .pricing .tooltip .tooltip_con .txt::before {position: absolute; content:''; top:4px; left:20px; width: 16px; height: 16px; background:url(/wp-content/uploads/sites/2/image/sub/price_compare_info_icon.webp) no-repeat center / 16px 16px;;} .pricing .tooltip .tooltip_con .txt span { font-weight: 400;} /* price_faq */ .price_faq {padding: 120px 0;} .price_faq .inner .tit { font-size: 48px; font-weight: 800; line-height: 1.3;} .price_faq .inner .acc_wrap {margin-top: 30px;} .price_faq .inner .acc_wrap ul li:first-child {border-top: 1px solid #000;} .price_faq .inner .acc_wrap ul li .acc_btn {position: relative; font-size:24px; font-weight:800; padding: 20px 60px; border-bottom: 1px solid #000; cursor: pointer;} .price_faq .inner .acc_wrap ul li .acc_btn::before {position: absolute; content:'Q.'; top:50%; left:20px; transform: translateY(-50%); } .price_faq .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/image/sub/price_faq_plus_icon.webp) center/cover no-repeat; width: 12px; height: 12px; } .price_faq .inner .acc_wrap ul li.active .acc_btn::after { background-image: url(/wp-content/uploads/sites/2/image/sub/price_faq_minus_icon.webp);} .price_faq .inner .acc_wrap ul li.active .acc_btn { border-bottom: none;} .price_faq .inner .acc_wrap ul li .content { display: none; font-size: 20px; line-height: 1.3; padding: 20px 60px;} .price_faq .inner .acc_wrap ul li .content span {font-weight: 700;} .price_faq .inner .acc_wrap ul li .content a.fee_calc_btn { cursor: pointer; box-shadow: inset 0 -1px 0;} .price_faq .inner .acc_wrap ul li.active .content { display: block; border-bottom: 1px solid #000; border-top: 1px solid #E3E3E3; } .price_faq .inner .acc_wrap ul li .content .tb_wrap>table {width: 100%} .price_faq .inner .acc_wrap ul li .content .tb_type1 thead tr { border-top: 2px solid #1da1df; border-bottom: 2px solid #bcc1c5} .price_faq .inner .acc_wrap ul li .content .tb_type1 th,.tb_type1 td { padding: 10px 20px; text-align: center; vertical-align: middle;} .price_faq .inner .acc_wrap ul li .content .tb_type1 thead th+th { border-left: 1px solid #d1d7dc} .price_faq .inner .acc_wrap ul li .content .tb_type1 tbody tr { border-bottom: 1px solid #e0dede} .price_faq .inner .acc_wrap ul li .content .tb_type1 tbody td+td { border-left: 1px solid #d1d7dc} .price_faq .inner .acc_wrap ul li .content .tb_type1 .br_none { border: 0} .price_faq .inner .acc_wrap ul li .content .tb_type2 th,.tb_type2 td { padding: 5px 10px} .price_faq .inner .acc_wrap ul li .content .tb_type2 th+th,.tb_type2 td+td { border-left: 1px solid #bcc1c5} .price_faq .inner .acc_wrap ul li .content .tb_type2 thead { border-top: 2px solid #1da1df; border-bottom: 2px solid #bcc1c5} .price_faq .inner .acc_wrap ul li .content .tb_type2 tbody tr { border-bottom: 1px solid #bcc1c5} .price_faq .inner .sla { text-align: right; margin-top: 30px;} .price_faq .inner .sla .sla_link { font-size: 14px; color:#56ACFF; box-shadow: inset 0 -1px 0; } /*price_trial*/ .price_trial { background-image:url(/wp-content/uploads/sites/2/image/sub/price_trial_bg.webp); background-size:cover; padding: 120px 0;} .price_trial .inner { text-align: center; color: #fff;} #split-type-text .char {opacity: 1;} .price_trial .inner .desc {font-size: 0; font-weight: 800; margin-bottom: 32px;} .price_trial .inner .desc .sp1 { font-size: 48px; margin-bottom: 6px; text-shadow: 0px 2px 8px #00000040;} .price_trial .inner .desc .sp2 { font-size: 32px; font-weight:400;} .price_trial .inner .trial_btn { position: relative; z-index: 0; overflow: hidden; display: inline-block; font-size: 28px; font-weight:800; line-height: 1.2; letter-spacing: 0; background-color: #0097E4; border-radius: 66px; padding: 16px 40px; } .price_trial .inner .trial_btn::before { content: ""; position: absolute; inset: 0; background: #094B7B; z-index: -1; transform-origin: right center; transform: scaleX(0); transition: transform .25s ease-in-out;} .price_trial .inner .trial_btn:hover::before { transform-origin: left center; transform: scaleX(1);} /* price_ninjaform */ #qna_form.price_ninjaform {padding-bottom: 115px;} #qna_form.price_ninjaform .form_tit { font-size: 48px; font-weight:800; text-align: center; margin-bottom: 80px; margin-right: -20px; margin-left: -20px; margin-top: 120px;} #qna_form.price_ninjaform .nf-form-layout { width: 100%; max-width: 940px; padding: 0 20px; margin: 0 auto;} #qna_form.price_ninjaform .nf-form-content {padding: 0;} #qna_form.price_ninjaform .nf-form-content label {font-size: 20px; font-weight:800; line-height: 1.2;} #qna_form.price_ninjaform .nf-form-content input { font-size:20px; padding: 20px;} #qna_form.price_ninjaform .nf-pass.field-wrap .nf-field-element:after { top: 8px;} #qna_form.price_ninjaform input[type="text"]::placeholder, #qna_form.price_ninjaform input[type="email"]::placeholder, #qna_form.price_ninjaform input[type="tel"]::placeholder {font-size: 20px; color: #0000004D; font-weight: 400; } #qna_form.price_ninjaform .nf-form-content textarea.ninja-forms-field { height: 150px; padding: 20px; font-size: 20px; resize: none;} #qna_form.price_ninjaform .nf-form-cont input[type="text"], #qna_form.price_ninjaform .nf-form-cont input[type="email"], #qna_form.price_ninjaform .nf-form-cont input[type="tel"] { background-color: #fff; border: 1px solid #C4C4C4; border-radius: 8px; height: 66px;} #qna_form.price_ninjaform .nf-form-content input:not([type=button]){ border-radius: 8px;} #qna_form.price_ninjaform .nf-form-content select { font-size: 20px; padding: 20px; height: 66px !important; } #qna_form.price_ninjaform .nf-form-content option[value="select"] {color: gray;} #qna_form.price_ninjaform .nf-form-cont .nf-error-field-errors {text-align: center;} #qna_form.price_ninjaform .nf-form-content .list-select-wrap>div div:after {content: ""; width: 14px; height: 8px; top: 50%; right:20px; transform: translateY(-50%); background: url(/wp-content/uploads/sites/2/image/sub/price_qna_check_icon.webp) no-repeat center center / contain;} #qna_form.price_ninjaform .nf-form-content .list-select-wrap .nf-field-element>div { height: 66px; border-radius: 8px; } #qna_form.price_ninjaform .price_btn_wrap {margin-bottom: 20px; text-align: center;} #qna_form.price_ninjaform .price_btn_wrap .price_btn{ font-size: 24px; font-weight: 800; line-height: 1.3; background-color: #56ACFF;border-radius: 8px;padding: 16px 133px;height: 63px;} #qna_form.price_ninjaform .inqury_agree .nf-field-label { justify-content: center; padding: 10px 0;} #qna_form.price_ninjaform .inqury_agree .nf-field-label label { justify-content: center; font-weight: 400; } #qna_form.price_ninjaform .inqury_agree .nf-error .nf-error-msg {text-align: center;} #qna_form.price_ninjaform .inqury_agree.label-right .nf-after-field {width: 100%;} #qna_form.price_ninjaform .inquiry_showModal {cursor: pointer; position: relative; z-index: 1; font-weight: 800; box-shadow: inset 0 -1px 0;} #modalPrivacyAgree .letter .list_dot2 > li:before {content:'-';} #qna_form.price_ninjaform .checkbox-wrap .nf-field-label label:after { border-radius: 2px; border-color: #000; height: 20px; width: 20px; top: 3px; background-color: #fff;} #qna_form.price_ninjaform .checkbox-wrap .nf-field-label label:before { top: -1px;} .price_form_complete .wrap { text-align: center; padding: 56px 0; line-height: 1.3;} .price_form_complete .letter { background-color: #E5E7EE;} .price_form_complete .wrap .subtxt { font-size:36px; font-weight: 800; margin:28px 12px;} .price_form_complete .wrap .desc { font-size: 20px;} .price_form_complete .letter .desc {margin-bottom: 48px;} .price_form_complete .letter .desc span { font-weight: 700;} .price_form_complete .letter .agree { font-size: 14px; color:#9D9D9D; margin-bottom: 20px;} .price_form_complete .letter .agree a.popup { cursor: pointer; box-shadow: inset 0 -1px 0; } .price_form_complete .letter .buy_btn {display: inline-block; font-size: 24px; font-weight: 800; color: #fff; border-radius: 8px; background-color: #56ACFF; padding: 16px 108px; cursor:pointer;} @media (hover :hover) and (min-width:767px) { .pricing .tooltip .tooltip_btn:hover { cursor: pointer;} .pricing .tooltip .tooltip_btn:hover +.tooltip_con {opacity: 1; visibility: visible;} } @media (max-width: 1230px) { .price_compare .inner ul.thead {top: 55px;} .price_license .price_con .lc.package .pk_tab ul.toggle li{font-size:15px;} } @media (max-width: 767px) { .pricing .tt_con { cursor: pointer;} .pricing .tt_con.on .tooltip .tooltip_btn +.tooltip_con {opacity: 1; visibility: visible;} .tb_wrap {overflow: auto hidden;} #qna_form.price_ninjaform .inqury_inner .nf-form-content select {font-size: 14px; height: 45px;} #qna_form.price_ninjaform .nf-form-content .list-select-wrap>div div:after {height:45px; line-height: 45px;} #qna_form.price_ninjaform .nf-form-cont {padding: 0 ;} } @media (max-width: 640px) { .pricing .inner {padding: 0 20px;} .pricing .tooltip .tooltip_con { width: 250px; top: 32px; left:-61px;} .pricing .tooltip .tooltip_con .txt {font-size: 14px; padding-left: 46px;} .pricing .tooltip .tooltip_con .txt span{font-weight:400;} .pricing .tooltip .tooltip_con::before { top: -14px; left: 52px; /*width: 28px; height: 24px; background-size: 28px 24px;*/ } /* price_license */ .price_license {padding: 56px 0 63px 0;} .price_license .inner .tit { font-size: 26px; margin-bottom: 32px;} .price_license ul.tabs {padding: 4px;} .price_license ul.tabs li { font-size: 16px; padding: 9px 0;} .price_license ul.tabs .tab-indicator { top: 5px; width: calc(50% - 13px); height: calc(100% - 10px);} .price_license ul.tabs li.annual>span {font-size: 12px;} .price_license .inner .calc_wrap { font-size: 12px; margin: 60px 0 8px;} .price_license .price_con {flex-direction: column; gap: 24px;} .price_license .price_con .lc {width: 100%; border-radius: 12px; padding: 47px 15px 24px 15px;} .price_license .price_con .lc .pr_con .name { font-size: 20px;} .price_license .price_con .lc .pr_con .sub {font-size: 16px; margin-top:4px;} .price_license .price_con .lc .pr_con .pr_wrap {margin-top: 28px;} .price_license .price_con .lc .pr_con .pr_wrap .discount {font-size:16px;} .price_license .price_con .lc .pr_con .pr_wrap .discount>span {font-size: 14px;} .price_license .price_con .lc .pr_con .tt_con { font-size: 12px; margin: 16px 0 13px 0;} .price_license .price_con .lc .pr_con .pr_wrap .fee {margin-top: 8px;} .price_license .price_con .lc .pr_con .pr_wrap .fee strong {font-size: 26px;} .price_license .price_con .lc .pr_con a.buy_btn {font-size: 18px; font-weight: 900;} .price_license .price_con .lc .ft_con {margin-top: 16px;} .price_license .price_con .lc .ft_con ul li {font-size: 14px; padding-left: 28px;} .price_license .price_con .lc .ft_con ul li::before { top: 4px; left: 6px;} .price_license .price_con .lc .ft_con .tit {font-size: 16px; padding: 0 0 8px 30px; } .price_license .price_con .lc .ft_con .tit:before {background-size: 24px 24px; width:24px; height:24px; top: -4px;} .price_license .price_con .lc .sc_con {min-height: auto; padding: 20px 14px; margin-top: 24px; } .price_license .price_con .lc .sc_con .tit { font-size: 16px; margin-bottom: 8px; padding-left:30px} .price_license .price_con .lc .sc_con .tit:before {background-size: 24px 24px; width:24px; height:24px; top:-2px;} .price_license .price_con .lc .sc_con ul li { font-size: 14px; padding-left:28px;} .price_license .price_con .lc .sc_con ul li::before {top: 4px; left: 6px;} .price_license .price_con .lc.package .pk_tab ul.toggle li { font-size: 16px;} .price_license .price_con .lc.package .pk_tab ul.toggle {max-width: 213px; padding: 1.5px 2.5px;} .price_license .price_con .lc .pr_con .pr_wrap .mobile_check {font-size: 16px;} .price_license .price_con .lc.enterprise::before { font-size: 12px; padding: 7.5px 16.5px; border-top-left-radius: 9px; border-bottom-right-radius: 12px;} .price_license .price_con .lc .pr_con a.qna_scroll { font-size: 18px;} /* price_hardware */ .price_hardware {padding: 64px 0 25px 0;} .price_hardware .inner .tit {font-size: 24px; margin-bottom: 24px;} .price_hardware ul.wrap {flex-direction: column; gap: 24px;} .price_hardware ul.wrap > li {width: 100%; padding: 32px 15px 28px 15px;} .price_hardware ul.wrap li .name {font-size: 18px; margin-bottom: 4px;} .price_hardware ul.wrap li .sub {font-size: 16px;} .price_hardware ul.wrap li .img { min-height:215px;} .price_hardware ul.wrap li:first-child .img img { height: 91px; width: auto;} .price_hardware ul.wrap li:last-child .img img { height: 105px; width: auto;} .price_hardware ul.wrap > li:last-child::before {font-size: 12px; padding: 7.5px 23px; } .price_hardware ul.wrap li .fee_wrap .discount {font-size: 16px;} .price_hardware ul.wrap li .fee_wrap .discount span { font-size: 14px; padding: 3px 9px; margin-left: 6px;} .price_hardware ul.wrap li .fee_wrap .fee {font-size: 26px; margin-top: 8px;} .price_hardware ul.wrap li .buy_btn { font-size: 18px; font-weight: 800; padding: 12px 0;} .price_hardware ul.wrap li > ul { margin-top: 16px;} .price_hardware ul.wrap li > ul li { font-size: 14px; padding-left: 28px;} .price_hardware ul.wrap li > ul li::before {top:50%; transform: translateY(-50%); left: 5px;} /* price_compare */ .price_compare {padding-bottom: 16px;} .price_compare .compare_btn_wrap { font-size: 20px; padding: 17px 0;} .price_compare .compare_btn_wrap .compare_btn { gap: 20px;} .price_compare .compare_btn_wrap .compare_btn img {width: 8px; height: 15px;} .price_compare .inner ul.thead { gap: 3px; margin: 6px -15px 0 -15px; padding: 16px 20px 8px 20px;} .price_compare .inner ul.thead li+li {justify-content: center; padding: 0; height: 48px;} .price_compare .inner ul.thead li+li p { font-size: 12px;} .price_compare .inner ul.thead li+li a { display: none;} .price_compare .inner table tbody tr th { font-size: 14px; padding: 8px 0 12px; vertical-align: middle;} .price_compare .inner table tbody tr td { font-size: 14px; padding: 8px 0 12px; vertical-align: middle;} .price_compare .inner table tbody tr td span {font-size: 12px; color: #999;} .price_compare .inner table tbody tr td span.ico {width: 14px; height: 14px;} .price_compare .inner table tbody tr td span.check, .price_compare table tbody tr td span.no { background-size: 14px 14px;} .price_compare .inner table tbody tr.theme td {font-size: 16px; padding: 24px 0 8px;} .price_compare .inner table tbody tr.theme+tr.theme { padding-top: 22px;} .price_compare .inner table tbody tr.theme:first-child td { padding: 16px 0 8px;} /* .price_faq */ .price_faq {padding: 64px 0 76px;} .price_faq .inner .tit { font-size: 24px; } .price_faq .inner .acc_wrap {margin-top: 24px;} .price_faq .inner .acc_wrap ul li .acc_btn {font-size: 16px; padding: 12px 26px 12px 35px;} .price_faq .inner .acc_wrap ul li .acc_btn::before {left: 8px;} .price_faq .inner .acc_wrap ul li .content {font-size: 16px; padding: 12px 35px;} .price_faq .inner .acc_wrap ul li .acc_btn::after {width: 10px; height: 10px;} .price_faq .inner .sla {margin-top: 12px;} .price_faq .inner .sla .sla_link {font-size: 12px;} /* price_trial */ .price_trial { padding: 48px 0; background-position-x: 49%;} .price_trial .inner .desc {margin-bottom: 24px;} .price_trial .inner .desc .sp1 { font-size: 24px; margin-bottom: 12px;} .price_trial .inner .desc .sp2 { font-size: 20px;} .price_trial .inner .trial_btn { font-size: 20px; padding: 12px 28px;} #qna_form.price_ninjaform .form_tit { font-size: 28px; margin: 64px 0 24px 0; } #qna_form.price_ninjaform .nf-form-layout { padding: 0 15px; } #qna_form.price_ninjaform .nf-form-content label { font-size: 16px;} #qna_form.price_ninjaform input[type="text"]::placeholder, #qna_form.price_ninjaform input[type="email"]::placeholder, #qna_form.price_ninjaform input[type="tel"]::placeholder {font-size: 16px; } #qna_form.price_ninjaform .nf-form-cont input[type="text"], #qna_form.price_ninjaform .nf-form-cont input[type="email"], #qna_form.price_ninjaform .nf-form-cont input[type="tel"] {height: 45px; padding: 12px;} #qna_form.price_ninjaform .nf-form-content select {height: 45px !important; padding: 12px;} #qna_form.price_ninjaform .nf-form-content .list-select-wrap .nf-field-element>div {height: 45px ;} #qna_form.price_ninjaform .nf-error.field-wrap .nf-field-element:after { height: 45px; line-height: 44px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; top: 0; right: 0;} #qna_form.price_ninjaform .inqury_agree .nf-field-label {justify-content: flex-start; padding:0;} #qna_form.price_ninjaform .price_btn_wrap .price_btn{font-size: 18px; background-color: #7DBEFC; width: 100%; height: 55px;} #qna_form.price_ninjaform .nf-form-content select {font-size: 16px;} #qna_form.price_ninjaform .nf-pass.field-wrap .nf-field-element:after {top: -2px;} #qna_form.price_ninjaform .inqury_agree .nf-field-label label {font-size: 16px;} #qna_form.price_ninjaform {margin-bottom: 0;} #qna_form.price_ninjaform .checkbox-wrap .nf-field-label label:after { width:16px; height: 16px;} #qna_form.price_ninjaform .checkbox-wrap .nf-field-label label:before { top: 1px; font-size: 18px; left: -29px;} .price_form_complete .wrap {padding: 32px 35px;} .price_form_complete .wrap img { width: 80px; height: 80px;} .price_form_complete .wrap .subtxt { font-size: 20px; font-weight: 700; margin:20px 0 12px; } .price_form_complete .wrap .desc { font-size: 16px; margin-bottom: 22px;} .price_form_complete .letter .buy_btn {font-size: 18px; width: 100%;} }