/* Theme Name: Colabox Theme URI: https://www.colabox.com/ Author: wsd@rsupport.com Description: Rsupport theme Text Domain: Colabox */ /* Theme customization starts here -------------------------------------------------------------- */ /* font weight Black | font-weight:900 bold | font-weight:700 medium | font-weight:500 regular | font-weight:400 light | font-weight:300 */ @charset "utf-8"; @font-face{ font-family:'Pretendard'; font-style:normal; font-weight:300; src:local('Pretendard-Light.subset'), url("./font/pretendard/Pretendard-Light.woff2") format("woff2"); font-display: swap; } @font-face{ font-family:'Pretendard'; font-style:normal; font-weight:400; src:local('Pretendard-Regular.subset'), url("./font/pretendard/Pretendard-Regular.woff2") format("woff2"); font-display: swap; } @font-face{ font-family:'Pretendard'; font-style:normal; font-weight:500; src:local('Pretendard-Medium.subset'), url("./font/pretendard/Pretendard-Medium.woff2") format("woff2"); font-display: swap; } @font-face { font-family:'Pretendard'; font-style: normal; font-weight: 700; src:local('Pretendard-Bold.subset'), url("./font/pretendard/Pretendard-Bold.woff2") format('woff2'); font-display: swap; } @font-face { font-family:'Pretendard'; font-style: normal; font-weight: 900; src:local('Pretendard-Black.subset'), url("./font/pretendard/Pretendard-Black.woff2") format('woff2'); font-display: swap; } /*------------------------------------------------------------------- reset -------------------------------------------------------------------*/ *{-webkit-text_size-adjust:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; -webkit-appearance:none;} html, body {width:100%; height:100%; line-height: 1;font-size: 12px;color: #555;font-weight: 400;font-family: 'Pretendard', "맑은고딕", "Malgun Gothic", malgun, "돋움", Dotum, "굴림", Gulim, 'AppleSDGothicNeo-Light', AppleGothic, Helvetica, Arial, 'HelveticaNeue-Light', 'sans-serif-light', sans-serif;-webkit-text-size-adjust: none; -ms-text-size-adjust: none; letter-spacing: -1px; } /* **** reset **** */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header, hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input {margin:0; padding:0; border:0; color:inherit;outline: 0;font-style: normal;} header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption, div, span, p, ul, li, dl, dt, dd, ol, iframe, a, input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="submit"], input[type="file"], button, label, textarea, h1, h2, h3, h4, h5, h6 {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} a, a:visited {margin:0; padding:0;font-size:100%;text-decoration:none;} a:hover {text-decoration:none;} h1, h2, h3, h4, h5, h6 {font-weight:normal;} fieldset, img, abbr, acronym {border:0 none;} ol, ul { list-style:none; } caption {visibility:hidden; font-size:0px; width: 0px; height: 0px; line-height:0;border:0;margin: 0;padding: 0;border:0;} table {border-collapse: separate; border-spacing:0; border:0 none;padding: 0;margin: 0;width: 100%;} address {font-weight:normal; font-style:normal;} blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote,q { quotes:"" ""; } hr {display: block;margin: 20px 0;padding: 0;border: none;width: 100%;height:1px;background-color: #e1e1e1;} .clearfix::after {content:".";display:block; clear:both;visibility:hidden; height:0;} input, select {vertical-align:middle;} textarea {overflow: auto; vertical-align:top;} img {vertical-align:top; border: 0 none; -ms-interpolation-mode: bicubic;} mark {background-color:#ff9;color:#000; font-style:italic; font-weight:bold;} header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block } audio,canvas, video {display: inline-block; /**display: inline; *zoom: 1;*/} nav ul {list-style:none;} button::-moz-focus-inner, input::-moz-focus-inner {border: 0 none;padding: 0;margin:0;} button {padding: 0;margin: 0;border:none;background:none;outline:none;cursor:pointer;overflow:visible;vertical-align:middle;} button[disabled], input[disabled], select[disabled], textarea[disabled] {cursor: default;background: #eee !important;} input[readonly], select[readonly], textarea[readonly] {cursor: default;background:#f5f5f5 !important;} input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {-webkit-appearance: none;} input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; /**height:13px; *width: 13px; ie7ìš©*/} svg:not(:root) {overflow: hidden;} [hidden] {display: none;} /*------------------------------------------------------------------- layout -------------------------------------------------------------------*/ /* common */ body{font-size: 18px; line-height: 1.3;} .btn{padding: 10px 48px;font-size: 18px; display: inline-block; border-radius: 5px; border:1px solid #00B77F;} .btn01{color: #00B77F;} .btn01:hover{ background: #00B77F;color: #fff; } .btn02{color: #fff; border-radius:5px; background: #00B77F; } .btn02:hover{color: #fff; border-color: #0E523D; background-color: #0E523D;} .btn03{color: #000;border-color: #000;} .btn04{color: #888;border-color: #888;} .btn03:hover,.btn04:hover{ background: #00B77F;color: #fff; border-color: #00B77F } .inner{width: 1200px; margin: auto;} .blind{text-indent: -999999px; display: inline-block;} .tit01{font-size: 58px; font-weight: bold; } .tit02{font-size: 48px; font-weight: bold; color: #2A2A2A;} .tit03{font-size: 26px; color: #2A2A2A; font-weight: 500;} .tit03 + p {margin-top: 15px; line-height:24px;} .tit03 + p span{display:block; color:#B7B7B7; font-size:14px; line-height:20px;} .tit04{font-size: 38px; color: #2A2A2A; font-weight: bold;} .tit05{font-size:22px; color: #2A2A2A; letter-spacing: -1px; } .title-info{font-size: 22px; color: #00B77F;margin-bottom: 30px; text-align: center;} .info{font-size: 24px; margin-top: 18px;color: #888; line-height: 1.5;word-break: keep-all;} .info span{font-size: 18px;} .tit01,.tit02,.tit03,.tit04,.tit03 + p, .info{word-break: keep-all;} .tl-box{text-align: left;} .flex{display: flex; flex-wrap: wrap;} .flex.col2 > *{width:calc(50% - 12px);} .flex.col2 > * + *{margin-left: 24px;} .mobile_only{display:none;} /* animate01 */ .animate01{opacity: 0; transform: translateY(100px); transition: all 1s; } .animate01.on{ opacity: 1; transform: translateY(0);} /* section */ .section{padding: 150px 0;} .section .inner{padding:0 102px;} .title-wrap{margin-bottom: 70px; text-align: center;} .title-wrap .btn-wrap{margin-top: 15px;} .title-wrap.flex{display: flex; text-align: left;} .title-wrap.flex * {width: calc(50% - 11px);} .title-wrap.flex .info{margin-left: auto;} .img-wrap img{display: block; width: 100%;} p{color: #888; word-break: keep-all;} /*g slide*/ .green-slide .slick-arrow { position: absolute;width: 38px; height: 38px; border-radius: 50%;border:1px solid #00B77F; background-color: #fff; background-size: cover; bottom: 0;z-index: 1; background-image: url(/wp-content/uploads/sites/2/image/common/Vector.png); background-size: 8px 14px; background-repeat: no-repeat; background-position: center; text-indent: 100%; white-space: nowrap; overflow: hidden;} .green-slide .slick-arrow:hover{background-image: url(/wp-content/uploads/sites/2/image/common/Vector_active.png); border-color: #0E523D;} .green-slide .slick-arrow.slick-prev{ left: 50%; margin-left: -100px;} .green-slide .slick-arrow.slick-next{ right: 50%; margin-right: -100px; transform: rotate(180deg);} .green-slide .slick-dots{display: flex; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); } .green-slide .slick-dots li + li{margin-left: 18px; } .green-slide .slick-dots li button{display: block; width: 12px; height: 12px; border:1px solid #00B77F; border-radius:50%; text-indent: 100%; white-space: nowrap; overflow: hidden; } .green-slide .slick-dots li.slick-active button{background-color: #00B77F;} /* w slide */ .white-slide .slick-arrow {position: absolute;width: 30px; height: 50px; background-size: cover; top: 50%; margin-top: -25px; z-index: 1; text-indent: 100%; white-space: nowrap; overflow: hidden;} .white-slide .slick-arrow.slick-prev{ background-image: url(/wp-content/uploads/sites/2/image/main/arrow-left.png); } .white-slide .slick-arrow.slick-next{ background-image: url(/wp-content/uploads/sites/2/image/main/arrow-right.png);} .white-slide .slick-arrow.slick-prev:hover{ background-image: url(/wp-content/uploads/sites/2/image/common/arrow-left-h.png); } .white-slide .slick-arrow.slick-next:hover{ background-image: url(/wp-content/uploads/sites/2/image/common/arrow-right-h.png);} .white-slide .slick-dots{display: flex; position: absolute; left: 50%; transform: translateX(-50%); } .white-slide .slick-dots li + li{margin-left: 18px; } .white-slide .slick-dots li button{display: block; width: 12px; height: 12px; border:1px solid #fff; border-radius:50%; text-indent: 100%; white-space: nowrap; overflow: hidden; } .white-slide .slick-dots li.slick-active button{background-color: #fff;} /*tab*/ .tab-wrap .tab{border-bottom: 1px solid #F1F1F1;} .tab-wrap .tab .inner{justify-content: center;} .tab-wrap .tab li a{display: block; padding: 18px 54px; color: #888;} .tab-wrap .tab li.active{border-bottom: 2px solid #00B77F;} .tab-wrap .tab li.active a,.tab-wrap .tab li:hover a{color: #00B77F; font-weight: 500;} .tab-wrap .tab li + li{margin-left: 24px;} .tab-wrap .tab-cont{padding-top: 70px;} .tab-wrap .tab-cont .inner > li{display: none;} .tab-wrap .tab-cont .inner > li.active{display: block;} /* topInfo */ #topInfo{height: 42px;background: #F1F1F1;border-bottom: 1px solid #B7B7B7;} #topInfo .textwidget {display: flex;} #topInfo .textwidget .phone-num{font-size: 16px;color: #888; line-height: 42px; margin-left: auto;padding-left: 20px; background-image: url(/wp-content/uploads/sites/2/image/common/phon-icon.png); background-size: 16px ;background-repeat: no-repeat; background-position: left center;} #header #topInfo{height: 60px; border-bottom: none;} #header #topInfo .inner{padding:0 25px;} #header #topInfo .textwidget .phone-num{line-height: 60px;} /* header */ #header{width: 100%; z-index:999; background-color: #fff; top: 0; left: 0; border-bottom: 1px solid #B7B7B7;} #header .inner{display: flex; padding: 21px;} #header .inner .logo_wrap a{display: block; padding: 15px 0;} #header .btn-wrap{margin-top: 3px;} #header .inner .top-link-menu{margin-left: auto;} #header .inner .top-link-menu .btn+ .btn{margin-left: 10px;} #header .inner .menu-container{margin-left: 24px;} #menu-main{ font-size: 16px; display: flex; color: #888; padding: 10px 0; } #menu-main li +li{margin-left: 24px;} #menu-main li a{padding: 5px 17px; display: block; font-size: 18px;} #menu-main li.current-menu-item a{color: #00B77F;} .mobile_menu,.mobile-menu-btn{display: none;} /* footer */ #footer{background-color: #4D4F4F; font-size: 16px; color: #F1F1F1;} #footer .inner{padding:38px 30px;} #footer .flexbox .custom-html-widget{display: flex;} #footer .right .footerlogo{ display: block; width: 200px;} #footer .right .footerlogo img{width: 100%;} #footer .right p{margin-top: 40px;} #footer .right p + p{margin-top: 20px;} #footer .left{ margin-left: auto; } #footer .left .sns{display: flex; margin-top: 25px; justify-content: end;} #footer .left .sns li{width: 36px; height: 36px;} #footer .left .sns li + li{margin-left: 15px;} #footer .left .sns li a{width: 100%; height: 100%; display: block; background: #2A2A2A; border-radius: 50%; background-size: 19px 19px; background-position: center; background-repeat: no-repeat; } #footer .left .sns li.insta a{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon1.png);} #footer .left .sns li.youtube a{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon2.png);} #footer .left .sns li.blog a{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon3.png);} #footer .left .sns li.kakao a{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon4.png);} #footer .left .sns li.insta a:hover{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon1_hover.png);} #footer .left .sns li.youtube a:hover{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon2_hover.png);} #footer .left .sns li.blog a:hover{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon3_hover.png);} #footer .left .sns li.kakao a:hover{background-image: url(/wp-content/uploads/sites/2/image/common/sns_icon4_hover.png);} #footer .left .account{display: flex; margin-top: 30px; justify-content: end;} #footer .left .account li+ li{margin-left: 40px;} #footer .colabox_copyright { border-top: 1px solid #888B8B; text-align: center; } /*------------------------------------------------------------------- main page -------------------------------------------------------------------*/ /* common */ .animation {transform: translateY(10rem); opacity: 0; transition: opacity .3s ease-in 0s,transform .6s ease-out 0s,-webkit-transform .6s ease-out 0s; } .animation.on{transform: translateY(0); opacity: 1;} /* main-visual */ #main .flouting-wrap{position: relative;} #main .flouting{position: absolute; top: 100px; right: 10px; transition: all .4s;} #main .flouting .icon{ text-align: center;} #main .flouting .icon + .icon {margin-top: 20px;} #main .flouting .icon img{width: 76px;} #main .flouting .icon p{margin-top: 7px; font-size: 12px;} #main .main-visual{position: relative;} #main .main-visual .visual-slide { height: 100%;min-height:530px;} #main .main-visual .v-slide .inner{padding: 300px 0; max-width: 882px; width: 100%; margin: 0 auto; color: #fff; text-align: left;} #main .main-visual .v-slide .title-wrap{text-align: left; margin-bottom: 0;} #main .main-visual .v-slide .inner .info, #main .main-visual .v-slide .inner .btn02{margin-top: 30px; color: #fff;} #main .main-visual .v-slide{background-size: cover;background-position: 70% center;min-height: 530px;} #main .main-visual .slick-arrow {left: 50%; } #main .main-visual .slick-arrow.slick-prev{margin-left: -600px;} #main .main-visual .slick-arrow.slick-next{ margin-left: 600px;} #main .main-visual .slick-dots{ bottom: 66px; } /*section-product*/ #main .section-product .title-info{text-align: left;} #main .section-product .box-wrap .box{width: calc(50% - 12px);} #main .section-product .box-wrap .box a:hover{ opacity: .6;} #main .section-product .box-wrap .box + .box{margin-left: 24px;} #main .section-product .box-wrap .box:nth-child(2n+1){margin-left: 0 !important;} #main .section-product .box-wrap .box + .box + .box{margin-top: 50px;} #main .section-product .box-wrap .box .img-wrap{width: 100%;overflow: hidden;} #main .section-product .box-wrap .box img{display: block; width: 100%;} #main .section-product .box-wrap .box a:hover img{ -webkit-transform: scale(1.05); transform: scale(1.05); transition: -webkit-transform .35s cubic-bezier(.25,.46,.45,.94); transition: transform .35s cubic-bezier(.25,.46,.45,.94); transition: transform .35s cubic-bezier(.25,.46,.45,.94),-webkit-transform .35s cubic-bezier(.25,.46,.45,.94);} #main .section-product .box-wrap .box .txt-wrap {margin-top: 15px; display: block;} #main .section-product .box-wrap .box .txt-wrap .box-tit-wrap {display: flex;} #main .section-product .box-wrap .box .txt-wrap .box-tit-wrap .tit03 p {font-size: 14px; margin-top: 0; font-weight: 400;} #main .section-product .box-wrap .box .txt-wrap .box-tit-wrap span{ line-height: 30px; display: block; text-align: center; margin-left: auto;border-left: 1px solid #D9D9D9; width: 89px;} #main .section-product .box-wrap .box .txt-wrap p {margin-top: 15px;} /*section-feature*/ #main .section-feature .feature-wrap li{display: flex;} #main .section-feature .feature-wrap li + li{margin-top: 70px;} #main .section-feature .feature-wrap li .img-wrap{width: 51%;} #main .section-feature .feature-wrap li.right{flex-direction: row-reverse;} #main .section-feature .feature-wrap li .txt-wrap{width: 49%; display: flex; justify-content: center; align-items: center; } #main .section-feature .feature-wrap li .txt-wrap .btn{margin-top: 15px;} /* section-certif */ #main .section-certif{background-image: url(/wp-content/uploads/sites/2/image/main/section_certi.png); background-size: cover; background-position: center;} #main .section-certif .inner{padding: 0;} #main .section-certif .certif-wrap{display: flex; } #main .section-certif .certif-wrap li{width:calc(33.333% - 16px); text-align: center;} #main .section-certif .certif-wrap li+li{margin-left: 24px; } #main .section-certif .certif-wrap li .img-wrap{max-width: 200px; margin:0 auto 30px;} /* section-refer */ #main .section-refer .refer-table tr th{background-color: #F1F1F1; border-bottom: 1px solid #888; font-size: 24px; color: #888; padding: 8px; font-weight: 400;} #main .section-refer .refer-table tr .refer-wrap { padding-bottom: 60px;} #main .section-refer .refer-table tr td img{width: calc(20% - 20px); display: inline-block; margin-top: 30px;} #main .section-refer .refer-table tr td img + img{margin-left: 25px;} #main .section-refer .refer-table tr td img:nth-child(5n+1){margin-left: 0;} /* section-video */ #main .section-video{background-color: #EFF3F2;} #main .section-video .video-slide {position: relative; padding-bottom: 70px;} #main .section-video .video_wrap{position: relative; height:560px;} #main .section-video .video_wrap .player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* section_trial */ #main .section_trial{ text-align: center;background-image: url(/wp-content/uploads/sites/2/image/main/section_trial.jpg); background-size: cover; background-position: center; padding: 200px 0; } #main .section_trial .title-wrap {margin-bottom: 30px;} #main .section_trial .title-wrap .tit02{color: #fff;} @media only screen and (max-width: 1680px){ .section_02 .text_wrap{margin-right:0%;} } /*------------------------------------------------------------------- sub page -------------------------------------------------------------------*/ .top-banner{padding: 250px 0; color: #fff; background-size: cover; background-position: center center; } .top-banner .info {color: #fff;} .top-banner .title-wrap{margin-bottom: 0;} .sub .section{padding: 100px 0 0 0;} .sub .section-banner{padding: 150px 0; background-size: cover; background-image: url(/wp-content/uploads/sites/2/image/product/product_trial.jpg); background-position: center center;margin-top: 100px; } .sub .section-banner .title-wrap {width: 50%; text-align: left; margin-bottom: 0;} .sub .section-banner .title-wrap .btn{margin-top: 30px;} /* product */ #products .top-banner{background-image: url(/wp-content/uploads/sites/2/image/product/product_top.jpg);} #products .product-content + .product-content{padding-top: 70px;} #products .product-content + .product-content .mo-tit{display: none;} #products .customize-color .img-wrap{width: calc(72% - 51px);margin-left: 51px; max-width: 574px;} #products .customize-color .customize-tab-wrap{width: 28%; padding:0 20px;min-width: none; min-width: 371px;} #products .customize-color .customize-tab-wrap .tit03+p{margin-top: 30px;} #products .customize-color .customize-tab{margin-top: 30px; border-top: 2px solid #D9D9D9; border-bottom: 2px solid #D9D9D9;} #products .customize-color .customize-tab > ul >li{padding: 30px 0;} #products .customize-color .customize-tab > ul >li + li{border-top: 2px solid #D9D9D9;} #products .customize-color .customize-tab > ul >li .color-tab-tit{font-size: 16px; color: #2a2a2a;} #products .color-tab {display: flex; margin-top: 20px; } #products .color-tab li+ li{margin-left: 15px;} #products .color-tab li button{text-indent: -999999px; display: block; width: 35px; height: 35px; border-radius: 5px;} #products .color-tab li.selected button,#products .color-tab li:hover button{border: 2px solid #00B77F;} #products .color-tab li button[data-color="white"]{background-color: #F6F6F6;} #products .color-tab li button[data-color="gray"]{background-color: #ADADAD;} #products .color-tab li button[data-color="lightblue"]{background-color: #E6F2F0;} #products .color-tab li button[data-color="lightyellow"]{background-color: #F6F0CE;} #products .color-tab li button[data-color="lightgreen"]{background-color: #B3AE61;} #products .color-tab li button[data-color="brown"]{background-color: #63543D;} #products .color-tab li button[data-color="black"]{background-color: #000;} #products .color-tab li button[data-color="darkblue"]{background-color: #46617C;} #products .color-tab li button[data-color="lightgray"]{background-color: #DEDEDE;} #products .color-tab li button[data-color="mustard"]{background-color: #C8AE89;} #products .color-tab li button[data-color="lightpink"]{background-color: #F8D1BE;} #products .color-tab.doorf li button[data-color="brown"]{background-color: #A36752;} #products .color-tab.texture{flex-wrap: wrap;} #products .color-tab.texture li+li{margin-left: 10px;} #products .color-tab.texture li:nth-child(4n+1){margin-left: 0;} #products .color-tab.texture li+li+li+li+li{margin-top: 10px;} #products .color-tab.texture li button{width: 72px; height: 72px; border-radius: 0; background-size: cover; display: block;} #products .color-tab.texture li.selected button,#products .color-tab.texture li:hover button{border: 3px solid #00B77F;} #products .color-tab.texture li button[data-color="option1"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip1.png);} #products .color-tab.texture li button[data-color="option2"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip2.png);} #products .color-tab.texture li button[data-color="option3"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip3.png);} #products .color-tab.texture li button[data-color="option4"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip4.png);} #products .color-tab.texture li button[data-color="option5"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip5.png);} #products .color-tab.texture li button[data-color="option6"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip6.png);} #products .color-tab.texture li button[data-color="option7"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip7.png);} #products .color-tab.texture li button[data-color="option8"]{background-image: url(/wp-content/uploads/sites/2/image/product/texturechip8.png);} #products .spec .spac-wrap {margin-top: 15px; background: #F1F1F1; border-top: 2px solid #D9D9D9;padding: 30px 0;align-items: center;} #products .spec .spac-wrap .spec-img-slide{width: 50%;} #products .spec .spac-wrap .spec-img-slide {position: relative; padding-bottom: 70px;} #products .spec .spac-wrap .spec-list{width:calc(50% - 24px);margin-left: 24px; box-sizing: border-box; padding-right: 30px;} #products .spec .spac-wrap .spec-list li{display: flex; font-size: 16px; color: #888; line-height: 1.5;} #products .spec .spac-wrap .spec-list li + li {margin-top: 20px;} #products .spec .spac-wrap .spec-list li .tit{width: 78px; color: #2a2a2a; font-weight: 500;} #products .section-banner{ background-image: url(/wp-content/uploads/sites/2/image/product/product_trial.jpg); } .product-phone .flex{gap:24px; padding-bottom:24px;} .product-phone .flex > div{flex:1 1 calc(50% - 12px);} .product-phone .flex .color-chip{display:flex; align-items: center; flex:1 1 calc(50% - 12px);border-left:1px solid #D9D9D9; padding-left:24px;} .product-phone .flex .color-chip li{display:flex; gap:18px; flex-basis:50%;} .product-phone > .img-wrap img{flex-basis:calc(50% - 12px);} /* feature */ #feature .section {padding: 100px 0;} #feature .top-banner{background-image: url(/wp-content/uploads/sites/2/image/feature/feature_top.jpg);} #feature .section-feature .feature-list li{width: calc(25% - 18px);} #feature .section-feature .feature-list li + li{margin-left: 24px;} #feature .section-feature .feature-list li:nth-child(4n+1){margin-left: 0;} #feature .section-feature .feature-list li + li + li + li + li{margin-top: 50px;} #feature .section-feature .feature-list li .img-wrap{overflow: hidden; width: 100%;} #feature .section-feature .feature-list li img{transition: all 1s; } #feature .section-feature .feature-list li .img-wrap:hover img{transform: scale(1.25);} #feature .section-feature .feature-list li .txt-wrap{margin-top: 30px;} #feature .section-feature .feature-list li .txt-wrap p {margin-top: 15px; font-size: 16px; letter-spacing: -1px;} #feature .section-costomiz .icon-wrap .icon{width: 33.333%;} #feature .section-costomiz .icon-wrap .icon .img-wrap{width: 200px; margin: auto;} #feature .section-costomiz .icon-wrap .icon .icon-txt{text-align: center; margin-top: 30px;} #feature .section-costomiz .icon-wrap .icon .icon-txt p{margin-top: 12px;} #feature .section-costomiz .side-tab-wrap{margin-top: 90px; align-items: center;} #feature .section-costomiz .side-tab-wrap .side-tab li{ border:2px solid #F1F1F1; border-radius: 5px; background-color: #F1F1F1;} #feature .section-costomiz .side-tab-wrap .side-tab li + li{margin-top: 15px;} #feature .section-costomiz .side-tab-wrap .side-tab li.active,#feature .section-costomiz .side-tab-wrap .side-tab li:hover{border-color: #00B77F; background-color: #fff;} #feature .section-costomiz .side-tab-wrap .side-tab li a{display: block; padding: 28px 28px 28px 50px; } #feature .section-costomiz .side-tab-wrap .side-tab li a p {margin-top: 10px; letter-spacing: -1px; font-size: 16px;} #feature .section-package{background-color: #F1F1F1;} #feature .section-package .package-slide-wrap .slick-track{left: -22%;} #feature .section-package .package-slide-wrap .package-slide{margin-left: 24px; background-color: #fff;} #feature .section-package .package-slide-wrap .slick-arrow {text-indent: 100%; white-space: nowrap; overflow: hidden; position: absolute;width: 30px; height: 50px; background-size: cover; top: 50%; z-index: 1; background-image: url(/wp-content/uploads/sites/2/image/feature/pk-arrow.png);background-repeat: no-repeat; background-position: center; margin-top: -25px;} #feature .section-package .package-slide-wrap .slick-arrow:hover{background-image: url(/wp-content/uploads/sites/2/image/feature/pk-arrow-active.png);} #feature .section-package .package-slide-wrap .slick-arrow.slick-prev{ left: -70px; transform: rotate(180deg);} #feature .section-package .package-slide-wrap .slick-arrow.slick-next{ right: -70px; } #feature .section-package .package-slide-wrap .package-slide .slide-txt{padding: 30px 25px 25px; min-height: 171px; } #feature .section-package .package-slide-wrap .package-slide .slide-txt p {margin-top: 15px;} #feature .section-sound{background-color: #222;color: #fff; } #feature .section-sound .title-wrap *,#feature .section-sound .cont-wrap * {color: #fff;} #feature .section-sound .sound-wrap{ align-items: end; justify-content: center;} #feature .section-sound .sound-wrap .contral-wrap{} #feature .section-sound .sound-wrap .contral-wrap .play-btn-wrap button{width: 55px; height: 55px; background-size: cover; margin: auto; display: block; } #feature .section-sound .sound-wrap .contral-wrap .play-btn-wrap .play-btn{background-image: url(/wp-content/uploads/sites/2/image/feature/play-Default.png);} #feature .section-sound .sound-wrap .contral-wrap .play-btn-wrap .stop-btn{display: none; background-image: url(/wp-content/uploads/sites/2/image/feature/pause-Default.png);} #feature .section-sound .sound-wrap .contral-wrap .play-btn-wrap .play-btn:hover{background-image: url(/wp-content/uploads/sites/2/image/feature/play-hover.png);} #feature .section-sound .sound-wrap .contral-wrap .play-btn-wrap .stop-btn:hover{background-image: url(/wp-content/uploads/sites/2/image/feature/pause-hover.png);} #feature .section-sound .sound-wrap .contral-wrap .play-btn-wrap .play-btn.active{background-image: url(/wp-content/uploads/sites/2/image/feature/play-active.png);} #feature .section-sound .sound-wrap .contral-wrap .play-btn-wrap .stop-btn.active{background-image: url(/wp-content/uploads/sites/2/image/feature/pause-active.png);} #feature .section-sound .sound-wrap.off .contral-wrap .play-btn-wrap .play-btn{display: none;} #feature .section-sound .sound-wrap.off .contral-wrap .play-btn-wrap .stop-btn{display: block;} #feature .section-sound .sound-wrap .contral-wrap .switch-wrap{margin-top: 15px;} #feature .section-sound .sound-wrap .contral-wrap .switch-wrap .label{ margin: 0 10px;text-transform: uppercase; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; cursor: pointer;} #feature .section-sound .sound-wrap .contral-wrap .switch-wrap .switch{ background:#D9D9D9; border-radius: 50px; cursor: pointer; height: 25px; position: relative; width: 50px} #feature .section-sound .sound-wrap .contral-wrap .switch-wrap .switch::after{content: ''; background: #fff; border-radius: 50%;width: 25px; height: 25px;left: 0; position: absolute; top: 0; -webkit-transition: left .3s ease-out; transition: left .3s ease-out; } #feature .section-sound .sound-wrap.on .contral-wrap .switch-wrap .switch{background: #00B77F;} #feature .section-sound .sound-wrap.on .contral-wrap .switch-wrap .switch::after{left: calc(100% - 25px);} #feature .section-sound .sound-wrap .media video{display: none;} #feature .section-sound .sound-wrap .media video.active{display: block; -webkit-filter: contrast(101%); filter: contrast(101%);} #feature .section-sound .sound-feature{margin-top: 70px;} #feature .section-sound .sound-feature .box-txt{margin-top: 15px;} #feature .section-banner{ background-image: url(/wp-content/uploads/sites/2/image/feature/feature_trial.jpg); margin-top: 0; padding: 150px 0;} #feature .section-domestic .domestic-wrap .box-txt{margin-top: 15px; text-align: center; margin-top: 30px;} /* reference */ #reference .top-banner{background-image: url(/wp-content/uploads/sites/2/image/reference/case_top.jpg);} #reference .section-reference >.inner{padding: 0;} #reference .section-reference .refer-tab {justify-content: center; padding-bottom: 17px;} #reference .section-reference .refer-tab li .btn{padding: 18px 40px; } #reference .section-reference .refer-tab li .btn.active{ background: #00B77F;color: #fff; border-color: #00B77F } #reference .section-reference .refer-tab li.br{ flex-basis:100%} #reference .section-reference .refer-tab li+ li{margin-left: 16px;} #reference .section-reference .refer-tab li+ li + li + li + li+ li{margin-top: 8px;} #reference .section-reference .refer-tab li:nth-child(7){margin-left: 0;} #reference .section-reference .refer-tab-cont{background-color: #EFF3F2; } #reference .section-reference .refer-tab-cont ul{margin: 0 -15px; padding: 50px 0 150px;} #reference .section-reference .refer-tab-cont ul li{width: 33.333%; padding:0 12px; margin-bottom: 50px; } #reference .section-reference .refer-tab-cont ul li a{overflow: hidden; border-radius: 10px; background-color: #fff; display: block;} #reference .section-reference .refer-tab-cont ul li a .txt-box{padding: 14px 20px;} #reference .section-reference .refer-tab-cont ul li a .img-wrap .img-slide{display: none;} #reference .section-reference .refer-tab-cont ul li a .img-wrap .img-slide:first-child{display: block;} #reference .section-reference .refer-tab-cont ul li a .txt-box .tag-wrap{ margin-top: 50px;display: flex;} #reference .tag-wrap span{display: inline-block; padding: 5px 10px; background-color: #EFF3F2; border-radius: 5px;font-size: 12px; color: #888; white-space:nowrap;} #reference .section-reference .refer-tab-cont ul li a .txt-box .tag-wrap span + span{margin-left: 5px;} #referencePopup{position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 996px; width: 100%; background-color: #fff; box-shadow: 0px 4px 4px 0px #00000040; border-radius: 10px; display: none;z-index: 9999; } #referencePopup .popup-inner{padding: 50px 0 30px; position: relative;} #referencePopup .popup-inner .btn-close{position: absolute; top: 10px; right: 10px; padding: 8px; width: 30px; height: 30px; } #referencePopup .popup-inner .btn-close img{width: 100%;} #referencePopup .popup-inner .refer-slide {width: 100% ; position: relative;} #referencePopup .popup-inner .refer-slide .img-slide img{width: 100%; height: auto;} #referencePopup .popup-inner .refer-slide .slick-arrow {text-indent: 100%; white-space: nowrap; overflow: hidden; position: absolute;width: 30px; height: 50px; background-size: cover; top: 50%; margin-top: -25px; z-index: 1;} #referencePopup .popup-inner .refer-slide .slick-arrow.slick-prev{left: 18px;} #referencePopup .popup-inner .refer-slide .slick-arrow.slick-next{ right: 18px;} #referencePopup .popup-inner .refer-slide .slick-dots{bottom: 20px;} #referencePopup .popup-inner .caption-box {flex-wrap: nowrap; padding: 28px 30px; } #referencePopup .popup-inner .caption-box .tag-wrap{display: flex; margin-top: 15px;} #referencePopup .popup-inner .caption-box .tag-wrap span+span{margin-left: 10px;} #referencePopup .popup-inner .caption-box .caption{margin-left: 45px; font-size: 16px;} .modal{position: fixed; background-color: rgba(0,0,0,0.6); top: 0;bottom: 0;left: 0;right: 0; z-index: 999; display: none;} /*media*/ #media .top-banner{background-image: url(/wp-content/uploads/sites/2/image/media/media_top.jpg);} #media .section-video .inner,#media .section-document .inner{padding-bottom: 100px;} #media .section-video .video-wrap{text-align: center;} #media .section-video .video-wrap +.video-wrap{margin-top: 70px;} #media .section-video .video-wrap .tit03{margin-bottom: 30px;} #media .section-video .video-slide {padding-bottom: 70px;} #media .section-document {background-color: #EFF3F2;} #media .section-document .document-wrap li{width: calc(33.333% - 16px); background-color: #fff; text-align: center;} #media .section-document .document-wrap li + li{margin-left: 24px;} #media .section-document .document-wrap li .img-wrap{width: 100%;} #media .section-document .document-wrap li .text-wrap{padding: 30px 15px 40px;} #media .section-document .document-wrap li .btn01{margin-top: 15px;} /* 이용약관 */ .page_policy{width: 990px; min-height: inherit;margin: 0 auto;padding:100px 40px;} .page_policy h1{margin-bottom: 30px; font-size: 30px; font-weight:normal;} .page_policy h2{display: block; margin-bottom: 10px;font-size: 18px;font-weight: 500;} .policy_contents{padding: 40px 30px; border: 1px solid #e0e0e0; color: #666; font-size: 14px;font-weight:200;line-height:20px;} .policy_contents section{margin-top: 40px;} .page_policy section:first-child{margin-top:0px;} .page_policy .main_desc .cont_item{padding:0px;} .page_policy section .cont_item{ margin: 0 0 20px; padding-left: 20px;} .page_policy ol, .page_policy ul{margin-left: 20px; padding: 0; list-style-position: outside;list-style-type: circle;} .page_policy ol li, .page_policy ul li{padding-top:4px;list-style-type: inherit;} .page_policy ol.list_depth_01{list-style-type: decimal;} .page_policy ol.list_depth_02{margin: 5px 0px 5px 5px;counter-reset: item;list-style-type: none;} .page_policy ol.list_depth_02 li{position: relative; padding-left:25px;} .page_policy ol.list_depth_02 li:before {position: absolute;left: 0; top: 4px; display: block; width: 20px; text-align: right; content: counter(item) ") "; counter-increment: item;} .page_policy a {color:#54babd;text-decoration:none;} .page_policy a:hover {text-decoration:underline;} .page_policy table{margin-top: 10px; width: 100%;border-collapse: collapse;border-spacing: 0;} .page_policy table *{word-break:break-all;} .page_policy table td, .page_policy table th{padding: 3px 10px;border: 1px solid #ddd;text-align: center;} .page_policy table thead th{background: #54babd; color: #fff;font-weight: 400;} .page_policy table tbody th{font-weight: 500;} .page_policy ul.list_depth_01{list-style-type: disc;} .sub_cont{margin:10px 0px;} .point {color:#54babd;} @media screen and (max-width: 1200px) { /*------------------------------------------------------------------- layout -------------------------------------------------------------------*/ /* common*/ .section .inner,.inner{width: 100%; padding: 0 30px;} .top-banner{padding: 150px 0;} .section{padding: 120px 0;} .sub .section-banner{padding: 100px 0;} .img-wrap img{height: auto;} /* header */ #menu-main li a{padding: 5px 10px;} #header .btn-wrap {display: flex;} #header .btn-wrap .btn{padding: 10px 25px;} /*------------------------------------------------------------------- main page -------------------------------------------------------------------*/ /*main*/ #main .flouting{display: none;} #main .main-visual .v-slide .inner{padding: 150px 30px;} #main .main-visual .slick-arrow.slick-next{left: inherit;right: 30px; margin-left: 0;} #main .main-visual .slick-arrow.slick-prev{left: 30px; margin-left: 0;} #main .section-certif .inner{ padding: 0 30px;} #main .section-video .video_wrap{height: 56.25vw;} /*------------------------------------------------------------------- sub page -------------------------------------------------------------------*/ /* product */ #products .color-tab{margin-top: 10px;} #products .product-content + .product-content{justify-content: center;} #products .spec .spac-wrap .spec-list{margin-left: 0; width: calc(50% - 4px);} .product-phone .color-chip .img-wrap img{width:72px;} .product-phone .img-wrap img{width:calc(50% - 12px);} /* feature */ #feature .section-sound .sound-wrap .media {width: calc(100% - 157px);} #feature .section-sound .sound-wrap .media video{width: 100%;} #feature .section-package .package-slide-wrap {max-width: calc(100% - 140px); margin: auto;} /* media */ #media .section-video .video-slide .slick-slide iframe{width: 100%; height: 52.2vw;} .page_policy{width: 100%; padding: 100px 30px;} .policy_contents{padding: 40px 20px;} } @media screen and (max-width: 1060px) { /* product */ #products .customize-color .customize-tab-wrap{min-width: 295px; padding: 5px;} #products .customize-color .customize-tab{margin-top: 15px;} #products .customize-color .customize-tab > ul >li{padding: 15px 0;} #products .customize-color .img-wrap{width: calc(100% - 340px); margin-left: 25px;} #products .customize-color .img-wrap img{height: auto;} #products .color-tab.texture li button{width: 60px; height: 60px;} } @media screen and (max-width: 1024px) { /*------------------------------------------------------------------- layout -------------------------------------------------------------------*/ /* common */ body{font-size: 16px;} .btn{padding: 10px 40px;font-size: 16px; } .tit01{font-size: 50px; } .tit02{font-size: 42px; } .tit03{font-size: 22px; } .tit04{font-size: 34px; } .tit05{font-size:20px; } .title-info{font-size: 20px; margin-bottom: 26px; } .info{font-size: 20px; margin-top: 16px;} .info span{font-size: 16px;} .top-banner{padding: 130px 0;} .title-wrap{margin-bottom: 60px; } .section,#main .section_trial{padding: 90px 0;} .sub .section{padding: 90px 0 0 0 ;} .sub .section-banner{padding: 90px 0;} .sub .section-banner .title-wrap .btn{margin-top: 26px;} .flex.col2 > * + *{margin-left: 16px;} /*------------------------------------------------------------------- main page -------------------------------------------------------------------*/ #main .main-visual .v-slide .inner{padding: 100px 30px;} #main .main-visual .slick-dots{bottom: 30px;} #main .section-product .box-wrap .box{width: calc(50% - 8px);} #main .section-product .box-wrap .box + .box{margin-left: 16px;} #main .section-product .box-wrap .box + .box + .box{margin-top: 40px;} #main .section-feature .feature-wrap li + li{margin-top: 60px;} #main .section-certif .certif-wrap{justify-content: space-between; } #main .section-certif .certif-wrap li+li{margin-left: 16px;} #main .section-refer .refer-table tr th{font-size: 20px;} /*------------------------------------------------------------------- sub page -------------------------------------------------------------------*/ /* products */ #products .color-tab li+ li{margin-left: 10px;} #products .product-content + .product-content{align-items: center; padding-top: 60px;} #products .spec .spac-wrap .spec-list li p{width: calc(100% - 90px);} /* feature */ #feature .section{padding: 90px 0;} #feature .section-feature .feature-list li{width: calc(33.333% - 10px);} #feature .section-feature .feature-list li + li{margin-left: 15px;} #feature .section-feature .feature-list li+li+li+li{margin-top: 40px !important;} #feature .section-feature .feature-list li:nth-child(4n+1){margin-left: 15px;} #feature .section-feature .feature-list li:nth-child(3n+1){margin-left: 0;} #feature .section-costomiz .side-tab-wrap .side-tab li a{padding: 15px 25px;} #feature .section-costomiz .side-tab-wrap .img-wrap{width: calc(55% - 8px);} #feature .section-costomiz .side-tab-wrap .side-tab{width: calc(45% - 8px); margin-left: 16px;} #feature .section-package .package-slide-wrap .package-slide .slide-txt{padding: 20px 15px; } #feature .section-package .package-slide-wrap .package-slide{margin-left: 16px;} #feature .section-banner{padding: 90px 0;} #reference .section-reference >.inner{padding:0 30px;} #reference .section-reference .refer-tab li .btn{padding:12px 32px;} #reference .section-reference .refer-tab-cont ul li{padding:0 8px; margin-bottom: 30px;} #reference .section-reference .refer-tab-cont ul li a .txt-box{padding: 15px 8px;} #reference .section-reference .refer-tab-cont ul li a .txt-box .tag-wrap{margin-top: 30px;} #reference .section-reference .refer-tab-cont ul li a .txt-box .tag-wrap span{padding: 4px 6px; font-size: 10px;} #referencePopup{width: 90%;} #main .section-refer .refer-table tr td img + img{margin-left: 10px;} #media .section-document .document-wrap li {width: calc(33.333% - 10px);} #media .section-document .document-wrap li + li{margin-left: 15px;} } @media screen and (max-width: 900px) { /* header */ #menu-main li+ li{margin-left: 5px;} #menu-main li a{padding: 5px 7px;} #header .inner .menu-container{margin-left: 15px ;} #header .btn-wrap .btn{padding: 10px 25px;} #header .btn-wrap .btn + .btn{margin-left: 5px;} /* products */ #products .customize-color .img-wrap.outf-img img{width: 120%; position: relative; left: -10%;} #feature .section-costomiz .side-tab-wrap .img-wrap{width: calc(60% - 8px);} #feature .section-costomiz .side-tab-wrap .side-tab{width: calc(40% - 8px);} #feature .section-costomiz .side-tab-wrap .side-tab li a p{margin-top: 6px;} #reference .section-reference .refer-tab-cont ul li a .txt-box{padding: 15px 5px;} #reference .section-reference .refer-tab-cont ul li a .txt-box .tit05{font-size: 18px;} } @media screen and (max-width: 768px) { /*------------------------------------------------------------------- layout -------------------------------------------------------------------*/ /* common */ .btn{padding: 10px 32px 8px } .tit01{font-size: 32px; } .tit02{font-size: 28px; } .tit03{font-size: 18px; } .tit04{font-size: 34px; } .tit05{font-size:16px; } .title-info{font-size: 16px; margin-bottom: 26px; } .info{font-size: 16px; margin-top: 16px;} .info span{font-size: 14px;} .top-banner{padding: 130px 0 170px;} .title-wrap{margin-bottom: 50px; } .title-wrap.flex{display: block;} .section{padding: 90px 0;} .sub .section{padding: 90px 0 0 0 ;} .sub .section-banner{padding: 90px 0;} .sub .section-banner .title-wrap{width: 100%; text-align: center;} .sub .section-banner .title-wrap .btn{margin-top: 26px;} .title-wrap.flex *{width: 100%; text-align: center;} .flex.col2 > * + *{margin-left: 16px;} .tl-box{text-align: center;} .section .inner, .inner{padding:0 25px;} .tab-wrap .tab li a{padding: 18px 6px; } .btn{font-size: 14px;} .mobile_only{display:block;} /* header */ #header .inner { border-bottom: 1px solid #b7b7b7;} #header .inner .logo_wrap a{padding: 12px;} #header .inner .menu-container,#header .inner .top-link-menu .btn+ .btn,#topInfo.pc{display: none;} .mobile-menu-btn{display: block;} .mobile_menu{position: absolute; z-index: 99; top: 75px; width: 100%; background-color: #fff;} .mobile_menu .menu-container{padding: 20px 25px;} .mobile_menu .menu-container ul li a{padding: 20px 0; color: #888; display: block;} .mobile-menu-btn{ height: 24px; padding: 10px; display: block; box-sizing: content-box; margin-left: 20px;} .mobile-menu-btn span{position: relative; display: block; width: 34px; height: 24px; } .mobile-menu-btn span em{ width: 34px; height: 2px; background-color: #B7B7B7; display: block; } .mobile-menu-btn span::after,.mobile-menu-btn span::before{content: ''; position: absolute; display: block; height: 2px; width: 100%; left: 0; background-color: #B7B7B7; transition: all .4s; } .mobile-menu-btn span::after{ top: 22px;} .mobile-menu-btn span::before{top: 11px;} #header.active .mobile-menu-btn span em{display: none;} #header.active .mobile-menu-btn span::after,#header.active .mobile-menu-btn span::before{ top: 11px; background-color: #00B77F; transform: rotate(45deg);} #header.active .mobile-menu-btn span::before{transform: rotate(-45deg);} /*footer*/ #footer .flexbox .custom-html-widget{display: block;} #footer .right .footerlogo {} #footer .right {text-align: left;} #footer .left .sns,#footer .left .account{justify-content: start;} /*------------------------------------------------------------------- main page -------------------------------------------------------------------*/ #main .main-visual .v-slide.slide01{background-image: url("/wp-content/uploads/sites/2/image/main/section_slide_m_2.jpg") !important;} #main .main-visual .v-slide.slide02{background-image: url("/wp-content/uploads/sites/2/image/main/section_slide_2.jpg") !important;} #main .main-visual .v-slide.slide03{background-image: url("/wp-content/uploads/sites/2/image/main/section_slide_m_3.webp") !important;} #main .main-visual .v-slide .title-wrap {text-align: center;} #main .main-visual .v-slide .inner {text-align: center; padding: 120px 30px 140px;} #main .main-visual .slick-arrow.slick-arrow{display: none !important;} #main .section-product .title-info{text-align: center;} #main .section-product .box-wrap .box{width: 100%;} #main .section-product .box-wrap .box + .box{margin-left: 0; margin-top: 48px;} #main .section-feature .feature-wrap li + li{margin-top: 48px;} #main .section-feature .feature-wrap li{display: block;} #main .section-feature .feature-wrap li .img-wrap,#main .section-feature .feature-wrap li .txt-wrap{width: 100%;} #main .section-feature .feature-wrap li .txt-wrap{margin-top: 15px;} #main .section-certif .inner{padding: 0 25px;} #main .section-certif .certif-wrap{flex-wrap: wrap;} #main .section-certif .certif-wrap li{margin:0 auto 48px; width: 220px;} #main .section-certif .certif-wrap li+li{margin-left: auto;} #main .section-certif .certif-wrap li+li+li{margin:0 auto ;} #main .section-refer .refer-table tr th{font-size: 16px;} #main .section-refer .refer-table tr td img{width: 33.333%;} #main .section-refer .refer-table tr td img + img{margin-left: 0;} #main .section_trial{background-image: url(/wp-content/uploads/sites/2/image/main/section_trial_m.png);} #products .tab-wrap .tab-cont .inner > li .tit04{font-size: 26px;} #products .top-banner{background-image: url(/wp-content/uploads/sites/2/image/product/product_top_m.jpg); } #products .color-tab{justify-content: space-between;padding: 0 15px;} #products .color-tab.fr{justify-content: center;} #products .product-content + .product-content{padding-top: 100px;} #products .spec .tit03{text-align: center;} #products .product-content + .product-content .mo-tit{display: block; text-align: center; margin-bottom: 15px;} #products .customize-color .customize-tab > ul >li{padding: 30px 0; } #products .customize-color .img-wrap{width: 100%; margin-left: 0; margin-top: 20px;} #products .customize-color .customize-tab-wrap{text-align: center;width: 100%;} #products .customize-color .img-wrap.outf-img img{width: 100%; left:0;} #products .spec .spac-wrap .spec-list li p{word-break:break-all;} #products .spec .spac-wrap{display: block;} #products .color-tab{ margin:10px auto 0;} #products .color-tab.texture{max-width: 375px;} #products .color-tab.texture li:nth-child(4n+1){margin-left: 10px;} #products .spec .spac-wrap .spec-img-slide{width: 100%;} #products .spec .spac-wrap .spec-list{width: 100%;max-width: 410px; padding:0 20px; margin: 30px auto 0; font-size: 14px;} #products .section-banner{background-image: url(/wp-content/uploads/sites/2/image/product/product_trial_m.jpg);} .product-phone .flex{flex-direction: column;align-items: center;} .product-phone .flex > div{text-align:center;} .product-phone .flex .color-chip{border-left:0; padding:0; gap:60px;} .product-phone .color-chip .img-wrap img{width:60px;} .product-phone > .img-wrap{padding:0px 72px;} .product-phone > .img-wrap img{width:100%;} /* feature */ #feature .top-banner{background-image: url(/wp-content/uploads/sites/2/image/feature/feature_top_m.jpg);} #feature .section-feature .feature-list li{width:calc(50% - 8px) ;} #feature .section-feature .feature-list li + li{margin-left: 16px;} #feature .section-feature .feature-list li:nth-child(3n+1){margin-left: 16px;} #feature .section-feature .feature-list li:nth-child(2n+1){margin-left: 0;} #feature .section-feature .feature-list li+li+li{margin-top: 40px;} #feature .section-costomiz .icon-wrap {flex-wrap: wrap;flex-wrap: wrap;} #feature .section-costomiz .icon-wrap .icon {margin: 0 auto 48px; width: 220px;} #feature .section-costomiz .icon-wrap .icon +li+li{margin: 0 auto;} #feature .section-costomiz .side-tab-wrap{display: block;} #feature .section-costomiz .side-tab-wrap .img-wrap{width: 100%;} #feature .section-costomiz .side-tab-wrap .side-tab{width: 100%; margin-left: 0; margin-top: 15px;} #feature .section-sound .sound-feature{margin-top: 35px;} #feature .section-sound .sound-wrap{display: block;} #feature .section-sound .sound-wrap .contral-wrap .switch-wrap{justify-content: center;} #feature .section-sound .sound-wrap .media{width: 100%;} #feature .section-package .package-slide-wrap {max-width: 100%;} #feature .section-package .package-slide-wrap .slick-arrow{display: none !important;} #feature .section-package .package-slide-wrap .slick-track{left: -36%;} #feature .section-banner{ background-image: url(/wp-content/uploads/sites/2/image/feature/feature_trial_m.jpg);} #reference .section-reference .cont-wrap{height: 100px; overflow: hidden;} #reference .section-reference .refer-tab-wrap{width: 100%; overflow-x: scroll; } #reference .section-reference .refer-tab{width: 500px; justify-content:flex-start; padding-bottom: 30px;} #reference .section-reference .refer-tab-cont ul li{width: 50%; margin-bottom: 16px;} #reference .section-reference .refer-tab li+ li{margin-left: 10px;} #reference .section-reference .refer-tab li .btn{padding: 10px 15px;} #referencePopup .popup-inner .caption-box{display: block;padding-bottom: 0;} #referencePopup .popup-inner .caption-box .caption{margin-left: 0; margin-top: 20px;} #media .section-document .document-wrap li{width: 100%; max-width: 430px; margin:24px auto 0;} #media .section-document .document-wrap li:first-child{margin-top: 0;} #media .section-document .document-wrap li + li{margin-left: auto;} #media .section-document .document-wrap li .text-wrap .tit05{font-size: 18px;} #media .section-video .video-slide{padding-bottom: 50px;} #media .section-video .video-slide .slick-slide iframe{height: 49vw;} #media .top-banner{background-image: url(/wp-content/uploads/sites/2/image/media/media_top_m.jpg);} .page_policy{ padding: 60px 25px;} .policy_contents{padding: 40px 15px;} } @media screen and (max-width: 600px) { #main .main-visual .visual-slide{height:530px;} #main .section-certif .certif-wrap {display: block; max-width: 430px;} #main .section-certif .certif-wrap li{display: flex; justify-content: center;width: 100%; align-items: center;} #main .section-certif .certif-wrap li .img-wrap{width: 170px; margin: 0;} #main .section-certif .certif-wrap li .txt-wrap{text-align: left; margin-left: 20px; width: calc(100% - 200px); margin-top: 0;} #main .section-certif .certif-wrap li .txt-wrap p{margin-top: 10px;} .product-phone .flex .color-chip{gap:20px; } .product-phone .flex .color-chip li{gap:10px;} .product-phone > .img-wrap{padding:0px;} #feature .section-costomiz .icon-wrap{display: block; max-width: 430px;} #feature .section-costomiz .icon-wrap .icon{display: flex; justify-content: center;width: 100%; align-items: center;} #feature .section-costomiz .icon-wrap .icon .img-wrap{width: 170px; margin: 0;} #feature .section-costomiz .icon-wrap .icon .icon-txt{text-align: left; margin-left: 20px; width: calc(100% - 200px); margin-top: 0;} #feature .section-costomiz .icon-wrap .icon .icon-txt p{margin-top: 10px;} #feature .section-sound .sound-feature ,#feature .section-domestic .domestic-wrap {display: block;} #feature .section-sound .sound-feature .box ,#feature .section-domestic .domestic-wrap .box{width: 100%;} #feature .section-sound .sound-feature .box + .box, #feature .section-domestic .domestic-wrap .box+.box{margin-left: 0; margin-top: 24px;} } @media screen and (max-width: 500px) { .tit01,.tit02,.tit03,.tit04,.tit03 + p, .info{word-break: break-all;} #header .inner{padding: 15px 21px;} #header .inner .logo_wrap a img{ width: 120px; height: auto;} #header .btn-wrap .btn{padding: 10px 15px; font-size: 14px;} .mobile-menu-btn{padding: 10px 0 10px 5px; margin-left: 10px;} #main .section-certif .certif-wrap li{display: flex; justify-content: center;} #reference .section-reference .refer-tab-cont ul li{width: 100%;} #reference .section-reference .refer-tab-cont ul li a .txt-box{padding: 15px;} #reference .section-reference >.inner{padding:0 10px;} }