@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 432 / var(--inner) * 100vw ), 432px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 432 / var(--inner) * 100vw ), 432px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"HK TRADING CO., LTD"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:12px; margin-top:10px; line-height:1.3; color: #454545;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height:3px; border-radius: 50%; background:var(--color-2);}

.bg-gray {background:#fafafa;}
.bg-sub {background:#f6faff;}
.subpd {margin: clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px) 0;}

.greetwrap .textbx {padding-top: clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); text-align: center;}
.greetwrap .title {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold;color:#124b9e;}
.greetwrap .decbx {padding-top: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px);}
.greetwrap .dec {color: #454545; line-height: 1.6;}
.greetwrap .dec + .dec {padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.greetwrap .lastdec {padding-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); font-weight: 600;}

.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:var(--color-2); font-weight:600; margin-bottom:5px;}
.directions .address-info .addr {color:#242424; font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:10px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:28px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:rgba(6, 111, 255, 0.5);}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

@media (max-width: 1024px) {
	.root_daum_roughmap .wrap_map {height:300px !important;}
	.directions .address-info .addr {font-size:20px;}
	.directions .contact-info dl {padding:20px 0;}
	.directions .contact-info dt {padding-left:20px; width:140px;}
}

@media (max-width: 640px) {
	.root_daum_roughmap .wrap_map {height:250px !important;}	
	.directions {margin-top:30px;}
	.directions .address-info .addr {font-size:18px;}
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dl {padding:16px 0;}
	.directions .contact-info dt {padding-left:5px; width:110px;}
	.directions .contact-info dt svg {margin-right:10px;}
}

.pdslidewrap {position: relative;padding-bottom: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);max-width: 1400px;width: 100%; margin: 0 auto;}
.pdslidewrap .swiper-pagination {bottom: 0;top:initial;}
.pdslidewrap .btn-arrow {top: 40%; margin-top: 0; width:clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px); height:clamp(30px, calc( 48 / var(--inner) * 100vw ), 48px); border-radius:50%;border: 0;}
.pdslidewrap .swiper-button-next {background:url(../images/sub/subright.png) no-repeat 50% 50%/contain; }
.pdslidewrap .swiper-button-next:hover {background:url(../images/sub/subrighton.png) no-repeat 50% 50%/contain; }
.pdslidewrap .swiper-button-prev {background:url(../images/sub/subleft.png) no-repeat 50% 50%/contain; }
.pdslidewrap .swiper-button-prev:hover {background:url(../images/sub/sublefton.png) no-repeat 50% 50%/contain; }
.pdslidewrap .swiper-pagination-bullet {width: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); height: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px); background: #bfbfbf; opacity: 1;}
.pdslidewrap .swiper-pagination-bullet-active {background: #606060;}

.bgpd {padding: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 0;}
.bgpd .title {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.bgpd .title + .bullet-item {padding-top: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.incontent + .incontent {padding-top: clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px);}
.incontent .contit {margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); padding-left: clamp(22px, calc( 26 / var(--inner) * 100vw ), 26px);position: relative; font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.incontent .contit:after {position: absolute; content: ''; left: 0; top:50%; transform: translateY(-50%); width:  clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); height:  clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); border:  clamp(3px, calc( 4 / var(--inner) * 100vw ), 4px) solid var(--color-2);border-radius: 50%;}
.numitem {display: flex; flex-wrap: wrap;margin: -6px -22px;}
.numlist {flex: 1 0 33.33%; max-width: 33.33%; padding: 6px 22px;}
.numlist .inner {display: flex; align-items: center; padding: 12px 10px; background: #f5f5f5; border-radius: 28px;height: 60px;}
.numlist .number {margin-right: 12px; flex: 1 0 33px; max-width: 33px; border-radius: 50%; line-height: 33px; text-align: center;background: var(--color-2);color: #fff;font-weight: 600;}
.numlist .text {flex: 1 0 auto; width: 1%; color: #454545;}
.downtext {padding:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); background: #f5f5f5;border-radius: 50px;}
.downtext .dwinner {display: flex; align-items: center;justify-content: space-between; flex-wrap: wrap;}
.downtext .text {color: #454545; font-weight: 600;}
.downtext .name {display: inline-block; padding-right: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);}
.downitem {display: flex;flex-wrap: wrap;margin:-5px;}
.downlist {padding: 5px;}
.downlist .link {display: flex; align-items: center; justify-content: center;padding: 0 10px; min-width: clamp(120px, calc( 130 / var(--inner) * 100vw ), 130px); height: clamp(32px, calc( 40 / var(--inner) * 100vw ), 40px); border-radius: 20px;color: #fff;}
.downlist .link .tt {display: inline-block; margin-right:8px;font-size: clamp(13px, calc( 15 / var(--inner) * 100vw ), 15px); letter-spacing: -0.4px;}
.downlist .link svg {width: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); height: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #fff;}
.downlist .bg1 {background: #004098;}
.downlist .bg2 {background: var(--color-2);}
.downlist .bg3 {background: #24b1e5;}
.downlist .bg4 {background: #66a4f8;}

.techitem {display: flex; flex-wrap: wrap; margin:-30px -16px;}
.techlist {flex:1 0 25%; max-width: 25%; padding: 30px 16px;}
.techlist .title {margin-bottom:clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px); font-size:clamp(16px, calc( 28 / var(--inner) * 100vw ), 28px);font-weight: bold;}
.techlist .thumb {position:relative; padding-bottom:108.69%; overflow:hidden;}
.techlist .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.techlist .linklist {display: flex; justify-content: center;align-items: center;padding:clamp(12px, calc( 18 / var(--inner) * 100vw ), 18px) 10px;background:var(--color-2); color: #fff; height: 59px;}
.techlist .name {display: inline-block; padding-right: 5px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; letter-spacing: -0.5px;text-align: center;}
.techlist svg {width: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); height: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px);}
.linkbx.type2 {display: flex;flex-wrap: wrap;}
.linkbx.type2 .linklist {flex: 1 0 33.33%; max-width: 33.33%;flex-direction: column; padding: 5px 0;}
.linkbx.type2 .linklist.bg1 {background: #004098;}
.linkbx.type2 .linklist.bg2 {background: var(--color-2);}
.linkbx.type2 .linklist.bg3 {background: #24b1e5;}
.linkbx.type2 .name {display: block;padding-right: 0; padding-bottom: 2px;font-size: clamp(12px, calc( 15 / var(--inner) * 100vw ), 15px);}
.linkbx.type2 svg {width: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); height: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px);}