@charset "utf-8";

/* CSS Document */
/* 커스텀이 필요한 클래스에 스타일을 추가해주세요. */

/* ==================================================
                    제목
================================================== */

body{font-family: "Pretendard Variable", Pretendard, sans-serif, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; letter-spacing: -.1px; color:#111}
h1, .h1 { font-size: 64px; font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 800 }
h2, .h2 { font-size: 60px; font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 800 }
h3, .h3 { font-size: 46px; font-family: "Pretendard Variable", Pretendard, sans-serif; }
h4, .h4 { font-size: 24px; font-family: "Pretendard Variable", Pretendard, sans-serif; }
h5, .h5 { font-size: 20px; font-family: "Pretendard Variable", Pretendard, sans-serif; }
h6, .h6 { font-size: 18px; font-family: "Pretendard Variable", Pretendard, sans-serif; }
p{font-family: "Pretendard Variable", Pretendard, sans-serif;}
.thin{font-weight: 400}




/* ==================================================
                    button 버튼
================================================== */


.btn {

}
.btn-default {

}
.btn-primary{

}
.btn-success{

}
.btn-info{

}
.btn-warning{

}
.btn-danger{

}
.btn-link{

}
.btn-cancel{
    color: #fff;
    background-color: #444949 ;
    border-color: #444949;
}
.btn-search{
    color: #fff;
    background-color: #444949;
    border-color: #444949;
}
.btn-submit{
    color: #fff !important;
    background-color: rgba(0,0,0,0.8) !important;
    border-color: rgba(0,0,0,0.8) !important;;
    height: 38px;
}
.btn.cancel{
    background:rgba(0,0,0,0.6);
    height: 38px;
    color: #fff;
}
.btn.intable{
    color: #fff;
    background:rgba(0,0,0,0.4) !important;
    min-width:80px;
    height: 38px;
}
/* .btn 모션 관련 */

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus{
    outline : none;
    box-shadow : none;
    outline-offset : 0;
}
.btn:hover,
.btn:focus,
.btn.focus,
.btn:active,
.btn.active{

}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {

}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary{

}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success{

}
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {

}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {

}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger{

}
.btn-link:hover,
.btn-link:focus,
.btn-link.focus,
.btn-link:active,
.btn-link.active,
.open > .dropdown-toggle.btn-link{

}

.btn-submit:hover{
    color: #fff;
    background-color: rgba(0,0,0,1) !important;
    border-color: rgba(0,0,0,1) !important;;
}
.intable:hover{
    background:rgba(0,0,0,0.6) !important;
    color:#fff !important;
    box-shadow:rgba(0,0,0,0.3) 1px  1px 5px;
}

/* .btn 크기 */

.btn-lg, .btn-group-lg > .btn {

}
.btn-sm, .btn-group-sm > .btn{

}
.btn-xs, .btn-group-xs > .btn {

}

/* btn-group 그룹 관련 */

.btn-group > .btn,
.btn-group-vertical > .btn {

}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 4px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {

}
.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {

}

.btn-group-vertical > .btn:first-child:not(:last-child) {

}
.btn-group-vertical > .btn:last-child:not(:first-child) {

}



/* ==================================================
                    Label 라벨
================================================== */

.label, a.label {
    color: #000;
    display: inline-block;
    padding: 0.4em 0.6em;
}
.label-default, a.label-default {
    color: #fff;
}
.label-primary, a.label-primary{
    color: #fff;
}
.label-success, a.label-success{
    color: #fff;
}
.label-info, a.label-info{
    color: #fff;
}
.label-warning, a.label-warning{
    color: #fff;
}
.label-danger, a.label-danger{
    color: #fff;
}

p.label-wrap,
h1.label-wrap,
h2.label-wrap,
h3.label-wrap,
h4.label-wrap,
h5.label-wrap,
h6.label-wrap {
    width: 100%;
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
}

a.label:hover, a.label:focus {
    color: #000;
}
.label-default[href]:focus,.label-default[href]:hover {
    color: #fff;
}
.label-primary[href]:focus,.label-primary[href]:hover {
    color: #fff;
}
.label-success[href]:focus,.label-success[href]:hover {
    color: #fff;
}
.label-info[href]:focus,.label-info[href]:hover {
    color: #fff;
}
.label-warning[href]:focus,.label-warning[href]:hover {
    color: #fff;
}
.label-danger[href]:focus,.label-danger[href]:hover {
    color: #fff;

}

/* ==================================================
                    Alert 얼럿
================================================== */

.alert{

}

.alert h4 {

}
.alert .alert-link {

}

.alert > p,
.alert > ul {

}
.alert > p + p {

}

.alert-dismissable,
.alert-dismissible {

}
.alert-dismissable .close,
.alert-dismissible .close {

}

.alert-success {

}
.alert-success hr {

}
.alert-success .alert-link {

}

.alert-info {

}
.alert-info hr {

}
.alert-info .alert-link {

}

.alert-warning {
}
.alert-warning hr {
}
.alert-warning .alert-link {

}

.alert-danger {
}
.alert-danger hr {
}
.alert-danger .alert-link {

}



/* ==================================================
                example-area
================================================== */


li code,
p code {
    color: red;
}

.example-area + .example-area { margin-top: 30px;}
.example-tit { margin-bottom: 10px;}
.example-desc { margin-bottom: 10px;}
.example-desc > p { position: relative; padding-left: 12px; }
.example-desc > p::before { content: ''; display: block; clear: both; width: 4px; height: 4px; background: #000; position: absolute; top: 50%; left: 0; margin-top: -2px;}
.example-markup { margin-bottom: 10px;}
.example-box { margin-right: 0;  margin-left: 0;  border: 1px solid #ddd;  position: relative;  padding: 15px;  border-radius: 4px;}
.example-box .box-tit { margin-bottom: 15px; font-size: 12px;  font-weight: 700;  color: #959595;  text-transform: uppercase;  letter-spacing: 1px; }
.example-box .box-con > p { margin-bottom: 10px; }


* { margin: 0; padding: 0; }


/* full page 스크롤 X
.fp-is-overflow .fp-overflow.fp-auto-height-responsive,
.fp-is-overflow .fp-overflow.fp-auto-height,
.fp-is-overflow > .fp-overflow {
    overflow-y: unset !important;
}*/




/* ==================================================
                        메인
================================================== */


#main{}
/*.container{height:100vh}*/
.tit-area h2{margin-bottom: 20px}
.flex{display: flex;}
.grid {display: grid}
.clear:after{clear: both; content: ''; display: block;}
.mo{display: none}
.pc{display: block;}
.container:before{display: none }

/* 메인 헤더 투명 */
.fp-viewing-01 #header .header-body,
.fp-viewing-03 #header .header-body,
.fp-viewing-05 #header .header-body{ transition: ease all 300ms;  background: transparent; width: 100%; color:#fff; border-bottom: 1px solid #ffffff24; box-shadow: none}

.fp-viewing-01 #header .header-body .header-inner { }
.fp-viewing-01 #header .header-body .logoImg_w,
.fp-viewing-03 #header .header-body .logoImg_w,
.fp-viewing-05 #header .header-body .logoImg_w{display: block;}

.fp-viewing-01 #header:hover .header-body .logoImg_w,
.fp-viewing-03 #header:hover .header-body .logoImg_w,
.fp-viewing-05 #header:hover .header-body .logoImg_w{display: none}

.fp-viewing-01 #header:hover .header-body .logoImg,
.fp-viewing-03 #header:hover .header-body .logoImg,
.fp-viewing-05 #header:hover .header-body .logoImg{display: block;}

.fp-viewing-01 #header .header-body .logoImg,
.fp-viewing-03 #header .header-body .logoImg,
.fp-viewing-05 #header .header-body .logoImg{display: none;}

.fp-viewing-01 #header:hover .header-body,
.fp-viewing-03 #header:hover .header-body,
.fp-viewing-05 #header:hover .header-body{ background: #fff; width: 100%; color:#111;}

.fp-viewing-02 #header .header-body .logoImg_w,
.fp-viewing-04 #header .header-body .logoImg_w,
.fp-viewing-06 #header .header-body .logoImg_w{display: none;}


.container{/*padding-top: 130px*/}
.btn_red { display: block; width: 280px; height: 70px; color: #fff !important; background: #cc0606; border-radius: 100px; text-align: center; line-height: 70px; font-weight: 600; font-size: 18px; margin: 0 auto; margin-top: 1em; cursor: pointer; }
.section{display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; touch-action: none;     overflow: hidden;}




label{margin: 0 !important}
#main #section1 .fp-overflow{display: block !important;}
#main #section1 .main_visual .main-swiper .swiper-slide{/*height: 100vh;*/ background-size: cover; font-family: 'pretendard', sans-serif;}
#main #section1 .main_visual .main-swiper .swiper-slide .img-box{position:relative; }
#main #section1 .main_visual .main-swiper .swiper-slide .img-box img{height: inherit; ; position: absolute; left: 50%; top: 50%;  transform: translate(-50%, -50%) scale(1.05); transition: 3.5s 0.5s; object-fit: cover; width: 100%; }
#main #section1 .main_visual .txt-box { position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 1440px;max-width:100%;  transform: translate(-50%, -60%); z-index: 10; text-align: left }
#main #section1 .main_visual .swiper-slide .txt-box > h1 { font-family: 'pretendard', sans-serif; color: #fff; line-height: 1.2; word-break: keep-all; transform: translateY(20px); opacity: 0; transition: 1s 0.2s; font-weight: 100 }
#main #section1 .main_visual .swiper-slide .txt-box > h1 > b{ font-weight: 600 }
#main #section1 .main_visual .txt-box > p { color: #cdcdcd; margin-top: 1.6em; font-size: 22px; transform: translateY(20px); opacity: 0; word-break: keep-all; transition: 1s 0.4s; }
#main #section1 .main_visual .swiper-slide-active .txt-box > h1{ transform: translateY(0); opacity: 1; }
#main #section1 .main_visual .swiper-slide-active .txt-box > p {transform: translateY(0); opacity: .8;}
#main #section1 .main_visual .swiper-slide .txt-box.animate-slide > h1 { transform: translateY(0); opacity: 1; transition: transform 1s 0.2s, opacity 1s 0.2s; }
#main #section1 .main_visual .swiper-slide .txt-box.animate-slide > p { transform: translateY(0); opacity: 0.5; transition: transform 1s 0.2s, opacity 1s 0.2s; }
#main #section1 .main_visual .img-box { display: block; width: 100%; height: calc(var(--vh, 1vh) * 100); overflow: hidden; }
#main #section1 .main_visual img{ transform: translate(-50%, -50%) scale(1.05); transition: 3.5s 0.5s; }
#main #section1 .main_visual .swiper-slide-active img{ transform: translate(-50%, -50%) scale(1.0); }

#main #section1 .main_visual .all-box { position: absolute; display: inline-flex; width: 1440px; max-width:100%; height: 55px; left: 50%; top: 50%; box-sizing: border-box; transform: translate(-50%, 350%); z-index: 20; }
#main #section1 .main_visual .progress-box { width: 200px; height: 50px; display: flex; align-items: center; gap:10px }
#main #section1 .main_visual .swiper-pagination span{font-size: 14px}
#main #section1 .autoplay-progress { position: relative; width: 150px; height: 3px; background-color: #fff; }
#main #section1 .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; /*  height: 100%;*/ stroke-width: 6px; stroke: #cc0606; fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100; }
#main #section1 .main_visual .swiper-pagination {    align-items: center; display: flex; color: #fff; justify-content: center; position: static; text-align: left; width: auto; gap: 10px; }
#main #section1 .main_visual .arrow-box { position: relative; width: 140px; height: 55px; }
#main #section1 .main_visual .swiper-button-next, .main_visual .swiper-button-prev { transition: ease all 700ms;  width: 55px; height: 55px; top: 0; margin-top: 0; border: 1px solid #fff; border-radius: 100px; }
#main #section1 .main_visual .swiper-button-next:hover, .main_visual .swiper-button-prev:hover{background-color:#cc0606; border:1px solid #cc0606 }
#main #section1 .swiper-button-next:after{ background: url('../img/arrow-right.png') no-repeat center / 100%;  width: 11px; height: 19px; }
#main #section1 .swiper-button-prev:after{ background: url('../img/arrow-left.png') no-repeat center / 100%;  width: 11px; height: 19px; }
#main #section1 .main_visual .swiper-button-next::after, .main_visual .swiper-button-prev::after { font-size: 0; }

#main #section2{position: relative;}
#main #section2 span.bg{background-image: url('../img/main_02_bg.png');background-size: 100% 100%; background-repeat: no-repeat; height: 770px; animation:spin 20s linear infinite; display: block; position: absolute; left: 0em; bottom:-3em; z-index: 0; width: 770px}
@keyframes spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}
#main #section2 .container {
    padding-top: 3em;
    display: flex;
    align-items: flex-start;
}
#main #section2 .tit-area{}
#main #section2 .cont-area{width: 65%;  grid-template-columns: repeat(3, 1fr); gap:1.5em; display: grid !important; top: 15%}
#main #section2 .cont-area .flexbox:nth-child(1){margin-top:18em}
#main #section2 .cont-area .flexbox:nth-child(2){margin-top:6em}
#main #section2 .cont-area .servicebox{ background: #fff; box-shadow: 0 0 12px #00000014; border-radius: 20px; padding: 3em 2em; text-align: center; margin-bottom: 1.5em ; transition: ease all 300ms;}
#main #section2 .cont-area .servicebox p{opacity: .7}
#main #section2 .cont-area .servicebox p.iconbox { border-radius: 100px; background: #f8f8f8; display: flex; width: 120px; height: 120px; padding: 2em; align-items: center; justify-content: center; margin: 0 auto; opacity: 1}
#main #section2 .cont-area .servicebox p.iconbox img{width: auto; display: block; margin: 0 auto}
#main #section2 .cont-area .servicebox h4{margin: 1em 0 .5em; font-weight: 700;}
#main #section2 .cont-area .servicebox:hover{background: #ce0e0e; color:#fff;box-shadow: 10px 0 22px #00000021 }
#main #section2 .cont-area .servicebox.active{background: #ce0e0e; color:#fff;box-shadow: 10px 0 22px #00000021 }

.fp-viewing-03 #main #section3 .bgwrap .bg{transform: scale(1.0); }
/*#main #section3{text-align: center; background-image: url('../img/main_03_bg.jpg'); background-repeat: no-repeat; background-size: 100% 100%;}*/
#main #section3{position: relative; overflow: hidden; }
#main #section3 .container{max-width: 100%; padding: 0;}
#main #section3 .bgwrap{z-index: 0; position: absolute; width: 100%; height: 100%; left:0; top:0}
#main #section3 .bgwrap .bg{background-image: url('../img/main_03_bg.jpg'); background-repeat: no-repeat; background-size: 100% 100%; display: block; height:calc(var(--vh, 1vh) * 100); transform: scale(1.2); transition: all 10.5s 0.5s;}
#main #section3 .tit-area{color: #fff; text-align: center; margin-bottom: 3em}
#main #section3 .tit-area p{opacity: .6}
#main #section3 .cont-area{position: relative; width: 100%; max-width: 80%; height: 50vh; margin: 0 0 0 auto;}
#main #section3 .cont-area .support_swiper { width: 100%; max-width: 100%; height: 50vh; background-color: #fff; border-radius: 50px 0 0 50px; color:#111; position: relative; overflow: hidden;}
#main #section3 .cont-area .support_swiper .swiper-wrapper{}
#main #section3 .cont-area .support_swiper .swiper-slide{padding:0em 10em 0em 19em; display: flex; align-items: center; justify-content: space-between;}
#main #section3 .cont-area .support_swiper .swiper-slide .txt_cont h3{font-weight: 700; margin-bottom: 20px}
#main #section3 .cont-area .support_swiper .swiper-slide .txt_cont h5 { font-weight: 350; line-height: 1.3; letter-spacing: -0.2px; }
#main #section3 .cont-area .support_swiper .swiper-slide .swiper_img{width: 40%; height: 350px; background-size: contain;; background-repeat: no-repeat;}
#main #section3 .cont-area .swiper-pagination-custom { position: absolute; text-align: center; width: 82px; height: 480px; top: 50%; color: #111; font-size: 20px; left: 0; border-right: 1px solid #ddd; margin: 0; background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 8em; padding-right: 2em; }
#main #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet { height: min-content; background-color: transparent; border-radius: 0; margin: 0 2px; cursor: pointer; width: 80px; display: block; font-weight: 700; padding: 1em 0; }
#main #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet-active { position: relative; }
#main #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet-active:after { background-color: #cc0606; width: 3px; height: 38px; content:''; display: block; position: absolute; right: -2px; top: 17px; }
#main #section3 .cont-area .arrow-box { width: 60px; height: 120px; background: #cc0606; position: absolute; top: 50%; left: -1%; z-index: 10; margin-top: -60px; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#main #section3 .cont-area .arrow-box .swiper-button-prev,
#main #section3 .cont-area .arrow-box .swiper-button-next { position: unset; width: 40px; height: 60px; display: block; top: auto; bottom: auto; margin: 0; }
#main #section3 .cont-area .arrow-box .swiper-button-prev:after{content:''; width: 40px; height: inherit; display: block; font-size: 0; background-image: url('../img/arrow-top.png'); background-repeat: no-repeat; background-position: center}
#main #section3 .cont-area .arrow-box .swiper-button-next:after{content:''; width: 40px; height: inherit; display: block; font-size: 0; background-image: url('../img/arrow-bottom.png'); background-repeat: no-repeat;background-position: center}
#main #section3 .cont-area .arrow-box .swiper-button-prev{border-bottom: 1px solid #ffffff24;}

#main #section4 .fp-overflow{overflow: visible !important;}
#main #section4 .tit-area{position: relative; z-index: 1; text-align: center; margin-bottom: 3em;}
#main #section4 .grid{position: relative; z-index: 1}
#main #section4 .grid ul{display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr}
#main #section4 .grid ul li{transition: ease all 300ms; text-align: center; padding: 3em 0.5em; box-sizing: border-box; box-shadow: 0 0 10px #00000014; border-radius: 10px; background: #fff; position: relative;}
#main #section4 .grid ul li .imgbox{display: flex; align-items: center; justify-content: center; padding :1em; background: #f8f8f8; border-radius: 1000px; width: 80px; height: 80px; margin: 0 auto; margin-bottom: 1em;}
#main #section4 .grid ul li:hover{background: #ce0e0e; color:#fff;}
#main #section4 .leftbg{width: 60%; height: 220px ; background-image: url('../img/yiwu.png'); background-repeat: no-repeat; position: absolute; bottom: 10%; left: 0; z-index: 0; background-size: contain;}
#main #section4 .rightbg{width: 60%; height: 220px ; background-image: url('../img/lines.png'); background-repeat: no-repeat; position: absolute; top: 10%; right: 0; z-index: 0; background-size: contain; background-position: right;}

.fp-viewing-05 #main #section5 .bgwrap .bg{transform: scale(1.0); }
#main #section5{color: #fff; overflow: hidden;}
#main #section5 .bgwrap{z-index: 0; position: absolute; width: 100%; height: calc(var(--vh, 1vh) * 100); left:0; top:0; overflow: hidden;}
#main #section5 .bgwrap .bg{background-image: url('../img/main_05_bg.jpg'); background-repeat: no-repeat; background-size: 100% 100%; display: block; height:calc(var(--vh, 1vh) * 100); transform: scale(1.2); transition: all 10.5s 0.5s;}
#main #section5 .tit-area{text-align: center; margin-bottom: 3em; margin-top: 3em}
#main #section5 .faq_accodian{position: relative;}
#main #section5 .accordion:first-child{border-top: 1px solid #cc0606}
#main #section5 .accordion { position: relative; background-color: transparent; color: #fff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 17px; transition: 0.4s; border-bottom: 1px solid #ffffff2e}
#main #section5 .accordion::before{content: 'Q'; font-weight: 700; font-size: 25px; margin-right: 10px}
#main #section5 .accordion::after { content: ''; background-image: url(../img/btarrow.png); width: 30px; height: 42px;margin-right: 10px; background-repeat: no-repeat; display: block; position: absolute; right: 0; top: 0; transform:translate(50%, 50%);    background-position: center center; }
#main #section5 .active, .accordion:hover {}
#main #section5 .active::after{transform:translate(43%, 50%) rotate(180deg)}
#main #section5 .panel {transition: all 0.2s ease-out; padding: 1em; display: none; background-color: #ffffff17; overflow: hidden; border-radius: 0; min-height: 100px; margin-bottom: 0; align-items: flex-start; }
#main #section5 .panel::before{content: 'A'; font-weight: 700; font-size: 25px; margin-right: 10px; color: #cc0606;    line-height: 1;}


#main #section6 .location{width: 100%; height:calc(var(--vh, 1vh) * 100);}
#main #section6 .location #map{background-image: url('../img/main_map_img.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%}
/*#main #section6 .location #map img { position: absolute; right: 8%; top: 50%; transform: translate(-50%, -50%); }*/
#main #section6 .location .container {
    position: absolute;
    left: 0;
    top: 0em;
    width: 50%;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    transform: translate(-90%, -50%);
    padding-top: 0;
    height: -webkit-fill-available;
    padding: 0
}
#main #section6 .location .tit-area { background: #fff; border-radius: 20px; padding: 3em; background-size: 230px 230px; background-position: bottom right; background-repeat: no-repeat; height: fit-content; }
#main #section6 .location .tit-area p{font-size: 16px; margin-bottom: 3em; color:#444444}
#main #section6 .location .tit-area p b{font-size: 18px; color:#000}
#main #section6 .location .tit-area .contact-area{background: transparent; padding: 0; padding-left: 2em; border-left: 2px solid #cc0606}
#main #section6 .location .tit-area .contact-area .txt{margin-bottom: 3em}
#main #section6 .location .tit-area .contact-area h5{font-weight: 700; margin-bottom: 10px}
#main #section6 .location .tit-area .contact-area p{margin-bottom: 0; color:#444444}



/* ==================================================
                        회사소개
================================================== */

.about{}
.about #section1{ overflow: hidden; color:#fff; background-image: url('../img/about_bg.jpg'); background-size: cover; }
.about #section1 .container{justify-content: space-between; align-items: center; }
.about #section1 h2 span{position:relative; display: inline-block; z-index: 2}
.about #section1 h2 span:before{content:''; width:100%; height:32px; background:#cc0606; left:0; bottom:0; position:absolute; z-index: -1; display: block;}
.about #section1 h4{margin-top: 1.5em; margin-bottom: 3em; font-weight: 400; line-height: 1.5}
.about #section1 p{margin-bottom: 3em; opacity: .6; font-size: 18px}
.about #section1 .left_wrap{width: 60%;}
.about #section1 .right_wrap{width: 40%;}
.about #section1 .right_wrap .img_cont{position:relative;}
.about #section1 .right_wrap .img_cont img{position: absolute; right: 0 ; top: 0; transform: translate(0%, -50%); z-index: 2; width: 100%}
.about #section1 .right_wrap .img_cont img:nth-child(2){z-index: 1; animation:spin 20s linear infinite;    margin-top: -50%; }
@keyframes spin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}
.about #section2{text-align: center; height:calc(var(--vh, 1vh) * 100)}
.about #section2 .container{ width: 100%}
.about #section2 h4{font-weight: 400; font-size: 22px; margin: 1em 0 2em; }
.about #section2 .grid.pc {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-top: 2em;
    max-width: 100%;
    width: 100%;
}
.about #section2 .grid li{border: 1px solid #ececec; border-radius: 10px; }
.about #section2 .grid li img{width: 100%}
.about #section2 .grid li p{ border-top: 1px solid #ececec; padding: .5em; font-weight: 500}
.about #section3 { color: #fff; background-image: url(../img/about_bg2.jpg); background-size: cover; text-align: center; justify-content: space-between; overflow: hidden;}
.about #section3 h2{margin-top: 4em}
.about #section3 h4{font-weight: 400; font-size: 22px; margin: 1em 0 2em;opacity: .6}
.about #section3 .container{height: inherit;}
.about #section3 .gauge_chart { margin: 0 auto; text-align: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0px); }
.about #section3 .gauge_chart .chartbg { position: relative; background-image: url(../img/about_chart_bg.png); height: 60vh; width: 1400px; max-width:100%; margin: 0 auto; background-position: center bottom; background-repeat: no-repeat; background-size: auto 100%; transition: background 0.2s linear; }
.about #section3 .gauge_chart .item{ width: 150px; margin: 0;  bottom:0; transform: translate(-50%, 0); background-position: center;position: relative;}
.about #section3 .gauge_chart .item_txt{z-index: 9}
.about #section3 .gauge_chart .item_txt p:nth-child(2){font-weight: 700; line-height: 1}
.about #section3 .gauge_chart .item_txt p:nth-child(2) span{font-size: 30px; font-weight: 700; }
.about #section3 .gauge_chart .item1 { position: absolute; left: 10%; bottom: 0; padding: 4em 0em; width: 300px; transform: rotate(16deg); }
.about #section3 .gauge_chart .item2 { position: absolute; left: 12%; bottom: 104px; padding: 4em 0em; width: 290px; transform: rotate(16deg); }
.about #section3 .gauge_chart .item3 { position: absolute; left: 16%; bottom: 180px; padding: 2em 0em; width: 310px; height: 164px; transform: rotate(45deg); }
.about #section3 .gauge_chart .item4 { position: absolute; left: 30%; bottom: 199px; padding: 2em 0em; height: 300px; transform: rotate(-30deg); }
.about #section3 .gauge_chart .item5 { position: absolute; right: 49.5%; bottom: 230px; padding: 2em 0em; height: 300px; width: 140px; transform: skew(8deg, 337deg);}
.about #section3 .gauge_chart .item6 { position: absolute; right: 38.5%; bottom: 250px; padding: 1em 0em; height: 279px; width: 160px; transform: skew(1deg, 0deg); }
.about #section3 .gauge_chart .item7 { position: absolute; right: 30.5%; bottom: 200px; padding: 4em 0em; width: 140px; height: 280px; transform: rotate(33deg); z-index: 5; }
.about #section3 .gauge_chart .item8 { position: absolute; right: 0%; bottom: 0px; padding: 7em 0em; width: 350px; height: 403px; z-index: 4; }
.about #section3 .gauge_chart .chart_cont{display: none ; z-index: 2;box-shadow: 0 0 20px #00000038; background-color: #fff; border:30px solid #fff; border-radius: 500px; width: 500px; height: 500px; position: absolute; bottom:0; left: 50%; transform: translate(-50%,50%);}
.about #section3 .gauge_chart .chart_cont:after { content: ''; border-radius: 500px; width: 550px; height: 550px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,10%); background: #ffffff4d; z-index: -1; }
.about #section3 .gauge_chart .chart_cont .flex{align-items: center; justify-content: center; color: #111111; padding: 1em 0 2em;}
.about #section3 .gauge_chart .chart_cont .txt h4{margin-bottom: .5em; font-weight: 700; opacity: 1}

