@charset "utf-8";

/* Open API 상단 이미지 */
.openapi-top {
	position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
	height: 310px;
	padding: 50px 0 0 70px;
	background: url("../img/api_TopBg.jpg") no-repeat center right/cover;
	color: #fff;
}

.openapi-top em {
    line-height: 1.4;
	font-size: 2.4rem;
	font-weight: var(--font-weight-semibold);
}

.openapi-top span {
	font-size: 1.8rem;
	font-weight: var(--font-weight-light);
}


/* Open API 콘텐츠 4개 */
.openapi-conlink {
	position: relative;
}

.openapi-conlink ul li {
    position: relative;
    flex-grow: 1;
    width: 25%;
}

.openapi-conlink ul li.mlink1 {
	background-color: #007DC6;
}

.openapi-conlink ul li.mlink2 {
	background-color: #003775;
}

.openapi-conlink ul li.mlink4 {
	background-color: #DA2128;
}

.openapi-conlink ul li.mlink3 a {
	border-top: 1px solid var(--color-gray-light);
	border-bottom: 1px solid var(--color-gray-light);
    color: var(--color-basic);
}

.openapi-conlink ul li a {
	display: block;
	height: 300px;
	padding: 40px 30px;
	color: var(--color-white);
}

.openapi-conlink ul li a em,
.openapi-conlink ul li a span,
.openapi-conlink ul li a strong,
.openapi-conlink ul li a small {
	display: block;
}

.openapi-conlink ul li a .tit {
	margin-bottom: 10px;
	font-size: 1.6rem;
	font-weight: var(--font-weight-bold);
}

.openapi-conlink ul li a .txt {
    line-height: 1.4;
	font-size: 2rem;
    font-weight: var(--font-weight-light);
}

.openapi-conlink ul li a .gobtn {
	position: absolute;
	bottom: 40px;
	left: 30px;
	width: 138px;
	height: 34px;
	line-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--color-white);
	font-size: 1.2rem;
}

.openapi-conlink ul li a .gobtn .arrow {
	position: absolute;
	top: 0;
	right: 10px;
}

.openapi-conlink ul li a .plusmark {
	position: absolute;
	bottom: 30px;
	right: 50px;
	width: 2px;
	height: 40px;
	background-color: var(--color-white);
}

.openapi-conlink ul li a .plusmark:after {
	position: absolute;
	bottom: 19px;
	right: -19px;
	width: 40px;
	height: 2px;
	background-color: var(--color-white);
	content: '';
}

.openapi-conlink ul li a .ico {
	position: absolute;
	bottom: 10px;
	left: 30px;
	opacity: 0.3;
	font-size: 9rem;
}

.openapi-conlink ul li.mlink3 a .ico {
	left: auto;
	right: 30px;
	opacity: 0.1;
}

.openapi-conlink ul li a strong {
	font-size: 2.2rem;
}

.openapi-conlink ul li a .statcount {
	margin-top: 10px;
	font-size: 1.4rem;
}

.openapi-conlink ul li a small {
	margin-top: 10px;
    font-size: 1.2rem;
    color: var(--color-gray);
}


/* OpenAPI 활용사례 공유 */
.openapi-exam {
	position: relative;
	padding-left: 25%;
}

.openapi-exam h3 {
	position: absolute;
	top: 10px;
	left: 30px;
}

.openapi-exam h3 strong {
	font-size: 3.6rem;
}

.openapi-exam h3 span {
	font-size: 2.4rem;
    font-weight: var(--font-weight-light);
}

.openapi-exam h3 a {
	position: absolute;
	top: 110px;
	left: 0;
	display: block;
	width: 138px;
	height: 34px;
	line-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--color-blue-deep);
	font-size: 1.2rem;
}

.openapi-exam h3 a .arrow {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 1.2rem;
}

.openapi-exam .openapi-slide {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-gray-light);
}

.openapi-exam .openapi-slide ul li {
	border-left: 1px solid var(--color-gray-light);
}

.openapi-exam .openapi-slide ul li.swiper-slide-active {
	border-left: none;
}

.openapi-exam .openapi-slide ul li a {
	display: flex;
    flex-direction: column;
	padding: 20px 30px;
}

.openapi-exam .openapi-slide ul li a .pic {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 108px;
}

.openapi-exam .openapi-slide ul li a .pic img {
	max-height: 60px;
}

