@font-face {font-family: 'Spoqa Han Sans Neo';src: url(https://frontend-design-system.socar.kr/fonts/SpoqaHanSansNeoRegular.woff2);font-weight:400;}
@font-face {font-family: 'Spoqa Han Sans Neo';src: url(https://frontend-design-system.socar.kr/fonts/SpoqaHanSansNeoMedium.woff2); font-weight:500;}
@font-face {font-family: 'Spoqa Han Sans Neo'; src: url(https://frontend-design-system.socar.kr/fonts/SpoqaHanSansNeoBold.woff2);font-weight:700;}

body,html,section{ background:#fff; overflow-x: hidden; margin: 0px;  word-break:keep-all; overflow-wrap:break-word;font-family:'Spoqa Han Sans Neo',sans-serif; }
p{margin-block-end: 0px; margin-block-start: 0px; margin-right: 0px;}
h1,h2{color:#fff;}
h3{color:#374553;}
b1,b2{color:#374553;}
c1{color:#646f7c}
li, ul{text-decoration: none; list-style-type:none; margin: 0px;padding-inline-start:0px;}
a{text-decoration: none; color:#374553;}
h1{font-weight: 700;}
h2,b1,b2,c1,c2,c3{font-weight: 400;}

h1{font-size:44px; line-height:58px; margin-block-end:32px; margin-block-start: 0px;}
h2{font-size:18px; line-height:26px; margin-block-end:10px; margin-block-start: 0px; }
h3{font-size:24px; line-height:36px; margin-block-start: 8px;margin-block-end: 8px;}
h4{font-size:20px; line-height:32px; margin-block-start: 8px;margin-block-end: 40px;}
b1{font-size:16px;line-height:26px;}
b2{font-size:14px;line-height:22px;color:#646f7c; margin-block-start: 8px;}
c1{font-size:14px;line-height:22px;}
c2{font-size:14px;line-height:22px; color:#646f7c; margin-block-start: 8px;}


#main_mo{ background-size:cover; background-position:center; height:80vh; text-align:left;}
#main_mo .text { position: static; padding-top: 60px; padding: 80px 24px 0px 24px;}
#main_mo .text b1{color: #ffffff}
#main_pc {display: none;}

#intro{overflow-x: hidden; text-align: left;background: #ffffff;margin: 80px 24px 40px 24px;}
#intro .con1 .text { border-top: 1px solid #e9ebee; position: relative;padding: 24px 0px 40px 0px;z-index: 01;}
#intro .con2{margin-top: 40px;padding-top: 34px; padding-bottom: 60px; padding-right: 40px;border-top: 1px solid #e9ebee;}
#intro .con2 p{ margin-top:12px;}
#intro .con2 h3{ margin-top:40px;}


#owner_guest{background: #ffff; padding-top: 0px; padding-bottom: 60px;}
#owner_guest .text {position: relative;padding: 0px 60px 40px 24px;text-align: left; z-index: 01;}
#owner_guest .owner_guest_box2 {margin: 24px;margin-bottom: 40px;}
#owner_guest .owner_guest_box2 h3 {font-size: 20px; margin-block-start: 6px;margin-block-end: 0px; line-height: 32px;}
#owner_guest .owner_guest_box2 b2 {color: #00b8ff;font-size: 16px;}
#owner_guest .owner_guest_box2 img {border-radius: 6px; margin-bottom: 20px; width: 100%;}

#step {background: #f7f8f9; padding-top: 0px; padding-bottom: 60px;}
#step .text {position: relative;padding: 60px 60px 40px 24px;text-align: left; z-index: 01;}
#step .owner_guest_box2 {margin: 24px;margin-bottom: 40px;}
#step .owner_guest_box2 h3 {margin-block-end: 10px;font-size: 20px; margin-block-start: 6px; line-height: 32px;}
#step .owner_guest_box2 b2 {color: #00b8ff;font-size: 16px;padding-right: 4px;}
#step .owner_guest_box2 img {border-radius: 6px; margin-bottom: 20px; width: 100%;}

#notice {padding: 60px 60px 60px 24px;color: #28323c; background:#e9ebee;z-index: 0}
#notice c2{margin: 24px 60px 60px 0px; color: #28323c;}

#qna{ margin: 24px 24px; padding-top: 60px; padding-bottom: 60px;}
#qna h2{ font-weight: bold; color: #28323c; text-align: center;}
#qna .accordion-menu {width: 100%;}
#qna .accordion-menu li.open .dropdownlink {color: #374553;}
#qna .accordion-menu li:last-child .dropdownlink {border-bottom: 1px solid #e9ebee;}
#qna .dropdownlink {font-weight:500;font-size:14px;line-height:26px;cursor: pointer; display: block; padding:6px 6px;color: #374553;position: relative; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#qna .submenuItems {display: none;}
#answer{padding: 20px; color: #646f7c; font-size: 14px;line-height: 24px; background: #f7f8f9; }








@media (min-width: 768px) {
.container_owner_guest { background:#fff;  padding-left: 8%;padding-right: 8%; }
.step { background:#f7f8f9;  padding-left: 8%;padding-right: 8%; }

#main_mo .text {padding: 80px 10px 0px 100px;}

#intro{ margin: 80px 100px 40px 100px;background: #ffffff; padding-top: 100px;padding-bottom: 40px;}
#intro .con1{ display: flex; align-content: space-between;  justify-content: center;}
#intro .con1 .text {width: 400px;border-top: 1px solid #e9ebee; position: relative; padding: 24px 0px 150px 0px;z-index: 01;}
#intro .con1 .text2 {width: 400px;margin-left:40px;border-top: 1px solid #e9ebee; position: relative; padding: 24px 0px 150px 0px;z-index: 01;}

#intro .con2{ padding-right: 0px; align-items: baseline;display: flex; align-content: space-between;  justify-content: center;}
#intro .con2 p{ margin-top:20px;}
#intro .con2 .text {width: 400px;position: relative; padding: 24px 0px 150px 0px;z-index: 01;}
#intro .con2 .text2 {width: 400px;margin-left:40px; position: relative; padding: 24px 0px 150px 0px;z-index: 01;}

#owner_guest{background:#fff; padding-bottom: 100px;padding-top: 0px;}
#owner_guest .text { margin: 0% 28% 0% 28%;position: relative;padding: 0px 0px 100px 0px;text-align: center; z-index: 01;}

#owner_guest .owner_guest_list{display: flex;align-items: baseline;}
#owner_guest .owner_guest_box {position: static;background: #FFFFFF;  border-radius: 10px; box-shadow: 0px 4px 30px rgba(214, 214, 214, 0.51); position: relative; margin: 50px 30%;padding: 42px 0px 42px 0px;text-align: center;}
#owner_guest .owner_guest_box2 img {width: 100%; margin-bottom: 24px;}
#owner_guest .owner_guest_box2 {position: static; background: #ffffff00;  position: relative; margin: 20px; padding: 10px 0px 60px 0px;text-align: left;}
#owner_guest .owner_guest_box2 h3 {margin-block-start: 0px;  line-height: 34px;}
#owner_guest .owner_guest_box2 b2 {font-size: 16px; color: #00b8ff;padding-bottom: 14px;}

#step {padding-top: 100px;}
#step .text {position: relative;margin: auto 0; padding: 0px 0px 100px 0px;text-align: center; z-index: 01;}
#step .owner_guest_list{display: flex;}
#step .owner_guest_box {position: static;background: #FFFFFF;  border-radius: 10px; box-shadow: 0px 4px 30px rgba(214, 214, 214, 0.51); position: relative; margin: 50px 30%;padding: 42px 0px 42px 0px;text-align: center;}
#step .owner_guest_box2 img {width: 100%; margin-bottom: 24px;}
#step .owner_guest_box2 {position: static; background: #ffffff00;  position: relative; margin: 20px; padding: 10px 0px 60px 0px;text-align: left;}
#step .owner_guest_box2 h3 {margin-block-start: 0px;  line-height: 30px;}
#step .owner_guest_box2 b2 {font-size: 16px; color: #00b8ff;padding-bottom: 14px; padding-right: 8px;}

#qna{ margin: 80px 8%; padding-top: 60px; padding-bottom: 60px;}
#qna h2{ font-weight: bold; color: #28323c; text-align: center;}
#qna .accordion-menu {width: 100%;}
#qna .accordion-menu li.open .dropdownlink {color: #374553;}
#qna .accordion-menu li:last-child .dropdownlink {border-bottom: 1px solid #e9ebee;}
#qna .dropdownlink {  font-size:16px;line-height:26px;cursor: pointer; display: block; padding:12px 10px;color: #374553;position: relative; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#qna .submenuItems {display: none;}
#answer{padding: 20px 30% 40px 20px; color: #646f7c; font-size: 14px;line-height: 24px; background: #f7f8f9; }
#notice {padding: 8%;}


}



@media (min-width: 1600px) {
h1{font-size:58px; line-height:78px;}
h2{font-size:24px; line-height:38px; font-weight:normal; }
h3{font-size:30px; line-height:46px; margin-block-start: 8px;}
b1{font-size:18px; line-height:30px;}
b2{font-size:18px;line-height:28px;}
c1{font-size:16px;line-height:26px;}
c2{font-size:14px;line-height:24px;}

.intro { background-color: #fff; padding-left: 20%; padding-right: 20%;}
.container_owner_guest { background:#fff;  padding-left: 20%;padding-right: 20%; }
.step { background:#f7f8f9;  padding-left: 20%;padding-right: 20%; }

#main_mo{display: none;}
#main_pc{display: block;background-size:cover;background-position: 0 90%; height: 90vh;text-align:left;}
#main_pc .text { position: static;padding:8% 20%;}
#main_pc h2 {font-size:24px; line-height:38px; font-weight:normal; margin-block-end:8px;}
#main_pc .text b1{color: #ffffff}
#main_pc .button {position: absolute;left: 18%; bottom: 20%;text-align: right;}
#main_pc .button img{width: 15%; padding-left: 20px;}


#intro{ background: #ffffff; padding-top: 100px;padding-bottom: 40px;}
#intro .con1{ display: flex; align-content: space-between;  justify-content: center;}
#intro .con1 .text {width: 400px;border-top: 1px solid #e9ebee; position: relative; padding: 24px 0px 150px 0px;z-index: 01;}
#intro .con1 .text2 {width: 400px;margin-left:40px;border-top: 1px solid #e9ebee; position: relative; padding: 24px 0px 150px 0px;z-index: 01;}

#intro .con2{ padding-right: 0px; align-items: baseline;display: flex; align-content: space-between;  justify-content: center;}
#intro .con2 p{ margin-top:20px;}
#intro .con2 .text {width: 400px;position: relative; padding: 24px 0px 150px 0px;z-index: 01;}
#intro .con2 .text2 {width: 400px;margin-left:40px; position: relative; padding: 24px 0px 150px 0px;z-index: 01;}

#owner_guest{ background:#fff; padding-bottom: 100px;padding-top: 0px;}
#owner_guest .text { margin: 0% 28% 0% 28%;position: relative;padding: 0px 0px 100px 0px;text-align: center; z-index: 01;}

#owner_guest .owner_guest_list{display: flex;align-items: baseline;}
#owner_guest .owner_guest_box {position: static;background: #FFFFFF;  border-radius: 10px; box-shadow: 0px 4px 30px rgba(214, 214, 214, 0.51); position: relative; margin: 50px 30%;padding: 42px 0px 42px 0px;text-align: center;}
#owner_guest .owner_guest_box2 img {width: 100%; margin-bottom: 24px;}
#owner_guest .owner_guest_box2 {position: static; background: #ffffff00;  position: relative; margin: 20px; padding: 10px 0px 60px 0px;text-align: left;}
#owner_guest .owner_guest_box2 h3 {margin-block-start: 0px;  line-height: 34px;}
#owner_guest .owner_guest_box2 b2 {font-size: 16px; color: #00b8ff;padding-bottom: 14px;}

#step {padding-top: 100px;}
#step .text {position: relative;margin: auto 0; padding: 0px 0px 100px 0px;text-align: center; z-index: 01;}
#step .owner_guest_list{display: flex;}
#step .owner_guest_box {position: static;background: #FFFFFF;  border-radius: 10px; box-shadow: 0px 4px 30px rgba(214, 214, 214, 0.51); position: relative; margin: 50px 30%;padding: 42px 0px 42px 0px;text-align: center;}
#step .owner_guest_box2 img {width: 100%; margin-bottom: 24px;}
#step .owner_guest_box2 {position: static; background: #ffffff00;  position: relative; margin: 20px; padding: 10px 0px 60px 0px;text-align: left;}
#step .owner_guest_box2 h3 {margin-block-start: 0px;  line-height: 30px;}
#step .owner_guest_box2 b2 {font-size: 16px; color: #00b8ff;padding-bottom: 14px; padding-right: 8px;}

#qna{ margin: 80px 20%; padding-top: 60px; padding-bottom: 60px;}
#qna h2{ font-weight: bold; color: #28323c; text-align: center;}
#qna .accordion-menu {width: 100%;}
#qna .accordion-menu li.open .dropdownlink {color: #374553;}
#qna .accordion-menu li:last-child .dropdownlink {border-bottom: 1px solid #e9ebee;}
#qna .dropdownlink {  font-size:16px;line-height:26px;cursor: pointer; display: block; padding:14px 10px;color: #374553;position: relative; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#qna .submenuItems {display: none;}
#answer{padding: 20px 30% 40px 20px; color: #646f7c; font-size: 14px;line-height: 24px; background: #f7f8f9; }

#notice{padding-left: 20%; padding-bottom: 60px;padding-top: 60px;}
#notice p{margin-top:80px;}
}