/* ==================================================
                        시장조사
================================================== */
.research{}
.research #section1{ overflow: hidden; color:#fff; background-image: url('../img/about_bg.jpg'); background-size: cover; }
.research #section1 .container{justify-content: space-between; align-items: center; height:calc(var(--vh, 1vh) * 100); }
.research #section1 h2 span{position:relative; display: inline-block; z-index: 2}
.research #section1 h2 span:before{content:''; width:100%; height:32px; background:#cc0606; left:0; bottom:0; position:absolute; z-index: -1; display: block;}
.research #section1 h4{margin-top: 1.5em; margin-bottom:3em; font-weight: 400; line-height: 1.5}
.research #section1 p{margin-bottom: 3em; opacity: .6; font-size: 18px}
.research #section1 .left_wrap{width: 60%;}
.research #section1 .right_wrap{width: 40%;}
.research #section1 .right_wrap .img_cont{position:relative;}
.research #section1 .right_wrap .img_cont > img{width: -webkit-fill-available }
.research #section1 .right_wrap .img_cont .tip{position: absolute;top: 0; left: 0; width: 100%; height: 100%;}
.research #section1 .right_wrap .img_cont .tip img{ position: absolute; height: 110px}
.research #section1 .right_wrap .img_cont .tip img:nth-child(1){left: -4em; top: -2em;}
.research #section1 .right_wrap .img_cont .tip img:nth-child(2){ right: -2em;z-index: 5; }
.research #section1 .right_wrap .img_cont .tip img:nth-child(3) {z-index: 5; bottom: 6em; right: -6em; }
.research #section1 .right_wrap .img_cont .tip img:nth-child(4) { left: 50%; top: 43%; transform: translate(-50%, -50%); height: 80px; }

