@charset "utf-8";
@import url("https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
		/* Material Icons Outlined*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');
body {position: relative; height: 100%; font-family: 'Noto Sans KR', sans-serif; background-color: rgb(250, 250, 250);}
* {margin: 0; padding: 0; text-decoration: none;
/* outline: solid red 1px; */
}
li{list-style: none;}
button{background: none; border: none; font-size: 19px; font-weight: 600; color:#2997ff;}
.head{display: flex; align-items: center; position: fixed; width: 100%; height: 50px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); z-index: 1000;  font-weight: 300; border-bottom: solid rgb(207, 207, 207) 1px;}
.mheadtitle{display: none;}
.logo{display: none; width: 60px; height: 40px;}
.headinner{display: flex; justify-content: space-between; align-items: center; width: 1200px; margin: 0 auto;}
.pro13{font-size: 1.2em; font-weight:500; color: black;}
.nav{display: flex; align-items: center; font-size: 13px;}
.nav a{color: rgb(10, 10, 10);}
.nav a::after{ content: "";
    width: 1px;
    height: 11px;
    background: rgb(0, 0, 0);
    display: inline-block;
    margin: 0 20px;}
    .nav li:last-child a::after{display: none;}
.testsec{display: none; overflow: hidden;}
.mnav{display: none;}
.head button{display: none;}

