/* ========================================================
*
* File: rwd-style.css; ( Responsive web design )
* Version: 1.0.0
* Last update: 2024-12-12 황현식
*
* ======================================================== */

.self > .container > .details
{ padding: 0 20px; }

/* TOP BNN */
.top-bnn
{ align-items: center; }
.top-bnn > .row2 > h1
{ font-size: 65px; font-weight: 900; color: var(--txt-color9); }
.top-bnn > .row2 > h3
{ font-size: 32px; font-weight: 800; color: var(--default-color2); }
.top-bnn > .row2 > p
{ font-size: 16px; font-weight: 500; color: var(--txt-color9); line-height: 24px; }
.top-bnn > .row2 > p.counter
{ margin-top: 20px; font-size: 22px; font-weight: 700; color: var(--txt-color9); }
.top-bnn > .row2 > p.counter > span
{ color: var(--default-color2); }


@media (max-width: 1280px) {
	.intro-banner .container .banner-content
	{ padding: 6% 0 6% 7.2%; background-position: calc(100% - 0px) 100%; background-size: 40% auto; }

	.banner-list .container > ul > li .box
	{ height: auto; padding: 4.2rem 3.3rem 4.6rem 6.6rem; border-radius: 20px; background-color: #f7f8f8; background-size: auto auto; background-repeat: no-repeat; }
	.banner-list .container > ul > li .box .box-top h3
	{ color: #211815; }

	.banner-list .container > ul > li > .box > .box-top > h3 > br:nth-child(1),
	.banner-list .container > ul > li > .box > .box-top > h3 > br:nth-child(4)
	{ display: none; }

	.self > .container > .details
	{ padding: 0 50px; }
	.self > .container > .item-img
	{ width: 40%; }

	.intro-banner .container .banner-content strong,
	.banner-list .container > ul > li > .box .box-top h3,
	.self > .container > div.details > h3,
	.custom > .container > div.details > h3,
	.service > .container > div.details > h3,
	.solve > .container > div.details > h3
	{ font-size: 4.2rem; line-height: 5.4rem; font-weight: 500; }

	.intro-banner .container .banner-content p,
	.banner-list .container > ul > li > .box > p,
	.self > .container > div.details > p,
	.custom > .container > div.details > p,
	.service > .container > div.details > p,
	.solve > .container > div.details > p
	{ font-size: 2.2rem; line-height: 3.2rem; margin-top: 1.8rem; }
}
@media (max-width: 1024px) {

	.top-bnn > .row2 > h1
	{ font-size: 50px; }
	.top-bnn > .row2 > h3
	{ font-size: 28px; }
	.top-bnn > .row2 > p
	{ font-size: 17px; line-height: 22px; }


	.intro-tab .container > ul > li > a
	{ font-size: 19px; padding: 5px 10px; }

	.intro-banner .container .banner-content
	{ padding: 6% 0 6% 6.6%; background-position: calc(100% - 0px) 100%; background-size: 35% auto; }

	.banner-list .container > ul > li .box
	{ padding: 2.6rem 3.0rem 3.2rem 5.0rem; }

	.banner-list .container > ul > li > .box
	{ background-size: 19rem auto; }
	.banner-list .container > ul > li:nth-of-type(1) > .box > .box-top > h3 > br:nth-child(3),
	.banner-list .container > ul > li:nth-of-type(2) > .box > .box-top > h3 > br:nth-child(2)
	{ display: block; }

	.self .container > div
	{ display: block; width: 100%; padding: 0 30px !important; }
	.self .container > div > h3 > br,
	.self .container > div > p > br
	{ display: none; }

	.self > .container > .item-img
	{ width: 40%; }
	.custom > .container > .item-img,
	.service > .container > .item-img
	{ width: 50%; margin: 0 auto; }
	.solve > .container > div.details
	{ margin-top: 30px; }

	.custom > .container > div.details > h3,
	.custom > .container > div.details > p,
	.service > .container > div.details > h3,
	.service > .container > div.details > p,
	.solve > .container > div.details > h3,
	.solve > .container > div.details > p
	{ text-align: center; }
	.custom > .container > div.details > h3 > br,
	.custom > .container > div.details > p > br,
	.service > .container > div.details > h3 > br,
	.service > .container > div.details > p > br,
	.solve > .container > div.details > h3 > br,
	.solve > .container > div.details > p > br
	{ display: none; }

	.intro-banner .container .banner-content strong,
	.banner-list .container > ul > li > .box .box-top h3,
	.self > .container > div.details > h3,
	.custom > .container > div.details > h3,
	.service > .container > div.details > h3,
	.solve > .container > div.details > h3
	{ font-size: 3.4rem; line-height: 3.9rem; }

	.intro-banner .container .banner-content p,
	.banner-list .container > ul > li > .box > p,
	.self > .container > div.details > p,
	.custom > .container > div.details > p,
	.service > .container > div.details > p,
	.solve > .container > div.details > p,
	.content-details > .container > ol > li > .box > p
	{ font-size: 2.2rem; line-height: 2.6rem; margin-top: 1.6rem; }

	.banner-list .container > ul > li .box p 
	{ width: 75%; }
}

@media (max-width: 992px) {

	.top-bnn > .row2 > h1
	{ font-size: 44px; }
	.top-bnn > .row2 > h3
	{ font-size: 24px; }
	.top-bnn > .row2 > p
	{ font-size: 17px; line-height: 22px; }

	.intro-banner .container .banner-content
	{ padding: 5.3% 0 5.3% 6.2%; background-position: 100% 100%; background-size: 30rem auto; }
	.banner-list .container > ul > li > .box
	{ background-size: 16rem auto; }
	.self .container > div.item-img
	{ margin: 0 auto; text-align: center; width: 40%; padding: 30px 20px !important; }
}

@media (max-width: 767px) {

	.top-bnn
	{ padding: 10px 0; }

	.top-bnn > .row2 > h1
	{ font-size: 44px; }
	.top-bnn > .row2 > h3
	{ font-size: 24px; }
	.top-bnn > .row2 > p
	{ font-size: 18px; line-height: 22px; }

	.top-bnn > .row2 > h1,
	.top-bnn > .row2 > h3,
	.top-bnn > .row2 > p
	{ text-align: center; }


	.intro-tab .container > ul > li > a
	{ font-size: 17px; line-height: 34px; }

	.intro-banner .container .banner-content
	{ padding: 5.3%; background-position: 100% 100%; background-size: 24rem auto; }

	.banner-list .container > ul > li > .box
	{ padding: 2.0rem 3.0rem 1.6rem; background-size: 12rem auto; }
	.banner-list .container > ul > li:nth-of-type(1) > .box
	{ background-position: calc(100% - 30px) 0; }
	.banner-list .container > ul > li:nth-of-type(2) > .box
	{ background-position: calc(100% - 40px) 50%; }

	.banner-list .container > ul > li > .box > .box-top > h3 > br:nth-child(2)
	{ display: block; }

	.self .container > div.item-img
	{ margin: 0 auto; text-align: center; width: 60%; padding: 30px 20px !important; }

	.custom > .container > .item-img
	{ width: 60%; margin: 0 auto; }

	.intro-banner .container .banner-content strong,
	.banner-list .container > ul > li > .box .box-top h3,
	.self > .container > div.details > h3,
	.custom > .container > div.details > h3,
	.service > .container > div.details > h3,
	.solve > .container > div.details > h3
	{ font-size: 2.4rem; line-height: 3.0rem; }

	.intro-banner .container .banner-content p,
	.banner-list .container > ul > li > .box > p,
	.self > .container > div.details > p,
	.custom > .container > div.details > p,
	.service > .container > div.details > p,
	.solve > .container > div.details > p
	{ font-size: 16px; line-height: 23px; margin-top: 1.3rem; }

	.content-details > .container > ol > li > .box > p
	{ font-size: 18px; line-height: 23px; margin-top: 1.3rem; }

	.custom > .container > div.details > h3,
	.service > .container > div.details > h3,
	.solve > .container > div.details > h3,
	.custom > .container > div.details > p,
	.service > .container > div.details > p,
	.solve > .container > div.details > p
	{ padding: 0 10px; }

	.banner-list .container > ul > li .box p 
	{ width: 80%; }
}

@media (max-width: 575px) {

	.top-bnn > .row2 > h1
	{ font-size: 44px; }
	.top-bnn > .row2 > h3
	{ font-size: 24px; }
	.top-bnn > .row2 > p
	{ font-size: 18px; line-height: 22px; }

	.top-bnn > .row2 > h1,
	.top-bnn > .row2 > h3,
	.top-bnn > .row2 > p
	{ text-align: center; }


	.intro-tab .container > ul > li > a
	{ font-size: 14px; padding: 4px 10px; line-height: 30px; }

	.intro-banner .container .banner-content
	{ padding: 3.2rem 3.2rem 18.0rem; background-position: 50% 100%; }
	.intro-banner .container .banner-content strong > br
	{ display: none; }

	.banner-list .container > ul > li > .box
	{ padding:  0 2.6rem 18.0rem; background-size: 15rem auto; }

	.banner-list .container > ul > li:nth-of-type(1) > .box
	{ background-position: 50% calc(100% + 100px); }
	.banner-list .container > ul > li:nth-of-type(2) > .box
	{ background-position: 50% calc(100% + 10px); }

	.banner-list .container > ul > li > .box > p
	{ width: 100%; }

	.banner-list .container > ul > li > .box > .box-top > h3 > br:nth-child(1),
	.banner-list .container > ul > li > .box > .box-top > h3 > br:nth-child(2),
	.banner-list .container > ul > li > .box > .box-top > h3 > br:nth-child(3),
	.banner-list .container > ul > li > .box > .box-top > h3 > br:nth-child(4)
	{ display: none; }
	.banner-list .container > ul > li > .box > p > br
	{ display: none; }

	.custom > .container > .item-img
	{ width: 80%; margin: 0 auto; }


	.intro-banner .container .banner-content strong,
	.intro-banner .container .banner-content p,
	.banner-list .container > ul > li > .box .box-top h3,
	.banner-list .container > ul > li > .box > p,
	.self > .container > div.details > h3,
	.self > .container > div.details > p,
	.custom > .container > div.details > h3,
	.custom > .container > div.details > p,
	.service > .container > div.details > h3,
	.service > .container > div.details > p,
	.solve > .container > div.details > h3,
	.solve > .container > div.details > p,
	.content-details > .container > ol > li > .box > p
	{ text-align: center; }

	.intro-banner .container .banner-content strong,
	.banner-list .container > ul > li > .box .box-top h3,
	.self > .container > div.details > h3,
	.custom > .container > div.details > h3,
	.service > .container > div.details > h3,
	.solve > .container > div.details > h3
	{ font-size: 2.4rem; line-height: 3.0rem; }

	.intro-banner .container .banner-content p,
	.banner-list .container > ul > li > .box > p,
	.self > .container > div.details > p,
	.custom > .container > div.details > p,
	.service > .container > div.details > p,
	.solve > .container > div.details > p
	{ font-size: 17px; line-height: 23px; margin-top: 1.3rem; }

	.banner-list .container > ul > li .box p 
	{ width: 92%; }
}














.sub-tab > ul > li > a
{ font-weight: 500; }


@media (max-width: 1024px) {
	.sub-tab > ul > li > a
	{ display: block; color: #000; font-size: 21px; line-height: 54px; font-weight: bold; border-radius: 10px; background-color: #fff; }
}

@media (max-width: 767px) {
	.sub-tab > ul > li > a
	{ font-size: 18px; line-height: 44px; }
}

@media (max-width: 575px) {
	.sub-tab > ul > li > a
	{ font-size: 16px; line-height: 40px; }
}