.research #section2{overflow: hidden;text-align: center}
.research #section2 h2{padding-top: 1.5em}
.research #section2 img { margin: 3em 0; height: 29vh; }
.research #section2 h5{font-size: 22px; font-weight: 400; line-height: 1.5}
.research #section2 p.gray{opacity:.5; margin-top: 1em;}
.research #section2 .arrow_img img{width: auto; height: auto; margin-bottom: 0}
.research #section3 { color: #fff; background-image: url(../img/research_sec3_bg.png); background-size: cover; text-align: center;  overflow: hidden;}
.research #section3 h2{padding-top: 1.5em}
.research #section3 h4 { font-weight: 400; font-size: 22px; margin: 1em 0; opacity: .6; }
.research #section3 form.researchform{background:#fff; border-radius: 20px; }
.research #section3 form { color: #111; text-align: left; padding: 3em 1em; }
.research #section3 form ul li { float: left; width: 50%; padding: 0 20px 20px; }
.research #section3 form ul li.textarea{width:100%}
.research #section3 form ul:after{clear: both; content:''; display: block; }
.research #section3 form input{padding-left: 0; outline:none ; border:0; border-bottom: 2px solid #ddd; font-weight: 400}
.research #section3 form input:focus,.research #section3 form input:hover{border:0; border-bottom: 2px solid #cc0606}
.research #section3 form input[type="file"] { height: 44px; background: none; line-height: 44px; width: 100%; position: relative; }
.research #section3 form input[type="file"]:after { content: ''; background-image: url(../img/fileicon.png); background-repeat: no-repeat; background-position: center; width: 24px; height: 24px; display: block; position: absolute; right: 0; top: 50%; transform: translate(0px,-50%); }
.research #section3 form input[type="file"]:hover:after{ background-image: url(../img/fileicon_red.png); }
.research #section3 form input::file-selector-button { display: none; }
.research #section3 form .reCAPTCHA .flex{gap: 10px}
.research #section3 form .reCAPTCHA label{margin-bottom:5px !important}
.research #section3 form .reCAPTCHA .reCAPTCHA_wrap{ height: 50px;width: auto; padding: 1em; background: #111111; color:#fff; border-radius: 4px;}
.research #section3 form .reCAPTCHA .reset { background: #b7b7b7; height: 50px; width: 50px; /* padding: 1em; */ text-align: center; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.research #section3 form .reCAPTCHA input{ border-radius: 4px; border: 1px solid #e8e8e8; width: 120px; height: initial !important}



/* ==================================================
                        구매대행
================================================== */

