@charset "utf-8";
html, body {width:100%; font-weight:400; font-family:'Roboto', 'NanumBarunGothic' , sans-serif; color:#666; text-align: center; border:solid 0px #000000; margin:0 auto;}
/* layout */
#wrapper {width:1080px; min-width:1080px; text-align: left; display: inline-block; margin:0 auto;}
#wrapper a {transition:0.3s;}
.inner {margin:0 auto; width:1080px; background:transparent}
/*.jbContent{display: flex; justify-content: center;}*/
/* contents
--------------------------------------------------------------------------------------------------------- */
#contents {clear:both; width:100%; border:solid 0px #000000;}
/* 메인비주얼
------------------------------------------------------ */
.mian-visual {position:relative;width:79%; height:260px; min-width:1080px; background:#227dbd; border-radius: 0px 0px 20px 20px;} /* background:#fe7e8a ; */
.mian-visual .item {margin-top:15px; margin:0 auto; width:1080px; height:384px;text-align:center; background-position:center center; background-repeat:no-repeat; background-size:cover;}
.mian-visual .item img {display:none;}
.mian-visual button.visual_btn {padding:0 25px; height:45px; border:solid 1px #fff; color:#fff; background:none; font-size:16px; line-height:1; box-sizing:border-box;}
.mian-visual button.visual_btn:hover {background:#fff; color:#2b78e2; transition:0.3s}
.visual_dom {height:384px; background:url('https://ajoa.co.kr/assets/images/main/mainVisual12_n_.png') no-repeat right; background-size:519px 384px; text-align:left; padding-top:60px; padding-left:15px; color:#fff; box-sizing:border-box; }
.visual_dom h3 {font-size:56px; font-family:'NanumSquareRoundEB'; letter-spacing:-1px;}
.visual_dom h3 strong {color:#ffc200;}
.visual_dom p {margin-top:10px; margin-bottom:30px; font-size:16px; font-weight:300; line-height:24px; letter-spacing:-0.5px;}
.visual_dom p strong {color:#ffc200; font-weight:400;}
.visual_dom2 {height:384px; background:url('https://ajoa.co.kr/assets/images/main/mainVisual13_n2_.png') no-repeat right; background-size:650px 384px; text-align:left; padding-top:60px; padding-left:15px; color:#fff; box-sizing:border-box; }
.visual_dom2 h3 {font-size:56px; font-family:'NanumSquareRoundEB'; letter-spacing:-1px;}
.visual_dom2 h3 strong {color:#a9ec24;}
.visual_dom2 p {margin-top:15px; margin-bottom:30px; font-size:22px; font-weight:300; line-height:24px; letter-spacing:-0.5px;}
.visual_dom2 p strong {color:#a9ec24; font-weight:400;}
.visual_dom2 em {margin-right:5px;}
.visual_homepage {height:384px; background:url('https://ajoa.co.kr/assets/images/main/mainVisual08_n.png') no-repeat right; text-align:left; padding-top:60px; padding-left:15px; color:#fff; box-sizing:border-box; }
.visual_homepage h3 {font-size:56px; font-family:'NanumSquareRoundEB'; letter-spacing:-1px;}
.visual_homepage h3 strong {color:#ffc200;}
.visual_homepage p {margin-top:10px; margin-bottom:30px; font-size:16px; font-weight:300; line-height:24px; letter-spacing:-0.5px; }
.visual_homepage2 {height:384px; background:url('https://ajoa.co.kr/assets/images/main/mainVisual08_n_.png') no-repeat right; text-align:left; padding-top:60px; padding-left:15px; color:#fff; box-sizing:border-box; }
.visual_homepage2 h3 {font-size:56px; font-family:'NanumSquareRoundEB'; letter-spacing:-1px;}
.visual_homepage2 h3 strong {color:#fb7397;}
.visual_homepage2 p {margin-top:10px; margin-bottom:30px; font-size:16px; font-weight:300; line-height:24px; letter-spacing:-0.5px; }
.visual_mail {height:384px; background:url('https://ajoa.co.kr/assets/images/main/mainVisual14_n_.png') no-repeat right; background-size:547px 384px; text-align:left; padding-top:60px; padding-left:15px; color:#fff; box-sizing:border-box; }
.visual_mail h3 {font-size:56px; font-family:'NanumSquareRoundEB'; letter-spacing:-1px;}
.visual_mail h3 strong {color:#ffc200;}
.visual_mail p {margin-top:10px; margin-bottom:30px; font-size:20px; font-weight:300; line-height:26px; letter-spacing:-0.5px; }
.visual_mail p span {display:inline-block; width:47px; height:23px;background:url('https://ajoa.co.kr/assets/images/main/visual_cgv.png') no-repeat; vertical-align:text-top;}
.visual_mall {height:384px; background:url('https://ajoa.co.kr/assets/images/main/mainVisual07_n.png') no-repeat right; text-align:left; padding-top:60px; padding-left:15px; color:#fff; box-sizing:border-box; }
.visual_mall h3 {font-size:56px; font-family:'NanumSquareRoundEB'; letter-spacing:-1px;}
.visual_mall h3 strong {color:#ffc200;}
.visual_mall p {margin-top:10px; margin-bottom:30px; font-size:20px; font-weight:300; line-height:24px; letter-spacing:-0.5px; }
.visual_canlendar {height:384px; background:url('https://ajoa.co.kr/assets/images/main/mainVisual15_n_.png') no-repeat bottom right; background-size:465px 340px; text-align:left; padding-top:60px; padding-left:15px; color:#fff; box-sizing:border-box; }
.visual_canlendar h3 {font-size:56px; font-family:'NanumSquareRoundEB'; letter-spacing:-1px;}
.visual_canlendar h3 strong {color:#ffc200;}
.visual_canlendar p {margin-top:15px; margin-bottom:30px; font-size:16px; font-weight:300; line-height:24px; letter-spacing:-0.5px;}
.visual_canlendar p strong {color:#ffc200; font-weight:400;}
.visual_canlendar em {margin-right:5px;}
.visual_img_650 {width:650px;}
/* 버튼 */
.mian-visual .owl-dots {display:inline-flex; position:absolute; bottom:25px; left:50%; transform:translateX(-50%); width:120px;}
.mian-visual .owl-dot {margin:0 3px; padding:0; width:16px; height:16px; border-radius:50%; box-sizing:border-box; background:#fff; opacity:0.3; vertical-align:text-top;}
.mian-visual .owl-dot.active {width:16px; border-radius:50%; background:none; border:solid 4px #ffc200; opacity:1; vertical-align:top;}
/* 화살표 */
.mian-visual .owl-carousel .owl-nav .owl-prev {display:block; position:absolute; top:25%; left:12%; background:transparent; font-size:85px; color:#a4c2ee; font-family:'Roboto', sans-serif; }
.mian-visual .owl-carousel .owl-nav .owl-next {display:block; position:absolute; top:25%; right:12%; background:transparent; font-size:85px; color:#a4c2ee; font-family:'Roboto', sans-serif; }
/*스타벅스이벤트*/
.ev_star {position:absolute; top:-20px; left:150px; width:200px; height:90px; background:url('https://ajoa.co.kr/assets/images/main/img_starbucks.png') no-repeat center left; background-size:54px; } /* visual_star2_ice.png */
.ev_star p {color:#fff; padding-left:63px; padding-top:23px; font-size: 14px; font-weight: normal;}
/* 1400px 이하일 때 노출*/
@media screen and (max-width:1600px) {
.mian-visual .owl-carousel .owl-nav .owl-prev {display:none; position:absolute; top:25%; left:5%; background:transparent; font-size:85px; color:#a4c2ee; font-family:'Roboto', sans-serif; }
.mian-visual .owl-carousel .owl-nav .owl-next {display:none; position:absolute; top:25%; right:5%; background:transparent; font-size:85px; color:#a4c2ee; font-family:'Roboto', sans-serif; }
}
/* 1080px 이하일 때 노출*/
@media screen and (max-width:1080px) {
.mian-visual .owl-carousel .owl-nav .owl-prev {display:none; position:absolute; top:25%; left:1%; background:transparent; font-size:85px; color:#a4c2ee; font-family:'Roboto', sans-serif; }
.mian-visual .owl-carousel .owl-nav .owl-next {display:none; position:absolute; top:25%; right:1%; background:transparent; font-size:85px; color:#a4c2ee; font-family:'Roboto', sans-serif; }
}
/* 도메인검색 탭 */
.domain-search {height:200px;}
#serDomain2 {position:relative; margin:0 auto; width:80%; height:200px; background:#1a4f9a; /*background:#2767c1; margin:10px 20px 10px 0; float:left; */ z-index:10;}
#serDomain2 ul.tabs {margin: 0; padding: 0; float: left; list-style: none; height: 45px; width: 80%; font-size:15px; letter-spacing:-1px; color:#666; z-index:10;}
#serDomain2 ul.tabs li {box-sizing: border-box;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: left; text-align:center; cursor: pointer; height: 45px; line-height: 43px; font-weight:400; border: 1px solid #c5cfd6; border-left: none; border-bottom: 1px solid #6d6d6d; background: #fafafa; color:#555; width: calc(1080px / 5); width: -webkit-calc(1080px / 5); width: -moz-calc(1080px / 5); width: -o-calc(1080px / 5); z-index:100;}
#serDomain2 ul.tabs li:hover {background: #f6fbfe; }
#serDomain2 ul.tabs li:first-child {border-left: 1px solid #c5cfd6; }
#serDomain2 ul.tabs li a{display:block; color:#555; font-weight:700; text-decoration:none; font-family:'Roboto', 'NanumBarunGothic', sans-serif; }
#serDomain2 ul.tabs li a:hover{color:#347adc;}
#serDomain2 ul.tabs li img{margin-left: 5px; margin-bottom: 4px; vertical-align: middle; }
#serDomain2 ul.tabs li.active {background: #fff; border-top: 3px solid #333; border-right: 1px solid #6d6d6d; border-left: 1px solid #6d6d6d; border-bottom:none; color:#333; font-weight:700; font-family:'Roboto', 'NanumBarunGothic', sans-serif; }
#serDomain2 .tab_container {margin:0 auto; border: none; clear: both;/* float: left; */width: 1080px; background: #fff; position: relative; z-index:1;}
#serDomain2 .tab_content {height:200px; font-size: 13px; padding:15px 0; display: none; /* text-align:center; *background:#2767c1; */ background:#1a4f9a; box-sizing: border-box;}
#serDomain2 .search_txt {color:#fff; font-size:19px; margin-top:24px; line-height:1; font-weight:300; margin-left:10px;}
#serDomain2 .search_txt .event_star{color:#0eeaab; font-size:19px; margin-top:24px; line-height:1; font-weight:300; margin-left:5px;}
/* 검색영역 이벤트 */
.search_star {position:absolute; top:28px; right:20px; width:170px; display:inline-block; float:right; text-align:center;}
.search_star a {font-size:17px; color:#fff; font-weight:300; line-height:23px; letter-spacing:-0.5px;}
.search_star a strong {color:#00d67b; font-weight:300; }
.search_star img {margin-top:18px;}
.search_cgv {position:absolute; top:28px; right:20px; width:170px; display:inline-block; float:right; text-align:center;}
.search_cgv a {font-size:16px; color:#fff; font-weight:300; line-height:23px; letter-spacing:-0.5px;}
.search_cgv a strong {color:#ff9591; font-weight:400; }
.search_cgv img {margin-top:18px;}
.search_mail {position:absolute; top:40px; right:20px; width:180px; display:inline-block; float:right; text-align:center;}
.search_mail a {font-size:17px; color:#fff; font-weight:400; line-height:26px;}
.search_mail a span{font-size:18px; color:#fff; font-weight:500; letter-spacing:0.5px;}
.search_mail a strong {color:#ff8267; font-weight:500; }
.search_mail img {margin-top:0px; width:142px;}
/* 검색탭 */
.search-tit {text-align:left; /*padding-left:60px;*/}
.search-tit ul {margin-top:18px; }
.search-tit ul li {display:inline-block; padding:2px 10px; }
.search-tit ul li a {font-size:16px; color:#fff; }
.search-tit ul li a::before {content:''; position:absolute; top:151px; margin-left:-11px; width:1px; height:14px; background:rgba(255,255,255,0.5);}
.search-tit ul li:first-child a::before {display:none;}
.search-tit ul li a:hover {color:#ffcc00;}
.search-tit ul li:first-child a::after {content:'▲ '; position:absolute; top:130px; left:45px; font-size:11px; color:#ffcc00; opacity:1; transition:.1s;}
.search-tit .on {color:#ffcc00;}
/* 도메인검색 */
.domain_temp2 {padding: 15px 15px 0 0; box-sizing: border-box;}
.domain_temp2 fieldset {overflow:hidden; margin-bottom:7px;}
.domain_temp2 fieldset label {display:inline-block; height:30px; vertical-align:middle;}
.domain_temp2 h4 {display:inline-block;font-size:28px; vertical-align:middle; /*color:#fff; www이동*/font-weight:normal; background:#fff; width:82px; height:52px; border-top-left-radius:2px; border-bottom-left-radius:2px; border:solid 1px #fff; line-height:1.7; padding-left:10px; margin-right:0; box-sizing: border-box; }
.domain_temp2 .search_text_input {vertical-align:middle; font-size:21px; color:#326ec3; font-weight:700; padding:2px 3px 1px 10px; width:675px; height:52px; background:#fff; border:1px solid #fff; border-radius:2px; border-top-left-radius:0px; border-bottom-left-radius:0px; margin-right:4px; z-index:1;box-sizing: border-box;}
.domain_temp2 p {margin-top:10px; font-size:14px; color:#fff; text-align:left; padding-left:140px;}
.domain_temp2 p a { font-size:14px; color:#fff; }
.domain_temp2 p span {display:inline-block; background:#02aa63; font-size:13px; border-radius:10px; padding:3px 9px 3px 10px; margin-right:7px; box-sizing: border-box;}
.domain_temp2 p strong {color:#00d67b; font-weight:normal;}
.domain_temp2 p em {margin-right:5px;}
.domain_temp2 fieldset button {display:inline-block; width:140px; height:52px; vertical-align:middle; border-radius:2px; border:solid 1px #c19d06; /*background:#fdc928; */background: linear-gradient( to bottom, #fbe25b, #fec411 ); color:#333; font-family:'Roboto', 'NanumBarunGothic', sans-serif; font-size:19px; font-weight:700; letter-spacing:-0.5px; }
/* 도메인검색어 자동저장 */
.search_keyword {margin:0 auto; width:1080px; position:relative; font-family:'Roboto', 'NanumSquare', sans-serif;}
.keyword_arrow_d {position:absolute; top:94px; left:665px; width:15px; height:10px; font-size:0; background: url('https://ajoa.co.kr/assets/images/main/search_down.png') no-repeat; z-index:101; }
.keyword_arrow_u {position:absolute; top:94px; left:665px; width:15px; height:10px; font-size:0; background: url('https://ajoa.co.kr/assets/images/main/search_up.png') no-repeat; z-index:101; }
.keyword_box {position:absolute; top:124px; left:3px; width:692px; padding:0; font-family:'Roboto', 'NanumSquare', sans-serif; background:#fff; border:solid 1px #a9bad1; border-bottom-left-radius:3px; border-bottom-right-radius:3px; z-index:100; box-sizing: border-box;}
.keyword_box ul.list {margin:10px 0; box-sizing: border-box;}
.keyword_box ul.list li {padding:4px 20px;}
.keyword_box ul.list li:hover {background:#f4f4f4;}
.keyword_box ul.list li a {font-size:15px; color:#333; font-weight:300; font-family:'Roboto', 'NanumBarunGothic', sans-serif;}
.keyword_box ul.list li a:hover {color:#2665be;}
.keyword_box ul.list li span {float:right; font-size:14px;}
.keyword_box ul.list li span em {font-style:normal; padding-right:15px;}
.keyword_box ul.list li span button.btn_clear {background: url('../images/main/search_del.png') no-repeat; font-size:0; width:10px; height:9px; vertical-align:middle;}
.keyword_box p.keyword_off {padding:15px 20px; font-size:14px; color:#666;}
.keyword_box p.control {height:24px; padding:10px 20px; background:#eceff3; font-size:13px; color:#566e90;}
.keyword_box p.control button.recently {padding:0; text-decoration:underline; font-family:'Roboto', 'NanumSquare', sans-serif; color:#566e90;}
.keyword_box p.control span {float:right;}
.keyword_box p.control span button.save_on {width:37px; height:24px; background:#8093ae; border:solid 1px #8093ae; color:#fff; line-height:1.6}
.keyword_box p.control span button.save_off {width:37px; height:24px; background:#fff; border:solid 1px #8093ae; color:#7385a0; line-height:1.6}
.keyword_box p.control span button.save_off:hover {color:#42536c;}
.keyword_box div.save_off_txt {position:absolute; bottom:37px; right:20px; font-size:13px; padding:2px 6px; background:#fff; border:solid 1px #8093ae; z-index:101; box-sizing: border-box;}
/* 후이즈서비스
------------------------------------------------------ */
.whois-service {padding-top:65px; box-sizing:border-box; overflow:hidden; position:relative; }
.whois-service .service-box {width:370px;}
.mail-icon {position:absolute; top:130px; left:284px; width:70px; height:70px; background: url('https://ajoa.co.kr/assets/images/main/mail_icon_new.png') no-repeat; background-size:70px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.hosting-icon {position:absolute; top:130px; left:648px; width:70px; height:70px; background: url('https://ajoa.co.kr/assets/images/main/hosting_icon_new.png') no-repeat; background-size:70px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
/*.whois-service div {float:left;} */
.whois-service h2 {font-size:35px; color:#333; text-align:center; font-family:'Roboto', 'NanumBarunGothic', sans-serif; font-weight:300; /* padding-bottom:50px;*/ letter-spacing:-1px;}
.whois-service ul {box-sizing:border-box; margin-top:40px; margin-bottom:80px;}
.whois-service li {display:inline-block; width:350px; text-align:center; box-sizing:border-box;}
.whois-service li img {margin-bottom:15px; transition: height 0.2s ease-out, top 0.2s ease-out, left 0.2s ease-out, transform 0.5s; width:98px;}
.whois-service li a {display:block;}
.whois-service li a:hover img { transform: translate(0px, -10px);}
/* .whois-service li a:hover p {color:#347adc;} */
.whois-service li h4 {font-size:24px; color:#333; font-weight:500; letter-spacing:-1px;}
.whois-service li h4 strong{color:#347adc; font-weight:500; }
.whois-service li p {padding-top:15px; font-size:14px; color:#666; line-height:20px; letter-spacing:0px; font-weight:400;}
.whois-service li:nth-child(1) {width:350px; padding-bottom:40px; border-bottom:solid 1px #d9e3f1; }
.whois-service li:nth-child(2) {width:365px; padding-bottom:40px; border:solid 1px #d9e3f1; border-top:none;}
.whois-service li:nth-child(3) {width:350px; padding-bottom:40px; border-bottom:solid 1px #d9e3f1; }
.whois-service li:nth-child(4) {width:350px; padding-top:35px;}
.whois-service li:nth-child(5) {width:365px; padding-top:35px; border-left:solid 1px #d9e3f1; border-right:solid 1px #d9e3f1; }
.whois-service li:nth-child(6) {width:350px; padding-top:35px;}
/* 배너
------------------------------------------------------ */
.banner-wrap {box-sizing:border-box; /*margin-bottom:10px;*/ overflow:hidden;}
.banner-wrap div{margin-bottom:6px;}
.banner-wrap .con-banner1{padding-right:9px; float:left;}
.banner-wrap .ban_01 {width:535px; height:235px; display:inline-block; float:left; background:#e3e6f6 url('https://ajoa.co.kr/assets/images/main/ban_01_bg.png') no-repeat right; margin-right:10px; margin-bottom:9px; padding:40px; box-sizing:border-box; position:relative;}
.banner-wrap .ban_01 h4 {font-size:28px; color:#333; font-weight:400; margin-bottom:46px; line-height:36px; font-family: 'GmarketSansMedium'; }
.banner-wrap .ban_01 h4 strong {color:#445af3; font-weight:400;}
.banner-wrap .ban_01 p {padding-top:25px; font-size:16px; color:#666; font-weight:400; font-family: 'GmarketSansMedium'; padding-top:15px; box-sizing:border-box; }
.banner-wrap .ban_01:hover {background:#eceeff url('../images/main/ban_01_bg.png') no-repeat 105%; }
.banner-wrap .ban_01::before {content:''; position:absolute; transform:scaleX(0.2); transform-origin:left; top:154; left:40; width:105px; height:1px; background:#445af3; margin-bottom:15px; transition: transform .3s ease;}
.banner-wrap .ban_01:hover::before {transform:scaleX(0.5); }
.banner-wrap .ban_06 {width:535px; height:235px; display:inline-block; float:left; background:#dae7f4 url('https://ajoa.co.kr/assets/images/main/ban_06_bg_2.png') no-repeat 97% 70%; margin-right:10px; margin-bottom:9px; padding:40px; box-sizing:border-box; position:relative;}
.banner-wrap .ban_06 h4 {font-size:26px; color:#333; font-weight:400; margin-bottom:15px; line-height:36px; font-family: 'GmarketSansMedium'; }
.banner-wrap .ban_06 h4 strong {color:#326cb6; font-weight:400; letter-spacing: -1px;}
.banner-wrap .ban_06 p {padding-top:25px; font-size:16px; color:#666; font-weight:400; font-family: 'GmarketSansMedium'; padding-top:15px; box-sizing:border-box; }
.banner-wrap .ban_06:hover {background:#e3ecf6 url('../images/main/ban_06_bg_2.png') no-repeat 105% 70%; }
.banner-wrap .ban_06::before {content:''; position:absolute; transform:scaleX(0.2); transform-origin:left; top:154; left:40; width:105px; height:1px; background:#326cb6; margin-bottom:15px; transition: transform .3s ease;}
.banner-wrap .ban_06:hover::before {transform:scaleX(0.5); }
.banner-wrap .ban_02 {width:535px; height:235px; display:inline-block; float:left; background:#e3edfb url('https://ajoa.co.kr/assets/images/main/ban_02_bg.png') no-repeat right; margin-right:0; margin-bottom:9px; padding:40px; box-sizing:border-box; position:relative;}
.banner-wrap .ban_02 h4 {font-size:28px; color:#333; font-weight:400; margin-bottom:15px; line-height:36px; font-family: 'GmarketSansMedium'; }
.banner-wrap .ban_02 h4 strong {color:#315bd4; font-weight:400;}
.banner-wrap .ban_02 p {padding-top:25px; font-size:16px; color:#666; font-weight:400; font-family: 'GmarketSansMedium'; padding-top:15px; box-sizing:border-box; }
.banner-wrap .ban_02:hover {background:#ebf2fc url('../images/main/ban_02_bg.png') no-repeat 105%; }
.banner-wrap .ban_02::before {content:''; position:absolute; transform:scaleX(0.15); transform-origin:left; top:160; left:40; width:132px; height:1px; background:#315bd4; margin-bottom:15px; transition: transform .3s ease;}
.banner-wrap .ban_02:hover::before {transform:scaleX(0.5); }
.banner-wrap .ban_03 {width:535px; height:129px; display:inline-block; float:left; background:#e7f7f2 url('https://ajoa.co.kr/assets/images/main/ban_03_bg.png') no-repeat right; margin-right:10px; margin-bottom:9px; padding:40px; box-sizing:border-box; }
.banner-wrap .ban_03 h4 {font-size:24px; color:#333; font-weight:400;}
.banner-wrap .ban_03 h4 strong {color:#08a36f; font-weight:400;}
.banner-wrap .ban_03 p { font-size:16px; color:#666; font-weight:400; padding-top:5px; box-sizing:border-box; }
.banner-wrap .ban_03:hover {background:#edfbf7 url('../images/main/ban_03_bg.png') no-repeat 102%; }
.banner-wrap .ban_04 {width:535px; height:129px; display:inline-block; float:left; background:#fceaea url('https://ajoa.co.kr/assets/images/main/ban_04_bg_n.png') no-repeat center right -27px; margin-right:0px; margin-bottom:9px; padding:26px 20px 0 30px; box-sizing:border-box; }
.banner-wrap .ban_04 h4 {font-size:30px; color:#333; font-weight:bold; letter-spacing:-1px; font-family: 'GmarketSansMedium';}
.banner-wrap .ban_04 h4 strong {color:#f24c4c; font-weight:bold;}
.banner-wrap .ban_04 p { font-size:17px; color:#666; letter-spacing:-0.1px; box-sizing:border-box; font-family: 'GmarketSansMedium'; }
.banner-wrap .ban_04 p strong {color:#f24c4c; font-weight:normal;}
.banner-wrap .ban_04:hover {background:#fff1f1 url('../images/main/ban_04_bg_n.png') no-repeat center right -20px; }
.banner-wrap .ban_05 {width:535px; height:129px; display:inline-block; float:left; background:#e8efeb url('https://ajoa.co.kr/assets/images/main/ban_05_bg_.png') no-repeat right; margin-right:10px; margin-bottom:9px; padding:40px; box-sizing:border-box; }
.banner-wrap .ban_05 h4 {font-size:24px; color:#333; font-weight:400; }
.banner-wrap .ban_05 h4 strong {color:#03c75a; font-weight:400;}
.banner-wrap .ban_05 p { font-size:16px; color:#666; font-weight:400; padding-top:5px; box-sizing:border-box; }
.banner-wrap .ban_05 p strong {color:#03c75a; }
.banner-wrap .ban_05:hover {background:#e8efeb url('../images/main/ban_05_bg_.png') no-repeat 102%; }
.banner-wrap .ban_05.nworks {background:#fff url('../images/main/ban_05_bg_2.png') no-repeat 30px; border:solid 1px #03c75a; padding:30px 20px; box-sizing:border-box;}
.banner-wrap .ban_05.nworks:hover {background:#fff url('../images/main/ban_05_bg_2.png') no-repeat 35px; border:solid 1px #03c75a; padding:30px 20px; box-sizing:border-box; transition: all .3s ease;}
.banner-wrap .ban_05.nworks div {margin-left:125px;}
.banner-wrap .ban_05.nworks h4 {font-size:30px; font-family: 'GmarketSansMedium'; font-weight:bold; letter-spacing:-2px; line-height:1.5; }
.banner-wrap .ban_05.nworks h4 strong {color:#03c75a; font-weight:bold;}
.banner-wrap .ban_05.nworks h4 span {box-shadow:inset 0 -18px #fff736; }
.banner-wrap .ban_05.nworks p { font-size:15.5px; letter-spacing:-0.5px; color:#666; line-height:1.5; padding-top:0; font-family: 'GmarketSansMedium'; }
.banner-wrap .ban_05.nworks p strong { font-weight:normal; }
/*
.board-wrap ul{height:120px; background:#f4f4f4; padding:25px;box-sizing:border-box; overflow:hidden;}
.board-wrap li:first-child {width:52%; height:80%; float:left;}
.board-wrap li:nth-child(2) {width:48%; height:80%; float:left;}
.board-wrap dl {width:490px; }
.board-wrap dt {display:inline-block; float:left; width:110px; font-size:16px; color:#333; overflow:hidden;}
.board-wrap dt a {font-size:16px; color:#222; font-weight:500;}
.board-wrap dt img {padding-left:5px; vertical-align:text-bottom;}
.board-wrap dd {float:right; display:inline-block; width:370px; font-size:15px; color:#666; line-height:24px;}
.board-wrap dd a {font-size:14px; color:#666; font-weight:400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block; width:280px; }
.board-wrap dd a:hover {color:#347adc;}
.board-wrap dd span {float:right; font-size:13px; color:#888;}
.board-wrap dd span a:hoverr {color:#347adc;}
.board-wrap .news {width:405px; }
*/
/* 게시판
------------------------------------------------------ */
/*
.board-wrap ul{height:250px; background:#ffffff; padding:5px; box-sizing:border-box; overflow:hidden; margin-top:-1px;}
.board-wrap li:first-child {width:49%; height:80%; float:left;}
.board-wrap li:nth-child(2) {width:1%; height:80%; float:left;}
.board-wrap li:nth-child(3) {width:49%; height:80%; float:left;}
.board-wrap dl {width:510px; }
.board-wrap dt {display:inline-block; float:left; width:110px; font-size:14px; color:#333; overflow:hidden; line-height:24px;/* background: url('../images/common/notice_arrow.png') no-repeat 21px 21px; background-position: 70px 50%; /}
.board-wrap dt a {font-size:14px; color:#222; font-weight:400;}
.board-wrap dt img {padding-left:5px; vertical-align:text-bottom;}
.board-wrap dd {float:right; display:inline-block; width:390px; font-size:14px; color:#666; line-height:24px;}
.board-wrap dd a {font-size:14px; color:#666; font-weight:400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block; width:380px; }
.board-wrap dd a:hover {color:#347adc;}
.board-wrap dd span {float:right; font-size:13px; color:#888; border: 0px solid #fe7e8a;}
.board-wrap dd span a:hoverr {color:#347adc;}
.board-wrap .news {width:405px; }
*/
.board-wrap ul{height:120px; background:#ffffff; padding:0px; box-sizing:border-box; overflow:hidden; margin-top:0px;}
.board-wrap li:first-child {width:32%; height:80%; float:left; padding:5px;}
.board-wrap li:nth-child(2) {width:1%; height:80%; float:left;}
.board-wrap li:nth-child(3) {width:32%; height:80%; float:left; padding:5px;}
.board-wrap li:nth-child(4) {width:1%; height:80%; float:left;}
.board-wrap li:nth-child(5) {width:32%; height:80%; float:left;}
.board-wrap dl {width:360px; }
.board-wrap dt {display:inline-block; float:left; width:90px; font-size:13px; color:#333; overflow:hidden; line-height:24px;/* background: url('../images/common/notice_arrow.png') no-repeat 21px 21px; background-position: 70px 50%; */}
.board-wrap dt a {font-size:13px; color:#222; font-weight:400;}
.board-wrap dt img {padding-left:5px; vertical-align:text-bottom;}
.board-wrap dd {float:right; display:inline-block; width:260px; font-size:13px; color:#666; line-height:24px;}
.board-wrap dd a {font-size:13px; color:#666; font-weight:400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block; width:380px; }
.board-wrap dd a:hover {color:#347adc;}
.board-wrap dd span {float:right; font-size:13px; color:#888; border: 0px solid #fe7e8a;}
.board-wrap dd span a:hoverr {color:#347adc;}
.board-wrap .news {width:405px; }
.board-wrap1 ul{height:150px; background:#ffffff; padding:5px; box-sizing:border-box; overflow:hidden; margin-top:60px;}
.board-wrap1 li:first-child {width:32%; height:80%; float:left;}
.board-wrap1 li:nth-child(2) {width:1%; height:80%; float:left;}
.board-wrap1 li:nth-child(3) {width:32%; height:80%; float:left;}
.board-wrap1 li:nth-child(4) {width:1%; height:80%; float:left;}
.board-wrap1 li:nth-child(5) {width:32%; height:80%; float:left;}
.board-wrap1 dl {width:360px; }
.board-wrap1 dt {display:inline-block; float:left; width:90px; font-size:13px; color:#333; overflow:hidden; line-height:24px;/* background: url('../images/common/notice_arrow.png') no-repeat 21px 21px; background-position: 70px 50%; */}
.board-wrap1 dt a {font-size:13px; color:#222; font-weight:400;}
.board-wrap1 dt img {padding-left:5px; vertical-align:text-bottom;}
.board-wrap1 dd {float:right; display:inline-block; width:260px; font-size:13px; color:#666; line-height:24px;}
.board-wrap1 dd a {font-size:13px; color:#666; font-weight:400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block; width:380px; }
.board-wrap1 dd a:hover {color:#347adc;}
.board-wrap1 dd span {float:right; font-size:13px; color:#888; border: 0px solid #fe7e8a;}
.board-wrap1 dd span a:hoverr {color:#347adc;}
.board-wrap1 .news {width:405px; }
/*신규 연장팝업 레이어*/
.layer_style{position:relative; display:block; width:720px; background: #fff; border: solid 1px #353b4c; font-family:'Malgun Gothic', 맑은 고딕, tahoma, 'gulim', 굴림; }
.layer_style h4{height:50px; background: #353b4c; color:#fff; font-family:inherit; font-size:18px; font-weight:bold; letter-spacing:-1px; line-height:44px; padding-left:20px;}
.layer_style h5{color: #353b4c; font-family:'Malgun Gothic', 맑은 고딕, tahoma, 'gulim', 굴림; font-size:32px; font-weight:bold; letter-spacing:-1px; padding: 25px 0 25px 35px; }
.layer_style h5 span{font-family:'Malgun Gothic', 맑은 고딕, tahoma, 'gulim', 굴림; }
.layer_style h6{color: #353b4c; font-family:inherit; font-size:32px; font-weight:bold; letter-spacing:-1px; padding: 35px 0 25px 35px; }
.layer_style h6 strong{color: #4170f2; font-family:inherit; }
.layer_style .ls_contents{font-family:'Malgun Gothic', 맑은 고딕, tahoma, 'gulim', 굴림;padding-left:35px; font-size:14px; line-height:22px; letter-spacing:-1px; }
.layer_style .ls_contents span{font-family:'Malgun Gothic', 맑은 고딕, tahoma, 'gulim', 굴림;}
.layer_style .ls_contents table td{font-family:'Malgun Gothic', 맑은 고딕, tahoma, 'gulim', 굴림; padding:2px; }
.layer_style .ls_contents table td.pl18{padding-left:18px;}
.layer_style .ls_contents2{ font-family:'Malgun Gothic', 맑은 고딕, tahoma, 굴림, gulim, sans-serif !important; padding-left:35px; padding-top:25px; font-size:22px; line-height:34px; letter-spacing:-2px; }
.layer_style .ls_contents2 a { font-family:'Malgun Gothic', 맑은 고딕, tahoma, 굴림, gulim, sans-serif !important; }
.layer_style .ls_contents2 a:hover span.point-txt {color:#269109;}
.layer_style .ls_comment{clear:both; font-family:inherit; padding:20px 0 0 35px; font-size:13px; letter-spacing:-1px; color:#8f8f8f; }
.layer_style .ls_comment a{font-family:inherit; color:#8f8f8f; text-decoration:underline; }
.layer_style .ls_button{padding-left:35px; margin-top:20px;}
.layer_style .ls_button input{margin-right:15px; vertical-align:middle; }
.layer_style .ls_button img{margin-right:15px; vertical-align:middle; }
.layer_style .ls_button span{display:block; padding-top:17px; vertical-align:middle; font-family:'Malgun Gothic', 맑은 고딕, tahoma, 굴림, gulim, sans-serif; font-size:13px; text-decoration:underline; color:#b0b0b0; }
.layer_style .ls_button span a{font-family:'Malgun Gothic', 맑은 고딕, tahoma, 굴림, gulim, sans-serif; color:#b0b0b0;}
.layer_style .ls_footer{height:35px; background: #eaeaea; font-family:inherit; font-size:14px; letter-spacing:-1px; text-align:left; padding-right:20px; line-height:32px; margin-top:30px; }
.layer_style .ls_footer a{font-family:inherit; color: #353b4c; padding-left:30px;}
.layer_style strong{font-weight:bold; color: #dc0000; font-family:inherit; }
.layer_style b{font-weight:bold; font-family:inherit; }
.layer_style em{font-weight:bold; color: #555; font-family:inherit; font-size:22px; font-style:normal; line-height:30px; letter-spacing:0; padding-left:10px; }
.layer_style u{text-decoration:underline; font-family:inherit; letter-spacing:0; }
.layer_style .star_banner {position:absolute; left:260px; bottom:55px;}
.sp0{letter-spacing:0;}
.btn_yellow {background: #fcd73b;
color: #111;
font-size: 14px;
line-height:30px;
padding: 0px 10px 2px 10px;
border: solid 1px #bc9501;
text-decoration: none;
font-weight:400;
font-family:'Notosans', 'Malgun Gothic', 맑은 고딕, tahoma, 'gulim', 굴림;
cursor:pointer;
vertical-align:middle;
}
/*신규 연장팝업 레이어*/
/*220808 레이어팝업 수정*/
.layer_style.new {box-shadow: 10px 10px 30px 5px rgb(0 0 0 / 50%);}
.layer_style.new em {color:#222;}
.layer_style.new .ls_button span {display: inline-block; padding-bottom: 35px; vertical-align: baseline;}
.layer_style.new .ev_star2 {margin:0 35px; padding:17px 20px; background:#219b69 url('https://domain.ajoa.co.kr/img/common/popup_img_star.png') no-repeat right; }
.layer_style.new .ev_star2 h2 {font-size:18px; color:#fff; letter-spacing:-1px;}
.layer_style.new .ev_star2 h2 strong {color:#ffd800;}
.layer_style.new .ev_star3 {margin:0 35px; padding:17px 20px; background:#219b69 url('https://domain.ajoa.co.kr/img/common/popup_img_star.png') no-repeat right; transition:0.3s;}
.layer_style.new .ev_star3:hover {background:#29b97e url('https://domain.ajoa.co.kr/img/common/popup_img_star.png') no-repeat 98%; transition:0.3s;}
.layer_style.new .ev_star3 h2 {font-size:18px; color:#fff; letter-spacing:-1px;}
.layer_style.new .ev_star3 h2 strong {color:#ffd800;}
.layer_style.new .ls_comment {padding:10px 0 0 35px; }
.layer_style.new .ls_contents {padding-right:35px;}
.layer_style.new .ls_contents .com_box {border:solid 1px #cfcfcf; padding: 13px 20px; margin-bottom: 20px;}
.layer_style.new .ls_contents .com_box span.tit {color:#888; font-size: 14px; line-height: 1.5;}
.layer_style.new .ls_contents .com_box span.star2 {display:none;}
/*220808 레이어팝업 수정*/
/* -------------------- 2019.12.24 후이즈 콘테스트 -------------------- */
.whois_contest {margin-top:50px;}
.whois_contest .con_visual {width:1080px; height:1624px; background: url('https://ajoa.co.kr/assets/images/contest/contest_visual.gif') no-repeat; font-size:0px; }
.con_text {padding-top:20px; padding-left:75px; box-sizing:border-box; }
.con_text h4 {font-size:32px; font-family:'BMDOHYEON'; color:#3055a4; margin-top:40px; margin-bottom:5px;}
.con_text p {font-size:26px; color:#333; line-height:37px; font-weight:600; letter-spacing:-1px;}
.con_text p strong {font-size:20px; font-weight: normal; font-style:normal;}
.con_text .reward {}
.con_text .reward li {display:inline-block; width:460px; text-align:center; padding-top:35px; background:#dee3f0; border-radius:20px; box-sizing:border-box; }
.con_text .reward li:first-child {margin-right:10px;}
.con_text .reward li h6 {font-size:40px; font-family:'BMDOHYEON'; color:#3055a4; margin-bottom:10px;}
.con_text .reward li p {font-size:24px; color:#333; font-weight:400; letter-spacing:-1px;}
.con_text .reward ul.video-reward li {display:inline-block; width:135px; padding:15px 0 0 0; box-sizing:border-box;}
.con_text .reward ul.video-reward li:first-child {margin-right:0px;}
.con_text .reward ul.video-reward li div {text-align:center; padding:20px 0; background:#3055a4; border-radius:10px; color:#fff; font-weight:500; font-size:22px; box-sizing:border-box;}
.con_text .reward ul.video-reward li p {color:#3055a4; font-size:24px; font-weight:700; padding-top:10px; margin-bottom:20px; box-sizing:border-box;}
.domain-btn {display:block; text-align:center; margin:100px 0; }
.domain-btn a {display:inline-block; width:420px; padding:20px 30px; background:#183793; border-radius:28px; color:#fff; font-size:26px; font-family:'BMDOHYEON'; box-sizing:border-box;}
.whois_contest .contest_img {width:1080px; height:1502px; background: url('https://ajoa.co.kr/assets/images/contest/contest_img.gif') no-repeat; font-size:0px; }
.whois_contest .whois_contest_01 {text-align:center; margin:100px 0;}
.whois_contest h2 {text-align:center; font-size:40px; color:#333; font-weight:700; letter-spacing:-3px;}
.whois_contest .whois_contest_02 {background:#dee3f0; padding:60px; }
.whois_contest .whois_contest_02 img {margin-top:20px;}
.whois_contest .whois_contest_02 p {text-align:center; margin-top:30px; font-size:20px; color:#0b1350; line-height:30px; letter-spacing:-0.5px;}
.whois_contest .whois_contest_02 p strong {font-size:22px; font-weight:700;}
.whois_contest .whois_contest_03 {text-align:center; padding:100px 0;}
.whois_contest .whois_contest_04 {text-align:center; margin-bottom:100px;}
.whois_contest .whois_contest_04 img {margin-top:60px;}
.whois_contest .whois_contest_05 {text-align:center; }
.whois_contest .whois_contest_05 img {margin-top:60px;}
/* -------------------- 2021.12.22 달력 수첩 이벤트 -------------------- */
.calendar {background:#0dbd96;}
.calendar .visual_area {width:1080px; height:907px; background: url('https://ajoa.co.kr/assets/images/main/calendar_top.jpg') no-repeat; }
.calendar .cont_area {margin:0 auto; padding:0 150px 70px; background:#fff; box-sizing:border-box;}
.calendar .cont_area dl { font-family: 'GmarketSansMedium'; margin-bottom:10px; }
.calendar .cont_area dl:nth-last-child(1) {margin-bottom:0; }
.calendar .cont_area dt {display:inline-block; background:#005048; border-radius:50px; padding:10px 45px; text-align:center; font-size:15px; color:#fff; margin-right:25px;}
.calendar .cont_area dd {display:inline-block; font-size:17px; color:#111; }
.calendar .cont_area dd span {color:#f67b13;}
.calendar .cont_area a.btn_yellow_con {width:250px; padding:16px 0; font-size:16px;}
/* tooltip */
.tool-tip{
color: #fff;
background-color: rgba( 0, 0, 0, .7);
text-shadow: none;
font-size: .8em;
visibility: hidden;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
text-align: center;
opacity: 0;
z-index: 999;
padding: 3px 8px;
position: absolute;
cursor: default;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
.tool-tip,
.tool-tip.top{
top: auto;
bottom: 114%;
left: 50%;
}
.tool-tip.top:after,
.tool-tip:after{
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
content: ' ';
height: 0px;
width: 0px;
border: 6px solid transparent;
border-top-color: rgba( 0, 0, 0, .7);
}
/* default heights, width and margin w/o Javscript */
.tool-tip,
.tool-tip.top{
width: 80px;
height: 22px;
margin-left: -43px;
}
/* on hover of element containing tooltip default*/
*:not(.on-focus):hover > .tool-tip,
.on-focus input:focus + .tool-tip{
visibility: visible;
opacity: 1;
-webkit-transition: all 240ms ease-in-out;
-moz-transition: all 240ms ease-in-out;
-ms-transition: all 240ms ease-in-out;
-o-transition: all 240ms ease-in-out;
transition: all 240ms ease-in-out;
}
/* tool tip slide out */
*:not(.on-focus) > .tool-tip.slideIn,
.on-focus > .tool-tip{
display: block;
}
.on-focus > .tool-tip.slideIn{
z-index: -1;
}
.on-focus > input:focus + .tool-tip.slideIn{
z-index: 1;
}
/* top slideIn */
*:not(.on-focus) > .tool-tip.slideIn,
*:not(.on-focus) > .tool-tip.slideIn.top,
.on-focus > .tool-tip.slideIn,
.on-focus > .tool-tip.slideIn.top{
bottom: 50%;
}
*:not(.on-focus):hover > .tool-tip.slideIn,
*:not(.on-focus):hover > .tool-tip.slideIn.top,
.on-focus > input:focus + .tool-tip.slideIn,
.on-focus > input:focus + .tool-tip.slideIn.top{
bottom: 110%;
}
.search_input{font-family:'NanumBarunGothic'; width:310; height:35px; padding:10 10 10 10;text-align:center; color:#000000; font-size:15px; padding:1; background-color:#ffffff; border: 0px solid #fe7e8a;}
.search_input::placeholder{
color: #ccc;
}
.shopInfo::placeholder{color: #ccc;}
.shopInfo::-webkit-input-placeholder {color:#ccc;}
.shopInfo:-ms-input-placeholder {color:#ccc;}
/*
.search_input{ font-family:'NanumBarunGothic'; width:350; height:40; padding:0 10 0 10;text-align:center; color:#000000; font-size:15px; padding:1; background-color:#ffffff; border-top: 5px solid #fe7e8a; border-bottom: 5px solid #fe7e8a; border-left: 5px solid #fe7e8a; border-right: 0px solid #ffffff;}
*/
#magnifying-glass {
font-size: 2em;
display: inline-block;
width: 0.4em;
box-sizing: content-box;
height: 0.4em;
border: 0.1em solid #fac8c9;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass:before {
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: #fac8c9;
width: 0.35em;
height: 0.08em;
transform: rotate(45deg);
}
/*
.tab{float:left; width:490px; height:290px;}
.tabnav{font-size:0; width:490px; border:1px solid #ddd; margin-top:-5px;}
.tabnav li{display: inline-block; height:35px; text-align:center; border-right:1px solid #ddd;}
.tabnav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.tabnav li a.active:before{background:#7ea21e;}
.tabnav li a.active{border-bottom:1px solid #fff;}
.tabnav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 30px; line-height:35px; text-decoration:none; font-size:16px;}
.tabnav li a:hover,
.tabnav li a.active{background:#fff; color:#7ea21e; }
.tabcontent{padding: 20px; height:244px; border:0px solid #ddd; border-top:none;}
*/
/*tab css*/
/*
.tab{float:left; width:501px; height:290px;}
.tabnav{font-size:0; width:501px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:-5px;}
.tabnav li{display: inline-block; height:35px; text-align:center; border-right:1px solid #ddd; border-top:1px solid #f4f4f4;}
.tabnav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.tabnav li a.active:before{background:#fa6298;}
.tabnav li a.active{border-bottom:1px solid #fff;}
.tabnav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 30px; line-height:35px; text-decoration:none; font-size:14px;}
.tabnav li a:hover,
.tabnav li a.active{background:#fff; color:#7ea21e; }
.tabcontent{padding-left: 40px; height:244px; border:0px solid #ddd; border-top:none;}
*/
.tab{float:left; width:351px; height:143px; border-right:1px solid #ddd;}
.tabnav{font-size:0; width:348px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; margin-top:-5px;}
.tabnav li{display: inline-block; height:35px; text-align:center; border-right:1px solid #ddd; border-top:1px solid #f4f4f4;}
.tabnav li a:before{content:""; position:absolute; left:0; top:0px; width:100%; height:3px; }
.tabnav li a.active:before{background:#fa6298;}
.tabnav li a.active{border-bottom:1px solid #fff;}
.tabnav li a{ position:relative; display:block; background: #f8f8f8; color: #000; padding:0 30px; line-height:35px; text-decoration:none; font-size:14px;}
.tabnav li a:hover,
.tabnav li a.active{background:#fff; color:#7ea21e; }
.tabcontent{padding-left: 10px; height:244px; border:0px solid #ddd; border-top:none;}
.dl_box {width:100%; font-size:15px; margin-top:1px; margin-left:1px; border:0px solid #000000;}
.dl_box dl {width:100%;clear:both;}
.dl_box dt {width:110px; font-size:15px; font-weight:600; float:left; padding:5px 0px; border:0px solid #000000;box-sizing:border-box;}
.dl_box dd {width:100%; padding:5px 0px;font-size:15px;display:block; border:0px solid #000000;box-sizing:border-box;}
/* 상품 */
.product-list{
width: 97%;
height: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding:10px;
border:1px solid #ddd;
border-radius: 15px 15px 15px 15px;
}
.products h3{
font-size: 24px;
color: #545454;
margin-top:60px;
margin-bottom: 60px;
text-align: center;
}
.product{
display: block;
width: 140px;
text-align: center;
text-decoration:none;
color: black;
float:left;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
}
.product-name{
margin-top: 10px;
margin-bottom: 4px;
font-size: 14px;
height:40px;
}
/*
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: flex-start;
}
*/
/* item에 hidden 처리하기. */
.item {
width: calc(25% - 7px);
aspect-ratio: 6/5;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.item:after {
/* block & content */
display: block;
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
}
.imgBox {
width: 100%;
height: 100%;
position: absolute;
}
.imgBox img {
width: 100%;
height: 100%;
/* 사진이나 비디오의 규격 맞출 때 object-fit 이용하기. */
object-fit: cover;
z-index: 1;
}
.textBox {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
z-index: 3;
}
.textBox p {
color: white;
margin: 5px 0 0;
}
.textBox__name {
font-size: 22px;
font-weight: 500;
opacity: 0;
transform: translateY(50px);
}
.textBox__price {
font-size: 16px;
font-weight: 400;
opacity: 0;
transform: translateY(50px);
}
/* 마우스 올렸을 때에 기능 추가하기. */
.item:hover:after {
opacity: 1;
}
/* 기능 1 : 화면 살짝 불투명 + 화면 커지기. */
.item:hover .imgBox img {
transform: scale(1.1);
/* 블러 처리하기. */
filter: blur(3px);
}
/* 기능 2 : 상품 정보 보이면서 위로 올라가기. */
.item:hover .textBox .textBox__name {
opacity: 1;
transform: translateY(0px);
}
/* 기능 2 : 상품 정보 보이면서 위로 올라가기. */
.item:hover .textBox .textBox__price {
opacity: 1;
transform: translateY(0px);
}
/* 자연스럽게 트랜지션 적용하기. */
.item:after,
.item .imgBox img,
.item .textBox__name,
.item .textBox__price {
transition: all 0.4s ease-in-out;
}
#step_title{width:97%; padding:15px; border-bottom:1px solid #dfdfdf;}
.input_box {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 5px 2px;
outline: none;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
padding: .5em 1.5em .55em;
border:solid 1px #e3e3e3;
}
.button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .3em;
/*
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
*/
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
/* gray */
.gray {
color: #e9e9e9;
border: solid 1px #555;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
background: -moz-linear-gradient(top, #757575, #4b4b4b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
.rosy {
color: #fae7e9;
border: solid 1px #b73948;
background: #da5867;
background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
background: -moz-linear-gradient(top, #f16c7c, #bf404f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
background: #ba4b58;
background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
background: -moz-linear-gradient(top, #cf5d6a, #a53845);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
color: #dca4ab;
background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
background: -moz-linear-gradient(top, #bf404f, #f16c7c);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}
/* gray */
.light {
color: #e9e9e9;
border: solid 1px #555;
background: #37475a;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.light:hover {
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
background: -moz-linear-gradient(top, #757575, #4b4b4b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.light:active {
color: #afafaf;
background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
background: -moz-linear-gradient(top, #575757, #888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
.btnBox {
border: 1px #C2C2C2 solid ; background:#ccc; font-family: 돋움; font-size: 13px; color:#ffffff; padding:5px 10px 5px 10px; border-radius: 10px 10px 10px 10px;
}
/* 텍스트 애니 */
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
@keyframes showTopText {
0% { transform: translate3d(0, 100%, 0); }
40%, 60% { transform: translate3d(0, 50%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes showBottomText {
0% { transform: translate3d(0, -100%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
.animated-title {
color: #222;
/* font-family: Roboto, Arial, sans-serif; */
height: 90px;
left: 290px;
position: absolute;
top: 99%;
transform: translate(-50%, -50%);
width: 290px;
margin-top:10px;
}
.animated-title > div {
height: 50%;
overflow: hidden;
position: absolute;
width: 50%;
}
.animated-title > div div {
font-size: 14px;
font-weight:400;
/* background: b#4ec7f3; g#42c58a r#dc143c */
padding: 2px 0;
position: absolute;
}
.animated-title > div div span {
display: block;
}
.animated-title > div.text-top {
border-bottom: 1px solid #ccc;
top: 0;
}
.animated-title > div.text-top div {
animation: showTopText 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
bottom: 0;
transform: translate(0, 100%);
}
.animated-title > div.text-top div span:first-child {
color: #fff;
background: #4ec7f3;
padding:2px;
font-weight:500;
}
.animated-title > div.text-bottom {
bottom: 0;
}
.animated-title > div.text-bottom div {
animation: showBottomText 0.5s;
animation-delay: 1.75s;
animation-fill-mode: forwards;
top: 0;
transform: translate(0, -100%);
}
/* 레이어팝업 */
.popup-container{
width:100%;
margin:0;
padding:0;
box-sizing: border-box;
}
.popup-wrap{
background-color:rgba(0,0,0,.3);
justify-content:center;
align-items:center;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display:none;
padding:15px;
z-index:9;
}
.popup{
width:100%;
max-width:400px;
background-color:#ffffff;
border-radius:10px;
overflow:hidden;
background-color:#d4d4d4;
box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);
}
.popup-head{
width:100%;
height:50px;
display:flex;
align-items:center;
justify-content:center;
}
.head-title {
font-size: 24px;
font-weight: 700;
letter-spacing: -1px;
text-align: center;
}
.popup-body{
width:100%;
background-color:#ffffff;
}
.body-content{
width:100%;
padding:30px;
}
.body-titlebox{
text-align:center;
width:100%;
height:40px;
margin-bottom:10px;
}
.body-contentbox{
word-break:break-word;
overflow-y:auto;
/*min-height:100px;
max-height:200px;*/
}
.popup-foot{
width:100%;
height:50px;
}
.pop-btn{
display:inline-flex;
width:50%;
height:100%;
float:left;
justify-content:center;
align-items:center;
color:#666;
cursor:pointer;
margin:0;
padding:0;
box-sizing: border-box;
}
.pop-btn.confirm{
border-right:1px solid #999999;
margin:0;
padding:0;
box-sizing: border-box;
}
/* 레이어팝업 */
/* 레이어팝업 */
.popup_container{
width:100%;
margin:0;
padding:0;
box-sizing: border-box;
}
.popup_wrap{
background-color:rgba(0,0,0,0);
justify-content:center;
align-items:center;
position:fixed;
/*
top:0;
left:0;
right:0;
bottom:0;
*/
/* 상하좌우 정중앙 정렬하기 */
width:400px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:none;
padding:15px;
z-index:9;
}
.popup1{
width:100%;
max-width:400px;
background-color:#ffffff;
border-radius:10px;
overflow:hidden;
box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);
}
.popup_head{
width:100%;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border-bottom: 1px solid #ccc;
}
.head_title {
font-size: 24px;
font-weight: 700;
letter-spacing: -1px;
text-align: center;
}
.popup_body{
width:100%;
height:300px;
background-color:#ffffff;
}
.body_content{
width:100%;
padding:30px;
}
.body_titlebox{
text-align:center;
width:100%;
height:40px;
margin-bottom:10px;
}
.body_contentbox{
word-break:break-word;
overflow-y:auto;
min-height:100px;
max-height:200px;
}
.popup_foot{
width:100%;
height:30px;
border-top: 1px solid #ccc;
padding-top:8px;
}
.pop_btn{
display:inline-flex;
width:50%;
height:100%;
float:left;
justify-content:center;
align-items:center;
color:#ffffff;
cursor:pointer;
margin:0;
padding:0;
box-sizing: border-box;
}
.pop_btn.confirm{
border-right:1px solid #999999;
margin:0;
padding:0;
box-sizing: border-box;
}
/* 레이어팝업 */
.read_btn {font-family:"Roboto","Noto Sans KR",나눔고딕,"Nanum Gothic","Malgun Gothic",맑은고딕,굴림,돋움,"Dotum","sans-serif";font-weight:400;font-size:12px; padding:5px;margin:0px; 15px; 0px; 15px;background:#516b82;color:#ffffff;border-radius:3px;}
span.icono-mail{
color:#ccc;
/*transform:scale(0.7);*/
zoom:0.8;
top:-3px;
right:5px;
}
span.icono-image{
color:#999;
zoom:0.4;
}
span.icono-cross{
color:#999;
zoom:1.5;
left:240px;
position: absolute;
}
.icono-camera{
zoom:0.9;
}
span.icono-market{
zoom:0.5;
color:#aaa;
}
span.icono-document{
zoom:0.5;
color:#aaa;
}
span.icono-heart{
zoom:0.6;
color:#aaa;
right:10px;
}
/*
icono-forbidden
icono-exclamationCircle
*/
span.icono-exclamationCircle{
zoom:1.9;
/*transform:scale(1.7);*/
color:#afe0f3;
}