.head2{position: absolute; display: flex; top: 51px; font-size: 12px; font-weight: 400; width: 100%; height: 50px; background: #eeeeee; justify-content: center; align-items: center;}
.s3link{color: #2997ff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; margin-left: 10px;}
.s3link span{font-size: 14px; margin-top: 2px;}



.inner{width: 1300px; margin: 0 auto; position: relative; padding: 100px 0;}
.left{width: 50%; position: sticky; top: 0;}
.leftinner{width: 65%; margin: 0 auto;}
.lefttextbox{width: 100%; display: flex; justify-content: space-around; font-size: 12px; font-weight: 400; padding-bottom: 30px; border-bottom: solid rgb(206, 206, 206) 1px;}
.lefttextbox2{display: flex; padding-top: 30px; justify-content: center;}
.lefttextbox2 a{color: #2997ff;}
.lefttextbox2 span{font-size: 40px; font-weight: 300; margin-right: 10px;}
.lefttextbox2 p{font-size: 12px; font-weight: 400; line-height: 20px;}
.lefttextbox2 h4{font-size: 12px;}


.right{width: 50%; position: relative;}
.rightinner{width: 65%; margin: 0 auto;}
.box1{display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 70px; border: solid #1778d3 3px; border-radius: 12px; background-color: white; margin-top: 20px;}
.textbox{display: flex; flex-direction: column;}
.new{color: rgb(255, 108, 108); font-weight: 500;}
.new2{padding-top: 25px; font-size: 14px; font-weight: 500;}
h1{letter-spacing: -3px; font-size: 35px;}
.rightbox1{padding: 50px 0; border-bottom: solid rgb(206, 206, 206) 1px;}
.rightbox2{padding: 50px 0; border-bottom: solid rgb(206, 206, 206) 1px;}
.rightbox2 p{padding-bottom: 10px; font-size: 14px; font-weight: 500;}
.rightbox3{padding: 50px 0; border-bottom: solid rgb(206, 206, 206) 1px;}
.rightbox3 p{padding-bottom: 10px; font-size: 14px; font-weight: 500;}
.rightbox4{padding: 50px 0; border-bottom: solid rgb(206, 206, 206) 1px;}
.rightbox4 p{padding-bottom: 10px; font-size: 14px; font-weight: 500;}
.rightbox5{background-color: #eeeeee; padding: 30px; margin-top: 50px;}

#visual{width: 100%; display: flex; position: relative; align-items: flex-start;}
#control{display: flex; justify-content: space-between; flex-wrap: wrap;}
#control img{width: 40px;}
#control a div{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 200px; height: 100px; border: solid #b5b5b6 1px; border-radius: 12px; background-color: white; margin: 5px 0;}
#control a div:hover{border: solid gray 1px;}
#control a{color: black; font-size: 12px; color: gray;}
#control a.on div{border: solid #1778d3 3px; color: black;}

#pic {position: relative; width: 100%; height: 600px; overflow: hidden;}
#pic > div {position: absolute; left: -20px; top: 0%; display: none;}
#pic > div:first-child{display: block;}

#control2{display: flex; justify-content: space-between; flex-wrap: wrap;}
#control2 a div{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 200px; height: 100px; border: solid #b5b5b6 1px; border-radius: 12px; background-color: white; margin: 5px 0;}
#control2 a div:hover{border: solid gray 1px;}
#control2 a{color: black; font-size: 22px; font-weight: 700; color: gray;}
#control2 span{font-size: 14px; font-weight: 400;}
#control2 a.on div{border: solid #1778d3 3px; color: black;}

#control3{display: flex; justify-content: space-between; flex-wrap: wrap;}
#control3 a div{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 200px; height: 60px; border: solid #b5b5b6 1px; border-radius: 12px; background-color: white; margin: 5px 0;}
#control3 a div:hover{border: solid gray 1px;}
#control3 a{color: black; font-size: 14px; font-weight: 500; color: gray;}
#control3 a.on div{border: solid #1778d3 3px; color: black;}
.box4plus{width: 100%; background-color: #eeeeee; padding: 30px; margin-top: 20px;}
.sel1{font-size: 12px; height: 50px; margin: 30px 0; border: solid rgb(158, 158, 158) 1px; border-radius: 12px; padding: 3px; background-color: white;}
.box4plus select{width: 100%; background: none; border: none; padding: 5px 0;}
.box4plus p{font-size: 12px; font-weight: 600;}
.box4plus span{font-size: 12px; color: gray;}
.box4plus li{list-style:disc; color: gray; font-size: 11px; margin-left: 17px; padding-top: 3px;}
.box4plusbutton{display: flex;}
.box4plusbutton a{width: 50%; height: 50px; line-height: 50px; text-align: center; border-radius: 12px; margin: 10px;}



#control4{display: flex; flex-direction: column;  flex-wrap: wrap;}
#control4 a div{display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; border: solid #b5b5b6 1px; border-radius: 12px; background-color: white; margin: 5px 0;}
#control4 a div:hover{border: solid gray 1px;}
#control4 a{color: black; font-size: 14px; font-weight: 500; color: gray;}
#control4 a.on div{border: solid #1778d3 3px; color: black;}
.care1{margin-left: 20px;}
.care2{margin-right: 20px;}

#control5{display: flex; flex-direction: column;  flex-wrap: wrap;}
#control5 a div{display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; border: solid #b5b5b6 1px; border-radius: 12px; background-color: white; margin: 5px 0;}
#control5 a div:hover{border: solid gray 1px;}
#control5 a{color: black; font-size: 14px; font-weight: 500; color: gray;}
#control5 a.on div{border: solid #1778d3 3px; color: black;}
.care1{margin-left: 20px;}
.care2{margin-right: 20px;}
.box5plus{position:fixed; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; top: 0; left: 0; background-color:rgba(0,0,0,0.5); z-index: 100;}
.plusbox{position: relative; width: 800px; height: 900px; background-color: white; border-radius: 14px; overflow: hidden;}
.close{position: absolute; top: 5%; right: 5%;}
.plusboxinner{width: 80%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 100px;}
.plusboxinner img{width: 100px;}
.plusboxtextbox1{text-align: center; line-height: 20px; margin: 30px 0;}
.plusboxtextbox1 p{font-size: 30px; font-weight:bolder;}
.plusboxtextbox1 span{font-size: 17px; letter-spacing: 1px; font-weight: 400;}
.plusboxtextbox2{width: 100px; height: 40px; line-height: 40px; background-color: #1778d3; color: white; border-radius: 20px; text-align: center; margin-bottom: 20px;}
.plusboxtextbox3 p{font-size: 14px; font-weight: 300; line-height: 30px;}
.plusboxtextbox4{width: 100%; height: 70px; line-height: 70px; background-color:#f0f0f0; font-size: 12px; font-weight: 400; text-align: center; position: absolute; bottom: 0;}


.howmuch{font-size: 30px; font-weight: bolder;}
.rightbox5text{display: flex; align-items:center; padding: 20px 0; border-top: solid rgb(206, 206, 206) 1px; margin-top: 30px;}
.rightbox5text span{font-size: 40px; font-weight: 300; margin-right: 10px;}
.rightbox5text a{color: #2997ff; font-size: 12px;}
.rightbox5text p{font-size: 12px; font-weight: 400;}
.rightbox5text h4{font-size: 12px;}
#clock{font-size: 14px;}
.rightbutton{width: 95%; background-color:#1778d3; color: white; text-align: center; margin: 0 auto; height: 35px; border-radius: 12px; font-size: 14px; font-weight: 400; line-height: 35px;}
.rightbox5 a{color: #2997ff; font-size: 12px;}
.flx{font-size: 13px; padding: 9px; color: gray;}
.flx2{font-size: 13px; color: gray; padding-top: 5px;}

.promotion{width: 100%; height: 300px; background-color: #ebebeb; padding-top: 100px; margin-top: 200px;}
.promotioninner{width: 1000px; display: flex; margin: 0 auto;}
.promotionleft{width: 50%; position: relative;}
.promotionleft p{font-size: 50px; line-height: 55px; letter-spacing: -3px; font-weight: bolder; padding-bottom: 30px;}
.promotionleft a{font-size: 17px; font-weight: 400; color: gray;}
.promotionright{width: 50%; height: 300px; position: relative;}
.pmimg{position: absolute; bottom: 0; width: 250px; left: 100px;}











.lastsec{width: 1300px; margin: 0 auto; display: flex; flex-direction: column;}
.endsec{width:1186px; display: flex; justify-content: center; background-color: rgb(240, 240, 240); padding-top: 100px;}
.endtitle{width: 1186px; font-size: 30px; padding: 150px 0 40px 0; font-weight: bolder; text-align: center;}
.endsec img{padding: 0 50px; height: 300px;}
.endsec2{display: flex; justify-content: center;}
.endsec2 p{padding:20px 100px 0 60px; font-size: 14px;}
.endtext{width: 1186px; text-align: center; font-size: 13px; color: gray; padding: 50px 0;}
.endtext span{color: #2997ff;}













footer{width: 100%; height: 1220px; overflow: hidden; background-color: rgb(240, 240, 240);}
.footinner{width: 1200px; margin: 0 auto;}
.foottext{width: 370px; font-size: 17px; text-align: center; padding: 20px 0;}
.footbox{display: flex; flex-direction: column; align-items: center; text-align: center;}
.footbutton{display: flex; height: 30px; line-height: 30px; font-size: 20px;}
.footbutton a{color: #06c;}
.footbutton span{font-size: 17px; margin: 7px 0 0 7px; color: #06c;}
.foot1{display: flex; justify-content: space-around; padding: 50px 0 100px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foot2{display: flex; justify-content: space-around; padding: 50px 0 50px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foot3{font-size: 13px; color: gray; padding: 10px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foottext2{width: 210px; font-size: 15px; text-align: center; padding: 20px 0;}
.size{font-size: 60px; color: rgb(163, 163, 163); font-weight: 200; padding: 10px 0;}
.footbutton2{display: flex; height: 30px; line-height: 30px; font-size: 15px;}
.footbutton2 a{color: #06c;}
.footbutton2 span{font-size: 15px; margin: 8px 0 0 5px; color: #06c;}
.foot4{font-size: 13px; color: gray; padding: 10px 0;}