.purchasing{}
.purchasing #section1{ overflow: hidden; color:#fff; background-image: url('../img/about_bg.jpg'); background-size: cover; }
.purchasing #section1 .container{ flex-wrap: wrap; justify-content: space-between; align-items: center; }
.purchasing #section1 h2 span{position:relative; display: inline-block; z-index: 2}
.purchasing #section1 h2 span:before{content:''; width:100%; height:32px; background:#cc0606; left:0; bottom:0; position:absolute; z-index: -1; display: block;}
.purchasing #section1 h4{margin-top: 1em; margin-bottom: 3em; font-weight: 400; line-height: 1.5}
.purchasing #section1 p { margin-bottom: 0; opacity: .6; padding-right: 2em; font-size: 18px; }
.purchasing #section1 .left_wrap{width: 50%;}
.purchasing #section1 .left_wrap h2{margin-top: 3em}
.purchasing #section1 .right_wrap{width: 50%;}
.purchasing #section1 .right_wrap .img_cont img{width: 100%}
.purchasing #section1 .purchasing #section1 .right_wrap img{width: 100%}
.purchasing #section1 .step{width: 100%; margin: 0 auto; margin-top: 6em; text-align: center;max-width: 950px; }
.purchasing #section1 .stepper-wrapper {display: flex; justify-content: space-between; margin-bottom: 20px; }
.purchasing #section1 .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; }
.purchasing #section1 .stepper-item::before { position: absolute; content: ""; /* border-bottom: 2px solid #cc0606; */ width: 100%; height: 2px; top: 20px; left: -50%; z-index: 2; background: linear-gradient(135deg, rgba(240,102,112,1) 0%, rgba(204,6,6,1) 100%); }
.purchasing #section1 .stepper-item::after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2; }
.purchasing #section1 .stepper-item .step-counter { position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; margin-bottom: 6px; border: 5px solid #cc0606; color: #cc0606; font-weight: 700; }
.purchasing #section1 .stepper-item.active { font-weight: bold; }
.purchasing #section1 .stepper-item.completed .step-counter { background-color: #fff; }
.purchasing #section1 .stepper-item.completed::after { position: absolute; content: ""; border: #fff; background: linear-gradient(135deg, rgba(240,102,112,1) 0%, rgba(204,6,6,1) 100%) ; width: 100%; top: 20px; left: 50%; z-index: 3; }
.purchasing #section1 .stepper-item:first-child::before { content: none;  }
.purchasing #section1 .stepper-item:last-child::after { content: none; }
.purchasing #section1 .stepper-item .step-name{font-weight: 700; font-size: 26px; color: #cc0606}
.purchasing #section1 .stepper-item:nth-child(1) .step-counter{border: 5px solid #ea8a8a; color: #ea8a8a;}
.purchasing #section1 .stepper-item:nth-child(1){}
.purchasing #section1 .stepper-item:nth-child(1) .step-name{color: #ea8a8a}
.purchasing #section1 .stepper-item:nth-child(2) .step-counter{border: 5px solid #ee3333; color: #ee3333;}
.purchasing #section1 .stepper-item:nth-child(2) .step-name{color: #ee3333}
.purchasing #section1 .stepper-item:nth-child(3) .onstop{ position: absolute; top: -80px; width: 210px; }
.purchasing #section2 { text-align: center}
.purchasing #section2{overflow: hidden;text-align: center}
.purchasing #section2 .container{padding: 10px}
.purchasing #section2 h5{font-size: 22px; font-weight: 400; line-height: 1.5}
.purchasing #section2 h4{margin-top: .5em; font-weight: 400}
.purchasing #section2 .stepbox{ grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin-top: 3em}
.purchasing #section2 .stepbox li{ transition: ease all 300ms; padding: 2em 2em; border-radius: 20px; box-shadow: 0 0 20px #0000001a; position: relative;}
.purchasing #section2 .stepbox li:after{content: ''; width: 60px; height: 60px; background-image: url('../img/purchasing_sec2_icon_arrow.png'); background-size: cover; background-repeat: no-repeat; display: block; position: absolute; top: 50%; right: 0;transform: translate(72%, -50%); z-index: 10}
.purchasing #section2 .stepbox li:nth-child(3):after,
.purchasing #section2 .stepbox li:nth-child(6):after{display: none}
.purchasing #section2 .stepbox li .imgbox{margin: 0 auto; text-align: center; width: 90px; height: 90px; background: #f8f8f8; border-radius: 100px; display: flex; align-items: center; justify-content: center;}
.purchasing #section2 .stepbox li img{width: auto;}
.purchasing #section2 .stepbox li span{ color: #cc0606; font-weight: 700; font-size: 14px; margin-top:10px; display: block;}
.purchasing #section2 .stepbox li h5{line-height: 1.5; font-size: 20px ; font-weight: 700;}
.purchasing #section2 .stepbox li p{ color: #666666; font-size: 16px}
.purchasing #section2 .stepbox li:hover,
.purchasing #section2 .stepbox li.active{background:#cc0606; color:#fff; }
.purchasing #section2 .stepbox li:hover span,
.purchasing #section2 .stepbox li.active span{color:#fff;}
.purchasing #section2 .stepbox li:hover p,
.purchasing #section2 .stepbox li.active p{color:#fff;opacity: .7}
.purchasing #section2 .tit{padding-top:3em}
.purchasing #section3{ text-align: center; overflow: hidden; color:#fff; background-image: url('../img/purchasing_sec3_bg.jpg'); background-size: cover; }
.purchasing #section3 .tit{padding-top:3em}
.purchasing #section3 p.gray{opacity:.5; margin-top: 1em; font-size: 22px;}
.purchasing #section3 h4{margin-top: 1em}
.purchasing #section3 h4 span{font-weight: 700; font-size: 30px; position: relative;z-index: 2}
.purchasing #section3 h4 span:before{content:''; width:100%; height:20px; background:#cc0606; left:0; bottom:0; position:absolute; z-index: -1; display: block;}
.purchasing #section3 .cont-area{ text-align: left ; position: relative; width: 100%; max-width: 1440px; height: 50vh; margin: 3em 0 0 auto;}
.purchasing #section3 .cont-area .support_swiper { width: 100%; max-width: 1440px; height: 50vh; background-color: #fff; border-radius: 50px 0 0 50px; color:#111; position: relative; overflow: hidden;}
.purchasing #section3 .cont-area .support_swiper .swiper-wrapper{}
.purchasing #section3 .cont-area .support_swiper .swiper-slide{padding:0em 10em 0em 19em; display: flex; align-items: center; justify-content: space-between;}
.purchasing #section3 .cont-area .support_swiper .swiper-slide .txt_cont span{color: #cc0606; font-weight: 700; font-size: 20px}
.purchasing #section3 .cont-area .support_swiper .swiper-slide .txt_cont p{font-size: 20px}
.purchasing #section3 .cont-area .support_swiper .swiper-slide .txt_cont h3{font-weight: 700; margin-bottom: 20px}
.purchasing #section3 .cont-area .support_swiper .swiper-slide .txt_cont h5 { font-weight: 350; line-height: 1.3; letter-spacing: -0.2px; }
.purchasing #section3 .cont-area .support_swiper .swiper-slide .swiper_img{width: 40%; height: 350px; background-size: contain;; background-repeat: no-repeat; background-position: center;}
.purchasing #section3 .cont-area .swiper-pagination-custom { position: absolute; text-align: center; width: 82px; height: 480px; top: 50%; color: #111; font-size: 20px; left: 0; border-right: 1px solid #ddd; margin: 0; background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 8em; padding-right: 2em; }
.purchasing #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet { height: min-content; background-color: transparent; border-radius: 0; margin: 0 2px; cursor: pointer; width: 80px; display: block; font-weight: 700; padding: 1em 0; }
.purchasing #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet-active { position: relative; }
.purchasing #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet-active:after { background-color: #cc0606; width: 3px; height: 38px; content:''; display: block; position: absolute; right: -2px; top: 17px; }
.purchasing #section3 .cont-area .arrow-box { width: 60px; height: 120px; background: #cc0606; position: absolute; top: 50%; left: -1%; z-index: 10; margin-top: -60px; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.purchasing #section3 .cont-area .arrow-box .swiper-button-prev,
.purchasing #section3 .cont-area .arrow-box .swiper-button-next { position: unset; width: 40px; height: 60px; display: block; top: auto; bottom: auto; margin: 0; }
.purchasing #section3 .cont-area .arrow-box .swiper-button-prev:after{content:''; width: 40px; height: inherit; display: block; font-size: 0; background-image: url('../img/arrow-top.png'); background-repeat: no-repeat; background-position: center}
.purchasing #section3 .cont-area .arrow-box .swiper-button-next:after{content:''; width: 40px; height: inherit; display: block; font-size: 0; background-image: url('../img/arrow-bottom.png'); background-repeat: no-repeat;background-position: center}
.purchasing #section3 .cont-area .arrow-box .swiper-button-prev{border-bottom: 1px solid #ffffff24;}



