section {position:relative; padding:5rem 0;}
section:after {content:''; display:block; width:100%; clear:both;}

@media screen and ( max-width:1200px ) {
  section { padding:3.75rem 0;}

}

.title_wrap {position:relative; margin-bottom:1.5rem; }
.title_wrap h2 {font-size:1.55rem; line-height:1.3em; font-weight:600; color:var(--color-sub); }
.title_wrap.flex {display:flex;  justify-content: space-between; align-items: flex-end;}
.title_wrap p {font-size:1.05rem; line-height:1.3em; font-weight:300; color:#616267;margin-top:.5rem;}
.main .title_wrap h2 {font-size:1.5rem;  }
.main .title_wrap p {font-size:1.25rem; }

.title_wrap .more {font-size:.9rem; color:#666; letter-spacing:0}
.title_wrap .more:after {content:''; display:inline-block; vertical-align:middle; margin-left:.2rem; width:1.5rem; height:.7rem; background-repeat:no-repeat; background-position:center ; background-size:auto 100;
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Cursor_icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 37.5' style='enable-background:new 0 0 50 37.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23555555;%7D%0A%3C/style%3E%3Cpath class='st0' d='M32.6,1.7c-0.8-0.8-2.1-0.8-2.9,0c-0.8,0.8-0.8,2.1,0,2.9l12.1,12.1H3.3c-1.1,0-2.1,0.9-2.1,2.1 s0.9,2.1,2.1,2.1h38.5L29.7,32.9c-0.8,0.8-0.8,2.1,0,2.9c0.4,0.4,0.9,0.6,1.5,0.6c0.5,0,1.1-0.2,1.5-0.6l15.6-15.6 c0.8-0.8,0.8-2.1,0-2.9L32.6,1.7z'/%3E%3C/svg%3E%0A"); display:none;
}
.btn_wrap.end {display:block; position:relative;padding-right:1rem; padding-top:1rem; text-align:right;}
.btn_wrap.end .more{display:inline-block; font-size:.9rem; color:var(--color-blue); text-decoration:underline; letter-spacing:0; cursor:pointer; }



@media screen and ( max-width:1024px ) {
	.title_wrap {margin-bottom:1rem;}
	.title_wrap h2 {font-size:1.15rem;  }
	.title_wrap p {font-size:.9rem;}
	.main .title_wrap h2 {font-size:1.15rem;  }
	.main .title_wrap p {font-size:.9rem;}
	.title_wrap h2 {font-size:1.25rem; }
    .title_wrap p {font-size:.85rem; margin-top:.25rem;}

	.title_wrap .more {font-size:.75rem; line-height:1.3em;}
	.title_wrap .more:after { width:1.1rem; height:.5rem;}
}



/* swiper */
.main-visual { position: relative;   height:400px; width:100%; overflow: hidden; }
.main-visual .swiper-slide { width: 100%; position: relative;  display: flex; align-items: center; }

.swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px,0,0);}
.swiper-wrapper {position: relative; width: 100%; height:100%;   z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; /*transition-timing-function: linear;*/}
.swiper-slide { flex-shrink: 0; width: 100%;  height:100%;  text-align:center; position: relative; transition-property: transform; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.swiper-slide.n01 { background-image:url('/images/main/visual01.jpg'); }
.swiper-slide.n02 { background-image:url('/images/main/visual02.jpg'); }
.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity;}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto;}


.visual-copy {position: relative; width: 1200px; padding:0 1rem; margin:-2rem auto 0; text-align: left; display:flex; justify-content: center;  flex-direction: column;  z-index: 10;  }
.visual-copy .copy1,
.visual-copy .exp {transition:all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);opacity: 0;font-family: 'Roboto'; }

.visual-copy .copy1 {transform: translateY(20px); transition-delay: .4s; }
.visual-copy .exp {transform: translateY(20px); transition-delay: .2s; }
.visual-copy strong {font-weight:700 !important; }


