#hd_top { position:relative; z-index:10; width:100%; background:#f9f9f9; height:40px; line-height:40px; float:left; border-bottom:1px solid #dcdcdc; } #hd_top .wrapper { width:100%; max-width:1400px; margin:0 auto; } #hd_top .wrapper .lt { float:left; font-size:13px; color:#000; font-weight:400; } #hd_top .wrapper .rt { float:right; font-size:13px; color:#000; font-weight:400; } #hd_top .wrapper h1 { float:right; font-size:18px; padding:0px 25px; line-height:inherit; margin-left:20px; color:#fff; background:#333; letter-spacing:-1px; font-weight:600; } #hd_top .wrapper h1 i { margin-right:5px;} #hd_top .wrapper h2 { float:right; margin-left:10px; } #hd_top .wrapper h2 a { color:#000; } #phantom_content_wrap { width:100%; max-width:1400px; margin:0 auto; } #main { width:100%; background: #3464c2; background: -webkit-linear-gradient(to right, #3464c2, #088ed3); background: linear-gradient(to right, #3464c2, #088ed3); padding:100px 0px; float:left;} #main .wrapper { width:100%; max-width:1400px; margin:0 auto; text-align:center;} #main .wrapper .search_submit { width:100%; display:inline-block; border:1px solid #fff; position:relative; font-size:18px; letter-spacing:-1px; color:#bedef9; text-align:left; padding:10px 30px; max-width:600px; margin:60px auto;} #main .wrapper .search_submit b { font-size:24px; position:absolute; top:0; right:0; border-left:1px solid #fff; padding:5px 15px; color:#fff;} #main .wrapper > h1 { font-size:40px; color:#fff; letter-spacing:-2px; font-weight:600; } #main .wrapper > h2 { font-size:24px; color:#fff; margin-top:30px; letter-spacing:-1px; font-weight:400; } #main .wrapper ul { width:100%; display:inline-block; } #main .wrapper ul li { width:calc(25% - 7.5px); float:left; margin-right:10px; background:#fff; position:relative; z-index:1; transition:0.2s ease all;} #main .wrapper ul li:hover { margin-top:-10px; transition:0.2s ease all; cursor:pointer;} #main .wrapper ul li:nth-last-child(1) { margin-right:0px;} #main .wrapper ul li > img { margin-top:45px; max-height:37px;} #main .wrapper ul li > h1 { font-size:24px; color:#0462ab; letter-spacing:-1px; font-weight:500; line-height:24px; margin:24px 0px;} #main .wrapper ul li > h2 { font-size:14px; color:#888; letter-spacing:-0.7px; font-weight:500; line-height:24px; margin-bottom:20px;} #main .wrapper ul li > h3 { font-size:14px; color:#b1b1b1; letter-spacing:-0.7px; font-weight:400; line-height:24px; margin-bottom:45px;} #main .wrapper ul li > p.main_li_search { width:100%; border-top:1px solid #dcdcdc; padding:15px 0px; margin:0; display:inline-block;} #main .wrapper ul li > p.main_li_search b { width:50%; float:left; display:inline-block; font-weight:350; color:#bcbccb; letter-spacing:-1px; font-size:14px; } #main .wrapper ul li > p.main_li_search b:nth-child(1) { border-right:1px solid #dcdcdc; } #main .wrapper ul li > p.main_li_search a:nth-child(2n) b {border-right:0;} #main .wrapper ul li > p.main_li_search b:hover { color:#088ed3; font-weight:600; cursor:pointer;} #main_bottom { width:100%; background: #fff; float:left; margin:} #main_bottom .wrapper { width:100%; max-width:1400px; margin:0 auto; text-align:left;} #main_bottom .wrapper ul { width:100%; display:inline-block; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;} #main_bottom .wrapper ul li { width:50%; float:left; padding:30px 50px;} #main_bottom .wrapper ul li:nth-last-child(1) { width:50%; float:left; padding:30px 50px; border-left:1px solid #dcdcdc;} #main_bottom .wrapper ul li img { vertical-align:middle; padding-top:5px; } #main_bottom .wrapper ul li .mb_cont { display:inline-block; padding-top:5px; font-size:20px; letter-spacing:-1px; vertical-align:middle; margin:0px 10px;} #main_bottom .wrapper ul li .submitbox { float:right; font-size:16px; color:#0462ab; font-weight:500; padding:8px 60px; letter-spacing:-1px; box-shadow: 0px 1px 7px 0 rgba(0, 60, 55, 0.3); border-radius:30px;} #main_bottom .wrapper ul li:nth-last-child(1) .submitbox { float:right; font-size:16px; color:#fff; background: #3464c2; background: -webkit-linear-gradient(to right, #3464c2, #088ed3); background: linear-gradient(to right, #3464c2, #088ed3); font-weight:500; padding:8px 60px; letter-spacing:-1px; box-shadow: 0px 1px 7px 0 rgba(0, 60, 55, 0.3); border-radius:30px;} #ft_main { width:100%; background: #252e4f; float:left;} #ft_main .wrapper { width:100%; max-width:1400px; margin:0 auto; text-align:left; color:#8a9c9f; padding:12px 0px;} #ft_main .wrapper a { color:#fff; margin:0 10px; } #ft_main .wrapper a:nth-child(1) { margin-left:0; } #ft_main .wrapper a:nth-last-child(1) { margin-right:0; } .gagu_wrapper { width:100%; max-width:1400px; margin:0 auto;} /* 메인 감싸는 부분 */ #ft_tail { width:100%; background:#1b2344; padding:25px 0px; float:left;} #ft_tail .ft_wrapper { display:inline-block; } #ft_tail .ft_wrapper .ft_first { width:20%; float:left; } #ft_tail .ft_wrapper .ft_second { width:55%; display:flex; justify-content: space-between; float:left; text-align:left; position:relative;} #ft_tail .ft_wrapper .ft_second::after { content:''; position:absolute; right:-30px; width:1px; height:95px; background:#8a9c9f; top:0px; } #ft_tail .ft_wrapper .ft_second h1 { font-size:16px; letter-spacing:0.8px; font-weight:600; color:#999; display:inline-block; vertical-align:top; margin-bottom:20px; line-height:24px;} #ft_tail .ft_wrapper .ft_second h2 { font-size:14px; word-break:keep-all; letter-spacing:-0.7px; font-weight:350; color:#b9b9b9; display:inline-block; margin-left:20px; line-height:24px;} #ft_tail .ft_wrapper .ft_third { width:25%; float:left; text-align:left; padding-left:60px;} #ft_tail .ft_wrapper .ft_third h1 { font-size:16px; letter-spacing:0.8px; font-weight:600; color:#999; display:inline-block; vertical-align:top; margin-bottom:20px; line-height:24px;} #ft_tail .ft_wrapper .ft_third h2 { font-size:14px; margin-bottom:0px; letter-spacing:-0.7px; font-weight:350; color:#b9b9b9; display:inline-block; line-height:30px;} /* footer bar */ bar { position:relative; margin-right:15px;} bar::after { content:''; position:absolute; margin:0px 7.5px; width:1px; height:12px; background:#dcdcdc; top:5px; } #snb { border-bottom:1px solid #e1e1e1; width:100%; display:inline-block;} #snb .wrap { width:100%; max-width:1400px; margin:0 auto; } #snb .sub_depth { margin:0 0 0 1px } #snb .sub_depth > li { width:calc(100%/2); margin-left:-1px; float:left; border:1px solid #e1e1e1; border-top:0; border-bottom:0; height:60px; line-height:60px; font-weight:500; font-size:1.2em; padding:0 20px; position:relative; color:#bbb; background:#f6f6f6 } #snb .sub_depth > li > a { display:block; color:#bbb } #snb .sub_depth > li .arrow { position:absolute; right:20px; top:0; font-size:14px; } #snb .sub_depth > li .arrow.on { font-size:1.3em } #snb .sub_depth > li:nth-child(3) { color:#222; background:#fff; cursor:pointer } #snb .sub_depth > li.last { background:#fff; color:#222 } #snb .sub_depth ul { position:absolute; width:calc(100% + 2px); background:#fff; border:1px solid #ddd; left:-1px; z-index:20; display:none } #snb .sub_depth ul li a { height:50px; line-height:50px; font-size:0.9em; color:#888; padding-left:20px; font-weight:400; border-top:1px solid #e0e0e0; display:block } #snb .sub_depth ul li:hover a { background:#f9f9f9 } #snb .sub_depth ul li.on a { background:#f0f0f0; color:#222 } #snb .sub_depth ul li:first-child a { border:0 } #sub_visual { width:100%; float:left; color:#fff; height:280px; position:relative; background-position:center; background-size:cover; background: #3464c2; background: -webkit-linear-gradient(to right, #3464c2, #088ed3); background: linear-gradient(to right, #3464c2, #088ed3); } #sub_visual h2 { text-align:center; font-size:3.5em; color:#fff; padding:120px 0 0 0; text-transform:uppercase; position:relative; line-height:1; animation:up .5s .2s forwards;font-weight:600 } #sub_visual h2:after { height:2px; width:60px; background:#fff; position:absolute; left:50%; bottom:-20px; margin-left:-30px; content:""; animation:scale .5s .5s forwards; } /* 간편상담신청 */ #consulting { width:100%; background: #fff; float:left; text-align:center; margin:60px 0px; margin-bottom:0;} #consulting h1 { display:block; font-size:32px;line-height:30px; color:#000; margin-bottom:30px;font-weight:500; letter-spacing:-1px; } #consulting .wrapper { width:100%; max-width:1400px; margin:0 auto; text-align:left;} #consulting .wrapper ul { width:100%; display:inline-block; border:1px solid #dcdcdc; border-radius:5px;} #consulting .wrapper ul li { width:50%; float:left; padding:30px 50px;} #consulting .wrapper ul li:nth-last-child(1) { width:50%; float:left; padding:30px 50px; border-left:1px solid #dcdcdc;} #consulting .wrapper ul li img { vertical-align:middle; padding-top:5px; } #consulting .wrapper ul li .mb_cont { display:inline-block; padding-top:5px; font-size:20px; letter-spacing:-1px; vertical-align:middle; margin:0px 10px;} #consulting .wrapper ul li .submitbox { float:right; font-size:16px; color:#0462ab; font-weight:500; padding:8px 60px; letter-spacing:-1px; box-shadow: 0px 1px 7px 0 rgba(0, 60, 55, 0.3); border-radius:30px;} #consulting .wrapper ul li:nth-last-child(1) .submitbox { float:right; font-size:16px; color:#fff; background: #3464c2; background: -webkit-linear-gradient(to right, #3464c2, #088ed3); background: linear-gradient(to right, #3464c2, #088ed3); font-weight:500; padding:8px 60px; letter-spacing:-1px; box-shadow: 0px 1px 7px 0 rgba(0, 60, 55, 0.3); border-radius:30px;} .consulting_form {border-radius:5px; width:100%; text-align:center; display:inline-block;} .consulting_form h1 { font-size:24px; letter-spacing:-1px; color:#000; font-weight:500; line-height:48px;} .consulting_form h2 { font-size:16px; letter-spacing:-1px; color:#999; font-weight:350; line-height:24px; margin-bottom:50px;} .consulting_form .wrapper { width:100%; max-width:1400px; margin:60px auto; background:#f9f9f9; border:1px solid #dcdcdc; padding:50px;} .tail_bb { color:#fff; font-size:14px; word-break:keep-all; margin-top:20px; letter-spacing:-1px; } /* 상단메뉴 */ .phantom-header-type01 { position:relative; width:100%; display:block; background: #fff; border-bottom: 1px solid rgba(117, 117, 117, 0.05); box-shadow: 0 0 28px 0 rgb(0 0 0 / 5%);} .phantom-header-type01 .wrapper { width:100%; display:inline-block; position:relative;} .phantom-header-type01 .phantom-header-type01-container { width:100%; height:80px; display:flex; align-items: center; justify-content: space-between; max-width:1400px; margin:0 auto; } .phantom-header-type01 .phantom-header-type01-container .logo { color:#000; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav { float:right; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav .gnb_empty { display:inline-block; margin-top:16px;} .phantom-header-type01 .phantom-header-type01-container .phantom-nav .gnb_empty a { margin-left:0; font-weight:600; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul { display:inline-block;} .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li.depth1 { z-index:99999; line-height:70px; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li.depth1 ul { display:none; line-height:30px; z-index:9999; position:absolute; box-shadow: 0px 9px 18px 0 rgb(0 0 0 / 7%); border-top:1px solid #e1e1e1; width:100%; padding:15px; top:70px; left:0; background:#fff; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li.depth1 ul li a { color:#222; font-size:14px; line-height:2.5em; text-align:left; margin:0; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li.depth1 ul li:hover a { font-weight:600; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li { display:inline; margin:0 15px; font-size:18px; letter-spacing:-1px; color:#000;} .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li a {display:inline-block; margin:0 15px; font-size:18px; letter-spacing:-1px; color:#000;} .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li a:hover { color:#287be4; font-weight:500; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li:nth-last-of-type(1) a { margin-right:0; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li.depth2 { width:100%; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li.depth2:nth-child(1) { margin-left:0; } .phantom-header-type01 .phantom-header-type01-container .phantom-nav ul li.depth1 ul .ptmenu { width:100%; margin:0 auto; max-width:1400px; text-align:right;} /* pt_dot */ pt_dot { position:relative; margin-right:10px; width:14px; vertical-align:middle; height:14px; background:#3464c2; display:inline-block; } footer .wrap { width:100%; max-width:1400px; margin:0 auto; text-align:center; padding:20px 0; margin-top:50px; border-top:1px solid #dcdcdc;} /* 슬라이더 */ .swiper { width: 100%; height: 100%;} .swiper-slide {text-align: center;font-size: 18px;background: #fff;overflow:hidden;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;} .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;} .swiper-pagination > .swiper-pagination-bullet { width: 20px !important; height: 20px !important; text-align: center; line-height: 20px; font-size: 12px; color: #bbb !important; opacity: 1 !important; background: none !important; font-size:13px; font-weight:600;} .swiper-container-autoheight { overflow:hidden; position:relative; } .swiper-pagination > .swiper-pagination-bullet-active2 { color: #fff !important; text-decoration:underline;text-underline-position:under;} .swiper-pagination > .swiper-pagination-bullet-active4 { color: #fff !important; text-decoration:underline;text-underline-position:under;} .swiper-pagination { bottom:30px !important; } .swiper-container-horizontal>.swiper-scrollbar { bottom:0 !important; width:100% !important; left:0 !important; } .swiper-scrollbar-drag { background:#00954d !important; border-radius:0 !important; } .swiper-pagination-bullet-active3 { background:#67a785 !important; opacity:1 !important; } .swiper-pagination_gallery { margin-top:15px; } /* 메인 visual 영역 시작 */ .phantom_main_visual01 { width:100%; display:flex; align-content: center;align-items: center; min-height:600px; background:url('../img/main.jpg') no-repeat center center; background-size:cover; } .pmv_wrapper { width:100%; max-width:1400px; margin:0 auto; text-align:left; color:#fff;} .pmv_wrapper h1 { font-size:48px; line-height:60px; letter-spacing:-2px; font-weight:400;} .pmv_wrapper h1 b { font-weight:900; color:#f5b100;} .pmv_wrapper p { position:relative; padding-top:40px; line-height:30px; font-size:18px; color:#f2f2f2; letter-spacing:0;} .pmv_wrapper p:before { content:''; position:absolute; top:20px; display:inline-block; width:40px; background:#fff; height:2px; left:0; } .pmv_wrapper h3 { font-size:24px; letter-spacing:3px; margin-bottom:10px; font-weight:400;} #section02 { width:100%; display:inline-block; } #section02 .wrap { width:100%; max-width:1400px; margin:0 auto; text-align:left; } #phantom_main { width:100%; margin-top:50px; display:inline-block; } #phantom_main .wrap { position:relative; max-width:1400px; margin:0 auto; width:100%; } #phantom_main .wrap h1 { font-size:48px; color:#333; letter-spacing:-1px; font-weight:600;} #phantom_main .wrap h2 { font-size:48px; color:#000; letter-spacing:-1px; font-weight:600; margin-bottom:10px; } #phantom_main .wrap h3 { font-size:16px; color:#888; letter-spacing:3px; font-weight:400; margin-bottom:20px; } #phantom_main .wrap p { font-size:20px; letter-spacing:-0.5px; margin-top:20px; line-height:1.5em; font-weight:300; } #phantom_main .wrap .cube { display:flex; position:absolute; align-items: center; justify-content: center; color:#fff; font-size:72px; right:0; top:0; width:200px; height:200px; border-radius:20%; background:#192260; animation-name: phantom_left; animation-duration: 2s; animation-timing-function: ease; animation-direction: alternate;} #phantom_main .wrap .cube_o { display:flex; position:absolute; align-items: center; justify-content: center; color:#fff; font-size:72px; right:220px; top:0; width:200px; height:200px; border-radius:20%; background:#07af52; animation-name: phantom_right; animation-duration: 2s; animation-timing-function: ease; animation-direction: alternate;} #phantom_main_latest { width:100%; margin-top:70px; display:inline-block; } #phantom_main_latest .wrap { max-width:1400px; margin:0 auto; width:100%; } #phantom_main_latest .wrap .phantom_ul { display:flex; width:100%; } #phantom_main_latest .wrap .phantom_ul li { margin:0 10px; } #phantom_main_latest .wrap .phantom_ul li a { font-size:20px; font-weight:500; transition:0.2s ease all;} #phantom_main_latest .wrap .phantom_ul li.on a { color:#07af52; transition:0.2s ease all; } #phantom_main_latest .wrap .phantom_ul li:nth-child(1) { margin-left:0; } .portfolio_item_wrap { width:100%; max-width:1400px; display:flex; flex-wrap:wrap; margin-top:50px; } @keyframes phantom_left { 0% { position:absolute; transform:rotate(360deg); transition:0.3s ease all; } 100% { position:absolute; transition:0.3s ease all; } } @keyframes phantom_right { 0% { position:absolute; transition:0.3s ease all; transform:rotate(-360deg); } 100% { position:absolute; transition:0.3s ease all; } } @media (max-width:1400px) { #phantom_main { width:100%; margin-top:50px; display:inline-block; } #phantom_main .wrap { position:relative; padding:0 10px; max-width:1400px; margin:0 auto; width:100%; } #phantom_main .wrap h1 { font-size:min(10vw, 30px); color:#333; letter-spacing:-1px; font-weight:600;} #phantom_main .wrap h2 { font-size:min(10vw, 30px); color:#000; letter-spacing:-1px; font-weight:600; margin-bottom:10px; } #phantom_main .wrap h3 { font-size:min(4vw, 13px); color:#888; letter-spacing:3px; font-weight:400; margin-bottom:20px; } #phantom_main .wrap p { font-size:min(6vw, 16px); letter-spacing:-0.5px; margin-top:20px; line-height:1.5em; font-weight:300; } #phantom_main_latest { width:100%; margin-top:30px; display:inline-block; } #phantom_main_latest .wrap { max-width:1400px; margin:0 auto; width:100%; } #phantom_main_latest .wrap .phantom_ul { display:flex; width:100%; flex-wrap:wrap; justify-content: center;} #phantom_main_latest .wrap .phantom_ul li { width:calc(50% - 20px); text-align:center; border:1px solid #e1e1e1; margin:10px 0; background:#f2f3f8; padding:10px 20px; color:#fff; } #phantom_main_latest .wrap .phantom_ul li:nth-of-type(2n) { margin-left:20px; } #phantom_main_latest .wrap .phantom_ul li a { font-size:14px; font-weight:500; transition:0.2s ease all;} #phantom_main_latest .wrap .phantom_ul li.on a { color:#07af52; transition:0.2s ease all; } #phantom_main_latest .wrap .phantom_ul li:nth-child(1) { margin-left:0px; } .portfolio_item_wrap { position:relative !important; width:100%; display:flex; flex-wrap:wrap; margin-top:30px; } #phantom_main .wrap .cube { display:none; position:absolute; left:60%; bottom:0; width:80px; height:80px; border-radius:20%; background:#192260; animation-name: phantom_left; animation-duration: 2s; animation-timing-function: ease; animation-direction: alternate;} #phantom_main .wrap .cube_o { display:none; position:absolute; left:50%; bottom:0; width:80px; height:80px; border-radius:20%; background:#07af52; animation-name: phantom_right; animation-duration: 2s; animation-timing-function: ease; animation-direction: alternate;} .phantom-header-type01 .phantom-header-type01-container {justify-content: center;} } .fab-wrapper { position: fixed; bottom: 20px; right: 20px; z-index:1000000; } .fab-checkbox { display: none; } .fab { position: absolute; bottom: 0; right: 0; cursor:pointer; width: 4rem; height: 4rem; background: blue; border-radius: 50%; background: #126ee2; box-shadow: 0px 5px 20px #81a4f1; transition: all 0.3s ease; z-index: 1; border-bottom-right-radius: 6px; border: 1px solid #0c50a7; } .fab:before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); } .fab-checkbox:checked ~ .fab:before { width: 90%; height: 90%; left: 5%; top: 5%; background-color: rgba(255, 255, 255, 0.2); } .fab:hover { background: #2c87e8; box-shadow: 0px 5px 20px 5px #81a4f1; } .fab-dots { position: absolute; height: 8px; width: 8px; background-color: white; border-radius: 50%; top: 50%; transform: translateX(0%) translateY(-50%) rotate(0deg); opacity: 1; animation: blink 3s ease infinite; transition: all 0.3s ease; } .fab-dots-1 { left: 15px; animation-delay: 0s; } .fab-dots-2 { left: 50%; transform: translateX(-50%) translateY(-50%); animation-delay: 0.4s; } .fab-dots-3 { right: 15px; animation-delay: 0.8s; } .fab-checkbox:checked ~ .fab .fab-dots { height: 6px; } .fab .fab-dots-2 { transform: translateX(-50%) translateY(-50%) rotate(0deg); } .fab-checkbox:checked ~ .fab .fab-dots-1 { width: 32px; border-radius: 10px; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); } .fab-checkbox:checked ~ .fab .fab-dots-3 { width: 32px; border-radius: 10px; right: 50%; transform: translateX(50%) translateY(-50%) rotate(-45deg); } @keyframes blink { 50% { opacity: 0.25; } } .fab-checkbox:checked ~ .fab .fab-dots { animation: none; } #button { display: inline-block; background-color: #192260; width: 50px; height: 50px; text-align: center; border-radius: 4px; position: fixed; bottom: 20px; left: 20px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; } #button::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 2em; line-height: 50px; color: #fff; } #button:hover { cursor: pointer; background-color: #333; } #button:active { background-color: #555; } #button.show { opacity: 1; visibility: visible; } .phantom_license { padding:5px 15px; background:#222; color:#fff; margin-top:10px; font-size:14px; letter-spacing:-1px; display:inline-block; } .addopt { display:block; } .modal {display: none; position: fixed; z-index: 10000; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content {background-color: #fefefe;z-index:99;margin: 4% auto; padding: 40px;max-width:900px;border: 1px solid #888;position:relative;width: 60%;-webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.4);-moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.4);box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.4);-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;} .modal-content .subject { width:100%; text-align:left; border-bottom:2px solid #000; font-size:24px; letter-spacing:-1px; color:#222; font-weight:600; padding:15px 0px; padding-top:0; } .modal-content .content { position:relative; width:100%; font-size:15px; letter-spacing:-0.5px;} .modal-content .content .service_content { border:none; resize:none; overflow-y:scroll; text-align:left; overflow-x:hidden; width:100%;line-height:1.6em; padding:15px; background:#f9f9f9; height:620px; clear:both; } .modal-content .content .textarea { border:1px solid #dcdcdc; resize:none; overflow-y:scroll; text-align:left; overflow-x:hidden; width:100%;line-height:1.6em; padding:10px; margin:10px 0; background:#fff; height:150px; clear:both; } .modal-content .content .privacy_content { border:none; resize:none; overflow-y:scroll; overflow-x:hidden; width:100%; height:auto; padding:15px; background:#f9f9f9; height:400px; clear:both; } .modal-content .pop_bt { position:absolute; top:35px; right:40px; font-weight:100; font-size:24px; } .modal-content .pop_bt i:hover { cursor:pointer;} .provision, .privacy { cursor:pointer; color:#fff; } /* 상담신청하기 */ #phantom_quick_inquiry { position:fixed; transition:0.3s ease all; bottom:20px; right:-340px; z-index:99999; width:100%; max-width:320px; padding:30px; text-align:center; background:#fff; border:1px solid #dcdcdc; border-radius:20px; } .fab-checkbox:checked ~ #phantom_quick_inquiry { right:20px; transition:0.3s ease all; } #phantom_quick_inquiry h1 { font-size:24px; letter-spacing:-1px; color:#000; margin-bottom:20px;} #phantom_quick_inquiry .inquiry_sub_box { position:relative; display:flex; align-items: center; margin-bottom:10px;} #phantom_quick_inquiry .inquiry_sub_box:hover .tbox { color:#000; } #phantom_quick_inquiry .inquiry_sub_box .pq_input, #phantom_quick_inquiry .inquiry_sub_box .pq_select {background:#fff; border:1px solid #dcdcdc; width:100%; padding:10px; letter-spacing:-1px; font-size:13px; color:#000; border-radius:8px; outline:none; transition:0.3s ease all; } #phantom_quick_inquiry .inquiry_sub_box .tbox { letter-spacing:-1px; text-align:left; color:#999; font-weight:500; font-size:14px; width:20%; max-width:120px; min-width:70px; } #phantom_quick_inquiry .inquiry_sub_box .pq_input:focus, #phantom_quick_inquiry .inquiry_sub_box .pq_select:focus { background:#f9faff; border:1px solid #4873ff; transition:0.3s ease all; } #phantom_quick_inquiry .inquiry_sub_box .pq_select option { padding:5px; } #phantom_quick_inquiry .inquiry_sub_box .pq_content { min-height:100px; } #phantom_quick_inquiry .inquiry_checkbox { display:flex; text-align:left; margin-bottom:10px; } #phantom_quick_inquiry .inquiry_checkbox input[type=checkbox] { position: relative; border-radius: 2px; background: none; cursor: pointer; line-height: 0; margin: 0 .4em 0 0; outline: 0; padding: 0 !important; vertical-align: text-top; height: 20px; width: 20px; -webkit-appearance: none; opacity: .2; transition:0.3s ease all; } #phantom_quick_inquiry .inquiry_checkbox input[type=checkbox]:hover { opacity: 1; transition:0.3s ease all; } #phantom_quick_inquiry .inquiry_checkbox input[type=checkbox]:checked { background-color: #4873ff; opacity: 1; transition:0.3s ease all; } #phantom_quick_inquiry .inquiry_checkbox input[type=checkbox]:before { content: ''; position: absolute; right: 50%; top: 50%; width: 4px; height: 10px; border: solid #FFF; border-width: 0 2px 2px 0; margin: -1px -1px 0 -1px; transform: rotate(45deg) translate(-50%, -50%); z-index: 2; transition:0.3s ease all; } #phantom_quick_inquiry .inquiry_checkbox #one_checkbox, #phantom_quick_inquiry .inquiry_checkbox #two_checkbox { background:#4873ff; border-radius:2px; color:#fff; } #phantom_quick_inquiry .inquiry_checkbox #one_checkbox + label, #phantom_quick_inquiry .inquiry_checkbox #two_checkbox + label { letter-spacing:-1px; cursor:pointer; vertical-align:middle; font-weight:400; font-size:13px; } #phantom_quick_inquiry .inquiry_checkbox .inquiry_detail { background: #4873ff; color: #fff; padding: 0px 7px; font-size: 11px; display: flex; border-radius: 4px; margin-left: 10px; font-weight: 350; letter-spacing: -0.5px; align-items: center; } #phantom_quick_inquiry .inquiry_checkbox .inquiry_detail:hover { box-shadow:0 0 10px 2px rgba(0,0,0, 0.1); cursor:pointer; transition:0.3s ease all; } #phantom_quick_inquiry .inquiry_submit { width:100%; transition:0.3s ease all; padding:10px; box-shadow: 0px 5px 20px 0 rgba(72, 115, 255, 0.35); border-radius: 10px; background:#4873ff; color:#fff; border:none; letter-spacing:-1px; margin-top:10px; font-size:16px; position:relative;} #phantom_quick_inquiry .inquiry_submit:hover::after { margin-left:5px; content:'→'; transition:0.3s ease all; animation: phantom_inquiry_arrow .4s; -moz-animation: phantom_inquiry_arrow .4s; -webkit-animation: phantom_inquiry_arrow .4s; -o-animation: phantom_inquiry_arrow .4s; } #phantom_quick_inquiry .inquiry_submit::after { content:''; transition:0.3s ease all; animation: phantom_inquiry_arrow2 .4s; -moz-animation: phantom_inquiry_arrow2 5s; -webkit-animation: phantom_inquiry_arrow2 .4s; -o-animation: phantom_inquiry_arrow2 .4s; } #phantom_quick_inquiry .inquiry_submit:hover { transition:0.3s ease all; position:relative; } .pt_inquiry_close { position:absolute; right:20px; top:20px; max-width:16px; cursor:pointer; transition:0.4s ease all;} .pt_inquiry_close:hover { transform:rotate(180deg); transition:0.4s ease all; } @keyframes phantom_inquiry_arrow { 0% { opacity:0; left:0; transition:0.4s ease all; } 100% { opacity:1; left:5px; transition:0.4s ease all; } } @keyframes phantom_inquiry_arrow2 { 0% { opacity:1; left:5px; transition:0.1s ease all; } 100% { opacity:0; left:0px; transition:0.1s ease all; } } @media (max-width:600px) { .fab-checkbox:checked ~ #phantom_quick_inquiry { max-width:100%; bottom:0; right:0;transition:0.3s ease all; border-radius:20px 20px 0 0; } }