@charset "utf-8";

@import url('common.css');
@import url('font.css');
@import url('animate.css');
@import url('slick.css');
@import url('swiper-bundle.min.css');
@import url('board_common.css');

:root {
    --point-color: #0088FF;
	--sub-point: #366DF5;
    --white: #fff;
    --black: #05070E;
	--gray1: #AEAEB2;
}

#wrap {overflow-x: hidden;}
.wrapper {width: 1400px; margin: 0 auto;}
.wrapper02 {width: 1434px; margin: 0 auto;}
.wrapper03 {width: 1600px; margin: 0 auto;}
.wrapper04 {width: 1280px; margin: 0 auto;}

.eng {display: none;}

.darkpage {color: var(--white); background: var(--black);}
.darkpage a {color: var(--white);}

.cm-title {text-align: center;}
.cm-title span {display: block; margin-bottom: 7px; font-size: 20px; font-weight: 500; color: var(--point-color); line-height: 3.4; letter-spacing: 0;}
.cm-title h3 {font-size: 50px; font-weight: 700; letter-spacing: 0; line-height: 1.48;}
.cm-title p {margin-top: 41px; font-size: 20px; line-height: 1.5; color: var(--gray1); letter-spacing: 0; font-weight: 300;}

[class^="bt-"] {display: flex; align-items: center; justify-content: center; width: 280px; height: 60px; font-size: 20px; letter-spacing: -0.4px; font-weight: 500; color: var(--white); border-radius: 40px; transition: all .3s ease;}
.bt-blue {background: var(--point-color);}
.bt-blue:hover {background-color: #006eff;}
.bt-line {border: 1px solid rgba(255,255,255,0.3);}
.bt-line:hover {background: rgba(0,0,0,0.2); backdrop-filter : blur(5px);}

.visual {height: 1080px; background: url(../images/bg/bg_visual01.jpg) no-repeat center/cover;}
.visual > div {color: var(--white); height: 100%; display: flex; flex-direction: column; justify-content: center; padding-left: 25px; padding-bottom: 57px;}
.visual p {font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.8px;}
.visual h2 {margin-top: 11px; font-size: 120px; font-weight: 600; line-height: 1; letter-spacing: -2.4px;}
.visual ul {display: flex; align-items: center; gap: 9px; margin-left: -18px; margin-top: 102px;}
.visual ul li {width: 200px; height: 54px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.3); transition: all .3s ease;}
.visual ul li a {display: flex; width: 100%; height: 100%; font-weight: 700; letter-spacing: -0.32px; align-items: center; justify-content: center; color: #fff;}
.visual ul li a span {display: inline-block; line-height: 20px; padding-left: 30px; background-repeat: no-repeat; background-position: left center;}
.visual ul li.vs-btn01 a span {background-image: url(../images/ico/ico_main_visual_btn01.svg);}
.visual ul li.vs-btn02 a span {background-image: url(../images/ico/ico_main_visual_btn02.svg);}
.visual ul li.vs-btn03 a span {background-image: url(../images/ico/ico_main_visual_btn03.svg);}
.visual ul li:hover {background-color: var(--point-color); border-color: var(--point-color);}

.reason {text-align: center; padding: 147px 0 160px;}
.reason .cm-title {margin-bottom: 76px;}
.reason ul {display: flex; align-items: stretch; justify-content: space-between; gap: 15px; width: 1812px; margin: 0 auto; overflow: hidden; cursor: pointer;}
.reason ul li {display: flex; flex-direction: column; justify-content: flex-end; position: relative; width: 306px; height: 700px; text-align: left; background-repeat: no-repeat; background-position: center; background-size: 849px; border-radius: 20px; padding: 66px 0 72px 38px; transition: all .3s ease; overflow: hidden;}
.reason ul li::before {content:''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(13, 23, 54, 0.00) 52.5%, #08F 100%); opacity: 0; transition: all .3s ease;}
.reason ul li::after {content:''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: #040F22; opacity: 0.6; transition: all .3s ease;}
.reason ul li strong {width: 849px; position: relative; z-index: 3; top: 65px; font-size: 24px; font-weight: 700; line-height: 1.66; color: var(--white); -webkit-text-stroke: 1px rgba(0,0,0,0.2); text-shadow: none;   paint-order: stroke fill;  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; transition: all .3s ease;}
.reason ul li strong::before {content: ''; position: absolute; z-index: 1; top: -20px; left: 0; width: 27px; height: 3px; background: #fff; transition: all .3s ease; opacity: 0.4;}
.reason ul li p {position: relative; width: 849px; z-index: 2; font-weight: 300; line-height: 1.75; opacity: 0; transition: all .3s ease;}
.reason ul li.on {flex-shrink: 0; width: 849px; padding-bottom: 64px;}
.reason ul li.rs01 {background-image: url(../images/pic/pic_visual_reason01.png);}
.reason ul li.rs02 {background-image: url(../images/pic/pic_visual_reason02.png); background-position:center right -208px;}
.reason ul li.rs02.on {background-position:center;}
.reason ul li.rs03 {background-image: url(../images/pic/pic_visual_reason03.png);}
.reason ul li.rs04 {background-image: url(../images/pic/pic_visual_reason04.png);}
.reason ul li.on strong {top: 0; font-size: 50px; line-height: 1.36; margin-bottom: 13px;}
.reason ul li.on strong::before {width: 41px; height: 4px; top: -13px; background: var(--point-color); opacity: 1;}
.reason ul li.on::before {opacity: 1;}
.reason ul li.on::after {opacity: 0;}
.reason ul li.on p {opacity: 0.9; transition: all .3s ease;}

.major {padding-top: 6px; padding-bottom: 7px; background:#05070E url(../images/bg/bg_main_major01.png) no-repeat bottom -35px center/1505px; }
.major .cm-title {margin-bottom: 81px;}
.major ul {display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;}
.major ul li {width: calc(33.33% - 27px); height: 522px; border: 1px solid #3F557A; box-sizing: border-box; background-color: #0A0E1A; border-radius: 20px;}
.major ul li a {position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 59px 50px 22px;}
.major ul li a::before {content: ''; position: absolute; z-index: 1; bottom: 52px; width: 220px; height: 220px; left: 50%; transform: translateX(-50%); background-repeat: no-repeat; background-position: bottom center; background-size: 220px; opacity: 0.8; transition: all .3s ease;}
.major ul li a strong {font-size: 34px; font-weight: 700;}
.major ul li a p {margin-top: 30px; font-size: 20px; line-height: 1.3; color: #D9D9D9; word-break: keep-all; transition: all .3s ease; font-weight: 300;}
.major ul li a span {text-align: center; font-size: 20px; line-height: 2.3; font-weight: 700; color: #F2F2F7; transition: all .3s ease;}
.major ul li.mj01 a::before {background-image: url(../images/ico/ico_main_major01.png);}
.major ul li.mj02 a::before {background-image: url(../images/ico/ico_main_major02.png);}
.major ul li.mj03 a::before {background-image: url(../images/ico/ico_main_major03.png);}
.major ul li.mj04 a::before {background-image: url(../images/ico/ico_main_major04.png);}
.major ul li.mj05 a::before {background-image: url(../images/ico/ico_main_major05.png);}
.major ul li.mj06 a::before {background-image: url(../images/ico/ico_main_major06.png);}
.major ul li:hover {border: 5px solid #0088FF;}
.major ul li:hover a {padding: 55px 46px 20px;}
.major ul li:hover a::before {bottom: 55px; height: 240px; opacity: 1; background-size: 240px;}
.major ul li:hover p {color: #fff}
.major ul li:hover span {line-height: 1.6; font-size: 28px; color: var(--point-color);}
.major ul li.mj05:hover a::before {bottom: 50px;}
.major .big-decotxt {margin-top: 290px; text-indent:-9999px; width: 100%; height: 120px; background: url(../images/pic/pic_main_major_decotxt.svg) no-repeat center/1462px;}

.case {padding-top: 139px; padding-bottom: 104px;}
.case .cm-title span {margin-bottom: 10px; font-size: 18px;}
.case .logo-flow {margin-top: 43px; margin-bottom: 50px;}
.case .logo-flow::before,
.case .logo-flow::after {content:''; position: absolute; z-index: 1; top: 0; width: 700px; height: 70px;}
.case .logo-flow::before {left: 0; background: linear-gradient(90deg, #04070F 50%, rgba(4, 7, 15, 0.00) 100%);}
.case .logo-flow::after {right: 0; background: linear-gradient(270deg, #04070F 50%, rgba(4, 7, 15, 0.00) 100%);}
.case .logo-flow li {width: 200px; opacity: 0.5;}

.case .case-slide .swiper-wrapper {align-items: stretch;}
.case .case-slide .swiper-slide {display: flex; flex-direction: column; justify-content: space-between; width: 700px; height: 400px; padding: 48px 64px 32px; border-radius: 20px; border: 1px solid #3F557A; background: linear-gradient(180deg, rgba(4, 7, 15, 0.20) 59.78%, rgba(4, 75, 147, 0.20) 100%), rgba(15, 52, 135, 0.10);}
.case .case-slide .swiper-slide div > span {font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.4px; color: var(--point-color);}
.case .case-slide .swiper-slide div > strong {display: block; margin: 10px 0 28px; font-size: 30px; line-height: 1.4; letter-spacing: -0.6px; word-break: keep-all;}
.case .case-slide .swiper-slide div ul {font-size: 18px; letter-spacing: 1.6em; letter-spacing: -0.36px; opacity: 0.6;}
.case .case-slide .swiper-slide .tag {display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px;}
.case .case-slide .swiper-slide .tag span {font-weight: 500; line-height: 1.3; letter-spacing: -0.32px; padding: 7px 15px; border: 1px solid rgba(255,255,255,0.2); background:rgba(0,0,0,0.1); border-radius: 8px; color: var(--point-color);}
.case .case-slide .swiper-slide .tag span::before {content: '#'; display: inline-block; margin-right: 3px;}

.flow-wrap {position: relative; --speed: 100s; --gap: 16px; overflow: hidden;}
.flow-wrap .flow-list {display: flex; gap: var(--gap); width: max-content; animation: ticker-scroll var(--speed) linear infinite;}
.flow-wrap .flow-list .flow-track {display: inline-flex; flex-shrink: 0; gap: var(--gap); min-width: max-content;}
.flow-wrap .flow-list .flow-track li {position: relative; flex-shrink: 0;}
.flow-wrap .flow-list:hover {animation-play-state: paused;}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.star-list li {position: relative; padding-left: 24px; font-weight: 300;}
.star-list li + li {margin-top: 10px;}
.star-list li::before {content:''; position: absolute; z-index: 1; top: 4px; left: 0; width: 14px; height: 14px; background: url(../images/ico/ico_star_list01.svg)}

.history {padding-top: 75px; padding-bottom: 80px;}
.history .cm-title {margin-bottom: 25px;}
.history .cm-title span {font-size: 18px;}
.history .his-wrap {width: 1710px; padding: 52px 68px 44px 80px; margin: 0 auto; background: #161B27; border-radius: 20px; overflow: hidden;}
.history .his-wrap.his-slick {display: none;}
.history .his-wrap ul {display: flex; align-items: stretch;}
.history .his-wrap li {flex-shrink: 0; display: flex; align-items: center; flex-direction: column; text-align: center;}
.history .his-wrap li + li {margin-left: 57px;}
.history .his-wrap li .imgbox {display: flex; align-items: center; gap: 15px;}
.history .his-wrap li .imgbox img {width: 184px; border-radius: 8px;}
.history .his-wrap li p {display: inline-block; font-size: 16px; margin-top: 16px; font-weight: 300; line-height: 1.4; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px); border-radius: 50px; padding: 5px 16px 4px; font-family: 'Pretendard';}

.history .year-slide {position: relative; left: 50%; width: calc(100% - 143px); margin-left: -810px; margin-top: 41px; overflow-x: scroll; cursor:grab; user-select:none; -webkit-overflow-scrolling:touch; -ms-overflow-style:none; scrollbar-width:none;}
.history .year-slide.dragging {cursor:grabbing;}
.history .year-slide::-webkit-scrollbar {  display: none;}

.history .year-slide > ul {position: relative; display: flex; align-items: stretch; width: 240%; padding-left: 10px;}
.history .year-slide > ul > li {position: relative; flex-shrink: 0; padding-right: 120px;}
.history .year-slide > ul > li::before {content:''; position: absolute; z-index: 1; top: 84px; left: 20px; width: 100%; height: 1px; border-top: 1px dashed var(--white);}
.history .year-slide strong {font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: -0.88px;}
.history .year-slide ol {position: relative; margin-top: 64px;}
.history .year-slide ol::before {content:''; position: absolute; display: inline-block; top: -52px; left: -2px; z-index: 1; width: 39px; height: 39px; background: url(../images/ico/ico_his_years01.svg) no-repeat center/cover;}
.history .year-slide .fir-slide ol::before {left: -10px;}
.history .year-slide ol li {display: flex; align-items: flex-start; gap: 8px; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.4px; color: rgba(255,255,255,0.6);  font-family: 'Pretendard';}
.history .year-slide ol li + li {margin-top: 12px;}
.history .year-slide ol li span {flex-shrink: 0; font-size: 20px; font-weight: 700; width: 45px; color: var(--white);}

.contact {padding-top: 242px; padding-bottom: 238px; background: url(../images/bg/bg_contact01.jpg) no-repeat center/cover;}
.contact > div {position: relative;text-align: center;  line-height: 1.3; padding-top: 83px; padding-bottom: 79px; background: rgba(8,19,36,0.7); border: 3px solid #3F557A; border-radius: 40px; overflow: hidden;}
.contact > div::before,
.contact > div::after {content:''; position: absolute; z-index: 1; width: 1021px; height: 1164px; background: url(../images/ico/ico_contact_inner01.svg) no-repeat center/cover;}
.contact > div::before {bottom: -143px; left: -324px; transform: rotate(-17.36deg); animation: rotate01 2.2s linear infinite;}
.contact > div::after {top: 95px; right: -262px; transform: rotate(9.62deg); animation: rotate02 2.2s linear infinite;}
.contact > div strong {font-size: 28px; font-weight: 600; letter-spacing: -0.56px;}
.contact > div h3 {display: block; margin-top: 11px; font-size: 50px; font-weight: 700;}
.contact > div p {margin: 39px 0 43px; font-size: 20px; font-weight: 300;}
.contact > div > div  {position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px;}

@keyframes rotate01 {
	0% {transform: rotate(-17.36deg)}
	50% {transform: rotate(3.36deg)}
	100% {transform: rotate(-17.36deg)}
}
@keyframes rotate02 {
	0% {transform: rotate(9.62deg)}
	50% {transform: rotate(-10.62deg)}
	100% {transform: rotate(9.62deg)}
}

#major-pop {backdrop-filter: blur(4px);}
.major-slide {width: 100%;}
.major-slide .swiper-slide {width: 1500px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: 70px; padding: 146px 90px 146px 110px; /*margin: 0 14px;*/ overflow: hidden; border: 1px solid #6F6F6F; border-radius: 20px; background: rgba(5,7,14,.6);}
.major-slide .imgbox {flex-shrink: 0; width: 704px; height: 462px; border-radius: 20px; overflow: hidden;}
.major-slide .txtbox {flex-grow: 1; padding-top: 5px;}
.major-slide .txtbox strong {font-size: 46px; font-weight: 600; line-height: 1.19; color: var(--white);}
.major-slide .txtbox p {margin-top: 10px; margin-bottom: 35px; color: #B1B3B6; font-size: 22px; line-height: 1.3;}
.major-slide .txtbox ul li {font-size: 18px; line-height: 1.4; color: var(--white);}
#major-pop .major-slide .pop-close {left: 50%; margin-left: 691px;}
.major-slide .swiper-button-prev,
.major-slide .swiper-button-next {position: absolute; z-index: 1; top: 10%; left: 50%; width: 87px; height: 70%; text-indent: -9999px; margin-top: 0;}
.major-slide .swiper-button-prev::after,
.major-slide .swiper-button-next::after {content: none;}
.major-slide .swiper-button-prev svg,
.major-slide .swiper-button-next svg {display: none;}
.major-slide .swiper-button-prev {margin-left: -749px; background: url(../images/ico/ico_major_slide01.svg) no-repeat left center/100%;}
.major-slide .swiper-button-next {margin-left: 664px; background: url(../images/ico/ico_major_slide02.svg) no-repeat right center/100%;}
.major-slide .swiper-pagination {position: absolute; z-index: 1; top: 151px; left: 50%; margin-left: 128px; display: flex; align-items: center; gap: 6px; width: auto; height: 24px; transform: none;}

.major-slide .go-btn {margin-bottom: 15px; margin-left: -5px;}
.major-slide .go-btn ol {display: flex; align-items: center; text-align: center;}
.major-slide .go-btn li {position: relative; display: block; padding: 0 0 4px; margin: 0 !important; color: var(--white); width: 27px; height: 100%; background: transparent; border-radius: 0; cursor: pointer; opacity: .6; transition: all .3s ease;}
.major-slide .go-btn li::before {content: ''; position: absolute; z-index: 1; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; border-radius: 2px; background-color: var(--point-color); opacity: 0; transition: all .3s ease;}
.major-slide .go-btn li.on,
.major-slide .go-btn li:hover {color: var(--point-color); opacity: 1; font-weight: 700;}
.major-slide .go-btn li.on::before,
.major-slide .go-btn li:hover::before {opacity: 1;}

.dot-list li {position: relative; padding-left: 28px;}
.dot-list li + li {margin-top: 15px;}
.dot-list li::before {content:''; position: absolute; z-index: 1; top: 12px; left: 10px;	width: 5px; height: 5px; border-radius: 5px; background: var(--white);}


/* sub */
main.subpage {padding-top: 216px; padding-bottom: 180px; min-height: calc(100vh - 260px);}

.sub-title {margin-bottom: 80px; text-align: center;}
.sub-title h3 {margin-bottom: 16px; font-size: 70px; font-weight: 800; line-height: 1.4;}
.sub-title h4 {font-size: 18px; line-height: 1.4; color: #666;}
.sub-title h4.kr {line-height: 1.5; margin-top: 24px;}

.subpage.board-document {padding-top: 166px;}
.subpage.board-document .sub-title {display: none;}

.gray-info-box {display: flex; height: 114px; align-items: center; justify-content: space-between; padding: 0 40px; border-radius: 16px; background-color: #F2F4F5; background-repeat: no-repeat;}
.gray-info-box strong {font-size: 24px; font-weight: 700;}
.gray-info-box.eng {display: none;}
.gray-info-box.download {background-image: url(../images/ico/ico_pdf_down.svg); background-position: right 40px center;}
.gray-info-box .btns {display: flex; gap: 60px;}
.gray-info-box .btns a {display: block; line-height: 60px; padding-left: 66px; font-size: 20px; font-weight: 500; background-repeat: no-repeat; background-position: left center;}
.gray-info-box .btns a.tel {background-image: url(../images/ico/ico_contact_tel.svg);}
.gray-info-box .btns a.mail {background-image: url(../images/ico/ico_contact_mail.svg);}

.product-top {border-bottom: 1px solid #eee;}
.product-top .product-video {display: flex; align-items: center; padding: 80px 0; gap: 84px;}
.product-top .product-video .youtube {position: relative; width: 652px; height: 367px; border-radius: 16px; overflow: hidden;}
.product-top .product-video .youtube .thumb {position: absolute; z-index: 1; left: 0; top: 0; width: 100%; cursor: pointer;}
.product-top .product-video .youtube .thumb:after {content:''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%,-50%); border-radius: 50%; box-shadow: 0 0 20px 0 rgba(0,0,0,0.1); background: url(../images/ico/ico_video_play.svg);}
.product-top .product-video .youtube .video {opacity: 0;}
.product-top .product-video .youtube.is-active .thumb { opacity: 0; pointer-events: none; }
.product-top .product-video .youtube.is-active .video { opacity: 1; z-index: 3; }
.product-top .product-video .info {flex-grow: 1;}
.product-top .product-video .info em {font-size: 18px; display: block; color: var(--sub-point); font-weight: 700;}
.product-top .product-video .info strong {display: block; margin-top: 16px; font-size: 34px; font-weight: 700; line-height: 1.5;}

.board-title {margin: 100px 0 40px; font-size: 36px; font-weight: 700; line-height: 1.4;}


#wrap-ask {margin-top: 80px;}
#wrap-ask .kboard-attr-row {display: flex; gap: 24px; padding: 12px 0;}
#wrap-ask .kboard-attr-row.kboard-attr-html {padding: 0; margin-bottom: 8px;}
#wrap-ask .kboard-attr-row .contact-title {display: block; width: 100%; padding-bottom: 24px; font-size: 20px; font-weight: 700; line-height: 1.4; border-bottom: 2px solid #000;}
#wrap-ask .kboard-attr-row .attr-name {flex-shrink: 0; width: 200px; line-height: 46px; font-weight: 600;}
#wrap-ask .kboard-attr-row .attr-required-text {color: #EA333E;}
#wrap-ask .kboard-attr-row .attr-value {flex-grow: 1;}
#wrap-ask .kboard-attr-row input[type="text"],
#wrap-ask .kboard-attr-row input[type="email"] {width: 100%; height: 46px; border: 0; padding: 0 16px; border-bottom: 1px solid #eee;}
#wrap-ask .kboard-attr-row input[type="tel"] {width: 120px; height: 46px; border: 0; padding: 0 16px; border-bottom: 1px solid #eee;}
#wrap-ask .kboard-attr-row .kboard-content {width: 100%;}	
#wrap-ask .kboard-attr-row textarea {width: 100%; height: 200px; border: 0; padding: 16px; border-bottom: 1px solid #eee;}
#wrap-ask .kboard-attr-row .input-tel {display: flex; gap: 8px; align-items: center; color: #aaa;}
#wrap-ask .kboard-attr-row input[name="kboard_option_tel"] {width: 0; height: 0; opacity: 0;}
.kboard-attr-checkbox .attr-value {display: flex; flex-wrap: wrap;}
.kboard-attr-checkbox .attr-value .inp_chk {display: block; width: 25%; padding: 9px 0 9px 32px;}
#wrap-ask .kboard-attr-password {display: none;}
#wrap-ask .meta-key-safe {display: none;}

#wrap-ask .meta-key-agree {margin-top: 70px;}
#wrap-ask .kboard-attr-row[class*="meta-key-agree_"] {flex-direction: column; gap: 8px; border-bottom: 1px solid #eee;}
#wrap-ask .kboard-attr-row[class*="meta-key-agree_"] .attr-value {display: block;}
#wrap-ask .kboard-attr-row[class*="meta-key-agree_"] .attr-value .inp_chk {width: 100%;}

#wrap-ask .ask-btn {margin-top: 100px; text-align: center;}
#wrap-ask .ask-btn button {width: 300px; height: 54px; border: 0; text-align: center; border-radius: 100px; font-size: 16px; font-weight: 500; color: #fff; background: var(--sub-point);}

.inp_chk {position: relative; padding-left: 32px; line-height: 1.7;}
.inp_chk input[type="checkbox"] {position: absolute; z-index: -1; left: -9999px; width: 0; height: 0; clip: rect(0,0,0,0); overflow: hidden;}
.inp_chk input[type="checkbox"] + i {position: absolute; z-index: 1; left: 0; top: 11px; width: 24px; height: 24px; background: url(/wp-content/themes/bsone/images/ico/ico_chkbox.svg);}
.inp_chk input[type="checkbox"]:checked + i {background-image: url(/wp-content/themes/bsone/images/ico/ico_chkbox_chk.svg);}

.policy_con {height: 210px; overflow-y: auto; padding: 12px 16px; font-size: 15px; line-height: 1.7; color: #666; border-radius: 8px; border: 1px solid #eee;}
.policy_con ul {padding-inline-start: 24px;}
.policy_con ul li {list-style: initial;}

/*****************************************************************************************************************************************************************************************/

@media all and (max-width:1920px) {
	.major-slide .swiper-slide {width: auto;}
	.major-slide .swiper-button-prev {margin-left: 0; left: 200px;}
	.major-slide .swiper-button-next {left: auto; margin-left: 0; right: 200px;}
	#major-pop .major-slide .pop-close {margin-left: 0; left: auto; right: 230px;}
}

@media all and (max-width:1800px) { 
	.reason ul {width: 100%; padding-left: 50px; padding-right: 50px;} 

	.major-slide .swiper-slide {height: 665px; align-items: flex-start; padding: 100px 80px 100px 90px;}
	.major-slide .imgbox {width: 50%; height: auto;}
	.major-slide .txtbox strong {font-size: 30px;}
	.major-slide .txtbox p {font-size: 18px;}
	.major-slide .swiper-button-prev {left: 200px; margin-left: 0;}
	.major-slide .swiper-button-next {left: auto; right: 200px; margin-left: 0;}
	#major-pop .major-slide .pop-close {margin-left: 0; left: auto; right: 230px;}

	.history .year-slide {left: 40px; margin-left: 0; width: calc(100% - 40px);}
	.history .year-slide > ul {width: 4977px;}
	.history .his-wrap {width: calc(100% - 100px); margin: 0 auto; padding: 52px 68px 44px 68px;}

}

@media all and (max-width:1780px) {
	.history .his-wrap.no-slick {display: none;}
	.history .his-wrap.his-slick {display: block;}
}

@media all and (max-width:1740px) {
	.wrapper03 {width: 100%; padding-left: 50px; padding-right: 50px;}
	
	.reason ul li.on {width: 650px;}
	.reason ul li {padding-left: 20px; overflow: hidden;}
	.reason ul li strong {font-size: 20px; width: 630px;}
	.reason ul li p {width: 630px; padding-right: 20px;}
	.reason ul li p br {display: none;}

	.contact {padding-left: 50px; padding-right: 50px;}
}
@media all and (max-width:1500px) {
	.wrapper,
	.wrapper02 {width: 100%; padding-left: 50px; padding-right: 50px;}
}

@media all and (max-width:1400px) {
	.wrapper04  {width: 100%; padding-left: 50px; padding-right: 50px;}
	.reason ul li.on {width: 450px;}
	.reason ul li.on strong {font-size: 40px;}
	.reason ul li strong {width: 430px; font-size: 18px;}
	.reason ul li p {width: 430px; height: 60px;}
	.reason ul li.on p {height: auto;}

	.major-slide .swiper-slide {gap: 40px;}
	.major-slide .swiper-button-prev, .major-slide .swiper-button-next{width: 60px; height: 80%; background-size: 100%;}
	.major-slide .swiper-button-prev {left: 99px;}
	.major-slide .swiper-button-next {right: 99px;}
	#major-pop .major-slide .pop-close {right: 115px; top: 20px;}

	
	.product-top .product-video {gap: 50px;}
	.product-top .product-video .youtube {width: 50%; height: auto;}
	.product-top .product-video .youtube .thumb {height: auto;}
	.product-top .product-video .youtube .video {width: 100%; padding-top: 56.45%;;}
	.product-top .product-video .youtube .video iframe {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;}
}

@media all and (max-width:1200px) {
	.reason .card-swiper {width: calc(100% - 200px); margin: 0 auto;}
	.reason .card-swiper .swiper-wrapper {display: flex; width: 100%; overflow: visible; padding: 0; margin: 0;}
	.reason .card-swiper .swiper-wrapper .swiper-slide {width: 100% !important; opacity: 1; background-color: #9A9999; aspect-ratio: 1/1; }
	.reason .card-swiper .swiper-wrapper .swiper-slide::before {opacity: 1;}
	.reason .card-swiper .swiper-wrapper .swiper-slide::after {opacity: 0;}
	.reason .card-swiper .swiper-wrapper .swiper-slide strong {top: 0; font-size: 40px; width: 100%;}
	.reason .card-swiper .swiper-wrapper .swiper-slide strong::before {width: 41px; height: 4px; top: -13px; background: var(--point-color); opacity: 1;}
	.reason .card-swiper .swiper-wrapper .swiper-slide p {height: auto; opacity: 1; width: 100%;}

	.reason .card-swiper .swiper-wrapper .swiper-slide,
	.reason .card-swiper .swiper-wrapper .swiper-slide.rs02 {background-position: center; background-size: cover;}

	.major ul li {width: calc(50% - 20px);}
	#major-pop .major-slide .pop-close {right: 94px;}
	.major-slide .swiper-button-prev {left: 74px;}
	.major-slide .swiper-button-next {right: 74px;}
}

@media all and (max-width:1025px) {
	.dot-list li {padding-left: 21px;}
	.dot-list li + li {margin-top: 5px;}
	.dot-list li::before {width: 3px; height: 3px; top: 7px;}

	.reason .card-swiper .swiper-wrapper .swiper-slide {height: auto;}

	.major-slide .swiper-slide {height: auto; flex-direction: column; gap: 20px; padding: 80px 60px 60px 60px; gap: 20px;}
	.major-slide .swiper-slide .imgbox {width: 80%; margin: 0;}
	.major-slide .txtbox {padding-top: 0;}
	.major-slide .txtbox strong {font-size: 20px;}
	.major-slide .txtbox p {margin-bottom: 25px; font-size: 14px;}
	.major-slide .go-btn {top: 40px; left: 120px;}
	.major-slide .swiper-button-prev,
	.major-slide .swiper-button-next {width: 40px; background-size: 100%;}

	.major-slide .txtbox ul li {font-size: 14px;}
	.major-slide .swiper-button-prev {left: 77px;}
	.major-slide .swiper-button-next {right: 36px;}
	#major-pop .major-slide .pop-close {right: 49px;}

	.case .logo-flow::before, 
	.case .logo-flow::after {width: 150px;}

	.case .cm-title span {font-size: 15px; margin-bottom: 12px;}
	.case .logo-flow li {width: 80px;}
	.case .case-slide .swiper-slide {width: 300px; height: 455px; padding: 36px 32px;}
	.case .case-slide .swiper-slide div > span { font-size: 15px;}
	.case .case-slide .swiper-slide div > strong {font-size: 20px; margin: 12px 0 24px;}
	.case .case-slide .swiper-slide .tag span {font-size: 14px; padding: 5px 11px;}

	.star-list li {font-size: 15px; line-height: 1.4; padding-left: 16px;}
	.star-list li::before {top: 6px;width: 10px; height: 10px; background-size: 100%;}
	.star-list li + li {margin-top: 8px;}

	.contact > div::before {bottom: -23px; left: -144px; width: 500px; height: 550px;}
	.contact > div::after {top: 30px; right: -162px; width: 500px; height: 550px;}
	
	.product-top .product-video .info em {font-size: 14px;}
	.product-top .product-video .info strong {margin-top: 8px; font-size: 20px;}

	.basic_list .news-head {overflow-x: scroll; height: 59px; border-bottom: 0;}
	.basic_list .news-head .tab {position: relative; display: flex; align-items: center; margin-bottom: 0; }
	.basic_list .news-head .tab::before {content: ''; position: absolute; z-index: -1; bottom: -1px; left: 0; width: 100%; height: 1px; border-top: 1px solid #eee}
	.basic_list .news-head .tab li {flex-shrink: 0;}

	.iqnuiry .gray-info-box {height: auto; flex-direction: column; padding: 26px; gap: 20px;}
}

@media all and (max-width:768px) {
	.wrapper,
	.wrapper02,
	.wrapper03,
	.wrapper04 {width: 100%; padding-left: 24px; padding-right: 24px;}

	.cm-title span {margin-bottom: 12px; font-size: 15px; line-height: 1.4; word-break: keep-all;}
	.cm-title h3 {font-size: 26px; line-height: 1.5; word-break: keep-all;}
	.cm-title p {margin-top: 24px; font-size: 15px; line-height: 1.6; word-break: keep-all;}

	.visual {height: 812px; padding-top: 144px; background-image: url(../images/bg/bg_main_visual_m.jpg);}
	.visual > div {align-items: center; justify-content: flex-start;}
	.visual p {font-size: 22px;}
	.visual h2 {margin-top: 12px; font-size: 60px;}
	.visual ul {margin-top: 58px; flex-direction: column;}
	.visual ul li {height: 50px;}
	.visual ul li a span {font-size: 14px; padding-left: 30px; background-size: 20px;}
	
	.reason {padding-top: 120px; padding-bottom: 120px;}
	.reason .cm-title {margin-bottom: 36px; padding-left: 20px; padding-right: 20px;}
	.reason .card-swiper {width: calc(100% - 60px)}
	.reason .card-swiper .swiper-wrapper .swiper-slide {border-radius: 16px; padding: 24px;}
	.reason .card-swiper .swiper-wrapper .swiper-slide strong {margin-bottom: 16px; font-size: 20px;}
	.reason .card-swiper .swiper-wrapper .swiper-slide strong::before {width: 24px; height: 2px; top: -14px;}
	.reason .card-swiper .swiper-wrapper .swiper-slide p {font-size: 14px;}

	.major {background-image: url(../images/bg/bg_main_major01_m.png); background-position: bottom center; background-size: 100%;}
	.major .cm-title {padding-left: 24px; padding-right: 24px;}
	.major ul {gap: 16px;}
	.major ul li {width: 100%; height: auto; border-radius: 16px;}
	.major ul li a {align-items: flex-start; gap: 12px; padding: 28px 130px 27px 35px;}
	.major ul li a::before {bottom: auto; left: auto; right: 24px; top: 50%; width: 100px; height: 100px; transform: translate(0,-50%); background-size: 100%; opacity: 0.8;}
	.major ul li a strong {font-size: 20px; line-height: 1.4;}
	.major ul li a p {margin-top: 12px; font-size: 15px; line-height: 1.5;}
	.major ul li a span {font-size: 14px; line-height: 1.2;}
	
	.major ul li:hover {border-width: 4px;}
	.major ul li:hover a {padding: 25px 130px 25px 32px;}
	.major ul li:hover a::before {bottom: auto; height: 100px; opacity: 1; background-size: 100%;}
	.major ul li:hover a::before {right: 22px;}
	.major ul li:hover a span {line-height: 1.2; color: var(--point-color); font-size: 14px;}

	.major ul li.mj01 a::before {background-image: url(../images/ico/ico_main_major01_m.png);}
	.major ul li.mj02 a::before {background-image: url(../images/ico/ico_main_major02_m.png);}
	.major ul li.mj03 a::before {background-image: url(../images/ico/ico_main_major03_m.png);}
	.major ul li.mj04 a::before {background-image: url(../images/ico/ico_main_major04_m.png);}
	.major ul li.mj05 a::before {background-image: url(../images/ico/ico_main_major05_m.png);}

	.major-slide .swiper-slide {padding: 54px 24px 24px; max-height: 90vh;}
	.major-slide .swiper-slide .imgbox {width: 100%; border-radius: 8px;}
	.major-slide .swiper-slide .dot-list {margin-left: -8px; word-break: keep-all;}
	.major-slide .txtbox p {margin-bottom: 16px;}
	.major-slide .go-btn {top: 20px; left: 50px; margin-left: 0; font-size: 12px;}
	.major-slide .go-btn li button {width: 20px;}
	.major-slide .go-btn li.slick-active button {width: 27px;}
	.major-slide .go-btn li button::before {width: calc(100% - 4px);}
	#major-pop .major-slide .pop-close {top: 20px; right: 50px; width: 16px; height: 16px; background-size: 100%;}	
	.major-slide .swiper-button-prev {display: none !important; left: 28px; width: 20px;}
	.major-slide .swiper-button-next {display: none !important; right: 28px; width: 20px;}

	.major .big-decotxt {width: 310px; height: 186px; margin: 113px auto 0 auto; background-image: url(../images/pic/pic_main_major_decotxt_m.png); background-size: 100%;}

	.case {padding-top: 120px;}
	.case .logo-flow::before, .case .logo-flow::after {width: 100px; height: 42px;}
	.case .logo-flow::before {background: linear-gradient(90deg, #010415 0%, rgba(1, 4, 21, 0.00) 103%);}
	.case .logo-flow::after {background: linear-gradient(270deg, #010415 0%, rgba(1, 4, 21, 0.00) 103%);}
	.case .logo-flow li {width: 105px; height: 42px;}
	
	.history {position: relative;}
	.history::after {content:''; position: absolute; z-index: 1; bottom: 80px; left: 24px; width: calc(100% - 48px); height: 80px; background: linear-gradient(180deg, rgba(1, 4, 21, 0.2) 0%, #010415 100%);}
	.history .cm-title {margin-bottom: 36px;}
	.history .his-wrap {width: calc(100% - 48px); padding: 33px 0 32px 32px; border-radius: 24px;}
	.history .his-wrap li + li {margin-left: 24px;}
	.history .his-wrap li p {font-size: 14px; padding: 6px 16px;}

	.history .year-slide {margin-top: 35px; left: 24px; width: calc(100% - 48px); height: 380px; overflow-y: scroll; overflow-x: hidden;}
	.history .year-slide ul {flex-direction: column; width: 100%; height: auto; padding-left: 44px;}
	.history .year-slide > ul > li {padding-right: 0; padding-bottom: 48px;}
	.history .year-slide strong {font-size: 24px;}
	.history .year-slide ol {margin-top: 20px;}
	.history .year-slide .fir-slide ol::before {left: -44px;}
	.history .year-slide ol::before {left: -44px; top: -48px; width: 27px; height: 27px;}
	.history .year-slide > ul > li::before {left: -31px; top: 9px; width: 1px; height: 100%; border-left: 1px dashed #fff; border-top: 0;}
	.history .year-slide ol li {flex-direction: column; gap: 4px; font-size: 13px;}
	.history .year-slide ol li span {font-size: 13px;}

	.contact {padding: 0 24px 251px; background: url(../images/bg/bg_contact01_m.jpg) no-repeat bottom center/100%;}
	.contact > div {border-radius: 24px; padding: 60px 43px;}
	.contact > div strong {font-size: 16px; line-height: 1.3;}
	.contact > div h3 {margin-top: 8px; font-size: 28px; line-height: 1.4;}
	.contact > div p {font-size: 16px; margin: 24px 0 40px; line-height: 1.5; letter-spacing: -0.7px;}
	.contact > div > div {flex-direction: column; gap: 8px;}
	.contact > div > div a {width: 100%; height: 46px; font-size: 16px;}
	
	/* sub */
	main.subpage {padding-top: 128px; padding-bottom: 100px; min-height: auto;}
	.sub-title {margin-bottom: 44px;}
	.sub-title h3 {margin-bottom: 8px; font-size: 36px;}
	.sub-title h4 {font-size: 15px; line-height: 1.5;}

	.subpage.board-document {padding-top: 64px; padding-bottom: 64px;}
	.subpage.board-document .sub-title {display: none;}

	.product-top {margin-top: 60px;}

	.gray-info-box.download {height: 92px; padding-left: 26px; background-position: right 26px center; background-size: 40px;}
	.gray-info-box strong {font-size: 18px;}

	.product-top .product-video {flex-direction: column; align-items: flex-start; padding: 60px 0; gap: 36px}
	.product-top .product-video .youtube {order: 1; width: 100%;}
	.product-top .product-video .info {order: 0;}
	.product-top .product-video .youtube .thumb:after {width: 50px; height: 50px; background-size: 100%;}

	.board-title {margin-top: 83px; margin-bottom: 30px; font-size: 24px;}

	.case-studies {margin-top: 60px; padding-bottom: 0;}
	.basic_list .news-head {overflow-x: scroll;}
	.basic_list .news-head .tab {width: 411px;}

	.board-wrap.iqnuiry {margin-top: 60px;}
	.iqnuiry .gray-info-box {align-items: flex-start; gap: 16px;}
	.iqnuiry .gray-info-box .btns {align-items: flex-start; flex-direction: column; gap: 8px;}
	.iqnuiry .gray-info-box .btns a {height: 40px; font-size: 16px; line-height: 40px; background-size: 40px; padding-left: 52px;}

	#wrap-ask {margin-top: 60px;}
	#wrap-ask .kboard-attr-row .contact-title {font-size: 18px; padding-bottom: 16px;}
	#wrap-ask .kboard-attr-row {flex-direction: column; gap: 4px;}
	#wrap-ask .kboard-attr-row .attr-name {width: 100%; font-size: 14px; font-weight: 500; line-height: 1.4;}
	#wrap-ask .kboard-attr-row input[type="text"], 
	#wrap-ask .kboard-attr-row input[type="email"] { font-size: 14px; width: 100%; height: 44px; padding: 0;}

	#wrap-ask .kboard-attr-row input[type="text"]::placeholder, 
	#wrap-ask .kboard-attr-row input[type="tel"]::placeholder, 
	#wrap-ask .kboard-attr-row input[type="email"]::placeholder,
	#wrap-ask .kboard-attr-row textarea::placeholder {font-size: 14px; color: #aaa;}

	#wrap-ask .kboard-attr-row .input-tel {font-size: 16px; line-height: 1.4;}
	#wrap-ask .kboard-attr-row.meta-key-tel .attr-value {display: none;}
	#wrap-ask .kboard-attr-row input[type="tel"] {text-align: center; width: calc(33.33% - 15px);}

	#wrap-ask .kboard-attr-row textarea {height: 172px; font-size: 14px; padding: 12px 0;}
	.kboard-attr-checkbox .attr-value {flex-direction: column; gap: 10px; padding: 12px 0;}
	.kboard-attr-checkbox .attr-value .inp_chk {width: 100%; padding: 0 0 0 28px; font-size: 14px;}
	.inp_chk input[type="checkbox"] + i {top: 2px; width: 20px; height: 20px; background-size: 100%;}

	#wrap-ask .meta-key-agree {margin-top: 60px;}
	#wrap-ask .kboard-attr-row.meta-key-agree_policy {padding-top: 16px; padding-bottom: 24px;}
	#wrap-ask .kboard-attr-row.meta-key-agree_policy .attr-value {padding: 8px 0 0 0;}
	.policy_con {font-size: 13px; margin-top: 8px;}

	#wrap-ask .kboard-attr-row.meta-key-agree_marketing {padding: 24px 0;}
	#wrap-ask .kboard-attr-row.meta-key-agree_marketing .attr-value {padding-top: 6px; padding-bottom: 0;}
	#wrap-ask .ask-btn {margin-top: 50px;}
	#wrap-ask .ask-btn button {width: 100%; font-size: 14px;}
}

@media all and (max-width:640px) {
}

@media all and (max-width:480px) {
}

@media all and (max-width:374px) {

	.visual p {font-size: 20px;}
}