@charset "utf-8";
body {
    background-color: #fafafa;
}
.wrap:after{
    content: "";
    clear: both;
    display: block;
}
.wrap {
    width: 1024px; 
    height: 1448px;
    overflow: hidden;
    margin: 0 auto; 
    background-color: #fff; 
    box-sizing: border-box;
    box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
}
.section1 {
    height: 1448px;
    float: left; 
    width: 34%;
    padding: 70px 40px; 
    box-sizing: border-box;
    background-color: #eee;
}
.section2 {
    float: left; 
    width: 66%;
    padding: 70px 40px; 
    box-sizing: border-box;
}


.name_box {
    border: 2px solid #000;
    text-align: center;
    padding: 30px 0;
}


.name_box dt { 
    font-size: 38px;
}
.name_box dd {
    margin-top: 14px;
    padding-left:6%;
}
.name_box dd i {margin-right:8px;}
.name_box dd  p {
    margin-top: 8px;
    line-height:1.2;
}


.name_box dd p:nth-child(1) i {margin-left:3px} 
.name_box dd p:nth-child(3) i {margin-left:2px} 


.cntbox1 .tit1 {
    margin: 80px auto 20px;
    font-size: 26px;
    letter-spacing: 3px;
    text-align: center;
}

.list1 li {
    position: relative;
    margin-top: 12px; 
    line-height: 1.3;    
}
.list1 li span {
    display: inline-block;
    margin-left: 31px;
    font-size: 15px;
}
.list1 li i {
    display: inline-block;
    position: absolute;
    width: 24px; 
    line-height: 1.3;
    left: 0;
    top: 0;
    text-align: center;
    text-indent: 0;
}

.list1 a {
    text-decoration: underline;
    word-break:break-all;
}

.cntbox1 > p {
    line-height: 1.4;
    font-size: 16px;
}


