|
|
@@ -0,0 +1,72 @@
|
|
|
+body {padding: 0 24px; font-family: 'Noto Sans KR'; font-size: 0.938rem; color: #000;}
|
|
|
+
|
|
|
+#container {margin: 0 auto; max-width: 720px;}
|
|
|
+
|
|
|
+h1 {margin: 0; padding: 1.25rem 0; font-size: 1.5rem; line-height: 1.25; text-align: center;}
|
|
|
+h2 {position: relative; margin: 1.875rem 0 1.25rem; padding: 0 0 0 12px; font-size: 1.25rem; line-height: 1.5;}
|
|
|
+h2::before {content: " "; position: absolute; top: 0.35em; left: 0; width: 4px; height: 0.9em; background-color: #B0DBEC;}
|
|
|
+h3 {position: relative; margin: 1.25rem 0 1rem; padding: 0 0 0 30px;}
|
|
|
+h3::before {content: " "; position: absolute; top: 0.325em; left: 10px; width: 0; height: 0; border-style: solid; border-width: 7px 5.5px 0 5.5px; border-color: #000 transparent transparent transparent;}
|
|
|
+
|
|
|
+.hr {margin: 1.875rem 0; height: 1px; background-color: #F1F1F1;}
|
|
|
+
|
|
|
+.enquiry {margin: 0; padding: 1rem 1.25rem; border-radius: 8px; background-color: #FFDD00; line-height: 1.35;}
|
|
|
+.enquiry dt {margin: 0; padding: 0; font-weight: 700; font-size: 1rem;}
|
|
|
+.enquiry dt a {color: #004FCF;}
|
|
|
+.enquiry dt span {font-weight: normal;}
|
|
|
+.enquiry dd {margin: 10px 0 0 0; padding: 0;}
|
|
|
+
|
|
|
+.logininfo {display: flex; line-height: 1.5;}
|
|
|
+.logininfo dl {flex: 1 1 0px; margin: 0 1.25rem 0 0; padding: 1rem 1.25rem; border: 1px solid #5787C9; border-radius: 8px; background-color: #005AF50C;}
|
|
|
+.logininfo dl:nth-child(2n) {margin-right: 0;}
|
|
|
+.logininfo dl dt {font-weight: 700; font-size: 1rem; color: #325C96;}
|
|
|
+.logininfo dl dd {margin: 1rem 0 0 0; padding: 0;}
|
|
|
+.logininfo dl dd span {display: block; margin-top: 10px;}
|
|
|
+.logininfo dl dd img {position: relative; top: -0.1em; margin-right: 3px; height: 24px; vertical-align: middle;}
|
|
|
+.logininfo dl dd p {margin: 1.625rem 0 0;}
|
|
|
+.logininfo dl dd p a {color: #004FCF; text-decoration: underline;}
|
|
|
+
|
|
|
+.thumbox {display: flex; flex-flow: row wrap;}
|
|
|
+.thumbox .img {margin-right: 1.25rem; padding-top: 1.25rem; width: 48.61%; border-radius: 8px; background-color: #F6F6F6;}
|
|
|
+.thumbox .img img {display: block; margin: 0 auto; width: 208px;}
|
|
|
+.thumbox .cont {flex: 1 1 0px; padding: 2.5rem 0 0 0;}
|
|
|
+.thumbox .cont * {margin: 0; padding: 0; line-height: 1.5;}
|
|
|
+.thumbox .cont ol {counter-reset: section; list-style: none;}
|
|
|
+.thumbox .cont ol li {position: relative; margin-top: 0.75rem; padding-left: 20px; counter-increment: section;}
|
|
|
+.thumbox .cont ol li::before {content: counter(section); position: absolute; top: 0.175rem; left: 0; width: 16px; height: 16px; background-color: #FFDD00; border-radius: 16px; line-height: 16px; font-size: 10px; text-align: center;}
|
|
|
+.thumbox .cont ol li:first-child {margin-top: 0;}
|
|
|
+.thumbox .cont strong {color: #004FCF;}
|
|
|
+.thumbox .cont p {margin-top: 0.75rem; margin-bottom: 0; color: #3A71CB;}
|
|
|
+.thumbox + h3 {margin-top: 1.875rem;}
|
|
|
+
|
|
|
+@media (max-width: 720px) {
|
|
|
+ body {padding: 0 16px; font-size: 0.875rem;}
|
|
|
+
|
|
|
+ h1 {padding: 1rem 0; font-size: 1rem;}
|
|
|
+ h2 {margin: 1.25rem 0 0.75rem; font-size: 0.938rem;}
|
|
|
+ h2::before {top: 0.3em;}
|
|
|
+ h3 {margin: 1rem 0 0.75rem; padding: 0 0 0 22px;}
|
|
|
+ h3::before {top: 0.325em; left: 4px; border-width: 7px 5px 0 5px;}
|
|
|
+
|
|
|
+ .hr {margin: 1.5rem 0;}
|
|
|
+
|
|
|
+ .enquiry {padding: 0.75rem;}
|
|
|
+ .enquiry dt {font-size: 0.875rem;}
|
|
|
+ .enquiry dt span {display: block;}
|
|
|
+ .enquiry dd {margin-top: 8px;}
|
|
|
+
|
|
|
+ .logininfo {display: block;}
|
|
|
+ .logininfo dl {margin: 0.75rem 0 0; padding: 0.75rem;}
|
|
|
+ .logininfo dl dt {font-size: 0.875rem;}
|
|
|
+ .logininfo dl dd {margin: 0.875rem 0 0 0;}
|
|
|
+ .logininfo dl dd span {display: inline;}
|
|
|
+ .logininfo dl dd p {margin-top: 0.875rem;}
|
|
|
+
|
|
|
+ .thumbox {display: block;}
|
|
|
+ .thumbox .img {margin-right: 0; padding-top: 1.5rem; width: auto;}
|
|
|
+ .thumbox .cont {padding: 0.75rem 0 0 0;}
|
|
|
+ .thumbox .cont ol li {margin-top: 0.5rem;}
|
|
|
+ .thumbox .cont ol li::before {top: 0.15rem;}
|
|
|
+ .thumbox .cont p {margin-top: 0.5rem;}
|
|
|
+ .thumbox + h3 {margin-top: 1.25rem;}
|
|
|
+}
|
