/* youtube Style */ .board_description #post_area .youtube_box {position: relative; width: 100%; padding-bottom: 56.25%;} .board_description #post_area .youtube_box embed {position:absolute; width: 100%; height: 100%} /* ------------------------------------------------------------------ */ /* Common Styles main : 4661a2 blue 1 point : 4e6680 blue 2 point : 0f6d70 point : 1d0f44 point : 1c212e bg : a9a9f0 'Noto Sans KR', 'Noto Sans KR', sans-serif, 'Gothic A1', 'FontAwesome', "Font Awesome 5 Free" @media screen and (max-width: 810px) { } @media screen and (max-width: 640px) { } @media screen and (max-width: 480px) { } */ /* ------------------------------------------------------------------ */ /*--------------------------------------------------------- 2. Typography Vertical rhythm with leading derived from 6 --------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { } h1 { font-size: 48px; line-height: 1.1;} h2 { font-size: 36px; line-height: 1.2;} h3 { font-size: 28px; line-height: 1.1;} h4 { font-size: 24px; line-height: 1.3;} h5 { font-size: 18px; line-height: 1.5;} h6 { font-size: 16px; line-height: 1.5;} p { font-size: 18px; word-break: keep-all; font-weight: 400; line-height: 1.7;} p span {color: #da251c; font-weight: 500;} p img { margin: 0; } p.lead { font: 26px/1.8 'Noto Sans KR', sans-serif; margin-bottom: 18px; color: #666; font-weight: 700; } p.head { font: 22px/1.5 'Noto Sans KR', sans-serif; margin-bottom: 10px; color: #666; font-weight: 500; } p.txtwrap {padding: 0 20px;} @media screen and (max-width: 810px) { h1 { font-size: 32px;} h2 { font-size: 28px;} h3 { font-size: 24px;} h4 { font-size: 18px;} h5 { font-size: 16px;} h6 { font-size: 14px;} } @media screen and (max-width: 640px) { p.lead {font-size: 18px;} p.head {font-size: 16px;} } @media screen and (max-width: 480px) { h1 { font-size: 32px;} h2 { font-size: 28px;} h3 { font-size: 24px;} h4 { font-size: 18px;} h5 { font-size: 16px;} h6 { font-size: 14px;} p {font-size: 16px;} p.txtwrap {padding: 0;} } /* for 'em' and 'strong' tags, font-size and line-height should be same with the body tag due to rendering problems in some browsers */ em {font-style: normal; } strong, b { font-weight: bold;} small { font-size: 11px; line-height: inherit; } /* fontWeight common */ .fw100 {font-weight: 100 !important;} .fw200 {font-weight: 200 !important;} .fw300 {font-weight: 300 !important;} .fw400 {font-weight: 400 !important;} .fw500 {font-weight: 500 !important;} .fw600 {font-weight: 600 !important;} .fw700 {font-weight: 700 !important;} .fw800 {font-weight: 800 !important;} .fw900 {font-weight: 900 !important;} /*--------------------------------------------------------- 3. List --------------------------------------------------------- */ ul, ol { margin-bottom: 0; margin-top: 0; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 0x; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 0; } li { line-height: 18px; } ul.large li { } li p { } /*--------------------------------------------------------- 4. Images --------------------------------------------------------- */ img { max-width: 100%; height: auto; vertical-align: top;} img.pull-right { margin: 12px 0px 0px 18px; } img.pull-left { margin: 12px 18px 0px 0px; } i {font-style: normal;} .cont-img {width: 100%; margin:0 0 30px 0px;} .cont-img img {width: 100% ; margin:0;} .cont-ov-img {width: 100%; margin:0 0 30px -30px;} .cont-ov-img img {width: 100% ; margin:0;} /*--------------------------------------------------------- 5. page --------------------------------------------------------- */ .page article {padding: 80px 0;} .page article:first-child {padding-top: 0;} .page article:last-child {padding-bottom: 100px;} .page h1, .title-heading { line-height: 1.2; font-weight: 500; letter-spacing: -0.05em} .page h1:after {background:#666; content:""; display:block; height:3px;width:40px;margin:20px 0 40px 0;} .page h1 span {color: #00a58c; font-weight: 700;} .page h2 {font-weight: 400;} .page h3 {font-weight: 200;} .page h3 span {font-weight: 600;} .page p {margin-bottom: 30px;} .page p b {color: #003483;} @media screen and (max-width:1024px) { } @media screen and (max-width: 810px) { .page h1, .title-heading { font-size: 32px; line-height: 42px;} .page h1:after {margin:10px 0 40px;} } @media screen and (max-width: 480px) { .page h1, .title-heading { font-size: 32px; line-height: 42px; text-align: center;} .page h1:after {margin:10px auto 40px;} .page h1, .page p.lead { text-align: center; } } /* ------------------------------------------------------------------ */ /* About Styles /* ------------------------------------------------------------------ */ .txt-point {font-size: 36px; color: #666; font-weight: 300; line-height: 1.4;} .txt-point span {font-size: 36px; font-weight: 500; color: #222;} .txt-point .point-color {color: #4661a2; font-weight: 900;} span.l-font1 {font-size: 36px;} span.l-font2 {font-size: 36px;} @media screen and (max-width: 640px) { .txt-point {font-size: 28px;} .txt-point span {font-size: 28px;} span.l-font1 {font-size: 28px;} span.l-font2 {font-size: 28px;} } #about01 .s02 {margin-bottom: 60px; padding: 100px 0; text-align: center; background: #f5f5f5;} #about01 .s02 h1 {margin-bottom: 20px; font-size: 40px; color: #222; font-weight: 500;} #about01 .s02 h1:after {display: none;} #about01 .s02 h1 span { color: #4e6680;} #about01 .s02 h1:first-of-type { font-size: 50px; font-weight: 400; color: #222; } #about01 .s02 h1:first-of-type span {color: #4e6680; font-weight: 500;} .about-list {margin-bottom: 60px;} .about-list ul {} .about-list ul li {position:relative; margin-bottom:30px; padding-left:80px; line-height:1.7; font-size:36px; font-weight: 700; } .about-list ul li:before { content:""; display:block; position:absolute; top:10px; left:60px; width:1px; height:60px; background:#eee; transform-origin:center; transform:rotate(15deg) } .about-list ul li .num {position:absolute; top:0; left:0; line-height:50px; font-size:40px; font-weight:700; font-style:italic; color:#ddd; } .about-list ul li p {margin-top: 20px;} .about-list ul li p span {display: block; font-size: 22px; font-weight: 700; color: #00a58c;} @media (max-width:991px){ .about-list ul li {min-height:40px;padding-left:60px;line-height:20px;font-size:19px; font-weight: 500;} .about-list ul li:before {left:45px} .about-list ul li .num {line-height:40px;font-size:30px} } @media (max-width: 810px){ .about-list ul li {min-height:inherit; padding-left:40px} .about-list ul li:before {left:30px;height:20px} .about-list ul li .num {line-height:20px;font-size:24px} .about-list h4 br,.about-list ul li br {display:none} } @media screen and (max-width: 1024px) { #services .container {padding: 80px 20px;} } @media screen and (max-width: 810px) { #about01 .s02 {margin-left: -20px; width: calc(100% + 40px); padding: 60px 0;} #about01 .s02 h1 {padding: 0 20px; font-size: 26px;} #about01 .s02 h1:first-of-type { margin-bottom: 10px; font-size: 28px; } } #about02 {} #about02 .s02 {background: #f5f5f5;} #about02 .list {position:relative; margin-bottom:30px; padding-left:80px; line-height:1.7; font-size:36px; font-weight: 700; } #about02 .list:before { content:""; display:block; position:absolute; top:10px; left:60px; width:1px; height:60px; background:#ccc; transform-origin:center; transform:rotate(15deg) } #about02 .list .num {position:absolute; top:0; left:0; line-height:50px; font-size:40px; font-weight:700; font-style:italic; color:#ccc; } #about02 .list p {margin-top: 20px;} #about02 .list p span {display: block; font-size: 22px; font-weight: 700; color: #00a58c;} /* ------------------------------------------------------------------ */ /* Location Styles /* ------------------------------------------------------------------ */ /* 카카오 맵 */ .root_daum_roughmap {width: 100% !important; padding: 0 !important; border: none !important} .root_daum_roughmap .wrap_map {} .root_daum_roughmap .wrap_controllers {} .mapinfo{ display:flex; flex-wrap:wrap; align-items:center; box-sizing:border-box; position:relative;z-index:10; width: 94%; background:#fff; padding:50px 65px; margin: -95px auto 0 ; border: 1px solid #f5f5f5; } .mapinfo .tit .eng{font-family:"Montserrat"; font-size:36px; color:#333; font-weight:700; letter-spacing:-1px;} .mapinfo .tit .kor{font-size:24px; color:#333;} .mapinfo .info {box-sizing:border-box; width:calc(100% - 295px); padding-left:40px;} .mapinfo .info .addr{font-size:16px;color:#454545;} .mapinfo .info .contact{margin-top:15px;} .mapinfo .info .contact ul{display:flex;flex-wrap:wrap;} .mapinfo .info .contact ul li{ margin-right:20px; font-size:16px; color:#555; font-weight: 400; line-height: 1.7; } .mapinfo .info .contact ul li span{color:#0f6d70; font-weight:700;} @media screen and (max-width: 810px) { .mapinfo {width: 100%; margin: 10px 0 0 0; padding: 30px 20px; } .mapinfo .tit .eng {font-size: 28px;} .mapinfo .tit .kor {font-size: 24px;} .mapinfo .info {display: block; box-sizing:border-box; width: calc(100% - 130px); padding-left:40px;} } @media screen and (max-width: 480px) { .mapinfo{ flex-direction: column; padding: 30px 20px; } .mapinfo .tit {margin-bottom: 10px;} .mapinfo .info {box-sizing:border-box; width: 100%; padding-left:0;} } /* ------------------------------------------------------------------ */ /* guide01 Styles /* ------------------------------------------------------------------ */ #guide01 .s02 {border-top: 1px solid #e5e5e5;} .box-wrap { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; } .box-wrap .inner-box { position: relative; width: calc(100%/3 - 20px); } .box-wrap .inner-box.box02 {width: 100% ; margin: 0; } .box-wrap .inner-box.tbl {} .box-wrap .inner-box:nth-of-type(1) { margin-left: 0; } .box-wrap .inner-box:nth-of-type(2)::after { display: none; } .box-wrap .inner-box .tit { display: block; width: 100%; padding: 20px 20px; font-size: 24px; font-weight: 500; color: #ffffff; text-align: center; } .box-wrap .inner-box.step01 .titBg01 { background-color: #4e6680 /*#C13B01*/; } .box-wrap .inner-box.step01 .titBg02 { background-color: #45538a; } .box-wrap .inner-box.step01 .titBg03 { background-color: #2c3b63; } .box-wrap .inner-box .content-box { position: relative; min-height: 550px; } .box-wrap .inner-box.card {} .box-wrap .inner-box.card .content-box {display: flex; align-items: center; justify-content: center; width: 100%; } .box-wrap .inner-box.card .content-box .content-img {} .box-wrap .inner-box.box02 .content-box { position: relative; min-height: auto; } .box-wrap .inner-box .content-box::before { content: ""; position: absolute; width: 1px; height: 100%; top: 0; left: 0; background: url(/images/tech/dot-border.png) repeat-y; } .box-wrap .inner-box .content-box::after { content: ""; position: absolute; width: 1px; height: 100%; top: 0; right: 0; background: url(/images/tech/dot-border.png) repeat-y; } .box-wrap .inner-box.step01 .content-box { padding: 40px 60px 30px; border-left: 2px dashed #ccc;border-right: 2px dashed #ccc;border-bottom: 2px dashed #ccc; } .box-wrap .inner-box.tbl .content-box { padding: 60px 20px 0; } .box-wrap .inner-box.step01 .content-box .list > li { margin-bottom: 18px; } .box-wrap .inner-box.step01 .content-box .list span { display: block; margin-bottom: 18px; font-size: 18px; font-weight: 500; color: #444; line-height: 1.4; } .box-wrap .inner-box.step01 .content-box .list .dot-list li { position: relative; padding-left: 18px; line-height: 1.5; margin-bottom: 5px; } .box-wrap .inner-box.step01 .content-box .list .dot-list.list02 li {margin-bottom: 30px; text-align: left;} .box-wrap .inner-box.step01 .content-box .list .dot-list li::before { content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: #dbdbdb; } @media(max-width: 1420px){ /* .box-wrap .inner-box { width: calc(50% - 20px); margin-left: 40px; } */ .box-wrap .inner-box::after { right: -30px; } } @media(max-width: 1250px){ .box-wrap .inner-box.step02 .content-box .box-list { padding-left: 15px; } } @media(max-width: 768px){ .box-wrap { display: block; margin-top: 0px; } .box-wrap .inner-box:nth-of-type(1), .box-wrap .inner-box:nth-of-type(2), .box-wrap .inner-box:nth-of-type(3) { width: 100%; } .box-wrap .inner-box .tit { font-size: 18px; font-weight: 500; } .box-wrap .inner-box { margin-left: 0; margin-bottom: 50px; } .box-wrap .inner-box::after { top: auto; bottom: -30px; right: auto; left: 50%; transform: translateX(-50%) rotate(90deg); } .box-wrap .inner-box .tit { font-size: 20px; } .box-wrap .inner-box .content-box { min-height: auto; } .box-wrap .inner-box.step01 .content-box { padding: 45px 40px 30px; } } @media(max-width: 650px){ .box-wrap .inner-box .tit { font-size: 18px; padding: 18px 22px; } } @media(max-width: 480px){ .box-wrap .inner-box.step01 .content-box { padding: 30px 20px 20px; } } /* ------------------------------------------------------------------ */ /* guide02 Styles /* ------------------------------------------------------------------ */ #guide02 { } /*-- GENERAL STYLES ------------------------------*/ .timeline { line-height: 1.7; list-style: none; margin: 0; padding: 0; width: 100%; } /*----- TIMELINE ITEM -----*/ .timeline-item { padding-left: 40px; position: relative; } .timeline-item:last-child { padding-bottom: 0; } li.timeline-item {margin:0;} /*----- TIMELINE INFO -----*/ .timeline-info { display: none; margin: 0 0 .5em 0; padding-top:2px; font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; } /*----- TIMELINE MARKER -----*/ .timeline-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 15px; } .timeline-marker:before { background: #00a58c; border: 3px solid transparent; border-radius: 100%; content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 10px; left: 0; transition: background 0.3s ease-in-out, border 0.3s ease-in-out; } .timeline-marker::after { content: ""; width: 3px; background: #CCD5DB; display: block; position: absolute; top: 34px; bottom: 0; left: 6px; } .timeline-item:last-child .timeline-marker:after { content: none; } .timeline-item:not(.period):hover .timeline-marker:before { background: transparent; border: 3px solid #00a58c; } /*----- TIMELINE CONTENT -----*/ .timeline-content { padding-bottom: 20px; } .timeline-content h3 {margin-bottom:10px; font-weight: 700;} .timeline-content h4 {margin-bottom:10px; padding-top: 5px; font-weight: 700;} .timeline-content p {padding-top:2px;} .timeline-content p span {display: inline-block; padding-right:10px; font-weight: bold; letter-spacing: 3px; margin: 0 0 .5em 0; text-transform: uppercase; white-space: nowrap;} .timeline-content p:last-child { margin-bottom: 0; } /*----- TIMELINE PERIOD -----*/ .period { padding: 0; } .period .timeline-info { display: none; } .period .timeline-marker:before { background: transparent; content: ""; width: 15px; height: auto; border: none; border-radius: 0; top: 0; bottom: 30px; position: absolute; border-top: 3px solid #CCD5DB; border-bottom: 3px solid #CCD5DB; } .period .timeline-marker:after { content: ""; height: 32px; top: auto; } .period .timeline-content { padding: 40px 0 70px; } .period .timeline-title { margin: 0; } /*-- MOD: MARKER OUTLINE ----------------------------------------------*/ .marker-outline .timeline-marker:before { background: transparent; border-color: #00a58c; } .marker-outline .timeline-item:hover .timeline-marker:before { background: #00a58c; } @media (min-width: 768px) { /* ------------------------------------------------------------------ */ /* History Styles /* ------------------------------------------------------------------ */ .timeline-2, .timeline-2 .timeline-item, .timeline-2 .timeline-info, .timeline-2 .timeline-marker, .timeline-2 .timeline-content { display: block; margin: 0; padding: 0; } .timeline-2 .timeline-item { padding-bottom: 40px; overflow: hidden; } .timeline-2 .timeline-marker { position: absolute; left: 80px; margin-left: -7.5px; } .timeline-2 .timeline-info{float: left; width:80px; padding-top:2px; padding-right: 20px; text-align:right;} .timeline-2 .timeline-content { float: left; width: auto; padding-left: 30px; text-align:left;} .timeline-2 > .timeline-item.period .timeline-content { float: none; padding: 0; width: 100%; text-align: left; } .timeline-2 .timeline-item.period { padding: 40px 0 60px; } .timeline-2 .period .timeline-marker:after { height: 30px; bottom: 0; top: auto; } .timeline-2 .period .timeline-title { left: auto; } .timeline-centered, .timeline-centered .timeline-item, .timeline-centered .timeline-info, .timeline-centered .timeline-marker, .timeline-centered .timeline-content { display: block; margin: 0; padding: 0; } .timeline-centered .timeline-item { padding-bottom: 60px; overflow: hidden; } .timeline-centered .timeline-marker { position: absolute; left: 50%; margin-left: -7.5px; } .timeline-centered .timeline-info, .timeline-centered .timeline-content { width: 50%; } .timeline-centered > .timeline-item:nth-child(odd) .timeline-info { float: left; text-align: right; padding-right: 30px; } .timeline-centered > .timeline-item:nth-child(odd) .timeline-content { float: right; text-align: left; padding-left: 30px; } .timeline-centered > .timeline-item:nth-child(even) .timeline-info { float: right; text-align: left; padding-left: 30px; } .timeline-centered > .timeline-item:nth-child(even) .timeline-content { float: left; text-align: right; padding-right: 30px; } .timeline-centered > .timeline-item.period .timeline-content { float: none; padding: 0; width: 100%; text-align: center; } .timeline-centered .timeline-item.period { padding: 50px 0 90px; } .timeline-centered .period .timeline-marker:after { height: 30px; bottom: 0; top: auto; } .timeline-centered .period .timeline-title { left: auto; } .timeline-content h4 {padding-top: 0;} } /* ------------------------------------------------------------------ */ /* History 1 Styles /* ------------------------------------------------------------------ */ @media screen and (max-width: 480px) { .tbl_wrap {margin-bottom: 30px; overflow-x: scroll;} } /* Table */ .tbl03 { width: 100%;background: none;} .tbl03 thead th { width: calc(100%/4); padding: 10px 6px; font-weight: 500; color: #f5f5f5; vertical-align: middle; background: #4e6680; border-left: 1px solid #eee; border-bottom: 1px solid #eee; } .tbl03 thead th.b-left {border-left: 1px solid #eee !important;} .tbl03 thead th:first-child {border-left: none} /* .tbl03 thead th:nth-child(1) {width: 25%;} .tbl03 thead th:nth-child(2) {width: 25%;} .tbl03 thead th:nth-child(3) {width: 25%;} .tbl03 thead th:nth-child(4) {width: 25%;} */ .tbl03 td.subject { text-align: center; color: #fff; background: #999; font-weight: 500;} .tbl03 td { padding: 10px 15px; color: #666; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; vertical-align: middle; text-align: center; font-weight: 400; } .tbl03 tbody td:nth-child(1) { text-align: center; color: #666; background: #f5f5f5; font-weight: 500;} @media screen and (max-width: 480px) { .tbl01 th, .tbl01 td, .tbl02 th, .tbl02 td, .tbl03 th, .tbl03 td {font-size: 13px !important;} } .list .dot-list li { position: relative; padding-left: 18px; line-height: 1.5; margin-bottom: 5px; } .list .dot-list.list02 li {margin-bottom: 30px; text-align: left;} .list .dot-list li::before { content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: #ccc; } /* ------------------------------------------------------------------ */ /* business Styles /* ------------------------------------------------------------------ */ /* 다이어그램 */ .diagram {position:relative} .diagram .bg-diagram {margin:0 auto; width:400px; height:387px; } .diagram .bg-diagram.bg01 {background:url(../images/bg-diagram1.png) 0 0 no-repeat; background-size:cover} .diagram .bg-diagram.bg02 {background:url(../images/bg-diagram2.png) 0 0 no-repeat; background-size:cover} .diagram .tit-opt { opacity:0; transform:translateY(30px); position:absolute; top:50%; left:50%; margin-top:-56px; margin-left:-127px; width:254px; height:112px; color:#fff; font-size:28px; font-weight:700; line-height:112px; text-align: center; background:#00a58c; border-radius:56px; /* box-shadow:0 0 25px rgba(0,0,0,.08) */ } .diagram ul li {opacity:0; transform:translateY(30px); position:absolute; left:50%; text-align:right} .diagram ul li span {display:block; position:relative; font-size:20px; font-weight:500; line-height:1.2em; word-break:keep-all} .diagram.list01 ul li:nth-of-type(1) {top:25px; margin-left:-305px;} .diagram.list01 ul li:nth-of-type(2) {top:25px; margin-left:230px} .diagram.list01 ul li:nth-of-type(3) {top:50%; transform: translateY(-50%); margin-left:-345px} .diagram.list01 ul li:nth-of-type(4) {top:50%; transform: translateY(-50%); margin-left:290px} .diagram.list01 ul li:nth-of-type(5) {bottom:25px; margin-left:-345px;} .diagram.list01 ul li:nth-of-type(6) {bottom:25px; margin-left:230px} .diagram ul li:nth-child(2n) {text-align:left} .diagram ul li:nth-child(2n) span:after {left:-100px} .diagram.view .tit-opt {opacity:1; transition:all 0.5s; transform:translateY(0)} .diagram.view ul li {opacity:1; transform:translateY(0)} .diagram.view.list01 ul li:nth-of-type(1) {transition:all 0.5s 0.3s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list01 ul li:nth-of-type(2) {transition:all 0.5s 0.6s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list01 ul li:nth-of-type(3) {transition:all 0.5s 0.9s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list01 ul li:nth-of-type(4) {transition:all 0.5s 1.2s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list01 ul li:nth-of-type(5) {transition:all 0.5s 0.9s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list01 ul li:nth-of-type(6) {transition:all 0.5s 1.2s cubic-bezier(.44,.03,.84,.68)} @media (max-width:800px) { .diagram .bg-diagram {width:300px; height:300px} .diagram .tit-opt {margin-top:-45px; margin-left:-90px; width:180px; height:90px; font-size:25px; line-height:90px} .diagram ul li span {width:100px} .diagram ul li span:after {width:60px; height:60px; right:-80px} .diagram ul li:nth-child(2n) span:after {left:-80px} .diagram ul li:nth-of-type(1) {top:5px; margin-left:-310px} .diagram ul li:nth-of-type(2) {top:5px; margin-left:220px} .diagram ul li:nth-of-type(3) {bottom:-5px; margin-left:-310px} .diagram ul li:nth-of-type(4) {bottom:-5px; margin-left:220px} } @media (max-width:640px) { #diagram .s01 {display: none;} .diagram .bg-diagram {width:168px; height:168px} .diagram .tit-opt {margin-top:-25px; margin-left:-55px; width:110px; height:50px; font-size:15px; line-height:50px} .diagram ul li span {width:80px; font-size:15px} .diagram ul li span:after {top:-45px; right:0; width:35px; height:35px} .diagram ul li:nth-child(2n) span:after {left:0} .diagram.list01 ul li:nth-of-type(1) {top:20px; margin-left:-170px} .diagram.list01 ul li:nth-of-type(2) {top:20px; margin-left:90px} .diagram.list01 ul li:nth-of-type(3) {top:50%; transform: translateY(-50%); margin-left:-385px} .diagram.list01 ul li:nth-of-type(4) {top:50%; transform: translateY(-50%); margin-left:290px} .diagram.list01 ul li:nth-of-type(5) {bottom:-55px; margin-left:-170px} .diagram.list01 ul li:nth-of-type(6) {bottom:-55px; margin-left:90px} } /* 다이어그램 */ .diagram ul li {opacity:0; transform:translateY(30px); position:absolute; left:50%; text-align:right} .diagram.list02 ul li:nth-of-type(1) {top:25px; margin-left:-385px} .diagram.list02 ul li:nth-of-type(2) {top:25px; margin-left:290px} .diagram.list02 ul li:nth-of-type(3) {bottom:25px; margin-left:-385px} .diagram.list02 ul li:nth-of-type(4) {bottom:25px; margin-left:290px} .diagram ul li:nth-child(2n) span:after {left:-100px} .diagram.view .tit-opt {opacity:1; transition:all 0.5s; transform:translateY(0)} .diagram.view ul li {opacity:1; transform:translateY(0)} .diagram.view.list02 ul li:nth-of-type(1) {transition:all 0.5s 0.3s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list02 ul li:nth-of-type(2) {transition:all 0.5s 0.6s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list02 ul li:nth-of-type(3) {transition:all 0.5s 0.9s cubic-bezier(.44,.03,.84,.68)} .diagram.view.list02 ul li:nth-of-type(4) {transition:all 0.5s 1.2s cubic-bezier(.44,.03,.84,.68)} @media (max-width:800px) { .diagram .bg-diagram {width:300px; height:300px} .diagram .tit-opt {margin-top:-45px; margin-left:-90px; width:180px; height:90px; font-size:25px; line-height:90px} .diagram ul li span {width:100px} .diagram ul li span:after {width:60px; height:60px; right:-80px} .diagram ul li:nth-child(2n) span:after {left:-80px} .diagram ul li:nth-of-type(1) {top:5px; margin-left:-310px} .diagram ul li:nth-of-type(2) {top:5px; margin-left:220px} .diagram ul li:nth-of-type(3) {bottom:-5px; margin-left:-310px} .diagram ul li:nth-of-type(4) {bottom:-5px; margin-left:220px} } @media (max-width:640px) { .diagram .bg-diagram {width:168px; height:168px} .diagram .tit-opt {margin-top:-25px; margin-left:-55px; width:110px; height:50px; font-size:15px; line-height:50px} .diagram ul li span {width:80px; font-size:15px} .diagram ul li span:after {top:-45px; right:0; width:35px; height:35px} .diagram ul li:nth-child(2n) span:after {left:0} .diagram ul li:nth-of-type(1) {top:20px; margin-left:-170px} .diagram ul li:nth-of-type(2) {top:20px; margin-left:90px} .diagram ul li:nth-of-type(3) {bottom:-55px; margin-left:-170px} .diagram ul li:nth-of-type(4) {bottom:-55px; margin-left:90px} } .diagram-wrap { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; } .diagram-wrap .inner-box.box01 { position: relative; width: calc(100%/6 - 20px); } .diagram-wrap .inner-box.box02 {position: relative; width: calc(100%/4 - 20px); margin: 0; } .diagram-wrap .inner-box:nth-of-type(1) { margin-left: 0; } .diagram-wrap .inner-box:nth-of-type(2)::after { display: none; } .diagram-wrap .inner-box .tit { display: block; width: 100%; padding: 20px 20px; font-size: 18px; font-weight: 500; color: #ffffff; text-align: center; border-radius: 40px; } .diagram-wrap .inner-box .titBg03 { background-color: #4e6680; } .diagram-wrap .inner-box .content-box { position: relative; min-height: 550px; } .diagram-wrap .inner-box.box02 .content-box { position: relative; min-height: auto; } .diagram-wrap .inner-box .content-box { padding: 20px 10px 20px;} .diagram-wrap .inner-box .content-box .list > li { margin-bottom: 18px; } .diagram-wrap .inner-box .content-box .list .dot-list li { position: relative; padding-left: 18px; line-height: 1.5; margin-bottom: 5px; } .diagram-wrap .inner-box .content-box .list .dot-list li::before { content: ""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: #dbdbdb; } @media(max-width: 1420px){ /* .diagram-wrap .inner-box { width: calc(50% - 20px); margin-left: 40px; } */ .diagram-wrap .inner-box::after { right: -30px; } } @media(max-width: 1250px){ .diagram-wrap .inner-box.step02 .content-box .box-list { padding-left: 15px; } } @media(max-width: 768px){ .diagram-wrap { display: block; margin-top: 0px; } .diagram-wrap .inner-box { width: 100% !important; } .diagram-wrap .inner-box .tit { font-size: 18px; font-weight: 500; } .diagram-wrap .inner-box { margin-left: 0; margin-bottom: 50px; } .diagram-wrap .inner-box::after { top: auto; bottom: -30px; right: auto; left: 50%; transform: translateX(-50%) rotate(90deg); } .diagram-wrap .inner-box .tit { font-size: 20px; } .diagram-wrap .inner-box .content-box { min-height: auto; } .diagram-wrap .inner-box .content-box { padding: 45px 40px 30px; } } @media(max-width: 650px){ .diagram-wrap .inner-box .tit { font-size: 18px; padding: 18px 22px; } } @media(max-width: 480px){ .diagram-wrap .inner-box .content-box { padding: 30px 20px 20px; } } #calc iframe {min-height: 900px; } @media screen and (max-width: 480px) { #calc .calc_wrap {overflow-x: scroll; } #calc .calc_wrap iframe {min-height: 900px;min-width: 700px; } #calc .calc_wrap iframe html body #wrap .popupContent {margin: 0 !important; padding: 0 !important;} }