@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
html, body { margin:0; padding:0; height:100%; font-size: 16px;}
body { font-family:'Noto Sans KR', sans-serif; }
p {margin:0;}

.pc {width:100%; height: auto; margin:0; padding:0;}
.pc .garda1 { width:100%; aspect-ratio: 2.107574 / 1; position: relative; background: url('../img/en_gardasil_bg1.jpg') no-repeat center center; background-size: cover;}
.pc .garda1 .main_title {position: absolute; top: 33%; left: 17.5%;}
.pc .garda1 .main_title p {font-size: 4vw; color: white; font-family: "Black Han Sans";}
.pc .garda1 .main_title p span {color: #B1EB02;}
.pc .garda1 .main_title .sub_title p {font-size: 1.05vw; font-family: "Noto Sans KR";}
.pc .garda1 .main_title .sub_title p span {color: white; font-weight: 600;}
.pc .garda2 { width:100%; min-height: 1000px; margin:0; padding:0; display:flex; justify-content:center;}
.pc .garda2 .cont {width:1080px; height: auto; margin-top: 150px; margin-bottom: 100px;}
.pc .garda2 .cont .img_box{width:100%; display:flex; justify-content:center; align-items:end;}
.pc .garda2 .cont .line_box {width:100%; margin-top: 60px; border-top: 1px solid #c7c7c7;}
.pc .garda2 .cont .even {background-color:#f7fde5;}
.pc .garda2 .cont .faq_box {width:100%; padding: 60px 0; text-align:center; border-bottom:1px solid #c7c7c7;}
.pc .garda2 .cont .faq_box .faq_que h1{font-size: 24px; font-weight:600}
.pc .garda2 .cont .faq_box .faq_ask {margin-top:40px;}
.pc .garda2 .cont .faq_box .faq_ask p {font-size: 20px; line-height: 1.8; letter-spacing: -0.8px;}
.pc .garda2 .cont .faq_box .faq_ask p span {font-size: 17px; color: #828282; line-height: 1.8; letter-spacing: -0.8px;}
.pc .garda3 { width:100%; aspect-ratio: 1.553398 / 1; position: relative; background: url('../img/en_gardasil_bg3.jpg') no-repeat center center; background-size: cover;}
.pc .garda3 .main_title {position: absolute; top: 13%; width:100%; text-align:center;}
.pc .garda3 .main_title p {color: white; font-size: 3.35958vw;}
.pc .garda3 .sub_title {position: absolute; top: 22%; width: 100%; text-align:center;}
.pc .garda3 .sub_title p {color: white; font-size: 1.364829vw;}
.pc .garda3 .middle_text {position: absolute; top: 35%; width:100%; text-align:center;}
.pc .garda3 .middle_text p {color: white; font-size: 3.35958vw;}
.pc .garda3 .cont_text1 {position: absolute; top: 62%; left: 22.7%; text-align:center;}
.pc .garda3 .cont_text1 p {font-size: 1.049869vw;}
.pc .garda3 .cont_text1 span {font-size: 1.364829vw; font-weight: 600;}
.pc .garda3 .cont_text2 {position: absolute; top: 62%; left: 45.5%; text-align:center;}
.pc .garda3 .cont_text2 p {font-size: 1.049869vw;}
.pc .garda3 .cont_text2 span {font-size: 1.364829vw; font-weight: 600;}
.pc .garda3 .cont_text3 {position: absolute; top: 63%; left: 70%; text-align:center;}
.pc .garda3 .cont_text3 p {font-size: 1.049869vw;}
.pc .garda3 .cont_text3 span {font-size: 1.364829vw; font-weight: 600;}
.pc .garda3	.bot_text {position: absolute; top: 82%; text-align:center; width:100%;}
.pc .garda3	.bot_text p{color:white; font-size: 1.049869vw;}
.pc .garda4 { width:100%; aspect-ratio: 2.594595 / 1; position: relative; background: url('../img/en_gardasil_bg4.gif') no-repeat center center; background-size: cover;}
.mo {display:none;}

@media screen and (max-width: 768px) {
	.pc {display:none;}
	.mo {display:block;}
	.mo .garda1 { width:100%; aspect-ratio: 0.624277 / 1; position: relative; background: url('../img/m_en_gardasil_bg1.jpg') no-repeat center center; background-size: cover;}
	.mo .garda1 .main_title {position: absolute; top: 15%; left: 5%;}
	.mo .garda1 .main_title p {font-size: 10.23256vw; letter-spacing: -0.3488vw; color: white; font-family: "Black Han Sans";}
	.mo .garda1 .main_title p span {color: #B1EB02;}
	.mo .garda1 .sub_title {position: absolute; top: 35%; left: 5%;}
	.mo .garda1 .sub_title p {font-size: 4.651163vw; color: white; font-family: "Noto Sans KR"; letter-spacing: -0.23256vw;}
	.mo .garda1 .sub_title p span {font-weight: 600;}
	.mo	.garda2 {width:100%; min-height: 1000px; display:flex; justify-content:center; position:relative;}
	.mo	.garda2 .cont{width: 95%; height: auto; padding: 120px 0;}
	.mo	.garda2 .cont .img_box{width:100%; display:flex; justify-content:center; align-items:end;}
	.mo	.garda2 .cont .img_box img {width:80%; height: auto;}
	.mo	.garda2 .cont .line_box {width:100%; margin-top: 60px; border-top: 1px solid #c7c7c7;}
	.mo	.garda2 .cont .even {background-color:#f7fde5;}
	.mo	.garda2 .cont .faq_box {width:100%; padding: 60px 0; text-align:center; border-bottom:1px solid #c7c7c7;}
	.mo	.garda2 .cont .faq_box .faq_que h1{font-size: 4.883721vw; font-weight:600}
	.mo	.garda2 .cont .faq_box .faq_ask {margin-top:40px;}
	.mo	.garda2 .cont .faq_box .faq_ask p {font-size: 3.953488vw; line-height: 1.8; letter-spacing: -0.8px;}
	.mo	.garda2 .cont .faq_box .faq_ask p span {font-size: 3.255814vw; color: #828282; line-height: 1.8; letter-spacing: -0.8px;}
	.mo .garda3 { width:100%; aspect-ratio: 0.243517 / 1; position: relative; background: url('../img/m_en_gardasil_bg3.jpg') no-repeat center center; background-size: cover;}
	.mo .garda3 .main_title {position: absolute; top: 7.5%; width:100%; text-align:center;}
	.mo .garda3 .main_title p {color: white; font-size: 9.302326vw;}
	.mo .garda3 .sub_title {position: absolute; top: 12%; width: 100%; text-align:center;}
	.mo .garda3 .sub_title p {color: white; font-size: 4.186047vw;}
	.mo .garda3 .middle_text {position: absolute; top: 26%; width:100%; text-align:center;}
	.mo .garda3 .middle_text p {color: white; font-size: 9.302326vw; font-weight:500;}

	.mo .garda3 .cont_text1 {position: absolute; top: 44%; left: 34.5%; text-align:center;}
	.mo .garda3 .cont_text1 p {font-size: 4.186047vw; line-height:1.2;}
	.mo .garda3 .cont_text1 span {font-size: 4.651163vw; font-weight: 600; line-height: 1.4;}

	.mo .garda3 .cont_text2 {position: absolute; top: 61%; left: 34.5%; text-align:center;}
	.mo .garda3 .cont_text2 p {font-size: 4.186047vw; line-height:1.2;}
	.mo .garda3 .cont_text2 span {font-size: 4.651163vw; font-weight: 600; line-height: 1.4;}

	.mo .garda3 .cont_text3 {position: absolute; top: 78%; left: 35.5%; text-align:center;}
	.mo .garda3 .cont_text3 p {font-size: 4.186047vw; line-height:1.2;}
	.mo .garda3 .cont_text3 span {font-size: 4.651163vw; font-weight: 600; line-height: 1.4;}
	.mo .garda3	.bot_text {position: absolute; top: 86.5%; text-align:center; width:100%;}
	.mo .garda3	.bot_text p{color:white; font-size:3.023256vw;}
	.mo .garda4 { width:100%; aspect-ratio: 0.488246 / 1; position: relative; background: url('../img/m_en_gardasil_bg4.gif') no-repeat center center; background-size: cover;}
}