.visual-copy .copy1 { display:block; color:#0b3f9f; font-size:2rem; line-height:1.6em; font-weight:600;  }
.visual-copy .exp { display:block; color:#0b3f9f; font-size:1.75rem; line-height:1.6em; font-weight:300;  }
.visual-copy strong {font-weight:700;}

.swiper-slide.n02 .copy1,
.swiper-slide.n02 .exp {color:#fff;}

.main-visual .swiper-slide.swiper-slide-active .visual-copy .copy1 {transform: translateY(0px); opacity:1;}
.main-visual .swiper-slide.swiper-slide-active .visual-copy .exp{transform: translateY(0px); opacity:1;}

.visual-swiper-control {  position: absolute;  left: 50%;  margin-left: -570px;  bottom: 2.5rem;  color: #fff;  display: flex;  align-items: center;  z-index: 100; }
.visual-progressbar {  width: 80px;  height: 3px;  position: relative;  background-color: rgba(255, 255, 255, 0.5);  transition: .3s opacity;  text-align: center;  position: relative;  overflow: hidden;  margin: 0 14px;}
.visual-progressbar .bar {  display: block;  content: '';  background-color: var(--color-red);  position: absolute;  left: 0;  top: 0;  width: 0;  height: 100%;}
.visual-progressbar.play .bar {  animation: barMotion 5s forwards linear;}

.visual-swiper-paging.swiper-pagination-progressbar {  width: 80px;  height: 3px;  position: relative;  background-color: rgba(255, 255, 255, 0.3);  transition: .3s opacity;  text-align: center;  position: relative;  overflow: hidden;  margin: 0 0px;}
.visual-swiper-paging.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {  background-color: #fff;  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  transform: scale(0);  transform-origin: left top;}
.visual-swiper-control .swiper-pagination { display: flex; align-items: center; margin-right: .65rem; font-size: 18px;  color: #fff;  font-weight: 700;}

.visual-swiper-control .swiper-pagination .current-page,
.visual-swiper-control .swiper-pagination .total-page {  width: 24px; font-size:1rem; color:#fff; text-align: center;}
.visual-swiper-control .swiper-pagination .current-page {color:var(--color-red); font-weight:bold;}

/* dot로 표시할때 */
.visual-swiper-control .swiper-pagination-bullet {  width: 3.5rem;  height: 4px;  background: #FFF; margin-right:.5rem;  opacity: 0.7;  transition: background 0.3s;}
.visual-swiper-control .swiper-pagination-bullet-active {  background: var(--color-main);  opacity: 1;}

.visual-swiper-control .btn-swiper-prev,
.visual-swiper-control .btn-swiper-next,
.visual-swiper-control .btn-swiper-stop {  width: 20px;  height: 20px;  text-align: left; font-size:0; overflow: hidden;  margin: -3px 5px 0; background-color:transparent; border:0px solid #fff; outline:0;cursor:pointer; }

.visual-swiper-control button:before {content:""; display:inline-block; vertical-align:top; font-size:1rem; color:#333; font-family:'xeicon';}
.visual-swiper-control .btn-swiper-prev:before {content:"\e93b";}
.visual-swiper-control .btn-swiper-next:before {content:"\e93e";}


.visual-swiper-control .btn-swiper-stop::after { content: "\ea3b"; font-size:1.25rem;line-height:20px; color:#fff; font-family:'xeicon';/* 일시정지 아이콘 */}
.visual-swiper-control .btn-swiper-stop.on::after { content:"\ea3e"; color:var(--color-red); /* 재생 아이콘 */}

@keyframes barMotion {
  0% { width: 0; }
  100% { width: 100%; }
}

@media screen and ( max-width:1200px ) {
	.visual-copy {position: relative; width: 100%; }
	.visual-swiper-control {margin:0; left:0; width:100%;}
	
}

@keyframes ani_ico {
    0% {
    	transform:translateY(0px);
    	-webkit-transform:translateY(0px);
    	-ms-transform:translateY(0px);
    	-moz-transform:translateY(0px);
    }
    50% {
    	transform:translateY(-15px);
    	-webkit-transform:translateY(-15px);
    	-ms-transform:translateY(-15px);
    	-moz-transform:translateY(-15px);
    }
}
@media screen and ( max-width:900px ) {
	.main-visual {height:300px;}
    .visual-copy {margin-top:-5rem !important; }
	.visual-copy .copy1 { font-size:1.5rem; line-height:1.5em; }
	.visual-copy .exp { font-size:1.05rem; line-height:1.5em; font-weight:400; }

}


/* main search */
.main_search {position:relative; clear:both; width:100%; z-index:33; background-color:#f2f4f6; padding-bottom:5rem; border-top:1px solid transparent;}
.main_search .search_wrap {margin-top:-4.5rem; padding:2rem 2.5rem; background-color:#fff; border-radius:.85rem; box-shadow:.25rem .25rem 1rem rgba(0,0,0,0.1); display:flex; gap:6px; font-size:0; flex-wrap: wrap;}
.main_search .btn {width:calc(50% - 4px); height:2.65rem; margin:0; display:flex; align-items: center; border-radius:0; padding:0 1rem; border: 1px solid #ebedf2; color:var(--color-sub);font-size:1rem; cursor: pointer; background: #f5f6f9; 
background-size:auto .75rem; text-transform:uppercase; background-repeat:no-repeat; background-position:calc(100% - .9rem) ; 
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Cursor_icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 37.5' style='enable-background:new 0 0 50 37.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23A6A8AB;%7D%0A%3C/style%3E%3Cpath class='st0' d='M32.6,1.7c-0.8-0.8-2.1-0.8-2.9,0c-0.8,0.8-0.8,2.1,0,2.9l12.1,12.1H3.3c-1.1,0-2.1,0.9-2.1,2.1 s0.9,2.1,2.1,2.1h38.5L29.7,32.9c-0.8,0.8-0.8,2.1,0,2.9c0.4,0.4,0.9,0.6,1.5,0.6c0.5,0,1.1-0.2,1.5-0.6l15.6-15.6 c0.8-0.8,0.8-2.1,0-2.9L32.6,1.7z'/%3E%3C/svg%3E%0A");
}

.main_search .btn.result { background-color:#162a41; border-color:#162a41;color:#fff;  justify-content: center;text-transform:capitalize;
background-image:none;
}
.main_search .btn.result:after {content:''; display:inline-flex; margin-left:.5rem; width:1.5rem; height:1rem; background-repeat:no-repeat; background-position:center center; background-size:auto .75rem; 
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Cursor_icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 37.5' style='enable-background:new 0 0 50 37.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M32.6,1.7c-0.8-0.8-2.1-0.8-2.9,0c-0.8,0.8-0.8,2.1,0,2.9l12.1,12.1H3.3c-1.1,0-2.1,0.9-2.1,2.1 s0.9,2.1,2.1,2.1h38.5L29.7,32.9c-0.8,0.8-0.8,2.1,0,2.9c0.4,0.4,0.9,0.6,1.5,0.6c0.5,0,1.1-0.2,1.5-0.6l15.6-15.6 c0.8-0.8,0.8-2.1,0-2.9L32.6,1.7z'/%3E%3C/svg%3E%0A");
}
.main_search .btn.result b {color:var(--color-main);margin-right:.2rem; font-weight:700;}
.dropdown { position: relative; display:inline-flex;width: calc(25% - 5px); }
.dropdown-toggle {width: 100%;  height:2.65rem; display:flex; align-items: center; padding:0 1rem; border: 1px solid #ebedf2; font-size:1rem; cursor: pointer; background: #f5f6f9 url('/images/arrow_down.svg') no-repeat 95% ; background-size:auto .75rem; text-transform:uppercase; }
.dropdown-toggle.selected {color:var(--color-dark-blue); font-weight:600;}
.dropdown-menu { position: absolute; top: 100%; left: 0; width: 100%; border: 1px solid #ebedf2;border-top:0; background:#fff; max-height: 250px; overflow-y: auto; display: none; z-index: 10; }
.dropdown.show .dropdown-menu { display: block; }
.dropdown-search {padding: 10px;border-bottom: 1px solid #ddd;}
.dropdown-search input {width: 100%; padding: 8px;border: 1px solid #aaa; color:var(--color-sub)}
.dropdown-search input:focus {border-color:var(--color-sub)}
.dropdown-option {padding: 10px;cursor: pointer; color:#868d99; font-size:.9rem; }
.dropdown-option:hover {background-color: #eef1f8; color:var(--color-sub) }
.dropdown-search input::placeholder {font-size:.85rem;}

.search_make {padding-top:2.5rem;}
.search_make ul {position:relative; display:flex;  flex-wrap: wrap; gap:1.5rem 0; height:225px; overflow:hidden;}
.search_make ul.expanded {height:auto !important;overflow:visible}
.search_make ul li {width:12.5%; display:flex; justify-content: center;}
.search_make ul li a {width:80%;height:100px; border-radius:.5rem; background-color:#fff; border:1px solid #d9dde4; display:flex;  justify-content: center; align-items: center;flex-direction: column;}
.search_make ul li a:hover {border-color:var(--color-sub); box-shadow:5px 5px 15px rgba(0,0,0,0.1)}
.search_make ul li a img {height:2.2rem;}
.search_make ul li a p {font-size:.8rem; color:#717274; text-align:center; }

@media screen and ( max-width:1200px ) {
  .search_make ul li a {width:90%;height:90px;}
}

@media screen and ( max-width:1024px ) {
  .main_search {padding:0 0 3rem}
  .main_search .search_wrap {padding:1.2rem 1rem; border-radius:.5rem;} 
  .dropdown { width: calc(50% - 4px); }
  .dropdown-toggle,
  .main_search .btn {font-size:.9rem; padding:0 .5rem;}
  .dropdown-toggle {background-size:auto .65rem; }
  .main_search .btn {background-position:calc(100% - .5rem); background-size:auto .65rem;}
  .main_search .btn.result:after { background-size:auto .65rem; }

  .search_make ul {gap:.65rem 0; height:190px; margin-left:-.35rem; margin-right:-.35rem;}
  .search_make ul li {width:25%;}
  .search_make ul li a {width:100%;height:auto;border-radius:0; background-color:transparent; border:0;  }
  .search_make ul li a:hover { box-shadow:none}

}
@media screen and ( max-width:500px ) {
	.main_search .btn {width:100%;}
	.search_make ul {  height:185px; }
	.search_make ul li a p {font-size:.75rem;}
}

@media screen and ( max-width:360px ) {
	 .dropdown {width:100%;}
	 .main_search .btn {background-position:calc(100% - 1rem); }
}


/* how to buy */
.howtobuy { background-color:#f2f4f6; border:0; padding:5rem 0;}
.howtobuy.sub {  border:5px solid #f2f4f6; padding:2.5rem 0;}
.howtobuy .title_wrap {text-align:center;}
.howtobuy .title_wrap h2 {font-size:1.85rem; color:#111;}
.howtobuy .title_wrap p {font-size:1.25em; font-weight:300}
.howtobuy .items {display:flex;}
.howtobuy .items li {position:relative; width:25%; display:flex; flex-direction: column; align-content: center; justify-content: center; text-align:center;}
.howtobuy .items li:before {content:''; position:absolute; left:-25px;top:50%; margin-top:-2rem; width:50px; height:4rem; background:url('/images/arrow_proc.svg') no-repeat center ; background-size:auto; opacity:.7;}
.howtobuy .items li:nth-child(1):before {display:none;}
.howtobuy .items li img {height:4.5rem; display:inline-flex }
.howtobuy .items li dt {font-size:1.25rem; line-height:1.3em;font-weight:600; color:#111;}
.howtobuy .items li dd {font-size:.85rem; font-weight:400; line-height:1.3em; color:#808287;margin-top:.65rem; }
.howtobuy .trans {margin-top:4rem; background-color:#fff; padding:2.5rem 2rem; display:flex; }
.howtobuy .trans li {width:33.3%; display:flex; flex-direction: column; align-content: center;text-align:center; border-left:1px solid #e6eaed;}
.howtobuy .trans li:nth-child(1) {border:0;}
.howtobuy .trans li strong {font-size:2.25rem; line-height:1.5em; color:#111;}
.howtobuy .trans li p {font-size:1.125rem;font-weight:500; color:#111; margin-top:.5rem;}

@media screen and ( max-width:1024px ) {
.howtobuy.sub { padding:3.75rem 0;}
.howtobuy { padding:2rem 0;}
.howtobuy .title_wrap h2 {font-size:1.45rem;}
.howtobuy .title_wrap p {font-size:.95em;}

.howtobuy .items {flex-wrap: wrap; gap:1rem 0; padding:0 .85rem;}
.howtobuy .items li {width:50%;}
.howtobuy .items li:before { left:-15px; margin-top:-1.5rem; width:30px; height:3rem; }

.howtobuy .items li img {height:2.5rem;}
.howtobuy .items li dd {margin-top:.2rem; padding:0 .5rem; display:none;}
.howtobuy .items li dd br {display:none;}
.howtobuy .trans {margin-top:2.5rem; padding:1.5rem .5rem; }
.howtobuy .trans li strong {font-size:1.35rem;}
.howtobuy .trans li p {font-size:.9rem;}

}
@media screen and ( max-width:400px ) {
.howtobuy.sub { padding:1.5rem 0;}
.howtobuy .items li:before { left:-10px; margin-top:-1.5rem; width:20px; height:3rem; }
.howtobuy .items li dt {font-size:1rem; }
.howtobuy .trans li strong {font-size:1.1rem;}

}


/* review */
.reviews ul {font-size:0;}
.reviews ul li {display:inline-block; vertical-align:top; min-height:260px;  margin:0 10px; width:31.5%; border:1px solid #e8e9ea; border-radius:.5rem;overflow:hidden; }
.reviews ul li .title {display:flex; padding:1rem 1.3rem; border-bottom:1px solid #e8e9ea; justify-content: space-between; }
.reviews ul li .title strong {font-size:1rem; color:#111; font-weight:600; width:calc(100% - 90px)}
.reviews ul li .title .date {font-size:.9rem; color:#666; width:90px; text-align:right;}
.reviews ul li .text { display:block; height:100%; padding:1rem 1.3rem 1.2rem; font-size:.925rem; line-height:1.4em; color:#76787f; /*overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;*/}
.reviews ul li .text figure {float:right; width:90px; height:68px;overflow:hidden;margin-left:.5rem; }
.reviews ul li .text figure img {display:inline-block; width:100%; }

@media screen and ( max-width:900px ) {
.reviews ul li .text {padding:1rem 1rem 1.2rem; font-size:.9rem;    }

}


/* slick */
.slick-prev {position: absolute; top:50%; margin-top:-25px;  left:-25px; width:40px; height:40px; border-radius:50%;  background-color:rgba(0,0,0,0.2); font-size:0; z-index:33}
.slick-prev:after {content: '\e93d'; font-size:20px; color:#fff;}
.slick-next {position: absolute; top:50%; margin-top:-25px; right:-25px; width:40px; height:40px; border-radius:50%; background-color:rgba(0,0,0,0.2); font-size:0; z-index:33}
.slick-next:after {content: '\e940'; font-size:20px; color:#fff;}
.slick-prev:hover:after,
.slick-next:hover:after{opacity:1;}

.slick-dots { display:block; text-align:center; margin:0; padding:0; margin-top:1rem;}
.slick-dots>li {display: inline-block;vertical-align: top; border:1px !important;min-height:.9rem !important; width: .9rem !important;height:.9rem !important;margin: 0 5px !important; padding:0 !important; background-color:#d2d7db; border-radius: 3rem !important;cursor: pointer;-webkit-transition: all 400ms;transition: all 400ms;}
.slick-dots>li:before,
.slick-dots>li:after{display:none !important; }
.slick-dots>li.slick-active {background:var(--color-main) !important; }
.slick-dots>li>button {text-indent:-9999px; display:none !important;}


@media screen and ( max-width:1024px ) {
.mc1_list .slick-list, .mc2_list .slick-list {overflow: visible;margin:0 3px 10px }
.mc3_list .slick-list{overflow: visible;margin:0 3px 10px }
.mc1_list li, .mc2_list li {margin:0 3px 10px;  }
.mc3_list li {margin:0 3px 10px;  }
.carlist li {margin:0 5px 1rem !important;}
.reviews ul li {margin:0 5px 1rem !important;}
.recommend ul li {margin:0 5px 1rem !important;}
}