.openapi-exam .openapi-slide ul li a .tit {
	font-weight: var(--font-weight-bold);
	font-size: 1.8rem;
}

.openapi-exam .openapi-slide ul li a .agency {
	overflow: hidden;
	margin-top: 5px;
	color: var(--color-gray);
}

.openapi-exam .openapi-slide ul li a .txt {
	overflow: hidden;
	height: 66px;
	margin-top: 10px;
    font-size: 1.4rem;
	color: var(--color-gray);
}

.openapi-exam .swiper-arrow {
	position: absolute;
	bottom: 0;
	width: 50px;
	height: 50px;
	line-height: 48px;
	border: 1px solid rgba(0,0,0,0.1);
	text-align: center;
	font-size: 3rem;
	cursor: pointer;
}

.openapi-exam .swiper-arrow:hover {
	border-color: rgba(0,0,0,0.2);
	background-color: rgba(var(--color-basic-rgb),0.03);
}

.openapi-exam .swiper-arrow.swiper-prev {
	left: 30px;
}

.openapi-exam .swiper-arrow.swiper-next {
	left: 79px;
}





/* -------------------------------- */
/* -------------------------------- */
@media(max-width: 1440px) {
	
 	
}
@media(max-width:  1340px) {

	
}
@media(max-width:  1300px) {
	.openapi-conlink ul li a .txt{font-size:1.8rem;}
}

@media(max-width:  1200px) {
	.openapi-top{padding:40px; background-position:30% 50%;}
	
	.openapi-conlink ul{display:inline-block !important;}
	.openapi-conlink ul li{float:left; width:50%;}
	.openapi-conlink ul li a{height:260px; padding: 20px 30px}
	.openapi-conlink ul li.mlink3 a {border-left: 1px solid var(--color-gray-light);}
	.openapi-conlink ul li .txt br{display:none;}
	
	.openapi-exam .openapi-slide{clear:both;}
	.openapi-exam .openapi-slide ul li{height:auto;}
	.openapi-exam .openapi-slide ul li a{padding:10px 20px;}
	
}

@media(max-width:  1024px) {
	
	.openapi-exam{position:relative; padding-left:0%; padding-top:60px;}
	.openapi-exam h3{left:0; top:0; display:flex; flex-wrap:wrap; gap:0 20px; align-items: center;}
	.openapi-exam h3 br{display:none;}
	.openapi-exam h3 a{position: relative; left: auto; top: auto;}
	.openapi-exam .openapi-slide{height:300px;}
	.openapi-exam .swiper-prev{top:0; right:49px !important; left:auto !important;}
	.openapi-exam .swiper-next{top:0; right:0 !important; left:auto !important;}
	
}

@media(max-width:  978px) {
	.openapi-top{height:auto; background-position:0 ;}
	.openapi-top em{font-size:2rem;}
	.openapi-top em br{display:none;}
	.openapi-top span{font-size:1.5rem;}
	.openapi-exam h3{gap:0 15px;}
	.openapi-exam h3 strong{font-size:2.5rem;}
	.openapi-exam h3 span{font-size:1.6rem;}
	
}

@media(max-width:  768px) {
	.openapi-top{height:auto; padding: 20px 30px;}
	.openapi-top em{font-size:1.8rem;}
	.openapi-top em br{display:none;}
	.openapi-top span{font-size:1.4rem;}
	.openapi-exam{ padding-top: 40px; padding-bottom: 70px;}
	.openapi-exam h3 strong{font-size:2rem;}
	.openapi-exam h3 a{left: 0; top: 275px; position: absolute;}
	.openapi-conlink ul li{width:100%;}
	.openapi-conlink ul li a {height:auto; min-height:180px;}
	.openapi-conlink ul li:nth-child(3) a {height:auto; border-right: 1px solid var(--color-gray-light);}
	.openapi-conlink ul li a .ico{font-size:5rem;}
	.openapi-conlink ul li a .txt{font-size: 1.4rem;}
	.openapi-conlink ul li a strong{font-size: 1.6rem;}
	.openapi-exam .openapi-slide,
	.openapi-exam .openapi-slide ul li{height:200px;}
	.openapi-exam .openapi-slide ul li a .tit,
	.openapi-exam .openapi-slide ul li a .txt{display:none !important;}
	.openapi-exam .swiper-prev{top:auto; bottom:0;}
	.openapi-exam .swiper-next{top:auto; bottom:0;}
	

}