.list2 {
    margin-top: 20px;
}
.list2 li p:before {
    position: absolute;
    
    content: "";
    display: inline-block;
    width: 13px; 
    height: 13px;
    background: url(../images/icon_bullet.png) no-repeat center center;
    background-size: 13px;
    left: 0;
    top: 0;
}
.list2 li p {
    position: relative;
    font-weight: 500;
    margin: 15px 0 6px;
    padding-left: 20px;
    
}
.list2 li span {
    font-weight: 300;
    line-height: 1.3;
    margin-left: 20px;
}
.list2 li span.fs_s {
    font-size:14px;
}
.list3 li:after {content:""; display:block; clear:both;}
.list3 li {margin-bottom:15px;}
.list3 li p {float:left; width:36%; font-weight:500; font-size:14px;}
.list3 li p.fs_s {font-size:12px; font-weight:600; margin-top:4px;}
.list3 li div {position:relative; float:left; width:64%; height:6px; margin-top:6px; background-color:#e5e5e5; border-radius:100px; overflow:hidden;}
.list3 li div:after {content:""; display:block; position:relative; width:100%; height:100%; border-radius:100px; background:#56A8DD;}

/*
.list3 li:nth-child(1) div:after {background:linear-gradient(to right, rgba(0,200,255,1) 0%, rgba(0,0,0,0) 100%);}
.list3 li:nth-child(2) div:after {background:linear-gradient(to right, rgba(255,171,44,1) 0%, rgba(0,0,0,0) 80%);}
.list3 li:nth-child(3) div:after {background:linear-gradient(to right, rgba(255,75,75,1) 0%, rgba(0,0,0,0) 90%);}
.list3 li:nth-child(4) div:after {background:linear-gradient(to right, rgba(58,77,188,1) 0%, rgba(0,0,0,0) 100%);}
.list3 li:nth-child(5) div:after {background:linear-gradient(to right, rgba(187,56,251,1) 0%, rgba(0,0,0,0) 100%);}
.list3 li:nth-child(6) div:after {background:linear-gradient(to right, rgba(78,244,215,1) 0%, rgba(0,0,0,0) 70%);}
.list3 li:nth-child(7) div:after {background:linear-gradient(to right, rgba(78,244,215,1) 0%, rgba(0,0,0,0) 70%);}
*/


.list3 li:nth-child(1) div:after {width:90%;}
.list3 li:nth-child(2) div:after {width:80%;}
.list3 li:nth-child(3) div:after {width:100%;}
.list3 li:nth-child(4) div:after {width:100%;}
.list3 li:nth-child(5) div:after {width:100%;}
.list3 li:nth-child(6) div:after {width:80%;}
.list3 li:nth-child(7) div:after {width:60%;}


.list5 li {line-height:1.4; margin-bottom:10px; position:relative; padding-left:10px; font-size:16px;}
.list5 li:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:7px; width:3px; height:3px; background:#333;}


.cntbox2 {margin-bottom:60px;}
.cntbox2 .tit2 {border-bottom:1px solid #333; padding-bottom:8px; margin-bottom:20px;}
.cntbox2 .tit2 span {position:relative; font-size:28px;}
.cntbox2 .tit2 span:after {content:""; display:block; position:absolute; width:100%; height:3px; background-color:#333; bottom:-7px;}

.list4:after {content:""; display:block; clear:both;}
.list4 li {float:left; width:50%; position:relative; padding-left:20px; margin-bottom:15px; font-size:18px; box-sizing:border-box;}
.list4 li:before {position:absolute; content:""; display:inline-block; width:14px;  height:14px; background:url(../images/icon_bullet.png) no-repeat center center; background-size:14px; left:0; top:2px;}

.list5:after {content:""; display:block; clear:both;}
.list5 ~ .list5 {margin-top:30px;}
.list5 dt {float:left; position:relative; width:20%; padding-left:20px; margin-bottom:15px; font-size:19px; box-sizing:border-box; font-weight:500;}
.list5 dt:before {position:absolute; content:""; display:inline-block; width:14px; height:14px; background:url(../images/icon_bullet.png) no-repeat center center; background-size:14px; left:0; top:2px;}
.list5 dt span {display:block;}
.list5 dt span ~ span:before {content:"/"; display:block; text-align:center;  width:70px; margin-bottom:6px; margin-top:-4px;}
.list5 dt span ~ span {margin-top:10px;}

.list5 dd {float:left; width:80%;}
.list5 dd p {font-size:18px; margin-bottom:10px;}
.list5 dd em {font-weight:500; font-size:20px;}

.list5.list5_1 dt {font-size:16px;}
.list5.list5_1 dt:before {top:0;}

.list5.list5_2 dt {float:none; width:100%; }
.list5.list5_2 dd {float:none; width:100%; margin-left:20px;}

.list5.list5_2 dt:after {content:""; clear:both; display:block;}
.list5.list5_2 dt span {float:left; margin:0 10px 0 0; padding:0;}
.list5.list5_2 dt span ~ span {margin:0;  padding:0; padding:0;}
.list5.list5_2 dt span ~ span:before {content:"-"; display:inline-block; margin-right:12px;}



.list6 li {position:relative; font-size:18px; padding-left:16px; margin-bottom:8px; font-weight:300; line-height:1.2;}
.list6 li:before {position:absolute; content:""; display:block; width:3px; height:3px; background-color:#333; top:7px; left:0;}



.btn_print {
    position: fixed;
    border-radius:4px;
    top:20px; 
    right:20px;
    width:150px; 
    height:40px;
    line-height:40px;
    background-color:#56A8DD;
	border: 1px solid #519CCC;
    text-align: center;
    z-index: 100;
}

.btn_print a {
    display:block;
    position:relative;
    color:#fff;
    padding-left:35px;
    box-sizing: border-box;
	letter-spacing: 3px;
	font-weight: 700;
	font-size:15px;
}
.btn_print a:after {
    content: "";
    position:absolute;
    display:block;
    width:24px;
    height:14px;
    background:url(../images/icon-print.svg) no-repeat 0 0;
    background-size: contain;
    top:14px;
    left:26px;
}
.btn_print span {
    position:absolute;
    display:block;
    width:16px; 
    height:6px;
    left:30px;
    top:8px;
    background: url(../images/icon-paper-empty.svg) no-repeat 0 0;
	background-size: 100%;
}


.btn_print:hover span{
    top:14px;
    transition: .3s ease;
}
.btn_print span:after{
    position:absolute;
    width:16px;
    background: url(../images/icon-paper-printed.svg) no-repeat center bottom;
    content:"";
    display:block;
    left:0px;
    top:11px;
    z-index:10;
    height:0;
    background-size:100%;
	height:0px;
}
.btn_print:hover span:after{
    height:8px;
    transition: height .3s ease;
}
.btn_print span:before{
    content:"";
    display: block;
    width: 148px;
    height: 38px;
    border: 1px solid #fff;
    position:fixed;
    top:21px; 
    right:21px;
    border-radius:3px;
    opacity:0.3;
    z-index:0;
}
@media print {
.btn_print {display:none;}
}
.tablet {
    display: none;
}


@media only screen and (max-width:1024px) {
    .btn_print {display:none;}
    .wrap {
        display: none;
    }
    .tablet {
        position:relative;
        display:block;
        width:100%;
        padding-bottom:142%;
        background: url(../images/jay-resume-2025.png) no-repeat center center;
        background-size:100%;
    }
    .tablet .link1 {position:absolute; display:block; width:24%; padding-bottom:2.6%; z-index:10; top:33.5%; left:8%;}
    .tablet .link2 {position:absolute; display:block; width:24%; padding-bottom:3.6%; z-index:10; top:36.1%; left:8%;}
} 