@charset "utf-8"; /* ############################## # 온라인투어 리뉴얼 2019 # 공통 스타일 ############################## */ /*-------------------------------------------------------------------------------- # 기본태그정의 ---------------------------------------------------------------------------------*/ p {font-size:14px; line-height:1.64;} time + time:before {content:' ~ ';} time.txt_c2 {font-weight:700;} /*-------------------------------------------------------------------------------- # margin ---------------------------------------------------------------------------------*/ .mt10 {margin-top: 10px;} /*-------------------------------------------------------------------------------- # width :테이블 입력폼에 사용함 ---------------------------------------------------------------------------------*/ .w1 {width:calc(100% - 4px) !important;} .w2 {width:calc(50% - 4px) !important;} .w3 {width:calc(50% - 89px) !important;} .w4 {width:80px !important;} .w5 {width:316px !important;} .w6 {width:144px !important;} .w7 {width:90px !important;} .w8 {width:50px !important;} .w9 {width:382px !important;} /*-------------------------------------------------------------------------------- # 배경색 ---------------------------------------------------------------------------------*/ .bg1 {background-color:#fff !important;} /*-------------------------------------------------------------------------------- # 텍스트색상 ---------------------------------------------------------------------------------*/ /* 텍스트색상 :포인트색상 */ .txt_c {color:#2096ce !important;} .txt_c2 {color:#ff464d !important;} .txt_c3 {color:#5454c1 !important;} .txt_c4 {color:#8693a0 !important;} .txt_c5 {color:#5b646e !important;} /* 텍스트색상 :블릿색상 */ [class*="txt_b"]:before {content:''; display:inline-block; margin:-2px 3px 0; width:9px; height:9px; border-radius:50%; box-sizing:border-box; vertical-align:middle;} .txt_b1:before {background-color:#5e5ed7;} .txt_b2:before {background-color:#24aae1;} .txt_b3:before {border:2px solid #24aae1;} .txt_b4:before {background-color:#adb1b6;} /*-------------------------------------------------------------------------------- # 아이콘 :화살표 ---------------------------------------------------------------------------------*/ [class*="arr"]:after,.arr3:before,.arr4:before {content:''; display:inline-block; margin:-2px 0 0 5px; background:url("../img/common/icon_set2.png") no-repeat 0 0; vertical-align:middle;} .arr1:after, .arr3:before, .arr3:after {width:6px; height:10px; background-position:-80px 0;} .arr2:after, .arr4:before, .arr4:after {width:6px; height:10px; background-position:-80px -20px;} .arr1.txt_c2:after {background-position:-160px 0 !important;} .arr1.txt_c4:after {background-position:-60px 0 !important;} .arr5:after {width:10px; height:15px; background-position:-100px -120px;} .arr6:after {width:10px; height:15px; background-position:-100px -140px;} .arr7:after {width:9px; height:5px; background-position:-280px -140px;} .arr8:after {width:9px; height:5px; background-position:-280px -120px;} .arr9,.arr10 {display:inline-block; position:relative; overflow:hidden; margin:0 5px; width:0; padding-left:19px; height:5px; white-space:nowrap;} .arr9:after, .arr10:after {position:absolute; top:0; left:0; margin:0; width:19px; height:5px; background-position:-240px -240px;} .arr10 {padding-left:15px;} .arr10:after {width:15px; background-position:-244px -240px;} /*-------------------------------------------------------------------------------- # 아이콘 :은행 ---------------------------------------------------------------------------------*/ [class*="ibank"]:before {content:''; display:inline-block; margin:-2px 5px 0 0; width:28px; height:28px; background:url("../img/common/icon_set1.png") no-repeat 0 0; vertical-align:middle;} .ibank1:before {background-position:0 -440px;} /* 국민 */ .ibank2:before {background-position:-40px -440px;} /* 신한 */ .ibank3:before {background-position:-80px -440px;} /* 우리 */ .ibank4:before {background-position:-120px -440px;} /* 기업 */ .ibank5:before {content:'외환';background:none;/*background-position:-160px -440px;*/} /* 외환 */ .ibank6:before {background-position:-160px -440px;} /* 하나 */ .ibank7:before {background-position:-200px -440px;} /* 씨티 */ .ibank8:before {background-position:-240px -440px;} /* SC제일 */ .ibank9:before {background-position:-280px -440px;} /* HSBC */ .ibank10:before {background-position:-320px -440px;} /* 농협 */ .ibank11:before {background-position:-360px -440px;} /* 새마을 */ .ibank12:before {background-position:-400px -440px;} /* 수협 */ .ibank13:before {background-position:-440px -440px;} /* 신협 */ .ibank14:before {background-position:-480px -440px;} /* 우체국 */ .ibank15:before {background-position:-520px -440px;} /* 산업 */ .ibank16:before {background-position:-560px -440px;} /* 경남 */ .ibank17:before {background-position:-600px -440px;} /* 광주 */ .ibank18:before {background-position:-640px -440px;} /* 대구 */ .ibank19:before {background-position:-560px -440px;} /* 부산 */ .ibank20:before {background-position:-600px -440px;} /* 전북 */ .ibank21:before {background-position:-40px -440px;} /* 제주 */ /*-------------------------------------------------------------------------------- # 아이콘 :면세점 ---------------------------------------------------------------------------------*/ [class*="iduty"] {overflow:hidden; display:inline-block; position:relative; width:0; height:15px; background:url("../img/common/icon_set3.png") no-repeat 0 0; white-space:nowrap; vertical-align:middle;} .iduty1 {padding-left:94px; background-position:0 -80px;} .iduty2 {padding-left:94px; background-position:-160px -80px;} .iduty3 {padding-left:106px; background-position:-320px -80px;} /*-------------------------------------------------------------------------------- # 아이콘 :제휴사 ---------------------------------------------------------------------------------*/ [class*="ipartner"]:before{content:''; display:inline-block; width:130px; height:50px; background:url("../img/adver/partner_logo.png") no-repeat 0 0; vertical-align:middle;} .ipartner2:before{background-position:-130px 0;} .ipartner3:before{background-position:-260px 0;} .ipartner4:before{background-position:-390px 0;} .ipartner5:before{background-position:-520px 0;} .ipartner6:before{background-position:0 -50px;} .ipartner7:before{background-position:-130px -50px;} .ipartner8:before{background-position:-260px -50px;} .ipartner9:before{background-position:-390px -50px;} .ipartner10:before{background-position:-520px -50px;} .ipartner11:before{background-position:0 -100px;} .ipartner12:before{background-position:-130px -100px;} .ipartner13:before{background-position:-260px -100px;} .ipartner14:before{background-position:-390px -100px;} .ipartner15:before{background-position:-520px -100px;} .ipartner16:before{background-position:0 -150px;} .ipartner17:before{background-position:-130px -150px;} .ipartner18:before{background-position:-260px -150px;} .ipartner19:before{background-position:-390px -150px;} .ipartner20:before{background-position:-520px -150px;} .ipartner21:before{background-position:0 -200px;} .ipartner22:before{background-position:-130px -200px;} .ipartner23:before{background-position:0 -250px;} .ipartner24:before{background-position:-130px -250px;} .ipartner25:before{background-position:-260px -250px;} .ipartner26:before{background-position:-390px -250px;} .ipartner27:before{background-position:-520px -250px;} .ipartner28:before{background-position:0 -300px;} .ipartner29:before{background-position:-130px -300px;} .ipartner30:before{background-position:-260px -300px;} .ipartner31:before{background-position:-390px -300px;} .ipartner32:before{background-position:-520px -300px;} /*-------------------------------------------------------------------------------- # 아이콘 :공통 ---------------------------------------------------------------------------------*/ [class*="icm"]:before, [class*="ict"]:before {content:''; display:inline-block; margin:-2px 5px 0 0; width:16px; height:16px; background:url("../img/common/icon_set1.png") no-repeat 0 0; vertical-align:middle;} .icm1:before {width:20px; height:20px; background-position:-280px 0;} .icm2:before {background:url("../img/common/icon_set2.png") no-repeat -40px -340px;} .icm2.txt_c:before {background-position:-160px -340px;} .icm2.txt_c2:before {background-position:-200px -340px;} .icm2.txt_c3:before {background-position:-240px -340px;} .icm3:before {background:url("../img/common/icon_set2.png") no-repeat -240px -460px;} .icm4:before {width:10px; height:14px; background-position:-320px 0;} .icm5:before {background-position:-320px -40px;} .icm6,.icm7 {color:#adb1b6; font-size:14px;} .icm6:before {margin-top:-1px; height:12px; background-position:-40px -240px;} .icm6.txt_c:before {background-position:0 -240px;} .icm7:before {width:14px; height:14px; background-position:-240px -240px;} .icm8:before {width:20px; height:20px; background-position:-360px -240px;} .icm9:before {width:20px; height:20px; background-position:-280px -240px;} .icm10:before {width:20px; height:20px; background-position:-320px -240px;} /*-------------------------------------------------------------------------------- # 아이콘 :교통수단 ---------------------------------------------------------------------------------*/ [class*="ict"]:before {width:20px;height:21px;} .ict1:before {background-position:-400px -160px;} .ict2:before {background-position:-440px -160px;} .ict3:before {background-position:-480px -160px;} /*-------------------------------------------------------------------------------- # 아이콘 :유형1 ---------------------------------------------------------------------------------*/ /* 텍스트숨김 */ .icon_com1 {overflow:hidden; display:inline-block; position:relative; width:0; white-space:nowrap; vertical-align:middle;} .icon_com1:not([data-weather]):before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url("../img/common/icon_set1.png") no-repeat 0 -160px;} .icon_com1.ico1 {padding:3px 5px 2px; margin:-2px 4px 0; width:auto; background:#f64690; border-radius:2px; color:#fff; font-size:10px; font-weight:700; line-height:1;} .icon_com1.ico1:before {display:none;} .icon_com1.ico2 {padding-left:16px; height:16px;} .icon_com1.ico2:before {background-position:-880px -40px;} .icon_com1.ico3 {padding-left:30px; height:14px;} .icon_com1.ico3:before {background-position:-920px -40px;} .icon_com1.ico4 {padding-left:30px; height:14px;} .icon_com1.ico4:before {background-position:-960px -40px;} .icon_com1.ico5 {padding:2px 6px 3px; margin:-2px 4px 0; width:auto; background:#ff464d; font-weight:700; border-radius:3px; color:#fff; font-size:12px; line-height:1;} .icon_com1.ico5:before {display:none;} .icon_com1.ico6 {padding-left:14px; height:17px;} .icon_com1.ico6:before {background-position:0 -80px;} .icon_com1.ico7 {padding-left:20px; height:20px;} .icon_com1.ico7:before {background-position:-40px -80px;} .icon_com1.ico8 {padding-left:16px; height:12px;} .icon_com1.ico8:before {background-position:-640px -40px;} /* 아이콘 + 텍스트 */ .icon_com2 {display:inline-block; color:#adb1b6; font-size:14px; font-weight:700;} .icon_com2:not(.ico1):before{content:'';} .icon_com2:before {display:inline-block; margin-right:5px; width:20px; height:20px; vertical-align:middle; background:url("../img/common/icon_set1.png") no-repeat -160px -80px;} .icon_com2 i {overflow:hidden; display:inline-block; position:relative; margin-right:5px; padding-left:26px; width:0; height:26px; background:#fff; border:1px solid #dee0e2; border-radius:3px; vertical-align:middle; white-space:nowrap;} .icon_com2 i:after {content:""; display:block; position:absolute; top:50%; left:50%; margin:-9px -5px; width:10px; height:19px; background:url("../img/common/icon_set1.png") no-repeat -80px -80px;} .icon_com2.ico2 {color:#ff464d; font-size:inherit;} .icon_com2.ico2:before {margin:-2px 2px 0 0; width:16px; height:16px; background-position:-400px -80px;} .icon_com2.ico3 {font-size:12px; color:#5b646e;} .icon_com2.ico4 {font-size:13px; color:#ff464d; vertical-align:middle;} .icon_com2.ico4:before {margin:-6px 0 0; width:14px; height:15px; background-position:-240px -80px;} .icon_com2.ico5, .icon_com2.ico6 {font-size:13px; font-weight:700; vertical-align:middle; color:#020219;} .icon_com2.ico5:before {background-position:-280px -80px;} .icon_com2.ico6:before {background-position:-320px -80px;} .icon_com2.ico7 {font-size:13px; color:#fff; font-weight:400;} .icon_com2.ico7:before {width:14px; height:15px; background-position:-360px -80px;} [data-tooltip] > .icon_com2:not(.ico8) {color:#2096ce;} [data-tooltip] > .icon_com2 i {border-color:#91d4f0;} [data-tooltip] > .icon_com2 i:after {background-position:-120px -80px;} [data-tooltip] > .icon_com2.ico3 {padding-right:21px;} [data-tooltip] > .icon_com2.ico3:before {background-position:-200px -80px;} /* 평점/등급 */ .icon_com3 {display:inline-block; position:relative; z-index:2; padding-left:80px; min-height:18px; vertical-align:middle;} .icon_com3:before, .icon_com3:after {content:''; display:block; position:absolute; top:3px; left:0; width:75px; height:12px; background:url("../img/common/icon_set1.png") no-repeat 0 -280px;} .icon_com3:before {z-index:1;} .icon_com3:after {z-index:2; background-position:0 -320px;} .icon_com3 > em {white-space:nowrap; font-size:13px; color:#5b646e;} .icon_com3.n5:after {width:75px;} .icon_com3.n4:after {width:60px;} .icon_com3.n3:after {width:45px;} .icon_com3.n2:after {width:30px;} .icon_com3.n1:after {width:15px;} .icon_com3.t1:before {background-position:-160px -280px;} .icon_com3.t1:after {background-position:-160px -320px;} .icon_com3.t1 > em {display:inline-block; font-size:12px; font-weight:700; color:#393992;} /*-------------------------------------------------------------------------------- # 아이콘 :유형2 ---------------------------------------------------------------------------------*/ .icon_txt1, .icon_txt2 {display:inline-block; padding:3px 10px; font-weight:700; text-align:center; font-size:12px; line-height:1.2; vertical-align:middle; box-sizing:border-box; letter-spacing:-0.05em;} .icon_txt1 {min-width:46px; border-radius:30px;} strong.icon_txt1 {min-width:67px;} .icon_txt2 {margin-top:-1px; padding-left:6px; padding-right:6px; border-radius:3px;} .icon_txt2.t1 {position:relative; border-color:#5e5ed7; background:#5e5ed7; color:#fff;} .icon_txt2.t1:before, .icon_txt2.t1:after {content:''; display:block; position:absolute; top:50%; margin:-3px 0; width:3px; height:6px; background:#fff;} .icon_txt2.t1:before {left:-1px; border-radius:0 6px 6px 0;} .icon_txt2.t1:after {right:-1px; border-radius:6px 0 0 6px;} strong.icon_txt2 {min-width:61px; padding:2px 6px 3px; font-size:13px; text-align:center;} .icon_txt3 {display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; align-items:center; justify-content:center; padding:0 10px; width:58px; height:58px; border-radius:50%; font-size:13px; font-weight:700; line-height:1.2; vertical-align:middle; text-align:center; box-sizing:border-box;} .icon_txt3 > strong {text-align:right; font-size:21px; font-family:'Spoqa Han Sans';} .icon_txt3 > .ico1 {display:inline-block; position:relative; width:18px; font-size:10px; line-height:0.9; transform:scale(0.9); text-align:left; vertical-align:text-bottom;} .icon_txt3.t1 {padding:0; background-color:#ff464d; border-color:#ff464d; color:#fff; line-height:56px !important;} .icon_txt4 {display:inline-block; padding:3px 13px 4px; border-radius:0 30px 30px 0; font-size:14px; font-weight:700;} .icon_txt5 {display:inline-block; padding:3px 13px 4px; border-radius:30px 0 0 30px; font-size:14px; font-weight:700;} .icon_txt5.t1 {border-color:#ff464d; background:#ff464d; color:#fff;} /* ICONTXT :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .icon_txt3 {display:inline-block; padding:21px 10px;} } /*-------------------------------------------------------------------------------- # 아이콘 :유형3 ---------------------------------------------------------------------------------*/ /* BEST */ .icon_info1 {overflow:hidden; display:inline-block; position:relative; z-index:1; padding-top:6px; width:45px; height:64px; border-radius:0 0 3px 3px; box-sizing:border-box; text-align:center; color:#4b4bac; font-size:13px; font-weight:700; letter-spacing:-0.05em} .icon_info1:before, .icon_info1:after {content:""; display:block; position:absolute; bottom:6px; z-index:-2; width:30px; height:30px; border-radius:3px; background:#febd00; box-shadow:2px 0 4px 0 rgba(0,0,0,0.3);} .icon_info1:before {left:-5px; transform:rotate(162deg);} .icon_info1:after {right:-5px; transform:rotate(18deg);} .icon_info1 > strong {display:inline-block; margin-top:10px; margin-bottom:-1px; font-size:23px; font-family:'Spoqa Han Sans'; line-height:1; vertical-align:text-bottom;} .icon_info1 > strong:after {content:""; display:block; position:absolute; top:0; left:0; z-index:-1; width:100%; height:55px; background:#febd00;} /* 할인쿠폰 */ .icon_info2 {overflow:hidden; display:inline-block; position:relative; z-index:1; padding:9px 10px; width:90px; height:50px; color:#fff; border-radius:2px; font-size:10px; box-sizing:border-box; text-align:left;} .icon_info2:not(.t1):before, .icon_info2:not(.t1):after {content:""; display:block; position:absolute; top:50%; z-index:-1; margin-top:-6px; width:12px; height:12px; background:#fff; border-radius:50%;} .icon_info2:before {left:-8px;} .icon_info2:after {right:-8px;} .icon_info2 .txt_data {display:block; text-align:center;} .icon_info2:not(.t1) .txt_data {position:relative; margin-top:-1px; line-height:1; color:#fff; text-align:left;} .icon_info2 .txt_data > strong {margin-right:0; font-size:16px; color:#fff; vertical-align:text-bottom;} .icon_info2.c1:before, .icon_info2.c1:after {box-shadow:0 0 0 50px #ff464d;} .icon_info2.c2:before, .icon_info2.c2:after {box-shadow:0 0 0 50px #393992;} .icon_info2.t1 {overflow:visible; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; flex-direction:column; flex-wrap:wrap; justify-content:center; width:170px; height:100px; border:1px solid #ff464d; border-bottom-width:8px; border-radius:3px; color:#020219; font-size:13px; font-weight:700; text-align:center; vertical-align:middle;} .icon_info2.t1:before, .icon_info2.t1:after {content:''; display:block; position:absolute; top:50%; margin:-10px 0; width:9px; height:19px; background:#fff; border:1px solid #ff464d;} .icon_info2.t1:before {left:-1px; border-left:1px solid #fff; border-radius:0 10px 10px 0;} .icon_info2.t1:after {right:-1px; border-right:1px solid #fff; border-radius:10px 0 0 10px;} .icon_info2.t1 .txt_data {margin-top:6px; color:#ff464d; font-size:14px;} .icon_info2.t1 .txt_data > strong {margin-right:2px; font-size:25px; color:#ff464d;} .icon_info2.t1 > strong {display:block; font-size:17px; color:#ff464d; line-height:1.2; letter-spacing:-0.05em;} .icon_info2.t1 > strong + em {display:block; font-size:13px; color:#5b646e; font-weight:400;} /*-------------------------------------------------------------------------------- # 아이콘 :색상 ---------------------------------------------------------------------------------*/ [class*="icon_txt"] {background:#fff; border:1px solid #24aae1; color:#24aae1;} [class*="icon_txt"].c1 {border-color:#aeaeeb; color:#4b4bac;} [class*="icon_txt"].c2 {background-color:#5e5ed7; border-color:#5e5ed7; color:#fff;} [class*="icon_txt"].c3 {background-color:#24aae1; border-color:#24aae1; color:#fff;} [class*="icon_txt"].c4 {border-color:#adb1b6; color:#5b646e;} [class*="icon_txt"].c5 {background-color:#cdd0d3; border-color:#cdd0d3; color:#fff;} [class*="icon_txt"].c9 {background-color:#7c838b; border-color:#7c838b; color:#fff;} /* 마이페이지 예약상태 */ [class*="icon_txt"].c6 {background-color:#fff; border-color:#24aae1; color:#0092ce;} [class*="icon_txt"].c7 {background-color:#24aae1; border-color:#24aae1; color:#fff;} [class*="icon_txt"].c8 {background-color:#7c838b; border-color:#7c838b; color:#fff;} /* // */ /*-------------------------------------------------------------------------------- # 아이콘 :플래그 ---------------------------------------------------------------------------------*/ .icon_txt2[data-flag] {padding:2px 5px 1px; min-width:10px; font-size:11px;} [class*="icon_txt"][data-flag] {color:#676871; border-color:#676871;} [class*="icon_txt"][data-flag="1"] {color:#9260c6; border-color:#9260c6;} /* 고품격 */ [class*="icon_txt"][data-flag="2"] {color:#13aa84; border-color:#13aa84;} /* 품격 */ [class*="icon_txt"][data-flag="3"] {color:#4866d4; border-color:#4866d4;} /* 특가 */ [class*="icon_txt"][data-flag="4"] {color:#4e949b; border-color:#4e949b;} /* 실속 */ [class*="icon_txt"][data-flag="5"] {color:#f64690; border-color:#f64690;} /* 인기 */ [class*="icon_txt"][data-flag="6"] {color:#3c80e2; border-color:#3c80e2;} /* 즉시사용가능 */ [class*="icon_txt"][data-flag="7"] {color:#24aae1; border-color:#24aae1;} /* 추천 */ [class*="icon_txt"][data-flag="8"] {color:#6b60b6; border-color:#6b60b6;} /* 즉시확정 */ [class*="icon_txt"][data-flag="9"] {color:#00aea3; border-color:#00aea3;} /* 쿠폰할인 */ [class*="icon_txt"][data-flag="10"] {color:#f56234; border-color:#f56234;} /* SALE */ [class*="icon_txt"][data-flag="11"] {color:#313743; border-color:#313743;} /* 1+1 */ [class*="icon_txt"][data-flag="12"] {color:#5e5ed7; border-color:#5e5ed7;} /* 최저가보장 */ [class*="icon_txt"][data-flag="13"] {color:#cc383e; border-color:#cc383e;} /* 필수 */ [class*="icon_txt"][data-flag="14"] {color:#e52d50; border-color:#e52d50;} /* 즉시할인 */ [class*="icon_txt"][data-flag="15"] {} /* 항공할인 */ [class*="icon_txt"][data-flag="16"] {} /* 가성비 */ [class*="icon_txt"][data-flag="17"] {color:#f64690; border-color:#f64690;} /* SALE */ [class*="icon_txt"][data-flag="18"] {color:#ffb606; border-color:#ffb606;} /* NEW */ [class*="icon_txt"][data-flag="19"] {color:#FF00B8; border-color:#FF00B8;} /* 핫딜 */ [class*="icon_txt"][data-flag="20"] {} /* 고퀄 :디자인없음 */ [class*="icon_txt"][data-flag="21"] {} /* 일타쌍피 :디자인없음 */ [class*="icon_txt"][data-flag="22"] {color:#24aae1; border-color:#24aae1;} /* 이벤트 */ [class*="icon_txt"][data-flag="23"] {color:#54b044; border-color:#54b044;} /* 동반자할인 */ /*[class*="icon_txt"][data-flag="24"] {color:#9b7a66; border-color:#9b7a66;}*/ /* 황금연휴 */ [class*="icon_txt"][data-flag="24"] {color:#ff464d; border-color:#ff464d;} /* 황금연휴, HOT */ [class*="icon_txt"][data-flag="25"] {color:#598db3; border-color:#598db3;} /* 노옵션 */ [class*="icon_txt"][data-flag="26"] {color:#676871; border-color:#676871;} /* 노쇼핑 */ [class*="icon_txt"][data-flag="27"] {color:#ff7e00; border-color:#ff7e00;} /* BEST */ [class*="icon_txt"][data-flag="28"] {} /* HIT */ [class*="icon_txt"][data-flag="29"] {} /* 호텔 UPGRADE */ [class*="icon_txt"][data-flag="30"] {} /* 장기무이자 */ [class*="icon_txt"][data-flag="31"] {} /* 바로결제 */ [class*="icon_txt"][data-flag="32"] {color:#0d6ecf; border-color:#0d6ecf;} /* 프리미엄일반석 */ [class*="icon_txt"][data-flag="33"] {} /* 비즈니스석 */ [class*="icon_txt"][data-flag="34"] {} /* 일등석 */ [class*="icon_txt"][data-flag="35"] {} /* 빅재미 :디자인없음 */ [class*="icon_txt"][data-flag="36"] {} /* 키즈 :디자인없음 */ [class*="icon_txt"][data-flag="37"] {} /* 인생샷 :디자인없음 */ [class*="icon_txt"][data-flag="38"] {} /* 유유자적 :디자인없음 */ [class*="icon_txt"][data-flag="39"] {} /* 숨멎 :디자인없음 */ [class*="icon_txt"][data-flag="40"] {color:#29a2c0; border-color:#29a2c0;} /* 시그니처 */ [class*="icon_txt"][data-flag="41"] {color:#ff7e00; border-color:#ff7e00;} /* 노팁 */ [class*="icon_txt"][data-flag="42"] {color:#393992; border-color:#393992;} /* 노팁/노옵션 */ [class*="icon_txt"][data-flag="43"] {color:#6d47b2; border-color:#6d47b2;} /* 노팁/노쇼핑 */ [class*="icon_txt"][data-flag="44"] {color:#4866d4; border-color:#4866d4;} /* 노옵션/노쇼핑 */ [class*="icon_txt"][data-flag="45"] {color:#ff464d; border-color:#ff464d;} /* 노팁/노옵션/노쇼핑 */ [class*="icon_txt"][data-flag="46"] {} /* 슈퍼 */ [class*="icon_txt"][data-flag="47"] {} /* 999 */ [class*="icon_txt"][data-flag="48"] {} /* 쇼특가 */ [class*="icon_txt"][data-flag="49"] {} /* 땡처리 */ [class*="icon_txt"][data-flag="50"] {} /* 비즈니스 */ [class*="icon_txt"][data-flag="51"] {} /* 출발확정 */ [class*="icon_txt"][data-flag="52"] {color:#13aa84; border-color:#13aa84;} /* 가족인기 */ [class*="icon_txt"][data-flag="53"] {color:#6d47b2; border-color:#6d47b2;} /* 반짝할인 */ [class*="icon_txt"][data-flag="54"] {color:#ff7e00; border-color:#ff7e00;} /* HOT */ [class*="icon_txt"][data-flag="55"] {color:#4866d4; border-color:#4866d4;} /* Ticket */ [class*="icon_txt"][data-flag="56"] {color:#24aae1; border-color:#24aae1;} /* 2만원 즉시할인 */ [class*="icon_txt"][data-flag="57"] {color:#fc536d; border-color:#fc536d;} /* 3만원 즉시할인 */ [class*="icon_txt"][data-flag="58"] {color:#4e53a3; border-color:#4e53a3;} /* 4만원 즉시할인 */ [class*="icon_txt"][data-flag="59"] {color:#2f8957; border-color:#2f8957;} /* 5만원 즉시할인 */ [class*="icon_txt"][data-flag="60"] {color:#9d4983; border-color:#9d4983;} /* 10만원 즉시할인 */ [class*="icon_txt"][data-flag="61"] {color:#6d47b2; border-color:#6d47b2;} /* 20만원 즉시할인 */ [class*="icon_txt"][data-flag="62"] {color:#FE642E; border-color:#FE642E;} /* 1만원 즉시할인 */ [class*="icon_txt"][data-flag="63"] {} /* 마감임박 */ [class*="icon_txt"][data-flag="64"] {} /* 땡처리 */ [class*="icon_txt"][data-flag="65"] {} /* 출발확정 */ [class*="icon_txt"][data-flag="66"] {} /* 단1회 */ [class*="icon_txt"][data-flag="67"] {} /* KATA우수여행 */ [class*="icon_txt"][data-flag="68"] {color:#fff; background-color:#ff464d; border-color:#ff464d; letter-spacing: 0.5px;} /* 베스트 셀러 background / color 형태, 가이드 조정 필요 */ /* 24주년 기획전 기간 한정 */ [class*="icon_txt"][data-flag="00"]{background-color: #ff464d !important; color:#fff !important; border-color:#ff464d;} em.icon_txt2[data-flag] {min-width:45px; font-size:14px;} .icon_txt3[data-flag] {color:#fff;} .icon_txt3[data-flag="5"], .icon_txt3[data-flag="7"], .icon_txt3[data-flag="8"], .icon_txt3[data-flag="14"], .icon_txt3[data-flag="15"], .icon_txt3[data-flag="16"], .icon_txt3[data-flag="19"], .icon_txt3[data-flag="21"], .icon_txt3[data-flag="24"], .icon_txt3[data-flag="29"], .icon_txt3[data-flag="31"], .icon_txt3[data-flag="38"], .icon_txt3[data-flag="40"], .icon_txt3[data-flag="41"], .icon_txt3[data-flag="42"], .icon_txt3[data-flag="44"], .icon_txt3[data-flag="50"], .icon_txt3[data-flag="51"], .icon_txt3[data-flag="52"], .icon_txt3[data-flag="53"] {padding:13px 14px;} .icon_txt3[data-flag="43"], .icon_txt3[data-flag="56"], .icon_txt3[data-flag="57"], .icon_txt3[data-flag="58"], .icon_txt3[data-flag="59"], .icon_txt3[data-flag="60"], .icon_txt3[data-flag="61"]{padding:12px 0; letter-spacing:-0.08em; word-break:keep-all;} .icon_txt3[data-flag="5"] {background-color:#f64690;} .icon_txt3[data-flag="7"] {background-color:#24aae1;} .icon_txt3[data-flag="10"] {background-color:#f56234;} .icon_txt3[data-flag="24"] {background-color:#ff464d;} .icon_txt3[data-flag="27"] {background-color:#ff7e00;} .icon_txt3[data-flag="40"] {background-color:#29a2c0;} .icon_txt3[data-flag="41"] {background-color:#ff7e00;} .icon_txt3[data-flag="42"] {background-color:#393992;} .icon_txt3[data-flag="52"] {background-color:#13aa84;} .icon_txt3[data-flag="53"] {background-color:#6d47b2;} .icon_txt3[data-flag="54"] {background-color:#ff7e00;} .icon_txt3[data-flag="55"] {background-color:#4866d4;} .icon_txt3[data-flag="56"] {background-color:#24aae1;} .icon_txt3[data-flag="57"] {background-color:#fc536d;} .icon_txt3[data-flag="58"] {background-color:#4e53a3;} .icon_txt3[data-flag="59"] {background-color:#2f8957;} .icon_txt3[data-flag="60"] {background-color:#9d4983;} .icon_txt3[data-flag="61"] {background-color:#6d47b2;} .icon_txt3[data-flag="62"] {background-color:#FE642E;} /* 1만원 즉시할인 */ .product_type[data-product="rentalcar"] .icon_txt3[data-flag="7"] {color:#24aae1; border-color:#24aae1; background-color:#fff;} .product_type[data-product="rentalcar"] .icon_txt3[data-flag="52"] {color:#13aa84; border-color:#13aa84; background-color:#fff;} .product_type[data-product="rentalcar"] .icon_txt3[data-flag="53"] {color:#6d47b2; border-color:#6d47b2; background-color:#fff;} .icon_txt4[data-flag] {color:#fff;} .icon_txt4[data-flag="7"] {background-color:#24aae1;} .icon_txt4[data-flag="8"] {background-color:#6b60b6;} .icon_txt4[data-flag="9"] {background-color:#00aea3;} .icon_txt4[data-flag="14"] {background-color:#e52d50;} .icon_txt4[data-flag="18"] {background-color:#ffb606;} .icon_txt4[data-flag="19"] {background-color:#FF00B8;} /*-------------------------------------------------------------------------------- # 아이콘 :날씨 ---------------------------------------------------------------------------------*/ [data-weather]:before {content:''; display:inline-block; width:50px; height:50px; background-image:url("../img/common/weather_01.png"); background-position:0 0; background-size:contain; vertical-align:middle;} [data-weather="01"]:before {background-image:url("../img/weather/weather_01.png");} [data-weather="02"]:before {background-image:url("../img/weather/weather_02.png");} [data-weather="03"]:before {background-image:url("../img/weather/weather_03.png");} [data-weather="04"]:before {background-image:url("../img/weather/weather_04.png");} [data-weather="05"]:before {background-image:url("../img/weather/weather_05.png");} [data-weather="06"]:before {background-image:url("../img/weather/weather_06.png");} [data-weather="07"]:before {background-image:url("../img/weather/weather_07.png");} [data-weather="08"]:before {background-image:url("../img/weather/weather_08.png");} [data-weather="09"]:before {background-image:url("../img/weather/weather_09.png");} [data-weather="10"]:before {background-image:url("../img/weather/weather_10.png");} [data-weather="11"]:before {background-image:url("../img/weather/weather_11.png");} [data-weather="12"]:before {background-image:url("../img/weather/weather_12.png");} [data-weather="13"]:before {background-image:url("../img/weather/weather_13.png");} [data-weather="14"]:before {background-image:url("../img/weather/weather_14.png");} [data-weather="15"]:before {background-image:url("../img/weather/weather_15.png");} [data-weather="16"]:before {background-image:url("../img/weather/weather_16.png");} [data-weather="17"]:before {background-image:url("../img/weather/weather_17.png");} [data-weather="18"]:before {background-image:url("../img/weather/weather_18.png");} [data-weather="19"]:before {background-image:url("../img/weather/weather_19.png");} [data-weather="20"]:before {background-image:url("../img/weather/weather_20.png");} [data-weather="21"]:before {background-image:url("../img/weather/weather_21.png");} [data-weather="22"]:before {background-image:url("../img/weather/weather_22.png");} [data-weather="23"]:before {background-image:url("../img/weather/weather_23.png");} [data-weather="24"]:before {background-image:url("../img/weather/weather_24.png");} [data-weather="25"]:before {background-image:url("../img/weather/weather_25.png");} [data-weather="26"]:before {background-image:url("../img/weather/weather_26.png");} [data-weather="27"]:before {background-image:url("../img/weather/weather_27.png");} [data-weather="28"]:before {background-image:url("../img/weather/weather_28.png");} [data-weather="29"]:before {background-image:url("../img/weather/weather_29.png");} [data-weather="30"]:before {background-image:url("../img/weather/weather_30.png");} [data-weather="31"]:before {background-image:url("../img/weather/weather_31.png");} [data-weather="32"]:before {background-image:url("../img/weather/weather_32.png");} [data-weather="33"]:before {background-image:url("../img/weather/weather_33.png");} [data-weather="34"]:before {background-image:url("../img/weather/weather_34.png");} [data-weather="35"]:before {background-image:url("../img/weather/weather_35.png");} [data-weather="36"]:before {background-image:url("../img/weather/weather_36.png");} [data-weather="37"]:before {background-image:url("../img/weather/weather_37.png");} [data-weather="38"]:before {background-image:url("../img/weather/weather_38.png");} [data-weather="39"]:before {background-image:url("../img/weather/weather_39.png");} [data-weather="40"]:before {background-image:url("../img/weather/weather_40.png");} /*-------------------------------------------------------------------------------- # 아이콘 :항공사로고 ---------------------------------------------------------------------------------*/ [data-air-logo] {background:url("../img/logo/default_airline.png") no-repeat; background-size:contain; display:inline-block; overflow:hidden;} [class*="choice_type"] [data-air-logo] {padding:0;} /* 항공동맹체 */ [data-air-logo="01"] {background-image:url("../img/logo/01.png");} [data-air-logo="02"] {background-image:url("../img/logo/02.png");} [data-air-logo="03"] {background-image:url("../img/logo/03.png");} /* 항공사 */ [data-air-logo="5J"] {background-image:url("../img/logo/5J.png");} [data-air-logo="7C"] {background-image:url("../img/logo/7C.png");} [data-air-logo="7G"] {background-image:url("../img/logo/7G.png");} [data-air-logo="8B"] {background-image:url("../img/logo/8B.png");} [data-air-logo="8M"] {background-image:url("../img/logo/8M.png");} [data-air-logo="8Y"] {background-image:url("../img/logo/8Y.png");} [data-air-logo="9W"] {background-image:url("../img/logo/9W.png");} [data-air-logo="AA"] {background-image:url("../img/logo/AA.png");} [data-air-logo="AC"] {background-image:url("../img/logo/AC.png");} [data-air-logo="AE"] {background-image:url("../img/logo/AE.png");} [data-air-logo="AF"] {background-image:url("../img/logo/AF.png");} [data-air-logo="AI"] {background-image:url("../img/logo/AI.png");} [data-air-logo="AM"] {background-image:url("../img/logo/AM.png");} [data-air-logo="AY"] {background-image:url("../img/logo/AY.png");} [data-air-logo="AZ"] {background-image:url("../img/logo/AZ.png");} [data-air-logo="BA"] {background-image:url("../img/logo/BA.png");} [data-air-logo="BI"] {background-image:url("../img/logo/BI.png");} [data-air-logo="BR"] {background-image:url("../img/logo/BR.png");} [data-air-logo="BX"] {background-image:url("../img/logo/BX.png");} [data-air-logo="CA"] {background-image:url("../img/logo/CA.png");} [data-air-logo="CI"] {background-image:url("../img/logo/CI.png");} [data-air-logo="CO"] {background-image:url("../img/logo/CO.png");} [data-air-logo="CX"] {background-image:url("../img/logo/CX.png");} [data-air-logo="CZ"] {background-image:url("../img/logo/CZ.png");} [data-air-logo="DL"] {background-image:url("../img/logo/DL.png");} [data-air-logo="EK"] {background-image:url("../img/logo/EK.png");} [data-air-logo="ET"] {background-image:url("../img/logo/ET.png");} [data-air-logo="EY"] {background-image:url("../img/logo/EY.png");} [data-air-logo="FM"] {background-image:url("../img/logo/FM.png");} [data-air-logo="FV"] {background-image:url("../img/logo/FV.png");} [data-air-logo="G3"] {background-image:url("../img/logo/G3.png");} [data-air-logo="GA"] {background-image:url("../img/logo/GA.png");} [data-air-logo="GE"] {background-image:url("../img/logo/GE.png");} [data-air-logo="GS"] {background-image:url("../img/logo/GS.png");} [data-air-logo="HA"] {background-image:url("../img/logo/HA.png");} [data-air-logo="HB"] {background-image:url("../img/logo/HB.png");} [data-air-logo="HO"] {background-image:url("../img/logo/HO.png");} [data-air-logo="HU"] {background-image:url("../img/logo/HU.png");} [data-air-logo="HX"] {background-image:url("../img/logo/HX.png");} [data-air-logo="HY"] {background-image:url("../img/logo/HY.png");} [data-air-logo="HZ"] {background-image:url("../img/logo/HZ.png");} [data-air-logo="JJ"] {background-image:url("../img/logo/JJ.png");} [data-air-logo="JL"] {background-image:url("../img/logo/JL.png");} [data-air-logo="JQ"] {background-image:url("../img/logo/JQ.png");} [data-air-logo="K6"] {background-image:url("../img/logo/K6.png");} [data-air-logo="KA"] {background-image:url("../img/logo/KA.png");} [data-air-logo="KC"] {background-image:url("../img/logo/KC.png");} [data-air-logo="KE"] {background-image:url("../img/logo/KE.png");} [data-air-logo="KL"] {background-image:url("../img/logo/KL.png");} [data-air-logo="KQ"] {background-image:url("../img/logo/KQ.png");} [data-air-logo="LA"] {background-image:url("../img/logo/LA.png");} [data-air-logo="LH"] {background-image:url("../img/logo/LH.png");} [data-air-logo="LJ"] {background-image:url("../img/logo/LJ.png");} [data-air-logo="LO"] {background-image:url("../img/logo/LO.png");} [data-air-logo="LX"] {background-image:url("../img/logo/LX.png");} [data-air-logo="LY"] {background-image:url("../img/logo/LY.png");} [data-air-logo="MF"] {background-image:url("../img/logo/MF.png");} [data-air-logo="MH"] {background-image:url("../img/logo/MH.png");} [data-air-logo="MK"] {background-image:url("../img/logo/MK.png");} [data-air-logo="MM"] {background-image:url("../img/logo/MM.png");} [data-air-logo="MU"] {background-image:url("../img/logo/MU.png");} [data-air-logo="NH"] {background-image:url("../img/logo/NH.png");} [data-air-logo="NW"] {background-image:url("../img/logo/NW.png");} [data-air-logo="NX"] {background-image:url("../img/logo/NX.png");} [data-air-logo="NZ"] {background-image:url("../img/logo/NZ.png");} [data-air-logo="OD"] {background-image:url("../img/logo/OD.png");} [data-air-logo="OK"] {background-image:url("../img/logo/OK.png");} [data-air-logo="OM"] {background-image:url("../img/logo/OM.png");} [data-air-logo="OS"] {background-image:url("../img/logo/OS.png");} [data-air-logo="OX"] {background-image:url("../img/logo/OX.png");} [data-air-logo="OZ"] {background-image:url("../img/logo/OZ.png");} [data-air-logo="PR"] {background-image:url("../img/logo/PR.png");} [data-air-logo="PS"] {background-image:url("../img/logo/PS.png");} [data-air-logo="QF"] {background-image:url("../img/logo/QF.png");} [data-air-logo="QH"] {background-image:url("../img/logo/QH.png");} [data-air-logo="QR"] {background-image:url("../img/logo/QR.png");} [data-air-logo="R3"] {background-image:url("../img/logo/R3.png");} [data-air-logo="RS"] {background-image:url("../img/logo/RS.png");} [data-air-logo="RW"] {background-image:url("../img/logo/RW.png");} [data-air-logo="SA"] {background-image:url("../img/logo/SA.png");} [data-air-logo="SB"] {background-image:url("../img/logo/SB.png");} [data-air-logo="SC"] {background-image:url("../img/logo/SC.png");} [data-air-logo="SK"] {background-image:url("../img/logo/SK.png");} [data-air-logo="SQ"] {background-image:url("../img/logo/SQ.png");} [data-air-logo="SU"] {background-image:url("../img/logo/SU.png");} [data-air-logo="SV"] {background-image:url("../img/logo/SV.png");} [data-air-logo="SY"] {background-image:url("../img/logo/SY.png");} [data-air-logo="TG"] {background-image:url("../img/logo/TG.png");} [data-air-logo="TK"] {background-image:url("../img/logo/TK.png");} [data-air-logo="TR"] {background-image:url("../img/logo/TR.png");} [data-air-logo="TW"] {background-image:url("../img/logo/TW.png");} [data-air-logo="TZ"] {background-image:url("../img/logo/TZ.png");} [data-air-logo="UA"] {background-image:url("../img/logo/UA.png");} [data-air-logo="UL"] {background-image:url("../img/logo/UL.png");} [data-air-logo="UO"] {background-image:url("../img/logo/UO.png");} [data-air-logo="US"] {background-image:url("../img/logo/US.png");} [data-air-logo="VJ"] {background-image:url("../img/logo/VJ.png");} [data-air-logo="VN"] {background-image:url("../img/logo/VN.png");} [data-air-logo="VS"] {background-image:url("../img/logo/VS.png");} [data-air-logo="VX"] {background-image:url("../img/logo/VX.png");} [data-air-logo="WF"] {background-image:url("../img/logo/WF.png");} [data-air-logo="XF"] {background-image:url("../img/logo/XF.png");} [data-air-logo="XJ"] {background-image:url("../img/logo/XJ.png");} [data-air-logo="XO"] {background-image:url("../img/logo/XO.png");} [data-air-logo="XW"] {background-image:url("../img/logo/XW.png");} [data-air-logo="YP"] {background-image:url("../img/logo/YP.png");} [data-air-logo="Z2"] {background-image:url("../img/logo/Z2.png");} [data-air-logo="ZA"] {background-image:url("../img/logo/ZA.png");} [data-air-logo="ZE"] {background-image:url("../img/logo/ZE.png");} [data-air-logo="ZH"] {background-image:url("../img/logo/ZH.png");} /*-------------------------------------------------------------------------------- # CONTENT : 브레드크럼 ---------------------------------------------------------------------------------*/ .breadcrumb {position:relative; height:36px; border-bottom:1px solid #e5e5e8; background-color:#f7f8fa; z-index:50;} /*.sub_main .breadcrumb {border-bottom:0;}*/ .breadcrumb a {color:#5b646e; } .breadcrumb > ol {width:1100px; margin:0 auto;} .breadcrumb > ol:after {clear:both; content:""; display:block;} .breadcrumb > ol > li {position:relative; float:left; height:36px; padding:0 21px 0 20px;font-size:13px; line-height:36px; color:#5b646e;} .breadcrumb > ol > li + li {padding:0 21px 0 25px;} .breadcrumb > ol > li + li:before {content:""; position:absolute; left:0; top:14px; width:5px; height:9px; background:url("../img/common/icon_set2.png") no-repeat -40px -160px;} .breadcrumb > ol > li li.on a:after {content:""; width:9px; height:5px; margin-left:6px; background:url("../img/common/icon_set2.png") no-repeat -220px -100px; vertical-align:middle; display:inline-block;} .breadcrumb > ol > li:last-child, .breadcrumb > ol > li:last-child li.on a {font-weight:700; color:#020219;} .breadcrumb > ol > li:last-child li.on a:after {background-position:-280px -100px;} .breadcrumb > ol > li.on:last-child li.on a:after {background-position:-280px -80px;} .breadcrumb > ol ul li:not(.on) {display:none;} .breadcrumb > ol > li.on li.on {position:absolute; left:24px; top:-28px; min-width:60px;} .breadcrumb > ol > li.on li.on a:after {background-position:-220px -80px;} .breadcrumb > ol > li.on > ul {position:absolute; left:0; top:36px; width:100%; padding:5px 10px 10px 10px; line-height:18px; border:1px solid #ccc; background-color:#fff;} .breadcrumb > ol > li.on > ul li {margin-top:5px; display:block;} .breadcrumb > ol > li.on > ul li.on {margin-top:0;} .breadcrumb > ol ul li a {display:block;} .breadcrumb > ol ul li.on a {color:#5b646e;} .breadcrumb > .area {position:absolute;top:0;right:50%;margin-right:-550px;} .breadcrumb > .area > a {display:inline-block;font-size:13px; line-height:36px; color:#020219; font-weight:700;} .breadcrumb > .area > a + a:before {content:'';display:inline-block;margin:0 10px 0 4px;width:1px;height:12px;background:#ccc;vertical-align:middle;} .breadcrumb > .area > a > strong {color:#0092ce;} .breadcrumb > .area > a:hover {text-decoration:underline;} .breadcrumb ~ .mega_menu {top:218px;} /*-------------------------------------------------------------------------------- # 버튼 ---------------------------------------------------------------------------------*/ [class*="btn_type"], [class*="btn_small"], [class*="btn_txt"], [class*="btn_img"] {display:inline-block; border-radius:3px; box-sizing:border-box;} [class*="btn"]:disabled,.disabled {opacity:0.4; cursor:default; pointer-events:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} [class*="btn"]:disabled:hover,.disabled:hover {cursor:default;} [class*="btn_type"] {font-weight:700;} label[class*="btn_type"].choice_type2:not([class*="btn_white"]) {padding-left:0; padding-right:0;} label[class*="btn_type"].choice_type2 > em {position:relative; padding-left:24px;} label[class*="btn_type"].choice_type2:not([class*="btn_white"]) > em {color:#fff; font-size:inherit;} .disabled [disabled] {opacity:1;} /* 버튼DISABLED :IE10 */ @media screen and (min-width:0\0) { _:-ms-lang(x), .disabled{position:relative; z-index:-2\9} .disabled:not([class*="arr"]):after {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:10; background-color:rgba(255,255,255,0.3); background-image:none;} } /* 버튼DISABLED : IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .disabled{position:relative; z-index:-2} } /* 버튼 :사이즈 */ .btn_type {min-width:70px; padding:0 11px; font-size:13px; line-height:26px;} .btn_type2 {min-width:90px; padding:0 11px; font-size:14px; line-height:32px;} .btn_type3 {min-width:110px; padding:0 20px; font-size:15px; line-height:38px;} .btn_type4 {min-width:138px; padding:0 38px; font-size:17px; line-height:46px;} .btn_type5 {min-width:221px; padding:0 58px; font-size:18px; line-height:54px;} /* 버튼 :small */ .btn_small, .btn_small2 {padding:0 11px; min-width:54px; font-weight:700; font-size:12px; line-height:22px;} .btn_small2 {border-radius:22px !important;} /* 버튼 :텍스트 */ .btn_txt {font-size:inherit;} .btn_txt:not(.t1):not([class*="ic"]) {border-radius:0; text-decoration:underline; text-underline-position:under; color:#2096ce;} /*.btn_txt[class*="ico"]:before {content:''; display:inline-block; background:url("../img/common/icon_set1.png") no-repeat 0 0; vertical-align:middle;}*/ .btn_txt.t1 {font-size:14px; color:#5b646e;} .btn_txt.t1.on {color:#020219; font-weight:700;} .btn_txt + .btn_txt:before {content:""; display:inline-block; margin:-2px 7px 0 4px; width:1px; height:12px; background:#ccc; vertical-align:middle;} /*-------------------------------------------------------------------------------- # 버튼 :이미지 버튼 타입 ---------------------------------------------------------------------------------*/ [class*="btn_img"] {position:relative; overflow:hidden; width:0; white-space:nowrap;} [class*="btn_img"]:not(:disabled):not(.disabled):hover{border-color:#24aae1;} .btn_img1, .btn_img2 {padding-left:30px; height:32px; border:1px solid #dee0e2; border-radius:3px; background-color:#fff; vertical-align:middle; box-sizing:border-box;} .btn_img2 {border-radius:50% !important; border-color:#adb1b6;} /* 배경 + 텍스트 버튼 */ [class*="btn"][class*="ico"]:before, [class*="btn"][class*="ico"]:after {background-image:url("../img/common/icon_set1.png"); vertical-align:middle; display:inline-block;} [class*="btn_img"][class*="ico"]:before {position:absolute; top:50%; left:50%; margin:-9px;} [class*="btn_type"][class*="ico"]:before, [class*="btn_small"][class*="ico"]:before, .btn_txt[class*="ico"]:before {margin:-2px 5px 0 0;} [class*="btn_type"][class*="ico"]:after {margin:-2px 0 0 5px;} .btn_type2[class*="ico"] {padding:0 11px;} /* 아이콘 :화살표 */ .btn_img2[class*="arr"] {border-color:#adb1b6;} .btn_img2[class*="arr"]:not(:disabled):not(.disabled):hover {border-color:#24aae1;} .btn_img2[class*="arr"]:before, .btn_img2[class*="arr"]:after {position:absolute; top:50%; left:50%;} .btn_img2.arr1:after, .btn_img2.arr4:after {margin:-5px -2px;} .btn_img2.arr2:after, .btn_img2.arr3:after {margin:-5px -4px;} .btn_img2.arr3:before {margin:-5px 1px} .btn_img2.arr4:before {margin:-5px -7px} .btn_img2.arr5:after {margin:-7px -3px;} .btn_img2.arr6:after {margin:-7px -7px;} .btn_img2.arr1:not(:disabled):not(.disabled):hover:after,.btn_img2.arr3:not(:disabled):not(.disabled):hover:before, .btn_img2.arr3:not(:disabled):not(.disabled):hover:after {background-position:-120px 0;} .btn_img2.arr2:not(:disabled):not(.disabled):hover:after,.btn_img2.arr4:not(:disabled):not(.disabled):hover:before, .btn_img2.arr4:not(:disabled):not(.disabled):hover:after {background-position:-120px -20px;} .btn_img2.arr5:not(:disabled):not(.disabled):hover:after {background-position:-120px -120px;} .btn_img2.arr6:not(:disabled):not(.disabled):hover:after {background-position:-120px -140px;} .btn_blue.arr1:after, .btn_gray.arr1:after, .btn_purple.arr1:after {background-position:0 0;} .btn_txt.arr1:after, .btn_white3.arr1:after {background-position:-120px 0;} .btn_type3:not([class*="btn_white"]).arr1:after, .btn_type4:not([class*="btn_white"]).arr1:after, .btn_type5:not([class*="btn_white"]).arr1:after {width:7px; background-position:0 -40px;} .btn_type3[class*="btn_white"].arr1:after, .btn_type4[class*="btn_white"].arr1:after, .btn_type5[class*="btn_white"].arr1:after {width:7px; background-position:-80px -40px;} .btn_type3.btn_white3.arr1:after,.btn_type4.btn_white3.arr1:after,.btn_type5.btn_white3.arr1:after {width:7px; background-position:-120px -40px !important;} .btn_type5:not([class*="btn_white"]).arr1:after {width:7px; height:12px; background-position:0 -80px;} /* 아이콘 :좋아요 */ [class*="btn"].icm1.btn_white:not(:hover) {border-color:#dee0e2;} [class*="btn"].icm1:before {background-position:-240px 0;} [class*="btn"].icm1.on:before {background-position:-280px 0;} [class*="btn_img"].icm1 {padding:0 8px; width:auto; font-weight:800;} /* 아이콘 :느낌표&물음표 공통 */ [class*="btn_img"].icm2, [class*="btn_img"].icm3 {border:0; color:#8693a0; background:none;} [class*="btn_img"].icm2:before, [class*="btn_img"].icm3:before {position:absolute; top:50%; left:50%; margin:-10px; width:20px; height:20px;} [class*="btn_img"].icm2:before {background-position:-40px -400px} [class*="btn_img"].icm3:before {background-position:-240px -520px} [class*="btn_type"]:not([class*="btn_white"]).icm2:before {background-position:0 -340px;} .btn_small2:before {width:14px; height:14px;} .btn_small2.btn_white:before {background-position:-80px -320px;} .btn_small2.btn_white3:before {background-position:-160px -320px;} .btn_txt.icm2,.btn_txt.icm3 {font-size:13px; color:#5b646e;} .btn_txt.icm2:before {background-position:-80px -340px;} .btn_txt.icm3 {position:relative; padding-right:26px;} .btn_txt.icm3:before {position:absolute; top:4px; right:0;} /* 아이콘 :위치 */ .btn_txt.icm4:before {margin-top:-2px; width:12px; height:17px; background-position:-480px 0;} .btn_txt.icm4:hover {color:#2096ce;} .btn_txt.icm4:hover:before {background-position:-440px 0;} /* 아이콘 :체크 */ [class*="btn_img"].icm6:before {position:absolute; top:50%; left:50%; margin:-6px -8px; background-position:0 -240px;} [class*="btn_"].icm6:not([class*="btn_img"]):not([class*="btn_txt"]):not([class*="btn_white"]):before {width:18px; height:13px; background-position:-80px -240px;} /* 아이콘 :은행 */ [class*="btn_"][class*="ibank"] {padding-left:0; width:85px; font-size:12px; text-align:left; border-radius:0;} [class*="btn_"][class*="ibank"]:not(:hover) {border-color:#dee0e2 !important;} [class*="btn_"][class*="ibank"]:before{margin:-2px 0 -2px 1px;} /* 아이콘 :추가 삭제 */ [class*="btn_img"].ico1:before, [class*="btn_img"].ico2:before {content:""; position:absolute; left:8px; top:14px; margin:0; width:14px; height:2px; background-color:#5b646e; background-image:none;} [class*="btn_img"].ico1:after {content:""; position:absolute; left:14px; top:8px; width:2px; height:14px; background-color:#5b646e; background-image:none;} [class*="btn_img"].ico2:after {display:none !important;} [class*="btn_img"].ico1:not(:disabled):not(.disabled):hover:before, [class*="btn_img"].ico1:not(:disabled):not(.disabled):hover:after, [class*="btn_img"].ico2:not(:disabled):not(.disabled):hover:before {background-color:#24aae1;} [class*="btn_"]:not([class*="btn_img"]):not([class*="btn_sns"]).ico1, [class*="btn_"]:not([class*="btn_img"]):not([class*="btn_sns"]).ico2 {min-width:70px;} [class*="btn_"]:not([class*="btn_img"]):not([class*="btn_sns"]).ico1:before, [class*="btn_"]:not([class*="btn_img"]):not([class*="btn_sns"]).ico2:before {content:""; width:10px; height:10px; margin:-2px 4px 0 0 ; background-repeat:no-repeat;} [class*="btn_"]:not([class*="btn_img"]):not([class*="btn_sns"]).ico1:before {background-image:none, linear-gradient(#020219, #020219), linear-gradient(#020219, #020219); background-size:10px 2px, 2px 10px; background-position:0 4px, 4px 0;} [class*="btn_"]:not([class*="btn_img"]):not([class*="btn_sns"]).ico2:before {background-image:none, linear-gradient(#020219, #020219); background-size:10px 2px; background-position:0 4px;} .btn_type3:not([class*="btn_img"]).ico1:before, .btn_type4:not([class*="btn_img"]).ico1:before, .btn_type3:not([class*="btn_img"]).ico2:before,.btn_type4:not([class*="btn_img"]).ico2:before {width:12px; height:12px;} .btn_type3:not([class*="btn_img"]).ico1:before,.btn_type4:not([class*="btn_img"]).ico1:before {background-image:none, linear-gradient(#020219, #020219), linear-gradient(#020219, #020219); background-size:12px 2px, 2px 12px; background-position:0 5px, 5px 0;} .btn_type3:not([class*="btn_img"]).ico2:before, .btn_type4:not([class*="btn_img"]).ico2:before {background-image:none, linear-gradient(#020219, #020219); background-size:12px 2px; background-position:0 5px;} /* 아이콘 :추가 삭제 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { [class*="btn_"]:not([class*="btn_img"]).ico1:before,[class*="btn_"]:not([class*="btn_img"]).ico2:before {display:none !important;} } /* 아이콘 :찜 */ [class*="btn"].ico3 input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;} [class*="btn"].ico3 span {position:absolute; left:0; top:0; height:100%; padding-left:100%; overflow:hidden;} [class*="btn"].ico3 span:before {content:''; display:block; position:absolute; left:5px; top:50%; margin:-8px 0; width:20px; height:17px; background:url("../img/common/icon_set1.png") no-repeat 0 0;} [class*="btn"].ico3 input:checked + span:before {background-position:-40px 0;} [class*="btn_type"].ico3, [class*="btn_small"].ico3 {position:relative; width:auto; text-align:left;} [class*="btn_type"].ico3:before, [class*="btn_small"].ico3:before {display:none;} [class*="btn_type"].ico3 span, [class*="btn_small"].ico3 span {position:relative; left:0; padding-left:25px; height:auto;} [class*="btn_type"].ico3 span:before, [class*="btn_small"].ico3 span:before {left:0;} /* 아이콘 :공유하기 */ [class*="btn"]:not(.btn_sns).ico4:before {content:""; width:17px; height:17px; background-position:-80px 0;} [class*="btn_type"].ico4:before,[class*="btn_small"].ico4:before,.btn_txt.ico4:before {margin:-2px 6px 0 0;} /* 아이콘 :새로고침 */ [class*="btn"].ico5:before {content:""; width:15px; height:14px; background-position:-200px 0;} [class*="btn_img"].ico5:before {margin:-8px;width:16px; height:16px; background-position:-160px 0px;} .btn_txt.ico5 {position:relative; font-size:13px; text-decoration:underline; text-underline-position:under; color:#2096ce;} /* 아이콘 :인쇄하기 */ [class*="btn"].ico6:before {content:"";margin-top:-1px;width:19px;height:19px; background-position:-600px 0;} [class*="btn"].btn_blue.ico6:before, [class*="btn"].btn_purple.ico6:before {width:19px;height:19px;background-position:-680px 0;} [class*="btn_img"].ico6:before {margin-top:-9px;width:19px; height:19px; background-position:-640px 0;} /* 아이콘 :다운로드 */ [class*="btn_"]:not([class*="btn_white"]):not(.btn_txt).ico7 {color:#fff;} [class*="btn_"]:not([class*="btn_white"]):not(.btn_txt).ico7:after {content:""; margin-left:5px; width:18px; height:17px; background-position:-720px 0;} [class*="btn_img"].ico7:before, [class*="btn_white"].ico7:before, .btn_txt.ico7:before {content:''; width:18px; height:15px; background-position:-760px 0;} /* 아이콘 :문의 */ [class*="btn"].ico9:before {content:""; width:14px; height:14px; margin:-2px 7px 0 0; background-position:-880px 0;} .btn_white3.ico9:before {width:15px; height:15px; margin:-2px 7px 0 0; background-position:-840px 0;} .btn_type4.ico9 {min-width:200px; padding:0;} [class*="btn_blue"].ico9:before, [class*="btn_purple"].ico9:before, [class*="btn_gray"].ico9:before {width:19px; height:19px; margin:-2px 7px 0 0; background-position:-800px 0;} /* 아이콘 :새창 */ [class*="btn"].ico10:before {content:""; width:14px; height:14px; background-position:-960px 0;} [class*="btn_img"].ico10:before {margin:-7px;} /* 아이콘 :메일 */ [class*="btn"].ico11:before {content:""; width:16px; height:12px; background-position:0 -40px;} [class*="btn_img"].ico11:before {margin:-6px -8px;} [class*="btn_type"]:not(.btn_type).ico11:before {width:19px; height:16px; background-position:-40px -40px;} /* 아이콘 :음성듣기 */ [class*="btn"].ico12:before {content:""; width:16px; height:15px; background-position:-80px -40px;} [class*="btn_img"].ico12:before {margin:-8px -7px;} /* 아이콘 :회원특가 요금확인 */ [class*="btn"].ico13:before {content:""; margin:-2px 4px 0 0; width:18px; height:20px; background-position:-120px -40px;} [class*="btn_type"].ico13 {border:1px solid #ff464d; background:#ff464d; color:#fff;} /* 아이콘 :달력보기 */ [class*="btn"].ico14:before {content:""; width:18px; height:18px; background-position:-200px -40px;} [class*="btn_type"]:not([class*="btn_img"]).ico14:before {margin:-2px 4px 0 0;} /* 아이콘 :리스트보기 */ [class*="btn"].ico15:before {content:""; margin:0 4px 0 0; width:15px; height:12px; background-color:transparent; background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff) ; background-position:0 0, 0 4px, 0 8px; background-size:15px 2px; background-repeat:no-repeat;} [class*="btn_img"].ico15:before {margin:-5px -8px;} /* 아이콘 :상세검색 */ [class*="btn_type"].ico16:before {content:""; width:20px; height:18px; background-position:-360px -40px;} [class*="btn_type"].ico16.on:before {background-position:-480px -240px;} [class*="btn_type"].ico16.on {color:#fff; border-color:#24aae1; background-color:#24aae1;} [class*="btn_type"].ico16.on:hover {border-color:#0073a2 !important; background-color:#0073a2 !important;} /* 아이콘 :장바구니 */ [class*="btn"].ico17:before {content:""; width:24px; height:24px; background-position:-760px -160px;} [class*="btn_img"].ico17 {padding-left:48px; width:0; height:48px;} [class*="btn_img"].ico17:before {margin:-12px;} [class*="btn_type"].ico17:before {margin:-2px 4px 0 0;} /* 아이콘 :돌아가기 */ [class*="btn_type"].ico18:before {content:""; width:8px; height:14px; background:url("../img/common/icon_set2.png") no-repeat 0 0; background-position:-80px -180px;} [class*="btn_type"].ico18.on:before {background-position:-80px -180px;} [class*="btn_type"].ico18.on {color:#fff; border-color:#24aae1; background-color:#24aae1;} [class*="btn_type"].ico18.on:hover {border-color:#0073a2 !important; background-color:#0073a2 !important;} /*-------------------------------------------------------------------------------- # 버튼 :색상 ---------------------------------------------------------------------------------*/ [class*="btn_blue"], [class*="btn_gray"], [class*="btn_purple"], [class*="btn_white"], [class*="btn_red"] {color:#fff; text-align:center; letter-spacing:-0.04em; vertical-align:middle; box-sizing:border-box; transition:border-color 0.3s ease, background-color 0.3s ease; -webkit-transition:border-color 0.3s ease, background-color 0.3s ease;} [class*="btn_white"] {color:#020219; border:1px solid #24aae1; background-color:#fff;} [class*="btn_white"]:not(:disabled):not(.disabled):hover {border-color:#0073a2;} [class*="btn_white"]:disabled,[class*="btn_white"].disabled {border-color:#adb1b6; color:#020219;} .btn_blue { border:1px solid #24aae1; background-color:#24aae1;} .btn_blue:not(:disabled):not(.disabled):hover {border-color:#1a7fbb; background-color:#1a7fbb;} .btn_gray {border:1px solid #adb1b6; background-color:#adb1b6;} .btn_gray:not(:disabled):not(.disabled):hover {border-color:#5b646e; background-color:#5b646e;} .btn_gray2 {border:1px solid #5b646e; background-color:#5b646e;} .btn_purple {border:1px solid #5e5ed7; background-color:#5e5ed7;} .btn_purple:not(:disabled):not(.disabled):hover {border-color:#4b4bac; background-color:#4b4bac;} .btn_white {border:1px solid #adb1b6;} .btn_white:not(:disabled):not(.disabled):hover {border-color:#020219;} .btn_white3 {color:#2096ce;} .btn_red {border:1px solid #FF464D; background-color:#FF464D} /*-------------------------------------------------------------------------------- # 버튼 :SNS 버튼 ---------------------------------------------------------------------------------*/ .btn_sns {margin:0 4px; width:28px !important; height:28px !important; vertical-align:middle; display:inline-block !important; overflow:hidden;} [class*="btn_sns"]:before {content:""; height:100% !important; padding-left:100%; background-image:url("../img/common/icon_set1.png"); vertical-align:top !important; display:inline-block;} [class*="btn_sns"].sns1:before {background-position:0 -360px;} [class*="btn_sns"].sns2:before {background-position:-40px -360px;} [class*="btn_sns"].sns3:before {background-position:-80px -360px;} [class*="btn_sns"].sns4:before {background-position:-120px -360px;} [class*="btn_sns"].sns5:before {background-position:-160px -360px;} [class*="btn_sns"].sns6:before {background-position:-200px -360px;} [class*="btn_sns"].sns7:before {background-position:-240px -360px;} [class*="btn_sns"].sns8:before {background-position:-280px -360px;} [class*="btn_sns"].sns9:before {background-position:-320px -360px;} [class*="btn_sns"].sns10:before {background-position:-360px -360px;} /*-------------------------------------------------------------------------------- # 버튼 :삭제버튼 ---------------------------------------------------------------------------------*/ .btn_del {overflow:hidden; position:absolute; right:0; top:0; width:32px; height:31px;} .btn_del:before {content:''; display:block; width:12px; height:11px; margin:10px; background:url("../img/common/icon_set1.png") no-repeat -680px -240px;} .btn_del2 {overflow:hidden; position:absolute; display:inline-block; width:0; height:18px; margin-left:10px; padding-left:18px; background-color:#7c838b; border-radius:50%; background-image:url("../img/common/icon_set1.png"); background-position:-560px -240px;} /* 추후 개발 수정 완료 후 삭제 .btn_clear {overflow:hidden; position:absolute; display:inline-block; width:0; height:18px; margin-left:10px; padding-left:18px; background-color:#7c838b; border-radius:50%; background-image:url("../img/common/icon_set1.png"); background-position:-691px -61px;} /* // */ /*-------------------------------------------------------------------------------- # 버튼 :기타 ---------------------------------------------------------------------------------*/ /* 더보기 */ [class*="btn_more"] {display:block; width:100%; border:1px solid #adb1b6; background-color:#fff; border-radius:3px; color:#020219; font-weight:700; text-align:center; box-sizing:border-box;} .btn_more1 {margin-top:20px; font-size:14px; line-height:46px;} .btn_more2 {margin-top:30px; font-size:16px; line-height:54px;} [class*="tbl_type"] + [class*="btn_wrap"]:not(p) [class*="btn_more"] {margin-top:-20px; border:0;} /* 상단으로 */ .btn_top2 {overflow:hidden; display:block; position:absolute; bottom:76px; right:0; z-index:2; padding-left:40px; width:0; height:40px; background:#fff; border:1px solid #ccd1d8; border-radius:3px; white-space:nowrap;} .btn_top2:before, .btn_top2:after {content:''; display:block; position:absolute; left:50%;} .btn_top2:before {top:11px; margin:0 -7px; width:14px; height:14px; border-left:1px solid #393992; border-bottom:1px solid #393992; transform:rotate(135deg);} .btn_top2:after {top:8px; width:1px; height:24px; background:#393992;} /*-------------------------------------------------------------------------------- # 버튼 :버튼 그룹핑 ---------------------------------------------------------------------------------*/ [class*="btn_wrap"]:not(p) {font-size:0;} [class*="btn_wrap"] [class*="btn_"], [class*="btn_wrap"] [data-tooltip], [class*="btn_wrap"] [data-tooltip-title] {margin-left:4px; margin-right:4px;} [class*="btn_wrap"] [class*="btn_"]:first-child, [class*="btn_wrap"] [data-tooltip]:first-child, [class*="btn_wrap"] [data-tooltip-title]:first-child {margin-left:0;} [class*="btn_wrap"] [class*="btn_"]:last-child, [class*="btn_wrap"] [data-tooltip]:last-child, [class*="btn_wrap"] [data-tooltip-title]:last-child {margin-right:0;} p[class*="btn_wrap"] {font-size:13px; color:#5b646e; line-height:1.8;} p[class*="btn_wrap"] [class*="btn_"] {margin-top:-3px;} .btn_wrap1 {position:relative; margin:20px 0 0; text-align:center;} .btn_wrap1 .sub {position:absolute; right:0;} .btn_wrap1 > div + div {margin-top:10px;} .btn_wrap2 {margin:12px 0 25px; text-align:right;} .btn_wrap2:after {content:''; display:block; clear:both;} .btn_wrap2 .sub {float:left;} .btn_wrap2 .sub.txt_type3 {margin-top:7px;} .btn_wrap2 .sub:not(.txt_type3):after {content:''; display:inline-block; height:34px; vertical-align:bottom;} .btn_wrap2 [class*="btn_"], .btn_wrap2 [data-tooltip] {margin-left:8px; margin-right:0;} .btn_wrap2.t1, .btn_wrap2.t2 {position:absolute; right:0; bottom:100%; margin:0 0 10px;} .btn_wrap2.t1 > dt {position:absolute; overflow:hidden; padding-left:1px; width:0; height:10px; white-space:nowrap;} .btn_wrap2.t1 > dd ~ dd {margin-top:10px;} .btn_wrap2:not(.t1):last-child {margin-bottom:0;} .btn_wrap2.t2 {top:5px;bottom:auto;} .hide + .btn_wrap2 {margin:20px 0 30px;} .btn_wrap3 > .btn_img1 {margin:0; border-radius:0;} .btn_wrap3 > .btn_img1:first-child {border-top-left-radius:3px; border-bottom-left-radius:3px;} .btn_wrap3 > .btn_img1:last-child {border-top-right-radius:3px; border-bottom-right-radius:3px;} .btn_wrap3 > .btn_img1 + .btn_img1 {margin-left:-1px;} .btn_wrap3 > .btn_img1:hover {z-index:2;} ul.btn_wrap {margin:-4px;} ul.btn_wrap > li {display:inline-block; margin:4px;} .panel + .btn_wrap1 {margin-top:-15px;} /*-------------------------------------------------------------------------------- # 탭 :컨텐츠 ---------------------------------------------------------------------------------*/ [data-tab="utabinfo2"]:not(ul):not(ol) > .mes_data_none {border:0; border-radius:0;} [data-tab="utabinfo3"]:not(ul),[data-tab="utabinfo4"]:not(ul):not(ol) {margin-top:-1px; padding:30px; border:1px solid #5b646e;} [data-tab="utabinfo3"]:not(ul) .tit_type3:first-child, [data-tab="utabinfo3"]:not(ul) .hide + .tit_type3 {margin-top:-3px;} [data-tab="utabinfo3"]:not(ul) .tit_type3 {margin-bottom:17px;} [data-tab="utabinfo3"]:not(ul) .panel3 {width:100%;} [data-tab="utabinfo3"]:not(ul) .panel3:last-child {margin-bottom:0; border-bottom:0;} [data-tab="utabinfo4"]:not(ul):not(ol) {border-color:#24aae1;} [data-tab="utabinfo4"]:not(ul):not(ol) .tit_type {font-size:16px;} [data-tab="utabinfo4"]:not(ul):not(ol) .tit_type:first-child {margin-top:-3px;} [data-tab="utabinfo4"]:not(ul):not(ol) p.txt_info {margin-top:2px; margin-bottom:14px; color:#5b646e; font-size:13px;} [data-tab="utabinfo4"]:not(ul):not(ol) [class*="panel"]:first-child {margin-top:0;} [data-tab="utabinfo4"]:not(ul):not(ol) [class*="panel"]:last-child {margin-bottom:0;} [data-tab="utabinfo4"]:not(ul):not(ol) .mes_data_none2 {border:0;} [data-tab="utabinfo5"]:not(ul):not(ol) {margin-top:-1px; border-radius:0 0 6px 6px; border:1px solid #dee0e2;} [data-tab="utabinfo5"]:not(ul):not(ol) > .mes_data_none:not([class*="img"]) {padding:30px 0 0;} .tab_type[data-tabbtn="utabinfo4"], .tab_type[data-tabbtn="utabinfo5"] {margin-bottom:0 !important;} .home .sticky_wrap[data-sticky] {margin-top:0;} .home .sticky_wrap[data-sticky] .tab_type {width:1100px; margin:0 auto;} /*-------------------------------------------------------------------------------- # 탭상세내용 ---------------------------------------------------------------------------------*/ [data-tab="utabinfo"] {margin-top:30px;} [data-tab="utabinfo"]:not([class*="tab_type"]) > .product_type:first-child, [data-tab="utabinfo"]:not([class*="tab_type"]) > .mes_type2:first-child, [data-tab="utabinfo"]:not([class*="tab_type"]) > .hide + .product_type, [data-tab="utabinfo"]:not([class*="tab_type"]) > .hide + .mes_type2, [data-tab="utabinfo"]:not([class*="tab_type"]) > .hide + .box_area2 {border-top:0; margin-top:-30px;} [data-tab="utabinfo"]:not([class*="tab_type"]) > .product_type > li, [data-tab="utabinfo"]:not([class*="tab_type"]) > .product_type .list {padding-left:0;} /*.tab_type[data-tabbtn] + [data-tab^="utabinfo"] {margin-top:-21px;}*/ article[data-tab="utabinfo"] .tab_type3, article[data-tab="utabinfo"] .tab_type7 {margin-top:-31px;} article[data-tab="utabinfo"] > p + p {margin:12px 0; font-size:14px;} article[data-tab="utabinfo"] > h1 + p {font-size:15px;} article[data-tab="utabinfo"] > h1 + .panel, article[data-tab="utabinfo"] > header.tit_type + .panel {margin-top:0;} article[data-tab="utabinfo"] > h1 + .data_grade2 {margin-top:0;} fieldset[data-tab="utabinfo"] > legend + p {margin-top:-5px; margin-bottom:16px; font-size:13px;} section[data-tab="utabinfo2"] .panel {margin-top:20px; margin-bottom:20px;} section[data-tab="utabinfo2"] > h2 + .panel {margin-top:0;} div[data-tab="utabinfo8"] {position:relative; margin-top:10px;} /*-------------------------------------------------------------------------------- # 탭 :공통 1.전체, 2.해외항공_1, 3.호텔, 4.해외패키지, 5.해외자유여행, 6.국내항공/여행, 7.부산출발, 8.보험/비자, 9.티켓/현지투어/유레일, 10.기타, 11.해외여행, 12.철도/보험/비자/기타, 13.해외항공_2, 14.국내항공, 15.공동구매항공, 16.해외 테마여행, 17.제주렌터카 ---------------------------------------------------------------------------------*/ [class*="tab_type"] .ico1 a > span:before {background-position:0 -520px;} [class*="tab_type"] .ico2 a > span:before {background-position:-40px -520px;} [class*="tab_type"] .ico3 a > span:before {background-position:-80px -520px;} [class*="tab_type"] .ico4 a > span:before {background-position:-120px -520px;} [class*="tab_type"] .ico5 a > span:before {background-position:-160px -520px;} [class*="tab_type"] .ico6 a > span:before {background-position:-200px -520px;} [class*="tab_type"] .ico7 a > span:before {background-position:-240px -520px;} [class*="tab_type"] .ico8 a > span:before {background-position:-280px -520px;} [class*="tab_type"] .ico9 a > span:before {background-position:-320px -520px;} [class*="tab_type"] .ico10 a > span:before {background-position:-360px -520px;} [class*="tab_type"] .ico11 a > span:before {background-position:-400px -520px;} [class*="tab_type"] .ico12 a > span:before {background-position:-440px -520px;} [class*="tab_type"] .ico13 a > span:before {background-position:-480px -520px;} [class*="tab_type"] .ico14 a > span:before {background-position:-520px -520px;} [class*="tab_type"] .ico15 a > span:before {background-position:-560px -520px;} [class*="tab_type"] .ico16 a > span:before {background-position:-600px -520px;} [class*="tab_type"] .ico17 a > span:before {background-position:-640px -520px;} [class*="tab_type"] .ico18 a > span:before {background-position:-680px -520px} /* 크루즈 추가 */ /*-------------------------------------------------------------------------------- # 탭 :유형1 ---------------------------------------------------------------------------------*/ .tab_type {margin-bottom:20px; width:100%; border-radius:3px 3px 0 0; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; overflow:hidden;} .tab_type li {position:relative; z-index:1; text-align:center; border-top:1px solid #cdd0d3; border-bottom:1px solid #24aae1; background-color:#eff2f6; vertical-align:middle; transition:background-color 0.2s ease; -webkit-transition:background-color 0.2s ease; flex:1; justify-content:center;} .tab_type li:first-child {border-radius:3px 0 0 0; border-left:1px solid #cdd0d3;} .tab_type li:last-child {border-radius:0 3px 0 0; border-right:1px solid #cdd0d3;} .tab_type li:after {content:""; position:absolute; right:0; top:50%; width:1px; height:16px; margin-top:-8px; background-color:#cdd0d3;} .tab_type li:last-child:after {display:none;} .tab_type li a, .tab_type li button {width:100%; height:100%; font-weight:700; font-size:15px; color:#5b646e; display:block; box-sizing:border-box;} .tab_type li a:before, .tab_type li button:before {content:""; width:1px; height:100%; min-height:47px; margin-right:-1px; vertical-align:middle; display:inline-block;} .tab_type li a:after, .tab_type li button:after {content:""; position:absolute; left:-1px; right:0; top:-1px; bottom:0; border:0 solid #24aae1;} .tab_type li a span {margin:12px 0; vertical-align:middle; display:inline-block;} .tab_type li a i:not([class]) {display:block; font-size:13px; line-height:1.4;} .tab_type li.on {padding-bottom:1px; border-bottom:0; background-color:#fff; z-index:5;} .tab_type li.on:after {display:none;} .tab_type li.on a, .tab_type li.on button {color:#2096ce;} .tab_type li.on a:after, .tab_type li.on button:after {border-width:1px 1px 0 1px; background-color:#fff; z-index:-1;} .tab_type li.on:first-child a:after, .tab_type li.on:first-child button:after {border-radius:3px 0 0 0;} .tab_type li.on:last-child a:after, .tab_type li.on:last-child button:after {right:-1px; border-radius:0 3px 0 0;} .tab_type.ico {margin-bottom:20px;} .tab_type.ico li:after {height:56px; margin-top:-28px;} .tab_type.ico li a {padding-top:20px; font-size:13px; line-height:15px;} .tab_type.ico li a:before {min-height:76px; vertical-align:top;} .tab_type.ico li a > span {margin:0;} .tab_type.ico li a > span:before {content:""; width:38px; height:38px; margin:0 auto; background-image:url("../img/common/icon_set1.png"); display:block;} .tab_type.ico li.on a > span:before {background-position-y:-560px;} ol.tab_type {counter-reset:tab1;} ol.tab_type li a > span:before {content:'0' counter(tab1) '.'; counter-increment:tab1;} .form_search1.t1 + .tab_type {margin-top:30px;} .box_area2 + .tab_type, .txt_type1 + .tab_type {margin-top:25px;} /* TABTYPE :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .tab_type {display:table; table-layout:fixed;} .tab_type li {display:table-cell;} .tab_type li:after {position:static; margin:0 0 0 -1px; vertical-align:middle; display:inline-block;} .tab_type li a, .tab_type li button {vertical-align:middle; display:inline-block;} .tab_type li a:after {padding-top:200%;} .tab_type li a span {margin:12px;} .tab_type.ico li {vertical-align:top;} .tab_type.ico li:after {margin:0 0 0 -1px;} } /*-------------------------------------------------------------------------------- # 탭 :유형1_1 (회원가입) ---------------------------------------------------------------------------------*/ .tab_type.t1 {height:60px;} .tab_type.t1 li {border-bottom:1px solid #8693a0; border-top:1px solid #8693a0; background-color:#8693a0; transition-duration:0s; -webkit-transition-duration:0s;} .tab_type.t1 li:first-child {border-left:1px solid #8693a0;} .tab_type.t1 li:last-child {border-right:1px solid #8693a0;} .tab_type.t1 li a {font-size:18px; color:#fff; letter-spacing:-0.02em;} .tab_type.t1 li.on {border-bottom:0; background-color:#fff;} .tab_type.t1 li.on a {color:#020219;} .tab_type.t1 li.on a:before, .tab_type.t1 li.on a:after {border-color:#fff;} /*-------------------------------------------------------------------------------- # 탭 :유형1_2 (마이페이지) ---------------------------------------------------------------------------------*/ .tab_type.t2 li {background:#fff; border-color:#dee0e2; border-radius:6px 6px 0 0;} .tab_type.t2 li.on a, .tab_type.t2 li.on button {color:#fff;} .tab_type.t2 li.on a:after, .tab_type.t2 li.on button:after {background-color:#24aae1;} .tab_type.t2 li:first-child, .tab_type.t2 li:first-child.on a:after {border-radius:6px 0 0 0;} .tab_type.t2 li:last-child, .tab_type.t2 li:last-child.on a:after {border-radius:0 6px 0 0;} /*-------------------------------------------------------------------------------- # 탭 :유형1_3, 4 (항공 지역 선택) ---------------------------------------------------------------------------------*/ .tab_type.t3, .tab_type.t4 {border-radius:6px 6px 0 0;} .tab_type.t3 li {border:0; background-color:rgba(11,13,91, 0.6);} .tab_type.t3 li:after {height:24px; margin-top:-12px; background-color:rgba(134,147,160, 0.5);} .tab_type.t3 li:first-child, .tab_type.t4 li:first-child, .tab_type.t3 li:first-child.on a:after, .tab_type.t4 li:first-child.on a:after {border-radius:6px 0 0 0;} .tab_type.t3 li:last-child, .tab_type.t4 li:last-child, .tab_type.t3 li:last-child.on a:after, .tab_type.t4 li:last-child.on a:after {border-radius:0 6px 0 0;} .tab_type.t3 li a {color:#fff;} .tab_type.t3 li.on a, .tab_type.t4 li.on a {color:#08a7ee;} .tab_type.t3 li.on a:after {border:0;} .tab_type.t4 {margin-bottom:0;} .tab_type.t4 li {border-color:#7c838b; background-color:#7c838b;} .tab_type.t4 li:after {height:24px; margin-top:-12px; background-color:#ccc;} .tab_type.t4 li a {color:#eeeff0;} .tab_type.t4 li.on a:after {border-color:#fff;} /*-------------------------------------------------------------------------------- # 탭 :유형2 ---------------------------------------------------------------------------------*/ .tab_type2 {border-top:2px solid #24aae1; background-color:#24aae1;} .tab_type2 ul {width:1100px; margin:0 auto; table-layout:fixed; display:table;} .tab_type2 ul li {position:relative; text-align:center; border-radius:3px 3px 0 0; display:table-cell;} .tab_type2 ul li:before {content:""; width:1px; height:46px; margin-left:-1px; vertical-align:middle; display:inline-block;} .tab_type2 ul li:after {content:""; width:1px; height:18px; margin-left:-1px; opacity:0.15; background-color:#020219; vertical-align:middle; display:inline-block;} .tab_type2 ul li:last-child:after {display:none;} .tab_type2 ul li a {width:100%; font-weight:700; font-size:15px; color:#fff; vertical-align:middle; display:inline-block;} .tab_type2 ul li a:after {content:""; position:absolute; left:-1px; top:0; right:0; bottom:0; border:0 solid #fff; border-radius:3px 3px 0 0;} .tab_type2 ul li a span {position:relative; z-index:1;} .tab_type2 ul li.on {background-color:#fff;} .tab_type2 ul li.on a {color:#020219;} .tab_type2 ul li.on:after {display:none;} .tab_type2 ul li.on a:after {border-width:1px 1px 0 1px; background-color:#fff;} /*-------------------------------------------------------------------------------- # 탭 :유형3 ---------------------------------------------------------------------------------*/ .tab_type3 {position:relative; border-bottom:1px solid #dee0e2; background-color:#fff;} .tab_type3 .box {position:relative; width:708px; height:52px; margin:0 auto; padding:5px 0 4px 0; overflow:hidden;} .tab_type3 .btn_img2 {position:absolute; left:50%; top:50%; margin-top:-16px;} .tab_type3 .btn_img2.arr6 {margin-left:-411px;} .tab_type3 .btn_img2.arr5 {margin-left:378px;} .tab_type3 ol {/* width:862px; */ font-size:0; text-align:center;} .tab_type3 ol li {position:relative; margin-bottom:5px; vertical-align:middle; display:inline-block;} .tab_type3 ol li:before {content:""; position:absolute; left:-6px; top:50%; width:6px; height:6px; margin:-3px 0 0 0; border-radius:50%; background-color:#24aae1;} .tab_type3 ol li:after, .tab_type3 ol li:nth-child(8n + 1):before {display:none;} .tab_type3 ol li + li {margin-left:8px;} .tab_type3 ol li a {width:78px; font-weight:700; font-size:18px; line-height:52px; color:#020219; border-radius:4px; display:block;} .tab_type3 ol li.on {z-index:5;} .tab_type3 ol li.on a {color:#fff; background-color:#2f3344;} .tab_type3 ol li.on a:before {content:""; position:absolute; left:-6px; top:0; width:9px; height:52px; border:0; border-radius:3px 0 0 3px; background-color:#2f3344;} .tab_type3 ol li.on a:after {content:""; position:absolute; right:-10px; top:0; width:0; height:0; border-left:11px solid #2f3344; border-top:26px solid transparent; border-bottom:26px solid transparent; border-right:0; border-radius:3px 0 0 3px;} /*-------------------------------------------------------------------------------- # 탭 :유형4 ---------------------------------------------------------------------------------*/ .tab_type4 {display:flex; display:-webkit-flex; flex-wrap:wrap; flex-wrap:-webkit-wrap; overflow:hidden; position:relative; margin:0 0 35px; padding-bottom:1px; background-color:#fff; font-size:0; box-sizing:border-box;} .tab_type4:after {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #cdd0d3;} .tab_type4 li {flex:1; flex:-webkit-1; position:relative; z-index:1; border-top:1px solid transparent; text-align:center; vertical-align:top;} .tab_type4 li:before {content:""; width:1px; height:100%; margin-left:-1px; vertical-align:middle; display:inline-block;} .tab_type4 li:after {content:""; position:absolute; top:0; left:-1px; bottom:-101%; width:1px; background:#cdd0d3;} .tab_type4 li a {width:100%; padding:16px 3px; font-size:14px; line-height:18px; color:#020219; letter-spacing:-0.05rem; box-sizing:border-box; vertical-align:middle; display:inline-block;} .tab_type4 li a i {display:block;} .tab_type4 li a:before {content:""; position:absolute; left:-1px; top:-1px; right:0; bottom:-1px; height:auto; border:1px solid transparent; z-index:1;} .tab_type4 li a:after {content:""; height:1px; position:absolute; bottom:-1px; left:0; right:0; background-color:#cdd0d3;} .tab_type4 li.on {background-color:#24aae1; z-index:5;} .tab_type4 li.on a {color:#fff; font-weight:700;} .tab_type4 li.on a:before {border:1px solid #24aae1;} .tab_type4 li:nth-last-child(n+6):first-child, .tab_type4 li:nth-last-child(n+6):first-child ~ li {flex:none; -webkit-flex:none; width:calc(100%/6) !important;} .tab_type4 li:nth-last-child(n+13):first-child, .tab_type4 li:nth-last-child(n+13):first-child ~ li {width:calc(100%/7) !important;} /* TABTYPE4 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .tab_type4 {display:block;} .tab_type4 li {display:inline-block;} .tab_type4 li:nth-last-child(n):first-child, .tab_type4 li:nth-last-child(n):first-child ~ li {width:calc(100%/7) !important;} } /*-------------------------------------------------------------------------------- # 탭 :유형5 # .event .tab_type5 li a {padding:9px 42px;} //디자인확인해봐야함 ---------------------------------------------------------------------------------*/ .tab_type5 {font-size:0; border:1px solid #dee0e2; border-radius:3px; vertical-align:middle; display:inline-block;} .tab_type5 li {position:relative; vertical-align:middle; display:inline-block;} .tab_type5 li.on {z-index:5;} .tab_type5 li a {padding:12px 24px 11px 24px; font-weight:700; font-size:15px; color:#5b646e; display:block;} .tab_type5 li:first-child a, .tab_type5 li:first-child a:after {border-radius:3px 0 0 3px;} .tab_type5 li:last-child a, .tab_type5 li:last-child a:after {border-radius:0 3px 3px 0;} .tab_type5 li:not(:last-child) a:before {content:""; position:absolute; right:0; top:50%; width:1px; height:14px; margin:-7px 0 0 0; background-color:#dee0e2;} .tab_type5 li.on a {color:#fff; background-color:#5b646e;} .tab_type5 li.on a:before {display:none;} .tab_type5 li.on a:after {content:""; position:absolute; left:-1px; top:-1px; right:0; bottom:-1px; border:1px solid #5b646e; background-color:#5b646e; z-index:-1;} .tab_type5.t1 {border-color:#cdd0d3;} .tab_type5.t1 li a {padding:3px 9px; background-color:#eff2f6; font-size:14px;} .tab_type5.t1 li.on a {background:#fff; color:#393992;} .tab_type5.t1 li.on a:after {right:-1px; border-color:#393992;} /*-------------------------------------------------------------------------------- # 탭 :유형6 ---------------------------------------------------------------------------------*/ .tab_type6, .tab_type6 li {vertical-align:middle; display:inline-block;} .tab_type6 li + li {margin-left:26px;} .tab_type6 li a {position:relative; padding:0 1px 4px 2px; font-weight:400; font-size:16px; line-height:18px; color:#020219; letter-spacing:-0.01em; display:inline-block;} .tab_type6 li a:after {content:""; position:absolute; left:0; bottom:0; right:0; height:3px; border-radius:5px; background-color:#ffd800; opacity:0; transition:opacity 0.3s ease; -wenkit-transition:opacity 0.3s ease;} .tab_type6 li.on a {font-weight:700; color:#2096ce;} .tab_type6 li.on a:after {border:0; opacity:1;} /*-------------------------------------------------------------------------------- # 탭 :유형7 ---------------------------------------------------------------------------------*/ .tab_type7, .tab_type7 li {vertical-align:middle; display:inline-block;} .tab_type7 li a {padding:0 12px; font-size:14px; line-height:1.8; color:#020219; border-radius:30px; vertical-align:middle; display:inline-block; transition:all 0.2s ease; -webkit-transition:all 0.2s ease;} .tab_type7 li.on a {font-weight:700; color:#fff; background-color:#24aae1;} .tab_type7[data-tabbtn="utabview"] {display:block; border-bottom:1px solid #dee0e2; padding:17px 0; text-align:center; background-color:#fff;} /*-------------------------------------------------------------------------------- # 탭 :유형8 ---------------------------------------------------------------------------------*/ .tab_type8 {position:relative; top:0; height:353px; background:url("../img/tour/bg_cruise_1100x353.png") no-repeat 0 0px;} .tab_type8 > li {position:absolute; display:table; width:80px; height:80px; padding:6px; border-radius:80px 80px 1px 80px; background:#24aae1; font-size:14px; color:#1a7fbb; text-align:center; transform:rotate(45deg); box-sizing:border-box;} .tab_type8 > li.tab1 {left:156px; top:91px;} .tab_type8 > li.tab2 {left:216px; top:-5px;} .tab_type8 > li.tab3 {left:398px; top:126px;} .tab_type8 > li.tab4 {left:473px; top:50px;} .tab_type8 > li.tab5 {left:592px; top:205px;} .tab_type8 > li.tab6 {left:670px; top:44px;} .tab_type8 > li.tab7 {left:841px; top:170px;} .tab_type8 > li.tab8 {left:260px; top:140px;} .tab_type8 > li > a {display:table-cell; width:100%; height:100%; padding:5px; border-radius:100%; background:#fff; line-height:1.3; letter-spacing:-0.5px; vertical-align:middle; transform:rotate(-45deg); box-sizing:border-box;} .tab_type8 > li > a > span {display:block; font-weight:700;} .tab_type8 > li > a > i {display:none;} .tab_type8 > li.on {width:96px; height:96px; margin:-8px 0 0 -8px; border-radius:100%; background:#5e5ed7; color:#ffeb7f;} .tab_type8 > li.on > a {padding:5px 10px; background:#5e5ed7;} .tab_type8 > li.on > a > i {display:block; margin-top:4px; font-size:13px; color:#fff; letter-spacing:-0.5px;} .tab_type8 + .product_card3 {margin-top:-90px;} .tab_type8 ~ [data-tab="utabinfo"] {margin-top:-8px;} /*-------------------------------------------------------------------------------- # 탭 그룹 ---------------------------------------------------------------------------------*/ .tab_wrap {margin-top:35px; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; position:relative;} .tab_wrap .tab_type {flex:1; width:auto; margin-bottom:-1px;} .tab_wrap .tab_type:before {content:''; display:block; position:absolute; bottom:-1px; left:0; right:0; height:1px; background-color:#24aae1} .tab_wrap .txt {flex:1; padding:5px 0 0 10px; font-size:11px; line-height:1.55; color:#8693a0;} .tab_wrap .txt ~ .area {flex:none;} .tab_wrap .sub:last-child {width:728px; padding-top:12px; text-align:right;} .tab_wrap > [class*="area"] {flex:1; text-align:right; padding-top:3px;} .tab_wrap > .area .select_type1 {width:131px;} .tab_wrap > .area2:before {content:''; display:inline-block; height:100%; vertical-align:bottom;} .tab_wrap + [class*="list_type"] {margin-top:21px;} .hide + .tab_wrap:first-child, .tab_wrap:first-child {margin-top:0;} .choice_type9 + .tab_wrap {margin-top:30px;} /* TABWRAP :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .tab_wrap {display:block;} .tab_wrap:after {clear:both; content:""; display:block;} .tab_wrap .tab_type, .tab_wrap .txt {float:left;} .tab_wrap .area {float:right;} } /* 항공편 찜 */ .jjim_flight {min-width:200px; vertical-align:middle;} .jjim_flight[data-tooltip="info3"] strong {color:#5b646e;} .jjim_flight[data-tooltip="info3"] strong:after {background-position:-40px -460px;} .jjim_alert {position:relative; width:55px; height:13px; margin-left:8px; border-radius:50px; background-color:#dee0e2; display:inline-block;} .jjim_alert em {position:absolute; left:0; top:-11px; width:34px; height:34px; line-height:10; border-radius:50%; background-color:#7c838b; overflow:hidden; cursor:pointer; transition:all 0.3s ease; -webkit-transition:all 0.3s ease;} .jjim_alert em:before {content:""; position:absolute; left:50%; top:50%; width:15px; height:16px; margin:-8px 0 0 -7.5px; background:url("../img/common/icon_set1.png") no-repeat -840px -40px;} .jjim_alert input:checked + em {left:20px; background-color:#24aae1;} /*-------------------------------------------------------------------------------- # 페이징 ---------------------------------------------------------------------------------*/ /* 페이징 :기본 */ .paging {margin:16px 0; text-align:center; font-size:0;} .paging a:not(.btn_img2), .paging strong {display:inline-block; padding:6px 11px 5px; vertical-align:middle; font-size:14px;} .paging strong {color:#2096ce; text-decoration:underline; text-underline-position:under;} .paging .btn_img2.arr2 {margin-right:13px;} .paging .btn_img2.arr1 {margin-left:13px;} .paging .btn_img2 + .btn_img2 {margin-left:5px;} /* 페이징 :이전글|다음글 */ .paging2 {border-top:1px solid #adb1b6; border-bottom:1px solid #adb1b6;} .paging2 > dt, .paging2 > dd {position:relative; padding:13px 0 14px;} .paging2 > dt {float:left; clear:left; padding:14px 0 13px; width:89px; text-align:center; font-size:13px; color:#5b646e;} .paging2 > dt:before {content:""; display:inline-block; margin-top:-5px; margin-right:6px; width:0; height:0; border:5px solid transparent; border-bottom-color:#5b646e; vertical-align:middle;} .paging2 > dt:nth-child(3):before {margin-top:2px; border-bottom-color:transparent; border-top-color:#5b646e;} .paging2 > dd {font-size:14px;} .paging2 > dd:before {content:''; display:inline-block; margin:0 19px 0 0; width:1px; height:12px; background:#cdd0d3; vertical-align:middle;} .paging2 > dd:before, .paging2 > dd > a, .paging2 > dd > time, .paging2 > dd > span {display:inline-block; margin-top:-2px; vertical-align:middle;} .paging2 > dd > a {overflow:hidden; width:calc(100% - 232px); text-overflow:ellipsis; white-space:nowrap;} .paging2 > dd > a:only-child {width:calc(100% - 120px)} .paging2 > dd > time {width:100px; text-align:right; font-size:13px; color:#5b646e;} .paging2 > dd > span {margin-left:-19px; width:110px; text-align:center;} .paging2 > dd > span .icon_txt1 {vertical-align:top; margin-top:1px;} .paging2 > dd + dt, .paging2 > dd + dt + dd {border-top:1px solid #dee0e2;} /*-------------------------------------------------------------------------------- # 타이틀 ---------------------------------------------------------------------------------*/ /* 타이틀공통 */ [class*="tit_type"] {position:relative; line-height:1.33; letter-spacing:-0.05em; font-weight:700;} [class*="tit_type"] h1,[class*="tit_type"] h2,[class*="tit_type"] h3,[class*="tit_type"] h4,[class*="tit_type"] h5,[class*="tit_type"] h6 {display:inline-block;} [class*="tit_type"] b {color:#2096ce;} [class*="tit_type"] .sub {position:absolute; bottom:0; right:0; font-weight:400;} [class*="tit_type"] .sub:not(.btn_wrap2) {font-weight:400; font-size:13px; color:#5b646e} [class*="tit_type"] .sub > * {display:inline-block; vertical-align:middle;} [class*="tit_type"] .sub > *:only-child {vertical-align:unset;} [class*="tit_type"] .sub > dt {margin-left:15px;} [class*="tit_type"] .sub > dd {margin-left:5px;} [class*="tit_type"] .sub [data-tooltip] > .tooltip_type {right:0;} [class*="tit_type"] .sub [data-tooltip] > .tooltip_type dd {font-weight:400;} [class*="tit_type"] .btn_txt.t2 {margin-bottom:-3px; color:#5b646e;} [class*="tit_type"] .btn_txt.t2.on {color:#020219;} [class*="tit_type"] .txt_type1, [class*="tit_type"] .step_type {margin-bottom:0; font-weight:400;} [class*="tit_type"] .step_type {margin-bottom:35px;} [class*="tit_type"] + p:not([class]) {margin-bottom:10px;} [class*="tit_type"] ~ .sub {position:absolute; top:6px; right:0;} [class*="tit_type"]:after {content:''; display:block; clear:both;} .tit_type2 ~ .sub {top:-4px;} .tit_type3 ~ .sub {top:-6px;} legend[class*="tit_type"] {visibility:visible; overflow:visible; width:auto; height:auto;} /* 타이틀 :23px */ .tit_type {margin:30px 0 10px; min-height:20px; font-size:23px;} .tit_type > *:first-child {display:inline-block;} .tit_type > i, .tit_type > *:first-child:not(.sub) > i {display:inline-block; margin-top:-5px; font-size:15px; vertical-align:middle; color:#5b646e;} .tit_type > i:before, .tit_type > *:first-child:not(.sub) > i:before {content:''; display:inline-block; margin:-3px 11px 0 11px; width:1px; height:17px; background:#adb1b6; vertical-align:middle;} .tit_type > p:not([class]) {margin:5px 0 0; padding-bottom:1px; font-size:15px; font-weight:400;} .tit_type > p:not([class]) > u {font-weight:700; color:#2096ce;} .tit_type > span, .tit_type > *:first-child > span {font-size:16px; font-weight:400;} .tit_type > dl.sub {font-weight:700 !important; color:#020219;} .tit_type > dl.sub > dd ~ dd {margin-left:0;} .tit_type > dl.sub > dd ~ dd:before {content:'/'; margin:0 5px 0 2px;} .tit_type > dl.sub > .icon_txt1 ~ dd {color:#5b646e; font-weight:400;} .tit_type > dl.sub > .icon_txt1 ~ dd:before {content:'';} .tit_type > .sub:nth-child(2):not(:last-child) {bottom:auto; top:6px;} .tit_type > .sub2 {overflow:hidden; margin-top:10px !important; padding:20px 15px !important; background:#eef8fd; text-align:right;} .tit_type > .sub2 > strong {float:left;font-size:16px;} .tit_type + .tit_type2 {margin-top:22px;} .tit_type.t1 {text-align:center;} .tit_type[class*="ico"] {padding:14px 0 9px;} .tit_type[class*="ico"]:before {content:''; display:inline-block; margin:-3px 5px 0 0; width:34px; height:40px; background:url("../img/common/icon_set1.png") no-repeat 0 0; vertical-align:middle;} .tit_type.ico1:before {background-position:-880px -720px} /* 아이콘 :베스트상품평 */ .tit_type:first-child {margin-top:-5px;} /* 타이틀 :18px */ .tit_type2 {margin:26px 0 12px; font-size:18px;} .tit_type2 > p:not(.sub) {margin:5px 0 0; padding-bottom:1px; font-size:14px; font-weight:400;} .tit_type2 + p {margin-top:-5px;} .tit_type2 > span, .tit_type2 > *:first-child > span {font-size:16px; font-weight:400;} .tit_type2 > .select_type1 {margin-top:-10px; width:295px; font-weight:normal; float:right;} .tit_type2[data-air-logo] {padding-left:31px; background-size:auto 21px; background-position:0 50%;} .tit_type2:first-child {margin-top:-4px;} /* 타이틀 :16px */ .tit_type3 {margin:27px 0 11px; font-size:16px;} .tit_type3 > *:first-child {display:inline-block;} .tit_type3 > p:not(.sub) {display:inline-block; margin-left:5px; font-size:14px; font-weight:400; color:#5b646e;} .tit_type3 > .search_type1 {margin-top:-20px; width:295px; float:right;} .tit_type3 strong {font-weight:800;} .tit_type3:first-child {margin-top:-4px;} .form_search3 + .tit_type3 {margin-top:-3px;} .tit_type + .tit_type3 {margin-top:0; padding-top:20px; border-top:1px solid #5b646e;} /* 타이틀 :20px :예약하기 */ .tit_type4 {margin:0 0 11px; padding:0 20px; background:#24aae1; border-radius:3px; color:#fff; font-size:20px; line-height:50px;} .tit_type4:first-child {margin-top:0;} /* 타이틀 :20px :검색결과 */ .tit_type5 {margin:11px 0; min-height:26px; font-size:20px; /*z-index:20; */} .tit_type5:first-child, .hide:first-child + .tit_type5 {margin-top:-3px;} .tit_type5 > h1, .tit_type5 > h2, .tit_type5 > h3, .tit_type5 > h4, .tit_type5 > h5, .tit_type5 > h6 {display:inline-block;} .tit_type5 > p:not(.sub) {display:inline-block; margin-left:4px; font-weight:400; font-size:13px; color:#5b646e;} .tit_type5 [class*="select_type"] {margin-left:10px; width:140px;} /* 간격 */ .inner > .tit_type5:first-child {margin:30px 0 10px 0;} .calendar_type + .tit_type5 {margin-top:10px;} .tab_type + .tit_type5 {margin-top:15px;} .container > .hide:first-child + .tit_type5 {margin-top:32px;} /*-------------------------------------------------------------------------------- # 텍스트 :안내텍스트 ---------------------------------------------------------------------------------*/ .txt_guide {position:absolute; top:0; right:16px; z-index:2; margin-top:-6px; padding:0 8px; font-size:13px; line-height:26px; color:#4b4bac; text-align:center; border:1px solid #ffd800; border-radius:3px; background-color:#ffd800;} .txt_guide:before {content:""; position:absolute; right:0; bottom:-10px; width:0; height:0; border:0 solid transparent; border-top:10px solid #ffd800; border-right-width:10px;} /*-------------------------------------------------------------------------------- # 텍스트 :안내텍스트 ---------------------------------------------------------------------------------*/ /* 유형1 :inline-block */ .txt_info {display:inline-block; font-size:14px;} .txt_info:not(.t1):not(.t2) strong {margin:0 1px; color:#ff464d; font-weight:800;} .txt_info > li, .txt_info > dt, .txt_info > dd {display:inline-block; vertical-align:middle;} .txt_info > dd {margin-left:4px;} .txt_info > dt.hide + dd {margin-left:0;} .txt_info > li + li:before, .txt_info > dd + dt:before {content:""; display:inline-block; margin:-2px 10px 0 6px; width:1px; height:12px; background:#ccc; vertical-align:middle;} .txt_info.t1 {overflow:hidden; display:block; position:relative; font-size:13px;} .txt_info.t1 > dt {overflow:hidden; position:absolute; top:0; padding-left:17px; width:0; white-space:nowrap;} .txt_info.t1 > dd:not(.icon_txt1) {display:inline-block; position:relative; margin-left:-16px; margin-right:16px; padding-left:16px; font-size:13px; vertical-align:middle;} .txt_info.t1 > dd:not(.icon_txt1):not([data-air-logo]):after{content:""; display:block; position:absolute; top:5px; left:6px; width:1px; height:11px; background:#c2cbd2;} .txt_info.t1 > dd.icon_txt1.c4 {margin-left:0; padding-top:2px; color:#000; border-color:#cdd0d3;font-size:13px;} .txt_info.t1 > dd.icon_txt1 + dt + dd {margin-left:-10px;} .txt_info.t1 > dd.icon_txt1 + dt + dd:after {display:none !important;} .txt_info.t1 > dd[data-air-logo] {margin-left:0 !important;} .txt_info.t1 [data-air-logo] {margin-top:-2px; padding-left:25px !important; background-size:auto 16px; background-position:0 50%; font-weight:700; vertical-align:middle;} .txt_info.t1 .icm4:before {width:16px; height:16px; background-position:-360px 0;} .txt_info.t1 [class^="ict"] {font-weight:700;} .txt_info.t2 {font-weight:700;} .txt_info.t2 > dd {font-weight:400; color:#5b646e;} .txt_info.t2 > dd:before, .txt_info.t4 > dd:before {content:""; display:inline-block; margin:-2px 10px 0 6px; width:1px; height:12px; background:#ccc; vertical-align:middle;} .txt_info.t2 > strong ~ time {font-weight:400; color:#5b646e; font-size:0.9em;} .txt_info.t2 > strong + time:before {content:'('} .txt_info.t2 > strong + time + time:after {content:')'} .txt_info.t3 > dd + dt:before {content:'/'; display:inline; margin:0 6px 0 4px; /*width:auto; height:auto;*/ background:none;} .txt_info .txt_s1 {display:block !important;margin-top:5px;} .txt_type3 + .txt_info.t3 {margin-top:10px;} /* 통합검색 > 아이콘 */ .content.home .product_type .area2 .icon_txt2:not([data-flag]) {background-color:transparent; border-width:0; padding:0 6px 0 0; font-size:13px; color:#0092ce;} .content.home .product_type .area2 .icon_txt2 + [data-flag] {margin-left:0;} /* 기획전 > 투어티켓 */ .ticket_event .txt_info.t1 {color:#5b646e;} .ticket_event .txt_info.t1 > dd:not(.icon_txt1):first-of-type {font-weight:700;} .ticket_event.product_type .area2 {vertical-align:top;} .ticket_event.product_type .area2 .txt_type1 > li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* 유형2 :float */ .txt_info2 {overflow:hidden; line-height:1.45; font-size:inherit;} .txt_info2 > dt {float:left; clear:left;} .txt_info2 > dt:after {content:' :'; margin-right:4px;} .txt_info2.t1 {font-size:0;} .txt_info2.t1 > dt, .txt_info2.t1 > dd {font-size:13px;} .txt_info2.t1 > dt:after {content:''; display:inline-block; margin:0 10px; width:1px; height:12px; background:#ccc; vertical-align:middle;} .txt_info2.t2 > dt, .txt_info2.t2 > dd {padding-top:2px; padding-bottom:1px;} .txt_info2.t2 > dt {padding-right:10px; min-width:50px; color:#5b646e;} .txt_info2.t2 > dt:after {display:none;} /*-------------------------------------------------------------------------------- # 텍스트 :금액 ---------------------------------------------------------------------------------*/ .txt_data {position:relative; text-align:right; font-size:12px;} .txt_data:not(tfoot) {display:inline-block; vertical-align:middle;} .txt_data em, .txt_data s {display:inline-block; font-size:1.083em; color:#8693a0; vertical-align:bottom;} .txt_data em:not(:only-child), .txt_data s:not(:only-child) {margin-right:5px;} .txt_data s + strong {margin-left:5px;} .txt_data strong, strong.txt_data {display:inline-block; font-size:1.5em; font-family:'Spoqa Han Sans'; letter-spacing:-0.05em; font-weight:700; line-height:1; color:#ff464d; vertical-align:text-bottom;} .txt_data span {display:inline-block; font-size:1.333em; font-weight:400; vertical-align:bottom; color:#ff464d;} .txt_data span + span {display:block; font-size:1em; color:#5b646e;} .txt_data span + s {margin-left:5px;} .txt_data .sub {position:absolute; top:50%; left:12px; margin-top:-8px;} .txt_data:not(dl):not(span):not(strong):not(tfoot) [class*="btn_type"]:not(.btn_type) {width:100%;} em.txt_data {font-weight:700; font-size:16px; text-align:left;} /* 상승/하락 */ .txt_data em.charge {margin-left:4px; vertical-align:text-bottom;} .txt_data em.charge[class*="txt"]:before {content:''; display:inline-block; width:0; height:0; margin-right:4px; border:solid transparent; border-width:4px 3px; vertical-align:middle;} .txt_data em.charge.txt_c2:before {margin-top:-5px; border-bottom-color:#ff464d;} .txt_data em.charge.txt_c:before {margin-top:5px; border-top-color:#2096ce;} /* dl :기본 */ dl.txt_data {display:block; position:relative; padding:0 12px 0 0; text-align:right; font-size:0;} .txt_data dt, .txt_data dd {display:inline-block; margin-left:4px; font-weight:700; font-size:14px; vertical-align:bottom;} .txt_data dt > i, .txt_data dd > em {font-weight:400; font-size:inherit; color:inherit;} .txt_data dt > span {display:block; color:#5b646e; font-size:13px; font-weight:400;} .txt_data:not(.t2):not(.t3):not(.t4) dd + dt:before {content:''; display:inline-block; margin:-2px 10px 0 6px; width:1px; height:13px; background:#dee0e2; vertical-align:middle;} .txt_data dd > strong {margin-left:3px; margin-bottom:-2px; font-size:28px} .txt_data dd > strong + span {font-size:16px} .txt_data dd > b {color:#2096ce;} /* dl :국내항공 :총 요금 */ .txt_data.t1 {clear:both; padding:11px 164px 0;} .txt_data.t1 dt {font-size:16px; margin-bottom:1px; margin-right:5px;} .txt_data.t1 dd {display:inline;} .txt_data.t1 dd > strong {margin-bottom:0; font-size:32px;} .txt_data.t1 dd > strong + span {font-size:19px;} .txt_data.t1 dd > strong + span ~ span {margin-top:10px; font-size:12px;} .txt_data.t1 .btn_type4 {position:absolute; top:14px; right:0; width:154px;} /* dl :좌우배치 :BG있음 */ .txt_data.t2 {background:#f4fbfd; padding:16px 30px 17px;} .txt_data.t2:before {content:''; display:inline-block; height:30px; vertical-align:middle;} .txt_data.t2 dt, .txt_data.t2 dd {width:50%; margin:0; vertical-align:middle;} .txt_data.t2 dt {text-align:left; font-size:16px;} .txt_data.t2 dd > strong {margin-bottom:0; font-size:23px;} /* dl :좌우배치 :라인있음 */ .txt_data.t3 {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; padding:0; border-top:1px solid #40464d; border-bottom:1px solid #adb1b6;} .txt_data.t3 dt, .txt_data.t3 dd {margin:0; padding:12px 20px; box-sizing:border-box;} .txt_data.t3 dt {text-align:left; font-size:16px;} .txt_data.t3 dd {flex:1; padding-right:18px;} .txt_data.t3 dd > strong {margin-bottom:3px; font-size:21px;} .txt_data.t3 dd > strong + span {margin-bottom:3px; font-size:15px} .txt_data.t3 dd > strong + span ~ span {font-size:12px; color:#8693a0;} .txt_data.t3 dd + dt {border-left:1px solid #dee0e2;} .txt_data.t3 .data1 {padding:9px 10px 10px; align-self:center; text-align:left;} .txt_data.t3 dt.data1 > span {margin-top:-2px;} /* dl :총금액 */ .txt_data.t4:after {content:''; display:block; clear:both;} .txt_data.t4 span ~ span {display:block; margin-bottom:0; font-size:13px; line-height:1.2; color:#5b646e;} .txt_data.t4 span + * {margin-top:12px;} .txt_data.t4 span + em {display:block; margin-top:10px; font-size:14px; color:#ff464d;} .txt_data.t4 span ~ em:last-child {font-size:12px; line-height:1.2; color:#8693a0;} .txt_data.t4 em + em {margin-top:9px;} .txt_data.t4 strong {margin-bottom:0;} .txt_data.t4 > dt {float:left; clear:left; margin-top:1px; width:40%; text-align:left; font-size:17px;} .txt_data.t4 > dd {display:block;} .txt_data.t4 > dt:nth-last-child(2) {margin-top:4px;} .txt_data.t4 > dd:not(:last-child) > strong, .txt_data.t4 > dd:not(:last-child) li > strong {font-size:23px; color:#166aa5;} .txt_data.t4 > dd:not(:last-child) > strong + span, .txt_data.t4 > dd:not(:last-child) li > strong + span {color:#166aa5;} .txt_data.t4 > dd:last-child > strong {margin-bottom:-2px;} .txt_data.t4 > dd + dt:nth-last-child(2) + dd {padding-top:16px; margin-top:15px; border-top:1px dashed #cdd0d3;} .txt_data.t4 > dd + dt:nth-last-child(2) {padding-top:16px; margin-top:20px;} .txt_data.t4 dl {clear:both; margin:12px 0 -16px; padding:6px 20px; background:#f0f5fb; border-radius:5px 5px 0 0; border-bottom:1px dashed #cdd0d3;} .txt_data.t4 dl > dt, .txt_data.t4 dl > dd {margin:0; vertical-align:top; line-height:27px; font-weight:400;} .txt_data.t4 dl > dt {margin-right:-4px; width:50%; font-size:13px; text-align:left;} .txt_data.t4 dl > dd {width:50%; font-size:15px; color:#5b646e;} .txt_data.t4 dl > dd > strong {font-size:1em; font-weight:400; color:#5b646e;} /* p : 총금액 */ .txt_data.t5 strong {font-size:20px;} .txt_data.t5 span {font-size:13px;} /* 간격 */ .txt_type1 + dl.txt_data {margin-top:20px;} /* TXTDATA :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .txt_data.t3 {display:table; width:100%;} .txt_data.t3 dt, .txt_data.t3 dd {display:table-cell; vertical-align:top;} .txt_data.t3 .data1 {vertical-align:middle;} } /*-------------------------------------------------------------------------------- # 텍스트 :금액 :계산 ---------------------------------------------------------------------------------*/ .txt_data_wrap {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-items:center; position:relative; border-top:1px solid #adb1b6; border-bottom:1px solid #adb1b6; background:#f4fbfd; text-align:center; font-size:13px;} .txt_data_wrap > dl {padding:11px 0; position:relative;} .txt_data_wrap > dl > dt {font-weight:700; font-size:13px;} .txt_data_wrap > dl + dl:before, .txt_data_wrap > dl + dl:after {content:''; display:block; position:absolute; top:50%;} .txt_data_wrap > dl + dl:after {left:-14px; margin:-13px 0; width:26px; height:26px; border:1px solid #afb3b8; border-radius:50%;} .txt_data_wrap > dl + dl:before {left:-5px; z-index:2; width:10px; height:0px; border-top:2px solid #020219;} .txt_data_wrap > dl:first-child {flex:1;} .txt_data_wrap > dl:nth-child(2) {min-width:30%; max-width:40%; padding-left:34px; padding-right:34px;} .txt_data_wrap > dl:last-child {padding-right:12px; min-width:277px; text-align:right;} .txt_data_wrap > dl:last-child:before {margin-top:-2px; height:2px; border-bottom:2px solid #020219;} .txt_data_wrap > dl:last-child > dt, .txt_data_wrap > dl:last-child > dd {display:inline; vertical-align:text-top;} .txt_data_wrap > dl:last-child > dt {margin-right:14px; line-height:1.2;} .txt_data_wrap > dl:last-child > dd strong + span {font-size:13px; vertical-align:text-bottom;} .txt_data_wrap > dl:last-child > dd strong + span ~ span {font-size:12px;} .txt_data_wrap > dl:last-child > dd strong + span + span {margin-top:4px;} .txt_data_wrap b {display:inline-block; font-weight:800;} .txt_data_wrap b + span {display:inline-block;} .txt_data_wrap + p {font-size:13px;} .txt_data_wrap > dl:last-child {padding-left:0;} .txt_data_wrap + .txt_data_wrap {margin-top:-1px; z-index:3; border-top-color:#dee0e2; background-color:#fff6f6;} .txt_data_wrap:nth-last-of-type(2) dl:last-child > dd strong, .txt_data_wrap:nth-last-of-type(2) dl:last-child > dd strong + span {color:#020219;} /* 유형2 */ .txt_data_wrap.t1 {background:none; font-size:14px; border-top-color:#5b646e;} .txt_data_wrap.t1 > dl {flex:1; padding:12px 0; min-width:0;} .txt_data_wrap.t1 > dl > dt, .txt_data_wrap.t1 > dl > dd {display:inline-block; vertical-align:middle;} .txt_data_wrap.t1 > dl > dt {font-weight:400; font-size:14px;} .txt_data_wrap.t1 > dl + dl {border-left:1px solid #dee0e2;} .txt_data_wrap.t1 > dl + dl:after {background-color:#fff;} .txt_data_wrap.t1 > dl:last-child {text-align:center;} .txt_data_wrap.t1 > dl:last-child > dt {margin-right:0;} .txt_data_wrap.t1 > dl:last-child > dd strong {font-size:20px;} .txt_data_wrap.t1 > dl:last-child > dd strong + span {font-size:15px; vertical-align:bottom;} .txt_data_wrap.t1 b {display:inline-block; font-size:16px; font-family:'Spoqa Han Sans'; vertical-align:bottom;} /* 간격 */ [class*="tbl_type"] + .txt_data_wrap {margin-top:-1px; z-index:2; border-top-color:#dee0e2;} /* TXTDATAWRAP :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .txt_data_wrap {display:table; table-layout:fixed; width:100%;} .txt_data_wrap > dl {display:table-cell;} .txt_data_wrap > dl + dl:before, .txt_data_wrap > dl + dl:after {display:none;} } /*-------------------------------------------------------------------------------- # 텍스트 :비행시간 ---------------------------------------------------------------------------------*/ .txt_data2 {display:block; position:relative; padding-right:21px; height:40px;} .txt_data2::before, .txt_data2:before, .txt_data2::after, .txt_data2:after {content:""; display:block; position:absolute;} .txt_data2::before, .txt_data2:before {top:23px; left:0; right:21px; height:2px; background:#adb1b6;} .txt_data2::after, .txt_data2:after {top:16px; right:0; width:20px; height:15px; background:url("../img/common/icon_set1.png") no-repeat 0 -160px;} .txt_data2 > cite {overflow:hidden; position:absolute; top:0; right:-21px; padding-left:1px; width:0; height:1px; opacity:0; white-space:nowrap;} .txt_data2 > time {position:absolute; top:0; left:50%; margin:0 -10px; line-height:23px; text-align:center; font-size:12px; color:#5b646e; transform:translate(-50%,0);} .txt_data2 > time::before, .txt_data2 > time:before {content:''; display:block; position:absolute; top:0; bottom:-15px; left:0; right:0;} .txt_data2 > .tooltip_type {display:block; opacity:1; visibility:visible; z-index:1; top:30px; left:50%; margin-left:-10px; padding:0; width:250px; border-color:transparent; background:none; box-sizing:border-box; transform:translate(-50%,0);} .txt_data2 > .tooltip_type > strong:first-child + span:not(:last-child):before {margin-left:-19px;} .txt_data2 > .tooltip_type > strong:first-child + span + span {margin-top:5px;} .txt_data2 > .tooltip_type > strong:first-child + span + span:before {margin-left:13px;} .txt_data2 > .tooltip_type > strong, .txt_data2 > .tooltip_type > span > * {overflow:hidden; height:1px;} .txt_data2 > .tooltip_type > span {display:block;} .txt_data2 > .tooltip_type > span:after {clear:both; content:""; display:block;} .txt_data2 > .tooltip_type > span::before, .txt_data2 > .tooltip_type > span:before {content:""; display:block; position:absolute; top:0; left:50%; margin:-10px -3px 0; width:6px; height:6px; background:#08a7ee; border-radius:100%;} .txt_data2 > .tooltip_type > span > em {float:left; margin-right:10px; font-weight:700; color:#2096ce; font-size:14px;} .txt_data2 > .tooltip_type > span > time {float:right; color:#5b646e; font-size:13px; text-align:right;} .txt_data2:hover {cursor:default;} .txt_data2:hover > .tooltip_type {z-index:999; border-color:#5b646e; padding:16px 20px; background:#fff;} .txt_data2:hover > .tooltip_type > strong, .txt_data2:hover > .tooltip_type > span > * {overflow:visible; position:static; top:auto; right:auto; padding:0; width:auto; height:auto; white-space:normal;} .txt_data2:hover > .tooltip_type > span > em {width:109px;} .txt_data2:hover > .tooltip_type > span > time {float:right; line-height:22px;} .txt_data2.t1 {padding-right:15px;} .txt_data2.t1:before {right:15px;} .txt_data2.t1:after {width:12px;background-position:-400px 0;} /*-------------------------------------------------------------------------------- # 텍스트 :출발/도착 ---------------------------------------------------------------------------------*/ .txt_data3{font-size:16px; font-weight:700; box-sizing:border-box;} .txt_data3 > * {display:inline-block; vertical-align:middle;} .txt_data3 i:not([class]) {display:block; font-size:14px; color:#5b646e; font-weight:400; text-align:center;} .txt_data3 .icon_txt1 {margin-top:-1px; padding:3px 12px 4px; border-color:#24aae1; background-color:#24aae1; color:#fff; font-size:14px;} .txt_data3 dt:not(.icon_txt1) {overflow:hidden; margin-right:-5px; padding-left:1px; width:0; height:1px; white-space:nowrap;} .txt_data3 > strong {font-weight:inherit;} .txt_data3 > em:before, .txt_data3 > time + time:before {content:''; display:inline-block; margin:0 8px 0 3px; width:20px; height:9px; background:url("../img/common/icon_set2.png") no-repeat; background-position:-60px -240px; vertical-align:middle;} .txt_data3 > em:nth-last-child(3):nth-child(2):after {content:',';} .txt_data3[title="왕복"] > em:before {margin-top:-3px; height:12px; background-position:-80px -240px;} .txt_data3[title="다구간"] > em:before {margin-top:-3px; height:20px; background-position:-100px -240px;} .txt_data3[title="다구간"] > strong, .txt_data3[title="다구간"] > em {overflow:hidden; max-width:40%; text-overflow:ellipsis; white-space:nowrap;} .txt_data3[title="다구간"] > .icon_txt1 ~ strong, .txt_data3[title="다구간"] > .icon_txt1 ~ em {max-width:35%;} .d_flight .txt_data3 > em:before, .txt_data3 > time + time:before {background-position:0 -240px; margin:0 2px 0 3px;} /* 크기 */ .txt_data3.t1 {font-size:17px;} .txt_data3.t1 em:before {margin-top:-4px; width:25px; background-position:-120px -240px;} .txt_data3.t1[title="왕복"] em:before {margin-top:-5px; height:19px; background-position:-160px -240px;} .txt_data3.t1[title="다구간"] em:before {height:25px; background-position:-200px -240px} /* 색상 */ .txt_data3.c1 {color:#2096ce} .txt_data3.c1 em:before {background-position-y:-280px !important;} .txt_data3.c2 {color:#fff;} .txt_data3.c2 em:before {background-position-y:-200px !important;} /* BG */ .txt_data3[style*='background-image'] {overflow:hidden; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; padding:5px; height:90px; background-repeat:no-repeat; background-size:cover; background-position:50%; background-color:#f2f3f4; border-radius:3px; text-align:center; font-size:12px; color:#fff;} .txt_data3[style*='background-image']:before {content:''; display:block; position:absolute; top:0; bottom:0; right:0; left:0; background:rgba(12,42,70,0.55);} .txt_data3[style*='background-image'] > * {display:block; position:relative; z-index:2; padding:0;} .txt_data3[style*='background-image'] > em, .txt_data3[style*='background-image'] > strong {overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap;} .txt_data3[style*='background-image'] > em:before {display:block; margin:3px auto 0 !important; width:15px !important; background-position:0 -200px;} .txt_data3[style*='background-image'][title="왕복"] > em:before {background-position:-20px -200px;} .txt_data3[style*='background-image'][title="다구간"] > strong, .txt_data3[style*='background-image'][title="다구간"] > em {max-width:100%;} .txt_data3[style*='background-image'][title="다구간"] > em:before {height:9px; background-position:0 -200px;} .txt_data3[style="background-image:url('')"]:after, .txt_data3[style="background-image:url(' ')"]:after {content:''; display:block; opacity:0.6; position:absolute; top:50%; left:50%; z-index:-1; margin:-40px -60px; width:120px; height:80px; background:url("../img/common/icon_set3.png") no-repeat 0 -240px; transform:scale(0.8)} /*-------------------------------------------------------------------------------- # 텍스트 :평점 ---------------------------------------------------------------------------------*/ .txt_data4 {display:inline-block; position:relative; font-size:13px; color:#5e5ed7; font-weight:800;} .txt_data4 strong {overflow:hidden; position:absolute; padding-left:1px; width:0; height:0; white-space:nowrap;} .txt_data4 em {font-family:'Spoqa Han Sans';} .txt_data4:after {content:'/ 5.0'; color:#8693a0; font-weight:400; font-family:'Spoqa Han Sans';} /*-------------------------------------------------------------------------------- # 텍스트 :유형 공통 ---------------------------------------------------------------------------------*/ [class*="txt_type"] {letter-spacing:-0.05em;} [class*="txt_type"]:not(ul):not(ol):not(dl):not(div), [class*="txt_type"]:not(p) > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button) {position:relative; padding-left:8px;} [class*="txt_type"]:not(ul):not(ol):not(dl):not(div):before, [class*="txt_type"]:not(p) > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button):before {content:""; display:block; position:absolute; top:10px; left:0;} [class*="txt_type"]:not(ul):not(ol):not(dl):not(div):not(p) {display:inline-block;} [class*="txt_type"] p {font-size:inherit;} [class*="txt_type"] > dd {font-weight:400;} /*-------------------------------------------------------------------------------- # 텍스트 :도트유형 ---------------------------------------------------------------------------------*/ .txt_type1 {position:relative; margin:8px 0; font-size:14px; line-height:1.65; color:#020219; text-align:left !important;} .txt_type1:not(ul):not(ol):not(dl):not(div):before, .txt_type1 > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button):before {top:9px; width:3px; height:3px; border-radius:50%; background:#020219;} .txt_type1 > p + ul {margin-left:8px;} .txt_type1 > dt {margin:3px 0; color:#020219; font-weight:700; font-size:16px;} .txt_type1 > dt.icm2 {font-size:14px;} .txt_type1 > dt.icm2:before {background-position:-120px -340px;} .txt_type1 > dd + dt {margin-top:16px;} .txt_type1 .sub {position:absolute; bottom:0; right:0; /*float:right; */} .txt_type1 .txt_sub {font-size:13px; line-height:1.6; color:#5b646e; margin:6px 0 7px;} .txt_type1 u.txt_c {font-weight:700;} .txt_type1 a:not([class]):hover {color:#2096ce; text-decoration:underline; text-underline-position:under;} .txt_type1 [class*="btn_type"] {margin:-1px 0;} .txt_type1:first-child {margin:0;} /* 부가설명1 */ dl.txt_type1, .txt_type1.t1, .txt_type1[class*="img"] {font-size:13px; line-height:1.6; color:#5b646e;} .txt_type1.t1 > li + li, .txt_type1.t1 > dd + dd, .txt_type1[class*="img"] > li + li {margin-top:2px;} .txt_type1.t1:not(ul):not(ol):not(dl):not(div):before, .txt_type1.t1 > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button):before, .txt_type1[class*="img"] > li:before {width:2px; height:2px; border-left:1px solid #dbddde; border-right:1px solid #a9acb1; border-radius:0; background:#5b646e;} .txt_type1.t1 > dt {font-size:13px;} .txt_type1.t1 > dd + dt {margin-top:12px;} /* 부가설명2 */ .txt_type1.t2 {font-size:12px; line-height:15px; color:#8693a0;} .txt_type1.t2:not(ul):not(ol):not(dl):not(div):before, .txt_type1.t2 > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button):before {content:"-"; top:0; width:auto; height:auto; border-radius:0; background-color:transparent;} .txt_type1.t2 dt + dd {margin-top:8px;} .txt_type1.t2 li + li, .txt_type1.t2 dd + dd, div.txt_type1.t2 p + ul {margin-top:2px;} div.txt_type1.t2 p + ul li:before {content:unset;} /* DT 블릿 추가형 */ dl.txt_type1.t3 {font-size:14px;} dl.txt_type1.t3 > dt {position:relative; margin:0; padding-left:8px; font-size:1em;} dl.txt_type1.t3 > dt:before {content:""; display:block; position:absolute; top:9px; left:0; width:3px; height:3px; border-radius:50%; background:#020219;} dl.txt_type1.t3 > dd {margin-top:1px; padding:0; font-size:1em; color:#020219;} dl.txt_type1.t3 > dd:before {display:none;} dl.txt_type1.t3 > dd + dt {margin-top:11px;} dl.txt_type1.t3 > dd > .tbl_type1 {margin-top:10px;} /* 간격 */ p:not([class]) + dl.txt_type1.t3 {margin-top:19px;} .data_summary3 + .txt_type1 {margin:26px 20px} .data_view + .txt_type1 {margin-top:-22px} .btn_wrap1 + .txt_type1 {margin:26px 0 0} /* 기타 :w2와 함께 사용 */ .txt_type1.w2 > li {display:inline-block; width:30%; vertical-align:top;} .txt_type1.w2 > li + li {margin:0;} /* 기타 :box_area :BG */ p.txt_type1.box_area {padding-left:30px;} p.txt_type1.box_area:before {top:24px; left:20px;} dl.txt_type1.box_area {padding:12px 14px; border-top:1px solid #bde5f6; border-bottom:1px solid #bde5f6;} dl.txt_type1.box_area > dt.icm2 {margin:0 0 6px; /*font-size:13px; */} dl.txt_type1.box_area > dt.icm2:before {background-position:-160px -340px;} /* 기타 :box_area2 :line */ .txt_type1.box_area2 {padding-top:15px; padding-bottom:15px; border-bottom:1px solid #adb1b6;} .txt_type1.box_area2:before {top:24px;} /* 기타 :box_area3 :box */ .txt_type1.box_area3 {font-size:13px;} p.txt_type1.box_area3 {padding-left:22px;} p.txt_type1.box_area3:before {top:19px; left:14px;} /* 기타 :이미지형 */ .txt_type1[class*="img"] {margin-bottom:12px; padding:10px 10px 10px 100px;} .txt_type1[class*="img"]:after {content:''; display:block; position:absolute; top:0; left:0; width:80px; height:80px; background:url("../img/common/icon_set1.png") no-repeat -480px -1360px} .txt_type1 [data-tooltip="info"] strong {font-size:13px;} /*-------------------------------------------------------------------------------- # 텍스트 :별표표시 유형 ---------------------------------------------------------------------------------*/ i.txt_type2 {overflow:hidden; width:0; white-space:nowrap; vertical-align:middle; line-height:1 !important;} .txt_type2:not(ul), .txt_type2 > li {display:inline-block; position:relative; margin-left:1px; padding-left:8px; color:#ff464d !important; font-size:13px;} .txt_type2:not(ul):before, .txt_type2 > li:before {content:'*' !important; position:absolute; top:0 !important; left:0; background:none !important; font-size:12px !important; font-weight:700 !important;} .txt_type2[class*="txt_c"]:not(ul), .txt_type2[class*="txt_c"] > li {color:inherit !important;} .txt_type2.t1:not(ul), .txt_type2.t1 > li {color:#5b646e !important;} div.txt_type2, .txt_type2 > li {display:block;} .txt_type2.box_area2 {margin-top:17px;} .txt_type2.box_area2.t1:before {display:none;} [class*='tbl_type'] + .txt_type2 {margin-top:7px;} /*-------------------------------------------------------------------------------- # 텍스트 :경고 및 알림 유형 ---------------------------------------------------------------------------------*/ .txt_type3 {display:inline-block; position:relative; padding-left:21px !important; margin:8px 0 0; color:#8693a0; font-size:13px; line-height:1.6; letter-spacing:-0.05em; text-align:left;} .txt_type3:before, .txt_type3:after {content:""; position:absolute; display:block;} .txt_type3:before {top:6px !important; left:7px !important; width:2px; height:1px; border-top:5px solid #8693a0; border-bottom:2px solid #8693a0;} .txt_type3:after {top:2px; left:0; width:16px; height:16px; border:1px solid #8693a0; border-radius:50%; box-sizing:border-box;} /* DL */ dl.txt_type3 {padding-left:26px !important; color:#020219;} dl.txt_type3:before, dl.txt_type3:after {border-color:#020219;} dl.txt_type3:before {left:9px !important; top:7px !important; border-top-width:6px; height:2px;} dl.txt_type3:after {width:20px; height:20px;} dl.txt_type3 > dt {font-size:16px; font-weight:700;} dl.txt_type3 > dd {padding-left:0 !important; margin-top:4px; font-size:14px; line-height:1.7;} /* 컨텐츠 숫자표현 */ .txt_type3 ul {counter-reset:txtnum 0;} .txt_type3 ul > li {position:relative; padding-left:17px;} .txt_type3 ul > li:before {content:counter(txtnum) '.'; counter-increment:txtnum 1; position:absolute; left:0;} .txt_type3 ul > li:nth-child(9) ~ li {padding-left:22px;} /* 색상변경 */ .txt_type3.t1 {color:#ff464d;} .txt_type3.t1:before, .txt_type3.t1:after {border-color:#ff464d;} /*-------------------------------------------------------------------------------- # 텍스트 :숫자유형 ---------------------------------------------------------------------------------*/ .txt_type4 {font-size:14px; line-height:1.7;} .txt_type4, .txt_type4 ul {counter-reset:txtnum 0;} .txt_type4:not(p) > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button) {padding-left:14px;} .txt_type4 > li ~ li {margin-top:5px;} .txt_type4 > li > strong {font-weight:400;} .txt_type4 > li > span {display:block; color:#5b646e;} .txt_type4:not(p) > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button):before {content:counter(txtnum) '.'; counter-increment:txtnum 1; top:0;} .txt_type4 li > ul > li {position:relative; padding-left:16px;} .txt_type4 li > ul > li:before {content:counter(txtnum) ')'; counter-increment:txtnum 1; display:block; position:absolute; left:0;} .txt_type4 p {position:relative; padding-left:8px;} .txt_type4 p:before {content:""; display:block; position:absolute; top:10px; left:0; width:3px; height:1px; border-right:1px solid #a9acb1; background-color:#5b646e;} /*-------------------------------------------------------------------------------- # 텍스트 :※유형 ---------------------------------------------------------------------------------*/ .txt_type5 {margin-top:8px; font-size:13px; line-height:1.55; color:#020219; text-align:left;} .txt_type5:first-child {margin-top:0;} .txt_type5:not(ul):not(ol):not(dl):not(div), .txt_type5:not(p) > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button) {padding-left:14px;} .txt_type5:not(ul):not(ol):not(dl):not(div):before, .txt_type5:not(p) > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button):before {content:'※'; top:0px;} .txt_type5 > dt {font-size:14px; font-weight:700;} .txt_type5 ul > li, .txt_type5 p {position:relative; margin-left:6px; padding-left:8px;} .txt_type5 ul > li:before, .txt_type5 p:before {content:''; display:block; position:absolute; top:10px; left:0; width:2px; height:1px; border-right:1px solid #a9acb1; background-color:#5b646e;} .txt_type5.t1 {color:#8693a0;} /*-------------------------------------------------------------------------------- # 텍스트 : 제목과 내용의 병렬구조 ---------------------------------------------------------------------------------*/ .txt_type6 {display: flex; margin-top:8px; font-size:13px; line-height:1.55; color:#020219; text-align:left;} .txt_type6:first-child {margin-top:0;} .txt_type6:not(ul):not(ol):not(dl):not(div), .txt_type6:not(p) > *:not(ul):not(ol):not(dl):not(dt):not(div):not(a):not(button) {padding-left: 0;} .txt_type6 dt, .txt_type6 dd {font-size:14px; font-weight:700;} .txt_type6 + .txt_c2::before {content:'※'; top:0px;} /*-------------------------------------------------------------------------------- # 텍스트 :그룹 (좌-텍스트 / 우-기타) ---------------------------------------------------------------------------------*/ .txt_wrap {position:relative;} .txt_wrap:after {clear:both; content:""; display:block;} .txt_wrap .txt {float:left; font-size:11px; line-height:1.55; color:#8693a0;} .txt_wrap .txt ~ .area {float:right; text-align:right;} .txt_wrap > .area .select_type1 {width:140px;} .tab_wrap + .txt_wrap {margin-top:10px;} .txt_wrap + .product_type6 {margin-top:10px;} /*-------------------------------------------------------------------------------- # 메세지 :결과없음/조회중 :텍스트 단독 ---------------------------------------------------------------------------------*/ .mes_data {padding:10px; text-align:center;} /* [class^="mes_data"][class*="img"] {position:relative; padding:160px 10px 155px !important; border-radius:3px; font-size:14px; color:#020219; line-height:1.66 !important;} [class^="mes_data"][class*="img"] > strong, .mes_data_none > span {display:block; margin:6px 0 9px; font-size:17px; font-weight:700;} [class^="mes_data"][class*="img"] b {font-weight:700; color:#2096ce;} */ /*-------------------------------------------------------------------------------- # 메세지 :결과없음/조회중 # .mes_data_none:not([class*='img']) 부분은 추후 개발 수정 완료 시 삭제 ---------------------------------------------------------------------------------*/ /* 결과없음/조회중 :기본 */ .mes_data_none, .mes_data_ing {padding:156px 10px !important; border:1px solid #dee0e2; border-radius:6px; text-align:center !important; font-size:15px !important; line-height:1.55 !important;} .mes_data_none:before, .mes_data_ing:before {content:''; display:block; margin:0 auto; width:60px; height:60px; background:url("../img/common/icon_set1.png") no-repeat -640px -960px;} .mes_data_none:before{display:none; background-image:none} .mes_data_none > [class*="btn_red"] {min-width:128px; margin-top:30px} .mes_data_none strong, .mes_data_ing strong, .mes_data_ing h1 {display:block; margin:4px 0 5px; font-size:20px; text-align:center;} .mes_data_none b, .mes_data_ing b {font-weight:700; color:#2096ce;} .mes_data_none .btn_wrap1 {display:block; margin:26px 0 3px;} .mes_data_none:not([class*='img']), .mes_data_none.t1 {padding:26px 10px !important; border:1px solid #dee0e2; border-radius:6px; font-size:13px !important;} .mes_data_none:not([class*='img']):before, .mes_data_none.t1:before {margin-bottom:6px; width:33px; height:33px; background-position:-960px -720px;} .mes_data_none.t2:before {background-position:-960px -760px} .mes_data_none:not([class*='img']) strong, .mes_data_none.t1 strong {margin:0 0 -1px; font-size:16px;} .mes_data_ing:before {background:url("../img/common/bg_loading.gif") no-repeat 0 0;} .mes_data_ing h1 {font-weight:800;} .mes_data_ing p {font-size:15px;} td.mes_data_none, td.mes_data_ing, .content > .mes_data_none, .content > .mes_data_ing, /*.form_search1 ~ .container > .mes_data_none, .form_search1 ~ .container > .mes_data_ing,*/ .box_area2 ~ .mes_data_none {border:0; border-radius:0;} .box_area2 ~ .mes_data_none {border-top:1px solid #adb1b6;} .box_area2 > .mes_data_none {border:none;} /* .mes_data_none:not([class*="img"]) {padding:30px 10px 37px; border-radius:6px; border:1px solid #dee0e2; font-size:13px; line-height:1.48;} .mes_data_none:not([class*="img"]):not(td):before {content:''; margin-bottom:6px; width:33px; height:33px; background-position:-200px -720px;} .mes_data_none:not([class*="img"]) > strong {display:block; font-size:16px;} .mes_data_none > span > strong {color:#2096ce;} .mes_data_none [class*="btn_"] {margin:5px 0 0 !important;} .mes_data_none.t1 {border:1px solid #dee0e2;} .box_area2 ~ .mes_data_none {border-top:1px solid #adb1b6; border-radius:0;} */ /* 결과없음 :유형2 */ .mes_data_none2 {padding:131px 10px 136px; border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6; font-size:14px; color:#020219; letter-spacing:-1px; text-align:center;} .mes_data_none2 > strong {display:block; margin:7px 0; font-size:25px; font-weight:700;} .mes_data_none2 > strong > b {color:#2096ce;} .mes_data_none2 > strong > b:before {content:"‘"; display:inline-block;} .mes_data_none2 > strong > b:after {content:"’";} .mes_data_none2.t1 {padding:45px 0; border-color:#24aae1; font-weight:700;} td.mes_data_none2 {height:73px !important; text-align:center !important;} td.mes_data_none2 > strong {font-size:inherit;} /*-------------------------------------------------------------------------------- # 메세지 :완료 ---------------------------------------------------------------------------------*/ .content .mes_type {margin-top:-35px;} .mes_type {position:relative; margin:0 -100% 0; height:366px; background:url("../img/common/bg_mes.png") no-repeat 50% 0, linear-gradient(45deg, #24aae1, #24aae1 50%, #5d60d7 50%); text-align:center; letter-spacing:-0.05em;} .mes_type:before {content:''; display:inline-block; margin:42px 24px 42px 40px; width:93px; height:78px; background:url("../img/common/icon_set1.png") no-repeat -880px -1280px; vertical-align:middle;} .mes_type > div, .mes_type > h1 {display:inline-block; position:relative; margin-top:4px; width:940px; min-height:45px; vertical-align:middle; text-align:left; box-sizing:border-box;} .mes_type h1 {font-size:32px; color:#fff; line-height:1.2;} .mes_type h1 > b {color:#ffe033;} .mes_type p {margin:13px 0 1px; color:#fff; line-height:1.5;} /* MESTYPE :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .mes_type {background:url("../img/common/bg_mes.png") no-repeat 50% 0;} } /*-------------------------------------------------------------------------------- # 메세지 :페이지 안내형 ---------------------------------------------------------------------------------*/ .mes_type2 {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:center; position:relative; padding:15px 10px 16px 100px; height:100px; border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6; font-size:14px; line-height:1.7; box-sizing:border-box;} .mes_type2:before {content:''; display:block; position:absolute; top:50%; left:16px; margin:-30px 0; width:60px; height:60px; background:url("../img/common/icon_set1.png") no-repeat 0 -1200px;} .mes_type2 .btn_small2 {margin-top:-3px;} .mes_type2 .txt_type1 {margin:0; font-size:13px; font-weight:400;} .mes_type2 .txt_type5 {margin:3px 0 0; color:#5b646e;} .mes_type2 .txt_sub {display:block; margin:0;} .mes_type2 .sub {position:absolute; top:0; bottom:0; right:0;} .mes_type2 .sub:before {content:''; display:inline-block; height:100px; vertical-align:middle;} .mes_type2 > span, .mes_type2 > strong, .mes_type2 > em {display:block;} .mes_type2 > strong {margin-top:-2px; font-size:20px;} .mes_type2 p:not([class]) {color:#5b646e;} .mes_type2 p:not([class]) > strong {color:#020219;} .mes_type2 p + .txt_type1 {margin-top:3px;} .mes_type2.s1 {height:auto;} .mes_type2.imgvoucher {padding-left:228px; height:150px;} .mes_type2.imgvoucher:before {left:22px; width:185px; height:90px; margin-top:-45px; background:url("../img/customer/bg_set1.png") no-repeat -350px 0;} .mes_type2.imgvoucher .txt_type1 > li + li {margin-top:5px;} /* 아이콘 */ .mes_type2.img2:before {background-position:-80px -1200px;} .mes_type2.img3:before {background-position:-160px -1200px;} .mes_type2.img4:before {background-position:-240px -1200px;} .mes_type2.img5:before {background-position:-320px -1200px;} .mes_type2.img6:before {background-position:-400px -1200px;} .mes_type2.img7:before {background-position:-480px -1200px;} /* [D] 오픈시 삭제요망 :개발에서 퍼블리싱대로 마크업이 변경되면 아래의 스타일을 삭제해주세요 */ .mes_type2 > span {display:block; margin-top:2px; font-size:13px; font-weight:400; color:#5b646e;} .mes_type2 > span:before {content:'※';} .mes_type2 > em {font-weight:400; font-size:13px; position:relative; padding-left:8px;} .mes_type2 > em:before {content:''; display:block; position:absolute; top:50%; margin-top:-2px; left:0; width:3px; height:2px; border-radius:50%; background:#020219;} .mes_type2.img2, .mes_type2.img3 {font-weight:700;} .mes_type2.img5 > .btn_type3 {position:absolute; top:50%; margin-top:-20px; right:0;} div.mes_type2.img4 {height:auto;} .mes_type2.img4 > p > strong, .mes_type2.img5 > p > strong {display:block;} /* // */ /*-------------------------------------------------------------------------------- # 메세지 :문의하기 ---------------------------------------------------------------------------------*/ .mes_type3 {position:relative; margin:0 0 35px; padding:18px 20px 18px 92px; min-height:44px; background:#24aae1; border-radius:3px; font-size:15px; color:#fff;} .mes_type3:before {content:''; display:block; position:absolute; top:12px; left:16px; width:60px; height:60px; background:url("../img/common/icon_set1.png") no-repeat -560px -1200px;} .mes_type3 > dt, .mes_type3 > dd {display:inline-block;} .mes_type3 > dt {margin-right:2px; font-weight:700;} .mes_type3 > dd > strong {font-weight:800;} .mes_type3 > dd + dd:not(:nth-child(4)):before {content:''; display:inline-block; margin:0 10px; width:1px; height:12px; background:#92d5f0; vertical-align:middle;} .mes_type3 > dd:nth-child(4):last-child {display:block; margin-top:1px; margin-left:95px;} .mes_type3 > dt:nth-last-child(3):first-child, .mes_type3 > dt:nth-last-child(3):first-child + dd {margin-top:10px;} .mes_type3 .btn_type4 {position:absolute; top:16px; right:18px; border-color:#fff;} /*-------------------------------------------------------------------------------- # 메세지 :팝업메세지 ---------------------------------------------------------------------------------*/ .mes_type5 {text-align:center;} .mes_type5 .tit {display:block; margin:0 0 16px; font-size:22px; line-height:1.3; color:#020219;} .mes_type5 .tit > b {display:block; color:#2096ce;} .mes_type5 .tit[data-air-logo] {padding-top:40px; background-position:50% 0; background-size:auto 40px;} .mes_type5 .tit2 {margin:0 0 10px; font-size:16px; line-height:1.375; display:block;} .mes_type5 p:not([class]) {margin:-5px 0; line-height:1.7;} .mes_type5 .area1 {display:block; margin:14px 0 16px; padding:10px 15px 11px; background:#f0f5fb; border-radius:3px; font-size:14px; letter-spacing:-0.05em;} .mes_type5 .area1 + .area1 {margin-top:-25px; padding-top:0} .mes_type5 > p {font-size:16px;} .mes_type5 > dl.area1 {counter-reset:num1; color:#020219;} .mes_type5 > dl.area1 > dt {font-weight:700;} .mes_type5 > dl.area1 > dd {position:relative; margin-top:6px; padding:0 23px; text-align:left;} .mes_type5 > dl.area1 > dd:before {content:'0' counter(num1); counter-increment:num1; position:absolute; left:0; color:#2096ce;} .mes_type5 > .btn_wrap {display:block; margin:20px 0 0;} .mes_type5 > .btn_wrap > [class^="btn_"] {width:calc(50% - 4px); padding-left:5px; padding-right:5px;} .mes_type5 > .btn_wrap > [class^="btn_"]:only-child {width:100%;} /* P태그 */ p.mes_type5 {font-size:16px;} p.mes_type5 > strong {color:#ff464d;} p.mes_type5 > i {display:block; font-size:14px; line-height:1.5; color:#5b646e;} p.mes_type5 > em {display:block;} /* 이미지 */ .mes_type5[class*="img"]:before {content:""; display:block; margin:0 auto 13px; width:73px; height:73px; background:url("../img/common/icon_set1.png") no-repeat -480px -1280px;} .mes_type5.img0 {font-size:13px;} .mes_type5.img0 > span {display:block; margin-bottom:8px; font-size:16px; font-weight:700;} .mes_type5.img0 strong {color:#2096ce;} .mes_type5.img1:before {background-position:-560px -1280px} .mes_type5.img2, .mes_type5.img3 {font-size:14px; color:#7c838b;} .mes_type5.img2:before, .mes_type5.img3:before, .mes_type5.img4:before {width:98px; height:98px; background-image:url('../img/common/bg_set1.png');} .mes_type5.img2:before {background-position:-1px -484px;} .mes_type5.img2 > em {margin:-15px 0 4px; color:#020219;} .mes_type5.img3:before {background-position:-162px -484px;} .mes_type5.img3 > em {color:#020219;} .mes_type5.img3 > .tit {margin-bottom:6px;} .mes_type5.img4:before {background-position:-323px -484px;} /*-------------------------------------------------------------------------------- # 메세지 :비회원조회 ---------------------------------------------------------------------------------*/ .mes_type6 {overflow:hidden; position:relative; margin-bottom:45px; padding:23px 30px; border-radius:3px; background:#24aae1; color:#fff; font-size:13px;} /* .mes_type6:before, .mes_type6:after {content:''; display:block; position:absolute; width:250px; height:90px; background:#fff; border-radius:45px;} */ .mes_type6:before {top:-73px; left:55px; opacity:0.08; transform:rotate(135deg)} .mes_type6:after {top:82px; right:-148px; opacity:0.1; transform:rotate(40deg)} .mes_type6 > strong {display:block; margin-bottom:1px; font-size:19px;} /* .mes_type6 > strong:before {content:''; display:block; position:absolute; top:29px; right:122px; width:24px; height:24px; border-radius:50%; background:rgba(256,256,256,0.12);} */ .mes_type6 > .btn_small2 {border-color:#fff; background:none; color:#fff;} .mes_type6 > .btn_small2.arr1:after {background-position:0 0;} .mes_type6 > .sub {position:absolute; bottom:23px; right:30px; z-index:2;} /*-------------------------------------------------------------------------------- # 메세지 :로딩바 (해외항공) ---------------------------------------------------------------------------------*/ .mes_loading {overflow:hidden; position:absolute; left:0; right:0; height:6px; background:#f0f5fb;} .mes_loading > p {overflow:hidden; padding-top:6px; width:0; height:0; background:#24aae1; transition:width 0.95s; transition-timing-function:ease-out;} /*-------------------------------------------------------------------------------- # INPUT :유형 공통 ---------------------------------------------------------------------------------*/ [class*="inp_type"] {position:relative; width:300px; text-align:left; border:1px solid #adb1b6; border-radius:3px; background-color:#fff; vertical-align:middle; display:inline-block; box-sizing:border-box; transition:border-color 0.3s ease; -webkit-transition:border-color 0.3s ease;} [class*="inp_type"] input {width:100%; padding:6px 10px 6px 10px; font-size:14px; color:#020219; /*letter-spacing:-0.05em; */ border:0; outline:0; background-color:transparent; vertical-align:top; box-sizing:border-box;} [class*="inp_type"] input[readonly] {pointer-events:none;} [class*="inp_type"] input[type="password"] {padding-right:20px;} [class*="inp_type"] input:focus {font-weight:700;} [class*="inp_type"] input::placeholder {font-weight:400; color:#adb1b6; opacity:1;} [class*="inp_type"] input:-ms-input-placeholder {font-weight:400; color:#adb1b6;} [class*="inp_type"] .btn_clear {position:absolute; right:11px; width:0; height:18px; padding-left:18px; background-color:#7c838b; border-radius:50%; background-image:url("../img/common/icon_set1.png"); background-position:-560px -240px; display:none; overflow:hidden;} [class*="inp_type"].on, [class*="search_type"].on [class*="inp_type"] {border-color:#24aae1;} [class*="inp_type"].on > input, [class*="search_type"].on [class*="inp_type"] > input {padding-right:30px;} [class*="inp_type"].right input {padding-left:30px; padding-right:10px; text-align:right;} [class*="inp_type"].right input:only-child {padding-left:10px;} [class*="inp_type"].right .btn_clear {right:auto; left:11px;} [class*="inp_type"].t1 {width:34px !important;} [class*="inp_type"].t1 input {padding-left:5px; padding-right:5px; text-align:center;} [class*="inp_type"].pwd input {padding:6px 80px 6px 10px;} /* IE9 :브라우저 X버튼 살리고 마크업 버튼 숨김 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { [class*="inp_type"].on > input, [class*="search_type"].on [class*="inp_type"] > input {padding-right:10px;} [class*="inp_type"] .btn_clear {display:none !important;} } /* 인증시간 */ [class*="inp_type"].limit input {padding:6px 110px 6px 10px;} [class*="inp_type"].limit > span {position:absolute; right:10px; top:50%; margin-top:-9px; font-weight:700; font-size:13px; color:#ff464d; letter-spacing:-0.02em;} [class*="inp_type"].limit > span em {margin-left:6px; display:inline-block;} /* 비밀번호 */ [class*="inp_type"].pwd:before {position:absolute; right:30px; top:7px; font-size:12px; line-height:18px;} [class*="inp_type"].lock2:before {content:"위험"; color:#ff464d;} [class*="inp_type"].lock3:before {content:"사용불가"; color:#ff464d;} [class*="inp_type"].lock4:before {content:"보통"; color:#2096ce;} [class*="inp_type"].lock5:before {content:"안전"; color:#00c871;} [class*="inp_type"].pwd:after {content:""; position:absolute; right:9px; top:7px; width:16px; height:18px; background-image:url("../img/common/icon_set1.png");} [class*="inp_type"].lock1:after {background-position:-480px -80px;} [class*="inp_type"].lock2:after, [class*="inp_type"].lock3:after {background-position:-520px -80px;} [class*="inp_type"].lock4:after {background-position:-560px -80px;} [class*="inp_type"].lock5:after {background-position:-600px -80px;} [class*="inp_type"].chk1:after {background-position:-640px -80px;} [class*="inp_type"].chk2:after {background-position:-680px -80px;} /* H34 */ .inp_type1 input {height:32px; line-height:22px;} .inp_type1 p {margin-top:-2px; padding-bottom:7px;} .inp_type1 .btn_clear {top:7px;} /* H40 */ .inp_type2 input {height:38px !important; line-height:28px !important;} .inp_type2 p {margin-top:-5px; padding-bottom:10px;} .inp_type2 .btn_clear {top:10px;} /* H48 */ .inp_type3 input {height:46px; line-height:36px;} .inp_type3 p {margin-top:-9px; padding-bottom:14px;} .inp_type3 .btn_clear {top:14px;} /* 첨부파일 */ .file_box {position:relative; padding-right:100px;} .file_box [class*="inp_type"] {width:100% !important; vertical-align:top;} .file_box [class*="inp_type"] [type="file"] {position:absolute; left:0; top:0; opacity:0; cursor:pointer;} .file_box [class*="inp_type"] [type="file"] + input {padding:6px 10px;} .file_box [class*="btn_type"] {position:absolute; right:0; top:0;} .file_box + .file_box {margin-top:8px;} /* 메세지타입 */ .inp_txt {position:relative; margin:9px 0; font-size:13px; text-align:left;} .inp_txt.success {color:#2096ce; line-height:1.4;} .inp_txt.error {margin:8px 0; padding-left:20px; color:#ff464d; line-height:1.6;} .inp_txt.error:before, .inp_txt.error:after {content:""; position:absolute; display:block;} .inp_txt.error:before {top:6px !important; left:7px !important; width:2px; height:1px; border-top:5px solid #ff464d; border-bottom:2px solid #ff464d;} .inp_txt.error:after {top:2px; left:0; width:16px; height:16px; border:1px solid #ff464d; border-radius:50%; box-sizing:border-box;} [class*="inp_"] ~ .txt_type3.t1 {display:block; text-align:left;} [class*="inp_type"].error {border-color:#ff464d;} /*-------------------------------------------------------------------------------- # INPUT :자동완성 ---------------------------------------------------------------------------------*/ [class*="inp_type"].auto {width:100%; font-size:14px;} [class*="inp_type"].auto:before {content:""; position:absolute; left:11px; top:50%; width:19px; height:19px; margin-top:-9px; background-image:url("../img/common/icon_set1.png"); background-position:-440px -40px;} [class*="inp_type"].auto input {padding-left:34px; font-size:14px;} [class*="inp_type"].auto .word, [class*="inp_type"].auto [class*="area_auto"] {display:none; overflow-y:auto; position:absolute; left:-1px; right:-1px; z-index:10; top:100%; min-width:300px; max-height:284px; margin-top:5px; border:2px solid #24aae1; background-color:#fff; box-sizing:border-box;} [class*="inp_type"].auto.on .word.pick[style="display:none;"] {display:block !important;} [class*="inp_type"].auto.ing input {padding-left:10px;} [class*="inp_type"].auto.ing:before {display:none;} /* 자동완성 :검색결과없음 */ [class*="inp_type"].auto .txt_nothing {padding:36px 0; text-align:center;} /* 자동완성 :목록 */ [class*="inp_type"].auto dl dt {padding:8px 15px; border-bottom:1px solid #dee0e2; font-weight:700;} [class*="inp_type"].auto dl dt ~ dt {border-top:1px solid #dee0e2} [class*="inp_type"].auto ul, [class*="inp_type"].auto ol, [class*="inp_type"].auto p:not([class]) {margin:8px 15px 9px;} [class*="inp_type"].auto li {position:relative;} [class*="inp_type"].auto a:not(.btn_small2) {display:inline-block; position:relative; padding:3px 0 2px; max-width:calc(100% - 30px);} [class*="inp_type"].auto a:not(.btn_small2):only-child {display:block; max-width:100%;} [class*="inp_type"].auto a:not(.btn_small2):hover, [class*="inp_type"].auto a:not(.btn_small2).on, [class*="inp_type"].auto a b {font-weight:700; color:#2096ce;} [class*="inp_type"].auto a i, [class*="inp_type"].auto a u {display:inline-block; margin:-3px 0 0; font-size:13px; color:#5b646e; vertical-align:middle; text-decoration:none;} [class*="inp_type"].auto a i:first-child {color:#7c838b;} [class*="inp_type"].auto a u:before {content:''; display:inline-block; margin:-1px 6px 0 6px; width:1px; height:13px; background:#d3d3d3; vertical-align:middle;} [class*="inp_type"].auto a em {display:inline-block;} [class*="inp_type"].auto a em + em:before {content:'>'; margin:0 4px;} [class*="inp_type"].auto a em + i {position:absolute; right:0;} [class*="inp_type"].auto a > span:not([class]) {overflow:hidden; display:inline-block; position:relative; margin:2px 8px 3px 0; width:90px; height:58px; vertical-align:middle;} [class*="inp_type"].auto a > span:not([class]) img {position:absolute; top:50%; left:50%; right:50%; bottom:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%)} [class*="inp_type"].auto a > span:not([class]) + em {max-width:calc(100% - 105px); vertical-align:middle;} [class*="inp_type"].auto a + button {overflow:hidden; position:absolute; top:0; right:-5px; padding-left:27px; width:0; height:27px; white-space:nowrap;} [class*="inp_type"].auto a + button:before {content:''; display:block; position:absolute; top:50%; left:50%; margin:-6px; width:12px; height:11px; background:url("../img/common/icon_set1.png") no-repeat -640px -240px;} [class*="inp_type"].auto [data-sub] {position:relative; padding:0 0 0 13px;} [class*="inp_type"].auto [data-sub]:before, [class*="inp_type"].auto [data-sub]:after {content:""; position:absolute; border-left:1px solid #adb1b6; border-bottom:1px solid #adb1b6;} [class*="inp_type"].auto [data-sub]:before {position:absolute; left:0; top:50%; width:8px; height:4px; margin-top:-4px;} [class*="inp_type"].auto [data-sub]:after {position:absolute; left:3px; top:50%; width:4px; height:4px; margin-top:-2px; transform:rotate(-135deg); transform:rotate(-135deg);} [class*="inp_type"].auto .btn_small2 {padding-top:0; padding-bottom:0;} [class*="inp_type"].auto .btn_small2:not(:hover) {border-color:#dee0e2 !important; color:#5b646e !important;} [class*="inp_type"].auto .box1 a em:nth-last-child(2):first-child {max-width:calc(100% - 30%);} /* 자동완성 :목록 :인기 */ [class*="inp_type"].auto ol:not([class]) {font-size:0; margin:11px;} [class*="inp_type"].auto ol:not([class]) > li {margin:4px; display:inline-block;} [class*="inp_type"].auto .box2 {counter-reset:best4;} [class*="inp_type"].auto .box2 li {padding-left:20px;} [class*="inp_type"].auto .box2 li:before {content:counter(best4); counter-increment:best4; position:absolute; left:0; top:4px; font-size:13px; font-weight:700; color:#2096ce; font-family:'Spoqa Han Sans';} [class*="inp_type"].auto .box2 li > a {font-weight:700; color:#2096ce;} [class*="inp_type"].auto .box2 li:nth-child(3) ~ li:before, [class*="inp_type"].auto .box2 li:nth-child(3) ~ li > a:not(:hover) {color:#5b646e; font-weight:400;} /* 자동완성 :목록 :특가상품 */ [class*="inp_type"].auto .box3 a > span:not([class]) {position:relative; display:block; width:160px; height:90px; border-radius:3px; background-color:#f2f3f4;} [class*="inp_type"].auto .box3 a > span:not([class]):empty:before {content:'';display:block;opacity:0.6;position:absolute;top:50%;left:50%;margin:-40px -60px;width:120px;height:80px;background:url('../img/common/icon_set3.png') no-repeat 0 -240px;transform:scale(0.8);} [class*="inp_type"].auto .box3 a i {display:block; margin:10px 0 2px; color:#8693a0; font-weight:700; font-size:12px;} [class*="inp_type"].auto .box3 a em {overflow:hidden; display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:2.8em; line-height:1.4;} [class*="inp_type"].auto .box3 cite {overflow:hidden; display:block; line-height:1.4; text-overflow:ellipsis; white-space:nowrap;} [class*="inp_type"].auto .box3 cite[data-air-logo] {margin-bottom:3px; padding-left:27px; background-size:23px auto; background-position:0 50%; font-size:15px;} [class*="inp_type"].auto .box3 cite + span {overflow:hidden; display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin-top:7px; font-size:12px; max-height:3.0em; line-height:1.5;} [class*="inp_type"].auto .box3 time {letter-spacing:-0.05em;} [class*="inp_type"].auto .box3 .txt_data {display:block; margin:3px 0 10px; font-size:11px; text-align:left;} [class*="inp_type"].auto .box3 .txt_data strong {font-weight:400;} [class*="inp_type"].auto .box3 .txt_data3 {margin-bottom:6px; width:160px;} [class*="inp_type"].auto .box3 a:hover {text-decoration:none;} [class*="inp_type"].auto .box3 a:hover > em, [class*="inp_type"].auto .box3 a:hover > cite {text-decoration:underline; text-underline-position:under;} /* 자동완성 :목록 :현지투어 */ [class*="inp_type"].auto .box4 {margin:10px 15px;} [class*="inp_type"].auto .box4 a:hover em {text-decoration:underline; text-underline-position:under} /* 자동완성 :통합검색 */ [class*="inp_type"].auto [class*="area_auto"] {overflow:hidden !important; left:-4px !important; z-index:9999 !important; width:587px; margin-top:2px !important;} [class*="inp_type"].auto [class*="area_auto"] .box3 {width:198px; background:#f0f5fb; margin:0; padding:13px 19px 10px; box-sizing:border-box;} /* 자동완성 :통합검색 :자동완성 */ [class*="inp_type"].auto .area_auto1 {/* height:215px; max-height:215px; */ min-height:215px; max-height:none;} [class*="inp_type"].auto .area_auto1 > ul:not(.box3) {float:left; width:354px;} [class*="inp_type"].auto .area_auto1 > ul:not(.box3) .on {font-weight:700; color:#2096ce;} [class*="inp_type"].auto .area_auto1 > ul:not(.box3) a {text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} [class*="inp_type"].auto .area_auto1 .box3 {/* float:left; height:100%; */ position:absolute; right:0; top:0; bottom:0;} [class*="inp_type"].auto .area_auto1 .box3 [data-weather]:before {width:90px; height:90px; margin:2px auto 3px auto; display:block;} /* 자동완성 :통합검색 :최근검색어 | 인기검색어 */ [class*="inp_type"].auto .area_auto2 {height:438px; max-height:438px;} [class*="inp_type"].auto .area_auto2:after {content:''; clear:both; display:block;} [class*="inp_type"].auto .area_auto2 > dt, [class*="inp_type"].auto .area_auto2 > dd {width:192px; box-sizing:border-box;} [class*="inp_type"].auto .area_auto2 > dt {position:absolute; border-top:0;} [class*="inp_type"].auto .area_auto2 > dt:nth-child(3) {left:33%;} [class*="inp_type"].auto .area_auto2 > dt:nth-child(5) {left:66%; z-index:1; border-bottom:0; border-left:1px solid #dee0e2; text-align:center;} [class*="inp_type"].auto .area_auto2 > dd {float:left; position:relative; padding:38px 0 13px; height:100%;} [class*="inp_type"].auto .area_auto2 > dt:nth-child(3) ~ dd {border-left:1px solid #dee0e2;} [class*="inp_type"].auto .area_auto2 > dd:last-child, [class*="inp_type"].auto .area_auto2 > dt:nth-child(5) {width:199px; background:#f0f5fb;} [class*="inp_type"].auto .area_auto2 > dd:last-child {overflow:hidden; padding:21px 0 0;} [class*="inp_type"].auto .area_auto2 > dd > .btn_txt, [class*="inp_type"].auto .area_auto2 > dd > time {position:absolute; bottom:9px; left:13px; font-size:12px; color:#7c838b;} [class*="inp_type"].auto .area_auto2 a + button {right:-11px;} [class*="inp_type"].auto .area_auto2 a + button:before {margin:-4px; width:7px; height:7px; background-position:-720px -240px;} /* [D] 추후 개발 수정 완료 후 아래 스타일 삭제 */ [class*="inp_type"].auto .word > strong {display:block; padding:8px 15px; border-bottom:1px solid #dee0e2; font-weight:700;} [class*="inp_type"].auto .word > strong ~ strong {border-top:1px solid #dee0e2} /*-------------------------------------------------------------------------------- # INPUT :달력/인원수/검색 ---------------------------------------------------------------------------------*/ [class*="inp_type"][class*="util"] {padding:6px 0; letter-spacing:-0.05em; /* overflow:hidden; */} [class*="inp_type"][class*="util"]:before {content:""; position:absolute; top:50%; width:18px; height:18px; margin-top:-9px; background-image:url("../img/common/icon_set1.png"); z-index:1; transition:border-color 0.3s ease, background-color 0.3s ease; -webkit-transition:border-color 0.3s ease, background-color 0.3s ease;} [class*="inp_type"][class*="util"] > *:first-child {padding-left:10px;} [class*="inp_type"][class*="util"] > strong:first-child {padding-left:20px;} [class*="inp_type"][class*="util"] > span {font-size:14px; line-height:20px; color:#020219; background-color:#fff; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; box-sizing:border-box;} [class*="inp_type"][class*="util"] > span i {color:#adb1b6; display:none; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} [class*="inp_type"][class*="util"] > span u {text-decoration:none;} [class*="inp_type"][class*="util"] > span u:before {content:""; width:1px; height:13px; background-color:#dadada; vertical-align:middle; display:inline-block;} [class*="inp_type"][class*="util"] > span u:empty, [class*="inp_type"][class*="util"] > span em:empty {display:none;} [class*="inp_type"][class*="util"] > span em:empty + u:empty + i {display:block;} [class*="inp_type"][class*="util"] > strong {position:relative; margin-right:11px; font-size:14px;} [class*="inp_type"][class*="util"] > strong, [class*="inp_type"][class*="util"] > strong + span {display:inline-block; vertical-align:middle;} [class*="inp_type"][class*="util"] > strong + span {width:calc(50% - 72px); margin-right:0;} [class*="inp_type"][class*="util"] > strong + span + strong:before {content:''; display:block; position:absolute; top:3px; left:-20px; width:1px; height:13px; background:#ccc;} [class*="inp_type"][class*="util"] > strong + span + strong + span {width:calc(50% - 82px);} [class*="inp_type"] > a:not([class]), [class*="inp_type"] > button:not([class]) {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; z-index:1; cursor:pointer;} [class*="inp_type"].util1:before {background-position:-160px -40px;} [class*="inp_type"].util2:before {background-position:-560px -40px;} [class*="inp_type"].util3:before {right:11px; background-position:-440px -40px;} [class*="inp_type"].util4:before, [class*="inp_type"].util4:after {display:none !important;} [class*="inp_type"].util1 > span {margin-right:28px;} [class*="inp_type"].util1 > span u:before {margin:0 4px;} [class*="inp_type"].util2 > span u:before {margin:0 7px 0 8px;} [class*="inp_type"].util3 {padding:0;} [class*="inp_type"].util3 > *:nth-last-child(2) {padding-right:30px;} [class*="inp_type"].util3 > input:not([readonly]):not([disabled]) {padding-right:40px;} [class*="inp_type"].util3 > input:not([readonly]):not([disabled]) + button {width:30px; left:auto;} [class*="inp_type"].util4 > span em:nth-last-child(2), [class*="inp_type"].util4 > span U {font-weight:700;} [class*="inp_type"].util4 > span U:before {content:'>';display:inline-block;margin:-2px 5px 0;width:auto;height:auto;background:none;font-weight:400;} [class*="inp_type"][class*="util"] + [class*="select_type"], [class*="select_type"] + [class*="select_type"] {margin-left:4px;} .inp_type1[class*="util"] {height:34px;} .inp_type2[class*="util"] {height:40px;} .inp_type3[class*="util"] {height:48px;} .inp_type1[class*="util"]:before, .inp_type2[class*="util"]:before {right:11px;} .inp_type3[class*="util"]:before {right:14px;} .inp_type2[class*="util"] > span {line-height:26px;} .inp_type3[class*="util"] > span {margin-right:44px; line-height:35px;} .inp_type3[class*="util"]:after {content:""; display:block; position:absolute; top:50%; right:5px; width:34px; height:34px; margin:-18px 0; border-radius:3px; border:1px solid #24aae1; background-color:#24aae1;} .inp_type3[class*="util"]:not(:disabled):not(.disabled):hover:after {border-color:#0073a2; background-color:#0073a2;} .inp_type3.util1:before {margin-top:-10px;right:13px;width:20px;height:20px;background-position:-280px -40px;} /*-------------------------------------------------------------------------------- # INPUT :입력폼 그룹 --------------------------------------------------------------------------------- */ .inp_area {display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; align-items:center; vertical-align:middle;} .inp_area > [class*="inp_"], .inp_area > [class*="select_"], .inp_area > [class*="search_"], .inp_area > dd, .inp_area > .file_box, .inp_area > .txt3 {display:block; -ms-flex:1 1 auto; flex:1; margin:0 4px !important; width:auto;} .inp_area > [class*="w"] {-ms-flex:none; flex:none;} .inp_area > *:first-child {margin-left:0 !important;} .inp_area > *:last-child {margin-right:0 !important;} /* INP_AREA :텍스트 */ .inp_area > [class*="txt"], .inp_area > dt {font-size:14px;} .inp_area > [class*="txt"] + [class*="txt"] {margin-left:20px;} .inp_area + .txt2 {vertical-align:middle; margin-left:14px !important;} /* INP_AREA :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .inp_area {display:inline-table; border-spacing:8px; border-collapse:separate; margin:-8px 0 -8px -8px; width:332px; vertical-align:middle;} .inp_area > [class*="select_type"], .inp_area > [class*="inp_type"], .inp_area > .file_box, .inp_area > .search_type1, .inp_area > [class*="txt"], .inp_area > [class*="choice_type"], .inp_area > dt, .inp_area > dd {display:table-cell !important; width:auto !important; white-space:nowrap;} .inp_area > [class*="inp_type"][class*="util"]:before {top:6px; margin:0;} .inp_area > [class*="choice_type"] em:before {top:8px; margin:0;} .inp_area > [class*="txt"] {text-align:center;} .inp_area > [class*="txt"] + [class*="txt"] {margin-left:0;} .inp_area > .txt, .inp_area > .txt3, .inp_area > dt {line-height:34px; vertical-align:middle;} .inp_area.w1 {width:calc(100% + 12px) !important;} } /*-------------------------------------------------------------------------------- # SELECT :유형 공통 --------------------------------------------------------------------------------- */ [class*="select_type"] {display:inline-block; position:relative; background:#fff; border:1px solid #adb1b6; border-radius:3px; font-size:14px; text-align:left; vertical-align:middle; box-sizing:border-box;} [class*="select_type"] a {display:block; padding:6px 11px; line-height:1.45;} /* SELECT :선택문구 */ [class*="select_type"] .selected {overflow:hidden; position:relative; text-overflow:ellipsis; white-space:nowrap; font-weight:700; line-height:1.45;} [class*="select_type"] .selected.info {font-weight:400;} [class*="select_type"] a.selected {padding-right:25px;} [class*="select_type"] a.selected:after {content:""; position:absolute; right:11px; top:50%; width:12px; height:6px; margin-top:-3px; background-image:url("../img/common/icon_set2.png"); background-position:-280px -20px;} /* SELECT :목록 */ [class*="select_type"] .list {overflow-x:hidden; overflow-y:auto; display:none; position:absolute; left:-1px; right:-1px; top:100%; max-height:264px; padding:0 12px; margin-top:4px; border:1px solid #24aae1; border-radius:3px; background-color:#fff; box-sizing:border-box;} [class*="select_type"] .list li {border-bottom:1px solid #d3eef9;} [class*="select_type"] .list li:last-child {border-bottom:0;} [class*="select_type"] .list li a {padding-left:0; padding-right:0;} [class*="select_type"] .list li:hover, [class*="select_type"] .list li.on a, [class*="select_type"] .list li input:checked + em {font-weight:700; color:#2096ce;} [class*="select_type"] .list li [data-air-logo] {background-size:25px auto; background-position:4px 2px; padding-left:35px;} [class*="select_type"] .list li.info {position:absolute; top:-999px; visibility:hidden;} /* SELECT :목록 :전체 선택 */ [class*="select_type"] .list .choice_type2 {margin:5px 0 4px;} [class*="select_type"] .list > .choice_type2 + ul {margin:7px -12px 0; padding:5px 12px; border-top:1px solid #dee0e2;} [class*="select_type"] .list > button {width:124px; font-weight:700; font-size:13px; color:#fff; letter-spacing:-0.05em; border-color:#24aae1 !important; background-color:#24aae1 !important;} /* SELECT :클릭이벤트 */ [class*="select_type"].on {border-color:#24aae1;} [class*="select_type"].on .selected:after {background-position:-300px 0;} [class*="select_type"].on .selected:not(.info) {font-weight:700;} [class*="select_type"].on .list {display:block; z-index:10;} [class*="select_type"].on .list strong {padding:6px 12px; margin:0 -12px; border:solid #ddd; border-width:1px 0; display:block;} /* SELECT :비활성화 */ [class*="select_type"].disabled {opacity:1; border-color:#dee0e2; color:#adb1b6;} [class*="select_type"].disabled .selected:after {background-position:-200px -20px;} /* SELECT :H40 */ .select_type2 a {padding-top:9px; padding-bottom:9px;} .select_type2 .list {max-height:318px;} /* SELECT :H48 */ .select_type3 a {padding-top:14px; padding-bottom:13px;} .select_type3 .list {max-height:376px;} /* SELECT :H32 */ .select_type5 {width:auto !important; border:0;} .select_type5 a, .select_type5 .selected {display:inline-block; padding-top:0; padding-bottom:0;} .select_type5 a.selected {padding-right:30px;} .select_type5 .selected {font-family:'Spoqa Han Sans'; font-weight:700; font-size:16px;} .select_type5 .selected:after {margin-top:-1px;} .select_type5 .list {margin-top:-5px; max-height:373px;} .select_type5 .list input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0;} .select_type5 .list label {padding:0; font-size:13px; line-height:30px; display:block;} /*-------------------------------------------------------------------------------- # SELECT :출발지 도착지 선택 --------------------------------------------------------------------------------- */ .select_box {position:relative; width:322px; font-size:0; vertical-align:middle; display:inline-block;} .select_box:before, .select_box:after {content:''; display:block; position:absolute; z-index:2; top:50%; left:50%;} .select_box:after {margin:-2px -7px; width:15px; height:4px; background:url("../img/common/icon_set2.png") no-repeat 0 -200px;} .select_box:before {margin:-14px; width:24px; height:24px; background:#89939f; border:2px solid #89939f; border-radius:50%; box-shadow:0 0 0 2px #fff;} .select_box a u {text-decoration:none;} .select_box [class*="inp_type"], .select_box [class*="select_type"] {margin:0 4px; width:48.5%; width:-webkit-calc(50% - 4px); width:-moz-calc(50% - 4px); width:calc(50% - 4px);} .select_box [class*="inp_type"]:first-child, .select_box [class*="select_type"]:first-child {margin-left:0;} .select_box [class*="inp_type"]:last-child, .select_box [class*="select_type"]:last-child {margin-right:0;} /* SELECT_BOX :입력폼 */ .select_box [class*="inp_type"].auto {padding-left:0;} .select_box [class*="inp_type"].auto:before {display:none;} .select_box [class*="inp_type"].auto input {padding:6px 10px; text-align:center; font-size:18px; font-weight:700; text-align:center;} .select_box [class*="inp_type"].auto .word {max-height:272px;} .select_box [class*="inp_type"].auto:last-child .area_city {left:calc(-100% - 11px);} .select_box.round [class*="inp_type"].auto input:valid {padding:6px 35px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block;} /* SELECT_BOX :선택박스 */ .select_box [class*="select_type"] {font-size:15px; text-align:center;} .select_box [class*="select_type"] a {padding-top:8px; padding-bottom:9px;} .select_box [class*="select_type"] a u {display:none;} .select_box [class*="select_type"] .selected {padding:10px 11px;/*padding:10px 11px 11px;*/ font-size:18px; font-weight:700;} .select_box [class*="select_type"] .selected:after {display:none;} .select_box [class*="select_type"] .selected em, .select_box [class*="select_type"] .selected u {display:inline-block; vertical-align:bottom;} .select_box [class*="select_type"] .selected em {overflow:hidden; max-width:68%; text-overflow:ellipsis; white-space:nowrap;} .select_box [class*="select_type"] .selected u {margin-left:2px; font-weight:400; font-size:16px;} .select_box [class*="select_type"] .list {padding:0; max-height:312px; border-radius:0; border-width:2px;} .select_box [class*="select_type"] .list li {border-color:#e0e2e4;} /* SELECT_BOX :왕복 */ .select_box.round:after {margin:-5px -7px; height:10px; background-position:-20px -200px;} /*-------------------------------------------------------------------------------- # SELECT : 국내항공 > 항공사 전체 --------------------------------------------------------------------------------- */ /* 김포 제주 */ .form_search1.t2:not(.on) .uword[data-selcon] > .select_box, .form_search1.t2:not(.on) .uword[data-selcon] > .select_box {width:270px !important;} /* 항공사 전체 */ .form_search1.t2 .uword > .select_box + [class*="inp_type"].util1 {width:220px !important;} .form_search1.t2:not(.on) .uword[data-selcon] > .select_type3 {max-width:170px; margin-right:4px;} .form_search1.t2:not(.on) .uword[data-selcon] > .select_type3 .selected {font-weight:400;} .form_search1.t2:not(.on) .uword[data-selcon] > .select_type3 .list > .choice_type2 + ul {border-width:0; margin-top:0; padding-top:0;} .form_search1.t2 [class*="select_type"] .list > button {width:142px;} /* 서브메인용(메인X) */ .d_flight .headarea .form_search1 {padding:2px 0 10px !important;} .d_flight .headarea .form_search1.t2:not(.on) .uword[data-selcon] > .select_type3 {border-color:#fff;} .d_flight .headarea .form_search1.t2:not(.on) .uword[data-selcon] > .select_type3:before {background-color:#166aa5; border-color:#166aa5;} /*-------------------------------------------------------------------------------- # TEXTAREA ---------------------------------------------------------------------------------*/ [class*="text_type"] {width:100%; padding:10px 14px; border:1px solid; border-radius:3px; box-sizing:border-box; overflow-x:hidden; overflow-y:auto; resize:none;} .text_type1 {height:229px; font-size:14px; line-height:23px; color:#020219; border-color:#adb1b6;} /*-------------------------------------------------------------------------------- # 선택박스 ---------------------------------------------------------------------------------*/ /* 선택박스 :유형 공통 */ label {position:relative; vertical-align:middle; display:inline-block;} input[type="radio"], input[type="checkbox"] {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3;} ul[class*="choice_type"] li, ul[class*="choice_type"] li a {vertical-align:middle; display:inline-block;} label[class*="choice_type"] {padding-left:24px;} /*label[class*="choice_type"] input:checked + em {font-weight:700; }*/ label[class*="choice_type"] em {padding:1px 0; font-size:14px; /*line-height:18px; */ color:#020219; vertical-align:top; display:inline-block; font-weight:400; word-break:break-all; word-wrap:break-word; -ms-word-break:break-all;} label[class*="choice_type"] em:before {content:""; position:absolute; left:0; top:50%; width:20px; height:20px; margin-top:-10px; border:1px solid; background-color:#fff; box-sizing:border-box; transition:opacity 0.3s ease; -webkit-transition:opacity 0.3s ease;} label[class*="choice_type"] em:after {content:""; position:absolute; transition:all 0.3s ease; -webkit-transition:all 0.3s ease;} label[class*="choice_type"] input:disabled {opacity:0; cursor:default;} label[class*="choice_type"]:not(.disabled) input:disabled ~ em {color:#adb1b6;} label[class*="choice_type"]:not(.disabled) input:disabled ~ em:before, label[class*="choice_type"]:not(.disabled) input:disabled ~ em:after {opacity:0.3;} label[class*="choice_type"] .icon_com3 em {width:0; overflow:hidden; line-height:0;} label[class*="choice_type"] .icon_com3 em:before {left:-24px;} label[class*="choice_type"] .icon_com3 em:after {left:-20px;} label[class*="choice_type"].t1 {padding-left:20px;} label[class*="choice_type"].t1 em{overflow:hidden; padding:0 0 0 1px; width:0; height:1px; white-space:nowrap;} label[class*="choice_type"].t2 {margin-top:8px;} label[class*="choice_type"].t2 em {font-size:13px; letter-spacing:-0.05em;} label[class*="choice_type"].t2 em:before {top:1px; margin:0;} label[class*="choice_type"].t2 em:after {top:5px; margin:0;} label[class*="choice_type"].t3 {display:block; margin:7px 0 !important;} label[class*="choice_type"].t3:first-child {margin-top:0px !important;} label[class*="choice_type"].t3:last-child {margin-bottom:0px !important;} /* CHOICE_TYPE :RADIO */ label.choice_type1 em:before {content:''; display:block; top:50%; margin:-9px 0; width:18px; height:18px; border:4px solid #fff; background:#dee0e2; box-shadow:0 0 0 1px #bbbec2; border-radius:50%;} label.choice_type1 input:checked ~ em:before {background:#24aae1;} label.choice_type1 + .choice_type1 {margin-left:10px;} /* CHOICE_TYPE :CHECK */ label.choice_type2 em:before {border-color:#adb1b6; border-radius:3px; overflow:hidden;} label.choice_type2 em:after {left:4px; top:50%; width:10px; height:6px; margin-top:-6px; border:solid #dee0e2; border-width:0 0 3px 3px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} label.choice_type2 em + .txt_type5 {margin:0;} label.choice_type2 input:checked ~ em:after, label.choice_type2 input:checked ~ [class*="icon_com"] em:after {border-color:#24aae1;} label.choice_type2 input:checked + em {font-weight:700;} label.choice_type2 + .choice_type2 {margin-left:10px;} /* CHOICE_TYPE :버튼형 */ label.choice_type3 {padding-left:0;} .choice_type3 em, .choice_type3 a {display:inline-block; padding:0 12px !important; font-size:14px; line-height:1.8; border-radius:30px; transition:all 0.2s ease;} .choice_type3 input:checked + em, .choice_type3 .on a {font-weight:700; color:#fff; background-color:#24aae1;} .choice_type3 em:before, .choice_type3 em:after {display:none;} .choice_type3 a {font-size:14px; color:#020219;} .choice_type3[data-tooltip="info"] > em {padding-right:34px !important; font-size:14px; line-height:1.8;} .choice_type3[data-tooltip="info"] > em:after {top:50%; right:12px; left:auto; margin-top:-8px;transition:none;} .choice_type3[data-tooltip="info"] > input:checked + em:after {background-position-x:0;} .choice_type3[data-tooltip="info"] .tooltip_type {min-width:200px;} .choice_type3.t1 {padding:13px 50px 18px 50px; background:#fff; border-radius:0 0 6px 6px; text-align:center;} .choice_type3.t1:after {content:''; display:block; clear:both;} .choice_type3.t1 > li {float:left; margin-top:5px; width:14%;} .tab_type.t3 + .choice_type3.t1 {margin-top:-20px;} /* CHOICE_TYPE :비자선택 */ .choice_type4:not(table) {overflow:hidden; position:relative; display:flex; flex-wrap:wrap; border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6;} .choice_type4 label {overflow:hidden; display:block; position:relative; z-index:2; flex:1; margin:0 -2px -1px 0; min-width:182px; border-right:1px solid #dee0e2; border-bottom:1px solid #dee0e2;} .choice_type4 label:before {content:''; display:inline-block; width:55px; height:65px; vertical-align:middle;} .choice_type4 label > input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3;} .choice_type4 label > em {display:inline-block; vertical-align:middle; width:calc(100% - 60px); font-size:14px; color:#0292ce;} .choice_type4 label > em > * {display:block; color:#020219;} .choice_type4 label > em:before {content:''; display:block; position:absolute; top:50%; left:30px; margin:-9px 0; width:18px; height:18px; border:4px solid #fff; background:#dee0e2; box-shadow:0 0 0 1px #bbbec2; border-radius:50%; box-sizing:border-box;} .choice_type4 label > em:not(.txt_c2):first-line {color:#020219;} .choice_type4 label > input:checked + em:before {background:#24aae1;} .choice_type4 label > input:checked + em:after {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-2; background:#eef8fd;} .choice_type4 label + label > input:checked + em:after {left:2px;} .choice_type4 label:nth-child(5) ~ label {flex:0; min-width:calc(20% + 1px);} .choice_type4 label:nth-child(5) ~ label > input:checked + em:after {top:1px;} .choice_type4 label:nth-child(6n) > input:checked + em:after {left:0;} table.choice_type4 label > input:checked + em:after {left:2px; right:2px;} /* CHOICE_TYPE4 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .choice_type4:not(table) {display:block;} .choice_type4 label {float:left; width:20%;} } /* CHOICE_TYPE :개인정보 유효기간 선택 */ .choice_type5:not(table) {position:relative; width:100%; height:48px; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; overflow:hidden;} .choice_type5 label {position:relative; text-align:center; border:solid #cdd0d3; border-width:1px 1px 1px 0; background-color:#eff2f6; vertical-align:middle; z-index:1; cursor:pointer; flex:1; justify-content:center;} .choice_type5 label em {width:100%; height:100%; font-weight:700; font-size:15px; color:#5b646e; /* display:block; */ cursor:pointer;} .choice_type5 label em:before {content:""; width:1px; height:100%; margin-right:-1px; vertical-align:middle; display:inline-block;} .choice_type5 label:first-child {border-width:1px; border-radius:3px 0 0 3px;} .choice_type5 label:last-child {border-radius:0 3px 3px 0;} .choice_type5 label input {position:absolute; left:0; bottom:0; width:100%; height:100%; opacity:0; cursor:pointer;} .choice_type5 label em i {vertical-align:middle; display:inline-block;} .choice_type5 label input:checked + em {color:#2096ce;} .choice_type5 label input:checked + em:after {content:""; position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px; border:1px solid #24aae1; background-color:#fff; z-index:-1;} .choice_type5 label:first-child em:after {border-radius:3px 0 0 3px;} .choice_type5 label:last-child em:after {border-radius:0 3px 3px 0;} /* CHOICE_TYPE5 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .choice_type5:not(table) {display:table; table-layout:fixed;} .choice_type5 label {display:table-cell;} .choice_type5 label input:checked + em:after {display:none;} } /* CHOICE_TYPE :버튼형태 */ label.choice_type6 {min-width:107px; height:40px; padding-left:0; font-weight:700; font-size:14px; text-align:center; border:1px solid #ced0d3; border-radius:3px; box-sizing:border-box; z-index:1;} .choice_type6:before {content:""; width:0.01%; height:38px; margin-right:-5px; vertical-align:middle; display:inline-block;} label.choice_type6 em {vertical-align:middle; font-weight:700;} .choice_type6 em:before {display:none;} .choice_type6 input:checked + em {color:#2096ce;} .choice_type6 input:checked + em:after {left:-1px; right:-1px; top:-1px; bottom:-1px; border:1px solid #24aae1; border-radius:3px; background-color:#eef8fd; z-index:-1;} label.choice_type6.t1 {min-width:56px; margin-left:4px; padding-left:0;} label.choice_type6.t1:nth-of-type(8n + 1) {margin-left:0;} label.choice_type6.t1:nth-of-type(8) ~ label {margin-top:7px;} label.choice_type6.t1 em {width:auto; height:auto; padding:0;} /* CHOICE_TYPE :별점이미지형 */ .choice_type7 {position:relative;} .choice_type7 > span {display:inline-block; margin-left:5px; line-height:23px; font-size:13px; color:#5b646e;} .choice_type7 label {position:static; float:left; margin-right:4px; background:url("../img/common/icon_set1.png") no-repeat -240px -280px;} .choice_type7 label input {position:relative; width:24px; height:23px;} .choice_type7 label em {display:none; position:absolute; left:0; top:2px; color:#5e5ed7; font-weight:700;} .choice_type7 label input:checked + em {display:block; padding-left:145px; z-index:1;} .choice_type7 label input:checked + em:before, .choice_type7 label input:checked + em:after {content:''; position:absolute; left:0; top:-2px; height:23px;} .choice_type7 label input:checked + em:before {background:url("../img/common/icon_set1.png") no-repeat -240px -320px;} .choice_type7 label input:checked + em:after {left:140px; width:120px; background:#fff; z-index:-1;} .choice_type7 label.n1 input:checked + em:before {width:24px;} .choice_type7 label.n2 input:checked + em:before {width:56px;} .choice_type7 label.n3 input:checked + em:before {width:84px;} .choice_type7 label.n4 input:checked + em:before {width:112px;} .choice_type7 label.n5 input:checked + em:before {width:140px;} /* CHOICE_TYPE :리스트 타입 선택 */ .choice_type8 {display:inline-block; position:relative; padding-left:0 !important; width:28px; height:28px;} .choice_type8 > em {overflow:hidden; display:block; padding-left:100% !important; width:0 !important; height:100%; border:1px solid #dee0e2; white-space:nowrap; box-sizing:border-box; color:#020219;} .choice_type8 > em:before {left:50% !important; top:50% !important; margin:-6px !important; width:14px !important; height:12px !important; border:0 !important; background-color:transparent !important; background-image:linear-gradient(#dee0e2,#dee0e2),linear-gradient(#dee0e2,#dee0e2),linear-gradient(#dee0e2,#dee0e2),linear-gradient(#dee0e2,#dee0e2); background-repeat:no-repeat;} .choice_type8 > input:checked + em {border-color:#5e5ed7; background:#5e5ed7; color:#fff;} .choice_type8 > input:checked + em:before {background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);} .choice_type8.ico1 > em:before {background-position:1px 0, 8px 0, 1px 7px, 8px 7px; background-size:5px 5px;} .choice_type8.ico2 > em:before {background-position:0 0, 0 5px, 0 10px; background-size:14px 2px;} .choice_type8 + .choice_type8 {margin-left:-1px;} /* CHOICE_TYPE7 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .choice_type8 {width:auto;} .choice_type8 > em {padding:0 5px !important; width:auto !important; line-height:24px;} } /* 추후 개발 수정 시 아래 내용 삭제 */ .choice_type9 {overflow:hidden; display:block !important; width:100%; border-radius:6px; box-shadow:0 0 20px 0 rgba(0,0,0,0.08)} .choice_type9 .tab_type {margin-bottom:0;} .choice_type9 .tab_type li {border-color:#7c838b; background-color:#7c838b;} .choice_type9 .tab_type li:after {height:24px; margin-top:-12px;} .choice_type9 .tab_type li:last-child, .choice_type9 .tab_type li:first-child {border-radius:0;} .choice_type9 .tab_type li a {color:#fff;} .choice_type9 .tab_type li a:after {border-color:#fff;} .choice_type9 .tab_type li.on a {color:#08a7ee;} .choice_type9 .city {padding:13px 50px 18px 50px; text-align:center; border-radius:0 0 6px 6px; background-color:#fff;} .choice_type9 .city:after {clear:both; content:""; display:block;} .choice_type9 .city li {/*float:left;*/ width:14%; margin-top:5px; vertical-align:top; display:inline-block;} /* // */ /* CHOICE_TYPE :수령수단 */ .choice_type10 {width:100%; height:96px; text-align:center; border:1px solid #dee0e2; border-radius:3px; display:table; table-layout:fixed; box-sizing:border-box;} .choice_type10 li {position:relative; height:100%; vertical-align:middle; display:table-cell !important;} .choice_type10 li + li {border-left:1px solid #dee0e2;} .choice_type10 [class*="choice_type"] {position:static; padding-left:0; cursor:pointer;} .choice_type10 [class*="choice_type"] em {font-size:13px; line-height:17px; color:#5b646e;} .choice_type10 [class*="choice_type"] em:before {top:12px; left:12px; margin:0;} .choice_type10 [class*="choice_type"] em:after {content:''; display:block; position:absolute; top:-1px; left:-1px; z-index:2; width:calc(100% - 2px); height:92px; border:2px solid transparent;} .choice_type10 [class*="choice_type"] input:checked ~ em:before {background:#dee0e2;} .choice_type10 li.on [class*="choice_type"] em {font-weight:700; color:#020219;} .choice_type10 li.on [class*="choice_type"] em:before {background:#24aae1;} .choice_type10 li.on [class*="choice_type"] em:after {border:2px solid #24aae1;} .choice_type10 [class*="choice_type"] input::-ms-check {display:none;} .choice_type10 li:first-child [class*="choice_type"] em:after {border-radius:3px 0 0 3px} .choice_type10 li:last-child [class*="choice_type"] em:after {border-radius:0 3px 3px 0} p.choice_type10 {display:block; width:50%; position:relative;} p.choice_type10:before {content:''; display:inline-block; width:0.01%; height:100%; vertical-align:middle;} .choice_type10 ~ [data-tab] {margin-top:0;} /* CHOICE_TYPE :SWITCH BUTTON */ .choice_type11 {position:relative; min-width:63px; height:20px;} .choice_type11 > label {position:absolute; left:0; top:0; right:0; text-align:left;} .choice_type11 > label > input {background:#fff; z-index:4;} .choice_type11 > label > em {display:inline-block; opacity:0;} .choice_type11 > label > em:before {content:''; display:inline-block; width:34px; height:20px; margin-right:5px; border-radius:10px; vertical-align:top;} .choice_type11 > label > em:after {content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff;} .choice_type11 > label > input:checked {z-index:1;} .choice_type11 > label > input:checked + em {opacity:1;} .choice_type11 > label:nth-child(1) > input:checked + em:before {background:#2096ce;} .choice_type11 > label:nth-child(2) > input:checked + em:before {background:#cdd0d3;} .choice_type11 > label:nth-child(1) > input:checked + em:after {left:16px; top:2px;} .choice_type11 > label:nth-child(2) > input:checked + em:after {left:2px; top:2px;} /* CHOICE_TYPE : GENDER CHOICE */ .choice_type12 {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;} .choice_type12 label {position:relative; text-align:center; display:block;} .choice_type12 label em {width:80px; height:35px; padding:0; line-height:35px; border:1px solid #adb1b6; border-left:0; display:block; -webkit-transition:all 0.3s ease; transition:all 0.3s ease;} .choice_type12 label:first-of-type em {border-radius:3px 0 0 3px;} .choice_type12 label:last-of-type em {border-radius:0 3px 3px 0;} .choice_type12 label input {position:absolute; left:0; top:0; opacity:0;} .choice_type12 label input:checked + em {color:#fff; border-color:#24aae1; background-color:#24aae1;} /* CHOICE_TYPE :결제수단 */ .payment_choice .area1 {overflow:hidden;margin:-4px;} .payment_choice .area1 [class*="choice_type"] {float:left;margin:4px;padding:0;width:calc((100% / 3) - 8.5px);box-sizing:border-box;text-align:center;} .payment_choice .area1 [class*="choice_type"] em {display:block;border:1px solid #dee0e2;border-radius:3px;font-size:15px;font-weight:700;line-height:38px;color:#8995a2;} .payment_choice .area1 [class*="choice_type"] em:before, .payment_choice .area1 [class*="choice_type"] em:after {display:none;} .payment_choice .area1 [class*="choice_type"] input:checked + em {border-color:#24aae1; color:#020219;} .payment_choice .area1 [class*="choice_type"][class*="pay"] em:before {content:""; position:relative; top:auto; left:auto; margin:-2px 3px 0 0; width:auto; height:20px; background-color:transparent; background-image:url("../img/common/icon_set3.png"); vertical-align:middle; box-shadow:0 0 0 0; border-radius:0; border:0; display:inline-block;} .payment_choice .area1 [class*="choice_type"].pay1 em:before {width:58px; background-position:0 -200px;} .payment_choice .area1 [class*="choice_type"].pay2 em:before {width:50px; background-position:-80px -200px;} .payment_choice .area1 [class*="choice_type"].pay3 em:before {width:52px; background-position:-160px -200px;} /* Npay */ .payment_choice .area1 [class*="choice_type"].pay4 em:before {width:68px; background-position:-230px -200px;} /* KBpay */ /* toss */ .payment_choice .area1 [class*="choice_type"].pay5 em{font-size:0; } .payment_choice .area1 [class*="choice_type"].pay5 em:before {width:67px; background-position:-313px -200px;} .payment_choice .area1 .payment_toss{position: relative; width: 235px; border:1.7px solid #005CFA; color: #222; border-radius: 3rem; padding: 5px 15px 5px 80px; margin-bottom:0.05rem; background:url('../img/common/icon_set3.png') no-repeat -307px -194px; z-index:2;} /* toss 말풍선 */ .payment_choice .area1 .payment_toss:before {content: ""; position: absolute; bottom: -0.8rem; left: 13.7rem; border-top: 0.8rem solid #fff; border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-bottom: 0 solid transparent; z-index:1;} .payment_choice .area1 .payment_toss:after {content: ""; position: absolute; bottom: -1rem; left: 13.6rem; border-top: 0.9rem solid #005CFA; border-left: 0.9rem solid transparent; border-right: 0.9rem solid transparent; border-bottom: 0 solid transparent;} .payment_choice .area1 .payment_toss strong{color:#005CFA; font-weight:900;} .toss_notice{margin-top:20px;} .toss_notice > strong{font-size:14px;} .payment_choice .area2 .box {margin:18px 0 -1px;} .payment_choice .area2 figure {overflow:hidden;position:relative;height:68px;margin:20px 0 0;} .payment_choice .area2 figure img {position:absolute;top:0;left:0;} .payment_choice .area2 figure figcaption {overflow:hidden;position:absolute;top:0;padding-left:1px;width:0;height:0;white-space:nowrap;} /*-------------------------------------------------------------------------------- # DRAG ---------------------------------------------------------------------------------*/ .drag_slider1 {position:relative; width:calc(100% - 16px); height:16px; margin:0 8px; display:block; cursor:pointer;} .drag_slider1:before, .drag_slider1:after, .drag_slider1 .bar {content:""; position:absolute; left:0; top:0; right:0; height:2px; margin-top:-1px; background-color:#bdc1c5;} .drag_slider1:after {left:-8px; right:-8px;} .drag_slider1 button {position:absolute; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background-color:#24aae1; z-index:2; cursor:pointer;} .drag_slider1 button em {position:absolute; left:50%; top:100%; width:200px; margin:3px 0 0 -100px; text-align:center; display:none;} .drag_slider1 .btn_min {left:0;} .drag_slider1 .btn_max {left:100%;} .drag_slider1 .bar {background-color:#24aae1; cursor:pointer; z-index:1;} .drag_slider1 .bar:before, .drag_slider1 .bar:after {content:""; position:absolute; top:0; width:8px; height:2px; background-color:#24aae1;} .drag_slider1 .bar:before {left:-8px;} .drag_slider1 .bar:after {right:-8px;} .drag_slider1 .min_value, .drag_slider1 .max_value {font-size:13px;} .drag_slider1 .min_value {position:absolute; left:-8px; top:0; margin-top:8px;} .drag_slider1 .max_value {position:absolute; right:-8px; top:0; margin-top:8px;} .drag_slider1.disabled {margin-bottom:-15px; opacity:1;} .drag_slider1.disabled:before, .drag_slider1.disabled:after, .drag_slider1.disabled .bar, .drag_slider1.disabled button {background-color:#adb1b6;} .drag_slider1.disabled .min_value, .drag_slider1.disabled .max_value {display:none;} /*-------------------------------------------------------------------------------- # FORMCONT :카운트 --------------------------------------------------------------------------------- */ .form_count {position:relative;} .form_count + .form_count {margin-top:16px;} .form_count dl {padding:19px 0;} .form_count > dl > dt {position:relative; float:left; clear:left; width:62%; font-weight:700; font-size:18px; line-height:32px; box-sizing:border-box;} .form_count > dl > dt i {margin-left:6px; font-weight:400; font-size:14px; color:#5b646e;} .form_count > dl > dd {text-align:right;} .form_count > dl > dt ~ dt, .form_count > dl > dd ~ dd {margin-top:20px;} .form_count > dl dl {margin:20px -10px -19px 0; padding:17px 8px 20px; font-size:0; border-radius:0 0 5px 0; background-color:#f0f5fb; text-align:center;} .form_count > dl dl dt {position:relative; height:25px; font-size:15px; line-height:20px; box-sizing:border-box;} .form_count > dl dl dd {box-sizing:border-box;} .form_count > dl dl dt, .form_count > dl dl dd {width:calc(33% - 4px);} .form_count > dl dl dd ~ * {margin-left:33%;} .form_count > dl dl dd ~ dd ~ * {margin-left:66%;} .form_count > dl dl dd + dt {margin-top:-59px} .form_count > dl dl dt:nth-last-child(4):first-child, .form_count > dl dl dt:nth-last-child(4):first-child ~ * {width:calc(50% - 2px);} .form_count > dl dl dt:nth-last-child(4):first-child + dd ~ * {margin-left:calc(50% + 2px);} .form_count > dl dl dt:nth-last-child(2):first-child, .form_count > dl dl dt:nth-last-child(2):first-child + dd {width:100%;} /* FORMCOUNT :텍스트 */ .form_count .tit {display:inline-block; font-size:16px; vertical-align:middle;} .form_count strong:not(.tit) {display:inline-block; width:110px; font-family:"Spoqa Han Sans"; font-size:19px; text-align:right; vertical-align:middle;} .form_count strong:not(.tit) + span {display:inline-block; margin-bottom:-2px; font-size:16px; font-weight:700; vertical-align:middle;} /* FORMCOUNT :입력폼 */ .form_count dd em, .form_count .btn_img2 + input {width:44px; height:32px; padding:0; border:0; font-family:"Spoqa Han Sans"; font-weight:400; font-size:26px; line-height:32px; text-align:center; vertical-align:middle; display:inline-block;} .form_count [class*="select_type"], .form_count [class*="inp_type"]{width:100%;} .form_count > [class*="select_type"], .form_count > [class*="select_type"] + [class*="inp_type"] {margin:8px 0 0 !important;} .form_count > [class*="inp_type"] > input {font-size:14px; padding:6px 30px 6px 10px; width:100%; text-align:left; font-weight:400;} .form_count .select_type1 {border-color:#adb1b6 !important;} .form_count .select_type1 .list li a {white-space:nowrap;} /* FORMCOUNT :삭제버튼 */ .form_count button:not([class]){position:absolute; right:3px; top:0; width:20px; height:20px; line-height:999px; overflow:hidden;} .form_count button[class^="btn_"]:not(.btn_img2) {top:5px; right:0;} .form_count button:not([class]):before, .form_count button:not([class]):after {content:""; position:absolute; width:1px; height:14px; left:50%; top:50%; margin-top:-7px; background-color:#adb1b6;} .form_count button:not([class]):before {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} .form_count button:not([class]):after {transform:rotate(45deg); -webkit-transform:rotate(45deg);} /* FORMCOUNT :버튼 작은 사이즈 */ .form_count .tit ~ .btn_img2 {padding-left:22px; height:24px;} .form_count .tit ~ .btn_img2:before {top:11px; left:6px; width:11px; height:1px;} .form_count .tit ~ .btn_img2.ico1:after {top:6px; left:11px; width:1px; height:11px;} .form_count .tit ~ .btn_img2 + input {width:31px; font-size:22px;} /* FORMCOUNT :활용 :목록형태 */ .form_count > ul li {position:relative; padding:11px 5px 11px 15px; border-top:1px solid #dee0e2;} .form_count > ul li .tit {width:calc(100% - 280px); max-height:44px; margin-right:20px; overflow:hidden; display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow:ellipsis;} .form_count > ul li button[class^="btn_"]:not(.btn_img2) {top:50%; right:16px; margin:-9px 0;} /* FORMCOUNT :활용 :내용형태 */ dl.form_count dt, dl.form_count dd {display:inline-block; padding:8px 0; vertical-align:top;} dl.form_count dt {width:40px; padding-top:10px; font-size:13px; color:#8693a0;} dl.form_count dd {position:relative; width:calc(100% - 45px); padding-right:30px; text-align:right; box-sizing:border-box;} dl.form_count dd > .tit {display:block; font-weight:400; text-align:left;} dl.form_count dd > strong:not(.tit), dl.form_count dd > strong:not(.tit) + span {float:left; margin-top:5px; line-height:27px; width:auto; text-align:left;} dl.form_count dd button[class^="btn_"]:not(.btn_img2) {top:12px;} /* FORMCOUNT :라인있음 */ fieldset.form_count:not(.t1) {padding-left:39px; border:1px solid #91d4f0; border-radius:5px;} fieldset.form_count:not(.t1) > legend {position:absolute; left:0; top:0; width:39px; height:100%; font-weight:700; font-size:12px; line-height:18px; color:#fff; text-align:center; border-radius:5px 0 0 5px; background-color:#91d4f0; visibility:visible; z-index:1;} fieldset.form_count:not(.t1) > legend:before {content:""; width:1px; height:100%; margin-right:-4px; vertical-align:middle; display:inline-block;} fieldset.form_count:not(.t1) > legend em {vertical-align:middle; display:inline-block;} fieldset.form_count:not(.t1) > legend b {font-size:19px; display:block;} fieldset.form_count:not(.t1) > dl > dt {width:51%; padding:0 0 0 14px;} fieldset.form_count:not(.t1) > dl > dd {padding-right:10px;} /*-------------------------------------------------------------------------------- # FORMCONT :필터영역 --------------------------------------------------------------------------------- */ .form_filter {position:relative; padding:11px 15px 12px 15px; border:1px solid #adb1b6; background-color:#fff; overflow-y:auto; box-sizing:border-box;} .form_filter > .choice_type2:first-child + ul.type1, .form_filter ul.type1 + ul.type1 {position:relative; margin-top:12px; padding-top:13px;} .form_filter > .choice_type2:first-child + ul.type1:before, .form_filter ul.type1 + ul.type1:before, .form_filter .setting ~ .setting:before {content:""; position:absolute; left:-15px; right:-15px; top:0; height:1px; background-color:#dee0e2;} .form_filter ul.type1 li {font-size:0;} .form_filter ul.type1 li + li {margin-top:9px;} .form_filter ul.type2 {margin-right:-13px;} .form_filter ul.type2 li {margin-right:13px; vertical-align:middle; display:inline-block;} .form_filter .txt_fare {font-size:13px; text-align:right; display:block;} .form_filter .txt_fare + .drag_slider1 {margin-top:22px;} .form_filter .txt_add {font-size:13px; line-height:18px;} .form_filter .txt_add i {margin-top:2px; color:#5b646e; letter-spacing:-0.06em; display:block;} .form_filter .setting {position:relative; font-size:13px; line-height:19px;} .form_filter .setting ~ .setting {margin-top:8px; padding-top:13px;} .form_filter .setting:after {clear:both; content:""; display:block;} .form_filter .setting dt {float:left; font-weight:700;} .form_filter .setting dd {float:right;} .form_filter .setting + .drag_slider1 {margin-top:25px;} .form_filter .setting + .drag_slider1:last-of-type {margin-bottom:-5px;} .form_filter > button {position:absolute; right:16px; top:11px; font-weight:700; font-size:13px; color:#2096ce; letter-spacing:-0.05em; text-decoration:underline; text-underline-position:under;} .form_filter label[class*="choice_type"] em {line-height:18px;} /* FORMFILTER :IE */ @media screen and (min-width:0\0) { .form_filter .txt_fare + .drag_slider1 {margin-top:21px;} } /* 유저 선택 필터 */ .user_filter {opacity:0; overflow:hidden; position:relative; margin:0; padding-top:0; height:0; transition:padding-top 0.3s;} .user_filter:before {content:''; display:block; position:absolute; top:0; left:-100%; right:-100%; bottom:0; border:solid #e5e5e8; border-width:1px 0; background-color:#fafafa;} .user_filter ul {width:990px; margin:0 auto; padding-right:110px;} .user_filter ul li {position:relative; margin:0 4px 5px 0; padding:5px 30px 6px 10px; font-size:13px; line-height:1.2; border:1px solid #dee0e2; border-radius:3px; background-color:#fff; vertical-align:top; display:inline-block;} .user_filter ul li button {position:absolute; right:10px; top:50%; width:0; height:14px; margin-top:-7px; padding-left:14px; border-radius:3px; background:#5b646e url("../img/common/icon_set1.png") no-repeat -520px -240px; overflow:hidden;} .user_filter > .btn_type2 {position:absolute; right:50%; top:50%; margin:-17px -550px 0 0;} .user_filter.open {opacity:1; overflow:visible; padding-top:11px; padding-bottom:6px; margin-bottom:20px; height:auto;} /*-------------------------------------------------------------------------------- # FORMCONT :우편번호 ---------------------------------------------------------------------------------*/ .form_zipcode {position:relative; min-height:330px; margin-top:16px; padding-top:40px;} .form_zipcode > [class*="search_type"] {position:absolute; left:0; top:0; width:100%;} .form_zipcode .result .ex {margin-top:16px; font-size:14px;} .form_zipcode .result .ex dt:before {content:"※";} .form_zipcode .result .ex dd {margin-top:9px;} .form_zipcode .result .ex ul {counter-reset:zip_ex;} .form_zipcode .result .ex li {position:relative; margin-top:8px; padding-left:15px;} .form_zipcode .result .ex li:before {content:""; position:absolute; left:0; top:5px; width:10px; height:10px; border:1px solid #020219; border-radius:50%;} .form_zipcode .result .ex li:after {content:counter(zip_ex); counter-increment:zip_ex; position:absolute; left:0; top:3px; width:12px; font-size:10px; text-align:center;} .form_zipcode .result .ex li em, .form_zipcode .result .ex li span {display:block;} .form_zipcode .result .ex li em {margin-top:2px; color:#2096ce;} .form_zipcode .result .item {margin-top:20px;} .form_zipcode .result .item li {border:1px solid #cdd0d3; border-radius:3px; transition:border 0.3s ease, background-color 0.3s ease;} .form_zipcode .result .item li + li {margin-top:16px;} .form_zipcode .result .item li:hover {border-color:#24aae1; background-color:#eef8fd;} .form_zipcode .result .item a {padding:9px 11px; color:#020219; display:block;} .form_zipcode .result .item a > strong {font-size:16px; color:#393992; display:block;} .form_zipcode .result .item a > strong i {font-weight:400; color:#757d86;} .form_zipcode .result .item a > dl {margin-top:7px; font-size:14px;} .form_zipcode .result .item dd {margin-top:-22px; padding-left:62px; line-height:23px;} .form_zipcode .result .item dt ~ dt {margin-top:11px; padding-top:13px;} .form_zipcode .result .item dd ~ dd {margin-top:-36px; padding-top:13px; border-top:1px solid #dee0e2;} .form_zipcode .result .item dt [class*="icon_txt"] {width:55px; letter-spacing:-0.16em;} .form_zipcode .result .item dt:nth-of-type(2) [class*="icon_txt"]::first-letter {letter-spacing:8px;} .form_zipcode .mes_data_ing {border:0;} .form_zipcode .mes_data_ing strong {font-size:16px;} /*-------------------------------------------------------------------------------- # FORMCONT :주소입력 ---------------------------------------------------------------------------------*/ .form_addr .inp_area, .form_addr .inp_type1 {width:100%; margin:4px 0;} @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .form_addr .inp_area, .form_addr .inp_area {margin:-8px 0 -4px -8px} } /*-------------------------------------------------------------------------------- # FORMETC :도시선택 ---------------------------------------------------------------------------------*/ .area_city {position:absolute; left:-1px; right:-1px; top:100%; min-width:1100px; margin-top:4px; border:2px solid #24aae1; background-color:#fff; box-sizing:border-box; display:none; z-index:10;} .area_city.i_hotel{width:1100px} .area_city ul {margin:0 !important;} .area_city header {margin:0 23px; padding:13px 0 14px; width:auto;/*font-size:16px;*/font-size:17px; line-height:1.2;} /* [2019-11-13] 여행 부킹엔진 > 지역검색의 타이틀 크기로 변경 */ .area_city .box {max-height:1012px; padding:0 23px ; overflow-y:auto; box-sizing:border-box;} .area_city .box:after {content:""; height:23px; display:block;} .area_city .lately {position:relative; padding:10px 0; border-top:1px solid #5b646e;} .area_city .lately h2 {display:inline-block; margin-right:13px; font-size:14px; vertical-align:middle; color:#7c838b;} .area_city .lately ul {display:inline-block; vertical-align:middle;} .area_city .lately ul:after {clear:both; content:""; display:block;} .area_city .lately li {float:left; margin:0 8px 0 0} .area_city .lately li a {padding:0 15px !important; font-size:13px; line-height:28px; color:#020219; text-align:center; border-radius:3px; background-color:#eff2f6; display:inline-block;} .area_city .lately li a u {color:#5b646e; text-decoration:none;} .area_city .lately li a u:before {content:""; width:1px; height:13px; margin:0 5px; background-color:#ccc; vertical-align:middle; display:inline-block;} .area_city .lately > button {position:absolute; right:0; top:10px; margin-right:0;} .area_city > .box > ul {overflow:hidden; border-bottom:1px solid #adb1b6; border-right:1px solid #dee0e2;} .area_city > .box > ul li {float:left; position:relative; width:95px;} .area_city > .box > ul li[data-country='japan'] {width:125px;} .area_city > .box > ul li[data-country='oceania'], .area_city > .box > ul li[data-country='korea'] {width:80px;} .area_city > .box > ul > li:before {content:''; display:block; position:absolute; width:1px; top:0; left:0; bottom:-500%; background:#dee0e2;} .area_city > .box > ul > li > strong {display:block; height:34px; background:#8693a0; line-height:34px; font-size:14px; font-weight:700; color:#fff; text-align:center;} .area_city > .box > ul > li > ul {overflow:hidden; width:100%; padding:5px 0 6px;} .area_city > .box > ul > li a {display:block; padding:5px 5px 5px 5px !important; line-height:1.35; font-size:13px; color:#020219; letter-spacing:-0.05em} .area_city > .box > ul > li a:hover {font-weight:700;} .area_city > .box > ul > li:nth-child(3), .area_city > .box > ul > li:nth-child(7) {width:192px;} .area_city[class*="i_"] > .box > ul > li{width:118px;} .area_city[class*="i_"] > .box > ul li li{width:110px;} .area_city[class*="d_"] > .box > ul li.td_dbLine li{width:calc(50% - 6px); padding:0 3px;} .area_city[class*="i_"] > .box > ul > li.td_dbLine {width:223px;} .area_city[class*="d_"] > .box > ul > li{width:160px;} .area_city[class*="d_"] > .box > ul li li{width:100px;} .area_city[class*="d_"] > .box > ul > li.td_dbLine {width:249px;} .area_city > .box > ul > li:nth-child(6) {margin:220px 0 0 -95px;} .area_city.d_hotel > .box > ul > li:nth-child(6), .area_city.i_hotel > .box > ul > li:nth-child(6){margin:0} .area_city > button {position:absolute; right:23px; top:15px; width:0; height:16px; padding-left:17px; background-image:url("../img/common/icon_set1.png"); background-position:-600px -240px; overflow:hidden;} .area_city.t1 header {border-bottom:1px solid #5b646e;} .area_city.t1 .box:after {height:7px;} .area_city.t1 > .box {margin-top:12px; margin-left:-6px;} .area_city.t1 > .box > ul {display:-webkit-box; display:-ms-flexbox; display:flex; border:0;} .area_city.t1 > .box > ul li {float:none; width:auto;} .area_city.t1 > .box > ul > li {-ms-flex:1; flex:1; margin:0 !important;} .area_city.t1 > .box > ul > li:before {top:8px;bottom:13px;background-color:#eeeff0;} .area_city.t1 > .box > ul > li:first-child:before {display:none;} .area_city.t1 > .box > ul > li a { color:#5b646e;} .area_city.t1 > .box > ul > li a:hover {text-decoration:underline; font-weight:400;} .area_city.t1 > .box > ul > li a.on {color:#2096ce;font-weight:700;} .area_city.t1 > .box > ul > li > a {position:relative; padding-right:7px !important; font-size:14px; color:#020219; box-sizing:border-box;} .area_city.t1 > .box > ul > li > a:after {content:'';display:inline-block; margin:-3px -4px 0 6px; width:4px; height:7px; background:url("../img/common/icon_set2.png") no-repeat -80px -160px;vertical-align:middle;} .area_city.t1 > .box > ul > li > ul {padding-top:0;} .area_city.t1.open {display:block;} /*-------------------------------------------------------------------------------- # FORMETC :인원선택 ---------------------------------------------------------------------------------*/ .parsonnel_setting .btn_wrap1 button[class*="ico"]:only-of-type {width:100%;} .parsonnel_setting > .btn_wrap1 button {width:126px;} .parsonnel_setting .txt {padding:0; margin-top:16px; font-size:13px !important; line-height:1.5; color:#5b646e !important; letter-spacing:-0.05em;} .parsonnel_setting .txt li + li {margin-top:3px;} .parsonnel_setting .txt + .btn_wrap1 {margin-top:17px;} .parsonnel_setting .t1 + .txt {margin-top:10px;} .parsonnel_setting .seat {margin:0 -8px -8px 0; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex-wrap:wrap;} .parsonnel_setting .seat [class*="choice_type"] {-ms-flex:1; flex:1; min-width:166px; margin:0 8px 8px 0 !important;} .parsonnel_setting .seat [class*="choice_type"]:nth-last-child(6), .parsonnel_setting .seat [class*="choice_type"]:nth-last-child(6) ~ [class*="choice_type"] {min-width:107px;} .parsonnel_setting .seat + .btn_wrap1 {padding-top:20px; border-top:1px solid #dee0e2;} /*-------------------------------------------------------------------------------- # SEARCH :기본검색영역 ---------------------------------------------------------------------------------*/ [class*="search_type"] {position:relative; width:300px; padding-right:40px; vertical-align:middle; display:inline-block; box-sizing:border-box;} [class*="search_type"] [class*="inp_type"], [class*="search_type"] [class*="select_type"] {border-radius:3px 0 0 3px; border-right:0;} [class*="search_type"] [class*="select_type"] + [class*="inp_type"] {border-radius:0; border-width:1px 0;} [class*="search_type"] [class*="select_type"] + [class*="inp_type"]:before {content:""; position:absolute; left:0; top:50%; width:1px; height:14px; margin-top:-7px; background-color:#ccc;} [class*="search_type"] > button {position:absolute; right:0; top:0; width:0; height:40px; padding-left:40px; border-radius:0 3px 3px 0; border:1px solid #5b646e; background:#5b646e; overflow:hidden;} [class*="search_type"] > button:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-11px; width:20px; height:20px; background:url("../img/common/icon_set1.png") no-repeat -480px -40px;} [class*="search_type"] > .inp_type1 + button {height:34px;} [class*="search_type"] > .inp_type1 + button:before {margin:-9px; width:18px; height:18px; background-position:-400px -40px;} [class*="search_type"].disabled [class*="select_type"] a {cursor:default;} /* 유형1 */ .search_type1 {font-size:0;} .search_type1 [class*="inp_type"] {margin:0 !important; width:100% !important;} .search_type1 [class*="select_type"] {margin:0 !important; width:40% !important;} .search_type1 [class*="select_type"] + [class*="inp_type"] {width:60% !important;} /* 유형2 */ .search_type2 {width:388px; border:4px solid #24aae1;} .search_type2 [class*="inp_type"] {width:100%; border:0; border-radius:0;} .search_type2 [class*="inp_type"]:before {display:none;} .search_type2 [class*="inp_type"] input {padding-left:10px;} .search_type2 > button {right:-2px; height:38px; border:0; border-radius:0; background-color:transparent;} .search_type2 > button:before {margin:-10px; width:20px; height:20px; background-position:-520px -40px;} /*-------------------------------------------------------------------------------- # SEARCH :부킹엔진 ---------------------------------------------------------------------------------*/ .form_search1 {position:relative; padding:16px; margin:0 auto; width:1100px; border-radius:6px; background-color:#fff; box-shadow:0 5px 30px 0 rgba(0,0,0, 0.1); box-sizing:border-box; z-index:30;} .form_search1 > button {display:none;position:absolute; right:15px; top:13px; width:0; height:16px; padding-left:17px; background-image:url("../img/common/icon_set1.png"); background-position:-600px -240px; overflow:hidden;} .form_search1:after {content:''; display:inline-block; height:83px; vertical-align:middle;} .form_search1 .choice_type3 + .choice_type3 {margin-left:4px;} .form_search1 .choice_type3 + .choice_type2 {margin-left:5px;} .form_search1 [class*="choice_type"] + [data-tooltip="info"]:not([class*="choice_type"]) {margin-top:-1px; margin-left:10px; vertical-align:middle; display:inline-block;} .form_search1 [class*="choice_type"] + [data-tooltip="info"]:not([class*="choice_type"]):before {content:""; width:1px; height:13px; margin-right:20px; background-color:#ccc; vertical-align:middle; display:inline-block;} .form_search1 [data-tooltip="info"]:not([class*="choice_type"]) > em {font-size:13px; color:#8693a0;} /*.form_search1 [data-tooltip="info"]:not([class*="choice_type"]) > em:after {background-position-x:-1px}*/ .form_search1 .area {position:relative; width:100%; margin-right:-5px; vertical-align:middle; display:inline-block;} .form_search1 .area .txt_guide {right:-27px; top:5px;} /* 메인 : 말풍선 */ .main [data-tab] .form_search1[data-update="up20200508"] .area .txt_guide {top:-28px; right:-27px;} /* 서브메인 : 말풍선 */ .headarea .form_search1[data-update="up20200508"] .area .txt_guide, .rentalcar .form_search1[data-update="up20200508"] .area .txt_guide {top:-28px; right:0;} /* 호텔 상세 : 말풍선 미노출 | 호텔 서브메인 : 말풍선 노출 */ .hotel .form_search1 .area .txt_guide {display:none;} .hotel .headarea .form_search1 .area .txt_guide {display:block;} .form_search1 .opt {margin-bottom:8px; font-size:0;} .form_search1 .opt .txt_data3, .form_search1 .opt .txt_info {display:inline-block; vertical-align:middle;} .form_search1 .opt .txt_data3 + .txt_info:before {content:''; display:inline-block; margin:0 6px 0 10px; width:1px; height:12px; background:#ccc; vertical-align:middle;} .form_search1 .opt .txt_info {font-size:14px;} .form_search1 .opt .txt_info > dt:after {content:':'; margin-left:5px;} .form_search1 .opt > .group > .choice_type2 {margin:1px 15px 0 0;} .form_search1 .opt > .group:last-child {float:right; margin-right:140px; width:calc((100% - 776px));} .form_search1 .warn > p {margin-top:7px; font-size:13px; color:#5b646e;} /* 입력폼 */ .form_search1 .uword {position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; font-size:14px;} .form_search1 .uword [class*="select_type"]:not(:hover), .form_search1 .uword [class*="inp_type"]:not(:hover) {border-color:#b6bec6;} .form_search1 .uword > [class*="select_type"], .form_search1 .uword > [class*="inp_type"], .form_search1 .uword > .box, .form_search1 .uword > .btn_wrap {-ms-flex:1; flex:1; margin:0 8px 0 0; width:auto;} .form_search1 .uword > .box {padding:14px 19px 0 0; text-align:right;} .form_search1 .uword strong.box {flex:none; padding-right:5px; text-align:left;} .form_search1 .uword time {color:#4b4bac;} .form_search1 .uword time + [class*="choice_type"] {margin:-3px 0 0 27px;} .form_search1 .uword time + [class*="choice_type"]:before {content:""; position:absolute; left:-16px; top:50%; width:1px; height:13px; margin-top:-6.5px; background-color:#ccc;} .form_search1 .uword [class*="inp_type"].util1:first-child .calendar {left:0; right:auto;} .form_search1 .uword [class*="inp_type"].util4 .area_city {left:calc((100% /2) - 480px); right:auto;} .form_search1 .uword > .select_box [class*="inp_type"].auto input:disabled {font-size:18px;} .form_search1 .uword .btn_small2 {padding-top:2px; padding-bottom:2px; font-size:13px;} .form_search1 .uword .btn_type4 {margin-left:4px; min-width:128px;} .form_search1 .uword .btn_wrap {padding:10px 0; margin-right:140px;} .form_search1 .uword:not([style="display:none;"]):not([style="display:none;"]) + .uword {margin-top:8px;} .form_search1 .uword:nth-last-child(2):first-child {margin-top:7px;} /* 입력폼 :셀렉트박스 */ .form_search1 [class^="uword"] > .select_type3:before, .form_search1 [class^="uword"] > .select_type4:before {content:""; position:absolute; right:5px; top:50%; width:34px; height:34px; margin-top:-18px; border:1px solid #24aae1; border-radius:3px; background-color:#24aae1; transition:border-color 0.3s ease, background-color 0.3s ease; -webkit-transition:border-color 0.3s ease, background-color 0.3s ease;} .form_search1 [class^="uword"] > .select_type3:not(:disabled):not(.disabled):hover:before, .form_search1 [class^="uword"] > .select_type4:not(:disabled):not(.disabled):hover:before {border-color:#0073a2; background-color:#0073a2;} .form_search1 [class^="uword"] > .select_type3 .selected, .form_search1 [class^="uword"] > .select_type4 .selected {padding-top:14px; padding-right:46px; padding-bottom:10px;} .form_search1 [class^="uword"] > .select_type3 .selected:before, .form_search1 [class^="uword"] > .select_type3 .selected:after {content:""; position:absolute; top:50%; width:10px; height:2px; margin-top:1px; background-color:#fff; transition:transform 0.3s ease; -webkit-transition:transform 0.3s ease;} .form_search1 [class^="uword"] > .select_type3 .selected:before {right:21px; transform:rotate(45deg); -webkit-transform:rotate(45deg);} .form_search1 [class^="uword"] > .select_type3 .selected:after {right:15px; background-image:none; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} .form_search1 [class^="uword"] > .select_type3.on .selected:before {transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} .form_search1 [class^="uword"] > .select_type3.on .selected:after {transform:rotate(45deg); -webkit-transform:rotate(45deg);} .form_search1 [class^="uword"] > .select_type4 .selected:after {right:12px; width:22px; height:22px; margin-top:-10px; background-image:url("../img/common/icon_set1.png"); background-position:-760px -80px;} .form_search1 [class^="uword"] > .select_type3 .list, .form_search1 [class^="uword"] > .select_type4 .list {border-radius:0; border-width:2px; padding-top:7px; padding-bottom:7px;} .form_search1 [class^="uword"] > .select_type3 .list li, .form_search1 [class^="uword"] > .select_type4 .list li {border-bottom-width:0;} .form_search1 [class^="uword"] > .select_type3 .list li a, .form_search1 [class^="uword"] > .select_type4 .list li a {padding-top:4px; padding-bottom:3px;} /* 입력폼 :다구간 스타일 변경 */ .form_search1 .uword.t1:before {content:'1'; display:block; position:absolute; top:0; left:0; bottom:0; z-index:1; width:16px; background:#adb1b6; border-radius:3px 0 0 3px; text-align:center; font-size:16px; line-height:46px; color:#fff;} .form_search1 .uword.t1 + .uword.t1:before {content:'2';} .form_search1 .uword.t1 + .uword.t1 + .uword.t1:before {content:'3';} /* 입력폼 : 탭 인 탭 없는 경우 */ .form_search1 .uword.t2 {margin-top:33px;} .room_detail_view .form_search1 .uword.t2{margin-top:0} /* [M 2020-09-21] 해외호텔 상세보기 margin삭제 */ /* 태그 */ .form_search1 .push {position:relative; margin-top:5px;} .form_search1 .push .list li {vertical-align:middle; display:inline-block;} .form_search1 .push .list li a {display:block; padding:1px 3px; font-weight:700; font-size:14px; color:#2096ce;} .form_search1 .push .list li a:before {content:"#";} .form_search1 .push .list.tour li a {padding: 1px 8px;} /* 항공사선택 */ .form_search1 .filter {position:relative; margin-top:8px;} .form_search1 .filter .list li {vertical-align:middle; display:inline-block;} .form_search1 .filter .list li + li {margin-left:10px;} .form_search1 .filter .list li:not(.all) [class*="choice_type"] em {padding-left:35px;} .form_search1 .filter .btn_txt {position:absolute; right:30px; bottom:-2px;} /* 부킹엔진 :제주렌터카 */ .form_search1[data-product="rentalcar"] [class*="inp_type"].util1 {flex:none; width:560px;} /* 부킹엔진 :항공 */ .form_search1 .uword > .select_box {width:388px; margin:0 8px 0 0;} .form_search1 .uword > .select_box:nth-last-child(5):first-child {width:328px;} .form_search1 .uword > .select_box + [class*="inp_type"].util1 {flex:none; width:230px;} .form_search1[data-product="flight"] [class*="inp_type"].util1 .calendar {right:-303px;} .form_search1[data-product="flight"] .select_box.t1:nth-last-child(5):first-child ~ [class*="inp_type"].util1 .calendar {right:-364px;} /* 부킹엔진 :호텔 */ .form_search1[data-product="hotel"] [class*="inp_type"].util1 .calendar {right:calc(-100% - 12px);} .form_search1[data-product="hotel"] .inp_type3 .word {width:calc(200% + 12px);} .form_search1[data-product="hotel"] .opt + .uword .inp_type3 .word {width:100%;} /* 부킹엔진 :여행 */ .form_search1[data-product="tour"] [class^="uword"] > .select_type3, .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.util1 {flex:none; width:250px;} .form_search1[data-product="tour"] [class^="uword"] > .select_type3 .list {padding:0;} .form_search1[data-product="tour"] [class^="uword"] > .select_type3 .list li {border-bottom-width:1px; border-color:#e0e2e4;} .form_search1[data-product="tour"] [class^="uword"] > .select_type3 .list li a {padding:8px 0 9px;text-align:center;font-size:15px;} /* 부킹엔진 :현지투어 */ .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto {margin-right:0;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto:before {content:none;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto input {padding-left:10px; padding-right:46px;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto + [class*="btn_img"] {padding-left:45px; width:0; height:47px; overflow:hidden; position:absolute; top:0; right:0;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto + [class*="btn_img"]:before {content:''; width:21px; height:21px; background:-520px -39px url("../img/common/icon_set1.png") no-repeat; position:absolute; top:13px; right:13px;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto .word dd:first-of-type a em:before {content:''; width:12px; height:15px; background:-800px -160px url("../img/common/icon_set1.png") no-repeat; display:inline-block; vertical-align:middle; margin:0 4px 2px 0;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto .word dd a em i {color:#020219;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto .btn_clear {top:14px; right:50px;} .form_search1[data-product="tour"] [class^="uword"] > .inp_type3.auto .mes_data_none {padding:102px 10px !important; border:0; border-radius:inherit;} .ticket .form_search1[data-product="tour"] {width:900px;} /* 부킹엔진 :라인 */ .form_search1.t1 {margin:30px 0; padding:10px 15px; width:100%; border:1px solid #cdd0d3; border-radius:3px; background-color:#fff; box-shadow:0 0 0 0;} .form_search1.t1.date_none_bg{background-color:#FFF7CC} .form_search1.t1:after {height:54px;} .form_search1.t1 .uword > .box {text-align:left;} .form_search1.t1 > button {display:block;} /* 부킹엔진 :그림자 하단 삭제 */ .form_search1.t2 {/*border-bottom-left-radius:0; border-bottom-right-radius:0;*/ box-shadow:0 -20px 30px 0 rgba(0,0,0, 0.1);} /* 탭 하단 라운딩 처리 동일 요청 */ /* 부킹엔진 : 여행 : 서브메인 */ .tour_sub_booking {position:absolute; padding:16px; left:50%; margin-top:-50px; margin-left:-550px;; width:1100px; height:152px; border-radius:6px; background-color:#fff; box-shadow:0 5px 30px 0 rgba(0,0,0, 0.1); box-sizing:border-box; z-index:30;} .tour_sub_booking .form_search1 {width:auto; padding:10px 0 0; box-shadow:0 0 0 0 transparent;} .tour_sub_booking + [class*="panel"].thema1 {padding-top:90px} .tour_sub_booking + [class*="panel"] {padding-top:130px;} .tour_sub_booking + .container {padding-top:105px;} /* 부킹엔진 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .form_search1 .uword {display:table; table-layout:fixed; margin:-8px -8px; width:calc(100% + 16px); border-spacing:8px;} .form_search1 .uword + .uword {margin-top:-8px;} .form_search1 .uword > * {display:table-cell;} .form_search1 .uword.t1:before {display:none;} .form_search1 .uword .btn_type4 {width:128px;} } /*-------------------------------------------------------------------------------- # SEARCH :부킹엔진 :BG있음 ---------------------------------------------------------------------------------*/ .headarea .select_box:before {box-shadow:0 0 0 0;} .headarea .form_search1 {padding:18px 0 14px; box-shadow:none; background-color:transparent;} .headarea .form_search1:after {height:108px;} .headarea .form_search1 .txt_guide {right:0;} .headarea .form_search1 .choice_type3 + .choice_type2 {margin-left:15px;} .headarea .form_search1 .uword > .select_box + [class*="inp_type"].util1[style="width:532px;"], .headarea .form_search1 .uword > .select_box + [class*="inp_type"].util1[style="width:532px;"] {width:552px !important;} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) [class*="choice_type"] + [data-tooltip="info"]:before {background-color:rgba(256,256,256,0.4)} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .opt [class*="choice_type"]:not(.on) > em, .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .filter [class*="choice_type"]:not(.on) > em, .content:not([class*="sticky"]) .headarea .form_search1:not(.on) [data-tooltip="info"] > em {color:#fff;} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) [data-tooltip="info"] > em:after {background-position-x:0;} .headarea .form_search1:not(.on) [class*="inp_type"]:not(.on), .headarea .form_search1:not(.on) .select_box [class*="select_type"]:not(.on), .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .opt .choice_type2 > em:before, .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .filter .choice_type2 > em:before, .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .btn_small2 {border-color:#fff;} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .btn_small2 {background-color:transparent; color:#fff;} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .btn_small2:before, .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .btn_small2:after {background-image:none, linear-gradient(#fff, #fff), linear-gradient(#fff, #fff)} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .opt > .group:last-child {width:calc(100% - 787px);} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .uword > .select_box {width:400px;} .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .uword > [class*="inp_type"].util2, .content:not([class*="sticky"]) .headarea .form_search1:not(.on) .uword > .btn_wrap {/*min-*/width:314px;} /* 해외항공 :*/ .headarea .form_info {display:none; position:relative; margin:0 auto; padding:0 12px; width:1100px; color:#fff; box-sizing:border-box;} .headarea .form_info:before {content:''; display:inline-block; height:76px; vertical-align:middle;} .headarea .form_info dl, .headarea .form_info .txt_data3 {display:inline-block; margin-top:-2px; vertical-align:middle;} .headarea .form_info dl dt {overflow:hidden; position:absolute; top:0; padding-left:1px; width:0; height:0; white-space:nowrap;} .headarea .form_info dl dd {display:inline-block; margin-left:30px; font-size:14px;} .headarea .form_info dl dd:last-child {margin-left:0;} .headarea .form_info dl dd:last-child:before {content:''; display:inline-block; margin:-1px 7px 0 3px; width:1px; height:13px; background:#5c97c0; vertical-align:middle;} .headarea .form_info .txt_data3 {font-size:19px; font-weight:400;} .headarea .form_info .txt_data3 span {font-size:14px;} .headarea .form_info .btn_type4 {padding:0; position:absolute; top:14px; left:956px; min-width:72px;} .content[class*="sticky"] > .headarea {position:fixed; top:0; left:0; right:0; z-index:20; background:#166aa5 !important;} .content[class*="sticky"] > .headarea [class*="form_search"]:only-child {padding:0 0 0 16px;} .content[class*="sticky"] > .headarea [class*="form_search"]:only-child:after {height:76px;} .content[class*="sticky"] > .headarea [class*="form_search"]:only-child .opt, .content[class*="sticky"] > .headarea [class*="form_search"] .txt_guide {display:none;} .content[class*="sticky"] > .headarea [class*="form_search"]:only-child .btn_type4 {padding:0; min-width:72px;} .content[class*="sticky"] > .headarea .form_search1:not(.on) .uword {width:1012px;} .content[class*="sticky"] > .headarea .form_info {display:block;} .content[class*="sticky"] > .headarea .form_info + [class*="form_search"] {display:none;} .content[class*="sticky"] > .headarea .form_info + [class*="form_search"].on {display:block; position:absolute; top:76px; left:50%; z-index:1000; margin:0 -550px; padding:14px; width:1100px; border:2px solid #24aae1; border-top:0; background:#fff; border-radius:0; box-sizing:border-box;} .content[class*="sticky"] > .headarea .form_info + [class*="form_search"].on [data-fn="lyClose"] {display:block;} .mega_menu + .headarea [class*="form_search"]:after {height:180px;} /*-------------------------------------------------------------------------------- # SEARCH :상세검색1 ---------------------------------------------------------------------------------*/ .form_detail_search2 {margin-right:-20px;} .form_detail_search2 .area {float:left; height:610px; margin-right:20px;} .form_detail_search2 .area:nth-of-type(odd) {width:257px;} .form_detail_search2 .area:nth-of-type(even) {width:210px;} .form_detail_search2 .area > strong {font-size:15px; line-height:1.2; display:block;} .form_detail_search2 .area > .form_filter:only-of-type {height:579px;} .form_detail_search2 .area > strong + .form_filter {margin-top:12px;} .form_detail_search2 .area > .form_filter + strong {margin-top:18px;} .form_detail_search2 .area > .form_filter:first-of-type:nth-last-of-type(2) {height:486px;} .form_detail_search2 .area:nth-of-type(4) > .form_filter {max-height:161px;} .form_detail_search2 .area.flex {display:-webkit-box; display:-moz-flex; display:-ms-flexbox; display:flex; flex-direction:column; -ms-flex-direction:column;} .form_detail_search2 .area.flex > .form_filter:first-of-type:nth-last-of-type(2) {flex:1; -ms-flex:1;} .form_detail_search2 .btn_wrap1 {clear:both; margin:0; padding:20px 20px 0 0;} /*-------------------------------------------------------------------------------- # SEARCH :상세검색2 ---------------------------------------------------------------------------------*/ .form_search2 {opacity:0; overflow:hidden; position:absolute; padding:0 19px; height:0; transition:padding-bottom 0.3s;} .form_search2 dl {font-size:0;} .form_search2 dl dt, .form_search2 dl dd {display:inline-block; vertical-align:top;} .form_search2 dl dt {padding:11px 0 12px; width:109px; font-weight:700; font-size:15px; line-height:1.45; color:#8693a0;} .form_search2 dl dd {position:relative; padding:0 0 13px; width:calc(100% - 109px);} .form_search2 dl dd:before {content:''; display:block; position:absolute; top:0; left:-109px; right:0; height:1px; background:#dee0e2;} .form_search2 dl dd > .choice_type2 {margin:13px 10px 0 0;} .form_search2 dl dt:first-child + dd:before {display:none;} .form_search2 dt [class*="ico"], .form_search2 dt [class*="ico"] i {vertical-align:middle; display:inline-block;} .form_search2 dt [class*="ico"]:before {content:""; width:22px; height:20px; margin-right:7px; background-image:url("../img/common/icon_set1.png"); vertical-align:middle; display:inline-block;} .form_search2 .area1 {padding-top:23px} .form_search2 .area1 .drag_slider1 {margin-top:3px; margin-bottom:15px; width:590px;} .form_search2 .area1 .drag_slider1.disabled {margin-top:13px; margin-bottom:30px; height:0;} .form_search2 .area2 {display:block; width:100%;} .form_search2 .area2:before {display:none;} .form_search2 dt.area2 {border-top:1px solid #dee0e2;} .form_search2 dd.area2 {margin-top:-2px; padding-top:0;} .form_search2 dt.area3 {padding-top:17px;} .form_search2 dd.area3 {padding-top:12px;} .form_search2 .ico1:before {background-position:0 -120px;} .form_search2 .ico2:before {background-position:-40px -120px;} .form_search2 .ico3:before {background-position:-80px -120px;} .form_search2 .ico4:before {background-position:-120px -120px;} .form_search2 .ico5:before {background-position:-160px -120px;} .form_search2 .ico6:before {background-position:-200px -120px;} .form_search2 .ico7:before {background-position:-240px -120px;} .form_search2 .ico8:before {background-position:-280px -120px;} .form_search2 .ico9:before {background-position:-320px -120px;} .form_search2 .ico10:before {background-position:-360px -120px;} .form_search2 .ico11:before {background-position:-400px -120px;} .form_search2 .ico12:before {background-position:-440px -120px;} .form_search2 .ico13:before {background-position:-480px -120px;} .form_search2 .ico14:before {background-position:-520px -120px;} .form_search2 .ico15:before {background-position:-560px -120px;} .form_search2 .ico16:before {background-position:-680px -480px;} .form_search2.on {opacity:1; position:relative; height:auto; padding-bottom:31px; margin-bottom:20px; /*margin-bottom:30px; */} .form_search2.on:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; border:1px solid #adb1b6;} .form_search2 .nothing {margin-top:13px; font-size:13px; color:#9a9aa3;} .btn_wrap2 + .form_search2 {margin-top:-20px;} /*-------------------------------------------------------------------------------- # SEARCH :우측정렬 ---------------------------------------------------------------------------------*/ .form_search3 {position:relative; margin:20px 0; padding:0; width:100%; text-align:right;} .form_search3 > [class*="search_type"] {width:376px;} .form_search3 .sub {position:absolute; left:0;} .form_search3.box_area2 {margin-top:0; padding-top:20px;} /*-------------------------------------------------------------------------------- # SEARCH :도시검색 ---------------------------------------------------------------------------------*/ .form_search4 {width:100%; padding:30px 60px 202px; text-align:center; box-sizing:border-box;} .form_search4 [class*="search_type"]:before {content:''; display:block; position:absolute; left:-60px; top:-30px; width:calc(100% + 120px); height:100px; background:#f0f5fb;} .form_search4 [class*="search_type"] {width:100%;} .form_search4 [class*="inp_type"].auto {width:100%;} .form_search4 [class*="inp_type"].auto input {padding-left:10px;} .form_search4 [class*="inp_type"].auto:before {display:none;} .form_search4 [class*="inp_type"].auto .word {left:-60px; right:0; min-width:calc(100% + 160px); width:100%; height:157px; margin-top:50px; border:0; border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6; z-index:11;} .form_search4 [class*="inp_type"].auto .word .txt_nothing {padding-top:65px;} .form_search4 [class*="inp_type"].auto .word .txt_nothing.mes_data_none {padding:35px 0 0 0 !important; border:0 !important; border-radius:0 !important;} .form_search4 [class*="inp_type"].auto .word a u {float:right;} .form_search4 [class*="inp_type"].auto .word a u:before {display:none;} .form_search4 .area_city {display:block !important; left:-60px; right:0; min-width:calc(100% + 160px); margin-top:50px; border:0; border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6; font-size:14px;} .form_search4 .area_city .area {display:table; width:100%;} .form_search4 .area_city .area:not(:last-child) {border-bottom:1px solid #dee0e2;} .form_search4 .area_city h2, .form_search4 .area_city ul {display:table-cell; vertical-align:middle;} .form_search4 .area_city h2 {width:80px; background:#f0f5fb; text-align:center;} .form_search4 .area_city ul {width:calc(100% - 80px); padding:6px 0;} .form_search4 .area_city ul:before, .form_search4 .area_city ul:after {content:''; display:block; position:absolute; left:227px; left:calc(33% + 53px); top:0; bottom:0; width:1px; height:100%; background:#dee0e2;} .form_search4 .area_city ul:after {left:calc(66% + 30px);} .form_search4 .area_city ul > li {display:inline-block; width:32.7%; text-align:center; vertical-align:middle;} .form_search4 .area_city a {display:block; padding:2px 5px;} .form_search4 .area_city a u {margin-left:3px; color:#adb1b6; text-decoration:none;} /*-------------------------------------------------------------------------------- # FORM TYPE :박스형 ---------------------------------------------------------------------------------*/ .form_type {margin:25px 0 0; padding:15px 20px; background:#f0f5fb; border-radius:3px;} .form_type .tit {font-size:14px; line-height:1.7;} .form_type .choice_type1 {margin:0 10px 0 12px;} .form_type .choice_type1 + [class*="inp_type"] {margin-left:11px;} .form_type [class*="inp_type"] + [class*="btn_"] {margin-left:4px;} .form_type .inp_type3, .form_type > p {display:inline-block; vertical-align:middle;} .form_type .inp_type3 {width:222px;} .form_type .inp_area.w1:not(:nth-child(2)) {margin:8px 0 5px;} .form_type > p {margin-left:16px; width:calc(100% - 260px); letter-spacing:-0.05em;} .form_type > p > time {display:inline-block; margin-top:5px; border-bottom:1px solid #020219; font-size:17px; font-weight:800; line-height:1;} .form_type > p > em {display:block; color:#0292ce;} [class*="tit_type"] + .form_type {margin-top:0;} /* FORMTYPE :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .form_type .inp_area.w1:not(:nth-child(2)) {display:table !important; border-spacing:0;} } /*-------------------------------------------------------------------------------- # FORM TYPE :콜백서비스 ---------------------------------------------------------------------------------*/ .form_type2 {margin-bottom:20px; padding:15px 0 28px 28px; border:2px solid #24aae1; border-radius:6px; font-size:0;} .form_type2 .tit {margin-bottom:11px; font-size:15px;} .form_type2 p, .form_type2 .txt_info2 {margin-top:3px; font-size:13px;} .form_type2 .txt_info2 {margin-bottom:16px;} .form_type2 .txt_info2 span {color:#5b646e;} .form_type2 dl.inp_area {margin-right:4px; width:calc(100% - 150px);} .form_type2 dl.inp_area .select_type1 {width:100%;} .form_type2 dl.inp_area > dt {margin-right:6px; font-weight:700;} .form_type2 dl.inp_area > dd + dt {margin-left:22px;} .form_type2 .icm6 {margin:5px 0 7px; color:#020219 !important;} /*-------------------------------------------------------------------------------- # FORM TYPE :좌우배치 ---------------------------------------------------------------------------------*/ .form_type3 {position:relative; padding-right:256px;} .form_type3 legend {display:block; visibility:visible; padding:33px 0 12px; width:auto; height:auto; font-size:16px; line-height:1.33; font-weight:700;} .form_type3 .area2 {position:absolute; top:66px; bottom:-1px; right:0; width:240px; padding:20px 20px 115px; border-left:1px solid #dee0e2; border-right:1px solid #dee0e2; background:#eff2f6; box-sizing:border-box;} .form_type3 .area2:before, .form_type3 .area2:after {content:''; display:block; position:absolute; left:-1px; right:-1px; height:1px;} .form_type3 .area2:before {top:0; background:#5b646e;} .form_type3 .area2:after {bottom:0; background:#adb1b6;} .form_type3 .area2 > dt {margin-bottom:21px; font-weight:700; font-size:13px;} .form_type3 .area2 > dt:nth-last-child(2), .form_type3 .area2 > dt:nth-last-child(2) ~ dd {position:absolute;} .form_type3 .area2 > dt:nth-last-child(2) {left:20px; right:20px; bottom:42px; padding-top:13px; border-top:1px dashed #adb1b6; font-size:15px;} .form_type3 .area2 > dt:nth-last-child(2) ~ dd {font-size:13px; right:20px; bottom:17px;} .form_type3 .area2 [class*="choice_type"] {display:block;} .form_type3 .area2 [class*="choice_type"] + [class*="choice_type"] {margin:17px 0 0;} /*-------------------------------------------------------------------------------- # FORM TYPE :숙박/옵션 선택 ---------------------------------------------------------------------------------*/ .form_type4 {display:block !important; position:relative; z-index:2; overflow:hidden; border-radius:3px; font-size:12px;} .form_type4:before {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-2; border:1px solid #cdd0d3; border-radius:3px;} .form_type4 dt, .form_type4 dd {width:50%;} .form_type4 dt {display:inline-block; position:relative;} .form_type4 dt:before {content:''; display:block; position:absolute; bottom:-1px; left:20px; right:20px; height:1px; background:#eeeff0;} .form_type4 dt.on {background:#24aae1; color:#fff;} .form_type4 dt.on:after {content:''; display:block; position:absolute; top:50%; right:-1px; margin:-4px 0; width:0; height:0; border:5px solid transparent; border-right:7px solid #f4fbfd;} .form_type4 dd {display:none; float:right; clear:right;} .form_type4 dd:before {content:''; display:block; position:absolute; top:0; left:50%; right:0; bottom:0; z-index:-1; border:1px solid #24aae1; border-radius:0 3px 3px 0; background:#f4fbfd;} .form_type4 dt.on + dd {display:block;} .form_type4 label {display:block; position:relative; padding:5px 0;} .form_type4 label:before {content:''; display:inline-block; width:48px; height:41px; vertical-align:middle;} .form_type4 label > em {overflow:hidden; display:inline-block; display:-webkit-inline-box; width:calc(100% - 60px); max-height:2.571em; vertical-align:middle; font-size:1.16em; font-weight:700; line-height:1.28; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .form_type4 label > em:before {content:''; display:block; position:absolute; top:50%; left:21px; margin:-9px 0; width:18px; height:18px; border:4px solid #fff; background:#dee0e2; box-shadow:0 0 0 1px #bbbec2; border-radius:50%; box-sizing:border-box;} .form_type4 label > input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer; z-index:3;} .form_type4 label > input:checked + em:before {background:#24aae1;} /* 위치지정 :최대 10개 */ .form_type4 dt:nth-child(3).on + dd {margin-top:-51px;} .form_type4 dt:nth-child(5).on + dd {margin-top:calc(51px * -2);} .form_type4 dt:nth-child(7).on + dd {margin-top:calc(51px * -3);} .form_type4 dt:nth-child(9).on + dd {margin-top:calc(51px * -4);} .form_type4 dt:nth-child(11).on + dd {margin-top:calc(51px * -5);} .form_type4 dt:nth-child(13).on + dd {margin-top:calc(51px * -6);} .form_type4 dt:nth-child(15).on + dd {margin-top:calc(51px * -7);} .form_type4 dt:nth-child(17).on + dd {margin-top:calc(51px * -8);} .form_type4 dt:nth-child(19).on + dd {margin-top:calc(51px * -9);} .form_type4 dt:nth-child(21).on + dd {margin-top:calc(51px * -10);} /*-------------------------------------------------------------------------------- # 폼 :약관 :유형1 :아코디언형태 ---------------------------------------------------------------------------------*/ .form_agree {margin:20px 0 0; border-top:1px solid #5b646e;} .form_agree legend {visibility:visible; overflow:visible; display:block; width:100%; height:auto; line-height:22px; box-sizing:border-box;} .form_agree .area1 {position:relative; margin-bottom:-1px; padding:14px 10px 12px 36px; border-bottom:1px solid #adb1b6; font-size:16px; font-weight:700;} .form_agree .area1.noAccordion{padding-left:15px} /* [현대홈쇼핑] 예약규정 첫번째는 아코디언 메뉴 삭제 */ .form_agree .area1 strong {font-weight:700;} .form_agree .area1:after {content:""; display:block; position:absolute; top:0; right:47px; width:1px; height:100%; background:#adb1b6;} .form_agree .area1.noAccordion:after {display:none} /* [현대홈쇼핑] 예약규정 첫번째는 아코디언 메뉴 삭제 */ .form_agree .area1:nth-last-child(2) {padding-left:14px;} .form_agree .area1.noAccordion:nth-last-child(2) {padding-left:36px;} .form_agree .area1 .txt_type2 {font-weight:400;} .form_agree .area2 {font-size:13px; line-height:1.7} .form_agree .area3 {position:absolute; top:0; left:0; right:74px; height:49px;} .form_agree .area3 .choice_type2 {top:0; left:10px; width:100%; height:100%;} .form_agree .area3 .choice_type2:before {content:''; display:block; position:absolute; top:-14px; left:-10px; right:0; bottom:0; background:rgba(256,256,256,0)} .form_agree > fieldset {overflow:hidden; position:relative; border:0; border-radius:3px;} .form_agree > fieldset:before, fieldset.form_agree:before {content:""; display:block; position:absolute; top:0; left:0; bottom:0; right:0; border:1px solid #adb1b6; border-radius:3px; pointer-events:none;} .form_agree > fieldset + fieldset {margin-top:8px;} .form_agree > .choice_type2:first-child {display:block; padding:14px 0 14px 34px; background:#eff2f6; line-height:20px;} .form_agree > .choice_type2:first-child > em {font-size:16px; font-weight:700; line-height:22px;} .form_agree > .choice_type2:first-child > em:before {left:10px;} .form_agree > .choice_type2:first-child > em:after {left:14px;} .form_agree > .choice_type2:first-child > span {font-size:14px; color:#8693a0; vertical-align:middle;} .form_agree:first-child, [class*="tit_type"] + .form_agree {margin-top:0;} /* 클릭이벤트 */ .form_agree > fieldset.visited:before {border:2px solid #24aae1;} .form_agree > fieldset.visited .area1 {margin-bottom:-2px; border-color:#24aae1;} .form_agree .area1.open + .area2 {overflow:auto; padding:13px 16px; border:1px solid #adb1b6; max-height:230px; position:relative;} .form_agree .area1.open .btn_toggle:before, .form_agree .area1.open .btn_toggle:after {background:#5b646e;} /*-------------------------------------------------------------------------------- # 폼 :약관 :유형2 ---------------------------------------------------------------------------------*/ .form_agree2 {margin-top:20px;} .form_agree2 legend.area1{visibility:visible; overflow:visible; display:block; width:100%; height:auto; line-height:1.5; box-sizing:border-box;} .form_agree2 .area1 {font-size:16px; font-weight:700;} .form_agree2 .area2 {margin-top:10px; padding:10px 14px 11px; border:1px solid #adb1b6; font-size:13px; line-height:1.7;} .form_agree2 .area2 p {font-size:inherit;} .form_agree2 .area2 p + ul {margin-top:11px;} .form_agree2 .area2 > .txt_type2 {margin-top:14px; color:#8693a0 !important;} .form_agree2 .area3 {margin-top:8px;} .form_agree2.panel {margin-top:30px;} /*-------------------------------------------------------------------------------- # 일정선택 ---------------------------------------------------------------------------------*/ .calendar {position:relative; width:689px; margin:0 0 0 0; border:2px solid #24aae1; background-color:#fff; z-index:10;} .calendar h1 {position:absolute; top:-9999px; width:1px; height:0;} .calendar .area {position:relative;} .calendar .area:after {clear:both; content:""; display:block;} .calendar .area2 {position:relative; border-top:1px solid #dee0e2;} .calendar .area2:before {content:""; width:1px; height:40px; margin-right:-4px; vertical-align:middle; display:inline-block;} .calendar .area2 [data-tooltip] {padding-left:17px;} .calendar .area2 [data-tooltip] strong {font-size:12px; color:#020219 !important;} .calendar .area2 [data-tooltip]:hover > .tooltip_type {bottom:100%; margin-bottom:-10px;} .calendar .area2 ul.txt {margin-left:16px;} .calendar .area2 ul.txt, .calendar .area2 ul.txt li {vertical-align:middle; display:inline-block;} .calendar .area2 ul.txt li {position:relative; padding-left:8px;} .calendar .area2 ul.txt li + li {margin-left:8px;} .calendar .area2 ul.txt li:nth-child(1) {color:#35b879;} .calendar .area2 ul.txt li:nth-child(2) {color:#5b646e;} .calendar .area2 ul.txt li:nth-child(3) {color:#ff464d;} .calendar .area2 ul.txt li:before {content:""; position:absolute; left:0; top:50%; width:3px; height:3px; margin-top:-1px; border-radius:50%; box-shadow:inset 0px 0px 0px 2px;} .calendar .area2 dl.txt {margin-left:18px; font-size:13px;} .calendar .area2 dl.txt + dl.txt {margin-left:20px;} .calendar .area2 dl.txt, .calendar .area2 dl.txt dt, .calendar .area2 dl.txt dd {vertical-align:middle; display:inline-block;} .calendar .area2 dl.txt:before {content:""; width:1px; height:40px; margin-right:-4px; vertical-align:middle; display:inline-block;} .calendar .area2 dl.txt dt {margin-top:-2px;} .calendar .area2 dl.txt dd:before {content:":"; vertical-align:middle; display:inline-block;} .calendar .area2 dl.txt dd time {font-weight:700; margin-top:-1px; vertical-align:middle; display:inline-block;} .calendar .area2 dl.txt dd time + [class^="select_type"] {margin-left:10px;} .calendar .area2 dl.txt [class*="select_type"] {width:80px;} .calendar .area2 dl.txt [class*="select_type"] .list {top:auto; bottom:100%; max-height:197px; margin-top:0; margin-bottom:4px;} .calendar .area2 .sub {position:absolute; right:18px; top:0; padding:3px 0; text-align:right;} .calendar .area2 .sub [class^="btn_type"] {width:126px;} .calendar .area2 .sub [class^="select_type"] {width:100px;} .calendar .area2 .sub [class^="select_type"] .list {top:auto; bottom:100%; margin-top:0; margin-bottom:4px;} /*.calendar .area2 .sub [class*="choice_type"] {margin:7px 0 0 10px;}*/ /* 탭버튼 */ .calendar .tab {padding:0 15px; border-bottom:1px solid #adb1b6; font-size:0;} .calendar .tab > li {display:inline-block; position:relative; font-size:15px; line-height:47px; font-weight:700;} .calendar .tab > li:not(:first-child):before {content:""; position:absolute; left:-1px; top:50%; width:1px; height:15px; margin-top:-7px; background-color:#adb1b6;} .calendar .tab > li > a {padding:0 9px 0 7px; color:#adb1b6;} .calendar .tab > li > a.ico2:before,.calendar .tab > li > a.ico3:before {content:''; display:inline-block; margin:-3px 3px 0 0; background-image:url("../img/common/icon_set1.png"); background-repeat:no-repeat; vertical-align:middle;} .calendar .tab > li > a.ico2:before {width:13px; height:15px; background-position:-680px -40px;} .calendar .tab > li > a.ico3:before {width:13px; height:13px; background-position:-760px -40px;} .calendar .tab > li.on > a {color:#020219;} .calendar .tab > li.on > a.ico2:before {background-position:-720px -40px;} .calendar .tab > li.on > a.ico3:before {background-position:-760px -40px;} /* 컨텐츠 :달력 */ .calendar .calendar_type2 {position:static; float:left; width:50%;} .calendar .calendar_type2 > .box {width:50%;} .calendar .calendar_type2:nth-of-type(1) {border-right:1px solid #dee0e2;} .calendar .calendar_type2:nth-of-type(2) {margin-left:-1px; width:calc(50% + 1px); border-left:1px solid #dee0e2;} /* 컨텐츠 :적용버튼 */ .calendar > .btn_wrap1 {margin-top:0; padding:10px 0 20px 0; border-top:1px solid #dee0e2;} /*-------------------------------------------------------------------------------- # 폼 :캡챠 ---------------------------------------------------------------------------------*/ .box_catpcha:after {content:''; display:block; clear:both;} .box_catpcha > p {font-size:13px; color:#5b646e; letter-spacing:-0.03em;} .box_catpcha > p + .group {width:100%; margin-top:13px;} .box_catpcha > [class*="inp_type"] {width:100%; margin-top:10px;} .box_catpcha .group {position:relative; width:350px; float:left;} .box_catpcha .group img {width:246px; height:74px;} .box_catpcha .group [class*="btn_type"] {position:absolute; right:0; width:183px;} .box_catpcha .group [class*="btn_type"]:nth-of-type(1) {top:0;} .box_catpcha .group [class*="btn_type"]:nth-of-type(2) {bottom:0;} .box_catpcha .group .inp_type1.w1 + p {margin-top:15px; font-size:13px; color:#5b646e;} .box_catpcha .group .inp_type1.w1 + p:before {content:'*'; margin-right:3px; font-size:13px; color:#5b646e;} .box_catpcha .group > a.btn_type2 {width:calc(100% - 254px); margin:0;} .box_catpcha .group + .group {padding-left:15px;} /*-------------------------------------------------------------------------------- # 이미지 ---------------------------------------------------------------------------------*/ .img_type > span {overflow:hidden; display:block; position:relative; margin:0 auto 10px; width:170px; height:120px; border-radius:5px;} .img_type > span > img {position:absolute; top:0; left:50%; margin:0 -70%; width:140%;} .img_type > strong {display:block; padding:0 20px; text-align:center;} .img_type2 {position:relative;font-size:12px;} .img_type2 > time {color:#2092ce; font-size:1.33em; font-weight:700;} .img_type2 > time + cite {display:inline; width:auto;} .img_type2 > cite {display:block; position:relative; margin-bottom:16px; width:100%; font-size:1.33em; font-weight:700;} .img_type2 > cite:after {display:block; content:'';} .img_type2 > span:not(.figcaption) {overflow:hidden; display:inline-block; position:relative; margin-right:-4px; width:360px; height:200px; border-radius:10px;} .img_type2 > .img_area > ul > li > span {overflow:hidden; display:inline-block; position:relative; width:360px; height:200px; border-radius:10px;} .img_type2 > .img_area > ul > li > span img, .img_type2 > span img {position:absolute; top:0; left:0; object-fit:cover; width:100%; height:100%;} .img_type2 > span + span {margin-left:14px;} .img_type2 > .figcaption {overflow:hidden ;display:block; margin:-9px 0 17px; font-size:1.16em;} .img_type2 > time + cite + .figcaption {margin-top:7px;} .img_type2 > .img_area {display:inline-block;} .img_type2 > cite + .img_area {margin-top:16px;} .img_type2 > .img_area > ul {margin:-13px 0 0 -13px; font-size:0;} .img_type2 > .img_area > ul > li {display:inline-block; margin:13px 0 0 13px;} .img_type2 > .img_area > p {margin:-5px 0 4px; font-size:14px; font-weight:700;} .img_type2 > .btn_img2 {margin:-53px 0 0 -46px; background-color:rgba(124, 131, 139, 0.9); border-color:rgba(124, 131, 139, 0.9); box-shadow:0 0 5px 0 rgba(0,0,0,0.1);} .img_type2 > .btn_img2:before, .img_type2 > .btn_img2:after {background-color:#fff;} .img_type2 > .btn_img2:hover {background-color:#fff; border-color:#fff !important;} .img_type2 > .btn_img2:hover:before, .img_type2 > .btn_img2:hover:after {background-color:#020219 !important;} .img_type2 > .btn_img2.ico1 {position:absolute; bottom:14px; right:10px;} .img_type2.t1 {display:flex;flex-wrap:wrap;position:relative; padding:16px 0 20px; margin-top:-1px; border-top:1px solid #020219;border-bottom:1px solid #dee0e2;} .img_type2.t1 + .img_type2.t1 {border-top-color:#dee0e2;} .img_type2.t1 > cite {padding-left:19px;} .img_type2.t1 > cite:before {content:'';display:block;position:absolute;left:0;top:4px;width:14px;height:17px;background:url("../img/common/icon_set1.png") no-repeat -520px 0;} .img_type2.t1 > span:not(.figcaption) {margin-right:0;} .img_type2.t1 > .figcaption {width:735px; order:2;margin-top:7px;margin-bottom:-2px;font-size:1.08em;line-height:1.45;color:#5b646e;} .img_type2.t1 > .figcaption:last-child {display:block;margin-top:-10px;max-height:100%;} .img_type2.t1 > .btn_img2 {margin-top:158px;} /* IMGTYPE :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { } /*-------------------------------------------------------------------------------- # 공통 :이미지영역 ---------------------------------------------------------------------------------*/ [class*="product_"] .area1, [class*="list_"]:not([data-accordion]):not(.list_type4) .area1{overflow:hidden; position:relative; border-radius:3px;} [class*="product_"] .area1:not([data-air-logo]):empty, [class*="list_"]:not([data-accordion]):not(.list_type4) .area1:empty {background-color:#f2f3f4;} [class*="product_"] .area1:not([data-air-logo]):empty:before, [class*="list_"]:not([data-accordion]):not(.list_type4) .area1:empty:before, .product_card4 .area1:before, .product_card5 .area1:before, .data_coupon .area1:empty:before, .data_summary .area1:empty:before, .data_summary3 .area1:empty:before, .data_summary5 .area1:not([data-air-logo]):empty:before, .data_compare ul > li .area1:not([data-air-logo]):not([class*="ict"]):before, .data_accordion.t1 .slide1.slide_type1 .product_card2 > li:empty:after, aside.quick_bar > article .products a > span:empty:before {content:''; display:block; opacity:0.6; position:absolute; top:50%; left:50%; margin:-40px -60px; width:120px; height:80px; background:url("../img/common/icon_set3.png") no-repeat 0 -240px;} [class*="product_"] .area1 img, [class*="list_"]:not([data-accordion]):not(.list_type4) .area1 img {position:absolute; top:0; left:0; /*top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%, -50%); */ object-fit:cover; width:100%; height:100%;} /*-------------------------------------------------------------------------------- # 상품 :리스트형1 ---------------------------------------------------------------------------------*/ .product_type {position:relative; border-top:1px solid #adb1b6; border-bottom:1px solid #dee0e2;} .product_type > li, .product_type > .list {position:relative; padding:12px 15px; border-bottom:1px solid #dee0e2; font-size:13px; letter-spacing:-0.05em; box-sizing:border-box;} .product_type > li:last-child, .product_type > .list:last-child {border-bottom:0;} .product_type > li:before, .product_type > .list:before {content:''; display:block; position:absolute; right:203px; top:11px; bottom:11px; width:1px; background:#e5e5e8;} .product_type > li:hover, .product_type > .list:hover {z-index:4; background:#eef8fd;} .product_type > li > a, .product_type > .list > a {overflow:hidden; display:block; position:absolute; top:0; left:0; bottom:0; right:204px; z-index:2; padding-left:calc(100% - 204px); width:0; height:100%; white-space:nowrap;} .product_type .area1, .product_type .area2, .product_type .area3 {display:inline-block; vertical-align:middle;} .product_type .bnr_area2 {margin:-1px 0 0;} .product_type .mes_data_ing {padding:40px 10px !important; border:0; border-bottom:1px solid #adb1b6; border-radius:0;} /* PRODUCTTYPE :찜하기 */ .product_type [data-tooltip-title] {position:absolute; top:11px; right:216px; z-index:3;} /* PRODUCTTYPE :체크박스 */ .product_type .choice_type2 {position:absolute; top:-1px; bottom:-1px; right:0; left:-2px; z-index:1;} .product_type .choice_type2 > em {overflow:hidden; display:block; position:absolute; top:-1px; left:2px; right:2px; bottom:0; padding-left:calc(100% - 6px); width:0; white-space:nowrap; border:2px solid transparent; box-sizing:border-box;} .product_type .choice_type2 > input:checked + em {border-color:#24aae1;} .product_type .choice_type2 > em:before, .product_type .choice_type2 > em:after {top:50%; left:13px; z-index:2; margin:-10px 0;} .product_type .choice_type2 > em:after {left:18px; margin-top:-7px;} .product_type .choice_type2 + a {left:46px; padding-left:calc(100% - 250px);} .product_type .area1:nth-last-child(6):first-child {margin-left:33px;} .product_type .area1:nth-last-child(6):first-child + .area2 {width:calc(100% - 455px);} /* PRODUCTTYPE :이미지 */ .product_type .area1 {width:200px; height:148px;} /* PRODUCTTYPE :내용 */ .product_type .area2 {position:relative; margin-left:15px; padding-right:74px; width:calc(100% - 421px); box-sizing:border-box;} .product_type .area2 i:not([class]) {color:#5b646e; font-weight:700;} .product_type .area2 i:not([class]) + i:not([class]) {position:relative; margin-left:17px; font-weight:400;} .product_type .area2 i:not([class]) + i:not([class]):before {content:''; display:block; position:absolute; top:2px; left:-10px; width:1px; height:11px; background:#cdd0d3;} .product_type .area2 i + i {margin-left:4px;} .product_type .area2 .icon_com3 {padding-left:75px;} .product_type .area2 .icon_com3 > em {overflow:hidden; display:block; position:absolute; padding-left:1px; width:0; height:1px;} .product_type .area2 i:not([class]) + .icon_com3 {margin-top:-2px; margin-left:16px;} .product_type .area2 i:not([class]) + .icon_com3 em {top:3px; left:-10px; height:12px; background:#cdd0d3;} .product_type .area2 i:not([class]) + cite {margin-top:3px;} .product_type .area2 cite {overflow:hidden; display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:6px 0; max-height:2.7em; font-size:19px; font-weight:700; line-height:1.35;} .product_type .area2 cite + span:not([class]) {display:block; margin-top:-3px; color:#000;} .product_type .area2 .txt_info {display:block; margin:6px 0;} .product_type .area2 .txt_type1 {margin:3px 0 -2px; font-size:13px;} .product_type .area2 .txt_type1 > li {color:#8693a0;} .product_type .area2 .txt_type1 > li + li {margin:0;} .product_type .area2 .txt_type1 > li:before {background:#8693a0;} /* PRODUCTTYPE :금액 */ .product_type .area3 {position:absolute; top:0; bottom:12px; right:16px; z-index:2; width:173px; text-align:right;} .product_type .area3:before {content:''; display:inline-block; width:0.01%; height:calc(100% - 48px); vertical-align:middle;} .product_type .area3 .txt_data {display:inline-block; padding:0; width:calc(100% - 4px); vertical-align:middle; border-top:0; border-bottom:0;} .product_type .area3 .txt_data dt {display:block; margin-bottom:2px; font-size:15px; color:#5b646e;} .product_type .area3 .txt_data em {font-size:12px; color:#8693a0;} .product_type .area3 .txt_data s {display:block; margin-bottom:5px; font-size:14px; color:#8693a0;} .product_type .area3 .btn_type4 {position:absolute; bottom:0; left:0; right:0; padding:0;} .product_type .area3 [data-tooltip] {margin-top:5px;} .product_type .area3 [data-tooltip]:hover > .tooltip_type {right:-16px; width:175px;} .product_type .area3 [data-tooltip]:hover > .tooltip_type > dt {margin-top:0; margin-bottom:6px; font-size:14px; color:#020219;} .product_type .area3 [data-tooltip]:hover > .tooltip_type.txt_type1 > dd {font-size:13px; color:#020219;} .product_type .area3 [data-tooltip="info"] > strong {font-weight:400; color:#8693a0; font-size:13px;} .product_type .area3 [data-tooltip="info"] > strong:before, .product_type .area3 [data-tooltip="info"] > strong:after {border-color:#8693a0;} .product_type .area3 [data-tooltip="priceinfo"] {padding-top:45px;} /* PRODUCTTYPE :호텔 */ .product_type[data-product="hotel"] .area2 {padding-bottom:56px;} .product_type[data-product="hotel"] .area2 .box1, .product_type[data-product="hotel"] .area2 .box2, .product_type[data-product="hotel"] .area2 .trip, .product_type[data-product="hotel"] .area2 .count {overflow:hidden; position:absolute; left:0; width:100%; text-overflow:ellipsis; white-space:nowrap;} .product_type[data-product="hotel"] .area2 .icm4 > span, .product_type[data-product="hotel"] .area2 .trip > span {overflow:hidden; display:block; position:absolute; top:0; padding-left:1px; width:0; height:1px; white-space:nowrap;} .product_type[data-product="hotel"] .area2 .trip {bottom:-2px; z-index:3; margin:0;} .product_type[data-product="hotel"] .area2 .trip > .txt_data4 {padding:0 0 0 30px;} .product_type[data-product="hotel"] .area2 .trip > .txt_data4:before {content:''; display:block; position:absolute; top:4px; left:0; width:22px; height:13px; background:url("../img/common/icon_set1.png") no-repeat -720px -80px;} .product_type[data-product="hotel"] .area2 .trip > .txt_data4:hover em {text-decoration:underline; text-underline-position:under;} .product_type[data-product="hotel"] .area2 .count {bottom:0; margin:0; padding:0 0; font-size:13px; color:#393992; font-weight:400;} .product_type[data-product="hotel"] .area2 .count > strong {font-weight:400;} .product_type[data-product="hotel"] .area2 .trip ~ .count {left:87px; padding-left:10px} .product_type[data-product="hotel"] .area2 .trip ~ .count:before {content:''; display:block; position:absolute; left:0; top:6px; width:1px; height:11px; background:#cdd0d3;} .product_type[data-product="hotel"] .area2 .box1 {bottom:34px; font-size:13px; color:#2096ce;} .product_type[data-product="hotel"] .area2 .box1 .icm4 + i {margin-left:6px; color:#5b646e;} .product_type[data-product="hotel"] .area2 .box1.txt_type1:before {background-color:#2096ce;} .product_type[data-product="hotel"] .area2 .box2 {bottom:-2px; z-index:3; margin:0;} .product_type[data-product="hotel"] .area2 .box2 > dt, .product_type[data-product="hotel"] .area2 .box2 > dd {display:inline; vertical-align:middle; font-weight:700;} .product_type[data-product="hotel"] .area2 .box2 > dt {position:relative; z-index:1; padding:0 12px 0 4px; color:#fff; font-size:11px;} .product_type[data-product="hotel"] .area2 .box2 > dt:before {content:''; display:block; position:absolute; top:-1px; bottom:-2px; left:0; right:8px; z-index:-1; background:#8693a0; border-radius:2px 0 0 2px} .product_type[data-product="hotel"] .area2 .box2 > dt:after {content:''; display:block; position:absolute; top:-1px; bottom:0; right:-6px; z-index:-1; width:0; height:0; border:8px solid transparent; border-left:6px solid #8693a0} .product_type[data-product="hotel"] .area2 .box2 > dd {margin-right:2px; color:#8693a0;} .product_type[data-product="hotel"] .area2 .box2 > dd:before {content:'#';} /* PRODUCTTYPE :렌터카 */ .product_type[data-product="rentalcar"] {margin-top:14px; border-top-color:#5b646e;} .product_type[data-product="rentalcar"] > li:before {right:235px;} .product_type[data-product="rentalcar"] .area1 {width:187px; height:137px; border-radius:5px;} .product_type[data-product="rentalcar"] .area1 img {max-width:100%; max-height:100%;} .product_type[data-product="rentalcar"] .area2 {padding-right:0; padding-bottom:25px; width:calc(100% - 410px);} .product_type[data-product="rentalcar"] .area2 cite {display:block; margin-top:5px; text-overflow:ellipsis; white-space:nowrap;} .product_type[data-product="rentalcar"] .area2 .icon_txt3:not(.t1) {position:static; display:inline-block; padding:0 5px; width:auto; height:18px; line-height:16px; border-radius:2px; font-size:12px; font-weight:400; vertical-align:top;} .product_type[data-product="rentalcar"] .area2 .icon_txt3.t1 {position:absolute; top:5px; left:-76px;} .product_type[data-product="rentalcar"] .area2 .info {margin:8px 0;} .product_type[data-product="rentalcar"] .area2 .info > dt {overflow:hidden; position:absolute; padding-left:1px; width:0; height:1px; white-space:nowrap;} .product_type[data-product="rentalcar"] .area2 .info > dd.icon_txt2 {margin-right:5px; min-width:48px; border-color:#dee0e2; color:#5b646e;} .product_type[data-product="rentalcar"] .area2 .info > dd.icon_com2 {display:block; margin:6px 0 0;} .product_type[data-product="rentalcar"] .area2 .info2 {position:absolute; left:0; bottom:-3px; margin:0; font-size:14px; font-weight:400; color:#8693a0;} .product_type[data-product="rentalcar"] .area2 .info2 > strong {font-weight:400;} .product_type[data-product="rentalcar"] .area2 .info2 > span + span:before {content:' / ';} .product_type[data-product="rentalcar"] .area3 {width:190px;} /* PRODUCTTYPE :IE */ @media screen and (min-width:0\0) { .product_type[data-product="hotel"] .area2 .box2 > dt:after {right:-5px;} } /*-------------------------------------------------------------------------------- # 상품 :리스트형2 ---------------------------------------------------------------------------------*/ .product_type2:not(ul), .product_type2 > li {display:-webkit-box; display:-ms-flexbox; display:flex; align-items:center;} .product_type2 {position:relative; padding:12px 0; border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6;} .product_type2 > li {position:relative; padding:12px 0; border-top:1px solid #dee0e2;} .product_type2 > li:first-child {border-top:0; margin-top:-12px;} .product_type2 > li:last-child {margin-bottom:-12px;} .product_type2 > a:not([class]), .product_type2 > li > a:not([class]) {overflow:hidden; display:block; position:absolute; top:0; left:0; z-index:3; padding-left:100%; width:0; height:100%; white-space:nowrap;} .product_type2 .data1, .product_type2 .data2 {overflow:hidden; display:block; float:left; width:98%; text-overflow:ellipsis;} .product_type2 .data1 {display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.45; height:2.9em;} .product_type2 .data1.t1 {height:auto; max-height:2.9em;} .product_type2 .data2 {white-space:nowrap;} .product_type2 .txt_info {font-size:13px; letter-spacing:-0.05em;} /* PRODUCTTYPE2 :이미지영역 */ .product_type2 .area1 {display:block; width:150px; height:110px;} .product_type2 .area1:before {transform:scale(0.7)} .product_type2 .area1[data-air-logo] {padding-top:71px; background-color:#fff; background-position:50% 22px; background-size:auto 50px; line-height:1.5; text-align:center; color:#5b646e; box-sizing:border-box;} /* PRODUCTTYPE2 :정보영역 */ .product_type2 .area2 {-ms-flex:1; flex:1; position:relative; padding-top:3px; margin-left:16px; max-width:calc(100% - 140px); min-height:95px; font-size:13px; box-sizing:border-box;} .product_type2 .area2 cite {margin:8px 0 -1px; font-size:15px; font-weight:700; color:#020219;} .product_type2 .area2 cite:first-child {margin-top:-2px;} .product_type2 .area2 .data1 ~ *:not(.data3), .product_type2 .area2 .data2 ~ *:not(.data3) {float:left; display:block; width:100%;} .product_type2 .area2 .data2 + .data2 {margin:0 0 5px;} .product_type2 .area2 .data3 {display:inline; margin-left:4px;} .product_type2 .area2 .data3:not(.txt_info.t1) > dd {font-weight:700; letter-spacing:-0.08em;} .product_type2 .area2 .data3 > i, .product_type2 .area2 .data3 > time {display:inline-block; color:#000; vertical-align:middle;} .product_type2 .area2 .data3 > i + i, .product_type2 .area2 .data3 > i + time {position:relative; padding-left:19px;} .product_type2 .area2 .data3 > i + i:before, .product_type2 .area2 .data3 > i + time:before {content:''; display:block; position:absolute; top:4px; left:9px; width:1px; height:12px; background:#cfd1d3;} .product_type2 .area2 .data3 dt:nth-child(1) + dd:after {display:none!important;} .product_type2 .area2 .icon_com3 > em {overflow:hidden; display:block; position:absolute; padding-left:1px; width:0; height:0; white-space:nowrap;} .product_type2 .area2 .txt_info > dt {color:#5b646e;} .product_type2 .area2 .txt_info .btn_small {position:relative; z-index:10; margin:-4px 0 -4px 5px;} .product_type2 .area2 .txt_info.t1 {margin-top:8px;} .product_type2 .area2 .txt_info.t1.data3:last-child > dd:not(:last-child) {float:left;} .product_type2 .area2 .txt_info.t1.data3:last-child > dd:nth-child(2):after, .product_type2 .area2 .txt_info.t1.data3:last-child > dd:last-child:after {display:none;} .product_type2 .area2 .txt_info2 {min-height:60px; margin-top:5px;} .product_type2 .area2 .txt_info2 > dt, .product_type2 .area2 .txt_info2 > dd {float:none; display:inline-block; margin:1px 0; vertical-align:top;} .product_type2 .area2 .txt_info2 > dt {width:65px; color:#8693a0;} .product_type2 .area2 .txt_info2 > dt:after {display:none;} .product_type2 .area2 .txt_info2 > dd {width:calc(100% - 70px);} .product_type2 .area2 .txt_data {margin-top:7px; text-align:left;} .product_type2 .area2:after {content:''; display:block; clear:both;} /* PRODUCTTYPE2 :기타영역 */ .product_type2 .area3 {width:150px; padding-right:16px; text-align:right; color:#5b646e;} .product_type2 .area3 > dt {overflow:hidden; display:block; position:absolute; padding-left:1px; width:0; height:0; white-space:nowrap;} .product_type2 .area3 .icon_txt2 {float:right; clear:right; margin:2px 0;} .product_type2 .area3 .txt_info {margin:2px 0;} .product_type2 .area3 [class*="btn_"] {margin:5px 0;} .product_type2 .area3 .btn_del {right:6px; top:7px; z-index:4;} .product_type2 .area3 .btn_del + .txt_info {position:absolute; right:16px; bottom:14px;} .product_type2 .area3.t1 {padding-right:0; text-align:center;} /* PRODUCTTYPE2 :이미지사이즈 :114px */ .product_type2.t1 .area1 {width:114px; height:73px;} .product_type2.t1 .area2 {padding-top:2px; min-height:73px;} .product_type2.t1 .area2 cite {font-size:14px;} .product_type2.t1 .area2 .data2 + .data2 {margin-bottom:0; font-weight:700; font-size:14px;} .product_type2.t1 .area2 .txt_info2 {min-height:0; margin-bottom:1px;} .product_type2.t1 .area2 .txt_info2 > dt, .product_type2.t1 .area2 .txt_info2 > dd {color:#5b646e;} .product_type2.t1 .area2 .txt_info2 > dt {width:58px; font-weight:700;} .product_type2.t1 .btn_type {opacity:0; position:absolute; bottom:13px; right:12px;} .product_type2.t1 .txt_data strong {font-size:20px; font-weight:400;} .product_type2.t1 .txt_data span {font-size:14px;} .product_type2.t1 li {padding:12px;} .product_type2.t1 li.on + li {border-color:transparent;} .product_type2.t1 li.on:before {content:''; display:block; position:absolute; top:-1px; left:0; right:0; bottom:-1px; border:3px solid #24aae1;} .product_type2.t1 li.on .btn_type {opacity:1;} /* 체크박스있을시 */ .product_type2.t1 .choice_type1 {margin-left:4px; margin-right:3px;} .product_type2.t1 .choice_type1 ~ .area2 .data2 + .data2 {margin-top:-3px;} /* 단독 */ div.product_type2.t1 .area2 cite, div.product_type2.t1 .area2 .data2 + .data2 {font-size:16px;} div.product_type2.t1 .area2 cite {margin-top:3px;} div.product_type2.t1 .area2 .data2 + .data2 {margin-top:-1px;} /* PRODUCTTYPE2 :이미지사이즈 :210px */ .product_type2.t2 .area1 {width:210px; height:156px;} .product_type2.t2 .area2 {font-size:14px;} .product_type2.t2 .area2 cite {font-size:18px;} .product_type2.t2 .area2 .txt_info2 {margin-top:5px;} .product_type2.t2 .area2 .txt_info2 > dt, .product_type2.t2 .area2 .txt_info2 > dd {margin:5px 0 6px;} .product_type2.t2 .area2 .txt_info2 > dt {width:45px; color:#020217; font-weight:700;} /* PRODUCTTYPE2 :2단 그리드 */ .product_type2.t3{overflow:hidden; border:0;} .product_type2.t3 > li {float:left; width:50%; padding:10px 0; border-top:0; margin-top:0;} .product_type2.t3 .area1 {width:120px; height:84px;} .product_type2.t3 .area2 {padding:0; width:calc(100% - 138px); min-height:0; height:84px;} .product_type2.t3 .area2 cite, .product_type2.t3 .area2 time, .product_type2.t3 .area2 cite + strong {font-size:16px; line-height:1.1} .product_type2.t3 .area2 cite {float:none; font-weight:400;} .product_type2.t3 .area2 time, .product_type2.t3 .area2 cite + strong {display:block; margin:5px 0; font-weight:700;} .product_type2.t3 .area2 .txt_data {position:absolute; bottom:0; left:0;} .product_type2.t3 .area2 .txt_data > strong {font-size:20px; font-weight:700;} .product_type2.t3 .area2 cite.data2 {display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; line-height:18px; max-height:36px;} /* PRODUCTTYPE2 :이벤트 :Hover */ .product_type2:not(.t1) > li:hover .area2 > .data1, div.product_type2:hover .area2 > .data1, .product_type2:not(.t1) > li:hover .area2 > .data2, div.product_type2:hover .area2 > .data2, .product_type2 .area2 > a:hover > .data1, .product_type2 .area2 > a:hover > .data2 {text-decoration:underline; color:#2096ce;} /* PRODUCTTYPE2 :활용 :BG 있음 */ .product_type2.box_area {padding-top:26px; padding-bottom:26px; border:0;} .product_type2.box_area .area2 {min-height:0;} .product_type2.box_area .area2 cite {font-size:16px;} /* PRODUCTTYPE2 :활용 :table 컨텐츠 */ [class*="tbl_type"] .product_type2 {border:0; padding:0; text-align:left;} .tbl_type2 .area2 .product_type2 {margin-bottom:15px; padding:6px !important; border:1px solid #adb1b6; border-radius:5px; background:#fff;} .tbl_type2 .area2 .product_type2 .area1 {width:150px; height:100px;} .tbl_type2 .area2 .product_type2 .area2 {max-width:calc(100% - 180px)} .tbl_type2 .area2 .product_type2 .area2 cite {height:auto; max-height:2.9em; margin-top:3px; font-size:15px;} .tbl_type2 .area2 .product_type2 .area2 .data2 + .data2 {margin-top:-1px; font-weight:400; font-size:13px;} .tbl_type2 .area2 .product_type2 .area2 .data3 {float:left; margin-top:10px; font-size:13px; color:#adb1b6; display:block;} .tbl_type2 .area2 .product_type2 .area2 .data3:before {content:""; width:20px; height:14px; margin-bottom:-3px; background:url("../img/common/icon_set1.png") no-repeat -920px 0; display:inline-block;} /* PRODUCTTYPE2 :간격 */ .product_type2 + .tbl_type1 {margin-top:30px;} /* PRODUCTTYPE2 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { div.product_type2, section.product_type2, .product_type2 > li {display:block;} .product_type2 .area1, .product_type2 .area2, .product_type2 .area3 {display:inline-block; vertical-align:middle;} .product_type2:not(.t1):not(.t3) .area2 {width:calc(100% - 340px);} [class*="tbl_type"] .product_type2 .area2 {width:calc(100% - 180px);} } /*-------------------------------------------------------------------------------- # 상품 :항공서브메인 ---------------------------------------------------------------------------------*/ .product_type3 {overflow:visible !important; display:-webkit-box; display:-ms-flexbox; display:flex; white-space:nowrap;} .product_type3 > dt {overflow:hidden; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; justify-content:flex-end; position:relative; z-index:1; padding:30px 18px; width:134px; height:268px; border-radius:5px; background:url("../img/common/bg_area.png") no-repeat 0 0; font-size:20px; line-height:1.33; color:#fff; letter-spacing:-0.03em;} .product_type3 > dt strong {display:block; font-size:24px;} .product_type3 > dt span {display:block; width:38px; text-align:center;} .product_type3 > dd {-ms-flex:0; flex:0; width:0; height:328px; transition:padding 0.3s;} .product_type3 > dd > .btn_small2 {display:none; position:absolute; top:-34px; right:0;} .product_type3 > dd + dt {margin-left:16px;} .product_type3 > dd .product_type2.t3 {min-width:500px;} .product_type3 > dd .product_type2.t3 em {line-height:24px;} .product_type3 > dt.open + dd {-ms-flex:1; flex:1; overflow:visible !important; padding:0 16px; width:0; height:328px !important;} .product_type3 > dt.open + dd > .btn_small2 {display:block;} .product_type3 > dt.open + dd + dt {margin-left:0;} .product_type3 .btn_toggle:before, .product_type3 .btn_toggle:after {display:none !important;} /* 국내항공 > 제주여행 완벽해결 */ .flight .product_type3 > dd .product_type2.t3[data-update="up20200617"] {min-width:364px;} .flight .product_type3 > dd .product_type2.t3[data-update="up20200617"] > li {width:95%; float:none;} /* PRODUCTTYPE3 :국내숙박 */ .product_type3.t1 > dt {font-size:18px; font-weight:700;} .product_type3.t1 > dt:not(.open) {padding-left:0; padding-right:0; width:77px; text-align:center;} .product_type3.t1 > dt:not(.open):before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1; background:rgba(0,0,0,0.6)} .product_type3.t1 > dt:not(.open) span {width:auto;} .product_type3.t1 > dt:after {content:''; display:block; position:absolute; top:29px; left:19px; width:40px; height:40px; background:url('../img/common/icon_set1.png') no-repeat -720px -720px; transition:left 0.3s;} .product_type3.t1 > dt.img2:after {background-position:-760px -720px;} .product_type3.t1 > dt.img3:after {background-position:-800px -720px;} .product_type3.t1 > dt.open:after {left:23px;} .product_type3.t1 .img1 {background-position:0 0;} .product_type3.t1 .img2 {background-position:-170px 0;} .product_type3.t1 .img3 {background-position:-340px 0;} /* PRODUCTTYPE3 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_type3 {display:block; font-size:0;} .product_type3 dt, .product_type3 dd {display:inline-block;} .product_type3 > dt.open + dd {width:calc(100% - ((168px * 4) + (32px * 2) + (4px * 2))) !important;} .product_type3.t1 > dt.open + dd {width:calc(100% - ((77px * 2) + 168px + (16px * 3))) !important;} .product_type3.t1 > dt:after {display:none;} } /*-------------------------------------------------------------------------------- # 상품 :항공상품 ---------------------------------------------------------------------------------*/ .product_type4 {width:calc(100% + 8px); margin:11px -4px 0 -4px; display:table; table-layout:fixed;} .product_type4 > li {padding:0 4px; display:table-cell; overflow:hidden;} .product_type4 > li a {position:relative; padding:18px 0 20px; color:#020219; border-radius:5px; overflow:hidden; display:block; z-index:1; font-size:0;} .product_type4 > li a:before, .product_type4 > li a:after {content:""; position:absolute; left:75px; width:12px; height:12px; border-radius:50%; box-shadow:91px 0 0 108px rgba(255,255,255, 1); z-index:-1;} .product_type4 > li a:before {top:-6px;} .product_type4 > li a:after {bottom:-6px;} /* PRODUCTTYPE4 :항공로고 */ .product_type4 .area1, .product_type4 .area2 {display:inline-block; vertical-align:middle;} .product_type4 .area1 {position:static; margin-bottom:-2px; width:82px; background-color:transparent; font-size:12px; line-height:1.5; text-align:center; color:#5b646e;} .product_type4 .area1:before {content:""; position:absolute; left:0; top:0; width:75px; height:100%; background-color:#fff; z-index:-2;} .product_type4 .area1[data-air-logo] {padding-top:37px; height:auto; background-size:auto 35px; background-position:50% 0;} /* PRODUCTTYPE4 :내용 */ .product_type4 .area2 {width:calc(100% - 86px); padding-left:17px; vertical-align:middle; display:inline-block; box-sizing:border-box;} .product_type4 .area2:before {content:""; position:absolute; left:81px; top:8px; bottom:8px; width:1px; background-image:linear-gradient(#dee0e2 2px, #fff 1px); background-size:1px 3px;} .product_type4 .area2 dl:before {content:""; position:absolute; right:0; bottom:0; width:50px; height:100px; background-color:#adb1b6; transform:rotate(45deg); transform-origin:0 100%; transition:all 0.3s ease;} .product_type4 .area2 dl:after {content:""; position:absolute; right:6px; bottom:6px; width:18px; height:18px; background:url("../img/common/icon_set1.png"); background-position:-400px -40px; transition:all 0.3s ease;} .product_type4 .area2 dl dt {overflow:hidden; position:absolute; padding-left:1px; width:0; height:0; white-space:nowrap;} .product_type4 .area2 dl dd {margin-top:2px; font-size:14px; color:#5b646e;} .product_type4 .area2 time {font-weight:700; color:#2096ce;} .product_type4 .area2 .icon_txt1 {font-size:12px; background-color:transparent; border-color:#adb1b6; color:#5b646e;} .product_type4 .area2 .txt_data {margin-top:3px; font-size:16px;} .product_type4 .area2 .txt_data span {display:inline-block; margin-bottom:2px; font-size:1em;} .product_type4 .area2 .txt_data3 {vertical-align:middle;} /* PRODUCTTYPE4 :마우스오버 */ .product_type4 > li a:hover:before, .product_type4 > li a:hover:after {left:74px; border:2px solid #24aae1; box-shadow:91px 0 0 107px rgba(238,248,253, 1);} .product_type4 > li a:hover:before {top:-8px;} .product_type4 > li a:hover:after {bottom:-8px;} .product_type4 > li a:hover .area1, .product_type4 > li a:hover .area1:before {background-color:#eef8fd;} .product_type4 > li a:hover .area1:after {content:""; position:absolute; left:0; top:0; width:76px; height:100%; border:solid #24aae1; border-width:2px 0 2px 2px; border-radius:5px 0 0 5px; box-sizing:border-box;} .product_type4 > li a:hover .area2:after {content:""; position:absolute; left:89px; right:0; top:0; height:100%; border:solid #24aae1; border-width:2px 2px 2px 0; border-radius:0 5px 5px 0; box-sizing:border-box;} .product_type4 > li a:hover .area2 dl:before, .product_type4 > li a:hover .area2 dl:after {opacity:0;} /*-------------------------------------------------------------------------------- # 상품 :현지투어상품 ---------------------------------------------------------------------------------*/ .product_type5 {margin-bottom:4px;} .product_type5 li a {overflow:hidden; padding:3px 0 3px; display:inline-block; width:calc(100% - 20px); white-space:nowrap; text-overflow:ellipsis; vertical-align:middle; color:#020219; font-size:13px;} .product_type5 li.txt_b1 a {color:#4b4bac;} .product_type5 li.txt_b4 a {color:#adb1b6; cursor:default;} /*-------------------------------------------------------------------------------- # 상품 :항공(스케줄) ---------------------------------------------------------------------------------*/ /* [공통] 상세검색 */ .tab_wrap + .product_type6 {margin-top:21px;} .product_type6 .head {position:relative; border-top:1px solid #5b646e; z-index:2;} .product_type6 .head > li {position:relative; float:left; height:48px; z-index:5;} .product_type6 .list:after, .product_type6 .head:after {clear:both; content:""; display:block;} .product_type6 .head > li > a, .product_type6 .head > li > span {width:100%; height:100%; font-weight:700; font-size:14px; color:#020219; text-align:center; background-color:#eff2f6; display:block;} .product_type6 .head > li > a:before, .product_type6 .head > li > span:before {content:""; width:1px; height:100%; margin-right:-4px; vertical-align:middle; display:inline-block;} .product_type6 .head > li > a:after {content:""; width:9px; height:5px; margin-right:-9px; margin-left:5px; background:url("../img/common/icon_set2.png") no-repeat -280px -140px; display:inline-block;} .product_type6 .head > li.on > a {color:#fff; background-color:#24aae1;} .product_type6 .head > li.on > a:after {background-position:-180px -120px;} .product_type6 .head .form_filter {position:absolute; left:0; top:100%; min-width:100%; max-height:398px; border:2px solid #24aae1; display:none;} .product_type6 .head .on .form_filter {display:block;} .product_type6 .head > li:last-child .form_filter{left:auto; right:0;} .product_type6 .head .cell1 .form_filter, .product_type6 .head .cell2 .form_filter, .product_type6 .head .cell3 .form_filter {width:210px;} .product_type6 .head .form_filter [class*="choice_type"]:hover em {font-weight:700; color:#24aae1;} /* [공통] 목록 영역 */ .product_type6 .list {border-top:1px solid #adb1b6;} .product_type6 .list [class*="cell"] {padding:12px 0 12px 0; font-size:14px; text-align:center; vertical-align:middle; display:inline-block; box-sizing:border-box;} .product_type6 .list > .item {position:relative; font-size:0; border-bottom:1px solid #dee0e2;} .product_type6 .list > .item:before {content:""; width:1px; margin-right:-1px; vertical-align:middle; display:inline-block;} .product_type6 .list > .item.on, .product_type6 .list > .item:hover, .product_type6 .list > .item.on .btn_img1, .product_type6 .list > .item:hover .btn_img1, .product_type6 .list > .item.on .cell1 [data-air-logo], .product_type6 .list > .item:hover .cell1 [data-air-logo], .product_type6 .list > .item.on > .txt_data2:after, .product_type6 .list > .item:hover > .txt_data2:after {background-color:#eef8fd;} .product_type6 .list > .item [data-flag="7"] + [data-air-logo]:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:-1; background:#fafafa;} .product_type6 .list .drag_slider1type2 {margin:29px 0;} .product_type6:not(.ing) .list .drag_slider1type2 + div {border-top:1px solid #dee0e2;} .product_type6 .list [data-air-logo] {font-weight:700; font-size:16px; vertical-align:middle;} .product_type6 .list .txt_data + .btn_img2 {margin-left:-5px;} /* [공통] 검색결과없음 */ .product_type6 .mes_data_none {border:0; border-radius:0;} /* [스케줄] 목록 영역 */ .product_type6[data-list="schedule"] .list [class*="icon_txt"] {position:absolute; top:17px; left:0;} .product_type6[data-list="schedule"] .list .btn_small2 {margin:2px 0;} .product_type6[data-list="schedule"] .list .cell1 {padding:43px 0 35px 0; text-align:center;} .product_type6[data-list="schedule"] .list .cell1 [data-air-logo] {width:100%; padding:42px 15px 0 15px; font-weight:700; font-size:14px; line-height:1.08; background-size:auto 40px; background-position:50% 0; box-sizing:border-box;} .product_type6[data-list="schedule"] .list .cell3 {padding:0 10px; box-sizing:border-box;} .product_type6[data-list="schedule"]:not(.t1) .list .cell4:not(.open) + .cell5 {margin-left:29%;} .product_type6[data-list="schedule"] .list .cell4 {position:absolute; top:-1px; bottom:0; z-index:1; padding:0 0 36px;} .product_type6[data-list="schedule"] .list .cell4:before, .product_type6[data-list="schedule"] .list .cell4:after {content:''; position:absolute; top:0; bottom:0; width:1px; background:#dee0e2;} .product_type6[data-list="schedule"] .list .cell4:before {left:0;} .product_type6[data-list="schedule"] .list .cell4:after {right:0;} .product_type6[data-list="schedule"] .list .cell4 fieldset {overflow:hidden; position:absolute; width:100%; height:calc(100% - 36px);} .product_type6[data-list="schedule"] .list .cell4 > button {position:absolute; bottom:0; left:1px; display:block; width:100%; height:36px; font-size:0; line-height:0; color:transparent;} .product_type6[data-list="schedule"] .list .cell4 > button:before {content:'더보기'; font-size:13px; color:#020219;} .product_type6[data-list="schedule"] .list .cell4 > button:after {content:''; display:inline-block; margin-left:6px; width:9px; height:6px; background:url("../img/common/icon_set2.png") no-repeat -280px -100px;} .product_type6[data-list="schedule"] .list .cell4.open, .product_type6[data-list="schedule"] .list .cell4.open fieldset {position:relative;} .product_type6[data-list="schedule"] .list .cell4.open > button:before {content:'접기';} .product_type6[data-list="schedule"] .list .cell4.open > button:after {background-position:-280px -80px} .product_type6[data-list="schedule"] .list .cell4 label {display:block; position:relative; padding:0 17px; line-height:36px; font-size:13px; cursor:pointer;} .product_type6[data-list="schedule"] .list .cell4 label + label {margin-top:-1px;} .product_type6[data-list="schedule"] .list .cell4 label > input {position:absolute; top:0; left:0; bottom:0; right:0; opacity:0;} .product_type6[data-list="schedule"] .list .cell4 label > em {overflow:hidden; display:inline-block; width:60%; margin-right:-6px; text-align:left; color:#5b646e; text-overflow:ellipsis; white-space:nowrap; vertical-align:top;} .product_type6[data-list="schedule"] .list .cell4 label > strong {display:inline-block; width:40%; text-align:right; color:#5b646e; vertical-align:top;} .product_type6[data-list="schedule"] .list .cell4 label > strong:before {content:''; display:block; position:absolute; top:0; left:-1px; bottom:0; right:-1px; border:1px solid #dee0e2;} .product_type6[data-list="schedule"] .list .cell4 label > input:checked ~ em, .product_type6[data-list="schedule"] .list .cell4 label > input:checked ~ strong {color:#020219; font-weight:700;} .product_type6[data-list="schedule"] .list .cell4 label > input:checked ~ strong:before {left:0; right:0; z-index:2; border-color:#24aae1;} .product_type6[data-list="schedule"] .list .cell4 label > input:checked ~ strong:after {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:-1; background:#fff;} .product_type6[data-list="schedule"] .list li:first-child .cell4 legend + label > input:checked ~ strong:before {top:1px;} .product_type6[data-list="schedule"] .list .item:first-child .cell4 legend + label > input:not(:checked) ~ strong:before {border-top-color:#adb1b6} .product_type6[data-list="schedule"] .list .cell4 > p {padding:85px 16px 0; text-align:left; line-height:1.5; font-size:13px; color:#5b646e;} .product_type6[data-list="schedule"] .list .cell4 > p > strong {display:block; color:#ff464d; font-weight:400;} .product_type6[data-list="schedule"] .list .cell5 {padding:12px 10px; font-size:0; text-align:right;} .product_type6[data-list="schedule"] .list .cell5 > i {display:block; padding-right:45px; color:#5b646e; line-height:1;} .product_type6[data-list="schedule"]:not(.t1) .list .cell5 .txt_data {display:block} .product_type6[data-list="schedule"] .list .cell5 .btn_img1 {margin-left:4px; color:#8693a0; background-color:transparent; border:0;} .product_type6[data-list="schedule"] .list .cell5 .btn_img1:before {left:auto; right:0; margin-left:0 !important; margin-right:0 !important;} .product_type6[data-list="schedule"] .list .cell5 .btn_img1:after {content:""; display:block; position:absolute; left:4px; top:50%; margin:-6px 0; width:1px; height:13px; background:#ccc; /*vertical-align:middle;*/} .product_type6[data-list="schedule"] .list .cell5 .btn_type3 {margin-top:12px; width:100%;} .product_type6[data-list="schedule"] .list .cell5 .btn_txt {margin-left:8px; margin-top:-3px; font-size:13px; vertical-align:middle;} .product_type6[data-list="schedule"] .list .cell5 .btn_txt + .btn_txt:before {margin-top:1px; margin-right:8px; height:13px;} .product_type6[data-list="schedule"] .list li:first-child .area4 legend + label > input:checked ~ strong:before {top:1px;} .product_type6[data-list="schedule"] .list .item:first-child .area4 legend + label > input:not(:checked) ~ strong:before {border-top-color:#adb1b6} .product_type6[data-list="schedule"] .list [data-tooltip] dfn {font-style:normal; color:#2096ce; border-bottom:1px solid #2096ce;} .product_type6[data-list="schedule"] .list dl.path {position:relative; font-size:0;} .product_type6[data-list="schedule"] .list dl.path dt {position:absolute; top:50%; left:50%; width:0; height:0; padding-left:1px; width:0; height:0; white-space:nowrap; overflow:hidden;} .product_type6[data-list="schedule"] .list dl.path dd {width:100%; font-size:14px; line-height:1.36; vertical-align:middle; display:inline-block;} .product_type6[data-list="schedule"] .list dl.path dd ~ dd {margin:18px 0 0 0;} .product_type6[data-list="schedule"] .list dl.path dd:only-of-type {margin-right:50%;} .product_type6[data-list="schedule"] .list dl.path dt:nth-last-child(2) {left:50%; width:50%; margin-left:0; background-color:transparent;} .product_type6[data-list="schedule"] .list dl.path dt:nth-last-child(2) * {width:0; height:1px; overflow:hidden;} .product_type6[data-list="schedule"] .list dl.path dt:nth-last-child(2):before {content:"-"; width:100%; height:16px; margin:-8px 0 0 0; font-size:12px; line-height:1.5; text-align:center; background-color:transparent; display:block; transform:rotate(0);} .product_type6[data-list="schedule"] .list dl.path dd > span {width:28%; vertical-align:middle; display:inline-block; box-sizing:border-box;} .product_type6[data-list="schedule"] .list .path .city i {display:block; margin-top:4px; font-size:14px; color:#5b646e; font-family:'Nanum Gothic'; font-weight:400;} .product_type6[data-list="schedule"] .list .path .city em, .product_type6[data-list="schedule"] .list .path .city time {line-height:1; display:block;} .product_type6[data-list="schedule"] .list .path .city time {position:relative; margin-top:4px; font-family:'Spoqa Han Sans'; font-size:20px; color:#020219; font-weight:700;} .product_type6[data-list="schedule"] .list .path .city time i {margin-top:0; margin-bottom:4px;} .product_type6[data-list="schedule"] .list .path .city time > span {display:inline-block; position:relative; margin-left:5px; margin:-4px -22px 0 5px; min-width:15px; height:15px; background:#fff; border:1px solid #24aae1; border-radius:2px; font-size:10px; line-height:15px; font-family:'Nanum Gothic'; color:#2096ce; vertical-align:middle; letter-spacing:-0.08em; text-align:center;} .product_type6[data-list="schedule"] .list .path .city time > span:before {content:''; display:block; position:absolute; top:50%; left:-3px; margin:-2px 0; width:3px; height:3px; background:#fff; border-left:1px solid #24aae1; border-top:1px solid #24aae1; transform:rotate(-45deg)} .product_type6[data-list="schedule"] .list .path dd > .txt_data2 {width:38%; margin:0 1%;} .product_type6[data-list="schedule"] .list .path dd .tooltip_type {width:246px;} .product_type6[data-list="schedule"] .list .txt_data s {display:block;} .product_type6[data-list="schedule"] .list .txt_data strong {font-size:27px;} .product_type6[data-list="schedule"] .list .txt_data [class*="icon_txt"] {margin-bottom:2px; vertical-align:text-bottom;} .product_type6[data-list="schedule"] .list [data-tooltip]:hover > .tooltip_type {min-width:180px;} /* 너비 설정 */ .product_type6[data-list="schedule"] .head .cell1, .product_type6[data-list="schedule"] .list .cell1 {width:13%;} .product_type6[data-list="schedule"] .head .cell2 {width:9%;} .product_type6[data-list="schedule"] .head .cell3 {width:14%;} .product_type6[data-list="schedule"] .head .cell4 {width:9%;} .product_type6[data-list="schedule"] .head .cell5 {width:9%;} .product_type6[data-list="schedule"] .head .cell6 {width:29%;} .product_type6[data-list="schedule"] .head .cell7 {width:17%;} .product_type6[data-list="schedule"] .head .cell4 .form_filter {width:210px;} .product_type6[data-list="schedule"] .head .cell5 .form_filter {width:135px;} .product_type6[data-list="schedule"] .head .cell7 .form_filter {width:260px;} .product_type6[data-list="schedule"] .list .cell2 {width:32%; padding:22px 0;} .product_type6[data-list="schedule"] .list .cell3 {width:9%;} .product_type6[data-list="schedule"] .list .cell4 {width:29%;} .product_type6[data-list="schedule"] .list .cell5 {width:17%;} /* 목록 설정 */ .product_type6[data-list="schedule"] .list > .item:before {height:177px;} /*-------------------------------------------------------------------------------- # 상품 :공동구매항공(요금) ---------------------------------------------------------------------------------*/ /* 너비 설정 */ .product_type6.t1[data-list="schedule"] .head .cell1 {width:13%;} .product_type6.t1[data-list="schedule"] .head .cell2 {width:9%;} .product_type6.t1[data-list="schedule"] .head .cell3 {width:14%;} .product_type6.t1[data-list="schedule"] .head .cell4, .product_type6.t1[data-list="schedule"] .head .cell5, .product_type6.t1[data-list="schedule"] .head .cell6 {width:9%;} .product_type6.t1[data-list="schedule"] .head .cell7 {width:18%;} .product_type6.t1[data-list="schedule"] .head .cell8 {width:7%;} .product_type6.t1[data-list="schedule"] .head .cell9 {width:12%;} .product_type6.t1[data-list="schedule"] .list .cell2 {width:32%;} .product_type6.t1[data-list="schedule"] .list .cell3, .product_type6.t1[data-list="schedule"] .list .cell4 {width:9%;} .product_type6.t1[data-list="schedule"] .list .cell5 {width:18%;} .product_type6.t1[data-list="schedule"] .list .cell6 {width:7%;} .product_type6.t1[data-list="schedule"] .list .cell7 {width:12%;} /* 목록 설정 */ .product_type6.t1[data-list="schedule"] .list .cell3 {padding:0;} .product_type6.t1[data-list="schedule"] .list .cell4 {position:static; padding:0 10px;} .product_type6.t1[data-list="schedule"] .list .cell4:before, .product_type6.t1[data-list="schedule"] .list .cell4:after {display:none;} .product_type6.t1[data-list="schedule"] .list .cell5 {padding:12px 10px 12px 0; font-size:13px;} /*-------------------------------------------------------------------------------- # 상품 :항공(요금) ---------------------------------------------------------------------------------*/ /* 너비 설정 */ .product_type6[data-list="fare"] .head .cell1, .product_type6[data-list="fare"] .list .cell1 {width:23%;} .product_type6[data-list="fare"] .head .cell2, .product_type6[data-list="fare"] .list .cell2 {width:16%;} .product_type6[data-list="fare"] .head .cell3, .product_type6[data-list="fare"] .list .cell3 {width:26%;} .product_type6[data-list="fare"] .head .cell4, .product_type6[data-list="fare"] .list .cell4 {width:12%;} .product_type6[data-list="fare"] .head .cell5, .product_type6[data-list="fare"] .list .cell5 {width:11%;} .product_type6[data-list="fare"] .head .cell6, .product_type6[data-list="fare"] .list .cell6 {width:12%;} .product_type6[data-list="fare"] .head .cell2 .form_filter {width:260px;} /* 목록 설정 */ .product_type6[data-list*="fare"] .list > .item:before {height:56px;} .product_type6[data-list*="fare"] .list .cell1 {padding-left:10px; text-align:left;} .product_type6[data-list*="fare"] .list .cell1 [data-air-logo] {float:left; max-width:calc(100% - 100px); padding-left:38px; line-height:2.5; text-overflow:ellipsis; white-space:nowrap; background-position:0 50%; background-size:auto 24px;} .product_type6[data-list*="fare"] .list .cell1 [data-air-logo]:only-child {max-width:100%;} .product_type6[data-list="fare"] .list .cell1 .icon_txt2 {margin:10px 0 0 10px;} .product_type6[data-list="fare"] .list .cell2 {padding-right:10px; font-size:13px; text-align:right;} .product_type6[data-list="fare"] .list .cell2 > i {display:block; padding-right:45px; color:#5b646e; line-height:1;} .product_type6[data-list*="fare"] .list .txt_data strong {font-size:21px;} .product_type6[data-list="fare"] .list .cell3 > strong {overflow:hidden; display:inline-block; max-width:80%; text-overflow:ellipsis; white-space:nowrap; font-weight:400; vertical-align:bottom;} .product_type6[data-list="fare"] .list .cell4 i {margin:0 5px; vertical-align:middle;} /* [요금별] 선택한 항공여정 */ .product_type6 article.info {position:relative; margin-bottom:-1px; padding:14px 24px 16px 24px; font-size:12px; border:2px solid #5b646e; background-color:#fff; display:none;} .product_type6 article.info .title {font-weight:700; font-size:17px; line-height:1.18; letter-spacing:-0.02em;} .product_type6 article.info > header {margin:-14px -24px 0;} .product_type6 article.info > header > ol {display:table; table-layout:fixed; width:100%;} .product_type6 article.info > header > ol > li {display:table-cell; position:relative; padding:0 13px; background:#8693a0; text-align:center;} .product_type6 article.info > header > ol > li > a {display:block; margin:0 -13px;} .product_type6 article.info > header > ol > li + li:before {content:''; display:block; position:absolute; top:11px; bottom:11px; left:0; width:1px; background:#abb4bd;} .product_type6 article.info > header > ol > li:not(.on) .icon_txt1 {border-color:#fff; background-color:#fff; color:#5b646e;} .product_type6 article.info > header > ol > li .txt_data3 {overflow:hidden; display:inline-block; padding:10px 0 11px; max-width:95%; vertical-align:top; text-overflow:ellipsis; white-space:nowrap;} .product_type6 article.info > header > ol > li .txt_data3 > * {display:inline;} .product_type6 article.info > header > ol > li.on {background:#fff;} .product_type6 article.info > header > ol > li.on:before, .product_type6 article.info > header > ol > li.on + li:before {display:none;} .product_type6 article.info > header > ol > li.on .txt_data3 {padding-bottom:10px; border-bottom:2px solid #24aae1; color:#2096ce;} .product_type6 article.info > header > ol > li.on .txt_data3 em:before {background-position-y:-280px !important;} .product_type6 article.info > header > ol > li:only-child.on .txt_data3 {display:block; max-width:100%;} .product_type6 article.info .calendar_date {width:230px; margin:17px auto 12px;} .product_type6 article.info .calendar_date time {font-size:18px;} .product_type6 article.info .calendar_date button {top:-2px; border:0;} .product_type6 article.info .box1 {float:left; margin:20px 0; width:620px; border:1px solid #adb1b6; height:166px;} .product_type6 article.info .box1 > header {position:relative; padding:0 20px; background:#dee0e2; font-size:15px; line-height:37px;} .product_type6 article.info .box1 > header .sub {position:absolute; top:-3px; right:20px;} .product_type6 article.info .box1 > header .sub .btn_img1 {border:0; background:none;} .product_type6 article.info .box1 > header .sub .btn_img1:before {background-position:-120px 0;} .product_type6 article.info .box1 > header .sub .btn_small2 {position:relative; margin-left:12px;} /*.product_type6 article.info .box1 > header .sub .btn_small2:before {content:''; display:block; position:absolute; top:4px; left:-11px; width:1px; height:14px; background:#adb1b6; }*/ .product_type6 article.info .box1 > header span {font-weight:400;} .product_type6 article.info .box1 > ol {display:table; table-layout:fixed; margin:20px 0; width:100%;} .product_type6 article.info .box1 > ol > li {display:table-cell; position:relative; padding:0 20px;} .product_type6 article.info .box1 > ol > li + li {border-left:1px solid #dee0e2;} .product_type6 article.info .box1 > ol > li > strong {font-size:15px; vertical-align:middle;} .product_type6 article.info .box1 > ol > li > dl {margin-top:11px;} .product_type6 article.info .box1 > ol > li > dl > dt {overflow:hidden; position:absolute; top:0; left:0; padding-left:1px; width:0; white-space:nowrap;} .product_type6 article.info .box1 > ol > li > dl > dd {line-height:25px;} .product_type6 article.info .box1 > ol > li > dl > dd > time {float:right; color:#5b646e;} .product_type6 article.info .box1 > ol > li > dl > dd > em {overflow:hidden; display:inline-block; max-width:calc(100% - 130px); text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;} .product_type6 article.info .box1 > ol > li > span {display:block; font-size:15px; font-weight:700; text-align:center;} .product_type6 article.info .box1 > ol > li > span:before {content:''; display:block; margin:17px auto 11px; width:40px; height:28px; background:url("../img/common/icon_set1.png") no-repeat -160px -160px;} .product_type6 article.info .box1 > ol > li.ico2 > span:before {background-position:-200px -160px;} .product_type6 article.info .box1 > ol > li:nth-last-child(3):first-child, .product_type6 article.info .box1 > ol > li:nth-last-child(3):first-child ~ li {padding:0 10px;} .product_type6 article.info .box1 > fieldset {overflow:auto; height:calc(100% - 37px);} .product_type6 article.info .box1 > fieldset .choice_type1 {display:block; padding:5px 20px 4px 44px;} .product_type6 article.info .box1 > fieldset .choice_type1 em:before {left:20px;} .product_type6 article.info .box1 > fieldset .choice_type1 em:after {left:25px;} .product_type6 article.info .box1 > fieldset .choice_type1 em, .product_type6 article.info .box1 > fieldset .choice_type1 strong {display:inline-block; margin-right:-4px; vertical-align:middle;} .product_type6 article.info .box1 > fieldset .choice_type1 em {overflow:hidden; width:60%; text-overflow:ellipsis; white-space:nowrap; color:#2096ce;} .product_type6 article.info .box1 > fieldset .choice_type1 strong {width:40%; text-align:right; font-size:14px; color:#ff464d;} .product_type6 article.info .box1 > fieldset .choice_type1 input:checked ~ strong:before {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:-1; background:#e9f6fc;} .product_type6 article.info .box1 > fieldset .choice_type1 input:checked + em {color:#020219;} .product_type6 article.info .box1 > fieldset .choice_type1 + .choice_type1 {margin-left:0;} .product_type6 article.info .box1 > fieldset p {padding:10px 20px; font-size:13px; line-height:1.5;} .product_type6 article.info .box1 > fieldset p strong {display:block; color:#ff464d; font-weight:400;} .product_type6 article.info .box1:nth-of-type(2) {float:right; width:410px;} .product_type6 article.info .tbl_group {margin:0 -24px -14px; width:calc(100% + 48px); border-bottom:0;} .product_type6 article.info .tbl_group .area1 {position:relative; overflow:visible; border-radius:0; background-color:transparent;} .product_type6 article.info .tbl_group .area1:before {display:none;} .product_type6 article.info > button {position:absolute; right:-50px; top:-2px; width:0; height:50px; padding-left:50px; background-color:#5b646e; overflow:hidden;} .product_type6 article.info > button:before {content:""; position:absolute; left:50%; top:50%; width:17px; height:16px; margin:-8px 0 0 -8px; background:url("../img/common/icon_set1.png") no-repeat -400px -240px; display:inline-block;} .product_type6 article.info > .txt_data {margin-top:14px;} .product_type6 article.info > .txt_data + .txt_type1 {width:75%; vertical-align:middle; display:inline-block;} .product_type6 .form_search1.t1 {display:none;} .product_type6 .list .on article.info, .product_type6 .list .on .form_search1.t1 {display:block; z-index:1; margin:0;} /*-------------------------------------------------------------------------------- # 상품 :공동구매항공(요금) ---------------------------------------------------------------------------------*/ /* 너비 설정 */ .product_type6[data-list="fare2"] .head .cell1, .product_type6[data-list="fare2"] .list .cell1 {width:19%;} .product_type6[data-list="fare2"] .head .cell2, .product_type6[data-list="fare2"] .list .cell2 {width:27%;} .product_type6[data-list="fare2"] .head .cell3, .product_type6[data-list="fare2"] .list .cell3, .product_type6[data-list="fare2"] .head .cell4, .product_type6[data-list="fare2"] .list .cell4 {width:10%;} .product_type6[data-list="fare2"] .list .cell4 {padding:0 10px;} .product_type6[data-list="fare2"] .head .cell5, .product_type6[data-list="fare2"] .list .cell5 {width:15%;} .product_type6[data-list="fare2"] .list .cell5 {padding-right:10px; font-size:13px; text-align:right;} .product_type6[data-list="fare2"] .head .cell6, .product_type6[data-list="fare2"] .list .cell6 {width:7%;} .product_type6[data-list="fare2"] .head .cell7, .product_type6[data-list="fare2"] .list .cell7 {width:12%;} .product_type6[data-list="fare2"] .head .cell1 .form_filter {width:auto;} .product_type6[data-list="fare2"] div.txt_data3 {position:relative;} .product_type6[data-list="fare2"] div[class*="cell"].txt_data3 > strong, .product_type6[data-list="fare2"] div[class*="cell"].txt_data3 > em {position:static; padding:0 15px; width:calc(50% - 4px); box-sizing:border-box;} .product_type6[data-list="fare2"] div[class*="cell"].txt_data3 > em:before {position:absolute; top:50%; left:50%; margin:-6px -10px;} .product_type6[data-list="fare2"] .list .cell3 > time:nth-last-child(3), .product_type6[data-list="fare2"] .list .cell3 > time:nth-last-child(3) + time {font-size:12px; color:#5b646e;} .product_type6[data-list="fare2"] .list .cell3 > b {display:block; line-height:27px;} .product_type6[data-list="fare2"] .list .cell4 i {margin:0 5px; vertical-align:middle;} .product_type6[data-list="fare2"] .list .btn_small2 {margin:2px 0;} /* [공동구매] 선택한 항공여정 */ .product_type6[data-list="fare2"] article.info .title {font-weight:700; font-size:17px; line-height:1.18; letter-spacing:-0.02em;} .product_type6[data-list="fare2"] article.info .txt_data {margin-top:14px;} .product_type6[data-list="fare2"] article.info .txt_type1 {width:75%; vertical-align:middle; display:inline-block;} .product_type6[data-list="fare2"] article.info .wrap_box {display:flex;} .product_type6[data-list="fare2"] article.info ol.box {display:flex; margin-top:14px; width:75%; min-height:317px; border-top:1px solid #40464d; border-bottom:1px solid #adb1b6;} .product_type6[data-list="fare2"] article.info ol.box li {width:50%; padding:26px 10px 22px 90px; box-sizing:border-box;} .product_type6[data-list="fare2"] article.info ol.box li + li {border-left:1px solid #dee0e2;} .product_type6[data-list="fare2"] article.info ol.box .data {display:flex; flex-direction:column; height:100%;} .product_type6[data-list="fare2"] article.info ol.box .data > dt {position:relative;} .product_type6[data-list="fare2"] article.info ol.box .data > dt [data-tooltip]:hover > .tooltip_type {left:calc((100%/2) - 230px);} .product_type6[data-list="fare2"] article.info ol.box .data > dd {display:flex; flex-direction:column; position:relative; margin-top:16px; padding-left:37px; height:100%;} .product_type6[data-list="fare2"] article.info ol.box .data > dd:before {content:""; position:absolute; left:12px; top:34px; bottom:27px; width:2px; background-color:#24aae1;} .product_type6[data-list="fare2"] article.info ol.box .data > dd:after {content:""; position:absolute; left:8px; bottom:27px; width:8px; height:8px; border:solid #24aae1; border-width:0 0 2px 2px; transform:rotate(-45deg); z-index:5;} .product_type6[data-list="fare2"] article.info ol.box .city {position:relative; display:block;} .product_type6[data-list="fare2"] article.info ol.box .city:before {content:""; position:absolute;} .product_type6[data-list="fare2"] article.info ol.box .city:first-child:before {left:-30px; top:9px; width:13px; height:17px; background:url("../img/common/icon_set1.png") no-repeat -560px 0;} .product_type6[data-list="fare2"] article.info ol.box .city:last-child:before {left:-31px; bottom:4px; width:8px; height:8px; border:3px solid #24aae1; border-radius:50%;} .product_type6[data-list="fare2"] article.info ol.box .city ~ .city {flex:none; margin-top:auto;} .product_type6[data-list="fare2"] article.info ol.box .city time, .product_type6[data-list="fare2"] article.info ol.box .city em {font-size:13px; line-height:1.54; color:#5b646e; display:block;} .product_type6[data-list="fare2"] article.info ol.box .city time i {font-family:'Spoqa Han Sans'; font-size:20px; line-height:1.5; color:#020217; letter-spacing:-0.02em;} .product_type6[data-list="fare2"] article.info ol.box [class*="icon_txt"] {position:absolute; left:-50px; top:1px;} .product_type6[data-list="fare2"] article.info ol.box [data-air-logo] {padding-left:30px; line-height:22px; vertical-align:middle;} .product_type6[data-list="fare2"] article.info ol.box [data-tooltip] dfn {font-style:normal;} .product_type6[data-list="fare2"] article.info ol.box + .txt_data {display:flex; flex-wrap:wrap; width:25%; min-height:317px;} .product_type6[data-list="fare2"] article.info ol.box + .txt_data:before {content:''; display:block; position:absolute; top:0; bottom:0; width:1px; height:100%; background:#dee0e2;} .product_type6[data-list="fare2"] article.info ol.box + .txt_data > dt {width:80px;} .product_type6[data-list="fare2"] article.info ol.box + .txt_data > dd {flex:none; width:calc(100% - 80px);} .product_type6[data-list="fare2"] article.info ol.box + .txt_data > dd + dt, .product_type6[data-list="fare2"] article.info ol.box + .txt_data > dd + dt ~ dd {border-top:1px solid #dee0e2;} .product_type6[data-list="fare2"] article.info .layover {position:absolute; left:9px; top:34px; bottom:27px; width:2px; border:solid #fff; border-width:0 3px; background-color:#24aae1; z-index:5;} .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) {top:50%; left:20px; width:0; margin-left:0; padding:0; border-color:transparent; opacity:1; visibility:visible;} .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) .tit, .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) > span {height:0; overflow:hidden; display:block;} .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) > span:before {content:""; position:absolute; left:-24px; width:8px; height:8px; margin-top:-6px; border-radius:50%; background-color:#adb1b6; box-shadow:0 0 0 5px rgba(255,255,255, 1);} .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) > span:nth-of-type(1):before {top:-20px;} .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) > span:nth-of-type(2):before {top:20px;} .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) > span:nth-of-type(1):last-child:before {top:0;} .product_type6[data-list="fare2"] article.info .data .tooltip_type:not(.codeshare) > span:after {clear:both; content:""; display:block;} .product_type6[data-list="fare2"] article.info .layover:hover .tooltip_type {width:246px; padding:16px 20px; border-color:#5b646e; box-sizing:border-box;} .product_type6[data-list="fare2"] article.info .layover:hover .tooltip_type .tit, .product_type6[data-list="fare2"] article.info .layover:hover .tooltip_type > span {height:auto;} .product_type6[data-list="fare2"] article.info > a {width:25%; margin:16px 0 0 -4px; vertical-align:middle; display:inline-block;} /* PRODUCTTYPE6 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_type6[data-list="fare2"] article.info ol.box + .txt_data {display:block;} .product_type6[data-list="fare2"] article.info ol.box + .txt_data > dt, .product_type6[data-list="fare2"] article.info ol.box + .txt_data > dd {display:inline-block;} } /*-------------------------------------------------------------------------------- # 상품 :이벤트 ---------------------------------------------------------------------------------*/ /* 너비 설정 */ .product_type6.t1[data-list="fare2"] .head .cell1, .product_type6.t1[data-list="fare2"] .list .cell1 {width:15%;} .product_type6.t1[data-list="fare2"] .head .cell2, .product_type6.t1[data-list="fare2"] .list .cell2 {width:30%;} .product_type6.t1[data-list="fare2"] .head .cell2 span {float:left; width:50%;} .product_type6.t1[data-list="fare2"] .head .cell3, .product_type6.t1[data-list="fare2"] .list .cell3 {width:5%;} .product_type6.t1[data-list="fare2"] .head .cell4, .product_type6.t1[data-list="fare2"] .list .cell4 {width:10%;} .product_type6.t1[data-list="fare2"] .head .cell5 {width:40%;} .product_type6.t1[data-list="fare2"] .list .cell5 {width:12%; padding-right:0; text-align:left;} .product_type6.t1[data-list="fare2"] .list .cell6 {width:16%; padding-right:10px; text-align:right;} .product_type6.t1[data-list="fare2"] .list .cell7 {width:12%;} /* 목록 설정 */ .product_type6.t1[data-list="fare2"] .list .cell4 {padding:0;} /*-------------------------------------------------------------------------------- # 로딩중.. ---------------------------------------------------------------------------------*/ .jjim_flight.ing, .tab_wrap .sub.ing .jjim_flight {display:none;} .jjim_alert.ing, .tab_wrap .sub.ing .jjim_alert {pointer-events:none;} .jjim_alert.ing em:before, .tab_wrap .sub.ing .jjim_alert em:before {display:none;} .product_type6.ing {pointer-events:none;} .product_type6.ing .list * {font-size:0 !important; line-height:0 !important;} .product_type6.ing .list .cell1 {padding-left:41px; text-align:left;} .product_type6.ing .list [class*="icon_txt"], .product_type6.ing .list .path .tooltip_type, .product_type6.ing .list .path .city time > span, .product_type6.ing .list button, .product_type6.ing .list label > strong:before, .product_type6.ing .list label > input:checked ~ strong:after, .product_type6.ing .list .btn_txt, .product_type6.ing .list [class*="btn_img"] {display:none !important;} .product_type6.ing .list [class*="cell"] [data-air-logo] {width:53px; height:53px; padding:0; border-radius:50%; background:#dee0e2 none !important;} .product_type6.ing .list .cell1:after {content:''; display:inline-block; margin-top:12px; width:68px; height:15px; border-radius:15px; background:#dee0e2 !important;} .product_type6.ing .list .path .city time, .product_type6.ing .list .path .city em:before, .product_type6.ing .list .path .city em i, .product_type6.ing .list .btn_type3, .product_type6.ing .list .txt_data:before, .product_type6.ing .list .txt_data strong, .product_type6.ing .list .txt_data strong:before, .product_type6.ing .list .txt_data strong:after {content:""; height:15px; margin-top:5px; border-radius:15px; background:#dee0e2 !important; display:block;} .product_type6.ing .list .btn_small2 {border:0; background:transparent;} .product_type6.ing .list .btn_small2:before {content:""; width:40px; height:15px; border-radius:15px; background:#dee0e2 !important; display:block;} .product_type6.ing .list .btn_small2:after {content:""; width:54px; height:15px; margin:10px 0 0 0; border-radius:15px; background:#dee0e2 !important; display:block;} .product_type6.ing .list fieldset {height:133px !important; padding-top:18px;} .product_type6.ing .list fieldset:before, .product_type6.ing .list fieldset label:before, .product_type6.ing .list fieldset label:after {content:""; height:15px; margin:10px 0 0 0; border-radius:15px; background:#dee0e2 !important; display:block;} .product_type6.ing .list fieldset:before {width:50%; margin-left:17px;} .product_type6.ing .list fieldset label:before {width:80%;} .product_type6.ing .list fieldset label:after {width:70%;} .product_type6.ing .list .btn_type3 {border:0;} .product_type6.ing .list .txt_data {text-align:right;} .product_type6.ing .list .txt_data:before {width:80%; margin-left:20%;} .product_type6.ing .list .txt_data strong {position:relative; width:17px; margin:10px 0 0 8px; display:inline-block;} .product_type6.ing .list .txt_data strong:before, .product_type6.ing .list .txt_data strong:after {position:absolute; width:30px; right:100%; top:0; margin:0 8px 0 0;} .product_type6.ing .list .txt_data strong:before {margin:0 46px 0 0;} .product_type6.ing .list .drag_slider1type2, .product_type6.ing .list .bnr_type2, .product_type6.ing .list .mes_data_none {display:none;} .product_type6.ing[data-list="fare"] .list [class*="cell"] [data-air-logo] {width:25px; height:25px;} .product_type6.ing[data-list="fare"] .list .cell1:after {width:70%; margin:5px 0 0 5px;} .product_type6.ing[data-list="fare"] .list .txt_data {width:100%; text-align:center;} .product_type6.ing[data-list="fare"] .list .txt_data:before {width:80%; margin:0; display:inline-block;} .product_type6.ing[data-list="fare"] .list .txt_data *, .product_type6.ing[data-list="fare"] .list .btn_small2:after {display:none;} .product_type6.ing[data-list="fare"] .cell3 strong, .product_type6.ing[data-list="fare"] .cell5 strong, .product_type6.ing[data-list="fare"] .btn_type3 {width:90%; height:15px; border-radius:15px; background:#dee0e2; display:inline-block;} .product_type6.ing[data-list="fare"] .list .btn_small2, .product_type6.ing[data-list="fare"] .list .btn_small2:before {width:100%;} .product_type6.ing[data-list="fare"] .btn_type3 {margin:0; display:inline-block !important;} /*-------------------------------------------------------------------------------- # 상품 :국내항공 # data_schedule4 -> product_type7이걸로 변경 [2019-09-06] # 개발페이지 클래스 수정 완료 후 data_schedule4 스타일 삭제 ---------------------------------------------------------------------------------*/ .product_type7 {position:relative; float:left; width:542px; border:1px solid #24aae1; box-sizing:border-box;} .product_type7 > header > *:first-child {display:inline-block; padding:3px 0; width:117px; height:40px; border:1px solid #24aae1; background:#24aae1; border-radius:0 25px 25px 0; font-size:15px; color:#fff; vertical-align:middle;} .product_type7 > header > *:first-child:before {content:''; display:inline-block; margin:6px 6px 8px 11px; width:40px; height:28px; background:url("../img/common/icon_set1.png") no-repeat -240px -160px; vertical-align:middle;} .product_type7 > header.ico2 > *:first-child:before {background-position:-280px -160px} .product_type7 > header .txt_data3 {display:inline-block; margin-top:-3px; width:calc(100% - 247px); vertical-align:middle; font-size:18px; text-align:center;} .product_type7 > header ~ .calendar_date {border-top:1px solid #24aae1;} .product_type7 > .calendar_date {height:54px; line-height:54px;} .product_type7 > .calendar_date + .select_type1 {float:right; margin:-44px 16px 0 0; width:120px;} .product_type7 > .tbl_type2 {clear:both; border-top-color:#24aae1; border-bottom:0;} .product_type7 > .tbl_type2 tbody {border-top:1px solid #adb1b6;} .product_type7 > .tbl_type2 tbody > tr {position:relative;} .product_type7 > .tbl_type2 tbody > tr:last-child > th, .product_type7 > .tbl_type2 tbody > tr:last-child > td {border-bottom:1px solid #dee0e2;} .product_type7 > .tbl_type2 tbody > tr.mark td:before {content:''; background-color:#efeffb; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-2;} .product_type7 > .tbl_type2 tbody > tr > td:not(.tbl_logo) {padding:14px 5px; text-align:center;} .product_type7 > .tbl_type2 tbody td:nth-of-type(3) {font-size:13px;} .product_type7 > .tbl_type2 tbody td.mes_data_none {padding:201px 10px 200px !important;} .product_type7 > .tbl_type2 .filter th:nth-child(1) .form_filter {width:202px;} .product_type7 > .tbl_type2 .txt_data {font-size:11px;} .product_type7 > .tbl_type2 .txt_data3 {font-size:14px;} .product_type7 > .tbl_type2 .choice_type1 {position:static; display:inline-block; padding:0;} .product_type7 > .tbl_type2 .choice_type1 > em:before {left:18px;} .product_type7 > .tbl_type2 .choice_type1 > em:after {left:23px;} .product_type7 > .tbl_type2 .tbl_logo {padding-left:10px; overflow:visible; font-size:13px; background-size:auto 22px; background-position:19px 50%; font-weight:400;} .product_type7 > .tbl_type2 .tbl_logo .choice_type1 > em {padding-left:39px; font-size:13px;} .product_type7 > .tbl_type2 .tbl_logo .choice_type1 > em:before, .product_type7 > .tbl_type2 .tbl_logo .choice_type1 > em:after {display:none;} .product_type7 > .tbl_type2 .tbl_logo .choice_type1 + [data-tooltip] {padding-left:43px;} .product_type7 > .tbl_type2 .tbl_logo > .icon_txt2:first-child {margin-left:43px;} .product_type7 > .tbl_type2 .tbl_logo > .icon_txt2 + .choice_type1 {margin-top:2px;} .product_type7 > .tbl_type2 .tbl_logo > [data-flag="27"]:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#fafafa; opacity:1; z-index:-1;} .product_type7 > .tbl_type2 .tbl_logo > .choice_type1 + [data-tooltip] {z-index:inherit; margin-top:-3px; min-height:18px;} .product_type7 > .tbl_type2 .tbl_logo > .choice_type1 + [data-tooltip] > strong {position:absolute; bottom:1px; z-index:4;} .product_type7 > .tbl_type2 .tbl_logo > .choice_type1 + [data-tooltip] .tooltip_type.codeshare {left:0;} .product_type7 > .tbl_type2 .tbl_logo > .choice_type1 input:checked {opacity:1; z-index:-1; background-color:#d3eef9; -webkit-appearance:none;} .product_type7 > .tbl_type2 .tbl_logo > .choice_type1 input::-ms-check {display:none;} .product_type7 > [class^="mes_data"] {display:-webkit-box; display:-moz-flex; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; justify-content:center; padding:0 !important; border:0; border-top:1px solid #24aae1; border-radius:0; height:582px;} .product_type7 > header + [class^="mes_data"] {height:637px;} .product_type7 > .btn_small2 {position:absolute; top:12px; right:15px;} .product_type7 + .product_type7 {float:right;} .form_search1 ~ .product_type7 {margin-top:20px;} .d_flight .container.share {margin-top:30px !important;} .d_flight .calendar_date.t1 {width:224px; margin:0; top:2px; right:-10px; display:inline-block;} .d_flight table[data-table-scroll="tblflightlist"] tbody {height:587px;} .d_flight .product_type7 > header .txt_data3 {width:calc(100% - 350px); padding-left:15px; text-align:left;} .d_flight .product_type7 > .tbl_type2 thead th:first-of-type, .d_flight .product_type7 > .tbl_type2 tbody td:first-of-type {width:150px;} .d_flight .product_type7 > .tbl_type2 .filter th:nth-child(1) .form_filter {width:214px;} .d_flight .product_type7 > .tbl_type2 thead th:nth-of-type(2), .d_flight .product_type7 > .tbl_type2 tbody td:nth-of-type(2) {width:110px;} .d_flight .product_type7 > .tbl_type2 thead th:nth-of-type(3), .d_flight .product_type7 > .tbl_type2 tbody td:nth-of-type(3) {width:100px; font-size:13px;} .d_flight .product_type7 > .tbl_type2 thead th:nth-of-type(4), .d_flight .product_type7 > .tbl_type2 tbody td:nth-of-type(4) {width:110px; text-align:right !important;} .d_flight .product_type7 > .tbl_type2 tbody td i.icon_txt2{display:block; width:55px; margin:5px 0 0 40px;} /* 국내항공 super 뺏지 변경 */ .d_flight .product_type7 > .tbl_type2 tbody td .icon_txt2[data-flag="super"]{border:0; background-color:#e52d50; color:#fff; border-radius:0 20px 20px 0; padding:5px 0; box-sizing:border-box;} /* 20220818 캐시백 툴팁 추가 */ .product_type7 .tbl_type2 input[type="radio"]{z-index:0;} .product_type7 .cashback_tool{position:relative;} .product_type7 .cash_benefit{font-size:12px; color:#5e5ed7; font-weight:600;} .product_type7 .cash_notice {opacity:0; position:absolute; top:60px; right:5px; width:150px; padding:5px 0; background-color:#5e5ed7; font-size:13px; color:#fff; text-align:center; border-radius:20px; transition:0.3s; z-index:10;} .product_type7 .cash_notice:before{content: "";position: absolute;right: 30px;top: -5px;width: 0;height: 0;border: 0 solid transparent;border-top: 0px solid #5e5ed7;border-bottom: 10px solid #5e5ed7; border-right: 7px solid transparent;border-left: 7px solid transparent;} .product_type7 .cashback_tool:hover .cash_notice{display:block; opacity:1;} .cash_notice_block{ padding:2px 10px; background-color:#5e5ed7; font-size:13px; color:#fff !important; text-align:center; border-radius:20px; transition:0.3s;} .cash_tooltip{font-size:0 !important; width:21px; height:21px; border:0 !important;} .cash_tooltip:before{content: ""; height: 100% !important; padding-left: 100%; background-image: url(../img/common/icon_set2.png); vertical-align: top !important; display: inline-block; background-position:-240px -478px;} .benefit_price{font-size:20px !important;} .cash_ul li{margin-bottom:5px; position:relative; padding-left:10px;} .cash_ul li:before{content:'•'; position: absolute; top:0; left:0;} .cash_ul li span, .cash_ul li:nth-child(4){color:#ff464d;} .txt_data[data-update="up20220818"]{padding:11px 0 50px 0; position:relative;} .txt_data[data-update="up20220818"] .btn_type4{top: auto; bottom:-10px;} .txt_data[data-update="up20220818"] .tooltip_type.codeshare{right:0;} .txt_data[data-update="up20220818"] .tooltip_type.codeshare ul.cash_ul span{font-size:13px; font-weight:600;} .txt_data[data-update="up20220818"] .n_pay_data{margin-top:10px; letter-spacing: -0.5px; font-family: "Spoqa Han Sans"; font-weight:normal;} .txt_data[data-update="up20220818"] .n_pay_data img{width:45px; vertical-align:middle;} .txt_data[data-update="up20220818"] .n_pay_data span{color:#2f2fcc; font-size:1em;} .txt_data[data-update="up20220818"] .n_pay_data strong{margin-left:5px; font-size:1.4em;} /* PRODUCTTYPE7 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_type7 > .tbl_type2 tbody > tr > td {position:relative;} .product_type7 > .tbl_type2 .tbl_logo > [data-flag="27"]:after {display:none;} .product_type7 > .tbl_type2 .tbl_logo > .choice_type1 input:checked {opacity:0;} .product_type7 > [class*="mes_data"] {padding:160px 0 !important; height:auto; box-sizing:border-box;} } /*-------------------------------------------------------------------------------- # 상품 :카드형1 ---------------------------------------------------------------------------------*/ .product_card {display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; margin:6px -8px -8px; width:1116px;} .product_card > li, .product_card > .list {position:relative; margin:8px; width:356px; border-radius:5px; font-size:13px; box-sizing:border-box;} .product_card > li:before, .product_card > .list:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:1; border-radius:5px; border:1px solid #dee0e2;} .product_card > li > a, .product_card > .list > a {overflow:hidden; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; padding-left:100%; width:0; white-space:nowrap;} /* PRODUCTCARD :찜하기 */ .product_card [data-tooltip-title] {position:absolute; bottom:10px; left:10px;} .product_card [data-tooltip-title] > .ico3 {border:0; background-color:transparent;} .product_card [data-tooltip-title]:nth-last-child(3) {top:279px; bottom:auto;} /* PRODUCTCARD :이미지 */ .product_card .area1 {display:block; width:100%; height:213px; border-radius:5px 5px 0 0;} .product_card .area1 img {z-index:2;} /* PRODUCTCARD :정보 */ .product_card .area2 {padding:10px 14px 52px;} .product_card .area2 .icon_txt3[data-flag] {display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; justify-content:center; flex-direction:column; flex-wrap:wrap; word-break:keep-all; width:58px; height:58px; padding:0; border-radius:50%; box-sizing:border-box; font-size:13px; position:absolute; top:10px; right:10px; z-index:2; word-break:keep-all;} .product_card .area2 i:not([class]) {color:#5b646e; font-weight:700;} .product_card .area2 i:not([class]) + i:not([class]) {position:relative; margin-left:17px; font-weight:400;} .product_card .area2 i:not([class]) + i:not([class]):before {content:''; display:block; position:absolute; top:2px; left:-10px; width:1px; height:11px; background:#cdd0d3;} .product_card .area2 i + i {margin-left:4px;} .product_card .area2 .icon_com3 {padding-left:75px;} .product_card .area2 .icon_com3 > em {overflow:hidden; display:block; position:absolute; padding-left:1px; width:0; height:1px;} .product_card .area2 i:not([class]) + .icon_com3 {margin-top:-2px; margin-left:16px;} .product_card .area2 i:not([class]) + .icon_com3 em {top:3px; left:-10px; height:12px; background:#cdd0d3;} .product_card .area2 cite {overflow:hidden; display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:2px 0; max-height:2.7em; font-size:16px; font-weight:700; line-height:1.35;} .product_card .area2 cite + span:not([class]) {display:block; margin-top:0; color:#000;} .product_card .area2 .txt_type1 {margin:8px 0; font-size:13px;} .product_card .area2 .txt_type1 > li {overflow:hidden; width:95%; color:#8693a0; text-overflow:ellipsis; white-space:nowrap;} .product_card .area2 .txt_type1 > li + li {margin:0;} .product_card .area2 .txt_type1 > li:before {background:#8693a0;} .product_card .area2:nth-last-child(5) cite {height:2.7em;} .product_card .area2:nth-last-child(5) .txt_type1 {display:none;} .product_card .area2.t1 {position:relative;} /* PRODUCTCARD :금액 */ .product_card .area3 {position:absolute; bottom:16px; right:1px;} .product_card .area3:nth-last-child(4) {top:280px; bottom:0;} .product_card .area3 .txt_data > dt {overflow:hidden; position:absolute; padding-left:1px; width:0; height:0; white-space:nowrap;} .product_card .area3 .txt_data s {margin-bottom:3px; font-size:13px;} .product_card .area3 .txt_data strong {font-size:24px; font-weight:400;} /* PRODUCTCARD :출발일보기 */ .product_card .area4 {margin-top:-1px; height:calc(100% - 323px); border-top:1px solid #eeeff0; background-color:#fafafa; border-radius:0 0 5px 5px; font-size:13px;} .product_card .area4:after {content:''; display:block; clear:both;} .product_card .area4 dl {/* height:calc(100% - 47px); */ height:100%; overflow:hidden;} .product_card .area4 dl:before {content:''; width:2px; height:calc(100% - 323px); background:#dee0e2; position:absolute; bottom:0; left:66px;} .product_card .area4 dl > * {padding-bottom:12px; float:left; position:relative;} .product_card .area4 dl:first-child > * {padding-top:12px;} .product_card .area4 dl:first-child > dt {padding-top:16px;} .product_card .area4 dt {width:46px; padding:4px 18px 0 2px; color:#020219; text-align:right;} .product_card .area4 dd {width:266px; padding-left:19px;} .product_card .area4 dd ul {display:flex; -webkit-display:flex; flex-wrap:wrap; -webkit-flex-wrap:wrap;} .product_card .area4 dd li {width:37px; height:24px; line-height:24px; text-align:center; float:left;} .product_card .area4 dd li a {position:relative; z-index:2; color:#5b646e; display:block;} .product_card .area4 dl dt:before {content:''; width:4px; height:4px; border-radius:50%; border:3px solid #24aae1; background-color:#fafafa; box-shadow:0 0 0 3px #f4fbfd; position:absolute; top:9px; right:-6px; z-index:3;} .product_card .area4 dl:first-child dt:before {top:21px;} .product_card .area4 [data-layer="layer_all_dept"] {width:100%; border-radius:0 0 5px 5px; line-height:46px; font-size:17px; position:relative; z-index:2; cursor:pointer;} /* PRODUCTCARD :호텔 */ .product_card[data-product="hotel"] .area2 {min-height:110px;} .product_card[data-product="hotel"] .area2 .box1 {overflow:hidden; display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; width:100%; text-overflow:ellipsis; max-height:3.2em; font-size:13px; color:#2096ce; line-height:1.55;} .product_card[data-product="hotel"] .area2 .box1.txt_type1:before {background-color:#2096ce;} .product_card[data-product="hotel"] .area2 .box2 {overflow:hidden; position:absolute; bottom:20px; left:15px; z-index:3; margin:0; width:55%; text-overflow:ellipsis; white-space:nowrap;} .product_card[data-product="hotel"] .area2 .box2 > dt, .product_card[data-product="hotel"] .area2 .box2 > dd {display:inline; vertical-align:middle; font-weight:700;} .product_card[data-product="hotel"] .area2 .box2 > dt {position:relative; z-index:1; padding:0 12px 0 4px; color:#fff; font-size:11px;} .product_card[data-product="hotel"] .area2 .box2 > dt:before {content:''; display:block; position:absolute; top:-1px; bottom:-2px; left:0; right:8px; z-index:-1; background:#8693a0; border-radius:2px 0 0 2px} .product_card[data-product="hotel"] .area2 .box2 > dt:after {content:''; display:block; position:absolute; top:-1px; bottom:0; right:-6px; z-index:-1; width:0; height:0; border:8px solid transparent; border-left:6px solid #8693a0} .product_card[data-product="hotel"] .area2 .box2 > dd {margin-right:2px; color:#8693a0;} .product_card[data-product="hotel"] .area2 .box2 > dd:before {content:'#';} /* PRODUCTCARD :런터카 */ .product_card[data-product="rentalcar"] .area1 {padding:10px 0 0; height:170px; text-align:center;} .product_card[data-product="rentalcar"] .area1 img {position:static; width:auto; height:100%; min-height:0; min-width:0; transform:translate(0,0);} .product_card[data-product="rentalcar"] .area2 {padding:10px 24px 6px;} .product_card[data-product="rentalcar"] .area2 .icon_txt3 {position:absolute; top:10px; right:60px; z-index:1;} .product_card[data-product="rentalcar"] .area2 .icon_txt3.t1 {right:10px; z-index:2;} .product_card[data-product="rentalcar"] .area2 .info {margin-top:5px;} .product_card[data-product="rentalcar"] .area2 .info > dt {overflow:hidden; display:block; position:absolute; top:0; z-index:2; padding-left:100%; width:0; white-space:nowrap;} .product_card[data-product="rentalcar"] .area2 .info > dd.icon_txt2 {margin-right:5px; min-width:48px; border-color:#dee0e2; color:#5b646e;} .product_card[data-product="rentalcar"] .area2 .info2 {position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:12px; color:#8693a0;} .product_card[data-product="rentalcar"] .area2 .info2 strong, .product_card[data-product="rentalcar"] .area2 .info2 b {font-weight:400;} .product_card[data-product="rentalcar"] .area3 {position:static; margin:0 24px 41px;} .product_card[data-product="rentalcar"] .area3 .txt_data {padding-right:0;} .product_card[data-product="rentalcar"] .area3 .txt_data strong {font-weight:700;} .product_card[data-product="rentalcar"] .btn_type4 {margin:11px 0 0; line-height:38px; height:40px; font-size:15px; width:100%;} /* PRODUCTCARD :4단 */ .product_card.t1 > li, .product_card.t1 > .list {width:263px;} .product_card.t1 [data-tooltip-title]:nth-last-child(3) {top:229px;} .product_card.t1 .area1 {height:164px;} .product_card.t1 .area3:nth-last-child(4) {top:231px;} .product_card.t1 .area4 {height:calc(100% - 273px);} .product_card.t1 .area4 dl:before {height:calc(100% - 273px); left:58px;} .product_card.t1 .area4 dt {width:44px; padding-right:12px;} .product_card.t1 .area4 dd {width:187px; padding-left:15px;} .product_card.t1 .area4 dd li {width:25px;} .product_card[data-product="hotel"].t1 .area2 .box2 {position:static; width:100%; margin-top:8px;} /* PRODUCTCARD :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_card {display:block; font-size:0;} .product_card li, .product_card .list {display:inline-block; vertical-align:top;} .product_card .area2 .icon_txt2[data-flag] {padding-top:10px;} } /*-------------------------------------------------------------------------------- # 상품_카드형 :추천호텔 ---------------------------------------------------------------------------------*/ .product_card2 {display:-webkit-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; margin:-4px -8px -8px; width:1116px;} .product_card2 > li {overflow:hidden; position:relative; margin:8px; width:calc((100% /4) - 16px); background:#fff; border-radius:5px;} .product_card2 > li:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; border:1px solid #cdd0d3; border-radius:5px;} .product_card2 > li > a {overflow:hidden; display:block; position:absolute; top:0; left:0; z-index:2; padding-left:100%; width:0; height:100%; white-space:nowrap;} .product_card2 > li:nth-last-child(n+5):first-child, .product_card2 > li:nth-last-child(n+5):first-child ~ li {width:calc((100%/5) - 16px);} .product_card2 .area1 {display:block; width:100%; height:138px; border-radius:0;} .product_card2 .area1 img {z-index:2;} .product_card2 .area2 {overflow:hidden; position:relative; margin:0 14px; padding:34px 0 18px; box-sizing:border-box;} .product_card2 .area2 cite {overflow:hidden; display:block; margin-bottom:4px; font-size:17px; text-overflow:ellipsis; white-space:nowrap; font-weight:700;} .product_card2 .area2 cite + i {margin-left:1px; margin-right:18px; font-weight:700;} .product_card2 .area2 i {display:inline-block; font-size:13px; color:#5b646e;} .product_card2 .area2 i + i {margin-left:-16px; padding-left:16px;} .product_card2 .area2 i + i:before {content:''; display:inline-block; margin:-1px 10px 0 -10px; width:1px; height:12px; background:#ccc; vertical-align:middle;} .product_card2 .area2 .icon_com3, .product_card2 .area2 > i:first-child {position:absolute; top:12px; left:0;} .product_card2 .area2 .icon_com3 em {overflow:hidden; display:block; position:absolute; padding-left:1px; width:0; height:0;} .product_card2 .area2 > i:first-child {top:14px; color:#495058;} .product_card2 .txt_data {display:block; margin-top:11px;} .product_card2 .txt_data strong {font-size:24px; font-weight:400;} /* PRODUCTCARD2 :최대4개 */ .product_card2 > li:nth-last-child(4):first-child .area1, .product_card2 > li:nth-last-child(4):first-child ~ li .area1 {height:176px;} .product_card2 > li:nth-last-child(4):first-child .area2, .product_card2 > li:nth-last-child(4):first-child ~ li .area2 {padding:39px 0 17px;} .product_card2 > li:nth-last-child(4):first-child .area2 cite, .product_card2 > li:nth-last-child(4):first-child ~ li .area2 cite {margin-bottom:6px;} .product_card2 > li:nth-last-child(4):first-child .area2 .icon_com3, .product_card2 > li:nth-last-child(4):first-child ~ li .area2 .icon_com3 {top:17px;} .product_card2 > li:nth-last-child(4):first-child .area2 > i:first-child, .product_card2 > li:nth-last-child(4):first-child ~ li .area2 > i:first-child {top:16px;} /* PRODUCTCARD2 :스타일변경 */ .product_card2.t1 > li .area2 {padding-top:10px;} .product_card2.t1 > li .area2 cite {margin-bottom:0px;} .product_card2.t1 > li .area2 cite + i {color:#2096ce;} .product_card2.t1 > li .area2 i + span {display:block; font-size:13px;} .product_card2.t1 > li .txt_data {margin-top:15px; text-align:left;} /* PRODUCTCARD2 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_card2 li {float:left;} } /*-------------------------------------------------------------------------------- # 상품_카드형 :추천상품 ---------------------------------------------------------------------------------*/ .product_card3 {margin:-4px -8px -8px; width:calc(100% + 16px) !important; font-size:0;} .product_card3 > li {overflow:hidden; display:inline-block; position:relative; margin:8px; min-width:263px; width:calc(100% / 3 - 16px); border-radius:5px; vertical-align:top; background:#fff;} .product_card3 > li:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; border:1px solid #cdd0d3; border-radius:5px;} .product_card3 > li > a {display:block; position:absolute;} .product_card3 .icon_txt3 {position:absolute; top:10px; right:10px; z-index:3;} /* PRODUCTCARD3 :이미지 */ .product_card3 .area1 {display:block; width:100%; height:176px; border-radius:0;} .product_card3 .area1 img {z-index:2;} /* PRODUCTCARD3 :정보 */ .product_card3 .area2 {position:relative; padding:11px 20px 41px; box-sizing:border-box;} .product_card3 .area2 .icon_wrap {position:absolute; top:-55px;} .product_card3 .area2 i:not([class*='icon']) {display:inline-block; position:relative; font-size:13px; vertical-align:middle; font-weight:700; color:#5b646e;} .product_card3 .area2 i:not([class*='icon']) ~ cite {margin-top:3px;} .product_card3 .area2 i:not([class]) ~ i:not([class]) {color:#24aae1;} .product_card3 .area2 i:not([class*='icon']) + i:before {content:''; display:inline-block; margin:-1px 10px 0; width:1px; height:11px; background:#ccc; vertical-align:middle;} .product_card3 .area2 i.txt {color:#8693a0; font-weight:400;} .product_card3 .area2 cite {overflow:hidden; display:block; display:-webkit-box; margin:-1px 0 13px; height:2.7em; font-size:17px; font-weight:700; line-height:1.4em; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow:ellipsis;} .product_card3 .area2 cite:first-child {margin-top:5px;} .product_card3 .area2 cite:first-child ~ .txt_data {left:19px;right:auto;} .product_card3 .area2 .icon_txt2 {margin-top:4px; margin-right:4px;} .product_card3 .area2 time.icon_txt2 {position:absolute; bottom:18px; left:20px; border-color:#dee0e2; color:#5b646e; padding:3px 8px 5px; font-size:13px;} .product_card3 .area2 .icon_txt2 + cite {margin-top:8px;} .product_card3 .area2 .icon_txt5 {position:absolute; top:-50px; right:0; z-index:2;} .product_card3 .area2 .icon_com3 {padding-left:100px;} .product_card3 .area2 .icon_com3:before, .product_card3 .area2 .icon_com3:after {left:20px;} .product_card3 .area2 .icon_com3 > em {overflow:hidden; display:inline-block; position:absolute; top:5px; left:10px; padding-left:1px; width:0; height:11px; background:#ccc; vertical-align:middle; white-space:nowrap;} .product_card3 .area2 .txt_data {display:block; position:absolute; bottom:16px; right:19px;} .product_card3 .area2 .txt_data strong {font-size:24px; font-weight:400;} .product_card3 .area2 .txt_cate + cite {margin-top:34px;} .product_card3 .area2 .txt_cate, .product_card.ticket_event .area2.t1 .txt_cate {font-weight:700; font-size:12px; color:#0092ce; position:absolute; left:20px; bottom:17px;} .product_card3 .area2.t1 .ico_wrap, .product_card.ticket_event .area2.t1 .ico_wrap {position:absolute; top:-35px; z-index:10;} .product_card3 .area2.t1 .txt_cate, .product_card.ticket_event .area2.t1 .txt_cate {position:relative; left:0; bottom:0; display:block;} .product_card3 .area2.t1 .txt_cate + cite, .product_card.ticket_event .area2.t1 .txt_cate + cite {margin-top:10px;} /* PRODUCTCARD3 :상품혜택 */ .product_card3 .area3 {opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; background:rgba(36,170,225,0.96); border-radius:5px; text-align:center; font-size:16px; color:#fff; transition:opacity 0.5s;} .product_card3 .area3:before {content:'';display:inline-block;width:0;height:100%;vertical-align:middle;} .product_card3 .area3 dt {position:absolute;top:37px;left:0;right:0;text-align:center;font-weight:700;} .product_card3 .area3 dt:after {content:''; display:block; margin:15px auto 18px; width:20px; height:2px; background:#fff;} .product_card3 .area3 dd {overflow:hidden; display:inline-block; display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; padding:0 40px; width:calc(100% - 88px); max-height:4.95em; text-align:left; line-height:1.65; vertical-align:middle; text-align:center;} /* PRODUCTCARD3 :상품보기 */ .product_card3 .area2 + a {overflow:hidden; top:0; left:0; z-index:2; padding-left:100%; width:0; height:100%; white-space:nowrap; background:none!important; border:0 !important;} .product_card3 .area3 + a {opacity:0; left:50%; bottom:44px; z-index:4; margin:0 -50px; width:100px; height:32px; border:1px solid #fff; border-radius:3px; color:#fff; text-align:center; line-height:30px; font-size:14px; font-weight:700; transition:all 0.5s} /* PRODUCTCARD3 :마우스오버이벤트 */ .product_card3 > li:hover {cursor:pointer;} .product_card3 > li:hover .area3, .product_card3 > li:hover a {opacity:1;} .product_card3 > li:hover a:hover {background-color:#fff; border-color:#fff; color:#2096ce;} /* PRODUCTCARD3 : 제주렌터카 */ .product_card3[data-product="rentalcar"] .area1 {text-align:center;} .product_card3[data-product="rentalcar"] .area1 img {position:static; width:auto;} /* PRODUCTCARD3 :IE9 */ @media screen and (min-width:0\0) { .product_card3 > li {width:calc((100% / 3) - 16px);} } /*-------------------------------------------------------------------------------- # 상품_카드형 :특가상품 ---------------------------------------------------------------------------------*/ .product_card4 {margin:-4px -8px -8px; font-size:0;} .product_card4 > li {overflow:hidden; position:relative; display:inline-block; margin:8px; width:263px; height:286px; background:#fff; border-radius:5px; vertical-align:top;} .product_card4 > li:before {content:''; display:block; position:absolute; top:176px; left:0; bottom:0; right:0; z-index:3; border:1px solid #cdd0d3; border-top-width:0; border-radius:0 0 5px 5px; pointer-events:none;transition:top 0.3s;} .product_card4 > li > a {display:block; position:absolute; font-size:14px;} .product_card4 .area1 + a, .product_card4 .area2 + a {overflow:hidden; top:0; left:0; bottom:0 !important; z-index:4; padding-left:100%; width:0; height:100%; white-space:nowrap; background:none !important; border:0 !important;} /* PRODUCTCARD4 :이미지 */ .product_card4 .area1 {display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; justify-content:center; margin-bottom:0; height:176px; border-radius:5px 5px 0 0; text-align:center; transition:margin 0.3s;} .product_card4 .area1:after {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:3; background:rgba(0,0,0,0.17); border:0;} .product_card4 .area1 img {z-index:3;} .product_card4 .area1 > em, .product_card4 .area1 > strong {opacity:1; display:block; position:relative; z-index:4; font-size:20px; font-weight:700; line-height:1.35; color:#fff;} .product_card4 .area1 > .icon_txt3 {opacity:1; position:absolute; top:10px; right:10px; z-index:4;} .product_card4:not(.t1):not(.t2) .area1 {z-index:1;} /* PRODUCTCARD4 :정보 */ .product_card4 .area2 {position:relative; z-index:2; height:calc(286px - 176px); background:#fff; padding:16px 20px 0; box-sizing:border-box;} .product_card4 .area2:after {content:'';display:block;position:absolute;left:0;right:0;top:100%;bottom:-200%;background:#fff;} .product_card4 .area2 cite {overflow:hidden; display:block; margin:0 0 6px; font-size:16px; text-overflow:ellipsis; white-space:nowrap; font-weight:700;} .product_card4 .area2 time.icon_txt1 {position:absolute; bottom:15px; right:20px; border-color:#dee0e2; color:#5b646e;} .product_card4 .area2 > .icon_txt5 {position:absolute; top:126px; right:0; z-index:3;} .product_card4 .area2 .txt_data {display:block; text-align:left;} .product_card4 .area2 .txt_data s {display:block; margin-bottom:3px;} .product_card4 .area2 .txt_data strong {margin-left:0; font-size:24px; font-weight:400;} /* PRODUCTCARD4 :상품혜택 */ .product_card4 .area3 {display:none; position:relative; z-index:2;background:#fff; color:#5b646e; font-size:14px; line-height:1.45;} .product_card4 .area3 dt {opacity:0; overflow:hidden; position:absolute; top:0; left:0; padding-left:100%; width:0; height:100%; white-space:nowrap;} .product_card4 .area3 dd {padding:0 20px 0;} .product_card4 .area3 + a {left:50%; bottom:-100px; z-index:4; margin:0 -50px; width:100px; height:32px; border:1px solid #24aae1; border-radius:3px; color:#2096ce; text-align:center; line-height:30px; font-size:14px; font-weight:700; transition:bottom 0.3s;} /* PRODUCTCARD4 :센터정렬 */ .product_card4.t1 > li {overflow:visible; height:321px;} .product_card4.t1 > li:before {top:0; bottom:auto; height:319px; border-top-left-radius:6px;border-top-right-radius:6px; border-top-width:1px;} .product_card4.t1 .area1:after {display:none;} .product_card4.t1 .area2 {position:static; height:auto; max-height:145px; padding-top:15px; padding-bottom:12px; text-align:center;} .product_card4.t1 .area2:after {display:none;} .product_card4.t1 .area2 cite:first-child {margin:-1px 0 3px; font-size:18px;} .product_card4.t1 .area2 > span:not([class]) {display:block; margin:10px -20px -10px; border-top:1px solid #f2f3f4; line-height:33px; font-size:13px; font-weight:700; color:#5b646e;} .product_card4.t1 .area2 .txt_data {text-align:center;} .product_card4.t1 .area2 [data-air-logo] {display:table; margin:3px auto 7px; padding-left:28px; background-size:27px auto; font-size:15px;} .product_card4.t1 .area2 [data-fn="detail_view"] {overflow:hidden; position:absolute; top:0; left:0; z-index:4; padding-left:100%; width:0; height:321px; white-space:nowrap;} .product_card4.t1 .form_search1.t1 {display:none; margin-top:4px;} .product_card4.t1 li:nth-child(2) .form_search1.t1 {margin-left:-279px;} .product_card4.t1 li:nth-child(3) .form_search1.t1 {margin-left:-558px;} .product_card4.t1 li:nth-child(4) .form_search1.t1 {margin-left:-837px;} /* PRODUCTCARD4 :센터정렬 + 국내숙박 */ .product_card4.t1 .area2 i ~ cite {display:-webkit-box; margin:8px 0 5px; /*height:44px;*/ line-height:22px; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal;} .product_card4.t1 .area2 i ~ .txt_data {margin-bottom:6px;} .product_card4.t1 .area2 i ~ .list_keyword{overflow:hidden; max-width:100%; margin-bottom:2px; color:#2092C2; font-size:13px; white-space: nowrap; text-overflow:ellipsis; word-wrap:normal} /* PRODUCTCARD4 :이미지만 있을 경우 */ .product_card4.t2 > li {height:auto;} .product_card4.t2 .area1 > strong {font-size:23px; text-decoration:underline; text-underline-position:under;} /* PRODUCTCARD4 :마우스오버 */ .product_card4:not(.t1) > li:hover {cursor:pointer;} .product_card4:not(.t1) > li:hover:before {top:65px;} .product_card4:not(.t1) > li:hover .area1:not(:nth-last-child(2)) {margin-bottom:-111px;} .product_card4:not(.t1) > li:hover .area1:not(:nth-last-child(2)):after {background:rgba(0,0,0,0.5);} .product_card4:not(.t1) > li:hover .area1:not(:nth-last-child(2)) > strong, .product_card4:not(.t1) > li:hover .area1:not(:nth-last-child(2)) > em {opacity:0;} .product_card4:not(.t1) > li:hover .area2 {height:auto !important;} .product_card4:not(.t1) > li:hover .area2 cite {display:-webkit-box;margin-bottom:0;padding-top:10px;max-height:48px;-webkit-box-orient:vertical; -webkit-line-clamp:2;white-space:normal;} .product_card4:not(.t1) > li:hover .area2 .txt_data, .product_card4:not(.t1) > li:hover .area2 .icon_txt1 {display:none;} .product_card4:not(.t1) > li:hover .area3 {display:block;padding-top:5px;} .product_card4:not(.t1) > li:hover .area3 dd {overflow:hidden;display:-webkit-box;height:2.9em;-webkit-box-orient:vertical; -webkit-line-clamp:2;} .product_card4:not(.t1) > li:hover > a {bottom:30px;} .product_card4:not(.t1) > li:hover > a:hover {background:#24aae1; color:#fff;} .product_card4.t1 li:hover:before, .product_card4.t1 li.on:before {border-color:#24aae1; z-index:4;} .product_card4.t1 li:hover .area2, .product_card4.t1 li.on .area2 {height:100%; background:#eef8fd; border-radius:0 0 5px 5px;} .product_card4.t1 li.on .form_search1.t1 {display:block; margin-bottom:0; width:1100px; border:2px solid #24aae1; border-radius:0;} /* PRODUCTCARD4 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_card4 .area1 {display:block; padding-top:55px; box-sizing:border-box;} .product_card4.t1 .area2 [data-fn="detail_view"]:hover {background:rgba(256,256,256,0.1)} } /*-------------------------------------------------------------------------------- # 상품_카드형 :특가상품2 ---------------------------------------------------------------------------------*/ .product_card5 {margin:-4px -8px -8px; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex;} .product_card5 > li {overflow:hidden; flex:1; position:relative; margin:8px; background:#fff; border-radius:6px;} .product_card5 > li:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; border:1px solid #cdd0d3; border-radius:6px;} .product_card5 > li > a {display:block; position:absolute;} .product_card5 .area2 + a {overflow:hidden; top:0; left:0; z-index:3; width:0; height:100%; padding-left:100%; white-space:nowrap; background:none !important; border:0 !important;} /* PRODUCTCARD5 :이미지 */ .product_card5 .area1 {display:block; padding-top:13px; padding-bottom:162px; background-color:#f2f3f4; border-radius:0; color:#fff; text-align:center;} .product_card5 .area1:before {content:''; display:block; opacity:0.6; position:absolute; top:auto !important; bottom:35px !important; left:50%; margin:0 -59px !important;} /* .product_card5 .area1:after {content:''; display:block; position:absolute; bottom:0; left:50%; margin:0 -75px; width:150px; height:150px; border-radius:50%; box-shadow:0 0 0 200px;} 20220804 */ .product_card5 .area1:after {content:''; display:block; position:absolute; bottom:0; left:50%; margin:0 -115px; width:230px; height:150px; border-radius:0; box-shadow:0 0 0 200px;} .product_card5 .area1 > em, .product_card5 .area1 > strong {display:inline-block; position:relative; z-index:3; margin:49px 0 20px; font-size:17px; font-weight:700; color:#020219; vertical-align:middle;} .product_card5 .area1 > strong {overflow:hidden; max-width:calc(100% - 100px); text-overflow:ellipsis; display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; line-height:24px; height:48px; margin:49px auto 20px;} .product_card5 .area1 > .icon_txt3 {position:absolute; bottom:90px; right:30px; z-index:3;} /* PRODUCTCARD5 :정보 */ .product_card5 .area2 {padding:12px 24px 54px; text-align:center; box-sizing:border-box;} .product_card5 .area2 cite {overflow:hidden; display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:7px 0 3px; max-height:2.4em; font-size:16px; font-weight:700; line-height:1.2;} .product_card5 .area2 em {overflow:hidden; display:block; font-size:14px; text-overflow:ellipsis; white-space:nowrap;} .product_card5 .area2 i ~ .list_keyword{overflow:hidden; max-width:100%; margin-bottom:2px; color:#2092C2; font-size:13px; white-space: nowrap; text-overflow:ellipsis; word-wrap:normal} .product_card5 .area2 .txt_data {display:block; position:absolute; bottom:21px; left:0; right:0; padding-right:0; text-align:center;} .product_card5 .area2 .txt_data s {display:block;} .product_card5 .area2 .txt_data strong {font-size:24px; font-weight:400;} .product_card5 .area2 .icon_logo {display:inline-block; margin-bottom:8px; padding:0 7px; height:25px; background:#fff; border-radius:25px; box-sizing:border-box;} .product_card5 .area2 .icon_logo > img {vertical-align:middle;} .product_card5 .area2 .icon_logo:before {content:''; display:inline-block; height:100%; vertical-align:middle;} /* PRODUCTCARD5 :정보 + 지역별 추천 */ .product_card5 .area2:nth-last-child(3):nth-child(2) {padding-bottom:68px;} .product_card5 .area2:nth-last-child(3):nth-child(2) cite {display:block; position:absolute; top:80px; left:15px; right:15px; max-height:100%; font-size:17px; font-weight:400; text-overflow:ellipsis; white-space:nowrap;} .product_card5 .area2:nth-last-child(3):nth-child(2) .icon_txt1 {position:absolute; top:30px; left:50%; margin:0 -35px; border-color:#dee0e2; color:#5b646e;} .product_card5 .area2:nth-last-child(3):nth-child(2) .txt_data {bottom:26px;} /* PRODUCTCARD5 :상품혜택 */ .product_card5 .area3 {opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; padding-top:0; background:rgba(36,170,225,0.96); border-radius:5px; text-align:center; font-size:16px; color:#fff; transition:opacity 0.5s;} .product_card5 .area3:before {content:'';display:inline-block;width:0;height:100%;vertical-align:middle;} .product_card5 .area3 dt {position:absolute;top:73px;left:0;right:0;text-align:center;font-weight:700;} .product_card5 .area3 dt:after {content:''; display:block; margin:15px auto 18px; width:20px; height:2px; background:#fff;} .product_card5 .area3 dd {overflow:hidden; display:inline-block; display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; padding:0 20px; width:calc(100% - 48px); max-height:4.95em; text-align:left; line-height:1.65; vertical-align:middle; text-align:center;} .product_card5 .area3 + a {opacity:0; left:50%; bottom:78px; z-index:4; margin:0 -50px; width:100px; height:32px; border:1px solid #fff; border-radius:3px; color:#fff; text-align:center; line-height:30px; font-size:14px; font-weight:700; transition:all 0.5s} /* PRODUCTCARD5 :마우스오버 */ .product_card5 > li:hover {cursor:pointer;} .product_card5 > li:hover .area3, .product_card5 > li:hover a {opacity:1;} .product_card5 > li:hover a:hover {background-color:#fff; border-color:#fff; color:#2096ce;} /* PRODUCTCARD5 :홈쇼핑 */ .product_card5.t1 {display:block; font-size:0;} .product_card5.t1 > li {display:inline-block; width:262px; height:329px;} .product_card5.t1 > li:before {display:none;} .product_card5.t1 .area1 {overflow:visible; margin-top:70px; padding-top:0; padding-bottom:150px;} .h_shopping_more{position:absolute; top:20px; right:20px; z-index:10;} .slide1.h_shopping .box > button{top:240px; background-color:rgba(2,2,25,0.5);} .product_card5.t1 .area2 {position:relative; padding-top:20px; padding-bottom:12px; text-align:left;} .product_card5.t1 .area2 cite {margin:0; color:#fff; font-size:21px; font-weight:400;} /* PRODUCTCARD5 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_card5 {display:block; font-size:0;} .product_card5 > li {display:inline-block; width:262px;} } /*-------------------------------------------------------------------------------- # 상품 :전체이미지 ---------------------------------------------------------------------------------*/ .product_card6 {overflow:hidden; margin:-7px -8px -7px; width:calc(100% + 16px); height:362px;} .product_card6 > li {float:left; overflow:hidden; position:relative; margin:7px 8px; width:calc(100% / 3 - 16px); height:calc(100% / 2 - 14px); border-radius:6px; color:#fff;} .product_card6 > li:before{content: ''; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(142deg,rgba(0,0,0,.2),hsla(0,0%,100%,0) 65%); z-index: 1;} .product_card6 > li > .icon_info1 {opacity:1; position:absolute; top:0; right:16px; transition:all 0.3s;} .product_card6 > li > a {overflow:hidden; display:block; position:absolute; top:0; left:0; margin:0; padding-left:100%; width:0; height:100%; white-space:nowrap; background:none; border:0; z-index:1;} /* PRODUCTCARD6 :이미지 */ .product_card6 .area1 {position:absolute; top:0; left:0; bottom:0; right:0; border-radius:6px; transform:scale(1); transition:all 0.5s;} /* PRODUCTCARD6 :정보 */ .product_card6 .area2 {opacity:1; position:absolute; top:23px; left:30px; right:70px; bottom:30px; letter-spacing:-0.05em; transition:all 0.3s; z-index:1;} .product_card6 .area2 cite {display:block; font-size:24px; font-family:'SUIT'; font-size:22px; font-weight:600;} .product_card6 .area2 cite > b {display:block; margin:-6px 0 10px; font-size:24px; font-weight:600;} .product_card6 .area2 em {display:none; max-width:245px; font-size:14px; line-height:1.4;} /* 20220804 display: block; 수정 */ .product_card6 .area2 .icon_txt2 {position:absolute; bottom:24px; left:0; padding:3px 0 5px; min-width:56px; background:none; border-color:rgba(256,256,256,0.5); font-size:13px; color:#fff;} /*.product_card6 .area2 .icon_txt5 {position:absolute; bottom:0; left:-5px; right:-30px; padding:15px 20px; background:#24aae1; border-color:#24aae1; color:#fff; font-size:16px; font-family: 'SUIT';} */ .product_card6 .area2 .icon_txt5 {position:absolute; bottom:-20px; left:-20px; right:-30px; padding:15px 20px; background:0; border:0; color:#fff; font-size:16px; font-family: 'SUIT'; font-weight:600; font-size:30px; text-shadow: 0px 0px 10px rgba(36,36,36,0.70)} /* .product_card6 .area2 .icon_txt5:before {content:'# ';} */ .product_card6 .area2 .txt_data {position:absolute; bottom:-9px; left:0;} .product_card6 .area2 .txt_data strong, .product_card6 .area2 .txt_data span {color:#fff;} .product_card6 .area2 .txt_data strong {font-size:26px; font-weight:400;} /* PRODUCTCARD6 :해당 상품을 보았어요 */ .product_card6 .area3 {opacity:0; position:absolute; top:50%; left:0; right:0; margin-top:-38px; text-align:center; font-size:18px; line-height:1.5; transform:translate(0, -50%); transition:all 0.3s;} /* PRODUCTCARD6 :레이아웃 */ .product_card6 > li:first-child, .product_card6 > li:nth-last-child(4):first-child + li, .product_card6 > li:nth-last-child(3):first-child ~ li {height:calc(100% - 14px);} .product_card6 > li:first-child .area3, .product_card6 > li:nth-last-child(4):first-child + li .area3, .product_card6 > li:nth-last-child(3):first-child ~ li .area3 {font-size:23px; font-weight:700; line-height:1.35;} ul.product_card6 .area2 {right:30px;} /* PRODUCTCARD6 :여행 */ ol.product_card6:not(.t1) {height:444px;} ol.product_card6:not(.t1) > li > a {opacity:0; top:0; left:0; right:0; bottom:0; z-index:4; margin:0; padding:0; width:100%; height:100%; border:1px solid #fff; border-radius:3px; color:#fff; text-align:center; line-height:32px; font-size:14px; font-weight:700; transition:all 0.3s} ol.product_card6:not(.t1) > li > a:hover {background-color:#fff; color:#020219;} ol.product_card6:not(.t1) .area1:after {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,0.17)} ol.product_card6:not(.t1) .area2 cite {font-weight:700;} /* PRODUCTCARD6 :호텔/숙박 */ .product_card6.t1 {height:380px;} .product_card6.t1 > li > .icon_info1 > strong {margin-top:22px; font-size:19px;} .product_card6.t1 > li > .icon_info1 > strong:before {content:'TOP'; display:inline-block; position:absolute; top:8px; left:50%; margin:0 -10px; padding-bottom:3px; width:21px; border-bottom:1px solid #bda046; font-size:11px; font-weight:400; color:#4b4bac; text-align:center; font-family:'Nanum Gothic';} .product_card6.t1 .area1:after {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0)); content:'';} .product_card6.t1 .area2 {top:19px; left:21px;} .product_card6.t1 .area2 cite {color:#fff; font-size:26px; font-weight:700; line-height:1;} .product_card6.t1 .area2 em {margin-left:3px; font-size:16px;} .product_card6.t1 .area2 em:before {content:''; display:block; margin:10px 0 7px; width:5px; height:1px; background:#fff;} /* PRODUCTCARD6 :마우스오버 */ .product_card6 > li:hover {cursor:pointer;} /* .product_card6 > li:hover .area1 {transform:scale(1.3)} 20220804 */ /* ol.product_card6:not(.t1) > li:hover .area2, ol.product_card6:not(.t1) > li:hover > .icon_info1 {opacity:0;} ol.product_card6:not(.t1) > li:hover .area3, ol.product_card6:not(.t1) > li:hover > a {opacity:1;} */ /*-------------------------------------------------------------------------------- # 상품 :카드형2 ---------------------------------------------------------------------------------*/ .product_card7 {overflow:hidden; margin:6px -8px -8px; width:1116px; font-size:0;} .product_card7 header {overflow:hidden; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; float:left; position:relative; margin:8px; width:356px; height:248px; border-radius:5px; background:transparent url("../img/common/bg_thema.png") no-repeat 0 0; letter-spacing:-0.05em; box-sizing:border-box;} .product_card7 header:before {content:''; display:block; position:absolute; top:50%; left:50%; margin:-106px; width:212px; height:212px; background:#fff; border-radius:50%;} .product_card7 header:after {content:''; opacity:1; display:block; position:absolute; top:138px; left:28px; width:107px; height:97px; background:url("../img/common/bg_thema.png") no-repeat 0 -248px;} .product_card7 header > .tit {display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; width:190px; position:relative; font-size:36px; font-weight:700; line-height:1.13; text-align:center; color:#393992; word-break:keep-all; word-wrap:break-word; letter-spacing:-0.05em;} .product_card7 header > .tit + p {opacity:1; position:relative; margin:8px 0 2px; width:170px; text-align:center; font-size:14px; color:#5b646e; line-height:1.45; word-break:keep-all; word-wrap:break-word;} .product_card7 header > .tit + p + p {opacity:0; position:absolute; margin-top:-3px; font-size:14px; color:#fff; line-height:1.65; word-break:keep-all; word-wrap:break-word;} .product_card7 header > .tit + p + p:before {content:''; opacity:0; display:block; position:absolute; top:-1000%; bottom:-1000%; left:-100%; right:-100%; background:#ff464d; transition:opacity 0.5s;} .product_card7 header > a {overflow:hidden; display:block; position:absolute; left:0; top:0; bottom:0; right:0; z-index:3; padding-left:100%; width:0; font-size:1em; white-space:nowrap;} .product_card7 header:hover {display:block; padding:46px 35px;} .product_card7 header:hover:before {opacity:0;} .product_card7 header:hover:after {opacity:0;} .product_card7 header:hover > .tit {position:relative; z-index:2; color:#fff; font-size:36px; margin:0 0 15px; width:300px; text-align:left;} .product_card7 header:hover > p:nth-of-type(1) {opacity:0; position:absolute;} .product_card7 header:hover > p:nth-of-type(2) {opacity:1; position:relative; z-index:1;} .product_card7 header:hover > p:nth-of-type(2):before {opacity:1; z-index:-1;} .product_card7 ul {display:inline;} .product_card7 li {overflow:hidden; display:inline-block; position:relative; margin:8px 8px; width:356px; height:248px; border-radius:5px; background:#fff; box-sizing:border-box;} .product_card7 li:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; border-radius:5px; border:1px solid #cdd0d3;} .product_card7 li .area1 {display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%;} .product_card7 li .area2 {position:absolute; bottom:0; left:0; right:0; z-index:2; padding:16px 21px; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 120%);} .product_card7 li .area2 .txt_data {float:right; margin-top:4px;} .product_card7 li .area2 .txt_data strong {font-size:24px; font-weight:400;} .product_card7 li .area3 {opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; padding-top:0; background:rgba(36,170,225,0.96); border-radius:5px; text-align:center; font-size:16px; color:#fff; transition:opacity 0.5s;} .product_card7 li .area3:before {content:'';display:inline-block;width:0;height:100%;vertical-align:middle;} .product_card7 li .area3 dt {position:absolute;top:26px;left:0;right:0;text-align:center;font-weight:700;} .product_card7 li .area3 dt:after {content:''; display:block; margin:15px auto 18px; width:20px; height:2px; background:#fff;} .product_card7 li .area3 dd {overflow:hidden; display:inline-block; display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; padding:0 20px; width:calc(100% - 48px); max-height:4.95em; text-align:left; line-height:1.65; vertical-align:middle; text-align:center;} .product_card7 li .area3 + a {opacity:0; left:50%; bottom:30px; z-index:4; margin:0 -50px; width:100px; height:32px; border:1px solid #fff; border-radius:3px; color:#fff; text-align:center; line-height:30px; font-size:14px; font-weight:700; transition:all 0.5s} .product_card7 li cite {overflow:hidden; display:block; display:-webkit-box; height:2.7em; font-size:17px; line-height:1.4em; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#fff; text-overflow:ellipsis;} .product_card7 li > a {opacity:0; display:block; position:absolute; left:50%; bottom:30px; z-index:4; margin:0 -50px; width:100px; height:32px; border:1px solid #fff; border-radius:3px; color:#fff; text-align:center; line-height:30px; font-size:14px; font-weight:700; transition:all 0.5s} .product_card7 li > a:hover {background-color:#fff; border-color:#fff; color:#2096ce;} .product_card7 li:hover {cursor:pointer;} .product_card7 li:hover .area3, .product_card7 li:hover > a {opacity:1;} /*-------------------------------------------------------------------------------- # 상품_카드형 :국내항공 > 제주 항공권 깜짝특가 ---------------------------------------------------------------------------------*/ .product_card8 {margin:-4px -8px -8px; font-size:0;} .product_card8 > li {overflow:hidden; position:relative; display:inline-block; margin:8px; width:263px; height:320px; background:#fff; border-radius:5px; vertical-align:top;} .product_card8 > li:before {content:''; display:block; position:absolute; top:176px; left:0; bottom:0; right:0; z-index:3; border:1px solid #cdd0d3; border-top-width:0; border-radius:0 0 5px 5px; pointer-events:none;transition:top 0.3s;} .product_card8 > li > a {display:block; position:absolute; font-size:14px;} .product_card8 .area1 + a, .product_card8 .area2 + a {overflow:hidden; top:0; left:0; bottom:0 !important; z-index:4; padding-left:100%; width:0; height:100%; white-space:nowrap; background:none !important; border:0 !important;} /* PRODUCTCARD8 :이미지 */ .product_card8 .area1 {display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; justify-content:center; margin-bottom:0; height:176px; border-radius:5px 5px 0 0; text-align:center; transition:margin 0.3s;} .product_card8 .area1:after {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:3; background:rgba(0,0,0,0.17); border:0;} .product_card8 .area1 img {z-index:3;} .product_card8 .area1 > em, .product_card8 .area1 > strong {opacity:1; display:block; position:relative; z-index:4; font-size:20px; font-weight:700; line-height:1.35; color:#fff;} .product_card8 .area1 > .icon_txt2 {opacity:1; padding:3px 12px; border-color:#91d4f0; color:#0092ce; position:absolute; top:10px; left:10px; z-index:4;} .product_card8 .area1 {z-index:1;} /* PRODUCTCARD8 :정보 */ .product_card8 .area2 {position:relative; z-index:2; height:calc(286px - 142px); background:#fff; padding:16px 20px 0; box-sizing:border-box; text-align:center;} .product_card8 .area2:after {content:'';display:block;position:absolute;left:0;right:0;top:100%;bottom:-200%;background:#fff;} .product_card8 .area2 .city_wrap {position:relative;} .product_card8 .area2 .city_wrap:before {content:''; width:15px; height:10px; background:url('../img/common/icon_set2.png') no-repeat 0 -240px; position:absolute; margin-top:12px; left:50%; margin-left:-7.5px;} .product_card8 .area2.t1 .city_wrap:before {background-position:-20px -240px;} .product_card8 .area2 cite {width:50%; display:inline-block; overflow:hidden; position:relative; margin:0 0 4px; font-size:24px; text-overflow:ellipsis; white-space:nowrap; font-weight:700; text-align:center;} .product_card8 .area2 cite i {margin-top:-5px; font-weight:400; font-size:13px; color:#8d8d92; display:block;} .product_card8 .area2 a.icon_txt1 {border-color:#dee0e2; color:#5b646e; margin-top:10px;} .product_card8 .area2 .txt_data {line-height:1.15; display:block; text-align:center;} .product_card8 .area2 .txt_data strong {margin-left:0; font-size:25px; font-weight:700;} .product_card8 .area2 .txt_data span {font-weight:700; font-size:20px;} /* PRODUCTCARD8 :통이미지인 경우(가격제외) */ .product_card8 > li img + .area2.t1 {height:auto; padding:0; background-color:transparent; position:absolute; left:50%; bottom:50px; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%);} .product_card8 > li img + .area2.t1:after {content:none;} .product_card8 > li img + .area2.t1 + a {width:0; padding-left:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0;} /* PRODUCTCARD8 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .product_card8 .area1 {display:block; padding-top:55px; box-sizing:border-box;} } /*-------------------------------------------------------------------------------- # 게시판 :리스트형 ---------------------------------------------------------------------------------*/ .list_type {border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6;} .list_type a:not([class]) {display:block; position:relative; padding:4px 0; font-size:14px;} .list_type a > strong, .list_type a > i, .list_type a > time {display:inline-block; vertical-align:middle;} .list_type a > strong {overflow:hidden; max-width:calc(100% - 140px); font-weight:400; text-overflow:ellipsis; white-space:nowrap;} .list_type a > .icon_txt1 + strong {max-width:calc(100% - 200px);} .list_type a > .icon_txt1 {margin-right:8px; width:90px;} .list_type a > time {position:absolute; right:0; color:#5b646e;} .list_type a:hover strong {color:#2096ce; text-decoration:underline;} /* LISTTYPE :기본스타일 */ .list_type:not(.t1):not(.t2) a:not([class]) {padding:13px 24px 13px;} .list_type:not(.t1):not(.t2) a > time {top:15px; right:24px;} .list_type:not(.t1):not(.t2) > li + li {border-top:1px solid #dee0e2;} .list_type:not(.t1):not(.t2) > li:first-child a:not([class]) {padding-top:12px;} /* LISTTYPE :아코디언 */ .list_type > dt {position:relative; padding:13px 40px 7px; border-bottom:1px solid #dee0e2;} .list_type > dt:before {content:'Q.'; display:block; position:absolute; top:10px; left:16px; font-size:17px; font-weight:700; color:#2096ce;} .list_type > dt:nth-last-child(2):not(.open) {border-bottom:0;} .list_type > dt > span {overflow:hidden; display:block; display:-webkit-box; margin:3px 0; max-width:calc(100% - 50px); font-size:15px; line-height:1.35; max-height:2.7em; -webkit-box-orient:vertical; -webkit-line-clamp:2;} .list_type > dt i:not([class]) {display:inline-block; margin:0 2px; color:#2096ce; font-weight:700; font-size:14px; vertical-align:middle;} .list_type > dd {background:#fafafa; font-size:14px;} .list_type > dd .btn_small2 {background:none;} .list_type > dt.open > span {display:block; max-height:100%; font-weight:700;} .list_type > dt.open + dd {overflow:auto; padding:26px 40px; max-height:514px; background-color:#f7f7f8; border-bottom:1px solid #dee0e2;} .list_type > dt.open + dd > div:last-child {margin-top:14px;} dl.list_type b {font-weight:800; color:#000;} /* LISTTYPE :라인없음 */ .list_type.t1 {padding-top:4px; border-top-color:#dee0e2; border-bottom:0;} .list_type.t1 a {font-size:13px;} /* LISTTYPE :박스형 */ .list_type.t2 {padding:14px 19px; border:1px solid #dee0e2; border-radius:6px;} .list_type.t2 a {padding-left:9px;} .list_type.t2 a:before {content:''; display:block; position:absolute; top:50%; left:0; margin:-1px 0; width:3px; height:3px; border-radius:50%; background:#020219;} .list_type.t2 a > time {color:#8693a0; font-size:13px;} /*-------------------------------------------------------------------------------- # 게시판 :리스트형+썸네일 ---------------------------------------------------------------------------------*/ .list_type2 {border-top:1px solid #5b646e; border-bottom:1px solid #adb1b6;} .list_type2 a {display:block; position:relative; padding:16px 0;} .list_type2 a:after {content:''; display:block; position:absolute; top:50%; right:19px; margin:-7px 0; width:13px; height:13px; border-bottom:2px solid #5b646e; border-left:2px solid #5b646e; transform:rotate(-135deg)} .list_type2 a:hover strong {color:#2096ce; text-decoration:underline;} .list_type2 .area1, .list_type2 .area2 {display:inline-block; vertical-align:middle;} .list_type2 .area1 {margin-right:30px; width:230px; height:160px;} .list_type2 .area2 {width:70%;} .list_type2 .area2 > i {display:inline-block; font-weight:700; color:#adb1b6; font-size:14px; vertical-align:middle;} .list_type2 .area2 > strong, .list_type2 .area2 > span {overflow:hidden; display:block; max-width:100%; text-overflow:ellipsis; white-space:nowrap;} .list_type2 .area2 > strong {margin:2px 0; font-size:23px;} .list_type2 .area2 > span {font-size:16px;} .list_type2 .area2 .txt_info2 {margin-top:14px; font-size:14px; color:#5b646e;} .list_type2 li + li {border-top:1px solid #dee0e2;} /* LISTTYPE2 :이미지사이즈 :124*94 */ .list_type2.t1 a {padding:12px 16px;} .list_type2.t1 .area1 {margin-right:15px; width:124px; height:94px;} .list_type2.t1 .area1:before {transform:scale(0.7)} .list_type2.t1 .area2 > strong {margin:7px 0 0; font-size:16px;} .list_type2.t1 .area2 .txt_info {color:#5b646e;} /* LISTTYPE2 :간격 */ .mes_type3 + .list_type2 {margin-top:-35px; border-top:0;} /*-------------------------------------------------------------------------------- # 선택박스 :라인 ---------------------------------------------------------------------------------*/ .list_type3 {margin:20px 0;} .list_type3 > li, .list_type3 > .area {display:block; position:relative; padding:10px 12px 11px 20px; width:100%; border:1px solid #dee0e2; font-size:14px; box-sizing:border-box; font-weight:700; border-radius:6px} .list_type3 > li + li, .list_type3 > .area + .area {margin-top:-1px;} .list_type3 > .area > .txt_data3 {font-size:14px;} .list_type3 > .area > .txt_data3:nth-last-child(2) {margin-left:30px;} .list_type3 .icon_txt1 {margin-right:3px;} .list_type3 [class*="choice_type"] {position:absolute; top:0; left:0; right:0; bottom:0;} .list_type3 [class*="choice_type"] > em:before {left:20px;} .list_type3 label.choice_type2 em:after {left:24px;} /*-------------------------------------------------------------------------------- # 제휴사 :로고형 ---------------------------------------------------------------------------------*/ .list_type4{margin:-8px; font-size:0;} .list_type4 li{display:inline-block; overflow:hidden; margin:8px; width:calc(20% - 16px); height:70px; font-size:0; text-align:center; border:1px solid #dee0e2; border-radius:5px; box-sizing:border-box;} .list_type4 li[class*="ipartner"]:before{margin-top:10px;} /*-------------------------------------------------------------------------------- # 알림 ---------------------------------------------------------------------------------*/ .list_mes {position:relative; padding:8px 20px 0;} .list_mes:before {content:''; position:absolute; left:67px; top:30px; bottom:0; width:2px; background:#bde5f6; z-index:-1;} .list_mes > dt {position:relative; padding-bottom:13px; padding-left:39px; background:#fff; font-size:18px; font-weight:700;} .list_mes > dt:not(:first-child) {padding-top:34px;} .list_mes > dt:before {content:''; display:inline-block; width:18px; height:18px; margin:-2px 4px 0 0; background:url("../img/common/icon_set1.png") no-repeat -240px -40px; vertical-align:middle;} .list_mes > dt + dd:before {content:''; position:absolute; left:44px; top:-17px; width:6px; height:6px; border-radius:50%; background:#24aae1;} .list_mes > dd {position:relative; margin-top:10px; padding:11px 76px 13px 29px; border:1px solid #dee0e2; border-radius:4px; background:#fff;} .list_mes > dd > .cont {position:relative; padding-left:55px; letter-spacing:-0.7px;} .list_mes > dd > .cont > p {margin-bottom:2px; font-weight:700;} .list_mes > dd > .cont > p ~ * {font-size:13px;} .list_mes > dd > .cont > [class*="icon"]:before {content:''; position:absolute; top:50%; left:0; width:36px; height:36px; margin-top:-18px; border-radius:50%; background:#24aae1;} .list_mes > dd > .cont > [class*="icon"]:after {content:''; position:absolute; top:50%; background:url("../img/common/icon_set1.png") no-repeat;} .list_mes > dd > .cont > .icon1:after {left:8px; width:20px; height:16px; margin-top:-8px; background-position:-840px -120px;} .list_mes > dd > .cont > .icon2:after {left:10px; width:16px; height:16px; margin-top:-8px; background-position:-880px -120px;} .list_mes > dd > .cont > .icon3:after {left:9px; width:18px; height:18px; margin-top:-9px; background-position:-920px -120px;} .list_mes > dd > .cont > .icon4:after {left:9px; width:18px; height:19px; margin-top:-8px; background-position:-960px -120px;} .list_mes > dd > .cont > b + *:before {content:''; display:inline-block; width:1px; height:12px; margin:-1px 10px 0 10px; background:#dee0e2; vertical-align:middle;} .list_mes > dd > .btn_del2 {display:block; position:absolute; top:50%; right:19px; margin-top:-9px; z-index:2;} .list_mes > dd > a {overflow:hidden; position:absolute; left:0; right:0; top:0; bottom:0; width:0; padding-left:100%; z-index:1;} .list_mes > dd.visited > .cont > * {color:#adb1b6 !important;} .list_mes > dd.visited > .cont > [class*="icon"]:before {background:#adb1b6;} /*-------------------------------------------------------------------------------- # 인기 :유형1 ---------------------------------------------------------------------------------*/ .list_best {counter-reset:best2;} .list_best > li {position:relative;} .list_best > li:before {content:counter(best2); counter-increment:best2; position:absolute; top:8px; left:17px; font-size:37px; color:#24aae1; font-weight:100; font-family:'Spoqa Han Sans'; font-style:italic;} .list_best > li + li {border-top:1px solid #dee0e2;} .list_best a {display:block; padding:14px 20px 10px 59px; font-size:15px; color:#020219;} .list_best cite {display:block; margin:2px 0; font-weight:700;} .list_best .txt_info > dd {font-size:15px; color:#020219;} .list_best .txt_data {display:block; margin:6px 0;} .list_best .txt_data > strong {font-size:24px;} /*-------------------------------------------------------------------------------- # 인기 :유형2 ---------------------------------------------------------------------------------*/ .list_best2 {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-direction:column; justify-content:center; padding:0 29px 0 72px; height:346px; border:1px solid #cdd0d3; border-radius:6px; counter-reset:best3;} .list_best2 > li {position:relative;} .list_best2 > li a {display:block; padding:10px 0 9px; color:#4b4bac; font-weight:700; transition:all 0.2s;} .list_best2 > li a:before {content:counter(best3); counter-increment:best3; display:block; position:absolute; top:50%; left:-53px; margin:-19px 0; text-align:center; width:38px; height:38px; border-radius:50%; background:#adb1b6; font-size:20px; line-height:38px; font-family:'Spoqa Han Sans'; color:#fff; font-style:italic; font-weight:400; text-indent:-3px;} .list_best2 > li em, .list_best2 > li strong {overflow:hidden; display:block; width:100%; font-size:14px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap;} .list_best2 > li strong {color:#7c838b; font-size:13px; font-weight:400;} /* .list_best2 > li strong:before {content:'#'} DB에 저장되어 있음 */ .list_best2 > li + li {border-top:1px solid #f2f3f4;} /* LISTBEST2 :마우스오버 */ .list_best2 > li a:hover, .list_best2 > li.on a {padding:21px 0;} .list_best2 > li a:hover:before, .list_best2 > li.on a:before {left:-59px; margin:-25px 0; width:50px; height:50px; background-color:#4b4bac; font-size:27px; line-height:50px; text-indent:-5px;} .list_best2 > li a:hover em, .list_best2 > li.on a em {font-size:16px; color:#393992; font-weight:800;} .list_best2 > li a:hover strong, .list_best2 > li.on a strong {margin-top:1px; font-size:15px; color:#4b4bac; font-weight:700;} /* LISTBEST2 :마우스오버 + 첫번째일경우, 마지막일 경우 */ .list_best2 > li:first-child a:hover, .list_best2 > li.on a {padding-top:10px;} .list_best2 > li:last-child a:hover {padding-bottom:10px;} .list_best2 > li:first-child a:hover:before, .list_best2 > li.on a:before {margin:-30px 0;} .list_best2 > li:last-child a:hover:before {margin:-20px 0;} /*-------------------------------------------------------------------------------- # 게시판 :카드형1 ---------------------------------------------------------------------------------*/ .list_card {margin:-4px -8px -8px; font-size:0;} .list_card > li {overflow:hidden; display:inline-block; position:relative; margin:8px; width:calc(33.3% - 16px); background:#fff; border-radius:5px; vertical-align:top;} .list_card > li:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; border:1px solid #cdd0d3; border-radius:5px;} .list_card > li > a {overflow:hidden; display:block; position:absolute; top:0; left:0; z-index:3; padding-left:100%; width:0; height:100%; white-space:nowrap;} .list_card > li:hover:before {border-color:#24aae1; z-index:3;} .list_card > li:hover .area2, .list_card.t1 > li:hover {background:#eef8fd;} .list_card .area1 {display:block; height:204px; border-radius:0 !important;} .list_card .area1 img {z-index:2;} .list_card .area2 {padding:15px 20px 23px;} .t_list_card .list_card .area2{padding:15px 20px} /* 여행정보 | 월간베스트샷 예외처리 */ .list_card .area2 cite {overflow:hidden; display:block; margin-bottom:7px; font-size:17px; text-overflow:ellipsis; white-space:nowrap; font-weight:700;} .list_card .area2 cite + span {overflow:hidden; display:block; display:-webkit-box; height:36px; font-size:14px; line-height:18px; -webkit-box-orient:vertical; -webkit-line-clamp:2;} .list_card .area2 > i {margin-bottom:5px;} .list_card [data-shopping] {display:block; display:inline-flex; position:absolute; top:20px; left:20px; z-index:2; justify-content:center; align-items:center; padding:7px; height:25px; background:#fff; border-radius:25px; font-size:12px; box-sizing:border-box;} /* LISTCARD :여행에세이 */ .list_card.t1 .area1 {height:186px;} .list_card.t1 .area2 > i {display:block; margin:1px 0 4px; color:#2096ce; font-size:12px; font-weight:700;} .list_card.t1 .area2 cite {margin-bottom:3px; line-height:1.2;} .list_card.t1 .area2 cite.data2 {display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; height:2.4em; white-space:normal;} .list_card.t1 .area3 {position:relative; margin:-15px 20px 20px; text-align:left; font-size:13px;} .list_card.t1 .area3:after {content:''; display:block; clear:both;} .list_card.t1 .area3 > dt, .list_card.t1 .area3 > dd {display:inline-block; vertical-align:bottom;} .list_card.t1 .area3 > dt:first-child:not(.icm1) {display:none; overflow:hidden; position:absolute; left:0; bottom:-12px; padding-left:44px; width:0; height:44px; border-radius:50%; background:#b5b5b6;} .list_card.t1 .area3 > dt:first-child > img {position:absolute; top:0; left:0; width:44px; height:44px; border-radius:50%;} .list_card.t1 .area3 > dt:first-child:not(.icm1) + dd {/*position:absolute; left:50px; bottom:-1px;*/ color:#5b646e;} .list_card.t1 .area3 > dt:first-child:not(.icm1) + dd:before {content:'by ';} .list_card.t1 .area3 > dt.icm1 {overflow:hidden; padding-top:2px; width:20px; height:20px;} .list_card.t1 .area3 > dt.icm1 + dd {margin-bottom:-2px; font-weight:700;} .list_card.t1 .area3 > dt.icm1:first-child, .list_card.t1 .area3 > dt.icm1:first-child + dd {float:left;} .list_card.t1 .area3 > dt.icm1:first-child + dd {margin:5px 0 0 5px;} /*-------------------------------------------------------------------------------- # 게시판 :카드형2 ---------------------------------------------------------------------------------*/ .list_card2 {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; margin:-4px -8px -8px;} .list_card2 li {overflow:hidden; -ms-flex:1; flex:1; position:relative; margin:8px; padding-top:197px; min-width:263px; max-width:294px; height:347px; background:#fff; border-radius:5px; vertical-align:top; box-sizing:border-box;} .list_card2 li:before {content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; z-index:2; border:1px solid #cdd0d3; border-radius:6px;} .list_card2 li:hover:before {border-color:#24aae1 !important; z-index:3;} .list_card2 li:nth-last-child(n+4):first-child, .list_card2 li:nth-last-child(n+4):first-child ~ li {max-width:263px;} .list_card2 li > a {overflow:hidden; display:block; position:absolute; top:0; left:0; z-index:4; padding-left:100%; width:0; height:100%; white-space:nowrap;} .list_card2 .area1 {display:block; position:absolute !important; bottom:0; margin:0; width:100%; height:176px; border-radius:0 !important;} .list_card2 .area1:after {content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; background:rgba(0,0,0,0.4);} .list_card2 .area1 img {z-index:2;} .list_card2 .area2 {margin:0 30px;} .list_card2 .area2 > i, .list_card2 .area2 > cite {position:relative; z-index:2; color:#fff;} .list_card2 .area2 > i {display:block; margin:1px 0 5px; font-size:16px; font-weight:700;} .list_card2 .area2 > cite, .list_card2 .area2 > span {overflow:hidden; display:block; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;} .list_card2 .area2 > cite {max-height:87px; font-weight:400; font-size:22px; line-height:29px;} .list_card2 .area2 > span {position:absolute; top:35px; left:30px; right:30px; height:69px; line-height:23px; font-size:14px;} .list_card2 .area3 {position:absolute; top:120px; left:30px; padding:0; font-size:14px;} .list_card2 .area3 > dt, .list_card2 .area3 > dd {display:inline-block; vertical-align:bottom;} .list_card2 .area3 > dt:nth-last-child(2) {overflow:hidden; position:absolute; top:0; margin:0; padding-left:1px; width:0; white-space:nowrap;} .list_card2 .area3 > dd {color:#858b92; font-weight:400 !important;} /* LISTCARD2 :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .list_card2 {display:block; font-size:0;} .list_card2 li {display:inline-block;} } /*-------------------------------------------------------------------------------- # 게시판 :카드형3 ---------------------------------------------------------------------------------*/ .list_card3 {margin:-4px -8px -8px; font-size:0;} .list_card3 > li {overflow:hidden; display:inline-block; position:relative; margin:8px; width:calc((100% / 3) - 16px); height:208px; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; border-radius:5px; vertical-align:top; text-align:center; box-sizing:border-box;} .list_card3 > li:before {content:''; display:inline-block; height:100%; vertical-align:middle;} .list_card3 > li > a {width:100%; box-sizing:border-box; display:inline-block; padding:20px; vertical-align:middle; font-size:15px; color:#fff;} .list_card3 > li > a:before {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4);} .list_card3 > li > a > strong, .list_card3 > li > a > span {display:block; position:relative;} .list_card3 > li > a > strong {font-size:24px;} .list_card3 > li > a > span {overflow:hidden; display:block; display:-webkit-box; max-height:45px; margin:-2px 0 2px; word-break:keep-all; -webkit-box-orient:vertical; -webkit-line-clamp:2;} .list_card3.t1 > li {width:calc((100% / 4) - 16px); height:286px; text-align:left;} .list_card3.t1 > li:before {vertical-align:bottom;} .list_card3.t1 > li > a > strong{font-size:20px; line-height:1.33;} .list_card3.t1 > li > a:before {background:linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,0.6) 100%);} /*-------------------------------------------------------------------------------- # STEP :유형1 ---------------------------------------------------------------------------------*/ .step_type {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; margin:10px -5px; counter-reset:step1;} .step_type > li {flex:1; position:relative; margin:0 5px; padding:8px 26px 16px 26px; min-height:180px; background:#fff; border:1px solid #cdd0d3; border-radius:6px; font-size:14px; line-height:1.5; box-sizing:border-box; letter-spacing:-0.05em;} .step_type > li:before {content:'STEP ' counter(step1); counter-increment:step1; display:inline-block; margin:11px 0 12px; padding:0 13px; width:70px; border:1px solid #d7d7e9; border-radius:20px; font-size:13px; line-height:20px; font-weight:800; color:#393992; box-sizing:border-box; text-align:center;} .step_type li > span {display:block;} .step_type li > span:before {content:""; display:block; position:absolute; z-index:2; top:50%; left:-27px; margin:-19px 0; width:38px; height:36px; background:#fff; border:1px solid #cdd0d3; border-radius:50%; word-break:keep-all;} .step_type li > span:after {content:""; display:block; position:absolute; top:50%; right:-11px; z-index:3; margin:-25px 0; width:8px; height:10px; border-left:2px solid #fff; border-top:20px solid #fff; border-bottom:20px solid #fff; background:#fff url("../img/common/icon_set2.png") no-repeat -80px 0;} .step_type li > span > strong {display:block; margin-bottom:5px; font-size:15px;} .step_type li > span > strong ~ strong {margin-top:10px;} .step_type li > span > em {margin-bottom:3px; color:#393992; display:block;} .step_type li > span > i {font-size:13px; line-height:1.47; color:#5b646e; display:block;} .step_type li:first-child > span:before, .step_type li:last-child > span:after {display:none;} .step_type li[class^="ico"]:after {content:""; display:block; position:absolute; bottom:20px; right:20px; width:40px; height:40px; background:url('../img/common/icon_set1.png') no-repeat 0 0;} /* STEPTYPE :스타일변경 */ .step_type.t1 li {min-height:210px;} .step_type.t2 li {min-height:115px;} .step_type.t2 li > span > strong {margin-bottom:3px;} /* STEPTYPE :이미지 */ .step_type[class*="img_"] {padding-top:198px;} .step_type[class*="img_"] > li {border:0; padding:0; min-height:0;} .step_type[class*="img_"] > li:before {display:block; margin:0 0 16px;} /* STEPTYPE :아이콘 */ .step_type > li.ico1:after {background-position:0 -680px;} .step_type > li.ico2:after {background-position:-40px -680px;} .step_type > li.ico3:after {background-position:-80px -680px;} .step_type > li.ico4:after {background-position:-120px -680px;} .step_type > li.ico5:after {background-position:-160px -680px;} .step_type > li.ico6:after {background-position:-200px -680px;} .step_type > li.ico7:after {background-position:-240px -680px;} .step_type > li.ico8:after {background-position:-280px -680px;} .step_type > li.ico9:after {background-position:-320px -680px;} .step_type > li.ico10:after {background-position:-360px -680px;} .step_type > li.ico11:after {background-position:-400px -680px;} .step_type > li.ico12:after {background-position:-440px -680px;} .step_type > li.ico13:after {background-position:-480px -680px;} .step_type > li.ico14:after {background-position:-280px -680px;} .step_type > li.ico15:after {background-position:-520px -680px;} .step_type > li.ico16:after {background-position:-560px -680px;} .step_type > li.ico17:after {background-position:-600px -680px;} .step_type > li.ico18:after {background-position:-640px -680px;} .step_type > li.ico19:after {background-position:-680px -680px;} .step_type > li.ico20:after {background-position:-720px -680px;} .step_type > li.ico21:after {background-position:-760px -680px;} /* STEPTYPE :IE9 */ @media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .step_type {display:table; table-layout:fixed; width:calc(100% + 20px); margin:0 -10px; border-spacing:10px;} .step_type li {display:table-cell; height:178px;} .step_type li > span:before, .step_type li > span:after {display:none;} } /*-------------------------------------------------------------------------------- # STEP :유형1 + 스타일변형 ---------------------------------------------------------------------------------*/ .stepway_type {padding:120px 25px 20px; border:1px solid #cdd0d3; box-sizing:border-box; border-radius:8px; position:relative; counter-reset:ctn 0;} .stepway_type:before {content:''; width:100%; height:1px; border-top:1px dashed #dee0e2; display:block; margin-bottom:20px;} .stepway_type li {padding-bottom:6px; font-weight:700; font-size:15px;} .stepway_type li:before {content:counter(ctn) '. ' ; counter-increment:ctn 1;} .stepway_type li span {font-weight:400; color:#020219; display:inline-block;} /* [STEPWAYTYPE] :화살표위치 */ .stepway_type li:after, .stepway_type li strong:after {content:''; position:absolute; background-repeat:no-repeat;} .stepway_type li + li:after {width:6px; height:10px; margin-left:20px; background:url('../img/common/icon_set2.png') no-repeat -80px 0; top:55px;} .stepway_type li:nth-child(2):after {left:calc((100% - 50px) / 6);} .stepway_type li:nth-child(3):after {left:calc(((100% - 50px) / 6) * 2);} .stepway_type li:nth-child(4):after {left:calc(((100% - 50px) / 6) * 3);} .stepway_type li:nth-child(5):after {left:calc(((100% - 50px) / 6) * 4);} .stepway_type li:nth-child(6):after {left:calc(((100% - 50px) / 6) * 5);} /* [STEPWAYTYPE] :아이콘 */ .stepway_type li strong:after {width:40px; height:40px; margin-left:-20px; background:url('../img/common/icon_set1.png'); top:25px;} .stepway_type li:first-child strong:after {left:calc(25px + (100% - 50px) / 12); background-position:-480px -720px;} .stepway_type li:nth-child(2) strong:after {left:calc(25px + ((100% - 50px) / 6) + ((100% - 50px) / 12)); background-position:-520px -720px;} .stepway_type li:nth-child(3) strong:after {left:calc(25px + (((100% - 50px) / 6) * 2) + ((100% - 50px) / 12)); background-position:-560px -720px;} .stepway_type li:nth-child(4) strong:after {left:calc(25px + (((100% - 50px) / 6) * 3) + ((100% - 50px) / 12)); background-position:-600px -720px;} .stepway_type li:nth-child(5) strong:after {left:calc(25px + (((100% - 50px) / 6) * 4) + ((100% - 50px) / 12)); background-position:-640px -720px;} .stepway_type li:nth-child(6) strong:after {left:calc(25px + (((100% - 50px) / 6) * 5) + ((100% - 50px) / 12)); background-position:-680px -720px;} /* [STEPWAYTYPE] :문구 */ .stepway_type li strong:before {content:attr(data-stepway); width:calc((100% - 50px) / 6); font-size:15px; position:absolute; top:74px; text-align:center;} .stepway_type li:first-child strong:before {left:25px;} .stepway_type li:nth-child(2) strong:before {left:calc(25px + ((100% - 50px) / 6));} .stepway_type li:nth-child(3) strong:before {left:calc(25px + (((100% - 50px) / 6) * 2));} .stepway_type li:nth-child(4) strong:before {left:calc(25px + (((100% - 50px) / 6) * 3));} .stepway_type li:nth-child(5) strong:before {left:calc(25px + (((100% - 50px) / 6) * 4));} .stepway_type li:nth-child(6) strong:before {left:calc(25px + (((100% - 50px) / 6) * 5));} /*-------------------------------------------------------------------------------- # STEP :유형2 ---------------------------------------------------------------------------------*/ .step_type2 {position:relative; margin:0 auto; width:530px; min-height:106px; counter-reset:step; font-size:0; text-align:center; box-sizing:border-box;} .step_type2:after {content:''; display:block; position:absolute; top:39px; left:60px; right:60px; height:2px; background:#dfdff7;} .step_type2 > li {display:inline-block; padding:20px 0; width:26%; min-width:130px; text-align:center; font-weight:700; color:#40464d; font-size:13px; vertical-align:top; box-sizing:border-box;} .step_type2 > li:first-child {position:absolute; left:0;} .step_type2 > li:last-child {position:absolute; right:0;} .step_type2 > li:before {content:''; counter-increment:step; display:block; position:relative; z-index:2; margin:0 auto 7px; width:40px; height:40px; background:#5e5ed7 url('../img/common/icon_set1.png') no-repeat -920px -720px; border:2px solid #5e5ed7; border-radius:50%; font-family:'Spoqa Han Sans'; font-size:18px; line-height:36px; color:#fff; box-sizing:border-box; text-align:center;} .step_type2 > li[title] ~ li {color:#aeaeeb;} .step_type2 > li:last-child:before, .step_type2 > li[title]:before, .step_type2 > li[title] ~ li:before {content:counter(step); background-image:none;} .step_type2 > li[title] ~ li:before {background-color:#fff; border-color:#dfdff7; color:#aeaeeb;} .step_type2 > li:nth-last-child(5) ~ li:not(:last-child) {width:19.5%;} .step_type2 > li:nth-last-child(6) ~ li:not(:last-child) {width:15.5%;} /* STEPTYPE2 :마이페이지 예약결제 */ .step_type2.t1 {width:100%;} .step_type2.t1:after {top:49px; left:10%; right:10%; background-color:#dee0e2;} .step_type2.t1 > li {padding:30px 0 15px; font-size:16px; color:#8693a0;} .step_type2.t1 > li:first-child, .step_type2.t1 > li:last-child {width:22.5%;} .step_type2.t1 > li:before {margin-bottom:10px; border-width:10px; background-position:-200px -240px;} .step_type2.t1 > li:before, .step_type2.t1 > li[title] ~ li:before {background-color:#dee0e2; border-color:#dee0e2; color:#8693a0; font-size:16px; line-height:20px;} .step_type2.t1 > li[title] {color:#2096ce;} .step_type2.t1 > li[title] ~ li {color:#8693a0;} .step_type2.t1 > li[title]:before {background-color:#24aae1; border-color:#24aae1; color:#fff;} /*.step_type2.t1 > li[title].on:before {content:''; background-image:url('../img/common/icon_set1.png'); background-position:-160px -240px;}*/ /*-------------------------------------------------------------------------------- # STEP :유형3 ---------------------------------------------------------------------------------*/ .step_type3 {font-size:0.95em} .step_type3 > li {display:inline;} .step_type3 > li + li:before {content:' > ';} /*-------------------------------------------------------------------------------- # STEP :유형4 ---------------------------------------------------------------------------------*/ .step_type4 {clear:both;} .step_type4 > p.icm2 {position:relative; z-index:2; padding:12px 0 10px; background:#eeeff0; border:1px solid #cdd0d3; border-radius:6px 6px 0 0; text-align:center; font-size:16px; font-weight:700; color:#7c838b;} .step_type4 > p.icm2.txt_c {border-color:#bde5f6; background-color:#e9f6fc;} .step_type4 > p.icm2.txt_c2 {border-color:#ffc7c9; background-color:#ffeced;} .step_type4 > p.icm2:before {margin-top:-3px; width:19px; height:19px; background-position:-80px -360px;} .step_type4 > p.icm2.txt_c:before {background-position:-160px -360px;} .step_type4 > p.icm2.txt_c2:before {background-position:-200px -360px;} .step_type4 > p.icm2 + ol {margin-top:-1px;} .step_type4 .btn_txt.arr1, .step_type4 time.txt_c2 {font-weight:700;} .step_type4 time.txt_c2 {letter-spacing:-0.05em;} /* STEPTYPE4 :프로세스 */ .step_type4 ol {display:table; table-layout:fixed; width:100%; border-radius:0 0 6px 6px; border:1px solid #dee0e2; box-sizing:border-box;} .step_type4 ol > li {display:table-cell; position:relative; border-left:1px solid #dee0e2;} .step_type4 ol > li > strong {display:block; position:relative; margin:-1px -1px 0; padding:0 20px; height:48px; border-bottom:1px solid #dee0e2; font-size:15px; line-height:49px; text-decoration:underline; cursor:pointer;} .step_type4 ol > li > strong:before, .step_type4 ol > li > strong:after {display:block; position:absolute; top:0; left:-1px; width:0; height:0; background:transparent; border:24px solid transparent; border-left:11px solid #fff; border-right:0;} .step_type4 ol > li > strong:before {top:0; left:0; border-left-color:#dee0e2;} .step_type4 ol > li > em {display:block; position:absolute; top:14px; right:9px; padding:1px 5px; width:52px; background:#24aae1; color:#fff; text-align:center; border-radius:20px; letter-spacing:-0.05em;} .step_type4 ol > li > .btn_wrap {margin:20px;} .step_type4 ol > li > .btn_wrap > .btn_small:only-child {width:100%;} .step_type4 ol > li:last-child > em {right:19px;} .step_type4 ol > li:not(:first-child) > strong:before, .step_type4 ol > li:not(:first-child) > strong:after {content:'';} .step_type4 ol > li:first-child {border-left:0;} /* STEPTYPE4 :현재상태 */ .step_type4 ol > li[title] > strong {background:#24aae1; border-color:#24aae1; color:#fff;} .step_type4 ol > li[title] > em {background:#ffd800; color:#2096ce;} .step_type4 ol > li[title] + li > strong:after {left:0; border-left-color:#24aae1;} .step_type4 ol > li[title] + li > strong:before {display:none;} .step_type4 ol > li[title] ~ li > strong {color:#8693a0;} .step_type4 ol > li[title] ~ li > em {background:#adb1b6;} /* STEPTYPE4 :정보 */ .step_type4 dl {margin:12px 20px; text-align:right; font-size:13px;} .step_type4 dl:after {content:''; clear:both; display:block;} .step_type4 dl > dt {float:left; clear:left; width:35%; text-align:left; color:#5b646e;} .step_type4 dl > dt, .step_type4 dl > dd {padding:3px 0 4px;} .step_type4 dl > dd > em {display:block; margin-top:7px; font-weight:700;} .step_type4 dl > dd > [data-tooltip] {float:left; margin:-19px 0 0;} .step_type4 dl > dd > .btn_wrap {clear:both; overflow:hidden; margin-bottom:-5px; padding-top:7px; width:100%; border-radius:3px;} .step_type4 dl > dd > .btn_wrap > .btn_small {margin:0;} .step_type4 dl > dd > .btn_wrap > .btn_small:hover {position:relative; z-index:1;} .step_type4 dl > dd > .btn_wrap > .btn_small:first-child {float:left; width:50%; border-top-right-radius:0; border-bottom-right-radius:0;} .step_type4 dl > dd > .btn_wrap > .btn_small:last-child {float:right; margin-left:-1px; width:calc(50% + 1px); border-top-left-radius:0; border-bottom-left-radius:0;} .step_type4 dl > dd > .btn_wrap > .btn_small:only-child {float:none; width:100%; border-radius:3px;} /*-------------------------------------------------------------------------------- # 기획전 페이지 : PC 탑버튼 ---------------------------------------------------------------------------------*/ /* 기존 탑버튼 삭제 */ .content.event .pro-wrap div.top-btn, .content.event .pro_wrap div.top-btn, .content.event .promotion_wrap div.top-btn {display: none !important;} /* 클래스 변경된 탑버튼 */ div.promotion_topWrap {width:40px; border-radius:100%; position:fixed; bottom:100px; left:50%; margin-left:570px; background-color:#fff; box-shadow: 0px 3px 5px 2px rgb(0 0 0 / 30%); z-index:1000;} div.promotion_topWrap a {font-size:0; padding:10px; position:relative; display:block; height:100%; text-align:center; } div.promotion_topWrap img {width:100%;}