/* ==================================================
                        무역대행
================================================== */
.trade #section1{}
.trade #section1{ overflow: hidden; color:#fff; background-image: url('../img/about_bg.jpg'); background-size: cover; }
.trade #section1 .container{ flex-wrap: wrap; justify-content: space-between; align-items: center; height:calc(var(--vh, 1vh) * 100) }
.trade #section1 h2 span{position:relative; display: inline-block; z-index: 2}
.trade #section1 h2 span:before{content:''; width:100%; height:32px; background:#cc0606; left:0; bottom:0; position:absolute; z-index: -1; display: block;}
.trade #section1 h4{margin-top: 1em; margin-bottom: 3em; font-weight: 400; line-height: 1.5}
.trade #section1 p { margin-bottom: 2em ; opacity: .6; padding-right: 2em; font-size: 18px; }
.trade #section1 .left_wrap{width: 50%;}
.trade #section1 .right_wrap{width: 50%;}
.trade #section1 .right_wrap img{width: 100%}
.trade #section1 .step{width: 100%; margin: 0 auto; margin-top: 0em; text-align: center;max-width: 950px; }
.trade #section1 .stepper-wrapper {display: flex; justify-content: space-between; margin-bottom: 20px; }
.trade #section1 .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; }
.trade #section1 .stepper-item::before { position: absolute; content: ""; /* border-bottom: 2px solid #cc0606; */ width: 100%; height: 2px; top: 20px; left: -50%; z-index: 2; background: linear-gradient(135deg, rgba(240,102,112,1) 0%, rgba(204,6,6,1) 100%); }
.trade #section1 .stepper-item::after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2; }
.trade #section1 .stepper-item .step-counter { position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background: #fff; margin-bottom: 6px; border: 5px solid #cc0606; color: #cc0606; font-weight: 700; }
.trade #section1 .stepper-item.active { font-weight: bold; }
.trade #section1 .stepper-item.completed .step-counter { background-color: #fff; }
.trade #section1 .stepper-item.completed::after { position: absolute; content: ""; border: #fff; background: linear-gradient(135deg, rgba(240,102,112,1) 0%, rgba(204,6,6,1) 100%) ; width: 100%; top: 20px; left: 50%; z-index: 3; }
.trade #section1 .stepper-item:first-child::before { content: none;  }
.trade #section1 .stepper-item:last-child::after { content: none; }
.trade #section1 .stepper-item .step-name{font-weight: 700; font-size: 26px; color: #cc0606}
.trade #section1 .stepper-item:nth-child(1) .step-counter{border: 5px solid #ea8a8a; color: #ea8a8a;}
.trade #section1 .stepper-item:nth-child(1){}
.trade #section1 .stepper-item:nth-child(1) .step-name{color: #ea8a8a}
.trade #section1 .stepper-item:nth-child(2) .step-counter{border: 5px solid #e46060; color: #e46060;}
.trade #section1 .stepper-item:nth-child(2) .step-name{color: #e46060}
.trade #section1 .stepper-item:nth-child(3) .step-counter{border: 5px solid #ee3333; color: #ee3333;}
.trade #section1 .stepper-item:nth-child(3) .step-name{color: #ee3333}
.trade #section1 .stepper-item:nth-child(4) .onstop{ position: absolute; top: -80px; width: 210px; }
.trade #section2 { text-align: center}
.trade #section2{overflow: hidden;text-align: center}
.trade #section2 h5{font-size: 22px; font-weight: 400; line-height: 1.5}
.trade #section2 h4{margin-top: .5em; font-weight: 400}
.trade #section2 .stepbox{ grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin-top: 3em;padding-bottom:20px;}
.trade #section2 .stepbox li{ transition: ease all 300ms; padding: 2em 2em; border-radius: 20px; box-shadow: 0 0 20px #0000001a; position: relative;}
.trade #section2 .stepbox li:after{content: ''; width: 60px; height: 60px; background-image: url('../img/purchasing_sec2_icon_arrow.png'); background-size: cover; background-repeat: no-repeat; display: block; position: absolute; top: 50%; right: 0;transform: translate(72%, -50%); z-index: 10}
.trade #section2 .stepbox li:nth-child(3):after,
.trade #section2 .stepbox li:nth-child(6):after{display: none}
.trade #section2 .stepbox li .imgbox{margin: 0 auto; text-align: center; width: 90px; height: 90px; background: #f8f8f8; border-radius: 100px; display: flex; align-items: center; justify-content: center;}
.trade #section2 .stepbox li img{width: auto;}
.trade #section2 .stepbox li span{ color: #cc0606; font-weight: 700; font-size: 14px; margin-top:10px; display: block;}
.trade #section2 .stepbox li h5{line-height: 1.5; font-size: 20px ; font-weight: 700;}
.trade #section2 .stepbox li p{ color: #666666; font-size: 16px}
.trade #section2 .stepbox li:hover,
.trade #section2 .stepbox li.active{background:#cc0606; color:#fff; }
.trade #section2 .stepbox li:hover span,
.trade #section2 .stepbox li.active span{color:#fff;}
.trade #section2 .stepbox li:hover p,
.trade #section2 .stepbox li.active p{color:#fff;opacity: .7}



/* ==================================================
                        중국방문
================================================== */
.china #section1{}
.china #section1{ overflow: hidden; color:#fff; background-image: url('../img/about_bg.jpg'); background-size: cover; }
.china #section1 .container{ flex-wrap: wrap; justify-content: space-between; align-items: center; /*height: 100vh;*/ padding-top: 0;}
.china #section1 h2 span{position:relative; display: inline-block; z-index: 2}
.china #section1 h2 span:before{content:''; width:100%; height:32px; background:#cc0606; left:0; bottom:0; position:absolute; z-index: -1; display: block;}
.china #section1 h4{margin-top: 1em; margin-bottom: 3em; font-weight: 400; line-height: 1.5}
.china #section1 p { margin-bottom: 2em ; opacity: .6; padding-right: 2em; font-size: 18px; }
.china #section1 .left_wrap{width: 50%;}
.china #section1 .right_wrap{width: 50%;}
.china #section1 .right_wrap img{width: 100%}
.china #section1 .right_wrap .img_cont .tip{position: absolute;top: 0; left: 0; width: 100%; height: 100%;}
.china #section1 .right_wrap .img_cont .tip img{ position: absolute;}
.china #section1 .right_wrap .img_cont .tip img:nth-child(1) { left: 18%; top: 15em; width: auto; }
.china #section1 .right_wrap .img_cont .tip img:nth-child(2){ right: 0em;top: 15em; z-index: 5; width: auto;}

.china #section2 { text-align: center}
.china #section2{overflow: hidden;text-align: center}
.china #section2 h5{font-size: 22px; font-weight: 400; line-height: 1.5}
.china #section2 h4{margin-top: .5em; font-weight: 400}
.china #section2 .stepbox{ grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin-top: 3em;padding-bottom:20px;}
.china #section2 .stepbox li{ transition: ease all 300ms; padding: 2em 2em; border-radius: 20px; box-shadow: 0 0 20px #0000001a; position: relative;}
/*.china #section2 .stepbox li:after{content: ''; width: 60px; height: 60px; background-image: url('../img/purchasing_sec2_icon_arrow.png'); background-size: cover; background-repeat: no-repeat; display: block; position: absolute; top: 50%; right: 0;transform: translate(72%, -50%); z-index: 10}
.china #section2 .stepbox li:nth-child(3):after,
.china #section2 .stepbox li:nth-child(6):after{display: none}*/
.china #section2 .stepbox li .imgbox{margin: 0 auto; text-align: center; width: 90px; height: 90px; background: #f8f8f8; border-radius: 100px; display: flex; align-items: center; justify-content: center;}
.china #section2 .stepbox li img{width: auto;}
.china #section2 .stepbox li span{ color: #cc0606; font-weight: 700; font-size: 14px; margin-top:10px; display: block;}
.china #section2 .stepbox li h5{line-height: 1.5; font-size: 20px ; font-weight: 700; margin-top: 10px}
.china #section2 .stepbox li p{ color: #666666; font-size: 16px}
.china #section2 .stepbox li:hover,
.china #section2 .stepbox li.active{background:#cc0606; color:#fff; }
.china #section2 .stepbox li:hover span,
.china #section2 .stepbox li.active span{color:#fff;}
.china #section2 .stepbox li:hover p,
.china #section2 .stepbox li.active p{color:#fff;opacity: .7}

.china #section3{text-align: center; overflow: hidden; color:#fff; background-image: url('../img/china_sec3_bg.jpg'); background-size: cover; }
.china #section3 .china_table{}
.china #section3 p.gray{opacity:1; color:#8e8e8e; margin-top: 1em; font-size: 22px;}
.china #section3 p.gray span{color:#cc0606; opacity: 1; font-size: 18px;}
.china #section3 h4{margin-top: 1em}
.china #section3 h4 span{font-weight: 700; font-size: 30px; position: relative;z-index: 2}
.china #section3 h4 span:before{content:''; width:100%; height:20px; background:#cc0606; left:0; bottom:0; position:absolute; z-index: -1; display: block;}
.china #section3 .china_table{ margin-top: 5em; grid-template-columns: repeat(6, 1fr); border-top: 2px solid #cc0606 }
.china #section3 .china_table .china_tb_head{padding: 1em 0; position: relative; border-bottom:1px solid #dddddd; font-weight: 700; font-size: 14px}
.china #section3 .china_table .china_tb_head::before { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 10px; display: block; background: #dddddd; transform: translate(50%, -50%); }
.china #section3 .china_table .china_tb_head.last-child::before{display: none}
.china #section3 .china_table .china_tb_body{padding: 1em 0; display: flex; align-items: center; flex-wrap: wrap; height: 270px; justify-content: center;}
.china #section3 .china_table .china_tb_body{border-right: 1px solid #363636; border-bottom: 1px solid #ddd}
.china #section3 .china_table li{transition: ease all 300ms;}
.china #section3 .china_table li:last-child .china_tb_body{border-right:0}
.china #section3 .china_table li:hover{background-color: #ffffff1c}
.china #section3 .china_table .china_tb_body *{width: 100%; height: auto; line-height: 1.5}
.china #section3 .china_table .china_tb_body .red { color: #cc0606; font-weight: 600; font-size: 12px; width: fit-content; text-align: center; margin: 0 auto; position: relative;}
.china #section3 .china_table .china_tb_body .red span{font-size: 18px}
.china #section3 .china_table .china_tb_body .red:after { content: ''; width: 100%; height: 2px; background: #cc0606; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.china #section3 .china_table .china_tb_body p{font-weight: 700; font-size: 18px}
.china #section3 .china_table .china_tb_body p.price{ font-weight: 500; font-size: 15px}
.china #section3 .china_table .china_tb_body p.price span{font-size: 26px; font-weight: 700}
.china #section3 .china_table .china_tb_body p+.red{margin-top:1em; letter-spacing: -0.3px; }
.china #section3 .china_table .china_tb_body p+.red:after{display: none}
.china #section3 .china_table .china_tb_body p span{font-size: 26px;}


@media (min-width: 1921px) {
    .fp-overflow{height: auto !important;}
    .container{padding-top: 0}
    .about #section3 h2{margin-top: 6em}
}
@media screen and (max-width: 1710px) {
    h2, .h2{font-size: 45px}
    h4, .h4{font-size:18px}
    .btn_red { display: block; width: 280px; height: 50px; line-height: 50px }

    /* main */
    #main #section2 .cont-area .servicebox p.iconbox { width: 80px; height: 80px; padding: 1em; }
    #main #section2 .cont-area .servicebox p.iconbox img { height: 36px; }
    #main #section5 .accordion{ padding: 13px; font-size: 16PX}
    #main #section6 .location .tit-area{left:5%}

    /* 시장조사 */
    .research #section3 form ul li {padding: 0 20px 10px; }
    input[type='text'],
    .bbs input[type='password'],
    .bbs select { height: 46px; line-height: 46px; font-size: 14px; }
    .research #section1 .right_wrap,
    .research #section1 .left_wrap{width: 50%}
    .research #section3 form .reCAPTCHA .reset { background: #b7b7b7; height: 46px; width: 46px; padding:0}
    .research #section3 form .reCAPTCHA .reCAPTCHA_wrap { height: 46px; padding: 0 1em; line-height: 46px; }
    .btn_red{margin-top:1em; font-size: 15px; width: 200px;}

    .research #section2 h5 {font-size: 17px;}
    .purchasing #section2 .stepbox li .imgbox,
    .trade #section2 .stepbox li .imgbox,
    .china #section2 .stepbox li .imgbox{ margin: 0 auto; text-align: center; width: 60px; height: 60px;}
    .purchasing #section2 .stepbox li img,
    .trade #section2 .stepbox li img,
    .china #section2 .stepbox li img { width: auto; height: 24px; }
    .purchasing #section2 .stepbox li p { font-size: 14px; line-height: 1.3; }
    .purchasing #section2 h4{font-size: 18px}
    .purchasing #section3 p.gray { font-size: 18px; }
    .purchasing #section1 p { margin-bottom: 0; opacity: .6; padding-right: 2em; font-size: 15px; }

    #section1 .stepper-item .step-name{font-size: 20px}
    .trade #section1 p,
    .china #section1 p { margin-bottom: 2em; font-size: 16px;}


}

@media screen and (max-width: 1440px) {
    #header .logo img { transition: all 0.3s ease; width: 160px; display: block; }
    .container{max-width: 90%;}
    #main #section1 .main_visual .txt-box{max-width: 90%}
    #main #section1 .main_visual .all-box{max-width: 90%}
    #main #section3 .cont-area{max-width: 90%}
    #main #section6 .location .tit-area{}
    #main #section6 .location #map img { right: 0; transform: translate(-100px, -80%); }
    .header-nav .depth1 > li{padding: 0 20px}
    .header-nav .depth1 > li:hover > ul::after{content:''; width: 100%; }
    .purchasing #section3 .cont-area{max-width: 90%}
    .about #section2 .grid.pc{grid-template-columns: repeat(5, 1fr); width: 100%; }

    .research #section1 .left_wrap{width: 70%}
    .research #section1 .right_wrap{width:30%}
    .research #section1 .right_wrap .img_cont .tip img,
    .research #section1 .right_wrap .img_cont .tip img:nth-child(4){height: 70px}


}
@media screen and (max-width: 1024px){
    #main #section2 .cont-area{width: 100%}
    #main #section2 .tit-area { top: 15%; width: 30%; }
    #main #section3 .cont-area{height: auto;}
    #main #section4 .container{padding: 1em; padding-top:00px;}
    #main #section6 .location #map{background-image: url('../img/main_map_img_m.jpg'); background-repeat: no-repeat; background-size: cover ; background-position: center -220px}
    #main #section6 .location .container { width: 90%; left: 50%; bottom: -10%; transform: translate(-50%, -20%); height: auto; }
}
@media screen and (max-width: 768px){
    .mo{display: block}
    .pc{display: none;}
    #header .logo img{width: 170px}
    #header .header-body .header-inner{height: 60px}
    h1, .h1{font-size: 2.5em}
    h2, .h2 { font-size: 2.2em; }
    h3, .h3{font-size: 1.7em;}
    h4, .h4{font-size: 1.3em;}
    h5, .h5 { font-size: 1.1em;}
    .tit-area h2{margin-bottom: 6px}
    .tit-area h5{font-size: 1.1em}
    .container { max-width: 100%; padding: 0 14px; }
    #main #section1 .main_visual .main-swiper .swiper-slide .img-box{}
    #main #section1 .main_visual .main-swiper .swiper-slide .img-box img{width: 100%; }
    #main #section1 .main_visual .swiper-slide-active .txt-box > h1{font-size: 38px}
    #main #section1 .main_visual .txt-box { top: 27vh; }
    #main #section1 .main_visual .txt-box > p{font-size: 1.3em}
    #main #section1 .main_visual .all-box{ display: none }
    #main #section1 .main_visual .main-swiper2 .swiper-pagination { align-items: center; display: flex; color: #fff; justify-content: center; position: absolute; top: 333px; bottom: auto; /* width: 100%; */ left: 2em; gap: 3px; }
    #main #section1 .main-swiper2 .swiper-pagination-bullet{background: #fff; width: 12px; height :12px; opacity: 1}
    #main #section1 .main-swiper2 .swiper-pagination-bullet-active{ background-color: #cc0606; }
    #main #section1 .main_visual img { transform: none !important; transition: 3.5s 0.5s;  width: 100%; position: absolute; bottom: 0; height: 100%; width: 100%; object-fit: cover;}
    /*#main #section2{ overflow: hidden; height: 100%; display: flex; align-items: center; justify-content: center; }*/
    #main #section2 .container { height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
    #main #section2 .tit-area { position: inherit; text-align: center; top: auto; left: auto; }
    #main #section2 .tit-area { /*margin-top: 7em;*/ width: 100%; position: relative; }
    #main #section2 .cont-area { width: 100%; position: relative; z-index: 2; grid-template-columns: repeat(1, 1fr); gap: 0px; top: auto; margin-top:24px; }
    #main #section2 .cont-area .flexbox:nth-child(1){margin-top: 0}
    #main #section2 .cont-area .flexbox:nth-child(2){margin-top: 0}
    #main #section2 .cont-area .servicebox a{display: flex; justify-content: flex-start; gap:0px;  align-items: center }
    #main #section2 .cont-area .servicebox { background: #fff; box-shadow: 0 0 12px #00000014; border-radius: 20px; padding: 1.3em 1.3em; text-align: left; margin-bottom: 10px; transition: ease all 300ms; }
    #main #section2 .cont-area .servicebox p.iconbox{margin: 0; width: 80px}
    #main #section2 .cont-area .servicebox h4 { margin-top: 0; font-size: 1.1em; }
    #main #section2 .cont-area .servicebox p.iconbox { margin: 0; width: 10vw; height: 10vw; margin-right: 20px}
    #main #section2 .cont-area .servicebox p.iconbox img { height: 30px; }
    #main #section2 span.bg { display: none}
    #main #section2 .cont-area .servicebox p { opacity: .7; line-height: 1.2; }
    #main #section2 .cont-area .servicebox p br{/*display: none*/}
    #main #section3{}
    #main #section3 .fp-overflow{ justify-content: space-between; align-items: stretch; display: flex; flex-wrap: wrap; }
    #main #section3 .container{ margin-bottom: 0em; margin-top: 0em; position: relative; height: calc(var(--vh, 1vh) * 100); display: flex; justify-content: center; align-items: stretch;}
    #main #section3 .cont-area { max-width: 100%; position: absolute; bottom: 0; }
    #main #section3 .tit-area {
        margin-top: 0;
        width: 100%;
        height: 20vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: column;
    }
    #main #section3 .cont-area .support_swiper { max-width: 90%; margin: 0 auto; border-radius: 30px 30px 0 0; height: 60vh;}
    #main #section3 .cont-area .swiper-pagination-custom {
        position: absolute;
        text-align: center;
        width: 100%;
        height: 50px;
        top: 0;
        color: #111;
        font-size: 16px;
        left: 0;
        border-right: 1px solid #ddd;
        margin: 0;
        background-color: #fff;
        display: flex;
        flex-direction: initial;
        align-items: center;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        top: 6vh /*30px;*/
    }
    #main #section3 .bgwrap .bg{background-size: auto 100%;}
    #main #section3 .cont-area .support_swiper .swiper-slide .txt_cont h5{font-size: 14px}
    #main #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet{width: 40px}
    #main #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet-active:after{ background-color: #cc0606; width: 100%; height: 2px; content: ''; display: block; position: absolute; right: 0; top: auto; bottom: 10px; }
    #main #section3 .cont-area .support_swiper .swiper-slide{text-align: center; margin: 0 auto;padding: 17vh 1em 1em; display: block;}
    #main #section3 .cont-area .arrow-box { width: 100px; height: 50px; background: #cc0606; position: absolute; top: 0%; left: 50%; margin-left: -50px; margin-top: -25px; border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; }
    #main #section3 .cont-area .support_swiper .swiper-slide .swiper_img { background-position: center center; width: 80%; margin: 0 auto; height: 240px; margin-top: 2em}
    #main #section3 .cont-area .support_swiper .swiper-slide .txt_cont h3{margin-bottom: 6px}
    #main #section3 .cont-area .arrow-box .swiper-button-prev{width: 50%}
    #main #section3 .cont-area .arrow-box .swiper-button-prev:after{background-image: url(../img/mo/left_arrow.png); width: 50px}
    #main #section3 .cont-area .arrow-box .swiper-button-next{width: 50%}
    #main #section3 .cont-area .arrow-box .swiper-button-prev, #main #section3 .cont-area .arrow-box .swiper-button-next{height: 50px}
    #main #section3 .cont-area .arrow-box .swiper-button-next:after{background-image: url(../img/mo/right_arrow.png); width: 50px}
    #main #section3 .cont-area .arrow-box .swiper-button-prev { border-bottom: 0; border-right: 1px solid #ffffff24; }
    #main #section4 .container{ position: absolute; top: 50%; margin: 0; transform: translate(0, -50%); }
    #main #section4 .rightbg {height: 80px;top: 6%;}
    #main #section4 .tit-area { margin-bottom: 2em; }
    #main #section4 .leftbg{height: 80px; z-index: -1; bottom: 0% }
    #main #section4 .grid ul { grid-template-columns: 1fr 1fr;    gap: 10px; }
    #main #section4 .grid ul li{padding: 2em;}
    #main #section4 .grid ul li .imgbox { width: 50px; height: 50px; margin-bottom: 10px;}
    #main #section4 .grid ul li .imgbox img{height : 24px}

    #main #section4 .container{ margin: 0 auto; }
    .mo .customer_swiper .swiper-slide{height: auto; z-index: 1;}
    .mo .customer_swiper ul{ display: grid; height: 100%; flex-wrap: wrap; gap: 10px; grid-template-columns: 1fr 1fr}
    .mo .customer_swiper ul li { display: block; text-align: center; padding: 1.5em; border-radius: 10px; border: 1px solid #e8e8e8; background-color: #fff; gap: 14px; height: 135px; }
    .mo .customer_swiper ul li .imgbox { width: 50px; height: 50px; padding: 0.4em; text-align: center; background-color: #f8f8f8; display: flex; justify-content: center; align-items: center; border-radius: 100px; margin: 0 auto 14px; }
    .mo .customer_swiper ul li .imgbox img{width: 30px;}
    #main #section4 .swiper-pagination-bullet-active{background: #cc0606 !important;}
    #main #section4 .swiper-pagination { bottom: -3em !important; }
    #main #section5 .container{ position: absolute; top: 50%; margin: 0; transform: translate(0, -50%); }
    #main #section5 .bgwrap .bg{background-size: auto 100%}
    #main #section5 .accordion { padding: 7px; font-size: 14PX; }
    #main #section5 .accordion::after { height: 25px; }
    #main #section5 .panel{font-size: 13px; display: none; transition: all 0.2s ease-out;}
    #main #section5 .panel::before, #main #section5 .accordion::before{font-size: 20px}
    #main #section6 .location .tit-area { background: #fff; border-radius: 20px; padding: 5em; background-size: 230px 230px; background-position: bottom right; background-repeat: no-repeat; }
    #main #section6 .location .tit-area p {line-height: 1.5; font-size: 13px; margin-bottom: 10px; }
    #main #section6 .location .tit-area p b{font-size: 14px; line-height: 1}
    #main #section6 .location .tit-area .contact-area .txt { margin-bottom: 14px; }
    #main #section6 .location .tit-area .contact-area .txt:last-child{margin-bottom:0px;}
    /*#map img{position: absolute; right: 0 !important; top: 20% !important; transform: translate(-39%, -50%); width: 210px}*/
    #main #section6 .location .tit-area .contact-area{padding-left: 1em}

    /*.fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]),
    .fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]),
    .fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]){ min-height: 100% !important }
      */
    .about #section1 .container{display: block; padding-top: 10em; }
    .about #section1 h2 span:before{height: 13px}
    .about #section1 h4{font-size: 16px}
    .about #section1 p { margin-bottom: 3em; opacity: .6; font-size: 14px; }
    .about #section1 .left_wrap { width: 100%;position: relative; z-index: 1}
    .about #section1 .right_wrap { width: 80%; position: absolute; right: -4em; top: 170px; z-index: 0; opacity: .6; }
    .about #section1 .right_wrap .img_cont img{width: 100%}
    .about #section2 h4{font-size: 16px; line-height: 1.4}
    .about #section2 .grid{grid-template-columns: repeat(2, 1fr); width: 100%; gap: 14px;}
    .about #section2 .grid.pc { display: none !important }
    .about #section2 .container { justify-content: center; display: flex; flex-direction: column; height:calc(var(--vh, 1vh) * 100)}
    .about #section2 .container .swiper-horizontal>.swiper-pagination-bullets{bottom: -3em;}
    .about #section2 .container .swiper-pagination-bullet-active{background: #cc0606 !important;}
    .about #section2 .grid li{overflow: hidden;}
    .about #section3 h4 { font-size: 16px; margin: 1em 1em 2em; line-height: 1.5; }
    .about #section3 .container{padding: 0;     height: auto;}
    .about #section3 .gauge_chart.mo { left: 0; transform: translate(0px, 0px); width: 60%; margin: 0em 0 0em; position: relative; }
    .about #section3 .gauge_chart.mo img{ width: 100% }
    .about #section3 .gauge_chart.mo p{}
    .about #section3 .gauge_chart.mo p.mo_item1 { position: absolute; left: 0%; top: 0%; font-size: 0; width: 17vw; height: 44vw; }
    .about #section3 .gauge_chart.mo p.mo_item2 { position: absolute; left: 15%; top: 3%; font-size: 0; width: 15vw; height: 44vw; transform: rotate(20deg); z-index: 2; }
    .about #section3 .gauge_chart.mo p.mo_item3 { position: absolute; left: 32%; top: 6%; font-size: 0; width: 19vw; height: 44vw; transform: skew(-30deg); z-index: 2; }
    .about #section3 .gauge_chart.mo p.mo_item4 { position: absolute; left: 45%; top: 17%; font-size: 0; width: 14vw; height: 44vw; transform: rotate(57deg); z-index: 3; }
    .about #section3 .gauge_chart.mo p.mo_item5 { position: absolute; left: 51%; top: 29%; font-size: 0; width: 21vw; height: 44vw; transform: rotate(69deg); z-index: 4; }
    .about #section3 .gauge_chart.mo p.mo_item6 { position: absolute; left: 52%; top: 40%; font-size: 0; width: 17vw; height: 41vw; transform: rotate(90deg); z-index: 5; }
    .about #section3 .gauge_chart.mo p.mo_item7 { position: absolute; left: 40%; top: 52%; font-size: 0; width: 20vw; height: 41vw; transform: rotate(108deg); z-index: 6; }
    .about #section3 .gauge_chart.mo p.mo_item8 { position: absolute; left: 0; top: 61%; font-size: 0; width: 32vw; height: 45vw; transform: rotate(311deg); z-index: 7; }
    .modal-open .modal { overflow-x: hidden; overflow-y: auto; padding-right: 0 !important; width: 100%; }
    .modal-content {text-align: center; width: 80%; padding: 2em; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 0 0 20px 20px; border-top: 4px solid #710b0b; color:#111}
    .modal-dialog { margin: 0 auto !important; height: -webkit-fill-available !important; }
    .modal-body h3{font-weight: 600; margin: 1em 0 .5em}
    .modal-footer{border-top:0;text-align: center}
    .modal-footer .btn-default { background: #b7b7b7; color: #fff; border-radius: 100px; padding: 1em; width: 70%; font-weight: 600; text-align: center; margin: 0 auto; }


    .research #section1 .right_wrap .img_cont .tip{display: none;}
    .research #section1 .container{display: block;;}
    .research #section1 .right_wrap { width: 80%; position: absolute; top: 8em; right: 0; }
    .research #section1 .right_wrap .img_cont > img{opacity: 1;}
    .research #section1 .left_wrap { width: 100%; padding-top: 16em; position: relative;   z-index: 1;}
    .research #section1 .right_wrap .img_cont .tip img:nth-child(4){height:50px; opacity: .7;}
    .research #section1 h4 { font-size: 16px;}
    .research #section1 h2 span:before {height: 13px;}
    .research .mo_wrap{ display: grid !important; grid-template-columns: 1fr 1fr 1fr; justify-content: center; align-items: center; gap: 10px; position: relative; z-index: 2; }
    .research .mo_wrap .iconbox{ text-align: center; background: #cc0606; padding: 2em 0.5em; border-radius: 20px; }
    .research .mo_wrap .iconbox p { margin-bottom: 0 !important; opacity: 1 !important; font-weight: 600; margin-top: 0.5em; }
    .research .mo_wrap .iconbox img { width: 70px;height: 70px;}
    .research #section1 .left_wrap{padding-top: 20em;}
    .research #section1 h4 br{display: none;}
    .research #section1 p{font-size: 16px;}
    .research #section2 h5 {font-size: 14px;}
    .research #section2 h5 br{display: none;}
    .research #section2 img {margin: 1em 0;height: auto;width:200px}
    .research #section3 h4{font-size: 14px; line-height: 1.5;}
    .research #section3 form ul li { width: 100%;    padding: 0 0 14px; }
    .research #section3 form{padding: 1.5em}
    .research #section3 form ul li label{display: none;}
    .research #section3 form input{border-radius: 0;}
    .research #section3 form input[type="file"]:after{width: 20px; height: 20px}
    input[type='text'], .bbs input[type='password'], .bbs select { height: 40px;    line-height: 40px;}

    .purchasing #section1{}
    .purchasing #section1 .container{display: block;;}
    .purchasing #section1 .right_wrap {  width: 60%;position: absolute;top: 4em;right: 0; z-index: 0;  }
    .purchasing #section1 .right_wrap .img_cont > img{opacity: 1; }
    .purchasing #section1 .left_wrap { width: 100%; padding-top: 8em; position: relative;   z-index: 1;}
    .purchasing #section1 h4 { font-size: 16px; margin-bottom: 1em;}
    .purchasing #section1 h4 br{display: none;}
    .purchasing #section1 h2 span:before {height: 13px;}
    .purchasing #section1 .stepper-item:nth-child(3) .onstop {top: -52px;width: auto;}
    .purchasing #section1 .stepper-item .step-name {font-size: 16px;}
    .purchasing #section2 .container{padding-top: 4em;}
    .purchasing #section2 .stepbox_swiper .stepbox li{margin-bottom: 1em;}
    .purchasing #section2 .stepbox_swiper .stepbox li:after{display: none;}
    .purchasing #section2 .stepbox_swiper .stepbox li.aftericon:after { display: block; width: 40px;  height: 40px; background-image: url(../img/purchasing_sec2_icon_arrow_mo.png); position: absolute; top: auto; right: auto; transform: translate(-50%, 60%); bottom: 0; left: 50%; }
    .purchasing #section2 .stepbox li h5{font-size: 17px;}
    .purchasing #section2 h4 {font-size: 16px;}
    .purchasing #section2 .stepbox{margin-top: 2em;}
    .purchasing #section2 .stepbox.grid{display: none;}
    .purchasing #section2 .swiper-pagination-bullet-active{background-color: #cc0606 !important;}
    .purchasing #section2 .swiper-horizontal>.swiper-pagination-bullets,
    .purchasing #section2 .swiper-pagination-bullets.swiper-pagination-horizontal{bottom: -14px !important;}
    .purchasing #section2 .stepbox li p br{display: none;}
    .purchasing #section3 .container { padding-top: 8em; position: absolute; top: 0; left: 0;}
    .purchasing #section3 .cont-area { margin: 3em auto 0; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0);height: 50vh; }
    .purchasing #section3 .cont-area .support_swiper{border-radius: 50px 50px 0 0; height: 50vh}
    .purchasing #section3 .cont-area .support_swiper .swiper-slide {padding: 7em 2em 0em 2em}
    .purchasing #section3 .cont-area .swiper-pagination-custom { width: 100%; height: 50px; top: 0; font-size: 14px; left: 0; border-right: 1px solid #ddd; margin: 2em 0 0; background-color: #fff; flex-direction: inherit; padding-left: 0; padding-right: 0; }
    .purchasing #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet{width: 50px}
    .purchasing #section3 .cont-area .swiper-pagination-custom .swiper-pagination-bullet-active:after { width: 50px; height: 2px; right: auto; top: auto; bottom: 0px }
    .purchasing #section3 .cont-area .support_swiper .swiper-slide{display: block; text-align: center;}
    .purchasing #section3 .cont-area .support_swiper .swiper-slide .txt_cont span{font-size: 14px;}
    .purchasing #section3 .cont-area .support_swiper .swiper-slide .swiper_img { width: 100%; height: 150px; background-position: center;}
    .purchasing #section3 .cont-area .arrow-box { width: 100px; height: 50px; background: #cc0606; position: absolute; top: 0%; left: 50%; margin-left: -50px; margin-top: -25px; border-radius: 5px; display: flex; flex-direction: row; justify-content: center; align-items: center; }
    .purchasing #section3 .cont-area .support_swiper .swiper-slide .swiper_img { background-position: center center; width: 100%; margin: 0 auto; height: 130px; margin-top: 2em}
    .purchasing #section3 .cont-area .support_swiper .swiper-slide .txt_cont h3{margin-bottom: 6px}
    .purchasing #section3 .cont-area .arrow-box .swiper-button-prev{width: 50%}
    .purchasing #section3 .cont-area .arrow-box .swiper-button-prev:after{background-image: url(../img/mo/left_arrow.png); width: 50px; }
    .purchasing #section3 .cont-area .arrow-box .swiper-button-next{width: 50%}
    .purchasing #section3 .cont-area .arrow-box .swiper-button-next:after{background-image: url(../img/mo/right_arrow.png); width: 50px; }
    .purchasing #section3 .cont-area .arrow-box .swiper-button-prev { border-bottom: 0; border-right: 1px solid #ffffff24; }
    .purchasing #section3 p.gray {font-size: 14px;}
    .purchasing #section3 p br{display: none;}
    .purchasing #section3 h4 {font-size: 15px;}
    .purchasing #section3 h4 span {font-size: 20px;}
    .purchasing #section3 h4 span:before{height:10px}


    .trade #section1 .container{display: block;;}
    .trade #section1 .right_wrap { width: 100%; position: absolute; top: 4em; right: 0; z-index: 0; }
    .trade #section1 .right_wrap .img_cont > img{opacity: .4;}
    .trade #section1 .left_wrap { width: 100%; padding-top: 10em; position: relative;   z-index: 1;}
    .trade #section1 h4 { font-size: 16px; margin-bottom: 2em;}
    .trade #section1 h2 span:before {height: 13px;}
    .trade #section1 br{display: none;}
    .trade #section1 .stepper-item .step-name{font-size: 16px}
    .trade #section1 .stepper-item:nth-child(4) .onstop { top: -50px; width: auto;}
    .trade #section2 .stepbox.grid{display: none;}
    .trade #section2 .stepbox{margin-top:1em;}
    .trade #section2 .container{}
    .trade #section2 .stepbox_swiper .stepbox li{margin-bottom: 1em;}
    .trade #section2 .stepbox_swiper .stepbox li:after{display: none;}
    .trade #section2 .stepbox_swiper .stepbox li.aftericon:after { display: block; width: 40px;  height: 40px; background-image: url(../img/purchasing_sec2_icon_arrow_mo.png); position: absolute; top: auto; right: auto; transform: translate(-50%, 60%); bottom: 0; left: 50%; }
    .trade #section2 .stepbox li h5{font-size: 17px;}
    .trade #section2 h4 {font-size: 14px; letter-spacing: -0.3px;}
    .trade #section2 .stepbox{margin-top: 2em;}
    .trade #section2 .stepbox.grid{display: none;}
    .trade #section2 .swiper-pagination-bullet-active{background-color: #cc0606 !important;}
    .trade #section2 .swiper-horizontal>.swiper-pagination-bullets,
    .trade #section2 .swiper-pagination-bullets.swiper-pagination-horizontal{bottom: -14px !important;}

    .china #section1 .container{display: block;}
    .china #section1 .right_wrap {  width: 70%;position: absolute;top: 4em;right: 0em;z-index: 0;  }
    .china #section1 .right_wrap .img_cont .tip{display: none;}
    .china #section1 .right_wrap .img_cont > img{opacity: 1;}
    .china #section1 .left_wrap { width: 100%; padding-top: 18em; position: relative;   z-index: 1;}
    .china #section1 h4 { font-size: 14px; margin-bottom: 2em;;}
    .china #section1 h2 span:before {height: 13px;}
    .china #section1 br{display: none;}

    .china #section1 .stepper-item .step-name{font-size: 16px}
    .china #section1 .stepper-item:nth-child(4) .onstop { top: -50px; width: auto;}
    /*.china #section2 .container{padding-top: 6em;height:100%}*/
    .china #section2 .stepbox li{padding:1.5em;}
    .china #section2 .stepbox li .imgbox{width: 45px; height: 45px}
    .china #section2 .stepbox_swiper .stepbox li{margin-bottom: 1em;}
    .china #section2 .stepbox_swiper .stepbox li:after{display: none;}
    .china #section2 .stepbox_swiper .stepbox li.aftericon:after { display: block; width: 40px;  height: 40px; background-image: url(../img/purchasing_sec2_icon_arrow_mo.png); position: absolute; top: auto; right: auto; transform: translate(-50%, 60%); bottom: 0; left: 50%; }
    .china #section2 .stepbox li h5{font-size: 17px;    margin-top: 0.5em;}
    .china #section2 h4 {font-size: 16px;}
    .china #section2 .stepbox{margin-top: 2em;}
    .china #section2 .stepbox { grid-template-columns: 1fr 1fr; gap: 1em;}
    .china #section2 .stepbox li:after{display: none;}
    .china #section2 .stepbox li p { font-size: 14px; line-height: 1.3;}
    .china #section2 .stepbox li span{display: none;}

    .china #section3 .container{padding-top: 6em;}
    .china #section3 p.gray{font-size: 14px; line-height: 1.3;}
    .china #section3 p.gray span { font-size: 12px; line-height: 1.3; display: block; margin-top: 6px;}
    .china #section3 .china_table{grid-template-columns: repeat(1, 1fr); margin-top: 1em;}
    .china #section3 .china_table li { padding: 1em 0; display: flex; align-items: center; width: 100%; border-bottom: 1px solid #6f6f6f6e }
    .china #section3 .china_table li .china_tb_head{width: 26%; border: 0; padding: 0 1em}
    .china #section3 .china_table .china_tb_head::before{height: 30px; background: #6f6f6f6e}
    .china #section3 .china_table li .china_tb_head.last-child:before{display: block;}
    .china #section3 .china_table .china_tb_body{width:70%; border: 0; height: auto; text-align: left;    padding: 0 1em;}
    .china #section3 .china_table .china_tb_body p br{display: none}
    .china #section3 .china_table .china_tb_body .red span{font-size: 14px;}
    .china #section3 .china_table .china_tb_body p.price span {font-size: 20px;}
    .china #section3 .china_table .china_tb_body p span{font-size: 17px;}
    .china #section3 .china_table .china_tb_body p b br{display: none;}
    .china #section3 .china_table .china_tb_body p+.red { margin-top: 4px;}
    .china #section3 .china_table .china_tb_body .red { text-align: left; margin: inherit; position: relative; }
    .china #section3 .china_table .china_tb_body p { font-weight: 600; font-size: 14px; }
    .trade #section1 .step{margin-top:5em;}
}


@media screen and (max-width: 600px) {

    .dep_bg{height: 0}
    h2, .h2 { font-size: 2em; }
    header{height: 60px}
    #main{ min-height: -webkit-fill-available; height: 100vh; height: -webkit-fill-available; height: fill-available;}
    #fullpage .section{height:calc(var(--vh, 1vh) * 100); min-height: -webkit-fill-available; height: 100vh; height: -webkit-fill-available; height: fill-available;}
    #main #section1 .main_visual img { transform: none !important; transition: 3.5s 0.5s;  width: 100%; }
    #main #section1 .main_visual .txt-box {}
    #main #section1 .main_visual .swiper-slide-active .txt-box > p{font-size: 4vw}
    #main #section1 .main_visual .txt-box { height: 210px; top: 230px; left: 50%; position: absolute; /*transform: translate(-50%, 0);*/ width: 90%; }
    .main-swiper2 .mo .swiper-slide{height:calc(var(--vh, 1vh) * 100)}
    #main #section1 .main_visual .swiper-slide .txt-box > h1 { transform: translateY(20px); font-size: 7vw;}
    #main #section1 .main_visual .swiper-slide .txt-box > p { font-size: 4vw; transform: translateY(20px); }
    #main #section1 .main_visual .swiper-slide-active .txt-box > h1{ font-size: 7vw;}
    #main #section1 .main_visual .swiper-slide-active .txt-box > p {font-size: 4vw; }
    #main #section1 .main_visual .swiper-slide .txt-box.animate-slide > h1 { font-size: 7vw;}
    #main #section1 .main_visual .swiper-slide .txt-box.animate-slide > p {font-size: 4vw; }
    #main #section1 .main_visual .main-swiper2 .swiper-pagination { left: 1.5em;  top: 360px;}
    #main #section2 .cont-area .servicebox h4{margin-bottom: 4px;}
    #main #section3 .cont-area .support_swiper .swiper-slide .swiper_img{width: 70%; height: 180px}
    #main #section6 .location .tit-area{padding: 3em;}
    /*#main #section6 .location .tit-area{ transform: translate(5%, -10%);}*/
    #main #section6 .location #map{background-position: center center}
    .trade #section2 .stepbox li p{font-size: 14px}
    .research #section3 form input[type='text'], .research #section3 form input[type='password'],
    .research #section3 form  select, .research #section3 form input[type="file"]{line-height: 40px; height: 40px;}
    .research #section3 form ul li:nth-last-child(2), .research #section3 form ul li:nth-last-child(3){ width: 44%; margin-right: 14px;}
    .china #section1 .left_wrap{padding-top: 0}
    .china #section1 .right_wrap{top: -130px; }
    .china #section2 .stepbox li .imgbox { width: 35px; height: 35px; }
    .china #section2 .tit{margin-top: 2em}
    .china #section3 .container{padding-top: 0}
    .china #section3 .china_table .china_tb_body p.price span{font-size: 17px}
    .purchasing #section1 .left_wrap h2{margin-top:0}
    .purchasing #section1 .left_wrap{padding-top: 2em}
    .purchasing #section1 .right_wrap{top: 0}
    .purchasing #section1 .step{margin-top: 3em}
    .purchasing #section2 .stepbox li .imgbox, .trade #section2 .stepbox li .imgbox, .china #section2 .stepbox li .imgbox{ width: 50px; height: 50px;}
    .purchasing #section2 .stepbox li img, .trade #section2 .stepbox li img, .china #section2 .stepbox li img { width: auto; height: 20px; }
    .purchasing #section3 .container{padding-top:6em;}
    .purchasing #section3 .cont-area{height: 45vh}
    .purchasing #section3 .cont-area .support_swiper{height: 45vh}
    .purchasing #section3 .cont-area .support_swiper .swiper-slide .swiper_img{height: 100px}
    #sub #section2 .stepbox li h5{margin-top: 0}
    #sub #section1 p{font-size: 13px; padding:0; word-break: break-all;}
    #sub #section1 h4 { font-size: 16px;}
    #sub #section2 .stepbox li h5 { font-size: 15px; margin-top: 0.5em; }

}